body{
  background:
    radial-gradient(1000px 600px at 15% 10%, rgba(79,124,255,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 20%, rgba(34,197,94,.12), transparent 55%),
    linear-gradient(180deg,#f8fafc 0%,#eef2ff 40%,#f1f5f9 100%);
}
.hero{
  border-radius:calc(var(--radius) + 12px);
  padding:34px 26px;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.hero h1{margin:0 0 10px;font-size:clamp(28px,3.6vw,44px);line-height:1.1}
.hero p{margin:0;color:var(--muted);max-width:70ch}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.tile{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow2);
  padding:16px;
}
.tile h3{margin:2px 0 8px}
.tile p{margin:0;color:var(--muted);line-height:1.55}
.pricing{margin-top:14px}
.plans{display:flex;gap:14px;flex-wrap:wrap}
.plan{
  flex:1 1 260px;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow2);
  padding:16px;
}
.plan .tag{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.18);font-weight:900;font-size:12px}
.plan .price{font-size:28px;font-weight:900;margin:8px 0 10px}
.plan ul{margin:0;padding-left:18px;color:var(--muted)}
@media (max-width: 980px){.grid3{grid-template-columns:1fr}}