/* ===========================================================================
   AURORA PC CLUB — styles.css
   LAYOUT SYSTEM (fixed, do not mix):
     Container scheme: F — alternating-bleed
       odd sections = boxed 1140px; even = full-bleed with 5vw inner padding.
     Spacing scale:  airy — sections 128px / inner 72px (64px mobile)
   Theme: dark (polar night). Light used once, on the Hardware section.
   =========================================================================== */

:root {
  /* palette */
  --c-bg: #eef2f4;          /* light, used sparingly */
  --c-bg-dark: #0c1220;     /* polar night, primary */
  --c-bg-dark-2: #101a30;   /* raised dark surface */
  --c-ink: #eef2f4;         /* text on dark */
  --c-ink-inv: #0c1220;     /* text on light */
  --c-a1: #34d399;          /* aurora green */
  --c-a2: #a78bfa;          /* aurora violet */
  --c-line: rgba(52, 211, 153, 0.30);

  /* aurora ribbon tint — retuned live by the sky-mode switch */
  --sky-1: #34d399;
  --sky-2: #a78bfa;
  --sky-strength: 0.9;

  /* fonts */
  --f-display: "Advent Pro", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, sans-serif;

  /* radius */
  --r-card: 16px;

  /* spacing scale (8px step) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 56px;
  --s-sec: 128px;   /* airy: section vertical */
  --s-inner: 72px;  /* airy: inner block */

  --w-container: 1140px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-bg-dark);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 var(--s-3);
}
h1 { font-size: clamp(38px, 6vw, 82px); letter-spacing: 0.04em; }
h2 { font-size: clamp(28px, 4.5vw, 50px); letter-spacing: 0.03em; }
h3 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: 0.02em; }
p { margin: 0 0 var(--s-3); }
a { color: inherit; }

.u-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-a1); color: var(--c-ink-inv);
  padding: var(--s-2); z-index: 1000; border-radius: 0 0 var(--r-card) 0;
}
.u-skip:focus { left: 0; }

.kicker {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  color: var(--c-a1);
  margin: 0 0 var(--s-2);
}

/* ---------- aurora ribbon (top-edge motif) ---------- */
.section > .section__head,
.card,
.plan,
.spec,
.journal__item,
.gallery__item,
.faq,
.form,
.s-band__caption {
  position: relative;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  cursor: pointer;
  font-size: 16px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.btn--primary {
  position: relative;
  color: var(--c-ink-inv);
  border: none;
  background: linear-gradient(100deg, var(--sky-1), var(--sky-2), var(--sky-1));
  background-size: 220% 100%;
  background-position: 0% 50%;
  font-weight: 700;
  transition: background-position 600ms ease, transform 200ms ease;
}
.btn--primary:hover { background-position: 100% 50%; transform: translateY(-1px); }
.btn--ghost { color: var(--c-ink); background: transparent; }
.btn--ghost:hover { border-color: var(--c-a2); transform: translateY(-1px); }

/* ---------- NAV — nav-pill ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 100;
  width: min(1180px, calc(100% - 24px));
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 16px 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: rgba(12, 18, 32, 0.72);
  backdrop-filter: blur(12px);
}
.nav__logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.nav__logo-word {
  font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: 0.14em;
  background: linear-gradient(100deg, var(--sky-1), var(--sky-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav__logo-sub {
  font-family: var(--f-display); font-size: 10px; letter-spacing: 0.42em;
  color: var(--c-ink); opacity: 0.7;
}
.nav__badge {
  font-family: var(--f-display); font-size: 11px; letter-spacing: 0.12em;
  color: var(--c-a1);
  border: 1px solid var(--c-line); border-radius: 999px;
  padding: 4px 12px; white-space: nowrap;
}
.nav__links { display: flex; gap: var(--s-3); margin-left: auto; }
.nav__links a {
  text-decoration: none; font-family: var(--f-display); letter-spacing: 0.06em;
  font-size: 15px; color: var(--c-ink); opacity: 0.85; position: relative; padding: 4px 0;
  transition: opacity 200ms ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2));
  transform: scaleX(0); transform-origin: left; transition: transform 250ms ease;
}
.nav__links a:hover, .nav__links a.is-active { opacity: 1; }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__cta { padding: 10px 20px; font-size: 14px; }
.nav__toggle {
  display: none; flex-direction: column; gap: 4px; background: none; border: none;
  cursor: pointer; padding: 6px; margin-left: auto;
}
.nav__toggle span { width: 22px; height: 2px; background: var(--c-ink); border-radius: 2px; }

/* ---------- layout containers (scheme F) ---------- */
.section {
  padding: var(--s-sec) 0;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
}
.section--bleed {
  max-width: none;
  padding-inline: 5vw;
}
.section--bleed .s-sky__inner,
.section--bleed .s-journal__inner { max-width: var(--w-container); margin-inline: auto; }

.section__head { max-width: 760px; margin-bottom: var(--s-inner); }
.section__intro { color: var(--c-ink); opacity: 0.82; font-size: 18px; }

/* aurora ribbon on section heads */
.section__head::before {
  content: ""; position: absolute; top: -18px; left: 0; height: 3px; width: 120px;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2));
  border-radius: 3px; opacity: var(--sky-strength);
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms ease;
}
.reveal.is-in .section__head::before,
.section__head.is-in::before { transform: scaleX(1); }

