/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 80svh; display: flex; align-items: center;
  color: #fff; overflow: hidden; isolation: isolate;
  padding-top: 76px;
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media video, .hero__media img { width:100%; height:100%; object-fit: cover; }
/* Animated industrial fallback when no video present — sits behind .hero__media so a
   loaded video always covers it; only shows once JS hides the video element. */
.hero__fallback {
  position:absolute; inset:0; z-index:-4;
  background:
    radial-gradient(120% 90% at 80% -10%, #163a9e 0%, transparent 55%),
    radial-gradient(120% 120% at 10% 110%, #0a1f5c 0%, transparent 60%),
    linear-gradient(160deg, #081540 0%, #0a1f5c 45%, #0e297f 100%);
}
.hero__fallback::before {
  content:""; position:absolute; inset:-20%;
  background-image:
    linear-gradient(rgba(120,170,240,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,240,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 80% at 60% 40%, #000 20%, transparent 78%);
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift { to { transform: translate3d(-46px,-46px,0); } }
.hero__cogs { position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.hero__cog { position:absolute; opacity:.1; filter: brightness(0) invert(1); }
.hero__cog--1 { top:8%; right:6%; width:280px; animation: spin 70s linear infinite; }
.hero__cog--2 { bottom:6%; right:20%; width:170px; opacity:.14; animation: drift 22s ease-in-out infinite; }
.hero__cog--3 { top:22%; left:-60px; width:220px; opacity:.06; animation: spin 90s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-18px) rotate(8deg);} }
.hero__overlay {
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, rgba(4,18,40,.86) 0%, rgba(4,18,40,.55) 45%, rgba(4,18,40,.2) 100%);
}
.hero__inner { width: min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto; padding-block: clamp(3rem,8vh,6rem); }
.hero__content { max-width: clamp(320px, 41vw, 680px); container-type: inline-size; }
.hero h1 {
  color:#fff; font-size: clamp(1.9rem, 13cqi, 5.6rem); font-weight: 900;
  margin: 1.4rem 0 0; letter-spacing: -0.03em;
}
.hero h1 em {
  font-style: normal; color: var(--yellow);
}
.hero__lead {
  font-size: var(--step-1); color: rgba(232,240,255,.9);
  margin-top: 1.5rem; max-width: 46ch;
}
.hero__cta { display:flex; flex-wrap:wrap; gap: 1rem; margin-top: 2.4rem; }
@media (max-width: 560px) {
  .hero__cta { flex-direction: column; align-items: stretch; gap: .8rem; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}
.hero__meta {
  display:flex; flex-wrap:wrap; gap: clamp(1.4rem,4vw,3rem);
  margin-top: clamp(2.4rem,5vw,3.6rem);
  padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.16);
}
.hero__meta div { }
.hero__meta b {
  font-family: var(--font-body); font-size: var(--step-2); font-weight: 800;
  color:#fff; display:block; line-height: 1;
}
.hero__meta span { font-size: var(--step--1); color: rgba(200,215,240,.75); font-family: var(--font-mono); letter-spacing:.05em; }

/* scroll cue */
.hero__scroll {
  position:absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(210,224,248,.7);
  display:flex; flex-direction: column; align-items:center; gap:.6rem;
}
.hero__scroll i { width:1px; height: 40px; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: scrollPulse 2s var(--ease) infinite; }
@keyframes scrollPulse { 0%,100%{ transform: scaleY(.4); opacity:.4;} 50%{ transform: scaleY(1); opacity:1;} }