:root{--bg:#fff;--bg2:#f5f6fb;--ink:#12131a;--muted:#5a5f72;--line:#e4e6ef;--brand:#5b4bff;--brand2:#8a5cff;--brand-ink:#fff;--wa:#128c4a;--card:#fff;--shadow:0 10px 30px rgba(40,40,90,.08);--r:16px}
@media (prefers-color-scheme:dark){:root{--bg:#0d0e14;--bg2:#13151d;--ink:#eef0f7;--muted:#a0a5b8;--line:#262a38;--brand:#7c6dff;--brand2:#a07dff;--card:#171a24;--shadow:0 10px 30px rgba(0,0,0,.4);--wa:#1faa5e}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}a{color:var(--brand)}
h1,h2,h3{line-height:1.15;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800}
h3{font-size:1.1rem;font-weight:700}
p{margin:0}
.container{width:min(1120px,100% - 32px);margin-inline:auto}
.narrow{width:min(780px,100% - 32px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.muted{color:var(--muted)}
/* header */
.header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.25rem}
.logo{width:34px;height:34px;color:var(--brand)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--brand)}
.nav .nav-cta{color:#fff}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:var(--ink);margin:6px 0;transition:.2s}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 20px;border-radius:12px;border:0;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:20px;height:20px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 8px 20px rgba(91,75,255,.28)}
.btn-wa{background:var(--wa);color:#fff}
.btn-lg{padding:14px 24px;font-size:1.02rem}
.block{width:100%}
.btn[disabled]{opacity:.6;cursor:wait}
/* hero */
.hero{padding:64px 0 72px;background:radial-gradient(900px 400px at 85% -10%,rgba(138,92,255,.18),transparent),radial-gradient(700px 400px at 0% 0%,rgba(91,75,255,.12),transparent)}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.lead{font-size:1.15rem;color:var(--muted);margin:20px 0 28px;max-width:34em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:10px 22px;flex-wrap:wrap;color:var(--muted);font-size:.93rem}
.ticks li::before{content:"✓";color:#22c55e;font-weight:800;margin-right:7px}
.hero-art{position:relative;padding:20px}
.mock{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.mock-bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.mock-body{padding:22px;display:grid;gap:14px}
.mock-row{display:flex;align-items:center;gap:12px}
.pill{width:34px;height:34px;border-radius:10px;flex:none}
.p1{background:linear-gradient(135deg,var(--brand),var(--brand2))}.p2{background:#22c55e}.p3{background:#f59e0b}
.line{height:10px;border-radius:6px;background:var(--line)}
.l45{width:45%}.l60{width:60%}.l80{width:80%}
.mock-chart{display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:6px;padding-top:6px}
.mock-chart b{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--brand2),var(--brand));opacity:.9}
.h40{height:40%}.h50{height:50%}.h65{height:65%}.h70{height:70%}.h85{height:85%}.h100{height:100%}
.float{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-size:.85rem;font-weight:600;box-shadow:var(--shadow);animation:bob 5s ease-in-out infinite}
.f1{top:0;right:0}.f2{bottom:0;left:0;animation-delay:-2.5s}
.spark{color:var(--brand)}
@keyframes bob{50%{transform:translateY(-8px)}}
/* sections */
.section{padding:84px 0}
.alt{background:var(--bg2)}
.section-head{max-width:640px;margin-bottom:40px}
.section-head p:last-child{color:var(--muted);margin-top:12px}
.grid{display:grid;gap:20px}
.cards{grid-template-columns:repeat(3,1fr)}
.examples{grid-template-columns:repeat(3,1fr)}
.card,.example{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover,.example:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.card p,.example p{color:var(--muted);margin-top:8px;font-size:.96rem}
.icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-size:1.4rem;margin-bottom:16px}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.why{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.why li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{position:relative;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.steps p{color:var(--muted);margin-top:8px;font-size:.95rem}
.num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:800;margin-bottom:14px}
.tech{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.tech span{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 16px;font-size:.88rem;font-weight:600;color:var(--muted)}
/* faq */
.faq{display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--brand)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);padding:0 0 16px}
/* contact */
.contact{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.contact-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.contact-copy .muted{margin:14px 0 20px}
.contact-ways{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-weight:600}
.form{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;align-content:start}
.full{grid-column:1/-1}
label{font-weight:600;font-size:.92rem}
.opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 20%,transparent)}
textarea{resize:vertical;min-height:120px}
.check label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.88rem;color:var(--muted)}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--brand)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:#d92d4a;font-size:.85rem;min-height:0}
.invalid input,.invalid textarea{border-color:#d92d4a}
.form-status{margin-top:12px;font-weight:600;min-height:1.5em}
.form-status.ok{color:#15803d}.form-status.bad{color:#d92d4a}
@media (prefers-color-scheme:dark){.form-status.ok{color:#4ade80}.err,.form-status.bad{color:#ff7a90}}
/* footer */
.footer{border-top:1px solid var(--line);padding:40px 0 96px}
.footer-in{display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:start}
.footer .muted{margin-top:10px;font-size:.92rem}
.legal{display:flex;gap:20px;flex-wrap:wrap}
.legal a{color:var(--muted);text-decoration:none;font-size:.92rem}
.legal a:hover{color:var(--brand)}
.copy{grid-column:1/-1;color:var(--muted);font-size:.85rem}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(18,140,74,.45);transition:transform .15s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px}
/* legal pages */
.doc{padding:56px 0 80px}.doc h1{font-size:2rem;margin-bottom:20px}.doc h2{font-size:1.2rem;margin:28px 0 8px}.doc p,.doc li{color:var(--muted)}.doc ul{padding-left:20px}
/* responsive */
@media (max-width:900px){
 .hero-in,.split,.contact-in{grid-template-columns:1fr;gap:36px}
 .cards,.examples{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}
 .hero{padding-top:40px}.section{padding:60px 0}.hero-art{max-width:460px}
 .menu-btn{display:block}
 .nav{position:absolute;top:68px;left:0;right:0;background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;border-bottom:1px solid var(--line);display:none}
 .nav.open{display:flex}.nav a{padding:14px 4px;font-size:1.05rem}.nav .nav-cta{text-align:center;margin-top:8px}
}
@media (max-width:600px){
 .cards,.examples,.steps{grid-template-columns:1fr}
 .form{grid-template-columns:1fr;padding:20px}
 .cta-row .btn{width:100%}.footer-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}