:root {
  --navy: #0b1837;
  --navy-2: #122b55;
  --midnight: #070914;
  --ink: #111629;
  --muted: #637086;
  --orange: #ec7934;
  --orange-deep: #c94f1b;
  --gold: #f8c84d;
  --cream: #fff8e7;
  --paper: #f7f3ea;
  --sky: #cfefff;
  --sky-2: #80d7f5;
  --teal: #3bd6d7;
  --green: #42b970;
  --ice: #eef8ff;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(9, 18, 38, 0.18);
  --shadow-soft: 0 16px 42px rgba(15, 28, 54, 0.14);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(128, 215, 245, 0.24), transparent 34rem),
    linear-gradient(180deg, #f8fbff 0%, var(--paper) 100%);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY(-150%);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-soft);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  padding: 0.75rem;
  pointer-events: none;
}

.nav-shell {
  width: min(var(--max), calc(100vw - 1.5rem));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 45px rgba(4, 12, 28, 0.12);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.brand img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(9, 18, 38, 0.16);
}

.brand span {
  display: grid;
  gap: 0.02rem;
  min-width: 0;
}

.brand strong {
  color: var(--orange-deep);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

.brand small {
  color: var(--navy-2);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(12, 31, 64, 0.06);
}

.nav-links a {
  border-radius: 999px;
  color: #31405a;
  font-size: 0.86rem;
  font-weight: 850;
  padding: 0.55rem 0.85rem;
}

.nav-links a:hover {
  background: var(--white);
  color: var(--navy);
}

.button {
  display: inline-flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  padding: 1rem 1.25rem;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  white-space: nowrap;
}

.button::after {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  background: currentColor;
  clip-path: polygon(0 44%, 64% 44%, 42% 16%, 54% 8%, 100% 50%, 54% 92%, 42% 84%, 64% 56%, 0 56%);
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--orange) 0%, #f2a737 52%, #338ed4 100%);
  box-shadow: 0 16px 34px rgba(236, 121, 52, 0.35);
}

.button-ghost {
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.button-small {
  min-height: 2.85rem;
  padding: 0.85rem 1rem;
  color: var(--white);
  background: var(--navy);
  box-shadow: 0 12px 24px rgba(8, 20, 45, 0.18);
  font-size: 0.86rem;
}

.dark-text {
  color: var(--navy);
  background: linear-gradient(135deg, #fff3b6, var(--gold) 45%, #f7933e 100%);
  box-shadow: 0 16px 34px rgba(166, 97, 14, 0.25);
}

.section-inner {
  width: min(var(--max), calc(100vw - 1.5rem));
  margin: 0 auto;
}

section {
  position: relative;
  overflow: hidden;
}

.section-dark {
  color: var(--cream);
  background:
    radial-gradient(circle at 80% 18%, rgba(59, 214, 215, 0.24), transparent 23rem),
    radial-gradient(circle at 16% 80%, rgba(236, 121, 52, 0.22), transparent 20rem),
    linear-gradient(135deg, #0e2f60 0%, var(--navy) 46%, var(--midnight) 100%);
}

.section-light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 243, 234, 0.95)),
    radial-gradient(circle at 20% 20%, rgba(128, 215, 245, 0.22), transparent 24rem);
}

