:root {
  --ink:#2B2C32; --ink-2:#36373E; --ink-3:#404148;
  --paper:#F5F5F5; --white:#FFFFFF;
  --dim:rgba(255,255,255,.74); --dimmer:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.22);
  --green:#34C77B; --red:#FF6B5E; --amber:#F5B83D;
}
* { margin:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font:16px/1.6 -apple-system,system-ui,"Segoe UI",sans-serif; background:var(--ink); color:var(--white);
       overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---- ambient background ---- */
.bg { position:fixed; inset:0; z-index:0; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.orb-1 { width:720px; height:720px; right:-260px; top:-300px; background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.14), transparent 70%); }
.orb-2 { width:560px; height:560px; left:-240px; top:48%; background:radial-gradient(circle at 55% 45%, rgba(255,255,255,.09), transparent 70%); }
.grain { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:30px 30px; }
.content { position:relative; z-index:1; }

/* ---- floating pill nav ---- */
.navbar { position:sticky; top:16px; z-index:50; }
.navbar .pill { display:flex; align-items:center; justify-content:space-between; gap:16px;
                background:rgba(54,55,62,.8); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
                border:1px solid var(--line); border-radius:999px; padding:10px 12px 10px 20px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.4px; color:var(--white); }
.mark { width:32px; height:32px; border-radius:8px; background:var(--white); display:grid; place-items:center; flex:none; }
.mark svg { transform:rotate(-8deg); }
.navlinks { display:flex; gap:4px; align-items:center; }
.navlink { padding:9px 16px; border-radius:999px; font-weight:600; font-size:14px; color:var(--dim); transition:color .2s, background .2s; }
.navlink:hover { color:var(--white); background:rgba(255,255,255,.07); }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:999px;
       font-weight:700; font-size:14.5px; transition:transform .2s ease, box-shadow .2s ease, opacity .2s; }
.btn:hover { transform:translateY(-1px); }
.btn-white { background:var(--white); color:var(--ink); box-shadow:0 8px 24px rgba(255,255,255,.10); }
.btn-ghost { border:1px solid var(--line-strong); color:var(--white); }
.btn-ghost:hover { background:rgba(255,255,255,.07); }

/* ---- hero ---- */
.hero { padding:110px 0 40px; }
.kicker { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:1.4px;
          text-transform:uppercase; color:var(--dimmer); margin-bottom:26px; }
.kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
h1.display { font-size:clamp(40px,7vw,72px); line-height:1.02; letter-spacing:-2.5px; font-weight:800; max-width:820px; }
h1.display .dim { color:var(--dimmer); }
.hero p.sub { margin:26px 0 36px; font-size:19px; color:var(--dim); max-width:560px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.cred { display:flex; gap:26px; flex-wrap:wrap; margin-top:42px; font-size:13.5px; color:var(--dimmer); }
.cred span::before { content:"✓"; color:var(--green); margin-right:8px; font-weight:700; }

/* ---- hero mockup: today queue ---- */
.stage { padding:56px 0 90px; }
.mock { background:var(--paper); color:#0A0A0A; border-radius:20px; padding:26px;
        box-shadow:0 40px 90px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.07); }
