:root {
  --vam-bg: #02070c !important;
  --vam-bg-raised: #06111a !important;
  --vam-surface: rgba(7, 20, 30, 0.78) !important;
  --vam-surface-soft: rgba(8, 24, 36, 0.6) !important;
  --vam-surface-hover: rgba(12, 32, 47, 0.82) !important;
  --vam-line: rgba(153, 194, 219, 0.16) !important;
  --vam-line-strong: rgba(119, 205, 247, 0.32) !important;
  --vam-text: #f4f8fa !important;
  --vam-muted: #91a5b2 !important;
  --vam-faint: #627783 !important;
  --vam-accent: #49c2f2 !important;
  --vam-accent-soft: rgba(73, 194, 242, 0.12) !important;
  --vam-success: #53dda6 !important;
  --vam-radius: 8px !important;
  --vam-radius-large: 18px !important;
  --vam-radius-lg: 18px !important;
  --vam-header: 88px !important;
  --vam-header-height: 88px !important;
  --vam-content: 1320px !important;
}

html,
body {
  background: var(--vam-bg) !important;
}

body {
  color: var(--vam-text) !important;
  letter-spacing: 0 !important;
}

body::after {
  display: none !important;
}

.page,
.portal-page,
#login-page,
#pilot-home,
#profile-page,
#friends-page {
  position: relative !important;
  min-height: 100svh !important;
  overflow-x: clip !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 78% 12%, rgba(35, 139, 186, 0.11), transparent 30%),
    linear-gradient(115deg, #02070c 0%, #06121b 55%, #02070c 100%) !important;
}

.page::before,
.portal-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 29%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 51% 72%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.5px) !important;
  background-size: 310px 310px, 420px 420px, 520px 520px !important;
  opacity: 0.44 !important;
}

.page::after,
.portal-page::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(2, 7, 12, 0.9) 0%, rgba(2, 7, 12, 0.56) 36%, rgba(2, 7, 12, 0.08) 68%, rgba(2, 7, 12, 0.24) 100%),
    linear-gradient(180deg, rgba(2, 7, 12, 0.06), rgba(2, 7, 12, 0.64) 96%) !important;
}

.earth-canvas,
#earth-canvas,
.earth-scene,
.earth-fallback,
.site-earth,
.portal-earth {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
}

.earth-ready:not(.webgl-fallback) > .earth-canvas,
.portal-page.earth-ready:not(.webgl-fallback) > .earth-canvas,
.page.earth-ready:not(.webgl-fallback) > .earth-canvas {
  opacity: 0.88 !important;
}

.earth-ready:not(.webgl-fallback) > .earth-fallback {
  opacity: 0 !important;
}

.site-aircraft-layer {
  position: fixed;
  inset: var(--vam-header) 0 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.site-aircraft {
  position: absolute;
  left: -12vw;
  color: rgba(229, 246, 254, 0.65);
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 0 9px rgba(104, 207, 250, 0.5));
  animation: inner-aircraft-flyby 30s linear infinite;
  will-change: transform, opacity;
}

.site-aircraft::after {
  content: "";
  position: absolute;
  top: 54%;
  right: 76%;
  width: clamp(80px, 10vw, 170px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 230, 248, 0.28));
}

.site-aircraft-one {
  top: 26%;
  font-size: clamp(1.4rem, 2vw, 2.5rem);
  animation-delay: -9s;
}

.site-aircraft-two {
  top: 64%;
  font-size: clamp(0.8rem, 1.1vw, 1.3rem);
  color: rgba(205, 232, 244, 0.42);
  animation-duration: 39s;
  animation-delay: -27s;
}

.site-aircraft-three {
  top: 10%;
  font-size: 0.75rem;
  color: rgba(205, 232, 244, 0.3);
  animation-duration: 46s;
  animation-delay: -18s;
}

@keyframes inner-aircraft-flyby {
  0% {
    opacity: 0;
    transform: translate3d(-8vw, 5vh, 0) rotate(-12deg);
  }
  9% { opacity: 0.72; }
  88% { opacity: 0.55; }
  100% {
    opacity: 0;
    transform: translate3d(126vw, -10vh, 0) rotate(-12deg);
  }
}

