/* ============================================
   Hero Section — Dark Gradient
   ============================================ */

.hero {
  min-height: 90vh;
  background: var(--surface-white);
  padding: var(--section-padding) var(--container-padding);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 2;
}

@media (min-width: 769px) {
  .hero-grid {
    grid-template-columns: 55fr 45fr;
    gap: 3rem;
    align-items: center;
  }
}

/* Noise texture overlay — disabled for light hero */

.hero__content,
.hero__model {
    position: relative;
    z-index: 2;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  max-width: 600px;
}

.hero__eyebrow {
  color: var(--text-orange);
}

.hero__title {
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 0;
}

.hero__title .text-accent {
  color: var(--primary-orange);
}

.hero__description {
  color: var(--text-body);
  font-size: 1.125rem;
  max-width: 480px;
  line-height: 1.7;
}

.hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__model {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero__model model-viewer {
  width: 100%;
  height: 500px;
  --poster-color: transparent;
}

/* Orange glow beneath model */
.hero__model::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 40px;
  background: radial-gradient(ellipse, rgba(255, 103, 0, 0.25), transparent);
  filter: blur(20px);
  pointer-events: none;
}

/* Background decorative shape */
.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 103, 0, 0.08), transparent);
  border-radius: 50%;
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
  }
}

/* @keyframes float is defined in animations.css */

/* ============================================
   Hero — Subpage Variant
   ============================================ */

.hero--subpage {
  min-height: 45vh;
  grid-template-columns: 1fr;
  text-align: center;
}

.hero--subpage .hero__content {
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
}

/* ============================================
   Hero — Legacy compat (solutions-hero class)
   ============================================ */

.solutions-hero {
  background: linear-gradient(135deg, var(--dark-blue) 0%, var(--dark-deep) 100%);
  padding: var(--section-padding) 0;
}

.solutions-hero h1 {
  color: var(--text-on-dark);
}

.solutions-hero p {
  color: var(--text-on-dark-muted);
}

.solutions-hero .eyebrow {
  color: var(--primary-yellow);
}

/* ============================================
   Hero — Light Variant (for non-homepage)
   ============================================ */

.hero--light {
  background: linear-gradient(135deg, var(--gray-50), var(--white));
}

.hero--light .hero__title {
  color: var(--gray-900);
}

.hero--light .hero__description {
  color: var(--gray-600);
}

.hero--light .hero__eyebrow {
  color: var(--primary-orange);
}