.section-blue {
  color: var(--cream);
  background:
    radial-gradient(circle at 84% 22%, rgba(128, 215, 245, 0.26), transparent 24rem),
    linear-gradient(135deg, #18375f 0%, #101a34 100%);
}

.section-lounge {
  color: var(--cream);
  background:
    radial-gradient(circle at 16% 18%, rgba(248, 200, 77, 0.2), transparent 18rem),
    radial-gradient(circle at 84% 62%, rgba(236, 121, 52, 0.2), transparent 20rem),
    linear-gradient(135deg, #26151b 0%, #130d1a 48%, #15223f 100%);
}

.section-gold {
  background: linear-gradient(135deg, #fff3b5 0%, #f7c64a 44%, #ee7934 100%);
}

.section-ice {
  background:
    radial-gradient(circle at 80% 18%, rgba(59, 214, 215, 0.24), transparent 22rem),
    linear-gradient(180deg, #f5fbff 0%, #e8f6ff 100%);
}

.section-vip {
  color: var(--cream);
  background:
    radial-gradient(circle at 78% 20%, rgba(248, 200, 77, 0.2), transparent 23rem),
    linear-gradient(135deg, #06070c 0%, #121216 45%, #251a0c 100%);
}

.hero {
  min-height: 92svh;
  padding: 7.4rem 0 4.5rem;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.2rem;
  align-items: center;
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-ice .eyebrow,
.section-light .eyebrow {
  color: var(--orange-deep);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h1 {
  max-width: 12.4ch;
  margin-bottom: 0.85rem;
  font-size: clamp(3rem, 6.4vw, 4.55rem);
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 9vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 0.45rem;
  font-size: 1.05rem;
  line-height: 1.1;
}

.lead {
  max-width: 40rem;
  margin-bottom: 1.15rem;
  color: rgba(255, 248, 231, 0.84);
  font-size: clamp(1.02rem, 4vw, 1.18rem);
  font-weight: 680;
}

.hero-actions {
  display: grid;
  gap: 0.8rem;
  max-width: 22rem;
}

.boarding-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  max-width: 29rem;
  margin-top: 1.4rem;
}

.boarding-strip span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.72rem;
  color: rgba(255, 248, 231, 0.76);
  font-size: 0.78rem;
  font-weight: 780;
}

.boarding-strip strong {
  display: block;
  color: var(--white);
  font-size: 0.88rem;
}

.skyfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cloud {
  position: absolute;
  width: 7.5rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  filter: blur(0.2px);
  animation: cloudFloat 18s ease-in-out infinite;
}

.cloud::before,
.cloud::after {
  position: absolute;
  bottom: 0.25rem;
  content: "";
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  left: 1rem;
  width: 3rem;
  height: 3rem;
}

.cloud::after {
  left: 3.5rem;
  width: 4rem;
  height: 4rem;
}

.cloud-a {
  top: 16%;
  left: 5%;
}

.cloud-b {
  top: 43%;
  right: 8%;
  transform: scale(0.72);
  animation-delay: -5s;
}

.cloud-c {
  right: 18%;
  bottom: 10%;
  transform: scale(0.56);
  animation-delay: -9s;
}

.desktop-cloud {
  display: none;
}

.cloud-d {
  top: 28%;
  left: -10rem;
  transform: scale(0.82);
}

.cloud-e {
  top: 62%;
  left: -12rem;
  transform: scale(0.64);
}

.cloud-f {
  top: 8%;
  left: -9rem;
  transform: scale(0.5);
}

.flight-line {
  position: absolute;
  width: 15rem;
  height: 15rem;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-right: 0;
  border-bottom: 0;
  border-radius: 50%;
}

.flight-line::after {
  position: absolute;
  right: 1.8rem;
  top: 1.2rem;
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--gold);
  clip-path: polygon(0 45%, 68% 45%, 45% 14%, 57% 8%, 100% 50%, 57% 92%, 45% 86%, 68% 55%, 0 55%);
}

.flight-line-a {
  top: 17%;
  right: 14%;
  transform: rotate(18deg);
}

.flight-line-b {
  bottom: -3rem;
  left: 15%;
  transform: rotate(205deg) scale(1.15);
  opacity: 0.55;
}

.hero-visual {
  position: relative;
  min-height: 37rem;
}

.device-stack {
  position: absolute;
  inset: 0.5rem 0 0;
  min-height: 35rem;
}

.phone-frame {
  position: relative;
  margin: 0;
  border: 0.55rem solid #080b15;
  border-radius: 2.1rem;
  background: #080b15;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.phone-frame::before {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  z-index: 2;
  width: 4.3rem;
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  content: "";
  transform: translateX(-50%);
}

.phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-main {
  position: absolute;
  right: 8%;
  top: 1rem;
  width: min(52vw, 18rem);
  aspect-ratio: 0.574;
  transform: rotate(3deg);
}

.phone-secondary,
.phone-tertiary {
  position: absolute;
  width: min(42vw, 13.6rem);
  aspect-ratio: 0.574;
  opacity: 0.96;
}

.phone-secondary {
  left: 2%;
  top: 5.2rem;
  transform: rotate(-8deg);
}

.phone-tertiary {
  right: 34%;
  bottom: 0.8rem;
  transform: rotate(9deg) scale(0.86);
}

.phone-secondary img {
  object-position: 50% 0;
}

.phone-tertiary img {
  object-position: 50% 0;
}

.floating-card {
  position: absolute;
  z-index: 6;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.route-card {
  top: 1.5rem;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(88vw, 18.5rem);
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
}

.route-card small {
  grid-column: 1 / -1;
  color: rgba(255, 248, 231, 0.78);
  font-weight: 850;
}

.route-code {
  color: var(--white);
  font-weight: 950;
  letter-spacing: 0.12em;
}

.route-dots {
  position: relative;
  height: 0.1rem;
  border-top: 2px dashed rgba(255, 255, 255, 0.35);
}

.route-dots::after {
  position: absolute;
  top: -0.45rem;
  left: 44%;
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--gold);
  clip-path: polygon(0 45%, 68% 45%, 45% 14%, 57% 8%, 100% 50%, 57% 92%, 45% 86%, 68% 55%, 0 55%);
}

.boarding-pass {
  right: 0;
  bottom: 3.2rem;
  display: grid;
  min-width: 12rem;
  padding: 0.9rem 1rem;
}

.boarding-pass span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.boarding-pass strong {
  color: var(--white);
  font-size: 2.1rem;
  line-height: 1;
}

.boarding-pass small {
  color: rgba(255, 248, 231, 0.8);
  font-weight: 850;
}

.hero-mascot {
  position: absolute;
  z-index: 7;
  right: -0.5rem;
  bottom: 0;
  width: min(34vw, 13rem);
  filter: drop-shadow(0 20px 28px rgba(4, 8, 20, 0.24));
}

.hero-mascot img {
  width: 100%;
}

.progression {
  padding: 4.8rem 0;
}

.section-heading {
  max-width: 46rem;
  margin-bottom: 2rem;
}

.section-heading p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 680;
}

.journey-track {
  position: relative;
  display: grid;
  gap: 0.85rem;
}

.journey-track::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1.65rem;
  width: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange), var(--gold), var(--teal));
  content: "";
}

