html,body{height:100%}
body{
  background: radial-gradient(900px 500px at 50% -10%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(1200px 700px at 50% 110%, rgba(124,58,237,.16), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  -webkit-font-smoothing: antialiased;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

.section{
  padding: 86px 0;
  position: relative;
}

.section--tight{ padding: 64px 0; }

.center{text-align:center}

.h1{
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.7px;
  margin: 14px 0 10px;
}
.h2{
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.35px;
  margin: 10px 0 12px;
}
.lead{
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--muted);
  margin: 0;
}
.text{color:var(--muted); margin:0}

.grid{display:grid; gap:18px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media(min-width:960px){
  .grid--2{grid-template-columns: 1fr 1fr}
  .grid--3{grid-template-columns: repeat(3,1fr)}
}

.stack{display:flex; flex-direction:column; gap:14px}
.spacer{height:22px}

/* dotted overlay like Framer */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .16;
  mask-image: radial-gradient(540px 320px at 50% 12%, #000 20%, transparent 80%);
  z-index:-1;
}