:root {
  color-scheme: dark;
  --midnight: #071323;
  --navy: #132746;
  --ink: #0d1220;
  --gold: #d8b35c;
  --bright-gold: #f7de91;
  --deep-gold: #9b6a22;
  --white: rgba(255, 255, 255, .92);
  --secondary: rgba(255, 255, 255, .62);
  --tertiary: rgba(255, 255, 255, .4);
  --hairline: rgba(255, 255, 255, .1);
  --display: Georgia, "Times New Roman", serif;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--midnight); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--midnight); color: var(--white); }
a { color: inherit; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 max(28px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.site-header.is-scrolled { background: rgba(7, 19, 35, .9); border-color: var(--hairline); backdrop-filter: blur(14px); }
.wordmark { width: max-content; font: 700 25px/1 var(--display); text-decoration: none; }
.wordmark span, .app-wordmark span { color: var(--gold); }
.wordmark sup, .app-wordmark sup { margin-left: 2px; font: 8px/1 sans-serif; color: var(--tertiary); vertical-align: super; }
.site-header nav, footer nav { display: flex; align-items: center; gap: 30px; }
.site-header nav a, footer nav a { color: var(--secondary); font-size: 13px; text-decoration: none; }
.site-header nav a:hover, footer nav a:hover { color: var(--bright-gold); }
.nav-cta { justify-self: end; padding: 11px 15px; border: 1px solid rgba(216, 179, 92, .45); border-radius: 6px; color: var(--gold); font-size: 12px; text-decoration: none; }

.hero {
  position: relative;
  min-height: 94vh;
  max-height: 940px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
  align-items: center;
  gap: 60px;
  padding: 112px max(34px, calc((100vw - 1240px) / 2)) 76px;
  overflow: hidden;
  background: linear-gradient(150deg, #172d50 0%, var(--midnight) 62%);
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(216,179,92,.45), transparent); }
.map-field { position: absolute; inset: 0; opacity: .62; background-image: repeating-radial-gradient(ellipse at 18% 30%, transparent 0 74px, rgba(216,179,92,.035) 75px 76px), repeating-linear-gradient(87deg, transparent 0 160px, rgba(216,179,92,.025) 161px 162px); pointer-events: none; }
.route { position: absolute; width: 72vw; height: 42vw; border: 1px dashed rgba(216,179,92,.12); border-radius: 50%; transform: rotate(-19deg); }
.route-one { left: -22vw; top: 24vh; }.route-two { right: -30vw; top: -18vh; transform: rotate(24deg); }
.map-ring { position: absolute; width: 160px; aspect-ratio: 1; border: 1px solid rgba(216,179,92,.08); border-radius: 50%; box-shadow: 0 0 0 52px rgba(216,179,92,.025), 0 0 0 104px rgba(216,179,92,.018); }
.ring-one { left: 8%; top: 16%; }.ring-two { right: 8%; bottom: 8%; }
.hero-copy, .product-stage { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 20px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
h1, h2, h3, p { letter-spacing: 0; }
h1 { max-width: 720px; margin: 0; font: 500 clamp(60px, 7vw, 104px)/.98 var(--display); }
h1 em { color: var(--bright-gold); font-weight: 400; }
.hero-intro { max-width: 570px; margin: 30px 0 0; color: var(--secondary); font: 19px/1.65 var(--display); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.primary-button { min-height: 52px; display: inline-flex; align-items: center; gap: 16px; padding: 0 20px; border-radius: 6px; background: linear-gradient(145deg, var(--bright-gold), var(--gold) 55%, var(--deep-gold)); color: var(--ink); font-weight: 750; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.primary-button:hover { filter: brightness(1.08); }
.text-link { color: var(--secondary); font-size: 14px; text-underline-offset: 5px; }

.product-stage { min-height: 640px; display: grid; place-items: center; }
.compass-halo { position: absolute; width: min(47vw, 610px); aspect-ratio: 1; border: 1px solid rgba(216,179,92,.14); border-radius: 50%; box-shadow: 0 0 0 48px rgba(216,179,92,.025), 0 0 0 96px rgba(216,179,92,.02); animation: rotate 70s linear infinite; }
.compass-halo::before, .compass-halo::after { content: ""; position: absolute; inset: 50% -34px auto; height: 1px; background: rgba(216,179,92,.12); }
.compass-halo::after { transform: rotate(90deg); }
.phone { position: relative; width: 286px; height: 590px; padding: 9px; border: 1px solid rgba(247,222,145,.38); border-radius: 46px; background: #020812; box-shadow: 0 42px 100px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.07); transform: rotate(2deg); }
.phone::before { content: ""; position: absolute; z-index: 2; top: 15px; left: 50%; width: 88px; height: 24px; border-radius: 20px; background: #020812; transform: translateX(-50%); }
.phone-screen { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 18px 22px 24px; overflow: hidden; border-radius: 38px; background: linear-gradient(#172d50, var(--midnight) 65%); }
.phone-screen::before { content: ""; position: absolute; inset: 9px; border-radius: 38px; opacity: .6; background-image: repeating-radial-gradient(ellipse at 20% 30%, transparent 0 38px, rgba(216,179,92,.035) 39px 40px); pointer-events: none; }
.status { align-self: stretch; display: flex; justify-content: space-between; z-index: 3; color: rgba(255,255,255,.82); font-size: 9px; }
.compass { z-index: 1; width: 148px; height: 148px; margin-top: 70px; object-fit: contain; animation: rotate 120s linear infinite; }
.app-wordmark { z-index: 1; margin-top: 14px; font: 700 33px/1 var(--display); }
.phone-screen>p { z-index: 1; margin: 9px 0 auto; color: rgba(216,179,92,.62); font-size: 7px; letter-spacing: 2px; }
.start-tour { z-index: 1; width: 100%; min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; background: linear-gradient(145deg, var(--bright-gold), var(--gold), var(--deep-gold)); color: var(--ink); font: 600 16px var(--display); }
.location-mark { font-size: 11px; transform: rotate(45deg); }
.phone-screen small { z-index: 1; margin-top: 11px; color: var(--tertiary); font-size: 8px; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 17px; display: flex; align-items: center; gap: 9px; color: var(--tertiary); font-size: 9px; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue span { width: 1px; height: 25px; background: var(--gold); }

.story-band { padding: 140px max(34px, calc((100vw - 1240px) / 2)); background: #f2eee5; color: #172033; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; }
.section-heading .eyebrow { color: #8c661f; }
h2 { margin: 0; font: 500 clamp(45px, 5.6vw, 76px)/1.06 var(--display); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; margin-top: 100px; border-top: 1px solid rgba(13,18,32,.18); }
.step { padding-top: 24px; }
.step-number { color: #9b6a22; font: italic 16px var(--display); }
.step h3 { margin: 40px 0 14px; font: 500 29px var(--display); }
.step p { max-width: 330px; margin: 0; color: rgba(13,18,32,.67); font-size: 15px; line-height: 1.75; }

.virgil { min-height: 760px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; padding: 110px max(34px, calc((100vw - 1180px) / 2)); background: var(--ink); }
.orb-scene { position: relative; min-height: 480px; display: grid; place-items: center; }
.gold-orb { width: 92px; aspect-ratio: 1; border: 1px solid var(--bright-gold); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff6c2 0 7%, var(--bright-gold) 22%, var(--gold) 54%, var(--deep-gold)); box-shadow: inset -13px -14px 24px rgba(65,34,0,.3); animation: pulse 2.6s ease-in-out infinite; }
.orb-wave { position: absolute; width: 210px; aspect-ratio: 1; border: 1px solid rgba(216,179,92,.26); border-radius: 50%; animation: wave 2.6s ease-out infinite; }
.wave-two { animation-delay: 1.3s; }
.transcript { position: absolute; top: calc(50% + 95px); color: var(--tertiary); font: italic 16px var(--display); }
.virgil-copy>p:not(.eyebrow) { max-width: 510px; color: var(--secondary); font-size: 17px; line-height: 1.75; }
.virgil-copy .callout { margin-top: 34px; padding: 20px 0 20px 24px; border-left: 1px solid var(--gold); color: rgba(247,222,145,.78); font-family: var(--display); }

.heritage { min-height: 700px; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; padding: 110px max(34px, calc((100vw - 1240px) / 2)); overflow: hidden; background: #10213b; }
.heritage-copy>p:not(.eyebrow) { max-width: 470px; color: var(--secondary); font-size: 17px; line-height: 1.75; }
.heritage-map { position: relative; min-height: 450px; border: 1px solid rgba(216,179,92,.13); background-image: linear-gradient(rgba(216,179,92,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(216,179,92,.06) 1px, transparent 1px); background-size: 58px 58px; }
.heritage-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.heritage-map path { fill: none; stroke: rgba(216,179,92,.58); stroke-width: 2; stroke-dasharray: 5 9; }
.place { position: absolute; z-index: 2; padding-left: 22px; color: var(--white); font: 17px/1.15 var(--display); }
.place small { color: var(--gold); font: 10px sans-serif; }
.place i { position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border: 2px solid var(--gold); border-radius: 50%; background: #10213b; box-shadow: 0 0 0 6px rgba(216,179,92,.12); }
.place-one { left: 9%; top: 20%; }.place-two { left: 44%; top: 46%; }.place-three { right: 7%; bottom: 23%; }

.launch { min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 24px; text-align: center; background: linear-gradient(160deg, #172d50, var(--midnight) 66%); }
.launch img { margin-bottom: 28px; animation: rotate 120s linear infinite; }
.launch .eyebrow { margin-bottom: 18px; }
.launch h2 { font-size: clamp(48px, 6vw, 78px); }
.launch>p:not(.eyebrow) { margin: 18px 0 30px; color: var(--secondary); font: 18px var(--display); }
footer { min-height: 120px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 max(28px, calc((100vw - 1240px) / 2)); border-top: 1px solid var(--hairline); color: var(--tertiary); }
footer p { font-size: 12px; } footer nav { justify-self: end; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .84; } }
@keyframes wave { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(1.55); } }

@media (max-width: 880px) {
  .site-header { grid-template-columns: 1fr auto; padding: 0 22px; }.site-header nav { display: none; }
  .hero { min-height: auto; max-height: none; grid-template-columns: 1fr; gap: 32px; padding: 120px 24px 62px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }.hero-intro { max-width: 620px; }.product-stage { min-height: 570px; }.phone { width: 260px; height: 538px; }.scroll-cue { display: none; }
  .section-heading, .virgil, .heritage { grid-template-columns: 1fr; }.section-heading { gap: 18px; }.steps { grid-template-columns: 1fr; gap: 36px; margin-top: 70px; }.step h3 { margin-top: 18px; }
  .virgil { gap: 20px; }.heritage { gap: 55px; }.heritage-map { min-height: 390px; }
  footer { grid-template-columns: 1fr auto; padding: 28px 22px; } footer p { grid-row: 2; } footer nav { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-end; gap: 14px; }
}

@media (max-width: 520px) {
  .nav-cta { font-size: 10px; }.wordmark { font-size: 22px; }
  h1 { font-size: 54px; }.hero-intro { font-size: 17px; }.hero-actions { width: 100%; flex-direction: column; gap: 18px; }.primary-button { justify-content: center; width: 100%; }
  .product-stage { min-height: 510px; }.phone { width: 230px; height: 476px; border-radius: 38px; }.phone-screen { border-radius: 31px; }.compass { width: 120px; height: 120px; margin-top: 54px; }.app-wordmark { font-size: 29px; }.start-tour { min-height: 46px; }
  .story-band, .virgil, .heritage { padding: 90px 24px; }.orb-scene { min-height: 360px; }.heritage-map { min-height: 320px; margin-inline: -8px; }.place { font-size: 14px; }
  .launch { min-height: 560px; }.launch h2 { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}