:root {
  --bg: #030306;
  --ink: #C9D2DE;
  --muted: #9AA6B6;
  --cyan: #7DF4FF;
  --cyan-hot: #E6FDFF;
  --pink: #FF78DC;
  --green: #39E26A;
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #DCE3EC 35%, #9AA6B6 50%, #B9C3D0 62%, #EEF2F7 100%);
  --chrome-bar: linear-gradient(180deg, #F4F7FA 0%, #C9D1DC 40%, #8E9AAB 52%, #B4BFCD 64%, #E4E9F0 100%);
  --beam-h: 160px;
  --lift-ring: -150px;
  --lift-speck: -170px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 40% 30% at 50% 30%, rgba(125,244,255,.14), transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 78%, rgba(57,226,106,.10), transparent 70%),
    radial-gradient(ellipse at 50% 40%, #0B1018 0%, var(--bg) 72%);
  background-color: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 56px;
  overflow-x: hidden;
}
button { font: inherit; }
a { color: var(--cyan); }
a:hover { color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.7) 99%, transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(200,240,255,.5) 99%, transparent),
    radial-gradient(1.5px 1.5px at 64% 72%, rgba(255,255,255,.5) 99%, transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,200,240,.45) 99%, transparent),
    radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,.35) 99%, transparent),
    radial-gradient(1px 1px at 45% 30%, rgba(255,255,255,.4) 99%, transparent);
  background-size: 520px 520px;
}

.chrome-text {
  background: linear-gradient(180deg, #FFFFFF 0%, #DDE6F2 30%, #5B6B80 48%, #0E141C 52%, #7C8BA0 64%, #F2F6FB 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: 'Zen Dots', sans-serif; font-weight: 400;
}

/* Header */
.site-header { position: relative; z-index: 1; padding: 40px 0 8px; text-align: center; }
.site-header h1 {
  margin: 0; font-size: clamp(26px, 5vw, 48px); line-height: 1.05; letter-spacing: 3px;
  filter: drop-shadow(0 2px 0 rgba(125,244,255,.35));
}

/* Scene */
.scene { position: relative; z-index: 1; width: 100%; max-width: 1251px; display: flex; flex-direction: column; align-items: center; padding-top: 28px; }

.ship { position: relative; z-index: 3; width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; animation: float 6.5s ease-in-out infinite; }
.saucer { position: relative; width: 100%; }
.saucer svg { display: block; width: 100%; height: auto; overflow: visible; }
.hull-fx {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 49% 30% at 50% 61%, #000 98%, transparent 100%);
  mask: radial-gradient(ellipse 49% 30% at 50% 61%, #000 98%, transparent 100%);
}
.sweep { position: absolute; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: sweep 5s ease-in-out infinite; }
.iri {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge;
  background: linear-gradient(90deg, rgba(125,244,255,0), rgba(125,244,255,.45), rgba(255,120,220,.45), rgba(255,230,120,.35), rgba(125,244,255,0));
  background-size: 200% 100%; animation: shift 6s linear infinite;
}
.stem { width: 6px; height: 22px; margin-top: -22px; background: linear-gradient(90deg, #39424F, #E8EEF6, #39424F); }

.pod {
  position: relative; width: 360px; max-width: 92%; padding: 16px 20px 18px; border-radius: 120px; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8C6D8 22%, #4A586C 46%, #0C1018 52%, #3E3442 62%, #CBB09A 82%, #FFF2E4 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 50px rgba(125,244,255,.25), inset 0 2px 0 rgba(255,255,255,.9);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pod > .iri { opacity: .7; }
.screen {
  position: relative; width: 100%; border-radius: 60px; background: #020306; overflow: hidden;
  box-shadow: inset 0 3px 12px rgba(0,0,0,.95), 0 0 0 3px rgba(255,255,255,.55), 0 0 0 5px #0B0F15;
  padding: 10px 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.screen::before { content: ""; position: absolute; left: 8%; right: 30%; top: 4px; height: 36%; border-radius: 50px; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent); pointer-events: none; }
.state { position: relative; font-size: 10px; font-weight: 700; letter-spacing: 4px; color: var(--cyan); }
.time { position: relative; font-family: 'VT323', monospace; font-size: 46px; line-height: .9; color: var(--cyan-hot); text-shadow: 0 0 8px var(--cyan), 0 0 24px rgba(125,244,255,.7); font-variant-numeric: tabular-nums; }
.marquee { position: relative; width: 100%; overflow: hidden; white-space: nowrap; text-align: center; }
.marquee-inner { display: inline-block; font-family: 'VT323', monospace; font-size: 18px; color: var(--cyan); text-shadow: 0 0 6px rgba(125,244,255,.6); }
.marquee-inner.scroll { animation: pingpong 9s ease-in-out infinite alternate; }
@keyframes pingpong { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--dist, 0)); } }

.seek { position: relative; width: 78%; height: 14px; margin: 2px 0 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--cyan) var(--p, 0%), rgba(125,244,255,.18) var(--p, 0%)); }
.seek::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(125,244,255,.18); }
.seek::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--cyan); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%; background: var(--cyan-hot); box-shadow: 0 0 8px var(--cyan); border: 0; }
.seek::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan-hot); box-shadow: 0 0 8px var(--cyan); border: 0; }

