/* ============================================
   APEX VIEWS — STYLES
   ============================================ */

:root {
  --bg-0: #05070a;
  --bg-1: #0a0e14;
  --fg: #e8edf3;
  --fg-dim: #a8b3c2;
  --accent: #00e5ff;
  --accent-2: #7cf9c4;
  --glass: rgba(15,22,32,0.55);
  --glass-border: rgba(255,255,255,0.08);
  --glow: 0 0 20px rgba(0,229,255,0.35), 0 0 60px rgba(0,229,255,0.12);
  --bg-dim-a: 0.55;
  --bg-dim-b: 0.78;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-0);
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
  line-height: 1.6;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* Loader */
#loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.8s;
  /* Fixed positioning means this box is always exactly the viewport
     height — on a short phone viewport the logo + systems-check panel +
     enter button can add up to more than that, and since the box itself
     never scrolls with the document, an overflowing "BEGIN FLIGHT"
     button would be permanently unreachable rather than just scrolled
     past. This scroll fallback, plus the shrunk mobile sizing below,
     means it's always reachable either way. */
  overflow-y: auto;
  padding: 24px 0;
}

#loader.done { opacity: 0; pointer-events: none; }

.loader-logo {
  /* New logo (drone mark + wordmark stacked, transparent background) is
     a wide, non-square line-art lockup, not a circular badge like the
     old one — height-constrained with width:auto preserves its real
     490:310 aspect ratio instead of the old square crop/circle mask,
     which would have clipped the wordmark and rotor blades. */
  height: 190px;
  width: auto;
  margin-bottom: 32px;
  filter: drop-shadow(0 0 20px rgba(0,229,255,0.35)) drop-shadow(0 0 60px rgba(0,229,255,0.12));
}

.loader-brand {
  font-size: 14px;
  letter-spacing: 0.5em;
  color: var(--fg-dim);
  margin-bottom: 40px;
}

.loader-panel {
  width: 500px;
  max-width: 90vw;
  border: 1px solid var(--glass-border);
  padding: 32px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  border-radius: 4px;
  box-shadow: var(--glow);
}

.loader-row {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
  font-size: 12px;
  color: var(--fg-dim);
  opacity: 0;
}

.loader-row .status {
  color: var(--accent-2);
  letter-spacing: 0.2em;
}

.loader-bar {
  height: 2px;
  background: rgba(255,255,255,0.05);
  margin-top: 20px;
  overflow: hidden;
  border-radius: 2px;
}

.loader-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent);
}

/* Loader Enter — the systems-check sequence still plays out same as
   before, but the loader now waits here for a click rather than
   auto-dismissing. That click is a real user gesture, so it's also what
   starts the background score — reliably, on every visit, instead of
   hoping a later click or drag happens to land first. */
.loader-enter {
  margin-top: 32px;
  padding: 16px 40px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s, background 0.3s, color 0.3s, box-shadow 0.3s;
}

.loader-enter.visible { opacity: 1; pointer-events: auto; animation: loaderEnterPulse 2s ease-in-out infinite; }

.loader-enter:hover {
  background: var(--accent);
  color: var(--bg-0);
  box-shadow: var(--glow);
  animation: none;
}

@keyframes loaderEnterPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0,229,255,0); }
  50% { box-shadow: 0 0 18px rgba(0,229,255,0.5); }
}

/* HUD */
.hud {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 100;
  display: flex;
  flex-direction: row;
  gap: 14px;
  padding: 20px 18px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  min-width: 160px;
  opacity: 0;
  box-shadow: var(--glow);
  transform: scale(0.5);
  transform-origin: bottom left;
}

.hud-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px 0 0;
  border-bottom: none;
  border-right: 1px dashed rgba(255,255,255,0.06);
}

.hud-row:last-child { border-right: none; padding-right: 0; }

.hud-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

.hud-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--fg);
  font-weight: 500;
}

.hud-value .unit {
  font-size: 10px;
  color: var(--fg-dim);
  margin-left: 4px;
  letter-spacing: 0.1em;
}

.hud-row.good .hud-value { color: var(--accent-2); }

