/* The pre-launch page. Colours come from packages/tokens/tokens.json through build.mjs. */
:root {
  --void: #05060E;
  --night: #0A0C1F;
  --deck: #14173A;
  --ink: #F2F4FF;
  --ink-2: #E8EBFF;
  --ink-3: #DADDF0;
  --ink-soft: #C9CEEA;
  --ink-4: #C3C8E0;
  --muted: #A9B0D0;
  --label: #8C93B8;
  --disabled: #5B6290;
  --link: #C9D5FF;
  --ticket-top: #15183A;
  --ticket-bottom: #0E1029;
  --signal-cyan: #5EE7FF;
  --signal-violet: #8B7BFF;
  --signal-magenta: #E14CFF;
  --violet-soft: #D9D3FF;
  --status-danger-soft: #FFD9DF;
  --gradient: linear-gradient(100deg, var(--signal-cyan), var(--signal-violet) 52%, var(--signal-magenta));
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.18);
  --glass: rgb(10 12 31 / 0.68);
  --display: 'Archivo', system-ui, sans-serif;
  --sans: 'Geist', system-ui, sans-serif;
  color-scheme: dark;
}

@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, fieldset { margin: 0; padding: 0; border: 0; }
a { color: var(--link); }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--signal-cyan); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.signal { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.panel { background: var(--glass); border: 1px solid var(--line); border-radius: 20px; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }

/* Hero */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; background: var(--void) url('/media/cockpit.jpg') center / cover; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgb(5 6 14 / 0.94) 0%, rgb(5 6 14 / 0.74) 52%, rgb(5 6 14 / 0.3) 100%),
  linear-gradient(180deg, rgb(5 6 14 / 0.55) 0%, transparent 22%, transparent 58%, var(--void) 100%); }
.logo img { height: 40px; width: auto; }

.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: clamp(24px, 4vw, 72px); align-items: center; padding-block: clamp(12px, 3vh, 36px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.beacon { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-cyan); box-shadow: 0 0 0 0 rgb(94 231 255 / .6); animation: beacon 2.4s ease-out infinite; }
@keyframes beacon { 70%, 100% { box-shadow: 0 0 0 10px rgb(94 231 255 / 0); } }

