.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--mint);color:#08110e;padding:10px 18px;border-radius:999px;font-weight:700;transition:top .2s}.skip:focus{top:14px}
.sm{font-size:14.5px}
.eyebrow{font:500 12.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:116px 0 72px}
.orb{position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
.o1{left:-220px;top:80px;width:620px;height:620px;background:radial-gradient(closest-side,rgba(124,108,255,.34),transparent)}
.o2{right:-200px;top:-80px;width:640px;height:640px;background:radial-gradient(closest-side,rgba(94,242,193,.22),transparent)}
.o3{left:50%;top:-120px;width:900px;height:640px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(94,242,193,.2),transparent)}
.hg{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;min-height:calc(100vh - 190px)}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line2);background:rgba(255,255,255,.05);border-radius:999px;padding:7px 16px 7px 12px;font-size:14px;color:#d6d5ce}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(94,242,193,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(94,242,193,0)}100%{box-shadow:0 0 0 0 rgba(94,242,193,0)}}
.hl h1{font-size:clamp(42px,5.2vw,80px);margin-top:22px}
.ln{display:block}
.lead{font-size:clamp(17px,1.5vw,20px);color:#c9c8c1;max-width:46ch;margin:26px 0 32px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.note{margin-top:16px;color:var(--mut);font-size:14.5px}
.hr{min-width:0}
.demo{height:min(600px,calc(100vh - 210px));min-height:520px;padding:8px;border-radius:30px}
.demoHost{height:100%}
.cap{margin-top:14px;text-align:center;color:var(--mut);font-size:13.5px}
.sec{padding:120px 0;position:relative}
.sec.alt{background:var(--night2)}
.head{max-width:780px;margin:0 auto 56px;text-align:center}
.head h2{font-size:clamp(34px,4.9vw,64px);margin-top:14px}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.steps::before{content:"";position:absolute;left:5%;right:5%;top:27px;height:2px;background:var(--line)}
.steps li{position:relative;display:block}
.steps .n{width:56px;height:56px;border-radius:50%;background:var(--night);border:2px solid var(--mint);color:var(--mint);display:grid;place-items:center;font:700 20px var(--display);position:relative;z-index:1}
.steps h3{font-size:25px;margin:20px 0 8px}.steps p{color:var(--mut);max-width:32ch}
.code{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:56px auto 0;max-width:820px;padding:22px 24px;border-radius:22px}
.code .lab{flex:1 0 100%;font-size:12.5px;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.code pre{flex:1;min-width:0;overflow:auto;font-size:14px;line-height:1.6;color:var(--mint);white-space:pre-wrap;word-break:break-all}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{padding:26px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.card h3{font-size:25px}.card p{color:var(--mut);font-size:16px;max-width:44ch}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c7{grid-column:span 7}.c12{grid-column:span 12}
.demo2{flex:1;min-height:210px;border-radius:18px;background:rgba(0,0,0,.28);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:9px;justify-content:center}
.mm{max-width:86%;padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.4;opacity:0;transform:translateY(8px)}
.mm.u{align-self:flex-end;background:var(--mint);color:#08110e;border-bottom-right-radius:5px}
.mm.b{background:rgba(255,255,255,.1);border-bottom-left-radius:5px}
.card.go .mm{animation:msg .6s var(--ease) forwards;animation-delay:calc(var(--k,0)*900ms + 300ms)}
.mm:nth-child(1){--k:0}.mm:nth-child(2){--k:1}.mm:nth-child(3){--k:2}.mm:nth-child(4){--k:3}
@keyframes msg{to{opacity:1;transform:none}}
.lab{font-size:12px;color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.ord ul{list-style:none;padding:0;display:grid;gap:8px}.ord li{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;opacity:0;transform:translateY(6px)}
.ord li.t{border-top:1px solid var(--line2);padding-top:10px;font-weight:700}
.card.go .ord li{animation:msg .5s var(--ease) forwards}.card.go .ord li:nth-child(1){animation-delay:.3s}.card.go .ord li:nth-child(2){animation-delay:.7s}.card.go .ord li:nth-child(3){animation-delay:1.1s}
.stp{position:relative;display:flex;justify-content:space-between;margin:18px 6px 6px}
.stp::before,.stp .bar{content:"";position:absolute;left:8px;right:8px;top:8px;height:3px;background:var(--line2);border-radius:3px}
.stp .bar{background:var(--mint);right:auto;width:0;transition:width 2.2s var(--ease) .4s}
.card.go .stp .bar{width:calc(66% - 8px)}
.stp i{position:relative;z-index:1;width:19px;height:19px;border-radius:50%;background:var(--night);border:3px solid var(--line2);transition:border-color .4s,background .4s}
.card.go .stp i:nth-child(-n+3){border-color:var(--mint);background:var(--mint)}
.card.go .stp i:nth-child(1){transition-delay:.4s}.card.go .stp i:nth-child(2){transition-delay:1s}.card.go .stp i:nth-child(3){transition-delay:1.6s}
.stl{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}
.clock{align-items:center;text-align:center}
.time{font-size:60px;letter-spacing:-.04em;color:var(--paper)}
.toast{margin-top:6px;border-radius:999px;background:var(--mint);color:#08110e;font-weight:700;font-size:13.5px;padding:7px 16px;opacity:0;transform:translateY(10px) scale(.95);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.toast.on{opacity:1;transform:none}
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center}
.dash{flex-direction:row;gap:12px;align-items:stretch;position:relative;min-height:150px}
.dash>div{flex:1;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.04)}
.dash b{font:600 40px var(--display);letter-spacing:-.04em}.dash span{font-size:13px;color:var(--mut)}
.dash em{position:absolute;right:12px;bottom:8px;font:500 11px var(--mono);color:var(--mut);font-style:normal}
.trust{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust li{padding:26px}.trust h3{font-size:22px;margin-bottom:8px}.trust p{color:var(--mut);font-size:15.5px}
.fine{max-width:62ch;margin:36px auto 0;text-align:center;color:var(--mut);font-size:14.5px}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:880px;margin:0 auto}
.plan{padding:34px;display:flex;flex-direction:column;gap:14px}.plan.pro{border-color:rgba(94,242,193,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px -40px rgba(94,242,193,.6)}
.plan h3{font-size:28px}.price{font:700 54px var(--display);letter-spacing:-.05em;line-height:1}.price small{font:500 16px var(--sans);letter-spacing:0;color:var(--mut)}
.plan ul{list-style:none;padding:0;display:grid;gap:11px;flex:1;margin:10px 0 14px}.plan li{display:flex;gap:10px;font-size:16px}.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:rgba(94,242,193,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4' fill='none' stroke='%235ef2c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.plan .tag{position:absolute;top:-13px;left:28px;background:var(--mint);color:#08110e;font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px}
.faqg{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}.faqg .head{text-align:left;margin:0}
.faq details{border-top:1px solid var(--line);padding:6px 0}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;min-height:58px;align-items:center;font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:26px;color:var(--mint);transition:transform .3s var(--ease)}.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--mut);padding:0 0 20px;max-width:60ch}
.fin{overflow:hidden;isolation:isolate;text-align:center}.center{text-align:center}.fin h2{font-size:clamp(44px,8vw,110px)}.fin .lead{margin:22px auto 34px}.btn.big{min-height:60px;padding:0 38px;font-size:18px}
.foot{border-top:1px solid var(--line);padding:44px 0 36px}.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}.foot nav{display:flex;gap:24px;color:#cfcec7;font-size:15px}.foot nav a:hover{color:#fff}
@media(max-width:1000px){.hg{grid-template-columns:1fr;min-height:0}.demo{height:560px}.steps{grid-template-columns:1fr}.steps::before{display:none}.c4,.c5,.c7{grid-column:span 12}.trust{grid-template-columns:1fr 1fr}.plans{grid-template-columns:1fr}.faqg{grid-template-columns:1fr}.faqg .head{text-align:center}.two{grid-template-columns:1fr}}
@media(max-width:600px){.hero{padding:104px 0 56px}.sec{padding:80px 0}.trust{grid-template-columns:1fr}.dash{flex-direction:column}.nav .r .btn.g{display:none}}
@media(prefers-reduced-motion:reduce){.mm,.ord li{opacity:1;transform:none}.stp .bar{width:calc(66% - 8px)}.stp i:nth-child(-n+3){border-color:var(--mint);background:var(--mint)}.toast{opacity:1;transform:none}}
