.front-hero{
  --night:#0D0A14; --night2:#160F22; --fire:#FF5A1F; --ember:#FFB23E; --ice:#36B3FF; --frost:#CDEFFF; --gold:#E7B04B; --text:#F4EEF8; --muted:#B9AFC6;
  --display:"Cinzel","Trajan Pro",Georgia,serif; --body:"Barlow","Segoe UI",system-ui,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;
}
@media (prefers-color-scheme:light){
.front-hero:not([data-theme="dark"]){--night:#0D0A14}}
.front-hero[data-theme="light"]{--night:#0D0A14}
.front-hero *,.front-hero *::before,.front-hero *::after{box-sizing:inherit}
.front-hero{scroll-padding-top:env(safe-area-inset-top,0px)}
.front-hero{margin:0;background:var(--night);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.front-hero img{max-width:100%;display:block}
.front-hero a{color:inherit}
.front-hero :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.front-hero h1,.front-hero h2,.front-hero h3{font-family:var(--display);font-weight:900;letter-spacing:.02em;margin:0}
.front-hero .front-store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:10px 22px 10px 16px;border-radius:14px;background:#000;color:#fff;text-decoration:none;border:2px solid rgba(255,255,255,.25);transition:transform .2s,border-color .2s,box-shadow .2s}
.front-hero .front-store:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 30px rgba(231,176,75,.25)}
.front-hero .front-store svg{width:28px;height:28px;flex:none}
.front-hero .front-store small{display:block;font-size:.72rem;opacity:.8;line-height:1}
.front-hero .front-store b{display:block;font-size:1.15rem;line-height:1.15}
.front-hero .front-stores{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.front-hero .front-bar{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 10px) clamp(16px,3vw,32px) 10px;transition:background .3s}
.front-hero .front-bar.front-solid{background:rgba(13,10,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.front-hero .front-bar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:900;font-size:1.05rem;letter-spacing:.04em}
.front-hero .front-bar__brand img{width:40px;height:40px;border-radius:10px}
.front-hero .front-bar nav{display:flex;gap:4px}
.front-hero .front-bar nav a{text-decoration:none;font-weight:700;padding:10px 14px;border-radius:10px;opacity:.85}
.front-hero .front-bar nav a:hover{opacity:1;background:rgba(255,255,255,.08)}
.front-hero .front-bar .front-play{background:linear-gradient(180deg,#FFC65C,#E7932A);color:#2A1300;opacity:1;box-shadow:0 4px 0 #9A5A12}
@media (max-width:760px){
.front-hero .front-bar nav a:not(.front-play){display:none}
.front-hero .front-bar__brand span{display:none}}
.front-hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;--s:50}
.front-hero .front-side{position:absolute;inset:0}
.front-hero .front-side--ice{background:radial-gradient(ellipse at 75% 60%,#1B6FD6 0%,#0B2A6B 38%,#060D24 75%)}
.front-hero .front-side--fire{background:radial-gradient(ellipse at 25% 60%,#E2470F 0%,#6B1606 38%,#1A0503 75%);clip-path:polygon(0 0,calc(var(--s)*1% + 5%) 0,calc(var(--s)*1% - 5%) 100%,0 100%)}
.front-hero .front-seam{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.front-hero .front-seam line{stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #FFB23E)}
.front-hero #front-fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.front-hero .front-layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.front-hero .front-ch{position:absolute;bottom:0;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.front-hero .front-ch img{width:100%;animation:front-breathe 4.5s ease-in-out infinite}
@keyframes front-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.front-hero .front-far .front-ch{opacity:.55;filter:blur(2px) brightness(.7)}
.front-hero__title{position:absolute;z-index:6;left:0;right:0;top:clamp(76px,11vh,110px);text-align:center;padding:0 16px;will-change:transform}
.front-hero__icon{width:clamp(84px,9vw,120px);margin:0 auto 10px;border-radius:24px;box-shadow:0 0 0 3px rgba(231,176,75,.6),0 0 40px rgba(255,178,62,.5),0 0 60px rgba(54,179,255,.4);animation:front-iconIn 1s .2s cubic-bezier(.2,1.3,.4,1) both}
@keyframes front-iconIn{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
.front-hero h1{font-size:clamp(2.6rem,7.4vw,6.4rem);line-height:.95;text-transform:uppercase;background:linear-gradient(90deg,#FFD27A 0%,#FF7A2A 38%,#FFF 50%,#6FCBFF 62%,#BDEBFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.5));animation:front-rise .9s .5s both}
.front-hero__tag{font-weight:700;font-size:clamp(1.05rem,1.8vw,1.35rem);margin:10px 0 0;text-shadow:0 2px 8px rgba(0,0,0,.6);animation:front-rise .9s .7s both}
@keyframes front-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.front-hero .front-leader{position:absolute;z-index:5;left:50%;bottom:-2%;width:clamp(260px,30vw,440px);translate:-50% 0;will-change:transform;pointer-events:none}
.front-hero .front-leader::before{content:"";position:absolute;left:5%;top:0;width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,190,80,.75),rgba(255,90,31,0) 70%);animation:front-pulse 2.2s ease-in-out infinite}
@keyframes front-pulse{0%,100%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.front-hero .front-leader img{position:relative;width:100%;animation:front-breathe 4s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(255,120,40,.55))}
.front-hero__cta{position:absolute;z-index:7;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;animation:front-rise .9s .9s both}
.front-hero__cta .front-stores{background:rgba(13,10,20,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px;border-radius:20px}
.front-hero .front-pick{position:absolute;z-index:6;top:50%;font-family:var(--display);font-weight:900;font-size:clamp(.9rem,1.4vw,1.15rem);letter-spacing:.2em;text-transform:uppercase;opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.front-hero .front-pick--fire{left:clamp(16px,4vw,60px);color:var(--ember)}
.front-hero .front-pick--ice{right:clamp(16px,4vw,60px);color:var(--frost)}
@media (max-width:760px){
.front-hero .front-pick{display:none}
.front-hero .front-leader{width:min(78vw,340px);bottom:90px}
.front-hero__cta .front-stores{flex-direction:column;gap:8px}
.front-hero__cta .front-store{min-height:48px}}
.front-hero{min-height:0}
@media (max-width:600px){
  .front-hero{height:100svh;min-height:520px}
  .front-hero__title{top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 16px)}
  .front-hero__icon{width:76px;border-radius:18px}
  .front-hero .front-leader{width:min(66vw,300px)}
  .front-hero .front-far .front-ch{width:48vw!important}
  .front-hero .front-mid .front-ch{width:38vw!important}
}
@media (max-height:600px) and (min-width:601px){
  .front-hero{min-height:400px}
  .front-hero__title{top:calc(var(--nav-h) + 12px)}
  .front-hero__icon{width:64px}
  .front-hero .front-leader{width:min(30vw,240px)}
}
@media (max-width:760px){
.front-hero .front-leader{bottom:-2%}}
@media (prefers-reduced-motion:reduce){
.front-hero *,.front-hero *::before,.front-hero *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}