:root{
  --bg:#0a0c10;--panel:#12151c;--panel2:#191d26;--line:#262b36;--text:#f1f3f7;--muted:#9aa3b2;--accent:#c8f24b;--ink:#10140a;
  --sans:"Inter","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.sr,.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(10,12,16,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.2px;text-decoration:none}
.mark{width:18px;height:18px;border-radius:5px;background:var(--accent);box-shadow:inset -6px -6px 0 rgba(10,12,16,.75)}
.nav nav{display:flex;gap:28px}
.nav nav a{color:var(--muted);text-decoration:none;font-size:15px}
.nav nav a:hover{color:var(--text)}
.pill{display:inline-block;background:var(--text);color:var(--bg);border-radius:9px;padding:9px 16px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.pill:hover{background:var(--accent);color:var(--ink)}
.big-pill{padding:13px 22px;font-size:16px}

/* hero */
.hero{position:relative;padding:92px 0 56px;text-align:center}
.hero::before{content:"";position:absolute;inset:-120px 0 auto;height:620px;z-index:-1;pointer-events:none;
  background:radial-gradient(560px 300px at 50% 18%,rgba(200,242,75,.14),transparent 70%),
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 22%,#000 10%,transparent 76%);mask-image:radial-gradient(ellipse 72% 72% at 50% 22%,#000 10%,transparent 76%);opacity:.75}
.tag{display:inline-flex;align-items:center;gap:9px;margin:0 0 24px;padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--muted);font-size:14px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
h1{margin:0;font-size:clamp(40px,6.6vw,76px);line-height:1.04;font-weight:700;letter-spacing:-.035em}
h1 span{color:var(--accent)}
.sub{max-width:620px;margin:22px auto 38px;color:var(--muted);font-size:clamp(17px,2vw,20px);line-height:1.5}

/* composer */
.composer{max-width:760px;margin:0 auto;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 28px 80px rgba(0,0,0,.5)}
.composer:focus-within{border-color:#4a5240}
.composer textarea{display:block;width:100%;background:transparent;border:0;color:var(--text);font:inherit;font-size:18px;line-height:1.5;padding:14px 14px 8px;resize:vertical;min-height:92px;outline:0}
.composer textarea::placeholder{color:#697282}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 12px}
.chips button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:6px 13px;font:inherit;font-size:14px;cursor:pointer}
.chips button:hover{color:var(--text);border-color:#454c5a}
.who{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;border-top:1px solid var(--line)}
.who.closed{display:none}
.who label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px}
.who input,.demo input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);font:inherit;font-size:16px;padding:10px 12px;outline:0}
.who input:focus,.demo input:focus{border-color:var(--accent)}
.send{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 8px 8px 14px;border-top:1px solid var(--line)}
.send p{margin:0;color:var(--muted);font-size:14px}
.go{flex:none;background:var(--accent);color:var(--ink);border:0;border-radius:10px;padding:11px 18px;font:inherit;font-size:16px;font-weight:650;cursor:pointer}
.go:hover{filter:brightness(1.08)}
.fine{margin:16px auto 0;max-width:640px;color:#7c8594;font-size:14px;line-height:1.5}
.fine.left{margin-left:0}

/* screenshot stage */
.stage{padding:28px 0 40px}
.window{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:0 40px 110px rgba(0,0,0,.6)}
.chrome{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}
.chrome i{width:10px;height:10px;border-radius:50%;background:#333946}
.chrome span{margin-left:10px}
.window img{width:100%;aspect-ratio:16/9.6;object-fit:cover;object-position:top}

/* sections */
section[id]{padding:96px 0}
.eyebrow{margin:0 0 12px;color:var(--accent);font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
h2{margin:0 0 40px;font-size:clamp(30px,4.2vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.025em}
h3{margin:0 0 6px;font-size:19px;font-weight:650;letter-spacing:-.01em}

/* bento */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cell{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;min-width:0}
.cell p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
.wide{grid-column:1/-1}
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;align-items:center}
.demo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px}
.demo label{color:var(--muted);font-size:13px}
.demo input{display:block;margin-top:6px;background:var(--panel);font-family:var(--mono);font-size:15px}
.total{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.total b{color:var(--accent);font:600 30px/1.1 var(--mono)}
.rows{list-style:none;margin:20px 0 0;padding:0;font-size:14px}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.rows em{font-style:normal;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px}
.g{background:rgba(200,242,75,.14);color:var(--accent)}.b{background:rgba(120,170,255,.14);color:#9cc0ff}.y{background:rgba(255,190,90,.14);color:#ffc871}
.sheet{margin-top:20px;padding:14px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.sheet i{display:flex;justify-content:space-between;height:26px;border-bottom:1px solid var(--line);position:relative}
.sheet i:last-child{border:0}
.sheet i::before,.sheet i::after{content:"";position:absolute;top:8px;height:7px;border-radius:4px;background:#333946}
.sheet i::before{left:0;width:46%}.sheet i::after{right:0;width:14%;background:#5a6270}
.sheet i:nth-child(2)::before{width:34%}.sheet i:nth-child(3)::before{width:54%}.sheet i:nth-child(4)::before{width:28%}
.row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.link{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.link:hover{text-decoration:underline}

/* quotebook */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.stack{position:relative;padding:0 0 44px}
.desk{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top left;border:1px solid var(--line);border-radius:12px}
.mob{position:absolute;right:-14px;bottom:0;width:27%;aspect-ratio:9/17;object-fit:cover;object-position:top;border:5px solid #1b1f28;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.split h2{margin-bottom:14px}
.big{margin:0 0 20px;color:var(--muted);font-size:18px;line-height:1.5}
.ticks{list-style:none;margin:0 0 22px;padding:0;font-size:16px}
.ticks li{padding:5px 0 5px 26px;position:relative}
.ticks li::before{content:"";position:absolute;left:3px;top:13px;width:10px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.cost{margin:0 0 20px;color:var(--muted);font-size:16px}
.cost b{color:var(--text);font-size:30px;letter-spacing:-.02em;margin-right:4px}

/* steps */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.steps li{counter-increment:s;padding:26px;background:var(--panel);border-left:1px solid var(--line)}
.steps li:first-child{border-left:0}
.steps li::before{content:"0" counter(s);display:block;margin-bottom:26px;color:var(--accent);font:500 14px/1 var(--mono)}
.steps b{display:block;margin-bottom:6px;font-size:19px;font-weight:650}
.steps span{color:var(--muted);font-size:16px;line-height:1.5}

/* policies + footer */
.doc{padding:72px 0 96px}
.thin{max-width:720px}
.doc h1{font-size:clamp(32px,5vw,48px);margin-bottom:12px}
.doc h2{margin:36px 0 8px;font-size:21px;letter-spacing:-.01em}
.doc p{margin:0;color:var(--muted)}
.doc a{color:var(--accent)}
.done{padding:120px 0}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:14px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{text-decoration:none;margin-left:22px}
.foot a:first-child{margin-left:0}
.foot a:hover{color:var(--text)}

@media (max-width:860px){
  .nav nav{display:none}
  .split,.calc{grid-template-columns:minmax(0,1fr);gap:28px}
  .mob{right:0}
  section[id]{padding:68px 0}
  .hero{padding:60px 0 40px}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .bento,.steps,.who{grid-template-columns:minmax(0,1fr)}
  .steps li{border-left:0;border-top:1px solid var(--line)}
  .steps li:first-child{border-top:0}
  .send{flex-direction:column;align-items:stretch;text-align:center;padding-left:8px}
  .go{width:100%}
  .chrome span{font-size:12px}
  .foot a{display:block;margin:6px 0 0}
}
@media (max-width:420px){.demo{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}