/* =============================================================================
   Xtreme Flight Custom Theme — main.css
   Complete design system translated from React/Tailwind source.
   Matches original pixel-perfect: colors, spacing, typography, animations.
   ============================================================================= */

/* ─── Google Fonts (also enqueued in functions.php) ──────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ─── Design Tokens (CSS Custom Properties) ─────────────────────────────── */
:root {
  /* ── Radius ── */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* ── Brand Colors (OKLCH — modern browsers) ── */
  --navy-deep:  oklch(0.18 0.06 250);
  --navy:       oklch(0.27 0.08 245);
  --carbon:     oklch(0.12 0.03 250);
  --jet-blue:   oklch(0.38 0.11 240);
  --lime:       oklch(0.86 0.22 130);
  --lime-glow:  oklch(0.9 0.24 130);
  --cloud:      oklch(0.98 0.01 240);
  --brand-blue: oklch(0.30 0.13 243);

  /* ── Hex fallbacks for older browsers ── */
  --navy-deep-hex:  #15192b;
  --navy-hex:       #1f2c44;
  --carbon-hex:     #0e1219;
  --jet-blue-hex:   #243d5c;
  --lime-hex:       #b3f032;
  --lime-glow-hex:  #c0f238;
  --cloud-hex:      #f6f8fc;
  --brand-blue-hex: #1f3060;

  /* ── Semantic Aliases ── */
  --background: var(--navy-deep);
  --foreground: var(--cloud);
  --card:       oklch(0.22 0.05 250);
  --card-hex:   #191f35;
  --muted:      oklch(0.28 0.04 250);
  --border:     oklch(0.32 0.05 250 / 50%);

  /* ── Typography ── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* ── Shadows ── */
  --shadow-glow:      0 0 60px -10px oklch(0.86 0.22 130 / 0.5);
  --shadow-cinematic: 0 30px 80px -20px oklch(0.05 0.02 250 / 0.8);

  /* ── Gradients ── */
  --gradient-lime: linear-gradient(135deg, oklch(0.86 0.22 130), oklch(0.78 0.2 145));
  --gradient-hero: linear-gradient(135deg, oklch(0.18 0.06 250 / 0.92), oklch(0.27 0.08 245 / 0.6) 50%, oklch(0.12 0.03 250 / 0.95));

  /* ── Layout ── */
  --max-w:     80rem;   /* 1280px */
  --section-py: 5rem;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans), system-ui, sans-serif;
  /* Hex fallback first, then OKLCH */
  background-color: #111827;
  background-color: oklch(0.16 0.04 250);
  color: #f6f8fc;
  color: oklch(0.98 0.01 240);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100vw;
  overflow-x: clip;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul { list-style: none; }

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

/* ─── WordPress Admin Bar offset ────────────────────────────────────────── */
.admin-bar .xf-header,
.admin-bar .xf-scroll-progress { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .xf-header,
  .admin-bar .xf-scroll-progress { top: 46px; }
}

/* ─── Layout Utilities ──────────────────────────────────────────────────── */
.xf-container {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 1024px) {
  .xf-container { padding-left: 2rem; padding-right: 2rem; }
}

