:root{
  /*
    Midnight Gold — yellow brand + charcoal + cool slate
    Gold pops on night surfaces; ink stays readable on light canvas.
  */
  --gold:#e8c547;
  --gold2:#f0b429;
  --gold-deep:#9a7418;
  --gold-soft:rgba(232,197,71,.22);

  --night:#111318;
  --night-elevated:#1a1d26;
  --panel:var(--night-elevated);

  --bg:#060606;
  --surface:#f2f0ea;
  --surface-bright:#f7f8fb;

  --ink:#15171e;
  --ink-muted:#5e6474;
  --text:#f2f3f7;
  --muted:#a8aebe;

  --line:rgba(242,243,247,.12);
  --line-strong:rgba(21,23,30,.12);
  --warn:#e23b6b;

  --shadow:0 10px 28px rgba(17,19,24,.14);
  --shadow-deep:0 16px 40px rgba(17,19,24,.28);

  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --nav-font:"Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* Fluid scale tokens — grow with larger screens */
  --page-max:1680px;
  --gutter:clamp(16px, 4vw, 48px);
  --radius:clamp(14px, 1.1vw, 22px);

  --fs-xs:clamp(10px, .7vw, 13px);
  --fs-sm:clamp(12px, .85vw, 15px);
  --fs-md:clamp(14px, 1vw, 18px);
  --fs-lg:clamp(18px, 1.35vw, 28px);
  --fs-xl:clamp(26px, 2vw, 40px);
  --fs-display:clamp(38px, 3.6vw, 72px);

  --space-1:clamp(8px, .7vw, 14px);
  --space-2:clamp(12px, 1vw, 20px);
  --space-3:clamp(18px, 1.5vw, 32px);
  --space-4:clamp(28px, 2.4vw, 52px);

  --logo-size:clamp(42px, 3vw, 58px);
  --hero-col:clamp(260px, 22vw, 380px);
  --hero-img-w:clamp(240px, 18vw, 340px);
  --hero-img-h:clamp(320px, 24vw, 460px);
  --hero-min-h:clamp(360px, 32vw, 500px);
  --tile-w:clamp(240px, 17vw, 320px);
  --tile-h:clamp(320px, 24vw, 440px);
  --cover-max:clamp(300px, 24vw, 440px);
}

*{ box-sizing:border-box; }

html{
  height:100%;
}

html, body{
  min-height:100%;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--bg);
  overflow-x:hidden;
}

/* Soft ambient wash + grain (no hard color cuts) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(ellipse 55% 42% at 90% 8%, rgba(232,197,71,.1), transparent 62%),
    radial-gradient(ellipse 45% 38% at 8% 78%, rgba(17,19,24,.07), transparent 58%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:180px 180px;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes softGlow{
  0%, 100%{ opacity:.55; }
  50%{ opacity:1; }
}

a{
  color:inherit;
  text-decoration:none;
}

a:hover{
  opacity:.95;
}

.container{
  width:min(var(--page-max), calc(100% - (var(--gutter) * 2)));
  margin:0 auto;
}

/* HEADER */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(5,5,8,.62);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border-bottom:none;
  box-shadow:none;
}

/* Soft dark fade from nav into the page — no hard gold rule. */
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:48px;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,5,8,.55) 0%,
    rgba(5,5,8,.22) 45%,
    rgba(5,5,8,0) 100%
  );
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(10px, 1vw, 16px) 0;
  gap:clamp(12px, 1.4vw, 28px);
}

.brand{
  display:flex;
  align-items:center;
  gap:3px;
  min-width:0;
  transition:opacity .2s ease;
}

.brand:hover{
  opacity:1;
}

.logoWrap{
  position:relative;
  width:var(--logo-size);
  height:var(--logo-size);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.logoWrap::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(
    circle at 45% 40%,
    rgba(255,240,180,.55) 0%,
    rgba(232,197,71,.3) 28%,
    rgba(240,180,41,.12) 52%,
    transparent 72%
  );
  filter:blur(6px);
  pointer-events:none;
}

.logoWrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0%, transparent 34%),
    linear-gradient(155deg, #ffe9a0 0%, var(--gold) 42%, var(--gold2) 100%);
  box-shadow:
    0 0 0 1px rgba(255,236,170,.45),
    0 0 14px rgba(232,197,71,.45),
    0 0 28px rgba(240,180,41,.28),
    0 8px 18px rgba(17,19,24,.35);
  pointer-events:none;
}