/* Sign-up */
.signup { padding: 26px; }
.signup h2 { font: 700 24px/1.15 var(--display); }
.signup .muted { font-size: 14.5px; margin-top: 8px; }
form { margin-top: 18px; display: grid; gap: 14px; }
.field label:not(.chip):not(.consent), legend { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; padding: 0; }
input[type='email'] { width: 100%; height: 46px; padding-inline: 14px; color: var(--ink); background: rgb(255 255 255 / .05); border: 1px solid var(--line-strong); border-radius: 12px; font: inherit; transition: border-color .15s, background .15s; }
input[type='email']::placeholder { color: var(--label); }
input[type='email']:focus { outline: none; border-color: var(--signal-cyan); background: rgb(255 255 255 / .08); }
input[type='email']:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 40px var(--deck) inset; caret-color: var(--ink); }
[aria-invalid='true'] { border-color: #FF9AAA !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; height: 38px; padding-inline: 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--ink-3); transition: border-color .15s, background .15s, color .15s; }
.chip:hover span { border-color: var(--muted); color: var(--ink); }
.chip input:checked + span { color: var(--ink); border-color: var(--signal-cyan); background: rgb(94 231 255 / .12); }
.chip input:focus-visible + span { outline: 2px solid var(--signal-cyan); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.box { width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 6px; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.consent input:checked + .box { background: var(--signal-cyan); border-color: var(--signal-cyan); }
.consent input:checked + .box::after { content: ''; width: 10px; height: 5px; border: solid var(--void); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.consent input:focus-visible + .box { outline: 2px solid var(--signal-cyan); outline-offset: 2px; }
.error { color: #FF9AAA; font-size: 13px; margin-top: 6px; }
.error:empty { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 12px; background: var(--gradient); color: var(--void); font: 600 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: filter .15s, transform .1s; }
form .button { width: 100%; }
.button:hover { filter: brightness(1.12); }
.button:active { transform: translateY(1px); }
.button[disabled] { opacity: .65; cursor: progress; }
.success { padding-block: 22px; outline: none; }
.check { display: block; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--gradient); position: relative; }
.check::after { content: ''; position: absolute; left: 13px; top: 14px; width: 18px; height: 9px; border: solid var(--void); border-width: 0 0 3px 3px; transform: rotate(-45deg); }

/* Countdown and approach path */
.label { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
html:not([lang='tr']) .unit > span { text-transform: uppercase; }
.live h2 { font: 800 clamp(32px, 4vw, 56px)/1.05 var(--display); margin-bottom: 14px; }


/* Sections */
main section { padding-block: clamp(56px, 8vw, 112px); }
.kicker { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-cyan); margin-bottom: 14px; }
html[lang='tr'] .kicker { text-transform: none; letter-spacing: .02em; font-size: 14px; }
.section-title { font: 700 clamp(30px, 4vw, 52px)/1.06 var(--display); letter-spacing: -.02em; max-width: 22ch; }
.board-wrap { grid-column: 1 / -1; }
.problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); align-items: end; }
.stat { font: 800 clamp(96px, 15vw, 220px)/.86 var(--display); letter-spacing: -.04em; padding-bottom: .06em; width: fit-content; }
.stat-label { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-3); max-width: 30ch; margin-top: 16px; }
.body-lg { font-size: clamp(19px, 1.9vw, 26px); line-height: 1.4; color: var(--ink-2); }
.source { font-size: 13px; color: var(--label); margin-top: 16px; }
.seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.seat { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--ticket-top), var(--ticket-bottom)); overflow: hidden; }
.seat::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--tone); }
.tone-cyan { --tone: var(--signal-cyan); }
.tone-violet { --tone: var(--signal-violet); }
.tone-magenta { --tone: var(--signal-magenta); }
.seat h3 { font: 700 24px/1.2 var(--display); margin-bottom: 12px; }
.seat p { color: var(--ink-soft); font-size: 15.5px; }
.wilco { margin-top: 24px; color: var(--muted); }
.screen { position: relative; margin-top: clamp(28px, 4vw, 48px); border-radius: 20px; padding: 2px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--line-strong); box-shadow: 0 30px 120px rgb(139 123 255 / .22); }
.screen iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; border-radius: 18px; background: var(--night); }
.screen img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; cursor: pointer; border-radius: 18px; background: var(--night); }
.play { z-index: 2; position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--gradient); cursor: pointer; display: grid; place-items: center; transition: transform .15s; box-shadow: 0 10px 50px rgb(139 123 255 / .5); }
.play:hover { transform: scale(1.06); }
.play span { width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--void); }
.final { position: relative; text-align: center; min-height: 86svh; display: grid; align-items: center; overflow: hidden; }
.final canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); }
.final-body { position: relative; z-index: 2; }
.final-title { text-shadow: 0 4px 60px rgb(5 6 14 / .9), 0 0 120px rgb(139 123 255 / .45); }
.final-title { font: 800 clamp(48px, 9vw, 132px)/1 var(--display); letter-spacing: -.03em; margin-bottom: 28px; }
.footer { padding-block: 40px; border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: 16px 24px; }
  .problem { grid-template-columns: minmax(0, 1fr); }
  .links { display: none; }
  .seats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .logo img { height: 32px; }
  .play { width: 64px; height: 64px; }
  .play span { border-width: 10px 0 10px 17px; margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .play { transition: none; }
  *, *::before, *::after { animation: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .links .wire path { stroke-dashoffset: 0; }
  .board i { opacity: 1; transform: none; }
}

/* ---- Sky: the slow colour and the stars behind every section. Transforms only. */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--void); }
.sky::before, .sky::after { content: ''; position: absolute; inset: 0; background-image:
  radial-gradient(1px 1px at 20px 30px, rgb(255 255 255 / .55), transparent),
  radial-gradient(1px 1px at 130px 170px, rgb(201 213 255 / .45), transparent),
  radial-gradient(1.5px 1.5px at 240px 60px, rgb(255 255 255 / .35), transparent),
  radial-gradient(1px 1px at 330px 260px, rgb(94 231 255 / .45), transparent);
  background-size: 390px 310px; }
.sky::after { background-position: 170px 120px; animation: twinkle 7s ease-in-out infinite alternate; }
.sky i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.sky i:nth-child(1) { left: -22vmax; top: 15vh; background: radial-gradient(closest-side, rgb(94 231 255 / .13), transparent); animation: drift-a 34s ease-in-out infinite alternate; }
.sky i:nth-child(2) { right: -24vmax; top: 30vh; background: radial-gradient(closest-side, rgb(225 76 255 / .12), transparent); animation: drift-b 41s ease-in-out infinite alternate; }
.sky i:nth-child(3) { left: 20vw; bottom: -40vmax; background: radial-gradient(closest-side, rgb(139 123 255 / .16), transparent); animation: drift-c 47s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .15; } to { opacity: .9; } }
@keyframes drift-a { to { transform: translate(18vw, 22vh) scale(1.2); } }
@keyframes drift-b { to { transform: translate(-20vw, -24vh) scale(.85); } }
@keyframes drift-c { to { transform: translate(-16vw, -20vh) scale(1.25); } }

