@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&family=Inter:wght@300;400;600&display=swap');

:root{
  --ink:#0F1720; --navy:#0B2B4E; --teal:#00A7A0; --slate:#0b1017; --text:#e2e8f0;
  --silver:#cbd5e1; --line: rgba(255,255,255,.12); --glass: rgba(255,255,255,.05);
  --space-2:.25rem; --space-4:.5rem; --space-8:1rem; --space-12:1.5rem; --space-16:2rem; --space-24:3rem;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text);
  background: radial-gradient(1000px 700px at 10% -10%, #132a42 0%, #0d1624 45%, #090f16 100%);
  letter-spacing:.2px}
a{color:#b7f7ff; text-underline-offset:2px}
.container{max-width:1200px; margin:auto; padding:0 var(--space-8)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:980px){.grid-3,.grid-2{grid-template-columns:1fr}}

.hero{position:relative; min-height:78vh; display:grid; place-items:center; overflow:hidden}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,14,20,.55), rgba(9,14,20,.9))}
.hero .content{position:relative; text-align:center; max-width:1000px; padding:2rem}
h1,h2,h3{font-family:Montserrat,Inter,sans-serif; letter-spacing:.02em}
h1{line-height:1.02}
.badge{display:inline-block; border:1px solid var(--line); background:var(--glass); border-radius:999px; padding:.35rem .6rem; font-size:.82rem; opacity:.9}
.btn{display:inline-block; text-decoration:none; border-radius:10px; padding:12px 18px; border:1px solid rgba(255,255,255,.18); color:#e6fbff; transition:.25s ease; backdrop-filter: blur(6px)}
.btn.primary{background:linear-gradient(90deg, rgba(0,167,160,.8), rgba(0,167,160,.6)); box-shadow:0 0 20px rgba(0,167,160,.35), 0 0 40px rgba(0,167,160,.25)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{background:rgba(255,255,255,.06)}
.card{position:relative; overflow:hidden; border-radius:16px; padding:1.2rem; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--line); min-height: 280px}
.card h3{margin:.2rem 0 .4rem}
.card p{opacity:.92}
.figure{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--glass)}
.figure img{display:block; width:100%; height:auto}
.list{margin:.6rem 0 0 0; padding-left:1.1rem}
.kpis{display:grid; gap:.6rem; grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:1rem; text-align:center}
.kpi strong{display:block; font-family:Montserrat; font-weight:800; font-size:1.2rem}
.kpi span{opacity:.85; font-size:.85rem}
.section{padding:2rem 0}