/* Contrast on #07111f: #dce7f4 = 15.13:1, #adbdcf = 9.88:1, #f7c95c = 12.14:1 (WCAG AA). */
:root {
  color-scheme: dark;
  --space: #07111f;
  --space-deep: #030914;
  --panel: #0e1c2c;
  --line: #29405a;
  --text: #dce7f4;
  --muted: #adbdcf;
  --gold: #f7c95c;
  --gold-soft: #c8952e;
  --focus: #fff1b8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  min-width: 0;
  overflow-x: clip;
  margin: 0;
  background-color: var(--space);
  background-image: radial-gradient(circle at 14% 22%, rgb(247 201 92 / 16%) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 9%, rgb(220 231 244 / 18%) 0 1px, transparent 1.5px), radial-gradient(circle at 39% 72%, rgb(220 231 244 / 10%) 0 1px, transparent 1.5px), linear-gradient(145deg, var(--space-deep), var(--space) 48%, #0b1726);
  background-size: 151px 173px, 223px 197px, 311px 277px, 100% 100%;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a { color: inherit; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.site-header, main, .site-footer {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.5rem;
}

.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; letter-spacing: .18em; text-decoration: none; }
.brand-mark { width: 2rem; height: 2rem; fill: none; stroke: var(--gold); stroke-width: 1.7; }
.brand-mark path { fill: var(--gold); stroke: none; }
.status { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.status span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 .22rem rgb(247 201 92 / 16%); }

.hero { padding: clamp(4.25rem, 12vw, 9rem) 0 clamp(5rem, 12vw, 9rem); max-width: 52rem; }
.eyebrow { margin: 0 0 .7rem; color: var(--gold); font-size: .78rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { color: var(--text); line-height: 1.1; }
h1 { max-width: 12ch; margin: 0; font-size: clamp(2.7rem, 8vw, 6.6rem); letter-spacing: -.055em; }
h1 em { color: var(--gold); font-style: normal; text-shadow: 0 0 2rem rgb(247 201 92 / 25%); }
.intro { max-width: 43rem; margin: 1.65rem 0 0; color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.17rem); }

.sso-control { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 2.2rem; }
button { border: 1px solid var(--gold); border-radius: .35rem; padding: .8rem 1rem; background: linear-gradient(135deg, #dba931, var(--gold)); color: #172030; cursor: not-allowed; font: inherit; font-weight: 800; }
.sso-hint { color: var(--muted); font-size: .9rem; opacity: 0; visibility: hidden; transform: translateX(-.3rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.sso-control:hover .sso-hint, button:focus + .sso-hint, button:focus-visible + .sso-hint { opacity: 1; visibility: visible; transform: translateX(0); }

.features { padding: clamp(3.75rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--line); }
.section-heading h2 { max-width: 18ch; margin: 0; font-size: clamp(2rem, 4.5vw, 3.4rem); letter-spacing: -.035em; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.feature-card { min-width: 0; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: .5rem; background: linear-gradient(145deg, rgb(14 28 44 / 86%), rgb(7 17 31 / 75%)); }
.card-number { color: var(--gold); font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.feature-card h3 { margin: 2.5rem 0 .6rem; font-size: 1.3rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .96rem; }
.site-footer { padding: 2rem 0 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.site-footer p { max-width: 52rem; margin: 0; }

/* Second, finer star layer that drifts slowly; a calm gold sheen crosses the wordmark. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgb(220 231 244 / 55%) 0 .6px, transparent 1px), radial-gradient(circle at 20% 80%, rgb(247 201 92 / 40%) 0 .7px, transparent 1.1px);
  background-size: 97px 113px, 263px 241px;
  opacity: .5;
  animation: star-drift 120s linear infinite, star-glow 9s ease-in-out infinite alternate;
}
body > * { position: relative; }

.wordmark {
  background: linear-gradient(100deg, var(--gold-soft) 0%, var(--gold) 35%, #fff4cf 50%, var(--gold) 65%, var(--gold-soft) 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold);
  -webkit-text-fill-color: transparent;
  animation: sheen 7s ease-in-out infinite;
}

@keyframes star-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 -1130px, 0 -723px; } }
@keyframes star-glow { from { opacity: .35; } to { opacity: .6; } }
@keyframes sheen { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 42rem) {
  .card-grid { grid-template-columns: 1fr; }
  .feature-card h3 { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .wordmark { background-position: 50% 0; }
}