:root{
    --font-display: 'League Gothic', 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --ink:#ffffff;
    --ink-muted: rgba(185,176,204,.6);
    --ink-url: rgba(255,255,255,.6);
    --ink-dim: rgba(255,255,255,.35);
    --hairline: rgba(255,255,255,.10);

    --panel-bg: rgba(8,7,11,.58);
    --panel-border: rgba(255,255,255,.13);
    --chip-bg: rgba(255,255,255,.035);
    --chip-border: rgba(255,255,255,.16);

    --blue-bloom: rgba(40,78,205,.30);
    --purple-bloom: rgba(139,92,246,.14);
    --chart-line: rgba(255,255,255,.85);
    --shadow: rgba(0,0,0,.45);

    --violet: #8B5CF6;
    --lavender: #C7BEFF;
    --blue: #4F86F5;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  /* Blue + purple bloom and a faint white highlight, pinned to the viewport
     corners -- the sanctioned hints of hue in the system. These are painted
     as extra layers of BODY'S OWN background (not a separate ::before
     element), with background-attachment:fixed to keep them corner-pinned
     as the page scrolls. A background is by definition painted behind an
     element's own content -- there is no stacking-context/z-index for a
     separate layer to get tangled in, so this is the one arrangement that
     structurally cannot end up in front of anything on the page.
     Only the three bloom layers get :fixed -- a fixed background is sized
     to the viewport, so the base color layer stays :scroll (the default)
     to keep covering the full document on any page taller than one
     viewport; otherwise everything below the first screen falls through
     to a blank white canvas. */
  body{
    margin:0; color:var(--ink);
    font-family:var(--font-body);
    background:
      radial-gradient(1500px 760px at 104% -10%, var(--blue-bloom), transparent 52%),
      radial-gradient(1300px 820px at -6% 106%, var(--purple-bloom), transparent 55%),
      radial-gradient(1100px 560px at 6% -16%, rgba(206,212,228,.08), transparent 58%),
      linear-gradient(150deg,#221f28 0%,#17151b 52%,#0b0a0e 100%);
    background-repeat: no-repeat;
    background-attachment: fixed, fixed, fixed, scroll;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  /* Keyboard skip link: off-screen until focused, then pinned top-left over the
     nav. Lets a keyboard or screen-reader user jump the nav and logo row and
     land on <main> directly. */
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:1000;
    padding:0.7rem 1.1rem; border-radius:0 0 10px 0;
    background:var(--ink); color:#0b0a0e;
    font-family:var(--font-body); font-weight:600; font-size:0.78rem;
    letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  }
  .skip-link:focus{ left:0; }

  @media (max-width:900px){
    /* background-attachment:fixed makes the browser repaint the full viewport on
       every scroll frame, which is most of why long pages stuttered on a phone.
       Same three blooms, same viewport pinning, but as one composited fixed
       layer that scrolling never repaints. The base gradient stays on BODY so a
       page taller than the viewport still never falls through to white, and
       z-index:-1 keeps the layer behind all in-flow content -- body creates no
       stacking context, so nothing can end up painted over. */
    body{
      background: linear-gradient(150deg,#221f28 0%,#17151b 52%,#0b0a0e 100%);
      background-attachment: scroll;
    }
    body::before{
      content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
      background:
        radial-gradient(1500px 760px at 104% -10%, var(--blue-bloom), transparent 52%),
        radial-gradient(1300px 820px at -6% 106%, var(--purple-bloom), transparent 55%),
        radial-gradient(1100px 560px at 6% -16%, rgba(206,212,228,.08), transparent 58%);
      background-repeat: no-repeat;
    }
  }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background: rgba(255,255,255,.25); }
  /* Kept as the class name for markup compatibility; renders as the brand
     book's "standard label" treatment (Inter, uppercase, tracked) -- not a
     monospace face, which the brand system doesn't use. */
  .mono{ font-family:var(--font-body); font-weight:600; letter-spacing:0.08em; }

  #scroll-progress{
    position:fixed; top:0; left:0; height:2px; width:100%;
    background:var(--ink); transform: scaleX(0); transform-origin:left; z-index:50;
  }

  /* MOTION -- base state is fully visible; only opt into animation when the
     user hasn't asked to reduce it, so reduced-motion visitors see the
     finished layout immediately with no JS-dependent flash. */
  .reveal{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      opacity:0; transform:translateY(26px);
      transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
    }
    .reveal.in{ opacity:1; transform:none; }
    .hero-anim{ opacity:0; transform:translateY(14px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
    .hero-anim.in{ opacity:1; transform:none; }
    a, button, .btn, .navcta, .proof-item, .dune-row, .close-card, .prod, .chart-item, .partner-tile{
      transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16,.84,.44,1), opacity .25s ease;
    }
    /* The shared hover-transition rule above sets its own opacity/transform
       timing, which also happens to hit tiles that are reveal targets --
       overriding .reveal's slower fade-in with its snappy hover speed and
       making them pop in instead of gliding in. Restore the reveal timing
       for those specifically, without touching the hover-only properties. */
    .proof-item.reveal, .dune-row.reveal, .close-card.reveal, .chart-item.reveal{
      transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .3s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), opacity 1.1s cubic-bezier(.22,.61,.36,1);
    }
    .partner-logo{ transition: opacity .25s ease; }
    .close-card:hover{ transform: translateY(-3px); }
    .dune-row:hover{ transform: translateY(-2px); }
    .btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(255,255,255,.35); }
    .btn.ghost:hover, .navcta:hover{ transform: translateY(-2px); }
    .btn:active, .navcta:active{ transform: translateY(0); }
    .prod:hover h3::before{ box-shadow: 0 0 7px 0 rgba(139,92,246,.55); }
    .partner-tile:hover{ border-color: rgba(255,255,255,.32); box-shadow: 0 0 10px rgba(139,92,246,.4); transform: translateY(-2px); }
    .partner-tile:hover .partner-logo{ opacity: 1; }
    .partner-tile:active{ transform: translateY(0); }
    .partner-tile.placeholder:hover{ color: var(--ink-muted); border-color: rgba(255,255,255,.28); transform:none; }

    /* MINI CHART -- the sparkline draws itself in once the stats row reveals,
       then gives a subtle, staggered brighten-and-lift on hover (reusing each
       bar's own reveal transition-delay, so the hover ripples left-to-right). */
    .mini-bar{ transform: scaleY(0); transform-origin: bottom; transition: transform .75s cubic-bezier(.16,.84,.44,1), filter .3s ease; }
    .chart-item.in .mini-bar{ transform: scaleY(1); }
    .chart-item.in:hover .mini-bar{ transform: scaleY(1.045); filter: brightness(1.3); }

    .prod-list > .reveal:nth-child(1),
    .partner-cats > .reveal:nth-child(1),
    .paper-list > .reveal:nth-child(1),
    .close-in > .reveal:nth-child(1),
    .proof-grid > .reveal:nth-child(1){ transition-delay:0ms; }
    .prod-list > .reveal:nth-child(2),
    .partner-cats > .reveal:nth-child(2),
    .paper-list > .reveal:nth-child(2),
    .close-in > .reveal:nth-child(2),
    .proof-grid > .reveal:nth-child(2){ transition-delay:80ms; }
    .prod-list > .reveal:nth-child(3),
    .partner-cats > .reveal:nth-child(3),
    .paper-list > .reveal:nth-child(3),
    .proof-grid > .reveal:nth-child(3){ transition-delay:160ms; }
    .prod-list > .reveal:nth-child(4),
    .partner-cats > .reveal:nth-child(4),
    .paper-list > .reveal:nth-child(4),
    .proof-grid > .reveal:nth-child(4){ transition-delay:240ms; }
    .partner-cats > .reveal:nth-child(5){ transition-delay:320ms; }

    /* Traction band: wider, slower cascade across the four tiles, then the
       chart card settles in last instead of popping in alongside tile 1. */
    .proof-grid > .reveal:nth-child(1){ transition-delay:0ms; }
    .proof-grid > .reveal:nth-child(2){ transition-delay:110ms; }
    .proof-grid > .reveal:nth-child(3){ transition-delay:220ms; }
    .proof-grid > .reveal:nth-child(4){ transition-delay:330ms; }
    .growth-card.reveal{
      transition: border-color .3s ease, box-shadow .3s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), opacity 1.1s cubic-bezier(.22,.61,.36,1);
      transition-delay: 0s, 0s, 400ms, 400ms;
    }

    .navlinks a{ position:relative; }
    .navlinks a::after{
      content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
      background:var(--ink); transition: right .3s cubic-bezier(.16,.84,.44,1);
    }
    .navlinks a:hover::after{ right:0; }

    /* SCROLL PROGRESS */
    #scroll-progress{ transition: transform .1s linear; }
  }

  .band{ padding: 5.5rem 1.5rem; }
  .band-in{ max-width: 1120px; margin:0 auto; }
  .prose-col{ max-width: 62ch; }

  h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:0.01em; text-wrap:balance; margin:0; color:var(--ink); }

  /* NAV */
  nav{
    position: sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding: 1.1rem 1.5rem; border-bottom:1px solid var(--hairline);
    background: rgba(11,10,14,.55);
    backdrop-filter: blur(10px);
  }
  .wordmark{ display:flex; align-items:center; }
  .logo-mark{ height:26px; width:auto; display:block; }
  .navlinks{ display:flex; gap:1.6rem; font-family:var(--font-body); font-weight:600; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-muted); }
  .navlinks a:hover{ color:var(--ink); }
  .navcta{
    font-family:var(--font-body); font-weight:600; font-size:0.8rem; letter-spacing:0.01em;
    padding:0.55rem 1.05rem; border-radius:999px;
    border:1.5px solid var(--chip-border); background:var(--chip-bg); color:var(--ink);
  }
  .navcta:hover{ border-color: rgba(255,255,255,.35); }
  /* Burger, mobile only. Below 760px the link row used to be display:none
     with nothing in its place, which left phones with no navigation at all. */
  /* Both of these exist only for the mobile panel; the burger reveals them.
     Without the default hide, the duplicated CTA renders inline on desktop. */
  .nav-toggle, .navlinks .navcta-mobile{ display:none; }
  .nav-toggle{
    width:40px; height:40px; padding:0; margin-left:0.6rem;
    align-items:center; justify-content:center; flex-direction:column; gap:5px;
    border:1.5px solid var(--chip-border); border-radius:10px;
    background:var(--chip-bg); cursor:pointer; flex-shrink:0;
  }
  .nav-toggle span{
    display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  nav.nav-open .nav-toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  nav.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  nav.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

  @media (max-width:760px){
    .nav-toggle{ display:flex; }
    .navcta{ display:none; }
    .navlinks{
      display:none; position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0; padding:0.4rem 1.5rem 1rem;
      font-size:0.78rem;
      /* Opaque, unlike the nav bar itself: at any alpha the white headline
         underneath reads straight through a dropdown that covers it. */
      background:#0d0c11;
      border-bottom:1px solid var(--hairline);
      box-shadow:0 18px 40px rgba(0,0,0,.45);
    }
    nav.nav-open .navlinks{ display:flex; }
    .navlinks a{ padding:0.85rem 0; border-bottom:1px solid var(--hairline); }
    .navlinks a:last-child{ border-bottom:0; }
    /* The desktop CTA is hidden above; keep it reachable from inside the menu. */
    .navlinks .navcta-mobile{
      display:block; margin-top:0.9rem; padding:0.75rem 1.05rem; border:1.5px solid var(--chip-border);
      border-radius:999px; background:var(--chip-bg); color:var(--ink);
      text-align:center; letter-spacing:0.01em; text-transform:none; font-size:0.85rem;
    }
  }

  /* HERO */
  .hero{ padding: 3rem 1.5rem 3rem; border-bottom:1px solid var(--hairline); }
  .hero-in{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns: 1.05fr 0.95fr; gap:3.5rem; align-items:center; }

  /* HERO VISUAL -- Moonstone orbit: a belted sphere with drifting stars and
     occasional meteors, filling the empty right column of the hero. */
  .hero-space{ position:relative; width:90%; margin:0 auto; aspect-ratio:1/.86; border-radius:18px; overflow:hidden;
    background: rgba(255,255,255,.02); border:1px solid var(--panel-border);
    transition: border-color .3s ease, box-shadow .3s ease; }
  .hero-space:hover{ border-color: rgba(255,255,255,.24); box-shadow: 0 0 26px -4px rgba(139,92,246,.28), 0 0 0 1px rgba(255,255,255,.03) inset; }
  @media (max-width:900px){ .hero-space{ width:100%; aspect-ratio:1/.85; margin-top:1rem; } }

  .hv-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none;
    background: radial-gradient(120% 120% at 50% 38%, transparent 52%, rgba(0,0,0,.4) 100%); }


  .hv-pop-layer{ position:absolute; inset:0; z-index:7; pointer-events:none; }
  .hv-pop-chip{ position:absolute; font-family:var(--font-body); font-weight:600; font-size:.72rem; color:var(--lavender);
    transform:translate(-50%,-50%); opacity:0; white-space:nowrap; animation: hv-pop 1.9s ease-out forwards; }
  @keyframes hv-pop{ 0%{ opacity:0; transform:translate(-50%,-50%) translateY(0);} 15%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,-50%) translateY(-36px);} }

  .hv-ring{ position:absolute; left:50%; top:var(--cy,42%); border:1px solid var(--hairline); border-radius:50%; transform:translate(-50%,-50%); z-index:2; }
  .hv-node{ position:absolute; left:50%; top:var(--cy,42%); width:0; height:0; z-index:4; animation: hv-spin var(--dur,16s) linear infinite; animation-direction:var(--dir,normal); }
  .hv-node.ghost{ z-index:3; }
  .hv-node-dot{ position:absolute; border-radius:50%; margin-top:calc(var(--s,7px) / -2); margin-left:calc(var(--s,7px) / -2); width:var(--s,7px); height:var(--s,7px); background:var(--c,var(--lavender)); box-shadow:0 0 9px 1px var(--glow, rgba(199,190,255,.6)); }
  .hv-node.ghost .hv-node-dot{ opacity:var(--go,.2); box-shadow:none; }
  @keyframes hv-spin{ from{ transform:rotate(0deg) translateX(var(--r)); } to{ transform:rotate(360deg) translateX(var(--r)); } }

  .hv-starfield{ position:absolute; inset:0; z-index:0; opacity:.6;
    background-image:
      radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.5), transparent),
      radial-gradient(1px 1px at 24% 62%, rgba(255,255,255,.35), transparent),
      radial-gradient(1.6px 1.6px at 34% 12%, rgba(199,190,255,.55), transparent),
      radial-gradient(1px 1px at 47% 78%, rgba(255,255,255,.3), transparent),
      radial-gradient(1.2px 1.2px at 62% 22%, rgba(255,255,255,.4), transparent),
      radial-gradient(1px 1px at 71% 58%, rgba(199,190,255,.4), transparent),
      radial-gradient(1.5px 1.5px at 83% 16%, rgba(255,255,255,.45), transparent),
      radial-gradient(1px 1px at 89% 66%, rgba(255,255,255,.3), transparent),
      radial-gradient(1.2px 1.2px at 17% 84%, rgba(255,255,255,.35), transparent),
      radial-gradient(1px 1px at 57% 90%, rgba(255,255,255,.25), transparent);
  }
  .hv-horizon{ position:absolute; left:0; right:0; bottom:6%; height:46%; z-index:0;
    background: radial-gradient(62% 100% at 50% 100%, rgba(139,92,246,.22), transparent 72%); filter: blur(3px); }

  .hv-orrery{ position:absolute; left:50%; top:var(--cy,42%); width:0; height:0; transform:translate(-50%,-50%) scaleY(.5); z-index:2; }
  .hv-orrery .hv-ring, .hv-orrery .hv-node{ top:0; left:0; --cy:0; }

  .hv-star-deco{ position:absolute; top:0; left:0; width:0; height:0; }
  .hv-star-deco span{ position:absolute; border-radius:50%; background:#fff;
    width:var(--s,2px); height:var(--s,2px); margin:calc(var(--s,2px) / -2) 0 0 calc(var(--s,2px) / -2);
    opacity:var(--o,.6); box-shadow:0 0 4px rgba(255,255,255,.55);
    animation: hv-twinkle var(--tdur,3s) ease-in-out infinite; animation-delay:var(--tdelay,0s); }
  @keyframes hv-twinkle{ 0%,100%{ opacity:var(--o,.6); } 50%{ opacity:calc(var(--o,.6) * .25); } }

  .hv-meteor{ position:absolute; width:64px; height:2px; z-index:0; pointer-events:none; border-radius:2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75) 65%, #fff 100%);
    opacity:0; animation: hv-shoot linear infinite; }
  @keyframes hv-shoot{
    0%{ opacity:0; transform: translate(0,0) rotate(var(--mrot,-22deg)); }
    3%{ opacity:1; }
    20%{ opacity:0; transform: translate(var(--mx,-190px),var(--my,88px)) rotate(var(--mrot,-22deg)); }
    100%{ opacity:0; transform: translate(var(--mx,-190px),var(--my,88px)) rotate(var(--mrot,-22deg)); }
  }

  .hv-ring-front{ position:absolute; left:50%; top:calc(var(--cy,42%) - 6px); width:150px; height:75px;
    transform:translate(-50%,-50%); border:1px solid var(--hairline); border-radius:50%;
    clip-path: inset(50% 0 0 0); z-index:6; pointer-events:none; }

  @keyframes hv-floatY{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-4px); } }

  .hv-core-shadow{ position:absolute; left:50%; width:56px; height:12px; margin-left:-28px; z-index:2;
    background: radial-gradient(circle, rgba(0,0,0,.45), transparent 72%); filter: blur(3px); }

  .hv-halo{
    position:absolute; left:50%; top:var(--cy,42%);
    width:var(--hsize,118px); height:var(--hsize,118px);
    margin:calc(var(--hsize,118px) * -.5) 0 0 calc(var(--hsize,118px) * -.5);
    border-radius:50%; z-index:3; opacity:var(--hop,.6);
    background: conic-gradient(from 0deg, transparent 0deg, var(--hc1,var(--violet)) 30deg, transparent 100deg, transparent 240deg, var(--hc2,var(--blue)) 290deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent var(--hm1,60%), #000 var(--hm2,62%), #000 var(--hm3,76%), transparent var(--hm4,78%));
            mask: radial-gradient(circle, transparent var(--hm1,60%), #000 var(--hm2,62%), #000 var(--hm3,76%), transparent var(--hm4,78%));
    animation: hv-halospin var(--hspeed,16s) linear infinite;
    animation-direction: var(--hdir,normal);
  }
  @keyframes hv-halospin{ to{ transform:rotate(360deg); } }

  /* Glass bubble centrepiece, replacing the old flat-shaded core: layered
     SVG (colour wash, swept rim crescent, radial vignette, grain) with the
     MEV-X mark etched into the surface rather than sitting on top of it. */
  .hv-bubble{
    position:absolute; left:50%; top:var(--cy,44%); width:104px; height:104px; z-index:5;
    transform:translate(-50%,-50%);
    animation: hv-bubble-float 6.4s ease-in-out infinite;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 34px rgba(139,92,246,.4));
  }
  .hv-bubble svg{ display:block; width:100%; height:100%; overflow:visible; }
  @keyframes hv-bubble-float{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-5px); } }
  .hv-bubble-wash{ transform-origin:200px 200px; animation: hv-bubble-spin-cw 24s linear infinite; }
  .hv-bubble-wash-2{ transform-origin:200px 200px; animation: hv-bubble-spin-ccw 32s linear infinite; }
  @keyframes hv-bubble-spin-cw{ to{ transform:rotate(360deg); } }
  @keyframes hv-bubble-spin-ccw{ to{ transform:rotate(-360deg); } }
  .hv-bubble-crescent{ transform-origin:200px 200px; animation: hv-bubble-drift 40s ease-in-out infinite; }
  @keyframes hv-bubble-drift{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(6deg); } }

  @media (prefers-reduced-motion: reduce){
    .hv-halo, .hv-node, .hv-star-deco span, .hv-meteor,
    .hv-bubble, .hv-bubble-wash, .hv-bubble-wash-2, .hv-bubble-crescent{ animation:none !important; }
    .hv-pop-chip, .hv-meteor{ display:none !important; }
  }
  /* The hero kicker has to stay on one line at every width -- broken across
     two lines it reads as a stray fragment above the headline. 0.72rem is the
     design size; below ~500px the line no longer fits the 1.5rem-padded hero,
     so the size tracks the viewport instead (letter-spacing is in em, so it
     shrinks with it). 2.3vw leaves ~9% slack at 320px. */
  .eyebrow{ font-family:var(--font-body); font-weight:600; font-size:min(0.72rem, 2.3vw); letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-muted); display:flex; align-items:center; gap:0.6em; margin-bottom:1.4rem; white-space:nowrap; }
  .hero h1{ font-size:clamp(2.9rem, 6vw, 4.6rem); line-height:0.98; max-width:24ch; }
  .hero h1 em{ font-style:normal; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:0.1em; text-decoration-thickness:2px; }
  .hero .sub{ font-family:var(--font-body); font-weight:400; font-size:1.1rem; line-height:1.6; color:var(--ink-muted); max-width:52ch; margin-top:1.4rem; }
  .hero-ctas{ display:flex; gap:0.9rem; margin-top:2.2rem; flex-wrap:wrap; }
  .btn{ font-family:var(--font-body); font-weight:600; font-size:0.88rem; padding:0.9rem 1.5rem; border-radius:999px; display:inline-flex; align-items:center; gap:0.5em; border:none; background:none; cursor:pointer; }
  .btn.primary{ background:#fff; color:#0b0a0e; }
  .btn.primary:hover{ background: rgba(255,255,255,.88); }
  .btn.ghost{ background:var(--chip-bg); border:1.5px solid var(--chip-border); color:var(--ink); }
  .btn.ghost:hover{ border-color: rgba(255,255,255,.35); }

  /* PROOF -- one composed row: the two headline stats, a compact MEV-extracted
     sparkline styled after the reference, and the Dune CTA as a glass tile --
     all living together instead of the chart/CTA breaking out as separate blocks. */
  /* Row of equal glass tiles (stats + Dune), then the chart as its own
     full-width tile below -- the sparkline never sat well squeezed next to
     plain numbers, so it gets a row of its own. */
  .proof{ border-bottom:1px solid var(--hairline); padding:3rem 0; }
  .proof-in{ max-width:1120px; margin:0 auto; padding:0 1.5rem; display:flex; flex-direction:column; gap:1rem; }
  .proof-top{ display:grid; grid-template-columns: 1fr 1.32fr; gap:1rem; align-items:stretch; }
  .proof-grid{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:1rem; }
  .proof-item{
    border:1.5px solid var(--chip-border); background:var(--chip-bg); border-radius:16px;
    padding:1.5rem 1.4rem; min-height:132px;
    display:flex; flex-direction:column; justify-content:flex-start;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .proof-item:hover{ border-color: rgba(255,255,255,.24); box-shadow: 0 0 26px -4px rgba(139,92,246,.28), 0 0 0 1px rgba(255,255,255,.03) inset; }
  .proof-item .n{ font-family:var(--font-display); font-weight:400; font-size:2.4rem; letter-spacing:0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
  .proof-item .l{ font-family:var(--font-body); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-muted); margin-top:0.4em; }
  @media (max-width:900px){ .proof-top{ grid-template-columns:1fr; } }
  @media (max-width:560px){ .proof-grid{grid-template-columns:1fr;} .proof-item{height:auto; min-height:130px;} }

  .proof-head{ max-width:680px; margin:0 0 2rem; }
  .proof-head h2{ font-size:2.4rem; margin:0 0 .7rem; }
  .proof-head p{ font-family:var(--font-body); font-size:.92rem; line-height:1.6; color:var(--ink-muted); margin:0; max-width:64ch; }

  /* Growth card -- "capture rate" S-curve. Line is a 3-layer glow stack
     (soft halo + mid glow + gradient-along-path core), the fill is a radial
     glow sized to stay lit all the way to "Now" rather than fading out
     mid-curve, and a five-point comet loops the finished path with a real
     trailing tail once it draws in. */
  .growth-card{
    border:1.5px solid var(--chip-border); background:var(--chip-bg); border-radius:16px;
    padding:1.5rem 1.4rem; display:flex; flex-direction:column; min-height:284px;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .growth-card:hover{ border-color: rgba(255,255,255,.24); box-shadow: 0 0 26px -4px rgba(139,92,246,.28), 0 0 0 1px rgba(255,255,255,.03) inset; }
  .growth-head{ margin-bottom:0.5rem; position:relative; z-index:4; }
  .growth-head .n{ font-family:var(--font-display); font-weight:400; font-size:2.4rem; letter-spacing:0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
  .growth-head .l{ font-family:var(--font-body); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-muted); margin-top:0.4em; }
  .growth-chart{ position:relative; flex:1; min-height:140px; }
  .growth-chart svg{ display:block; position:relative; z-index:1; width:100%; height:100%; overflow:visible; }
  .growth-chart .grid-line{ stroke:rgba(255,255,255,.055); stroke-width:1; stroke-dasharray:2 4; }
  .growth-area{ opacity:0; transition: opacity .9s ease 1.2s; }
  .reveal.in .growth-area{ opacity:1; }
  .growth-stroke-back{ fill:none; stroke:var(--lavender); stroke-width:9; stroke-linecap:round; opacity:0; filter:url(#growth-blur6);
    transition: opacity .8s ease .6s; }
  .growth-stroke-mid{ fill:none; stroke:var(--lavender); stroke-width:4; stroke-linecap:round; opacity:0; filter:url(#growth-blur2);
    transition: opacity .8s ease .8s; }
  .reveal.in .growth-stroke-back{ opacity:.18; }
  .reveal.in .growth-stroke-mid{ opacity:.4; }
  .growth-stroke{ fill:none; stroke:url(#growth-stroke-grad); stroke-linecap:round; stroke-linejoin:round; filter:url(#growth-bloom);
    stroke-dasharray:400; stroke-dashoffset:400; transition: stroke-dashoffset 1.5s cubic-bezier(.16,.84,.44,1); }
  .reveal.in .growth-stroke{ stroke-dashoffset:0; }
  .growth-dot{ fill:#fff; opacity:0; transition: opacity .4s ease; }
  .growth-dot.end{ transition-delay:1.5s; }
  .reveal.in .growth-dot{ opacity:1; }
  .growth-pulse{ fill:none; stroke:var(--lavender); stroke-width:1.4; opacity:0; }
  .reveal.in .growth-pulse{ animation: growth-pulse-ring 2.1s ease-out infinite 2.3s; }
  @keyframes growth-pulse-ring{ 0%{ r:5; opacity:.7; } 100%{ r:13; opacity:0; } }
  .growth-comet{ filter: drop-shadow(0 0 2px rgba(199,190,255,.9)); }
  .growth-endpoint{ position:absolute; text-align:left; z-index:4; }
  .growth-endpoint .v{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; letter-spacing:0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
  .growth-endpoint .l{ font-family:var(--font-body); font-weight:600; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-muted); margin-top:0.4em; }
  .growth-endpoint.start{ left:1%; top:78%; }
  .growth-endpoint.end{ right:2%; bottom:82.5%; text-align:right; }
  .growth-endpoint.end .l{ margin-top:0; }
  .growth-endpoint.end .v{ margin-top:0.4em; }
  @media (max-width:560px){ .growth-card{ min-height:260px; padding:1.3rem 1.2rem; } }

  /* Dune CTA -- same tile treatment as the stats, just with a button instead
     of a plain number. Button sits margin-top:1.5rem below the label, matching
     the box's own 1.5rem vertical padding, so the gap above and below it match. */
  .dune-row .n{ font-family:var(--font-display); font-weight:400; font-size:2.2rem; letter-spacing:0.02em; color:var(--ink); }
  .dune-row .l{ font-family:var(--font-body); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-muted); margin-top:0.4em; }
  .dune-row .go{
    font-family:var(--font-body); font-weight:600; font-size:0.8rem; color:var(--ink); align-self:flex-start;
    border:1.5px solid var(--chip-border); border-radius:999px; padding:0.5em 1.1em; margin-top:1.5rem;
    transition: border-color .25s ease, background-color .25s ease;
  }
  .dune-row:hover{ border-color: rgba(255,255,255,.35); }
  .dune-row:hover .go{ border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }

  /* "MEV extracted" tile -- a tall, full-width cumulative bar chart. Label
     and value sit over the bars' own headroom in the top-left corner instead
     of taking a separate row, since the ascending bars leave that corner
     empty on their own. */
  .chart-row{
    height:auto; min-height:300px; padding:1.8rem 1.8rem 0; position:relative; overflow:hidden;
    display:block;
  }
  .chart-row-head{ position:relative; z-index:2; text-align:left; }
  .mini-chart-val{ font-family:var(--font-display); font-weight:400; font-size:2.2rem; letter-spacing:0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
  .mini-chart-label{ font-family:var(--font-body); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-muted); margin-top:0.4em; }
  .mini-chart-visual{ position:absolute; left:1.8rem; right:1.8rem; bottom:0; height:210px; }
  #mini-growth-chart{ display:block; width:100%; height:100%; overflow:visible; }
  .mini-bar{ fill:url(#mini-bar-fill); }
  @media (max-width:560px){ .chart-row{ min-height:260px; } .mini-chart-visual{ height:170px; left:1.2rem; right:1.2rem; } }

  /* "Built on top of the MEV-X engine" -- the legacy traction strip from the
     Homelander mockup, ported verbatim as its own section. Deliberately its
     own grid class (not .proof-in) so it can't collide with the real
     traction band up top; .proof-item/.dune-row/.chart-row etc. are reused
     as-is since nothing else on the page still uses them. */
  /* 1.5rem sides to match every other section. This one is not .band, and
     .band-in carries no padding of its own -- so with 0 here its cards sat
     flush against both screen edges on a phone. On desktop the 1120px
     max-width hid it, because that constraint is what created the margin. */
  .engine-band{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:3rem 1.5rem 3.5rem; }
  .engine-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:stretch; margin-top:1.4rem; }
  .proof-left{ display:flex; flex-direction:column; gap:1rem; }
  .proof-top-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  @media (max-width:760px){ .engine-grid{ grid-template-columns:1fr; } }
  @media (max-width:560px){ .proof-top-row{ grid-template-columns:1fr; } }

  /* PRODUCTS */
  .products{ border-bottom:1px solid var(--hairline); }
  .section-head{ max-width:1120px; margin:0 auto 2.6rem; }
  .section-head h2{ font-size:2.4rem; }
  .section-head p{ font-family:var(--font-body); font-weight:400; color:var(--ink-muted); font-size:1.05rem; margin-top:0.6em; max-width:56ch; }
  .partners .section-head p{ max-width:none; }
  /* Single line only where there is room for one -- nowrap at every width
     pushed this paragraph past the right edge on every phone. */
  @media (min-width:761px){ .partners .section-head p{ white-space:nowrap; } }
  /* Homelander feature -- flagship product showcase (replaces the old
     equal-weight four-product grid; Starlight/Butcher/RPC now live in the
     "Also from MEV-X" strip below it). The kicker (product name) leads,
     the subhead is the secondary line underneath it. */
  .live-cap{ font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:var(--ink-dim); margin-bottom:0.9rem; }
  .live-row{ display:flex; align-items:center; flex-wrap:nowrap; gap:1.1rem; }
  @media (max-width:520px){ .live-row{ flex-wrap:wrap; row-gap:0.7rem; } }
  .live-logo{ height:17px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.62; transition:opacity .25s ease; display:block; flex-shrink:0; }
  .live-logo-link{ display:block; flex-shrink:0; cursor:pointer; }
  .live-logo-link:hover .live-logo, .live-logo:hover{ opacity:1; }

  .v1-feature{ display:grid; grid-template-columns:1fr 1.32fr; gap:3rem; align-items:center; padding-bottom:3rem; margin-bottom:3rem; border-bottom:1px solid var(--hairline); }
  .v1-copy{ text-align:right; }
  .v1-kicker{ font-family:var(--font-display); font-weight:400; font-size:2.6rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin:0 0 .3rem; }
  .v1-feature .v1-subhead{ font-size:1.3rem; font-weight:400; color:var(--ink-muted); margin-bottom:1rem; }
  .v1-feature .mech{ font-family:var(--font-body); font-weight:400; color:var(--ink-muted); font-size:1.02rem; line-height:1.65; max-width:52ch; margin:0 0 1.8rem auto; }
  .v1-feature .ctas{ display:flex; gap:0.9rem; flex-wrap:wrap; justify-content:flex-end; }
  @media (max-width:820px){
    .v1-feature{ grid-template-columns:1fr; }
    .v1-copy{ text-align:left; }
    .v1-feature .mech{ margin:0 0 1.8rem 0; }
    .v1-feature .ctas{ justify-content:flex-start; }
  }

  .diagram{ border:1px solid var(--chip-border); border-radius:16px; background:var(--chip-bg); padding:1.6rem;
    transition: border-color .3s ease, box-shadow .3s ease; }
  .diagram:hover{ border-color: rgba(255,255,255,.24); box-shadow: 0 0 26px -4px rgba(139,92,246,.28), 0 0 0 1px rgba(255,255,255,.03) inset; }
  .diagram .live-block{ padding-bottom:1.3rem; margin-bottom:1.3rem; border-bottom:1px solid var(--hairline); }
  .diagram svg{ width:100%; height:auto; display:block; }

  .diagram-node{ fill:rgba(255,255,255,.04); stroke:var(--chip-border); stroke-width:1; }
  .diagram-node.hook{ fill:rgba(139,92,246,.14); stroke:var(--violet); }
  .diagram-text{ font-family:var(--font-body); font-weight:600; font-size:12px; fill:var(--ink); }
  .diagram-text.muted{ fill:var(--ink-muted); font-weight:500; font-size:10.5px; }
  .diagram-line{ stroke:var(--chip-border); stroke-width:1.4; fill:none; }
  .diagram-frame{ fill:none; stroke:var(--chip-border); stroke-width:1.2; stroke-dasharray:4 4; }
  .diagram-frame-label{ font-family:var(--font-body); font-weight:700; font-size:9.5px; text-transform:uppercase; letter-spacing:0.14em; fill:var(--ink-dim); }
  .diagram-line.diagram-flow{ stroke:var(--violet); stroke-width:1.8; }
  @media (prefers-reduced-motion: no-preference){
    .diagram-flow{ stroke-dasharray:6 4; animation:diagram-flow-move 0.9s linear infinite; }
  }
  @keyframes diagram-flow-move{ to{ stroke-dashoffset:-20; } }

  .also-cap{ font-family:var(--font-body); font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-dim); margin:0 0 1.1rem; }
  .also-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:1.1rem; }
  .also-card{
    display:flex; flex-direction:column; height:100%; box-sizing:border-box;
    border:1px solid var(--chip-border); background:var(--chip-bg); border-radius:14px; padding:1.4rem;
    transition:border-color .25s ease, box-shadow .3s ease;
  }
  .also-card:hover{ border-color:rgba(255,255,255,.32); box-shadow:0 0 10px rgba(139,92,246,.4); }
  .also-card h4{ font-family:var(--font-display); font-weight:400; font-size:1.3rem; margin:0 0 0.3rem; }
  .also-card .also-tag{ font-size:0.72rem; font-weight:600; color:var(--lavender); margin:0 0 0.8rem; }
  .also-card p{ font-size:0.84rem; line-height:1.5; color:var(--ink-muted); margin:0 0 0.9rem; }
  .also-pill{
    display:block; width:100%; box-sizing:border-box; text-align:center; text-decoration:none;
    font-size:0.72rem; font-weight:600; color:var(--ink-dim); border:1px solid var(--hairline); border-radius:999px;
    padding:0.6em 0.8em; margin-top:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:border-color .25s ease, box-shadow .3s ease, transform .25s cubic-bezier(.16,.84,.44,1);
  }
  a.also-pill{ color:var(--ink); border-color:var(--chip-border); }
  a.also-pill:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
  @media (max-width:900px){ .also-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; } }
  @media (max-width:560px){ .also-grid{ grid-template-columns:1fr; } }

  /* PARTNERS */
  .partners{ border-bottom:1px solid var(--hairline); }
  .partner-cats{ max-width:1120px; margin:0 auto; display:flex; flex-direction:column; }
  .partner-cat{ display:grid; grid-template-columns: 200px 1fr; gap:2rem; padding:1.8rem 0; border-top:1px solid var(--hairline); align-items:center; }
  .partner-cat:first-child{ border-top:1px solid var(--hairline); }
  .partner-cat .cat-name{ font-family:var(--font-body); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-muted); }
  @media (max-width:760px){ .partner-cat{ grid-template-columns:1fr; gap:0.6rem; } }

  /* Partner logo grid -- dark glass tiles, all the same fixed size (sized off
     the widest wordmark, Balancer) with room to spare so a logo is never
     cropped. One row, native horizontal scroll (wheel, trackpad, or
     click-drag); an edge mask fades the tiles out on whichever side still
     has more to scroll to (main.js keeps --fade-l/--fade-r in sync with
     scroll position), so it reads as pannable without an arrow that only
     implies one direction -- and never fades/shadows a side that's already
     scrolled all the way to. */
  .partner-grid{
    display:flex; flex-wrap:nowrap; gap:0.7rem; min-width:0;
    overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;
    cursor:grab;
    /* overflow-x:auto forces overflow-y to compute as auto too, which was
       clipping the hover glow/lift on the first and last row of tiles.
       Padding gives that glow room inside the scroll box; the matching
       negative margin cancels it back out so surrounding layout is unchanged. */
    padding:0.75rem 0; margin:-0.75rem 0;
    --fade-l:0px; --fade-r:0px;
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  }
  .partner-grid::-webkit-scrollbar{ display:none; }
  .partner-grid.dragging{ cursor:grabbing; scroll-behavior:auto; }
  .partner-tile{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:158px; height:76px; padding:1rem 1.1rem;
    background:var(--chip-bg); border:1px solid var(--chip-border);
    border-radius:12px; cursor:pointer;
  }
  .partner-logo{
    max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
    filter:brightness(0) invert(1);
    opacity:.55;
  }
  .partner-tile.placeholder{
    font-family:var(--font-body); font-weight:600; font-size:0.78rem; letter-spacing:0.02em;
    color:var(--ink-dim);
    background:transparent; border-style:dashed;
  }
  /* One-off: the Uniswap Security Fund tile shares the Uniswap protocol's
     unicorn mark, so it gets a small caption underneath to disambiguate. */
  .partner-tile--wordmark{ justify-content:flex-start; gap:0.65rem; }
  .partner-tile--wordmark .partner-logo{ max-width:30px; max-height:60%; flex-shrink:0; }
  .partner-tile-wordmark{
    font-family:var(--font-body); font-weight:700; font-size:0.72rem; line-height:1.3;
    letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-muted); text-align:left;
  }

  /* RESEARCH */
  .research{ border-bottom:1px solid var(--hairline); }
  .paper-list{ max-width:1120px; margin:0 auto; display:flex; flex-direction:column; }
  .paper{ display:flex; gap:2rem; padding:1.5rem 0; border-top:1px solid var(--hairline); align-items:baseline; }
  .paper:first-child{ border-top:1px solid var(--hairline); }
  .paper .date{ font-family:var(--font-body); font-weight:600; font-size:0.7rem; letter-spacing:0.04em; color:var(--ink-dim); flex-shrink:0; width:9.5rem; }
  .paper .body{ flex:1; min-width:0; }
  .paper .t{ font-family:var(--font-body); font-weight:600; font-size:1.02rem; color:var(--ink); }
  .paper .desc{ font-family:var(--font-body); font-weight:400; color:var(--ink-muted); font-size:0.9rem; line-height:1.5; margin-top:0.4em; max-width:62ch; }
  .paper .go{ font-family:var(--font-body); font-weight:600; font-size:0.75rem; color:var(--ink-url); flex-shrink:0; transition:color .25s ease; }
  .paper:hover .go{ color:var(--ink); }
  @media (max-width:640px){ .paper{ flex-direction:column; gap:0.4rem; } .paper .date{ width:auto; } }
  .paper-more{
    display:table; margin:1.8rem auto 0;
    font-family:var(--font-body); font-weight:600; font-size:0.85rem; color:var(--ink);
    border:1.5px solid var(--chip-border); background:var(--chip-bg); border-radius:999px;
    padding:0.7rem 1.4rem;
  }
  .paper-more:hover{ border-color: rgba(255,255,255,.35); }

  /* CLOSE */
  .close{ padding: 5.5rem 1.5rem; }
  .close-in{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
  .close-card{
    background:var(--chip-bg); border:1.5px solid var(--chip-border); border-radius:24px;
    padding:2.2rem; display:flex; flex-direction:column; justify-content:space-between; min-height:190px;
    position:relative;
  }
  .close-card:hover{ border-color: rgba(255,255,255,.24); box-shadow: 0 0 26px -4px rgba(139,92,246,.28), 0 0 0 1px rgba(255,255,255,.03) inset; }
  .close-card .k{ font-family:var(--font-body); font-weight:600; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-muted); }
  .close-card h3{ font-size:1.7rem; margin-top:0.7rem; }
  .close-card .go{ font-family:var(--font-body); font-weight:600; font-size:0.85rem; color:var(--ink-url); margin-top:1.4rem; position:relative; z-index:2; }
  /* "Talk to the Team" needs two click targets in one card -- the whole
     card goes to Telegram, but the email is its own mailto link. A plain
     nested <a> isn't valid HTML, so the card is a div with a full-cover
     link behind the content, and the email link sits above it (z-index)
     so a click there hits the mailto instead of the overlay. */
  .close-card-hit{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
  .close-card-email{ position:relative; z-index:2; color:inherit; }
  .close-card-email:hover{ text-decoration:underline; }
  @media (max-width:760px){ .close-in{ grid-template-columns:1fr; } }

  footer{ border-top:1px solid var(--hairline); padding:2.2rem 1.5rem; }
  .foot-in{ max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
  .foot-in .mono{ font-weight:500; font-size:0.75rem; color:var(--ink-dim); letter-spacing:0.04em; }
  /* wrap: seven links in a row that never wrapped ran past the right edge
     on phones -- "Dune", the last one, was the part sticking out. */
  .foot-links{ display:flex; flex-wrap:wrap; gap:0.9rem 1.4rem; font-family:var(--font-body); font-size:0.78rem; color:var(--ink-muted); }
  .foot-links a:hover{ color:var(--ink); }

  @media (max-width:900px){ .hero-in{ grid-template-columns:1fr; } .proof-grid{grid-template-columns:1fr 1fr;} }

  /* BLOG -- shared across blog/index.html (hub) and blog/<slug>/index.html
     (article pages). Reuses every token/pattern above (chip-bg, hairline
     rows, .band, .btn, .reveal) so the section reads as part of the same
     system rather than a bolted-on subsite. */
  .crumbs{
    max-width:1120px; margin:0 auto 1.6rem; padding:0 1.5rem;
    display:flex; align-items:center; gap:0.5em; flex-wrap:wrap;
    font-family:var(--font-body); font-weight:600; font-size:0.75rem; letter-spacing:0.04em; color:var(--ink-dim);
  }
  .crumbs a{ color:var(--ink-muted); }
  .crumbs a:hover{ color:var(--ink); }

  /* Blog hub hero -- shorter than the homepage hero, no two-column split. */
  .blog-hero{ padding:3.5rem 1.5rem 3rem; border-bottom:1px solid var(--hairline); }
  .blog-hero-in{ max-width:1120px; margin:0 auto; }
  .blog-hero h1{ font-size:clamp(2.4rem, 5vw, 3.4rem); max-width:22ch; }
  .blog-hero .sub{ font-family:var(--font-body); font-weight:400; font-size:1.05rem; line-height:1.6; color:var(--ink-muted); max-width:58ch; margin-top:1.1rem; }

  /* Tag filter -- pill row, client-side filtering only (no navigation). */
  .tag-filter{ display:flex; flex-wrap:wrap; gap:0.6rem; max-width:1120px; margin:0 auto; padding:1.8rem 1.5rem 2.6rem; }
  .tag-pill{
    font-family:var(--font-body); font-weight:600; font-size:0.75rem; letter-spacing:0.03em;
    color:var(--ink-muted); background:var(--chip-bg); border:1.5px solid var(--chip-border);
    border-radius:999px; padding:0.5em 1.05em; cursor:pointer;
  }
  .tag-pill:hover{ color:var(--ink); border-color:rgba(255,255,255,.32); }
  .tag-pill.active{ color:#0b0a0e; background:#fff; border-color:#fff; }

  /* Article card grid. Cover is a small abstract swatch in the site's own
     gradient language (same recipe every time, hue-rotated per card so the
     grid reads as one family rather than ten different treatments). */
  .blog-grid{ max-width:1120px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
  .blog-card{
    display:flex; flex-direction:column;
    background:var(--chip-bg); border:1.5px solid var(--chip-border); border-radius:20px;
    padding:0 1.5rem 1.5rem; min-height:230px; overflow:hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .blog-card:hover{ border-color: rgba(255,255,255,.24); box-shadow: 0 0 26px -4px rgba(139,92,246,.28), 0 0 0 1px rgba(255,255,255,.03) inset; }
  .blog-cover{ height:132px; margin:0 -1.5rem 0.9rem; position:relative; overflow:hidden; }
  /* Covers are pre-rendered images now, not live SVG. Ten cards each running
     an feTurbulence grain plus four gaussian blurs made the blog index
     unscrollable on phones. */
  .blog-cover img{ display:block; width:100%; height:100%; object-fit:cover; }
  .blog-card h3{
    font-size:1.5rem; line-height:1.15; margin:0;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    min-height:calc(2 * 1.5rem * 1.15);
  }
  .blog-card .dek{
    font-family:var(--font-body); font-weight:400; font-size:0.86rem; line-height:1.5; color:var(--ink-muted);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
    margin-top:0.125rem; min-height:calc(4 * 0.86rem * 1.5);
  }
  .blog-card .meta{ display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; margin-top:auto; padding-top:0.7rem; gap:0.5rem; min-width:0; }
  .blog-card .meta .meta-date{ font-family:var(--font-body); font-weight:600; font-size:0.72rem; letter-spacing:0.04em; color:var(--ink-dim); white-space:nowrap; flex-shrink:0; }
  .blog-card .meta .meta-tags{ display:flex; flex-wrap:nowrap; gap:0.35em; justify-content:flex-end; min-width:0; overflow:hidden; }
  .blog-card .meta .meta-tags span{
    font-family:var(--font-body); font-weight:600; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--ink-dim); background:rgba(255,255,255,.05); border-radius:999px; padding:0.3em 0.6em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .blog-card[hidden]{ display:none; }
  @media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

  .blog-empty{ max-width:1120px; margin:0 auto; padding:2rem 1.5rem; font-family:var(--font-body); color:var(--ink-muted); display:none; }
  .blog-empty.show{ display:block; }

  /* Article page. */
  .article-head{ max-width:760px; margin:0 auto; padding:3.2rem 1.5rem 2.4rem; }
  .article-head .tags{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1.2rem; }
  .article-head .tags a{
    font-family:var(--font-body); font-weight:600; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em;
    color:var(--ink-muted); background:var(--chip-bg); border:1px solid var(--chip-border); border-radius:999px; padding:0.4em 0.9em;
  }
  .article-head .tags a:hover{ color:var(--ink); }
  .article-head h1{ font-size:clamp(2.1rem, 4.4vw, 3rem); }
  .article-head .dek{ font-family:var(--font-body); font-weight:400; font-size:1.08rem; line-height:1.6; color:var(--ink-muted); margin-top:1rem; max-width:62ch; }
  .article-meta{
    display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.6rem;
    font-family:var(--font-body); font-weight:600; font-size:0.78rem; letter-spacing:0.03em; color:var(--ink-dim);
  }

  .article-body{
    max-width:760px; margin:0 auto; padding:2.6rem 2.4rem; font-family:var(--font-body); color:var(--ink);
    background:var(--chip-bg); border:1.5px solid var(--chip-border); border-radius:24px;
  }
  @media (max-width:640px){ .article-body{ padding:2rem 1.4rem; margin:0 1rem; } }
  .article-body p{ font-size:1.05rem; line-height:1.75; color:var(--ink-muted); margin:0 0 1.4rem; }
  .article-body h2{ font-size:1.55rem; margin:2.6rem 0 1rem; }
  .article-body h3{ font-size:1.2rem; margin:2rem 0 0.8rem; }
  .article-body ul, .article-body ol{ margin:0 0 1.4rem; padding-left:1.3rem; }
  .article-body li{ font-size:1.02rem; line-height:1.7; color:var(--ink-muted); margin-bottom:0.5em; }
  .article-body a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:0.15em; }
  .article-body a:hover{ text-decoration-color:var(--ink); }
  .article-body strong{ color:var(--ink); }
  .article-body em{ font-style:italic; }
  .article-body hr{ border:0; border-top:1px solid var(--chip-border); margin:2.4rem 0; }
  .article-body blockquote{
    margin:0 0 1.4rem; padding:0.2rem 0 0.2rem 1.2rem; border-left:2px solid var(--chip-border);
    font-size:1.05rem; line-height:1.75; color:var(--ink-muted);
  }
  .article-body pre{
    margin:0 0 1.4rem; padding:1rem 1.1rem; overflow-x:auto;
    background:rgba(0,0,0,.28); border:1px solid var(--chip-border); border-radius:12px;
    font-size:0.9rem; line-height:1.6; color:var(--ink-muted);
  }

  /* Article figures: full-bleed to the body's text column, with the caption
     reading as secondary to the paragraph text around it. */
  .article-body figure{ margin:2rem 0; }
  .article-body figure img{
    display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--chip-border);
  }
  .article-body figcaption{
    margin-top:0.7rem; font-size:0.86rem; line-height:1.55; color:var(--ink-dim); text-align:center;
  }

  /* Answer-first summary box -- sits right under the dek so both a skimming
     reader and an AI answer engine get the direct claim before the argument. */
  .tldr{
    background:var(--chip-bg); border:1.5px solid var(--chip-border); border-radius:16px;
    padding:1.4rem 1.5rem; margin-bottom:0.5rem;
  }
  .tldr .k{ font-family:var(--font-body); font-weight:600; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-muted); margin-bottom:0.6em; }
  .tldr p{ font-size:0.98rem; line-height:1.6; color:var(--ink); margin:0; }

  .key-facts{ list-style:none; margin:0 0 1.4rem; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
  .key-facts li{
    font-size:0.98rem; line-height:1.6; color:var(--ink-muted);
    padding-left:1.3rem; position:relative;
  }
  .key-facts li::before{ content:"—"; position:absolute; left:0; color:var(--ink-dim); }

  .pull-quote{
    border-left:3px solid rgba(139,92,246,.65); margin:2rem 0; padding:0.2rem 0 0.2rem 1.4rem;
    font-family:var(--font-display); font-weight:400; font-size:1.5rem; line-height:1.3; color:var(--ink);
  }

  .faq{ margin-top:1rem; }
  .faq-item{ border-top:1px solid var(--hairline); padding:1.4rem 0; }
  .faq-item:last-child{ border-bottom:1px solid var(--hairline); }
  .faq-item h3{ font-size:1.05rem; margin:0 0 0.6em; }
  .faq-item p{ font-size:0.98rem; margin:0; }

  .related{ border-top:1px solid var(--hairline); padding:3.5rem 1.5rem; }
  .related-in{ max-width:1120px; margin:0 auto; }
  .related h2{ font-size:1.5rem; margin-bottom:1.6rem; }
  .related .blog-grid{ padding:0; max-width:none; }

  @media (max-width:760px){ .blog-hero{ padding:2.6rem 1.5rem 2rem; } }

  /* RPC ENDPOINTS MODAL -- opened from the nav "RPC" link and the RPC
     product card's "View endpoints" button. */
  .modal-backdrop{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center; padding:1.5rem;
    background: rgba(6,5,8,.68); backdrop-filter: blur(6px);
    opacity:0; transition: opacity .25s ease;
  }
  .modal-backdrop.in{ opacity:1; }
  .modal-backdrop[hidden]{ display:none; }
  .modal-panel{
    width:100%; max-width:460px; max-height:calc(100vh - 3rem); overflow-y:auto;
    background:var(--chip-bg); border:1.5px solid var(--chip-border); border-radius:24px;
    backdrop-filter: blur(10px); padding:2rem; position:relative;
    transform: translateY(10px) scale(.98); transition: transform .25s cubic-bezier(.16,.84,.44,1);
  }
  .modal-backdrop.in .modal-panel{ transform:none; }
  .modal-close{
    position:absolute; top:1.1rem; right:1.1rem; width:2rem; height:2rem; border-radius:50%;
    border:1.5px solid var(--chip-border); background:var(--chip-bg); color:var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:0.8rem; cursor:pointer;
    transition: border-color .25s ease, background-color .25s ease;
  }
  .modal-close:hover{ border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
  .modal-panel h3{ font-size:1.7rem; padding-right:1.8rem; }
  .modal-panel > p{ font-family:var(--font-body); font-weight:400; color:var(--ink-muted); font-size:0.92rem; line-height:1.55; margin-top:0.8rem; }
  .rpc-row{ margin-top:1.4rem; }
  .rpc-region{ font-family:var(--font-body); font-weight:600; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-dim); margin-bottom:0.5rem; }
  .rpc-url-box{
    display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
    border:1.5px solid var(--chip-border); background:var(--chip-bg); border-radius:12px;
    padding:0.85rem 1rem; overflow:hidden;
  }
  .rpc-url-box code{
    font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace; font-size:0.85rem;
    color:var(--ink); font-weight:600; overflow-x:auto; white-space:nowrap;
  }
  .rpc-copy{
    flex-shrink:0; font-family:var(--font-body); font-weight:600; font-size:0.75rem; color:var(--ink-muted);
    background:transparent; border:none; cursor:pointer; padding:0.2rem 0.3rem;
    transition: color .2s ease;
  }
  .rpc-copy:hover{ color:var(--ink); }
  .rpc-portal-link{
    display:block; margin-top:1.6rem; font-family:var(--font-body); font-weight:600; font-size:0.85rem; color:var(--ink);
    border:1.5px solid var(--chip-border); border-radius:999px; padding:0.75rem 1.2rem; text-align:center;
    transition: border-color .25s ease, transform .25s cubic-bezier(.16,.84,.44,1);
  }
  .rpc-portal-link:hover{ border-color: rgba(255,255,255,.35); transform: translateY(-2px); }

  /* Hero headline glow -- centered on the h1's own (fit-content) box so it lines up with
     the real glyphs rather than the wider grid-column box; horizontal-oval shape, soft
     blurred edges, slow breathing pulse. Approved direction, iterated live with the team. */
  .hero h1{ position:relative; isolation:isolate; width:fit-content; }
  .hero h1::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    left:50%; top:50%; transform:translate(-50%,-50%);
  }
  .glow-c h1::before{
    width:175%; height:145%;
    background: radial-gradient(closest-side, rgba(214,206,255,.34) 0%, rgba(139,92,246,.25) 40%, transparent 85%);
    filter: blur(58px);
    animation: glow-c-breathe 6s ease-in-out infinite;
  }
  @keyframes glow-c-breathe{
    0%, 100% { opacity:.72; }
    50%      { opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){ .glow-c h1::before{ animation:none; } }