.journey-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.9rem;
  align-items: start;
  border: 1px solid rgba(12, 31, 64, 0.09);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
  padding: 0.95rem;
  box-shadow: 0 12px 34px rgba(9, 18, 38, 0.08);
}

.step-number {
  grid-row: span 3;
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 0.18rem solid var(--gold);
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 950;
}

.step-icon {
  width: 2rem;
  height: 2rem;
  color: var(--orange-deep);
}

.step-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-step h3 {
  align-self: center;
  margin: 0;
}

.journey-step p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 680;
}

.feature {
  padding: 5rem 0;
}

.feature-grid {
  display: grid;
  gap: 2.1rem;
  align-items: center;
}

.feature-copy {
  position: relative;
  z-index: 2;
}

.feature-copy p:not(.eyebrow) {
  max-width: 39rem;
  color: rgba(255, 248, 231, 0.78);
  font-size: 1.05rem;
  font-weight: 680;
}

.section-ice .feature-copy p:not(.eyebrow),
.section-light .feature-copy p:not(.eyebrow) {
  color: var(--muted);
}

.checkpoint-list,
.vip-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.checkpoint-list span,
.vip-perks span {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--cream);
  padding: 0.64rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 900;
}

.checkpoint-visual,
.lounge-visual,
.concierge-visual,
.vip-visual {
  position: relative;
  min-height: 34rem;
}

.security-panel {
  position: absolute;
  inset: 2.8rem 0.2rem 0.6rem 2.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(145deg, rgba(11, 24, 55, 0.88), rgba(37, 72, 110, 0.62));
  background-size: 2rem 2rem, 2rem 2rem, auto;
  box-shadow: var(--shadow);
}

.panel-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem;
  color: var(--cream);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-topline strong {
  border-radius: 999px;
  background: rgba(66, 185, 112, 0.18);
  color: #9dffc2;
  padding: 0.4rem 0.6rem;
}

.feature-phone {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: min(53vw, 15.4rem);
  aspect-ratio: 0.574;
}

.stamp-grid {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  gap: 0.6rem;
  width: min(44vw, 13rem);
}

