:root {
  --cabin: #1b2028;        /* the dark inside of the cabin, around the panel */
  --panel: #44505c;        /* the painted instrument panel */
  --panel-edge: #2c343d;   /* the shadowed edges of the panel and the glareshield */
  --bezel: #121418;        /* the black of the dials */
  --sky: #6fbce8;          /* the sky through the windshield */
  --sky-low: #d6eef8;      /* the haze near the horizon */
  --field: #7aa64c;        /* the green fields */
  --field-2: #b9c35a;      /* the yellow fields */
  --earth: #9a6236;        /* the brown half of the attitude indicator */
  --cowl: #d8432f;         /* the red cowling of the nose */
  --accent: #ff8b1e;       /* the orange of the needles and the little plane */
  --cream: #f4ebd7;        /* the words, the markings and the button */
  --ink: #15181d;          /* the text on the button */
}

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

html, body { height: 100%; }

body {
  background: var(--cabin);
  color: var(--cream);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  overflow: hidden;
}

.stage {
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(120% 70% at 50% 100%, #262d37 0%, var(--cabin) 60%),
    var(--cabin);
  overflow: hidden;
}

.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(14px, 3.4vh, 34px) clamp(16px, 4vw, 48px) clamp(6px, 1.6vh, 16px);
}

.hero__eyebrow {
  font-size: clamp(10px, min(1.1vw, 1.8vh), 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.4em;
}

.hero__title {
  font-size: clamp(24px, min(5.2vw, 7.4vh), 68px);
  line-height: 0.95;
  font-weight: 800;
  font-variation-settings: 'wdth' 85;
  letter-spacing: -0.01em;
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__sub {
  margin-top: 0.5em;
  font-size: clamp(11px, min(1.3vw, 2vh), 16px);
  line-height: 1.35;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
  max-width: 34em;
}

.hero__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.85em 1.4em;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(11px, min(1.25vw, 2vh), 15px);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}

@media (hover: hover) {
  .hero__cta:hover { transform: scale(1.05); background: #fff6e4; }
}

.cockpit {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  touch-action: none;
}

.cockpit__svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  overflow: visible;
  cursor: crosshair;
}


.cockpit__svg .tg { cursor: pointer; }

@media (max-width: 560px) {
  .hero { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .hero__sub { display: none; }
}