/* XERICORE home hero: laptop + cyber shield artwork, left side behind the title (static) */
section.hero>.container{position:relative;z-index:3}
.hero-laptop{position:absolute;z-index:1;top:16px;left:3%;width:min(390px,30vw);pointer-events:none;user-select:none;opacity:.6;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 80%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 80%,transparent 100%);
mask-composite:intersect}
.hero-laptop img{display:block;width:100%;height:auto}
@media (max-width:900px){.hero-laptop{left:50%;transform:translateX(-50%);top:1rem;width:min(340px,86vw);opacity:.25}}

/* BRIGHT-V1: brighter map + hero */
.hero-laptop{opacity:.72}
.home-map canvas{filter:brightness(1.5) saturate(1.2) contrast(1.05)}
@media (min-width:900px){
html body .home-map-shade{background:linear-gradient(90deg,rgba(5,8,12,.6) 0%,rgba(5,8,12,.34) 14%,rgba(5,8,12,.1) 30%,rgba(5,8,12,0) 44%)!important}
}
.hero::before{background:radial-gradient(ellipse at 30% 50%,rgba(0,212,255,.22) 0%,rgba(0,212,255,.09) 35%,transparent 70%)}
html body .hero .stat-label{color:#c3d2e3!important}

/* PILL-V1: Cyber Arena pill lower, clear of the laptop (desktop only) */
@media (min-width:900px){
html body .home-map-chip{margin-top:2.9rem!important}
}

/* ALIGN-V1: keep the laptop lined up with the title on wide screens */
@media (min-width:1200px){
.hero-laptop{left:max(3%,calc((100% - var(--container-max,1280px)) / 2 + 1rem))}
}

/* TITLE-V1: laptop as a quiet backdrop, title stays the focal point */
.hero-laptop{opacity:.42}
html body .hero .hero-title{filter:drop-shadow(0 2px 16px rgba(2,8,16,.9)) drop-shadow(0 0 3px rgba(2,8,16,.7))}

/* 3D-V1: laptop turned toward the map (desktop only, static) */
@media (min-width:901px){
.hero-laptop{transform:perspective(1100px) rotateY(24deg) rotateX(3deg);transform-origin:50% 50%;opacity:.5}
}

/* EDGE-V1: laptop's left edge lines up with the start of the title (desktop) */
@media (min-width:901px){
.hero-laptop{--hl-w:min(390px,30vw);width:var(--hl-w);
left:calc((100% - min(100%, var(--container-max,1280px))) / 2 + var(--space-8,2rem) - var(--hl-w) * 0.1071);
transform-origin:10.71% 50%}
}

/* TITLE-SIZE-V1: smaller, lighter title (desktop only) */
@media (min-width:901px){
html body .hero .hero-title{font-size:clamp(1.8rem,3.1vw,2.5rem)!important;line-height:1.12!important}
html body .hero .hero-title,html body .hero .hero-title .title-accent{font-weight:700!important}
html body .home-map-chip{margin-top:4.3rem!important}
}

/* CLEAR-V1: title sits over the keyboard, laptop screen stays clear (desktop only) */
@media (min-width:901px){
.hero-laptop{--hl-w:min(320px,26vw);top:8px;opacity:.6}
html body .hero .hero-title{position:relative!important;top:4.4rem!important}
}

/* PERFECT-V1: final spacing + brightness (desktop only) */
@media (min-width:901px){
.hero-laptop{opacity:.78}
html body .hero .hero-title{top:3.9rem!important}
html body .home-map-chip{margin-top:3.5rem!important}
}

/* DEPTH-V1: laptop in front, title tucked behind it (desktop only) */
@media (min-width:901px){
.hero-laptop{z-index:4;opacity:1;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 100%);
mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 100%)}
.hero-laptop img{filter:drop-shadow(0 16px 14px rgba(2,8,16,.75))}
html body .hero .hero-title{top:3.3rem!important}
}

/* BANNER-V1: laptop only with the map; banner mode keeps the original title spacing */
body.has-banner-slider .hero-laptop{display:none!important}
html body.has-banner-slider .hero .hero-title{top:0!important}

/* BACK-V1: laptop returns in banner mode (desktop); title tucks under its base but stays readable */
@media (min-width:901px){
body.has-banner-slider .hero-laptop{display:block!important}
.hero-laptop{--hl-w:min(290px,24vw)}
html body .hero .hero-title,
html body.has-banner-slider .hero .hero-title{top:4.6rem!important}
}

/* FIX-V1: banner mode - laptop ends above the title, no overlap (desktop only) */
@media (min-width:901px){
html body.has-banner-slider .hero-laptop{--hl-w:min(245px,20vw);top:4px}
}

/* PILL-V2: a little more room between the title and the Cyber Arena pill (desktop) */
@media (min-width:901px){html body .home-map-chip{margin-top:4rem!important}}

/* PILL-V3: Cyber Arena pill sits beside the laptop, level with its base (desktop).
   left = laptop width x 0.86 + 24px;  margin-top = how far above the bottom of the title block (more negative = higher) */
@media (min-width:901px){
html body .hero-content .home-map-chip{left:calc(min(245px, 20vw) * 0.861 + 24px)!important;margin-top:-5.4rem!important;white-space:nowrap!important}
}

/* MOBILE-V1: phones - one flat dark base, panels in one style, clear primary and secondary buttons */
@media (max-width:899px){
html body .hero::before{display:none!important}
html body .home-map-shade{background:none!important}
html body .hero .home-map-chip,
html body .hero .hero-stats-card{background:#0a1018!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;box-shadow:none!important}
html body .hero .hero-stats-card .stat-label{color:#b4bfcc!important}
html body .hero .hero-cta .btn-primary{box-shadow:none!important}
html body .hero .hero-cta .btn-outline{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.34)!important;color:#fff!important}
}