:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#6b7280;
  --card:#fafafa;
  --border:#e5e7eb;
  --ring:rgba(2,6,23,.06);
}
.theme-dark{
  --bg:#0b0d10;
  --fg:#e5e7eb;
  --muted:#97a2ae;
  --card:#0f1216;
  --border:#1e232b;
  --ring:rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--fg);
  display:grid;
  place-items:center;
}
.card{
  width:min(720px,92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:clamp(36px,6vw,60px);
  box-shadow:0 20px 60px var(--ring);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.badge{
  position:absolute;
  top:16px; left:16px;
  color:var(--muted);
  font-size:11px;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  letter-spacing:.4px;
  opacity:.9;
}
.icon{
  width:96px;height:96px;margin:12px auto 24px;
  display:grid;place-items:center;
  border-radius:24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .04));
  border:1px solid var(--border);
}
.icon svg{width:56px;height:56px;stroke:var(--fg);stroke-width:1.5;fill:none;}

h1{
  margin:8px 0 12px;
  font-size:clamp(26px,4.6vw,38px);
  font-weight:700;
}

.lead{
  margin:0 auto;
  color:var(--muted);
  line-height:1.75;
  max-width:560px;
  font-size:clamp(14px,2.6vw,16px);
}
.card:before, .card:after{
  content:""; position:absolute; border-radius:999px; filter:blur(40px);
  opacity:.25; pointer-events:none;
}
.card:before{ width:260px;height:260px;top:-80px;left:-80px;background:radial-gradient(30% 30% at 50% 50%,#60a5fa44,transparent 70%);}
.card:after{ width:220px;height:220px;bottom:-60px;right:-60px;background:radial-gradient(30% 30% at 50% 50%,#f472b644,transparent 70%);}