:root {
    --bg:#05070b; --bg-2:#070a0f; --panel:#0b0f16; --panel-2:#0e131b; --ink:#eaeef5; --muted:#7d8798; --faint:#586274;
    --line:#161d29; --line-2:#212a38; --green:#2fe89a; --green-dim:#1e9c6c; --red:#ff5470; --amber:#f2c14e;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace; --maxw:1160px;
  }
  * { box-sizing:border-box; margin:0; }
  html { scroll-behavior:smooth; }
  body { background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  a { color:inherit; text-decoration:none; }
  h1,h2,h3 { margin:0; letter-spacing:-.03em; line-height:1.03; text-wrap:balance; font-weight:700; }
  .mono { font-family:var(--mono); }
  .tnum { font-variant-numeric:tabular-nums; }
  .g { color:var(--green); } .r { color:var(--red); }
  .eyebrow { font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green);
    display:inline-flex; align-items:center; gap:9px; }
  .eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px 1px var(--green); }

  .btn { display:inline-flex; align-items:center; gap:8px; font-weight:620; font-size:.95rem; padding:12px 20px; border-radius:10px;
    border:1px solid transparent; cursor:pointer; transition:transform .08s, background .16s, border-color .16s, box-shadow .16s; }
  .btn:active { transform:translateY(1px); }
  .btn-primary { background:var(--green); color:#04120c; box-shadow:0 0 0 1px rgba(47,232,154,.3), 0 10px 30px -10px rgba(47,232,154,.5); font-weight:680; }
  .btn-primary:hover { box-shadow:0 0 0 1px rgba(47,232,154,.5), 0 12px 40px -8px rgba(47,232,154,.65); }
  .btn-line { background:rgba(255,255,255,.02); border-color:var(--line-2); color:var(--ink); }
  .btn-line:hover { border-color:var(--muted); }

  /* NAV */
  header.nav { position:sticky; top:0; z-index:60; backdrop-filter:blur(12px); background:color-mix(in oklab,var(--bg) 72%,transparent);
    border-bottom:1px solid transparent; transition:border-color .2s; }
  header.nav.scrolled { border-bottom-color:var(--line); }
  .nav-in { display:flex; align-items:center; justify-content:space-between; height:64px; }
  .brand { display:inline-flex; align-items:center; font-weight:660; font-size:1.06rem; letter-spacing:-.025em; }
  .brand .tm { color:var(--muted); font-weight:460; }
  .nav-r { display:flex; align-items:center; gap:8px; }
  .nav-r .lnk { padding:8px 12px; font-size:.9rem; color:var(--muted); border-radius:8px; }
  .nav-r .lnk:hover { color:var(--ink); }

  /* HERO */
  .stage { position:relative; min-height:740px; overflow:hidden; }
  .grid-bg { position:absolute; inset:0; z-index:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:60px 60px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent); mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent); opacity:.55; }
  .chart { position:absolute; left:0; right:0; bottom:0; top:180px; z-index:0; }
  .chart svg { width:100%; height:100%; }
  .halo { position:absolute; left:-6%; right:-6%; bottom:-24%; height:70%; z-index:0; pointer-events:none;
    background:radial-gradient(50% 62% at 62% 100%, rgba(47,232,154,.22), transparent 68%); filter:blur(6px); }
  .hero-copy { position:relative; z-index:3; padding:74px 0 0; max-width:640px; }
  .hero-copy h1 { font-size:clamp(2.7rem,6vw,4.6rem); font-weight:720; margin:20px 0 0; }
  .hero-copy .lead { color:var(--muted); font-size:1.18rem; margin-top:22px; max-width:42ch; line-height:1.5; }
  .hero-copy .cta { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
  .hero-copy .note { margin-top:18px; font-family:var(--mono); font-size:.76rem; color:var(--faint); letter-spacing:.03em; }
  .chips { position:absolute; right:28px; top:150px; z-index:3; display:grid; gap:11px; width:236px; }
  .chip { background:color-mix(in oklab,var(--panel) 78%,transparent); border:1px solid var(--line-2); border-radius:13px; padding:13px 15px;
    backdrop-filter:blur(8px); box-shadow:0 20px 50px -24px rgba(0,0,0,.8); }
  .chip .l { font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
  .chip .v { font-family:var(--mono); font-size:1.4rem; font-weight:600; margin-top:4px; }
  .tape { position:absolute; bottom:0; left:0; right:0; z-index:3; border-top:1px solid var(--line);
    background:color-mix(in oklab,var(--panel) 64%,transparent); overflow:hidden; }
  .tape-track { display:flex; gap:0; width:max-content; animation:marq 42s linear infinite; }
  .tape-track .tk { font-family:var(--mono); font-size:.76rem; padding:11px 24px; border-right:1px solid var(--line); color:var(--muted); white-space:nowrap; }
  @keyframes marq { to { transform:translateX(-50%); } }

  /* STEPS */
  .steps { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
  .steps-in { display:grid; grid-template-columns:repeat(3,1fr); }
  .step { padding:30px 28px; border-right:1px solid var(--line); }
  .step:last-child { border-right:0; }
  .step .n { font-family:var(--mono); font-size:.72rem; color:var(--green); letter-spacing:.1em; }
  .step h3 { font-size:1.08rem; font-weight:640; margin-top:8px; }
  .step p { color:var(--muted); font-size:.94rem; margin-top:4px; }

  /* SECTION */
  section { padding:96px 0; }
  .sec-hd { max-width:640px; margin-bottom:44px; }
  .sec-hd h2 { font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:720; margin-top:14px; }
  .sec-hd p { color:var(--muted); margin-top:16px; font-size:1.08rem; }

  /* DESK (product shot) */
  .desk-frame { position:relative; border:1px solid var(--line-2); border-radius:16px; overflow:hidden; background:var(--panel);
    box-shadow:0 50px 120px -40px rgba(0,0,0,.9); }
  .desk-frame::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 120px -40px rgba(47,232,154,.18); }
  .desk-bar { height:38px; display:flex; align-items:center; gap:7px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--panel-2); }
  .desk-bar i { width:11px; height:11px; border-radius:50%; background:var(--line-2); }
  .desk-bar .u { margin:0 auto; font-family:var(--mono); font-size:.72rem; color:var(--faint); }
  .desk-frame img { display:block; width:100%; height:auto; }
  .desk-glow { position:absolute; left:10%; right:10%; top:-40px; height:120px; background:radial-gradient(50% 100% at 50% 0,rgba(47,232,154,.18),transparent 70%); filter:blur(8px); z-index:-1; }

  /* READOUTS grid */
  .reads { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .read { background:var(--panel); padding:26px; transition:background .2s; }
  .read:hover { background:var(--panel-2); }
  .read .ic { color:var(--green); width:26px; height:26px; }
  .read .ic svg { width:26px; height:26px; stroke-width:1.7; }
  .read h3 { font-size:1.08rem; font-weight:640; margin:14px 0 6px; letter-spacing:-.01em; }
  .read p { color:var(--muted); font-size:.95rem; line-height:1.5; }

  /* PRICING */
  .plans { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto; }
  .plan { background:var(--panel); border:1px solid var(--line-2); border-radius:18px; padding:30px; display:flex; flex-direction:column; }
  .plan.pro { border-color:color-mix(in oklab,var(--green) 55%,var(--line-2)); box-shadow:0 0 0 1px rgba(47,232,154,.35), 0 40px 90px -40px rgba(47,232,154,.35); position:relative; }
  .plan .ph { display:flex; justify-content:space-between; align-items:center; }
  .plan .pn { font-weight:660; } .plan.pro .pn { color:var(--green); }
  .plan .flag { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#04120c; background:var(--green); padding:4px 9px; border-radius:999px; }
  .plan .price { display:flex; align-items:baseline; gap:7px; margin:16px 0 2px; font-family:var(--mono); }
  .plan .price b { font-size:2.6rem; font-weight:680; letter-spacing:-.03em; }
  .plan .price span { color:var(--muted); font-size:.9rem; }
  .plan .psub { color:var(--faint); font-size:.85rem; font-family:var(--mono); min-height:18px; }
  .plan ul { list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:12px; }
  .plan li { display:flex; gap:10px; font-size:.95rem; color:var(--ink); }
  .plan li svg { width:17px; height:17px; color:var(--green); flex:none; margin-top:3px; }
  .plan .btn { justify-content:center; margin-top:auto; }
  .fine { text-align:center; color:var(--faint); font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; margin-top:24px; }

  footer { border-top:1px solid var(--line); }
  .foot-in { display:flex; justify-content:space-between; align-items:center; padding:30px 0; gap:14px; flex-wrap:wrap;
    color:var(--faint); font-family:var(--mono); font-size:.76rem; letter-spacing:.03em; }
  .foot-in .brand { color:var(--ink); }

  @media (max-width:860px){ .chips{display:none;} .steps-in{grid-template-columns:1fr;} .step{border-right:0;border-bottom:1px solid var(--line);}
    .reads{grid-template-columns:1fr;} .plans{grid-template-columns:1fr;} .hide-sm{display:none;} }

  @keyframes draw { to { stroke-dashoffset:0; } }
  @keyframes fade { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
  .chart .ln { stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 2.2s cubic-bezier(.4,.1,.2,1) .2s forwards; }
  .fadein { animation:fade .8s ease both; } .d2{animation-delay:.1s;} .d3{animation-delay:.2s;} .d4{animation-delay:.3s;}
  @media (prefers-reduced-motion:reduce){ .chart .ln{animation:none;stroke-dashoffset:0;} .tape-track{animation:none;} .fadein{animation:none;} }

/* externalized utility classes (CSP: no inline styles) */
.sm{font-size:.78rem}
.rel{position:relative}
.pt0{padding-top:0}
.sec-hd-c{text-align:center;margin-left:auto;margin-right:auto;max-width:600px}
.center{justify-content:center}