/* v35 — extracted, theme fonts. Scoped to .pm-v35-landing */
@scope (.pm-v35-landing) {
/* ================================================================
   SHIFT MARKETS — Design Tokens
   Source: Shift Brand Guidelines, October 2023
   ================================================================ */

/* ---------- Satoshi — brand display face (local OTF files) ---------- */


:scope {
  /* ---------- Brand palette (from brandbook p.16) ---------- */
  --shift-mint:        #3DEFB2;  /* primary accent — symbol gradient start */
  --shift-blue:        #6BB0FF;  /* secondary accent — symbol gradient end */
  --shift-navy:        #1D3A6E;  /* brand navy — wordmark color */
  --shift-ink:         #131521;  /* near-black, primary dark surface */
  --shift-ice:         #CFDFF9;  /* pale blue, tonal surface */
  --shift-paper:       #F5F8FE;  /* off-white, light surface */
  --shift-white:       #FFFFFF;

  /* ---------- Semantic surfaces (light mode default) ---------- */
  --bg:                var(--shift-paper);
  --bg-elevated:       var(--shift-white);
  --bg-inverse:        var(--shift-ink);
  --bg-tonal:          var(--shift-ice);

  /* ---------- Text ---------- */
  --fg-1:              var(--shift-ink);     /* primary text */
  --fg-2:              #3B4156;              /* secondary text */
  --fg-3:              #6B7388;              /* muted text */
  --fg-brand:          var(--shift-navy);    /* brand text */
  --fg-on-dark:        var(--shift-white);
  --fg-on-dark-2:      #B8C2D9;
  --fg-on-dark-3:      #7B8399;
  --fg-accent:         var(--shift-mint);

  /* ---------- Lines & borders ---------- */
  --line-1:            rgba(19, 21, 33, 0.08);
  --line-2:            rgba(19, 21, 33, 0.14);
  --line-on-dark:      rgba(255, 255, 255, 0.10);
  --line-on-dark-2:    rgba(255, 255, 255, 0.18);

  /* ---------- Semantic status ---------- */
  --ok:                #3DEFB2;              /* yes / up — brand mint */
  --warn:              #FFB547;
  --err:               #FF5E7A;
  --no:                #FF5E7A;              /* no / down */

  /* ---------- Brand gradients (brandbook p.19) ---------- */
  --grad-mint-blue:    linear-gradient(135deg, #3DEFB2 0%, #6BB0FF 100%);
  --grad-blue-navy:    linear-gradient(135deg, #6BB0FF 0%, #1D3A6E 100%);
  --grad-navy-ink:     linear-gradient(135deg, #1D3A6E 0%, #131521 100%);
  --grad-ice-paper:    linear-gradient(135deg, #CFDFF9 0%, #F5F8FE 100%);
  --grad-hero-dark:    radial-gradient(ellipse 80% 60% at 75% 20%, rgba(61,239,178,0.22) 0%, rgba(107,176,255,0.10) 35%, rgba(19,21,33,0) 70%), linear-gradient(180deg, #0B0D16 0%, #131521 100%);

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(19,21,33,0.06), 0 1px 1px rgba(19,21,33,0.04);
  --shadow-md:  0 4px 12px rgba(19,21,33,0.08), 0 2px 4px rgba(19,21,33,0.04);
  --shadow-lg:  0 14px 40px rgba(19,21,33,0.10), 0 4px 10px rgba(19,21,33,0.05);
  --shadow-glow-mint: 0 0 40px rgba(61,239,178,0.35);
  --shadow-glow-blue: 0 0 40px rgba(107,176,255,0.30);

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Type — families ---------- */
  --font-display: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- Type — sizes ---------- */
  --fs-display-xl: clamp(48px, 6.2vw, 88px);
  --fs-display-lg: clamp(40px, 5vw, 68px);
  --fs-display-md: clamp(32px, 3.8vw, 52px);
  --fs-h1: clamp(32px, 3.4vw, 44px);
  --fs-h2: clamp(26px, 2.6vw, 34px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-sm:   14px;
  --fs-xs:   12px;
  --fs-eyebrow: 13px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ---------- Semantic type classes ---------- */

.display-xl, h1.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display-xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-lg);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--fg-1);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.22;
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}
.small { font-size: var(--fs-sm); line-height: 1.5; }
.xs    { font-size: var(--fs-xs); line-height: 1.4; }
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}


    * { box-sizing: border-box; }
    :scope { margin: 0; padding: 0; background: var(--shift-ink); color: var(--fg-on-dark); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
    html { scroll-behavior: smooth; }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

    .pm-v35-page { background: var(--shift-ink); overflow-x: hidden; }
    .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    section { padding: 112px 0; position: relative; }
    @media (max-width: 720px) { section { padding: 72px 0; } }

    /* Reveal on scroll */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
    .reveal.in { opacity: 1; transform: none; }
    .reveal.d1 { transition-delay: 80ms; }
    .reveal.d2 { transition-delay: 160ms; }
    .reveal.d3 { transition-delay: 240ms; }
    .reveal.d4 { transition-delay: 320ms; }
    @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

    /* ---------- NAV ---------- */
    .nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(11,13,22,0.72); border-bottom: 1px solid var(--line-on-dark); }
    .nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 32px; }
    .nav img { height: 22px; }
    .nav-links { display: flex; gap: 28px; flex: 1; }
    .nav-links a { color: var(--fg-on-dark-2); font-size: 14px; font-weight: 500; transition: color var(--dur-fast); }
    .nav-links a:hover { color: var(--fg-on-dark); }
    @media (max-width: 880px) { .nav-links { display: none; } }

    /* ---------- BUTTONS (shiftmarkets.com style: rectangular, small radius) ---------- */
    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 6px; font-weight: 600; font-size: 15px; letter-spacing: 0.005em; transition: transform 180ms var(--ease-out), box-shadow var(--dur-base), background var(--dur-base); white-space: nowrap; font-family: var(--font-body); }
    .btn-primary { background: var(--shift-mint); color: var(--shift-ink); }
    .btn-primary:hover { box-shadow: var(--shadow-glow-mint); transform: translateY(-2px); }
    .btn-ghost { background: transparent; color: var(--fg-on-dark); border: 1.5px solid var(--line-on-dark-2); }
    .btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--shift-mint); color: var(--shift-mint); }
    .btn-lg { padding: 16px 30px; font-size: 16px; }
    .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
    .btn:hover .arrow { transform: translateX(4px); }

    /* ---------- HERO ---------- */
    .hero { background: var(--grad-hero-dark); padding: 96px 0 60px; position: relative; overflow: hidden; }
    .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: self-start; }
    @media (max-width: 720px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

    /* 30% smaller (was display-xl clamp 48-88 → 34-62), weight 900 → 700 */
    .hero h1 { color: var(--fg-on-dark); font-size: clamp(34px, 4.4vw, 62px); line-height: 1.05; letter-spacing: -0.022em; margin: 0 0 20px; font-family: var(--font-display); font-weight: 700; }
    .hero h1 .accent { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; }
    .hero .lede { font-size: 18px; line-height: 1.55; color: var(--fg-on-dark-2); max-width: 560px; }
    .hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
    .hero-foot { margin-top: 28px; display: flex; gap: 24px; color: var(--fg-on-dark-3); font-size: 13px; flex-wrap: wrap; }
    .hero-foot .dot { color: var(--shift-mint); }

    /* Hero visual — embedded platform frame with subtle float */
    .hero-visual { position: relative; animation: heroFloat 9s ease-in-out infinite; }
    @keyframes heroFloat { 50% { transform: translateY(-10px); } }

    /* Mobile only: stop the float, cap the image width, center it, and let the bottom 10% peek behind the hero edge */
    @media (max-width: 720px) {
      .hero { padding-bottom: 0; }
      .hero .hero-grid > div:first-child { text-align: center; }
      .hero .lede { margin-left: auto; margin-right: auto; }
      .hero-ctas { justify-content: center; }
      .hero-foot { justify-content: center; }
      .hero-visual { animation: none; line-height: 0; text-align: center; }
      .hero-visual img { width: 70% !important; max-width: 336px !important; margin-left: auto !important; margin-right: auto !important; transform: translateY(10%); }
    }

    .plat { background: rgba(19,21,33,0.72); border: 1px solid var(--line-on-dark-2); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(61,239,178,0.05); backdrop-filter: blur(14px); }
    .plat-topbar { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-on-dark); background: rgba(11,13,22,0.6); }
    .plat-dots { display: flex; gap: 6px; }
    .plat-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(207,223,249,0.16); }
    .plat-title { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--fg-on-dark-2); letter-spacing: 0.14em; text-transform: uppercase; }
    .plat-body { padding: 18px; }

    .plat-existing { padding: 14px 16px; background: rgba(29,58,110,0.22); border: 1px solid var(--line-on-dark); border-radius: var(--r-md); margin-bottom: 16px; }
    .plat-existing .lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-on-dark-3); margin-bottom: 10px; font-weight: 600; }
    .asset-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; align-items: center; }
    .asset-row:last-child { border-bottom: none; }
    .asset-name { color: var(--fg-on-dark); font-weight: 500; }
    .asset-price { color: var(--fg-on-dark-3); font-variant-numeric: tabular-nums; font-size: 12px; }
    .asset-chg { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; min-width: 56px; text-align: right; }
    .asset-chg.up { color: var(--shift-mint); }
    .asset-chg.down { color: var(--err); }

    .plat-widget { border: 1px solid rgba(61,239,178,0.28); border-radius: var(--r-md); overflow: hidden; position: relative; background: rgba(61,239,178,0.03); }
    .plat-widget-badge { position: absolute; top: 12px; right: 12px; background: var(--shift-mint); color: var(--shift-ink); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
    .plat-widget-head { padding: 14px 16px 10px; border-bottom: 1px solid rgba(61,239,178,0.1); }
    .plat-widget-head .lbl { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shift-mint); }
    .mini-mkt { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .mini-mkt:last-child { border-bottom: none; }
    .mini-mkt .q { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--fg-on-dark); margin-bottom: 6px; letter-spacing: -0.005em; }
    .mini-mkt .meta { font-size: 10px; color: var(--fg-on-dark-3); margin-bottom: 10px; letter-spacing: 0.02em; }
    .mini-mkt .odds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .mini-odd { padding: 8px 10px; border-radius: 4px; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-align: center; display: flex; justify-content: space-between; align-items: center; transition: transform 180ms var(--ease-out); }
    .mini-odd:hover { transform: translateY(-1px); }
    .mini-odd.yes { background: rgba(61,239,178,0.12); color: var(--shift-mint); border: 1px solid rgba(61,239,178,0.3); }
    .mini-odd.no  { background: rgba(255,94,122,0.10); color: var(--err); border: 1px solid rgba(255,94,122,0.28); }
    .mini-odd .side { font-size: 10px; letter-spacing: 0.1em; opacity: 0.85; }

    /* animated pulse for LIVE dot in widget header */
    .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--shift-mint); margin-right: 6px; box-shadow: 0 0 8px var(--shift-mint); animation: pulseDot 1.6s ease-in-out infinite; vertical-align: middle; }
    @keyframes pulseDot { 50% { opacity: 0.35; transform: scale(0.85); } }

    /* ambient orbs behind hero */
    .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.28; pointer-events: none; }
    .orb.mint { width: 420px; height: 420px; background: var(--shift-mint); top: -120px; right: -40px; animation: orbDrift1 18s ease-in-out infinite; }
    .orb.blue { width: 520px; height: 520px; background: var(--shift-blue); bottom: -200px; left: -120px; opacity: 0.18; animation: orbDrift2 22s ease-in-out infinite; }
    @keyframes orbDrift1 { 50% { transform: translate(-40px, 30px); } }
    @keyframes orbDrift2 { 50% { transform: translate(40px, -30px); } }

    /* ---------- SECTION HEADS ---------- */
    .section-head { max-width: 760px; margin-bottom: 56px; }
    .section-head h2 { color: var(--fg-on-dark); margin: 0 0 16px; font-size: var(--fs-display-md); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; }
    .section-head p { color: var(--fg-on-dark-2); font-size: 18px; line-height: 1.6; max-width: 640px; }

    /* ---------- STATS ---------- */
    .stats { padding: 80px 0; background: linear-gradient(180deg, var(--shift-ink) 0%, #0E1120 100%); }
    @media (min-width: 1024px) { .stats .stats-title-nowrap { white-space: nowrap; } }
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    @media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr; } }
    .stat { padding: 36px 28px; border: 1px solid var(--line-on-dark); border-radius: var(--r-lg); background: rgba(255,255,255,0.02); text-align: center; transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out), background var(--dur-base); }
    .stat:hover { border-color: rgba(61,239,178,0.35); transform: translateY(-4px); background: rgba(61,239,178,0.03); }
    .stat .num { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; background: var(--grad-mint-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .stat .cap { margin-top: 14px; color: var(--fg-on-dark-2); font-size: 14px; line-height: 1.5; max-width: 260px; margin-left: auto; margin-right: auto; }

    /* ---------- ICP / WHO IT'S FOR ---------- */
    .icp { background: var(--shift-ink); }
    .icp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    @media (max-width: 980px) { .icp-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .icp-grid { grid-template-columns: 1fr; } }
    .icp-card { padding: 28px 24px; border: 1px solid var(--line-on-dark); border-radius: var(--r-lg); background: rgba(255,255,255,0.02); transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base) var(--ease-out); position: relative; overflow: hidden; }
    .icp-card:hover { border-color: rgba(61,239,178,0.3); background: rgba(61,239,178,0.025); transform: translateY(-3px); }
    .icp-ic { width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(61,239,178,0.10); border: 1px solid rgba(61,239,178,0.24); color: var(--shift-mint); display: grid; place-items: center; margin-bottom: 18px; }
    .icp-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--fg-on-dark); margin: 0 0 10px; letter-spacing: -0.005em; }
    .icp-card p { color: var(--fg-on-dark-2); font-size: 14px; line-height: 1.55; margin: 0; }

    /* ---------- OUTCOMES (redesigned: asymmetric bento grid, no numbers, with image) ---------- */
    .outcomes { background: linear-gradient(180deg, #0E1120 0%, var(--shift-ink) 100%); }
    .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(200px, auto); gap: 14px; }
    @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } }
    .b { padding: 32px; border: 1px solid var(--line-on-dark); border-radius: var(--r-lg); background: rgba(255,255,255,0.02); position: relative; overflow: hidden; transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base) var(--ease-out); display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; }
    .b:hover { border-color: rgba(61,239,178,0.3); background: rgba(61,239,178,0.025); transform: translateY(-3px); }
    .b h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--fg-on-dark); margin: 0 0 10px; letter-spacing: -0.01em; }
    .b p { color: var(--fg-on-dark-2); font-size: 14px; line-height: 1.6; margin: 0; }
    .b .tag-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: rgba(61,239,178,0.10); border: 1px solid rgba(61,239,178,0.24); color: var(--shift-mint); display: grid; place-items: center; }
    /* Positions */
    .b.b1 { grid-column: span 3; }
    .b.b2 { grid-column: span 3; }
    .b.b3 { grid-column: span 2; }
    .b.b4 { grid-column: span 2; }
    .b.b5 { grid-column: span 2; background: linear-gradient(135deg, rgba(29,58,110,0.5) 0%, rgba(19,21,33,0.6) 100%); border-color: rgba(107,176,255,0.22); padding: 0; overflow: hidden; }
    .b5 .b5-inner { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; z-index: 1; }
    .b5::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 85% 80%, rgba(61,239,178,0.18), transparent 70%); pointer-events: none; }
    .b5 .kpi { font-family: var(--font-display); font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: -0.03em; background: var(--grad-mint-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .b5 .kpi-sub { margin-top: 6px; color: var(--fg-on-dark-2); font-size: 13px; }
    @media (max-width: 900px) { .b.b1, .b.b2, .b.b3, .b.b4, .b.b5 { grid-column: span 2; } }

    /* ---------- STEPS (redesigned: horizontal timeline with connecting rail) ---------- */
    .steps { background: #0A0C14; position: relative; overflow: hidden; }
    .timeline { position: relative; padding: 20px 0 10px; }
    .timeline::before { content: ''; position: absolute; top: 60px; left: 40px; right: 40px; height: 2px; transform: translateY(-1px); background: linear-gradient(90deg, rgba(61,239,178,0.08), rgba(61,239,178,0.5), rgba(107,176,255,0.5), rgba(107,176,255,0.08)); }
    .timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
    @media (max-width: 900px) { .timeline-grid { grid-template-columns: repeat(2, 1fr); } .timeline::before { display: none; } }
    @media (max-width: 520px) { .timeline-grid { grid-template-columns: 1fr; } }
    .tl-step { text-align: left; padding: 0 8px; }
    .tl-node { width: 80px; height: 80px; border-radius: 50%; background: var(--shift-ink); border: 2px solid rgba(61,239,178,0.35); display: grid; place-items: center; margin: 0 0 22px; position: relative; transition: transform 300ms var(--ease-out), border-color 300ms, box-shadow 300ms; }
    .tl-step:hover .tl-node { transform: scale(1.06); border-color: var(--shift-mint); box-shadow: 0 0 30px rgba(61,239,178,0.3); }
    .tl-node .n { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.02em; background: var(--grad-mint-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .tl-node::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(61,239,178,0.2); opacity: 0; transition: opacity 300ms; }
    .tl-step:hover .tl-node::after { opacity: 1; }
    .tl-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--fg-on-dark); margin: 0 0 8px; letter-spacing: -0.005em; }
    .tl-step p { color: var(--fg-on-dark-2); font-size: 14px; line-height: 1.55; margin: 0; }

    /* ---------- LIQUIDITY CARD with image collage ---------- */
    .liq { background: linear-gradient(180deg, var(--shift-ink) 0%, #0A0C14 100%); }
    .liq-wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: stretch; }
    @media (max-width: 900px) { .liq-wrap { grid-template-columns: 1fr; } }
    .liq-card { padding: 44px; border: 1px solid var(--line-on-dark); border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(29,58,110,0.35) 0%, rgba(19,21,33,0.5) 100%); position: relative; overflow: hidden; }
    .liq-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(107,176,255,0.18), transparent 70%); filter: blur(60px); pointer-events: none; }
    .liq-card > * { position: relative; z-index: 1; }
    .liq-card h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-md); color: var(--fg-on-dark); margin: 0 0 14px; letter-spacing: -0.015em; line-height: 1.08; max-width: 780px; }
    .liq-card > p { color: var(--fg-on-dark-2); font-size: 17px; line-height: 1.6; max-width: 720px; margin: 0; }
    .liq-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
    .liq-pill { padding: 18px; border: 1px solid var(--line-on-dark); border-radius: var(--r-md); background: rgba(11,13,22,0.4); transition: border-color var(--dur-base), background var(--dur-base); }
    .liq-pill:hover { border-color: rgba(61,239,178,0.3); background: rgba(11,13,22,0.6); }
    .liq-pill strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--fg-on-dark); margin-bottom: 6px; }
    .liq-pill span { color: var(--fg-on-dark-2); font-size: 13px; line-height: 1.5; }
    /* Mobile: drop the 2x2 card grid in favor of an editorial list with a mint accent */
    @media (max-width: 720px) {
      .liq-card { padding: 28px 24px; }
      .liq-pills { grid-template-columns: 1fr; gap: 0; margin-top: 22px; }
      .liq-pill { padding: 16px 0; border: 0; border-radius: 0; background: transparent; border-top: 1px solid rgba(255,255,255,0.08); display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; transition: none; }
      .liq-pill:first-child { border-top: 0; padding-top: 8px; }
      .liq-pill:hover { border-color: rgba(255,255,255,0.08); background: transparent; }
      .liq-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--shift-mint); margin-top: 9px; box-shadow: 0 0 0 4px rgba(61,239,178,0.14); grid-row: 1 / span 2; align-self: start; }
      .liq-pill strong { grid-column: 2; display: block; font-size: 16px; margin-bottom: 4px; }
      .liq-pill span { grid-column: 2; font-size: 14px; line-height: 1.55; }
    }

    /* Liquidity diagram panel — animated SVG */
    .liq-diagram { border: 1px solid var(--line-on-dark); border-radius: var(--r-xl); background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(61,239,178,0.08) 0%, rgba(19,21,33,0.6) 60%); display: grid; place-items: center; padding: 36px; position: relative; overflow: hidden; min-height: 360px; }
    .liq-diagram svg { width: 100%; max-width: 380px; height: auto; }
    .liq-diagram .dlabel { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--fg-on-dark-3); }
    .liq-diagram .dnode-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: var(--fg-on-dark); }

    /* ---------- INSIGHT BANNER (new image section) ---------- */
    .insight { background: var(--shift-ink); padding: 80px 0; }
    .insight-card { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--line-on-dark); border-radius: var(--r-xl); overflow: hidden; background: rgba(255,255,255,0.02); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
    .insight-card:hover { border-color: rgba(61,239,178,0.32); transform: translateY(-3px); }
    @media (max-width: 820px) { .insight-card { grid-template-columns: 1fr; } }
    .insight-img { background: url('../landing/prediction-markets-v35/insight.jpg') center/cover; min-height: 280px; }
    .insight-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
    .insight-kicker { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shift-mint); }
    .insight-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--fg-on-dark); margin: 0; letter-spacing: -0.01em; line-height: 1.2; }
    .insight-body p { color: var(--fg-on-dark-2); font-size: 15px; line-height: 1.6; margin: 0; }
    .insight-body a { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--shift-mint); display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
    .insight-body a:hover .arrow { transform: translateX(4px); }

    /* ---------- CAPABILITIES ---------- */
    .caps { background: var(--shift-ink); }
    .cap-row { display: grid; grid-template-columns: 320px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--line-on-dark); align-items: center; transition: background var(--dur-base); }
    .cap-row:first-of-type { border-top: 1px solid rgba(61,239,178,0.35); }
    .cap-row:last-of-type { border-bottom: 1px solid var(--line-on-dark); }
    .cap-row:hover { background: rgba(61,239,178,0.02); }
    @media (max-width: 720px) { .cap-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } }
    .cap-name { display: flex; align-items: center; gap: 14px; }
    .cap-name .ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--grad-mint-blue); color: var(--shift-ink); display: grid; place-items: center; transition: transform 300ms var(--ease-out); }
    .cap-row:hover .ic { transform: rotate(-6deg) scale(1.06); }
    .cap-name h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--fg-on-dark); margin: 0; letter-spacing: -0.005em; }
    .cap-desc { color: var(--fg-on-dark-2); font-size: 15px; line-height: 1.55; }

    /* ---------- FAQ ---------- */
    .faq { background: #0A0C14; }
    .faq-list { max-width: 860px; margin: 0 auto; }
    .faq-item { border-bottom: 1px solid var(--line-on-dark); }
    .faq-q { padding: 24px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--fg-on-dark); letter-spacing: -0.005em; line-height: 1.35; transition: color 180ms; }
    .faq-q:hover { color: var(--shift-mint); }
    .faq-q::after { content: '+'; color: var(--shift-mint); font-size: 24px; line-height: 1; flex-shrink: 0; font-weight: 400; transition: transform 300ms var(--ease-out); }
    .faq-item.open .faq-q::after { content: '−'; transform: rotate(180deg); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
    .faq-item.open .faq-a { max-height: 400px; }
    .faq-a p { padding: 0 0 24px; color: var(--fg-on-dark-2); font-size: 15px; line-height: 1.65; margin: 0; max-width: 720px; }

    /* ---------- FINAL CTA ---------- */
    .final { background: var(--shift-ink); padding: 80px 0; position: relative; }
    @keyframes ctaPulse { 50% { opacity: 0.7; } }
    .final-inner { position: relative; text-align: center; max-width: 1040px; margin: 0 auto; background: var(--grad-navy-ink); border: 1px solid rgba(107,176,255,0.22); border-radius: 28px; padding: 80px 40px; overflow: hidden; }
    .final-inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(61,239,178,0.18), transparent 60%); pointer-events: none; animation: ctaPulse 6s ease-in-out infinite; border-radius: 28px; }
    .final-inner > * { position: relative; z-index: 1; }
    .final h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-md); color: var(--fg-on-dark); letter-spacing: -0.02em; line-height: 1.08; margin: 0 auto 32px; max-width: 720px; }
    .final h2 .accent { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; }
    .final p { color: var(--fg-on-dark-2); font-size: 18px; line-height: 1.55; margin: 0 auto 32px; max-width: 640px; }
    .final .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .final .fine { margin-top: 22px; font-size: 13px; color: var(--fg-on-dark-3); }
    @media (max-width: 640px) { .final { padding: 48px 0; } .final-inner { padding: 56px 24px; border-radius: 20px; } .final-inner::before { border-radius: 20px; } }

    /* ---------- FOOTER ---------- */
    footer { background: #070811; padding: 48px 0; border-top: 1px solid var(--line-on-dark); }
    .foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
    .foot-inner img { height: 22px; opacity: 0.9; }
    .foot-inner .foot-links { display: flex; gap: 24px; font-size: 13px; color: var(--fg-on-dark-3); flex-wrap: wrap; }
    .foot-inner .foot-links a:hover { color: var(--fg-on-dark); }
    .foot-inner .copy { color: var(--fg-on-dark-3); font-size: 13px; }

    /* ---------- TWEAKS ---------- */
    .tweaks { position: fixed; bottom: 20px; right: 20px; z-index: 100; background: rgba(11,13,22,0.94); border: 1px solid var(--line-on-dark-2); border-radius: var(--r-lg); padding: 18px; backdrop-filter: blur(14px); font-size: 13px; min-width: 260px; box-shadow: var(--shadow-lg); display: none; }
    .tweaks.show { display: block; }
    .tweaks h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-on-dark-3); margin: 0 0 14px; }
    .tweak-row { margin-bottom: 14px; }
    .tweak-row:last-child { margin-bottom: 0; }
    .tweak-label { color: var(--fg-on-dark-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
    .tweak-opts { display: flex; gap: 4px; flex-wrap: wrap; }
    .tweak-opts button { padding: 6px 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-on-dark); border-radius: 4px; color: var(--fg-on-dark-2); font-size: 12px; font-weight: 500; transition: all var(--dur-fast); }
    .tweak-opts button:hover { color: var(--fg-on-dark); }
    .tweak-opts button.active { background: var(--shift-mint); color: var(--shift-ink); border-color: var(--shift-mint); }

    /* Accent variants */
    .pm-v35-landing[data-accent="blue"] .stat .num,
    .pm-v35-landing[data-accent="blue"] .b5 .kpi,
    .pm-v35-landing[data-accent="blue"] .tl-node .n { background: linear-gradient(135deg, #6BB0FF 0%, #CFDFF9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .pm-v35-landing[data-accent="blue"] .btn-primary { background: var(--shift-blue); }
    .pm-v35-landing[data-accent="blue"] .icp-ic { color: var(--shift-blue); background: rgba(107,176,255,0.10); border-color: rgba(107,176,255,0.24); }

    /* Hero variants */
    .pm-v35-landing[data-hero="centered"] .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .pm-v35-landing[data-hero="centered"] .hero .lede { margin: 0 auto; }
    .pm-v35-landing[data-hero="centered"] .hero-ctas { justify-content: center; }
    .pm-v35-landing[data-hero="centered"] .hero-foot { justify-content: center; }
    .pm-v35-landing[data-hero="centered"] .hero-visual { display: none; }
    .pm-v35-landing[data-hero="centered"] .hero { padding-bottom: 80px; }

    /* ============= FLOW / SECTION RHYTHM =============
       Solid colors for every section — no mid-section gradients —
       so transitions are clean cuts between sections. */
    .stats { background: var(--shift-ink); }
    .outcomes { background: #FFFFFF; }
    .steps { background: #FFFFFF; }
    .liq { background: var(--shift-ink); }
    .faq { background: #FFFFFF; }
    .icp { background: #FFFFFF; }

    /* ============= LIGHT SECTIONS ============= */
    /* Section heads inside light sections */
    .icp .section-head h2,
    .outcomes .section-head h2,
    .steps .section-head h2,
    .faq .section-head h2 { color: var(--shift-ink); }
    .icp .section-head p,
    .outcomes .section-head p,
    .steps .section-head p { color: #4A5166; }

    /* ICP (Built for platforms) cards */
    .icp .icp-card { background: #FFFFFF; border-color: rgba(17, 19, 31, 0.10); box-shadow: 0 4px 14px rgba(17, 19, 31, 0.06); }
    .icp .icp-card:hover { background: #FFFFFF; border-color: rgba(61, 239, 178, 0.45); box-shadow: 0 12px 32px rgba(17, 19, 31, 0.10); }
    .icp .icp-card h3 { color: var(--shift-ink); }
    .icp .icp-card p { color: #4A5166; }
    .icp .icp-ic { background: rgba(61, 239, 178, 0.12); border-color: rgba(61, 239, 178, 0.35); }

    /* Outcomes (bento) cards */
    .outcomes .b { background: #FFFFFF; border-color: rgba(17, 19, 31, 0.10); box-shadow: 0 4px 14px rgba(17, 19, 31, 0.06); }
    .outcomes .b:hover { background: #FFFFFF; border-color: rgba(61, 239, 178, 0.45); box-shadow: 0 12px 32px rgba(17, 19, 31, 0.10); }
    .outcomes .b h3 { color: var(--shift-ink); }
    .outcomes .b p { color: #4A5166; }
    .outcomes .b .tag-ic { background: rgba(61, 239, 178, 0.12); border-color: rgba(61, 239, 178, 0.35); }
    /* Keep b5 as a dark feature card — contrast accent inside the light section */
    .outcomes .b.b5 { background: linear-gradient(135deg, #1D3A6E 0%, var(--shift-ink) 100%); border-color: rgba(107, 176, 255, 0.3); box-shadow: 0 6px 18px rgba(17, 19, 31, 0.12); }

    /* Steps timeline */
    .steps .timeline::before { background: linear-gradient(90deg, rgba(61, 239, 178, 0.15), rgba(61, 239, 178, 0.6), rgba(107, 176, 255, 0.6), rgba(107, 176, 255, 0.15)); }
    .steps .tl-node { background: var(--shift-ink); border-color: rgba(61, 239, 178, 0.5); box-shadow: 0 4px 12px rgba(17, 19, 31, 0.1); }
    .steps .tl-step h3 { color: var(--shift-ink); }
    .steps .tl-step p { color: #4A5166; }

    /* FAQ */
    .faq .faq-item { border-bottom-color: rgba(17, 19, 31, 0.10); }
    .faq .faq-q { color: var(--shift-ink); }
    .faq .faq-a p { color: #4A5166; }

    /* Mid-section CTA between Outcomes and Steps */
    .mid-cta { display: flex; justify-content: center; margin-top: 56px; }
    @media (max-width: 720px) { .mid-cta { margin-top: 40px; } }
    /* Tighter vertical rhythm around ticker, steps, and capabilities */
    .icp { padding-bottom: 56px; }
    .outcomes { padding-top: 56px; padding-bottom: 56px; }
    .steps { padding-top: 56px; }
    .liq { padding-bottom: 64px; }
    .caps { padding-top: 64px; }
    @media (max-width: 720px) {
      .icp { padding-bottom: 36px; }
      .outcomes { padding-top: 36px; padding-bottom: 40px; }
      .steps { padding-top: 36px; }
      .liq { padding-bottom: 44px; }
      .caps { padding-top: 44px; }
    }

    /* === CATEGORIES TICKER (between ICP and Outcomes) === */
    .cats-ticker { padding: 32px 0; background: var(--shift-white); position: relative; overflow: hidden; }
    .cats-ticker::before, .cats-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; }
    .cats-ticker::before { left: 0; background: linear-gradient(90deg, var(--shift-white), rgba(255,255,255,0)); }
    .cats-ticker::after { right: 0; background: linear-gradient(270deg, var(--shift-white), rgba(255,255,255,0)); }
    .cats-eyebrow { text-align: center; font-family: 'Satoshi', var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin: 0 auto 28px; }
    .cats-marquee { position: relative; }
    .cats-track { display: flex; gap: 14px; width: max-content; animation: catsScroll 55s linear infinite; }
    .cats-ticker:hover .cats-track { animation-play-state: paused; }
    .cats-chip { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--shift-ink); border: 1px solid var(--shift-ink); border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-on-dark); white-space: nowrap; }
    .cats-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--shift-mint); flex-shrink: 0; box-shadow: 0 0 0 4px rgba(61,239,178,0.18); }
    @keyframes catsScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) { .cats-track { animation: none; } }
    @media (max-width: 720px) {
      .cats-ticker { padding: 24px 0; }
      .cats-ticker::before, .cats-ticker::after { width: 60px; }
      .cats-eyebrow { margin-bottom: 22px; font-size: 11px; }
      .cats-chip { padding: 12px 18px; font-size: 14px; gap: 10px; }
      .cats-track { gap: 10px; animation-duration: 42s; }
    }
}