/* 33 Helios — shared premium FX (all pages) */

body.fx-page{background:var(--bg);}
body.fx-page > *:not(.fx-mesh):not(.fx-beam){position:relative;z-index:2;}
.fx-mesh,.fx-beam{position:fixed;inset:0;pointer-events:none;z-index:1;}
.fx-mesh{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 100% 80% at 10% 5%,rgba(148,163,184,.55) 0%,transparent 55%),
    radial-gradient(ellipse 80% 60% at 92% 12%,rgba(71,85,105,.4) 0%,transparent 50%),
    radial-gradient(ellipse 70% 65% at 50% 100%,rgba(59,130,246,.38) 0%,transparent 55%),
    radial-gradient(ellipse 60% 50% at 68% 48%,rgba(55,65,81,.28) 0%,transparent 50%);
  animation:fxMesh 20s ease-in-out infinite alternate;
}
@keyframes fxMesh{
  0%{transform:translate(0,0) scale(1);}
  33%{transform:translate(2%,1%) scale(1.015);}
  66%{transform:translate(-1%,2%) scale(1.01);}
  100%{transform:translate(1%,-1%) scale(1.02);}
}
/* Grid off by default — optional whisper via .fx-grid-show on body */
.fx-grid{display:none;}
body.fx-grid-show .fx-grid{
  display:block;
  opacity:.05;
  background-image:
    linear-gradient(rgba(100,116,139,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,116,139,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 30%,#000 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 30%,#000 10%,transparent 75%);
}
.fx-beam{
  background:linear-gradient(108deg,transparent 35%,rgba(148,163,184,.12) 44%,rgba(59,130,246,.22) 50%,rgba(148,163,184,.12) 56%,transparent 65%);
  animation:fxBeam 10s ease-in-out infinite;
}
@keyframes fxBeam{0%,100%{transform:translateX(-10%) skewY(-3deg);opacity:.55}50%{transform:translateX(10%) skewY(-3deg);opacity:1}}

.hero,.prod-hero{position:relative;overflow:hidden;}
.hero-glows{position:absolute;inset:-20% 0;pointer-events:none;z-index:0;overflow:visible;}
.hero-glow{position:absolute;border-radius:50%;filter:blur(56px);will-change:transform;mix-blend-mode:multiply;}
.hero-glow-1{width:min(520px,65vw);height:min(520px,65vw);background:rgba(148,163,184,.65);top:-18%;left:-12%;animation:fxFloat1 14s ease-in-out infinite;}
.hero-glow-2{width:min(440px,55vw);height:min(440px,55vw);background:rgba(59,130,246,.5);top:0;right:-15%;animation:fxFloat2 17s ease-in-out infinite;}
.hero-glow-3{width:min(360px,48vw);height:min(360px,48vw);background:rgba(71,85,105,.55);bottom:-8%;left:22%;animation:fxFloat3 12s ease-in-out infinite;}
@keyframes fxFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(48px,36px) scale(1.12)}}
@keyframes fxFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-42px,32px) scale(1.1)}}
@keyframes fxFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.08)}}
.hero > .wrap,.prod-hero > .wrap,.prod-hero .ph-inner{position:relative;z-index:1;}

.fx-section{position:relative;isolation:isolate;transition:box-shadow .6s ease;}
.fx-section.fx-lit{box-shadow:inset 0 48px 80px -60px rgba(59,130,246,.12);}
.fx-section::before{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%) scaleX(0);
  width:min(920px,94vw);height:2px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.45),rgba(148,163,184,.5),rgba(59,130,246,.45),transparent);
  transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .6s ease;
  pointer-events:none;z-index:3;
}
.fx-section.fx-lit::before{transform:translateX(-50%) scaleX(1);opacity:1;}
.fx-section::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 90% 55% at 50% 0%,rgba(59,130,246,.14) 0%,transparent 68%);
  opacity:0;transition:opacity .7s ease;
}
.fx-section.fx-lit::after{opacity:1;}
.fx-section > .wrap,.fx-section > .rev-outer{position:relative;z-index:1;}

