:root {
      --bg: #faf9f7;
      --surface: #fff;
      --border: rgba(0, 0, 0, .08);
      --text: #1a1a1a;
      --text2: #4a4a4a;
      --text3: #8a8a8a;
      --accent: #2563eb;
      --accent2: #c2410c;
      --green: #16a34a;
      --red: #dc2626;
      --orange: #ea580c;
      --radius: 16px;
      --shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
      --col: 640px;
      --col-wide: 860px;
      --section-gap: 80px;
      --font-serif: 'Noto Serif JP', 'Georgia', serif;
      --font-sans: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      padding: 0;
      font-family: var(--font-sans);
      color: var(--text);
      background: var(--bg);
      font-size: 1.05rem !important; 
      line-height: 1.75 !important;  
      letter-spacing: .01em;
    }

    .global-bg {
      position: fixed;
      inset: 0;
      z-index: -10;
      background-color: var(--bg);
      background-image: url('/images/hero_bg_premium.png');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      filter: blur(var(--scroll-blur, 0px));
      will-change: filter;
      display: none; 
    }

    
    .g-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding: 0 32px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .g-header__logo {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--accent);
      text-decoration: none;
      letter-spacing: -.02em;
    }

    .g-header__nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .g-header__link {
      font-size: .82rem;
      font-weight: 600;
      color: var(--text2);
      text-decoration: none;
      padding: 8px 14px;
      border-radius: 8px;
      transition: all .2s;
    }

    .g-header__link:hover,
    .g-header__link.active {
      color: var(--accent);
      background: rgba(0, 113, 227, .06);
    }

    
    .g-header__burger {
      display: none;
      background: none;
      border: none;
      font-size: 1.4rem;
      cursor: pointer;
      color: var(--text);
      padding: 4px;
    }

    @media (max-width: 768px) {
      .g-header { padding: 0 16px; }
      .g-header__nav { display: none; }
      .g-header__nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        padding: 12px 16px;
        box-shadow: 0 4px 16px rgba(0,0,0,.06);
      }
      .g-header__burger { display: block; }
    }

    
    .app-layout {
      display: block;
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      background: transparent;
    }

    
    .sidebar {
      display: none !important;
    }

    @media (min-width: 1024px) {
      .sidebar {
        display: block;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        background: rgba(255, 255, 255, .5);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 40px 20px 40px 24px;
      }
    }

    .sidebar p {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 16px;
      padding-left: 14px;
    }

    .sidebar a {
      display: block;
      font-size: .85rem;
      font-weight: 600;
      color: #424245;
      text-decoration: none;
      padding: 10px 14px;
      border-radius: 8px;
      transition: all .25s;
      margin-bottom: 4px;
      line-height: 1.4;
    }

    .sidebar a:hover,
    .sidebar a.active {
      color: var(--accent);
      background: rgba(0, 113, 227, .08);
    }

    
    .main-content {
      padding: 0 0 120px;
      min-width: 0;
    }

    .col {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .col-wide {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 32px;
    }

    
    .s {
      padding-top: var(--section-gap);
      padding-bottom: 64px;
      scroll-margin-top: 40px;
      position: relative;
      background: rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-radius: 20px;
      max-width: 900px;
      margin: 12px auto;
    }

    .s .eyebrow {
      font-size: .62rem;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent2);
      margin-bottom: 12px;
      font-family: var(--font-sans);
    }

    .s h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 900;
      letter-spacing: -.02em;
      line-height: 1.25;
      color: var(--text);
      margin-bottom: 16px;
      word-break: keep-all;
    }

    
    .s__lead {
      font-size: .92rem;
      color: var(--text2);
      line-height: 1.9;
      margin-bottom: 36px;
      max-width: 580px;
    }

    .s h3 {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -.01em;
      margin: 48px 0 20px;
      color: var(--text);
      padding-left: 16px;
      border-left: 3px solid var(--accent2);
    }

    
    .breadcrumb{padding:8px 0;font-size:.75rem;color:var(--text3)}
    .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0 var(--gutter)}
    .breadcrumb li+li::before{content:"›";margin-right:4px;color:var(--text3)}
    .breadcrumb a{color:var(--accent);text-decoration:none}
    .breadcrumb a:hover{text-decoration:underline}

    
    .hero {
      text-align: center;
      padding: 0;
      color: var(--text);
      position: relative;
      overflow: hidden;
      background: transparent;
    }

    
    .hero--article {
      background: rgba(255, 255, 255, 0.35) !important;
      backdrop-filter: blur(18px) !important;
      -webkit-backdrop-filter: blur(18px) !important;
      border-radius: 20px;
      max-width: 900px;
      margin: 24px auto 12px; 
    }

    .hero--article::after {
      display: none; 
    }

    
    .hero::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.78));
      pointer-events: none;
      z-index: 0;
    }

    .hero__inner {
      position: relative;
      z-index: 1;
      padding: 100px 32px 72px;
    }

    .hero .eyebrow {
      font-size: .62rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--accent2);
      margin-bottom: 16px;
      font-family: var(--font-sans);
    }

    .hero h1 {
      font-family: var(--font-serif);
      font-size: clamp(2.8rem, 6vw, 4.5rem);
      font-weight: 900;
      letter-spacing: -.03em;
      line-height: 1.08;
      margin-bottom: 20px;
      color: var(--text);
      word-break: keep-all
    }

    .hero .tagline {
      font-family: var(--font-serif);
      font-size: clamp(1rem, 1.8vw, 1.25rem);
      color: var(--text2);
      font-weight: 400;
      margin: 0 auto;
      line-height: 1.7;
      word-break: keep-all;
      overflow-wrap: anywhere;
      max-width: 660px;
      text-wrap: balance;
    }

    .tl-line {
      display: inline-block;
      white-space: nowrap;
    }

    

    .hero-img {
      margin: 40px auto 0;
      max-width: 340px;
    }

    .hero-img img {
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 8px 24px rgba(0,0,0,.1));
      border-radius: 12px;
    }

    
    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 24px;
      padding: 0 16px;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .78rem;
      font-weight: 600;
      padding: 7px 16px;
      border-radius: 9999px;
      letter-spacing: .01em;
      white-space: nowrap;
      cursor: pointer;
      text-decoration: none;
      border: 1px solid transparent;
      transition: all .22s cubic-bezier(.4, 0, .2, 1);
    }

    .hero-tag:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(0,0,0,.08);
    }

    .hero-tag:active {
      transform: translateY(0) scale(.97);
      box-shadow: none;
    }

    .hero-tag .tag-icon {
      font-size: .85rem;
      line-height: 1;
    }

    
    .hero-tag--anc      { background: #e8f0fe; color: #1a73e8; border-color: rgba(26,115,232,.18); }
    .hero-tag--anc:hover { background: #d2e3fc; }

    .hero-tag--hires    { background: #f3e8ff; color: #7c3aed; border-color: rgba(124,58,237,.18); }
    .hero-tag--hires:hover { background: #e9d5ff; }

    .hero-tag--connect  { background: #f1f3f4; color: #3c4043; border-color: rgba(60,64,67,.15); }
    .hero-tag--connect:hover { background: #e4e7e9; }

    .hero-tag--water    { background: #e0f7fa; color: #00838f; border-color: rgba(0,131,143,.18); }
    .hero-tag--water:hover { background: #b2ebf2; }

    .hero-tag--charge   { background: #e6f4ea; color: #137333; border-color: rgba(19,115,51,.18); }
    .hero-tag--charge:hover { background: #ceead6; }

    .hero-tag--default  { background: #f5f5f7; color: #48484a; border-color: rgba(0,0,0,.08); }
    .hero-tag--default:hover { background: #ececee; }

    
    .product-card {
      display: flex;
      gap: 32px;
      background: var(--surface);
      border-radius: var(--radius);
      padding: 36px 40px;
      align-items: center;
      text-decoration: none;
      color: var(--text);
      transition: box-shadow .4s;
      box-shadow: var(--shadow)
    }

    .product-card:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, .08)
    }

    .product-card img {
      width: 160px;
      height: 160px;
      object-fit: contain;
      flex-shrink: 0
    }

    .product-card .info h3 {
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: -.01em;
      margin-bottom: 8px;
      color: var(--text)
    }

    .product-card .price {
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -.02em;
      margin-bottom: 4px;
      color: var(--accent)
    }

    .product-card .stars {
      font-size: .8rem;
      color: var(--text2);
      margin-bottom: 16px
    }

    .product-card .btn {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      padding: 10px 28px;
      border-radius: 980px;
      font-size: .82rem;
      font-weight: 600;
      transition: background .25s
    }

    .product-card .btn:hover {
      background: #005bb5
    }

    
    .price-compare {
      display: flex;
      gap: 32px;
      align-items: flex-start;
      background: var(--surface);
      border-radius: var(--radius);
      padding: 32px 36px;
      box-shadow: var(--shadow)
    }

    .pc-img {
      flex: 0 0 140px
    }

    .pc-img img {
      width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.08))
    }

    .pc-list {
      flex: 1
    }

    .pc-list h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--text)
    }

    .pc-row {
      display: flex;
      align-items: center;
      padding: 10px 14px;
      border-radius: 10px;
      text-decoration: none;
      color: var(--text);
      transition: all .2s;
      gap: 12px
    }

    .pc-row:not(:last-child) {
      border-bottom: 1px solid var(--border)
    }

    .pc-row:hover {
      background: rgba(0,113,227,.04)
    }

    .pc-shop {
      flex: 1;
      font-size: .82rem;
      font-weight: 500;
      color: var(--text2)
    }

    .pc-best {
      display: inline-block;
      font-size: .62rem;
      font-weight: 700;
      color: #fff;
      background: #e74c3c;
      padding: 1px 6px;
      border-radius: 4px;
      margin-left: 6px
    }

    .pc-price {
      font-size: 1rem;
      font-weight: 800;
      color: var(--accent);
      letter-spacing: -.02em
    }

    .pc-go {
      font-size: .82rem;
      color: var(--accent);
      font-weight: 700
    }

    @media(max-width:768px) {
      .price-compare {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 24px
      }
      .pc-img {
        flex: none;
        max-width: 120px
      }
    }

    
    .hl-box {
      background: var(--surface);
      border-radius: 16px;
      padding: 0;
      box-shadow: 0 2px 16px rgba(0,0,0,.04);
      border: 1px solid rgba(0,0,0,.06);
      overflow: hidden;
      counter-reset: hl-count;
    }

    .hl-box li {
      list-style: none;
      padding: 22px 32px 22px 72px;
      border-bottom: 1px solid rgba(0,0,0,.05);
      font-size: .9rem;
      position: relative;
      color: var(--text2);
      line-height: 1.8;
      counter-increment: hl-count;
      transition: background .2s;
    }

    .hl-box li:hover {
      background: rgba(0,0,0,.015);
    }

    .hl-box li:last-child {
      border: none;
    }

    .hl-box li::before {
      content: counter(hl-count, decimal-leading-zero);
      position: absolute;
      left: 28px;
      top: 22px;
      font-size: .72rem;
      font-weight: 800;
      font-family: var(--font-sans);
      color: var(--accent);
      letter-spacing: .02em;
      opacity: .5;
    }

    .hl-box li strong {
      color: var(--text);
      font-weight: 600;
    }

    
    .spec {
      width: 100%;
      border-collapse: collapse;
    }

    .spec tr {
      border-bottom: 1px solid var(--border)
    }

    .spec th {
      text-align: left;
      padding: 14px 0;
      font-weight: 500;
      color: var(--text3);
      font-size: .82rem;
      width: 150px
    }

    .spec td {
      padding: 14px 0;
      font-size: .88rem;
      font-weight: 500
    }

    
    .vc {
      background: var(--surface);
      border-radius: 14px;
      padding: 0;
      margin: 24px 0;
      box-shadow: 0 2px 12px rgba(0,0,0,.05);
      transition: transform .3s, box-shadow .3s;
      display: grid;
      grid-template-columns: 340px 1fr;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,.06);
    }

    .vc:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .08)
    }

    .vc .vc-thumb {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      background: #000;
      width: 100%;
      aspect-ratio: 16/9;
    }

    .vc .vc-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s, opacity .4s
    }

    .vc:hover .vc-thumb img {
      transform: scale(1.03);
      opacity: 0.8
    }

    .vc .vc-thumb .play-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .85;
      transition: opacity .3s, transform .3s
    }

    .vc:hover .vc-thumb .play-overlay {
      opacity: 1;
      transform: scale(1.08)
    }

    .vc .vc-thumb.playing .play-overlay {
      display: none
    }

    .vc .vc-thumb .play-overlay svg {
      width: 56px;
      height: 56px;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5))
    }

    .vc .vc-body {
      padding: 20px 24px 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .vc .vc-body p:not(.num):not(.catch):not(.ch) {
      max-height: 70px;
      overflow: hidden;
      position: relative;
      transition: max-height 0.4s ease;
      margin-bottom: 8px;
    }

    .vc .vc-body.expanded p:not(.num):not(.catch):not(.ch) {
      max-height: 2000px;
    }

    .vc .vc-body:not(.expanded) p:not(.num):not(.catch):not(.ch)::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 40px;
      background: linear-gradient(transparent, var(--bg));
      pointer-events: none;
    }

    .vc .num {
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent2);
      margin-bottom: 6px;
      font-family: var(--font-sans);
    }

    .vc .catch {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.45;
      margin-bottom: 10px;
      color: var(--text);
      word-break: keep-all
    }

    .vc .vc-body p {
      font-size: .86rem;
      color: var(--text2);
      line-height: 1.85;
      margin-bottom: 8px
    }

    .vc .tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 8px
    }

    .vc .tag {
      font-size: .68rem;
      padding: 4px 12px;
      border-radius: 980px;
      font-weight: 500
    }

    .vc .tag.w {
      background: #edf7ee;
      color: #1a6b2a
    }

    .vc .tag.sk {
      background: rgba(0, 0, 0, .03);
      color: var(--text2)
    }

    .vc .ch {
      margin-top: 6px;
      font-size: .75rem;
      color: var(--text3);
      font-weight: 500
    }

    
    .vc details {
      margin-top: 12px
    }

    .vc summary {
      cursor: pointer;
      font-size: .78rem;
      font-weight: 600;
      color: var(--accent);
      padding: 8px 14px;
      border-radius: 10px;
      background: rgba(0, 113, 227, .05);
      transition: background .25s;
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .vc summary::-webkit-details-marker {
      display: none
    }

    .vc summary::before {
      content: '▶';
      font-size: .55rem;
      transition: transform .3s
    }

    .vc details[open] summary::before {
      transform: rotate(90deg)
    }

    .vc summary:hover {
      background: rgba(0, 113, 227, .1)
    }

    .vc .embed {
      margin-top: 10px;
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 16/9
    }

    .vc .embed iframe {
      width: 100%;
      height: 100%;
      border: none
    }

    
    .main-slider-wrap{position:relative;margin:24px auto 48px;max-width:600px}
    .main-slider-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
    .main-slider-track::-webkit-scrollbar{display:none}
    
    .main-slider-track>.vc{flex:0 0 100%;scroll-snap-align:center;margin:0;grid-template-columns:1fr;border:1px solid rgba(0,0,0,.06);border-radius:14px;box-shadow:0 2px 16px rgba(0,0,0,.05)}
    .main-slider-track>.vc .vc-thumb{aspect-ratio:16/9;border-radius:14px 14px 0 0}
    .main-slider-track>.vc .vc-body{max-height:none;padding:32px 40px 28px;overflow-y:visible}
    .main-slider-track>.vc .vc-body .catch{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1.45;margin-bottom:16px}
    .main-slider-track>.vc .vc-body p{font-size:.88rem;line-height:1.9;color:var(--text2)}
    .main-slider-track>.vc .vc-body .num{font-size:.6rem;font-weight:700;letter-spacing:.16em;color:var(--accent2);font-family:var(--font-sans);margin-bottom:12px}
    .main-slider-track>.vc .vc-body .ch{font-size:.78rem;color:var(--text3);margin-top:16px}
    
    .main-controls{display:contents}
    .main-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:200px;border-radius:12px;border:none;background:rgba(0,0,0,.04);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;z-index:10;padding:0}
    .main-nav-btn svg{width:28px;height:56px}
    .main-nav-btn:hover{background:rgba(0,113,227,.08);color:var(--accent)}
    #mainPrev{left:-58px}
    #mainNext{right:-58px}
    .main-nav-info{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:10}
    .main-dots{display:flex;gap:6px;align-items:center}
    .main-dot{width:10px;height:10px;border-radius:10px;background:rgba(0,113,227,.2);border:none;cursor:pointer;transition:all .3s;padding:0}
    .main-dot.active{background:var(--accent);width:28px}
    .main-nav-info .main-label{font-size:.72rem;font-weight:600;color:var(--accent);letter-spacing:.05em;white-space:nowrap}
    
    .main-nav-sp{display:none}
    
    .vc-expand{display:block;width:100%;padding:8px;border:none;background:none;color:var(--accent);font-size:.82rem;font-weight:600;cursor:pointer;text-align:center;transition:background .2s;}
    .vc-expand:hover{background:rgba(0,113,227,.04);}

    @media(max-width:768px){
      
      .main-nav-btn{display:none!important}
      
      .main-slider-wrap{margin-bottom:56px}
      
      .main-nav-info{display:flex;padding:10px 16px;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-radius:980px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
      .main-nav-sp{display:flex;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(0,113,227,.3);background:var(--surface);color:var(--accent);font-size:1rem;font-weight:bold;cursor:pointer;align-items:center;justify-content:center;transition:all .2s}
      .main-nav-sp:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
    }

    
    
    .carousel-wrap{position:relative;overflow:hidden;margin-top:32px;
      -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
      mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)}
    .carousel-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 calc(50% - 260px) 8px}
    .carousel-track::-webkit-scrollbar{display:none}
    .carousel-card{flex:0 0 520px;scroll-snap-align:center;background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;text-decoration:none;color:var(--text);display:block}
    .carousel-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
    .carousel-card .cc-thumb{aspect-ratio:16/9;overflow:hidden;background:#000;position:relative}
    .carousel-card .cc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
    .carousel-card:hover .cc-thumb img{transform:scale(1.04)}
    .carousel-card .cc-body{padding:16px 18px}
    .carousel-card .cc-title{font-size:.88rem;font-weight:700;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .carousel-card .cc-meta{font-size:.72rem;color:var(--text3);display:flex;gap:8px;align-items:center}
    .carousel-card .cc-meta span{white-space:nowrap}
    .carousel-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px}
    .carousel-dots{display:flex;gap:8px;align-items:center}
    .carousel-dot{width:8px;height:8px;border-radius:8px;background:rgba(0,0,0,.15);border:none;cursor:pointer;padding:0;transition:all .3s}
    .carousel-dot.active{width:24px;background:var(--accent)}
    .carousel-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(0,113,227,.3);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;color:var(--accent);font-size:1.1rem;font-weight:bold}
    .carousel-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
    @media(max-width:768px){
      .carousel-card{flex:0 0 85%}
      .carousel-track{padding:0 7.5% 8px}
    }

    
    .carousel-card .cc-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#fff;background:rgba(0,0,0,.25);opacity:0;transition:opacity .3s;pointer-events:none}
    .carousel-card:hover .cc-play-overlay{opacity:1}
    .carousel-card.cc-playing{box-shadow:0 8px 40px rgba(0,0,0,.12)}
    .carousel-card.cc-playing .cc-player-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px 16px 0 0;overflow:hidden}
    .cc-close-bar{text-align:center;padding:10px 0}
    .cc-close-bar .cc-close-btn{position:static;width:auto;height:auto;border-radius:980px;padding:8px 24px;font-size:.82rem;font-weight:600;gap:4px;background:var(--surface);color:var(--text2);border:1px solid var(--border);display:inline-flex;cursor:pointer}
    .cc-close-bar .cc-close-btn:hover{background:rgba(220,38,38,.08);color:#dc2626;border-color:rgba(220,38,38,.3)}

    @media(max-width:768px) {
      .vc {
        grid-template-columns: 1fr
      }

      .vc .vc-thumb {
        aspect-ratio: 16/9
      }
    }

    
    .fb {
      padding: 32px 36px;
      margin: 20px 0;
      border-radius: 14px;
      border-left: 4px solid;
      position: relative;
    }

    .fb.g {
      border-color: var(--green);
      background: linear-gradient(135deg, rgba(22,163,74,.04) 0%, rgba(22,163,74,.01) 100%);
    }

    .fb.b {
      border-color: var(--red);
      background: linear-gradient(135deg, rgba(220,38,38,.04) 0%, rgba(220,38,38,.01) 100%);
    }

    .fb strong {
      display: block;
      font-family: var(--font-serif);
      font-size: 1.12rem;
      font-weight: 700;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(0,0,0,.06);
      word-break: keep-all;
      letter-spacing: -.01em;
    }

    .fb.g strong {
      color: #15803d;
    }

    .fb.b strong {
      color: #b91c1c;
    }

    .fb p {
      font-size: .88rem;
      color: var(--text2);
      margin: 4px 0;
      line-height: 1.85
    }

    .fb .to {
      color: var(--accent2);
      font-weight: 600;
      font-size: .82rem;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px dashed rgba(0,0,0,.08);
    }

    
    .debate-topic {
      font-family: var(--font-serif);
      font-size: 1.1rem;
      font-weight: 800;
      text-align: center;
      margin-bottom: 6px;
      color: var(--text);
      letter-spacing: -.02em;
    }

    .dg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin: 24px 0 16px;
      position: relative;
    }

    .dg::before {
      content: 'VS';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .1em;
      color: #fff;
      background: var(--text3);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    .vs-divider {
      display: none;
    }

    .ds {
      padding: 28px 28px;
      border-radius: 14px;
      position: relative;
    }

    .ds.pro {
      background: linear-gradient(135deg, rgba(22,163,74,.05) 0%, rgba(22,163,74,.015) 100%);
      border: 1px solid rgba(22,163,74,.12);
    }

    .ds.con {
      background: linear-gradient(135deg, rgba(220,38,38,.05) 0%, rgba(220,38,38,.015) 100%);
      border: 1px solid rgba(220,38,38,.12);
    }

    .ds .lb {
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(0,0,0,.06);
    }

    .ds.pro .lb {
      color: #15803d;
    }

    .ds.con .lb {
      color: #b91c1c;
    }

    .ds .rn {
      font-weight: 700;
      font-size: .82rem;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text2);
    }

    .ds .qt {
      font-family: var(--font-serif);
      font-size: .92rem;
      color: var(--text);
      font-style: normal;
      line-height: 1.8;
      position: relative;
      padding-left: 18px;
      border-left: 3px solid rgba(0,0,0,.08);
    }
    .ds.pro .qt { border-color: rgba(22,163,74,.3); }
    .ds.con .qt { border-color: rgba(220,38,38,.3); }

    .ins {
      background: var(--surface);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      padding: 20px 28px;
      margin: 0 0 40px;
      font-size: .86rem;
      line-height: 1.8;
      color: var(--text2);
    }

    .ins strong {
      color: var(--accent2);
      font-family: var(--font-sans);
    }

    
    .disc-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .disc-filter {
      padding: 6px 16px;
      border-radius: 980px;
      border: 1px solid var(--border);
      background: var(--surface);
      font-size: .75rem;
      font-weight: 600;
      color: var(--text3);
      cursor: pointer;
      transition: all .25s;
    }

    .disc-filter:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .disc-filter.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .disc-carousel-wrap {
      position: relative;
      
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }

    .disc-carousel-track {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 16px;
      padding: 0 calc(50% - 220px) 8px;
      scrollbar-width: none;
    }

    .disc-carousel-track::-webkit-scrollbar {
      display: none;
    }

    .disc-carousel-card {
      flex: 0 0 440px;
      scroll-snap-align: center;
      display: flex;
      gap: 16px;
      padding: 22px 24px;
      background: var(--surface);
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 2px 12px rgba(0,0,0,.03);
      position: relative;
      overflow: hidden;
    }

    .disc-carousel-card.disc-hidden {
      display: none;
    }

    .disc-carousel-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, #7c3aed 0%, #06b6d4 100%);
      border-radius: 4px 0 0 4px;
    }

    .disc-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      background: linear-gradient(135deg, rgba(124,58,237,.08) 0%, rgba(6,182,212,.08) 100%);
      border-radius: 12px;
    }

    .disc-body {
      flex: 1;
      min-width: 0;
    }

    .disc-finding {
      font-size: .86rem;
      font-weight: 500;
      color: var(--text);
      line-height: 1.75;
      margin-bottom: 10px;
    }

    .disc-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .disc-ts {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: .65rem;
      font-weight: 700;
      color: var(--accent);
      background: rgba(0,113,227,.08);
      padding: 2px 8px;
      border-radius: 8px;
      text-decoration: none;
      transition: all .25s;
    }

    .disc-ts:hover {
      background: var(--accent);
      color: #fff;
    }

    .disc-link {
      font-size: .75rem;
      font-weight: 600;
      color: var(--accent);
      text-decoration: none;
      transition: color .2s;
      white-space: nowrap;
    }

    .disc-link:hover {
      color: #005bb5;
    }

    @media(max-width:768px) {
      .disc-carousel-card {
        flex: 0 0 80%;
        scroll-snap-align: center;
        padding: 18px 20px;
        gap: 12px;
      }
      .disc-carousel-track {
        padding: 0 10% 8px;
      }
      .disc-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
      }
      .disc-carousel-wrap {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
      }
    }
    .tg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin: 32px 0;
    }

    .tb {
      padding: 0;
      border-radius: 16px;
      position: relative;
      background: var(--surface);
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 2px 16px rgba(0,0,0,.04);
      transition: transform .3s, box-shadow .3s;
    }

    .tb:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0,0,0,.07);
    }

    .tb::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
    }

    .tb.y::before {
      background: linear-gradient(90deg, #16a34a, #4ade80);
    }

    .tb.n::before {
      background: linear-gradient(90deg, #dc2626, #f87171);
    }

    .tb h4 {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 700;
      padding: 28px 32px 0;
      margin-bottom: 0;
      letter-spacing: -.01em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tb.y h4 {
      color: #15803d;
    }

    .tb.n h4 {
      color: #b91c1c;
    }

    .tb ul {
      padding: 20px 32px 28px;
    }

    .tb li {
      font-size: .86rem;
      margin: 0;
      padding: 12px 0 12px 28px;
      list-style: none;
      position: relative;
      color: var(--text2);
      line-height: 1.75;
      border-bottom: 1px solid rgba(0,0,0,.04);
    }

    .tb li:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .tb li:first-child {
      padding-top: 0;
    }

    .tb.y li::before,
    .tb.n li::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .tb.y li::before {
      background: var(--green);
    }

    .tb.n li::before {
      background: var(--red);
    }

    
    .ts-mobile { display: none !important; }
    .ts-desktop { display: block; }

    .ts-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .75rem;
      table-layout: auto;
    }

    .ts-table th {
      padding: 10px 6px;
      text-align: center;
      font-weight: 700;
      color: var(--text3);
      font-size: .68rem;
      letter-spacing: .02em;
      border-bottom: 2px solid var(--border);
      word-break: break-all;
      overflow-wrap: break-word;
      line-height: 1.4;
    }

    .ts-name-cell {
      padding: 10px 12px;
      font-weight: 700;
      color: var(--text);
      font-size: .74rem;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: break-word;
      min-width: 100px;
      max-width: 160px;
      border-right: 1px solid var(--border);
      background: rgba(0,0,0,.015);
      line-height: 1.4
    }

    .ts-table td {
      padding: 0;
      border-bottom: 1px solid var(--border);
      text-align: center
    }

    .ts-table tr:last-child td {
      border-bottom: none
    }

    .ts-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px 4px;
      text-decoration: none;
      color: var(--text2);
      transition: all .25s;
      min-height: 44px;
      justify-content: center
    }

    .ts-cell:hover {
      background: rgba(0,113,227,.04)
    }

    .ts-symbol {
      font-size: 1.1rem;
      font-weight: 800;
      line-height: 1
    }

    .ts-badge {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: .6rem;
      font-weight: 700;
      color: var(--accent);
      background: rgba(0,113,227,.08);
      padding: 1px 6px;
      border-radius: 6px;
      transition: all .25s
    }

    .ts-cell:hover .ts-badge {
      background: var(--accent);
      color: #fff;
      transform: scale(1.05)
    }

    .ts-na {
      cursor: default;
      opacity: .35;
    }

    .ts-na:hover {
      background: transparent;
    }

    @media(max-width:768px) {
      .ts-desktop { display: none !important; }
      .ts-mobile { display: flex !important; }
    }

    .tsc-controls {
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 8px 0 4px;
    }

    
    .tsc-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 12px;
      padding-bottom: 12px;
      scrollbar-width: none;
    }

    .tsc-grid::-webkit-scrollbar {
      display: none;
    }

    .tsc-card {
      flex: 0 0 85%;
      max-width: 340px;
      scroll-snap-align: center;
      background: var(--surface);
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 2px 12px rgba(0,0,0,.03);
      overflow: hidden;
    }

    .tsc-header {
      padding: 14px 18px;
      font-weight: 700;
      font-size: .82rem;
      color: var(--text);
      border-bottom: 1px solid rgba(0,0,0,.06);
      background: rgba(0,0,0,.015);
    }

    .tsc-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 18px;
      border-bottom: 1px solid rgba(0,0,0,.04);
      gap: 12px;
    }

    .tsc-row:last-child {
      border-bottom: none;
    }

    .tsc-cat {
      font-size: .78rem;
      color: var(--text2);
      font-weight: 500;
      flex: 1;
      min-width: 0;
    }

    .tsc-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: var(--text2);
      padding: 4px 10px;
      border-radius: 10px;
      transition: all .25s;
      flex-shrink: 0;
    }

    .tsc-link:hover {
      background: rgba(0,113,227,.06);
    }

    .tsc-symbol {
      font-size: 1.1rem;
      font-weight: 800;
      line-height: 1;
    }

    .tsc-badge {
      font-size: .65rem;
      font-weight: 700;
      color: var(--accent);
      background: rgba(0,113,227,.08);
      padding: 2px 8px;
      border-radius: 8px;
    }

    .tsc-link:hover .tsc-badge {
      background: var(--accent);
      color: #fff;
    }

    .tsc-rating {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      flex-shrink: 0;
    }

    .tsc-na {
      opacity: .35;
    }

    
    .alt-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 24px;
    }

    .alt-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 24px 28px;
      box-shadow: var(--shadow);
      border-top: 3px solid var(--border);
      transition: transform .25s, box-shadow .25s;
    }

    .alt-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,.08);
    }

    .alt-card.alt-old {
      border-top-color: #e67e22;
    }

    .alt-card.alt-rival {
      border-top-color: #5b7fa5;
    }

    .alt-badge {
      display: inline-block;
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .06em;
      padding: 2px 10px;
      border-radius: 980px;
      margin-bottom: 12px;
    }

    .alt-old .alt-badge {
      background: #fef3e2;
      color: #b45309;
    }

    .alt-rival .alt-badge {
      background: #e8edf4;
      color: #3b5998;
    }

    .alt-name {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--text);
    }

    .alt-diff {
      font-size: .84rem;
      color: var(--text2);
      line-height: 1.75;
    }

    .alt-internal-link {
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1.5px solid rgba(0,113,227,.25);
      transition: border-color .2s, color .2s;
    }

    .alt-internal-link:hover {
      border-bottom-color: var(--accent);
      color: #004da0;
    }

    .alt-cta {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 14px;
      padding: 8px 16px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--accent);
      background: rgba(0,113,227,.06);
      border-radius: 10px;
      text-decoration: none;
      transition: background .2s, transform .2s;
    }

    .alt-cta:hover {
      background: rgba(0,113,227,.12);
      transform: translateX(3px);
    }

    
    .reframe {
      color: #1a6b2a !important;
      background: #f0faf0;
      padding: 8px 14px;
      border-radius: 10px;
      border-left: 3px solid var(--green);
      margin-top: 10px;
      font-weight: 600;
    }

    
    .src {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 32px 40px;
      box-shadow: var(--shadow)
    }

    .src li {
      list-style: none;
      padding: 8px 0;
      font-size: .85rem;
      color: var(--text2)
    }

    .src .n {
      font-size: .75rem;
      color: var(--text3);
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      line-height: 1.7
    }

    
    .fi {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s, transform .7s
    }

    .fi.vis {
      opacity: 1;
      transform: translateY(0)
    }

    

    
    .pull-quote {
      position: relative;
      padding: 72px 40px 56px;
      text-align: center;
      background: rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-radius: 20px;
      max-width: 900px;
      margin: 12px auto;
    }

    .pull-quote::before {
      content: '\201C';
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 7rem;
      font-family: Georgia, serif;
      color: var(--accent2);
      opacity: .12;
      line-height: 1;
    }

    .pull-quote__text {
      font-family: var(--font-serif);
      font-size: clamp(1.35rem, 2.8vw, 2rem);
      font-weight: 700;
      color: var(--text);
      line-height: 1.6;
      letter-spacing: -.01em;
      max-width: 640px;
      margin: 0 auto;
    }

    .pull-quote__attr {
      margin-top: 20px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--text3);
      font-family: var(--font-sans);
    }

    .pull-quote__attr::before {
      content: '── ';
      color: var(--accent2);
    }

    
    .reviewer-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 24px;
      background: rgba(0,113,227,.04);
      border-radius: 14px;
      margin-bottom: 14px;
    }

    .reviewer-card__avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(0,113,227,.15);
      flex-shrink: 0;
    }

    .reviewer-card__avatar-placeholder {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--accent), #5b7fff);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: #fff;
      font-weight: 800;
    }

    .reviewer-card__info {
      flex: 1;
      min-width: 0;
    }

    .reviewer-card__name {
      font-size: .92rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px;
    }

    .reviewer-card__desc {
      font-size: .75rem;
      color: var(--text3);
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .reviewer-card__num {
      font-size: .6rem;
      font-weight: 800;
      letter-spacing: .1em;
      color: var(--accent);
      background: rgba(0,113,227,.08);
      padding: 3px 10px;
      border-radius: 6px;
      flex-shrink: 0;
    }

    
    .section-divider {
      border: none;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
      margin: 0;
    }

    
    .hl {
      background: linear-gradient(180deg, transparent 60%, rgba(0,113,227,.12) 60%);
      padding: 0 2px;
    }

    
    .article-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 24px;
      font-size: .75rem;
      color: var(--text3);
      font-weight: 500;
      font-family: var(--font-sans);
    }

    .article-meta__item {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    
    .main-slider-track > .vc .vc-body {
      padding: 24px 32px 20px;
    }

    .vc .vc-body p {
      font-size: .88rem;
      color: var(--text2);
      line-height: 1.9;
      margin-bottom: 8px;
    }

    @media(max-width: 768px) {
      .pull-quote { padding: 48px 24px 40px; }
      .pull-quote__text { font-size: 1.15rem; }
      .dg { grid-template-columns: 1fr; }
      .vs-divider {
        writing-mode: horizontal-tb;
        padding: 6px 0;
      }
      .reviewer-card { padding: 14px 16px; }
      .hero__inner { padding: 72px 24px 56px; }
    }

    
    .bottom-nav {
      display: none !important;
    }

    @media (max-width: 1023px) {
      .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        z-index: 200;
        align-items: center;
        justify-content: space-around;
      }

      .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        color: var(--text3);
        font-size: .65rem;
        font-weight: 600;
        padding: 4px;
      }

      .bottom-nav a.active {
        color: var(--accent);
      }

      .bottom-nav .icon {
        font-size: 1.25rem;
      }

      .main-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
      }
    }

    @media(max-width:768px) {
      .hero {
        padding: 64px 20px 48px
      }

      .hero h1 {
        font-size: 2rem
      }

      .product-card {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px
      }

      .product-card img {
        width: 140px;
        height: 140px
      }

      .tg,
      .dg {
        grid-template-columns: 1fr
      }

      .col,
      .col-wide {
        padding: 0 20px
      }

      :root {
        --section-gap: 64px
      }

      .vc {
        grid-template-columns: 1fr
      }

      .vc .vc-body {
        padding: 20px 24px
      }
    }

    
    .trust {
      background: rgba(245, 245, 247, 0.6);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 80px 32px;
      text-align: center;
    }

    .trust__icon {
      font-size: 2rem;
      margin-bottom: 8px;
    }

    .trust__heading {
      font-size: clamp(1.4rem, 2.5vw, 1.75rem);
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--text);
      margin-bottom: 8px;
    }

    .trust__sub {
      font-size: .88rem;
      color: var(--text2);
      line-height: 1.8;
      max-width: 640px;
      margin: 0 auto 40px;
    }

    .trust__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 960px;
      margin: 0 auto;
    }

    .section--alt {
      background: rgba(249, 249, 251, 0.6) !important;
      border-radius: var(--radius);
      padding: 48px 32px !important;
      margin: 0 -32px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .trust__card {
      background: #fff;
      border-radius: var(--radius);
      padding: 32px 28px;
      text-align: left;
      box-shadow: var(--shadow);
    }

    .trust__card-icon {
      font-size: 1.3rem;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(0, 113, 227, .08);
    }

    .trust__card-icon--blue { background: rgba(0, 113, 227, .1); }
    .trust__card-icon--red { background: rgba(231, 76, 60, .1); }
    .trust__card-icon--green { background: rgba(39, 174, 96, .1); }

    
    .g-header__search {
      font-size: 1rem;
      cursor: pointer;
      padding: 4px 8px;
      opacity: .5;
      transition: opacity .2s;
    }
    .g-header__search:hover { opacity: 1; }

    .trust__card-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
      letter-spacing: -.01em;
    }

    .trust__card-body {
      font-size: .82rem;
      color: var(--text2);
      line-height: 1.85;
    }

    @media (max-width: 767px) {
      .trust {
        padding: 56px 20px;
      }
      .trust__grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .trust__card {
        padding: 24px 22px;
      }
    }

    
    .g-footer {
      background: #1d1d1f;
      color: rgba(255, 255, 255, .8);
      padding: 48px 32px 32px;
    }

    .g-footer__inner {
      max-width: 960px;
      margin: 0 auto;
    }

    .g-footer__top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24px;
    }

    .g-footer__logo {
      font-size: 1.1rem;
      font-weight: 800;
      color: #fff;
      text-decoration: none;
      letter-spacing: -.02em;
    }

    .g-footer__nav {
      display: flex;
      gap: 16px;
    }

    .g-footer__nav a {
      font-size: .8rem;
      font-weight: 600;
      color: rgba(255, 255, 255, .6);
      text-decoration: none;
      transition: color .2s;
    }

    .g-footer__nav a:hover {
      color: #fff;
    }

    .g-footer__desc {
      font-size: .78rem;
      color: rgba(255, 255, 255, .45);
      line-height: 1.7;
      margin-bottom: 24px;
      max-width: 540px;
    }

    .g-footer__divider {
      border: none;
      border-top: 1px solid rgba(255, 255, 255, .1);
      margin-bottom: 16px;
    }

    .g-footer__copy {
      font-size: .7rem;
      color: rgba(255, 255, 255, .35);
    }

    @media (max-width: 767px) {
      .g-footer {
        padding: 36px 20px 24px;
      }
      .g-footer__top {
        flex-direction: column;
        gap: 16px;
      }
    }
    
    
    .price-justify {
      font-size: .88rem;
      color: var(--text2);
      background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
      padding: 14px 20px;
      border-radius: 12px;
      border-left: 3px solid #eab308;
      margin-bottom: 20px;
      font-weight: 500;
      line-height: 1.7;
    }