:root{
  --ground:#0B0D0F; --panel:#14181C; --panel-2:#191E23; --line:#252C33;
  --ink:#F3F6F8; --muted:#A7B0BA; --dim:#6B7580;
  --teal:#19C3A6; --teal-hi:#2DE0C0; --amber:#F5B942; --amber-hi:#FFC96B;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:
    radial-gradient(120% 60% at 50% -10%, #12302B 0%, transparent 55%),
    var(--ground);
  color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-hi); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* nav */
.nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(12px);
  background:rgba(11,13,15,.72); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:20px; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; color:var(--ink)}
.brand:hover{text-decoration:none}
.mark{width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg,var(--teal-hi),#12A88E);
  display:flex; align-items:center; justify-content:center; color:#04120E;
  box-shadow:0 0 24px rgba(25,195,166,.4)}
.mark svg{width:20px;height:20px}
.nav .links{margin-left:auto; display:flex; gap:26px; font-size:15px; font-weight:600}
.nav .links a{color:var(--muted)} .nav .links a:hover{color:var(--ink); text-decoration:none}

/* hero */
.hero{text-align:center; padding:96px 0 60px}
.eyebrow{color:var(--teal-hi); font-size:14px; font-weight:800; letter-spacing:4px; text-transform:uppercase}
.hero h1{font-size:clamp(40px,7vw,76px); font-weight:900; letter-spacing:-2px; line-height:1.02; margin:20px 0 0; text-wrap:balance}
.hero h1 .am{color:var(--amber)}
.hero p.lede{color:var(--muted); font-size:clamp(18px,2.4vw,22px); max-width:36ch; margin:22px auto 0; text-wrap:balance}
.badge-soon{display:inline-block; margin-top:30px; padding:12px 24px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); font-weight:600; font-size:15px}
.badge-soon b{color:var(--ink)}

/* stamp row */
.stamprow{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:56px 0 10px}
.stampcard{width:150px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:#0E1417; box-shadow:0 24px 50px rgba(0,0,0,.5); transform:rotate(-3deg); transition:transform .3s}
.stampcard:nth-child(even){transform:rotate(3deg)}
.stampcard:hover{transform:rotate(0) translateY(-6px)}
.stampcard img{display:block; width:100%; height:180px; object-fit:contain; padding:14px}
.stampcard .v{padding:10px 14px 14px; text-align:center}
.stampcard .v b{color:var(--amber); font-weight:800; font-size:18px}
.stampcard .v span{display:block; color:var(--dim); font-size:12px}

/* sections */
section{padding:64px 0}
h2{font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-1px; text-align:center; margin:0 0 12px; text-wrap:balance}
.sub{color:var(--muted); text-align:center; max-width:52ch; margin:0 auto 44px}
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:30px}
.card .ic{width:48px; height:48px; border-radius:12px; background:rgba(25,195,166,.12);
  display:flex; align-items:center; justify-content:center; color:var(--teal-hi); margin-bottom:18px}
.card .ic svg{width:26px;height:26px}
.card h3{margin:0 0 8px; font-size:20px; font-weight:700}
.card p{margin:0; color:var(--muted); font-size:15px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px}
.step{text-align:center; padding:20px}
.step .n{width:56px; height:56px; margin:0 auto 16px; border-radius:50%; border:2px solid var(--teal);
  display:flex; align-items:center; justify-content:center; color:var(--teal-hi); font-weight:900; font-size:24px}
.step h3{margin:0 0 6px; font-size:19px}
.step p{margin:0; color:var(--muted); font-size:15px}

/* pro */
.pro{background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:48px; text-align:center; margin-top:20px}
.pro h2{margin-bottom:8px}
.pro .plans{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.plan{background:var(--panel-2); border:1px solid var(--line); border-radius:16px; padding:24px 32px; min-width:180px}
.plan.best{border-color:var(--teal)}
.plan .lbl{color:var(--muted); font-weight:700; font-size:14px}
.plan .price{color:var(--ink); font-size:34px; font-weight:900; margin-top:6px}
.plan .per{color:var(--dim); font-size:14px}
.plan .tag{display:inline-block; margin-top:10px; color:var(--teal-hi); font-size:12px; font-weight:800; letter-spacing:1px}
.trial{color:var(--muted); margin-top:24px; font-size:15px}

/* footer */
footer{border-top:1px solid var(--line); padding:44px 0; margin-top:40px}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px; align-items:center; color:var(--dim); font-size:14px}
footer .flinks{margin-left:auto; display:flex; gap:22px}
footer .flinks a{color:var(--muted)}

/* legal / doc pages */
.doc{max-width:760px; margin:0 auto; padding:56px 24px 80px}
.doc h1{font-size:clamp(32px,5vw,44px); font-weight:900; letter-spacing:-1px; margin:0 0 6px}
.doc .updated{color:var(--dim); font-size:14px; margin-bottom:36px}
.doc h2{text-align:left; font-size:24px; margin:40px 0 12px}
.doc h3{font-size:18px; margin:26px 0 8px}
.doc p, .doc li{color:var(--muted); font-size:16px}
.doc ul{padding-left:22px} .doc li{margin:6px 0}
.doc a{font-weight:600}
.callout{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:12px; padding:16px 20px; margin:20px 0}
.callout p{margin:0; color:var(--ink)}
.faq{margin-top:10px}
.faq details{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0 20px; margin-bottom:12px}
.faq summary{cursor:pointer; padding:18px 0; font-weight:700; color:var(--ink); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--teal-hi); font-weight:900; margin-right:12px}
.faq details[open] summary::before{content:"–"}
.faq details > p{padding:0 0 18px; margin:0}
.mail{display:inline-block; margin-top:8px; padding:12px 22px; border-radius:999px;
  background:var(--teal); color:#04120E; font-weight:800}
.mail:hover{text-decoration:none; background:var(--teal-hi)}
@media(max-width:600px){ .nav .links{gap:16px} .pro{padding:32px 20px} }