/* ============================================================
   NEBULA VOYAGES — main.css
   Palette: void #030014 · indigo #1B1040 · aurora #7C3AED→#22D3EE→#F472B6
   Type: Unbounded (display) · Space Grotesk (body)
   ============================================================ */

:root {
  --void: #030014;
  --indigo: #1B1040;
  --violet: #7C3AED;
  --cyan: #22D3EE;
  --pink: #F472B6;
  --star: #F8FAFC;
  --star-dim: rgba(248, 250, 252, .62);
  --star-faint: rgba(248, 250, 252, .38);
  --hairline: rgba(248, 250, 252, .12);
  --aurora: linear-gradient(100deg, var(--violet), var(--cyan) 52%, var(--pink));
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --pad: clamp(1.25rem, 4vw, 4rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--void);
  color: var(--star);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--violet); color: var(--star); }

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

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: .02em; }
.grad {
  background: var(--aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

/* ---------- fixed sky ---------- */
#sky {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
#sky-fallback { position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none; }
body.no-webgl #sky { display: none; }
body.no-webgl #sky-fallback {
  display: block;
  background:
    radial-gradient(120% 90% at 70% 8%, rgba(124, 58, 237, .28), transparent 60%),
    radial-gradient(90% 70% at 18% 80%, rgba(34, 211, 238, .12), transparent 55%),
    url("../assets/nebula-vista.webp") center / cover no-repeat,
    var(--void);
}
/* legibility scrim over the still image */
body.no-webgl #sky-fallback::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 0, 20, .72), rgba(3, 0, 20, .28) 55%, rgba(3, 0, 20, .05)),
    linear-gradient(rgba(3, 0, 20, .35), transparent 30%, transparent 70%, rgba(3, 0, 20, .55));
}
.css-stars, .css-stars--far {
  z-index: 1;
  position: absolute; inset: -20%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 68%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 56% 12%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 84%, var(--star-faint) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 40%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 92%, var(--star-faint) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 45% 45%, var(--star-dim) 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 60%, var(--star-faint) 50%, transparent 51%);
  background-size: 420px 420px;
  animation: star-drift 240s linear infinite;
}
.css-stars--far { background-size: 260px 260px; opacity: .5; animation-duration: 380s; }
@keyframes star-drift { to { transform: translate3d(-420px, -210px, 0); } }
@media (prefers-reduced-motion: reduce) { .css-stars, .css-stars--far { animation: none; } }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -50%;
  z-index: 40; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 900ms steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

main { position: relative; z-index: 1; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 30;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.1rem var(--pad);
  transition: background .5s var(--ease-out), backdrop-filter .5s;
}
.nav.is-scrolled {
  background: rgba(3, 0, 20, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav__brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: .95rem; letter-spacing: .04em;
  text-decoration: none;
}
.nav__brand em { font-style: normal; font-weight: 300; opacity: .75; }
.nav__mark { width: 28px; height: 28px; }
.nav__links { display: flex; gap: 1.8rem; margin-left: auto; }
.nav__links a {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--star-dim);
  position: relative;
  transition: color .3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--aurora);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__links a:hover { color: var(--star); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: .65rem 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  position: relative; overflow: hidden;
  transition: border-color .3s, color .3s;
}
.nav__cta::before {
  content: ""; position: absolute; inset: 0;
  background: var(--aurora);
  opacity: 0; transition: opacity .35s;
  z-index: -1;
}
.nav__cta:hover { border-color: transparent; color: var(--void); }
.nav__cta:hover::before { opacity: 1; }
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
}
@media (max-width: 480px) {
  .nav { gap: 1rem; }
  .nav__brand span { display: none; }
  .nav__mark { width: 32px; height: 32px; }
}

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem var(--pad) 5rem;
  position: relative;
}
.hero__eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--star-dim);
  margin-bottom: 2rem;
}
.pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pip-pulse 2.4s ease-in-out infinite;
}
@keyframes pip-pulse { 50% { opacity: .35; box-shadow: 0 0 4px var(--cyan); } }
@media (prefers-reduced-motion: reduce) { .pip { animation: none; } }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 8.2vw, 7.2rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 14ch;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__line > span, .hero__line > em, .hero__line span { display: inline-block; }
.hero__sub {
  margin-top: 2.2rem;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--star-dim);
  max-width: 46ch;
}

.hero__data {
  display: flex; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 3.2rem;
  flex-wrap: wrap;
}
.datum { display: flex; flex-direction: column; gap: .3rem; }
.datum__label {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--star-dim);
}
.datum__value {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--star);
}
.hero__data .datum { border-left: 1px solid var(--hairline); padding-left: 1rem; }

