/* Cocoon V235 — expanded hero video viewport-fit + native aspect + opaque backdrop */
.hero-promo .hero-promo-stage{
  position:relative;
  width:min(470px,35vw);
  margin-left:auto;
}
.hero-promo .statement-panel{
  width:100%;
  margin:0;
  transition:opacity .35s ease,visibility .35s ease;
}
.hero-promo-media{
  position:absolute;
  z-index:4;
  inset:0;
  overflow:hidden;
  border-radius:34px;
  background:#09040f;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateZ(0);
  transition:opacity .35s ease,visibility .35s ease,box-shadow .25s ease;
  box-shadow:0 30px 84px rgba(0,0,0,.34);
}
.hero-promo.is-video-active .hero-promo-media{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.hero-promo.is-video-active .statement-panel{
  opacity:0;
  visibility:hidden;
}
.hero-promo.is-fallback .hero-promo-stage{cursor:pointer}
.hero-promo-replay{
  position:absolute;
  z-index:8;
  right:24px;
  bottom:23px;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(232,207,255,.48);
  border-radius:50%;
  background:rgba(179,91,255,.2);
  color:#fff;
  box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  cursor:pointer;
  transform:scale(.94);
  transition:opacity .24s ease,visibility .24s ease,transform .24s ease,background .2s ease,border-color .2s ease;
}
.hero-promo-replay svg{
  width:24px;
  height:24px;
  margin-left:3px;
  fill:currentColor;
}
.hero-promo.is-fallback .hero-promo-replay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
}
.hero-promo-replay:hover,
.hero-promo-replay:focus-visible{
  background:rgba(184,91,255,.38);
  border-color:rgba(236,215,255,.85);
  transform:scale(1.06);
  outline:none;
}
.hero-promo.is-video-active .hero-promo-replay{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.hero-promo.is-fallback .hero-promo-stage:focus-visible{
  outline:2px solid rgba(216,171,255,.9);
  outline-offset:5px;
  border-radius:36px;
}
.hero-promo-video{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#09040f;
}
.hero-promo-controls{
  position:absolute;
  z-index:20;
  left:12px;
  right:12px;
  bottom:11px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding:7px 8px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(9,4,15,.18),rgba(9,4,15,.72));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(5px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
}
.hero-promo-media.controls-visible .hero-promo-controls{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.hero-promo-control{
  appearance:none;
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.11);
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  transition:background .18s ease,transform .18s ease;
}
.hero-promo-control:hover,
.hero-promo-control:focus-visible{
  background:rgba(185,101,255,.38);
  transform:translateY(-1px);
  outline:none;
}
.hero-promo-control svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.hero-promo-control .icon-sound-on{display:none}
.hero-promo-control.is-unmuted .icon-sound-off{display:none}
.hero-promo-control.is-unmuted .icon-sound-on{display:block}
.hero-promo-volume{
  display:flex;
  align-items:center;
  width:86px;
  margin:0 2px;
  pointer-events:auto;
}
.hero-promo-volume input{
  width:100%;
  accent-color:#d5a7ff;
  cursor:pointer;
  pointer-events:auto;
  touch-action:pan-x;
}
.hero-promo-media.is-expanded{
  position:fixed;
  z-index:2147483501;
  inset:50% auto auto 50%;
  width:auto;
  height:auto;
  max-width:80vw;
  max-height:88vh;
  aspect-ratio:auto;
  transform:translate(-50%,-50%);
  overflow:hidden;
  border-radius:30px;
  background:#08030d;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  box-shadow:0 38px 130px rgba(0,0,0,.72);
}
.hero-promo-media.is-expanded .hero-promo-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:inherit;
}
.hero-promo-media.is-expanded .hero-promo-controls{
  left:18px;
  right:18px;
  bottom:16px;
  padding:9px 10px;
}
.hero-promo-backdrop{
  position:fixed;
  z-index:2147483500;
  inset:0;
  background:#08030d;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.hero-promo-expanded{overflow:hidden}

@media(max-width:1100px){
  .hero-promo .hero-promo-stage{
    width:min(560px,100%);
    margin:1.2rem 0 0;
  }
}
@media(max-width:900px){
  .landing-hero .hero-promo{
    display:block!important;
    min-height:0!important;
    margin-top:1.35rem;
  }
  .hero-promo .cocoon-orb{display:none!important}
  .hero-promo .hero-promo-stage{
    width:min(100%,560px);
    margin:0 auto;
  }
  .hero-promo .statement-panel{
    padding:1.35rem 1.3rem;
    border-radius:28px;
  }
  .hero-promo-media{border-radius:28px}
  .hero-promo-replay{right:18px;bottom:17px;width:50px;height:50px}
  .hero-promo-replay svg{width:21px;height:21px}
  .hero-promo-controls{
    left:8px;
    right:8px;
    bottom:8px;
    gap:5px;
    padding:6px 7px;
  }
  .hero-promo-control{
    width:32px;
    height:32px;
    min-width:32px;
  }
  .hero-promo-volume{width:68px}
  .hero-promo-media.is-expanded{
    max-width:92vw;
    max-height:82vh;
    border-radius:24px;
  }
}
@media(max-width:430px){
  .hero-promo-volume{width:58px}
  .hero-promo-controls{border-radius:18px}
}
@media(prefers-reduced-motion:reduce){
  .hero-promo-media,
  .hero-promo .statement-panel,
  .hero-promo-controls{transition:none}
}
.hero-promo-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}