/* ==========================================================================
   Nocturne — "The Unwatched Sky"
   One continuous night: near-black zenith behind the hero, faint horizon
   glow by the footer. Gold is the only light. No third-party resources.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subset) ---------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-var-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --bg: #0a101f;
  --surface: #131c31;
  --surface-2: #182338;
  --footer-bg: #060a14;
  --zenith: #05070f;
  --text: #ecf1fb;
  --text-2: #a9b7d3;
  --gold: #e7c983;
  --gold-hover: #f0d79a;
  --blue: #8fb6e8;
  --line: #263450;
  --outline: #5f7099;
  --moon-glow: 0 0 80px 20px rgba(231, 201, 131, 0.18), 0 0 200px 80px rgba(231, 201, 131, 0.07);
  --pool: radial-gradient(60% 40% at 50% 0%, rgba(231, 201, 131, 0.07), transparent 70%);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --container: 1120px;
}

/* ---- Reset / base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, #05070f 0%, #0a101f 55%, #101a33 85%, #16233f 100%);
  background-attachment: scroll;
  overflow-x: hidden;
  min-height: 100vh;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection {
  background: rgba(231, 201, 131, 0.25);
}
button {
  font: inherit;
  cursor: pointer;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--gold);
  color: var(--zenith);
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 12px;
  text-decoration: none;
}

/* ---- Type ---------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 530;
  color: var(--text);
  letter-spacing: -0.015em;
}
h1 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.05;
  font-variation-settings: "opsz" 72;
}
h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  font-variation-settings: "opsz" 60;
}
h3 {
  font-size: 1.75rem;
  line-height: 1.2;
}
p {
  max-width: 68ch;
}
.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-2);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 16px;
}
.eyebrow .glyph {
  width: 14px;
  height: 14px;
}
.micro {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
  color: var(--text-2);
}
.footnote {
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-top: 40px;
}
.glyph {
  width: 24px;
  height: 24px;
  color: var(--gold);
}

/* ---- Layout -------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.section {
  position: relative;
  padding-block: 112px;
}
.section__head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section__head h2 {
  margin-bottom: 16px;
}

/* Horizon rule — a night horizon, never a plain <hr> */
.horizon {
  position: relative;
  height: 1px;
  background: var(--line);
  border: 0;
}
.horizon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 240px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 201, 131, 0.35), transparent);
}

