:root{
  --brand:#6D28D9;
  --ink:#0f172a;
  --muted:#475569;
  --line:rgba(2,6,23,.10);
  --bg:#f6f7fb;
}

body{ background: var(--bg); }

.section-decor{ position:relative; overflow:hidden; }
.section-decor:before{
  content:""; position:absolute; top:-140px; left:-180px;
  width:420px; height:420px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(109,40,217,.18), transparent 60%);
  pointer-events:none;
}
.section-decor:after{
  content:""; position:absolute; bottom:-160px; right:-220px;
  width:520px; height:520px; border-radius:999px;
  background: radial-gradient(circle at 70% 40%, rgba(139,92,246,.18), transparent 60%);
  pointer-events:none;
}
.dots{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(109,40,217,.14) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  opacity:.22;
  pointer-events:none;
  mask-image: radial-gradient(circle at 60% 10%, black 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 60% 10%, black 0%, transparent 60%);
}

.card{
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:22px;
  box-shadow:0 16px 60px rgba(2,6,23,.08);
}

.hero-capsule{
  background:
    radial-gradient(800px 400px at 20% 10%, rgba(109,40,217,.18), transparent 55%),
    radial-gradient(800px 400px at 80% 20%, rgba(139,92,246,.14), transparent 55%),
    linear-gradient(180deg, #fff, #fff);
  border:1px solid rgba(2,6,23,.08);
  border-radius:30px;
  box-shadow:0 22px 70px rgba(2,6,23,.10);
}

.icon-badge{
  width:52px; height:52px;
  border-radius:16px;
  background: rgba(109,40,217,.12);
  display:grid; place-items:center;
  border:1px solid rgba(109,40,217,.18);
  color: var(--brand);
  font-weight:800;
}