:root {
  color-scheme: dark;
  --bg: #030914;
  --bg-secondary: #07111f;
  --surface: rgba(16, 29, 45, 0.78);
  --surface-secondary: rgba(22, 40, 60, 0.84);
  --cyan: #22d3ee;
  --cyan-bright: #00e5ff;
  --orange: #ff9f43;
  --orange-bright: #ff8a00;
  --gold: #ffd166;
  --purple: #a855f7;
  --text: #f8fafc;
  --text-secondary: #94a3b8;
  --line: rgba(148, 163, 184, 0.22);
  --max: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 8%, rgba(34, 211, 238, .18), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(255, 159, 67, .18), transparent 26rem),
    linear-gradient(180deg, var(--bg) 0%, #07111f 48%, var(--bg) 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("/assets/flyhand/backgrounds/stars.webp") center / 900px auto repeat;
  opacity: .34;
  animation: drift 80s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  height: 55vh;
  background:
    url("/assets/flyhand/backgrounds/clouds-blue.webp") left bottom / 48vw auto no-repeat,
    url("/assets/flyhand/backgrounds/clouds-orange.webp") right bottom / 48vw auto no-repeat;
  opacity: .18;
  filter: brightness(.55) saturate(1.15);
  pointer-events: none;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 54px);
  transition: background .22s ease, border-color .22s ease, backdrop-filter .22s ease;
}

.site-header.scrolled {
  border-bottom: 1px solid var(--line);
  background: rgba(3, 9, 20, .76);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 950;
  font-style: italic;
  letter-spacing: .08em;
}

.brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 14px rgba(34, 211, 238, .55)); }
.brand span {
  background: linear-gradient(90deg, #fff, var(--cyan-bright), var(--orange-bright), var(--gold));
  -webkit-background-clip: text;
  color: transparent;
}

.nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 26px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nav-links a,
footer nav a { text-decoration: none; }
.nav-links a:hover { color: var(--cyan-bright); }

.header-cta,
.cta,
.mini-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(34, 211, 238, .72);
  background: linear-gradient(135deg, rgba(0, 229, 255, .96), rgba(125, 211, 252, .92));
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  color: #03111f;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
  box-shadow: 0 0 28px rgba(34, 211, 238, .36);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: rgba(16, 29, 45, .75);
  border-radius: 8px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--text);
}

.section-pad {
  width: min(var(--max), calc(100vw - 40px));
  margin: 0 auto;
  padding: 110px 0;
}

.hero {
  width: min(1380px, calc(100vw - 40px));
  min-height: 850px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 48px;
  padding-top: 120px;
  padding-bottom: 80px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 28px 0;
}

.hero-lockup {
  width: min(430px, 100%);
  margin-bottom: 30px;
  text-align: center;
}

.hero-word {
  display: block;
  white-space: nowrap;
  font-size: clamp(56px, 7vw, 118px);
  line-height: .84;
  font-weight: 950;
  font-style: italic;
  letter-spacing: 0;
  background: linear-gradient(90deg, #f8fafc 0%, #22d3ee 34%, #00e5ff 48%, #ff9f43 72%, #ffd166 100%);
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(34, 211, 238, .45)) drop-shadow(0 0 18px rgba(255, 159, 67, .24));
}

.hero-lockup > span {
  display: block;
  margin-top: 10px;
  color: #dbeafe;
  font-size: 14px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: .42em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--cyan-bright);
  font-size: 13px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: .28em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 22px;
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: .92;
  font-style: italic;
  letter-spacing: 0;
}

h1 span,
.gold,
.game-card.is-live h3 {
  background: linear-gradient(90deg, var(--orange-bright), var(--gold));
  -webkit-background-clip: text;
  color: transparent;
}

h2 {
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: .94;
  font-style: italic;
  letter-spacing: 0;
}

h3 {
  font-size: 24px;
  line-height: 1.05;
  font-style: italic;
}

.hero-text,
.section-heading p,
.split-copy p,
.next p,
.final-cta p {
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1.65;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(520px, 100%);
  margin-top: 18px;
}

.hero-stats span {
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(16, 29, 45, .55);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .14em;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}