.hero__scroll {
  position: absolute; bottom: 2.2rem; right: var(--pad);
  display: flex; align-items: center; gap: 1rem;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--star-faint); text-decoration: none;
  transition: color .3s;
}
.hero__scroll:hover { color: var(--star); }
.hero__scroll svg { width: 12px; height: 44px; animation: scroll-nudge 2.6s var(--ease-out) infinite; }
@keyframes scroll-nudge { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }
@media (max-width: 640px) { .hero__scroll span { display: none; } }

/* ---------- manifesto ---------- */
.manifesto {
  padding: clamp(7rem, 16vh, 12rem) var(--pad);
  max-width: 72rem; margin-inline: auto;
}
.manifesto__kicker {
  font-size: .8rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--star-faint); margin-bottom: 2.4rem;
}
.manifesto__text {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  line-height: 1.35;
}
.mline { display: block; }
.manifesto__meta { margin-top: 3.5rem; max-width: 46ch; color: var(--star-dim); }
@media (min-width: 861px) {
  .manifesto__meta { margin-left: auto; padding-left: 2rem; border-left: 1px solid var(--hairline); }
}

/* ---------- section head ---------- */
.section-head { max-width: 72rem; margin: 0 auto 4rem; padding: 0 var(--pad); }
.section-head::before {
  content: "";
  display: block;
  width: 64px; height: 2px;
  border-radius: 2px;
  background: var(--aurora);
  margin-bottom: 2.2rem;
  box-shadow: 0 0 18px rgba(124, 58, 237, .55);
}
.section-head__index {
  font-size: .8rem; letter-spacing: .3em;
  color: var(--cyan);
  margin-bottom: 1rem;
}
.section-head__index::after { content: " ///"; color: var(--star-faint); letter-spacing: .1em; }
.section-head__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.12;
}
.section-head__sub { margin-top: 1.4rem; max-width: 52ch; color: var(--star-dim); }

/* ---------- voyages / cards ---------- */
.voyages { padding: clamp(5rem, 12vh, 9rem) 0; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  max-width: 78rem;
  margin-inline: auto;
  padding: 0 var(--pad);
}
@media (max-width: 980px) { .cards { grid-template-columns: 1fr; max-width: 34rem; } }

@property --holo-angle {
  syntax: "<angle>";
  initial-value: 120deg;
  inherits: false;
}
.card {
  position: relative;
  border-radius: 20px;
  padding: 1px; /* gradient border thickness */
  background:
    conic-gradient(from var(--holo-angle),
      rgba(124, 58, 237, .9), rgba(34, 211, 238, .9), rgba(244, 114, 182, .9),
      rgba(124, 58, 237, .15), rgba(124, 58, 237, .9));
  transition: transform .6s var(--ease-out), --holo-angle 1.2s var(--ease-out);
  will-change: transform;
}
.card:hover { --holo-angle: 480deg; transform: translateY(-8px); }
.card__inner {
  position: relative;
  border-radius: 19px;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(27, 16, 64, .92), rgba(3, 0, 20, .96) 70%);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* holo sheen sweep */
.card__inner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(248, 250, 252, .07) 45%, rgba(34, 211, 238, .10) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--ease-out);
  pointer-events: none;
}
.card:hover .card__inner::before { transform: translateX(120%); }

.card--featured {
  background:
    conic-gradient(from var(--holo-angle),
      var(--violet), var(--cyan), var(--pink), var(--violet) 75%, var(--violet));
  box-shadow: 0 0 60px rgba(124, 58, 237, .22);
  animation: featured-breathe 5.5s ease-in-out infinite;
}
@keyframes featured-breathe {
  50% { box-shadow: 0 0 90px rgba(124, 58, 237, .38); }
}
@media (prefers-reduced-motion: reduce) { .card--featured { animation: none; } }

.card__index {
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 1.6rem;
}
.card__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}
.card__tag { margin: 1rem 0 1.6rem; color: var(--star-dim); }
.card__specs {
  margin-top: auto;
  border-top: 1px solid var(--hairline);
}
.card__specs > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .65rem 0;
  border-bottom: 1px solid var(--hairline);
}
.card__specs dt { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--star-dim); }
.card__specs dd { font-weight: 500; }
.card__price {
  margin-top: 1.8rem;
  display: flex; align-items: baseline; gap: .7rem;
}
.card__price .num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  background: var(--aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card__per { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--star-faint); }
.card__cta {
  margin-top: 1.6rem;
  align-self: flex-start;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--hairline);
  transition: border-color .3s;
}
.card__cta span { display: inline-block; transition: transform .45s var(--ease-out); }
.card__cta:hover { border-color: var(--cyan); }
.card__cta:hover span { transform: translateX(7px); }

