:root{
  --page-bg-image:
    radial-gradient(circle at 12% 0%, rgba(255,45,155,.20), transparent 58%),
    radial-gradient(circle at 88% 8%, rgba(255,45,155,.16), transparent 58%),
    radial-gradient(circle at 50% 96%, rgba(255,45,155,.12), transparent 62%);
}

.ux-hero{
  --hero-bg-image:
    radial-gradient(1200px 520px at 14% -120px, rgba(255,45,155,.18), transparent 60%),
    radial-gradient(900px 360px at 88% -140px, rgba(255,45,155,.14), transparent 60%),
    radial-gradient(760px 260px at 50% -80px, rgba(255,45,155,.10), transparent 55%);
}

.ux-hero h1{
  max-width:24ch;
}

.ux-timeline{
  margin-top:clamp(18px, 3vw, 26px);
  --marker-size:44px;
  list-style:none;
  padding:0;
  display:grid;
  gap:12px;
}

.ux-timeline__item{
  display:grid;
  grid-template-columns:var(--marker-size) 1fr;
  gap:14px;
  align-items:center;
}

.ux-timeline__marker{
  width:var(--marker-size);
  height:var(--marker-size);
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:700;
  color:var(--mag);
  background:color-mix(in oklab, var(--bg-2), transparent 12%);
  border:2px solid var(--mag);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--mag), transparent 88%);
}

.ux-timeline__content{
  padding:14px 14px 12px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--line), var(--text) 12%);
  background:linear-gradient(160deg,
    color-mix(in oklab, var(--bg-2), transparent 8%),
    color-mix(in oklab, var(--bg-2), transparent 0%));
  box-shadow:0 18px 40px rgba(0,0,0,.38);
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:50rem;
}

.ux-timeline__content h3{
  margin:0;
  font-size:1.05rem;
  letter-spacing:.01em;
}

.ux-timeline__content p{
  margin:0;
  color:color-mix(in oklab, var(--text), var(--muted) 26%);
}

.ux-field-full{
  grid-column:1/-1;
}

#ux-calculator .calc-section--wide{
  grid-template-columns:1fr;
}

#ux-calculator{
  --calc-accent:var(--mag);
}

#ux-calculator .calc-section--wide h4{
  color:var(--mag);
}

.ux-case-icon{
  width:44px;
  height:44px;
  margin-bottom:8px;
  color:var(--mag);
}

body::before{
  background:
    linear-gradient(135deg,
      rgba(255,45,155,.50),
      rgba(255,45,155,.04)),
    linear-gradient(150deg,
      rgba(255,45,155,.28),
      rgba(255,45,155,.02));
}

body::after{
  background:
    linear-gradient(165deg,
      rgba(255,45,155,.32),
      rgba(255,45,155,.04));
}

.ux-contact p{
  max-width:60ch;
}

#ux-pricing .plan h3{
  color:var(--mag);
}

#ux-pricing .plan{
  --accent-color:var(--mag);
}