/* Top Social Bar */
.top-social-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: rgba(5,7,10,0.95);
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 40px;
  display: flex;
  justify-content: center;
  gap: 24px;
  backdrop-filter: blur(10px);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.top-social-bar.hide {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.social-link {
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.social-link:hover { color: var(--accent); }

.social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Navigation */
.topnav {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  background: linear-gradient(180deg, rgba(0,0,0,0.9), transparent);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: top 0.4s ease;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-logo {
  /* Same reasoning as .loader-logo — wide non-square lockup, not a
     circular badge, so height-constrained + width:auto instead of a
     forced square/circle crop. */
  height: 46px;
  width: auto;
}

.brand .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.8s infinite;
  box-shadow: 0 0 10px var(--accent);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { color: var(--fg-dim); text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: var(--fg); }

/* Scroll-controlled Ken Burns section backgrounds: one layer per
   section, stacked behind each other and cross-faded in/out on scroll,
   synced to the same waypoint timeline that drives the drone + bloom
   (see the missions.forEach loop in startFlight()). Each layer also
   runs a slow independent CSS zoom/pan while visible for the "Ken
   Burns" drift; paused via animation-play-state when not the active
   layer so idle layers don't cost a repaint every frame. */
.section-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-0);
}

.section-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  will-change: opacity, transform;
  animation: kenburns 18s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.section-bg.active { animation-play-state: running; }

@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-2%, -1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .section-bg-layer { display: none; }

  /* Only for genuine OS-level reduced-motion now — narrow viewports get
     the full animated cross-fade layer instead (see the reducedMotion
     check in startFlight). The fixed Ken Burns layer above is off here
     since the pinned scroll timeline that drives it is also skipped for
     reduced-motion, which would otherwise leave every section with
     nothing but a flat background color behind it. Each section gets its
     own static background instead — same images already being fetched
     by initSectionBgs() regardless, so this is free; .bg-scrub-overlay/
     .bg-scrub-grain stay fixed above everything and still provide the
     same darkening for text legibility as the animated version. */
  #launch { background-image: url('/assets/images/section-bg/launch.webp'); }
  #trust { background-image: url('/assets/images/section-bg/trust.webp'); }
  #showreel { background-image: url('/assets/images/section-bg/showreel.webp'); }
  #why-fpv { background-image: url('/assets/images/section-bg/why-fpv.webp'); }
  #industries { background-image: url('/assets/images/section-bg/industries.webp'); }
  #projects { background-image: url('/assets/images/section-bg/projects.webp'); }
  #process { background-image: url('/assets/images/section-bg/process.webp'); }
  #why-us { background-image: url('/assets/images/section-bg/why-us.webp'); }
  #testimonials { background-image: url('/assets/images/section-bg/testimonials.webp'); }
  #faq { background-image: url('/assets/images/section-bg/faq.webp'); }
  #final-cta { background-image: url('/assets/images/section-bg/final-cta.webp'); }
  .bloom-stage { background-size: cover; background-position: center; }
}

.bg-scrub-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(2,3,5,0.55) 100%),
    linear-gradient(180deg, rgba(5,7,10,var(--bg-dim-a)), rgba(5,7,10,var(--bg-dim-b)));
}

.bg-scrub-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Flight Stage */
.flight-stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 70% 30%, rgba(0,229,255,0.05), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(124,249,196,0.04), transparent 60%);
}

#flightPath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#flightPath path.trail {
  fill: none;
  stroke: none;
}


/* Waypoint Markers */
.waypoint-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.waypoint {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  transform: rotate(45deg);
  border: 1px solid var(--accent);
  background: rgba(0,229,255,0.12);
  opacity: 0.45;
  transition: opacity 0.35s, box-shadow 0.35s, background 0.35s;
}

.waypoint::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent);
  opacity: 0.6;
}

.waypoint-label {
  position: fixed;
  top: 0;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfeff5;
  padding: 4px 8px;
  margin: -10px 0 0 16px;
  background: rgba(4,6,8,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 2px solid var(--accent-2);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.35s, color 0.35s, background 0.35s, transform 0.35s;
}

/* A waypoint on the right side of the screen should read into the
   section (leftward), not off the edge of the viewport — mirrors the
   default rightward label for left-side waypoints. */
.waypoint-label.face-left {
  margin: -10px 16px 0 0;
  border-left: none;
  border-right: 2px solid var(--accent-2);
  text-align: right;
  transform: translateX(-100%);
}

.waypoint.active {
  opacity: 1;
  background: rgba(0,229,255,0.22);
  box-shadow: 0 0 14px rgba(0,229,255,0.7);
}

.waypoint-label.active {
  opacity: 1;
  color: #ffffff;
  background: rgba(4,6,8,0.7);
}

/* Landing Pad */
.landing-pad {
  position: fixed;
  top: 130px;
  right: 60px;
  z-index: 45;
  width: 80px;
  height: 80px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow), inset 0 0 20px rgba(0,229,255,0.2);
  opacity: 0;
  transition: opacity 0.5s;
}