/* ---------- journey (pinned) ---------- */
.journey { position: relative; }
.journey__pin {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0 clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: 6.5rem var(--pad) 3rem;
  max-width: 82rem; margin-inline: auto;
}
.journey__head { grid-column: 1 / -1; align-self: start; }
.journey__rail {
  position: absolute; left: calc(var(--pad) * .35); top: 50%;
  transform: translateY(-50%);
  height: min(46vh, 380px); width: 2px;
  background: var(--hairline);
}
.journey__rail-fill {
  position: absolute; inset: 0 0 auto 0; height: 0%;
  background: var(--aurora);
}
.journey__tick {
  position: absolute; left: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--indigo);
  border: 1px solid var(--star-faint);
  transition: background .4s, box-shadow .4s;
}
.journey__tick[data-stage="0"] { top: 2%; }
.journey__tick[data-stage="1"] { top: 34%; }
.journey__tick[data-stage="2"] { top: 66%; }
.journey__tick[data-stage="3"] { top: 98%; }
.journey__tick.is-passed { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); border-color: transparent; }

.journey__num {
  align-self: center; justify-self: end;
  grid-column: 2; grid-row: 2;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(248, 250, 252, .22);
  user-select: none;
}
.journey__num-total {
  font-size: .16em;
  letter-spacing: .2em;
  -webkit-text-stroke: 0;
  color: var(--star-faint);
  margin-left: .4em;
}

.journey__stages { grid-column: 1; grid-row: 2; position: relative; min-height: 16rem; }
.jstage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  pointer-events: none;
}
.jstage.is-active { opacity: 1; transform: none; pointer-events: auto; }
.jstage__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 1.2rem;
  background: var(--aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
.jstage__copy { max-width: 46ch; color: var(--star-dim); font-size: clamp(1rem, 1.2vw, 1.15rem); }

.journey__data {
  grid-column: 1 / -1; align-self: end;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: clamp(1.4rem, 4vw, 4rem);
  border-top: 1px solid var(--hairline);
  padding-top: 1.6rem;
}
@media (max-width: 860px) {
  .journey__pin { grid-template-columns: 1fr; padding-top: 5.5rem; }
  .journey__num { grid-column: 1; grid-row: 2; justify-self: end; align-self: start; font-size: 5.5rem; opacity: .55; }
  .journey__stages { grid-row: 2; }
  .journey__rail { display: none; }
  .journey__data { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2rem; }
}

/* reduced-motion journey: stack statically */
body.reduced-motion .journey__pin { min-height: 0; }
body.reduced-motion .journey__stages { min-height: 0; display: grid; gap: 3rem; }
body.reduced-motion .jstage { position: static; opacity: 1; transform: none; pointer-events: auto; }
body.reduced-motion .journey__num, body.reduced-motion .journey__rail { display: none; }

/* ---------- vista ---------- */
.vista { padding: clamp(5rem, 12vh, 9rem) var(--pad); max-width: 78rem; margin-inline: auto; }
.vista__fig {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.vista__fig img { width: 100%; transform: scale(1.06); }
.vista__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.2rem 1.6rem;
  font-size: .82rem; letter-spacing: .06em;
  color: var(--star-dim);
  background: linear-gradient(transparent, rgba(3, 0, 20, .85));
}
.vista__quote {
  margin: 4rem auto 0;
  max-width: 44rem;
  text-align: center;
  position: relative;
}
.vista__quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 4.5rem; line-height: .6;
  background: var(--aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1.4rem;
}
.vista__quote p {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.5;
}
.vista__quote cite {
  display: block; margin-top: 1.2rem;
  font-style: normal; font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--star-dim);
}

/* ---------- craft ---------- */
.craft { padding: clamp(5rem, 12vh, 9rem) 0; }
.craft__gallery {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1rem, 2vw, 1.8rem);
  max-width: 78rem; margin-inline: auto;
  padding: 0 var(--pad);
}
@media (max-width: 860px) { .craft__gallery { grid-template-columns: 1fr; } }
.craft__img {
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--hairline);
  aspect-ratio: 3 / 2;
  transition: border-color .5s;
}
/* second image stretches to match the wide one's height */
.craft__gallery .craft__img:not(.craft__img--wide) { aspect-ratio: auto; height: 100%; }
@media (max-width: 860px) {
  .craft__gallery .craft__img:not(.craft__img--wide) { aspect-ratio: 3 / 2; height: auto; }
}
.craft__img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
  transition: scale .9s var(--ease-out), filter .9s;
  scale: 1;
}
.craft__img:hover { border-color: rgba(34, 211, 238, .45); }
.craft__img:hover img { scale: 1.045; filter: saturate(1.12); }

