:root{
  --bg0:#010e22;
  --bg1:#01183d;
  --ink:#f7f2e6;
  --muted:rgba(247,242,230,.72);

  --gold:#e9a854;
  --cherry:#ae1c2b;
  --leaf:#02a651;
  --cream:#fcedc0;

  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 18px 60px rgba(0,0,0,.40);

  --radius: 22px;
  --radius2: 28px;
  --max: 1120px;

  --hfont: "Sora", system-ui, -apple-system, Segoe UI, sans-serif;
  --bfont: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
}

[data-theme="light"]{
  /* Warm, premium "parchment" base with strong readability */
  --bg0:#fffaf2;
  --bg1:#f6edd6;
  --ink:#190f1f;
  --muted:rgba(25,15,31,.78);

  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.86);
  --stroke: rgba(25,15,31,.14);
  --shadow: 0 18px 60px rgba(0,0,0,.10);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  font-family:var(--bfont);
  background:
    radial-gradient(1200px 800px at 18% 10%, rgba(15,72,115,.55) 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 16%, rgba(174,28,43,.30) 0%, transparent 52%),
    radial-gradient(1100px 700px at 55% 110%, rgba(233,168,84,.25) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin-inline:auto;
}

.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:18px; top:18px;
  width:auto; height:auto; padding:10px 12px;
  background:var(--glass2);
  border:1px solid var(--stroke);
  border-radius:12px;
  z-index:9999;
}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(1,24,61,.85), rgba(1,24,61,.50));
  border-bottom:1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .topbar{
  background: linear-gradient(180deg, rgba(252,237,192,.82), rgba(252,237,192,.55));
  border-bottom:1px solid rgba(26,16,32,.10);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color:inherit; text-decoration:none;
  min-width: 180px;
}
.brand img{
  width:38px; height:38px; object-fit:contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.brand__name{
  font-family: var(--hfont);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav{
  display:flex; gap:18px;
}
.nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  padding:10px 10px;
  border-radius:12px;
  transition: background .25s ease, color .25s ease;
}
.nav a:hover{
  color:var(--ink);
  background: rgba(255,255,255,.06);
}
[data-theme="light"] .nav a:hover{
  background: rgba(26,16,32,.06);
}

.topbar__actions{ display:flex; align-items:center; gap:10px; }

.iconbtn{
  width:44px; height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: var(--glass);
  color:var(--ink);
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
  transition: transform .15s ease, background .25s ease;
}
.iconbtn:hover{ transform: translateY(-1px); background: var(--glass2); }
.icon{ display:inline-block; line-height:1; font-size:18px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--stroke);
  text-decoration:none;
  color:var(--ink);
  background: var(--glass);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transition: transform .18s ease, background .25s ease, border-color .25s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); background: var(--glass2); }
.btn:active{ transform: translateY(0px); }

.btn--primary{
  border-color: rgba(233,168,84,.55);
  background: linear-gradient(180deg, rgba(233,168,84,.96), rgba(233,168,84,.72));
  color: #1a1020;
}
.btn--primary:hover{
  background: linear-gradient(180deg, rgba(252,237,192,.92), rgba(233,168,84,.76));
}
.btn--ghost{
  background: transparent;
}

.hero{
  position:relative;
  padding: 80px 0 60px;
  overflow:hidden;
}
#stars{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.65;
}
.glow{
  position:absolute;
  width:520px; height:520px;
  border-radius:50%;
  filter: blur(60px);
  opacity:.55;
  pointer-events:none;
}
.glow--a{ left:-120px; top:-120px; background: rgba(233,168,84,.28); }
.glow--b{ right:-180px; bottom:-160px; background: rgba(174,28,43,.22); }

.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items:center;
}