/* ---- Starfields (static, box-shadow dots; density thins down-page) ------- */
.stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.stars i {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: transparent;
}
.stars .s1 {
  width: 1px;
  height: 1px;
}
.stars .s2 {
  width: 2px;
  height: 2px;
}
.stars--hero .s1 {
  box-shadow: 51.4vw 23px rgba(236,241,251,0.47), 28.5vw 70px rgba(236,241,251,0.5), 80.7vw 651px rgba(236,241,251,0.72), 69.5vw 687px rgba(236,241,251,0.79), 73.6vw 770px rgba(236,241,251,0.52), 97.3vw 452px rgba(236,241,251,0.67), 25.1vw 441px rgba(236,241,251,0.46), 32.3vw 717px rgba(236,241,251,0.69), 14.8vw 421px rgba(236,241,251,0.77), 13.6vw 168px rgba(236,241,251,0.71), 89.7vw 54px rgba(236,241,251,0.66), 4.7vw 119px rgba(236,241,251,0.56), 62.9vw 446px rgba(236,241,251,0.53), 26.3vw 641px rgba(236,241,251,0.53), 89.7vw 766px rgba(236,241,251,0.62), 39vw 592px rgba(236,241,251,0.77), 32vw 139px rgba(236,241,251,0.56), 45.8vw 192px rgba(236,241,251,0.67), 84.6vw 35px rgba(236,241,251,0.62), 41vw 247px rgba(236,241,251,0.73), 58vw 602px rgba(236,241,251,0.68), 44.5vw 28px rgba(236,241,251,0.75), 8.9vw 39px rgba(236,241,251,0.56), 82.2vw 567px rgba(236,241,251,0.79), 3vw 549px rgba(236,241,251,0.79), 43.4vw 101px rgba(236,241,251,0.76), 66.6vw 530px rgba(236,241,251,0.74), 2.1vw 532px rgba(236,241,251,0.78), 32.4vw 613px rgba(236,241,251,0.43), 51.2vw 120px rgba(236,241,251,0.68), 8.3vw 234px rgba(236,241,251,0.7), 59.9vw 553px rgba(236,241,251,0.43), 11vw 474px rgba(236,241,251,0.73), 92.5vw 808px rgba(236,241,251,0.41), 85.1vw 40px rgba(236,241,251,0.74), 87.1vw 678px rgba(236,241,251,0.73), 31.8vw 414px rgba(236,241,251,0.51), 40.2vw 379px rgba(236,241,251,0.52), 24.9vw 77px rgba(236,241,251,0.78), 96.6vw 460px rgba(236,241,251,0.69), 77.6vw 851px rgba(236,241,251,0.58), 93.8vw 380px rgba(236,241,251,0.66), 47.9vw 593px rgba(236,241,251,0.77), 31vw 600px rgba(236,241,251,0.69), 36.4vw 733px rgba(236,241,251,0.78), 46.3vw 635px rgba(236,241,251,0.79), 72.5vw 519px rgba(236,241,251,0.69), 95.4vw 362px rgba(236,241,251,0.47), 23.6vw 126px rgba(236,241,251,0.72), 61.2vw 441px rgba(236,241,251,0.64), 52.4vw 174px rgba(236,241,251,0.41), 61.4vw 355px rgba(236,241,251,0.71), 40.9vw 683px rgba(236,241,251,0.64), 93vw 767px rgba(236,241,251,0.44), 46.2vw 176px rgba(236,241,251,0.67), 49.7vw 141px rgba(236,241,251,0.66), 92.2vw 853px rgba(236,241,251,0.7), 38.4vw 733px rgba(236,241,251,0.46), 60.6vw 548px rgba(236,241,251,0.75), 22.4vw 146px rgba(236,241,251,0.57), 56.7vw 207px rgba(236,241,251,0.42), 84.3vw 54px rgba(236,241,251,0.51), 88vw 690px rgba(236,241,251,0.72), 81.7vw 678px rgba(236,241,251,0.44), 35vw 676px rgba(236,241,251,0.46), 93.5vw 176px rgba(236,241,251,0.47), 13.5vw 737px rgba(236,241,251,0.61), 81.5vw 617px rgba(236,241,251,0.51), 63vw 59px rgba(236,241,251,0.5), 18.5vw 393px rgba(236,241,251,0.6), 27vw 828px rgba(236,241,251,0.43), 73.4vw 12px rgba(236,241,251,0.56), 46.3vw 589px rgba(236,241,251,0.63), 49.6vw 674px rgba(236,241,251,0.72), 30.5vw 770px rgba(236,241,251,0.72), 48vw 607px rgba(236,241,251,0.41), 13.8vw 688px rgba(236,241,251,0.5), 57.4vw 435px rgba(236,241,251,0.54), 13.6vw 126px rgba(236,241,251,0.53), 16.1vw 642px rgba(236,241,251,0.7), 17.4vw 783px rgba(236,241,251,0.73), 28.5vw 53px rgba(236,241,251,0.44), 65.3vw 757px rgba(236,241,251,0.62), 51.8vw 808px rgba(236,241,251,0.79), 80.1vw 726px rgba(236,241,251,0.7), 44.2vw 127px rgba(236,241,251,0.41), 79.8vw 581px rgba(236,241,251,0.45), 97.2vw 357px rgba(236,241,251,0.45), 1vw 83px rgba(236,241,251,0.67), 62.9vw 849px rgba(236,241,251,0.45);
}
.stars--hero .s2 {
  box-shadow: 35.3vw 682px rgba(236,241,251,0.63), 49.7vw 286px rgba(236,241,251,0.65), 51.8vw 258px rgba(236,241,251,0.53), 3vw 307px rgba(236,241,251,0.43), 55.2vw 335px rgba(236,241,251,0.53), 42.3vw 693px rgba(236,241,251,0.72), 5.9vw 160px rgba(236,241,251,0.53), 11.2vw 305px rgba(236,241,251,0.43), 66.3vw 469px rgba(236,241,251,0.46), 27.4vw 279px rgba(236,241,251,0.5), 8.1vw 179px rgba(236,241,251,0.59), 37.8vw 767px rgba(236,241,251,0.54), 79.2vw 821px rgba(236,241,251,0.47), 25.6vw 646px rgba(236,241,251,0.65), 10.6vw 519px rgba(236,241,251,0.47), 53.6vw 254px rgba(236,241,251,0.75), 44.4vw 143px rgba(236,241,251,0.59), 97.4vw 834px rgba(236,241,251,0.67), 41.3vw 474px rgba(236,241,251,0.45), 85.3vw 66px rgba(236,241,251,0.74), 2vw 441px rgba(236,241,251,0.64), 32.3vw 796px rgba(236,241,251,0.44), 18.4vw 508px rgba(236,241,251,0.71), 40.3vw 209px rgba(236,241,251,0.69), 69.9vw 671px rgba(236,241,251,0.56), 19.6vw 725px rgba(236,241,251,0.65), 27vw 323px rgba(236,241,251,0.76), 56.3vw 1px rgba(236,241,251,0.47), 49.3vw 601px rgba(236,241,251,0.58), 11.6vw 426px rgba(236,241,251,0.73), 79.4vw 38px rgba(236,241,251,0.73), 88.7vw 465px rgba(236,241,251,0.56), 62.3vw 823px rgba(236,241,251,0.45), 25vw 788px rgba(236,241,251,0.49), 95.9vw 485px rgba(236,241,251,0.47), 2.5vw 421px rgba(236,241,251,0.49), 16.6vw 490px rgba(236,241,251,0.66), 2.1vw 79px rgba(236,241,251,0.52);
  animation: twinkle 7s ease-in-out infinite alternate;
}
.stars--mid .s1 {
  box-shadow: 44.2vw 259px rgba(236,241,251,0.45), 71.4vw 645px rgba(236,241,251,0.45), 54.6vw 560px rgba(236,241,251,0.76), 42.6vw 505px rgba(236,241,251,0.46), 21.1vw 160px rgba(236,241,251,0.78), 35.4vw 402px rgba(236,241,251,0.42), 11.2vw 233px rgba(236,241,251,0.74), 94.9vw 266px rgba(236,241,251,0.78), 5.1vw 155px rgba(236,241,251,0.68), 23.5vw 630px rgba(236,241,251,0.56), 75.1vw 116px rgba(236,241,251,0.54), 15.7vw 450px rgba(236,241,251,0.73), 65.3vw 489px rgba(236,241,251,0.43), 54.4vw 365px rgba(236,241,251,0.62), 96.1vw 25px rgba(236,241,251,0.54), 86.3vw 4px rgba(236,241,251,0.79), 22.9vw 559px rgba(236,241,251,0.5), 59.6vw 561px rgba(236,241,251,0.52), 6.6vw 663px rgba(236,241,251,0.69), 11.5vw 422px rgba(236,241,251,0.79), 3.1vw 633px rgba(236,241,251,0.57), 43.5vw 233px rgba(236,241,251,0.63), 48.3vw 691px rgba(236,241,251,0.41), 2vw 253px rgba(236,241,251,0.73), 61.9vw 531px rgba(236,241,251,0.76), 71.4vw 461px rgba(236,241,251,0.78), 77.2vw 595px rgba(236,241,251,0.75), 52vw 311px rgba(236,241,251,0.78), 77.5vw 101px rgba(236,241,251,0.73), 23.5vw 80px rgba(236,241,251,0.6), 12.1vw 33px rgba(236,241,251,0.51), 86.2vw 195px rgba(236,241,251,0.6), 26.7vw 439px rgba(236,241,251,0.59), 76.5vw 491px rgba(236,241,251,0.63), 93vw 453px rgba(236,241,251,0.59), 22.6vw 139px rgba(236,241,251,0.45), 18.3vw 645px rgba(236,241,251,0.6), 31.2vw 339px rgba(236,241,251,0.71), 98.5vw 268px rgba(236,241,251,0.67), 58.1vw 375px rgba(236,241,251,0.63);
}
.stars--pricing .s1 {
  box-shadow: 89.4vw 158px rgba(236,241,251,0.48), 21.2vw 88px rgba(236,241,251,0.65), 96.7vw 169px rgba(236,241,251,0.47), 44.4vw 542px rgba(236,241,251,0.57), 61.2vw 75px rgba(236,241,251,0.76), 71.3vw 413px rgba(236,241,251,0.56), 78.5vw 551px rgba(236,241,251,0.41), 65.3vw 571px rgba(236,241,251,0.73), 38.5vw 238px rgba(236,241,251,0.48), 67.7vw 590px rgba(236,241,251,0.56), 97.4vw 554px rgba(236,241,251,0.42), 21.2vw 219px rgba(236,241,251,0.73), 92.2vw 554px rgba(236,241,251,0.58), 12.3vw 251px rgba(236,241,251,0.66), 47.7vw 332px rgba(236,241,251,0.52);
}
.stars--nightcap .s1 {
  box-shadow: 65.4vw 410px rgba(236,241,251,0.5), 46.7vw 58px rgba(236,241,251,0.55), 75vw 67px rgba(236,241,251,0.44), 6.5vw 445px rgba(236,241,251,0.61), 14.9vw 385px rgba(236,241,251,0.5), 68.7vw 458px rgba(236,241,251,0.54), 86.2vw 189px rgba(236,241,251,0.6), 85vw 341px rgba(236,241,251,0.65), 80.5vw 10px rgba(236,241,251,0.43), 94.1vw 405px rgba(236,241,251,0.73), 10.9vw 124px rgba(236,241,251,0.56), 38.2vw 131px rgba(236,241,251,0.53), 28.1vw 394px rgba(236,241,251,0.7), 95.7vw 320px rgba(236,241,251,0.71), 15.1vw 288px rgba(236,241,251,0.5), 76.6vw 97px rgba(236,241,251,0.78), 38.9vw 474px rgba(236,241,251,0.43), 48.4vw 254px rgba(236,241,251,0.6), 48.5vw 180px rgba(236,241,251,0.46), 88vw 314px rgba(236,241,251,0.49), 44.8vw 44px rgba(236,241,251,0.44), 12.1vw 344px rgba(236,241,251,0.79), 10.4vw 277px rgba(236,241,251,0.52), 8.9vw 306px rgba(236,241,251,0.48);
}
@keyframes twinkle {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.9;
  }
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #f0d79a 0%, #e7c983 55%, #ddb96a 100%);
  color: var(--zenith);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  font-feature-settings: "tnum";
  box-shadow: 0 4px 20px rgba(231, 201, 131, 0.18);
}
.btn:hover {
  background: linear-gradient(180deg, #f6e2b0 0%, #f0d79a 55%, #e7c983 100%);
  box-shadow: 0 6px 28px rgba(231, 201, 131, 0.3);
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}
.btn--ghost {
  background: transparent;
  border-color: var(--outline);
  color: var(--text);
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(231, 201, 131, 0.06);
  border-color: var(--gold);
  color: var(--text);
  box-shadow: none;
}
.btn[disabled],
.btn.is-disabled {
  box-shadow: none;
}
.btn[disabled],
.btn.is-disabled {
  background: var(--line);
  color: var(--text-2);
  cursor: not-allowed;
  pointer-events: none;
}
.btn--small {
  padding: 10px 20px;
  font-size: 0.875rem;
}

/* ---- Telemetry pills ----------------------------------------------------- */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: rgba(19, 28, 49, 0.6);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  white-space: nowrap;
}
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 1px rgba(231, 201, 131, 0.6);
}

