/* MANGO-002B kinetic layer: preserves the bright MANGO-002 architecture while restoring restrained motion and depth. */
:root{
  --ps-action:#ff5a36;
  --ps-signal:#2457d6;
  --ps-navy:#101923;
  --ps-glass:rgba(255,255,255,.64);
}

.hero{
  min-height:100svh;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 44%,#edf4fb 76%,#fff 100%);
}
.hero-media{
  inset:0 0 0 36%;
  opacity:.44;
  filter:saturate(.92) contrast(1.03) brightness(1.06);
  transform:translate3d(calc(var(--kinetic-x,0px) * .5),calc(var(--kinetic-y,0px) * .5),0);
  transition:transform .35s ease-out;
  mix-blend-mode:multiply;
}
.hero-media span{
  inset:-6%;
  transform:scale(1.035);
  animation:hero-cycle 33s infinite, ps-hero-breathe 11s ease-in-out infinite alternate;
  will-change:opacity,transform;
}
.hero-media span:nth-child(2){animation-delay:11s,0s}
.hero-media span:nth-child(3){animation-delay:22s,0s}
.hero-shade{
  background:
    radial-gradient(circle at calc(76% + var(--kinetic-x,0px)) calc(28% + var(--kinetic-y,0px)),rgba(36,87,214,.22),transparent 32%),
    radial-gradient(circle at 90% 70%,rgba(255,90,54,.12),transparent 29%),
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 39%,rgba(248,251,255,.74) 67%,rgba(236,244,251,.7) 100%);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(110deg,transparent 0%,transparent 42%,rgba(36,87,214,.08) 49%,transparent 57%,transparent 100%);
  transform:translateX(-30%);
  animation:ps-field-sweep 13s ease-in-out infinite;
  pointer-events:none;
}
.hero-copy{position:relative}
.hero-copy::after{
  content:"";
  display:block;
  width:min(420px,72vw);
  height:2px;
  margin-top:28px;
  background:linear-gradient(90deg,var(--ps-action),rgba(36,87,214,.5),transparent);
  opacity:.64;
  transform-origin:left;
  animation:ps-line-charge 5.8s ease-in-out infinite;
}

.control-plane{
  position:relative;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  padding:0 0 10px;
  overflow:visible;
}
.control-plane::before{
  content:"";
  position:absolute;
  inset:3% -4% 9%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(36,87,214,.16),rgba(36,87,214,.07) 34%,transparent 67%);
  filter:blur(10px);
  animation:ps-core-glow 8.5s ease-in-out infinite;
}
.plane-head{border-bottom:1px solid rgba(36,87,214,.16);padding:0 0 18px;margin-bottom:4px}
.plane-topology{
  background:radial-gradient(circle at center,rgba(255,255,255,.72),rgba(238,246,255,.36) 38%,transparent 68%);
}
.plane-axis{
  opacity:.18;
  background:linear-gradient(90deg,transparent,rgba(36,87,214,.72),transparent);
}
.plane-axis.axis-y{background:linear-gradient(90deg,transparent,rgba(36,87,214,.72),transparent)}
.plane-orbit{
  border-color:rgba(36,87,214,.22);
  animation:ps-orbit-turn 24s linear infinite;
}
.plane-orbit.orbit-b{animation-duration:34s;animation-direction:reverse}
.plane-core{
  background:rgba(255,255,255,.78);
  border-color:rgba(36,87,214,.34);
  box-shadow:0 18px 58px rgba(36,87,214,.18), inset 0 1px rgba(255,255,255,.86);
  animation:ps-core-float 7s ease-in-out infinite;
}
.plane-core::before{border-color:rgba(36,87,214,.22)}
.plane-node{
  border:0;
  border-top:1px solid rgba(36,87,214,.35);
  background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.28));
  box-shadow:none;
  backdrop-filter:blur(10px);
  animation:ps-node-settle .9s ease both;
}
.plane-node::before{background:var(--ps-signal);animation:ps-pulse 2.8s ease-in-out infinite}
.plane-node:nth-of-type(5)::before,.plane-node:nth-of-type(7)::before{background:var(--ps-action);box-shadow:0 0 16px rgba(255,90,54,.55)}
.plane-readout{
  border-top:1px solid rgba(36,87,214,.14);
  background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.36));
}

.operating-strip{transform:translateY(18px);animation:ps-panel-arrive .9s ease .15s both}
.state-rail{position:relative;overflow:hidden;background:linear-gradient(90deg,#143763,#2457d6 52%,#143763)}
.state-rail::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);
  animation:ps-rail-sweep 9s ease-in-out infinite;
}
.state-rail i:nth-of-type(2){background:var(--ps-action)}