.kicker{
  margin:0 0 10px;
  color: var(--muted);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
}
h1{
  margin:0 0 14px;
  font-family:var(--hfont);
  letter-spacing:-.01em;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height:1.06;
}
.lead{
  margin:0 0 22px;
  color: var(--muted);
  font-size: 16.5px;
  line-height:1.55;
  max-width: 54ch;
}
.gradient{
  background: linear-gradient(90deg, var(--cream), var(--gold), var(--leaf));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__meta{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-weight:500;
  font-size:13px;
}

.hero__media{ position:relative; }
.device{
  position:relative;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform-style: preserve-3d;
}
[data-theme="light"] .device{
  border:1px solid rgba(26,16,32,.14);
}
.device img{
  display:block;
  width:100%;
  height:auto;
  transform: translateZ(20px);
}
.device__shine{
  position:absolute; inset:-120px;
  background: radial-gradient(600px 240px at 20% 15%, rgba(252,237,192,.40), transparent 55%);
  transform: translateZ(50px);
  pointer-events:none;
}

.hero__floating{
  position:absolute;
  right: -18px;
  bottom: -18px;
  display:flex;
  gap:12px;
}
.statcard{
  width: 170px;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
[data-theme="light"] .statcard{
  background: rgba(255,255,255,.70);
  border:1px solid rgba(26,16,32,.14);
}
.statcard__num{
  font-family:var(--hfont);
  font-size: 26px;
  letter-spacing:-.01em;
}
.statcard__label{
  margin-top:4px;
  color:var(--muted);
  font-size: 12.5px;
}

.section{
  padding: 72px 0;
}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
[data-theme="light"] .section--alt{
  background: linear-gradient(180deg, rgba(26,16,32,.03), rgba(26,16,32,.00));
  border-top: 1px solid rgba(26,16,32,.08);
  border-bottom: 1px solid rgba(26,16,32,.08);
}

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom: 22px;
}
h2{
  margin:0;
  font-family:var(--hfont);
  letter-spacing:-.01em;
  font-size: clamp(26px, 3vw, 36px);
}
.section__head p{
  margin:0;
  max-width: 60ch;
  color: var(--muted);
  line-height:1.55;
}
code{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }

.gamesGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.gameCard{
  grid-column: span 4;
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  transform-style: preserve-3d;
}
[data-theme="light"] .gameCard{
  border:1px solid rgba(26,16,32,.14);
  background: rgba(255,255,255,.60);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}
.gameCard__art{
  height: 190px;
  overflow:hidden;
  position:relative;
}
.gameCard__art img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
  transition: transform .5s ease;
}
.gameCard:hover .gameCard__art img{ transform: scale(1.12); }
.gameCard__art:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 100%);
}
[data-theme="light"] .gameCard__art:after{
  background: linear-gradient(180deg, transparent 0%, rgba(26,16,32,.16) 100%);
}
.gameCard__body{
  padding: 14px 14px 16px;
}
.gameCard h3{
  margin:0 0 6px;
  font-size: 18px;
}
.gameCard p{
  margin:0 0 12px;
  color: var(--muted);
  line-height:1.5;
  font-size: 13.8px;
}
.tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom: 14px;
}
.tag{
  padding:7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:12px;
}
.status{
  position:absolute; top:12px; left:12px;
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  font-size: 12px;
}
[data-theme="light"] .status{
  background: rgba(255,255,255,.75);
  border:1px solid rgba(26,16,32,.14);
}

.featureGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.feature{
  grid-column: span 6;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: var(--glass);
  border:1px solid var(--stroke);
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
}
.feature h3{ margin:0 0 8px; font-size:18px; }
.feature p{ margin:0; color:var(--muted); line-height:1.55; }

.callout{
  margin-top: 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
  padding: 18px 18px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(233,168,84,.18), rgba(2,166,81,.10));
  border:1px solid rgba(233,168,84,.28);
}
.callout h3{ margin:0 0 6px; }
.callout p{ margin:0; color:var(--muted); }

.studioGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
}
.valueGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.value{
  display:flex; gap:10px; align-items:flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: var(--glass);
}
.value span{ font-size: 18px; }
.value h4{ margin:0 0 6px; font-size: 14px; }
.value p{ margin:0; color: var(--muted); font-size: 12.8px; line-height:1.4; }

.glassCard{
  padding: 18px 18px;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: var(--glass);
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
}
.muted{ color:var(--muted); }
.fineprint{ margin-top: 16px; color:var(--muted); font-size: 12.8px; }


.pressGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.pressGrid .glassCard{
  grid-column: span 4;
}

.contactGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:start;
}
.contactCards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.socialRow{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--ink);
  text-decoration:none;
}
.form label{ display:block; margin-top: 12px; }
.form span{ display:block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color: var(--ink);
  outline:none;
}
[data-theme="light"] input,
[data-theme="light"] textarea{
  background: rgba(255,255,255,.70);
}
input:focus, textarea:focus{
  border-color: rgba(233,168,84,.50);
  box-shadow: 0 0 0 4px rgba(233,168,84,.12);
}
textarea{ resize: vertical; }

