body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.018;background-image:radial-gradient(#fff 0.55px,transparent 0.55px);background-size:4px 4px;mix-blend-mode:soft-light}

header#top{min-height:100svh;display:grid;align-content:center;padding-top:112px;background:radial-gradient(76% 68% at 78% 38%,#30275042 0%,transparent 68%),radial-gradient(52% 52% at 18% 78%,#1c5b7125 0%,transparent 74%)}
.hero-grid{min-height:auto;grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr);gap:clamp(36px,6vw,96px);align-items:center}
.hero-copy{gap:24px;max-width:780px}
.hero-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--acc2)}
.hero-copy h1{font-size:clamp(54px,7.2vw,112px);line-height:.96;letter-spacing:-.038em;max-width:820px;text-wrap:balance}
.hero-copy h1 span{display:block;color:var(--ink)}
.hero-copy h1 span:last-child{color:var(--ink2)}
.hero-copy p{font-size:clamp(17px,1.35vw,21px);line-height:1.65;max-width:570px}
.hero-visual{width:min(100%,560px);justify-self:end;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#3c315d 0%,#1b172d 39%,#0c0b15 73%);box-shadow:0 0 120px #8e78d020,0 50px 100px -68px #000}
.moon{width:76%}

.games-intro{padding-top:clamp(78px,9vw,130px)}
.games-intro h2{font-size:clamp(54px,8vw,112px);line-height:.95;letter-spacing:-.04em}
.games-intro .row{padding-bottom:clamp(28px,4vw,52px);border-bottom:1px solid var(--line)}
.gsec{padding:clamp(72px,8vw,120px) 0}
.ghead{gap:18px;position:relative}
.ghead h3{font-size:clamp(58px,8vw,118px);line-height:.94;letter-spacing:-.04em}
.ghook{font-size:clamp(20px,1.7vw,27px);line-height:1.55;max-width:780px}
.project-label{margin-bottom:4px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink2)}
.project-featured{background:radial-gradient(75% 70% at 72% 42%,#f2a65a0d,transparent 70%),var(--bg2)}
.project-secondary{background:linear-gradient(180deg,var(--bg),#0d0c17);border-top:1px solid var(--line)}
.project-secondary .ghead{opacity:1}
.project-secondary .ghead h3{font-size:clamp(56px,7.2vw,104px)}
.ghead::after{display:none}

.oreshot{width:min(78vw,1040px);border-radius:26px}
.ore-sticky{padding:28px 0}
.gcard{width:min(68vw,980px)}
.gcard .frame{border-radius:18px}

.about{padding:clamp(78px,9vw,130px) clamp(20px,4vw,56px)}
.about-inner{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(140px,.34fr) minmax(0,1.66fr);gap:clamp(32px,6vw,96px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(40px,5vw,68px);position:relative}
.about-inner::before{content:"";position:absolute;inset:-54px 42% auto -8%;height:210px;background:radial-gradient(circle,#8fd9a80b,transparent 72%);pointer-events:none}
.about-mark{width:min(170px,38vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#2e2748,#12101d 70%);border:1px solid var(--line)}
.about-mark img{width:68%}
.about-copy{display:grid;gap:18px}
.about-copy h2{margin:0;font-family:Cinzel,serif;font-weight:400;font-size:clamp(42px,5.5vw,82px);line-height:1;letter-spacing:-.035em}
.about-copy p{margin:0;max-width:720px;font-size:clamp(18px,1.55vw,24px);line-height:1.65;color:var(--ink2)}

#detail{padding-top:128px;background:radial-gradient(90% 55% at 50% 0%,#b9a6f00b,transparent 72%)}
.d-main h1{font-size:clamp(58px,8vw,112px);line-height:.95;letter-spacing:-.04em}
.d-tag{font-size:clamp(21px,1.8vw,29px);line-height:1.55;max-width:820px}
.d-p{font-size:clamp(17px,1.25vw,20px);line-height:1.8;max-width:820px}
.d-hero{margin-bottom:44px}
.d-grid{grid-template-columns:minmax(0,1.55fr) minmax(260px,.5fr);gap:clamp(32px,4vw,64px)}
.d-main{gap:clamp(22px,2.4vw,36px)}
.d-feat{margin-top:16px}
.d-feat .frow{padding:18px 0}
.d-feat .ft{font-size:clamp(16px,1.2vw,19px)}
.d-aside{top:112px;border-radius:22px;padding:28px;background:linear-gradient(180deg,#191627,#12101d);box-shadow:0 28px 60px -50px #000}
.d-next{margin-top:clamp(64px,8vw,110px)}
.d-next button{padding:clamp(26px,3vw,42px);border-radius:22px;background:linear-gradient(135deg,#181525,#11101b)}

:where(a,button){-webkit-tap-highlight-color:transparent}
:where(a,button):focus-visible{outline:2px solid var(--acc1);outline-offset:4px}
.btn{transition:transform .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-solid:hover{box-shadow:0 12px 32px -22px #f4f0ea66}
.brand,.navlinks>a{transition:opacity .2s,color .2s}
.brand:hover{opacity:.86}
.gcard .frame img,.d-shots .frame img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gcard .frame:hover img,.d-shots .frame:hover img{transform:scale(1.02)}
.gcard .frame,.d-shots .frame,.oreshot{transition:border-color .25s,box-shadow .25s}
.gcard:hover .frame,.d-shots .frame:hover{border-color:var(--line2);box-shadow:0 38px 80px -58px #000}
.d-next button{transition:transform .22s,border-color .22s}
.d-next button:hover{transform:translateY(-2px);border-color:var(--acc1)}

html{scroll-padding-top:96px}
.gsec,.about,#contact{scroll-margin-top:88px}
.contact-card{box-shadow:0 56px 110px -92px #000}
.contact-head h2{letter-spacing:-.02em}
footer{background:#090812}
.langtoggle button{transition:background .2s,color .2s}
.slot-ph{min-height:220px}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.68fr);gap:36px}
  .hero-copy h1{font-size:clamp(52px,7.8vw,86px)}
  .hero-visual{width:min(100%,460px)}
}

@media(max-width:860px){
  header#top{min-height:auto;padding-top:124px;padding-bottom:32px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy{max-width:none}
  .hero-copy h1{font-size:clamp(48px,13vw,76px);line-height:1}
  .hero-copy p{font-size:18px}
  .hero-visual{width:min(74vw,460px);justify-self:center}
  .games-intro h2{font-size:clamp(52px,14vw,82px)}
  .ghead h3,.project-secondary .ghead h3{font-size:clamp(54px,14vw,88px)}
  .ghook{font-size:20px}
  .gcard{width:84vw}
  .oreshot{width:88vw}
  .about-inner{grid-template-columns:1fr;align-items:start}
  .about-mark{width:130px}
  .about-copy h2{font-size:clamp(42px,11vw,66px)}
  .d-grid{grid-template-columns:1fr}
  .d-aside{position:static}
}

@media(max-width:520px){
  header#top{padding-top:104px}
  .hero-copy h1{font-size:clamp(42px,12.5vw,62px);line-height:1}
  .hero-cta{display:grid;grid-template-columns:1fr}
  .hero-cta .btn{text-align:center;width:100%}
  .hero-visual{width:min(82vw,390px)}
  .games-intro{padding-top:64px}
  .games-intro h2{font-size:54px}
  .gsec{padding:64px 0}
  .ghead h3,.project-secondary .ghead h3{font-size:58px}
  .ghook{font-size:18px}
  .project-label{margin-bottom:8px}
  .about{padding-top:64px;padding-bottom:64px}
  .about-copy h2{font-size:46px}
  .about-copy p{font-size:18px}
  .d-main h1{font-size:54px}
}

@media(prefers-reduced-motion:reduce){
  .btn,.gcard .frame img,.d-shots .frame img,.d-next button{transition:none!important}
  .btn:hover,.gcard .frame:hover img,.d-shots .frame:hover img,.d-next button:hover{transform:none!important}
}