:root{
  --bg:#0b1020; --card:#121933; --muted:#94a3b8; --brand:#5eead4; --brand-2:#60a5fa; --text:#e5e7eb; --white:#fff;
  --ring: 0 0 0 8px color-mix(in oklab, var(--brand) 25%, transparent);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; background:linear-gradient(180deg,#0a0f1e 0%, #0b1328 60%, #0a1124 100%); color:var(--text)}
a{color:inherit; text-decoration:none}
.container{width:min(1100px, 92%); margin-inline:auto}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:14px; font-weight:600; letter-spacing:.2px; border:1px solid #1f2a56; backdrop-filter:saturate(120%);}
.btn-primary{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0a0f1e; border:0}
.btn-outline{background:transparent; color:var(--white)}
.btn:hover{transform:translateY(-1px)}
.tag{display:inline-flex; align-items:center; gap:.4rem; background:#0f1938; color:var(--brand); border:1px solid #1f2a56; padding:.35rem .7rem; border-radius:999px; font-size:.8rem}
header{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px) saturate(120%); background:color-mix(in oklab, #0b1020 70%, transparent); border-bottom:1px solid #1c2447}
nav{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
nav .links{display:flex; gap:1.2rem; align-items:center}
nav .links a{opacity:.9}
nav .links a:hover{opacity:1}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:800}
.logo-mark{width:28px;height:28px;border-radius:8px; background:conic-gradient(from 210deg, var(--brand), var(--brand-2)); box-shadow:0 0 40px color-mix(in oklab, var(--brand) 40%, transparent)}

/* Language switcher */
.lang-switch{display:inline-flex; align-items:center; gap:.5rem}
.lang-switch select{appearance:none; background:#0f1a38; color:var(--text); border:1px solid #243056; border-radius:10px; padding:.5rem .8rem; font-weight:600}

/* Hero */
.hero{padding:6rem 0 3rem}
.hero h1{font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.05; margin:1rem 0}
.hero p.lead{font-size:clamp(1rem, 1.7vw, 1.25rem); color:var(--muted); max-width:60ch}
.hero .cta{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.card{background:linear-gradient(180deg, color-mix(in oklab, #111a34 85%, transparent), #0c1430); border:1px solid #1c2447; border-radius:18px; padding:1.2rem}

/* Sections */
section{padding:3.5rem 0}
.section-title{font-size:1.8rem; margin:0 0 1rem}
.sub{color:var(--muted)}

/* Grids */
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem}
.grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.1rem}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.feature{display:flex; gap:.9rem}
.feature .icon{min-width:40px;height:40px;border-radius:12px; display:grid;place-items:center; background:#0d1a38; border:1px solid #213066}

/* Badges */
.badges{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.badge{background:#0e1a36; border:1px solid #213066; color:#c7d2fe; padding:.45rem .7rem; border-radius:999px; font-size:.85rem}

/* CTA band */
.shadow-xl{box-shadow:0 25px 60px rgba(2,8,23,.45)}
.cta-band{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 1.4rem; border-radius:18px; border:1px solid #1e2650; background:linear-gradient(90deg, #0f1733, #0b1430)}

/* Footer */
footer{border-top:1px solid #1c2447; padding:2.2rem 0; color:var(--muted)}
.pill{display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .6rem; border-radius:999px; border:1px solid #25306a; background:#0f1b3e; font-size:.8rem}

/* Forms */
input, textarea{width:100%; background:#0f1838; color:var(--text); border:1px solid #223063; border-radius:12px; padding:.9rem; outline:none}
input:focus, textarea:focus{box-shadow:var(--ring); border-color:var(--brand)}
label{font-size:.9rem; color:var(--muted)}

/* Mobile menu */
.menu-btn{display:none; border:1px solid #243056; background:#0f1a38; color:var(--text); padding:.6rem .8rem; border-radius:12px; font-weight:600}
.menu-btn[aria-expanded="true"]{outline:none; box-shadow:var(--ring)}
@media (max-width:900px){
  .menu-btn{display:inline-flex; align-items:center; gap:.5rem}
  nav .links{position:absolute; right:4%; top:64px; display:none; flex-direction:column; background:linear-gradient(180deg,#0f1733,#0b1430); border:1px solid #1e2650; border-radius:16px; padding:.8rem; width:min(320px,92%); box-shadow:0 20px 50px rgba(2,8,23,.55)}
  nav .links.open{display:flex}
  nav .links .btn{width:100%; justify-content:center}
  .lang-switch{margin-left:.6rem}
}