*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#000;color:#fff}
body{font-family:"Space Grotesk",sans-serif;overflow:hidden}.hero{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;background:#000}
.bg{position:absolute;inset:-3%;background:url("assets/hero.webp") center/cover no-repeat;filter:saturate(1.12) contrast(1.04);transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.075);transition:transform .16s ease-out;will-change:transform}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.02) 46%,rgba(0,0,0,.7)),linear-gradient(90deg,rgba(0,0,0,.42),transparent 25%,transparent 78%,rgba(0,0,0,.35))}
.grid{position:absolute;inset:0 2.6%;pointer-events:none;border-left:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgba(255,255,255,.13) calc(12.5% - 1px),rgba(255,255,255,.13) 12.5%)}
.intro{position:absolute;z-index:2;top:5.5vh;left:15%;width:70%;text-align:center}
.intro p{margin:0;font-family:"Noto Sans JP","Space Grotesk",sans-serif;font-weight:500;font-size:1.15rem;line-height:1.55;letter-spacing:.035em;text-align:center}
.launch{position:absolute;z-index:2;left:50%;transform:translateX(-50%);bottom:4.8vh;width:min(70vw,1080px);text-align:center}.launch p{font-family:"Michroma",sans-serif;font-size:clamp(.58rem,.78vw,.9rem);letter-spacing:.28em;margin:0 0 .7rem}
h1{font-family:"Michroma",sans-serif;font-weight:400;font-size:clamp(2rem,4.1vw,4.7rem);line-height:1;margin:0 0 1.2rem;letter-spacing:.02em;text-transform:none}
.countdown{border-top:1px solid rgba(255,255,255,.6);padding-top:.85rem;display:flex;align-items:flex-start;justify-content:center;gap:clamp(.75rem,1.5vw,1.6rem);width:100%;margin:0 auto}.countdown div{min-width:clamp(58px,6vw,92px)}
.countdown b{font-family:"Michroma",sans-serif;font-size:clamp(1.2rem,2.1vw,2.45rem);font-weight:400;line-height:1;display:block}.countdown small{display:block;margin-top:.5rem;font-size:clamp(.43rem,.52vw,.62rem);letter-spacing:.18em;opacity:.62}.countdown i{width:1px;height:2.8rem;background:rgba(255,255,255,.27)}
@media(max-width:760px){
html,body{min-height:100%;height:auto;overflow-x:hidden;overflow-y:auto}
body{overscroll-behavior-y:auto}
.hero{height:auto;min-height:100svh;overflow:hidden}
.bg{inset:0 -28%;background-position:center;transform:scale(1.06)!important;transition:none!important;will-change:auto}
.grid{inset:0 4%;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.12) calc(25% - 1px),rgba(255,255,255,.12) 25%)}
.intro{top:5vh;left:8%;width:84%}
.intro p{font-size:1rem;line-height:1.55}
.launch{left:50%;right:auto;transform:translateX(-50%);bottom:7vh;width:88vw}
.launch p{font-size:.53rem;letter-spacing:.18em}
h1{font-size:clamp(1.7rem,8vw,2.8rem)}
.countdown{width:100%;justify-content:space-between;gap:.55rem}
.countdown div{min-width:0}
.countdown b{font-size:clamp(1rem,5vw,1.5rem)}
.countdown small{font-size:.4rem;letter-spacing:.07em}
.countdown i{height:2.2rem}
}

/* Mobile/Tablet landscape: static hero, enough document height, vertical scrolling enabled. */
@media(max-width:960px) and (orientation:landscape){
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
.hero{height:auto;min-height:620px;overflow:hidden}
.bg{transform:scale(1.06)!important;transition:none!important;will-change:auto}
.intro{top:30px}
.launch{bottom:30px}
}