.gallery{align-items:stretch}
.scene{overflow:hidden;box-shadow:0 26px 80px rgba(16,25,35,.14)}
.scene::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0%,transparent 45%,rgba(255,255,255,.22) 50%,transparent 58%,transparent 100%);
  transform:translateX(-120%);
  animation:ps-image-glint 14s ease-in-out infinite;
  pointer-events:none;
}
.scene:nth-child(2)::after{animation-delay:3s}.scene:nth-child(3)::after{animation-delay:6s}
.scene img{filter:saturate(1.06) contrast(1.02);transition:transform .8s ease,filter .8s ease}
.scene:hover img{transform:scale(1.035);filter:saturate(1.18) contrast(1.04)}
.scene-caption{background:linear-gradient(180deg,transparent,rgba(5,10,18,.74) 58%,rgba(5,10,18,.9))}
.scene-caption span{background:#12b981;color:#04100b}.scene-center .scene-caption span{background:var(--ps-action)}

.work-motion{background:linear-gradient(135deg,#f7fbff 0%,#fff 48%,#eaf2fa 100%)}
.work-motion::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 18% 45%,rgba(36,87,214,.12),transparent 30%),radial-gradient(circle at 72% 35%,rgba(255,90,54,.08),transparent 26%);
  pointer-events:none;
}
.work-motion-visual{border-right:0;background:#07111d;box-shadow:0 32px 90px rgba(11,26,44,.16)}
.work-motion-visual::after{
  background:linear-gradient(110deg,transparent 0%,transparent 44%,rgba(255,255,255,.2) 50%,transparent 56%,transparent 100%);
  transform:translateX(-120%);
  animation:ps-image-glint 8.5s ease-in-out infinite;
}
.work-motion-visual img{animation:ps-image-hold 12s ease-in-out infinite alternate}
.work-motion-copy{position:relative;z-index:1}
.capabilities.section-dark{background:radial-gradient(circle at 78% 8%,rgba(36,87,214,.28),transparent 27%),linear-gradient(135deg,#0c1421,#17283f 62%,#101923)}
.capability-card{border-color:rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));transition:transform .25s ease,border-color .25s ease,background .25s ease}
.capability-card:hover{transform:translateY(-4px);border-color:rgba(255,90,54,.5);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045))}
.pressure-card,.output-card{background:linear-gradient(180deg,#fff,rgba(246,249,252,.78));box-shadow:0 18px 42px rgba(16,26,42,.06)}
.pressure-card:nth-child(3n){border-top-color:rgba(255,90,54,.45)}

@keyframes ps-hero-breathe{from{transform:scale(1.035) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-1.1%,.6%,0)}}
@keyframes ps-field-sweep{0%,35%{transform:translateX(-45%);opacity:0}50%{opacity:1}75%,100%{transform:translateX(45%);opacity:0}}
@keyframes ps-line-charge{0%,100%{transform:scaleX(.42);opacity:.36}50%{transform:scaleX(1);opacity:.82}}
@keyframes ps-core-glow{0%,100%{opacity:.54;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
@keyframes ps-orbit-turn{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ps-core-float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-6px)}}
@keyframes ps-pulse{0%,100%{box-shadow:0 0 0 0 rgba(36,87,214,.24),0 0 12px rgba(36,87,214,.78)}50%{box-shadow:0 0 0 7px rgba(36,87,214,.08),0 0 20px rgba(36,87,214,.9)}}
@keyframes ps-panel-arrive{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(18px)}}
@keyframes ps-rail-sweep{0%,42%{transform:translateX(-100%)}58%,100%{transform:translateX(100%)}}
@keyframes ps-image-glint{0%,60%{transform:translateX(-120%)}74%,100%{transform:translateX(120%)}}
@keyframes ps-image-hold{from{transform:scale(1)}to{transform:scale(1.025)}}

@media(max-width:900px){
  .hero-media{inset:38% -12% 0 0;opacity:.22;mix-blend-mode:multiply}
  .control-plane::before{inset:8% -16% 8%}
  .plane-node{background:rgba(255,255,255,.7)}
  .work-motion-visual{border-bottom:0}
}
@media(max-width:560px){
  .hero-copy::after{width:72%;margin-top:22px}
  .plane-head{padding-bottom:12px}
  .plane-topology{background:radial-gradient(circle at center,rgba(255,255,255,.72),rgba(238,246,255,.4) 43%,transparent 72%)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .hero-media,.scene img,.work-motion-visual img{transform:none!important}
}