/* ============================================================
   components/platform-band.css — the "platform." band (.dd-platform)
   The reusable studio-strength highlight: a dreamy pink moment with a
   mono kicker, a short display heading, three dot-marked squircle
   points, and an optional action. Rendered by
   partials/_platform_band.html and reused on the home page (P4) and
   each service page with tailored copy (P5). Token-only.
   ============================================================ */

.dd-platform {
  position: relative;
  overflow: hidden;
  padding: var(--space-14) 0;
  /* White base = same colour as the neighbouring sections, so the band has
     NO hard top/bottom edge. The pink "moment" is a soft centered glow
     (::before) that fades to transparent before it reaches any edge. */
  background: var(--bg);
  isolation: isolate;
}

/* The dreamy pink wash — a centered coral bloom with a peach + coral haze,
   each fading to transparent (i.e. back to the white base) well before the
   edges, so the band melts into the white sections above and below. */
.dd-platform::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* White envelope (TOP of the stack): forces the top + bottom strips
       back to the page colour so the band has NO coloured edge to seam
       against its white neighbours, while the middle stays transparent so
       the glow below shows through. */
    linear-gradient(180deg,
      var(--bg) 0%,
      transparent 16%,
      transparent 84%,
      var(--bg) 100%),
    /* The dreamy pink wash, kept toward the vertical centre. */
    radial-gradient(82% 50% at 50% 50%, color-mix(in srgb, var(--coral-100) 88%, transparent) 0%, transparent 78%),
    radial-gradient(46% 40% at 84% 34%, color-mix(in srgb, var(--peach-200) 52%, transparent) 0%, transparent 72%),
    radial-gradient(44% 42% at 12% 66%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 74%);
}
.dd-platform::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.04;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

.dd-platform__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.dd-platform__head {
  max-width: 46rem;
  margin-bottom: var(--space-9);
}

.dd-platform__kicker {
  margin-bottom: var(--space-4);
}

.dd-platform__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--text);
}

.dd-platform__lead {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-soft);
}

/* ---- the three points ---- */
.dd-platform__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.dd-platform__point {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  /* a touch translucent so the dreamy band glows through the card */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.dd-platform__point .dd-dot {
  margin-bottom: var(--space-2);
}

.dd-platform__point-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--text);
}

.dd-platform__point-text {
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* ---- optional action ---- */
/* The call to act, and beside it the quieter "see how it works." (#114). Left
   with the heading above them; they wrap onto two lines on a phone. */
.dd-platform__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-9);
}

@media (max-width: 1024px) {
  .dd-platform__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 40rem;
  }
}

@media (max-width: 768px) {
  .dd-platform {
    padding: var(--space-12) 0;
  }
}