.section-py,
.xf-section-py {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

/* ─── Utility classes (mirrors React Tailwind utilities) ─────────────────── */
.text-balance { text-wrap: balance; }
.text-gradient-lime {
  background: var(--gradient-lime);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-grid {
  background-image:
    linear-gradient(rgba(191,255,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,255,0,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.shadow-glow { box-shadow: var(--shadow-glow); }
.backdrop-blur { backdrop-filter: blur(8px); }

/* ─── Background Utilities ──────────────────────────────────────────────── */
.bg-grid {
  background-image:
    linear-gradient(oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

.bg-radar {
  background-image: radial-gradient(circle at center, oklch(0.86 0.22 130 / 0.08) 0%, transparent 70%);
}

/* ─── Text Utilities ────────────────────────────────────────────────────── */
.text-gradient-lime {
  background: var(--gradient-lime);
  background: linear-gradient(135deg, #a3e635, #65a30d);
  background: var(--gradient-lime);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-lime {
  color: #a3e635;
  color: oklch(0.86 0.22 130);
}
.text-cloud {
  color: #f6f8fc;
  color: oklch(0.98 0.01 240);
}
.text-brand-blue {
  color: #1e3a6e;
  color: oklch(0.30 0.13 243);
}

/* ─── Glass Utility ─────────────────────────────────────────────────────── */
.glass {
  background: oklch(0.18 0.06 250 / 0.6);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid oklch(0.86 0.22 130 / 0.15);
}

/* ─── Shadow Utility ────────────────────────────────────────────────────── */
.shadow-glow {
  /* Hex fallback then OKLCH */
  box-shadow: rgba(163, 230, 53, 0.5) 0px 0px 60px -10px;
  box-shadow: var(--shadow-glow);
}

/* ─── Fade-up Entrance ─────────────────────────────────────────────────── */
.xf-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.xf-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.xf-fade-up--delay-1 { transition-delay: 0.08s; }
.xf-fade-up--delay-2 { transition-delay: 0.16s; }
.xf-fade-up--delay-3 { transition-delay: 0.24s; }

/* ─── Clip Reveal (left → right, matches React `inset(0 100% 0 0)`) ─────── */

/* Pure-CSS fallback keyframes — ensures images are ALWAYS visible even if JS
   never runs. The animation plays after a short delay so the reveal still
   feels intentional. When JS adds .is-visible the transition takes over. */
@keyframes xf-reveal-from-left {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0% 0 0); }
}
@keyframes xf-reveal-from-right {
  0%   { opacity: 0; clip-path: inset(0 0 0 100%); }
  100% { opacity: 1; clip-path: inset(0 0 0 0%); }
}

.xf-clip-reveal {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 1s ease-out, clip-path 1s ease-out;
  /* Guaranteed CSS fallback: image becomes fully visible after 1.8s
     regardless of whether IntersectionObserver fires. */
  animation: xf-reveal-from-left 1s ease-out 1.8s both;
}
.xf-clip-reveal.is-visible {
  /* JS-triggered: cancel the delayed CSS animation and show immediately. */
  animation: none;
  opacity: 1;
  clip-path: inset(0 0% 0 0);
}

/* Carla photo: right → left, matches React `inset(0 0 0 100%)` */
.xf-clip-reveal--from-right {
  clip-path: inset(0 0 0 100%);
  animation: xf-reveal-from-right 1s ease-out 1.8s both;
}
.xf-clip-reveal--from-right.is-visible {
  animation: none;
  opacity: 1;
  clip-path: inset(0 0 0 0%);
}

@media (prefers-reduced-motion: reduce) {
  .xf-clip-reveal,
  .xf-clip-reveal--from-right {
    opacity: 1;
    clip-path: none;
    animation: none;
    transition: none;
  }
}

/* ─── Button Base ───────────────────────────────────────────────────────── */
/*
  EXACT React button computed values (from Chrome DevTools):
  Large CTA:   padding 16px 28px, font 16px/600, bg oklch(0.86 0.22 130), color oklch(0.18 0.06 250), radius 6px, shadow oklch(0.86 0.22 130 / 0.5) 0 0 60px -10px
  Header btn:  padding 8px 16px, font 12px/600 — same colors
  Outline btn: padding 16px 24px, font 16px/500, bg navy-deep/60, color cloud, border 1px cloud/30, backdrop-blur 8px
*/

/* Hex fallback vars for environments without OKLCH support */
:root {
  --lime-hex:       #a3e635;
  --lime-glow-hex:  #bef264;
  --navy-deep-hex:  #111827;
  --cloud-hex:      #f6f8fc;
}

.xf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;             /* 8px — matches React gap-2 */
  border-radius: 6px;      /* exactly 6px computed */
  font-family: var(--font-sans), system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;          /* 16px — large CTA default */
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
}
/* Magnetic hover — React: btn-magnetic:hover { transform: translateY(-3px) } */
.xf-btn:hover { transform: translateY(-3px); }

/* ── Primary Lime Button ─────────────────────────────────────────────────
   Computed: bg oklch(0.86 0.22 130), color oklch(0.18 0.06 250)
   padding 16px 28px (1rem / 1.75rem), font 16px 600, radius 6px
   box-shadow: oklch(0.86 0.22 130 / 0.5) 0px 0px 60px -10px
   ──────────────────────────────────────────────────────────────────────── */
.xf-btn--lime {
  /* Hex fallback first (OKLCH may not work in all WP server environments) */
  background-color: #a3e635;
  background-color: oklch(0.86 0.22 130);
  color: #111827;
  color: oklch(0.18 0.06 250);
  /* Exact padding: py-4 px-7 = 16px top/bottom, 28px left/right */
  padding: 1rem 1.75rem;
  /* Exact box-shadow from React */
  box-shadow: #a3e635 0px 0px 60px -10px;
  box-shadow: oklch(0.86 0.22 130 / 0.5) 0px 0px 60px -10px;
}
.xf-btn--lime:hover {
  background-color: #bef264;
  background-color: oklch(0.9 0.24 130);
  color: #111827;
  color: oklch(0.18 0.06 250);
}

/* ── Primary Lime Button (Small — header CTA) ────────────────────────────
   Computed: padding 8px 16px, font 12px 600 — same colors
   ──────────────────────────────────────────────────────────────────────── */
.xf-btn--lime-sm {
  background-color: #a3e635;
  background-color: oklch(0.86 0.22 130);
  color: #111827;
  color: oklch(0.18 0.06 250);
  padding: 0.5rem 1rem;    /* 8px 16px */
  font-size: 0.75rem;      /* 12px */
  font-weight: 600;
  box-shadow: #a3e635 0px 0px 60px -10px;
  box-shadow: oklch(0.86 0.22 130 / 0.5) 0px 0px 60px -10px;
}
.xf-btn--lime-sm:hover {
  background-color: #bef264;
  background-color: oklch(0.9 0.24 130);
  color: #111827;
}

/* ── Outline / Secondary Button ─────────────────────────────────────────
   Computed: padding 16px 24px, bg navy-deep/60, color cloud,
   border 1px cloud/30, backdrop-blur 8px, font 16px 500, radius 6px
   ──────────────────────────────────────────────────────────────────────── */
.xf-btn--outline {
  /* Semi-transparent dark background */
  background-color: rgba(17, 24, 39, 0.6);
  background-color: oklch(0.18 0.06 250 / 0.6);
  /* Cloud-white text */
  color: #f6f8fc;
  color: oklch(0.98 0.01 240);
  padding: 1rem 1.5rem;    /* 16px 24px — matches px-6 py-4 */
  font-weight: 500;
  border: 1px solid rgba(246, 248, 252, 0.3);
  border: 1px solid oklch(0.98 0.01 240 / 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}
.xf-btn--outline:hover {
  border-color: rgba(163, 230, 53, 0.6);
  border-color: oklch(0.86 0.22 130 / 0.6);
  color: #a3e635;
  color: oklch(0.86 0.22 130);
  transform: translateY(-3px);
}

/* Alias used in some inner pages — same as outline */
.xf-btn--outline-cloud {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background-color: rgba(17, 24, 39, 0.6);
  background-color: oklch(0.18 0.06 250 / 0.6);
  color: #f6f8fc;
  color: oklch(0.98 0.01 240);
  padding: 1rem 1.5rem;
  border: 1px solid rgba(246, 248, 252, 0.3);
  border: 1px solid oklch(0.98 0.01 240 / 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.xf-btn--outline-cloud:hover {
  border-color: rgba(163, 230, 53, 0.6);
  border-color: oklch(0.86 0.22 130 / 0.6);
  color: #a3e635;
  color: oklch(0.86 0.22 130);
  transform: translateY(-3px);
}

.xf-btn--full { width: 100%; }

/* ─── Icon ──────────────────────────────────────────────────────────────── */
.xf-icon { flex-shrink: 0; }

/* ─── Eyebrow Badge ─────────────────────────────────────────────────────── */
.xf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(163, 230, 53, 0.3);
  border: 1px solid oklch(0.86 0.22 130 / 0.3);
  background: rgba(163, 230, 53, 0.05);
  background: oklch(0.86 0.22 130 / 0.05);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #a3e635;
  color: oklch(0.86 0.22 130);
}
.xf-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #a3e635;
  background-color: oklch(0.86 0.22 130);
  box-shadow: #a3e635 0px 0px 60px -10px;
  box-shadow: var(--shadow-glow);
  flex-shrink: 0;
}

/* ─── Section Header ────────────────────────────────────────────────────── */
.xf-section-header {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.xf-section-header__title {
  margin-top: 1.25rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--cloud);
  text-wrap: balance;
}
.xf-section-header__sub {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: oklch(0.98 0.01 240 / 0.7);
}
@media (min-width: 768px) {
  .xf-section-header__title { font-size: 3rem; }
  .xf-section-header__sub   { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  .xf-section-header__title { font-size: 3.75rem; }
}

/* ─── Preloader ─────────────────────────────────────────────────────────── */
.xf-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out, filter 1s ease-in-out;
}
.xf-preloader.is-hidden {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(8px);
  pointer-events: none;
}
.xf-preloader__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.07;
}
.xf-preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 20rem;
  padding: 0 1rem;
}
@media (min-width: 640px) {
  .xf-preloader__inner {
    max-width: 24rem;
    gap: 1.5rem;
    padding: 0 1.5rem;
  }
}
.xf-preloader__logo-wrap {
  opacity: 0;
  transform: scale(0.9);
  animation: xf-preloader-logo 0.8s ease forwards;
}
@keyframes xf-preloader-logo {
  to { opacity: 1; transform: scale(1); }
}
.xf-preloader__logo {
  height: 3.5rem;
  width: auto;
}
@media (min-width: 640px) { .xf-preloader__logo { height: 5rem; } }
@media (min-width: 768px) { .xf-preloader__logo { height: 8rem; } }

.xf-preloader__tagline {
  opacity: 0;
  transform: translateY(10px);
  animation: xf-preloader-text 0.5s 0.3s ease forwards;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lime);
}
@media (min-width: 640px) {
  .xf-preloader__tagline { font-size: 0.75rem; letter-spacing: 0.28em; }
}
@keyframes xf-preloader-text {
  to { opacity: 1; transform: translateY(0); }
}

.xf-preloader__bar-wrap {
  position: relative;
  height: 2px;
  width: 12rem;
  overflow: hidden;
  border-radius: 9999px;
  background: #e5e7eb;
}
@media (min-width: 640px) { .xf-preloader__bar-wrap { width: 16rem; } }

.xf-preloader__bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 33.333%;
  background: var(--lime);
  animation: xf-takeoff 2s ease-in-out infinite;
}
@keyframes xf-takeoff {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.xf-preloader__radar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid oklch(0.86 0.22 130 / 0.5);
  border-top-color: var(--lime);
  animation: xf-radar 4s linear infinite;
}
@media (min-width: 640px) {
  .xf-preloader__radar { width: 1.5rem; height: 1.5rem; }
}
@keyframes xf-radar {
  to { transform: rotate(360deg); }
}

/* ─── Scroll Progress Bar ───────────────────────────────────────────────── */
.xf-scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  height: 3px;
  width: 100%;
  background: transparent;
}
.xf-scroll-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--lime);
  box-shadow: var(--shadow-glow);
  transition: width 0.15s linear;
}