.stamp-grid span {
  border: 2px solid rgba(248, 200, 77, 0.88);
  border-radius: var(--radius-sm);
  color: var(--gold);
  padding: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.section-mascot {
  position: absolute;
  z-index: 5;
  width: min(42vw, 14rem);
  filter: drop-shadow(0 24px 28px rgba(5, 8, 18, 0.25));
}

.section-mascot img {
  width: 100%;
}

.mascot-left {
  left: -1rem;
  bottom: -0.3rem;
}

.mascot-right {
  right: -0.5rem;
  bottom: -0.3rem;
}

.speech-bubble {
  position: absolute;
  z-index: 6;
  left: 4.2rem;
  bottom: 9.2rem;
  max-width: min(75vw, 17rem);
  border-radius: 22px;
  background: var(--cream);
  color: var(--navy);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-soft);
  font-weight: 950;
  line-height: 1.25;
}

.bubble-warm {
  right: 6rem;
  left: auto;
  color: #45200e;
}

.bubble-ice {
  background: var(--white);
  color: #163a72;
}

.bubble-vip {
  right: 6.4rem;
  left: auto;
  border: 1px solid rgba(248, 200, 77, 0.42);
  background: #fff4be;
  color: #281a05;
}

.lounge-visual .tall-phone,
.concierge-visual .tall-phone {
  position: absolute;
  top: 1rem;
  left: 50%;
  width: min(62vw, 18rem);
  aspect-ratio: 0.574;
  transform: translateX(-50%) rotate(-2deg);
}

.lounge-menu {
  display: grid;
  gap: 0.75rem;
  max-width: 33rem;
  margin-top: 1.4rem;
}

.lounge-menu article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.12rem 0.75rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lounge-menu strong,
.lounge-menu small {
  grid-column: 2;
}

.lounge-menu small {
  color: rgba(255, 248, 231, 0.68);
  font-weight: 760;
}

.menu-dot {
  grid-row: span 2;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.85rem;
}

.menu-dot.gold {
  background: linear-gradient(135deg, var(--gold), var(--orange));
}

.menu-dot.coral {
  background: linear-gradient(135deg, #ff6c6c, var(--orange));
}

.menu-dot.cyan {
  background: linear-gradient(135deg, var(--teal), #3988d7);
}

.mid-cta {
  padding: 2.1rem 0;
}

.cta-band {
  display: grid;
  gap: 1.4rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.26);
  padding: 1.2rem;
  box-shadow: var(--shadow-soft);
}

.cta-band .eyebrow {
  color: var(--navy);
}

.cta-band h2 {
  max-width: 15ch;
  margin-bottom: 0;
  color: var(--navy);
  font-size: clamp(1.75rem, 8vw, 3.35rem);
}

.chat-preview {
  display: grid;
  gap: 0.7rem;
  max-width: 34rem;
  margin-top: 1.4rem;
}

.chat-preview p {
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--white);
  color: #31405a;
  padding: 0.9rem 1rem;
  box-shadow: 0 10px 28px rgba(40, 75, 120, 0.12);
  font-weight: 760;
}

.chat-preview p:nth-child(2) {
  margin-right: 1.2rem;
  background: #183d78;
  color: var(--white);
}

.chat-preview p:nth-child(1),
.chat-preview p:nth-child(3) {
  margin-left: 1.2rem;
}

.chat-preview span {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--orange-deep);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chat-preview p:nth-child(2) span {
  color: var(--gold);
}

.flights {
  padding: 5rem 0;
}

.flights-layout {
  display: grid;
  gap: 2rem;
}

.departure-system {
  position: relative;
  min-height: 38rem;
}

.departure-board {
  position: absolute;
  z-index: 2;
  top: -2.8rem;
  left: 0;
  width: min(92vw, 34rem);
  border: 0.35rem solid #070914;
  border-radius: var(--radius-lg);
  background: #0a0b12;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.board-row {
  display: grid;
  grid-template-columns: 4.6rem 1fr 6.7rem;
  gap: 0.55rem;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.8rem;
  color: var(--cream);
  font-weight: 900;
}

