/* GUST's page: the sky behind the game, dusk by default; .deep is Lumen's sea. */
body.dusk { --bg-a: #f7cfa4; --bg-b: #e08c80; --bg-c: #6b5a72; --bg-d: #24304d; --on: #2a2638; --on-soft: #5b4f63; --band: #fbf3ea; --hi: #b5566a; }
body.deep { --bg-a: #1d3a5c; --bg-b: #142a48; --bg-c: #0d1c33; --bg-d: #070f1f; --on: #e6f1ff; --on-soft: #a9c3e0; --band: #0f2038; --hi: #7fe3e6; }
body.dusk, body.deep { background: var(--band); color: var(--on); transition: background-color 0.6s ease, color 0.6s ease; }

main { overflow: hidden; }
.hero { background: linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 38%, var(--bg-c) 72%, var(--bg-d) 100%); }
.hero-in { max-width: 62rem; margin: 0 auto; padding: 56px 20px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: 40px; align-items: center; }
.hero-words { min-width: 0; }
.hero h1 { font-size: clamp(4.5rem, 16vw, 8.5rem); letter-spacing: 0.08em; font-weight: 500; line-height: 0.95; }
.kicker { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 3.6vw, 1.9rem); margin: 0.8rem 0 0; }
.verb { font-size: 1.15rem; margin: 1.2rem 0 0; max-width: 30rem; }
.verb em { font-style: normal; font-weight: 600; }
.verb.small { font-family: var(--display); font-size: 1.8rem; font-style: italic; }
body.dusk .hero .verb, body.dusk .hero .soon { color: #fbf3ea; }
.soon { display: inline-flex; align-items: center; gap: 10px; margin: 1.6rem 0 0; font-weight: 600; letter-spacing: 0.04em; }
.soon-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 12px var(--hi); }

.phone { margin: 0; justify-self: center; width: 100%; max-width: 18rem; }
.phone img { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 60px rgba(10, 12, 30, 0.45); }
.phone.small { max-width: 15rem; }

.promises { max-width: 62rem; margin: 0 auto; padding: 56px 20px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.promise h2 { font-size: 1.7rem; }
.promise p { margin: 0.6rem 0 0; color: var(--on-soft); }

.feature { max-width: 62rem; margin: 0 auto; padding: 48px 20px; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 40px; align-items: center; }
.feature.lumen { grid-template-columns: minmax(0, 1fr); max-width: 42rem; text-align: left; }
.feature-words { min-width: 0; }
.feature h2, .music h2 { font-size: clamp(2rem, 5vw, 2.6rem); }
.feature p, .music p { margin: 0.8rem 0 0; color: var(--on-soft); }
.caption { color: var(--hi); }

.look-toggle { margin-top: 1.4rem; font: 600 1rem var(--text); padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--hi); background: transparent; color: var(--on); cursor: pointer; }
.look-toggle:hover { background: var(--hi); color: var(--band); }

.music, .closing { max-width: 42rem; margin: 0 auto; padding: 32px 20px; }
.closing { padding-bottom: 72px; text-align: left; }
.closing .links { margin-top: 1.4rem; color: var(--on-soft); }
.closing a, .music a { color: var(--hi); }

@media (max-width: 720px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 40px; }
  .promises { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .phone { max-width: 15rem; justify-self: start; }
}