.controls { position: relative; display: flex; gap: 12px; align-items: center; }
.chrome-btn {
  min-height: 46px; padding: 0 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--chrome); color: #0B0F15; font-family: 'Zen Dots', sans-serif; font-size: 14px; letter-spacing: 3px;
  box-shadow: 0 0 20px rgba(125,244,255,.3);
}
.chrome-btn.small { width: 50px; min-height: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.chrome-btn:hover, .play:hover, .send:hover { filter: brightness(1.15); }
.play {
  width: 66px; height: 50px; border-radius: 999px; border: 0; cursor: pointer; color: #02161A;
  background: radial-gradient(ellipse at 50% 20%, #E6FDFF, var(--cyan) 40%, #0B6C7A 100%);
  box-shadow: 0 0 24px rgba(125,244,255,.7), 0 0 0 3px #0B0F15, 0 0 0 5px rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
}
.play .i-pause { display: none; }
.live .play .i-pause { display: block; }
.live .play .i-play { display: none; }

/* Beam */
.beam { position: relative; z-index: 1; width: 100%; max-width: 640px; height: var(--beam-h); margin-top: -18px; pointer-events: none; }
.cone {
  position: absolute; inset: 0; clip-path: polygon(38% 0, 62% 0, 92% 100%, 8% 100%);
  background: linear-gradient(180deg, rgba(200,250,255,.42) 0%, rgba(125,244,255,.18) 45%, rgba(255,120,220,.10) 80%, rgba(125,244,255,0) 100%);
  animation: beam 3s ease-in-out infinite;
}
.spectrum {
  position: absolute; left: 38%; right: 38%; top: 0; height: calc(var(--beam-h) - 15px);
  display: flex; gap: 4px; align-items: flex-start;
  filter: drop-shadow(0 0 8px rgba(125,244,255,.95)) drop-shadow(0 0 18px rgba(125,244,255,.45));
}
.bar {
  flex: 1; height: 100%; border-radius: 0 0 999px 999px; transform-origin: top; transform: scaleY(.06);
  background: linear-gradient(180deg, #FFFFFF, var(--cyan) 28%, rgba(125,244,255,.9) 55%, rgba(255,120,220,.8) 85%, rgba(255,120,220,.2));
  will-change: transform;
}
.spectrum.fake .bar { animation: bar .45s ease-in-out infinite alternate; }
.ring { position: absolute; left: 50%; bottom: 0; width: 400px; height: 40px; margin-left: -200px; border-radius: 50%; border: 1.5px solid rgba(160,245,255,.55); opacity: 0; animation: ring 3.6s ease-in infinite; }
.specks { position: absolute; inset: 0; }
.speck { position: absolute; bottom: 0; border-radius: 50%; opacity: 0; animation: speck linear infinite; }

/* Planet */
.planet-wrap { position: relative; z-index: 2; width: 640px; max-width: 100%; aspect-ratio: 640 / 520; margin-top: -78px; animation: lift 7s ease-in-out infinite; }
.ring-back, .ring-front { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.planet {
  position: absolute; left: 17.1875%; top: 9.6154%; width: 65.625%; height: 80.7692%;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 38% 30%, #8E97A6 0%, #4E5668 32%, #232834 68%, #0A0C11 100%);
  box-shadow: inset 0 0 0 1.5px rgba(195,201,214,.5), 0 30px 60px rgba(0,0,0,.6);
}
.band { position: absolute; left: -10%; right: -10%; border-radius: 50%; }
.tint { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(57,226,106,.10), transparent 70%); }
.scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 4px); }
.limb { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 38%, transparent 55%, rgba(0,0,0,.62) 100%); pointer-events: none; }
.spec { position: absolute; left: 14%; top: 7%; width: 42%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.14), transparent 70%); pointer-events: none; }
.planet-label {
  position: absolute; left: 50%; top: 12.5%; transform: translate(-50%, -50%) scaleY(.8);
  font-family: 'VT323', monospace; font-size: 16px; letter-spacing: 4px; white-space: nowrap;
  color: rgba(120,255,160,.75); text-shadow: 0 0 6px rgba(57,226,106,.6);
}
.tracklist { list-style: none; margin: 0; padding: 0; }
.track {
  position: absolute; left: 50%; top: 50%; width: 70%; min-height: 36px;
  transform: translate(-50%, -50%) scaleY(var(--sy, 1));
  display: flex; gap: 10px; align-items: center; padding: 0 16px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer; text-align: left;
  font-family: 'VT323', monospace; font-size: 22px; line-height: 1; color: var(--green);
  text-shadow: 0 0 6px rgba(57,226,106,.55);
}
.track:hover { background: rgba(57,226,106,.16); }
.track[aria-current="true"] {
  color: #EFFFF0; text-shadow: 0 0 6px var(--green), 0 0 16px rgba(57,226,106,.85);
  background: linear-gradient(90deg, rgba(57,226,106,0), rgba(57,226,106,.3) 18%, rgba(57,226,106,.3) 82%, rgba(57,226,106,0));
}
.track .num { width: 24px; flex: none; opacity: .7; }
.track .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track .len { flex: none; opacity: .75; }