.fx-card{
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,border-color .4s ease,background .4s ease,filter .5s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease;
  will-change:transform;
}
.fx-card[data-fx-depth]{
  transform:translate3d(0,calc(var(--fx-par,0px) + var(--fx-lift,0px)),0);
}
.fx-card[data-fx-depth]:hover,.fx-card.fx-card-hover:hover{
  --fx-lift:-12px;
  transform:translate3d(0,calc(var(--fx-par,0px) - 12px),0) scale(1.015);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-color:rgba(99,102,241,.25)!important;
  box-shadow:0 28px 60px rgba(59,130,246,.14),0 12px 32px rgba(55,65,81,.1),0 0 0 1px rgba(255,255,255,.7)!important;
}
.f-card.fx-card:hover,.price-card.fx-card:hover,.cu-card.fx-card:hover,.pp-card.fx-card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 24px 48px rgba(59,130,246,.12),var(--shadow-lg)!important;
}
.r-card.fx-card:hover{transform:scale(1.04) translateZ(0);box-shadow:0 16px 40px rgba(59,130,246,.12)!important;}

.fx-stack-scroll{perspective:1400px;perspective-origin:50% 30%;}
.fx-stack-scroll > *{
  position:relative;
  transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .6s ease,box-shadow .6s ease,filter .5s ease;
  transform:translate3d(0,48px,0) scale(.94) rotateX(6deg);
  opacity:.55;
  transform-origin:center top;
}
.fx-stack-scroll.fx-active > *{opacity:.72;transform:translate3d(0,32px,0) scale(.96) rotateX(4deg);}
.fx-stack-scroll.fx-active > .fx-stack-top{
  opacity:1;
  transform:translate3d(0,-18px,0) scale(1.04) rotateX(0deg);
  z-index:10;
  box-shadow:0 32px 64px rgba(59,130,246,.16),0 16px 40px rgba(26,23,20,.1),0 0 1px rgba(99,102,241,.12);
  filter:none;
}

.tech-sec,.fx-ai-target{position:relative;overflow:hidden;}
.fx-neural{position:absolute;inset:0;width:100%;height:100%;opacity:.7;pointer-events:none;z-index:0;}

body.fx-page .ap{
  opacity:0!important;
  filter:blur(6px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1),filter .85s ease!important;
}
body.fx-page .ap.vis{
  opacity:1!important;
  filter:blur(0)!important;
  transform:translate3d(0,0,0)!important;
}
body.fx-page .ap:not(.fade):not(.vis){transform:translate3d(0,56px,0)!important;}
body.fx-page .ap.fade:not(.vis){transform:translate3d(0,24px,0)!important;}

.hero-panel.fx-card{animation:fxPanelFloat 7s ease-in-out infinite;}
@keyframes fxPanelFloat{0%,100%{transform:translate3d(0,var(--fx-par,0),0)}50%{transform:translate3d(0,calc(var(--fx-par,0px) - 8px),0)}}

.prods-grid.fx-stack-scroll > .p-card:nth-child(1):not(.fx-stack-top){transform:translate3d(-8px,36px,0) scale(.95) rotateX(5deg) rotateY(-2deg);}
.prods-grid.fx-stack-scroll > .p-card:nth-child(2):not(.fx-stack-top){transform:translate3d(8px,36px,0) scale(.95) rotateX(5deg) rotateY(2deg);}
.port-grid.fx-stack-scroll > *:nth-child(1):not(.fx-stack-top){transform:translate3d(0,40px,0) scale(.94) rotateX(5deg);}
.port-grid.fx-stack-scroll > *:nth-child(2):not(.fx-stack-top){transform:translate3d(0,48px,0) scale(.93) rotateX(6deg);}
.port-grid.fx-stack-scroll > *:nth-child(3):not(.fx-stack-top){transform:translate3d(0,56px,0) scale(.92) rotateX(7deg);}
.phil-grid.fx-stack-scroll > *:not(.fx-stack-top){transform:translate3d(0,38px,0) scale(.95) rotateX(5deg);}

@media (prefers-reduced-motion:reduce){
  .fx-mesh,.fx-beam,.hero-glow,.hero-panel.fx-card{animation:none!important;}
  .fx-neural{display:none!important;}
  body.fx-page .ap,body.fx-page .ap:not(.fade){opacity:1!important;filter:none!important;transform:none!important;transition:none!important;}
  .fx-stack-scroll > *,.fx-stack-scroll.fx-active > *{transform:none!important;opacity:1!important;filter:none!important;}
  .fx-card[data-fx-depth],.fx-card[data-fx-depth]:hover,.fx-card:hover{transform:none!important;}
  .fx-section.fx-lit{box-shadow:none!important;}
  .fx-section::before{transform:translateX(-50%) scaleX(1)!important;}
}