/* A centered product introduction and the team's still photo, with living Supras. */
.po-overview-hero{padding:0 0 34px;background:linear-gradient(180deg,#f9fafc 0%,#fff 92%)}
.po-hero-intro{text-align:center;padding:66px 0 57px}
.po-hero-intro .eyebrow{color:var(--blue);font-size:11px;letter-spacing:.14em;margin-bottom:24px}
.po-hero-intro h1{font-family:var(--heading);font-size:clamp(40px,4.65vw,66px);font-weight:600;line-height:1.13;letter-spacing:-.052em;margin:0 auto;max-width:1080px;color:var(--ink);text-wrap:balance}
.po-hero-intro h1 span{color:var(--blue)}
.po-hero-tagline{font-size:18px;line-height:1.65;color:#42536d;margin:25px 0 0}
.po-hero-subtagline{font-size:15px;line-height:1.7;color:#7c8799;margin:4px 0 0}
.po-hero-demo{margin-top:28px;min-height:49px;padding:14px 23px;gap:20px;border-radius:8px;font-size:13px}
.po-overview-scene{position:relative;isolation:isolate;aspect-ratio:2.13;min-height:470px;overflow:hidden;border-radius:17px;background:#414c59}
.po-overview-photo,.po-overview-shade{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* Frame the supplied screenshot without its player borders; the original asset stays intact. */
.po-overview-photo img{position:absolute;top:-16%;left:0;width:100%;height:132%;max-width:none;object-fit:cover;object-position:50% 52%;display:block}
.po-overview-shade{background:linear-gradient(0deg,rgba(9,19,36,.70),transparent 73%),linear-gradient(90deg,rgba(13,25,44,.20),transparent 65%)}
.po-overview-caption{position:absolute;left:5.2%;bottom:9%;color:#fff}
.po-scene-eyebrow{font-size:9px;font-weight:600;letter-spacing:.17em;color:#e5eafa;margin:0 0 14px}
.po-overview-caption h2{font-family:var(--heading);font-size:clamp(31px,3.5vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1.15;color:#fff;margin:0}
.po-overview-caption>p:not(.po-scene-eyebrow){font-size:14px;line-height:1.6;color:#edf0f8;margin:13px 0 0}
.po-scene-link{display:inline-flex;align-items:center;justify-content:center;gap:24px;border:1px solid #ffffff70;border-radius:7px;min-height:43px;padding:12px 17px;margin-top:23px;color:#fff;font-size:11px;font-weight:500;background:#ffffff0a;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.po-scene-link .icon{width:15px;height:15px}
.po-scene-link:hover{background:#ffffff24;border-color:#fff}
.po-hero-demo:focus-visible,.po-scene-link:focus-visible{outline:3px solid #8ba5ff;outline-offset:4px}
.po-hero-supras{list-style:none;margin:0;padding:0}
.po-hero-supra{--float-tilt:-3deg;position:absolute;display:flex;align-items:center;gap:15px;padding:19px 19px 18px 17px;width:177px;min-height:84px;border-radius:15px;background:rgba(255,255,255,.95);border:1px solid #ffffffc9;box-shadow:0 12px 35px #08132620,inset 0 1px 0 #fff;backdrop-filter:blur(10px);animation:po-supra-float 7s ease-in-out infinite;will-change:transform}
.po-hero-supra>.po-supra{width:43px;height:43px;border-radius:15px}
.po-hero-supra>span:last-of-type{display:block;min-width:0}
.po-hero-supra strong{display:block;color:#20324a;font-size:14px;font-weight:600;letter-spacing:-.2px}
.po-hero-supra small{display:block;font-size:9px;color:#8491a3;margin-top:5px;white-space:nowrap}
.po-supra-presence{position:absolute;right:12px;top:12px;width:4px;height:4px;background:#75a28b;border-radius:50%;box-shadow:0 0 0 3px #75a28b12}
.po-hero-nova{left:68%;top:14%;animation-delay:-1.2s}
.po-hero-orbit{--float-tilt:3deg;right:4%;top:42%;animation-delay:-3.5s}
.po-hero-atlas{--float-tilt:-2deg;left:66%;top:71%;animation-delay:-5.3s}
.po-hero-supra>.po-supra>em{animation:po-supra-smile 8s ease-in-out infinite}
.po-hero-nova>.po-supra>em{animation-delay:-1s}
.po-hero-atlas>.po-supra>em{animation-delay:-4s}
@keyframes po-supra-float{0%,100%{transform:translateY(3px) rotate(var(--float-tilt))}50%{transform:translateY(-7px) rotate(0deg)}}
@keyframes po-supra-smile{0%,35%,65%,100%{transform:scaleX(1)}45%,55%{transform:scaleX(1.25) translateY(-1px)}}
@media(min-width:1500px){.po-hero-intro{padding-top:82px;padding-bottom:67px}}
@media(max-width:1000px){
  .po-hero-intro{padding-top:56px;padding-bottom:46px}
  .po-hero-intro h1{font-size:clamp(39px,5vw,50px)}
  .po-overview-scene{min-height:440px}
  .po-hero-supra{width:151px;padding:16px 13px;min-height:74px;gap:12px}
  .po-hero-supra>.po-supra{width:36px;height:36px;border-radius:12px}
  .po-hero-supra strong{font-size:12px}.po-hero-supra small{font-size:8px}
  .po-hero-nova{left:auto;right:11%;top:12%}
  .po-hero-orbit{right:4%;top:40%}
  .po-hero-atlas{left:auto;right:13%;top:69%}
}
@media(max-width:600px){
  .po-overview-hero{padding-bottom:24px}
  .po-hero-intro{padding-top:44px;padding-bottom:38px}
  .po-hero-intro .eyebrow{font-size:9px;margin-bottom:22px}
  .po-hero-intro h1{font-size:clamp(32px,8.7vw,44px);line-height:1.16;letter-spacing:-.045em;max-width:430px}
  .po-hero-tagline{font-size:14px;line-height:1.7;max-width:300px;margin:22px auto 0}
  .po-hero-subtagline{font-size:12px;line-height:1.8;max-width:275px;margin:7px auto 0}
  .po-hero-demo{margin-top:23px;min-height:45px;font-size:12px;padding:12px 19px}
  .po-overview-scene{aspect-ratio:auto;min-height:540px;border-radius:13px}
  .po-overview-photo img{object-position:43% 50%}
  .po-overview-shade{background:linear-gradient(0deg,rgba(9,19,36,.83),rgba(9,19,36,.03) 80%)}
  .po-overview-caption{left:24px;right:18px;bottom:26px}
  .po-scene-eyebrow{font-size:8px;margin-bottom:10px}
  .po-overview-caption h2{font-size:30px}
  .po-overview-caption>p:not(.po-scene-eyebrow){font-size:12px;margin-top:10px}
  .po-scene-link{font-size:10px;min-height:40px;margin-top:18px;padding:10px 14px;gap:17px}
  .po-hero-supra{width:79px;min-height:82px;flex-direction:column;gap:8px;padding:12px 10px 10px;border-radius:12px;text-align:center}
  .po-hero-supra>.po-supra{width:29px;height:29px;border-radius:10px}
  .po-hero-supra strong{font-size:11px}.po-hero-supra small{display:none}
  .po-supra-presence{right:8px;top:8px;width:3px;height:3px}
  .po-hero-nova{left:6%;right:auto;top:52%}
  .po-hero-orbit{left:38%;right:auto;top:52%}
  .po-hero-atlas{left:70%;right:auto;top:52%}
}
@media(prefers-reduced-motion:reduce){.po-hero-supra,.po-hero-supra>.po-supra>em,.po-hero-supra>.po-supra>b{animation:none}.po-hero-supra{will-change:auto}}