/* ---------- HERO ---------- */
.s-hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 24px 90px;
  display: flex; align-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(12,18,32,0.55), rgba(12,18,32,0.90)),
    url("images/bg1.jpg") center 20% / cover no-repeat,
    var(--c-bg-dark);
}
.s-hero__veil { position: absolute; inset: 0 0 auto 0; height: 55%; z-index: 0; }
.veil { width: 100%; height: 100%; opacity: 0.55; }
.veil__ribbon { mix-blend-mode: screen; opacity: 0.7; will-change: transform, filter; }
.s-hero__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(238,242,244,0.9), transparent),
    radial-gradient(1.2px 1.2px at 28% 12%, rgba(238,242,244,0.7), transparent),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(238,242,244,0.8), transparent),
    radial-gradient(1.1px 1.1px at 82% 30%, rgba(238,242,244,0.6), transparent),
    radial-gradient(1.3px 1.3px at 48% 26%, rgba(238,242,244,0.7), transparent);
}
.s-hero__inner {
  position: relative; z-index: 2;
  max-width: var(--w-container); margin-inline: auto; width: 100%;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); align-items: center;
}
.s-hero__slogan { font-family: var(--f-display); color: var(--c-a2); letter-spacing: 0.04em; margin-top: var(--s-4); }
.lede { font-size: 19px; opacity: 0.9; max-width: 46ch; }
.s-hero__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.s-hero__media {
  margin: 0; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--c-line); position: relative;
}
.s-hero__media::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2));
}
.s-hero__media img { width: 100%; }
.s-hero__media figcaption {
  font-size: 13px; padding: var(--s-2); background: var(--c-bg-dark-2);
  color: var(--c-ink); opacity: 0.75; letter-spacing: 0.03em;
}
.s-hero__horizon { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 60px; }
.s-hero__horizon svg { width: 100%; height: 100%; }
.horizon__line { stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.s-hero__horizon.is-in .horizon__line { animation: draw 2200ms ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- cards grids ---------- */
.cards { display: grid; gap: var(--s-4); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card, .plan, .spec, .journal__item {
  background: var(--c-bg-dark-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s-4);
  overflow: hidden;
}
.card__media, .card__media--tone, .card__media--duo {
  border-radius: 12px; overflow: hidden; margin-bottom: var(--s-3);
  aspect-ratio: 16 / 10; position: relative;
  display: flex; align-items: flex-end; padding: var(--s-2);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--tone { background: linear-gradient(140deg, #12233a, #1b1440); }
.card__media--duo { background: linear-gradient(140deg, #0f2a2a, #241640); }
.card__badge {
  font-family: var(--f-display); font-size: 12px; letter-spacing: 0.1em;
  background: rgba(12,18,32,0.7); border: 1px solid var(--c-line);
  padding: 4px 10px; border-radius: 999px; color: var(--c-a1);
}
/* per-card ribbon hue shift on top edge */
.card::before, .plan::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2));
  transform: scaleX(0); transform-origin: left; transition: transform 650ms ease;
}
.card:nth-child(2)::before { background: linear-gradient(90deg, var(--sky-2), var(--sky-1)); }
.card:nth-child(3)::before { background: linear-gradient(90deg, var(--sky-1), var(--sky-2), var(--sky-1)); }
.card.is-in::before, .plan.is-in::before { transform: scaleX(1); }
.card__meta { list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.card__meta li { padding: 6px 0; border-top: 1px solid rgba(52,211,153,0.15); font-size: 15px; opacity: 0.85; }

/* ---------- THE SKY ---------- */
.s-sky {
  background:
    linear-gradient(180deg, rgba(12,18,32,0.90), rgba(12,18,32,0.95)),
    url("images/bg2.jpg") center / cover no-repeat fixed,
    var(--c-bg-dark);
}
.s-sky__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s-6); align-items: start; }
.s-sky__copy p { opacity: 0.9; }
.s-sky__demo {
  background: rgba(12,18,32,0.72); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: var(--s-4); position: sticky; top: 100px;
}
.s-sky__demo-label { font-family: var(--f-display); letter-spacing: 0.1em; color: var(--c-a1); }
.modes { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.mode {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); letter-spacing: 0.06em; font-size: 15px;
  background: transparent; color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.mode.is-active { border-color: var(--c-a2); background: rgba(167,139,250,0.12); }
.mode__swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.mode__swatch--focus { background: linear-gradient(135deg, #1c7f5c, #6d5aa8); }
.mode__swatch--calm { background: linear-gradient(135deg, #34d399, #a78bfa); }
.mode__swatch--night { background: linear-gradient(135deg, #2a8f6b, #7c5fe0); }
.s-sky__demo-note { font-size: 14px; opacity: 0.75; margin: 0; }

/* ---------- BAND ---------- */
.s-band { position: relative; padding: 0; max-width: none; margin: 0; }
.s-band img { width: 100%; height: clamp(240px, 42vh, 460px); object-fit: cover; }
.s-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2), var(--sky-1));
}
.s-band__caption {
  position: absolute; left: 5vw; bottom: var(--s-5); z-index: 2;
  font-family: var(--f-display); font-size: clamp(20px, 3vw, 34px); letter-spacing: 0.04em;
  color: var(--c-ink); text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.s-band__caption p { margin: 0; }

/* ---------- HARDWARE (light contrast) ---------- */
.s-hardware {
  background: var(--c-bg); color: var(--c-ink-inv);
  max-width: none; padding-inline: 5vw;
}
.s-hardware .section__head { margin-inline: auto; }
.s-hardware .kicker { color: #0d7a54; }
.s-hardware .section__intro { color: var(--c-ink-inv); opacity: 0.78; }
.s-hardware .cards--4 { max-width: var(--w-container); margin-inline: auto; }
.spec { background: #ffffff; border: 1px solid rgba(12,18,32,0.12); color: var(--c-ink-inv); }
.spec h3 { color: var(--c-ink-inv); }
.spec p { opacity: 0.82; margin: 0; }
.spec::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--c-a1), var(--c-a2));
  border-radius: var(--r-card) var(--r-card) 0 0;
}

/* ---------- RATES ---------- */
.plan { display: flex; flex-direction: column; }
.plan--featured { border-color: var(--c-a2); background: linear-gradient(180deg, rgba(167,139,250,0.10), var(--c-bg-dark-2)); }
.plan__flag {
  align-self: flex-start; font-family: var(--f-display); font-size: 12px; letter-spacing: 0.1em;
  color: var(--c-ink-inv); background: linear-gradient(100deg, var(--c-a1), var(--c-a2));
  padding: 4px 12px; border-radius: 999px; margin-bottom: var(--s-2);
}
.plan__price { font-family: var(--f-display); font-size: 24px; color: var(--c-a1); margin: 0 0 var(--s-3); }
.plan__price span { letter-spacing: 0.04em; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan li { padding: 8px 0; border-top: 1px solid rgba(52,211,153,0.15); font-size: 15px; opacity: 0.9; }
.plan li::before { content: "66.5° "; color: var(--c-a2); font-family: var(--f-display); font-size: 12px; }
.rates__note { margin-top: var(--s-5); text-align: center; opacity: 0.7; font-size: 15px; }

/* ---------- JOURNAL ---------- */
.s-journal {
  background:
    linear-gradient(180deg, rgba(12,18,32,0.92), rgba(12,18,32,0.96)),
    url("images/bg.jpg") center / cover no-repeat,
    var(--c-bg-dark);
}
.journal { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
.journal__mark { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.1em; color: var(--c-a2); display: block; margin-bottom: var(--s-2); }
.journal__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sky-2), var(--sky-1));
  transform: scaleX(0); transform-origin: left; transition: transform 650ms ease;
}
.journal__item.is-in::before { transform: scaleX(1); }
.journal__item p { opacity: 0.85; margin: 0; }

/* ---------- GALLERY ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.gallery__item { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-line); position: relative; }
.gallery__item--wide { grid-column: 1 / -1; }
.gallery__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 2;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2));
}
.gallery__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gallery__item--wide img { aspect-ratio: 16 / 7; }
.gallery__item figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: var(--s-2);
  background: linear-gradient(0deg, rgba(12,18,32,0.85), transparent);
  font-family: var(--f-display); font-size: 14px; letter-spacing: 0.05em;
}

/* ---------- FAQ (light contrast) ---------- */
.s-faq { background: var(--c-bg); color: var(--c-ink-inv); max-width: none; padding-inline: 5vw; }
.s-faq .section__head { margin-inline: auto; }
.s-faq .kicker { color: #0d7a54; }
.faq { max-width: 820px; margin-inline: auto; }
.faq__item {
  border: 1px solid rgba(12,18,32,0.12); border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); background: #fff;
}
.faq__item summary {
  cursor: pointer; font-family: var(--f-display); font-size: 19px; letter-spacing: 0.02em;
  list-style: none; position: relative; padding-right: 28px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: "66.5°"; color: var(--c-a2); font-size: 12px; margin-right: 8px; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 0; top: 0; color: #0d7a54; font-size: 24px; line-height: 1;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: var(--s-3) 0 0; opacity: 0.82; }

/* ---------- BOOK / FORM ---------- */
.s-book__inner { max-width: 860px; margin-inline: auto; }
.form { background: var(--c-bg-dark-2); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: var(--s-5); overflow: hidden; }
.form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2), var(--sky-1));
}
.form__row { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; margin-bottom: var(--s-3); }
.form__row:nth-of-type(2) { grid-template-columns: 1fr 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.field > span { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-a1); }
.field input, .field select {
  background: rgba(12,18,32,0.6); border: 1px solid var(--c-line); border-radius: 10px;
  padding: 12px 14px; color: var(--c-ink); font-family: var(--f-body); font-size: 15px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--c-a2);
  box-shadow: 0 2px 0 -1px var(--c-a1), inset 0 -2px 0 -1px var(--c-a1);
}
.field select option { color: #0c1220; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { margin-top: var(--s-3); width: 100%; }
.form__status { margin: var(--s-3) 0 0; font-family: var(--f-display); letter-spacing: 0.03em; min-height: 1.4em; }
.form__status.success { color: var(--c-a1); }
.form__status.error { color: #ff9a8b; }

/* ---------- FOOTER ---------- */
.footer--minimal {
  text-align: center; padding: var(--s-inner) 24px var(--s-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-dark);
}
.footer__logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; }
.footer__links { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.footer__links a { text-decoration: none; font-family: var(--f-display); letter-spacing: 0.05em; font-size: 15px; opacity: 0.85; }
.footer__links a:hover { opacity: 1; color: var(--c-a1); }
.footer__hours { font-size: 14px; opacity: 0.7; margin: 0; }
.footer__disclaimer {
  font-family: var(--f-display); letter-spacing: 0.05em; color: var(--c-a1);
  border: 1px solid var(--c-line); border-radius: 999px; padding: 8px 18px; margin: var(--s-2) 0;
}
.footer__copy { font-size: 13px; opacity: 0.55; margin: 0; }

/* ---------- reveal (scroll) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 550ms ease, transform 550ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ===========================================================================
   AURORA VEIL — signature hero animation (transform/filter only, GPU)
   Runs only when .is-playing (added by IntersectionObserver when in view).
   =========================================================================== */
.veil.is-playing .veil__ribbon--1 { animation: veilDrift1 22s ease-in-out infinite alternate; }
.veil.is-playing .veil__ribbon--2 { animation: veilDrift2 26s ease-in-out infinite alternate; }
.veil.is-playing .veil__ribbon--3 { animation: veilDrift3 19s ease-in-out infinite alternate; }

@keyframes veilDrift1 {
  0%   { transform: translate3d(-2%, 0, 0) scaleY(1); filter: hue-rotate(-12deg); }
  100% { transform: translate3d(3%, 8px, 0) scaleY(1.08); filter: hue-rotate(12deg); }
}
@keyframes veilDrift2 {
  0%   { transform: translate3d(2%, 4px, 0) scaleY(1.04); filter: hue-rotate(10deg); }
  100% { transform: translate3d(-3%, -6px, 0) scaleY(0.96); filter: hue-rotate(-14deg); }
}
@keyframes veilDrift3 {
  0%   { transform: translate3d(-1%, -4px, 0) scaleY(0.98); filter: hue-rotate(8deg); }
  100% { transform: translate3d(4%, 6px, 0) scaleY(1.06); filter: hue-rotate(-10deg); }
}

/* ===========================================================================
   LEGAL PAGES (narrow column, shared styles.css)
   =========================================================================== */
.legal {
  max-width: 720px; margin: 0 auto; padding: 96px 24px var(--s-inner);
}
.legal__logo { display: inline-flex; flex-direction: column; text-decoration: none; margin-bottom: var(--s-5); }
.legal__ribbon {
  height: 3px; width: 160px; border-radius: 3px; margin-bottom: var(--s-4);
  background: linear-gradient(90deg, var(--c-a1), var(--c-a2));
}
.legal h1 { font-size: clamp(32px, 5vw, 56px); }
.legal h2 { font-size: clamp(20px, 2.6vw, 26px); margin-top: var(--s-5); color: var(--c-a1); }
.legal__lede { font-size: 18px; opacity: 0.85; }
.legal p { opacity: 0.88; }
.legal h2::first-line { }
.legal__disclaimer {
  margin-top: var(--s-6); font-family: var(--f-display); letter-spacing: 0.05em;
  color: var(--c-a1); border: 1px solid var(--c-line); border-radius: 999px;
  padding: 8px 18px; display: inline-block;
}
.legal__back { margin-top: var(--s-4); }
.legal__back a { color: var(--c-a2); text-decoration: none; font-family: var(--f-display); letter-spacing: 0.04em; }
.legal__back a:hover { text-decoration: underline; }

/* ---------- HOW TO BOOK (numbered list) ---------- */
.numbered-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.numbered-list__row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: start; padding: var(--s-5) 0;
  border-top: 1px solid rgba(52,211,153,0.15);
}
.numbered-list__row:first-child { border-top: none; }
.numbered-list__num {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 5vw, 56px);
  line-height: 1; letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--sky-1), var(--sky-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: var(--sky-strength);
}
.numbered-list__row h3 { margin-bottom: var(--s-2); }
.numbered-list__row p { opacity: 0.85; margin: 0; }

/* ---------- REGULARS (testimonials-side-photo) ---------- */
.s-regulars {
  background:
    linear-gradient(180deg, rgba(12,18,32,0.90), rgba(12,18,32,0.95)),
    var(--c-bg-dark-2);
}
.s-regulars__inner { max-width: var(--w-container); margin-inline: auto; }
.testimonial-photo {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-6); align-items: center;
}
.testimonial-photo__media {
  margin: 0; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--c-line); position: relative;
}
.testimonial-photo__media::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2), var(--sky-1));
}
.testimonial-photo__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.testimonial-photo__media figcaption {
  font-size: 13px; padding: var(--s-2); background: var(--c-bg-dark);
  color: var(--c-ink); opacity: 0.75; letter-spacing: 0.03em;
}
.testimonial-photo__quotes { display: grid; gap: var(--s-4); }
.quote {
  margin: 0; padding: var(--s-4); position: relative;
  background: rgba(12,18,32,0.55); border: 1px solid var(--c-line);
  border-radius: var(--r-card); overflow: hidden;
}
.quote::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
  opacity: var(--sky-strength);
}
.quote p { margin: 0 0 var(--s-2); font-size: 17px; }
.quote cite {
  font-family: var(--f-display); font-style: normal; font-size: 13px;
  letter-spacing: 0.08em; color: var(--c-a1);
}