.footer{
  padding: 28px 0 40px;
  border-top: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .footer{ border-top: 1px solid rgba(26,16,32,.12); }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.footer__left{
  display:flex; align-items:center; gap:12px;
}
.footer__left img{
  width:34px; height:34px; object-fit:contain;
}
.footer__right{ display:flex; gap:16px; }
.footer__right a{ color: var(--muted); text-decoration:none; }
.footer__right a:hover{ color: var(--ink); }

.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0px);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn, .iconbtn{ transition:none; }
}

@media (max-width: 980px){
  .nav{ display:none; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__media{ margin-top: 10px; }
  .hero__floating{ position:static; margin-top: 14px; }
  .section__head{ flex-direction:column; align-items:flex-start; }
  .studioGrid{ grid-template-columns: 1fr; }
  .contactGrid{ grid-template-columns: 1fr; }
  .contactCards{ grid-template-columns: 1fr; }
  .pressGrid .glassCard{ grid-column: span 12; }
  .gameCard{ grid-column: span 12; }
  .feature{ grid-column: span 12; }
  .valueGrid{ grid-template-columns: 1fr; }
}


/* Anchor offset for sticky header */
.topAnchor{ position:absolute; top:0; left:0; }
section[id]{ scroll-margin-top: 92px; }

/* Mobile menu */
.iconbtn--menu{ display:none; }
.menuOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index:60;
}
[data-theme="light"] .menuOverlay{ background: rgba(26,16,32,.22); }

.mobileMenu{
  position:fixed;
  top: 14px;
  right: 14px;
  width: min(360px, calc(100% - 28px));
  border-radius: 22px;
  background: var(--glass2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  z-index: 70;
  padding: 14px;
}
.mobileMenu__top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 10px;
}
.mobileNav{
  display:grid;
  gap: 8px;
}
.mobileNav a{
  text-decoration:none;
  color: var(--ink);
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.mobileNav a:hover{ background: rgba(255,255,255,.08); }

@media (max-width: 980px){
  .iconbtn--menu{ display:inline-flex; }
}

/* Light mode: replace dark nebula background with subtle brand-tinted paper */
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 800px at 18% 8%, rgba(15,72,115,.14) 0%, transparent 55%),
    radial-gradient(900px 600px at 86% 18%, rgba(174,28,43,.10) 0%, transparent 52%),
    radial-gradient(1100px 700px at 55% 110%, rgba(233,168,84,.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

html[data-theme="light"] #stars{ opacity:.22; }

html[data-theme="light"] .pill{
  background: rgba(25,15,31,.04);
  border: 1px solid rgba(25,15,31,.10);
  color: rgba(25,15,31,.72);
}
html[data-theme="light"] .tag{
  background: rgba(25,15,31,.04);
  border: 1px solid rgba(25,15,31,.10);
  color: rgba(25,15,31,.70);
}
html[data-theme="light"] .chip{
  background: rgba(25,15,31,.03);
}

html[data-theme="light"] .btn--ghost{
  background: rgba(25,15,31,.03);
}
html[data-theme="light"] .btn--ghost:hover{
  background: rgba(25,15,31,.06);
}

html[data-theme="light"] .footer__right a{ color: rgba(25,15,31,.72); }
html[data-theme="light"] .footer__right a:hover{ color: var(--ink); }

html[data-theme="light"] .gradient{
  background: linear-gradient(90deg, #0f4873, #ae1c2b, #02a651);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

::placeholder{ color: rgba(247,242,230,.55); }
html[data-theme="light"] ::placeholder{ color: rgba(25,15,31,.45); }

html[data-theme="light"] .topbar{
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
html:not([data-theme="light"]) a:not(.btn):not(.chip){
  color: rgba(252,237,192,.88); /* close to your --cream */
}
html:not([data-theme="light"]) a:not(.btn):not(.chip):hover,
html:not([data-theme="light"]) a:not(.btn):not(.chip):focus-visible{
  color: var(--gold);
}
#ct-email.btn--primary a{
  color:#1a1020;
  text-decoration:none;
}
#ct-email.btn--primary a:hover,
#ct-email.btn--primary a:focus-visible{
  color:#1a1020;
  text-decoration:none;
  outline:none;
}