:root{
  --brand:#2d67f6;
  --bg:#0b0e14;
  --fg:#e6e8ee;
  --muted:#9aa0ad;
  --card:#0f131b;
  --ring:rgba(45,103,246,0.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: var(--bg);
  color: var(--fg);
  line-height:1.6;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
}
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(150%) blur(12px);
  background:linear-gradient(to bottom, rgba(11,14,20,0.85), rgba(11,14,20,0.45));
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.nav{
  display:flex; align-items:center; justify-content:center;
  padding:18px 0;
}
.nav img{height:44px; width:auto; display:block; filter: drop-shadow(0 0 0.35rem rgba(255,255,255,0.35));}

.hero{
  position:relative;
  padding: clamp(72px, 12vh, 140px) 0 72px;
  overflow:hidden;
  isolation:isolate;
}
.hero h1{
  font-size: clamp(32px, 6vw, 64px);
  line-height:1.05;
  margin: 0 0 16px;
  letter-spacing:-0.02em;
}
.hero p.lead{
  font-size: clamp(18px, 2.4vw, 22px);
  color:var(--muted);
  max-width: 800px;
  margin: 0 0 28px;
}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px;
  background:linear-gradient(180deg, var(--brand), #1c48cc);
  color:white; border:none; border-radius:14px;
  font-weight:700; letter-spacing:0.2px;
  box-shadow: 0 10px 30px rgba(45,103,246,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .08s ease, box-shadow .2s ease;
}
.cta:hover{transform: translateY(-1px); text-decoration:none; box-shadow: 0 16px 40px rgba(45,103,246,0.45), inset 0 1px 0 rgba(255,255,255,0.35);}
.cta:active{transform: translateY(0) scale(.99);}

.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02); border-radius:999px; color: var(--muted); font-size:13px;
  margin-bottom:16px;
}

.grid{
  display:grid; gap:18px; grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 4;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px; padding:20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  min-height:160px;
}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0;color:var(--muted)}

.features{padding: 24px 0 72px;}
.callout{
  padding:48px; border-radius:22px;
  background: radial-gradient(75% 120% at 0% 0%, rgba(45,103,246,0.10) 0, rgba(45,103,246,0.0) 60%),
              radial-gradient(85% 140% at 100% 100%, rgba(45,103,246,0.12) 0, rgba(45,103,246,0.0) 60%),
              var(--card);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.callout h2{margin-top:0; font-size:28px}
.callout p{color:var(--muted)}
.center{text-align:center}

footer{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:28px 0 42px; margin-top:72px; color:var(--muted);
}
footer .links{display:flex; gap:18px; justify-content:center}
footer a{color:var(--muted)}
footer a:hover{color:var(--fg)}

/* Static diffused blue effects */
.bg-blobs{
  position:absolute; inset: -10% -10% auto -10%;
  height:120%; z-index:-1; pointer-events:none; filter: blur(68px) saturate(140%);
  background:
    radial-gradient(30% 40% at 20% 20%, rgba(45,103,246,0.35), transparent 60%),
    radial-gradient(28% 35% at 70% 10%, rgba(45,103,246,0.25), transparent 60%),
    radial-gradient(25% 30% at 50% 60%, rgba(45,103,246,0.22), transparent 60%),
    radial-gradient(35% 40% at 90% 70%, rgba(45,103,246,0.18), transparent 60%);
}

@media (max-width: 900px){
  .card{grid-column: span 6;}
}
@media (max-width: 640px){
  .card{grid-column: span 12;}
  .callout{padding:28px}
}