:root{
  --d:#101820; --d2:#0B1117; --s1:#18222D; --s2:#212C38; --ln:#2A3643; --ln2:#1B2530;
  --y:#FEE715; --y2:#FFF27A; --g1:#C2C9D0; --g2:#9AA3AD; --g3:#7D8894;
  --ok:#4CD97B; --red:#FF6B6B;
  --r-lg:32px; --r-md:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--d);color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.4}
a{color:var(--y)}a:hover{color:var(--y2)}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
h1,h2,h3,p{margin:0}
h2{font-size:clamp(40px,5.5vw,72px);font-weight:900;letter-spacing:-0.055em;line-height:.95}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.fill{fill:currentColor}
:focus-visible{outline:3px solid var(--y);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--y);color:var(--d);padding:10px 14px;border-radius:12px;font-weight:700;z-index:99}
.skip:focus{left:8px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.stack{display:flex;flex-direction:column;gap:28px}
.stack-s{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:12px;align-items:center}
.wrap-row{flex-wrap:wrap;gap:8px}
.center-row{justify-content:center;flex-wrap:wrap}
.split{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end}
.split.center{align-items:center;gap:16px}
.two{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.two>*{flex:1 1 380px;min-width:0}
.two>.grow{flex:999 1 460px}
.center-y{align-items:center;justify-content:space-between}
.y{color:var(--y)}
.muted{color:var(--g2);font-size:15px;line-height:1.5}
.label{font-size:14px;font-weight:700;color:var(--g2)}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--y)}
.eyebrow.g{color:var(--g2);font-size:13px}
.intro{display:flex;flex-direction:column;gap:14px;max-width:680px}
.sub{font-size:18px;color:var(--g2);line-height:1.5}
.max{max-width:700px}
.sec{padding:clamp(56px,8vw,120px) 0}
.sec.pt0{padding-top:0}
.band{padding:clamp(56px,7vw,100px) 0;background:var(--d2);border-block:1px solid var(--ln2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:24px;font-size:16px;font-weight:800;text-decoration:none;border:0;white-space:nowrap;transition:transform .12s ease,filter .15s}
.btn:active{transform:scale(.97)}
.btn-y{background:var(--y);color:var(--d)}.btn-y:hover{color:var(--d);filter:brightness(1.05)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid var(--ln)}.btn-ghost:hover{color:#fff;border-color:var(--g3)}
.btn-outline-y{background:transparent;color:var(--y);border:1.5px solid var(--y);height:44px}
.btn-dark{background:var(--d);color:var(--y)}.btn-dark:hover{color:var(--y);filter:brightness(1.3)}
.btn-red{background:var(--red);color:var(--d);height:52px}.btn-red:hover{color:var(--d)}
.btn-sm{height:44px;padding:0 20px;font-size:15px}
.btn-lg{height:60px;padding:0 30px;font-size:18px;border-radius:30px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(16,24,32,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--ln2)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.logo{color:#fff;text-decoration:none;font-size:30px;font-weight:900;letter-spacing:-0.05em}
.logo span{color:var(--y)}.logo:hover{color:#fff}
.nav-links{display:flex;gap:28px}
.nav-links a{color:var(--g1);text-decoration:none;font-size:15px;font-weight:600}
.nav-links a:hover{color:var(--y)}
@media (max-width:860px){.nav-links{display:none}}

/* segmented */
.seg{display:inline-flex;background:var(--s1);border:1px solid var(--ln);border-radius:28px;padding:5px;gap:4px;align-self:flex-start}
.seg button{height:44px;padding:0 22px;border-radius:22px;border:0;font-size:16px;font-weight:800;background:transparent;color:var(--g1);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--y);color:var(--d)}
.seg-sm{border:0;padding:4px;gap:2px;border-radius:22px}
.seg-sm button{height:36px;padding:0 14px;border-radius:18px;font-size:14px}

/* hero */
.hero{padding:clamp(48px,8vw,110px) 0 clamp(48px,6vw,80px);overflow:hidden}
.hero .row{flex-wrap:wrap}
@media (max-width:480px){.hero .btn-lg{flex:1 1 100%}}
.hero-in{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.hero-copy{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px}
.hero-title{font-size:clamp(72px,11vw,156px);font-weight:900;letter-spacing:-0.065em;line-height:.86}
.hero-title .y{display:inline-block;animation:pop .45s cubic-bezier(.2,.9,.3,1.4)}
.lead{font-size:clamp(19px,2vw,24px);line-height:1.4;color:var(--g1);max-width:560px;min-height:3em}
.trust{list-style:none;padding:0;margin:0;display:flex;gap:22px;flex-wrap:wrap;color:var(--g2);font-size:15px;font-weight:600}
.trust li{display:inline-flex;align-items:center;gap:8px}
.trust svg{color:var(--y);width:18px;height:18px}
.hero-art{flex:1 1 340px;position:relative;max-width:360px;height:520px;margin:0 auto;min-width:0}
.back-card{position:absolute;right:0;top:20px;width:250px;height:330px;border-radius:var(--r-lg);background:var(--s2);transform:rotate(9deg)}
.float{position:absolute;left:0;top:60px;width:300px;max-width:92%;animation:float 5s ease-in-out infinite;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.mini-toast{position:absolute;left:24px;bottom:34px;display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--ln);border-radius:20px;padding:12px 16px;box-shadow:0 14px 30px rgba(0,0,0,.4);font-size:14px;font-weight:700}
.ok{width:30px;height:30px;border-radius:15px;background:var(--y);color:var(--d);display:flex;align-items:center;justify-content:center}
.ok svg{width:16px;height:16px;stroke-width:3}

/* task card */
.task-card{border-radius:var(--r-lg);background:var(--y);color:var(--d);padding:20px;display:flex;flex-direction:column;gap:14px}
.task-card.static{padding:24px;gap:16px}
.tc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pill-d{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;background:var(--d);color:var(--y);font-size:13px;font-weight:700}
.pill-d svg{width:16px;height:16px}
.muted-d{font-size:13px;font-weight:700;opacity:.75}
.tc-photo{height:150px;border-radius:22px;background:repeating-linear-gradient(135deg,#101820 0 14px,#18222D 14px 28px);display:flex;align-items:center;justify-content:center;color:var(--y)}
.tc-photo svg{width:64px;height:64px;stroke-width:1.4}
.tc-main{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tc-title{font-size:26px;font-weight:800;letter-spacing:-0.04em;line-height:1.04}
.tc-title.big{font-size:32px}
.tc-price{font-size:clamp(44px,5vw,52px);font-weight:900;letter-spacing:-0.06em;line-height:.9}
.tc-desc{font-size:16px;line-height:1.45;font-weight:500}
.tc-foot{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1.5px solid rgba(16,24,32,.15);font-size:14px;font-weight:700}
.av{width:36px;height:36px;border-radius:18px;background:var(--d);color:var(--y);font-weight:800;display:flex;align-items:center;justify-content:center}

/* board */
.counter{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.counter-l{font-size:13px;font-weight:700;color:var(--g2);letter-spacing:.08em;text-transform:uppercase}
.counter-n{font-size:64px;font-weight:900;letter-spacing:-0.06em;line-height:.9;color:var(--y);font-variant-numeric:tabular-nums}
.counter-n.bump{animation:pop .4s cubic-bezier(.2,.9,.3,1.4)}
.chips{display:flex;gap:8px}
@media (min-width:901px){.chips{flex-wrap:wrap;overflow:visible}}
.hscroll{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.hscroll::-webkit-scrollbar{display:none}
.chip{height:40px;padding:0 16px;border-radius:20px;font-size:14px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;background:transparent;color:var(--g1);border:1px solid var(--ln)}
.chip svg{width:16px;height:16px}
.chip[aria-pressed="true"]{background:var(--y);color:var(--d);border-color:var(--y)}
.chip.ex{height:38px;font-weight:600}
.board{background:var(--d);border:2px solid var(--s2);border-radius:var(--r-lg);overflow:hidden}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;background:var(--y);color:var(--d);flex-wrap:wrap}
.board-title{font-size:22px;font-weight:900;letter-spacing:-0.03em;display:flex;align-items:center;gap:10px}
.board-title svg{width:24px;height:24px}
.board-count{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.board-cols{display:flex;gap:16px;padding:12px 24px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--g3);border-bottom:1px solid var(--s2)}
.c-when{width:120px;flex-shrink:0}.c-task{flex:1 1 220px;min-width:0}.c-km{width:84px;flex-shrink:0}.c-pay{width:84px;flex-shrink:0}.c-status{width:140px;flex-shrink:0}.c-act{width:262px;flex-shrink:0}
.rows{list-style:none;margin:0;padding:0}
.r{border-bottom:1px solid var(--ln2);transition:background .25s}
.r.raised{background:rgba(254,231,21,.05)}
.r.lucky{animation:lucky 1.2s ease-in-out 2}
.r-main{display:flex;align-items:center;gap:16px;padding:16px 24px}
.flap{display:inline-block;padding:8px 10px;border-radius:8px;background:linear-gradient(#1E2934 0 49%,#0B1117 49% 51%,#18222D 51% 100%);color:var(--y);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.flap-y{display:inline-block;padding:6px 10px;border-radius:8px;background:linear-gradient(#FEE715 0 49%,#D6C312 49% 51%,#FEE715 51% 100%);color:var(--d);font-size:20px;font-weight:900;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.r-task{display:flex;align-items:center;gap:12px}
.cat-ic{width:40px;height:40px;border-radius:12px;background:var(--s1);color:var(--y);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.r-title{font-size:18px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;display:block}
.r-who{font-size:13px;color:var(--g2)}
.r-km{font-size:16px;font-weight:700;color:var(--g1);font-variant-numeric:tabular-nums}
.c-status{perspective:300px}
.st{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.st.open{color:var(--ok)}
.st.soon{color:var(--y);animation:blink 1.4s steps(2,start) infinite}
.st.up{color:var(--d);background:var(--y);padding:6px 10px;border-radius:8px}
.st.flipnow{animation:flip .55s cubic-bezier(.3,.7,.3,1)}
.c-act{display:flex;gap:8px;justify-content:flex-end}
.rb{height:40px;border-radius:20px;font-size:14px;font-weight:700;padding:0 16px;display:inline-flex;align-items:center;white-space:nowrap;border:1px solid var(--ln);background:transparent;color:var(--g1);transition:transform .12s}
.rb:active{transform:scale(.96)}
.rb.raise{border:0;background:var(--y);color:var(--d)}
.rb.raise.on{background:var(--s2);color:#fff}
.r-more{padding:0 24px 20px 160px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;animation:pop .35s ease}
.r-more p{flex:1 1 320px;font-size:16px;line-height:1.55;color:#D5DADF}
.tag{height:32px;padding:0 12px;border-radius:16px;background:var(--s1);font-size:13px;font-weight:700;display:inline-flex;align-items:center;color:#fff}
.tag.dim{color:var(--g2)}
.tag.on{background:var(--y);color:var(--d)}
.board-empty{padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font-size:17px;color:var(--g2)}
.board-empty strong{font-size:28px;font-weight:900;letter-spacing:-0.04em;color:#fff}
.note{display:flex;gap:10px;align-items:center;color:var(--g2);font-size:15px}
.note svg{color:var(--y);width:18px;height:18px}
@media (max-width:900px){
  .board-cols{display:none}
  .r-main{flex-wrap:wrap;gap:12px 14px;padding:16px}
  .r-main .c-task{order:-1;flex:1 1 100%}
  .c-when,.c-km,.c-pay,.c-status{width:auto}
  .c-act{width:100%;justify-content:stretch}
  .c-act .rb{flex:1;justify-content:center}
  .r-more{padding:0 16px 18px}
  .board-head{padding:16px}
}

/* write demo */
.field-l{font-size:15px;font-weight:700;margin-top:8px}
.field{height:64px;border-radius:24px;border:1.5px solid var(--ln);background:var(--s1);color:#fff;padding:0 22px;font-size:18px;font-weight:500;outline:none;width:100%}
.field:focus{border-color:var(--y)}
.field::placeholder{color:var(--g3)}
.demo{display:flex;flex-direction:column;gap:14px}
.badge-y{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:16px;background:rgba(254,231,21,.14);color:var(--y);font-size:13px;font-weight:800}
.badge-y svg{width:15px;height:15px}
.panel{background:var(--s1);border-radius:var(--r-md);padding:18px 20px;display:flex;flex-direction:column;gap:12px;font-size:16px}
.range{position:relative;height:10px;border-radius:5px;background:var(--ln)}
.range span{position:absolute;left:25%;width:50%;top:0;bottom:0;border-radius:5px;background:var(--y)}

/* modes */
.modes{display:flex;flex-wrap:wrap;gap:20px}
.mode{flex:1 1 420px;border-radius:36px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:24px}
.mode>div{display:flex;flex-direction:column;gap:8px}
.mode-y{background:var(--y);color:var(--d)}
.mode-d{background:var(--s1);border:1px solid var(--ln);color:var(--y)}
.mode-t{font-size:clamp(48px,6vw,80px);font-weight:900;letter-spacing:-0.06em;line-height:.9}
.mode-s{font-size:20px;font-weight:600}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:20px}
.steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;column-gap:16px;row-gap:2px}
.steps li::before{content:counter(s);grid-row:span 2;width:40px;height:40px;border-radius:20px;font-size:17px;font-weight:900;display:flex;align-items:center;justify-content:center}
.mode-y .steps li::before{background:var(--d);color:var(--y)}
.mode-d .steps li::before{background:var(--y);color:var(--d)}
.steps b{font-size:19px;font-weight:800}
.steps span{font-size:16px;line-height:1.45}
.mode-y .steps span{opacity:.82}
.mode-d .steps b{color:#fff}.mode-d .steps span{color:var(--g1)}

/* flow */
.flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.flow li{flex:1 1 220px;border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:14px;background:var(--s1)}
.flow .fn{font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.flow b{font-size:26px;font-weight:900;letter-spacing:-0.04em;line-height:1}
.flow li>span:last-child{font-size:16px;line-height:1.45;color:var(--g1)}
.flow .fy{background:var(--y);color:var(--d)}
.flow .fy>span:last-child{color:var(--d);opacity:.85}
.flow .fo{border:1.5px solid var(--y);color:var(--y)}

/* safety */
.end{align-items:flex-end}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{background:var(--s1);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:14px}
.tile b{font-size:21px;font-weight:800;letter-spacing:-0.02em}
.tile>span:last-child{font-size:16px;line-height:1.5;color:var(--g1)}
.ti{width:52px;height:52px;border-radius:26px;background:var(--y);color:var(--d);display:flex;align-items:center;justify-content:center}
.ti svg{width:26px;height:26px}
.rate-card{flex:1 1 360px;border:1px solid var(--ln);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:12px}
.stars{color:var(--y);font-size:22px;letter-spacing:2px}

/* faq */
.faq-h{flex:1 1 300px !important;font-size:clamp(40px,5vw,64px)}
.faq{flex:999 1 560px !important;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--s1);border-radius:var(--r-md);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:18px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.plus{width:32px;height:32px;border-radius:16px;background:var(--s2);flex-shrink:0;position:relative;transition:transform .2s,background .2s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.6px;border-radius:2px;background:var(--y);transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .plus{background:var(--y);transform:rotate(45deg)}
.faq details[open] .plus::before,.faq details[open] .plus::after{background:var(--d)}
.faq p{padding:0 22px 22px;font-size:16px;line-height:1.55;color:var(--g1)}

/* cta */
.cta{background:var(--y);color:var(--d);padding:clamp(56px,8vw,110px) 0}
.cta-h{font-size:clamp(64px,10vw,140px);font-weight:900;letter-spacing:-0.065em;line-height:.86}
.cta-p{font-size:20px;font-weight:600;max-width:520px;line-height:1.4;margin:20px 0 24px}
.waitlist{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.waitlist input{flex:1 1 240px;height:56px;border-radius:28px;border:2px solid var(--d);background:#fff;color:var(--d);padding:0 22px;font-size:17px;outline:none}
.waitlist input:focus{box-shadow:0 0 0 4px rgba(16,24,32,.25)}
.waitlist .btn{height:56px;border-radius:28px;padding:0 26px;font-size:17px}
.wl-msg{min-height:24px;margin-top:12px;font-size:16px;font-weight:700}
.phone-cta{flex:0 0 auto !important;width:220px;height:440px;border-radius:44px;background:var(--d);padding:10px;margin:0 auto;box-shadow:0 30px 60px rgba(16,24,32,.35)}
.pc-screen{height:100%;border-radius:36px;background:var(--d);border:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.pc-logo{font-size:40px;font-weight:900;letter-spacing:-0.05em;color:#fff}.pc-logo span{color:var(--y)}
.pc-soon{font-size:14px;font-weight:700;color:var(--g2);line-height:1.4}

/* footer */
.foot{padding:48px 0 56px;border-top:1px solid var(--ln2)}
.foot-in{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-cols div{display:flex;flex-direction:column;gap:10px}
.foot-cols a{color:var(--g1);text-decoration:none;font-size:15px;font-weight:600}
.foot-cols a:hover{color:var(--y)}
.fh{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--g3)}
.copy{margin-top:36px;font-size:13px;color:var(--g3)}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px)}
.legal h1{font-size:clamp(44px,6vw,72px);font-weight:900;letter-spacing:-0.055em;line-height:.95;margin-bottom:16px}
.legal h2{font-size:24px;letter-spacing:-0.02em;margin:32px 0 10px}
.legal p,.legal li{font-size:17px;line-height:1.6;color:var(--g1)}

@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes flip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg)}55%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes blink{to{visibility:hidden}}
@keyframes lucky{0%,100%{box-shadow:inset 0 0 0 0 rgba(254,231,21,0)}50%{box-shadow:inset 0 0 0 3px rgba(254,231,21,.95)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}
#faq .two{align-items:flex-start}
.seg-sm button{white-space:nowrap}
@media (max-width:480px){.seg-sm button{padding:0 10px;font-size:13px}}