/* ---------- STATS (icon-paired cards) ---------- */
.stat-cards { text-align: center; }
.stat {
  background: var(--c-bg-dark-2); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: var(--s-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sky-1), var(--sky-2));
  transform: scaleX(0); transform-origin: left; transition: transform 650ms ease;
}
.stat.is-in::before { transform: scaleX(1); }
.stat__mark { color: var(--c-a2); font-size: 20px; line-height: 1; }
.stat__num {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1; letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--sky-1), var(--sky-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { margin: 0; font-size: 14px; opacity: 0.82; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .s-hero__inner { grid-template-columns: 1fr; }
  .s-hero__media { order: -1; }
  .s-sky__grid { grid-template-columns: 1fr; }
  .s-sky__demo { position: static; }
  .journal { grid-template-columns: 1fr; }
  .testimonial-photo { grid-template-columns: 1fr; gap: var(--s-4); }
  .testimonial-photo__media { order: -1; }
}
@media (max-width: 768px) {
  :root { --s-sec: 64px; --s-inner: 48px; }
  .nav { gap: var(--s-2); padding: 8px 12px 8px 16px; }
  .nav__badge { display: none; }
  .nav__links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; gap: var(--s-2);
    background: rgba(12,18,32,0.95); border: 1px solid var(--c-line);
    border-radius: var(--r-card); padding: var(--s-3); display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .form__row, .form__row:nth-of-type(2) { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .s-hero { padding-top: 120px; }
  .section { padding-inline: 16px; }
}

/* ===========================================================================
   REDUCED MOTION — kill all motion, keep a static frame; features still work
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .veil.is-playing .veil__ribbon--1,
  .veil.is-playing .veil__ribbon--2,
  .veil.is-playing .veil__ribbon--3 { animation: none !important; }
  .s-hero__horizon.is-in .horizon__line { animation: none !important; stroke-dashoffset: 0; }
  .btn--primary { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card::before, .plan::before, .journal__item::before, .section__head::before, .stat::before { transition: none; }
  * { scroll-behavior: auto !important; }
}


/* === adjust: fit hero in one screen (smaller h1) === */
.s-hero h1{ font-size:clamp(28px,3.1vw,44px); line-height:1.1; }
.s-hero .lede{ font-size:clamp(15px,1.3vw,18px); }