:root{--bg:#0a0b0d;--panel:#0e1116;--muted:#9aa4ad;--text:#eef2f5;--accent:#16f48f;--accent-2:#0bcf79;--card:#0b0e12;--border:#1a2027;--ring:#16f48f44}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.5 Inter,Segoe UI,Roboto,Arial,system-ui,-apple-system,sans-serif;color:var(--text);
background:radial-gradient(1200px 600px at 10% -10%, #0f1420 0%, transparent 55%),radial-gradient(1200px 600px at 90% -10%, #0f1a18 0%, transparent 55%),var(--bg)}
a{color:var(--text);text-decoration:none}a:hover{color:var(--accent)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:linear-gradient(180deg,#0b0d10ee,#0b0d1088 70%,transparent);border-bottom:1px solid var(--border)}
.navbar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px}.brand img{height:38px;width:auto}
.menu{display:flex;gap:22px;align-items:center;justify-content:center;flex:1;margin:0 24px}
.menu a{padding:10px 8px;border-radius:10px;color:#cbd5df;font-weight:600;letter-spacing:.2px}
.menu a.active,.menu a:hover{color:var(--text);background:linear-gradient(180deg,#0f1420,#0b0f14);border:1px solid var(--border)}
.login-btn{padding:10px 16px;border-radius:12px;border:1px solid var(--accent);color:var(--bg);background:var(--accent);font-weight:700;box-shadow:0 0 0 4px var(--ring)}
.login-btn:hover{filter:brightness(1.05)}
.hero{padding:72px 0 36px}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.card{background:linear-gradient(180deg,#0b0e12,#0a0c10);border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 #10151d}
.kicker{color:var(--accent);font-weight:800;letter-spacing:.3px;text-transform:uppercase;font-size:12px}
h1{margin:.2rem 0 1rem;font-size:42px;line-height:1.1}
.hero h1{font-size:21px}
.lead{color:#c3cdd7;font-size:18px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.badge{border:1px solid var(--border);border-radius:999px;padding:8px 12px;color:#9fb0ba;background:#0c1116}
.badge strong{color:var(--accent)}
.section{padding:28px 0 8px}
.section h2{font-size:30px;margin:10px 0 14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-1{display:grid;grid-template-columns:1fr;gap:20px}
ul.check{list-style:none;padding-left:0;margin:0}
ul.check li{padding-left:26px;position:relative;margin:8px 0;color:#c9d2db}
ul.check li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 0 8px #16f48f88}
.note{color:#93a0aa;font-size:14px}
footer{padding:36px 0;color:#93a0aa;border-top:1px solid var(--border);margin-top:40px}
.panel{background:linear-gradient(180deg,#0b0f14,#0a0c10);border:1px solid var(--border);border-radius:20px;padding:22px}
.panel h3{margin:0 0 8px;font-size:20px}
.panel p{margin:0 0 10px;color:#c2cbd5}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards .card h3{margin:0 0 8px} .cards .card small{color:#93a0aa}
@media (max-width:980px){.hero .grid{grid-template-columns:1fr}.menu{display:none}.cards{grid-template-columns:1fr}}