/* ---- Nav ----------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 7, 15, 0.9);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(12px)) {
  .nav {
    background: rgba(5, 7, 15, 0.72);
    backdrop-filter: blur(12px);
  }
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--text);
}
.nav__brand:hover {
  text-decoration: none;
}
.nav__brand .glyph {
  width: 22px;
  height: 22px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav__links a {
  position: relative;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9375rem;
  padding-block: 6px;
}
.nav__links a:hover {
  text-decoration: none;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: scaleX(1);
}
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  color: var(--text);
}
.nav__toggle svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 860px) {
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__toggle {
    display: inline-flex;
  }
  body.menu-open {
    overflow: hidden;
  }
  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 48;
    background: linear-gradient(180deg, #05070f 0%, #0a101f 100%);
    display: none;
    padding: 100px 24px 40px;
  }
  body.menu-open .nav-overlay {
    display: block;
  }
  .nav-overlay ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nav-overlay a {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text);
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-overlay .btn {
    margin-top: 28px;
  }
}
@media (min-width: 861px) {
  .nav-overlay {
    display: none !important;
  }
}

/* ---- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #05070f 0%, #0a101f 70%, #101a33 100%);
  padding-block: 96px 140px;
}
.hero::before {
  /* aurora: deep indigo + violet pools, one warm pool near the moon */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(42% 50% at 76% 24%, rgba(231, 201, 131, 0.09), transparent 65%),
    radial-gradient(55% 60% at 10% 82%, rgba(74, 92, 154, 0.22), transparent 70%),
    radial-gradient(40% 45% at 42% 8%, rgba(96, 78, 158, 0.15), transparent 70%);
  pointer-events: none;
}
.hero::after {
  /* faint engineering dot grid, fading out toward the sky */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(169, 183, 211, 0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(62% 58% at 20% 72%, #000, transparent 78%);
  mask-image: radial-gradient(62% 58% at 20% 72%, #000, transparent 78%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 3;
  max-width: 640px;
}
.hero__content h1 {
  margin: 24px 0 20px;
  color: #ecf1fb;
  background: linear-gradient(115deg, #f5f8ff 0%, #dce6f8 45%, #e7c983 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__content .lead {
  margin-bottom: 32px;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.hero__trust {
  font-size: 0.875rem;
  color: var(--text-2);
}
.hero__readout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  font-feature-settings: "tnum";
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  background: rgba(19, 28, 49, 0.55);
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px 1px rgba(231, 201, 131, 0.7);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* The moon — the page's only light source */
.moon-wrap {
  position: absolute;
  z-index: 1;
  left: 70%;
  top: 15%;
  width: 300px;
  height: 300px;
}
.moon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 30%, #fbf8ef 0%, #ece8d9 38%, #d9d5c4 62%, #bcb8a8 88%, #a8a495 100%);
  box-shadow:
    inset -18px -14px 44px rgba(40, 44, 60, 0.35),
    0 0 60px 12px rgba(231, 201, 131, 0.22),
    0 0 160px 60px rgba(231, 201, 131, 0.08);
}
.moon::before {
  /* maria and craters, soft-edged */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 58%, rgba(97, 94, 78, 0.2) 0 8%, transparent 10%),
    radial-gradient(circle at 63% 28%, rgba(97, 94, 78, 0.15) 0 6%, transparent 8%),
    radial-gradient(circle at 52% 74%, rgba(97, 94, 78, 0.13) 0 5%, transparent 7%),
    radial-gradient(circle at 72% 60%, rgba(97, 94, 78, 0.11) 0 7%, transparent 9%),
    radial-gradient(circle at 42% 38%, rgba(97, 94, 78, 0.09) 0 10%, transparent 12%),
    radial-gradient(circle at 24% 26%, rgba(97, 94, 78, 0.07) 0 6%, transparent 8%);
}
.moon-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 160%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(231, 201, 131, 0.12);
  border-radius: 50%;
}

/* horizon ridge at the hero's foot */
.hero__horizon {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 14%;
  min-height: 90px;
  color: #05070f;
}

/* scroll cue */
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28px;
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--text-2), transparent);
  animation: descend 3s ease-in-out infinite;
}
@keyframes descend {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .hero {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 40px;
  }
  .moon-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: 160px;
    height: 160px;
    margin: 32px auto 8px;
    flex: none;
  }
}