.cta-row,
.store-badges,
.pill-row,
.pro-benefits {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.cta.secondary {
  border-color: rgba(148, 163, 184, .28);
  background: rgba(16, 29, 45, .72);
  color: var(--text);
  box-shadow: none;
}

.cta.gold {
  border-color: rgba(255, 209, 102, .84);
  background: linear-gradient(135deg, var(--gold), var(--orange-bright));
}

.store-badges { margin-top: 24px; }
.store-badge {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  color: #dbeafe;
  background: rgba(16, 29, 45, .52);
  font-size: 13px;
  font-weight: 800;
}

.store-badge.disabled { opacity: .72; }

.hero-art {
  position: relative;
  min-height: 640px;
  border: 1px solid rgba(34, 211, 238, .22);
  background: rgba(16, 29, 45, .22);
  clip-path: polygon(3% 0, 97% 0, 100% 9%, 100% 91%, 97% 100%, 3% 100%, 0 91%, 0 9%);
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(34, 211, 238, .08), 0 30px 90px rgba(0, 0, 0, .42);
}

.hero-bg {
  width: 100%;
  height: 100%;
  min-height: 640px;
  object-fit: cover;
  animation: float 7s ease-in-out infinite;
}

.microcopy {
  margin: 18px 0 0;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.challenge-art {
  background:
    radial-gradient(circle at 18% 26%, rgba(34, 211, 238, .34), transparent 18rem),
    radial-gradient(circle at 82% 26%, rgba(255, 159, 67, .32), transparent 18rem),
    radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .08), transparent 18rem),
    linear-gradient(180deg, rgba(3, 9, 20, .34), rgba(3, 9, 20, .88)),
    url("/assets/flyhand/backgrounds/stars.webp") center / 760px auto repeat;
}

.space-field,
.dual-demo,
.near-visual,
.final-art {
  position: relative;
  overflow: hidden;
}

.space-field {
  width: 100%;
  height: 100%;
  min-height: 640px;
}

.space-field::before,
.dual-demo::before,
.final-art::before {
  content: "";
  position: absolute;
  inset: -15% 49% -15% auto;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(226, 246, 255, .7), transparent);
  box-shadow: 0 0 26px rgba(34, 211, 238, .52), 18px 0 28px rgba(255, 159, 67, .32);
}

.ship {
  position: absolute;
  z-index: 2;
  width: min(42%, 410px);
  filter: drop-shadow(0 0 28px rgba(34, 211, 238, .62));
}

.ship-left {
  left: 11%;
  top: 36%;
  transform: rotate(-10deg);
}

.ship-right {
  right: 11%;
  top: 36%;
  transform: rotate(10deg);
  filter: drop-shadow(0 0 28px rgba(255, 159, 67, .62));
}

.trail {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 62%;
  top: 56%;
  border-radius: 999px;
  filter: blur(2px);
}

.trail-left {
  left: 31%;
  background: linear-gradient(180deg, rgba(34, 211, 238, .82), transparent);
  box-shadow: 0 0 40px rgba(34, 211, 238, .66);
}

.trail-right {
  right: 31%;
  background: linear-gradient(180deg, rgba(255, 159, 67, .82), transparent);
  box-shadow: 0 0 40px rgba(255, 159, 67, .66);
}

.asteroid {
  position: absolute;
  z-index: 3;
  width: 92px;
  aspect-ratio: 1;
  background: url("/assets/flyhand/obstacles/asteroid.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(255, 209, 102, .24));
  opacity: .9;
}

.challenge-art .a1 { left: 8%; top: 13%; width: 126px; }
.challenge-art .a2 { right: 8%; top: 12%; width: 112px; transform: rotate(28deg); }
.challenge-art .a3 { left: 45%; top: 31%; width: 82px; transform: rotate(-18deg); }
.challenge-art .a4 { left: 24%; bottom: 9%; width: 174px; transform: rotate(18deg); }
.challenge-art .a5 { right: 18%; bottom: 10%; width: 150px; transform: rotate(-12deg); }

.section-heading {
  max-width: 780px;
  margin-bottom: 34px;
}
.section-heading.center { margin-inline: auto; text-align: center; }

.mechanic-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 360px) 1fr;
  align-items: center;
  gap: 28px;
}

.hand-card,
.feature-grid article,
.game-card,
.pro-card,
.video-card,
.phone-shot,
.split-art {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), rgba(3, 9, 20, .68));
  box-shadow: inset 0 0 34px rgba(34, 211, 238, .04), 0 20px 60px rgba(0, 0, 0, .32);
}

