nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:800;font-size:20px;color:var(--txt)}
.logo span{color:var(--acc)}
nav .links{display:flex;gap:22px;align-items:center}
nav .links a{color:var(--mut);font-size:14.5px}
nav .links a:hover{color:var(--txt)}
.hero{padding:90px 0 60px;text-align:center}
.hero h1{font-size:clamp(34px,5.4vw,60px);font-weight:800;letter-spacing:-1.5px;margin:18px 0}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:640px;margin:0 auto 30px;color:var(--mut);font-size:18px}
.hero .cta{display:flex;gap:14px;justify-content:center}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:70px 0}
.stats .card{text-align:center;padding:26px 12px}
.stats b{font-size:32px;color:var(--acc)}
.stats span{display:block;color:var(--mut);font-size:13.5px;margin-top:4px}
section{padding:60px 0}
section h2{font-size:32px;letter-spacing:-.5px;margin-bottom:8px}
section .sub{color:var(--mut);margin-bottom:36px;max-width:620px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat h3{font-size:17px;margin:10px 0 6px}
.feat p{font-size:14px;color:var(--mut)}
.feat .ico{font-size:22px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps .card b{color:var(--acc2);font-size:13px;letter-spacing:1px}
.steps h3{margin:8px 0 6px;font-size:16px}
.steps p{font-size:13.5px;color:var(--mut)}
.mlgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
pre.code{background:#0b1120;border:1px solid var(--line);border-radius:12px;padding:18px;font:13px/1.6 ui-monospace,Menlo,Consolas,monospace;color:#a5f3fc;overflow-x:auto}
pre.code .c{color:#64748b}
footer{border-top:1px solid var(--line);padding:30px 0;margin-top:40px;color:var(--mut);font-size:14px;display:flex;justify-content:space-between}
.reveal{opacity:0;transform:translateY(18px);transition:.6s ease}
.reveal.vis{opacity:1;transform:none}
@media(max-width:900px){.stats,.grid3,.steps{grid-template-columns:1fr 1fr}.mlgrid{grid-template-columns:1fr}}
@media(max-width:560px){.stats,.grid3,.steps{grid-template-columns:1fr}nav .links a:not(.btn){display:none}}