.landing-pad.visible { opacity: 1; }

.landing-pad::before,
.landing-pad::after {
  content: "";
  position: absolute;
  background: var(--accent);
}

.landing-pad::before { width: 60%; height: 2px; }
.landing-pad::after { width: 2px; height: 60%; }

.landing-pad .h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  color: var(--accent);
  font-weight: 300;
}

/* WhatsApp */
.whatsapp-btn {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 100;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.whatsapp-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.12); }
.whatsapp-btn svg { width: 30px; height: 30px; fill: #fff; }

@media (max-width: 900px) {
  .whatsapp-btn { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .whatsapp-btn svg { width: 26px; height: 26px; }
}

/* Drone */
.drone-wrap {
  position: fixed;
  z-index: 50;
  width: 110px;
  height: 110px;
  pointer-events: none;
  will-change: transform;
  perspective: 480px;
}

.drone-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8));
  will-change: transform;
  transform-style: preserve-3d;
}

.drone-shadow {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%);
  border-radius: 50%;
  filter: blur(5px);
  transition: all 0.4s ease;
}

.prop-spin, .prop-spin-reverse { animation: propSpin 0.06s linear infinite; animation-play-state: paused; }
.prop-spin-reverse { animation-direction: reverse; }
/* Stopped by default (drone landed) — .drone-wrap.spinning is toggled by
   a scroll trigger spanning liftoff through landing, see startFlight(). */
.drone-wrap.spinning .prop-spin,
.drone-wrap.spinning .prop-spin-reverse { animation-play-state: running; }

@keyframes propSpin { to { transform: rotate(360deg); } }

/* Text Reveal */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.1;
  margin-right: 0.25em;
}

.word-mask:last-child { margin-right: 0; }

.word-mask .word-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* Flight Sequence — hero + the 3 missions, pinned and staged. Each mission
   is absolutely stacked full-screen and blooms out of its own waypoint
   marker (transform-origin set per-stage in JS to that marker's screen
   position), holds, then shrinks back down as the drone moves on. */
.flight-sequence {
  position: relative;
  height: 100vh;
  overflow: hidden;
  z-index: 3;
}

.bloom-stage {
  position: absolute;
  inset: 0;
  padding: 120px 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Resting state before JS takes over: bloom stages start invisible so
   there's no flash of a fullscreen section before the bloom timeline sets
   its real scale/opacity (the loader overlay covers this window too, but
   this is a free extra guard). Hero stays visible — it's the first thing
   seen. */
#trust, #showreel, #why-fpv, #industries, #projects, #process, #why-us, #testimonials, #faq, #final-cta { opacity: 0; }

.accent { color: var(--accent-2); }

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Hero */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-content { max-width: 900px; position: relative; z-index: 3; }

.hero-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5em;
  color: var(--accent);
  margin-bottom: 32px;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}

.hero h1 .outline {
  -webkit-text-stroke: 1px var(--fg);
  color: transparent;
}

.hero-sub {
  color: var(--fg-dim);
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

.hero-cta { display: inline-flex; gap: 20px; flex-wrap: wrap; justify-content: center; }

.btn {
  padding: 16px 32px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--fg);
  color: var(--fg);
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  cursor: pointer;
}

.btn:hover { background: var(--fg); color: var(--bg-0); }

.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg-0); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); box-shadow: var(--glow); }

.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  text-transform: uppercase;
  z-index: 3;
}

.scroll-hint .line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--accent), transparent);
  margin: 12px auto 0;
  animation: scrollLine 2s infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Shared section-tag mono eyebrow, reused across all the new bloom
   sections below instead of a differently-named tag class per section. */