.hand-card {
  min-height: 160px;
  padding: 28px;
  clip-path: polygon(8% 0, 92% 0, 100% 22%, 100% 78%, 92% 100%, 8% 100%, 0 78%, 0 22%);
}
.hand-card.right { border-color: rgba(255, 159, 67, .46); text-align: right; }
.hand-card span { display: block; color: var(--text-secondary); font-weight: 900; letter-spacing: .16em; }
.hand-card strong { display: block; margin-top: 12px; color: var(--cyan-bright); font-size: 30px; font-style: italic; }
.hand-card.right strong { color: var(--orange); }
.hand-card img {
  width: min(170px, 80%);
  margin-top: 18px;
  filter: drop-shadow(0 0 20px rgba(34, 211, 238, .5));
}
.hand-card.right img { margin-left: auto; filter: drop-shadow(0 0 20px rgba(255, 159, 67, .5)); }

.dual-demo {
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(255, 159, 67, .12)),
    url("/assets/flyhand/backgrounds/stars.webp") center / 720px auto repeat;
}

.dual-demo .a1 { left: 22%; top: 16%; width: 74px; }
.dual-demo .a2 { right: 18%; top: 38%; width: 102px; transform: rotate(18deg); }
.dual-demo .a3 { left: 42%; bottom: 18%; width: 86px; transform: rotate(-14deg); }
.demo-ship {
  position: absolute;
  bottom: 34px;
  width: 34%;
  filter: drop-shadow(0 0 22px rgba(34, 211, 238, .55));
}
.left-demo { left: 13%; }
.right-demo { right: 13%; filter: drop-shadow(0 0 22px rgba(255, 159, 67, .55)); }

.center-cta {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.phone-main,
.phone-shot {
  position: relative;
  margin: 0;
  padding: 12px;
  border-radius: 34px;
  background: #050b14;
  border: 1px solid rgba(248, 250, 252, .16);
}
.phone-main img,
.phone-shot img {
  width: 100%;
  aspect-ratio: 941 / 1672;
  object-fit: cover;
  border-radius: 24px;
}

.game-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 18px;
}

.game-card {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
}
.game-card.is-live { grid-row: span 2; border-color: rgba(34, 211, 238, .58); }
.game-card img { aspect-ratio: 1.45; object-fit: cover; }
.game-copy { padding: 22px; }
.badge,
.soon {
  display: inline-flex;
  margin-right: 8px;
  margin-bottom: 14px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
}
.badge.live { color: #03111f; background: var(--cyan-bright); }
.game-category { color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.game-card p,
.feature-grid p,
.game-card .chips { color: #cbd5e1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chips span,
.pill-row span,
.pro-benefits span,
.stat-row span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, .05);
  font-size: 12px;
  font-weight: 850;
  color: #cbd5e1;
}
.mini-cta { width: fit-content; min-height: 38px; padding-inline: 16px; font-size: 12px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.feature-grid article {
  padding: 22px;
  min-height: 230px;
  border-radius: 8px;
}
.feature-grid img { width: 52px; height: 52px; margin-bottom: 18px; }

.ship-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ship-showcase article {
  min-height: 310px;
  display: grid;
  align-content: end;
  justify-items: center;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 28%, rgba(34, 211, 238, .2), transparent 42%),
    linear-gradient(180deg, rgba(16, 29, 45, .74), rgba(3, 9, 20, .72));
  box-shadow: inset 0 0 34px rgba(34, 211, 238, .05), 0 20px 60px rgba(0, 0, 0, .28);
}
.ship-showcase article:nth-child(even) {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 159, 67, .2), transparent 42%),
    linear-gradient(180deg, rgba(16, 29, 45, .74), rgba(3, 9, 20, .72));
}
.ship-showcase img {
  width: min(190px, 70%);
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 24px rgba(34, 211, 238, .48));
}
.ship-showcase article:nth-child(even) img { filter: drop-shadow(0 0 24px rgba(255, 159, 67, .48)); }
.ship-showcase span {
  color: var(--cyan-bright);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .18em;
}
.ship-showcase strong {
  margin-top: 8px;
  font-size: 24px;
  font-style: italic;
  letter-spacing: .08em;
}

.gallery-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 18px;
  align-items: start;
}

.gameplay-wrap,
.flow-near,
.monetization,
.progression {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 28px;
  align-items: center;
}

.gameplay-real .phone-main {
  max-width: 360px;
}

.callouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.callouts article,
.flow-card,
.near-card,
.mode-grid article,
.leaderboard,
.free-card,
.bimanual,
.coordination-diagram {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--surface), rgba(3, 9, 20, .66));
  box-shadow: inset 0 0 34px rgba(34, 211, 238, .04), 0 20px 60px rgba(0, 0, 0, .28);
}

.callouts article {
  min-height: 145px;
  padding: 22px;
}

.callouts strong,
.mode-grid span,
.leaderboard .tabs span {
  display: block;
  margin-bottom: 9px;
  color: var(--cyan-bright);
  font-weight: 950;
  font-style: italic;
  letter-spacing: .12em;
}

.callouts span,
.leaderboard p {
  color: #cbd5e1;
  line-height: 1.5;
}

.loop-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.loop-track span {
  min-height: 110px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(34, 211, 238, .32);
  background: rgba(16, 29, 45, .7);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  color: #f8fafc;
  text-align: center;
  font-weight: 950;
  font-style: italic;
  text-transform: uppercase;
}

.flow-card,
.near-card,
.free-card {
  padding: clamp(24px, 4vw, 42px);
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.flow-steps span {
  padding: 16px 10px;
  border: 1px solid rgba(34, 211, 238, .42);
  background: linear-gradient(180deg, rgba(34, 211, 238, .15), rgba(3, 9, 20, .55));
  color: var(--cyan-bright);
  text-align: center;
  font-weight: 950;
  box-shadow: 0 0 26px rgba(34, 211, 238, .18);
}

.near-visual {
  min-height: 230px;
}
.near-visual .giant {
  left: 52%;
  top: 8%;
  width: 210px;
  transform: rotate(20deg);
}
.near-visual img {
  position: absolute;
  left: 16%;
  bottom: 0;
  width: 200px;
  filter: drop-shadow(0 0 24px rgba(34, 211, 238, .55));
}
.close-text {
  color: var(--gold);
  font-size: clamp(42px, 7vw, 82px);
  font-weight: 950;
  font-style: italic;
  line-height: .9;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mode-grid article {
  min-height: 280px;
  padding: 24px;
  overflow: hidden;
}
.density {
  position: relative;
  min-height: 145px;
  margin-top: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(3,9,20,.36));
  border: 1px solid rgba(255,255,255,.08);
}
.density::before,
.density::after {
  content: "";
  position: absolute;
  width: 54px;
  aspect-ratio: 1;
  background: url("/assets/flyhand/obstacles/asteroid.svg") center / contain no-repeat;
}
.density::before { left: 18%; top: 22%; }
.density::after { right: 18%; bottom: 16%; transform: rotate(24deg); }
.density.normal { box-shadow: inset 0 0 0 999px rgba(255, 159, 67, .04); }
.density.hard::before { width: 78px; left: 12%; }
.density.hard::after { width: 86px; right: 12%; }
.density.hard { background-image: url("/assets/flyhand/backgrounds/speed-lines.webp"); background-size: cover; }

.multiplayer-section {
  text-align: center;
}
.multiplayer-section .section-heading { margin-inline: auto; }
.versus-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 0 auto 22px;
  max-width: 920px;
  padding: 28px;
  border: 1px solid rgba(34, 211, 238, .32);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, .15), rgba(255, 159, 67, .15)),
    rgba(16, 29, 45, .62);
}
.versus-card div { display: grid; justify-items: center; gap: 8px; }
.versus-card img { width: min(260px, 70%); filter: drop-shadow(0 0 24px rgba(34, 211, 238, .48)); }
.versus-card div:last-child img { filter: drop-shadow(0 0 24px rgba(255, 159, 67, .48)); }
.versus-card strong,
.versus-card > span {
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 950;
  font-style: italic;
}
.versus-card > span {
  color: var(--gold);
}
.multiplayer-section .pill-row,
.multiplayer-section .cta { justify-content: center; margin-inline: auto; }