.board-row span {
  color: rgba(255, 248, 231, 0.66);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.board-row em {
  color: var(--sky-2);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

.board-row.active {
  background: linear-gradient(90deg, rgba(236, 121, 52, 0.95), rgba(248, 200, 77, 0.95));
  color: #120f08;
}

.board-row.active span,
.board-row.active em {
  color: #120f08;
}

.board-head {
  background: #11182b;
}

.flights-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(54vw, 17rem);
  aspect-ratio: 0.574;
  transform: rotate(4deg);
}

.flights-phone.second {
  right: min(31vw, 14rem);
  bottom: 1rem;
  width: min(45vw, 14rem);
  opacity: 1;
  transform: rotate(-5deg);
}

.vip-visual {
  min-height: 35rem;
}

.vip-card {
  position: absolute;
  top: 1.4rem;
  left: 0.5rem;
  z-index: 4;
  display: grid;
  width: min(90vw, 19rem);
  border: 1px solid rgba(248, 200, 77, 0.42);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, #08080a, #2b1d08);
  padding: 1rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}

.vip-card span {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.vip-card strong {
  color: var(--white);
  font-size: 3rem;
  line-height: 1;
}

.vip-card small {
  color: rgba(255, 248, 231, 0.7);
  font-weight: 850;
}

.vip-visual .feature-phone {
  right: 1rem;
  bottom: 0.6rem;
  width: min(58vw, 16rem);
}

.vip-bear {
  width: min(45vw, 15rem);
}

.final-cta {
  min-height: 88svh;
  display: grid;
  align-items: center;
  padding: 5.5rem 0;
}

.final-wrap {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  max-width: 50rem;
  text-align: center;
}

.final-logo {
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.final-wrap h2 {
  margin-bottom: 1rem;
}

.final-wrap p:not(.eyebrow) {
  max-width: 39rem;
  color: rgba(255, 248, 231, 0.78);
  font-size: 1.06rem;
  font-weight: 700;
}

.runway {
  position: absolute;
  right: 50%;
  bottom: -8rem;
  z-index: 1;
  width: min(80vw, 36rem);
  height: 32rem;
  border-right: 2px solid rgba(255, 255, 255, 0.18);
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.42) 48% 52%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  transform: translateX(50%) perspective(18rem) rotateX(58deg);
  transform-origin: bottom center;
}

.runway span {
  position: absolute;
  left: 50%;
  width: 1rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 30px rgba(248, 200, 77, 0.65);
  transform: translateX(-50%);
  animation: runwayPulse 1.8s ease-in-out infinite;
}

.runway span:nth-child(1) {
  top: 2rem;
}

.runway span:nth-child(2) {
  top: 7.5rem;
  animation-delay: 0.16s;
}

.runway span:nth-child(3) {
  top: 13rem;
  animation-delay: 0.32s;
}

.runway span:nth-child(4) {
  top: 18.5rem;
  animation-delay: 0.48s;
}

.runway span:nth-child(5) {
  top: 24rem;
  animation-delay: 0.64s;
}

.site-footer {
  background: #06070c;
  color: rgba(255, 248, 231, 0.72);
  padding: 1.2rem 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-credit {
  margin: 0;
  color: rgba(255, 248, 231, 0.72);
  font-weight: 850;
}

.footer-credit a {
  color: var(--gold);
  font-weight: 900;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes cloudFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 1.8rem -0.6rem;
  }
}

@keyframes cloudDrift {
  0% {
    translate: -18vw 0;
  }
  100% {
    translate: 118vw 0;
  }
}

@keyframes runwayPulse {
  0%,
  100% {
    opacity: 0.46;
  }
  50% {
    opacity: 1;
  }
}

@media (min-width: 620px) {
  .hero-actions {
    display: flex;
    max-width: none;
  }

  .button {
    min-width: 11.2rem;
  }

  .cta-band {
    grid-template-columns: 1fr auto;
    padding: 1.6rem;
  }
}

@media (min-width: 760px) {
  .nav-links {
    display: flex;
  }

  .hero-grid,
  .feature-grid {
    grid-template-columns: minmax(0, 0.93fr) minmax(24rem, 1.07fr);
  }

  .feature-grid-reverse {
    grid-template-columns: minmax(24rem, 1.07fr) minmax(0, 0.93fr);
  }

  .feature-grid-reverse .feature-copy {
    grid-column: 2;
  }

  .feature-grid-reverse .lounge-visual,
  .feature-grid-reverse .vip-visual {
    grid-column: 1;
    grid-row: 1;
  }

  .hero {
    padding-top: 7.1rem;
  }

  h1 {
    max-width: 12.4ch;
  }

  .journey-track {
    grid-template-columns: repeat(7, minmax(10rem, 1fr));
    overflow-x: auto;
    padding: 0.4rem 0.15rem 1rem;
    scroll-snap-type: x proximity;
  }

  .journey-track::before {
    top: 2rem;
    right: 4rem;
    bottom: auto;
    left: 4rem;
    width: auto;
    height: 0.18rem;
  }

  .journey-step {
    min-width: 10rem;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    scroll-snap-align: start;
  }

  .step-number {
    grid-row: auto;
  }

  .journey-step p {
    grid-column: auto;
  }

  .flights-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(25rem, 1.2fr);
    align-items: center;
  }

  .departure-system {
    min-height: 41rem;
  }
}

@media (min-width: 1020px) {
  .section-inner {
    width: min(var(--max), calc(100vw - 3rem));
  }

  .hero {
    padding-bottom: 5.5rem;
  }

  .hero-visual {
    min-height: 45rem;
  }

  .device-stack {
    min-height: 43rem;
  }

  .phone-main {
    right: 12%;
    width: 20rem;
  }

  .phone-secondary {
    left: 0;
    width: 15.2rem;
  }

  .phone-tertiary {
    right: 36%;
    width: 14rem;
  }

  .route-card {
    top: 0.55rem;
    left: 33%;
    transform: translateX(-50%);
  }

  .hero-mascot {
    right: auto;
    left: clamp(-2.5rem, -1.2vw, -0.75rem);
    bottom: 0.4rem;
    width: 13.5rem;
  }

  .progression,
  .feature,
  .flights {
    padding-block: 6.5rem;
  }

  .progression .section-heading {
    max-width: none;
    text-align: center;
  }

  .progression .section-heading h2 {
    max-width: 16ch;
    margin-inline: auto;
    font-size: clamp(3rem, 5.1vw, 4.2rem);
  }

  .progression .section-heading p:not(.eyebrow) {
    max-width: 66rem;
    margin-inline: auto;
  }

  .feature-copy p:not(.eyebrow),
  .section-heading p:not(.eyebrow),
  .final-wrap p:not(.eyebrow) {
    font-size: 1.15rem;
  }

  .hero .cloud {
    animation-name: cloudDrift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .hero .desktop-cloud {
    display: block;
  }

  .hero .cloud-a {
    top: 13%;
    left: -8rem;
    right: auto;
    animation-duration: 34s;
    animation-delay: -4s;
  }

  .hero .cloud-b {
    top: 34%;
    left: -12rem;
    right: auto;
    animation-duration: 42s;
    animation-delay: -18s;
  }

  .hero .cloud-c {
    top: 68%;
    left: -9rem;
    right: auto;
    bottom: auto;
    animation-duration: 38s;
    animation-delay: -27s;
  }

  .hero .cloud-d {
    animation-duration: 46s;
    animation-delay: -8s;
  }

  .hero .cloud-e {
    animation-duration: 36s;
    animation-delay: -24s;
  }

  .hero .cloud-f {
    animation-duration: 52s;
    animation-delay: -33s;
  }

  .feature-visa .speech-bubble {
    top: 9.45rem;
    bottom: auto;
    left: calc(3.9rem + 6.8rem);
    width: 17.5rem;
    max-width: 17.5rem;
    text-align: center;
    transform: translateX(-50%);
  }

  .feature-visa .stamp-grid {
    display: none;
  }

  .feature-visa .mascot-left {
    left: 3.9rem;
    bottom: 0.4rem;
    width: 13.6rem;
  }

  .feature-lounge .speech-bubble {
    top: 9.7rem;
    right: calc(1.5rem + 6.85rem);
    bottom: auto;
    left: auto;
    width: 16.2rem;
    max-width: 16.2rem;
    text-align: center;
    transform: translateX(50%);
  }

  .feature-lounge .mascot-right {
    right: 1.5rem;
    bottom: 0.1rem;
    width: 13.7rem;
  }

  .feature-concierge .speech-bubble {
    top: 8.8rem;
    right: auto;
    bottom: auto;
    left: 6rem;
    width: 15.5rem;
    max-width: 15.5rem;
    text-align: center;
    transform: translateX(-50%);
  }

  .feature-concierge .concierge-visual .tall-phone {
    top: 3rem;
    left: 72%;
    transform: translateX(-50%) rotate(2deg);
  }

  .feature-vip .vip-bear {
    right: auto;
    left: 2.8rem;
    bottom: 0.2rem;
    width: 14.5rem;
  }

  .feature-vip .speech-bubble {
    top: 11.35rem;
    right: auto;
    bottom: auto;
    left: calc(2.8rem + 7.25rem);
    width: 17rem;
    max-width: 17rem;
    text-align: center;
    transform: translateX(-50%);
  }

  .feature-lounge .lounge-visual .tall-phone {
    top: 3rem;
    left: 29%;
  }

  .feature-visa .panel-topline {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .feature-visa .panel-topline strong {
    align-self: flex-start;
  }

  .feature-visa .speech-bubble::after,
  .feature-lounge .speech-bubble::after,
  .feature-concierge .speech-bubble::after,
  .feature-vip .speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -0.42rem;
    width: 0.95rem;
    height: 0.95rem;
    background: inherit;
    transform: rotate(45deg);
  }

  .feature-visa .speech-bubble::after,
  .feature-concierge .speech-bubble::after,
  .feature-vip .speech-bubble::after {
    left: 50%;
    margin-left: -0.48rem;
  }

  .feature-lounge .speech-bubble::after {
    left: 46%;
    margin-left: -0.48rem;
  }

  .feature-vip .speech-bubble::after {
    border-right: 1px solid rgba(248, 200, 77, 0.42);
    border-bottom: 1px solid rgba(248, 200, 77, 0.42);
  }

  .journey-track {
    overflow: visible;
  }

  .journey-step {
    min-width: 0;
  }
}

@media (max-width: 759px) {
  .site-header {
    padding: 0.55rem;
  }

  .nav-shell {
    width: calc(100vw - 1rem);
  }

  .brand strong {
    font-size: 0.82rem;
  }

  .brand small {
    display: none;
  }

  .brand img {
    width: 2.35rem;
    height: 2.35rem;
  }

  .button-small {
    min-height: 2.55rem;
    padding: 0.72rem 0.82rem;
    font-size: 0.8rem;
  }

  .hero {
    padding-top: 6.5rem;
  }

  .hero-copy {
    display: grid;
    text-align: center;
  }

  .hero-copy h1 {
    margin-inline: auto;
  }

  .hero-actions .button {
    width: 100%;
  }

  .boarding-strip {
    display: none;
  }

  .progression .section-heading {
    text-align: center;
  }

  .progression .section-heading h2,
  .progression .section-heading p:not(.eyebrow) {
    margin-inline: auto;
  }

  .feature-visa .checkpoint-list {
    display: none;
  }

  .feature-visa .feature-copy {
    text-align: center;
  }

  .feature-visa .feature-copy p:not(.eyebrow) {
    margin-inline: auto;
  }

  .feature-visa .panel-topline span {
    display: none;
  }

  .feature-visa .panel-topline strong {
    display: none;
  }

  .flights .section-heading {
    text-align: center;
  }

  .flights .section-heading h2,
  .flights .section-heading p:not(.eyebrow) {
    margin-inline: auto;
  }

  .feature-vip .feature-copy {
    text-align: center;
  }

  .feature-vip .feature-copy p:not(.eyebrow) {
    margin-inline: auto;
  }

  .feature-vip .vip-perks {
    display: none;
  }

  .feature-vip .vip-card {
    display: none;
  }

  .feature-concierge .feature-copy p:not(.eyebrow) {
    text-align: center;
    margin-inline: auto;
  }

  .feature-concierge .feature-copy h2 {
    text-align: center;
    margin-inline: auto;
  }

  .feature-concierge .feature-copy .eyebrow {
    text-align: center;
  }

  .feature-concierge .chat-preview p:nth-child(2),
  .feature-concierge .chat-preview p:nth-child(2) span {
    color: #fff;
  }

  .mid-cta .cta-band > div {
    text-align: center;
  }

  .mid-cta .cta-band h2 {
    margin-inline: auto;
  }

  .feature-lounge .feature-copy .eyebrow {
    text-align: center;
  }

  .feature-lounge .feature-copy h2 {
    text-align: center;
    margin-inline: auto;
  }

  .feature-lounge .feature-copy p:not(.eyebrow) {
    text-align: center;
    margin-inline: auto;
  }

  .footer-inner {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .footer-inner .brand {
    justify-content: center;
  }

  .hero-visual {
    min-height: 31rem;
  }

  .device-stack {
    min-height: 30rem;
  }

  .phone-main {
    right: 5%;
    width: min(58vw, 15.6rem);
  }

  .phone-secondary {
    left: 0;
    top: 6.1rem;
    width: min(42vw, 11.4rem);
  }

  .phone-tertiary {
    right: 31%;
    bottom: 1.1rem;
    width: min(38vw, 10.2rem);
  }

  .hero-mascot {
    display: none;
  }

  .route-card {
    left: 0.25rem;
    top: 0.15rem;
    width: min(74vw, 18rem);
  }

  .boarding-pass {
    display: none;
  }

  .boarding-pass strong {
    font-size: 1.65rem;
  }

  .boarding-strip {
    grid-template-columns: 1fr;
  }

  .progression,
  .feature,
  .flights {
    padding-block: 4.2rem;
  }

  .checkpoint-visual,
  .lounge-visual,
  .concierge-visual,
  .vip-visual {
    min-height: 34rem;
  }

  .security-panel {
    inset: 6.2rem 0 0 0;
  }

  .feature-phone,
  .vip-visual .feature-phone {
    right: 0.8rem;
    width: min(56vw, 14rem);
  }

  .feature-visa .feature-phone {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .stamp-grid {
    left: 0.8rem;
    width: min(41vw, 10.8rem);
  }

  .stamp-grid span {
    font-size: 0.7rem;
    padding: 0.65rem 0.5rem;
  }

  .section-mascot {
    width: 5.7rem;
  }

  .mascot-left {
    left: 0.4rem;
    top: 0.4rem;
    bottom: auto;
  }

  .mascot-right {
    right: 0.4rem;
    top: 0.4rem;
    bottom: auto;
  }

  .speech-bubble {
    top: 0.85rem;
    right: 0.3rem;
    bottom: auto;
    left: 6rem;
    max-width: none;
    font-size: 0.92rem;
  }

  .bubble-warm,
  .bubble-vip {
    right: 6rem;
    left: 0.3rem;
  }

  .lounge-visual .tall-phone,
  .concierge-visual .tall-phone {
    top: 6.2rem;
    width: min(68vw, 16.5rem);
  }

  .vip-card {
    top: 6.2rem;
  }

  .cta-band .button {
    width: 100%;
  }

  .departure-system {
    min-height: 32rem;
  }

  .departure-board {
    top: -3.6rem;
    width: 100%;
  }

  .board-row {
    grid-template-columns: 3.4rem 1fr 5.5rem;
    padding: 0.72rem;
  }

  .board-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flights-phone {
    width: min(54vw, 13.6rem);
    opacity: 1;
  }

  .flights-phone.second {
    right: min(33vw, 9rem);
    width: min(43vw, 10.5rem);
    opacity: 1;
  }

  .feature-vip .vip-visual .feature-phone {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .feature-vip .bubble-vip {
    top: 0.85rem;
    right: 6rem;
    left: 0.3rem;
    width: auto;
    max-width: none;
    text-align: left;
  }

  .feature-vip .vip-bear {
    top: 0.4rem;
    right: 0.4rem;
  }

  .feature-vip .speech-bubble::after {
    right: -0.38rem;
    bottom: 1.55rem;
    left: auto;
    margin-left: 0;
  }

  .vip-card {
    width: min(84vw, 18rem);
  }

  .final-cta {
    min-height: 82svh;
  }

  .footer-inner {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 410px) {
  .section-inner {
    width: min(var(--max), calc(100vw - 1rem));
  }

  h1 {
    font-size: clamp(2.85rem, 15vw, 3.25rem);
  }

  h2 {
    font-size: clamp(1.95rem, 10vw, 2.5rem);
  }

  .lead {
    font-size: 1rem;
  }

  .nav-shell {
    gap: 0.5rem;
  }

  .button-small {
    min-width: auto;
    padding-inline: 0.68rem;
  }

  .button-small::after {
    display: none;
  }

  .hero-visual {
    min-height: 28.5rem;
  }

  .checkpoint-visual,
  .lounge-visual,
  .concierge-visual,
  .vip-visual {
    min-height: 29rem;
  }

  .speech-bubble {
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}