.logoImg{
  position:relative;
  z-index:2;
  height:calc(var(--logo-size) * .6);
  width:auto;
  display:block;
  flex-shrink:0;
}

.studio-logo{
  display:block;
  width:clamp(118px, 11vw, 158px);
  height:auto;
  object-fit:contain;
  object-position:left center;
  flex-shrink:1;
  min-width:0;
  margin-left:-8px;
}

.navlinks{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
}

.navlinks a{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-family:var(--nav-font);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(168,174,190,.88);
  padding:clamp(8px, .8vw, 12px) clamp(12px, 1vw, 18px);
  border-radius:0;
  transition:color .22s ease;
}

.navlinks a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:7px;
  width:16px;
  height:1.5px;
  border-radius:1px;
  background:var(--gold);
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
  pointer-events:none;
}

.navlinks a:hover{
  color:rgba(242,243,247,.96);
  opacity:1;
  background:transparent;
  box-shadow:none;
  transform:none;
}

.navlinks a:hover::after{
  transform:translateX(-50%) scaleX(1);
  opacity:.85;
}

.navlinks a.active{
  color:var(--gold);
  background:transparent;
  box-shadow:none;
}

.navlinks a.active::after{
  transform:translateX(-50%) scaleX(1);
  opacity:1;
  width:14px;
}

.navlinks a:focus-visible{
  outline:1px solid rgba(232,197,71,.55);
  outline-offset:3px;
  color:rgba(242,243,247,.96);
  opacity:1;
}

.navlinks a:focus-visible::after{
  transform:translateX(-50%) scaleX(1);
  opacity:.7;
}

/* GENERAL */

.featuredHero + .container,
main.container{
  animation:fadeUp .55s ease both;
}

.section{
  padding:var(--space-3) 0;
  animation:fadeUp .6s ease both;
  animation-delay:.06s;
}

.newsSection{
  padding-top:var(--space-3);
  padding-bottom:var(--space-4);
  animation-delay:.12s;
}

.card{
  background:var(--night-elevated);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-deep);
}

h1,
.pageTitle h1{
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}

h1{
  margin:14px 0 10px;
  font-size:var(--fs-xl);
  letter-spacing:.2px;
}

.lead{
  margin:0 0 18px;
  color:rgba(233,236,255,.8);
  max-width:58ch;
}

.pageTitle{
  padding:26px 0 6px;
}

.pageTitle h1{
  margin:0;
  font-size:clamp(24px, 1.8vw, 34px);
  color:var(--text);
  text-shadow:none;
}

.pageTitle p{
  margin:8px 0 0;
  color:var(--muted);
  max-width:52ch;
  line-height:1.5;
}

.mono{
  font-family:var(--mono);
  letter-spacing:.5px;
}

.panel{
  padding:18px;
}

.hr{
  height:1px;
  background:var(--line);
  margin:16px auto;
  width:min(var(--page-max), calc(100% - (var(--gutter) * 2)));
}

.miniTitle{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.7px;
  color:rgba(233,236,255,.78);
}

.list{
  margin:10px 0 0;
  padding-left:18px;
  color:rgba(233,236,255,.82);
}

.list li{
  margin:6px 0;
}

/* BUTTONS */

.ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:fit-content;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(233,236,255,.14);
  background:rgba(233,236,255,.05);
  color:rgba(233,236,255,.92);
  font-family:var(--nav-font);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
}

.btn:hover{
  background:rgba(233,236,255,.08);
  box-shadow:0 0 0 1px rgba(233,236,255,.1) inset;
}

