:root{--bg:#060810;--text:#eaf0ff;--dim:#8c97b4;--blue:#2f8cff;--cyan:#52e0ff;--line:rgba(255,255,255,.08)}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden;background:
 radial-gradient(60rem 36rem at 50% -8%,rgba(47,140,255,.22),transparent 60%),
 radial-gradient(40rem 28rem at 90% 40%,rgba(82,224,255,.07),transparent 60%),var(--bg)}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
nav{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0}
.logo{font-weight:700;letter-spacing:.02em;color:var(--text)}.logo:hover{text-decoration:none}
.pill{display:inline-block;padding:.55rem 1.2rem;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);backdrop-filter:blur(12px);transition:.2s}
.pill:hover{text-decoration:none;border-color:rgba(82,224,255,.5);box-shadow:0 0 28px rgba(47,140,255,.35)}
.pill.main{background:linear-gradient(180deg,#3a97ff,#1f6fe0);border-color:transparent;font-weight:600;box-shadow:0 8px 36px rgba(47,140,255,.4)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:4rem 0 5rem}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.04;letter-spacing:-.03em}
.hero h1 span{background:linear-gradient(90deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--dim);font-size:1.15rem;margin:1.2rem 0 2rem;max-width:30rem}
.loco{position:relative;display:grid;place-items:center}
.loco::before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(47,140,255,.5),transparent 68%);filter:blur(30px)}
.loco img{position:relative;width:100%;max-width:30rem;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;padding-bottom:5rem}
.card{padding:1.5rem;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:blur(14px)}
.card h3{font-size:1.05rem;margin-bottom:.4rem}.card p{color:var(--dim);font-size:.95rem}
.cta{text-align:center;padding:2rem 0 5rem}.cta h2{font-size:2rem;letter-spacing:-.02em;margin-bottom:.6rem}.cta p{color:var(--dim);margin-bottom:1.6rem}
footer{border-top:1px solid var(--line);padding:1.6rem 0 2.4rem;color:var(--dim);font-size:.9rem;display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:space-between}
footer nav{padding:0;gap:1.2rem;display:flex}
.doc{max-width:44rem;padding:2rem 0 4rem}.doc h1{font-size:2rem;margin-bottom:1rem}.doc h2{font-size:1.2rem;margin:2rem 0 .5rem}.doc p,.doc li{color:#c3cbe0;margin:.5rem 0}.doc ul{padding-left:1.3rem}.doc strong{color:var(--text)}
@media(max-width:760px){.hero{grid-template-columns:1fr;text-align:center;padding-top:1rem}.hero p{margin-inline:auto}.loco{order:-1}}
@media(prefers-reduced-motion:reduce){.loco img{animation:none}}