.trust-tag, .showreel-tag, .whyfpv-tag, .industries-tag, .projects-tag,
.process-tag, .whyus-tag, .testimonials-tag, .faq-tag, .final-cta-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.trust h2, .showreel h2, .why-fpv h2, .industries h2, .projects h2,
.process h2, .why-us h2, .testimonials h2, .faq h2, .final-cta h2 {
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.trust-body, .whyfpv-body, .industries-sub, .projects-sub, .showreel-sub, .final-cta-body {
  color: var(--fg-dim);
  font-size: 17px;
  line-height: 1.7;
  max-width: 760px;
  margin-bottom: 40px;
}

/* Trust */
.trust-inner { text-align: center; max-width: 900px; margin: 0 auto; }
.trust-body { margin-left: auto; margin-right: auto; }
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.trust-chips span {
  padding: 10px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}

/* Showreel */
.showreel-inner { text-align: center; max-width: 1000px; margin: 0 auto; }
.showreel-sub, .showreel-inner .showreel-sub { margin-left: auto; margin-right: auto; }
.showreel-player {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg-1);
  box-shadow: var(--glow);
}
.showreel-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.showreel-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05) brightness(0.65);
}
.showreel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: rgba(4,6,8,0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.3s, background 0.3s;
}
.showreel-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(0,229,255,0.15); }
.showreel-play svg { width: 30px; height: 30px; fill: var(--accent); margin-left: 4px; }

/* Fallback link, added by JS next to any player whose embed has a real
   video ID — a plain link to the real YouTube watch page always works,
   even for visitors whose ad-blocker strips the referrer an in-page
   embed needs (a known real-world cause of YouTube's Error 153). */
.video-fallback-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
  text-decoration: none;
}
.video-fallback-link:hover { color: var(--accent-2); }
.video-card .video-fallback-link {
  position: absolute;
  top: 10px; right: 10px;
  margin-top: 0;
  padding: 4px 10px;
  background: rgba(4,6,8,0.6);
  backdrop-filter: blur(4px);
}

/* Why FPV */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
}
.feature-item {
  background: var(--bg-1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  padding: 24px 20px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-num { color: var(--accent-2); font-size: 11px; letter-spacing: 0.2em; }

/* Industries */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.industry-card {
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.28);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  padding: 20px;
  transition: border-color 0.3s, background 0.3s;
}
.industry-card:hover { border-color: var(--accent); background: rgba(0,229,255,0.05); }
.industry-card h3 { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.industry-card p { font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; }

/* Featured Projects */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.filter-btn {
  padding: 8px 16px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all 0.3s;
}
.filter-btn:hover { color: var(--fg); border-color: var(--fg-dim); }
.filter-btn.active { color: var(--bg-0); background: var(--accent); border-color: var(--accent); }

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.project-card {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg-1);
  transition: opacity 0.4s, transform 0.4s;
}
.project-card.filtered-out { opacity: 0; transform: scale(0.92); pointer-events: none; position: absolute; }
.project-card .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05);
}
.project-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 35%, rgba(0,0,0,0.92));
}
.project-card .badge {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
  background: rgba(0,229,255,0.08);
  text-shadow: none;
}
.project-card .coords {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-2);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.project-card h3 { font-size: 16px; font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }

/* Project info panel — sits beside a project-card's image when a single
   category filter (not "All") is active; project-grid.single-view flips
   the grid to two columns so the visible card and its info panel occupy
   one row together instead of the card sitting alone amid empty slots. */
.project-grid.single-view { grid-template-columns: 1fr 1fr; }

.project-info {
  display: none;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.28);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  padding: 32px;
}
.project-info.visible { display: flex; }
.project-info .coords {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-2);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.project-info h3 { font-size: 22px; font-weight: 500; margin-bottom: 14px; }
.project-info p { color: var(--fg-dim); font-size: 14.5px; line-height: 1.7; margin-bottom: 22px; }
.project-info .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .project-grid.single-view { grid-template-columns: 1fr; }
}

