/* Stratios — single above-the-fold page. Tokens live in tokens.css. */

html, body { margin: 0; height: 100%; }
body {
  background: var(--basalt); color: var(--cloud); font-family: var(--font-display);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--gold); color: var(--basalt); }

.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden;
  display: flex; flex-direction: column;
}

/* faint grid behind the wordmark */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}

/* the six strata bands along the bottom, rising in on load */
.strata { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; height: max(18vh, 120px); }
.strata > div { flex: 1; animation: rise 900ms var(--ease-out) both; }
.strata > :nth-child(1) { background: var(--strata-6); opacity: .9; animation-delay: 300ms; }
.strata > :nth-child(2) { background: var(--strata-5); animation-delay: 390ms; }
.strata > :nth-child(3) { background: var(--strata-4); animation-delay: 480ms; }
.strata > :nth-child(4) { background: var(--strata-3); animation-delay: 570ms; }
.strata > :nth-child(5) { background: var(--strata-2); animation-delay: 660ms; }
.strata > :nth-child(6) { background: var(--strata-1); animation-delay: 750ms; }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* centred on the full viewport (the bands are short enough to stay clear of it) */
.brand {
  position: absolute; inset: 0; z-index: 1; box-sizing: border-box;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: clamp(16px, 2.4vw, 28px);
}
.wordmark {
  margin: 0; font-stretch: 125%; font-weight: 600; text-transform: uppercase; line-height: 1;
  font-size: clamp(44px, 9vw, 144px);
  /* tracking adds trailing space after the last letter; pull it back so the word sits truly centred */
  letter-spacing: var(--tr-wordmark); margin-right: calc(-1 * var(--tr-wordmark));
  animation: fade 900ms var(--ease-out) 150ms both;
}
.tagline {
  margin: 0; font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; color: var(--gold);
  font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .42em; margin-right: -.42em;
  animation: fade 900ms var(--ease-out) 350ms both;
}
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .strata > div, .wordmark, .tagline { animation: none; }
}

/* ---------- top bar ---------- */
.topbar {
  position: relative; z-index: 2; height: 72px; flex: none; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter);
  animation: fade 900ms var(--ease-out) 150ms both;
}
.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--cloud); text-decoration: none; }
.logo-mark { width: 26px; height: 26px; display: block; flex: none; }
.logo-word {
  font-stretch: 125%; font-weight: 600; font-size: 22px; line-height: .86; text-transform: uppercase;
  letter-spacing: var(--tr-wordmark); margin-right: calc(-1 * var(--tr-wordmark)); white-space: nowrap;
}
.cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--cloud); color: var(--basalt); border: 1px solid var(--cloud);
  font-size: 14px; font-weight: 500; letter-spacing: -.005em; line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: background 140ms var(--ease-out);
}
.cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 260ms var(--ease-out); }
.cta:hover { background: var(--paper); }
.nav { display: inline-flex; align-items: center; gap: 24px; }
.nav-link {
  color: var(--cloud); font-size: 14px; font-weight: 500; letter-spacing: -.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; padding: 10px 0; border-bottom: 1px solid transparent;
  transition: border-color 140ms var(--ease-out);
}
.nav-link:hover { border-bottom-color: var(--gold); }
.cta:hover svg { transform: translateX(3px); }
.cta--back:hover svg { transform: translateX(-3px); }
.cta:active { transform: translateY(1px); }
.logo:focus-visible, .cta:focus-visible, .nav-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
@media (max-width: 520px) {
  .topbar { gap: 16px; }
  .logo { gap: 9px; }
  .logo-mark { width: 20px; height: 20px; }
  .logo-word { font-size: 16px; }
  .nav { gap: 16px; }
  .nav-link { font-size: 13px; }
  .cta { padding: 9px 12px; gap: 8px; font-size: 13px; }
  .cta svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { .topbar { animation: none; } }
@media (max-width: 400px) { .topbar { gap: 12px; } .nav { gap: 14px; } .logo-word { font-size: 14px; } .cta { padding: 9px 10px; } .cta svg { display: none; } }
@media (max-width: 350px) { .logo-word { display: none; } }

/* ---------- secondary pages (request-access) ---------- */
.wordmark--page { font-size: clamp(36px, 7vw, 112px); }