:root{
  --bg-1:#071028;
  --bg-2:#081a2b;
  --glass: rgba(255,255,255,0.03);
  --accent-1:#00d4b8;
  --accent-2:#2bd2ff;
  --muted:#9fb2c6;
  --radius:12px;
  --container:1100px;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; background: radial-gradient(800px 400px at 10% 15%, rgba(43,210,255,0.06), transparent 15%), linear-gradient(180deg,var(--bg-1),var(--bg-2)); color:#eaf6f8; font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased}
a{color:var(--accent-2); text-decoration:none}
.wrap{max-width:var(--container); margin:0 auto; padding:24px}
.ribbon{position:sticky; top:12px; z-index:60; margin:12px; padding:8px; display:flex; gap:8px; align-items:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008)); border-radius:999px; border:1px solid rgba(255,255,255,0.03)}
.pill{padding:6px 10px; border-radius:999px; font-weight:700; font-family:'Space Grotesk',sans-serif; font-size:13px; display:inline-flex; gap:8px; align-items:center; background:rgba(0,0,0,0.18); color:var(--muted)}
header{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0}
.brand{display:flex; gap:14px; align-items:center}
.logo img{width:64px; height:64px}
.title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:#ffffff}
.muted{color:var(--muted); font-size:13px}
nav{display:flex; gap:12px; align-items:center}
nav a{font-weight:600; color:var(--muted); padding:8px 10px; border-radius:8px}
nav a.cta{background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:#021323; padding:8px 12px}
.hero{display:grid; grid-template-columns:1fr 380px; gap:20px; align-items:stretch}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:var(--radius); padding:22px; border:1px solid rgba(255,255,255,0.03); box-shadow:0 18px 40px rgba(2,10,20,0.6)}
.hero h1{font-family:'Space Grotesk', sans-serif; font-size:36px; margin:0 0 8px; color:#fff}
.lead{color:var(--muted); margin:0 0 14px}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
.btn{padding:10px 14px; border-radius:10px; font-weight:700; border:1px solid rgba(255,255,255,0.04); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:var(--accent-1)}
.btn.ghost{background:transparent; color:var(--accent-2); border-color:rgba(43,210,255,0.14)}
.facts{display:grid; gap:12px}
.fact{padding:14px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border:1px solid rgba(255,255,255,0.02); text-align:center}
.fact .k{font-size:12px; color:var(--muted)}
.fact .v{font-weight:700; color:#fff}
.section-title{font-family:'Space Grotesk'; font-size:22px; margin:0 0 10px; color:var(--accent-2)}
.small{padding:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.service h3{margin:0 0 6px}
.meta{margin-top:12px; color:var(--muted); font-size:14px}
footer{margin-top:40px; padding:22px 0; text-align:center; color:var(--muted)}
@media (max-width:980px){.hero{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr}}