/* ---- Hero: the cockpit breathes, follows the pointer a little, the text comes in on load. */
.hero-video { scale: 1.04; translate: var(--px, 0) var(--py, 0); transition: translate .9s cubic-bezier(.2, .7, .2, 1); animation: breathe 26s ease-in-out infinite alternate; }
@keyframes breathe { to { scale: 1.13; } }
.signup { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
@keyframes flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }

@keyframes ping { to { transform: scale(3.6); opacity: 0; } }

/* Buttons and fields */
.button { position: relative; overflow: hidden; }
.button::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: skewX(-18deg); transition: left .6s; }
.button:hover::after { left: 120%; }
.signup { box-shadow: 0 24px 80px rgb(5 6 14 / .55), inset 0 1px 0 rgb(255 255 255 / .06); }
.check { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ---- Scroll reveal; only with scripts on, so the page still reads without them. */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.js [data-reveal].in { opacity: 1; transform: none; }
.seats .seat:nth-child(2) { transition-delay: .12s; }
.seats .seat:nth-child(3) { transition-delay: .24s; }

/* Slot board: 100 cells, 70 lit, 30 left empty. */
.board-wrap { margin-top: clamp(8px, 2vw, 24px); }
.board { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: clamp(3px, .5vw, 7px); }
.board:empty { display: none; }
.board i { aspect-ratio: 1.5; border-radius: clamp(3px, .4vw, 6px); opacity: 0; transform: scale(.7); background: var(--cell); box-shadow: 0 0 14px -4px var(--cell); transition: opacity .5s, transform .5s cubic-bezier(.2, 1.4, .4, 1); transition-delay: calc(var(--i) * 14ms); }
.board i.idle { background: transparent; box-shadow: none; border: 1px dashed rgb(255 255 255 / .28); }
.in .board i { opacity: 1; transform: none; }
.in .board i.idle { animation: idle 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 37ms); }
@keyframes idle { 50% { border-color: #FF9AAA; background: rgb(255 107 129 / .12); } }
@media (max-width: 560px) { .board { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

/* Three seats wired to one platform: the grey lines turn solid when the section arrives. */
.links { position: relative; margin-top: clamp(20px, 3vw, 36px); margin-bottom: -16px; }
.links svg { width: 100%; height: auto; overflow: visible; }
.links path { fill: none; stroke-width: 2; }
.links .base path { stroke: var(--line-strong); stroke-dasharray: 3 8; }
.links .wire path { stroke: url(#link-gradient); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.5, 0, .2, 1) .25s; }
.links.in .wire path { stroke-dashoffset: 0; }
.links .pulse path { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 3; opacity: 0; filter: drop-shadow(0 0 6px #fff); }
.links.in .pulse path { opacity: 1; animation: pulse 3.4s linear 1.8s infinite; }
.links.in .pulse path:nth-child(2) { animation-delay: 2.6s; }
.links.in .pulse path:nth-child(3) { animation-delay: 3.4s; }
@keyframes pulse { to { stroke-dashoffset: -97; } }
.hub { position: absolute; left: 50%; top: 0; width: 62px; height: 62px; margin-left: -31px; display: grid; place-items: center; border-radius: 18px; background: var(--deck); border: 1px solid var(--line-strong); box-shadow: 0 0 50px rgb(139 123 255 / .55); }
.seat::after { content: ''; position: absolute; left: -30%; right: -30%; top: -90px; height: 220px; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 22%, transparent), transparent); animation: seat-glow 8s ease-in-out infinite alternate; pointer-events: none; }
.seat > * { position: relative; z-index: 1; }
@keyframes seat-glow { to { transform: translateX(16%) scale(1.15); opacity: .55; } }

/* Reel: light runs round the frame. */
.screen::before { content: ''; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(transparent 0 62%, var(--signal-cyan) 72%, var(--signal-violet) 84%, var(--signal-magenta) 94%, transparent); animation: orbit 7s linear infinite; }
@keyframes orbit { to { rotate: 1turn; } }
.play::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--signal-violet); animation: ping 2.4s cubic-bezier(.1, .6, .3, 1) infinite; }

/* Stat */
.stat { background-size: 220% 100%; animation: flow 9s linear infinite alternate; font-variant-numeric: tabular-nums; }

/* The cockpit and its shade fade out, so the sky runs on under the next section with no edge. */
.hero-video, .hero-shade { -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 62%, transparent 94%); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 62%, transparent 94%); }

/* ---- The strip: a split-flap board over a night approach (site.js draws the scene). */
.unit { min-width: 0; }
.seconds .flap { color: var(--signal-cyan); }
.half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: linear-gradient(180deg, #23274F, #181B3B); }
.half > span { display: block; height: var(--h); }
.half.bottom > span { margin-top: calc(var(--h) / -2); }
.leaf { z-index: 3; backface-visibility: hidden; will-change: transform; }
.leaf.top {  animation: flip-top var(--flip, .26s) cubic-bezier(.55, 0, .9, .5) both; }
.leaf.bottom { animation: flip-bottom var(--flip, .26s) cubic-bezier(.15, .7, .3, 1.25) var(--flip, .26s) both; }
@keyframes flip-top { to { transform: rotateX(-90deg); filter: brightness(.45); } }
@keyframes flip-bottom { from { transform: rotateX(90deg); filter: brightness(1.7); } to { transform: rotateX(0); } }

html:not(.js) .path { display: none; }
.marker { position: absolute; width: 0; height: 0; }
.marker em { position: absolute; width: max-content; max-width: 200px; font-style: normal; font-size: 12px; line-height: 1.3; color: var(--ink-soft); text-shadow: 0 1px 8px #05060E, 0 0 2px #05060E; }
.marker em b { display: block; font-weight: 600; color: var(--ink); }
.wp i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #060818; border: 2px solid var(--ink-soft); box-shadow: 0 0 10px rgb(201 206 234 / .6); }
.wp em { right: -6px; top: 13px; text-align: right; }
@media (max-width: 980px) {
}
@media (max-width: 560px) {
  .wp em { max-width: 130px; font-size: 11px; }
  .wp.end em { max-width: 108px; }
}

/* ---- Welcome: the board is the first thing, the approach runs under it. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; overflow: clip; }
.scene { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(180deg, #000 95%, transparent); mask-image: linear-gradient(180deg, #000 95%, transparent); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; }
.hero-center { text-align: center; padding-top: clamp(0px, 1.5vh, 20px); }
.units { --flap: clamp(72px, min(14vw, 25vh), 210px); display: flex; justify-content: center; gap: clamp(12px, 2.4vw, 36px); margin-top: clamp(12px, 2.4vh, 26px); }
.unit { min-width: 0; }
.unit > b { display: flex; gap: clamp(2px, .35vw, 5px); }
.unit > span { display: block; margin-top: 10px; font-size: clamp(11px, 1vw, 14px); font-weight: 500; letter-spacing: .14em; color: var(--ink-soft); text-align: center; }
.flap { --h: var(--flap); --r: calc(var(--h) * .085); position: relative; display: block; flex: none; width: calc(var(--h) * .68); height: var(--h); perspective: calc(var(--h) * 4); font: 700 calc(var(--h) * .78) / var(--h) var(--display); font-variant-numeric: tabular-nums; color: var(--ink); text-align: center; border-radius: var(--r); box-shadow: 0 calc(var(--h) * .12) calc(var(--h) * .34) rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08), 0 0 calc(var(--h) * .5) rgb(139 123 255 / .14); }
.half.top { top: 0; border-radius: var(--r) var(--r) 0 0; transform-origin: 50% 100%; }
.half.bottom { bottom: 0; border-radius: 0 0 var(--r) var(--r); transform-origin: 50% 0; background: linear-gradient(180deg, #14173A, #0E1029); }
.flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(2px, calc(var(--h) * .014)); translate: 0 -50%; z-index: 4; background: #03040B; box-shadow: 0 1px 0 rgb(255 255 255 / .08); }
.flap::before { content: ''; position: absolute; z-index: 5; left: -1px; right: -1px; top: 50%; height: calc(var(--h) * .09); translate: 0 -50%; background: linear-gradient(90deg, #565B8A 0 calc(var(--h) * .03), transparent calc(var(--h) * .03) calc(100% - var(--h) * .03), #565B8A calc(100% - var(--h) * .03)); border-radius: 1px; }
.eyebrow { justify-content: center; }
.eyebrow, .countdown, h1, .hero-cta { animation: rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.countdown { animation-delay: .1s; }
h1 { animation-delay: .35s; margin: clamp(14px, 2.4vh, 28px) 0 clamp(12px, 2vh, 22px); font: 700 clamp(23px, 2.7vw, 40px)/1.14 var(--display); letter-spacing: -.015em; }
h1 span { display: inline-block; margin-inline: .12em; }
h1 .signal { background-size: 220% 100%; animation: flow 9s linear infinite alternate; }
.hero-cta { animation-delay: .5s; min-width: 220px; }
.live h2 { font-size: clamp(44px, 8vw, 120px); }
.hero.landed h1, .hero.landed .hero-cta, .hero.landed .eyebrow, .hero.landed .hud em, .hero.landed .wp em { display: none; }

.path { position: relative; flex: 1; min-height: 230px; }
html:not(.js) .path { display: none; }
.hud { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 18px; padding-top: 6px; font: 500 12px/1.3 var(--sans); letter-spacing: .1em; color: #6FF0BE; text-shadow: 0 0 12px rgb(63 224 160 / .55); }
.hud b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.hud em { flex-basis: 100%; text-align: right; font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--ink-soft); text-shadow: 0 1px 8px #05060E; }
.now em { left: -12px; top: 14px; color: var(--signal-cyan); font-weight: 500; }
.wp.end em { right: auto; left: 8px; top: auto; bottom: calc(var(--k, 1) * 48px); text-align: left; }

/* The form, over the cockpit. */
.arrival { position: relative; isolation: isolate; overflow: clip; scroll-margin-top: 0; }
.arrival .hero-grid { padding-block: clamp(64px, 9vw, 130px); }
.arrival-lead { font: 600 clamp(24px, 2.5vw, 36px)/1.25 var(--display); letter-spacing: -.012em; max-width: 26ch; color: var(--ink-2); }
.signup { scroll-margin-top: 24px; }
@media (max-width: 980px) {
  .arrival .hero-grid { padding-block: 56px; }
  .hud { justify-content: flex-start; }
  .hud em { text-align: left; }
  .signup { max-width: 560px; }
}
@media (max-width: 560px) {
  .logo img { height: 32px; }
  .units { --flap: 29.5vw; display: grid; grid-template-columns: auto auto; justify-content: center; gap: 12px 14px; }
  .unit > b { gap: 3px; }
  .path { min-height: 210px; }
  .hud { gap: 2px 12px; font-size: 11px; padding-top: 16px; }
  .hud b { font-size: 14px; }
  .hud em { font-size: 12px; }
  .wp em { max-width: 130px; font-size: 11px; }
  .wp.end em { max-width: 108px; }
}

/* Footer: the notice stays one click away; the form's consent line opens it. */
.footer-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.rights { font-size: 13px; color: var(--label); }
.privacy summary { display: inline; cursor: pointer; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary:hover { color: var(--ink); }
@media (max-width: 560px) { .privacy { text-align: start; } }
.privacy { scroll-margin-top: 24px; max-width: 80ch; text-align: end; }
.privacy p { margin-top: 10px; font-size: 13.5px; color: var(--label); text-align: start; }
.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Language list */
.lang { position: relative; z-index: 10; font-size: 14px; font-weight: 500; }
.lang summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; list-style: none; transition: border-color .15s, color .15s; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--ink); border-color: var(--signal-cyan); }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); margin: 0; padding: 6px; min-width: 170px; list-style: none; background: var(--deck); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 20px 60px rgb(0 0 0 / .6); animation: rise .25s cubic-bezier(.16, 1, .3, 1) both; }
.lang li a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink-3); text-decoration: none; text-align: start; }
.lang li a:hover { color: var(--ink); background: rgb(255 255 255 / .07); }
.lang li a[aria-current] { color: var(--signal-cyan); background: rgb(94 231 255 / .1); }

