/* ── Home page specific styles ───────────────────────────────── */

/* Hero */
.hero {
  padding: 90px 0 70px;
  background: linear-gradient(160deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/media/hero-bg.jpg') center/cover no-repeat;
  opacity: .06;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 36px;
  align-items: center;
  position: relative;
}
.hero-box {
  background: var(--color-card);
  border: var(--border-line);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.hero h1 { max-width: 860px; }
.hero-lead { font-size: var(--font-size-lg); max-width: 800px; color: var(--color-muted); margin-bottom: 0; }

/* Video intro section */
.intro-video-wrap {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
  margin-top: 28px;
}
.intro-video-wrap video {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding: 60px 0 48px; }
}