.btn.primary{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(232,197,71,.55);
  background:linear-gradient(135deg, #ffe08a, var(--gold) 45%, var(--gold2));
  color:var(--night);
  font-weight:600;
  box-shadow:
    0 0 0 1px rgba(255,236,170,.22) inset,
    0 8px 22px rgba(232,197,71,.28),
    0 0 28px rgba(232,197,71,.16);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn.primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .45s ease;
  pointer-events:none;
  z-index:0;
}

.btn.primary:hover{
  background:linear-gradient(135deg, #ffe9a8, var(--gold) 45%, #ffc266);
  box-shadow:
    0 0 0 1px rgba(255,236,170,.3) inset,
    0 10px 28px rgba(232,197,71,.38),
    0 0 36px rgba(232,197,71,.22);
  transform:translateY(-1px);
  filter:brightness(1.03);
  opacity:1;
}

.btn.primary:hover::before{
  transform:translateX(120%);
}

.btn.primary > *{
  position:relative;
  z-index:1;
}

.btn.warn{
  border-color:rgba(226,59,107,.28);
  background:rgba(226,59,107,.1);
}

.btnIcon{
  width:18px;
  height:18px;
  border-radius:6px;
  background:rgba(233,236,255,.12);
  box-shadow:0 0 0 1px rgba(233,236,255,.12) inset;
  display:inline-block;
}

/* FEATURED HERO — full-bleed showcase (adapted from max/fe) */

.featuredHero{
  --hero-ease:cubic-bezier(.22, 1, .36, 1);
  --hero-fade:cubic-bezier(.4, 0, .2, 1);
  --topbar-h:72px;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  /* Pull under the glass nav so the bar can show the artwork through it. */
  margin-top:calc(var(--topbar-h) * -1);
  height:100svh;
  min-height:min(520px, 100svh);
  max-height:980px;
  overflow:hidden;
  background:#050508;
  color:var(--text);
}

.featuredHeroMedia{
  position:absolute;
  inset:0;
  z-index:0;
}

.featuredHeroBg{
  --hero-zoom:1.1;
  position:absolute;
  inset:0;
  background-color:#0a0b0f;
  background-size:calc(var(--hero-zoom) * 100%);
  background-position:68% 50%;
  background-repeat:no-repeat;
  transform:none;
  opacity:1;
  transition:opacity .55s var(--hero-fade), background-position .55s var(--hero-ease), background-size .55s var(--hero-ease);
}

.featuredHeroBg.is-switching{
  opacity:0;
  transition:opacity .35s var(--hero-fade);
}

.featuredHeroScrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,5,8,.96) 0%, rgba(5,5,8,.88) 24%, rgba(5,5,8,.55) 46%, rgba(5,5,8,.18) 68%, rgba(5,5,8,0) 84%),
    linear-gradient(0deg, rgba(5,5,8,.78) 0%, rgba(5,5,8,0) 38%),
    linear-gradient(180deg, rgba(5,5,8,.55) 0%, rgba(5,5,8,.18) 12%, rgba(5,5,8,0) 28%),
    linear-gradient(rgba(5,5,8,.14), rgba(5,5,8,.14));
}

.featuredHeroGrain{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.featuredHeroInner{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:clamp(28px, 5vh, 56px);
  width:min(var(--page-max), calc(100% - (var(--gutter) * 2)));
  margin:0 auto;
  padding:clamp(28px, 5vh, 48px) 0 clamp(22px, 3.5vh, 40px);
}

.featuredHeroCopy{
  max-width:34rem;
  transition:opacity .35s var(--hero-fade), transform .35s var(--hero-fade);
}

.featuredHeroCopy.is-switching{
  opacity:0;
  transform:translateY(10px);
}

.featuredHeroTitle{
  margin:0 0 clamp(12px, 1.8vh, 18px);
  font-family:"Archivo", var(--nav-font), var(--sans);
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}

.featuredHeroBlurb{
  margin:0 0 clamp(18px, 2.8vh, 28px);
  max-width:42ch;
  font-size:clamp(.95rem, 1.1vw, 1.0625rem);
  line-height:1.62;
  color:rgba(255,255,255,.68);
}

.featuredHeroStats{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:0 0 clamp(22px, 3.2vh, 34px);
  padding:0;
  list-style:none;
}

.featuredHeroStats li{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-right:clamp(16px, 2.2vw, 26px);
  margin-right:clamp(16px, 2.2vw, 26px);
  border-right:1px solid rgba(255,255,255,.14);
}

.featuredHeroStats li:last-child{
  padding-right:0;
  margin-right:0;
  border-right:none;
}

.featuredHeroStatValue{
  font-family:"Archivo", var(--nav-font), var(--sans);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
}

.featuredHeroStatLabel{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.46);
}

.featuredHeroActions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.featuredHeroPrimary{
  min-width:0;
  height:50px;
  padding:0 24px;
  border-radius:999px;
  gap:8px;
}

.featuredHeroGhost{
  height:50px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  color:#fff;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .22s ease, border-color .22s ease;
}

.featuredHeroGhost:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.3);
  opacity:1;
}

.featuredHeroCards{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:10px;
  width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding:4px 0;
  margin:0;
}

.featuredHeroCards::-webkit-scrollbar{
  display:none;
}

.featuredCard{
  position:relative;
  flex:1 1 0;
  min-width:0;
  max-width:none;
  scroll-snap-align:center;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.06);
  transition:background .28s ease, border-color .28s ease;
}

