:root {
    --bg: #0b0d13;
    --bg-2: #0f1117;
    --panel: #141824;
    --panel-2: #1a1f2e;
    --border: #262b3b;
    --border-soft: rgba(255,255,255,0.06);
    --text: #e9ebf3;
    --text-dim: #9297ad;
    --text-faint: #656a80;
    --accent: #5b8cff;
    --accent-2: #7aa2ff;
    --accent-deep: #2f57d6;
    --green: #2fbf71;
    --red: #e5484d;
    --yellow: #e0a640;
    --glow: rgba(91,140,255,0.5);
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  /* Base colour matches the metal backdrop's darkest tone, so any hairline the fixed layer might ever
     leave at a viewport edge reads as the backdrop, not a lighter seam. It stays on BODY only: giving
     html its own background stops body's background from propagating to the canvas, which then paints
     over the z-index:-1 metal layer and hides it entirely. */
  body {
    background: #05080f;
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; overflow-x: clip;
  }

/* == METAL BACKDROP (generated by scripts/build-metal-bg.mjs — do not edit by hand) == */
/* The layer hangs off the ROOT element, not body, and this is load-bearing. body carries
   overflow-x:hidden, and a fixed pseudo-element of an element with a non-visible overflow is
   constrained by it in mobile browsers — which is why the backdrop kept stopping short of the
   bottom of a phone screen while page content happily reached it. html has no overflow, no
   transform and no filter, so nothing can constrain the layer.

   html therefore holds the base colour (the root's background propagates to the canvas, which
   always covers the whole screen including under toolbars and safe areas), and body must be
   transparent — a background on body paints in body's box, which sits ABOVE a z-index:-1 layer
   and would hide it completely. */
html { background: #05080f; }
body { background: transparent; }
html::before {
  content: "";
  position: fixed;
  /* OVERHANG THE VIEWPORT ON PURPOSE — 140px past the top and bottom.

     On iOS Safari the collapsing toolbar and the home-indicator band live OUTSIDE the layout viewport
     that a fixed element is sized against, so a layer sized exactly to the viewport (inset:0, 100vh,
     100dvh, 100lvh — all of them) can never cover those bands. That is the dark strip at the bottom of
     an iPhone, and why it changed size as the toolbar collapsed on scroll. Sizing it exactly is the bug;
     the only reliable fix is to be bigger than the box.

     Top and bottom are extended equally so the artwork stays centred and the framing is unchanged.
     Overhang is free here: the element is fixed and pointer-events:none, so it adds no scrolling. */
  top: -140px;
  bottom: -140px;
  left: 0;
  right: 0;
  min-height: calc(100vh + 280px);
  min-height: calc(100lvh + 280px);
  /* Forces its own compositing layer. iOS Safari otherwise repaints fixed layers lazily during a
     momentum scroll, which shows as the backdrop lagging or banding at the edges mid-flick. */
  transform: translateZ(0);
  z-index: -1;
  pointer-events: none;
  background-color: #05080f;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'1000'%20viewBox%3D'0%200%201600%201000'%20preserveAspectRatio%3D'xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'pleat'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20y1%3D'0'%20x2%3D'300'%20y2%3D'430'%20spreadMethod%3D'repeat'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%232c4672'%2F%3E%3Cstop%20offset%3D'0.29'%20stop-color%3D'%232c4672'%2F%3E%3Cstop%20offset%3D'0.29'%20stop-color%3D'%23c2d6f8'%2F%3E%3Cstop%20offset%3D'0.315'%20stop-color%3D'%23c2d6f8'%2F%3E%3Cstop%20offset%3D'0.315'%20stop-color%3D'%23132340'%2F%3E%3Cstop%20offset%3D'0.60'%20stop-color%3D'%23132340'%2F%3E%3Cstop%20offset%3D'0.60'%20stop-color%3D'%230a1631'%2F%3E%3Cstop%20offset%3D'0.85'%20stop-color%3D'%230a1631'%2F%3E%3Cstop%20offset%3D'0.85'%20stop-color%3D'%231e3358'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%232c4672'%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D'maskblur'%20x%3D'-60%25'%20y%3D'-60%25'%20width%3D'220%25'%20height%3D'220%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeGaussianBlur%20stdDeviation%3D'150'%2F%3E%3C%2Ffilter%3E%3Cmask%20id%3D'corners'%3E%3Crect%20width%3D'1600'%20height%3D'1000'%20fill%3D'%23000'%2F%3E%3Cg%20filter%3D'url(%23maskblur)'%3E%3Cellipse%20cx%3D'1600'%20cy%3D'-60'%20rx%3D'560'%20ry%3D'430'%20fill%3D'%23fff'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'1060'%20rx%3D'560'%20ry%3D'430'%20fill%3D'%23fff'%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cfilter%20id%3D'soft'%20x%3D'-5%25'%20y%3D'-5%25'%20width%3D'110%25'%20height%3D'110%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeGaussianBlur%20stdDeviation%3D'1.1'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'1600'%20height%3D'1000'%20fill%3D'%2306090f'%2F%3E%3Cg%20filter%3D'url(%23soft)'%3E%3Crect%20width%3D'1600'%20height%3D'1000'%20fill%3D'url(%23pleat)'%20mask%3D'url(%23corners)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Phones in portrait get the phone canvas. Keyed on aspect ratio, not width: the mismatch that ruins
   the composition is the viewport's SHAPE, and cover crops whichever axis is proportionally larger.
   3/5 sits well below a portrait tablet (0.75) and well above any phone (0.46 and narrower), so only
   genuinely tall screens swap. Desktop never matches this and is untouched. */
@media (max-aspect-ratio: 3/5) {
  html::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'780'%20height%3D'2248'%20viewBox%3D'0%200%20780%202248'%20preserveAspectRatio%3D'xMidYMid%20slice'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'pleat'%20gradientUnits%3D'userSpaceOnUse'%20x1%3D'0'%20y1%3D'0'%20x2%3D'192'%20y2%3D'275'%20spreadMethod%3D'repeat'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%232c4672'%2F%3E%3Cstop%20offset%3D'0.29'%20stop-color%3D'%232c4672'%2F%3E%3Cstop%20offset%3D'0.29'%20stop-color%3D'%23c2d6f8'%2F%3E%3Cstop%20offset%3D'0.315'%20stop-color%3D'%23c2d6f8'%2F%3E%3Cstop%20offset%3D'0.315'%20stop-color%3D'%23132340'%2F%3E%3Cstop%20offset%3D'0.60'%20stop-color%3D'%23132340'%2F%3E%3Cstop%20offset%3D'0.60'%20stop-color%3D'%230a1631'%2F%3E%3Cstop%20offset%3D'0.85'%20stop-color%3D'%230a1631'%2F%3E%3Cstop%20offset%3D'0.85'%20stop-color%3D'%231e3358'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%232c4672'%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D'maskblur'%20x%3D'-60%25'%20y%3D'-60%25'%20width%3D'220%25'%20height%3D'220%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeGaussianBlur%20stdDeviation%3D'94'%2F%3E%3C%2Ffilter%3E%3Cmask%20id%3D'corners'%3E%3Crect%20width%3D'780'%20height%3D'2248'%20fill%3D'%23000'%2F%3E%3Cg%20filter%3D'url(%23maskblur)'%3E%3Cellipse%20cx%3D'780'%20cy%3D'-135'%20rx%3D'358'%20ry%3D'966'%20fill%3D'%23fff'%2F%3E%3Cellipse%20cx%3D'0'%20cy%3D'2383'%20rx%3D'358'%20ry%3D'966'%20fill%3D'%23fff'%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cfilter%20id%3D'soft'%20x%3D'-5%25'%20y%3D'-5%25'%20width%3D'110%25'%20height%3D'110%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeGaussianBlur%20stdDeviation%3D'1.1'%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D'780'%20height%3D'2248'%20fill%3D'%2306090f'%2F%3E%3Cg%20filter%3D'url(%23soft)'%3E%3Crect%20width%3D'780'%20height%3D'2248'%20fill%3D'url(%23pleat)'%20mask%3D'url(%23corners)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
}
/* == END METAL BACKDROP == */

    ::selection { background: rgba(91,140,255,0.35); color: #fff; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

  /* ============ NAV ============ */
  #nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 40px;
    background: rgba(11,13,19,0.55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, background .3s, padding .3s;
  }
  #nav.scrolled { border-bottom: 1px solid var(--border-soft); background: rgba(11,13,19,0.8); padding: 12px 40px; }
  .brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: .2px; }
  .brand img { width: 34px; height: 34px; filter: drop-shadow(0 2px 10px rgba(91,140,255,0.35)); }
  #nav .brand img { width: 68px; height: 68px; }
  .brand span { font-size: 17px; }
  .brand span b { font-weight: 600; }
  .nav-links { display: flex; align-items: center; gap: 34px; }
  /* Eight links plus the CTA measure 833px, and the mobile menu does not take over until 820px — so at
     34px the row overflowed the viewport from 821px to about 970px. Measured, not guessed:
     scratchpad/measure-site-nav.mjs in the app repo renders this page and reports it. Note that the
     homepage carries its own copy of the nav CSS here; assets/pages.css styles only the legal pages. */
  /* Widened to 1340px when Home became the tenth item: at 1280px the full 34px gap left only 11px
     between the brand and the first link — no collision, but visibly squashed. */
  /* Where the row is genuinely comfortable, measured rather than guessed: with License and Privacy back
     in the footer the header carries eight items, which clear the brand by 51px at 1020px and are cramped
     below it. So the mobile menu takes everything under 1020px and 1020-1340px runs the tighter gap.
     scratchpad/measure-site-nav.mjs fails a row with under 40px of daylight, not only a collision. */
  @media (min-width: 1180px) and (max-width: 1440px) { .nav-links { gap: 15px; } }
  .nav-links a { color: var(--text-dim); font-size: 14.5px; font-weight: 500; transition: color .2s; }
  .nav-links a:hover { color: var(--text); }
  /* The page you are on. Added when the site became several pages; the legal pages already had it. */
  .nav-links a.current { color: var(--text); }

  /* Grouped nav items — a top link that reveals related pages on hover/keyboard-focus, so the top row
     stays short (Features+Analytics collapse to one item, Pricing+FAQ to one) without hiding anything.
     CSS-only: no script. On mobile these flatten back into the hamburger column (see the media query). */
  .nav-group { position: relative; display: inline-flex; align-items: center; }
  .nav-group-top { color: var(--text-dim); font-size: 14.5px; font-weight: 500; transition: color .2s; display: inline-flex; align-items: center; }
  .nav-group-top:hover { color: var(--text); }
  .nav-group-top::after { content: ''; width: 5px; height: 5px; margin-left: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-1px) rotate(45deg); transition: transform .2s; }
  .nav-group:hover .nav-group-top::after, .nav-group:focus-within .nav-group-top::after { transform: translateY(1px) rotate(225deg); }
  .nav-group:has(a.current) .nav-group-top { color: var(--text); }
  .nav-group-menu {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
    display: flex; flex-direction: column; gap: 2px; min-width: 168px; padding: 8px;
    background: rgba(15,18,26,0.97); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 130;
  }
  /* A hover bridge so the pointer can travel from label to menu without crossing a dead gap. */
  .nav-group-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
  .nav-group:hover .nav-group-menu, .nav-group:focus-within .nav-group-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
  .nav-group-menu a { color: var(--text-dim); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 8px; white-space: nowrap; transition: color .15s, background .15s; }
  .nav-group-menu a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
  .nav-group-menu a.current { color: var(--text); background: rgba(255,255,255,0.04); }

  /*
   * Clear the fixed header on any page that does not open with the hero.
   *
   * `#nav .brand img` is 68px — double what the markup asks for — which makes the fixed bar 97px tall on
   * a phone and 105px on a desktop. The category pages begin with a section whose own padding was written
   * when the bar was shorter, so their first line, the blue kicker, sat 7 to 21px BEHIND it and simply
   * could not be read. Measured per page and width by scratchpad/measure-header-overlap.mjs in the app
   * repo rather than guessed at.
   *
   * This overrides the first section's own padding-top rather than adding to it, so the gap does not
   * double up, and `first-of-type` is deliberate: screenshots.html has a <style> as its first child.
   */
  main > section:first-of-type { padding-top: clamp(136px, 11vw, 180px); }
  .nav-toggle { display: none; }
  .btn {
    font-family: var(--sans); font-weight: 600; font-size: 14.5px;
    padding: 10px 20px; border-radius: 10px; cursor: pointer; border: none;
    transition: transform .2s, box-shadow .3s, background .3s; display: inline-flex; align-items: center; gap: 8px;
  }
  .btn-primary {
    color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    box-shadow: 0 6px 22px rgba(47,87,214,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(47,87,214,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
  .btn-ghost { color: var(--text); background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
  .btn-ghost:hover { background: rgba(255,255,255,0.09); transform: translateY(-2px); }

  /* hamburger */
  .nav-toggle { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,0.04);
    cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; z-index: 120; }
  .nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s, opacity .2s; }
  body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(4,6,10,0.5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.menu-open .nav-scrim { opacity: 1; pointer-events: auto; }

  @media (max-width: 1179px) {
    #nav { padding: 14px 22px; }
    #nav.scrolled { padding: 12px 22px; }
    .nav-toggle { display: flex; }
    .nav-links {
      position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 320px);
      flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px;
      padding: 92px 26px 26px; background: rgba(9,11,16,0.96);
      backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
      border-left: 1px solid var(--border-soft); box-shadow: -30px 0 80px rgba(0,0,0,0.5);
      transform: translateX(105%); transition: transform .38s cubic-bezier(.4,0,.1,1);
    }
    body.menu-open .nav-links { transform: translateX(0); }
    .nav-links a { font-size: 1.05rem; padding: 12px 6px; border-bottom: 1px solid var(--border-soft); }
    .nav-links a.btn { margin-top: 14px; border-bottom: none; }
    .nav-links .btn { width: 100%; justify-content: center; padding: 14px 20px; }
    /* Grouped items flatten into the column: the top label drops out and the related pages show as
       normal rows — no nested toggle to fuss with on a phone. */
    .nav-group { display: contents; }
    .nav-group-top { display: none; }
    .nav-group-menu {
      position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
      display: contents; background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0;
    }
    .nav-group-menu::before { display: none; }
    .nav-group-menu a { font-size: 1.05rem; padding: 12px 6px; border-radius: 0; border-bottom: 1px solid var(--border-soft); }
  }

  /* ============ HERO ============ */
  .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
  #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
  /* readability scrim: darkens the centre behind the headline, leaves the edges (symbols) bright */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse 60% 56% at 50% 44%, rgba(7,9,14,0.78) 0%, rgba(7,9,14,0.55) 34%, rgba(7,9,14,0.16) 62%, rgba(7,9,14,0) 78%);
  }
  .hero-glow {
    position: absolute; z-index: 0; top: 42%; left: 50%; transform: translate(-50%,-50%);
    width: 900px; height: 900px; border-radius: 50%;
    background: radial-gradient(circle, rgba(47,87,214,0.28) 0%, rgba(47,87,214,0.08) 38%, transparent 66%);
    filter: blur(20px); pointer-events: none;
  }
  .hero-content {
    position: relative; z-index: 3; width: 100%; text-align: center;
    padding-top: 60px; pointer-events: none;
  }
  .hero-content a, .hero-content button { pointer-events: auto; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
    padding: 7px 15px; border-radius: 100px; font-size: 13px; font-weight: 500; letter-spacing: .3px;
    color: var(--accent-2); background: rgba(91,140,255,0.1); border: 1px solid rgba(91,140,255,0.22);
    backdrop-filter: blur(8px);
  }
  .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
  h1.hero-title {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
    font-size: clamp(2.7rem, 6.6vw, 5.4rem); line-height: 1.02; margin-bottom: 26px;
  }
  h1.hero-title em { font-style: italic; color: transparent; background: linear-gradient(120deg, var(--accent-2), #cdd9ff); -webkit-background-clip: text; background-clip: text; }
  .hero-sub {
    font-size: clamp(1rem, 1.5vw, 1.22rem); color: var(--text); max-width: 620px; margin: 0 auto 38px;
    line-height: 1.65; font-weight: 400; text-shadow: 0 1px 14px rgba(3, 5, 10, 0.55);
  }
  .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
  .btn-lg { padding: 15px 30px; font-size: 15.5px; border-radius: 12px; }
  .hero-meta { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--text-faint); }
  .hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
  .hero-meta svg { width: 15px; height: 15px; stroke: var(--accent); opacity: .9; }
  .scroll-hint {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
    color: var(--text-faint); font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 8px; animation: floaty 2.4s ease-in-out infinite;
  }
  .scroll-hint .line { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); }
  @keyframes floaty { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
  .drag-tag {
    position: absolute; z-index: 3; bottom: 30px; right: 40px; font-size: 12px; color: var(--text-faint);
    display: inline-flex; align-items: center; gap: 8px; opacity: .8;
  }
  .drag-tag svg { width: 16px; height: 16px; stroke: var(--text-faint); }
  @media (max-width:820px){ .drag-tag { display:none; } }

  /* ============ SECTIONS ============ */
  section { position: relative; }
  /* Vertical rhythm is deliberately tighter than a typical long-form landing page: this site has a
     lot of genuine sections, so oversized padding turned it into an endless scroll. clamp() keeps it
     breathable on wide screens without the dead space. */
  /* Vertical only, never the `padding` shorthand: an element is routinely `class="wrap section-pad"`,
     and a shorthand's implicit `0` for left/right silently wiped .wrap's 32px gutter — which put body
     text hard against the screen edge on mobile. Setting the two sides explicitly leaves .wrap alone. */
  .section-pad { padding-top: clamp(56px, 7vw, 84px); padding-bottom: clamp(56px, 7vw, 84px); }
  /* A hairline between stacked sections so each reads as its own band as the padding tightened. */
  .section-pad + .section-pad,
  .section-divide { border-top: 1px solid var(--border-soft); }
  .kicker {
    font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 18px;
  }
  h2.section-title {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
    font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; margin-bottom: 20px;
  }
  .section-lead { font-size: 1.12rem; color: var(--text-dim); max-width: 620px; line-height: 1.65; }
  .center { text-align: center; }
  .center .section-lead { margin: 0 auto; }

  /* trusted band */
  .logos-band { padding: 46px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
  .logos-band .wrap { display: flex; align-items: center; justify-content: center; gap: 14px 46px; flex-wrap: wrap; }
  .logos-band .lbl { font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-faint); }
  .src-chip { display: inline-flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 14.5px; font-weight: 500; }
  .src-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--glow); font-style: normal; }

  /* feature gallery */
  .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-bottom: clamp(64px, 8vw, 100px); }
  .feature-row:last-child { margin-bottom: 0; }
  .feature-row.reverse .f-visual { order: 2; }
  .feature-copy h3 { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 18px; }
  .feature-copy p { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 22px; }
  .f-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .f-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-size: 15px; }
  .f-list li svg { width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; stroke: var(--accent); }
  .f-list li b { font-weight: 600; }
  .f-list li span { color: var(--text-dim); }

  /* tilt visual card */
  .f-visual { perspective: 1400px; }
  .tilt {
    position: relative; border-radius: 20px; background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border); padding: 26px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
    transform-style: preserve-3d; transition: transform .3s ease-out;
    overflow: hidden;
  }
  .tilt::before {
    content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
    background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(91,140,255,0.14), transparent 40%);
    opacity: 0; transition: opacity .3s;
  }
  .tilt:hover::before { opacity: 1; }
  .tilt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; transform: translateZ(30px); }
  .tilt-head .tt { font-size: 13px; color: var(--text-faint); letter-spacing: 1px; text-transform: uppercase; }
  .dots { display: flex; gap: 6px; }
  .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }

  /* health ring mock */
  .ring-wrap { display: flex; align-items: center; gap: 26px; transform: translateZ(40px); }
  .ring { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
  .ring svg { transform: rotate(-90deg); }
  .ring .score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ring .score b { font-family: var(--serif); font-size: 2.5rem; font-weight: 500; line-height: 1; }
  .ring .score small { font-size: 11px; color: var(--text-faint); letter-spacing: 1px; text-transform: uppercase; }
  .pillars { flex: 1; display: flex; flex-direction: column; gap: 11px; }
  .pillar { font-size: 13px; }
  .pillar .pt { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--text-dim); }
  .pbar { height: 6px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
  .pbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

  /* watchlist mock */
  .wl { transform: translateZ(30px); }
  .wl-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
  .wl-row:last-child { border-bottom: none; }
  .wl-sym { display: flex; align-items: center; gap: 10px; font-weight: 600; }
  .tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; letter-spacing: .5px; }
  .tag.stk { color: #7aa2ff; background: rgba(91,140,255,0.14); }
  .tag.etf { color: #c58cff; background: rgba(160,110,255,0.14); }
  .tag.cry { color: #e0a640; background: rgba(224,166,64,0.14); }
  .wl-price { text-align: right; font-variant-numeric: tabular-nums; }
  .up { color: var(--green); }
  .down { color: var(--red); }

  /* portfolio bars mock */
  .alloc { transform: translateZ(30px); display: flex; flex-direction: column; gap: 15px; }
  .alloc-item .al-top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
  .alloc-item .al-top b { font-weight: 600; }
  .alloc-item .al-top .pnl { font-variant-numeric: tabular-nums; }
  .albar { height: 9px; border-radius: 5px; background: var(--panel-2); overflow: hidden; }
  .albar i { display: block; height: 100%; }

  /* fear greed gauge mock */
  .gauge-wrap { transform: translateZ(40px); text-align: center; }
  .gauge { position: relative; width: 220px; height: 118px; margin: 0 auto 8px; }
  .gauge .needle { position: absolute; bottom: 4px; left: 50%; width: 3px; height: 92px; background: linear-gradient(var(--text), var(--accent)); border-radius: 3px; transform-origin: bottom center; transform: rotate(34deg); box-shadow: 0 0 12px var(--glow); }
  .gauge .hub { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--text); }
  .gauge-val { font-family: var(--serif); font-size: 2.2rem; font-weight: 500; }
  .gauge-lbl { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); }

  /* scenario chart mock */
  .chartcard { transform: translateZ(30px); }
  .legend { display: flex; gap: 18px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-dim); }
  .legend span { display: inline-flex; align-items: center; gap: 7px; }
  .legend i { width: 18px; height: 3px; border-radius: 2px; }

  @media (max-width: 900px) {
    .feature-row { grid-template-columns: 1fr; gap: 40px; margin-bottom: 90px; }
    .feature-row.reverse .f-visual { order: 0; }
    .section-pad { padding-top: 90px; padding-bottom: 90px; }
  }

  /* ============ FEATURE GRID (small cards) ============ */
  .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; }
  .mini {
    background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border); border-radius: 16px; padding: 28px;
    transition: transform .3s, border-color .3s, box-shadow .3s;
  }
  .mini:hover { transform: translateY(-4px); border-color: rgba(91,140,255,0.4); box-shadow: 0 24px 50px -24px rgba(0,0,0,0.7); }
  .mini .ic { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
    background: rgba(91,140,255,0.1); border: 1px solid rgba(91,140,255,0.2); }
  .mini .ic svg { width: 22px; height: 22px; stroke: var(--accent); }
  .mini h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
  .mini p { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
  @media (max-width: 900px) { .mini-grid { grid-template-columns: 1fr; } }

  /* ============ REAL SCREENSHOTS ============ */
  .shots { display: flex; flex-direction: column; gap: 64px; margin-top: 60px; }
  .shot-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
  .shot-head h4 { font-size: 1.15rem; font-weight: 600; }
  .shot-head p { font-size: 14.5px; color: var(--text-dim); }
  .shot-frame {
    border-radius: 16px; border: 1px solid var(--border); overflow: hidden;
    background: var(--bg-2);
    box-shadow: 0 40px 90px -34px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: transform .3s, border-color .3s;
  }
  .shot-frame:hover { transform: translateY(-4px); border-color: rgba(91,140,255,0.4); }
  .shot-frame img { display: block; width: 100%; height: auto; }
  .shot-link { display: block; cursor: zoom-in; }
  .shot-full { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--accent); white-space: nowrap; }
  .shot-full:hover { color: var(--accent-2); }
  @media (max-width: 900px) {
    .shots { gap: 44px; }
    .shot-head { gap: 6px; }
    .shot-head p { flex-basis: 100%; order: 3; }
  }
  .shot-note { margin-top: 40px; font-size: 13.5px; color: var(--text-faint); text-align: center; }
  .shots-more { margin-top: 76px; padding-top: 46px; border-top: 1px solid var(--border-soft); }
  .more-title { font-size: 1.05rem; font-weight: 600; color: var(--text-dim); text-align: center; margin-bottom: 30px; }
  .more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .more-shot a {
    display: block; border-radius: 13px; overflow: hidden; border: 1px solid var(--border);
    background: var(--bg-2); cursor: zoom-in;
    box-shadow: 0 24px 50px -28px rgba(0,0,0,0.8);
    transition: transform .3s, border-color .3s;
    /* Every card is the same shape regardless of how tall its screenshot is - otherwise the
       captions land at different heights and the grid reads as broken. Each one is anchored to
       the top of the shot (where the summary figures are) and links to the uncropped original. */
    aspect-ratio: 2 / 1;
  }
  .more-shot a:hover { transform: translateY(-3px); border-color: rgba(91,140,255,0.4); }
  .more-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .more-shot figcaption { margin-top: 13px; font-size: 13.5px; color: var(--text-dim); }
  /* An ODD number of cards in a two-column grid leaves the last one stranded; centre it instead of
     letting it hang off the left edge. Scoped with :nth-child(odd) so an even count is untouched -
     without that, removing a card silently pushes the new last one onto a row of its own. */
  .more-shot:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 13px); justify-self: center; }
  @media (max-width: 900px) {
    .more-grid { grid-template-columns: 1fr; }
    .more-shot:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
  }

  /* ============ SECURITY ============ */
  .security { background: linear-gradient(180deg, var(--bg) 0%, #0a0c11 100%); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
  .sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .lock-visual { position: relative; display: flex; align-items: center; justify-content: center; height: 340px; }
  .lock-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(91,140,255,0.18); }
  .lock-ring.r1 { width: 300px; height: 300px; animation: spin 26s linear infinite; }
  .lock-ring.r2 { width: 220px; height: 220px; border-style: dashed; animation: spin 18s linear infinite reverse; }
  .lock-ring.r3 { width: 140px; height: 140px; animation: spin 12s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .lock-core { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--panel-2), var(--bg-2)); border: 1px solid var(--border);
    box-shadow: 0 0 60px rgba(91,140,255,0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
  .lock-core svg { width: 42px; height: 42px; stroke: var(--accent-2); }
  .sec-list { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
  .sec-list li { display: flex; gap: 14px; }
  .sec-list .badge { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(47,191,113,0.12); }
  .sec-list .badge svg { width: 16px; height: 16px; stroke: var(--green); }
  .sec-list b { font-weight: 600; display: block; margin-bottom: 2px; }
  .sec-list span { color: var(--text-dim); font-size: 14px; }
  @media (max-width: 900px) { .sec-grid { grid-template-columns: 1fr; gap: 40px; } .lock-visual { height: 260px; } }

  /* ============ STATS / LANG ============ */
  .stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
  .stat { text-align: center; padding: 22px; }
  .stat b { font-family: var(--serif); font-size: clamp(2rem,3.4vw,2.8rem); font-weight: 500; display: block; letter-spacing: -0.01em; }
  .stat span { font-size: 13.5px; color: var(--text-dim); }
  .lang-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
  .lang-chips .lc { padding: 8px 16px; border-radius: 100px; border: 1px solid var(--border); background: var(--panel); font-size: 14px; color: var(--text-dim); }
  @media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2,1fr); } }

  /* ============ PRICING ============ */
  .pricing { text-align: center; }
  .price-card {
    max-width: 460px; margin: 54px auto 0; position: relative;
    background: linear-gradient(165deg, var(--panel) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border); border-radius: 24px; padding: 46px 40px;
    box-shadow: 0 50px 100px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
  }
  .price-card::after { content:""; position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:280px; height:180px; background: radial-gradient(circle, rgba(91,140,255,0.25), transparent 70%); pointer-events:none; }
  .price-card .pc-badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-2); padding: 6px 14px; border-radius: 100px; background: rgba(91,140,255,0.1); border: 1px solid rgba(91,140,255,0.22); margin-bottom: 22px; }
  .price-card .amt { font-family: var(--serif); font-size: 3.6rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
  .price-card .amt sup { font-size: 1.4rem; top: -1.4rem; color: var(--text-dim); }
  .price-card .per { color: var(--text-faint); font-size: 14px; margin-bottom: 26px; }
  .price-card ul { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 13px; margin: 28px 0 32px; }
  .price-card li { display: flex; gap: 11px; font-size: 15px; }
  .price-card li svg { width: 18px; height: 18px; stroke: var(--green); flex-shrink: 0; margin-top: 3px; }
  .price-card .btn { width: 100%; justify-content: center; }
  .trust-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
  .trust-chips span { font-size: 12px; color: var(--text-dim); padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft); white-space: nowrap; }
  .trust-chips span::before { content: "\2713"; color: var(--green); margin-right: 5px; }
  .price-note { font-size: 13px; color: var(--text-faint); margin-top: 18px; }
  .early-note {
    display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--accent);
    background: rgba(91,140,255,0.1); border: 1px solid rgba(91,140,255,0.25);
  }

  /* ============ FAQ ============ */
  .faq-list { max-width: 800px; margin: 56px auto 0; text-align: left; }
  .faq-item {
    background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border); border-radius: 16px;
    padding: 0 26px; margin-bottom: 14px;
    transition: border-color .3s, box-shadow .3s;
  }
  .faq-item[open] { border-color: rgba(91,140,255,0.4); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.7); }
  .faq-item summary {
    cursor: pointer; list-style: none; padding: 22px 0;
    font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 16px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+'; margin-left: auto; color: var(--accent);
    font-size: 1.5rem; font-weight: 300; line-height: 1;
  }
  .faq-item[open] summary::after { content: '\2212'; }
  .faq-item p { font-size: 15px; color: var(--text-dim); line-height: 1.65; margin: 0; padding: 0 0 24px; }
  .faq-item p + p { padding-top: 12px; }
  @media (max-width: 640px) { .faq-item { padding: 0 20px; } .faq-item summary { font-size: 1rem; } }

  /* ============ Changelog / recent updates ============ */
  .changelog { max-width: 820px; margin: 56px auto 0; text-align: left; }
  .cl-item {
    display: grid; grid-template-columns: 22px 1fr; gap: 16px;
    padding: 22px 6px; border-bottom: 1px solid var(--border-soft);
  }
  .cl-item:last-child { border-bottom: 0; }
  .cl-item svg { width: 22px; height: 22px; stroke: var(--green); margin-top: 2px; }
  .cl-item h4 { font-size: 1.02rem; margin: 0 0 4px; color: var(--text); }
  .cl-item p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; margin: 0; }
  .cl-foot { max-width: 820px; margin: 20px auto 0; text-align: left; font-size: 14px; color: var(--text-faint); padding: 0 6px; }
  @media (max-width: 640px) { .changelog { margin-top: 40px; } }

  /* how licensing works */
  .lic-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 940px; margin: 30px auto 0; text-align: left; }
  .lic-step { background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
  .lic-step .n { width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; color: var(--accent-2); background: rgba(91,140,255,0.12); border: 1px solid rgba(91,140,255,0.28); margin-bottom: 14px; }
  .lic-step h4 { font-size: 1rem; font-weight: 600; margin-bottom: 7px; }
  .lic-step p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
  @media (max-width: 760px) { .lic-steps { grid-template-columns: 1fr; } }

  /* ============ FOOTER ============ */
  /* Translucent, not opaque. A solid fill here is what made the metal backdrop "stop" before the bottom
     of the page: the footer is ~990px tall on a phone, so it covered the whole screen and the backdrop
     appeared to be missing. The veil keeps the small, faint footer text legible where a bright fold
     passes behind it, while the metal still reads through. */
  footer { border-top: 1px solid var(--border-soft); padding: 60px 0 40px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); background: transparent; }
  .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
  .foot-brand { max-width: 320px; }
  .foot-brand .brand { margin-bottom: 14px; }
  .foot-brand p { color: var(--text-faint); font-size: 14px; line-height: 1.6; }
  .foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
  .foot-col h5 { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
  .foot-col a { display: block; color: var(--text-dim); font-size: 14px; margin-bottom: 11px; transition: color .2s; }
  .foot-col a:hover { color: var(--text); }
  .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 4px; padding: 30px 0; margin-top: 8px; border-top: 1px solid var(--border-soft); }
  .foot-nav a { color: var(--text-dim); font-size: 14px; font-weight: 500; padding: 2px 0; transition: color .2s; }
  .foot-nav a:hover { color: var(--text); }
  .foot-nav a:not(:last-child)::after { content: "·"; margin: 0 6px 0 10px; color: var(--text-faint); }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: 13px; }
  @media (max-width: 560px) { .foot-nav a:not(:last-child)::after { margin: 0 4px 0 7px; } }

  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .lock-ring, .scroll-hint { animation: none !important; }
  }