:root {
  color-scheme: dark;
  --bg: #000000;
  --text: #f7f7f2;
  --line: rgba(255, 255, 255, 0.10);
  --glow: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: #000;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, var(--glow), transparent 30%),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.025) 48%, transparent 52%);
}

body::after {
  content: "";
  position: fixed;
  inset: 28px;
  pointer-events: none;
  border: 1px solid var(--line);
}

.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  position: relative;
}

.hero {
  display: grid;
  justify-items: center;
  gap: clamp(22px, 4vh, 38px);
  transform: translateY(-1.5vh);
}

.logo {
  width: clamp(190px, 28vw, 360px);
  max-height: 42vh;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.10));
}

h1 {
  margin: 0;
  max-width: 920px;
  text-align: center;
  font-size: clamp(30px, 4.5vw, 62px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--text);
}

@media (max-width: 560px) {
  body::after { inset: 16px; }
  .logo {
    width: min(72vw, 260px);
    max-height: 40vh;
  }
  h1 { font-size: clamp(28px, 9vw, 42px); }
}