/*
  Syslock.cl hero atmosphere aligned to ZopiTech home reference (2026-11-06).
  ZopiTech: night #0B0A17, mid #2A1D46, glow #6E39E7;
  filmed footage opacity .67, grayscale .48, saturation .61, contrast .91,
  brightness .87 and blur .6px. Keep Syslock's ruby identity in highlights.
*/
body.light-palette section.hero{
 --hero-night:#0B0A17;
 --hero-mid:#2A1D46;
 --hero-glow:#6E39E7;
 background:
  radial-gradient(ellipse at 65% 87%,
   color-mix(in srgb,var(--hero-glow),transparent 10%),
   var(--hero-mid) 35%,transparent 64%),
  linear-gradient(110deg,var(--hero-night),var(--hero-mid) 73%,var(--hero-night))!important;
 border-bottom:0!important;
 isolation:isolate;
}
body.light-palette section.hero > video{
 z-index:0!important;
 opacity:.67!important;
 filter:grayscale(.48) saturate(.61) contrast(.91) brightness(.87) blur(.6px)!important;
 object-position:center 50%!important;
}
/* Same ZopiTech two-stage dark violet veil instead of the old white/red overlay. */
body.light-palette section.hero > .shade{
 z-index:1!important;
 background:
  linear-gradient(90deg,
   color-mix(in srgb,var(--hero-night) 92%,transparent) 0%,
   color-mix(in srgb,var(--hero-night) 76%,transparent) 47%,
   color-mix(in srgb,var(--hero-mid) 59%,transparent) 100%),
  linear-gradient(0deg,
   color-mix(in srgb,var(--hero-night) 48%,transparent),
   transparent 62%)!important;
 pointer-events:none;
}
body.light-palette section.hero > .mesh{
 opacity:0!important;
 pointer-events:none;
}
body.light-palette section.hero > .wrap{
 z-index:2;
}
body.light-palette section.hero h1{
 color:#FFFFFF!important;
}
body.light-palette section.hero h1 em{
 color:#F4B7C1!important;
}
body.light-palette section.hero .tag{
 color:#F6EAF9!important;
}
body.light-palette section.hero p{
 color:#E3DAED!important;
}
body.light-palette section.hero .hero-foot,
body.light-palette section.hero .hero-foot .wrap{
 color:#D8CAE2!important;
}
body.light-palette section.hero .hero-foot .wrap{
 border-top-color:rgba(235,221,244,.32)!important;
}
@media(max-width:760px){
 body.light-palette section.hero > .shade{
  background:
   linear-gradient(90deg,rgba(11,10,23,.93) 0%,
    rgba(18,13,35,.81) 55%,rgba(42,29,70,.68) 100%),
   linear-gradient(0deg,rgba(11,10,23,.40),transparent 60%)!important;
 }
}
@media(prefers-reduced-motion:reduce){
 body.light-palette section.hero{
  background:linear-gradient(110deg,#0B0A17,#2A1D46 73%,#0B0A17)!important;
 }
}