@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--bg:#07060d;--tx:#f4f2ff;--mut:#a7a3c7;--v:#8b5cf6;--p:#ff3ea5;--l:#c6ff3d;--c:#3df0ff;--card:#110f1eee;--line:#2a2644}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.6 "Space Grotesk",system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
.blob{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(110px);opacity:.5;animation:drift 18s ease-in-out infinite alternate}
.b1{background:var(--v);top:-25vmax;left:-15vmax}
.b2{background:var(--p);bottom:-30vmax;right:-20vmax;animation-duration:23s;animation-direction:alternate-reverse}
.b3{background:var(--c);top:35%;left:45%;width:32vmax;height:32vmax;opacity:.22;animation-duration:15s}
@keyframes drift{to{transform:translate(9vmax,7vmax) scale(1.25) rotate(40deg)}}
.grid{position:absolute;inset:0;background:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%)}
#glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#c6ff3d22,transparent 65%);pointer-events:none;z-index:-1;transform:translate(-50%,-50%);left:50%;top:30%}

.top{position:sticky;top:12px;z-index:9;margin:12px auto 0;max-width:1120px;width:calc(100% - 32px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:99px;background:#0d0b18cc;backdrop-filter:blur(14px)}
.brand{font:800 18px Unbounded,sans-serif;text-decoration:none;display:flex;gap:9px;align-items:center}
.logo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--v),var(--p));font-size:16px}
.links{display:flex;gap:22px}.links a{text-decoration:none;color:var(--mut);font-size:15px}.links a:hover{color:var(--l)}

.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;border:0;cursor:pointer;text-decoration:none;font:700 16px "Space Grotesk",sans-serif;color:#0a0812;background:var(--l);border-radius:99px;padding:12px 22px;box-shadow:0 0 0 0 #c6ff3d88;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 8px 40px -4px #c6ff3d99}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.big{font-size:19px;padding:16px 34px}
.btn:disabled{opacity:.6;cursor:wait}
.btn i{font-style:normal;display:inline-block;animation:zap 1.2s infinite}
@keyframes zap{50%{transform:scale(1.35) rotate(12deg)}}

