/* Visual refinement only. Existing artwork, copy, routes and status remain authoritative. */
:root { --apex-header-height: 72px; }
html { scroll-padding-top: calc(var(--apex-header-height) + 20px); }

.site-header { min-height: var(--apex-header-height); padding-block: 10px; }
.site-wordmark, .site-nav a { min-height: 48px; }

.hero {
  min-height: calc(100svh - var(--apex-header-height));
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  row-gap: 0;
  padding-block: clamp(40px, 5vw, 64px);
}
.hero > div:not(.hero-visual):not(.medallion):not(.live-lumi) {
  grid-column: 1;
  grid-row: 3;
  position: relative;
  max-width: 76rem;
}
.hero .live-lumi {
  display: block;
  position: relative;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: end;
  inset: auto;
  width: clamp(88px, 7vw, 116px);
  height: clamp(88px, 7vw, 116px);
  margin: 0 0 24px;
  padding: 2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .48), 0 0 32px rgba(232, 168, 58, .18);
}
.hero .brand {
  font-size: clamp(3.75rem, 9vw, 8.5rem);
  line-height: .98;
  width: fit-content;
  max-width: 100%;
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, .4));
}
.hero .line {
  max-width: 32ch;
  margin-top: 20px;
  line-height: 1.4;
  text-wrap: pretty;
}
.hero .support {
  max-width: 46ch;
  color: #c8c3b7;
  line-height: 1.65;
}
.hero-visual::after {
  background:
    linear-gradient(90deg, rgba(4, 4, 6, .35) 0%, transparent 58%),
    linear-gradient(0deg, #040406 0%, rgba(4, 4, 6, .84) 12%, rgba(4, 4, 6, .5) 32%, transparent 66%);
}

.hero .ctas {
  gap: 12px;
  margin-top: 30px;
  max-width: 100%;
}
.hero .ctas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  max-width: 100%;
  padding: 14px 20px;
  border: 1px solid rgba(237, 234, 227, .28);
  border-radius: 8px;
  line-height: 1.35;
  text-align: center;
  background: rgba(4, 4, 6, .46);
}
.hero .ctas a.primary:first-child {
  color: #100b03;
  background: var(--sweep);
  border-color: transparent;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .24);
  font-size: 1rem;
}
.hero .ctas a.primary:not(:first-child) {
  color: #f0c56a;
  border-color: rgba(240, 197, 106, .6);
  background: rgba(212, 168, 67, .09);
}
.hero .ctas a:focus-visible, .site-nav a:focus-visible, .site-wordmark:focus-visible {
  outline: 3px solid #f0c56a;
  outline-offset: 5px;
}
@media (hover: hover) {
  .hero .ctas a:hover { border-color: rgba(240, 197, 106, .8); color: #f0c56a; }
  .hero .ctas a.primary:first-child:hover { color: #100b03; filter: brightness(1.06); }
}

@media (min-width: 1600px) {
  .hero { padding-inline: clamp(56px, 4vw, 104px); }
  .hero .ctas { max-width: 72rem; }
}
@media (max-width: 720px) {
  :root { --apex-header-height: 124px; }
  .site-header { gap: 8px; padding-block: 10px; }
  .site-wordmark { min-height: 44px; }
  .site-nav { gap: 8px; }
  .site-nav a { min-height: 52px; padding: 10px 6px; }
  .hero {
    padding-top: 144px;
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .hero .live-lumi { width: 84px; height: 84px; margin-bottom: 20px; }
  .hero .brand { font-size: clamp(2rem, 10vw, 4.5rem); white-space: nowrap; }
  .hero .line { margin-top: 18px; font-size: 1.15rem; }
  .hero .support { font-size: .98rem; line-height: 1.6; }
  .hero .ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
  .hero .ctas a { min-height: 56px; padding: 13px 10px; font-size: .88rem; }
  .hero .ctas a:first-child, .hero .ctas a:last-child { grid-column: 1 / -1; }
  .hero-visual::after {
    background: linear-gradient(0deg, #040406 0%, rgba(4, 4, 6, .94) 42%, rgba(4, 4, 6, .45) 72%, rgba(4, 4, 6, .08) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual img, .hero .live-lumi, .hero .medallion, .hero .brand, .hero .line, .hero .support, .hero .ctas { animation: none; }
  .hero .ctas a, .site-nav a, .site-wordmark { transition: none; }
  .hero .ctas a:hover, .hero .ctas a:active, .site-nav a:hover, .site-nav a:active, .site-wordmark:hover, .site-wordmark:active { transform: none; }
}