:root{
  --bg:#0b0f1a;
  --panel:#0e1323;
  --text:#e5e7eb;
  --muted:#a5b4fc;
  --brand1:#38bdf8;
  --brand2:#6366f1;
  --ring: 0 0 0 2px rgba(99,102,241,.4), 0 0 40px rgba(56,189,248,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.12), transparent),
              radial-gradient(800px 400px at 90% 10%, rgba(56,189,248,.12), transparent),
              var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(8px);
  background: linear-gradient(180deg, rgba(11,15,26,.9), rgba(11,15,26,.6));
  border-bottom:1px solid rgba(148,163,184,.12);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.logo{display:flex; align-items:center; gap:14px}
.logo img{height:76px; width:auto; filter: drop-shadow(0 2px 18px rgba(56,189,248,.35));}
.logo .word{height:24px; opacity:.95}
.cta-btn{
  padding:12px 18px; border-radius:14px; font-weight:600; letter-spacing:.3px;
  background: linear-gradient(135deg,var(--brand1),var(--brand2));
  border:0; color:#061018; box-shadow: var(--ring); cursor:pointer;
}
.hero{padding:80px 0 40px}
.grid{display:grid; gap:24px}
.hero-grid{grid-template-columns: 1.2fr .8fr; align-items:center}
h1{font-size: clamp(32px, 6vw, 64px); line-height:1.05; margin:0}
.subtitle{font-size: clamp(16px, 2.2vw, 20px); color:#c7d2fe; margin:18px 0 28px; max-width:60ch}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(148,163,184,.12); border-radius:20px; padding:22px;
  box-shadow: 0 10px 40px rgba(2,6,23,.5);
}
.media{border-radius:20px; overflow:hidden; border:1px solid rgba(148,163,184,.12)}
.media img, .media picture, .media svg{display:block; width:100%; height:auto}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.badge{padding:6px 10px; border-radius:999px; background:rgba(56,189,248,.12); color:#a5f3fc; border:1px solid rgba(56,189,248,.25); font-size:12px}
.section{padding:60px 0}
.section h2{font-size: clamp(24px, 4.2vw, 40px); margin:0 0 12px}
.kicker{letter-spacing:.22em; text-transform:uppercase; color:#a5b4fc; font-size:12px; margin-bottom:8px}
.solutions{grid-template-columns: repeat(3, 1fr)}
.solution-card h3{margin:10px 0 8px}
ul.check{
  list-style:none; padding:0; margin:10px 0 0;
}
ul.check li{padding-left:26px; position:relative; margin:8px 0; color:#cbd5e1}
ul.check li:before{content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:5px; 
  background:linear-gradient(135deg,var(--brand1),var(--brand2)); box-shadow: var(--ring)}
.split{grid-template-columns: 1fr 1fr; align-items:center}
.footer{padding:30px 0; border-top:1px solid rgba(148,163,184,.12); color:#94a3b8; font-size:14px}
small.note{display:block;color:#94a3b8;margin-top:8px}
@media (max-width: 980px){
 .hero-grid, .solutions, .split{grid-template-columns:1fr}
 .logo .word{display:none}
}