:root { --bg: #0b0b11; --white: #f1f0eb; --acid: #cbff47; --violet: #7857ff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { overflow: hidden; background: var(--bg); color: var(--white); font-family: "Space Grotesk", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; opacity: .15; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.glow { position: fixed; border-radius: 50%; filter: blur(110px); opacity: .26; pointer-events: none; }
.glow-one { width: 36vw; height: 36vw; background: var(--violet); right: -8vw; top: -13vw; }
.glow-two { width: 22vw; height: 22vw; background: var(--acid); left: 20vw; bottom: -17vw; opacity: .12; }
main { min-height: 100vh; max-width: 1600px; margin: auto; padding: 34px 5vw 26px; display: grid; grid-template-rows: auto 1fr auto; position: relative; z-index: 1; }
header, footer { display: flex; justify-content: space-between; align-items: center; }
.logo { color: inherit; text-decoration: none; font-weight: 600; font-size: 25px; letter-spacing: -.06em; }
.logo span { color: var(--acid); }
.live { text-transform: uppercase; font-size: 10px; letter-spacing: .18em; color: #aaa9b4; display: flex; align-items: center; gap: 9px; }
.live i { width: 7px; height: 7px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 16px var(--acid); }
section { align-self: center; padding: 5vh 5vw; position: relative; }
.code { position: absolute; right: 4vw; top: 5vh; color: rgba(255,255,255,.16); font-size: clamp(70px, 12vw, 180px); font-weight: 600; letter-spacing: -.08em; }
h1 { font-size: clamp(65px, 11vw, 170px); line-height: .78; letter-spacing: -.085em; margin: 0; font-weight: 500; position: relative; }
h1 span { color: transparent; -webkit-text-stroke: 1px rgba(241,240,235,.5); }
.lower { margin-top: 8vh; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; align-items: flex-end; }
.lower p { color: #aaa9b4; line-height: 1.6; margin: 0; font-size: 14px; }
.signal { display: flex; align-items: flex-end; gap: 5px; height: 27px; }
.signal i { display: block; width: 4px; background: var(--acid); border-radius: 2px; }
.signal i:nth-child(1) { height: 7px; opacity: .35; }
.signal i:nth-child(2) { height: 13px; opacity: .55; }
.signal i:nth-child(3) { height: 20px; opacity: .75; }
.signal i:nth-child(4) { height: 27px; box-shadow: 0 0 12px rgba(203,255,71,.5); }
footer { color: #6f6e7a; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
@media (max-width: 700px) {
  main { padding: 24px 20px; }
  section { padding: 5vh 0; }
  h1 { font-size: clamp(60px, 22vw, 105px); line-height: .82; }
  .code { right: 0; top: -10vh; font-size: 24vw; }
  .lower { margin-top: 10vh; }
  body::before { background-size: 32px 32px; }
}