/* ─── Header ────────────────────────────────────────────────────────────── */
.xf-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 3px;
  z-index: 50;
  background: #fff;
  padding: 0.5rem 0;
}
.xf-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .xf-header__inner { padding-left: 2rem; padding-right: 2rem; }
}
.xf-header__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 0.75rem;
}
.xf-header__logo {
  height: 2rem;
  width: auto;
}
@media (min-width: 768px) {
  .xf-header__logo { height: 5rem; }
}
.xf-header__logo-link { display: flex; }

/* Desktop nav */
.xf-nav--desktop {
  display: none;
  align-items: center;
  gap: .5rem;
}
@media (min-width: 1280px) {
  .xf-nav--desktop { display: flex; }
}
.xf-nav__link {
  position: relative;
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.xf-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.83, 0, 0.17, 1);
}
.xf-nav__link:hover,
.xf-nav__link.is-active { color: var(--lime); }
.xf-nav__link:hover::after,
.xf-nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

/* Header actions */
.xf-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Phone number link in header */
.xf-header__phone {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e3a5f;
  color: var(--brand-blue, #1e3a5f);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid rgba(30, 58, 95, 0.2);
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.xf-header__phone .xf-icon {
  flex-shrink: 0;
  color: #a3e635;
  color: oklch(0.86 0.22 130);
}
.xf-header__phone:hover {
  color: #a3e635;
  color: oklch(0.86 0.22 130);
  border-color: rgba(163, 230, 53, 0.5);
  background-color: rgba(163, 230, 53, 0.06);
}
@media (min-width: 768px) {
  .xf-header__phone { display: inline-flex; }
}
.xf-header__cta {
  display: none;
  align-items: center;
  gap: 0.375rem;
  /* Header CTA: px-4 py-2 text-xs — exact React computed: 8px 16px, 12px font */
  padding: 0.5rem 1rem;
  font-size: 0.75rem;      /* 12px — exact React xs */
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  /* Hex fallback then OKLCH */
  background-color: #a3e635;
  background-color: oklch(0.86 0.22 130);
  color: #111827;
  color: oklch(0.18 0.06 250);
  box-shadow: #a3e635 0px 0px 60px -10px;
  box-shadow: oklch(0.86 0.22 130 / 0.5) 0px 0px 60px -10px;
  transition: background-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  border: none;
}
.xf-header__cta:hover {
  background-color: #bef264;
  background-color: oklch(0.9 0.24 130);
  color: #111827;
  transform: translateY(-3px);
}
@media (min-width: 768px) {
  .xf-header__cta { display: inline-flex; }
}
.xf-header__menu-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  border: 1px solid oklch(0.86 0.22 130 / 0.3);
  color: var(--lime);
  transition: border-color 0.2s, background 0.2s;
}
.xf-header__menu-btn:hover {
  background: oklch(0.86 0.22 130 / 0.05);
}
@media (min-width: 1280px) {
  .xf-header__menu-btn { display: none; }
}

/* ─── Mobile Nav Drawer ─────────────────────────────────────────────────── */
.xf-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.xf-mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.xf-mobile-nav {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 80;
  width: 85%;
  max-width: 20rem;
  background: #fff;
  box-shadow: 2rem 0 4rem rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.xf-mobile-nav.is-open { transform: translateX(0); }

.xf-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}
.xf-mobile-nav__logo { height: 2.25rem; width: auto; }
.xf-mobile-nav__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid #e5e7eb;
  color: #4b5563;
  transition: border-color 0.2s, color 0.2s;
}
.xf-mobile-nav__close:hover {
  border-color: oklch(0.86 0.22 130 / 0.4);
  color: var(--lime);
}