.mobile-only { display: none; }

/* Footer */
.site-footer {
  position: relative; z-index: 1; width: 100%; max-width: 640px; margin-top: 24px; padding-top: 28px;
  border-top: 1px solid rgba(200,215,232,.14);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 28px;
}
.f-link {
  min-height: 44px; display: flex; align-items: center; color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
}
.f-link:hover { color: #FFFFFF; }
.site-footer .f-link:first-child { justify-self: end; }
.site-footer .f-link:last-child { justify-self: start; }

/* Contact dialog */
.contact {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 28px; border: 0; border-radius: 28px; color: var(--ink);
  background: rgba(10,14,20,.95);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px rgba(10,14,20,.9), 0 0 0 4px rgba(200,215,232,.55), 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(125,244,255,.15);
}
.contact::backdrop { background: rgba(2,3,6,.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.contact-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.contact-head h2 { margin: 0; font-size: 22px; letter-spacing: 4px; }
.close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(200,215,232,.35); background: #020306; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form > label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  min-height: 44px; padding: 0 16px; background: #020306; border: 1px solid rgba(200,215,232,.35); border-radius: 999px;
  color: #EEF3F9; font-family: 'Space Grotesk', sans-serif; font-size: 16px;
}
.contact-form textarea { padding: 12px 16px; border-radius: 20px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(125,244,255,.2); }
.kind { margin: 0; padding: 4px; border: 0; border-radius: 999px; background: var(--chrome-bar); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.kind label { position: relative; }
.kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kind span { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #0B0F15; }
.kind input:checked + span { background: #05070B; color: var(--cyan); box-shadow: inset 0 2px 6px rgba(0,0,0,.9); }
.kind input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.contact-form:has(input[value="general"]:checked) .booking-only { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.send {
  min-height: 50px; border-radius: 999px; border: 0; cursor: pointer; color: #02161A;
  background: radial-gradient(ellipse at 50% 20%, #E6FDFF, var(--cyan) 40%, #0B6C7A 100%);
  font-family: 'Zen Dots', sans-serif; font-size: 14px; letter-spacing: 2px; box-shadow: 0 0 24px rgba(125,244,255,.5);
}
.send[disabled] { opacity: .6; cursor: progress; }
.form-error { margin: 0; color: #FF9BB0; font-size: 14px; }
.sent { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0 8px; text-align: center; }
.sent[hidden] { display: none; }
.sent-title { font-family: 'VT323', monospace; font-size: 34px; color: var(--cyan-hot); text-shadow: 0 0 8px var(--cyan), 0 0 24px rgba(125,244,255,.7); }
.sent p { margin: 0; color: var(--muted); }

/* Motion */
.live .light { animation: pulse 1.2s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-12px) rotate(.5deg); } }
@keyframes sweep { 0% { transform: translateX(-140%) skewX(-20deg); } 55%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes shift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bar { 0% { transform: scaleY(.2); } 100% { transform: scaleY(1); } }
@keyframes beam { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes lift { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes ring { 0% { transform: translateY(0) scaleX(1); opacity: 0; } 20% { opacity: .5; } 100% { transform: translateY(var(--lift-ring)) scaleX(.4); opacity: 0; } }
@keyframes speck { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateY(var(--lift-speck)); opacity: 0; } }

/* Phone layout */
@media (max-width: 640px) {
  :root { --beam-h: 100px; --lift-ring: -95px; --lift-speck: -110px; }
  body { padding: 0 16px 40px; }
  .site-header { padding-top: 24px; }
  .scene { padding-top: 18px; }
  .ship { animation-name: float-sm; }
  .stem { width: 5px; height: 14px; margin-top: -14px; }
  .pod { width: 290px; padding: 12px 16px 14px; border-radius: 90px; gap: 10px; }
  .screen { border-radius: 40px; padding: 8px 14px 6px; }
  .state { font-size: 9px; letter-spacing: 3px; }
  .time { font-size: 40px; }
  .marquee-inner { font-size: 17px; }
  .chrome-btn.small { width: 48px; height: 44px; }
  .play { width: 62px; height: 48px; }
  .beam { margin-top: -12px; }
  .cone { clip-path: polygon(34% 0, 66% 0, 96% 100%, 4% 100%); }
  .spectrum { left: 34%; right: 34%; gap: 3px; height: calc(var(--beam-h) - 8px); filter: drop-shadow(0 0 7px rgba(125,244,255,.95)) drop-shadow(0 0 14px rgba(125,244,255,.45)); }
  .ring { width: 260px; height: 26px; margin-left: -130px; }
  .planet-wrap { width: 100%; aspect-ratio: 1; margin-top: -34px; animation-name: lift-sm; }
  .planet { left: 3.75%; top: 3.75%; width: 92.5%; height: 92.5%; }
  .planet-label { top: 11%; font-size: 14px; letter-spacing: 3px; }
  .track { min-height: 42px; font-size: 19px; gap: 8px; padding: 0 12px; }
  .track .num { width: 20px; }
  .desktop-only { display: none; }
  .mobile-only { display: block; }
  .site-footer { margin-top: 20px; padding-top: 22px; gap: 14px; }
  .site-footer .chrome-btn { padding: 0 20px; font-size: 12px; letter-spacing: 2px; }
  .f-link { font-size: 11px; letter-spacing: 2px; }
  .contact { padding: 20px; border-radius: 22px; }
  .contact-head h2 { font-size: 18px; }
  .sent-title { font-size: 28px; }
}
@keyframes float-sm { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-8px) rotate(.5deg); } }
@keyframes lift-sm { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }

@media (prefers-reduced-motion: reduce) {
  .ship, .planet-wrap, .sweep, .iri, .cone, .ring, .speck, .live .light, .spectrum.fake .bar { animation: none !important; }
  .marquee-inner.scroll { animation-duration: 16s; }
  .ring, .speck { display: none; }
}