.topbar,
.portal-topbar,
.site-topbar,
header.topbar {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 40 !important;
  width: 100% !important;
  min-height: var(--vam-header) !important;
  height: var(--vam-header) !important;
  padding: 0 clamp(24px, 4vw, 72px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(153, 194, 219, 0.1) !important;
  background: linear-gradient(180deg, rgba(2, 7, 12, 0.82), rgba(2, 7, 12, 0.48)) !important;
  backdrop-filter: blur(15px) saturate(1.15) !important;
  box-shadow: none !important;
}

.topbar > a,
.portal-topbar > a,
.site-topbar > a {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

.brand,
.portal-brand,
img.brand,
img.portal-brand,
.topbar .brand,
.portal-topbar .brand {
  width: clamp(156px, 14vw, 204px) !important;
  max-width: 204px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.nav,
.portal-nav,
.topbar nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav a,
.portal-nav a,
.portal-nav button,
.topbar nav a {
  min-height: 40px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #a9bac4 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.nav a:hover,
.portal-nav a:hover,
.portal-nav button:hover,
.topbar nav a:hover,
.nav a.active,
.portal-nav a.active,
.nav a[aria-current="page"],
.portal-nav a[aria-current="page"] {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 -2px var(--vam-accent) !important;
}

.nav a.nav-login,
.portal-nav a.nav-login,
.topbar nav a.nav-login,
.nav > a:last-child,
.topbar nav > a:last-child {
  margin-left: 7px !important;
  padding-inline: 18px !important;
  border: 1px solid rgba(124, 211, 248, 0.42) !important;
  color: #e8f8ff !important;
  background: rgba(73, 194, 242, 0.08) !important;
  box-shadow: none !important;
}

.nav a.nav-login:hover,
.portal-nav a.nav-login:hover,
.topbar nav a.nav-login:hover,
.nav > a:last-child:hover,
.topbar nav > a:last-child:hover {
  color: #031019 !important;
  background: var(--vam-accent) !important;
  box-shadow: none !important;
}

.site-menu-toggle {
  position: relative;
  z-index: 42;
  width: 44px;
  height: 44px;
  padding: 0;
  display: none;
  border: 1px solid var(--vam-line-strong);
  border-radius: 9px;
  background: rgba(6, 17, 26, 0.76);
  cursor: pointer;
}

.site-menu-toggle > span:not(.site-menu-label) {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: #fff;
  transition: transform 180ms ease;
}

.site-menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.site-menu-toggle[aria-expanded="true"] > span:nth-child(2) {
  transform: translateY(3px) rotate(45deg);
}

.site-menu-toggle[aria-expanded="true"] > span:nth-child(3) {
  transform: translateY(-3px) rotate(-45deg);
}

.page > main,
.portal-page > main,
.about-premium-main,
.maintenance-main,
.join-main,
.rankings-main,
.portal-shell,
.login-shell,
.not-found-card {
  position: relative !important;
  z-index: 3 !important;
}

.eyebrow,
.section-label,
.kicker,
.portal-kicker,
.card-kicker {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #92ddfa !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.eyebrow::before,
.section-label::before,
.kicker::before,
.portal-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--vam-accent);
  box-shadow: 0 0 12px rgba(73, 194, 242, 0.64);
}

h1,
h2,
h3,
h4 {
  color: var(--vam-text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
}

.maintenance-main h1,
.join-main .page-copy > h1,
.rankings-hero h1,
.about-premium-copy h1,
#friends-page .friends-hero h1,
.not-found-card h1 {
  max-width: 760px !important;
  font-size: clamp(3.8rem, 6.4vw, 6.5rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.05em !important;
}

p,
.subcopy,
.card-copy {
  color: var(--vam-muted) !important;
}

.button,
a.button,
button.button,
.primary,
.secondary,
.btn,
.portal-button,
.cta-primary,
.primary-button,
.about-hero-actions a,
.actions a,
.actions button {
  min-height: 50px !important;
  padding: 0 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--vam-line-strong) !important;
  border-radius: 8px !important;
  background: rgba(7, 20, 30, 0.7) !important;
  color: #d8e6ec !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.button:hover,
a.button:hover,
button.button:hover,
.secondary:hover,
.btn:hover,
.portal-button:hover,
.actions a:hover,
.actions button:hover {
  border-color: rgba(134, 218, 252, 0.58) !important;
  background: rgba(12, 32, 47, 0.88) !important;
  transform: translateY(-2px) !important;
}

.button.primary,
.primary,
.primary-button,
button.primary,
.cta-primary,
.about-hero-actions .button:first-child,
.join-form button[type="submit"],
.verify-form button[type="submit"],
.login-card button[type="submit"] {
  border-color: var(--vam-accent) !important;
  background: var(--vam-accent) !important;
  color: #031018 !important;
  box-shadow: 0 16px 46px rgba(37, 162, 215, 0.18) !important;
}

input,
select,
textarea {
  min-height: 50px !important;
  border: 1px solid rgba(119, 205, 247, 0.24) !important;
  border-radius: 8px !important;
  background: rgba(2, 9, 14, 0.68) !important;
  color: var(--vam-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--vam-accent) !important;
  background: rgba(3, 13, 20, 0.88) !important;
  outline: 2px solid rgba(73, 194, 242, 0.12) !important;
  outline-offset: 2px !important;
}

.portal-card,
.hero-card,
.feature-card,
.maintenance-card,
.rankings-card,
.login-card,
.join-card,
.auth-card,
.rankings-panel,
.rankings-summary,
.about-flight-brief,
.not-found-card {
  border: 1px solid rgba(137, 205, 235, 0.22) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(11, 31, 46, 0.84), rgba(5, 15, 24, 0.76)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 34px 90px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
}

.about-premium-main,
.maintenance-main,
.join-main,
.rankings-main,
.login-shell {
  width: min(var(--vam-content), calc(100vw - 64px)) !important;
  margin-inline: auto !important;
  padding-top: calc(var(--vam-header) + 72px) !important;
  padding-bottom: 90px !important;
}

.about-premium-hero,
.maintenance-main,
.join-main,
.rankings-hero,
.login-shell {
  min-height: min(860px, 100svh) !important;
}

.about-premium-hero,
.join-main,
.rankings-hero,
.login-shell {
  gap: clamp(56px, 8vw, 130px) !important;
}

.about-flight-brief,
.rankings-summary {
  background: rgba(5, 17, 26, 0.5) !important;
}

.about-intro-line,
.feature-showcase,
.about-two-panels,
.about-roadmap {
  position: relative !important;
  z-index: 3 !important;
}

.feature-showcase,
.about-two-panels,
.about-roadmap {
  border-color: var(--vam-line) !important;
}

.maintenance-main > .maintenance-card,
.join-main > .join-card,
.rankings-board {
  align-self: center !important;
}

.login-shell::before {
  content: "Your next flight starts here." !important;
  max-width: 690px !important;
  color: var(--vam-text) !important;
  font-size: clamp(4.1rem, 7vw, 7.2rem) !important;
  font-weight: 600 !important;
  line-height: 0.91 !important;
  letter-spacing: -0.055em !important;
}

.login-card,
.join-card {
  padding: clamp(30px, 4vw, 46px) !important;
}

.login-card h1,
.join-card h2,
.auth-card h1,
.auth-card h2 {
  font-size: clamp(2.2rem, 3vw, 3.2rem) !important;
}

.rankings-board {
  overflow: hidden !important;
  border: 1px solid rgba(137, 205, 235, 0.22) !important;
  border-radius: 18px !important;
  background: rgba(5, 15, 24, 0.74) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.18) !important;
}

.rankings-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.rankings-panel + .rankings-panel {
  border-left: 1px solid var(--vam-line) !important;
}

.portal-shell,
.pilot-dashboard {
  width: min(var(--vam-content), calc(100vw - 64px)) !important;
  margin-inline: auto !important;
  padding-top: calc(var(--vam-header) + 62px) !important;
  padding-bottom: 90px !important;
}

#pilot-home .pilot-hero-compact,
#profile-page .profile-main-card,
#friends-page .friends-hero {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(73, 194, 242, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(11, 31, 46, 0.88), rgba(5, 15, 24, 0.78)) !important;
}

#pilot-home .pilot-hero-compact h1,
#profile-page .profile-main-card h1,
#friends-page .friends-hero h1 {
  font-size: clamp(3.2rem, 5.8vw, 5.8rem) !important;
  line-height: 0.95 !important;
}

.pilot-stat-grid,
.profile-kpi-grid,
.friends-stat-strip {
  overflow: hidden !important;
  border: 1px solid var(--vam-line-strong) !important;
  border-radius: 18px !important;
  background: rgba(5, 15, 24, 0.68) !important;
}

.pilot-stat-grid > *,
.profile-kpi-grid > *,
.friends-stat-strip > * {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#friends-page .portal-shell.friends-shell.friends-clean-shell,
#profile-page .portal-shell.profile-clean-shell {
  width: min(var(--vam-content), calc(100vw - 64px)) !important;
  margin-top: calc(var(--vam-header) + 54px) !important;
  margin-bottom: 84px !important;
  border-radius: 18px !important;
  background: rgba(5, 15, 24, 0.64) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(18px) !important;
}

@media (max-width: 900px) {
  :root {
    --vam-header: 76px !important;
    --vam-header-height: 76px !important;
  }

  .topbar,
  .portal-topbar,
  .site-topbar,
  header.topbar {
    min-height: var(--vam-header) !important;
    height: var(--vam-header) !important;
    padding: 0 20px !important;
    flex-wrap: nowrap !important;
  }

  .brand,
  .portal-brand,
  img.brand,
  img.portal-brand {
    width: 146px !important;
    max-width: 146px !important;
    max-height: 48px !important;
  }

  .site-menu-toggle {
    display: block;
  }

  .nav,
  .portal-nav,
  .topbar nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 41 !important;
    width: 100vw !important;
    max-width: none !important;
    padding: 105px 24px 38px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-y: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background:
      radial-gradient(circle at 80% 10%, rgba(48, 160, 209, 0.16), transparent 30%),
      rgba(2, 7, 12, 0.98) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-12px) !important;
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms !important;
  }

  .nav.is-open,
  .portal-nav.is-open,
  .topbar nav.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .nav a,
  .portal-nav a,
  .portal-nav button,
  .topbar nav a {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vam-line) !important;
    border-radius: 0 !important;
    color: #d3e0e6 !important;
    font-size: 0.8rem !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nav a.nav-login,
  .portal-nav a.nav-login,
  .topbar nav a.nav-login,
  .nav > a:last-child,
  .topbar nav > a:last-child {
    margin: 24px 0 0 !important;
    padding-inline: 18px !important;
    justify-content: center !important;
    border: 1px solid var(--vam-line-strong) !important;
    border-radius: 8px !important;
  }

  body.inner-nav-open {
    overflow: hidden !important;
  }

  .about-premium-main,
  .maintenance-main,
  .join-main,
  .rankings-main,
  .login-shell,
  .portal-shell,
  .pilot-dashboard {
    width: min(100% - 40px, var(--vam-content)) !important;
  }

  .login-shell {
    grid-template-columns: 1fr !important;
  }

  .login-shell::before {
    max-width: 650px !important;
    font-size: clamp(3.6rem, 11vw, 5.6rem) !important;
  }

  .page::after,
  .portal-page::after {
    background:
      linear-gradient(180deg, rgba(2, 7, 12, 0.74) 0%, rgba(2, 7, 12, 0.56) 56%, rgba(2, 7, 12, 0.38) 100%) !important;
  }
}

@media (max-width: 640px) {
  .about-premium-main,
  .maintenance-main,
  .join-main,
  .rankings-main,
  .login-shell,
  .portal-shell,
  .pilot-dashboard {
    width: min(100% - 28px, var(--vam-content)) !important;
    padding-top: calc(var(--vam-header) + 44px) !important;
    padding-bottom: 54px !important;
  }

  .maintenance-main h1,
  .join-main .page-copy > h1,
  .rankings-hero h1,
  .about-premium-copy h1,
  #friends-page .friends-hero h1,
  .not-found-card h1 {
    font-size: clamp(3.1rem, 14vw, 4.6rem) !important;
  }

  .site-aircraft-layer {
    opacity: 0.58;
  }

  #friends-page .portal-shell.friends-shell.friends-clean-shell,
  #profile-page .portal-shell.profile-clean-shell {
    width: calc(100vw - 28px) !important;
    margin-top: calc(var(--vam-header) + 28px) !important;
    margin-bottom: 42px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-aircraft {
    animation: none !important;
    opacity: 0.28 !important;
    transform: translate3d(68vw, 8vh, 0) rotate(-12deg) !important;
  }
}