@font-face{font-family:'Outfit';src:url('fonts/outfit-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#0d0b22;--deep:#090819;--band:#15122f;--ink:#f6f0ff;--mute:#b4aedb;--mag:#ff3d9a;--cyn:#35e0ff;--org:#ff9a3c;--yel:#ffd23f;
--body:'Outfit','Helvetica Neue',Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.7 var(--body)}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyn);outline-offset:3px}
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);
padding:2.5rem clamp(1.2rem,5vw,4.5rem) 5rem;background:linear-gradient(180deg,var(--deep) 0%,var(--bg) 55%,#24103f 100%)}
.sun{position:absolute;z-index:-1;left:50%;top:50%;width:min(46vw,620px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:.45;
background:linear-gradient(180deg,var(--yel),var(--org) 40%,var(--mag) 80%);
-webkit-mask:linear-gradient(180deg,#000 0 45%,transparent 45% 47%,#000 47% 62%,transparent 62% 65%,#000 65% 76%,transparent 76% 80%,#000 80% 88%,transparent 88% 92%,#000 92%);
mask:linear-gradient(180deg,#000 0 45%,transparent 45% 47%,#000 47% 62%,transparent 62% 65%,#000 65% 76%,transparent 76% 80%,#000 80% 88%,transparent 88% 92%,#000 92%)}
.floor{position:absolute;left:-25%;right:-25%;bottom:0;height:30%;transform:perspective(420px) rotateX(58deg);transform-origin:bottom;opacity:.3;
background:linear-gradient(var(--mag) 2px,transparent 2px) 0 0/100% 46px,linear-gradient(90deg,var(--mag) 2px,transparent 2px) 0 0/70px 100%;
-webkit-mask:linear-gradient(0deg,#000,transparent);mask:linear-gradient(0deg,#000,transparent)}
.copy,.frame{position:relative;z-index:2}
.copy{text-align:center}
h1{margin:0;line-height:0}
.logo{width:min(90%,720px);height:auto;filter:drop-shadow(0 0 16px rgba(255,190,70,.4)) drop-shadow(0 0 46px rgba(255,61,154,.28))}
.tag{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:600;margin:2rem auto 2.2rem;max-width:26ch}
.btn{display:inline-block;padding:.85rem 2rem;border:0;border-radius:999px;font:800 1.1rem var(--body);cursor:pointer;text-decoration:none;
background:linear-gradient(90deg,var(--mag),var(--org));color:#1b0f2e;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.frame{justify-self:center;height:340px;aspect-ratio:9/16}
.frame video,.frame .poster{display:block;width:100%;height:100%;object-fit:cover;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
mask-composite:intersect}

.s{padding:clamp(3rem,8vw,6rem) clamp(1.2rem,5vw,4rem);max-width:1100px;margin:0 auto}
.band{background:var(--band)}
h2{font:800 clamp(1.8rem,4vw,2.7rem)/1.1 var(--body);margin:0 0 1.2rem;letter-spacing:-.01em}
p{max-width:66ch;margin:0 0 1.1rem;color:var(--mute)}
.lead{font-size:1.2rem;color:var(--ink)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.duo{display:flex;gap:1.2rem;justify-content:center}
.duo figure{margin:0;text-align:center}
.duo img{display:block;height:auto;width:clamp(110px,16vw,180px);aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 3px var(--band),0 0 0 5px var(--cyn);opacity:.9}
.duo figure:last-child img{box-shadow:0 0 0 3px var(--band),0 0 0 5px var(--mag)}
.duo figcaption{margin-top:.7rem;font-weight:600;color:var(--mute)}
.roles p{margin-bottom:.8rem}.roles b{color:var(--ink)}
.sound{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.sound div{border-left:4px solid var(--mag);padding-left:1.1rem}
.sound div:nth-child(2){border-color:var(--cyn)}.sound div:nth-child(3){border-color:var(--org)}
h3{margin:0 0 .4rem;font-size:1.25rem}
.human{text-align:center}.human p{margin-inline:auto}
footer{text-align:center;padding:2rem 1rem 3rem;color:var(--mute);font-size:.95rem}
dialog{border:0;border-radius:22px;padding:clamp(1.4rem,4vw,2.2rem);width:min(92vw,620px);background:#17133a;color:var(--ink);box-shadow:0 0 0 2px var(--mag),0 0 60px rgba(255,61,154,.35)}
dialog::backdrop{background:rgba(5,4,16,.78)}
dialog h2{font-size:1.6rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1rem 0}
.grid a{padding:.8rem 1rem;border-radius:12px;background:#241e55;font-weight:600;text-decoration:none;text-align:center;transition:background .15s}
.grid a:hover{background:#352b7a}
.sub{font-weight:800;margin:1.2rem 0 0;color:var(--cyn)}
.or{color:var(--mute);margin:1.2rem 0 1rem;max-width:none}
.x{float:right;background:none;border:0;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer;padding:.2rem .5rem}
@media(max-width:860px){
.hero{grid-template-columns:1fr;padding-top:2rem;gap:1.5rem}
.sun{width:min(80vw,420px)}
.frame{height:auto;width:min(78vw,380px);justify-self:center}
.two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.grid a{transition:none}}
.grid a{display:flex;align-items:center;justify-content:center;gap:.6rem}
.grid svg,.social svg{width:1.3em;height:1.3em;fill:currentColor;flex:none}
.social{display:flex;gap:1.4rem;justify-content:center;margin-bottom:1.2rem}
.social a{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--cyn);color:var(--ink);transition:background .15s}
.social a:hover{background:#241e55}
.social svg{width:1.4rem;height:1.4rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* shift logo block right on wide screens; change 4vw / 90px to adjust */
.copy{left:clamp(0px,4vw,90px)}
@media(max-width:860px){.copy{left:0}}

[hidden]{display:none!important}
.soonmsg{color:var(--ink);font-size:1.2rem;line-height:1.5;max-width:none;margin:1rem 0 1.4rem}