:root{--b:#0b5fff;--c:#00d4ff;--d:#0a1226;--bg:#f5f8ff;--t:#1b2440;--card:#fff;--line:#e2e8f8}
@media(prefers-color-scheme:dark){:root{--bg:#0b1020;--t:#e8ecff;--card:#141b34;--line:#243056}}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--t);line-height:1.6}
a{color:var(--b)}
header{position:sticky;top:0;z-index:50;background:rgba(10,18,38,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:.8rem 5%}
.logo{color:#fff;font-weight:800;font-size:1.3rem;text-decoration:none}.logo span{color:var(--c)}
nav a{color:#cfd8ff;text-decoration:none;margin-left:1.2rem;font-size:.95rem;transition:.2s}nav a:hover{color:var(--c)}
#burger{display:none;background:none;border:0;color:#fff;font-size:1.6rem}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a1226,#0b3bb5);color:#fff;padding:7rem 5% 6rem;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.15;animation:up 1s both}
.hero p{max-width:640px;margin:1rem auto 2rem;color:#cfd8ff;animation:up 1s .2s both}
.hero .btns{animation:up 1s .4s both}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:float 9s ease-in-out infinite}
.b1{width:300px;height:300px;background:var(--c);top:-80px;left:-60px}.b2{width:380px;height:380px;background:#7a5cff;bottom:-140px;right:-80px;animation-delay:-4s}
@keyframes float{50%{transform:translate(40px,30px) scale(1.15)}}
@keyframes up{from{opacity:0;transform:translateY(30px)}}
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:999px;background:var(--c);color:#04122e;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem;margin:.3rem;transition:.25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,212,255,.4)}.btn.wa{background:#25d366}.btn.o{background:transparent;color:#fff;border:2px solid #fff}
section{padding:4.5rem 5%;max-width:1150px;margin:auto}
h2{font-size:2rem;margin-bottom:.4rem}.sub{opacity:.75;margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.5rem;transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(11,95,255,.18)}
.card .ic{font-size:2.2rem;display:block;margin-bottom:.5rem}
.step{counter-increment:s}.step:before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--b);color:#fff;font-weight:800;margin-bottom:.6rem}
.steps{counter-reset:s}
.reveal{opacity:0;transform:translateY(40px);transition:1s}.reveal.in{opacity:1;transform:none}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin-bottom:.7rem}
summary{cursor:pointer;font-weight:700}details p{margin-top:.6rem}
form{display:grid;gap:.8rem}input,textarea,select{width:100%;padding:.8rem;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--t);font:inherit}
.chk{display:flex;gap:.5rem;font-size:.85rem;align-items:flex-start}.chk input{width:auto;margin-top:.3rem}
.stars{color:#ffb400;font-size:1.2rem;letter-spacing:2px}
#starpick span{font-size:2rem;cursor:pointer;color:#c9c9c9;transition:.15s}#starpick span.on{color:#ffb400}
footer{background:#0a1226;color:#aab6e6;text-align:center;padding:2rem 5%;font-size:.88rem}footer a{color:#cfd8ff;margin:0 .5rem}
#wa{position:fixed;right:20px;bottom:20px;width:62px;height:62px;border-radius:50%;background:#25d366;display:grid;place-items:center;z-index:90;box-shadow:0 6px 20px rgba(0,0,0,.35);animation:pulse 2s infinite}
#wa svg{width:34px;height:34px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.7)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
#cbtn{position:fixed;left:20px;bottom:20px;z-index:90;background:var(--b);color:#fff;border:0;border-radius:999px;padding:.9rem 1.2rem;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3)}
#chat{position:fixed;left:20px;bottom:80px;width:min(360px,calc(100vw - 40px));max-height:70vh;background:var(--card);border:1px solid var(--line);border-radius:18px;display:none;flex-direction:column;z-index:95;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35)}
#chat.open{display:flex;animation:up .4s}
#chat h4{background:var(--b);color:#fff;padding:.8rem 1rem;display:flex;justify-content:space-between}#chat h4 button{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer}
#msgs{padding:1rem;overflow:auto;flex:1;display:flex;flex-direction:column;gap:.5rem}
.m{padding:.6rem .9rem;border-radius:14px;max-width:88%;font-size:.92rem}.m.bot{background:var(--line)}.m.me{background:var(--b);color:#fff;align-self:flex-end}
#qs{padding:.6rem;display:flex;flex-wrap:wrap;gap:.4rem;border-top:1px solid var(--line);max-height:120px;overflow:auto}
#qs button{border:1px solid var(--b);background:none;color:var(--b);border-radius:999px;padding:.3rem .7rem;font-size:.8rem;cursor:pointer}
#cin{display:flex;border-top:1px solid var(--line)}#cin input{border:0;border-radius:0}#cin button{border:0;background:var(--b);color:#fff;padding:0 1rem;cursor:pointer}
#modal{position:fixed;inset:0;background:rgba(5,10,25,.75);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem}
#modal.open{display:flex;animation:fade .3s}@keyframes fade{from{opacity:0}}
#mbox{background:var(--bg);border-radius:22px;max-width:900px;width:100%;max-height:90vh;overflow:auto;padding:2rem;position:relative;animation:up .4s}
#mbox section{padding:0;max-width:none}#mx{position:absolute;right:14px;top:10px;background:none;border:0;font-size:2rem;cursor:pointer;color:var(--t)}
.legal{max-width:850px;margin:auto;padding:3rem 5%}.legal h1{margin-bottom:1rem}.legal h2{font-size:1.25rem;margin:1.6rem 0 .4rem}.legal ul{margin-left:1.4rem}
@media(max-width:800px){nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0a1226;padding:1rem 5%}nav.open{display:block}nav a{display:block;margin:.6rem 0}#burger{display:block}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}