:root {
      --bg: #040608;
      --bg-surface: #0a0e16;
      --bg-card: #0f1622;
      --bg-card-hover: #151f2e;
      --gold-primary: #d4af37;
      --gold-light: #f5e7b2;
      --gold-dark: #8c6d1f;
      --gold-bronze: #b9985a;
      --border-gold: rgba(212, 175, 55, 0.22);
      --border-gold-subtle: rgba(212, 175, 55, 0.12);
      --border-gold-strong: rgba(212, 175, 55, 0.45);
      --text-main: #f4f6f8;
      --text-muted: #8a9ba8;
      --text-dim: #526075;
      --line: rgba(212, 175, 55, 0.18);
      --font-serif: 'Cinzel', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 86px;
      background-color: var(--bg);
      color: var(--text-main);
    }

    body {
      width: 100%;
      min-height: 100vh;
      overflow-x: hidden;
      background-color: var(--bg);
      color: var(--text-main);
      font-family: var(--font-sans);
      font-size: 15px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    }

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

    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--gold-primary);
      outline-offset: 3px;
    }

    ::selection {
      background: var(--gold-primary);
      color: #040608;
    }

    .shell {
      width: min(1280px, calc(100% - 64px));
      margin: 0 auto;
    }

    /* TYPOGRAPHY */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 0.72rem;
      letter-spacing: 0.28em;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--gold-primary);
      margin-bottom: 22px;
    }

    .eyebrow::before {
      content: '';
      display: inline-block;
      width: 26px;
      height: 1px;
      background: currentColor;
    }

    h1, h2, h3 {
      font-family: var(--font-serif);
      letter-spacing: 0.03em;
      font-weight: 500;
    }

    h2 {
      font-size: clamp(2rem, 3.8vw, 3.2rem);
      line-height: 1.2;
      color: #ffffff;
      text-transform: uppercase;
    }

    h2 em {
      font-style: italic;
      font-weight: 400;
      color: var(--gold-light);
    }

    h3 {
      font-size: 1.15rem;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: 0.02em;
    }

    .lead-text {
      font-size: 1.12rem;
      line-height: 1.8;
      color: #e2e8f0;
      font-weight: 400;
    }

    .sub-text {
      font-size: 0.95rem;
      line-height: 1.85;
      color: var(--text-muted);
    }

    /* SECTION BASICS */
    .section {
      padding: 120px 0;
      position: relative;
    }

    .section-border-top {
      border-top: 1px solid var(--line);
    }

    .section-head {
      margin-bottom: 64px;
      max-width: 860px;
    }

    .section-head p {
      margin-top: 20px;
    }

    /* 00. HERO SCREEN */
    .hero-screen {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 0;
      max-height: none;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: var(--bg);
    }

    /* Ambient luxury illumination */
    .ambient-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(212, 175, 55, 0.07) 0%, rgba(10, 14, 22, 0.5) 45%, transparent 75%);
      pointer-events: none;
      z-index: 1;
      filter: blur(50px);
    }

    /* World Map Background Layer */
    .map-container {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      opacity: 0.85;
    }

    .world-svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Canvas for animated flight radar & aircraft */
    #radar-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    /* Central Content */
    .stage {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 24px;
      max-width: 840px;
    }

    /* Monogram Crest with interactive 3D tilt */
    /* Brand Emblem with interactive 3D tilt */
    .crest-wrap {
      perspective: 800px;
      margin-bottom: 28px;
      cursor: default;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .crest-emblem {
      width: 130px;
      height: auto;
      max-height: 110px;
      object-fit: contain;
      filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.45)) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.9));
      transition: transform 0.25s ease-out, filter 0.25s ease-out;
    }

    .crest-emblem:hover {
      filter: drop-shadow(0 0 35px rgba(212, 175, 55, 0.75)) drop-shadow(0 6px 20px rgba(0, 0, 0, 1));
    }

    /* Typography */
    .brand-title {
      font-family: var(--font-serif);
      font-size: clamp(2.4rem, 6vw, 4.4rem);
      font-weight: 500;
      letter-spacing: 0.38em;
      text-indent: 0.38em;
      text-transform: uppercase;
      line-height: 1.1;
      background: linear-gradient(180deg, #ffffff 25%, #d8e2ee 70%, #909fb5 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 14px;
    }

    .brand-subtitle {
      font-family: var(--font-sans);
      font-size: clamp(0.7rem, 1.6vw, 0.82rem);
      letter-spacing: 0.48em;
      text-indent: 0.48em;
      text-transform: uppercase;
      color: var(--gold-primary);
      font-weight: 500;
      margin-bottom: 0;
    }

    /* Hairline Divider with diamond pip */
    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 240px;
      margin-bottom: 34px;
      position: relative;
    }

    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
    }

    .divider-pip {
      width: 5px;
      height: 5px;
      background: var(--gold-primary);
      transform: rotate(45deg);
      margin: 0 14px;
      box-shadow: 0 0 8px var(--gold-primary);
    }

    /* Status Capsule */
    .status-capsule {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 10px 24px;
      border-radius: 9999px;
      background: rgba(10, 14, 22, 0.75);
      border: 1px solid rgba(212, 175, 55, 0.25);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .beacon-dot {
      width: 6px;
      height: 6px;
      background-color: var(--gold-primary);
      border-radius: 50%;
      position: relative;
      box-shadow: 0 0 10px var(--gold-primary);
    }

    .beacon-dot::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1px solid var(--gold-primary);
      animation: beaconPulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }

    @keyframes beaconPulse {
      0% { transform: scale(0.6); opacity: 0.9; }
      100% { transform: scale(2.2); opacity: 0; }
    }

    .status-text {
      font-size: 0.72rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: #cbd5e1;
      font-weight: 500;
    }

    /* Subtle FBO Hubs at Bottom */
    .telemetry-coords {
      position: absolute;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      font-size: 0.65rem;
      letter-spacing: 0.32em;
      color: var(--text-dim);
      text-transform: uppercase;
      white-space: nowrap;
    }

    .telemetry-coords span {
      color: var(--gold-dark);
      margin: 0 8px;
    }

    @media (max-width: 600px) {
      .telemetry-coords {
        font-size: 0.55rem;
        letter-spacing: 0.2em;
        bottom: 20px;
      }
      .status-capsule {
        padding: 8px 18px;
      }
    }
  
    /* SCROLL CUE */
    .scroll-cue {
      position: absolute;
      bottom: 26px;
      right: 48px;
      z-index: 6;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: var(--gold-bronze);
      font-size: 9px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      opacity: 0.75;
      transition: opacity 0.25s, transform 0.25s;
    }

    .scroll-cue:hover {
      opacity: 1;
      transform: translateY(3px);
    }

    .scroll-cue .scroll-bar {
      width: 1px;
      height: 28px;
      background: linear-gradient(180deg, var(--gold-primary), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
      0%, 100% { transform: scaleY(0.6); opacity: 0.4; }
      50% { transform: scaleY(1); opacity: 1; }
    }


@media(max-width:640px){.telemetry-coords{display:none}.scroll-cue{right:24px;bottom:20px}}

@media(max-width:360px){.hero-screen .brand-title{font-size:2.05rem;letter-spacing:.32em;text-indent:.32em}.hero-screen .brand-subtitle{font-size:.65rem;letter-spacing:.38em;text-indent:.38em}}