:root{
  --word:#ffffff; --w:#ffffff; --m:#f5773a; --i:#e23b8a; --x:#3b82e6; --scrim:8,6,26;
  --pad:clamp(1.5rem,6vw,5rem); --pad-y:clamp(1.5rem,5vh,4rem);
  --logo-w:clamp(112px,13vw,180px);
  --logo-ar:0.87;
  --wm:clamp(2.4rem,8.4vw,6.25rem);
  --tg:clamp(.84rem,2vw,1.45rem);
  --mgap:clamp(.9rem,2.2vw,1.8rem);
  --wgap:clamp(.4rem,.9vw,.8rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Baloo 2",system-ui,sans-serif;background:#0e0b2a;min-height:100svh}
.stage{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--pad-y)+env(safe-area-inset-top)) calc(var(--pad)+env(safe-area-inset-right)) calc(var(--pad-y)+env(safe-area-inset-bottom)) calc(var(--pad)+env(safe-area-inset-left));
  background:url('images/background.jpg') center/cover no-repeat;isolation:isolate;overflow:hidden}
@media (orientation:portrait){.stage{background-image:url('images/background-portrait.jpg')}}
.stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 56% 52% at 50% 50%,rgba(var(--scrim),.55),transparent 70%)}
.lockup{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--mgap);max-width:100%}
.logobox{display:block;width:var(--logo-w);aspect-ratio:var(--logo-ar);overflow:hidden;flex:none;filter:drop-shadow(0 8px 26px rgba(0,0,0,.45))}
.logomark{display:block;width:100%;height:auto}
.brand{display:flex;flex-direction:column;align-items:center;gap:var(--wgap);min-width:0}
.wordmark{font-weight:700;letter-spacing:-.01em;line-height:1;font-size:var(--wm);color:var(--word);text-shadow:0 3px 30px rgba(0,0,0,.5)}
.tagline{font-weight:600;letter-spacing:0;line-height:1.2;font-size:var(--tg)}
.tagline .w{color:var(--w)}
.tagline .m{color:var(--m)}
.tagline .i{color:var(--i)}
.tagline .x{color:var(--x)}
@media (orientation:portrait){.stage::before{background:radial-gradient(ellipse 70% 40% at 50% 50%,rgba(var(--scrim),.5),transparent 72%)}}
@media (max-width:640px){:root{--logo-w:clamp(100px,26vw,156px);--wm:clamp(2.1rem,12vw,3.4rem);--tg:clamp(.82rem,4vw,1.15rem);--mgap:clamp(.7rem,3.5vw,1.3rem)}}
@media (orientation:landscape) and (max-height:560px){.lockup{gap:clamp(.4rem,1.8vh,.9rem)}:root{--logo-w:clamp(84px,16vh,138px);--wm:clamp(1.8rem,8.5vh,3.2rem);--tg:clamp(.76rem,3.4vh,1.1rem);--pad-y:clamp(.8rem,4vh,1.4rem)}}
@media (prefers-reduced-motion:no-preference){
  .logobox{animation:fade .8s ease both}
  .wordmark{animation:rise .7s cubic-bezier(.2,.7,.2,1) .06s both}
  .tagline{animation:rise .7s cubic-bezier(.2,.7,.2,1) .15s both}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}