:root{--bg:#0a0b15;--surface:#13152a;--surface2:#1a1d36;--text:#f4f5ff;--muted:#a9adc9;--accent:#ff6fae;--accent-text:#0a0b15;--line:#262a48;
  --g1:#5b8cff;--g2:#ff6fae;--g3:#ffb17a;--grad:linear-gradient(120deg,#5b8cff 0%,#ff6fae 55%,#ffb17a 100%);--green:#2fd48a;
  --r:20px;--u:8px;--ease:cubic-bezier(.22,1,.36,1);--dur:220ms}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:'Nunito',system-ui,sans-serif;font-size:1.0625rem;line-height:1.5;color:var(--text);background:radial-gradient(900px 520px at 50% -160px,#1c1f3f 0%,rgba(10,11,21,0) 65%),var(--bg);min-height:100vh;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:900;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,8vw,4.5rem)}
h2{font-size:clamp(1.8rem,5vw,2.8rem);margin-bottom:calc(var(--u)*2)}
h3{font-size:1.25rem;font-weight:800}
p{color:var(--muted)}
.lead{font-size:1.1875rem;max-width:34ch}
.wrap{width:min(100% - 32px,1080px);margin-inline:auto}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:inherit;font-weight:800;font-size:1.0625rem;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:var(--grad);color:var(--accent-text);border-color:transparent;box-shadow:0 10px 30px rgba(255,111,174,.28)}
.btn.primary:hover{box-shadow:0 14px 36px rgba(255,111,174,.4)}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}
/* nav */
.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(10,11,21,.72);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem;text-decoration:none;min-height:44px}
.brand img{width:34px;height:34px;border-radius:10px}
.nav-links{display:none;gap:8px;align-items:center}
.nav-links a{text-decoration:none;font-weight:700;color:var(--muted);padding:12px 14px;border-radius:12px;min-height:44px;display:inline-flex;align-items:center}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.nav .cta{min-height:44px;padding:0 18px;font-size:1rem}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-login{text-decoration:none;font-weight:800;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:12px}
.nav-login:hover{color:var(--text)}
.anyone{padding-top:calc(var(--u)*4);padding-bottom:0}
@media(min-width:760px){.nav-links{display:flex}}
/* hero */
.hero{padding:calc(var(--u)*6) 0 calc(var(--u)*4);display:grid;gap:32px;align-items:center}
.hero .copy{display:grid;gap:24px}
.hero .kicker{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9375rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;width:max-content;max-width:100%}
.hero .kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(47,212,138,.18)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.hero .fine{font-size:1rem}
.biz-stage{position:relative;display:grid;justify-items:center;align-content:start;gap:0;min-height:300px}
.biz-stage .glow{position:absolute;width:min(72vw,360px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(91,140,255,.45),rgba(255,111,174,.18) 45%,transparent 70%);filter:blur(24px);animation:pulse 4s ease-in-out infinite}
.biz-stage img{position:relative;width:min(70vw,340px);animation:hover 3.2s ease-in-out infinite;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.biz-stage .bubble{position:relative;z-index:2;justify-self:end;margin:0 8px -28px 0;background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:12px 16px;font-weight:700;color:var(--text);font-size:1rem;max-width:230px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
@keyframes hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes pulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media(min-width:860px){.hero{grid-template-columns:1.1fr .9fr;padding-top:calc(var(--u)*10)}.biz-stage{place-items:center}.biz-stage .bubble{position:absolute;right:max(4px,calc(50% - 200px));top:8px;margin:0}}
/* who for strip */
.strip{border-block:1px solid var(--line);padding:16px 0}
.strip .wrap{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;color:var(--muted);font-weight:700}
.strip span{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
/* sections */
section{padding:calc(var(--u)*8) 0}
.section-head{max-width:60ch;margin-bottom:calc(var(--u)*4)}
/* how it works */
.steps{display:grid;gap:16px}
.step{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.step img{width:72px;height:72px;object-fit:contain}
.step p{font-size:1rem}
.step .n{font-weight:900;color:var(--g2);font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase}
.step h3{margin:2px 0 6px}
.how{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.how{grid-template-columns:1fr 1fr}}
/* phone mock */
.phone{width:min(100%,340px);margin-inline:auto;background:#05060c;border:1px solid var(--line);border-radius:44px;padding:14px;box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04)}
.phone .screen{background:var(--bg);border-radius:32px;padding:20px 16px 16px;min-height:560px;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;overflow:hidden}
.phone .top{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:1.0625rem}
.phone .top small{font-weight:700;color:var(--muted);font-size:.8125rem}
.phone .say{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center}
.phone .say img{width:64px;height:64px;object-fit:contain}
.phone .say div{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:.9375rem;font-weight:700}
.card{background:linear-gradient(180deg,#1b1e34,#141628);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px;align-content:start}
.card .tag{font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--g3)}
.card h4{font-size:1.125rem;font-weight:800;line-height:1.3}
.card p{font-size:1rem}
.card .quote{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;font-size:.9375rem;color:var(--text);line-height:1.45}
.card .money{font-weight:900;font-size:1.375rem;color:var(--text)}
.phone .yn{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.phone .yn b{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;font-weight:900;font-size:1.125rem;border:1px solid var(--line);background:var(--surface)}
.phone .yn b.yes{background:var(--grad);color:var(--accent-text);border-color:transparent}
.phone .hear{display:flex;justify-content:center;gap:16px;font-weight:800;font-size:.9375rem;color:var(--muted)}
/* features */
.feat{display:grid;gap:12px}
@media(min-width:640px){.feat{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.feat{grid-template-columns:repeat(3,1fr)}}
.f{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--surface),var(--bg))}
.f svg{width:44px;height:44px;flex:none;color:var(--g1)}
.f:nth-child(3n+2) svg{color:var(--g2)}.f:nth-child(3n) svg{color:var(--g3)}
.f h3{font-size:1.125rem;margin-bottom:4px}
.f p{font-size:1rem}
/* trust */
.trust{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:28px 20px;display:grid;gap:20px}
.trust ul{list-style:none;display:grid;gap:14px}
.trust li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;color:var(--text);font-weight:600}
.trust li svg{width:28px;height:28px;color:var(--green)}
.trust li span{display:block;color:var(--muted);font-weight:400;font-size:1rem}
@media(min-width:860px){.trust{grid-template-columns:1fr 1fr;padding:40px}}
/* moods */
.moods{display:flex;flex-wrap:wrap;gap:10px}
.moods button{font:inherit;font-weight:800;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
.moods button[aria-pressed=true]{background:var(--grad);color:var(--accent-text);border-color:transparent}
.mood-line{margin-top:16px;display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.mood-line img{width:56px;height:56px;object-fit:contain}
.mood-line div{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;font-weight:700;color:var(--text);min-height:48px}
/* pricing */
.plans{display:grid;gap:16px}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{position:relative;display:grid;gap:14px;align-content:start;padding:24px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.plan.hot{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border:2px solid transparent}
.plan .name{font-weight:900;font-size:1.25rem}
.plan .price{font-size:2.25rem;font-weight:900;line-height:1}
.plan .price small{font-size:1rem;color:var(--muted);font-weight:700}
.plan ul{list-style:none;display:grid;gap:8px;color:var(--muted);font-size:1rem}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--grad)}
.plan .badge{position:absolute;top:-14px;left:20px;background:var(--grad);color:var(--accent-text);font-weight:900;font-size:.8125rem;padding:6px 12px;border-radius:999px}
.plan .seats{font-weight:800;color:var(--text);font-size:.9375rem}
.plan .soon{font-weight:800;color:var(--g3)}
/* faq */
.faq{display:grid;gap:10px;max-width:760px}
details{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0 20px}
summary{cursor:pointer;font-weight:800;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;color:var(--g2);flex:none}
details[open] summary::after{content:"–"}
details p{padding:0 0 18px}
/* final cta */
.final{text-align:center;display:grid;gap:20px;justify-items:center;padding:calc(var(--u)*6) 20px;border-radius:var(--r);background:linear-gradient(180deg,#1b1e3a,#12142a);border:1px solid var(--line)}
.final img{width:160px}
/* footer */
footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--muted);font-size:.9375rem}
footer .wrap{display:grid;gap:16px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{min-height:44px;height:44px;padding:0 6px;min-width:48px;display:inline-flex;align-items:center;text-decoration:none;font-weight:700}
footer a:hover{color:var(--text)}
/* forms */
.auth{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:32px 0}
.form{width:min(100%,520px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 20px;display:grid;gap:16px}
.form h1{font-size:1.9rem}
.form .biz{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.form .biz img{width:64px;height:64px;object-fit:contain}
.form .biz div{background:var(--bg);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:10px 12px;font-weight:700}
label{display:grid;gap:6px;font-weight:800;font-size:.9375rem}
label small{font-weight:600;color:var(--muted)}
input,textarea,select{font:inherit;font-size:1.0625rem;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:14px;min-height:52px;padding:12px 14px;width:100%}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--g1);outline-offset:1px}
.two{display:grid;gap:12px}
@media(min-width:520px){.two{grid-template-columns:1fr 1fr}}
.msg{border-radius:14px;padding:12px 14px;font-weight:700;display:none}
.msg.err{display:block;background:rgba(232,69,46,.14);border:1px solid rgba(232,69,46,.5);color:#ffb3a7}
.msg.ok{display:block;background:rgba(47,212,138,.12);border:1px solid rgba(47,212,138,.5);color:#bff5d9}
.fieldset{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px}
.fieldset legend,.fieldset .lg{font-weight:900;color:var(--g2);font-size:.9375rem;letter-spacing:.06em;text-transform:uppercase}
.center{text-align:center}
.form p a,.form label a{display:inline-block;padding:11px 3px;margin:-11px -3px}
.legal a{display:inline-block;padding:11px 2px;margin:-11px -2px}
.legal{max-width:72ch;padding:48px 0;display:grid;gap:16px}
.legal h1{font-size:2.2rem}.legal h2{font-size:1.4rem;margin-top:16px}
.legal p,.legal li{color:var(--muted)}.legal ul{padding-left:20px;display:grid;gap:8px}
.skip{position:absolute;left:-999px;min-height:44px;display:inline-flex;align-items:center}.skip:focus{left:16px;top:16px;background:var(--surface);padding:12px;z-index:50;border-radius:12px}