.xf-mobile-nav__links {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.25rem;
}
.xf-mobile-nav__link {
  display: block;
  padding: 0.625rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000;
  border-bottom: 1px solid #f3f4f6;
  transition: color 0.2s;
  opacity: 0;
  transform: translateX(-20px);
  transition: color 0.2s, opacity 0.3s ease, transform 0.3s ease;
}
.xf-mobile-nav.is-open .xf-mobile-nav__link { opacity: 1; transform: translateX(0); }
.xf-mobile-nav__link:hover,
.xf-mobile-nav__link.is-active { color: var(--lime); }

/* Phone number entry — inline icon alongside the number */
.xf-mobile-nav__link--phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.xf-mobile-nav__link--phone .xf-icon {
  flex-shrink: 0;
}

/* Stagger delay for mobile nav links */
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(1)  { transition-delay: 0.06s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(2)  { transition-delay: 0.095s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(3)  { transition-delay: 0.13s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(4)  { transition-delay: 0.165s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(5)  { transition-delay: 0.2s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(6)  { transition-delay: 0.235s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(7)  { transition-delay: 0.27s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(8)  { transition-delay: 0.305s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(9)  { transition-delay: 0.34s; }
.xf-mobile-nav.is-open .xf-mobile-nav__link:nth-child(10) { transition-delay: 0.375s; }

.xf-mobile-nav__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #f3f4f6;
}
/* Mobile nav CTA (same as large lime button but full-width) */
.xf-mobile-nav__footer .xf-btn--lime,
.xf-mobile-nav__footer .xf-btn--full {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background-color: #a3e635;
  background-color: oklch(0.86 0.22 130);
  color: #111827;
  color: oklch(0.18 0.06 250);
  box-shadow: #a3e635 0px 0px 60px -10px;
  box-shadow: oklch(0.86 0.22 130 / 0.5) 0px 0px 60px -10px;
}

/* ─── Main Content Offset ───────────────────────────────────────────────── */
.xf-main { min-height: 100vh; }

/* ─── HERO SECTION ──────────────────────────────────────────────────────── */
.xf-hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
}
.xf-hero__media {
  position: absolute;
  inset: 0;
}
.xf-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* Overlay layers (matching React source exactly) */
.xf-hero__overlay-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    oklch(0.18 0.06 250 / 0.52) 0%,
    oklch(0.22 0.07 245 / 0.18) 50%,
    oklch(0.12 0.03 250 / 0.48) 100%);
}
.xf-hero__overlay-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    oklch(0.18 0.06 250 / 0.55) 0%,
    oklch(0.18 0.06 250 / 0.10) 50%,
    oklch(0.18 0.06 250 / 0.25) 100%);
}
.xf-hero__overlay-3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    oklch(0.18 0.06 250 / 0.50) 0%,
    transparent 100%);
}
.xf-hero__overlay-grid {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  background-image:
    linear-gradient(oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Ambient orbs */
.xf-hero__orbs { pointer-events: none; position: absolute; inset: 0; }
.xf-hero__orb-1 {
  position: absolute;
  left: -8rem;
  top: 25%;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: oklch(0.38 0.11 240 / 0.3);
  filter: blur(120px);
  animation: xf-drift 14s ease-in-out infinite;
}
.xf-hero__orb-2 {
  position: absolute;
  right: 10%;
  top: 33%;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: oklch(0.86 0.22 130 / 0.15);
  filter: blur(140px);
  animation: xf-drift 14s ease-in-out infinite;
  animation-delay: 3s;
}
@keyframes xf-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%       { transform: translate3d(20px, -15px, 0); }
}
/* Bottom blend */
.xf-hero__bottom-blend {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 8rem;
  background: linear-gradient(to top, var(--navy-deep) 0%, oklch(0.18 0.06 250 / 0.3) 50%, transparent 100%);
}
/* Hero content */
.xf-hero__content {
  position: relative;
  z-index: 10;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 7rem 1.25rem 0;
}
@media (min-width: 640px)  { .xf-hero__content { padding-top: 8rem; } }
@media (min-width: 1024px) { .xf-hero__content { padding-left: 2rem; padding-right: 2rem; padding-top: 12rem; } }

.xf-hero__headline {
  max-width: 56rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.95;
  color: var(--cloud);
  overflow: hidden;
}
@media (min-width: 640px)  { .xf-hero__headline { font-size: 2.25rem; } }
@media (min-width: 768px)  { .xf-hero__headline { font-size: 4.5rem; } }
@media (min-width: 1024px) { .xf-hero__headline { font-size: 5.5rem; } }

.xf-hero__word {
  display: inline-block;
  margin-right: 0.5rem;
  opacity: 0;
  transform: translateY(60px) rotateX(-30deg);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
@media (min-width: 640px) { .xf-hero__word { margin-right: 0.75rem; } }
.xf-hero__word.is-visible { opacity: 1; transform: translateY(0) rotateX(0); }
.xf-hero__word:nth-child(1) { transition-delay: 0.6s; }
.xf-hero__word:nth-child(2) { transition-delay: 0.69s; }
.xf-hero__word:nth-child(3) { transition-delay: 0.78s; }
.xf-hero__word:nth-child(4) { transition-delay: 0.87s; }
.xf-hero__word:nth-child(5) { transition-delay: 0.96s; }

.xf-hero__sub {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 0.875rem;
  color: oklch(0.98 0.01 240 / 0.8);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: 1.3s;
}
@media (min-width: 640px) { .xf-hero__sub { font-size: 1rem; } }
@media (min-width: 768px) { .xf-hero__sub { font-size: 1.125rem; } }
.xf-hero__sub.is-visible { opacity: 1; transform: translateY(0); }

.xf-hero__cta-wrap {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: 1.6s;
}
.xf-hero__cta-wrap.is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 640px) {
  .xf-hero__cta-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }
}