/* Process */
.process-list { display: flex; flex-direction: column; border-top: 1px solid var(--glass-border); }
.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--glass-border);
  align-items: start;
}
.process-num { color: var(--accent-2); font-size: 20px; }
.process-step h3 { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.process-step p { font-size: 14px; color: var(--fg-dim); line-height: 1.6; }

/* Why Choose Us */
.whyus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
}
.whyus-item {
  background: var(--bg-1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  padding: 20px;
  font-size: 14px;
  position: relative;
  padding-left: 36px;
}
.whyus-item::before {
  content: "";
  position: absolute;
  left: 20px; top: 24px;
  width: 8px; height: 8px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.testimonial-card {
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.28);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  padding: 26px;
}
.testimonial-card p { font-size: 14.5px; line-height: 1.7; margin-bottom: 18px; font-style: italic; }
.testimonial-author { font-size: 11px; color: var(--fg-dim); letter-spacing: 0.1em; }
.testimonial-note { font-size: 11px; color: var(--fg-dim); letter-spacing: 0.05em; opacity: 0.7; }

/* FAQ */
.faq-inner { max-width: 900px; margin: 0 auto; }
.faq-list { border-top: 1px solid var(--glass-border); }
.faq-item { border-bottom: 1px solid var(--glass-border); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.faq-icon { color: var(--accent); font-size: 18px; transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-a { max-height: 220px; padding-bottom: 18px; }
.faq-a p { font-size: 14px; color: var(--fg-dim); line-height: 1.7; max-width: 700px; }

/* Final CTA */
.final-cta-inner { text-align: center; max-width: 800px; margin: 0 auto; }
.final-cta-body { margin-left: auto; margin-right: auto; }
.final-cta-buttons { display: inline-flex; gap: 20px; flex-wrap: wrap; justify-content: center; }

/* Gallery — static, sits after the pin releases alongside Contact/Footer. */
.gallery {
  padding: 120px 60px;
  position: relative;
  z-index: 3;
  background: transparent;
  text-align: center;
  perspective: 1400px;
}
.gallery-inner { max-width: 1200px; margin: 0 auto; will-change: transform, opacity; backface-visibility: hidden; }
.gallery-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 20px;
  text-transform: uppercase;
}
.gallery h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 16px; }
.gallery-sub { color: var(--fg-dim); font-size: 16px; max-width: 600px; margin: 0 auto 50px; }
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.video-card {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg-1);
}
.video-thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.9) brightness(0.6);
}
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: rgba(4,6,8,0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.3s, background 0.3s;
}
.video-play:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(0,229,255,0.15); }
.video-play svg { width: 22px; height: 22px; fill: var(--accent); margin-left: 3px; }
.video-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 16px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: left;
  background: linear-gradient(0deg, rgba(0,0,0,0.95) 30%, transparent);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.gallery-more {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent-2);
  text-decoration: none;
  text-transform: uppercase;
}
.gallery-more:hover { color: var(--accent); }
.gallery-youtube-link {
  display: block;
  width: 60px;
  margin: 16px auto 0;
  opacity: 0.85;
  transition: opacity 0.3s, transform 0.3s;
}
.gallery-youtube-link img { display: block; width: 60px; height: auto; }
.gallery-youtube-link:hover { opacity: 1; transform: scale(1.05); }

/* Contact */
.contact {
  padding: 120px 60px 20vh 60px;
  position: relative;
  z-index: 3;
  background: transparent;
  perspective: 1400px;
}

.contact-inner { max-width: 800px; margin: 0 auto; text-align: center; will-change: transform, opacity; backface-visibility: hidden; }

.contact-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.contact h2 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.contact .sub {
  color: var(--fg-dim);
  font-size: 17px;
  margin-bottom: 60px;
  line-height: 1.7;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}

.contact-form .full { grid-column: 1/-1; }

.field { display: flex; flex-direction: column; gap: 8px; }