/* ---- Zero Strip ----------------------------------------------------------- */
.zero-strip {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.zero-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-block: 48px;
}
.zero-strip__item {
  position: relative;
  text-align: center;
}
.zero-strip__item + .zero-strip__item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}
.zero-strip__figure {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 2.25rem;
  line-height: 1.1;
  font-feature-settings: "tnum";
}
.zero-strip__figure.is-gold {
  color: var(--gold);
}
.zero-strip__label {
  font-size: 0.9375rem;
  color: var(--text-2);
  margin-top: 4px;
}
@media (max-width: 700px) {
  .zero-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }
  .zero-strip__item:nth-child(3)::before {
    display: none;
  }
}

/* ---- The Pledge ------------------------------------------------------------ */
.chart-panel {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #16213a 0%, #121b2f 100%) padding-box,
    linear-gradient(160deg, rgba(231, 201, 131, 0.28) 0%, rgba(143, 182, 232, 0.14) 45%, rgba(38, 52, 80, 1) 80%) border-box;
  border-radius: var(--radius);
  padding: 32px;
  margin-block: 48px;
}
.chart-panel line[stroke="#e7c983"] {
  filter: drop-shadow(0 0 5px rgba(231, 201, 131, 0.7));
}
.chart-panel h3 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: 20px;
}
.chart-panel svg {
  width: 100%;
  height: auto;
}
.chart-annotation {
  font-feature-settings: "tnum";
  font-size: 0.9375rem;
  color: var(--gold);
  margin-top: 16px;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 18px;
  font-size: 0.8125rem;
  color: var(--text-2);
}
.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chart-legend__item i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