.featuredCard:hover{
  background:rgba(255,255,255,.1);
}

.featuredCard.active{
  background:rgba(255,255,255,.09);
  border-color:rgba(232,197,71,.28);
}

.featuredCardProgress{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  transform-origin:left center;
  transform:scaleX(0);
  background:rgba(232,197,71,.16);
}

.featuredCardHit{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0;
  padding:10px;
  border:none;
  background:none;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.featuredCardThumb{
  position:relative;
  flex:0 0 auto;
  width:64px;
  height:52px;
  border-radius:8px;
  overflow:hidden;
  background:#0a0b0f;
}

.featuredCardThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform-origin:center center;
  display:block;
}

.featuredCardText{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.featuredCardTitle{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.46);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .28s ease;
}

.featuredCard.active .featuredCardTitle{
  color:var(--gold);
}

.featuredCardHook{
  font-size:.86rem;
  font-weight:600;
  line-height:1.3;
  color:rgba(255,255,255,.66);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  transition:color .28s ease;
}

.featuredCard.active .featuredCardHook,
.featuredCard:hover .featuredCardHook{
  color:#fff;
}

.featuredCardToggle{
  position:absolute;
  z-index:2;
  top:10px;
  left:10px;
  display:none;
  align-items:center;
  justify-content:center;
  width:64px;
  height:52px;
  border:none;
  border-radius:8px;
  background:rgba(6,6,8,.55);
  color:#fff;
  cursor:pointer;
}

.featuredCard.active .featuredCardToggle{
  display:inline-flex;
}

.featuredCardToggle:hover{
  background:rgba(6,6,8,.72);
}

.featuredCardToggle i{
  font-size:13px;
}

/* SECTION HEAD */

.sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
}

.sectionHeadActions{
  display:flex;
  align-items:center;
  gap:clamp(12px, 1.4vw, 22px);
  flex-shrink:0;
}

.sectionHead h2{
  position:relative;
  margin:0;
  padding-left:14px;
  font-size:clamp(15px, 1.05vw, 18px);
  font-weight:700;
  font-family:var(--mono);
  letter-spacing:1.4px;
  line-height:1.2;
  color:rgba(242,243,247,.82);
}

.sectionHead h2::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:.85em;
  border-radius:2px;
  background:linear-gradient(180deg, var(--gold-deep), var(--gold));
  transform:translateY(-50%);
}

.sectionHead p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

/* FEATURED CAROUSEL */

.featuredSection,
.catalogSection{
  --featured-gap:clamp(14px, 1.4vw, 22px);
}

.featuredCarouselWrap{
  position:relative;
  overflow:hidden;
  margin:0;
  background:transparent;
}

.featuredCarousel{
  display:flex;
  align-items:stretch;
  gap:var(--featured-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  overscroll-behavior-x:contain;
  padding:0;
  margin:0;
  background:transparent;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.featuredCarousel::-webkit-scrollbar{
  display:none;
}

.gameTile{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:0 0 var(--tile-w);
  width:var(--tile-w);
  max-width:var(--tile-w);
  min-height:0;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  background:
    linear-gradient(180deg, #1c202a 0%, var(--night-elevated) 48%, #14171e 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.gameTile::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.gameTile:hover{
  border-color:rgba(255,255,255,.16);
  box-shadow:0 14px 28px rgba(0,0,0,.34);
}

.gameTile:focus-within{
  border-color:rgba(232,197,71,.45);
}

.gamePoster{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:3 / 4;
  height:auto;
  overflow:hidden;
  background-color:var(--night);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:transform .4s ease, filter .4s ease;
}

.gamePoster::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 30%, transparent 70%, rgba(17,19,24,.4) 100%);
}

.gameTile:hover .gamePoster{
  transform:scale(1.03);
  filter:saturate(1.04) brightness(1.03);
}

.gameInfo{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:10px;
  padding:14px;
  min-height:168px;
  background:linear-gradient(180deg, #1a1d26 0%, #12151c 100%);
  border-top:1px solid rgba(255,255,255,.05);
}

.gameInfo h3{
  margin:0;
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.2px;
  color:var(--text);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  min-height:calc(1.25em * 2);
}

.gameInfo p{
  margin:0;
  color:rgba(242,243,247,.58);
  font-size:13px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  min-height:calc(1.4em * 2);
}

.gameMeta{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  align-items:center;
  margin-top:auto;
  min-height:28px;
  overflow:hidden;
}

.gameMeta span{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  height:26px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.4px;
  padding:0 9px;
  border-radius:6px;
  color:rgba(242,243,247,.72);
  background:rgba(232,197,71,.1);
  border:1px solid rgba(232,197,71,.22);
  white-space:nowrap;
}

.gameInfo a,
.gameCta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin-top:2px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.7px;
  line-height:1;
  height:34px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid rgba(232,197,71,.35);
  background:rgba(232,197,71,.12);
  color:var(--gold);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.gameInfo a:hover,
.gameCta:hover{
  background:rgba(232,197,71,.22);
  border-color:rgba(232,197,71,.55);
  color:#ffe9a0;
  opacity:1;
}

/* CAROUSEL CONTROLS */

.carouselControls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}

.carouselProgress{
  display:none;
  align-items:center;
  gap:6px;
  margin-right:4px;
}

.carouselProgress.is-visible{
  display:flex;
}

.carouselDot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(242,243,247,.22);
  transition:background .2s ease, transform .2s ease;
}