.xf-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;             /* 8px */
  padding: 1rem 1.75rem;   /* 16px 28px — exact React py-4 px-7 */
  border-radius: 6px;
  /* Hex fallback then OKLCH */
  background-color: #a3e635;
  background-color: oklch(0.86 0.22 130);
  color: #111827;
  color: oklch(0.18 0.06 250);
  font-weight: 600;
  font-size: 1rem;          /* 16px */
  font-family: var(--font-sans), system-ui, sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* Pulse-glow animation — hero CTA specific */
  animation: xf-pulse-glow 2.8s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
  width: 100%;
  text-align: center;
}
@media (min-width: 640px) { .xf-hero__cta { width: auto; } }
.xf-hero__cta:hover {
  background-color: #bef264;
  background-color: oklch(0.9 0.24 130);
  color: #111827;
  transform: translateY(-3px);
}
.xf-hero__cta-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.xf-hero__cta:hover .xf-hero__cta-arrow { transform: translateX(4px); }
@keyframes xf-pulse-glow {
  0%, 100% {
    box-shadow: rgba(163, 230, 53, 0.55) 0px 0px 0px 0px,
                rgba(163, 230, 53, 0.5) 0px 0px 60px -10px;
    box-shadow: oklch(0.86 0.22 130 / 0.55) 0px 0px 0px 0px,
                oklch(0.86 0.22 130 / 0.5) 0px 0px 60px -10px;
  }
  50% {
    box-shadow: rgba(163, 230, 53, 0) 0px 0px 0px 14px,
                rgba(163, 230, 53, 0.7) 0px 0px 80px -8px;
    box-shadow: oklch(0.86 0.22 130 / 0) 0px 0px 0px 14px,
                oklch(0.86 0.22 130 / 0.7) 0px 0px 80px -8px;
  }
}