/* ---- Per-product versus cards ---------------------------------------------- */
.vs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-block: 48px;
}
.vs-card {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #16213a 0%, #121b2f 100%) padding-box,
    linear-gradient(165deg, rgba(143, 182, 232, 0.18) 0%, rgba(38, 52, 80, 1) 65%) border-box;
  border-radius: var(--radius);
  padding: 28px;
}
.vs-card__product {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 530;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 18px;
}
.vs-card__product .glyph {
  width: 22px;
  height: 22px;
  flex: none;
}
.vs-card__blocks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 18px;
}
.vs-card__block {
  border-radius: 10px;
  padding: 14px;
  border: 1px solid transparent;
}
.vs-card__block--rent {
  background: rgba(94, 151, 224, 0.07);
  border-color: rgba(94, 151, 224, 0.32);
}
.vs-card__block--own {
  background: rgba(231, 201, 131, 0.08);
  border-color: rgba(231, 201, 131, 0.45);
}
.vs-badge {
  align-self: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: var(--bg);
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vs-card__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: 6px;
}
.vs-card__block--own .vs-card__tag {
  color: var(--gold);
}
.vs-card__price {
  font-family: var(--font-display);
  font-weight: 560;
  font-feature-settings: "tnum";
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  line-height: 1.2;
  color: var(--text);
}
.vs-card__block--own .vs-card__price {
  color: var(--gold);
}
.vs-card__price span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--text-2);
}
.vs-card__note {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-top: 4px;
}
.vs-card__kicker {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
}
@media (max-width: 960px) {
  .vs-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
}

