/* Homepage motion: decorative asset, steady text and accessible fallbacks. */
.hero.has-brand-motion .hero-canvas{opacity:.3;}
.hero-motion-side{min-width:0;}
.brand-stage{height:190px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;perspective:1000px;pointer-events:none;}
.brand-symbol{display:block;width:350px;max-width:100%;height:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.22));}
.brand-stage{position:relative;}
.brand-model{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.brand-stage.model-ready .brand-symbol{visibility:hidden;}
@keyframes brand-spin{
  0%,18%{transform:rotateY(0deg);}
  82%,100%{transform:rotateY(360deg);}
}
.brand-stage.paused .brand-symbol{animation-play-state:paused;}
.hero-motion-side .opstack{max-width:none;}
.hero-motion-side .opcard{padding-top:14px;padding-bottom:14px;}
.service-hero.has-brand-motion{position:relative;}
.service-hero.has-brand-motion>.wrap{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:46px;}
.service-hero.has-brand-motion .brand-stage{height:300px;}
.service-hero.has-brand-motion .brand-symbol{width:430px;}
.motion-card{--card-x:0deg;--card-y:0deg;--card-lift:0px;transform:perspective(1100px) translateY(var(--card-lift)) rotateX(var(--card-x)) rotateY(var(--card-y));transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.motion-card:focus-visible{outline:3px solid var(--blue);outline-offset:5px;--card-lift:-4px;}
@media(hover:hover) and (pointer:fine){
  .motion-card:hover{--card-lift:-4px;transform:perspective(1100px) translateY(var(--card-lift)) rotateX(var(--card-x)) rotateY(var(--card-y));box-shadow:0 22px 38px -25px rgba(10,24,40,.45);}
  .hero .opcard.motion-card:hover{box-shadow:0 18px 32px -24px rgba(43,166,223,.65);}
}
@media(max-width:980px){
  .hero-motion-side{max-width:520px;}
  .service-hero.has-brand-motion>.wrap{grid-template-columns:1fr;gap:12px;}
  .service-hero.has-brand-motion .brand-stage{height:200px;}
}
@media(max-width:680px){
  .brand-stage,.service-hero.has-brand-motion .brand-stage{height:140px;}
  .brand-symbol,.service-hero.has-brand-motion .brand-symbol{width:260px;animation:none;transform:none;}
  .hero-motion-side{width:100%;}
  .hero-motion-side .opcard{padding-top:15px;padding-bottom:15px;}
}
@media(prefers-reduced-motion:reduce){
  .brand-symbol{animation:none;transform:none;}
  .motion-card,.motion-card:hover,.motion-card:focus-visible{transform:none;transition:none;}
}
