/* Hero particle field — desktop background + dedicated mobile wordmark */
.hero{isolation:isolate;}
.hero-shader{
  position:absolute;
  z-index:1;
  inset:-2% -7% -2% 30%;
  width:82%;
  height:104%;
  pointer-events:none;
  opacity:1;
  filter:saturate(1.30) contrast(1.11) drop-shadow(0 0 6px rgba(45,132,255,.16));
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 7%,#000 15%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 7%,#000 15%,#000 100%);
}
.hero-particle-mobile{display:none;}
.hero::after{display:none;}
.hero-copy{position:relative;z-index:4;}
.product-window{
  position:relative;
  z-index:3;
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(5px) saturate(108%);
  backdrop-filter:blur(5px) saturate(108%);
  box-shadow:0 18px 48px rgba(17,35,62,.075);
}
.product-window .window-bar{background:rgba(250,251,253,.88);}
.product-window .workspace-sidebar{background:rgba(247,249,252,.88);}
.product-window .workspace-main{background:rgba(255,255,255,.74);}

@media(max-width:1050px){
  .hero-shader{
    inset:-2% -8% auto 22%;
    width:90%;
    height:63%;
    opacity:.90;
    filter:saturate(1.28) contrast(1.10);
    mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 100%);
  }
  .product-window{background:rgba(255,255,255,.94);}
}

@media(max-width:620px){
  .hero-shader{display:none;}
  .hero-particle-mobile{
    display:block;
    position:relative;
    width:calc(100% + 8px);
    height:164px;
    margin:14px -4px 13px;
    overflow:hidden;
    pointer-events:none;
  }
  .hero-shader-mobile{
    display:block;
    width:100%;
    height:100%;
    opacity:1;
    filter:saturate(1.34) contrast(1.22) brightness(1.03) drop-shadow(0 0 5px rgba(45,132,255,.16));
    transform:translateZ(0);
    backface-visibility:hidden;
    will-change:transform;
    mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%);
  }
  .page-lead{margin-top:0;}
  .product-window{
    background:#fff;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@media(max-width:420px){
  .hero-particle-mobile{
    height:154px;
    margin-top:13px;
    margin-bottom:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-shader{opacity:.78;filter:saturate(1.22) contrast(1.08);}
  .hero-shader-mobile{filter:saturate(1.18) contrast(1.12) brightness(1.02);}
}