/* ---- Rent vs. Own comparison ledger ---------------------------------------- */
.cmp {
  max-width: 720px;
  margin: 56px auto 0;
  border-top: 1px solid var(--line);
}
.cmp__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 16px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.cmp__row span {
  text-align: right;
  font-feature-settings: "tnum";
  color: var(--text);
}
.cmp__row span:first-child {
  text-align: left;
  color: var(--text-2);
}
.cmp__row--head {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cmp__row--head span {
  color: var(--blue);
}
.cmp__row--total {
  border-top: 1px solid var(--outline);
  font-weight: 600;
  font-size: 1.0625rem;
}
.cmp__row--total span:first-child {
  color: var(--text);
}
.cmp .is-gold {
  color: var(--gold);
}
.big-total {
  margin: 56px auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 530;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.4;
  color: var(--text-2);
  max-width: 760px;
}
.big-total strong {
  color: var(--text);
  font-weight: 560;
  font-feature-settings: "tnum";
}
.big-total .is-gold {
  color: var(--gold);
}

.ledger {
  margin-block: 48px;
  border-top: 1px solid var(--line);
}
.ledger__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}
.ledger__row.is-head {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.ledger__row dt {
  color: var(--text);
}
.ledger__row dd {
  color: var(--text-2);
}
@media (max-width: 600px) {
  .ledger__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.proof-card {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #16213a 0%, #121b2f 100%) padding-box,
    linear-gradient(165deg, rgba(231, 201, 131, 0.22) 0%, rgba(38, 52, 80, 1) 65%) border-box;
  border-radius: var(--radius);
  padding: 24px;
}
.proof-card .check {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  color: var(--gold);
}
.proof-card h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.proof-card p {
  font-size: 0.9375rem;
  color: var(--text-2);
}
@media (max-width: 960px) {
  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }
}
.pledge__closing {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  text-align: center;
  margin-top: 64px;
  color: var(--text);
}

/* ---- Trio cards ------------------------------------------------------------ */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #16213a 0%, #121b2f 100%) padding-box,
    linear-gradient(160deg, rgba(231, 201, 131, 0.28) 0%, rgba(143, 182, 232, 0.14) 40%, rgba(38, 52, 80, 1) 78%) border-box;
  border-radius: var(--radius);
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.card::before {
  /* moonlight pool, revealed on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pool);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.card::after {
  /* corner stars */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow: -26px 30px rgba(236, 241, 251, 0.3), -58px 18px rgba(236, 241, 251, 0.3), -14px 52px rgba(236, 241, 251, 0.3), -80px 44px rgba(236, 241, 251, 0.3);
}
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}
.card:hover::before,
.card:focus-within::before {
  opacity: 1;
}
.card > * {
  position: relative;
}
.card .glyph {
  width: 28px;
  height: 28px;
  opacity: 0.85;
  margin-bottom: 20px;
}
.card h3 {
  margin-bottom: 2px;
}
.card .with {
  font-size: 0.9375rem;
  color: var(--text-2);
  margin-bottom: 16px;
}
.card .promise {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 24px;
}
.card ul {
  list-style: none;
  margin: 24px 0;
  display: grid;
  gap: 10px;
}
.card ul li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.card ul .glyph {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin: 0;
  transform: translateY(0.5px);
}
.card .more {
  font-size: 0.9375rem;
}
@media (max-width: 960px) {
  .trio {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
}

/* ---- Mini UI vignettes ------------------------------------------------------ */
.vignette {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  min-height: 120px;
}
.skel {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  margin-bottom: 8px;
}
.skel.w60 { width: 60%; }
.skel.w80 { width: 80%; }
.skel.w90 { width: 90%; }
.skel.w70 { width: 70%; }
.skel-hl {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(231, 201, 131, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 0 -8px 8px;
}
.skel-hl .skel {
  margin: 0;
  flex: 1;
  background: rgba(231, 201, 131, 0.35);
}
.chip {
  flex: none;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid rgba(231, 201, 131, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
  margin-top: 14px;
  color: var(--gold);
}
.wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.85;
}
.card:hover .wave i,
.card:focus-within .wave i {
  animation: wavepulse 1.2s ease-in-out infinite alternate;
}
.wave i:nth-child(3n) { animation-delay: 0.15s; }
.wave i:nth-child(3n + 1) { animation-delay: 0.3s; }
@keyframes wavepulse {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.55); }
}
.vignette .faux-field {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  font-size: 0.9375rem;
  color: var(--text);
  min-height: 78px;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--text);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
.vg-mic {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--text-2);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vg-mic .glyph {
  width: 16px;
  height: 16px;
  margin: 0;
}
.diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.diff__col {
  display: grid;
  gap: 7px;
}
.diff__col .skel {
  margin: 0;
  height: 7px;
}
.diff__col .skel.is-changed {
  background: rgba(231, 201, 131, 0.45);
}
.diff__arrow {
  color: var(--gold);
  width: 18px;
  height: 18px;
}