.hero{position:relative;max-width:1120px;margin:0 auto;padding:70px 16px 40px;text-align:center}
.pill{display:inline-block;border:1px solid var(--line);background:#ffffff0d;border-radius:99px;padding:6px 16px;font-size:14px;color:var(--mut)}
.pill b{color:var(--l)}
h1{font:900 clamp(38px,7.4vw,92px)/1.02 Unbounded,sans-serif;margin:22px 0 18px;letter-spacing:-.03em}
h2{font:800 clamp(28px,4.6vw,54px)/1.08 Unbounded,sans-serif;margin:0 0 10px;letter-spacing:-.02em}
.grad{background:linear-gradient(90deg,var(--c),var(--v),var(--p),var(--l),var(--c));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:slide 6s linear infinite}
@keyframes slide{to{background-position:300% 0}}
.sticker{display:inline-block;background:var(--l);color:#0a0812;padding:0 .22em;border-radius:.18em;transform:rotate(-3deg);box-shadow:6px 6px 0 var(--p);animation:wob 3.5s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(2.5deg) scale(1.04)}}
.sub{color:var(--mut);max-width:640px;margin:0 auto 30px;font-size:18px}

.tool{position:relative;text-align:left;border:2px solid transparent;border-radius:26px;padding:16px;max-width:1040px;margin:0 auto;background:linear-gradient(#110f1e,#110f1e) padding-box,conic-gradient(from var(--a),var(--v),var(--p),var(--l),var(--c),var(--v)) border-box;animation:spin 5s linear infinite}
.tool:after{content:"";position:absolute;inset:0;border-radius:26px;z-index:-1;background:conic-gradient(from var(--a),var(--v),var(--p),var(--l),var(--c),var(--v));filter:blur(38px);opacity:.5;animation:spin 5s linear infinite}
@keyframes spin{to{--a:360deg}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{border:1px solid var(--line);background:#ffffff08;color:var(--tx);border-radius:99px;padding:8px 15px;cursor:pointer;font:500 14px "Space Grotesk",sans-serif;transition:.15s}
.tabs button:hover{border-color:var(--l);transform:translateY(-2px)}
.tabs button.on{background:var(--tx);color:#0a0812;border-color:var(--tx);font-weight:700}
.io{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.col{background:#07060dcc;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;min-width:0}
textarea,.out{flex:1;min-height:230px;max-height:420px;overflow:auto;background:none;border:0;outline:0;color:var(--tx);font:16px/1.6 "Space Grotesk",sans-serif;padding:16px;resize:none;white-space:pre-wrap}
.out:empty:before{content:attr(data-ph);color:#6f6b8f}
.out.busy:after{content:"▍";color:var(--l);animation:bl 1s infinite}
@keyframes bl{50%{opacity:0}}
.row{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.link{background:none;border:0;color:var(--c);cursor:pointer;font:inherit;text-decoration:none;padding:0}.link:hover{color:var(--l)}
.tool>.btn{margin:14px auto 2px;display:flex;width:min(100%,340px)}

.badge{position:absolute;font:800 12px Unbounded,sans-serif;padding:8px 13px;border-radius:99px;color:#0a0812;animation:float 5s ease-in-out infinite}
.r1{background:var(--c);top:92px;left:3%;transform:rotate(-12deg)}
.r2{background:var(--p);color:#fff;top:150px;right:2%;transform:rotate(10deg);animation-delay:-2s}
.r3{background:var(--l);top:300px;right:7%;transform:rotate(-6deg);animation-delay:-3.5s}
@keyframes float{50%{translate:0 -14px}}

.marquee{margin:50px 0;padding:16px 0;background:var(--l);color:#0a0812;transform:rotate(-1.6deg) scale(1.03);overflow:hidden;font:800 20px Unbounded,sans-serif;white-space:nowrap;box-shadow:0 0 70px #c6ff3d44}
.track{display:inline-block;animation:mq 28s linear infinite}
.track span{margin:0 22px}
@keyframes mq{to{transform:translateX(-50%)}}

.sec{max-width:1120px;margin:0 auto;padding:70px 16px;text-align:center}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;text-align:left;margin-top:30px}
.card{position:relative;display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;transition:transform .12s,border-color .2s,box-shadow .2s;transform-style:preserve-3d;overflow:hidden}
.card:hover{border-color:var(--hc,var(--l));box-shadow:0 14px 50px -14px var(--hc,var(--l))}
.card .ic{font-size:30px;display:block;margin-bottom:10px;transition:transform .25s}
.card:hover .ic{transform:scale(1.3) rotate(-10deg)}
.card h3{margin:0 0 4px;font-size:18px}.card p{margin:0;color:var(--mut);font-size:14px;line-height:1.45}
.card em{position:absolute;top:14px;right:14px;font:800 10px Unbounded,sans-serif;font-style:normal;color:var(--hc,var(--l));letter-spacing:.08em;text-transform:uppercase}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;text-align:left}
.step{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px}
.step:nth-child(2){transform:rotate(1.2deg) translateY(14px)}.step:nth-child(1){transform:rotate(-1.2deg)}.step:nth-child(3){transform:rotate(-.8deg)}
.step b{font:900 54px Unbounded,sans-serif;-webkit-text-stroke:1.5px var(--l);color:transparent;line-height:1}
.step h3{margin:10px 0 6px;font-size:22px}.step p{margin:0;color:var(--mut)}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.cell{border-radius:24px;padding:28px;background:var(--card);border:1px solid var(--line)}
.cell.wide{grid-column:span 2}
.cell h3{font:800 22px Unbounded,sans-serif;margin:0 0 8px}.cell p{margin:0;color:var(--mut)}
.cell.lime{background:var(--l);color:#0a0812;border:0}.cell.pink{background:var(--p);border:0}
.cell.lime p{color:#0a0812cc}.cell.pink p{color:#fffc}

.faq{max-width:780px}
details{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-top:12px}
details[open]{border-color:var(--v)}
summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between}
summary:after{content:"+";color:var(--l);font-size:24px;line-height:1}details[open] summary:after{content:"–"}
details p{color:var(--mut);margin:10px 0 0}

.cta{margin:40px 16px 70px;max-width:1088px;margin-inline:auto;width:calc(100% - 32px);text-align:center;padding:70px 20px;border-radius:34px;background:linear-gradient(120deg,var(--v),var(--p),#ff8a3d);background-size:200% 200%;animation:slide 8s linear infinite alternate}
.cta h2{margin-bottom:26px}
.cta .btn{background:#0a0812;color:var(--l)}
footer{text-align:center;color:var(--mut);padding:0 16px 40px;font-size:14px}

@media(max-width:820px){
 .badge,.top .btn.sm{display:none}.links{gap:16px}.io,.steps,.bento{grid-template-columns:1fr}.cell.wide{grid-column:auto}
 .step{transform:none!important}.hero{padding-top:44px}textarea,.out{min-height:170px}
 .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.tabs button{flex:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}