.field label {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  background: transparent;
  border: 1px solid var(--glass-border);
  padding: 14px 16px;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.3s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field textarea { min-height: 140px; resize: vertical; }

.contact-form button { grid-column: 1/-1; margin-top: 10px; }

.field-hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  grid-column: 1/-1;
  font-size: 13px;
  letter-spacing: 0.05em;
  min-height: 1.4em;
}
.form-status.success { color: var(--accent-2); }
.form-status.error { color: #ff6b6b; }

/* Footer */
footer {
  padding: 60px 60px 40px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  z-index: 3;
  background: transparent;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-section h4 {
  color: var(--fg);
  font-size: 12px;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}

.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.footer-social a {
  color: var(--fg-dim);
  transition: color 0.3s;
}

.footer-social a:hover { color: var(--accent); }

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-credit {
  flex-basis: 100%;
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}

.footer-credit a {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-credit a:hover { color: var(--accent); }

/* Responsive */
@media (max-width: 900px) {
  /* Shrunk so the full logo + systems-check panel + enter button
     comfortably fits within a phone-height viewport without relying on
     the #loader overflow-y:auto scroll fallback above. */
  .loader-logo { height: 120px; margin-bottom: 18px; }
  .loader-brand { font-size: 11px; margin-bottom: 20px; letter-spacing: 0.3em; }
  .loader-panel { padding: 20px; }
  .loader-row { margin: 8px 0; }
  .loader-enter { margin-top: 20px; padding: 13px 30px; }

  .top-social-bar {
    padding: 8px 20px;
    gap: 16px;
  }

  .social-link { font-size: 10px; }
  
  .topnav {
    top: 37px;
    padding: 16px 20px;
  }

  .brand-logo { height: 36px; width: auto; }

  .nav-links { display: none; }
  
  .landing-pad { display: none; }
  
  .hud { display: none; }

  .contact, .gallery { padding: 80px 24px; }

  /* The pinned bloom sections now run on mobile too (see the
     reducedMotion check in startFlight), but .bloom-stage's padding was
     only ever tuned for desktop — 120px 60px eats a huge share of a
     phone's much shorter viewport, pushing content (often just the
     tag+heading alone) past what's left and into .bloom-stage's own
     overflow:hidden clip. Shrinking padding and the tag/heading/sub
     margins reclaims that space; #launch gets a bit more top padding
     than the rest since the hero sits a touch high otherwise. */
  .bloom-stage { padding: 95px 20px 24px; }
  #launch.bloom-stage { padding-top: 130px; }
  .trust-tag, .showreel-tag, .whyfpv-tag, .industries-tag, .projects-tag,
  .process-tag, .whyus-tag, .testimonials-tag, .faq-tag, .final-cta-tag { margin-bottom: 12px; }
  .trust h2, .showreel h2, .why-fpv h2, .industries h2, .projects h2,
  .process h2, .why-us h2, .testimonials h2, .faq h2, .final-cta h2 { margin-bottom: 14px; }
  .trust-body, .whyfpv-body, .industries-sub, .projects-sub, .showreel-sub, .final-cta-body { margin-bottom: 20px; }

  /* Feature-grid (Why FPV) and whyus-grid were a single stacked column
     of 6 items — by far the tallest content in any bloom section. Two
     columns roughly halves that to 3 rows. */
  .feature-grid, .whyus-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-item { padding: 14px 10px; font-size: 13px; }
  .whyus-item { padding: 14px 10px 14px 30px; font-size: 12.5px; }
  .whyus-item::before { left: 12px; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-card { padding: 14px; }
  .industry-card h3 { font-size: 13px; margin-bottom: 5px; }
  .industry-card p { font-size: 11px; }
  .project-grid, .testimonial-grid, .video-grid { grid-template-columns: 1fr; }
  .process-step { grid-template-columns: 50px 1fr; }

  .contact-form { grid-template-columns: 1fr; }

  footer {
    padding: 40px 24px 30px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
  }

  .footer-section { align-items: center; }

  .drone-wrap { width: 80px; height: 80px; }
}

/* Static/flowing section layout — applies to reduced-motion (any width)
   AND narrow viewports (any motion preference), since both skip the
   pinned bloom system in favor of sections that flow and scroll
   normally. The drone + background cross-fade still run on narrow,
   non-reduced-motion screens (see the isMobile branch in startFlight) —
   only the pin/bloom scaling is off here, not those. Reduced-motion
   itself goes further still (see the .section-bg-layer rule above),
   turning off the animated background layer too. */
@media (prefers-reduced-motion: reduce), (max-width: 900px) {
  .contact, .gallery { perspective: none; }
  .contact-inner, .gallery-inner { transform: none !important; }
  #trust, #showreel, #why-fpv, #industries, #projects, #process, #why-us, #testimonials, #faq, #final-cta {
    opacity: 1 !important; transform: none !important;
  }
  .bloom-stage { position: relative; inset: auto; min-height: auto; }
  .flight-sequence { height: auto; }
}