.specs {
  max-width: 78rem; margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 860px) { .specs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .specs { grid-template-columns: 1fr; } }
.spec {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
  transition: border-color .4s, padding-left .4s var(--ease-out);
}
.spec:hover { border-color: rgba(34, 211, 238, .5); padding-left: .4rem; }
.spec dt { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--star-dim); }
.spec dd { font-weight: 500; font-size: 1.05rem; }

/* ---------- training ---------- */
.training { padding: clamp(5rem, 12vh, 9rem) 0; }
.steps {
  list-style: none;
  max-width: 72rem; margin-inline: auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(27, 16, 64, .35), rgba(3, 0, 20, .2));
  transition: border-color .4s, transform .5s var(--ease-out), background .4s;
}
.step:hover { border-color: rgba(124, 58, 237, .55); transform: translateY(-4px); background: linear-gradient(160deg, rgba(27, 16, 64, .55), rgba(3, 0, 20, .3)); }
.step__num {
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .2em;
  color: var(--cyan);
}
.step h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.25rem; margin: .8rem 0 .8rem;
}
.step p { color: var(--star-dim); font-size: 1rem; }

/* ---------- reserve ---------- */
.reserve {
  padding: clamp(7rem, 18vh, 13rem) var(--pad);
  text-align: center;
}
.reserve__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 6.5vw, 5.4rem);
  line-height: 1.1;
}
.reserve__sub { margin: 2rem auto 0; max-width: 44ch; color: var(--star-dim); }
.reserve__form {
  margin: 2.8rem auto 0;
  display: flex; gap: .6rem;
  max-width: 30rem;
  padding: .45rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(3, 0, 20, .5);
  backdrop-filter: blur(8px);
  transition: border-color .4s, box-shadow .4s;
}
.reserve__form:focus-within {
  border-color: rgba(34, 211, 238, .6);
  box-shadow: 0 0 40px rgba(34, 211, 238, .12);
}
.reserve__form input {
  flex: 1; min-width: 0;
  background: none; border: none;
  color: var(--star);
  font: inherit;
  padding: .7rem 1.1rem;
}
.reserve__form input::placeholder { color: var(--star-faint); }
.reserve__form input:focus { outline: none; }
.reserve__form button {
  font-family: var(--font-body); font-weight: 500;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--void);
  background: var(--aurora);
  border: none; border-radius: 999px;
  padding: .8rem 1.6rem;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.reserve__form button:hover { transform: scale(1.04); box-shadow: 0 0 30px rgba(124, 58, 237, .5); }
.reserve__note { margin-top: 1.4rem; font-size: .85rem; color: var(--star-faint); }
@media (max-width: 560px) {
  .reserve__form { flex-direction: column; border-radius: 24px; }
  .reserve__form button { padding: .9rem; }
}

/* ---------- footer ---------- */
.footer {
  position: relative; z-index: 1;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(124, 58, 237, .6), rgba(34, 211, 238, .6), rgba(244, 114, 182, .6), transparent) 1;
  padding: 3.5rem var(--pad) 2rem;
  background: linear-gradient(rgba(3, 0, 20, .4), rgba(3, 0, 20, .85));
}
.footer__grid {
  max-width: 78rem; margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { font-family: var(--font-display); font-size: 1.1rem; }
.footer__brand em { font-style: normal; font-weight: 300; opacity: .75; }
.footer__addr { margin-top: 1rem; font-size: .88rem; color: var(--star-faint); }
.footer__links { display: flex; flex-direction: column; gap: .7rem; }
.footer__links a {
  text-decoration: none; color: var(--star-dim);
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  width: fit-content;
  transition: color .3s, transform .3s var(--ease-out);
}
.footer__links a:hover { color: var(--star); transform: translateX(4px); }
.footer__legal { font-size: .8rem; color: var(--star-faint); }
.footer__credit {
  max-width: 78rem; margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: .8rem; color: var(--star-faint);
}
.footer__credit a { color: var(--star-dim); }
.footer__credit a:hover { color: var(--cyan); }

/* ---------- reveal (JS-driven) ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
body.reduced-motion .reveal, body.no-js .reveal { opacity: 1; transform: none; }