/* ============================================================
   HOME PAGE: hero + closing CTA section
   Only layout unique to this page lives here.
   ============================================================ */

.hero {
  padding: var(--space-2xl) calc(var(--space-lg) + var(--space-sm)) var(--space-xl);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-md);
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(218, 76, 122, 0.10), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(0, 119, 131, 0.08), transparent 50%);
}
[data-theme="dark"] .hero { background: none; }

.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--brand-pink);
  margin-bottom: var(--space-sm);
}
[data-theme="dark"] .hero-eyebrow { color: #e888a8; }

.hero h1 {
  font-size: var(--text-4xl);
  line-height: 1.08;
  margin-bottom: var(--space-sm);
}
.hero p.hero-sub {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 440px;
  margin-bottom: var(--space-md);
}
.hero-cta-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.hero-art {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.hero-art img { max-width: 92%; max-height: 92%; object-fit: contain; }

/* light mode: no backing needed */
.hero-art { background: transparent; }
/* dark mode: horizontal fade so the dark-lined logo stays legible
   (transparent -> solid through the middle third -> transparent) */
[data-theme="dark"] .hero-art {
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.92) 33%,
    rgba(255,255,255,0.92) 66%,
    rgba(255,255,255,0) 100%
  );
}

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding: var(--space-xl) calc(var(--space-md) + var(--space-xs)); text-align: center; }
  .hero p.hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta-row { justify-content: center; }
  .hero h1 { font-size: var(--text-3xl); }
}

/* ---- Why this method (feature row) section wrapper ---- */
.section {
  padding: var(--space-xl) 0;
}
.section h2 {
  font-size: var(--text-2xl);
  text-align: center;
  margin-bottom: var(--space-lg);
}