/* Scripts Archivo and Geist lack; each file loads only for a page that uses its characters. */
@font-face { font-family: 'Geist'; src: url('/fonts/geist-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Noto Sans Arabic'; src: url('/fonts/noto-sans-arabic.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Kufi Arabic'; src: url('/fonts/noto-kufi-arabic.woff2') format('woff2'); font-weight: 600 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
html[lang='ru'] { --display: 'Archivo', 'Geist', system-ui, sans-serif; }
html[lang='ar'] { --display: 'Noto Kufi Arabic', 'Archivo', system-ui, sans-serif; --sans: 'Noto Sans Arabic', 'Geist', system-ui, sans-serif; }
html[lang='zh'] { --display: 'Archivo', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; --sans: 'Geist', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; }
.flap { font-family: 'Archivo', system-ui, sans-serif; }

/* Right to left: the page turns, the instruments and the flight do not. */
html[dir='rtl'] .units, html[dir='rtl'] .path, html[dir='rtl'] .stat { direction: ltr; }
html[dir='rtl'] .hud em, html[dir='rtl'] .marker em { direction: rtl; }
html[lang='ar'] * { letter-spacing: 0 !important; }
html[lang='ar'] h1, html[lang='ar'] .arrival-lead, html[lang='ar'] .section-title, html[lang='ar'] .final-title, html[lang='ar'] .live h2 { line-height: 1.4; }