/* ==========================================================================
   Home page
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-7) var(--space-6);
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(36,81,214,0.08), transparent 60%),
    var(--color-bg);
}
.hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.hero__copy { max-width: 620px; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__visual { display: flex; justify-content: center; }
.hero__diagram { width: 100%; max-width: 420px; height: auto; }

@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---------- Intro / trust ---------- */
.intro__grid {
  display: grid;
  gap: var(--space-5);
}
.intro__body p:first-child { margin-bottom: var(--space-3); }
.intro__body p { margin-bottom: var(--space-3); }

@media (min-width: 860px) {
  .intro__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-6); }
}

/* ---------- Services overview ---------- */
.service-card { display: flex; flex-direction: column; gap: var(--space-2); }
.service-card__icon {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(36,81,214,0.08);
  margin-bottom: var(--space-1);
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card p { font-size: 0.94rem; }

.services-overview__more { text-align: center; margin-top: var(--space-6); }

/* ---------- Why choose ---------- */
.why-grid { margin-top: var(--space-2); }
.why-item {
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.why-item h4 { color: #fff; margin-bottom: 0.4rem; font-size: 1rem; }
.why-item p { font-size: 0.9rem; }

/* ---------- Partner ---------- */
.partner__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.partner__grid p.lede { margin-block: var(--space-3) var(--space-5); }

@media (min-width: 900px) {
  .partner__grid { grid-template-columns: 0.85fr 1.15fr; }
}

/* CTA band styles now live in styles/playGlobal.css (shared across pages). */