.carouselDot.active{
  background:var(--gold);
  transform:scale(1.15);
}

.carouselBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(26,29,38,.9);
  color:rgba(242,243,247,.78);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}

.carouselBtn:hover{
  color:var(--gold);
  border-color:rgba(232,197,71,.4);
  background:rgba(26,29,38,1);
}

.carouselBtn:disabled{
  opacity:.35;
  cursor:default;
  pointer-events:none;
}

/* GAMES GRID */

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.2vw, 22px);
}

@media (min-width:1500px){
  .grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

.gameCard{
  padding:14px;
  position:relative;
  overflow:hidden;
  border-color:rgba(233,236,255,.12);
}

.cover{
  aspect-ratio:3 / 4;
  width:100%;
  border-radius:14px;
  border:1px solid rgba(232,197,71,.28);
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.cover::after,
.bigCover::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:12px;
  box-shadow:
    0 0 0 1px rgba(232,197,71,.2) inset,
    0 0 28px rgba(232,197,71,.08) inset,
    0 18px 40px rgba(17,19,24,.3);
  pointer-events:none;
}

.gameTitle{
  margin:12px 0 6px;
  font-size:16px;
  letter-spacing:.2px;
}

.gameHook{
  margin:0 0 10px;
  color:rgba(233,236,255,.76);
  font-size:13px;
  min-height:34px;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
}

.tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.5px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(232,197,71,.28);
  background:var(--gold-soft);
  color:var(--muted);
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.smallLink{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.6px;
  color:rgba(233,236,255,.84);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(233,236,255,.12);
  background:rgba(233,236,255,.03);
}

.smallLink:hover{
  background:rgba(233,236,255,.06);
}

/* GAME DETAIL PAGE */

.gameHeader{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  align-items:stretch;
}

.bigCover{
  height:220px;
  border-radius:var(--radius);
  border:1px solid rgba(246,213,106,.2);
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}

.specGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.spec{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(233,236,255,.12);
  background:rgba(233,236,255,.04);
}

.spec b{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.6px;
}

.spec span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}

/* FORMS */

.form{
  display:grid;
  gap:12px;
}

.input,
.textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#14171e;
  color:var(--text);
  outline:none;
  font-family:var(--sans);
  font-size:var(--fs-sm);
  line-height:1.45;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input::placeholder,
.textarea::placeholder{
  color:rgba(167,173,186,.72);
}

.input:focus,
.textarea:focus{
  border-color:rgba(232,197,71,.45);
  background:#181b23;
  box-shadow:0 0 0 1px rgba(232,197,71,.18);
}

.textarea{
  min-height:130px;
  resize:vertical;
}

.note{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

/* FOOTER */

.footer{
  --footer-ink:#010103; /* exact near-black from footer artwork */
  position:relative;
  flex-shrink:0;
  margin-top:clamp(40px, 4vw, 72px);
  min-height:clamp(320px, 26vw, 480px);
  overflow:hidden;
  background:var(--footer-ink);
  border-top:none;
  text-align:left;
  box-shadow:0 -20px 50px rgba(1,1,3,.4);
}

.footerArt{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:url("../images/footer.png") right center / auto 100% no-repeat;
  /* Fade the bitmap itself into matching footer ink — removes hard left seam */
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    transparent 14%,
    rgba(0,0,0,.1) 32%,
    rgba(0,0,0,.28) 48%,
    rgba(0,0,0,.52) 60%,
    rgba(0,0,0,.75) 72%,
    rgba(0,0,0,.92) 84%,
    #000 94%,
    #000 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    transparent 14%,
    rgba(0,0,0,.1) 32%,
    rgba(0,0,0,.28) 48%,
    rgba(0,0,0,.52) 60%,
    rgba(0,0,0,.75) 72%,
    rgba(0,0,0,.92) 84%,
    #000 94%,
    #000 100%
  );
}

.footerScrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Keep left copy readable without reintroducing a hard cut */
  background:linear-gradient(
    90deg,
    var(--footer-ink) 0%,
    var(--footer-ink) 14%,
    rgba(1,1,3,.72) 28%,
    rgba(1,1,3,.28) 42%,
    rgba(1,1,3,.08) 54%,
    rgba(1,1,3,0) 66%
  );
}

.footerInner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:none;
  min-height:clamp(320px, 26vw, 480px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(20px, 2vw, 36px);
  margin:0;
  padding:clamp(28px, 3vw, 48px) clamp(24px, 5vw, 72px) clamp(20px, 2vw, 32px);
  box-sizing:border-box;
}

.footerBrand{
  max-width:min(420px, 100%);
}

.footerLogo{
  display:flex;
  align-items:center;
  gap:3px;
  margin-bottom:20px;
}

.footerLogo .logoWrap{
  width:56px;
  height:56px;
}

.footerLogo .logoImg{
  height:32px;
}

.footerLogo .studio-logo{
  width:clamp(132px, 12vw, 176px);
}

.footerMission{
  margin:0 0 24px;
  max-width:36ch;
  color:rgba(255,255,255,.9);
  font-size:var(--fs-md);
  line-height:1.55;
}

.footerSocial{
  display:flex;
  align-items:center;
  gap:18px;
}

.footer .footerSocial a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:var(--gold);
  font-size:18px;
  transition:color .2s ease, transform .2s ease;
}

.footer .footerSocial a:hover{
  color:#ffe9a0;
  transform:translateY(-2px);
  opacity:1;
}

.footerMeta{
  max-width:560px;
}

.footerRule{
  height:1px;
  width:min(460px, 100%);
  margin:0 0 18px;
  background:rgba(232,197,71,.65);
}

.footerLegal{
  display:flex;
  flex-wrap:wrap;
  gap:16px 26px;
  margin-bottom:14px;
}

.footer .footerLegal a{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
  color:var(--gold);
  transition:color .2s ease;
}

.footer .footerLegal a:hover{
  color:#ffe9a0;
  opacity:1;
}

.footerCopy{
  margin:0;
  color:rgba(233,236,255,.55);
  font-size:12px;
}

/* RESPONSIVE */

@media (max-width:980px){
  .grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:1100px){
  .featuredCard{
    flex:0 0 auto;
    min-width:min(220px, 72vw);
  }
}

@media (max-width:880px){
  .gameHeader{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .featuredHero{
    --topbar-h:64px;
    height:auto;
    min-height:100svh;
    max-height:none;
  }

  .featuredHeroMedia{
    inset:0;
    height:auto;
    min-height:0;
  }

  .featuredHeroInner{
    gap:clamp(20px, 4vh, 36px);
    padding:clamp(20px, 4vh, 36px) 0 clamp(18px, 3vh, 28px);
    min-height:calc(100svh - var(--topbar-h));
    box-sizing:border-box;
  }

  .featuredHeroTitle{
    font-size:clamp(2rem, 11vw, 3.4rem);
  }

  .featuredCard{
    flex:0 0 min(230px, 78vw);
  }
}

@media (max-width:560px){
  .featuredHero{
    --topbar-h:58px;
  }

  .featuredHeroStats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 0;
  }

  .featuredHeroStats li,
  .featuredHeroStats li:last-child{
    padding-right:16px;
    margin-right:16px;
    border-right:1px solid rgba(255,255,255,.14);
  }

  .featuredHeroStats li:nth-child(even){
    padding-right:0;
    margin-right:0;
    border-right:none;
  }

  .featuredHeroActions{
    width:100%;
  }

  .featuredHeroPrimary,
  .featuredHeroGhost{
    height:46px;
    flex:1 1 auto;
  }

  .featuredCardThumb,
  .featuredCardToggle{
    width:54px;
    height:46px;
  }

  .featuredCardToggle{
    top:10px;
    left:10px;
  }
}

@media (max-width:980px){
  .footerArt{
    background-size:cover;
    background-position:70% center;
  }
}

