/* Marketing site: hero, solutions, benefits, steps, partners, CTA. */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 15% 15%, rgba(46, 148, 87, 0.55), transparent 55%),
    radial-gradient(100% 120% at 85% 25%, rgba(245, 166, 35, 0.35), transparent 50%),
    linear-gradient(160deg, #0f3d24 0%, #16632f 45%, #1b7a3d 100%);
  color: #fff;
  padding-block: var(--space-16) var(--space-24);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 60px);
  pointer-events: none;
}

.hero .container {
  position: relative;
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero .container { grid-template-columns: 1.1fr 0.9fr; }
}

.hero h1 {
  color: #fff;
  font-size: var(--text-4xl);
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .hero h1 { font-size: var(--text-5xl); }
}

.hero p.lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-lg);
  max-width: 46ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block: var(--space-8);
}

.trust-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
}

.avatar-stack {
  display: flex;
}

.avatar-stack .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-primary-700);
  margin-left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
}
.avatar-stack .avatar:first-child { margin-left: 0; }

.hero-cards {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.hero-cards .stat-card { color: var(--color-ink-900); }
.hero-cards .stat-card strong { display: block; font-size: var(--text-base); }
.hero-cards .stat-card span { font-size: var(--text-sm); color: var(--color-ink-500); }

.hero-cards .stat-card-wide {
  grid-column: 1 / -1;
}

@media (min-width: 480px) {
  .hero-cards { grid-template-columns: 1fr 1fr; }
}

/* ---- Solutions / benefits cards ---- */

.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.solution-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.solution-card h3 { font-size: var(--text-xl); }

/* ---- How it works steps ---- */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

.step {
  position: relative;
  padding-top: var(--space-8);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Partners strip ---- */

.partners-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-8);
}

.partner-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-ink-300);
  letter-spacing: 0.02em;
}

/* ---- CTA band ---- */

.cta-band {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  text-align: center;
}

.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.85); }