/* Only Header and the reference Hero. Existing page/content styles stay in site.css. */
@font-face{font-family:RanHandwriting;src:url('/images/ui/header-hero/Charm-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.header{background:linear-gradient(110deg,#04121a,#071a25);position:relative;z-index:5;min-height:76px}
.header .nav-shell{max-width:1520px;width:calc(100% - 48px);min-height:76px;gap:18px}
.header .brand{flex:0 0 172px;align-self:center;position:relative;z-index:2}
.header .brand img{display:block;width:172px;height:auto;margin:-12px 0 -27px}
.header .nav-panel{gap:3px}
.header .nav-panel>a,.header .nav-panel>.nav-soon{font-size:14px;padding:10px 11px;white-space:nowrap}
.header .nav-panel>a.active{background:linear-gradient(#ff258f,#ee0065);box-shadow:0 4px 15px #ff007444;border-radius:24px}
.header .nav-actions{gap:8px;margin-left:auto}
.header .nav-actions .button{font-size:14px;white-space:nowrap;padding:11px 23px;border-radius:25px}
.reference-hero{height:650px;background:linear-gradient(180deg,#bde5ff 0%,#eef8ff 80%,#f2f6fb 100%);overflow:hidden}
.reference-hero:after{background:linear-gradient(0deg,#f2f6fb,transparent 10%);z-index:2}
.reference-hero .hero-stage{position:relative;width:min(100%,1360px);height:100%;margin:0 auto}
.reference-hero .hero-art{position:absolute;inset:0;display:block;width:100%;height:auto}
.reference-hero .hero-art img{width:100%;height:auto;display:block;object-fit:initial;object-position:initial;opacity:1}
.reference-hero .hero-mobile-portraits{display:none}
.reference-hero .hero-center{position:relative;z-index:3;width:580px;max-width:52%;margin:0 auto;padding-top:44px;text-align:center}
.reference-hero h1{margin:0 auto 4px}
.reference-hero h1 img{display:block;width:360px;max-width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 6px 12px #102f4020)}
.reference-hero .hero-tagline{font-family:RanHandwriting,cursive;font-size:32px;font-weight:400;line-height:1.4;letter-spacing:0;color:#007add;margin:3px -35px 16px;white-space:nowrap;text-shadow:0 1px 3px #fff,0 0 12px #fff}
.reference-hero .hero-tagline em{font-family:inherit;font-size:34px;font-weight:400;font-style:normal;color:#f20985}
.reference-hero .hero-features{display:grid;grid-template-columns:repeat(3,1fr);width:400px;max-width:100%;padding:0;margin:12px auto 22px;background:none;box-shadow:none;border:0;border-radius:0}
.reference-hero .hero-features>div{padding:0 10px}
.reference-hero .hero-features>div+div{border-left:1px solid #bccedd70}
.reference-hero .hero-features svg{width:38px;height:38px;margin:0 auto 7px;color:#09acf1}
.reference-hero .hero-features>div:nth-child(2) svg{color:#ffbe23}
.reference-hero .hero-features>div:nth-child(3) svg{color:#ee27c3}
.reference-hero .hero-features strong{font-size:15px;line-height:1.5;color:#173961;text-shadow:0 1px 5px #fff}
.reference-hero .hero-features small{font-size:10px;line-height:1.8;color:#52687c}
.reference-hero .hero-cta{min-width:265px;padding:15px 28px;border-radius:40px;font-size:27px;line-height:1.3;background:linear-gradient(180deg,#ff258f,#f9006a);box-shadow:0 7px 25px #ff007440, inset 0 1px 0 #ffffff66}
.reference-hero .hero-cta svg{width:25px;height:25px}
.reference-hero .hero-caption{font-size:10px;line-height:1.6;color:#ea0871;margin:16px 0 0;letter-spacing:.4px}
.reference-hero .hero-caption span{color:#243443;font:10px Arial,sans-serif}
.reference-hero .hero-caption b{padding:0 6px}
.reference-hero .hero-aside{font:400 26px/1.1 RanHandwriting,cursive;color:#0077db;position:absolute;z-index:3;margin:0;text-shadow:0 2px 6px white;transform:rotate(-7deg)}
.reference-hero .hero-aside-left{left:22px;top:78px}
.reference-hero .hero-aside-right{right:22px;top:75px;transform:rotate(5deg)}
@media(max-width:1280px){
 .header .nav-shell{width:calc(100% - 36px);gap:14px}
 .header .menu-toggle{display:grid;margin-left:auto}
 .header .nav-panel{display:none;position:absolute;top:100%;left:0;right:0;background:#071a25;padding:16px 20px;box-shadow:0 15px 20px #07172233}
 .header .nav-panel.open{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
 .header .nav-actions{margin-left:0}
 .reference-hero{height:620px}
 .reference-hero .hero-center{padding-top:20px;max-width:54%}
 .reference-hero h1 img{width:330px}
 .reference-hero .hero-tagline{font-size:28px;margin-left:-30px;margin-right:-30px}
 .reference-hero .hero-tagline em{font-size:30px}
 .reference-hero .hero-aside{font-size:23px;top:60px}
}
@media(max-width:850px){
 .reference-hero .hero-aside{display:none}
 .reference-hero{height:620px}
 .reference-hero .hero-center{padding-top:28px;max-width:65%;width:490px}
 .reference-hero h1 img{width:285px}
 .reference-hero .hero-tagline{font-size:25px;margin:0 -20px 14px}
 .reference-hero .hero-tagline em{font-size:27px}
}
@media(max-width:640px){
 .header{min-height:72px}
 .header .nav-shell{min-height:72px;width:calc(100% - 24px);gap:8px}
 .header .brand{flex-basis:98px}
 .header .brand img{width:98px;margin:0}
 .header .menu-toggle{width:34px;height:34px;padding:6px}
 .header .nav-actions{gap:6px}
 .header .nav-actions .button{font-size:12px;padding:9px 11px}
 .header .nav-panel>a,.header .nav-panel>.nav-soon{font-size:15px;padding:11px 12px}
 .reference-hero{height:745px;background:linear-gradient(#c4e8ff,#f5fbff 44%,#f2f6fb)}
 .reference-hero .hero-stage{width:100%}
 .reference-hero .hero-art{display:none}
 .reference-hero .hero-mobile-portraits{display:flex;position:absolute;inset:0 0 auto;height:295px;overflow:hidden}
 .reference-hero .hero-mobile-portraits>div{width:50%;height:100%;background-image:url('/images/ui/header-hero/scene-arm-fixed.webp');background-size:calc(100vw * 1.8) auto;background-repeat:no-repeat}
 .reference-hero .portrait-girl{background-position:calc(100vw * -.12) 0}
 .reference-hero .portrait-boy{background-position:calc(100vw * -1.11) 0}
 .reference-hero .hero-mobile-portraits:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#f5fbff,transparent 25%);pointer-events:none}
 .reference-hero .hero-center{width:100%;max-width:none;padding:260px 14px 0}
 .reference-hero h1{margin:0 0 1px}
 .reference-hero h1 img{width:235px;height:auto}
 .reference-hero .hero-tagline{white-space:normal;font-size:26px;line-height:1.25;margin:0 0 14px}
 .reference-hero .hero-tagline span{display:block}
 .reference-hero .hero-tagline em{display:block;font-size:29px}
 .reference-hero .hero-features{width:340px;margin:12px auto 19px;padding:0;background:none;border-radius:0}
 .reference-hero .hero-features>div{padding:0 5px}
 .reference-hero .hero-features svg{width:32px;height:32px;margin-bottom:6px}
 .reference-hero .hero-features strong{font-size:13px}
 .reference-hero .hero-features small{font-size:8px}
 .reference-hero .hero-cta{min-width:240px;font-size:24px;padding:14px 25px}
 .reference-hero .hero-caption{font-size:9px;margin-top:15px;letter-spacing:0}
 .reference-hero .hero-caption span{font-size:9px}
 .reference-hero .hero-caption b{padding:0 3px}
}

/* Local arm repair: keep the logo off the raised forearm; preserve all Header rules. */
@media(min-width:641px){.reference-hero h1 img{position:relative;left:-40px}.reference-hero .hero-features{margin-top:50px}}
.server-strip .server-online-status{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.server-online-status .server-online-dot{width:13px;height:13px;flex:0 0 13px;border-radius:50%;background:#25e34b;box-shadow:0 0 16px #25e34b80}
.server-online-status strong{display:block;font-size:15px;line-height:1.6;white-space:nowrap}
.server-online-status strong b{color:#41ef64;font-weight:800}
.server-online-status small{display:block;font-size:10px;color:#afc0cd}
@media(max-width:640px){
 .reference-hero .hero-mobile-portraits>.portrait-boy{background-size:calc(100vw * 1.63) auto;background-position:calc(100vw * -.94) 0}
 .reference-hero .hero-features{margin-top:46px}
 .server-strip .server-online-status{flex-basis:100%;padding-bottom:12px;border-bottom:1px solid #314957}
}

/* Full-width desktop: show the original 2:1 scene without top/side cropping. */
@media(min-width:1281px){
 .reference-hero{height:max(650px,50vw)}
 .reference-hero .hero-stage{width:100%;max-width:none}
 /* Add half of the additional scene height above the existing center group. */
 .reference-hero .hero-center{padding-top:max(44px,calc(25vw - 296px))}
 /* Widen only the status strip, keeping the rest of Home in its existing container. */
 .reference-hero+.home-content>.server-strip{position:relative;left:50%;transform:translateX(-50%);width:calc(100vw - 48px);max-width:none;box-sizing:border-box}
}