:root{
  --bg: #0b0d12;
  --surface: #121621;
  --card: #151a27;
  --text: #e7e9ee;
  --muted: #9aa3b2;
  --accent: #7c3aed;
  --accent-2: #22d3ee;
  --border: #263044;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, rgba(34,211,238,.18), transparent 70%),
    var(--bg);
}
a{color:var(--text); text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:24px}
.nav{position:sticky; top:0; z-index:20; backdrop-filter: blur(10px); background: rgba(10,12,18,.45); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; padding:6px 0}
.brand img{height:34px; width:34px}
.brand .title{font-weight:700; letter-spacing:.4px}
.lang-select{appearance:none; background:var(--card); color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:10px}
.hero{padding:72px 24px 48px}
.hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center}
@media (max-width: 900px){ .hero-inner{grid-template-columns:1fr} }
.h-tag{color:var(--muted); font-size:14px; letter-spacing:.6px; text-transform:uppercase}
h1{font-size: clamp(28px, 6vw, 48px); margin:10px 0 16px}
.lead{color:#d1d6e2; font-size: clamp(16px, 2.2vw, 20px); line-height:1.6}
.cta-row{display:flex; gap:14px; margin-top:22px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0d12; font-weight:700}
.btn.secondary{background:transparent; color:var(--text)}
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px}
@media (max-width:900px){ .card-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .card-grid{grid-template-columns:1fr} }
.card{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--card); border:1px solid var(--border); padding:18px; border-radius:14px; min-height:120px}
.card h3{margin:0 0 8px; font-size:18px}
.section{padding:24px}
.kv{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px}
@media (max-width:900px){ .kv{grid-template-columns:1fr} }
.kv div{background:var(--surface); border:1px solid var(--border); padding:16px; border-radius:12px}
footer{margin-top:48px; padding:24px 0; border-top:1px solid var(--border); background:rgba(10,12,18,.4)}
footer .links{display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center}
.small{color:var(--muted); font-size:14px}
.badge{display:inline-flex; align-items:center; gap:8px; background: rgba(124,58,237,.15); padding:6px 10px; border-radius:999px; border:1px solid var(--border)}
.icon{width:18px; height:18px}