:root {
  color-scheme: dark;
  --background: #0b0d0f;
  --surface: #141719;
  --surface-raised: #1b1f21;
  --text: #f6f7f4;
  --muted: #a6adab;
  --line: #2a3130;
  --accent: #f6821f;
}

* { box-sizing: border-box; }

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

body::before {
  position: fixed;
  z-index: -1;
  top: -18rem;
  right: -12rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  filter: blur(120px);
  opacity: .12;
}

.shell { width: min(100% - 3rem, 72rem); margin: 0 auto; padding: 2rem 0 1.5rem; }
.platform-tag { margin: 0; color: var(--muted); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.hero { position: relative; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 7rem 0 5rem; }
.signal { position: absolute; top: 5.5rem; right: 3rem; width: 7rem; height: 7rem; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 1rem var(--background), 0 0 0 1.05rem var(--line), 0 0 4rem var(--accent); opacity: .75; }
.signal::after { position: absolute; inset: 1.6rem; border-radius: 50%; background: var(--accent); content: ""; opacity: .9; }
.eyebrow { margin: 0 0 1.25rem; color: var(--accent); font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 11ch; margin: 0; font-size: clamp(4rem, 12vw, 9rem); line-height: .88; letter-spacing: -.08em; }
h1 span { color: var(--accent); }
.intro { max-width: 34rem; margin: 2.25rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; }
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 44rem; margin-top: 4rem; border-top: 1px solid var(--line); }
.details > div { padding: 1rem 1rem 0 0; }
.label { display: block; margin-bottom: .55rem; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
strong { font-size: .98rem; }
footer { padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

@media (max-width: 600px) {
  .shell { width: min(100% - 2rem, 72rem); }
  .hero { min-height: 74vh; padding: 6rem 0 4rem; }
  .signal { top: 3rem; right: 1rem; width: 4.5rem; height: 4.5rem; }
  .signal::after { inset: 1rem; }
  .details { grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
  .details > div { padding: 0; }
}