:root {
  --bg: #0a0d14;
  --bg2: #111622;
  --card: #151b29;
  --line: #242c3d;
  --text: #eef1f7;
  --muted: #9aa4b8;
  --yellow: #ffd400;
  --red: #d7261e;
  --blue: #2f6bff;
  --green: #22c55e;
  --lfb: #d7261e;
  --las: #1fa35c;
  --met: #2f6bff;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: rgba(10, 13, 20, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 22px/1 Anton, Oswald, Impact, 'Arial Narrow', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.brand img { border-radius: 50%; }
.nav { display: flex; align-items: center; gap: 22px; font-weight: 500; font-size: 15px; }
.nav a:not(.btn) { text-decoration: none; color: var(--muted); }
.nav a:not(.btn):hover { color: var(--text); }

/* buttons */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 15px; font-family: inherit; transition: transform .12s, background .12s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--yellow); color: #111; }
.btn-primary:hover { background: #ffe14d; }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--text); border-color: rgba(255, 255, 255, .22); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-small { padding: 8px 14px; font-size: 14px; background: var(--yellow); color: #111; }

/* hero: the artwork on top (its wordmark is the heading), the words underneath */
.hero { position: relative; }
.hero-img { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 74vh; background: #05070c url(/assets/img/hero.jpg) center 35% / cover no-repeat; }
.hero-img::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(180deg, rgba(10,13,20,0), var(--bg)); }
.hero-fade { display: none; }
.hero-in { position: relative; margin-top: -56px; padding: 0 0 52px; }
.hero-tag { font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; line-height: 1.3; margin: 0 0 22px; text-shadow: 0 2px 18px rgba(0,0,0,.8); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.5); border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.status.on .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.2); animation: pulse 2s infinite; }
.status.off .dot { background: var(--red); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }

.tape { height: 14px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 22px, var(--red) 22px 44px); }

/* sections */
.sec { padding: 88px 0; }
.sec-game { background: var(--bg2); border-block: 1px solid var(--line); }
.kicker { margin: 0 0 8px; color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
h2 { font: 400 clamp(32px, 4.6vw, 52px)/1.05 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 16px; }
h3 { margin: 0 0 8px; font-size: 20px; }
.lead { color: var(--muted); font-size: 18px; max-width: 720px; margin: 0 0 40px; }

.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
.svc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; border-top: 4px solid; }
.svc p { margin: 0; color: var(--muted); }
.svc-lfb { border-top-color: var(--lfb); }
.svc-las { border-top-color: var(--las); }
.svc-met { border-top-color: var(--met); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
figure { margin: 0; }
.gallery figure { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #000; }
.gallery figcaption { padding: 12px 16px; font-size: 14px; color: var(--muted); }

.connect { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.connect p { margin: 0 0 8px; color: var(--muted); }
.connect code { font: 600 17px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--yellow); word-break: break-all; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tiles figure { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.tiles img { width: 100%; aspect-ratio: 540 / 692; object-fit: cover; }
.tiles figcaption { position: absolute; inset: auto 0 0 0; padding: 48px 16px 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.88)); font-size: 14px; color: #d7dbe5; }
.tiles figcaption b { display: block; font-size: 18px; color: #fff; }
.soon { display: inline-block; background: var(--yellow); color: #111; font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; margin-right: 4px; }
.features { list-style: none; padding: 0; margin: 32px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.features li { padding: 14px 16px; border-left: 3px solid var(--yellow); background: var(--card); border-radius: 0 10px 10px 0; font-weight: 500; }
.game-cta, .join-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0; }

.steps { list-style: none; padding: 0; margin: 0 0 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: #111; font: 400 20px/1 Anton, Impact, sans-serif; margin-bottom: 14px; }
.steps b { display: block; font-size: 18px; margin-bottom: 4px; }
.steps span { color: var(--muted); }

.foot { padding: 40px 0 56px; border-top: 1px solid var(--line); }
.foot-in { display: grid; gap: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--text); }
.foot .brand { font-size: 18px; }

@media (max-width: 960px) {
  .services, .gallery { grid-template-columns: 1fr 1fr; }
  .tiles, .features, .steps { grid-template-columns: 1fr 1fr; }
  .services .svc:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nav a:not(.btn) { display: none; }
  .brand { font-size: 18px; white-space: nowrap; }
  .brand img { width: 34px; height: 34px; }
  .sec { padding: 64px 0; }
  .services, .gallery, .features, .steps { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-img { aspect-ratio: 4 / 3; background-size: 150% auto; background-position: center 40%; }
  .hero-in { margin-top: -24px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .connect { flex-direction: column; align-items: flex-start; }
}