/* =========================================================
     MONOCHROME — pure black & white.
     No hue anywhere: hierarchy comes from value, weight,
     inversion and motion.
     ========================================================= */
  :root{
    --bg:#000000;
    --bg-soft:#080808;
    --surface:#0D0D0D;
    --surface-2:#151515;
    --surface-3:#232323;
    --border:#262626;
    --text:#FFFFFF;
    --text-muted:#A3A3A3;
    --text-faint:#6B6B6B;

    --c1:#FFFFFF;          /* primary ink */
    --c1-deep:#C2C2C2;
    --c1-light:#FFFFFF;
    --c2:#8F8F8F;          /* secondary ink */
    --c2-deep:#6B6B6B;
    --c3:#D6D6D6;          /* highlight ink */
    --on-c1:#000000;

    --good:#FFFFFF;
    --good-bg:rgba(255,255,255,0.10);
    --warn:#B8B8B8;
    --warn-bg:rgba(255,255,255,0.055);
    --danger:#FFFFFF;
    --danger-bg:rgba(255,255,255,0.16);

    --grad:linear-gradient(120deg, #FFFFFF 0%, #B5B5B5 55%, #6E6E6E 110%);
    --grad-soft:linear-gradient(120deg, #DCDCDC, #FFFFFF);

    --shadow:0 44px 120px -38px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.04), 0 0 120px -60px rgba(255,255,255,0.35);
    --shadow-sm:0 14px 36px -18px rgba(0,0,0,0.8);
    --glow-c1:rgba(255,255,255,0.24);
    --glow-c2:rgba(255,255,255,0.12);
    --ring:rgba(255,255,255,0.09);
    --btn-sheen:rgba(0,0,0,0.34);   /* sweep across a white button */

    --radius-lg:24px;
    --radius-md:14px;
    --radius-sm:9px;
  }
  :root[data-theme="light"]{
    --bg:#F7F7F7;
    --bg-soft:#EFEFEF;
    --surface:#FFFFFF;
    --surface-2:#F2F2F2;
    --surface-3:#E3E3E3;
    --border:#E2E2E2;
    --text:#000000;
    --text-muted:#5A5A5A;
    --text-faint:#8E8E8E;

    --c1:#000000;
    --c1-deep:#3D3D3D;
    --c1-light:#1A1A1A;
    --c2:#6E6E6E;
    --c2-deep:#4A4A4A;
    --c3:#3A3A3A;
    --on-c1:#FFFFFF;

    --good:#000000;
    --good-bg:rgba(0,0,0,0.07);
    --warn:#5A5A5A;
    --warn-bg:rgba(0,0,0,0.045);
    --danger:#000000;
    --danger-bg:rgba(0,0,0,0.10);

    --grad:linear-gradient(120deg, #000000 0%, #4A4A4A 55%, #8E8E8E 110%);
    --grad-soft:linear-gradient(120deg, #333333, #000000);

    --shadow:0 34px 84px -36px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-sm:0 12px 30px -16px rgba(0,0,0,0.14);
    --glow-c1:rgba(0,0,0,0.14);
    --glow-c2:rgba(0,0,0,0.08);
    --ring:rgba(0,0,0,0.06);
    --btn-sheen:rgba(255,255,255,0.45);   /* sweep across a black button */
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    transition:background .45s ease, color .45s ease;
  }
  body.is-loading{overflow:hidden; height:100vh;}
  a{color:inherit;}
  img,svg{display:block;}
  button,input{font-family:inherit;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 32px; position:relative;}
  .mono{font-family:'JetBrains Mono', monospace;}
  ::selection{background:var(--c1); color:var(--on-c1);}
  :focus-visible{outline:2px solid var(--c1); outline-offset:3px; border-radius:6px;}

  h1,h2,h3,h4{font-family:'Space Grotesk', 'Inter', sans-serif; color:var(--text); font-weight:600; letter-spacing:-0.03em;}
  .spark{display:inline-block; width:1em; height:1em; vertical-align:-0.12em;}
  .spark path{fill:currentColor;}
  .muted{color:var(--text-muted);}

  /* the logo gradient has to follow the theme — presentation attributes
     can't take var(), so the stops are driven from CSS instead. */
  #markGrad stop:nth-child(1){stop-color:var(--c3);}
  #markGrad stop:nth-child(2){stop-color:var(--c1);}
  #markGrad stop:nth-child(3){stop-color:var(--c2);}

  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:11.5px;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--c1);
    display:inline-flex; align-items:center; gap:8px;
  }
  .eyebrow .spark{color:var(--c1); animation:pulseSpark 2.8s ease-in-out infinite;}
  /* the aperture glyph is radially symmetric — rotating it reads as nothing,
     so it breathes instead. */
  @keyframes pulseSpark{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.55; transform:scale(.82);}}

  .grad-text{
    background:var(--grad); background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:gradShift 10s ease-in-out infinite;
  }
  @keyframes gradShift{0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;}}

  /* word-mask split reveal */
  .sw{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; margin-bottom:-.14em;}
  .swi{display:inline-block; will-change:transform,opacity;}

  .section-head{max-width:660px; margin-bottom:44px;}
  .section-head h2{font-size:clamp(27px,3.5vw,40px); margin-top:12px; line-height:1.14;}
  .section-head p{margin-top:14px; font-size:15.5px; color:var(--text-muted);}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

  /* ---------- ambient aurora ---------- */
  .glow{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
  .glow span{position:absolute; border-radius:50%; filter:blur(8px); will-change:transform;}
  .glow .g1{width:760px; height:760px; top:-300px; right:-240px; background:radial-gradient(circle, var(--glow-c1) 0%, transparent 70%); animation:drift1 26s ease-in-out infinite;}
  .glow .g2{width:640px; height:640px; top:46%; left:-280px; background:radial-gradient(circle, var(--glow-c2) 0%, transparent 70%); animation:drift2 32s ease-in-out infinite;}
  .glow .g3{width:480px; height:480px; bottom:-200px; right:6%; background:radial-gradient(circle, var(--glow-c2) 0%, transparent 70%); animation:drift3 29s ease-in-out infinite;}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-70px,60px) scale(1.12);}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(80px,-50px) scale(1.1);}}
  @keyframes drift3{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-50px,-70px) scale(1.15);}}

  .grain{
    position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.035;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  }
  .aura{position:fixed; top:0; left:0; width:360px; height:360px; margin:-180px 0 0 -180px; border-radius:50%; pointer-events:none; z-index:0; opacity:0;
    background:radial-gradient(circle, var(--glow-c1) 0%, transparent 62%); filter:blur(30px); will-change:transform;}

  /* =========================================================
     PRELOADER — logo draw-on
     ========================================================= */
  .loader{position:fixed; inset:0; z-index:99999; overflow:hidden;}
  .loader-panel{position:absolute; left:0; right:0; height:50.2%; background:var(--bg); will-change:transform;}
  .loader-panel.top{top:0;} .loader-panel.bot{bottom:0;}
  .loader-core{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; z-index:2;}
  .loader-mark{position:relative; width:132px; height:132px;}
  .loader-mark svg{width:100%; height:100%; overflow:visible;}
  .loader-mark .draw{fill:none; stroke:url(#markGrad); stroke-width:.62; stroke-linecap:round; stroke-linejoin:round;}
  .loader-mark .solid{opacity:0;}
  .loader-halo{position:absolute; inset:-26px; border-radius:50%; background:radial-gradient(circle, var(--glow-c1), transparent 66%); filter:blur(16px); opacity:0;}
  .loader-pct{font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.28em; color:var(--text-faint);}
  .loader.fallback{animation:loaderAutoHide 2.4s ease forwards;}
  @keyframes loaderAutoHide{0%,72%{opacity:1;} 100%{opacity:0; visibility:hidden;}}

  .scroll-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:101; pointer-events:none;}
  .scroll-progress i{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--grad); box-shadow:0 0 14px var(--glow-c1);}

  /* =========================================================
     NAV — pill navigation with sliding indicator
     ========================================================= */
  header.nav{position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 0;
    transition:background .35s ease, border-color .35s ease, padding .35s ease, backdrop-filter .35s ease;
    border-bottom:1px solid transparent;}
  header.nav.scrolled{background:color-mix(in srgb, var(--bg) 76%, transparent); backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--border); padding:11px 0;}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand .mark{width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), filter .35s ease;}
  .brand:hover .mark{transform:rotate(-12deg) scale(1.1); filter:drop-shadow(0 0 12px var(--glow-c1));}
  .brand .mark svg{width:28px; height:28px;}
  .brand .name{font-family:'Space Grotesk', 'Inter', sans-serif; font-weight:600; font-size:19px; letter-spacing:-.03em;}

  nav.links{position:relative; display:flex; align-items:center; gap:2px; padding:5px; border-radius:999px;
    background:var(--surface); border:1px solid var(--border);}
  nav.links a{position:relative; z-index:1; text-decoration:none; color:var(--text-muted); font-size:13.5px; font-weight:500; padding:8px 16px; border-radius:999px; transition:color .28s ease;}
  nav.links a:hover, nav.links a.active{color:var(--text);}
  .nav-pill{position:absolute; z-index:0; top:5px; left:5px; height:calc(100% - 10px); width:0; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); opacity:0;}

  .nav-actions{display:flex; align-items:center; gap:12px;}

  /* ---- mobile menu ---- */
  .nav-toggle{display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--border);
    background:var(--surface); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex-shrink:0;}
  .nav-toggle span{display:block; width:16px; height:1.5px; background:var(--text); border-radius:2px;
    transition:transform .32s cubic-bezier(.2,.8,.2,1);}
  .nav-toggle.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg);}
  .mobile-menu{position:fixed; inset:0; z-index:99; background:var(--bg); display:none;
    flex-direction:column; justify-content:center; padding:96px 28px calc(40px + env(safe-area-inset-bottom));}
  .mobile-menu.is-open{display:flex;}
  .mobile-menu nav{display:flex; flex-direction:column; margin-bottom:30px;}
  .mobile-menu nav a{font-family:'Space Grotesk','Inter',sans-serif; font-size:clamp(26px,7.5vw,38px);
    font-weight:600; letter-spacing:-.035em; text-decoration:none; padding:14px 0; border-bottom:1px solid var(--border);}
  .mobile-menu .btn{align-self:flex-start;}
  body.menu-open{overflow:hidden;}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:600; font-size:14.5px; padding:12px 22px; border-radius:999px; cursor:pointer; border:1px solid transparent;
    text-decoration:none; white-space:nowrap; position:relative; overflow:hidden;
    transition:box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease; will-change:transform;}
  .btn > *{position:relative; z-index:2;}
  .btn:active{scale:.97;}
  .btn-primary{background:var(--grad-soft); background-size:180% 100%; color:var(--on-c1); box-shadow:0 14px 32px -12px var(--glow-c1);}
  .btn-primary:hover{box-shadow:0 22px 48px -12px var(--glow-c1); background-position:100% 50%;}
  .btn-primary::after{content:""; position:absolute; top:0; left:-60%; width:35%; height:100%; z-index:1; background:linear-gradient(120deg, transparent, var(--btn-sheen), transparent); transform:skewX(-20deg);}
  .btn-primary:hover::after{animation:shimmer .9s ease forwards;}
  @keyframes shimmer{to{left:130%;}}
  .btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
  .btn-ghost:hover{border-color:var(--c1); color:var(--c1); box-shadow:0 0 26px -10px var(--glow-c1);}
  .btn-sm{padding:9px 17px; font-size:13.5px;}

  .theme-toggle{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
    border-radius:999px; padding:6px 14px 6px 6px; font-family:'JetBrains Mono', monospace; font-size:11px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); cursor:pointer;
    transition:border-color .25s ease, color .25s ease;}
  .theme-toggle:hover{color:var(--c1); border-color:var(--c1);}
  .theme-toggle .dot{width:24px; height:24px; border-radius:50%; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; color:var(--on-c1); box-shadow:0 0 14px -3px var(--glow-c1);}
  .theme-toggle .dot svg{width:13px; height:13px;}

  /* theme transition: the viewport resolves tile by tile */
  .theme-grid{position:fixed; inset:0; z-index:9998; pointer-events:none; display:grid; visibility:hidden;}
  .theme-grid i{display:block; will-change:transform,opacity; transform:scale(0);}
  .spark-particle{position:fixed; z-index:10000; pointer-events:none; width:11px; height:11px;}

  .spot{position:relative; overflow:hidden;}
  .spot::before{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:0;
    background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), var(--ring), transparent 62%);
    opacity:0; transition:opacity .4s ease;}
  .spot:hover::before{opacity:1;}
  .spot > *{position:relative; z-index:1;}

  /* =========================================================
     HERO — asymmetric split
     ========================================================= */
  .hero{position:relative; padding:124px 0 48px; z-index:1;}
  .mote-canvas{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:48px; align-items:center;}

  .hero-badge{display:inline-flex; width:fit-content; align-items:center; gap:9px; margin-bottom:22px;
    padding:5px 13px 5px 5px; border-radius:999px; background:var(--surface); border:1px solid var(--border);
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-muted); letter-spacing:.04em;}
  .hero-badge b{background:var(--grad-soft); color:var(--on-c1); font-weight:700; letter-spacing:.1em; padding:3px 9px; border-radius:999px; font-size:9.5px; text-transform:uppercase;}
  h1.title{font-size:clamp(38px,4.6vw,60px); line-height:1.06; letter-spacing:-.04em; font-weight:600; text-wrap:balance;}
  /* Space Grotesk has no true italic — a synthesised slant looks cheap,
     so the accent word is set by weight contrast instead. */
  h1.title em{font-style:normal; font-weight:400;}
  .hero p.sub{margin-top:20px; max-width:48ch; font-size:16.5px; color:var(--text-muted); line-height:1.6;}
  .hero-cta{display:flex; align-items:center; gap:12px; margin-top:28px; flex-wrap:wrap;}
  .hero-proof{display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:26px; padding-top:20px; border-top:1px solid var(--border);}
  .hero-proof div{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted);}
  .hero-proof svg{width:15px; height:15px; color:var(--c1); flex-shrink:0;}

  /* live drafting card (hero right) */
  .live-stack{position:relative; perspective:1600px;}
  .live-ghost{position:absolute; left:0; right:0; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border);}
  .live-ghost.a{top:26px; height:100%; transform:scale(.94); opacity:.45;}
  .live-ghost.b{top:52px; height:100%; transform:scale(.88); opacity:.22;}
  .live-card{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; will-change:transform; transform-style:preserve-3d;}
  .live-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface-2);}
  .live-head .lbl{display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);}
  .live-dot{width:7px; height:7px; border-radius:50%; background:var(--c1); box-shadow:0 0 0 0 var(--glow-c1); animation:livePulse 2s ease-out infinite;}
  @keyframes livePulse{0%{box-shadow:0 0 0 0 var(--glow-c1);} 70%{box-shadow:0 0 0 9px transparent;} 100%{box-shadow:0 0 0 0 transparent;}}
  .live-body{padding:20px 18px;}
  .live-q{font-size:13px; color:var(--text-muted); font-family:'JetBrains Mono', monospace; line-height:1.55; padding-left:12px; border-left:2px solid var(--border); margin-bottom:16px;}
  .live-a{font-size:14.5px; line-height:1.62; min-height:96px;}
  .cursor{display:inline-block; width:2px; height:15px; background:var(--c1); margin-left:2px; vertical-align:-2px; animation:blink .9s step-end infinite; box-shadow:0 0 8px var(--glow-c1);}
  @keyframes blink{50%{opacity:0;}}
  .live-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--border);}
  .live-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; background:var(--bg-soft); border-top:1px solid var(--border);}
  .conf-meter{display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-muted);}
  .conf-track{width:74px; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
  .conf-track i{display:block; height:100%; width:0%; border-radius:99px; background:var(--grad-soft); box-shadow:0 0 12px var(--glow-c1);}
  .live-actions{display:flex; gap:7px;}
  .mini-btn{position:relative; font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); cursor:pointer; transition:all .22s ease; display:inline-flex; align-items:center; gap:6px;}
  .mini-btn.go{background:var(--c1); border-color:var(--c1); color:var(--on-c1);}
  .mini-btn:hover{border-color:var(--c1); color:var(--c1);}
  .mini-btn.go:hover{color:var(--on-c1); filter:brightness(1.08);}
  .mini-btn svg{width:12px; height:12px;}
  .mini-btn[disabled]{cursor:default; opacity:.55;}
  /* ring pulse marks the button as interactive until it is first used */
  .mini-btn.go.hint::after{content:""; position:absolute; inset:-3px; border-radius:999px; border:1.5px solid var(--c1); opacity:0; animation:btnPulse 2.2s ease-out infinite; pointer-events:none;}
  @keyframes btnPulse{0%{opacity:.55; transform:scale(1);} 100%{opacity:0; transform:scale(1.32);}}

  /* approve / assign confirmation overlay */
  .stamp{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; text-align:center; padding:20px;}
  .stamp-ring{width:64px; height:64px; border-radius:50%; background:var(--text); color:var(--bg); display:flex; align-items:center; justify-content:center;}
  .stamp-ring svg{width:30px; height:30px;}
  .stamp b{font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;}
  .live-head-r{display:flex; align-items:center; gap:7px;}
  @media (max-width:420px){ #liveDone{display:none;} }
  .stamp em{font-style:normal; font-size:12.5px; color:var(--text-muted); max-width:30ch;}

  .live-hint{margin-top:15px; text-align:center; font-family:'JetBrains Mono', monospace; font-size:10px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); transition:opacity .5s ease;}

  .chip{font-family:'JetBrains Mono', monospace; font-size:10.5px; padding:4px 9px; border-radius:99px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
  .chip.good{background:var(--good-bg); color:var(--good);}
  .chip.warn{background:var(--warn-bg); color:var(--warn); border:1px dashed var(--border);}
  /* monochrome alert state: inverted, not coloured */
  .chip.danger{background:var(--text); color:var(--bg); font-weight:600;}
  .chip.cite{background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);}
  .chip .dotv{width:5px; height:5px; border-radius:50%; background:currentColor;}
  .chip.warn .dotv{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor;}

  /* ---------- marquee ---------- */
  .marquee{position:relative; z-index:1; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); padding:14px 0; margin-top:52px;}
  .marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;}
  .marquee::before{left:0; background:linear-gradient(90deg, var(--surface), transparent);}
  .marquee::after{right:0; background:linear-gradient(270deg, var(--surface), transparent);}
  .marquee-track{display:flex; width:max-content; gap:14px; will-change:transform;}
  .marquee-track span{font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-muted); white-space:nowrap; letter-spacing:.04em;}
  .marquee-track .dot{color:var(--c1);}

  /* =========================================================
     APP SHELL  (the product)
     ========================================================= */
  .appsec{padding:92px 0 40px; position:relative; z-index:1;}
  .app{max-width:1140px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); opacity:0; transform:translateY(40px);}
  .app-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface-2);}
  .app-bar-l{display:flex; align-items:center; gap:14px; min-width:0;}
  .dots{display:flex; gap:6px;}
  .dots span{width:9px; height:9px; border-radius:50%;}
  .dots span:nth-child(1){background:var(--text-faint);} .dots span:nth-child(2){background:var(--text-muted);} .dots span:nth-child(3){background:var(--text);}
  .app-path{font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .app-path b{color:var(--text); font-weight:600;}
  .app-bar-r{display:flex; align-items:center; gap:12px;}
  .app-pill{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; background:var(--ring); color:var(--c1); padding:4px 10px; border-radius:999px;}
  .avatars{display:flex;}
  .avatars span{width:25px; height:25px; border-radius:50%; border:2px solid var(--surface-2); background:var(--grad-soft); margin-left:-8px; display:flex; align-items:center; justify-content:center; font-size:9.5px; color:var(--on-c1); font-weight:700;}
  .avatars span:first-child{margin-left:0;}

  .app-body{display:grid; grid-template-columns:212px 1fr;}
  .app-side{position:relative; border-right:1px solid var(--border); background:var(--bg-soft); padding:16px 12px; display:flex; flex-direction:column;}
  .side-label{font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); padding:0 12px; margin-bottom:10px;}
  .side-nav{position:relative; display:flex; flex-direction:column; gap:2px;}
  .side-indicator{position:absolute; left:0; right:0; height:0; border-radius:10px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); opacity:0;}
  .side-item{position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:13.5px; color:var(--text-muted); cursor:pointer; background:none; border:0; text-align:left; width:100%; transition:color .25s ease;}
  .side-item svg{width:16px; height:16px; flex-shrink:0;}
  .side-item .count{margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--text-faint);}
  .side-item:hover{color:var(--text);}
  .side-item.active{color:var(--c1);}
  .side-foot{margin-top:auto; padding:14px 12px 4px; border-top:1px solid var(--border);}
  .side-quota{font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--text-faint); display:flex; justify-content:space-between; margin-bottom:7px;}
  .side-quota-bar{height:4px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
  .side-quota-bar i{display:block; height:100%; width:0%; background:var(--grad-soft); border-radius:99px;}

  .app-main{display:grid; grid-template-columns:1fr 296px; min-height:520px;}
  .app-content{border-right:1px solid var(--border); display:flex; flex-direction:column; min-width:0;}
  .app-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
  .filters{display:flex; gap:6px; flex-wrap:wrap;}
  .filter{font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.05em; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; transition:all .22s ease;}
  .filter:hover{color:var(--text); border-color:var(--text-faint);}
  .filter.on{background:var(--c1); border-color:var(--c1); color:var(--on-c1);}
  .toolbar-prog{display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-muted);}
  .toolbar-prog .track{width:110px; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
  .toolbar-prog .track i{display:block; height:100%; width:0%; background:var(--grad-soft); border-radius:99px; box-shadow:0 0 12px var(--glow-c1);}

  .panels{position:relative; flex:1; min-height:410px;}
  .panel{position:absolute; inset:0; padding:16px 18px; overflow:auto; visibility:hidden; opacity:0;}
  .panel.on{visibility:visible; opacity:1;}

  /* --- questions panel --- */
  .qrow{display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:start; padding:13px 14px; border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:9px; background:var(--bg-soft); transition:border-color .25s ease, background .25s ease, transform .25s ease;}
  .qrow:hover{border-color:var(--c1); background:var(--surface-2); transform:translateX(3px);}
  .qcheck{width:18px; height:18px; border-radius:6px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; margin-top:1px; color:var(--on-c1);}
  .qcheck.done{background:var(--c1); border-color:var(--c1);}
  .qcheck svg{width:11px; height:11px;}
  .qtext{font-size:13.5px; line-height:1.45;}
  .qmeta{display:flex; align-items:center; gap:7px; margin-top:9px; flex-wrap:wrap;}
  .qside{display:flex; flex-direction:column; align-items:flex-end; gap:7px;}
  .conf-num{font-family:'Space Grotesk', 'Inter', sans-serif; font-weight:600; font-size:16px;}
  .conf-num.good{color:var(--text);}
  .conf-num.warn{color:var(--text-muted);}
  .conf-num.danger{color:var(--bg); background:var(--text); padding:0 8px; border-radius:7px;}
  .avatar-sm{width:22px; height:22px; border-radius:50%; background:var(--grad-soft); font-size:9px; color:var(--on-c1); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}

  /* --- library panel --- */
  .lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:11px;}
  .doc{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; transition:border-color .25s ease, transform .25s ease;}
  .doc:hover{border-color:var(--c1); transform:translateY(-3px);}
  .doc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px;}
  .doc-ico{width:30px; height:30px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--c1);}
  .doc-ico svg{width:15px; height:15px;}
  .doc-ext{font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em;}
  .doc h6{font-size:12.5px; font-weight:600; line-height:1.35; margin-bottom:8px; font-family:'Inter',sans-serif;}
  .doc-sub{font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--text-faint); display:flex; justify-content:space-between; margin-bottom:6px;}
  .doc-bar{height:3px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
  .doc-bar i{display:block; height:100%; width:0%; background:var(--grad-soft); border-radius:99px;}

  /* --- analytics panel --- */
  .an-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:16px;}
  .an-tile{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px;}
  .an-tile .k{font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);}
  .an-tile .v{font-family:'Space Grotesk', 'Inter', sans-serif; font-size:25px; font-weight:700; margin-top:5px; line-height:1;}
  .an-tile .d{font-size:11px; color:var(--c1); margin-top:5px; font-family:'JetBrains Mono', monospace;}
  .an-chart{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px;}
  .an-chart h6{font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:16px;}
  .bars{display:flex; align-items:flex-end; gap:9px; height:132px;}
  .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%;}
  .bar-col .stem{width:100%; flex:1; display:flex; align-items:flex-end;}
  .bar-col i{display:block; width:100%; height:0%; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, var(--c1-light), var(--c1-deep));}
  .bar-col.peak i{background:linear-gradient(180deg, var(--c3), var(--c1)); box-shadow:0 0 18px -2px var(--glow-c1);}
  .bar-col span{font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--text-faint);}

  /* --- insight rail --- */
  .app-insight{padding:16px; background:var(--bg-soft); display:flex; flex-direction:column; gap:13px; min-width:0;}
  .ins-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:15px;}
  .ins-card h5{font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between;}
  .donut-row{display:flex; align-items:center; gap:14px;}
  .donut{--p:0; width:66px; height:66px; border-radius:50%; position:relative; flex-shrink:0;
    background:conic-gradient(var(--c1) calc(var(--p) * 1%), var(--surface-3) 0); filter:drop-shadow(0 0 12px var(--glow-c1));}
  .donut::after{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface);}
  .donut-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk', 'Inter', sans-serif; font-weight:600; font-size:13.5px; z-index:1;}
  .donut-label{font-size:12px; color:var(--text-muted); line-height:1.5;}
  .donut-label b{color:var(--text); font-family:'Space Grotesk', 'Inter', sans-serif;}
  .gap-item{display:flex; align-items:center; gap:9px; font-size:11.5px; padding:7px 0; color:var(--text-muted); border-bottom:1px dashed var(--border);}
  .gap-item:last-child{border-bottom:0;}
  .gap-item .x{width:16px; height:16px; border-radius:50%; background:var(--text); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0;}
  .feed div{display:flex; gap:9px; font-size:11.5px; color:var(--text-muted); padding:7px 0; line-height:1.45;}
  .feed b{color:var(--text); font-weight:600;}
  .feed .t{font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--text-faint); margin-left:auto; white-space:nowrap;}

  .app-status{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 18px; border-top:1px solid var(--border); background:var(--surface-2); font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--text-faint); flex-wrap:wrap;}
  .app-status .l{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .app-status .sync{display:inline-flex; align-items:center; gap:6px;}
  .app-status .sync i{width:6px; height:6px; border-radius:50%; background:var(--text); display:block;}
  .app-status em{font-style:normal; color:var(--c1);}

  /* =========================================================
     PROBLEM — bento
     ========================================================= */
  .problem{padding:110px 0 40px; position:relative; z-index:1;}
  .bento-problem{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:20px;}
  .tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; opacity:0; transform:translateY(24px); transition:border-color .3s ease, box-shadow .3s ease;}
  .tile:hover{border-color:var(--c1); box-shadow:0 0 44px -20px var(--glow-c1);}
  .tile-wide h3{font-size:18px; margin-bottom:16px;}
  .old-way{display:flex; flex-direction:column; gap:9px;}
  .old-way div{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); padding:9px 12px; border-radius:10px; background:var(--bg-soft); border:1px solid var(--border);}
  .old-way .n{font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--danger); flex-shrink:0;}
  .tile .num{font-family:'Space Grotesk', 'Inter', sans-serif; font-weight:700; font-size:clamp(30px,3.6vw,42px); line-height:1;}
  .tile .label{margin-top:12px; font-size:13.5px; color:var(--text-muted);}

  /* =========================================================
     HOW IT WORKS — horizontal pinned stepper
     ========================================================= */
  .how{padding:110px 0; position:relative; z-index:1; overflow:hidden;}
  .how-viewport{position:relative; overflow:hidden;}
  .hsteps{display:flex; gap:22px; width:max-content; padding:6px 0 10px; will-change:transform;}
  .hstep{width:340px; flex-shrink:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column; transition:border-color .3s ease, box-shadow .3s ease;}
  .hstep:hover{border-color:var(--c1); box-shadow:0 0 44px -20px var(--glow-c1);}
  .hstep-num{width:44px; height:44px; border-radius:13px; background:var(--bg-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--c1); margin-bottom:18px;
    transition:background .35s ease, color .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);}
  .hstep:hover .hstep-num{background:var(--text); color:var(--bg); border-color:var(--text); transform:scale(1.06);}
  .hstep h4{font-size:18px; margin-bottom:9px;}
  .hstep p{font-size:14px; color:var(--text-muted); line-height:1.6;}
  .hstep-vis{margin-top:auto; padding-top:22px;}
  .vis-row{display:flex; align-items:center; gap:7px; margin-bottom:7px;}
  .vis-bar{height:7px; border-radius:99px; background:var(--surface-3); flex:1; overflow:hidden;}
  .vis-bar i{display:block; height:100%; border-radius:99px; background:var(--grad-soft);}
  .vis-chip{font-family:'JetBrains Mono', monospace; font-size:9.5px; padding:4px 9px; border-radius:99px; background:var(--bg-soft); border:1px solid var(--border); color:var(--text-faint);}
  .how-rail{margin-top:34px; height:3px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
  .how-rail i{display:block; height:100%; width:0%; border-radius:99px; background:var(--grad); box-shadow:0 0 12px var(--glow-c1);}
  .how-hint{margin-top:14px; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); display:flex; align-items:center; gap:9px;}

  /* =========================================================
     FEATURES — bento
     ========================================================= */
  .features{padding:110px 0; position:relative; z-index:1;}
  .bento{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; perspective:1600px;}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; opacity:0; transform:translateY(26px); transform-style:preserve-3d; will-change:transform; transition:border-color .3s ease, box-shadow .3s ease;}
  .card:hover{border-color:var(--c1); box-shadow:0 26px 64px -32px var(--glow-c1);}
  .card.c-a{grid-column:span 4;} .card.c-b{grid-column:span 2;}
  .card.c-c{grid-column:span 3;} .card.c-d{grid-column:span 3;}
  .card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
  .card-ico{width:44px; height:44px; border-radius:13px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; color:var(--on-c1); box-shadow:0 10px 26px -12px var(--glow-c1);
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;}
  .card:hover .card-ico{transform:rotate(-9deg) scale(1.08); box-shadow:0 16px 36px -12px var(--glow-c1);}
  .card-ico svg{width:20px; height:20px;}
  .card-num{font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-faint); letter-spacing:.08em;}
  .card h3{font-size:19px; margin-bottom:9px;}
  .card p{font-size:14.5px; color:var(--text-muted); margin-bottom:20px;}
  .card-vis{border-top:1px solid var(--border); padding-top:18px;}
  .kv{display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-muted); padding:7px 0;}
  .kv .track{height:6px; border-radius:99px; background:var(--surface-3); flex:1; overflow:hidden;}
  .kv .track i{display:block; height:100%; width:0%; background:var(--grad-soft); border-radius:99px;}
  .owners{display:flex; flex-direction:column; gap:8px;}
  .owners span{display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono', monospace; font-size:10.5px; background:var(--bg-soft); border:1px solid var(--border); padding:7px 11px; border-radius:999px; color:var(--text-muted);}
  .owners .avatar-sm{width:17px; height:17px; font-size:7.5px;}
  .owners em{font-style:normal; margin-left:auto; color:var(--c1);}
  .sparkline{display:flex; align-items:flex-end; gap:5px; height:56px;}
  .sparkline i{flex:1; height:8%; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg, var(--c1-light), var(--c1-deep));}
  .sparkline i.hi{background:linear-gradient(180deg, var(--c3), var(--c1));}

  /* =========================================================
     BUILT FOR
     ========================================================= */
  .icp{padding:0 0 110px; position:relative; z-index:1;}
  .icp-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .icp-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; opacity:0; transform:translateY(24px); transition:border-color .3s ease, box-shadow .3s ease;}
  .icp-card:hover{border-color:var(--c2); box-shadow:0 0 44px -20px var(--glow-c2);}
  .icp-card .tag{font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--c2); text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; display:block;}
  .icp-card h3{font-size:21px; margin-bottom:11px;}
  .icp-card p{font-size:14.5px; color:var(--text-muted);}

  /* =========================================================
     CTA + FOOTER
     ========================================================= */
  .cta-band{padding:0 0 120px; position:relative; z-index:1;}
  .cta-card{max-width:940px; margin:0 auto; text-align:center; background:linear-gradient(165deg, var(--surface), var(--bg-soft)); border:1px solid var(--border); border-radius:28px; padding:66px 40px; position:relative; overflow:hidden;}
  .cta-card::before{content:""; position:absolute; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, var(--glow-c1), transparent 68%); top:-220px; left:50%; transform:translateX(-50%);}
  .cta-card::after{content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, var(--glow-c2), transparent 68%); bottom:-230px; right:-100px;}
  .cta-card > *{position:relative; z-index:1;}
  .cta-card h2{font-size:clamp(29px,4vw,44px); margin-top:14px;}
  .cta-card p{margin:16px auto 0; max-width:48ch; color:var(--text-muted); font-size:15.5px;}
  .cta-form{display:flex; justify-content:center; gap:10px; margin-top:32px; flex-wrap:wrap;}
  .cta-form input{background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; padding:13px 20px; font-size:14.5px; color:var(--text); width:290px; max-width:70vw; transition:border-color .25s ease, box-shadow .25s ease;}
  .cta-form input:focus{outline:none; border-color:var(--c1); box-shadow:0 0 0 4px var(--ring);}
  .cta-form input::placeholder{color:var(--text-faint);}
  .cta-note{margin-top:18px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-faint); letter-spacing:.05em;}

  footer{padding:56px 0 40px; border-top:1px solid var(--border); position:relative; z-index:1;}
  .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:44px;}
  .foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .foot-brand .mark{width:26px; height:26px; display:flex; align-items:center; justify-content:center;}
  .foot-brand .mark svg{width:24px; height:24px;}
  .foot-brand span{font-family:'Space Grotesk', 'Inter', sans-serif; font-weight:600; font-size:17px; letter-spacing:-.03em;}
  .foot-col h6{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:16px; font-weight:500;}
  .foot-col a{display:block; text-decoration:none; color:var(--text-muted); font-size:14px; padding:5px 0; transition:color .22s ease;}
  .foot-col a:hover{color:var(--c1);}
  .foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:26px; border-top:1px solid var(--border); flex-wrap:wrap; font-size:12.5px; color:var(--text-faint);}

  /* =========================================================
     RESPONSIVE
     ========================================================= */
  /* ---- laptop / small desktop ---- */
  @media (max-width:1080px){
    .app-main{grid-template-columns:1fr 258px;}
    .card.c-a,.card.c-b,.card.c-c,.card.c-d{grid-column:span 3;}
    .bento-problem{grid-template-columns:1fr 1fr;}
    .tile-wide{grid-column:1 / -1;}
    .hero-grid{gap:36px;}
  }
  /* ---- tablet ---- */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:48px;}
    .hero{padding:128px 0 50px;}
    .live-ghost{display:none;}
    .app-body{grid-template-columns:1fr;}
    .app-side{border-right:0; border-bottom:1px solid var(--border);}
    .side-nav{flex-direction:row; overflow-x:auto;}
    .side-item{width:auto; white-space:nowrap;}
    .side-item .count{display:none;}
    .side-indicator{display:none;}
    .side-foot{display:none;}
    .app-main{grid-template-columns:1fr;}
    .app-content{border-right:0; border-bottom:1px solid var(--border);}
    .bento-problem{grid-template-columns:1fr;}
    .icp-row{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr; gap:32px;}
    nav.links{display:none;}
    .aura{display:none;}
    .hstep{width:min(78vw,320px);}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .an-tiles{grid-template-columns:1fr;}
    .qrow{grid-template-columns:22px 1fr;}
    .qside{flex-direction:row; align-items:center; grid-column:1 / -1; justify-content:space-between; margin-top:4px;}
    .cta-form input{width:100%;}
    .foot-grid{grid-template-columns:1fr;}
    .theme-toggle span:last-child{display:none;}
    .theme-toggle{padding:6px;}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
  }

  /* =========================================================
     SUB-PAGE LAYOUTS  (/product, /how-it-works, /features, /built-for)
     ========================================================= */
  .page-hero{position:relative; z-index:1; padding:150px 0 64px; text-align:left;}
  .page-hero .wrap{max-width:920px;}
  .page-title{font-size:clamp(34px,4.4vw,56px); line-height:1.07; letter-spacing:-.04em;
    font-weight:600; margin-top:16px; text-wrap:balance; max-width:18ch;}
  .page-sub{margin-top:20px; max-width:58ch; font-size:17px; color:var(--text-muted); line-height:1.65;}
  .page-hero .hero-cta{margin-top:32px;}

  .deep{padding:20px 0 110px; position:relative; z-index:1;}

  .split-list{display:flex; flex-direction:column; border-top:1px solid var(--border);}
  .split-row{display:grid; grid-template-columns:78px 1fr; gap:24px; padding:30px 0;
    border-bottom:1px solid var(--border); align-items:start; transition:background .3s ease;}
  .split-row:hover{background:var(--surface);}
  .split-n{font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.14em;
    color:var(--text-faint); padding-top:6px;}
  .split-row h3{font-size:20px; margin-bottom:9px; letter-spacing:-.025em;}
  .split-row p{font-size:15px; color:var(--text-muted); max-width:62ch; line-height:1.65;}

  .step-deep{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .step-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:30px; transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;}
  .step-card:hover{border-color:var(--c1); box-shadow:0 22px 56px -30px var(--glow-c1); transform:translateY(-4px);}
  .step-card-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
  .step-card-n{width:42px; height:42px; flex-shrink:0; border-radius:12px; background:var(--bg-soft);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--c1);
    transition:background .35s ease, color .35s ease, border-color .35s ease;}
  .step-card:hover .step-card-n{background:var(--text); color:var(--bg); border-color:var(--text);}
  .step-card h3{font-size:19px; letter-spacing:-.025em;}
  .step-card p{font-size:14.5px; color:var(--text-muted); line-height:1.65;}
  .step-note{margin-top:12px; padding-top:12px; border-top:1px dashed var(--border);
    font-size:13px; color:var(--text-faint);}

  @media (max-width:900px){
    .page-hero{padding:120px 0 44px;}
    .step-deep{grid-template-columns:1fr;}
    .split-row{grid-template-columns:52px 1fr; gap:16px; padding:24px 0;}
  }

  /* =========================================================
     CROSS-DOCUMENT PAGE TRANSITION
     Starts opaque so a navigation never flashes the raw page before
     JS runs; revealPage() fades it out once the document is ready.
     ========================================================= */
  .page-fade{position:fixed; inset:0; z-index:9997; background:var(--bg);
    opacity:1; visibility:visible; pointer-events:none;
    animation:pageFadeAuto 2.4s ease forwards;}
  /* main.js sets .js-on immediately and takes over the reveal. If the
     script never runs, the CSS animation above uncovers the page anyway. */
  .js-on .page-fade{animation:none;}
  @keyframes pageFadeAuto{0%,55%{opacity:1;} 100%{opacity:0; visibility:hidden;}}