:root{
    --blue:#1F4EDE; --blue-bright:#457DFD; --blue-deep:#0D37E0;
    --hero:#33458A; --ivory:#FBF6EA; --cream:#FAF7F1; --ink:#14130E; --muted:#6a6256;
    --gold:#D9952E; --gold-bright:#F2C04A;
    --l0:#ECECF1; --l1:#D6E2FB; --l2:#A8C0F8; --l3:#2A67FD; --l4:#1F4EDE;
    --maxw:1120px; --nav-h:66px;
    --sans:system-ui,-apple-system,'Segoe UI',sans-serif;
    --display:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.5}
  /* custom scrollbar — Chromium/WebKit: thumb-only on a transparent track.
     NOTE: do NOT set scrollbar-width/scrollbar-color globally — Chrome/Edge 121+
     then switch to the standard model and ignore ::-webkit-scrollbar entirely
     (that path drew the opaque track + arrow buttons). Firefox is scoped below. */
  /* --sb-bg / --sb-thumb are swapped per-section by JS so the gutter blends
     into the hero (blue), body (cream) and footer (dark) — see main.js */
  ::-webkit-scrollbar{width:11px;height:11px;background:var(--sb-bg,transparent)}
  ::-webkit-scrollbar-track{background:transparent;border:0;box-shadow:none}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  ::-webkit-scrollbar-corner{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--sb-thumb,rgba(91,107,179,.55));border:3px solid transparent;border-radius:999px;background-clip:content-box}
  /* Firefox only (no ::-webkit-scrollbar support there) */
  @supports (-moz-appearance:none){
    html{scrollbar-width:thin;scrollbar-color:var(--sb-thumb,rgba(91,107,179,.6)) var(--sb-bg,transparent)}
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--display);letter-spacing:-0.02em;line-height:1.04;font-weight:800}

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,0,1),transform .7s cubic-bezier(.2,.7,0,1)}
  .reveal.in{opacity:1;transform:none}

  /* ===== NAV ===== */
  .nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
  .nav::before{content:'';position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(180deg,rgba(14,22,56,.32),rgba(14,22,56,0));pointer-events:none;z-index:-1;transition:opacity .3s}
  .nav.solid::before{opacity:0}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);padding:0 28px}
  .vmark{display:inline-flex;align-items:center;gap:10px}
  .vmark .vlogo{width:32px;height:32px;display:block;border-radius:8px;box-shadow:0 4px 12px rgba(8,12,30,.28)}
  .vmark span{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.01em;transition:color .3s}
  .nav-links{display:flex;align-items:center;gap:30px}
  .nav-links a{font-size:14px;font-weight:600;transition:color .3s}
  .nav-cta{font-size:13.5px;font-weight:700;color:#fff;background:#2A67FD;padding:10px 17px;border-radius:10px;box-shadow:0 4px 14px rgba(8,12,30,.30),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s,background .2s,box-shadow .2s}
  .nav-cta:hover{transform:translateY(-1px);background:#1F4EDE;box-shadow:0 6px 18px rgba(8,12,30,.34)}
  /* over the blue hero */
  .nav .vmark span{color:#FCF7EA}
  .nav .nav-links a:not(.nav-cta){color:#C7D1EC}
  .nav .nav-links a:not(.nav-cta):hover{color:#fff}
  /* solid after scroll */
  .nav.solid{background:rgba(250,247,241,.86);backdrop-filter:blur(12px);border-color:rgba(20,19,14,.07);box-shadow:0 4px 20px rgba(20,19,14,.05)}
  .nav.solid .vmark span{color:var(--ink)}
  .nav.solid .nav-links a:not(.nav-cta){color:var(--muted)}
  .nav.solid .nav-links a:not(.nav-cta):hover{color:var(--ink)}
  .nav.solid .nav-cta{color:#fff;box-shadow:0 2px 8px rgba(20,19,14,.16)}
  .nav.solid .nav-cta:hover{background:#1F4EDE}

  /* ===== HERO (Variant 2) ===== */
  .hero{position:relative;background:radial-gradient(620px 420px at 80% 38%, rgba(150,180,255,.30), rgba(150,180,255,0) 58%), var(--hero);overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;min-height:640px;padding:108px 0 64px}
  .hero-heat{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,1fr);gap:6px;padding:calc(var(--nav-h) + 4px) 40px;
    -webkit-mask-image:radial-gradient(120% 115% at 80% 46%,#000 12%,transparent 64%);mask-image:radial-gradient(120% 115% at 80% 46%,#000 12%,transparent 64%);z-index:0}
  .hero-heat i{aspect-ratio:1;border-radius:3px}
  .card{position:relative;z-index:3;background:var(--ivory);border-radius:20px;padding:34px 34px 30px;max-width:480px;
    box-shadow:0 26px 60px rgba(8,14,38,.30);border:1px solid rgba(255,255,255,.55)}
  .hero h1{font-size:clamp(34px,4.4vw,52px);margin:14px 0 14px}
  .hero .lead{font-size:17px;color:var(--muted);max-width:38ch;margin-bottom:24px}
  .badges{display:flex;gap:12px;flex-wrap:wrap}
  .badge{display:inline-flex;align-items:center;gap:9px;background:#101015;color:#fff;padding:11px 17px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.2);transition:transform .15s}
  .badge:hover{transform:translateY(-2px)}
  .badge svg{width:19px;height:19px;fill:#fff}
  .badge small{display:block;font-size:9px;font-weight:600;opacity:.72;line-height:1.1}
  .badge .bt{font-size:14.5px;font-weight:800;line-height:1.1}
  .trust{margin-top:18px;font-size:12.5px;font-weight:600;color:#9a9183}
  .trust b{color:#1c8a4a}

  /* device stage */
  .stage{position:relative;height:560px;display:flex;align-items:center;justify-content:center;perspective:1400px;z-index:2;overflow:visible}
  .floor{position:absolute;bottom:96px;left:50%;width:200px;height:26px;transform:translateX(-50%);background:rgba(8,12,30,.34);filter:blur(16px);z-index:0;transition:width .65s cubic-bezier(.4,0,.2,1)}
  .dgroup{position:relative;width:0;height:0;transform-style:preserve-3d;transition:transform .14s ease-out;transform:rotateY(-20deg) rotateX(4deg) scale(1.25)}
  .unit{position:absolute;top:0;left:0;transform:translate(-50%,-50%);transform-style:preserve-3d;transition:width .65s cubic-bezier(.4,0,.2,1),height .65s cubic-bezier(.4,0,.2,1)}
  .unit.as-phone{width:188px;height:395px}   /* vp ~0.451 — matches the phone captures */
  .unit.as-tablet{width:380px;height:305px}  /* vp ~1.267 — matches the tablet captures */
  .depth{position:absolute;inset:0;transform-style:preserve-3d}
  .zlayer{position:absolute;inset:0;background:linear-gradient(90deg,#0d0d12 0%,#1b1b22 58%,#45454f 100%);transition:border-radius .65s cubic-bezier(.4,0,.2,1)}
  .as-phone .zlayer{border-radius:42px}.as-tablet .zlayer{border-radius:24px}
  .dbody{position:absolute;inset:0;background:linear-gradient(135deg,#1c1c23,#0a0a0e);z-index:5;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08),inset -3px 0 6px rgba(0,0,0,.4);transition:border-radius .65s cubic-bezier(.4,0,.2,1),padding .65s cubic-bezier(.4,0,.2,1)}
  .as-phone .dbody{border-radius:42px;padding:9px}.as-tablet .dbody{border-radius:24px;padding:11px}
  .dbody::before{content:'';position:absolute;top:6px;left:14px;right:14px;height:40%;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0));z-index:9;pointer-events:none}
  .vp{width:100%;height:100%;overflow:hidden;position:relative;background:#FBFAF7;transition:border-radius .65s cubic-bezier(.4,0,.2,1)}
  .as-phone .vp{border-radius:34px}.as-tablet .vp{border-radius:14px}
  .scr{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;background:#FBFAF7;color:var(--ink);display:flex;flex-direction:column}
  .scr.active{opacity:1}
  /* notch/cam hidden: the real captures have no status bar, so an overlay pill
     would sit on top of app content. The rounded body still reads as a device. */
  .notch,.cam{display:none}
  /* app screen bits */
  .stop{display:flex;align-items:center;justify-content:space-between;padding:15px 15px 6px}
  .stop .h{font-size:11px;font-weight:800}.stop .t{font-size:9px;font-weight:700;color:#9C9CA8}
  .sdot{width:16px;height:16px;border-radius:6px;background:linear-gradient(135deg,var(--blue-bright),var(--blue-deep))}
  .sbig{font-size:58px;font-weight:800;letter-spacing:-.05em;line-height:.86;padding:6px 15px 0}
  .sbig small{font-size:18px;font-weight:700;color:#9C9CA8}
  .ssub{font-size:10px;font-weight:600;color:#9C9CA8;padding:3px 15px 11px}
  .shm{display:flex;gap:4px;padding:0 15px 12px;flex-wrap:wrap}
  .shm i{width:15px;height:15px;border-radius:4px}.shm.sm i{width:13px;height:13px}
  .srow{display:flex;align-items:center;gap:9px;padding:6px 15px}
  .scb{width:15px;height:15px;border-radius:5px;border:2px solid #C9C9D2;flex:none}
  .scb.on{border-color:var(--blue);background:var(--blue);position:relative}
  .scb.on::after{content:'';position:absolute;top:2px;left:4px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
  .stask{font-size:10.5px;font-weight:600}.stask.done{color:#9C9CA8;text-decoration:line-through}
  .e0{background:#ECECF1}.e1{background:#D6E2FB}.e2{background:#A8C0F8}.e3{background:#2A67FD}.e4{background:#1F4EDE}
  .tlbl{font-size:10px;font-weight:800;padding:13px 15px 2px}
  .trow{display:flex;height:100%}
  .tleft{width:38%;padding:18px 0 0 20px;display:flex;flex-direction:column;gap:4px}
  .tleft .big{font-size:48px;font-weight:800;letter-spacing:-.05em;line-height:.9}
  .tleft .lab{font-size:9px;font-weight:600;color:#9C9CA8}
  .tright{flex:1;padding:20px 20px 0 16px}

  /* ===== SECTIONS ===== */
  section{padding:96px 0}
  .sec-label{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
  .feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .feat.rev .feat-copy{order:2}
  .feat h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px}
  .feat p{font-size:16.5px;color:var(--muted);max-width:44ch}
  .feat-visual{position:relative}
  .panel{background:#fff;border:1px solid #ECE9E2;border-radius:20px;padding:26px;box-shadow:0 20px 50px rgba(20,19,14,.07)}

  /* heatmap feature — GitHub-style: columns=weeks, rows=days */
  .bighm{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:5px}
  .bighm i{aspect-ratio:1;border-radius:3px;min-width:0}
  .hm-legend{display:flex;align-items:center;gap:7px;justify-content:flex-end;margin-top:14px;font-size:11px;color:#9a9183;font-weight:600}
  .hm-legend i{width:12px;height:12px;border-radius:3px}

  /* streak section (blue) */
  .blue-sec{background:radial-gradient(640px 380px at 18% 30%, rgba(150,180,255,.22), rgba(150,180,255,0) 58%), var(--hero);color:#FCF7EA}
  .blue-sec .sec-label{color:#C7D1EC}
  .blue-sec p{color:#C7D1EC}
  /* momentum: carded icon list (Option 13) */
  .mcard{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:4px 26px;box-shadow:0 20px 48px rgba(8,14,38,.38),inset 0 1px 0 rgba(255,255,255,.14);font-family:var(--display)}
  .ic{width:22px;height:22px;display:block}
  .wrow{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .wrow:last-child{border-bottom:0}
  .wchip{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#FCF7EA;flex:none}
  .wlab{display:flex;flex-direction:column;gap:3px;flex:1}
  .wlab b{font-size:15px;font-weight:700;color:#FCF7EA}
  .wval{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .wnum{display:flex;align-items:baseline;font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#FCF7EA}
  .wnum .u{font-size:18px;font-weight:600;color:#C7D1EC;margin-left:3px}
  .wcap{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(199,209,236,.72)}
  .wrow.g .wchip{background:rgba(242,192,74,.16);color:var(--gold-bright)}
  .wrow.g .wnum{color:var(--gold-bright)}

  /* widgets section */
  .wfloat{position:relative;width:100%;max-width:540px;margin-left:auto;aspect-ratio:13/11}
  .wshot{display:block;position:absolute;height:auto;filter:drop-shadow(0 16px 38px rgba(20,30,70,.15))}
  .fl-todo{width:53%;top:11%;left:0;transform:rotate(-2deg);z-index:3}
  .fl-next{width:52%;top:0;right:0;transform:rotate(2.5deg);z-index:2}
  .fl-heat{width:52%;top:52%;right:2%;transform:rotate(2.5deg);z-index:1;filter:drop-shadow(0 12px 30px rgba(20,30,70,.10))}
  .widget{background:#fff;border:1px solid #ECE9E2;border-radius:18px;padding:16px;box-shadow:0 12px 30px rgba(20,19,14,.06)}
  .wtitle{font-size:10px;font-weight:800;letter-spacing:.06em;color:#9a9183;text-transform:uppercase;margin-bottom:10px}
  .wbig{font-size:34px;font-weight:800;letter-spacing:-.04em}
  .wbig.gold{color:var(--gold)}
  .wrow{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-weight:600}
  .wcb{width:13px;height:13px;border-radius:4px;border:1.8px solid #C9C9D2;flex:none}
  .wcb.on{background:var(--blue);border-color:var(--blue)}
  .whm{display:flex;gap:3px;margin-top:4px}.whm i{width:11px;height:11px;border-radius:2px}
  .notif{grid-column:1/3;background:#101015;border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:14px;color:#fff}
  .notif .ic{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue-bright),var(--blue-deep));flex:none}
  .notif .nt{flex:1}.notif .nt b{font-size:13px}.notif .nt span{display:block;font-size:11px;color:#aaa}
  .notif .nbtn{font-size:11px;font-weight:700;padding:7px 12px;border-radius:8px;background:#23232b;color:#fff}
  .notif .nbtn.p{background:var(--blue)}

  /* closing CTA */
  .cta{background:linear-gradient(160deg,#2B53D6,#16245A);color:#FCF7EA;text-align:center;border-radius:0}
  .cta h2{font-size:clamp(30px,4vw,46px);margin-bottom:16px}
  .cta p{color:#C7D1EC;font-size:16px;margin-bottom:28px}
  .cta .badges{justify-content:center}
  .cta .badge{background:#FCF7EA;color:#101015}.cta .badge svg{fill:#101015}.cta .badge small,.cta .badge .bt{color:#101015}

  /* footer */
  footer{background:#0c0c12;color:#9A9AA5;padding:56px 0 40px}
  .fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px}
  .fcol h4{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ECECEE;margin-bottom:14px}
  .fcol a{display:block;font-size:13.5px;color:#9A9AA5;margin-bottom:9px}
  .fcol a:hover{color:#ECECEE}
  .fbrand{max-width:260px}
  .fbrand .vmark{display:inline-flex;margin-bottom:0}
  .fbrand .vmark span{color:#ECECEE}
  .fbrand p{font-size:13px;margin-top:14px;line-height:1.6}
  .fbot{border-top:1px solid #1f1f28;padding-top:22px;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

  /* responsive */
  @media(max-width:860px){
    .nav-links a:not(.nav-cta){display:none}
    .hero-grid{grid-template-columns:1fr;gap:10px;min-height:0;padding:96px 0 36px}
    .stage{height:440px;order:2}
    .dgroup{transform:rotateY(-20deg) rotateX(4deg) scale(1)}
    .floor{bottom:60px}
    .hero-heat{-webkit-mask-image:radial-gradient(95% 80% at 50% 70%,#000 12%,transparent 66%);mask-image:radial-gradient(95% 80% at 50% 70%,#000 12%,transparent 66%)}
    .card{max-width:none}
    .feat{grid-template-columns:1fr;gap:32px}
    .feat.rev .feat-copy{order:0}
    .wfloat{margin:0 auto}
  }

@media (max-width:560px){
  .wfloat{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;max-width:360px}
  .wshot{position:static;width:100%;transform:none}
}

@media (max-width:480px){
  .bighm{gap:3px}
}

/* ---- accessibility ---- */
:focus-visible{outline:2px solid #457DFD;outline-offset:3px;border-radius:6px}
.nav.solid :focus-visible{outline-color:#1F4EDE}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .dgroup{transition:none !important}
  .unit,.zlayer,.dbody,.vp{transition:none !important}
}
.shot{flex:1;min-height:0;width:100%;object-fit:cover;display:block}