:root {
  color-scheme: dark;
  --navy: #061627;
  --deep: #03101d;
  --gold: #ffd27d;
  --white: #f5f6fa;
  --muted: #c1cbd7;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; background: var(--navy); color: var(--white); font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif; }
a { color: inherit; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Match the exact artwork on desktop and make seven regions interactive. */
.homepage { min-height: 100svh; }
.desktop-home { min-height: 100svh; display: grid; place-items: center; background: radial-gradient(ellipse at center, #0a253c 0%, #061627 70%, #020d19 100%); }
.desktop-stage { position: relative; width: min(100vw, 150svh, 1536px); aspect-ratio: 3 / 2; line-height: 0; isolation: isolate; }
.original-artwork { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.artwork-links { position: absolute; inset: 0; pointer-events: none; }
.hotspot { position: absolute; display: block; pointer-events: auto; border-radius: 8px; outline-offset: 2px; text-decoration: none; transition: box-shadow .18s ease, background .18s ease; }
.hotspot:hover, .hotspot:focus-visible { background: rgba(255, 202, 104, 0.06); box-shadow: inset 0 0 0 2px rgba(255, 210, 125, .75), 0 0 22px rgba(255, 200, 101, .15); outline: none; }
.spot-explore { left: 75%; top: 26.5%; width: 24%; height: 8%; }
.spot-experiment { left: 75%; top: 35.6%; width: 24%; height: 10.0%; }
.spot-discover { left: 75%; top: 46.9%; width: 24%; height: 8.2%; }
.spot-apply { left: 75%; top: 56.2%; width: 24%; height: 9.8%; }
.spot-discovery { left: 34.2%; top: 90.2%; width: 14.8%; height: 5.4%; }
.spot-insight { left: 49.9%; top: 90.2%; width: 13%; height: 5.4%; }
.spot-impact { left: 63.0%; top: 90.2%; width: 11.6%; height: 5.4%; }
.mobile-home { display: none; }

/* Phone layout: same palette, photo and content, but with readable live text. */
@media (max-width: 900px), (orientation: portrait) {
  .desktop-home { display: none; }
  .mobile-home { display: block; min-height: 100svh; background: radial-gradient(circle at 80% 8%, rgba(35,70,112,.22),transparent 40%),linear-gradient(#061627 0%,#0b1e2c 67%,#071422 100%); }
  .mobile-shell { max-width: 650px; margin: 0 auto; overflow: hidden; }
  .mobile-header { position: relative; text-align: center; padding: 43px 18px 30px; background-image: linear-gradient(90deg, rgba(5,22,39,.91),rgba(5,22,39,.20)),url('assets/galaxy.webp'); background-position: center, right top; background-size: cover, 57% auto; background-repeat: no-repeat; }
  .mobile-star { font-size: 36px; line-height: .7; color: var(--gold); text-shadow: 0 0 22px #facd84; padding-bottom: 12px; }
  .mobile-brand { font-size: clamp(42px, 12vw, 67px); letter-spacing: -2.4px; font-weight: 650; line-height: 1.07; }
  .mobile-brand span { color: var(--gold); }
  .mobile-tagline { font-size: clamp(16px, 4.2vw, 21px); font-style: italic; margin: 12px 0 0; color: #fff; }
  .mobile-intro { padding: 10px 21px 0; }
  .mobile-intro h1 { font-size: clamp(28px, 7.6vw, 44px); letter-spacing: -.8px; font-weight: 450; line-height: 1.18; margin: 12px 0 22px; text-align: left; }
  .mobile-intro h1 em { color: var(--gold); font-weight: 500; }
  .mobile-photo { height: 305px; margin: 0 -21px 27px; background-image: linear-gradient(0deg, #071727 0%, rgba(7,23,39,0) 37%), url('assets/explorer-scene.webp'); background-position: center, center 53%; background-size: cover, cover; }
  .mobile-copy { border-left: 2px solid rgba(255,210,125,.8); padding-left: 17px; }
  .mobile-copy p { color: #e2e8f0; font-size: clamp(16px, 3.9vw, 18px); line-height: 1.62; margin: 0 0 16px; }
  .mobile-copy p:last-child { margin-bottom: 0; }
  .mobile-copy em { font-weight: 450; }
  .mobile-section-links { margin: 38px 19px 0; display: grid; gap: 11px; }
  .section-link { display: grid; grid-template-columns: 43px 1fr 15px; align-items: center; gap: 14px; padding: 17px 16px; border: 1px solid rgba(255,210,125,.22); border-radius: 13px; text-decoration: none; background: rgba(255,255,255,.035); transition: background .18s ease, border-color .18s ease; }
  .section-link:hover, .section-link:focus-visible { background: rgba(255,210,125,.10); border-color: var(--gold); outline: none; }
  .section-icon svg { width: 34px; height: 34px; stroke: var(--gold); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .section-link strong { display: block; font-size: 18px; font-weight: 660; letter-spacing: 1.3px; text-transform: uppercase; }
  .section-link small { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
  .link-chevron { color: var(--gold); font-size: 30px; font-weight: 200; }
  .mobile-philosophy { text-align: center; padding: 52px 14px 35px; }
  .mobile-philosophy:before { content: ""; display: block; margin: 0 auto 24px; width: 110px; height: 1px; background: linear-gradient(90deg, transparent,var(--gold),transparent); }
  .mobile-philosophy p { font-size: clamp(23px, 5.7vw, 31px); line-height: 1.3; font-style: italic; font-weight: 300; margin: 0; }
  .mobile-footer-links { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 0 10px 40px; color: var(--gold); }
  .mobile-footer-links a { color: #f2f5fa; text-transform: uppercase; font-size: clamp(10px, 3vw, 13px); letter-spacing: 2px; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 6px; }
  .mobile-footer-links a:hover, .mobile-footer-links a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); }
}

/* The one shared placeholder destination, with the clicked section identified. */
.coming-soon-page { min-height: 100svh; background: radial-gradient(ellipse at 85% 5%, rgba(52,103,155,.27),transparent 44%),linear-gradient(rgba(3,16,29,.73),rgba(3,16,29,.91)),url('assets/truthgrain-homepage.png') center / cover no-repeat fixed,var(--deep); }
.coming-shell { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: clamp(26px,4vw,48px) 18px; text-align: center; }
.coming-brand { text-decoration: none; display: inline-block; font-size: clamp(35px,5vw,50px); font-weight: 650; letter-spacing: -2px; line-height: 1.2; }
.coming-brand > span:first-child { color: var(--gold); }
.brand-star { display: inline-block; color: var(--gold); font-size: 19px; vertical-align: top; padding-left: 4px; transform: rotate(-14deg); }
.coming-panel { padding: 42px 20px; }
.coming-eyebrow { text-transform: uppercase; letter-spacing: 3px; font-weight: 550; font-size: clamp(10px,2.7vw,13px); color: var(--gold); }
.coming-eyebrow > span:first-child { color: rgba(255,255,255,.5); padding: 0 7px; }
.coming-panel h1 { margin: 14px 0 16px; font-size: clamp(46px,9vw,96px); font-weight: 350; line-height: 1.08; letter-spacing: -2px; }
.gold-period { color: var(--gold); }
.coming-panel p { margin: 0 0 38px; color: #dee6ef; font-size: clamp(17px,3vw,22px); }
.back-link { border: 1px solid rgba(255,210,125,.55); border-radius: 100px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 12px 21px; text-decoration: none; font-size: 14px; transition: background .2s ease; }
.back-link:hover, .back-link:focus-visible { background: rgba(255,210,125,.11); outline-color: var(--gold); }
.coming-tagline { color: var(--gold); opacity: .83; margin: 0; font-size: 13px; letter-spacing: 1.3px; font-style: italic; }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition: none !important; } }