:root{
  --bg: radial-gradient(1200px 800px at 20% 10%, #f1f5ff 0%, #e5f0ff 18%, #e9fdf4 40%, #ffffff 70%, #ffffff 100%);
  --text: #0f172a;
  --muted: #334155;
  --brand: #2563eb;
  --accent: #16a34a;
  --card: #ffffff;
  --ring: rgba(37,99,235,0.35);
  --border: #e2e8f0;
  --shadow: 0 12px 35px rgba(2,6,23,0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color:var(--text);
  background: var(--bg);
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding:24px;
}

.brand{
  width:100%;
  max-width:960px;
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{ width:42px; height:42px; }
.name{ font-weight:800; letter-spacing:0.2px; }

.card{
  width:100%;
  max-width:960px;
  text-align:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:48px 28px;
  box-shadow:var(--shadow);
}

.card h1{
  margin:0 0 8px;
  font-size:clamp(28px, 5vw, 44px);
  letter-spacing:-0.4px;
}

.tag{
  margin:0 auto 26px;
  color:#475569;
  max-width:560px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid var(--border);
  margin:10px 0 24px;
}

.dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--brand);
  animation: bounce 1.2s infinite ease-in-out;
}
.dot:nth-child(2){ animation-delay: .2s; background: #3b82f6; }
.dot:nth-child(3){ animation-delay: .4s; background: var(--accent); }

@keyframes bounce{
  0%,80%,100%{ transform: translateY(0); opacity: .5; }
  40%{ transform: translateY(-6px); opacity: 1; }
}

.pill-text{ color:#475569; font-size:14px; }

.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  padding:14px 18px;
  border-radius:12px;
  text-decoration:none;
  background: linear-gradient(180deg, var(--brand), #1d4ed8);
  color:#fff;
  font-weight:700;
  border: none;
}

.link{
  display:inline-block;
  text-decoration:none;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  color:var(--muted);
  background:#fff;
}

.foot{
  width:100%;
  max-width:960px;
  display:flex;
  justify-content:center;
  color:#64748b;
  padding-bottom:8px;
}

/* Small screens */
@media (max-width: 480px){
  .card{ padding:36px 20px; }
}