/* ---- By Moonlight (spotlight rows) ------------------------------------------ */
.moonrow {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  padding-block: 56px;
}
.moonrow:nth-of-type(even) .moonrow__visual {
  order: -1;
}
.moonrow h2,
.moonrow h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 16px;
}
.moonrow p {
  color: var(--text-2);
  margin-bottom: 14px;
}
.moonrow .privacy-line {
  color: var(--text-2);
  font-size: 0.9375rem;
  border-left: 2px solid var(--gold);
  padding-left: 14px;
  margin-top: 24px;
  font-style: italic;
}
.window {
  position: relative;
  background: linear-gradient(180deg, #1b2743 0%, #182338 55%);
  border: 1px solid var(--line);
  border-top-color: #33456b;
  border-radius: 12px;
  padding: 44px 24px 24px;
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.5);
}
.window::before {
  /* window chrome dots */
  content: "";
  position: absolute;
  top: 17px;
  left: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(169, 183, 211, 0.35);
  box-shadow: 15px 0 rgba(169, 183, 211, 0.22), 30px 0 rgba(169, 183, 211, 0.13);
}
.caption {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-top: 14px;
  text-align: center;
}
.speaker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.speaker .chip {
  font-size: 0.6875rem;
}
.speaker .wave {
  height: 18px;
  margin: 0;
  width: 90px;
  flex: none;
}
.speaker .wave i {
  min-width: 3px;
}
.mic-halo {
  position: relative;
  width: 44px;
  height: 44px;
  margin-top: 16px;
  color: var(--gold);
}
.mic-halo::before,
.mic-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(231, 201, 131, 0.35);
  border-radius: 50%;
  animation: haloring 2.4s ease-out infinite;
}
.mic-halo::after {
  animation-delay: 1.2s;
}
@keyframes haloring {
  from {
    transform: scale(0.6);
    opacity: 0.9;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
.mic-halo .glyph {
  position: absolute;
  inset: 25%;
  width: 50%;
  height: 50%;
  margin: 0;
}
.minidocs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
}
.minidoc {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 7px;
}
.minidoc .skel {
  margin: 0;
  height: 6px;
}
@media (max-width: 860px) {
  .moonrow {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .moonrow:nth-of-type(even) .moonrow__visual {
    order: 0;
  }
}

/* ---- On Your Machine --------------------------------------------------------- */
.machine {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.steps {
  list-style: none;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--line);
}
.steps li {
  position: relative;
  padding: 0 0 36px 52px;
}
.steps li:last-child {
  padding-bottom: 0;
}
.steps .glyph {
  position: absolute;
  left: 0;
  top: 2px;
  width: 27px;
  height: 27px;
  background: var(--bg);
  border-radius: 50%;
}
.steps h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.steps p {
  color: var(--text-2);
  font-size: 0.9843rem;
}
.machine__diagram svg {
  width: 100%;
  height: auto;
}
.spec-row {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
@media (max-width: 860px) {
  .machine {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ---- Pricing — Your Constellation --------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
  position: relative;
}
.picker {
  position: relative;
  display: grid;
  gap: 16px;
}
.constellation {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.constellation line {
  stroke: rgba(143, 182, 232, 0.45);
  stroke-width: 1;
}
.constellation circle {
  fill: rgba(143, 182, 232, 0.7);
}
.pick {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 64px 24px 24px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.pick::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pool);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.pick > * {
  position: relative;
}
.pick:hover {
  border-color: var(--outline);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
}
.pick .pick__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
}
.pick .glyph {
  width: 26px;
  height: 26px;
  opacity: 0.85;
}
.pick .pick__name {
  font-family: var(--font-display);
  font-weight: 530;
  letter-spacing: -0.015em;
  color: var(--text);
  font-size: 1.375rem;
  line-height: 1.2;
}
.pick .pick__name span {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-2);
  margin-left: 6px;
}
.pick .pick__price {
  margin-left: auto;
  font-feature-settings: "tnum";
  font-size: 0.875rem;
  color: var(--gold);
  white-space: nowrap;
}
.pick .pick__desc {
  display: block;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.pickerset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.pick__indicator {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--outline);
  border-radius: 50%;
  transition: border-color 0.15s ease;
}
.pick__indicator svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--zenith);
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s ease;
  padding: 4px;
}
.pick.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(231, 201, 131, 0.35), 0 10px 40px rgba(231, 201, 131, 0.1);
}
.pick.is-selected::before {
  opacity: 1;
}
.pick.is-selected .pick__indicator {
  border-color: var(--gold);
}
.pick.is-selected .pick__indicator svg {
  opacity: 1;
}
.pick input:focus-visible ~ .pick__indicator {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.summary {
  position: sticky;
  top: 92px;
  border: 1px solid transparent;
  background:
    var(--pool) padding-box,
    linear-gradient(180deg, #1b2742 0%, #182338 100%) padding-box,
    linear-gradient(160deg, rgba(231, 201, 131, 0.4) 0%, rgba(143, 182, 232, 0.16) 45%, rgba(38, 52, 80, 1) 80%) border-box;
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.summary__moon {
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  color: var(--gold);
}
.summary__moon svg {
  width: 100%;
  height: 100%;
}
.summary__moon.is-full svg {
  filter: drop-shadow(0 0 18px rgba(231, 201, 131, 0.45));
}
.summary__phase-label {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  min-height: 1.4em;
  margin-bottom: 20px;
}
.summary__items {
  list-style: none;
  text-align: left;
  margin-bottom: 20px;
  border-top: 1px solid var(--line);
}
.summary__items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--text-2);
}
.summary__items li span:last-child {
  font-feature-settings: "tnum";
  color: var(--text);
}
.summary__total {
  font-family: var(--font-display);
  font-weight: 530;
  font-size: 2.5rem;
  font-feature-settings: "tnum";
  line-height: 1.1;
  color: var(--text);
}
.summary__strike {
  font-feature-settings: "tnum";
  color: var(--text-2);
  font-size: 0.9375rem;
  min-height: 1.5em;
}
.summary__strike s {
  margin-right: 8px;
}
.summary__terms {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin: 16px 0 20px;
}
.summary .btn {
  width: 100%;
}
.pricing__footnote {
  margin-top: 48px;
}
@media (max-width: 960px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .summary {
    position: static;
  }
}

/* mobile sticky price bar */
.price-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: rgba(5, 7, 15, 0.92);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s 0.3s;
}
@supports (backdrop-filter: blur(12px)) {
  .price-bar {
    background: rgba(5, 7, 15, 0.8);
    backdrop-filter: blur(12px);
  }
}
.price-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}
body.menu-open .price-bar {
  display: none;
}
.price-bar__total {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-feature-settings: "tnum";
}
.price-bar__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
@media (max-width: 960px) {
  .price-bar {
    display: flex;
  }
}