@media (max-width:760px){
  .footer{
    min-height:420px;
  }

  .footerInner{
    min-height:420px;
    padding:32px 5vw 22px;
  }

  .footerArt{
    background-size:cover;
    background-position:72% 40%;
    -webkit-mask-image:linear-gradient(
      180deg,
      #000 0%,
      #000 35%,
      rgba(0,0,0,.75) 58%,
      rgba(0,0,0,.35) 78%,
      transparent 100%
    );
    mask-image:linear-gradient(
      180deg,
      #000 0%,
      #000 35%,
      rgba(0,0,0,.75) 58%,
      rgba(0,0,0,.35) 78%,
      transparent 100%
    );
  }

  .footerScrim{
    background:linear-gradient(
      180deg,
      rgba(1,1,3,.2) 0%,
      rgba(1,1,3,.55) 42%,
      rgba(1,1,3,.9) 100%
    );
  }

  .footerBrand,
  .footerMeta{
    max-width:100%;
  }
}

@media (max-width:620px){
  .grid{
    grid-template-columns:1fr;
  }

  .sectionHead{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (max-width:600px){
  .featuredSection,
  .catalogSection{
    --tile-w:min(240px, 78vw);
  }

  .gameTile{
    flex-basis:var(--tile-w);
    width:var(--tile-w);
    max-width:var(--tile-w);
  }
}

@media (max-width:520px){
  .featuredCard{
    flex:0 0 min(210px, 84vw);
  }
}

@media (max-width:480px){
  .footerLegal{
    flex-direction:column;
    gap:12px;
  }
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{
  flex:1;
}

/* FIX GAME DETAIL PAGE WIDTH OVERFLOW */

.gameHeader{
  display:grid;
  grid-template-columns: minmax(260px, var(--cover-max)) minmax(0, 1fr);
  gap:clamp(18px, 2vw, 32px);
  align-items:start;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.gameHeader .panel{
  width:100%;
  max-width:100%;
  min-width:0;
}

.bigCover{
  width:100%;
  max-width:var(--cover-max);
  height:clamp(420px, 36vw, 600px);
  min-height:clamp(420px, 36vw, 600px);
}

.specGrid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

@media (max-width:1100px){
  .gameHeader{
    grid-template-columns:1fr;
  }

  .bigCover{
    margin:0 auto;
  }
}

/* Compact homepage hero for shorter viewports */
@media (max-height: 850px) and (max-width: 1400px){
  .featuredHero{
    height:100svh;
    min-height:min(480px, 100svh);
    max-height:820px;
  }
}

/* WHAT'S NEW SECTION */

.newsCarousel{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 1.4vw, 28px);
  margin-top:clamp(14px, 1.4vw, 24px);
}

.newsCard{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, #1c202a 0%, #14171e 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.newsCard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.newsCard:hover{
  border-color:rgba(212,170,55,.35);
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.34);
}

.newsCardMedia{
  position:relative;
  overflow:hidden;
  width:100%;
  height:clamp(160px, 14vw, 220px);
  background:#0a0b0f;
}

.newsCard img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform-origin:center center;
  display:block;
  transition:transform .45s ease, filter .45s ease;
}

.newsCard:hover img{
  filter:saturate(1.04) brightness(1.02);
}

.newsBody{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:10px;
  padding:clamp(14px, 1.3vw, 20px);
  border-top:1px solid rgba(212,170,55,.18);
}

.newsIndex{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  color:rgba(232,197,71,.78);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.newsCard h3{
  margin:0;
  font-size:var(--fs-md);
  line-height:1.25;
  color:var(--text);
  letter-spacing:.1px;
}

.newsCard p{
  margin:0;
  color:rgba(242,243,247,.62);
  font-size:var(--fs-sm);
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

.newsReadMore{
  display:inline-flex;
  align-items:center;
  margin-top:auto;
  padding-top:6px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  color:var(--gold);
  border-top:1px solid rgba(255,255,255,.06);
  transition:color .2s ease;
}

.newsReadMore:hover{
  color:#ffe9a0;
  opacity:1;
}

.viewAllLink{
  font-family:var(--mono);
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.8px;
  white-space:nowrap;
}

.viewAllLink:hover{
  color:#ffe9a0;
  opacity:1;
}

@media (max-width:980px){
  .newsCarousel{
    grid-template-columns:repeat(2, 1fr);
  }

  .sectionHeadActions{
    width:100%;
    justify-content:space-between;
  }
}

@media (max-width:620px){
  .newsCarousel{
    grid-template-columns:1fr;
  }

  .sectionHeadActions{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
}

/* ABOUT PAGE */

.aboutPage .pageTitle p{
  max-width:52ch;
}

.aboutPanel{
  position:relative;
  padding:clamp(22px, 2.4vw, 36px);
  border-radius:var(--radius);
  border:1px solid rgba(212,170,55,.22);
  background:linear-gradient(160deg, #1c2028 0%, #181b22 48%, #14171e 100%);
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.aboutEyebrow{
  display:inline-block;
  margin-bottom:12px;
  font-family:var(--mono);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:1.4px;
  color:var(--gold);
}

.aboutPanel h2{
  margin:0 0 16px;
  font-size:clamp(22px, 1.8vw, 30px);
  line-height:1.2;
  color:var(--text);
}

.aboutPanel p{
  margin:0 0 14px;
  color:#c2c6d0;
  font-size:var(--fs-md);
  line-height:1.65;
  max-width:62ch;
}

.aboutPanel p:last-child{
  margin-bottom:0;
}

.aboutIntro h2{
  max-width:18ch;
}

.aboutDisclaimer{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(212,170,55,.28);
  background:rgba(232,197,71,.08);
  color:#c5c8d0 !important;
  font-size:var(--fs-sm) !important;
  line-height:1.55 !important;
}

.aboutBuildGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.2vw, 18px);
}

.aboutBuildCard{
  padding:18px 18px 20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, #1c202a 0%, #161920 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.aboutBuildCard:hover{
  transform:translateY(-3px);
  border-color:rgba(212,170,55,.32);
  box-shadow:0 14px 26px rgba(0,0,0,.3);
}

.aboutBuildCard h3{
  margin:0 0 8px;
  font-size:var(--fs-md);
  color:var(--text);
}

.aboutBuildCard p{
  margin:0;
  color:#b7bbc5;
  font-size:var(--fs-sm);
  line-height:1.55;
}

.aboutNote{
  margin:18px 0 0;
  max-width:62ch;
  color:#c2c6d0;
  font-size:var(--fs-md);
  font-weight:500;
  line-height:1.6;
}

.aboutSplit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px, 1.4vw, 22px);
}

.aboutApproach{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(10px, 1.1vw, 16px);
}

.aboutApproachItem{
  padding:18px 16px 20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, #1c202a 0%, #15181f 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  transition:transform .22s ease, border-color .22s ease;
}

.aboutApproachItem:hover{
  transform:translateY(-3px);
  border-color:rgba(212,170,55,.32);
}

.aboutApproachItem span{
  display:block;
  margin-bottom:12px;
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:1.2px;
  color:var(--gold);
}

.aboutApproachItem h3{
  margin:0 0 8px;
  font-size:var(--fs-sm);
  color:var(--text);
}

.aboutApproachItem p{
  margin:0;
  color:#b7bbc5;
  font-size:var(--fs-sm);
  line-height:1.5;
}

.aboutCta{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.aboutCta .ctaRow{
  margin-top:0;
}

.aboutGhostBtn{
  background:transparent;
  border-color:rgba(212,170,55,.35);
  color:var(--gold);
}

.aboutGhostBtn:hover{
  background:rgba(232,197,71,.1);
  border-color:rgba(212,170,55,.5);
  color:#ffe9a0;
  opacity:1;
}

/* CONTACT PAGE */

.contactPage .card.panel{
  max-width:640px;
  padding:clamp(20px, 2vw, 28px);
  background:linear-gradient(160deg, #1c2028 0%, #181b22 48%, #14171e 100%);
  border:1px solid rgba(212,170,55,.22);
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.contactPage .miniTitle{
  color:var(--gold);
  letter-spacing:1.2px;
  font-weight:700;
}

.contactPage .hr{
  width:100%;
  margin:14px 0 18px;
  background:rgba(212,170,55,.22);
}

@media (max-width:980px){
  .aboutBuildGrid{
    grid-template-columns:repeat(2, 1fr);
  }

  .aboutApproach{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width:760px){
  .aboutSplit{
    grid-template-columns:1fr;
  }

  .aboutApproach{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:520px){
  .aboutBuildGrid,
  .aboutApproach{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .section,
  .newsSection,
  .featuredHeroBg,
  .featuredHeroCopy,
  .btn.primary::before,
  .gamePoster,
  .newsCard img{
    animation:none !important;
    transition:none !important;
  }
}