.mock-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.mock-head b { font-size:15px; letter-spacing:-.2px; }
.mock-head .tag { font-size:11px; font-weight:800; letter-spacing:1px; color:#9A9A9A; text-transform:uppercase; }
.live { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#1F9D55; }
.live::before { content:""; width:7px; height:7px; border-radius:50%; background:#1F9D55; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.qrow { display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff;
        border:1px solid #ECECEC; border-radius:13px; padding:14px 18px; margin-bottom:10px; }
.qrow .who b { font-size:14.5px; }
.qrow .who div { font-size:12.5px; color:#6E6E6E; margin-top:1px; }
.chip { font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:999px; }
.chip.red { background:#FEF0F0; color:#D63B3B; }
.chip.green { background:#EFFAF3; color:#1F9D55; }
.chip.amber { background:#FFF8E8; color:#C9920A; }
.mock-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:start; }
@media (max-width:820px){ .mock-grid { grid-template-columns:1fr; } }

/* chat mockup */
.chat { background:var(--white); border:1px solid #ECECEC; border-radius:16px; padding:18px; }
.chat .stamp { text-align:center; font-size:10.5px; font-weight:800; letter-spacing:1px; color:#9A9A9A; margin:6px 0 12px; text-transform:uppercase; }
.bubble { max-width:85%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.45; margin-bottom:9px;
          opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.bubble.sent { background:#141414; color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.bubble.recv { background:#F0F0F0; color:#0A0A0A; border-bottom-left-radius:5px; }
.chat.play .bubble { opacity:1; transform:none; }
.chat.play .bubble:nth-child(3){ transition-delay:.5s } .chat.play .bubble:nth-child(4){ transition-delay:1.15s }
.chat.play .bubble:nth-child(5){ transition-delay:1.8s }
.chat .note { font-size:11.5px; color:#9A9A9A; margin-top:8px; display:flex; align-items:center; gap:6px; }
.chat .note::before { content:"✓"; color:#1F9D55; font-weight:800; }

/* ---- sections ---- */
section.block { padding:88px 0; border-top:1px solid var(--line); }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--dimmer); margin-bottom:14px; }
h2.title { font-size:clamp(28px,4.4vw,44px); letter-spacing:-1.4px; line-height:1.1; max-width:640px; }
h2.title .dim { color:var(--dimmer); }
.lede { color:var(--dim); max-width:560px; margin-top:16px; font-size:17px; }

.built-for { display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.vert { padding:10px 18px; border:1px solid var(--line-strong); border-radius:999px; font-size:14px; font-weight:600; color:var(--dim); }

.probs { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:44px; }
.prob { background:var(--ink-2); border:1px solid var(--line); border-radius:16px; padding:26px; }
.prob h3 { font-size:17px; letter-spacing:-.3px; margin-bottom:8px; }
.prob p { font-size:14.5px; color:var(--dim); }
.prob .x { color:var(--red); font-weight:800; margin-right:8px; }

.sol { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:44px; }
.sol-card { background:var(--ink-2); border:1px solid var(--line); border-radius:16px; padding:26px;
            transition:transform .25s ease, border-color .25s ease; }
.sol-card:hover { transform:translateY(-4px); border-color:var(--line-strong); }
.sol-card .ico { width:40px; height:40px; border-radius:10px; background:var(--white); display:grid; place-items:center; margin-bottom:16px; }
.sol-card h3 { font-size:16.5px; margin-bottom:7px; letter-spacing:-.2px; }
.sol-card p { font-size:14px; color:var(--dim); }

.outcomes { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:44px; }
.out { border:1px solid var(--line); border-radius:16px; padding:28px; background:linear-gradient(180deg, var(--ink-2), transparent); }
.out .big { font-size:34px; font-weight:800; letter-spacing:-1.5px; margin-bottom:6px; }
.out .big.green { color:var(--green); }
.out h3 { font-size:15.5px; margin-bottom:6px; }
.out p { font-size:13.5px; color:var(--dim); }

/* steps */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:44px; }
.step { border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--ink-2); }
.step .num { font-size:12px; font-weight:800; letter-spacing:1.6px; color:var(--dimmer); margin-bottom:12px; }
.step h3 { font-size:16px; margin-bottom:6px; }
.step p { font-size:14px; color:var(--dim); }
.step p a { color:var(--white); }

/* final cta */
.final { padding:100px 0 110px; text-align:center; }
.final h2 { font-size:clamp(30px,5vw,52px); letter-spacing:-1.8px; line-height:1.05; }
.final p { color:var(--dim); margin:18px 0 34px; font-size:17px; }

footer { border-top:1px solid var(--line); padding:34px 0 56px; display:flex; gap:24px; flex-wrap:wrap; font-size:14px; color:var(--dimmer); }
footer a { color:var(--dimmer); transition:color .2s; }
footer a:hover { color:var(--white); }

/* ---- interior pages ---- */
.page-title { padding:96px 0 12px; }
.page-title h1 { font-size:clamp(34px,5.4vw,54px); letter-spacing:-1.8px; line-height:1.06; font-weight:800; max-width:760px; }
.page-title p { color:var(--dim); margin-top:18px; max-width:560px; font-size:17px; }
section.group { padding:56px 0 8px; }
section.group h2 { font-size:clamp(22px,3vw,28px); letter-spacing:-.7px; }

.price-card { display:inline-block; background:var(--paper); color:#0A0A0A; border-radius:22px; padding:48px 72px;
              text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.price-card h2 { font-size:clamp(22px,3vw,28px); letter-spacing:-.7px; }
.price { font-size:58px; font-weight:800; letter-spacing:-2.5px; margin:14px 0 2px; }
.price span { font-size:16px; font-weight:500; color:#6E6E6E; letter-spacing:0; }
.price-card p.sub { color:#6E6E6E; margin:6px 0 30px; font-size:15px; }
.btn-dark { background:#141414; color:#fff; }
.pricing { text-align:center; padding:64px 0 32px; }

.faq { padding:64px 0 96px; max-width:640px; }
.faq h2 { font-size:clamp(22px,3vw,28px); letter-spacing:-.7px; margin-bottom:24px; }
.qa { border-top:1px solid var(--line); padding:20px 0; }
.qa h3 { font-size:16px; margin-bottom:6px; }
.qa p { font-size:14.5px; color:var(--dim); }

/* legal pages */
.legal { max-width:680px; padding:72px 0 96px; }
.legal h1 { font-size:clamp(30px,4.5vw,40px); letter-spacing:-1.4px; margin-bottom:8px; }
.legal h2 { font-size:19px; letter-spacing:-.3px; margin:34px 0 8px; }
.legal p { color:var(--dim); font-size:15px; margin-bottom:12px; }
.legal a { color:var(--white); }

/* reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
.d1 { transition-delay:.1s } .d2 { transition-delay:.2s } .d3 { transition-delay:.3s } .d4 { transition-delay:.4s }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal, .bubble { opacity:1 !important; transform:none !important; transition:none !important; }
  .orb { transform:none !important; }
}
@media (max-width:640px) {
  /* Phones: keep every link visible — icon-only logo, tighter pill. */
  .navbar .pill { padding:8px 8px 8px 10px; gap:6px; }
  .logo { font-size:0; gap:0; }
  .navlinks { gap:0; }
  .navlink { padding:8px 7px; font-size:12.5px; }
  .navlinks .btn { padding:8px 12px; font-size:12.5px; }
  .hero { padding:70px 0 20px; }
  .page-title { padding:64px 0 8px; }
  .price-card { padding:36px 28px; width:100%; }
  .price { font-size:46px; }
}