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

    :root {
      --bg:        #07080b;
      --bg-soft:   #0b0d12;
      --text:      #e6e8ee;
      --muted:     #888e9c;
      --muted-dim: #848d9e;
      --hairline:  rgba(255,255,255,0.08);
      --hairline-strong: rgba(255,255,255,0.14);
      --glass:     rgba(255,255,255,0.024);
      --glass-2:   rgba(255,255,255,0.04);
      --accent:    #2dd4bf;
      --accent-2:  #22d3ee;
      --accent-3:  #818cf8;
      --buy:       #2dd4bf;
      --sell:      #f0616d;
      --ease:      cubic-bezier(0.32, 0.72, 0, 1);
      --r-lg:      28px;
      --r-md:      18px;
      /* Layered elevation — a tight contact shadow + a wide ambient shadow so
         surfaces read as lifted off the page, not pasted onto it. */
      --elev-1: 0 1px 2px rgba(0,0,0,0.55), 0 10px 24px rgba(0,0,0,0.38);
      --elev-2: 0 2px 6px rgba(0,0,0,0.6),  0 26px 56px rgba(0,0,0,0.5);
      --elev-3: 0 4px 14px rgba(0,0,0,0.62), 0 56px 120px rgba(0,0,0,0.64);
      --lift:   inset 0 1px 0 rgba(255,255,255,0.07);
    }

    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
      position: relative;
    }
    a { color: inherit; text-decoration: none; }

    /* ---- Ambient mesh background — animated orbs ---- */
    .mesh {
      position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
    }
    .mesh::before, .mesh::after {
      content: ''; position: absolute; border-radius: 50%;
      filter: blur(120px); opacity: 0.5;
    }
    .mesh::before {
      width: 620px; height: 620px; top: -180px; left: -120px;
      background: radial-gradient(circle, rgba(45,212,191,0.30), transparent 68%);
      animation: orbFloat1 28s ease-in-out infinite;
      will-change: transform;
    }
    .mesh::after {
      width: 680px; height: 680px; top: 240px; right: -180px;
      background: radial-gradient(circle, rgba(129,140,248,0.22), transparent 68%);
      animation: orbFloat2 24s ease-in-out infinite;
      will-change: transform;
    }
    .mesh i {
      position: absolute; width: 520px; height: 520px; border-radius: 50%;
      bottom: -260px; left: 38%; filter: blur(130px); opacity: 0.16;
      background: radial-gradient(circle, rgba(34,211,238,0.5), transparent 70%);
      animation: orbFloat3 32s ease-in-out infinite;
    }
    @keyframes orbFloat1 {
      0%, 100% { transform: translate(0px,   0px)  scale(1);    }
      33%       { transform: translate(70px,  -55px) scale(1.08); }
      66%       { transform: translate(-35px,  65px) scale(0.96); }
    }
    @keyframes orbFloat2 {
      0%, 100% { transform: translate(0px,   0px)  scale(1);    }
      40%       { transform: translate(-65px,  70px) scale(1.06); }
      80%       { transform: translate(50px,  -45px) scale(0.94); }
    }
    @keyframes orbFloat3 {
      0%, 100% { transform: translate(0px,    0px);  }
      50%       { transform: translate(-45px, -80px); }
    }

    /* fine grain overlay */
    .grain {
      position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.04;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

    /* ---- Full-width Linear-style nav ---- */
    .nav-wrap {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      border-bottom: 1px solid transparent;
      transition: background 0.45s var(--ease), border-color 0.45s var(--ease), backdrop-filter 0.45s var(--ease);
    }
    .nav-wrap.scrolled {
      background: rgba(7, 8, 11, 0.82);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      border-bottom-color: var(--hairline);
    }
    .nav {
      display: flex; align-items: center;
      padding: 0 40px; height: 88px;
      max-width: 1380px; margin: 0 auto;
      gap: 0;
    }
    .brand { display: flex; align-items: center; gap: 18px; font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 600; letter-spacing: -0.6px; color: #fff; flex-shrink: 0; }
    .brand-mark {
      width: 48px; height: 48px; border-radius: 14px;
      background: #0d1117;
      border: 1px solid rgba(45,212,191,0.22);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 17px rgba(45,212,191,0.28), 0 3px 8px rgba(0,0,0,0.5);
    }
    .brand-mark svg { width: 41px; height: 41px; }
    .brand b { font-weight: 600; }
    .brand .g { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

    .nav-links {
      display: flex; gap: 6px; margin-left: auto; font-size: 14px; color: var(--muted); font-weight: 500;
    }
    .nav-links a {
      padding: 7px 13px; border-radius: 8px;
      transition: color 0.2s var(--ease), background 0.2s var(--ease);
    }
    .nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

    .nav-sep {
      width: 1px; height: 18px; background: var(--hairline-strong);
      flex-shrink: 0; margin: 0 18px 0 24px;
    }
    .nav-login {
      font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap;
      padding: 6px 14px; border-radius: 100px; border: 1px solid var(--hairline);
      transition: color 0.2s, border-color 0.2s;
      flex-shrink: 0;
    }
    .nav-login:hover { color: var(--text); border-color: var(--hairline-strong); }
    .nav-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 10px 9px 18px; flex-shrink: 0;
      background: #fff; color: #0a0b0e;
      border-radius: 100px; font-size: 13.5px; font-weight: 600;
      white-space: nowrap;
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    }
    .nav-cta .arr { width: 22px; height: 22px; border-radius: 50%; background: #0a0b0e; display: flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease); }
    .nav-cta .arr svg { width: 12px; height: 12px; stroke: #fff; }
    .nav-cta:hover { box-shadow: 0 6px 24px rgba(255,255,255,0.16); }
    .nav-cta:hover .arr { transform: translate(2px,-1px); }
    .nav-cta:active { transform: scale(0.97); }
    .hamburger { display: none; }

    /* ---- Buttons ---- */
    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: inherit; font-weight: 600; cursor: pointer;
      border: none; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
    }
    .btn-primary {
      padding: 13px 13px 13px 26px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      color: #04201c; border-radius: 100px; font-size: 15.5px;
      box-shadow: 0 8px 30px rgba(45,212,191,0.28), inset 0 1px 0 rgba(255,255,255,0.3);
    }
    .btn-primary .arr {
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(4,32,28,0.18); display: flex; align-items: center; justify-content: center;
      transition: transform 0.3s var(--ease);
    }
    .btn-primary .arr svg { width: 13px; height: 13px; stroke: #04201c; }
    .btn-primary:hover { box-shadow: 0 12px 38px rgba(45,212,191,0.42), inset 0 1px 0 rgba(255,255,255,0.3); }
    .btn-primary:hover .arr { transform: translate(3px,-1px); }
    .btn-primary:active { transform: scale(0.98); }
    .btn-ghost {
      padding: 13px 24px;
      background: var(--glass-2); color: var(--text);
      border: 1px solid var(--hairline); border-radius: 100px; font-size: 15.5px;
      backdrop-filter: blur(10px);
    }
    .btn-ghost:hover { border-color: var(--hairline-strong); background: rgba(255,255,255,0.07); }
    .btn-ghost:active { transform: scale(0.98); }

    /* ---- Eyebrow tag ---- */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 6px 15px 6px 13px;
      background: var(--glass); border: 1px solid var(--hairline);
      border-radius: 100px; font-size: 12.5px; font-weight: 500;
      color: var(--muted); letter-spacing: 0.2px;
      backdrop-filter: blur(8px);
    }
    .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--buy); box-shadow: 0 0 0 0 rgba(45,212,191,0.6); animation: pulse 2.4s var(--ease) infinite; }
    @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(45,212,191,0.5)} 70%{box-shadow:0 0 0 7px rgba(45,212,191,0)} 100%{box-shadow:0 0 0 0 rgba(45,212,191,0)} }
    .eyebrow.section-tag { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--accent); font-weight: 600; }

    /* ---- Hero (asymmetric split) ---- */
    .hero { padding: 160px 0 96px; position: relative; }
    .hero-inner {
      display: grid; grid-template-columns: 1.06fr 0.94fr;
      gap: 52px; align-items: center;
    }
    .hero-copy { text-align: left; }
    .hero h1 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(40px, 4.4vw, 60px);
      font-weight: 600; letter-spacing: -2px; line-height: 1.04;
      color: #fff; margin: 26px 0 22px; max-width: 600px;
    }
    .hero h1 .g {
      background: linear-gradient(105deg, var(--accent) 0%, var(--accent-2) 45%, var(--accent-3) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero-sub {
      font-size: clamp(16px, 1.35vw, 18.5px); color: var(--muted);
      max-width: 500px; margin: 0 0 34px; line-height: 1.62;
    }
    .hero-ctas { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
    .hero-note { margin-top: 20px; font-size: 13.5px; color: var(--muted-dim); }

    /* ---- Hero mock (double-bezel, floating right) ---- */
    .hero-mock { display: flex; justify-content: flex-end; perspective: 1800px; }
    .hero-mock .mock-shell { transform: rotateY(-8deg) rotateX(3deg); transition: transform 0.7s var(--ease); }
    .hero-mock .mock-shell:hover { transform: rotateY(0deg) rotateX(0deg); }
    .mock-shell {
      padding: 8px; border-radius: var(--r-lg);
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01));
      border: 1px solid var(--hairline);
      box-shadow: 0 50px 130px rgba(0,0,0,0.6), 0 0 80px rgba(45,212,191,0.08);
      width: 100%; max-width: 560px;
    }
    .mock-window {
      background: linear-gradient(180deg, #0e1116, #0a0c10);
      border: 1px solid var(--hairline);
      border-radius: calc(var(--r-lg) - 8px); overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      text-align: left;
    }
    .mock-titlebar {
      border-bottom: 1px solid var(--hairline);
      padding: 12px 16px; display: flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,0.015);
    }
    .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mock-titlebar-label { font-size: 12px; color: var(--muted-dim); margin-left: 10px; letter-spacing: 0.2px; font-weight: 500; }
    .mock-body { padding: 18px; }
    .mock-symbol-row {
      background: rgba(255,255,255,0.02); border: 1px solid var(--hairline);
      border-radius: 12px; padding: 12px 14px;
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
    }
    .mock-symbol-name { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: #fff; }
    .mock-price { color: var(--buy); font-size: 13.5px; font-weight: 600; }
    .mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
    .mock-field label { display: block; font-size: 10px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 5px; font-weight: 600; }
    .mock-field .mock-input {
      background: rgba(255,255,255,0.02); border: 1px solid var(--hairline);
      border-radius: 9px; padding: 9px 12px; font-size: 13.5px; color: var(--text); width: 100%;
      font-variant-numeric: tabular-nums;
    }
    .mock-accounts { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0 12px; }
    .mock-tag { font-size: 11.5px; padding: 4px 11px; border-radius: 8px; font-weight: 500; }
    .mock-tag.on { background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.35); color: var(--buy); }
    .mock-tag.off { background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.28); color: #a5aefc; }
    .mock-fire {
      width: 100%; padding: 14px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border: none; border-radius: 11px; cursor: default;
      font-size: 14px; font-weight: 700; color: #04201c; letter-spacing: 0.3px;
      box-shadow: 0 8px 24px rgba(45,212,191,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
    }

    /* ===========================================================================
       TV-inspired widescreen terminal mock (charts/graphics benchmark = TradingView,
       reinterpreted in Propelo's teal-on-near-black palette — NOT a copy).
       A real chart workspace: left drawing-tool rail, top symbol/timeframe bar,
       crisp vector candlesticks, right price axis with draggable order tags + RR
       zones. Vector candles read as a genuine chart, never AI "bars". Aspect ratio
       is widescreen (~16:9) — deliberately not square.
       =========================================================================== */
    .tv-term {
      display: flex; flex-direction: column; overflow: hidden;
      background: linear-gradient(180deg, #0c0f15, #080a0e);
      border-radius: 12px; border: 1px solid var(--hairline);
    }
    .tv-term-top {
      display: flex; align-items: center; gap: 14px; flex-shrink: 0;
      padding: 10px 16px; border-bottom: 1px solid var(--hairline);
      background: rgba(255,255,255,0.014);
    }
    .win-dots { display: inline-flex; gap: 6px; margin-right: 4px; }
    .win-dots i { width: 9px; height: 9px; border-radius: 50%; }
    .tv-sym { display: flex; align-items: center; gap: 9px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; color: #fff; letter-spacing: -0.2px; }
    .tv-sym .tv-px { color: var(--buy); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .tv-tfs { display: flex; gap: 2px; }
    .tv-tf { font-size: 11px; color: var(--muted-dim); padding: 3px 9px; border-radius: 6px; font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: 0.2px; }
    .tv-tf.on { background: rgba(45,212,191,0.12); color: var(--buy); }
    .tv-top-right { margin-left: auto; display: flex; align-items: center; gap: 13px; }
    .tv-top-right svg { width: 16px; height: 16px; stroke: var(--muted-dim); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .tv-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--buy); font-family: 'Space Grotesk', sans-serif; }
    .tv-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--buy); box-shadow: 0 0 0 0 rgba(45,212,191,0.5); animation: pulse 2s ease-in-out infinite; }
    .tv-term-body { display: flex; flex: 1; min-height: 0; }
    .tv-rail {
      width: 40px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
      gap: 16px; padding: 14px 0; border-right: 1px solid var(--hairline);
      background: rgba(255,255,255,0.01);
    }
    .tv-rail svg { width: 17px; height: 17px; stroke: var(--muted-dim); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .tv-rail .tool-on svg { stroke: var(--accent); }
    .tv-chart-wrap { position: relative; flex: 1; min-width: 0; --tv-gutter: 13.5%; }
    .tv-svg { display: block; width: 100%; height: 100%; }
    /* HTML order tags (kept out of the stretched SVG so text never distorts) */
    .tv-tag {
      position: absolute; right: 7px; transform: translateY(-50%);
      font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 5px;
      white-space: nowrap; font-family: 'Space Grotesk', sans-serif;
      font-variant-numeric: tabular-nums; max-width: calc(var(--tv-gutter) + 3%);
      text-align: center; backdrop-filter: blur(2px);
    }
    .tv-tag.entry { background: rgba(8,24,21,0.94); border: 1px solid rgba(45,212,191,0.55); color: var(--buy); box-shadow: 0 2px 10px rgba(45,212,191,0.18); }
    .tv-tag.tp    { background: rgba(8,24,21,0.94); border: 1px solid rgba(45,212,191,0.4);  color: var(--buy); }
    .tv-tag.sl    { background: rgba(26,10,12,0.94); border: 1px solid rgba(240,97,109,0.45); color: var(--sell); }
    .tv-tag .grip { display: inline-block; margin-right: 5px; opacity: 0.6; letter-spacing: -1px; vertical-align: 1px; }
    .tv-timeaxis {
      position: absolute; left: 12px; right: var(--tv-gutter); bottom: 6px;
      display: flex; justify-content: space-between;
      font-size: 9.5px; color: var(--muted-dim); font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.3px;
    }
    .tv-ohlc {
      position: absolute; top: 9px; left: 12px; display: flex; gap: 9px;
      font-size: 10px; font-family: 'Space Grotesk', sans-serif; color: var(--muted-dim); letter-spacing: 0.2px;
    }
    .tv-ohlc b { color: var(--buy); font-weight: 600; }

    /* Cinematic frame glow shared by hero window + laptop (TV-style depth) */
    .tv-glow { position: relative; }
    .tv-glow::before {
      content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
      background: radial-gradient(120% 120% at 70% 0%, rgba(45,212,191,0.16), transparent 55%);
      filter: blur(34px); opacity: 0.9;
    }

    /* ===========================================================================
       DEPTH SYSTEM — layering, light direction, parallax and elements that break
       out of their boxes, so the page reads as stacked planes instead of a flat
       collage. Everything here is additive (behind/around content) and degrades
       gracefully with prefers-reduced-motion.
       =========================================================================== */

    /* Parallax (--py, set by JS on scroll) composed with idle float (--fy, animated
       by keyframes) in one transform so neither clobbers the other. --fy is a
       registered custom property so it interpolates smoothly. */
    @property --fy { syntax: '<length>'; inherits: false; initial-value: 0px; }
    [data-depth] { will-change: transform; transform: translate3d(0, calc(var(--py, 0px) + var(--fy, 0px)), 0); }

    /* Section spotlight — a soft pool of light anchored behind a heading so each
       section feels like its own lit stage rising out of the dark. */
    .spot { position: relative; }
    .spot > * { position: relative; z-index: 1; }
    .spot::before {
      content: ''; position: absolute; z-index: 0; pointer-events: none;
      left: 50%; top: -40px; width: min(900px, 92vw); height: 460px;
      transform: translateX(-50%);
      background: radial-gradient(50% 50% at 50% 50%, rgba(45,212,191,0.10), transparent 72%);
      filter: blur(20px);
    }
    .spot.spot-indigo::before { background: radial-gradient(50% 50% at 50% 50%, rgba(129,140,248,0.11), transparent 72%); }

    /* Floating UI fragments — small "torn-off" pieces of the product that overlap
       the device edges and cast their own shadow onto the layer below. The single
       strongest cue that this isn't a flat collage. */
    .frag {
      position: absolute; z-index: 4;
      display: inline-flex; align-items: center; gap: 9px;
      padding: 10px 13px; border-radius: 13px;
      background: linear-gradient(180deg, rgba(20,24,31,0.92), rgba(12,15,20,0.92));
      border: 1px solid var(--hairline-strong);
      box-shadow: var(--elev-3), var(--lift);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 600;
      color: var(--text); white-space: nowrap; letter-spacing: -0.1px;
      animation: fragFloat 7s var(--ease) infinite;
    }
    .frag .frag-ic {
      width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700;
    }
    .frag .frag-sub { display: block; font-size: 10px; font-weight: 500; color: var(--muted-dim); letter-spacing: 0.2px; margin-top: 1px; }
    .frag .frag-main { line-height: 1.15; }
    .frag.frag-buy  .frag-ic { background: rgba(45,212,191,0.15); color: var(--buy);  border: 1px solid rgba(45,212,191,0.4); }
    .frag.frag-rr   .frag-ic { background: rgba(129,140,248,0.15); color: #a5aefc; border: 1px solid rgba(129,140,248,0.4); }
    .frag .pos { color: var(--buy); }
    .frag .neg { color: var(--sell); }

    @keyframes fragFloat {
      0%, 100% { --fy: 0px; }
      50%      { --fy: -9px; }
    }

    /* Hero device gets a stacking context so fragments can overlap its edges. */
    .hero-mock { position: relative; }
    .frag-fill  { top: -22px;  right: 4px;   animation-delay: -1.2s; }
    .frag-rr    { bottom: 8px; left: -34px;  animation-delay: -3.6s; }
    .frag-ping  { top: 44%;    left: -52px;  animation-delay: -5.1s; }

    /* Glass glare across the laptop screen — a raking highlight = curved glass = depth. */
    .laptop-inner { position: relative; }
    .laptop-glare {
      position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
      background: linear-gradient(118deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 14%, transparent 34%);
      mix-blend-mode: screen;
    }
    /* Floating chips pinned to the laptop corners (inside the full-bleed clip). */
    .laptop-mock { position: relative; }
    .frag-practice { top: -10px; left: 6%;  animation-delay: -2.4s; }
    /* left:auto so it doesn't inherit .frag-rr's left:-34px and stretch full-width. */
    .frag-reward   { bottom: 34px; right: 4%; left: auto; top: auto; animation-delay: -4.8s; }

    /* Soft contact shadow ("the device sits on a surface") under the laptop. */
    .laptop-mock::after {
      content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -26px; height: 60px;
      background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.6), transparent 75%);
      filter: blur(14px);
    }

    /* Laptop sits at a slight backward angle on its surface — real 3D tilt,
       reclining to flat on hover (mirrors the hero device). */
    .chart-demo-outer { perspective: 2200px; }
    .chart-demo-outer .laptop-mock {
      transform: rotateX(6deg); transform-origin: 50% 96%;
      transition: transform 0.9s var(--ease);
    }
    .chart-demo-outer .laptop-mock:hover { transform: rotateX(0deg); }

    /* Cross-seam fragments — anchored to the later section, lifted UP across the
       boundary into the previous one, so the stacked bands read as overlapping
       planes instead of separate sheets. */
    /* reset inherited frag placement (e.g. .frag-rr's left/bottom) so only the
       per-section anchor below applies — otherwise opposing offsets stretch it. */
    .seam-frag { z-index: 6; left: auto; right: auto; top: auto; bottom: auto; }
    #features > .seam-frag { top: -28px; right: 7%; animation-delay: -2.1s; }
    #pricing  > .seam-frag { top: -32px; left: 6%;  animation-delay: -4.3s; }

    /* On narrow screens the floating fragments crowd the layout and risk spilling
       past the edge — depth there comes from elevation, spotlights and the glare. */
    @media (max-width: 760px) {
      .frag { display: none; }
    }
    @media (max-width: 820px) {
      .seam-frag { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .chart-demo-outer .laptop-mock { transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .frag { animation: none; }
      [data-depth] { transform: none !important; }
    }

    /* ---- Hero browser window (landscape) ---- */
    .win-chrome {
      padding: 7px; border-radius: var(--r-lg);
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01));
      border: 1px solid var(--hairline);
      box-shadow: 0 50px 130px rgba(0,0,0,0.6), 0 0 90px rgba(45,212,191,0.08);
    }
    .win-inner { background: #0a0c10; border: 1px solid var(--hairline); border-radius: calc(var(--r-lg) - 7px); overflow: hidden; }
    .win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,0.015); }
    .win-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
    .win-bar-label { font-size: 12px; color: var(--muted-dim); margin-left: 10px; font-weight: 500; }
    .win-actions { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--hairline); background: rgba(255,255,255,0.01); }
    .win-chip { font-size: 11px; padding: 4px 10px; border-radius: 7px; font-weight: 500; font-family: 'Space Grotesk', sans-serif; }
    .win-chip.on { background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.35); color: var(--buy); }
    .win-chip.off { background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.28); color: #a5aefc; }
    .win-fire { margin-left: auto; padding: 9px 18px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #04201c; letter-spacing: 0.3px; font-family: 'Space Grotesk', sans-serif; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px rgba(45,212,191,0.32); }

    /* ---- Laptop device frame (landscape 16:10 lid) ---- */
    .laptop-mock { max-width: 880px; margin: 0 auto; }
    .laptop-screen {
      position: relative; padding: 12px 12px 9px; border-radius: 16px 16px 5px 5px;
      background: linear-gradient(165deg, #17191f, #0a0b0e);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 44px 110px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .laptop-cam { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #050608; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
    .laptop-inner { background: #0a0c10; border-radius: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
    .laptop-base { height: 13px; background: linear-gradient(180deg, #41454d, #1b1d21); border-radius: 0 0 11px 11px; position: relative; box-shadow: 0 16px 26px rgba(0,0,0,0.45); }
    .laptop-base::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 150px; height: 5px; background: #4d515a; border-radius: 0 0 7px 7px; }
    .chart-demo-outer { padding: 46px 24px 74px; }
    .chart-demo-grid { display: grid; grid-template-columns: 1fr 230px; }
    .chart-demo-grid .tv-term { border: none; border-radius: 0; border-right: 1px solid var(--hairline); }
    .chart-demo-side { padding: 18px; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,0.008); }
    @media (max-width: 820px) {
      .chart-demo-grid { grid-template-columns: 1fr; }
      .chart-demo-grid .tv-term { border-right: none; border-bottom: 1px solid var(--hairline); }
      .laptop-mock { max-width: 100%; }
    }

    /* ---- Marquee platforms ---- */
    .marquee-section { padding: 48px 0 30px; }
    .marquee-label { text-align: center; font-size: 12px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 24px; font-weight: 600; }
    .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
    .marquee-track { display: flex; gap: 14px; width: max-content; animation: scroll 34s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes scroll { to { transform: translateX(-50%); } }
    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 18px; white-space: nowrap;
      background: var(--glass); border: 1px solid var(--hairline);
      border-radius: 100px; font-size: 14px; color: var(--muted); font-weight: 500;
    }
    .pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.7; }

    /* ---- Execution showcase (full-bleed) ---- */
    .showcase-section {
      padding: 60px 0 0;
      overflow: hidden;
      position: relative;
    }
    .showcase-hd {
      text-align: center; padding: 0 40px 52px; max-width: 640px; margin: 0 auto;
    }
    /* h1 and h2 share these styles: the sub-pages (product/pricing/faq) carry
       their page's <h1> in this slot, while the same block on a page that
       already has a hero <h1> stays an <h2>. Keyed on both tags so the section
       heading looks identical either way. */
    .showcase-hd h1,
    .showcase-hd h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(26px, 3.2vw, 40px);
      font-weight: 600; letter-spacing: -1.2px; color: #fff;
      margin: 16px 0 12px; line-height: 1.1;
    }
    .showcase-hd p { font-size: 16px; color: var(--muted); line-height: 1.6; }

    /* Full-bleed: no max-width, no border-radius — panel touches edges */
    .showcase-outer {
      position: relative;
      width: 100%; overflow: hidden;
    }
    .showcase-outer::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 260px;
      background: linear-gradient(to bottom, transparent, var(--bg));
      pointer-events: none; z-index: 2;
    }
    .exec-panel {
      background: #090c10;
      border-top: 1px solid var(--hairline);
      border-bottom: 1px solid var(--hairline);
      /* No border-radius — edge to edge like Linear product screenshots */
      overflow: hidden;
      box-shadow: 0 0 160px rgba(45,212,191,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .exec-top-bar {
      padding: 16px 48px;
      border-bottom: 1px solid var(--hairline);
      display: flex; align-items: center; gap: 20px;
      background: rgba(255,255,255,0.012);
    }
    .exec-dots { display: flex; gap: 6px; }
    .exec-dots span { width: 10px; height: 10px; border-radius: 50%; }
    .exec-symbol-badge {
      font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: #fff;
      background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.28);
      padding: 3px 12px; border-radius: 6px;
    }
    .exec-meta { font-size: 12px; color: var(--muted-dim); font-family: 'Space Grotesk', sans-serif; }
    .exec-ping {
      margin-left: auto; display: flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--buy);
    }
    .exec-ping::before {
      content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--buy);
      box-shadow: 0 0 0 0 rgba(45,212,191,0.5); animation: pulse 2s ease-in-out infinite;
    }

    .exec-col-hd {
      display: grid; grid-template-columns: 32px 1fr 120px 100px 130px 120px;
      gap: 24px; padding: 12px 48px;
      font-size: 10.5px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.8px;
      border-bottom: 1px solid var(--hairline); font-weight: 600;
    }
    .exec-row {
      position: relative;
      display: grid; grid-template-columns: 32px 1fr 120px 100px 130px 120px;
      align-items: center; gap: 24px;
      padding: 22px 48px;
      border-bottom: 1px solid var(--hairline);
      font-size: 14px;
      transition: background 0.25s var(--ease);
    }
    .exec-row:hover { background: rgba(255,255,255,0.025); }
    .exec-row:last-child { border-bottom: none; }
    .exec-row.dim { opacity: 0.28; }
    .exec-row.very-dim { opacity: 0.12; }

    .exec-row .ex-indicator {
      width: 2px; height: 32px; border-radius: 2px;
      position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    }
    .exec-row.filled .ex-indicator { background: var(--accent); box-shadow: 0 0 8px rgba(45,212,191,0.5); }
    .exec-row.dim .ex-indicator { background: var(--muted-dim); }

    .ex-icon { display: flex; align-items: center; justify-content: center; }
    .ex-ok { color: var(--buy); font-size: 15px; font-weight: 700; }
    .ex-pending { color: var(--muted-dim); font-size: 18px; line-height: 1; }

    .ex-account-name { font-weight: 600; color: #fff; font-size: 14px; line-height: 1.3; }
    .ex-account-sub { font-size: 11.5px; color: var(--muted-dim); margin-top: 2px; }

    .ex-lots { color: var(--text); font-variant-numeric: tabular-nums; font-size: 13.5px; }
    .ex-lots .ex-lots-label { font-size: 10px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.5px; display: block; }

    .ex-time { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 13px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
    .ex-time.dim-val { color: var(--muted-dim); }

    .ex-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
    .ex-badge.filled { background: rgba(45,212,191,0.1); color: var(--buy); border: 1px solid rgba(45,212,191,0.28); }
    .ex-badge.queued { background: rgba(255,255,255,0.04); color: var(--muted-dim); border: 1px solid var(--hairline); }
    .ex-badge.connecting { background: rgba(255,255,255,0.04); color: var(--muted-dim); border: 1px solid var(--hairline); }

    .exec-summary-bar {
      padding: 16px 48px;
      display: flex; align-items: center; gap: 32px;
      background: rgba(255,255,255,0.01); border-top: 1px solid var(--hairline);
      font-size: 12px; color: var(--muted-dim);
    }
    .exec-summary-bar strong { color: var(--buy); font-family: 'Space Grotesk', sans-serif; font-size: 13px; }

    /* ---- Sections ---- */
    section { padding: 148px 0; position: relative; }
    .section-hd { margin-bottom: 80px; }
    .section-hd.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
    /* Spotlight behind centered headers — each section reads as its own lit stage. */
    .section-hd.center, .showcase-hd { position: relative; }
    .section-hd.center::before, .showcase-hd::before {
      content: ''; position: absolute; z-index: -1; pointer-events: none;
      left: 50%; top: 50%; transform: translate(-50%, -55%);
      width: min(820px, 90vw); height: 420px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(45,212,191,0.09), transparent 70%);
      filter: blur(16px);
    }

    /* Linear-style split section header */
    .section-hd.split {
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
      text-align: left;
    }
    .section-hd.split .eyebrow { margin-bottom: 0; }
    .section-hd-right { padding-bottom: 6px; }
    .section-hd-right .section-sub { margin-top: 0; }

    /* Section number (01, 02, 03 — Linear-style editorial detail) */
    .section-num {
      display: block; font-size: 11px; color: var(--muted-dim);
      font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.16em;
      margin-bottom: 16px; font-weight: 500;
    }

    /* h1/h2 share these — see the .showcase-hd note above. */
    .section-hd h1,
    .section-hd h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(32px, 5vw, 58px); font-weight: 600;
      letter-spacing: -1.8px; color: #fff; margin: 18px 0 14px; line-height: 1.04;
    }
    .section-hd.split h1,
    .section-hd.split h2 { margin-bottom: 0; }
    .section-hd .section-sub { font-size: 17.5px; color: var(--muted); max-width: 540px; line-height: 1.65; }

    /* ---- Steps ---- */
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .step {
      position: relative; padding: 34px 30px;
      background: var(--glass); border: 1px solid var(--hairline);
      border-radius: var(--r-md);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .step::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(45,212,191,0.22), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
    .step:hover::after { opacity: 1; }
    .step-num {
      width: 42px; height: 42px; border-radius: 12px;
      background: linear-gradient(135deg, rgba(45,212,191,0.18), rgba(129,140,248,0.12));
      border: 1px solid rgba(45,212,191,0.3);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: var(--accent);
      margin-bottom: 20px;
    }
    .step h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 9px; letter-spacing: -0.3px; }
    .step p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }
    .step code { color: var(--accent); font-size: 13px; background: rgba(45,212,191,0.08); padding: 1px 6px; border-radius: 5px; }

    /* ---- Raycast-style platform cards ---- */
    .platforms-section { padding: 60px 0 20px; overflow: hidden; }
    .platforms-label { text-align: center; font-size: 11px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 32px; font-weight: 600; }
    .platforms-scroll-outer {
      position: relative;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    }
    .platforms-scroll {
      display: flex; gap: 14px; padding: 6px 10% 10px;
      overflow-x: auto; scroll-snap-type: x proximity;
      scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
      user-select: none; -webkit-user-select: none;
    }
    .platforms-scroll:active { cursor: grabbing; }
    .platforms-scroll::-webkit-scrollbar { display: none; }
    .platform-card {
      flex-shrink: 0; scroll-snap-align: start; position: relative;
      /* Top-lit surface (lighter at top, darker at bottom) + layered elevation so
         the card lifts off the page and casts a real shadow instead of sitting flat. */
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.014));
      border: 1px solid var(--hairline);
      border-radius: 18px; padding: 22px 22px 18px;
      min-width: 170px;
      box-shadow: var(--elev-1), var(--lift);
      transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    }
    .platform-card:hover {
      border-color: var(--hairline-strong);
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      transform: translateY(-6px);
      box-shadow: var(--elev-2), var(--lift), 0 0 0 1px rgba(45,212,191,0.12);
    }
    .platform-card-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
      border: 1px solid var(--hairline-strong);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
      color: var(--muted); margin-bottom: 14px; letter-spacing: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.4);
    }
    .platform-card-name { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
    .platform-card-sub { font-size: 11.5px; color: var(--muted-dim); margin-bottom: 12px; }
    .platform-card-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
      background: rgba(45,212,191,0.07); border: 1px solid rgba(45,212,191,0.2); color: var(--buy);
    }
    .platform-card-badge.mt { background: rgba(129,140,248,0.07); border-color: rgba(129,140,248,0.2); color: #a5aefc; }

    /* ---- Framer-style features bento ---- */
    .feat-bento { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 16px; align-items: start; }
    .feat-col { display: flex; flex-direction: column; gap: 16px; }
    .feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .feat-bottom-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 16px; }

    .feat-card {
      position: relative;
      /* Top-lit surface + layered elevation so each card reads as a lifted plane. */
      background: linear-gradient(180deg, #11161e 0%, #0a0e13 58%, #070a0e 100%);
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg); overflow: hidden;
      box-shadow: var(--elev-2), var(--lift);
      transition: border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
    }
    .feat-card:hover {
      border-color: var(--hairline-strong);
      transform: translateY(-8px);
      box-shadow: var(--elev-3), var(--lift), 0 0 0 1px rgba(45,212,191,0.14), 0 0 64px rgba(45,212,191,0.09);
    }

    .feat-card-hd { padding: 28px 28px 20px; }
    .feat-card-hd h3 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -0.3px; margin-bottom: 9px; line-height: 1.3; }
    .feat-card-hd p { font-size: 13.5px; color: var(--muted); line-height: 1.65; max-width: 360px; }
    .feat-link {
      display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
      font-size: 13px; color: var(--accent); font-weight: 500;
      transition: gap 0.2s var(--ease);
    }
    .feat-link:hover { gap: 10px; }

    .feat-card-ui { padding: 0 16px 16px; }

    /* Mini execution log in large feature card */
    .feat-exec-mini { background: #060810; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
    .feat-exec-top { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,0.01); }
    .feat-exec-badge { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.25); padding: 2px 9px; border-radius: 5px; }
    .feat-exec-ts { font-size: 11px; color: var(--muted-dim); font-family: 'Space Grotesk', sans-serif; margin-left: auto; }
    .feat-exec-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
    .feat-exec-row:last-of-type { border-bottom: none; }
    .feat-exec-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .feat-exec-name { flex: 1; color: var(--text); font-weight: 500; }
    .feat-exec-lots { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; margin-right: 4px; }
    .feat-exec-ms { color: var(--accent); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
    .feat-exec-bar { display: flex; gap: 8px; align-items: center; padding: 9px 16px; background: rgba(45,212,191,0.04); border-top: 1px solid var(--hairline); font-size: 11px; color: var(--muted-dim); }
    .feat-exec-bar strong { color: var(--buy); }

    /* Risk sizing mini UI */
    .feat-risk-ui { background: #060810; border: 1px solid var(--hairline); border-radius: 14px; padding: 14px; }
    .feat-risk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
    .feat-risk-label { font-size: 9.5px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; font-weight: 600; }
    .feat-risk-val { background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); border-radius: 7px; padding: 7px 10px; font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
    .feat-risk-result { background: rgba(45,212,191,0.05); border: 1px solid rgba(45,212,191,0.18); border-radius: 10px; padding: 11px 14px; display: flex; justify-content: space-between; align-items: center; }
    .feat-risk-result-label { font-size: 10px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
    .feat-risk-result-val { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: var(--accent); }

    /* Copy fan-out account chips */
    .feat-accounts-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0 16px 16px; }
    .feat-acc-chip { background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 11px; }
    .feat-acc-chip.active { background: rgba(45,212,191,0.06); border-color: rgba(45,212,191,0.22); }
    .fac-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
    .feat-acc-chip.active .fac-dot { background: var(--accent); }
    .feat-acc-chip:not(.active) .fac-dot { background: var(--muted-dim); }
    .feat-acc-name { display: block; font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
    .feat-acc-sub { font-size: 10px; color: var(--muted-dim); }

    /* Horizontal mini feature cards */
    .feat-card-horiz .feat-card-hd { display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px; }
    .feat-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; }
    .feat-ico svg { width: 19px; height: 19px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .feat-card-horiz .feat-text h3 { font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: -0.2px; margin-bottom: 5px; }
    .feat-card-horiz .feat-text p { font-size: 13px; color: var(--muted); line-height: 1.6; }
    .feat-bottom-row .feat-card .feat-card-hd { display: flex; align-items: flex-start; gap: 18px; padding: 28px 28px; }
    .feat-bottom-row .feat-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.2px; margin-bottom: 6px; }
    .feat-bottom-row .feat-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }

    /* ---- Pricing ---- */
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
    .pricing-card {
      position: relative; display: flex; flex-direction: column;
      padding: 36px 32px;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg);
      box-shadow: var(--elev-2), var(--lift);
      transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
    }
    .pricing-card:hover {
      transform: translateY(-7px);
      box-shadow: var(--elev-3), var(--lift);
      border-color: var(--hairline-strong);
    }
    /* Featured plan physically steps forward — raised, scaled, casting over neighbours. */
    .pricing-card.featured {
      background: linear-gradient(180deg, rgba(45,212,191,0.09), rgba(255,255,255,0.02));
      border-color: rgba(45,212,191,0.34);
      box-shadow: var(--elev-3), 0 0 80px rgba(45,212,191,0.16), inset 0 1px 0 rgba(255,255,255,0.08);
      transform: translateY(-10px) scale(1.025);
      z-index: 2;
    }
    .pricing-card.featured:hover { transform: translateY(-16px) scale(1.025); }
    .pricing-badge {
      position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
      background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04201c;
      font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
      padding: 5px 15px; border-radius: 100px; white-space: nowrap;
      box-shadow: 0 6px 20px rgba(45,212,191,0.4);
    }
    .plan-name { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; }
    .plan-price { display: flex; align-items: baseline; gap: 1px; margin-bottom: 8px; font-family: 'Space Grotesk', sans-serif; }
    .plan-price .cur { font-size: 22px; font-weight: 600; color: var(--muted); align-self: flex-start; margin-top: 9px; }
    .plan-price .amt { font-size: 52px; font-weight: 600; color: #fff; letter-spacing: -2px; line-height: 1; }
    .plan-price .period { font-size: 14px; color: var(--muted); margin-left: 3px; font-family: 'Plus Jakarta Sans', sans-serif; }
    .plan-tagline { font-size: 14px; color: var(--muted); margin-bottom: 26px; }
    .plan-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 13px; border-radius: 100px;
      font-size: 15px; font-weight: 600; text-align: center; margin-bottom: 28px;
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
    }
    .plan-cta.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04201c; box-shadow: 0 8px 26px rgba(45,212,191,0.3); }
    .plan-cta.primary:hover { box-shadow: 0 12px 34px rgba(45,212,191,0.45); }
    .plan-cta.outline { background: var(--glass-2); color: var(--text); border: 1px solid var(--hairline); }
    .plan-cta.outline:hover { border-color: var(--hairline-strong); background: rgba(255,255,255,0.07); }
    .plan-cta:active { transform: scale(0.98); }
    .plan-divider { border: none; border-top: 1px solid var(--hairline); margin-bottom: 22px; }
    .plan-feats { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: auto; }
    .plan-feats li { display: flex; gap: 11px; font-size: 14px; color: var(--text); align-items: flex-start; line-height: 1.5; }
    .plan-feats li .ck { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
    .plan-feats li .ck svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 2.2; }
    .plan-feats li .dim { color: var(--muted-dim); flex-shrink: 0; margin-top: 1px; }
    .plan-feats li.off span:last-child { color: var(--muted-dim); }

    /* ---- Free tier banner — matches the pricing-card design language ---- */
    .free-banner {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
      padding: 28px 32px; margin-bottom: 28px;
      background: linear-gradient(180deg, rgba(45,212,191,0.07), rgba(255,255,255,0.02));
      border: 1px solid rgba(45,212,191,0.30); border-radius: var(--r-lg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .free-banner-info { flex: 1; min-width: 260px; }
    .free-banner-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .free-banner-head .plan-name { margin-bottom: 0; }
    .free-pill {
      background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04201c;
      font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
      padding: 4px 12px; border-radius: 100px;
    }
    .free-banner-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 8px; letter-spacing: -0.3px; }
    .free-banner-sub { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 620px; }
    .free-banner-sub strong { color: var(--text); font-weight: 600; }
    .free-banner-cta { width: auto; min-width: 190px; margin-bottom: 0; flex-shrink: 0; }
    @media (max-width: 720px) { .free-banner-cta { width: 100%; } }

    /* ---- Capacity notice ---- */
    #capacity-notice {
      max-width: 780px; margin: 0 auto 40px; padding: 24px 30px;
      background: rgba(45,212,191,0.05); border: 1px solid rgba(45,212,191,0.28);
      border-radius: var(--r-md); text-align: center;
    }
    #capacity-notice .cn-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 7px; }
    #capacity-notice .cn-body { font-size: 14px; color: var(--muted); line-height: 1.65; }
    #capacity-notice .cn-body strong { color: var(--text); font-weight: 600; }
    #capacity-notice a { color: var(--accent); }
    /* Paid-waitlist capture — turns the dead-end mailto into a free signup that
       also records paid interest. */
    #capacity-notice .cn-form {
      display: flex; gap: 8px; max-width: 460px; margin: 16px auto 0;
      flex-wrap: wrap; justify-content: center;
    }
    #capacity-notice .cn-input {
      flex: 1 1 220px; min-width: 0; padding: 11px 14px;
      background: rgba(255,255,255,0.05); border: 1px solid var(--hairline);
      border-radius: 10px; color: var(--text); font-size: 14px;
    }
    #capacity-notice .cn-input:focus { outline: none; border-color: var(--accent); }
    #capacity-notice .cn-input::placeholder { color: var(--muted); }
    #capacity-notice .cn-btn {
      flex: 0 0 auto; padding: 11px 20px; border: 0; cursor: pointer;
      background: var(--accent); color: #04120f; font-weight: 600; font-size: 14px;
      border-radius: 10px; white-space: nowrap;
      transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
    }
    #capacity-notice .cn-btn:hover { background: #34d8c4; }
    #capacity-notice .cn-btn:disabled { opacity: 0.55; cursor: default; }
    #capacity-notice .cn-status { font-size: 13px; color: var(--muted); margin-top: 10px; min-height: 18px; }
    #capacity-notice .cn-status.ok { color: var(--accent); }
    #capacity-notice .cn-status.err { color: #ff6b6b; }

    /* ---- FAQ ---- */
    .faq-list { max-width: 760px; margin: 0 auto; }
    .faq-item {
      background: var(--glass); border: 1px solid var(--hairline);
      border-radius: 14px; margin-bottom: 12px; overflow: hidden;
      transition: border-color 0.3s var(--ease);
    }
    .faq-item.open { border-color: var(--hairline-strong); }
    .faq-btn {
      width: 100%; padding: 20px 24px; background: none; border: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      font-size: 16px; font-weight: 600; color: var(--text); text-align: left;
      font-family: 'Space Grotesk', sans-serif; transition: color 0.2s var(--ease);
    }
    .faq-btn:hover { color: #fff; }
    .faq-chevron { flex-shrink: 0; transition: transform 0.35s var(--ease); stroke: var(--muted); }
    .faq-item.open .faq-chevron { transform: rotate(180deg); stroke: var(--accent); }
    .faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
    .faq-answer-inner { padding: 0 24px 22px; font-size: 14.5px; color: var(--muted); line-height: 1.75; }
    .faq-answer code { color: var(--accent); background: rgba(45,212,191,0.08); padding: 1px 6px; border-radius: 5px; font-size: 13px; }

    /* ---- CTA banner ---- */
    .cta-section { padding: 40px 0 110px; }
    .cta-banner {
      position: relative; overflow: hidden;
      background: linear-gradient(135deg, rgba(45,212,191,0.1), rgba(129,140,248,0.08));
      border: 1px solid var(--hairline-strong);
      border-radius: var(--r-lg); padding: 80px 40px; text-align: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    }
    .cta-banner::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(45,212,191,0.18), transparent 70%); top: -50%; left: 50%; transform: translateX(-50%); filter: blur(60px); pointer-events: none; }
    .cta-banner > * { position: relative; }
    .cta-banner h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 4vw, 42px); font-weight: 600; letter-spacing: -1.2px; color: #fff; margin-bottom: 16px; line-height: 1.1; }
    .cta-banner p { color: var(--muted); font-size: 18px; margin: 0 auto 36px; max-width: 500px; }

    /* ---- Trust band (compatible platforms, under hero) ---- */
    .trust-band { padding: 30px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
    .trust-band-inner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
    .trust-band-label { font-size: 11px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; white-space: nowrap; }
    .trust-pill { padding: 7px 16px; border-radius: 100px; background: var(--glass); border: 1px solid var(--hairline); font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.2px; white-space: nowrap; transition: border-color 0.15s, color 0.15s; }
    .trust-pill:hover { border-color: var(--hairline-strong); color: #fff; }
    @media (max-width: 640px) { .trust-band-label { width: 100%; text-align: center; margin-bottom: 4px; } }

    /* ---- Homepage "What's inside" mini feature grid ---- */
    .mini-feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto 40px; }
    .mini-feat { padding: 22px 20px; text-align: left; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--hairline); }
    .mini-feat b { display: block; color: #fff; font-family: 'Space Grotesk', sans-serif; margin-bottom: 6px; font-size: 14.5px; }
    .mini-feat span { font-size: 13px; color: var(--muted); line-height: 1.55; }

    /* ---- Legal disclaimer section ---- */
    .disclaimer-section {
      padding: 48px 0 56px;
      border-top: 1px solid var(--hairline);
      position: relative;
    }
    .disclaimer-inner {
      display: flex; flex-direction: column; gap: 20px;
    }
    .disclaimer-brands {
      display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    }
    .disclaimer-brands-label {
      font-size: 11px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; margin-right: 6px;
    }
    .db-pill {
      padding: 4px 13px; border-radius: 7px;
      background: var(--glass); border: 1px solid var(--hairline);
      font-size: 11.5px; font-weight: 600; color: var(--muted-dim);
      letter-spacing: 0.3px; white-space: nowrap;
    }
    .disclaimer-body {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px;
    }
    .disclaimer-text {
      font-size: 12px; color: var(--muted-dim); line-height: 1.75;
    }
    .disclaimer-text a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

    /* ---- Footer ---- */
    footer { border-top: 1px solid var(--hairline); padding: 44px 0; }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
    .footer-links { display: flex; gap: 28px; font-size: 14px; color: var(--muted); font-weight: 500; }
    .footer-links a { transition: color 0.2s var(--ease); }
    .footer-links a:hover { color: var(--text); }
    .footer-copy { font-size: 13px; color: var(--muted-dim); max-width: 460px; line-height: 1.6; }

    /* ---- Scroll reveal ---- */
    .js .reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
    .js .reveal.in { opacity: 1; transform: none; filter: none; }
    .js .stagger > * { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease); }
    .js .stagger.in > * { opacity: 1; transform: none; filter: none; }
    .js .stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
    .js .stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
    .js .stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
    .js .stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
    .js .stagger.in > *:nth-child(6) { transition-delay: 0.40s; }
    .js .stagger.in > *:nth-child(7) { transition-delay: 0.48s; }
    .js .stagger.in > *:nth-child(8) { transition-delay: 0.56s; }
    @media (prefers-reduced-motion: reduce) {
      .js .reveal, .js .stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
      .marquee-track { animation: none; }
      .eyebrow .dot { animation: none; }
      .mesh::before, .mesh::after, .mesh i { animation: none !important; }
    }

    /* ---- Stats strip ---- */
    .stats-strip {
      border-top: 1px solid var(--hairline);
      border-bottom: 1px solid var(--hairline);
      background: rgba(255,255,255,0.012);
    }
    .stats-row {
      display: grid; grid-template-columns: repeat(4, 1fr);
    }
    .stat-item {
      padding: 52px 32px; text-align: center;
      border-right: 1px solid var(--hairline);
      position: relative;
    }
    .stat-item:last-child { border-right: none; }
    .stat-num {
      display: block; font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(38px, 4.2vw, 56px); font-weight: 600;
      color: #fff; letter-spacing: -2.5px; line-height: 1;
      margin-bottom: 10px;
    }
    .stat-prefix { color: var(--accent); }
    .stat-unit {
      font-size: 0.38em; color: var(--muted); letter-spacing: 0;
      margin-left: 5px; vertical-align: super; font-weight: 500;
    }
    .stat-label {
      display: block; font-size: 13px; color: var(--muted-dim);
      font-weight: 500; line-height: 1.55;
    }

    /* ---- Before/After comparison ---- */
    .compare-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg); overflow: hidden;
    }
    .compare-col { padding: 44px 48px; }
    .compare-col.before {
      background: rgba(240,97,109,0.03);
      border-right: 1px solid var(--hairline);
    }
    .compare-col.after { background: rgba(45,212,191,0.025); }
    .compare-col-hd {
      padding-bottom: 22px; border-bottom: 1px solid var(--hairline);
      margin-bottom: 28px;
    }
    .compare-badge {
      display: inline-flex; align-items: center;
      padding: 5px 14px; border-radius: 100px;
      font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
    }
    .compare-badge.before-badge {
      background: rgba(240,97,109,0.1); border: 1px solid rgba(240,97,109,0.22); color: var(--sell);
    }
    .compare-badge.after-badge {
      background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.25); color: var(--buy);
    }
    .compare-list { list-style: none; display: flex; flex-direction: column; gap: 17px; }
    .compare-item { display: flex; gap: 14px; align-items: flex-start; }
    .compare-ico {
      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 800; margin-top: 2px;
    }
    .compare-ico.x { background: rgba(240,97,109,0.1); border: 1px solid rgba(240,97,109,0.18); color: var(--sell); }
    .compare-ico.ck { background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.2); color: var(--buy); }
    .compare-item-label {
      font-size: 14px; font-weight: 500; line-height: 1.45;
    }
    .compare-col.before .compare-item-label { color: rgba(230,232,238,0.52); }
    .compare-col.after .compare-item-label { color: var(--text); }
    .compare-item-sub {
      font-size: 12.5px; color: var(--muted-dim); margin-top: 3px; line-height: 1.55;
    }

    /* ---- Mobile menu ---- */
    .mobile-menu {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(7,8,11,0.92); backdrop-filter: blur(24px);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
    }
    .mobile-menu.open { opacity: 1; pointer-events: auto; }
    .mobile-menu a {
      font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 500; color: var(--text);
      padding: 12px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    }
    .mobile-menu.open a { opacity: 1; transform: none; }
    .mobile-menu.open a:nth-child(2){transition-delay:.06s}.mobile-menu.open a:nth-child(3){transition-delay:.12s}.mobile-menu.open a:nth-child(4){transition-delay:.18s}.mobile-menu.open a:nth-child(5){transition-delay:.24s}.mobile-menu.open a:nth-child(6){transition-delay:.30s}.mobile-menu.open a:nth-child(7){transition-delay:.36s}
    /* Primary conversion CTA in the mobile menu. The menu previously offered no
       way to sign up at all — only nav links plus a dimmed "Log in" — so on
       mobile there was no path to the free tier, which is currently the only
       live conversion. Mirrors the desktop .nav-cta pill. */
    .mobile-menu a.mm-cta {
      margin-top: 18px; padding: 13px 30px;
      background: #fff; color: #0a0b0e;
      border-radius: 100px; font-size: 19px; font-weight: 600;
    }
    .mobile-menu a.mm-cta:hover { background: #f0f0f2; }
    .mm-close { position: absolute; top: 30px; right: 30px; width: 44px; height: 44px; background: var(--glass-2); border: 1px solid var(--hairline); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .mm-close svg { width: 18px; height: 18px; stroke: #fff; }

    /* ---- Responsive ---- */
    @media (max-width: 980px) {
      .hero-inner { grid-template-columns: 1fr; gap: 56px; }
      .hero-copy { text-align: center; }
      .hero h1, .hero-sub { margin-left: auto; margin-right: auto; }
      .hero-ctas { justify-content: center; }
      .hero-mock { justify-content: center; }
      .hero-mock .mock-shell { transform: none; }
      .section-hd.split { grid-template-columns: 1fr; gap: 20px; }
      .disclaimer-body { grid-template-columns: 1fr; }
      .feat-bento { grid-template-columns: 1fr; }
      .feat-bottom-row { grid-template-columns: 1fr 1fr; }
      .compare-grid { grid-template-columns: 1fr; }
      .compare-col.before { border-right: none; border-bottom: 1px solid var(--hairline); }
    }
    @media (max-width: 780px) {
      .nav-links { display: none; }
      .nav-sep { display: none; }
      .nav-login { display: none; }
      .nav-cta { display: none; }
      .hamburger { display: flex; margin-left: auto; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--glass-2); border: 1px solid var(--hairline); border-radius: 50%; cursor: pointer; }
      .hamburger svg { width: 18px; height: 18px; stroke: #fff; }
      .nav { padding: 0 20px; }
      .hero { padding: 130px 0 70px; }
      .steps { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; }
      section { padding: 80px 0; }
      .cta-banner { padding: 56px 28px; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
      .exec-col-hd { display: none; }
      .exec-row { grid-template-columns: 28px 1fr 70px 70px; }
      .exec-row .ex-lots-label, .exec-row > *:nth-child(5), .exec-row > *:nth-child(6) { display: none; }
      .exec-top-bar { padding: 14px 20px; }
      .exec-row { padding: 16px 20px; }
      .exec-summary-bar { padding: 14px 20px; }
      .container { padding: 0 20px; }
      .feat-row { grid-template-columns: 1fr; }
      .feat-bottom-row { grid-template-columns: 1fr; }
      .mini-feat-grid { grid-template-columns: 1fr 1fr; }
      .feat-accounts-grid { grid-template-columns: 1fr 1fr; }
      .stats-row { grid-template-columns: 1fr 1fr; }
      .stat-item { padding: 32px 20px; }
      .stat-item:nth-child(odd) { border-right: 1px solid var(--hairline); }
      .stat-item:nth-child(even) { border-right: none; }
      .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid var(--hairline); }
      .compare-col { padding: 32px 24px; }
    }

    /* ── Compatibility table ── */
    .compat-section { padding: 72px 0 56px; }
    .compat-hd { text-align: center; margin-bottom: 40px; }
    .compat-hd h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 14px; }
    .compat-hd p { font-size: 16px; color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.6; }
    .compat-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 16px; background: var(--glass); }
    .compat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .compat-table thead tr { border-bottom: 1px solid var(--hairline); }
    .compat-table th { padding: 11px 18px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; white-space: nowrap; }
    .compat-table td { padding: 13px 18px; border-bottom: 1px solid var(--hairline); color: var(--text); vertical-align: middle; white-space: nowrap; }
    .compat-table tbody tr:last-child td { border-bottom: none; }
    .compat-table tbody tr:hover td { background: var(--glass-2); }
    .ct-row-na td { opacity: 0.5; }
    .ct-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--glass-2); border: 1px solid var(--hairline); font-size: 9.5px; font-weight: 700; color: var(--muted); margin-right: 10px; font-family: 'Space Grotesk', sans-serif; vertical-align: middle; letter-spacing: 0; }
    .ct-badge { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
    .ct-badge.ct { background: rgba(45,212,191,0.07); border-color: rgba(45,212,191,0.2); color: #2dd4bf; }
    .ct-badge.mt { background: rgba(129,140,248,0.07); border-color: rgba(129,140,248,0.2); color: #a5aefc; }
    .ct-ok { color: #4ade80; font-weight: 500; font-size: 13px; }
    .ct-no { color: #f87171; font-weight: 500; font-size: 13px; }
    .ct-conn { color: var(--muted); font-size: 13px; }
    .compat-note { margin-top: 18px; font-size: 12.5px; color: var(--muted-dim); text-align: center; }