/* ---- FAQ ----------------------------------------------------------------------- */
.faq {
  max-width: 780px;
  margin-inline: auto;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .glyph {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
.faq summary .glyph--open {
  display: none;
}
.faq details[open] summary .glyph--closed {
  display: none;
}
.faq details[open] summary .glyph--open {
  display: block;
}
.faq details p {
  padding: 0 24px 22px 54px;
  color: var(--text-2);
  max-width: none;
}

/* ---- Nightcap -------------------------------------------------------------------- */
.nightcap {
  position: relative;
  text-align: center;
  padding-block: 140px;
  overflow: hidden;
}
.nightcap .moon-wrap {
  position: relative;
  left: auto;
  top: auto;
  width: 180px;
  height: 180px;
  margin: 0 auto 48px;
}
.nightcap h2 {
  max-width: 640px;
  margin: 0 auto 32px;
  color: #ecf1fb;
  background: linear-gradient(115deg, #f5f8ff 0%, #dce6f8 50%, #e7c983 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nightcap .btn {
  margin-bottom: 28px;
}
.nightcap .pills {
  justify-content: center;
  margin-bottom: 20px;
}
.nightcap__trust {
  font-size: 0.875rem;
  color: var(--text-2);
}

/* ---- Footer — The Colophon -------------------------------------------------------- */
.footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--line);
  padding: 72px 0 32px;
  color: var(--text-2);
  font-size: 0.9375rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer__brand .nav__brand {
  margin-bottom: 12px;
}
.footer h3 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  margin-bottom: 18px;
}
.footer ul {
  list-style: none;
  display: grid;
  gap: 12px;
}
.footer a {
  color: var(--text-2);
}
.footer a:hover {
  color: var(--text);
}
.footer .sub {
  display: block;
  font-size: 0.75rem;
  font-feature-settings: "tnum";
  letter-spacing: 0.06em;
  color: #8a9bc0; /* 4.5:1+ on the #060a14 footer at 12px */
  margin-top: 2px;
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.phase-strip {
  display: flex;
  gap: 10px;
  color: var(--gold);
  opacity: 0.7;
}
.phase-strip svg {
  width: 10px;
  height: 10px;
}
@media (max-width: 860px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ---- Product pages ------------------------------------------------------------------ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #05070f 0%, #0a101f 80%, #0e1729 100%);
  padding-block: 120px 96px;
  text-align: left;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(45% 55% at 82% 20%, rgba(231, 201, 131, 0.08), transparent 65%),
    radial-gradient(50% 60% at 8% 90%, rgba(74, 92, 154, 0.2), transparent 70%);
  pointer-events: none;
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero .glyph--product {
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
}
.page-hero .eyebrow {
  margin-bottom: 8px;
}
.page-hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  max-width: 720px;
  margin-bottom: 20px;
  color: #ecf1fb;
  background: linear-gradient(115deg, #f5f8ff 0%, #dce6f8 45%, #e7c983 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero .lead {
  max-width: 620px;
  margin-bottom: 32px;
}
.page-hero .pills {
  margin-bottom: 36px;
}
.cta-band {
  text-align: center;
  padding-block: 96px;
}
.cta-band h2 {
  margin-bottom: 12px;
}
.cta-band .price-note {
  color: var(--text-2);
  margin: 0 auto 32px;
}
.cta-band .price-note strong {
  color: var(--gold);
  font-feature-settings: "tnum";
  font-weight: 600;
}

/* ---- Cookie / analytics consent bar --------------------------------------------------- */
.cookie-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  max-width: 720px;
  margin-inline: auto;
  background: rgba(10, 16, 31, 0.97);
  border: 1px solid var(--outline);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.cookie-bar p {
  font-size: 0.875rem;
  color: var(--text-2);
  max-width: 48ch;
}
.cookie-bar__actions {
  display: flex;
  gap: 10px;
}

/* ---- Reveal on scroll ---------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Reduced motion ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .scroll-cue {
    display: none;
  }
  .card:hover,
  .card:focus-within {
    transform: none;
  }
}