/* ============================================================
   3D hero (new_hero3d.md) — sits above the existing video hero
   ============================================================ */

.hero3d-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
  padding: 0;
}

/* Soft blurred background accent blobs (Section 1, optional shapes) */
.hero3d-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
  animation: hero3d-drift 18s ease-in-out infinite alternate;
}
.hero3d-blob--1 { width: 420px; height: 420px; background: #a9d2ff; top: -120px; right: -80px; }
.hero3d-blob--2 { width: 320px; height: 320px; background: #dce9fb; bottom: -100px; left: -60px; animation-duration: 22s; animation-delay: -6s; }
.hero3d-blob--3 { width: 200px; height: 200px; background: #cfe4ff; top: 40%; left: 45%; opacity: 0.22; animation-duration: 26s; animation-delay: -12s; }

@keyframes hero3d-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(30px, -24px, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero3d-blob { animation: none; }
}

.hero3d-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--space-6);
  min-height: min(88vh, 780px);
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
  position: relative;
  z-index: 1;
}

/* ---------- Copy column ---------- */
.hero3d-copy h1 {
  color: var(--brand-primary, #0b4f9e);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.12;
  margin: 0 0 var(--space-4);
}

.hero3d-copy .hero3d-sub {
  color: var(--brand-muted, #5a6472);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  max-width: 34em;
  margin: 0 0 var(--space-6);
}

.hero3d-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-accent, #2e75b6);
  background: #eaf1f8;
  border: 1px solid #dce6f1;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: var(--space-5);
}

.hero3d-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- 3D canvas column ---------- */
.hero3d-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.95;
  max-height: 640px;
}

#hero3d-canvas,
#hero3d-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Fade the canvas in once the scene is live */
#hero3d-canvas { opacity: 0; transition: opacity 0.9s ease; }
.hero3d-ready #hero3d-canvas { opacity: 1; }

/* Static fallback when WebGL is unavailable */
.hero3d-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background:
    radial-gradient(closest-side at 55% 45%, rgba(46, 134, 245, 0.18), transparent 70%),
    radial-gradient(closest-side at 40% 65%, rgba(169, 210, 255, 0.4), transparent 65%);
}
.hero3d-no-webgl .hero3d-fallback { display: block; }
.hero3d-no-webgl #hero3d-canvas { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero3d-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: var(--space-7);
    text-align: center;
  }
  .hero3d-copy .hero3d-sub { margin-left: auto; margin-right: auto; }
  .hero3d-cta { justify-content: center; }
  .hero3d-stage {
    order: -1;
    aspect-ratio: 1 / 0.8;
    max-height: 380px;
  }
}