/* Floating tags */
.xf-hero__tags {
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 8rem;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
@media (min-width: 1024px) { .xf-hero__tags { display: flex; } }

.xf-hero__tag {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid oklch(0.86 0.22 130 / 0.3);
  background: oklch(0.18 0.06 250 / 0.6);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cloud);
  backdrop-filter: blur(8px);
  animation: xf-float 4s ease-in-out infinite;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.xf-hero__tag.is-visible { opacity: 1; transform: translateX(0); }
.xf-hero__tag:nth-child(1) { transition-delay: 1.9s;  animation-delay: 0s; }
.xf-hero__tag:nth-child(2) { transition-delay: 2.02s; animation-delay: 0.4s; }
.xf-hero__tag:nth-child(3) { transition-delay: 2.14s; animation-delay: 0.8s; }
.xf-hero__tag:nth-child(4) { transition-delay: 2.26s; animation-delay: 1.2s; }
.xf-hero__tag:nth-child(5) { transition-delay: 2.38s; animation-delay: 1.6s; }
.xf-hero__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 0.5rem;
  flex-shrink: 0;
}
@keyframes xf-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ─── ABOUT SECTION ─────────────────────────────────────────────────────── */
.xf-about {
  position: relative;
  overflow: hidden;
  padding: var(--section-py) 0;
}
.xf-about__bg-grid {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    linear-gradient(oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.xf-about__orb {
  position: absolute;
  left: -8rem;
  top: 5rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: oklch(0.38 0.11 240 / 0.3);
  filter: blur(120px);
}
.xf-about__grid {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .xf-about__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    align-items: center;
  }
}
.xf-about__copy { display: flex; flex-direction: column; justify-content: center; }
.xf-about__title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--cloud);
}
@media (min-width: 768px) { .xf-about__title { font-size: 3rem; } }
@media (min-width: 1024px) { .xf-about__title { font-size: 3.75rem; } }
.xf-about__body {
  margin-top: 1.5rem;
  color: oklch(0.98 0.01 240 / 0.75);
}
@media (min-width: 768px) { .xf-about__body { font-size: 1.125rem; } }

.xf-about__img-wrap { position: relative; }
.xf-about__img-border {
  position: absolute;
  inset: -0.75rem;
  border-radius: 1rem;
  border: 1px solid oklch(0.86 0.22 130 / 0.2);
}
.xf-about__img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: var(--shadow-cinematic);
  transform: rotate(-1.5deg);
}
.xf-about__img {
  height: 17.5rem;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 640px) { .xf-about__img { height: 23.75rem; } }
@media (min-width: 768px) { .xf-about__img { height: 32.5rem; } }
.xf-about__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.18 0.06 250 / 0.8) 0%, transparent 60%);
}
.xf-about__img-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cloud);
}
.xf-about__img-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lime);
}
.xf-about__img-model {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
.xf-about__img-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid oklch(0.86 0.22 130 / 0.3);
  background: oklch(0.18 0.06 250 / 0.6);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--lime);
  backdrop-filter: blur(8px);
}

/* ─── AIRCRAFT SECTION ──────────────────────────────────────────────────── */
.xf-aircraft {
  position: relative;
  display: flex;
  min-height: 100svh;
  width: 100%;
  align-items: center;
  overflow: hidden;
  padding: var(--section-py) 0;
}
.xf-aircraft__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.xf-aircraft__overlay-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, oklch(0.18 0.06 250 / 0.9) 0%, oklch(0.18 0.06 250 / 0.7) 50%, oklch(0.18 0.06 250 / 0.4) 100%);
}
.xf-aircraft__overlay-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--navy-deep) 0%, transparent 50%, oklch(0.18 0.06 250 / 0.3) 100%);
}
.xf-aircraft__grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.xf-aircraft__content {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  padding: 0 1.25rem;
}
@media (min-width: 1024px) { .xf-aircraft__content { padding-left: 2rem; padding-right: 2rem; } }
.xf-aircraft__text { max-width: 48rem; }
.xf-aircraft__title {
  margin-top: 1.25rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--cloud);
}
@media (min-width: 768px) { .xf-aircraft__title { font-size: 3rem; } }
@media (min-width: 1024px) { .xf-aircraft__title { font-size: 3.75rem; } }
.xf-aircraft__body {
  margin-top: 1.5rem;
  max-width: 42rem;
  color: oklch(0.98 0.01 240 / 0.8);
}
@media (min-width: 768px) { .xf-aircraft__body { font-size: 1.125rem; } }
.xf-aircraft__stats {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) { .xf-aircraft__stats { grid-template-columns: repeat(3, 1fr); } }
.xf-aircraft__stat {
  border-radius: 1rem;
  border: 1px solid oklch(0.86 0.22 130 / 0.2);
  background: oklch(0.18 0.06 250 / 0.6);
  padding: 1.5rem;
  backdrop-filter: blur(8px);
}
.xf-aircraft__stat-value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--lime);
}
@media (min-width: 768px) { .xf-aircraft__stat-value { font-size: 2.25rem; } }
.xf-aircraft__stat-label {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: oklch(0.98 0.01 240 / 0.8);
}

/* ─── VIDEO SHOWCASE SECTION ────────────────────────────────────────────── */
.xf-video {
  position: relative;
  padding: var(--section-py) 0;
  background: var(--carbon);
}
.xf-video__radar {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: radial-gradient(circle at center, oklch(0.86 0.22 130 / 0.08) 0%, transparent 70%);
}
.xf-video__inner {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 1024px) { .xf-video__inner { padding-left: 2rem; padding-right: 2rem; } }
.xf-video__title {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--cloud);
}
@media (min-width: 768px) { .xf-video__title { font-size: 3rem; } }
@media (min-width: 1024px) { .xf-video__title { font-size: 3.75rem; } }

.xf-video__player-wrap {
  position: relative;
  margin-top: 3.5rem;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid oklch(0.86 0.22 130 / 0.2);
  box-shadow: var(--shadow-cinematic);
  transition: box-shadow 0.3s ease;
}
.xf-video__player-wrap:hover {
  box-shadow: var(--shadow-cinematic), 0 0 0 1px oklch(0.86 0.22 130 / 0.3);
}
.xf-video__el {
  aspect-ratio: 16/9;
  width: 100%;
  display: block;
}
/* Custom thumbnail overlay */
.xf-video__thumb {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  cursor: pointer;
  transition: opacity 0.4s ease;
}
.xf-video__thumb.is-hidden { opacity: 0; pointer-events: none; }
.xf-video__thumb-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 2rem;
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 768px) {
  .xf-video__thumb-logo { padding: 4rem; }
}
.xf-video__play-btn {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  background: var(--lime);
  color: var(--navy-deep);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  box-shadow: 0 0 0 0 oklch(0.86 0.22 130 / 0.4);
}
.xf-video__play-btn:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 0 8px oklch(0.86 0.22 130 / 0.2);
}
.xf-video__play-btn:active { transform: translate(-50%, -50%) scale(0.95); }