.ranking {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 520px);
  gap: 34px;
  align-items: center;
}
.leaderboard {
  padding: 26px;
}
.leaderboard .tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.leaderboard .tabs span {
  padding: 8px 12px;
  border: 1px solid var(--line);
}
.leaderboard ol {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.leaderboard li {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.leaderboard li span { color: var(--gold); font-weight: 950; }
.leaderboard li strong { font-size: 24px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stat-grid span {
  min-height: 90px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(16, 29, 45, .62);
  color: #dbeafe;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
}

.cosmetic-badge {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(67, 230, 160, .5);
  color: #43e6a0;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .14em;
}
.hangar-shot { max-width: 360px; margin: 28px auto 0; }
.monetization { grid-template-columns: .86fr 1.14fr; }
.pro-benefits em { color: var(--text-secondary); font-style: normal; font-weight: 800; }

.coordination-diagram {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.coordination-diagram strong {
  color: var(--gold);
  font-size: clamp(24px, 5vw, 46px);
  font-style: italic;
}
.bimanual { padding: 34px; }
.bimanual .muted { opacity: .72; margin-top: 22px; }

.game-grid.compact {
  grid-template-columns: repeat(5, 1fr);
}
.game-grid.compact .game-card {
  min-height: auto;
}

.final-art {
  width: min(720px, 100%);
  min-height: 280px;
  margin: 0 auto 24px;
  border: 1px solid rgba(34, 211, 238, .22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, .14), rgba(255, 159, 67, .14)),
    url("/assets/flyhand/backgrounds/stars.webp") center / 720px auto repeat;
}
.final-art img {
  position: absolute;
  bottom: 26px;
  width: 210px;
  filter: drop-shadow(0 0 22px rgba(34, 211, 238, .5));
}
.final-art img:first-of-type { left: 18%; }
.final-art img:last-of-type { right: 18%; filter: drop-shadow(0 0 22px rgba(255, 159, 67, .5)); }
.final-art .a1 { left: 16%; top: 20%; width: 88px; }
.final-art .a2 { right: 18%; top: 18%; width: 104px; transform: rotate(28deg); }
.cta-row.center { justify-content: center; }
.phone-shot span {
  display: block;
  padding: 8px 4px 12px;
  color: var(--cyan-bright);
  text-align: center;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.video-slot,
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}
.video-card { position: relative; margin: 0; padding: 14px; border-radius: 8px; overflow: hidden; }
.video-card img { width: 100%; max-height: 420px; object-fit: cover; opacity: .62; border-radius: 6px; }
.video-card span {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  padding: 14px 18px;
  background: rgba(3, 9, 20, .78);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 950;
  text-transform: uppercase;
}

.split.reverse .split-art { order: 2; }
.split-art { padding: 10px; border-radius: 8px; overflow: hidden; }
.split-art img { border-radius: 6px; width: 100%; }
.split-copy ul { margin: 0 0 24px; padding: 0; list-style: none; color: #dbeafe; }
.split-copy li { margin: 10px 0; font-weight: 820; }
.split-copy li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; background: var(--cyan-bright); box-shadow: 0 0 12px var(--cyan-bright); }
.stat-row { display: grid; grid-template-columns: auto auto auto auto; gap: 10px; align-items: center; }
.stat-row strong { color: var(--gold); font-size: 28px; font-style: italic; }

.pro { padding-top: 40px; padding-bottom: 40px; }
.pro-card {
  padding: clamp(28px, 5vw, 56px);
  border-color: rgba(255, 209, 102, .56);
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 209, 102, .18), transparent 24rem),
    linear-gradient(135deg, rgba(255, 159, 67, .14), rgba(16, 29, 45, .82));
  clip-path: polygon(3% 0, 97% 0, 100% 16%, 100% 84%, 97% 100%, 3% 100%, 0 84%, 0 16%);
}
.crown { color: var(--gold); font-weight: 950; letter-spacing: .3em; }
.pro-benefits { margin: 22px 0; }
.pro-benefits strong { color: var(--gold); font-size: 28px; }

.next,
.final-cta {
  text-align: center;
}
.future-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.future-row span {
  padding: 20px;
  border: 1px solid var(--line);
  background: rgba(16, 29, 45, .62);
  border-radius: 8px;
  font-weight: 950;
}
.future-row em {
  display: block;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.final-cta img { width: 80px; margin: 0 auto 18px; filter: drop-shadow(0 0 24px rgba(34, 211, 238, .66)); }

footer {
  width: min(var(--max), calc(100vw - 40px));
  margin: 0 auto;
  padding: 42px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--text-secondary);
}
footer nav { display: flex; gap: 18px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.reveal.visible { opacity: 1; transform: none; }

@keyframes drift { to { background-position: 900px 800px; } }
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.01); }
  50% { transform: translate3d(0, -12px, 0) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  *, body::before { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 1080px) {
  .hero,
  .video-slot,
  .split,
  .gameplay-wrap,
  .flow-near,
  .monetization,
  .progression,
  .ranking { grid-template-columns: 1fr; }
  .hero-art { min-height: 520px; }
  .hero-bg,
  .space-field { min-height: 520px; }
  .game-grid { grid-template-columns: 1fr 1fr; }
  .game-grid.compact { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .ship-showcase { grid-template-columns: repeat(2, 1fr); }
  .gallery-track { overflow-x: auto; grid-template-columns: repeat(5, 230px); padding-bottom: 10px; }
  .split.reverse .split-art { order: 0; }
  .loop-track,
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .site-header { display: flex; justify-content: flex-start; gap: 10px; padding: 14px 14px; }
  .brand { gap: 7px; font-size: 13px; }
  .brand img { width: 26px; height: 26px; }
  .header-cta,
  .menu-toggle { display: none; }
  .nav-links {
    position: absolute;
    top: 70px;
    left: 14px;
    right: 14px;
    display: none;
    padding: 18px;
    border: 1px solid var(--line);
    background: rgba(3, 9, 20, .94);
    backdrop-filter: blur(18px);
    border-radius: 8px;
    flex-direction: column;
  }
  .nav-links.open { display: flex; }
  .section-pad { width: calc(100vw - 28px); max-width: var(--max); padding: 74px 0; }
  .hero { width: calc(100vw - 28px); max-width: calc(100vw - 28px); min-height: auto; padding-top: 104px; padding-bottom: 58px; gap: 30px; overflow: hidden; }
  .hero-lockup {
    width: min(270px, 100%);
    margin: 0 auto 22px;
  }
  .hero-word {
    font-size: 46px;
  }
  .hero-lockup span {
    font-size: 11px;
    letter-spacing: .22em;
  }
  h1 { font-size: 38px; line-height: .98; }
  h2 { font-size: 34px; line-height: 1; }
  .hero-text,
  .section-heading p,
  .split-copy p,
  .next p,
  .final-cta p { font-size: 16px; }
  .cta-row,
  .store-badges { display: grid; grid-template-columns: 1fr; }
  .cta { width: 100%; min-height: 50px; }
  .store-badge { text-align: center; }
  .hero-art,
  .hero-bg,
  .space-field { min-height: 360px; }
  .hero-art { width: 100%; }
  .hero-copy,
  .hero-art {
    width: min(360px, calc(100vw - 28px));
    max-width: min(360px, calc(100vw - 28px));
  }
  .mechanic-grid,
  .game-grid,
  .feature-grid,
  .future-row,
  .ship-showcase,
  .mode-grid,
  .callouts,
  .loop-track,
  .stat-grid,
  .coordination-diagram,
  .flow-steps { grid-template-columns: 1fr; }
  .phone-main { max-width: 320px; margin-inline: auto; }
  .game-card.is-live { grid-row: auto; }
  .game-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
  }
  .game-card { flex: 0 0 min(86vw, 360px); scroll-snap-align: start; }
  .game-grid.compact .game-card { flex-basis: min(78vw, 320px); }
  .ship { width: 46%; }
  .ship-left { left: 4%; top: 38%; }
  .ship-right { right: 4%; top: 38%; }
  .trail-left { left: 30%; }
  .trail-right { right: 30%; }
  .challenge-art .a1 { width: 86px; left: 5%; top: 14%; }
  .challenge-art .a2 { width: 76px; right: 5%; top: 12%; }
  .challenge-art .a4,
  .challenge-art .a5 { width: 94px; bottom: 8%; }
  .dual-demo { min-height: 320px; }
  .hand-card { min-height: 130px; padding: 20px; }
  .versus-card { grid-template-columns: 1fr; }
  .versus-card img { width: min(220px, 78%); }
  .final-art img { width: 150px; }
  .final-art img:first-of-type { left: 8%; }
  .final-art img:last-of-type { right: 8%; }
  footer { flex-direction: column; align-items: flex-start; }
  footer nav { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .nav-links { display: none; }
  h1 { font-size: 34px; }
  .hero-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .hero-stats span { min-height: 38px; font-size: 10px; }
  .hero { justify-items: start; }
  .hero-copy,
  .hero-text,
  .section-heading,
  .split-copy { min-width: 0; max-width: 100%; }
  .hero-text { overflow-wrap: break-word; }
}