:root{
  /* palette from hspace.io */
  --bg:#0a0b0d;
  --text:#f7f8fa;
  --muted:#9fa4a8;
  --sub:#cacdd2;
  --hairline:#27282c;
  --brand:#52f3ff;
  --brand-hover:#4adbe5;
  --link:#52f3ff;
  --cyan:#52f3ff;
  --orange:#ffa000;
  --pink:#ff4066;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,'Helvetica Neue','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.022em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1024px;margin:0 auto;padding:0 22px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------- nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(22,22,23,.88);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:48px}
.nav-brand{
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  color:var(--text);white-space:nowrap;
}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{
  font-size:12px;color:rgba(245,245,247,.8);
  transition:color .2s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:#fff}
.nav-links a.ext::after{content:" ↗";opacity:.6}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  height:86vh;min-height:560px;max-height:920px;
  background:var(--poster,#000) center/cover no-repeat;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at center, rgba(10,11,13,.35), rgba(10,11,13,.72));
}
.hero-content{position:relative;z-index:2}
.hero-emblem{
  display:block;margin:0 auto 22px;
  height:clamp(130px,22vh,190px);width:auto;
}

/* trailer */
.trailer{padding:150px 0 0;text-align:center}
.trailer .eyebrow{font-size:19px;font-weight:600;color:var(--muted)}
.trailer .art-wrap{margin-top:32px}
.trailer video{width:100%;display:block}
.eyebrow{font-size:14px;color:var(--muted);font-weight:400}
.hero h1{
  font-size:clamp(44px,7.5vw,84px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:14px 0 18px;
}
.h1-pre{
  display:block;
  font-size:.5em;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--sub);
  margin-bottom:8px;
}
.hero .lede{
  font-size:clamp(19px,2.4vw,24px);
  color:var(--sub);
  max-width:640px;
  margin:0 auto;
}
.hero .lede strong{color:var(--text);font-weight:600}
.hero-actions{
  display:flex;gap:28px;align-items:center;justify-content:center;
  margin-top:32px;flex-wrap:wrap;
}
.btn{
  display:inline-block;
  background:var(--brand);color:#05060a;
  border-radius:980px;
  padding:12px 24px;
  font-size:17px;
  font-weight:600;
  transition:background .2s;
}
.btn:hover{background:var(--brand-hover)}
.textlink{color:var(--link);font-size:17px}
.textlink::after{content:' ›'}
.textlink:hover{text-decoration:underline}

/* ---------- art strip ---------- */
.strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding:76px 0 0;
}
.strip a{
  display:block;border-radius:18px;overflow:hidden;
  transition:transform .35s cubic-bezier(.25,.1,.25,1);
}
.strip a:hover,.strip a:focus-visible{transform:scale(1.02)}
.strip img{aspect-ratio:16/9;object-fit:cover;width:100%}

/* ---------- sections ---------- */
.section-head{padding:170px 0 0;text-align:center}
.section-head h2,
.game h3,
.defcon h2{
  font-size:clamp(36px,5vw,56px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.015em;
}
.section-head .sub,
.game .sub,
.defcon .sub{
  font-size:clamp(18px,2.1vw,21px);
  color:var(--sub);
  max-width:680px;
  margin:18px auto 0;
}
.section-head .sub strong,
.game .sub strong,
.defcon .sub strong{color:var(--text);font-weight:600}

/* ---------- games ---------- */
.game{padding:150px 0 0;text-align:center}
.game .eyebrow{
  font-size:19px;font-weight:600;color:var(--acc);
}
.game h3{margin:8px 0 0}

/* ambient glow: a blurred copy of the media softly spreading behind the card in view */
.art-wrap{position:relative;max-width:980px;margin:52px auto 0}
.art-glow{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:24px;
  /* the heavy blur is baked into the *-glow.jpg files; this only feathers edges */
  filter:blur(16px) saturate(1.4);
  transform:scale(1.04) translateZ(0);
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
  will-change:transform,opacity;
}
.art-wrap.in .art-glow{opacity:.55;animation:glow-breathe 7s ease-in-out infinite}
@keyframes glow-breathe{
  0%,100%{transform:scale(1.03) translateZ(0)}
  50%{transform:scale(1.09) translateZ(0)}
}
.art{
  position:relative;z-index:1;
  border-radius:24px;overflow:hidden;
}

.g-cyan{--acc:var(--cyan)}
.g-orange{--acc:var(--orange)}
.g-pink{--acc:var(--pink)}

/* ---------- defcon ---------- */
.defcon{padding:170px 0 0;text-align:center}
.defcon .eyebrow{font-size:19px;font-weight:600;color:var(--muted)}
.defcon h2{margin:8px 0 0}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px;
  max-width:900px;margin:70px auto 0;
}
.stat .label{font-size:14px;color:var(--muted);margin-bottom:8px}
.stat .value{font-size:clamp(20px,2.4vw,24px);font-weight:600;line-height:1.3}
.map{
  max-width:980px;margin:64px auto 0;
  border-radius:24px;overflow:hidden;
  background:#fff;
}
.map-placeholder{
  max-width:980px;margin:64px auto 0;
  border:1px dashed rgba(247,248,250,.25);
  border-radius:24px;
  padding:88px 24px;
  color:var(--muted);
  font-size:clamp(18px,2.2vw,22px);
  font-weight:500;
}

/* ---------- sponsors ---------- */
.sponsors{padding:150px 0 0;text-align:center}
.sponsors .eyebrow{font-size:28px;font-weight:600;color:var(--muted)}
.sponsor-card{
  display:inline-block;background:#fff;border-radius:20px;
  padding:36px 64px;margin-top:36px;
}
.sponsor-card img{height:120px;width:auto;display:block}

/* ---------- footer ---------- */
.site-footer{margin-top:170px;border-top:1px solid var(--hairline);padding:26px 0 48px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-logo img{height:14px;width:auto;opacity:.85;transition:opacity .2s}
.foot-logo:hover img{opacity:1}
.foot small{color:var(--muted);font-size:12px;letter-spacing:-.01em}
.foot small a{color:var(--sub)}
.foot small a:hover{color:var(--text);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip a,.strip a:hover{transform:none;transition:none}
  .art-wrap.in .art-glow{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:734px){
  .hero{height:72vh;min-height:460px}
  .trailer{padding-top:110px}
  .strip{grid-template-columns:1fr;gap:16px;padding-top:56px}
  .section-head{padding-top:120px}
  .game{padding-top:110px}
  .game .art-wrap{margin-top:36px}
  .art,.art-glow{border-radius:18px}
  .defcon{padding-top:120px}
  .stats{grid-template-columns:1fr;gap:32px;margin-top:52px}
  .map{margin-top:48px;border-radius:18px}
  .sponsors{padding-top:110px}
  .sponsor-card{padding:26px 40px}
  .sponsor-card img{height:84px}
  .site-footer{margin-top:120px}
  .nav-links{gap:20px}
  .nav-links a.hide-m{display:none}
}