/* ─── TESTIMONIALS SECTION ──────────────────────────────────────────────── */
.xf-testimonials {
  position: relative;
  overflow: hidden;
  padding: var(--section-py) 0;
}
.xf-testimonials__grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.xf-testimonials__inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 1024px) { .xf-testimonials__inner { padding-left: 2rem; padding-right: 2rem; } }

/* Marquee container */
.xf-testimonials__marquee-wrap {
  position: relative;
  margin-top: 3.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  overflow: hidden;
}
.xf-testimonials__marquee {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: xf-marquee 30s linear infinite;
}
.xf-testimonials__marquee:hover { animation-play-state: paused; }
@keyframes xf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.xf-testimonial-card {
  width: 21.25rem;
  flex-shrink: 0;
  border-radius: 1rem;
  border: 1px solid oklch(0.86 0.22 130 / 0.15);
  background: var(--card);
  padding: 1.5rem;
}
@media (min-width: 768px) { .xf-testimonial-card { width: 26.25rem; } }
.xf-testimonial-card__stars {
  display: flex;
  gap: 0.25rem;
  color: var(--lime);
}
.xf-testimonial-card__star { width: 1rem; height: 1rem; fill: currentColor; }
.xf-testimonial-card__quote {
  margin-top: 1rem;
  color: oklch(0.98 0.01 240 / 0.9);
  font-style: italic;
}
@media (min-width: 768px) { .xf-testimonial-card__quote { font-size: 1.125rem; } }
.xf-testimonial-card__author {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.xf-testimonial-card__avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lime), var(--jet-blue));
  font-weight: 700;
  color: var(--navy-deep);
  font-size: 1rem;
  flex-shrink: 0;
}
.xf-testimonial-card__name {
  font-weight: 600;
  color: var(--cloud);
  font-size: 0.9375rem;
}
.xf-testimonial-card__role {
  font-size: 0.75rem;
  color: oklch(0.98 0.01 240 / 0.6);
}

/* ─── FAQ SECTION ───────────────────────────────────────────────────────── */
.xf-faq {
  position: relative;
  padding: var(--section-py) 0;
  background: var(--carbon);
}
.xf-faq__radar-bg {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: radial-gradient(circle at center, oklch(0.86 0.22 130 / 0.08) 0%, transparent 70%);
}
.xf-faq__inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 1024px) { .xf-faq__inner { padding-left: 2rem; padding-right: 2rem; } }
.xf-faq__list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.xf-faq__item {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid oklch(0.86 0.22 130 / 0.15);
  background: oklch(0.18 0.06 250 / 0.4);
}
.xf-faq__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  transition: background 0.2s ease;
}
.xf-faq__trigger:hover { background: oklch(0.86 0.22 130 / 0.05); }
.xf-faq__question {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cloud);
}
@media (min-width: 768px) { .xf-faq__question { font-size: 1.125rem; } }
.xf-faq__chevron {
  color: var(--lime);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  width: 1.25rem;
  height: 1.25rem;
}
.xf-faq__item.is-open .xf-faq__chevron,
.xf-faq-page-item.is-open .xf-faq__chevron { transform: rotate(180deg); }
.xf-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.xf-faq__item.is-open .xf-faq__answer,
.xf-faq-page-item.is-open .xf-faq__answer { max-height: 800px; }
.xf-faq__answer-inner {
  padding: 0 1.5rem 1.5rem;
  color: oklch(0.98 0.01 240 / 0.75);
  white-space: pre-line;
  line-height: 1.7;
}
.xf-faq__answer-inner a,
.xf-faq__link {
  color: var(--lime);
  text-underline-offset: 4px;
}
.xf-faq__answer-inner a:hover,
.xf-faq__link:hover { text-decoration: underline; }

/* ─── FOOTER ────────────────────────────────────────────────────────────── */
.xf-footer {
  position: relative;
  border-top: 1px solid oklch(0.86 0.22 130 / 0.2);
  background: #fff;
  padding: 4rem 0;
}
.xf-footer__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) { .xf-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .xf-footer__grid { grid-template-columns: repeat(4, 1fr); } }

.xf-footer__logo-wrap { display: inline-flex; padding: 0.75rem 1rem; }
.xf-footer__logo { height: 2.5rem; width: auto; }
@media (min-width: 768px) { .xf-footer__logo { height: 5rem; } }

.xf-footer__brand-text {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.6;
}

.xf-footer__heading {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
  color: var(--brand-blue-hex);
}

