/* ============================================================
   sections.css — Page-section layout
   ------------------------------------------------------------
   Goal: arrange the reusable components from components.css into
   the page's sections. This file owns layout/positioning that is
   specific to a section (the nav bar, the hero canvas, the card
   grids, the footer grid) — not the look of the components
   themselves.

   Contains: nav, hero, the feature & industry grids, the FAQ
   wrapper, the final CTA, and the footer — plus the responsive
   rules scoped to those sections (each media query kept next to
   the rule it modifies).

   Depends on: tokens.css + components.css (loads LAST so section
   layout can sit on top of the component styles).
   ============================================================ */

/* ─── 1. Nav — white header, Belo-style logo in Rausch ─── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-bg-tertiary);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 80px; height: 80px;
}
.nav .logo {
  color: var(--color-rausch); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px;
}
.nav .logo-mark { color: var(--color-rausch); font-size: 20px; }
.nav-links { display: flex; gap: 8px; align-items: center; }
.nav-links a {
  color: var(--color-ink); font-size: 14px; line-height: 18px; font-weight: 600;
  padding: 12px 16px; border-radius: var(--radius-pill);
  transition: background var(--motion-fast) var(--ease-standard);
}
.nav-links a:hover { background: var(--color-bg-secondary); }
.nav-links a.is-active {
  color: var(--color-rausch);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav-links .muted { color: var(--color-ink-secondary); font-weight: 500; }
.nav .btn { padding: 12px 18px; font-size: 14px; line-height: 18px; }

/* ─── 2. Hero — white canvas, photographic, rounded-pill status badge ─── */
.hero {
  background: var(--color-bg);
  color: var(--color-ink);
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 64px 24px 0;
}
.hero-inner > .hero-portrait { margin-bottom: 0; }
/* Soft warm wash behind the portrait — restrained, no neon */
.hero-wave {
  position: absolute; inset: 0;
  background:
    radial-gradient(56% 48% at 18% 6%,  rgba(255,56,92,0.07),  transparent 70%),
    radial-gradient(50% 50% at 90% 30%, rgba(0,166,153,0.06), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }
.hero-h1 {
  font-family: var(--font-cereal);
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink);
  margin-bottom: 12px;
}
.hero-h1 em { color: var(--color-rausch); font-style: normal; font-weight: 800; }
.hero-sub {
  font-family: var(--font-cereal);
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.3;
  color: var(--color-ink-secondary);
  font-weight: 400;
  margin-bottom: 40px;
}
.hero-portrait {
  position: relative;
  width: clamp(364px, 47vw, 598px);
  margin: 0 auto;
  z-index: 3;
}
.hero-photo-maya { display: block; width: 100%; height: auto; }

/* ─── 3. Features — 3-column grid of .feat cards ─── */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 16px; }

/* ─── 4. Industries — 3-column grid of .ind-card cards ─── */
.ind-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 16px; }

/* ─── 6. FAQ — wrapper around the .faq-item accordion list ─── */
.faq { margin-top: 16px; }

/* ─── 7. Final CTA + footer ─── */
.cta-final {
  background: var(--color-bg);
  padding-top: 0;
}
.cta-final .container { padding-top: 80px; padding-bottom: 96px; }
.cta-final h2 { margin-bottom: 12px; }

.footer { background: var(--color-bg-secondary); border-top: 1px solid var(--color-divider); }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px;
  align-items: center;
  padding-top: 40px; padding-bottom: 40px;
}
.footer .logo {
  color: var(--color-rausch); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px;
}
.footer .logo-mark { color: var(--color-rausch); }
.footer-tag { color: var(--color-ink-secondary); font-size: 14px; line-height: 18px; margin-top: 6px; }
.footer-cols { display: flex; flex-direction: column; gap: 10px; }
.footer-cols a {
  color: var(--color-ink); font-size: 14px; line-height: 18px;
  transition: text-decoration var(--motion-fast) var(--ease-standard);
}
.footer-cols a:hover { text-decoration: underline; }
.footer-copy { color: var(--color-ink-secondary); font-size: 14px; line-height: 18px; text-align: right; }

/* ─── responsive — section layout ─── */
@media (max-width: 1128px) {
  .nav-inner { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 960px) {
  .feat-grid, .ind-grid { grid-template-columns: 1fr; }
}
@media (max-width: 744px) {
  .nav-inner { padding-left: 24px; padding-right: 24px; height: 64px; }
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-copy { text-align: left; }
  .hero { padding: 40px 24px 0; }
  .hero-portrait { width: 312px; }
}