.xf-footer__links {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.xf-footer__links--plain { color: #4b5563; }
.xf-footer__link {
  color: #4b5563;
  transition: color 0.2s ease;
}
.xf-footer__link:hover { color: var(--brand-blue); color: var(--brand-blue-hex); }
.xf-footer__link--icon {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.xf-footer__link--icon svg { color: var(--brand-blue); color: var(--brand-blue-hex); flex-shrink: 0; }
.xf-footer__address {
  padding-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
}

.xf-footer__social {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.5rem;
}
.xf-footer__social-link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid oklch(0.30 0.13 243 / 0.25);
  color: var(--brand-blue);
  color: var(--brand-blue-hex);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.xf-footer__social-link:hover {
  background: var(--brand-blue);
  background: var(--brand-blue-hex);
  border-color: var(--brand-blue);
  border-color: var(--brand-blue-hex);
  color: #fff;
}

.xf-footer__bottom {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: #6b7280;
}
@media (min-width: 768px) { .xf-footer__bottom { flex-direction: row; } }

/* ─── SCROLL TO TOP ─────────────────────────────────────────────────────── */
.xf-scroll-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  /* Hex fallback then OKLCH */
  background-color: #a3e635;
  background-color: oklch(0.86 0.22 130);
  color: #111827;
  color: oklch(0.18 0.06 250);
  box-shadow: #a3e635 0px 0px 60px -10px;
  box-shadow: oklch(0.86 0.22 130 / 0.5) 0px 0px 60px -10px;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.xf-scroll-top:hover { transform: translateY(-4px); }

/* ─── 404 PAGE ──────────────────────────────────────────────────────────── */
.xf-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
}
.xf-404__grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.86 0.22 130 / 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.xf-404__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: oklch(0.38 0.11 240 / 0.15);
  filter: blur(100px);
  pointer-events: none;
}
.xf-404__content {
  position: relative;
  max-width: 32rem;
  text-align: center;
}
.xf-404__number {
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-lime);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 768px) { .xf-404__number { font-size: 12rem; } }
.xf-404__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.06;
  pointer-events: none;
}
.xf-404__title {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cloud);
}
.xf-404__desc {
  margin-top: 0.75rem;
  color: oklch(0.98 0.01 240 / 0.6);
}
.xf-404__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.xf-404__eyebrow { margin-bottom: 1rem; }

/* ─── Reduced Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE HEX FALLBACKS
   For browsers without oklch() / CSS color 4 support (pre-2023 browsers)
   All critical color values duplicated as hex. Hex goes first (fallback),
   oklch goes second (modern override) — browser ignores what it can't parse.
   ═══════════════════════════════════════════════════════════════════════════ */
@supports not (color: oklch(0 0 0)) {
  /* Core backgrounds */
  body                  { background-color: #111827; color: #f6f8fc; }
  .xf-video             { background-color: #0c1220; }
  .xf-faq               { background-color: #0c1220; }
  .xf-page-section--carbon { background-color: #0c1220; }
  .xf-stat-bar          { background-color: #0c1220; }

  /* Cards and elevated surfaces */
  .xf-testimonial-card  { background-color: #171e30; border-color: rgba(163,230,53,.15); }
  .xf-aircraft__stat    { background-color: rgba(15,25,45,.6); border-color: rgba(163,230,53,.1); }
  .xf-pillar-card       { background-color: #171e30; border-color: rgba(163,230,53,.2); }
  .xf-package-card      { background-color: #171e30; border-color: rgba(163,230,53,.15); }
  .xf-faq__item,
  .xf-faq-page-item     { background-color: rgba(15,25,45,.4); border-color: rgba(163,230,53,.15); }
  .xf-highlight-card    { background-color: rgba(15,25,45,.6); border-color: rgba(163,230,53,.1); }
  .xf-crew-stat         { background-color: rgba(15,25,45,.5); border-color: rgba(163,230,53,.12); }
  .xf-req-card          { background-color: rgba(15,25,45,.6); border-color: rgba(163,230,53,.1); }
  .xf-location-card,
  .xf-prep-card         { background-color: #171e30; border-color: rgba(163,230,53,.15); }
  .xf-quote-card        { background-color: rgba(15,25,45,.6); border-color: rgba(163,230,53,.15); }
  .xf-wte__accordion    { background-color: rgba(15,25,45,.5); border-color: rgba(163,230,53,.12); }
  .xf-calendar-section  { background-color: #171e30; border-color: rgba(163,230,53,.2); }

  /* Text colors */
  .xf-section-header__title,
  .xf-aircraft__title,
  .xf-about__title,
  .xf-cta-block__title,
  .xf-faq-contact-card__title,
  .xf-wte__step-title,
  .xf-faq__question,
  .xf-stat-card__value,
  .xf-pillar-card__title,
  .xf-package-card__name,
  .xf-crew-photo-name,
  .xf-quote-card__text,
  .xf-highlight-card__title,
  h1, h2, h3, h4 { color: #f6f8fc; }

  .xf-section-header__sub,
  .xf-aircraft__body,
  .xf-about__body,
  .xf-cta-block__desc,
  .xf-pillar-card__text,
  .xf-package-card__desc,
  .xf-highlight-card__body,
  .xf-faq__answer-inner  { color: rgba(246,248,252,.75); }

  /* Lime accents */
  .xf-eyebrow           { color: #a3e635; border-color: rgba(163,230,53,.3); background-color: rgba(163,230,53,.05); }
  .xf-eyebrow__dot      { background-color: #a3e635; }
  .xf-faq__chevron,
  .xf-stat-card__label,
  .xf-prep-card__label  { color: rgba(163,230,53,.8); }
  .text-gradient-lime   { color: #a3e635; background: none; }
  .text-lime            { color: #a3e635; }

  /* Hero CTA */
  .xf-hero__cta,
  .xf-inner-hero__cta   { background-color: #a3e635; color: #111827; }

  /* FAQs open state */
  .xf-faq__item.is-open,
  .xf-faq-page-item.is-open { background-color: rgba(163,230,53,.06); }
}