:root{--navy:#071b34;--blue:#0d3563;--blue2:#164f88;--cyan:#61e4e4;--orange:#ff7043;--yellow:#ffd400;--ink:#0a1826;--white:#fff;--body:18px;--max:1440px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:#071426;color:#fff;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:rgba(255,255,255,.08)}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--orange))}.site-header{position:fixed;top:0;left:0;right:0;height:82px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;z-index:100;transition:.3s}.site-header.scrolled{background:rgba(5,20,38,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.09)}.brand img{width:170px;display:block}.desktop-nav{display:flex;align-items:center;gap:30px;font-size:14px}.nav-cta{padding:12px 18px;border:1px solid rgba(255,255,255,.32);border-radius:999px}.menu-toggle{display:none;background:none;border:0}.section-screen{min-height:100svh;padding:120px max(5vw,calc((100vw - var(--max))/2));position:relative;overflow:hidden}.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:7vw;background:radial-gradient(circle at 80% 45%,rgba(28,91,155,.45),transparent 34%),linear-gradient(135deg,#061629 0%,#0b2b52 58%,#0f3769 100%)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 63%,rgba(255,112,67,.08));pointer-events:none}.speed-field{position:absolute;inset:0;opacity:.55;overflow:hidden}.speed-field i{position:absolute;left:-30%;height:1px;width:52%;background:linear-gradient(90deg,transparent,var(--cyan),transparent);filter:drop-shadow(0 0 8px var(--cyan));animation:speed 5s linear infinite}.speed-field i:nth-child(1){top:22%;animation-delay:-1s}.speed-field i:nth-child(2){top:34%;width:36%;animation-delay:-3s}.speed-field i:nth-child(3){top:49%;width:64%;background:linear-gradient(90deg,transparent,var(--orange),transparent);animation-delay:-2s}.speed-field i:nth-child(4){top:61%;width:45%;animation-delay:-4s}.speed-field i:nth-child(5){top:73%;width:58%;background:linear-gradient(90deg,transparent,var(--orange),transparent)}.speed-field i:nth-child(6){top:85%;width:28%;animation-delay:-2.7s}@keyframes speed{to{transform:translateX(250%)}}.hero-copy,.hero-visual{position:relative;z-index:2}.program-lockup{color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;font-weight:700}.program-lockup p{margin:0 0 8px;font-size:14px}.hero h1{font-size:clamp(52px,7vw,78px);line-height:.88;letter-spacing:-.065em;margin:34px 0}.hero h1 span{color:var(--orange)}.hero-body{max-width:760px}.hero-body p,.overview-copy>p,.advantage-card p,.final-copy>p{font-size:var(--body);line-height:1.65;color:#d6e0e8;margin:0 0 14px}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:17px 22px;border-radius:4px;font-weight:800;margin-top:28px;min-width:320px;transition:.25s;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:-80%;left:-40%;width:30%;height:260%;background:rgba(255,255,255,.28);transform:rotate(20deg);animation:sweep 4.5s ease-in-out infinite}@keyframes sweep{0%,65%{left:-45%}100%{left:125%}}.btn:hover{transform:translateY(-3px)}.btn-primary{background:var(--yellow);color:#101820}.hero-visual{display:grid;place-items:center}.velocity-panel{width:min(560px,45vw);aspect-ratio:1.2;position:relative;display:grid;place-items:center}.velocity-panel:before,.velocity-panel:after{content:"";position:absolute;inset:12% 0;background:linear-gradient(90deg,transparent,rgba(97,228,228,.4),transparent);clip-path:polygon(0 48%,100% 33%,100% 38%,0 53%)}.velocity-panel:after{transform:scaleY(-1);opacity:.55}.velocity-core{width:230px;height:230px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#11457b,#071b34 70%);border:1px solid rgba(97,228,228,.65);box-shadow:0 0 80px rgba(35,153,202,.4)}.velocity-core strong{font-size:46px;line-height:.8;padding-top:15px;}.velocity-core span{font-size:11px;letter-spacing:.35em;margin-top:20px}.metric{position:absolute;width:205px;padding:20px;background:rgba(5,23,44,.86);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(0,0,0,.25);overflow:hidden}.metric:after{content:"";position:absolute;inset:0 auto 0 -45%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);animation:metricSweep 3.8s infinite}@keyframes metricSweep{0%,55%{left:-45%}100%{left:130%}}.metric-one{top:9%;right:0}.metric-two{bottom:8%;left:0}.metric small{display:block;color:#a9bbc9;font-size:10px;letter-spacing:.15em}.metric strong{font-size:32px;color:var(--yellow)}.overview{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#6d205f 0%,#c13f71 48%,#f0805b 100%)}.overview-title{width:100%;margin:0 0 50px;font-size:clamp(72px,4vw,68px)!important;line-height:1.05!important;letter-spacing:-.045em!important}.overview-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw}.overview:before{content:"";position:absolute;inset:0;background:url('assets/cvp-video-section-bg.webp') center/cover;opacity:.22;mix-blend-mode:screen}.overview>*{position:relative;z-index:1}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;margin:0 0 18px}.overview h2,.section-title h2,.market h2,.final-cta h2{font-size:clamp(46px,5vw,76px);line-height:.98;letter-spacing:-.05em;margin:0 0 28px}.overview-copy>p{max-width:760px}.product-card{margin-top:36px;padding:28px;background:rgba(35,8,44,.4);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px)}.product-label{font-size:10px;letter-spacing:.16em}.product-card h3{font-size:32px;margin:8px 0}.product-card p{font-size:var(--body);line-height:1.6}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{font-size:11px;padding:8px 10px;border:1px solid rgba(255,255,255,.3)}.video-wrap{display:grid;justify-items:end}.video-tag{position:absolute;top:20px;left:20px;font-size:10px;letter-spacing:.15em}.play{position:absolute;inset:0;display:grid;place-items:center;font-size:52px;color:var(--yellow)}.fullscreen-button{margin-top:12px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);padding:10px 14px;cursor:pointer}.advantages{background:linear-gradient(135deg,#0b3d5c 0%,#176c78 55%,#2b8791 100%);display:grid;align-content:center}.section-title{max-width:900px;margin-bottom:50px}.advantage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.advantage-card{padding:34px;min-height:360px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);display:flex;flex-direction:column}.advantage-card .icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#092234;font-weight:900}.advantage-card h3{font-size:28px;line-height:1.05;margin:30px 0 18px}.advantage-card p{color:#eff8fa}.advantage-card a{margin-top:auto;color:var(--yellow);font-weight:800}.market{background:linear-gradient(135deg,#f5b82e 0%,#f06c4e 52%,#9950a5 100%);color:#17202a;display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-content:center}.market-heading h2{max-width:620px}.market-list{border-top:1px solid rgba(23,32,42,.32)}.market-list article{display:grid;grid-template-columns:140px 1fr;align-items:center;border-bottom:1px solid rgba(23,32,42,.32);padding:20px 0}.market-list span{font-size:clamp(78px,8vw,138px);line-height:.8;font-weight:900;opacity:.22}.market-list p{font-size:clamp(24px,2.3vw,36px);line-height:1.2;margin:0;font-weight:400}.market-close{grid-column:2;font-size:clamp(30px,3.2vw,48px);font-weight:800;margin:20px 0 0}.final-cta{background:linear-gradient(135deg,#17518b 0%,#6c3f96 50%,#ef744f 100%);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8vw}.final-copy>p{max-width:640px}.final-action{padding:48px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(12px)}.final-action p{font-size:clamp(26px,2.6vw,40px);line-height:1.15;margin:0 0 16px;font-weight:700}.btn-light{background:#fff;color:#14243a}.back-to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(7,27,52,.8);color:#fff;z-index:90;cursor:pointer;opacity:0;pointer-events:none;transition:.25s}.back-to-top.visible{opacity:1;pointer-events:auto}.video-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:5vw}.video-modal[hidden]{display:none}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(10px)}.modal-panel{width:min(960px,92vw);position:relative;z-index:1}.modal-close{position:absolute;right:0;top:-52px;background:none;border:0;color:#fff;font-size:40px;cursor:pointer}.embed-placeholder{aspect-ratio:16/9;background:linear-gradient(135deg,#0e2d54,#7f2b72);display:grid;place-content:center;text-align:center;padding:30px;border:1px solid rgba(255,255,255,.25)}.embed-placeholder span{font-size:11px;letter-spacing:.16em;color:var(--cyan)}.embed-placeholder h3{font-size:clamp(30px,4vw,58px);margin:14px 0}.reveal{opacity:0;transform:translateY(70px) scale(.96);filter:blur(12px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);transition-delay:var(--delay,0ms)}.reveal.is-visible{opacity:1;transform:none;filter:none}
@media(max-width:900px){.desktop-nav{display:none}.menu-toggle{display:block;width:42px;height:42px}.menu-toggle span{display:block;width:22px;height:2px;background:#fff;margin:6px auto}.mobile-menu{position:fixed;top:82px;left:0;right:0;z-index:99;background:#071b34;padding:22px 5vw;display:grid;gap:16px}.mobile-menu[hidden]{display:none}.section-screen{min-height:auto;padding:105px 6vw}.hero,.market,.final-cta{grid-template-columns:1fr}.overview-title{margin-bottom:32px;font-size:clamp(36px,9vw,52px)!important}.overview-grid{grid-template-columns:1fr;gap:32px}.hero{padding-top:140px}.hero-visual{margin-top:34px}.velocity-panel{width:100%;max-width:520px}.market-close{grid-column:auto}.advantage-grid{grid-template-columns:1fr}.video-wrap{justify-items:stretch}.market-list article{grid-template-columns:90px 1fr}.final-action{padding:30px}.btn{min-width:0;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none;filter:none}}

/* 客改logo焗加尺寸 */

.site-header .brand {

  display: inline-block;

  width: auto;

  height: auto;

}

.site-header .brand img {

  display: block;

  width: 240px; /* 你想要幾大就改呢度 */

  height: auto;

}


/* v3.2 Hero motion polish */
.speed-field{z-index:0;opacity:1;isolation:isolate;pointer-events:none}
.speed-layer{position:absolute;inset:0;overflow:hidden}
.speed-layer--back{z-index:0;filter:blur(.45px)}
.speed-layer--mid{z-index:1}
.speed-layer--front{z-index:3;filter:drop-shadow(0 0 7px rgba(97,228,228,.22))}
.speed-field .speed-layer .speed-line{position:absolute;top:var(--line-y);left:-48vw;width:var(--line-width);height:var(--line-height);display:block;opacity:0;background:linear-gradient(90deg,transparent 0,rgba(var(--line-color),.18) 15%,rgba(var(--line-color),.92) 72%,transparent 100%);filter:none;will-change:transform,opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.hero-motion-ready .speed-line{animation:lineForm .72s var(--ease) var(--intro-delay) forwards,lineTravel var(--line-duration) linear var(--line-delay) infinite}
@keyframes lineForm{from{opacity:0}to{opacity:var(--line-opacity)}}
@keyframes lineTravel{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(170vw,0,0);transform:translate3d(170vw,0,0)}}

/* Keep the CVP core visually still and free from any crossing beam. */
.velocity-panel:before,.velocity-panel:after{content:none;display:none}
.velocity-core{position:relative;z-index:4;-webkit-transform:none;transform:none;animation:none}

/* Rebate breathes slowly; Sales Motion stays fixed and receives a periodic sweep. */
.metric{z-index:5;will-change:auto}
.metric-one{animation:rebateBreath 5.6s var(--ease) 1.1s infinite;will-change:transform,box-shadow}
.metric-one:after{display:none}
@keyframes rebateBreath{0%,100%{-webkit-transform:scale(1);transform:scale(1);box-shadow:0 18px 40px rgba(0,0,0,.25),0 0 0 rgba(255,212,0,0)}50%{-webkit-transform:scale(1.035);transform:scale(1.035);box-shadow:0 20px 48px rgba(0,0,0,.3),0 0 25px rgba(255,212,0,.17)}}
.metric-two{-webkit-transform:none;transform:none;animation:none}
.metric-two:after{animation:salesSweep 7.2s ease-in-out 1.7s infinite}
@keyframes salesSweep{0%,72%{left:-45%;opacity:0}76%{opacity:1}91%{left:130%;opacity:1}94%,100%{left:130%;opacity:0}}




/* Hero CTA sweeps only on interaction and never changes size or position. */
.hero .btn:after{left:-45%;animation:none;opacity:0}
.hero .btn:hover,.hero .btn:focus-visible{-webkit-transform:none;transform:none}
.hero .btn:hover:after,.hero .btn:focus-visible:after{animation:heroCtaSweep .82s var(--ease) 1}
@keyframes heroCtaSweep{0%{left:-45%;opacity:0}18%{opacity:1}100%{left:130%;opacity:0}}







@media(max-width:900px){
  .speed-layer--back .speed-line:nth-child(n+9),.speed-layer--mid .speed-line:nth-child(n+11),.speed-layer--front .speed-line:nth-child(n+11){display:none}
  .speed-layer--front{opacity:.72}
  .metric-one{animation-duration:5.8s}
}
@media(prefers-reduced-motion:reduce){
  .speed-field .speed-layer .speed-line{opacity:.08;-webkit-transform:translate3d(72vw,0,0);transform:translate3d(72vw,0,0)}
  .metric-one,.metric-two,.velocity-core,.hero .btn:after{-webkit-transform:none!important;transform:none!important;box-shadow:0 18px 40px rgba(0,0,0,.25)}
}

/* v3.2 completion: restrained depth, staged headline and rebate accents. */
.section-screen{min-height:100vh;min-height:100svh}
.site-header.scrolled,.product-card,.advantage-card,.final-action,.modal-backdrop{-webkit-backdrop-filter:blur(12px)}
.site-header.scrolled{-webkit-backdrop-filter:blur(18px)}
.modal-backdrop{-webkit-backdrop-filter:blur(10px)}
.hero-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(97,228,228,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(97,228,228,.035) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.75) 55%,#000);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.75) 55%,#000);opacity:.68}
.hero-noise{position:absolute;inset:-25%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");background-size:180px;mix-blend-mode:soft-light;opacity:.035}
.hero-particles{position:absolute;inset:0}
.hero-particle{position:absolute;left:var(--particle-x);top:var(--particle-y);width:var(--particle-size);height:var(--particle-size);border-radius:50%;background:rgba(var(--particle-color),.72);box-shadow:0 0 10px rgba(var(--particle-color),.35);opacity:var(--particle-opacity);will-change:transform,opacity;animation:particleDrift var(--particle-duration) ease-in-out var(--particle-delay) infinite alternate}
.hero-particle:after{content:"";position:absolute;left:50%;top:50%;width:var(--particle-link);height:1px;background:linear-gradient(90deg,rgba(var(--particle-color),.15),transparent);transform-origin:left center;transform:rotate(var(--particle-angle))}
@keyframes particleDrift{from{transform:translate3d(0,0,0);opacity:.04}to{transform:translate3d(var(--particle-drift-x),var(--particle-drift-y),0);opacity:var(--particle-opacity)}}
.hero .title-line{display:block;width:max-content;max-width:100%;color:#fff}
.hero .title-line--close{position:relative;color:var(--orange)}
.title-line--close:after{content:"";position:absolute;left:calc(100% + 20px);top:56%;width:clamp(52px,7vw,112px);height:2px;background:linear-gradient(90deg,var(--orange),rgba(255,112,67,0));opacity:0;transform:translate3d(-26px,0,0) scaleX(.25);transform-origin:left center}
.title-line--close.is-visible:after{animation:closeLineHit .66s var(--ease) .22s 1 both}
@keyframes closeLineHit{0%{opacity:0;transform:translate3d(-26px,0,0) scaleX(.25)}28%{opacity:.95}100%{opacity:0;transform:translate3d(38px,0,0) scaleX(1)}}
.metric-one:before{content:"";position:absolute;inset:-35%;z-index:0;background:radial-gradient(circle,rgba(255,212,0,.13),transparent 57%);opacity:.22;animation:rebateAura 5.6s var(--ease) 1.1s infinite;pointer-events:none}
.metric-one small,.metric-one strong{position:relative;z-index:1}
.metric-one:after{display:block;inset:-1px auto auto -45%;width:42%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,212,0,.9),transparent);transform:none;opacity:0;animation:rebateBorderSweep 9.6s ease-in-out 2.2s infinite;pointer-events:none}
.metric-one strong{display:inline-block;animation:rebateValueGlow 8.4s ease-in-out 2.8s infinite}
@keyframes rebateAura{0%,100%{opacity:.12;transform:scale(.94)}50%{opacity:.38;transform:scale(1)}}
@keyframes rebateBorderSweep{0%,71%{left:-45%;opacity:0}74%{opacity:1}90%{left:105%;opacity:1}94%,100%{left:105%;opacity:0}}
@keyframes rebateValueGlow{0%,72%,100%{color:var(--yellow);filter:none;text-shadow:none}78%{color:#fff4a8;filter:brightness(1.14);text-shadow:0 0 18px rgba(255,212,0,.45)}85%{color:var(--yellow);filter:none;text-shadow:none}}
@media(max-width:900px){
  .hero-particle:nth-child(n+12){display:none}
  .hero-grid{background-size:56px 56px;opacity:.42}
  .title-line--close:after{left:auto;right:-58px;width:54px}
}
@media(prefers-reduced-motion:reduce){
  .hero-particle{animation:none!important}
  .title-line--close:after,.metric-one:before,.metric-one:after{display:none!important}
  .metric-one strong{animation:none!important;filter:none!important;text-shadow:none!important}
}

/* Client review: make the rebate value unmistakable and surface the CTA immediately. */
.hero-cta{opacity:0;animation:heroCtaIntro .28s var(--ease) .05s 1 both}
@keyframes heroCtaIntro{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.metric-one{background:rgba(5,23,44,.94);border-color:rgba(255,212,0,.32);animation:rebateIntro .68s var(--ease) .24s 1 both,rebateBreath 5.2s var(--ease) 1.2s infinite}
.metric-one small{color:#91a8b8}
.metric-one strong{font-size:44px;line-height:.95}
.metric-one:after{height:2px;box-shadow:0 0 12px rgba(255,212,0,.72);animation:rebateBorderIntro .78s var(--ease) .42s 1 both,rebateBorderSweep 6.4s ease-in-out 1.7s infinite}
.metric-one strong{transform-origin:center;animation:rebateValueIntro .66s var(--ease) .4s 1 both,rebateValueGlow 5.6s ease-in-out 1.35s infinite}
@keyframes rebateIntro{0%{opacity:0;transform:translate3d(30px,0,0) scale(.94);border-color:rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(0,0,0,.25)}55%{opacity:1;transform:translate3d(-3px,0,0) scale(1.05);border-color:rgba(255,212,0,.78);box-shadow:0 20px 52px rgba(0,0,0,.32),0 0 38px rgba(255,212,0,.32)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);border-color:rgba(255,212,0,.36);box-shadow:0 18px 40px rgba(0,0,0,.25),0 0 18px rgba(255,212,0,.15)}}
@keyframes rebateValueIntro{0%{opacity:0;transform:translate3d(-18px,0,0) scale(.82);filter:brightness(.9)}65%{opacity:1;transform:translate3d(3px,0,0) scale(1.14);filter:brightness(1.42);text-shadow:0 0 24px rgba(255,212,0,.72)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none;text-shadow:0 0 10px rgba(255,212,0,.22)}}
@keyframes rebateBorderIntro{0%{left:-45%;opacity:0}20%{opacity:1}82%{left:105%;opacity:1}100%{left:105%;opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hero-cta{opacity:1!important;animation:none!important}
  .metric-one,.metric-one strong{animation:none!important;opacity:1!important;transform:none!important}
}

/* Mobile: give the two metric cards their own vertical space around the CVP core. */
@media(max-width:600px){
  .hero-visual{margin-top:42px}
  .hero h1{font-size:clamp(46px,13.2vw,53px);line-height:.92;letter-spacing:-.055em}
  .velocity-panel{width:100%;max-width:340px;height:470px;aspect-ratio:auto}
  .metric-one{top:0;right:0}
  .metric-two{bottom:0;left:0}
}

/* More frequent, higher-contrast CTA sweep that also works without hover. */
.hero .hero-cta:after{width:42%;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.16) 18%,rgba(255,255,255,.82) 48%,rgba(255,239,153,.56) 64%,transparent 100%);box-shadow:0 0 18px rgba(255,255,255,.34);mix-blend-mode:screen;animation:heroCtaIdleSweep 1s ease-in-out .2s infinite}
@keyframes heroCtaIdleSweep{0%,52%{left:-52%;opacity:0}57%{opacity:1}78%{left:122%;opacity:1}83%,100%{left:122%;opacity:0}}

/* v3.3 client feedback: substantially faster velocity field. */
.speed-layer--back{opacity:.78}
.speed-layer--mid{opacity:.92}
.speed-layer--front{opacity:1;filter:drop-shadow(0 0 9px rgba(97,228,228,.28))}
.speed-field .speed-layer .speed-line{background:linear-gradient(90deg,transparent 0,rgba(var(--line-color),.12) 8%,rgba(var(--line-color),.96) 78%,transparent 100%)}
@keyframes lineTravel{from{-webkit-transform:translate3d(-8vw,0,0);transform:translate3d(-8vw,0,0)}to{-webkit-transform:translate3d(188vw,0,0);transform:translate3d(188vw,0,0)}}
@media(max-width:900px){.speed-layer--back .speed-line:nth-child(n+15),.speed-layer--mid .speed-line:nth-child(n+19),.speed-layer--front .speed-line:nth-child(n+23){display:none}}
@media(prefers-reduced-motion:reduce){.speed-field .speed-layer .speed-line{animation:none!important}}
\n/* v3.4 Cosmic Velocity: denser, irregular star-streak field */\n.speed-field{opacity:1;background:radial-gradient(ellipse at 78% 44%,rgba(97,228,228,.055),transparent 34%),radial-gradient(ellipse at 62% 66%,rgba(255,112,67,.035),transparent 28%)}\n.speed-layer--back{opacity:.66;filter:blur(.7px)}\n.speed-layer--mid{opacity:.9}\n.speed-layer--front{opacity:1;filter:drop-shadow(0 0 11px rgba(97,228,228,.34))}\n.speed-field .speed-layer .speed-line{border-radius:999px;background:linear-gradient(90deg,transparent 0,rgba(var(--line-color),.06) 7%,rgba(var(--line-color),.34) 40%,rgba(var(--line-color),1) 82%,rgba(255,255,255,.92) 91%,transparent 100%);box-shadow:0 0 calc(var(--line-height) * 4) rgba(var(--line-color),.28)}\n.speed-field .speed-layer .speed-line:nth-child(7n){filter:blur(.65px);opacity:calc(var(--line-opacity) * .68)}\n.speed-field .speed-layer .speed-line:nth-child(11n){filter:brightness(1.45);}\n.speed-field .speed-layer .speed-line:nth-child(13n){transform-origin:right center;}\n@media(max-width:900px){.speed-layer--back .speed-line:nth-child(n+20),.speed-layer--mid .speed-line:nth-child(n+27),.speed-layer--front .speed-line:nth-child(n+33){display:none}}\n
/* Mobile Velocity Fix: preserve the desktop cosmic field on phones without overwhelming the UI. */
@media (max-width:900px){
  .speed-layer--back .speed-line,
  .speed-layer--mid .speed-line,
  .speed-layer--front .speed-line{display:block!important}
  .speed-layer--back .speed-line:nth-child(n+33),
  .speed-layer--mid .speed-line:nth-child(n+43),
  .speed-layer--front .speed-line:nth-child(n+53){display:none!important}
  .speed-field{opacity:1!important}
  .speed-layer--back{opacity:.70!important}
  .speed-layer--mid{opacity:.94!important}
  .speed-layer--front{opacity:1!important;filter:drop-shadow(0 0 9px rgba(97,228,228,.34))}
  .speed-field .speed-layer .speed-line{
    width:max(var(--line-width),18vw)!important;
    height:max(var(--line-height),.8px)!important;
    box-shadow:0 0 max(4px,calc(var(--line-height) * 4)) rgba(var(--line-color),.34)!important;
  }
  .speed-field .speed-layer .speed-line:nth-child(5n){filter:brightness(1.35)}
}

/* v3.8 CVP value-signal HUD: replace sticker cards with three distinct benefit modules. */
.velocity-panel{width:min(610px,48vw);aspect-ratio:1.18;isolation:isolate}
.velocity-core{z-index:5;box-shadow:0 0 70px rgba(35,153,202,.32),inset 0 0 45px rgba(97,228,228,.05)}
.velocity-core:before,.velocity-core:after{content:"";position:absolute;inset:-15px;border-radius:50%;border:1px solid transparent;border-top-color:rgba(97,228,228,.28);border-right-color:rgba(97,228,228,.12);transform:rotate(22deg);pointer-events:none}
.velocity-core:after{inset:-27px;border-top-color:transparent;border-right-color:rgba(255,112,67,.16);border-bottom-color:rgba(97,228,228,.16);transform:rotate(-34deg)}

.hud-benefit{z-index:7;width:auto;min-width:190px;padding:14px 17px;display:flex;align-items:center;gap:13px;background:linear-gradient(105deg,rgba(4,23,44,.66),rgba(4,23,44,.22));border:0;box-shadow:none;overflow:visible;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.hud-benefit:after{content:none!important}
.hud-benefit:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--hud-accent),var(--hud-accent)) left top/30px 1px no-repeat,linear-gradient(var(--hud-accent),var(--hud-accent)) left top/1px 18px no-repeat,linear-gradient(var(--hud-accent),var(--hud-accent)) right bottom/30px 1px no-repeat,linear-gradient(var(--hud-accent),var(--hud-accent)) right bottom/1px 18px no-repeat;opacity:.68}
.hud-copy{position:relative;z-index:2;display:grid;gap:3px}
.hud-benefit small{font-size:10px;line-height:1.15;letter-spacing:.17em;color:#9fb4c5;font-weight:700}
.hud-benefit strong{font-size:28px;line-height:1;color:var(--hud-accent);white-space:nowrap}
.hud-benefit em{font-size:10px;line-height:1;letter-spacing:.2em;color:#c7d6e0;font-style:normal;font-weight:800}
.hud-icon{position:relative;z-index:2;width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;color:var(--hud-accent)}
.hud-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--hud-accent) 35%,transparent))}

.hud-rebate{--hud-accent:#ffd400;top:3%;right:-1%;animation:none!important}
.hud-rebate strong{font-size:48px;letter-spacing:-.04em;animation:rebateValueGlow 5.6s ease-in-out 1.35s infinite}
.hud-rebate .hud-icon-growth{animation:growthLift 5.6s var(--ease) 1.35s infinite}
@keyframes growthLift{0%,72%,100%{transform:translateY(1px);opacity:.78}78%{transform:translateY(-3px);opacity:1}85%{transform:translateY(0);opacity:.84}}

.hud-speed{--hud-accent:#61e4e4;bottom:8%;left:-2%;min-width:220px;background:linear-gradient(90deg,rgba(4,23,44,.54),rgba(4,23,44,.08))}
.hud-speed strong{font-size:32px}
.hud-icon-speed{display:flex;align-items:center;justify-content:center;gap:2px}
.hud-icon-speed i{width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.22;filter:drop-shadow(0 0 5px rgba(97,228,228,.55));animation:speedChevron 2.8s ease-in-out infinite}
.hud-icon-speed i:nth-child(2){animation-delay:.13s}.hud-icon-speed i:nth-child(3){animation-delay:.26s}
@keyframes speedChevron{0%,58%,100%{opacity:.2;transform:translateX(-2px) rotate(45deg)}68%{opacity:1;transform:translateX(2px) rotate(45deg)}82%{opacity:.45;transform:translateX(4px) rotate(45deg)}}

.hud-switch{--hud-accent:#ff7043;right:-5%;bottom:2%;transform:translateY(62%);min-width:225px;background:linear-gradient(105deg,rgba(4,23,44,.54),rgba(4,23,44,.12))}
.hud-switch strong{font-size:19px;letter-spacing:.015em;color:#fff}
.hud-switch .hud-icon{color:#ff8a65}
.hud-icon-switch .switch-a,.hud-icon-switch .switch-b{animation:switchFlow 6.8s var(--ease) infinite}
.hud-icon-switch .switch-b{animation-delay:.25s}
@keyframes switchFlow{0%,66%,100%{opacity:.35;transform:translateX(0)}73%{opacity:1;transform:translateX(2px)}82%{opacity:.55;transform:translateX(0)}}

/* Thin signal tethers visually relate each value to the CVP core without making an orbit. */
.hud-rebate .hud-copy:after,.hud-speed .hud-copy:after,.hud-switch .hud-copy:after{content:"";position:absolute;height:1px;pointer-events:none;opacity:.25;background:linear-gradient(90deg,var(--hud-accent),transparent)}
.hud-rebate .hud-copy:after{width:58px;right:100%;top:52%;transform:translateX(-55px) rotate(-18deg)}
.hud-speed .hud-copy:after{width:62px;left:100%;top:48%;transform:translateX(18px) rotate(-12deg)}
.hud-switch .hud-copy:after{width:46px;right:100%;top:44%;transform:translateX(-42px) rotate(18deg)}

@media(max-width:900px){
  .velocity-panel{width:100%;max-width:500px;height:510px;aspect-ratio:auto}
  .velocity-core{width:205px;height:205px}
  .velocity-core strong{font-size:48px}
  .hud-benefit{min-width:0;padding:12px 13px;gap:9px}
  .hud-icon{width:30px;height:30px;flex-basis:30px}.hud-icon svg{width:26px;height:26px}
  .hud-rebate{top:0;right:0}.hud-rebate strong{font-size:40px}
  .hud-speed{left:0;bottom:8%;min-width:188px}.hud-speed strong{font-size:27px}
  .hud-switch{right:0;bottom:0;transform:none;min-width:205px}.hud-switch strong{font-size:16px}
  .hud-rebate .hud-copy:after,.hud-speed .hud-copy:after,.hud-switch .hud-copy:after{display:none}
}
@media(max-width:600px){
  .hero-visual{margin-top:48px}
  .velocity-panel{max-width:350px;height:530px}
  .velocity-core{width:184px;height:184px}
  .velocity-core strong{font-size:40px}.velocity-core span{margin-top:15px}
  .hud-rebate{top:0;right:0}
  .hud-speed{left:0;bottom:74px}
  .hud-switch{right:0;bottom:0}
  .hud-benefit{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
}
@media(prefers-reduced-motion:reduce){
  .hud-icon-growth,.hud-icon-speed i,.hud-icon-switch .switch-a,.hud-icon-switch .switch-b,.hud-rebate strong{animation:none!important}
}

/* v3.9 3D floating HUD panels: make the three CVP value signals feel like
   holographic displays in different Z-depths rather than flat stickers. */
.velocity-panel{
  perspective:980px;
  perspective-origin:50% 48%;
  transform-style:preserve-3d;
}
.velocity-core{
  transform:translateZ(0);
}
.hud-benefit{
  transform-style:preserve-3d;
  transform-origin:center;
  border-radius:2px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.055),transparent 28%),
    linear-gradient(105deg,rgba(4,23,44,.74),rgba(8,37,66,.30) 62%,rgba(4,23,44,.14));
  box-shadow:
    0 26px 52px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.22);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.hud-benefit .hud-icon,
.hud-benefit .hud-copy{
  transform:translateZ(20px);
}
.hud-benefit:before{
  opacity:.82;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--hud-accent) 20%,transparent));
}

/* +3% sits closest to camera and slowly floats forward/back. */
.hud-rebate{
  top:3%;
  right:-1%;
  background:
    linear-gradient(118deg,rgba(255,218,54,.08),transparent 31%),
    linear-gradient(105deg,rgba(7,27,48,.82),rgba(17,47,73,.30) 70%,rgba(6,24,45,.18));
  box-shadow:
    -10px 26px 54px rgba(0,0,0,.30),
    0 0 28px rgba(255,212,0,.07),
    inset 1px 0 0 rgba(255,231,122,.10),
    inset -1px 0 0 rgba(0,0,0,.26);
  animation:hudRebate3D 6.2s ease-in-out infinite!important;
}
@keyframes hudRebate3D{
  0%,100%{transform:translate3d(0,0,34px) rotateY(-10deg) rotateX(2.4deg) rotateZ(-.7deg)}
  50%{transform:translate3d(-2px,-3px,50px) rotateY(-8.3deg) rotateX(1.5deg) rotateZ(-.35deg);box-shadow:-13px 30px 62px rgba(0,0,0,.32),0 0 38px rgba(255,212,0,.11),inset 1px 0 0 rgba(255,231,122,.14),inset -1px 0 0 rgba(0,0,0,.25)}
}

/* Faster panel leans in from the left, like a speed telemetry display. */
.hud-speed{
  left:-2%;
  bottom:8%;
  background:
    linear-gradient(100deg,rgba(97,228,228,.075),transparent 32%),
    linear-gradient(90deg,rgba(4,23,44,.70),rgba(4,23,44,.18));
  transform:translate3d(0,0,16px) rotateY(10deg) rotateX(-2deg) rotateZ(1deg);
  box-shadow:
    13px 24px 50px rgba(0,0,0,.25),
    -10px 0 34px rgba(97,228,228,.045),
    inset -1px 0 0 rgba(97,228,228,.10);
}
/* short speed trails behind the panel, not another box */
.hud-speed .hud-icon:before,
.hud-speed .hud-icon:after{
  content:"";
  position:absolute;
  right:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(97,228,228,.58));
  filter:drop-shadow(0 0 5px rgba(97,228,228,.35));
  opacity:.42;
  animation:hudTrail 4.8s ease-in-out infinite;
}
.hud-speed .hud-icon:before{width:38px;top:9px;animation-delay:-1.3s}
.hud-speed .hud-icon:after{width:27px;bottom:8px;animation-delay:-3.1s}
@keyframes hudTrail{
  0%,64%,100%{transform:translateX(0) scaleX(.55);opacity:.16}
  72%{transform:translateX(-12px) scaleX(1.2);opacity:.62}
  82%{transform:translateX(4px) scaleX(.72);opacity:.24}
}

/* Brand Switch is slightly farther away and has a subtle second-layer offset. */
.hud-switch{
  right:-5%;
  bottom:2%;
  transform:translate3d(0,62%,8px) rotateY(-8deg) rotateX(-1deg) rotateZ(1.7deg);
  background:
    linear-gradient(112deg,rgba(255,112,67,.075),transparent 33%),
    linear-gradient(105deg,rgba(4,23,44,.68),rgba(4,23,44,.16));
  box-shadow:
    -8px 20px 45px rgba(0,0,0,.24),
    7px 8px 0 rgba(14,43,68,.42),
    11px 12px 24px rgba(0,0,0,.12),
    inset 1px 0 0 rgba(255,138,101,.08);
}
.hud-switch .hud-icon,
.hud-switch .hud-copy{transform:translateZ(16px)}

/* Hover eases panels a little closer to the viewer without a sticker-like scale jump. */
@media (hover:hover) and (pointer:fine){
  .hud-speed{transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease}
  .hud-switch{transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease}
  .hud-speed:hover{transform:translate3d(3px,-3px,31px) rotateY(6deg) rotateX(-1deg) rotateZ(.45deg);box-shadow:15px 30px 58px rgba(0,0,0,.28),-10px 0 38px rgba(97,228,228,.07)}
  .hud-switch:hover{transform:translate3d(-2px,59%,22px) rotateY(-5deg) rotateX(-.5deg) rotateZ(.7deg);box-shadow:-10px 25px 52px rgba(0,0,0,.27),5px 6px 0 rgba(14,43,68,.38),10px 11px 25px rgba(0,0,0,.11)}
}

/* Tablet/mobile: keep the depth cues but flatten the angle for readability. */
@media(max-width:900px){
  .velocity-panel{perspective:1150px}
  .hud-rebate{animation:hudRebate3DMobile 6.2s ease-in-out infinite!important}
  @keyframes hudRebate3DMobile{
    0%,100%{transform:translate3d(0,0,16px) rotateY(-4.5deg) rotateX(1deg) rotateZ(-.35deg)}
    50%{transform:translate3d(-1px,-2px,24px) rotateY(-3.2deg) rotateX(.6deg) rotateZ(-.15deg)}
  }
  .hud-speed{transform:translate3d(0,0,10px) rotateY(4.5deg) rotateX(-1deg) rotateZ(.45deg)}
  .hud-switch{transform:translate3d(0,0,5px) rotateY(-3.6deg) rotateX(-.5deg) rotateZ(.7deg);box-shadow:-5px 15px 34px rgba(0,0,0,.20),4px 5px 0 rgba(14,43,68,.34),8px 9px 18px rgba(0,0,0,.08)}
  .hud-benefit .hud-icon,.hud-benefit .hud-copy{transform:translateZ(9px)}
}

@media(max-width:560px){
  .hud-rebate{right:1%}
  .hud-speed{left:1%;transform:translate3d(0,0,7px) rotateY(3deg) rotateX(-.5deg) rotateZ(.35deg)}
  .hud-switch{right:1%;transform:translate3d(0,0,3px) rotateY(-2.4deg) rotateX(-.25deg) rotateZ(.5deg)}
  .hud-speed .hud-icon:before{width:28px}
  .hud-speed .hud-icon:after{width:20px}
}

@media(prefers-reduced-motion:reduce){
  .hud-rebate{animation:none!important;transform:translate3d(0,0,24px) rotateY(-7deg) rotateX(1deg)!important}
  .hud-speed .hud-icon:before,.hud-speed .hud-icon:after{animation:none!important}
}

/* v4.0 stronger 3D solid CVP benefit panels */
.velocity-panel{perspective:820px;perspective-origin:50% 48%;transform-style:preserve-3d}
.hud-benefit{
  min-height:158px;
  width:230px;
  padding:22px 20px 19px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:10px;
  overflow:visible;
  background:linear-gradient(145deg,rgba(18,57,91,.98) 0%,rgba(5,25,49,.98) 58%,rgba(3,16,33,.99) 100%);
  border:1px solid color-mix(in srgb,var(--hud-accent) 58%,#dceeff 42%);
  border-radius:9px;
  box-shadow:0 34px 58px rgba(0,0,0,.48),0 8px 0 rgba(1,10,22,.72),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -22px 35px rgba(0,0,0,.18),0 0 32px color-mix(in srgb,var(--hud-accent) 14%,transparent);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hud-benefit:before{
  inset:-1px;
  border-radius:9px;
  background:linear-gradient(120deg,rgba(255,255,255,.28),transparent 23%,transparent 70%,color-mix(in srgb,var(--hud-accent) 38%,transparent));
  opacity:.48;
  transform:translateZ(2px);
}
.hud-benefit:after{
  content:""!important;
  display:block!important;
  position:absolute;
  z-index:-1;
  left:9px;right:-9px;top:9px;bottom:-10px;
  border-radius:8px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--hud-accent) 26%,#07172b 74%),#020b17 72%);
  border:1px solid rgba(255,255,255,.07);
  transform:translateZ(-18px);
  opacity:.92;
  pointer-events:none;
}
.hud-benefit .hud-icon{width:68px;height:68px;flex:0 0 68px;transform:translateZ(34px);filter:drop-shadow(0 10px 15px rgba(0,0,0,.28))}
.hud-benefit .hud-icon svg{width:58px;height:58px;stroke-width:1.45;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--hud-accent) 48%,transparent))}
.hud-icon-speed{width:78px!important;justify-content:center;gap:5px!important}
.hud-icon-speed i{width:17px;height:17px;border-width:3px;filter:drop-shadow(0 0 8px rgba(97,228,228,.72))}
.hud-benefit .hud-copy{transform:translateZ(25px);justify-items:center;gap:5px}
.hud-benefit small{font-size:10px;letter-spacing:.16em}
.hud-benefit strong{white-space:normal;text-align:center}
.hud-rebate{top:0;right:-3%;width:224px;min-height:170px;transform:translate3d(0,-4px,68px) rotateY(-23deg) rotateX(8deg) rotateZ(-2deg);animation:hudRebateStrong3D 6.5s ease-in-out infinite!important}
.hud-rebate strong{font-size:52px}
@keyframes hudRebateStrong3D{0%,100%{transform:translate3d(0,-4px,68px) rotateY(-23deg) rotateX(8deg) rotateZ(-2deg)}50%{transform:translate3d(-5px,-11px,92px) rotateY(-19deg) rotateX(6deg) rotateZ(-1.2deg)}}
.hud-speed{left:-5%;bottom:5%;width:232px;min-height:160px;transform:translate3d(-4px,2px,38px) rotateY(24deg) rotateX(-7deg) rotateZ(2.2deg);background:linear-gradient(145deg,rgba(11,67,91,.99),rgba(4,31,54,.99) 58%,rgba(2,17,32,.99));box-shadow:-24px 35px 60px rgba(0,0,0,.46),-7px 8px 0 rgba(1,13,25,.76),inset 0 1px 0 rgba(255,255,255,.15),0 0 35px rgba(97,228,228,.13)}
.hud-speed strong{font-size:31px}
.hud-switch{right:-1%;bottom:5%;transform:translate3d(0,68%,18px) rotateY(-25deg) rotateX(-6deg) rotateZ(-2.5deg);width:238px;min-height:166px;background:linear-gradient(145deg,rgba(80,39,48,.99),rgba(27,28,52,.99) 55%,rgba(6,19,38,.99));box-shadow:24px 34px 62px rgba(0,0,0,.47),8px 8px 0 rgba(22,12,24,.76),inset 0 1px 0 rgba(255,255,255,.14),0 0 34px rgba(255,112,67,.13)}
.hud-switch strong{font-size:20px;line-height:1.08}
.hud-switch em{font-size:11px}
.hud-rebate .hud-copy:after,.hud-speed .hud-copy:after,.hud-switch .hud-copy:after{display:none!important}
@media (hover:hover) and (pointer:fine){
 .hud-speed:hover{transform:translate3d(4px,-8px,68px) rotateY(17deg) rotateX(-4deg) rotateZ(1.3deg);box-shadow:-28px 40px 66px rgba(0,0,0,.5),-7px 8px 0 rgba(1,13,25,.76),0 0 40px rgba(97,228,228,.17)}
 .hud-switch:hover{transform:translate3d(-5px,64%,50px) rotateY(-18deg) rotateX(-4deg) rotateZ(-1.5deg);box-shadow:28px 40px 68px rgba(0,0,0,.5),8px 8px 0 rgba(22,12,24,.76),0 0 40px rgba(255,112,67,.16)}
}
/* Mobile: cards stay separated and readable; no overlap with CVP or each other. */
@media (max-width:900px){
 .velocity-panel{max-width:390px!important;height:650px!important;display:block;perspective:1100px}
 .velocity-core{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);z-index:5}
 .hud-benefit{width:188px!important;min-width:0!important;min-height:132px;padding:16px 14px;gap:6px}
 .hud-benefit .hud-icon{width:48px;height:48px;flex-basis:48px}.hud-benefit .hud-icon svg{width:42px;height:42px}.hud-icon-speed{width:58px!important}.hud-icon-speed i{width:12px;height:12px;border-width:2px}
 .hud-benefit .hud-copy{gap:3px}.hud-benefit small{font-size:8px}.hud-benefit strong{font-size:23px}.hud-rebate strong{font-size:38px}.hud-switch strong{font-size:15px}
 .hud-rebate{top:0!important;right:2px!important;left:auto!important;bottom:auto!important;transform:rotateY(-10deg) rotateX(4deg) rotateZ(-1deg)!important;animation:none!important}
 .hud-speed{top:auto!important;left:0!important;right:auto!important;bottom:88px!important;transform:rotateY(9deg) rotateX(-3deg) rotateZ(1deg)!important}
 .hud-switch{top:auto!important;right:0!important;left:auto!important;bottom:88px!important;transform:rotateY(-9deg) rotateX(-3deg) rotateZ(-1deg)!important}
}
@media (max-width:520px){
 .velocity-panel{max-width:350px!important;height:710px!important}
 .velocity-core{top:36%}
 .hud-benefit{width:164px!important;min-height:124px;padding:14px 10px}
 .hud-rebate{right:0!important}
 .hud-speed{left:0!important;bottom:156px!important}
 .hud-switch{right:0!important;bottom:156px!important}
 .hud-benefit .hud-icon{width:44px;height:44px;flex-basis:44px}.hud-benefit .hud-icon svg{width:38px;height:38px}
 .hud-benefit strong{font-size:20px}.hud-rebate strong{font-size:34px}.hud-switch strong{font-size:13px}
}
@media (max-width:370px){
 .velocity-panel{height:735px!important}
 .hud-benefit{width:152px!important}
 .hud-speed{left:0!important;bottom:170px!important}.hud-switch{right:0!important;bottom:170px!important}
}
@media (prefers-reduced-motion:reduce){.hud-rebate{animation:none!important}}

/* v4.0.1 BUGFIX — prevent detached 3D backplate/pseudo-element from escaping
   its transformed panel in Safari/Chrome. Panel depth is now rendered with
   layered box-shadows instead of a translateZ(-18px) pseudo-element. */
.hud-benefit:after{
  content:none!important;
  display:none!important;
}
.hud-benefit{
  isolation:isolate;
}
.hud-rebate{
  box-shadow:14px 34px 58px rgba(0,0,0,.48),7px 9px 0 rgba(2,12,25,.82),11px 13px 0 color-mix(in srgb,var(--hud-accent) 8%,#07172b 92%),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -22px 35px rgba(0,0,0,.18),0 0 32px color-mix(in srgb,var(--hud-accent) 14%,transparent);
}
.hud-speed{
  box-shadow:-24px 35px 60px rgba(0,0,0,.46),-7px 8px 0 rgba(1,13,25,.82),-11px 12px 0 rgba(4,34,53,.72),inset 0 1px 0 rgba(255,255,255,.15),0 0 35px rgba(97,228,228,.13);
}
.hud-switch{
  box-shadow:24px 34px 62px rgba(0,0,0,.47),8px 8px 0 rgba(22,12,24,.82),12px 12px 0 rgba(53,24,38,.68),inset 0 1px 0 rgba(255,255,255,.14),0 0 34px rgba(255,112,67,.13);
}


/* v4.1 Advantage cards — compact yellow markers in the top-left corner.
   Keeps all three markers consistent and frees vertical space for copy. */
.advantage-card{
  position:relative;
  padding:28px 30px 30px;
}
.advantage-card .icon{
  position:absolute;
  top:16px;
  left:16px;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--yellow);
  color:#092234;
  font-size:13px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.02em;
  box-shadow:0 6px 14px rgba(0,0,0,.16),0 0 0 1px rgba(255,255,255,.12) inset;
}
.advantage-card h3{
  margin:24px 0 16px;
}
@media(max-width:900px){
  .advantage-card{padding:26px 26px 28px}
  .advantage-card .icon{top:14px;left:14px;width:28px;height:28px;font-size:12px}
  .advantage-card h3{margin:22px 0 15px}
}

/* v4.2 Responsive CVP program label / eyebrow */
.program-lockup p,
#advantages .section-title .eyebrow{
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap:balance;
}

/* Keep the long label neat on desktop without forcing the surrounding layout wider. */
@media (min-width:901px){
  #advantages .section-title .eyebrow{
    width:fit-content;
    font-size:clamp(9px,.78vw,11px);
    letter-spacing:clamp(.08em,.12vw,.18em);
    line-height:1.35;
  }
}

/* Tablet / mobile: allow a clean two-line wrap and reduce tracking. */
@media (max-width:900px){
  .program-lockup p,
  #advantages .section-title .eyebrow{
    font-size:clamp(10px,2.7vw,12px);
    line-height:1.45;
    letter-spacing:.09em;
    max-width:32rem;
  }

  #advantages .section-title{
    max-width:100%;
  }
}

@media (max-width:520px){
  .program-lockup p,
  #advantages .section-title .eyebrow{
    font-size:10px;
    line-height:1.5;
    letter-spacing:.065em;
    max-width:100%;
  }
}

/* v4.3 Responsive Advantages title panel
   The entire Ingram Micro Exclusive / Why Join title block scales as one panel. */
#advantages .section-title{
  width:min(100%, 1180px);
  max-width:none;
  padding:clamp(20px,2.2vw,32px) clamp(22px,2.8vw,42px);
  margin:0 0 clamp(32px,4vw,50px);
  background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 45px rgba(2,20,35,.15), inset 0 1px 0 rgba(255,255,255,.07);
}

#advantages .section-title .eyebrow{
  max-width:100%;
  margin-bottom:clamp(12px,1.3vw,18px);
}

#advantages .section-title h2{
  max-width:100%;
  margin-bottom:0;
}

/* Desktop: preserve the one-line headline when there is enough room. */
@media (min-width:1100px){
  #advantages .section-title h2{
    white-space:nowrap;
    font-size:clamp(42px,4vw,64px);
  }
}

/* Tablet: panel becomes fluid and the title may wrap naturally. */
@media (max-width:1099px){
  #advantages .section-title{
    width:100%;
  }
  #advantages .section-title h2{
    white-space:normal!important;
    font-size:clamp(38px,6.2vw,58px);
    line-height:1.02;
  }
}

/* Mobile: reduce panel padding and tracking, keep everything inside viewport. */
@media (max-width:600px){
  #advantages .section-title{
    width:100%;
    padding:18px 18px 20px;
    border-radius:10px;
    margin-bottom:28px;
  }
  #advantages .section-title .eyebrow{
    font-size:10px;
    line-height:1.45;
    letter-spacing:.055em;
    text-wrap:pretty;
  }
  #advantages .section-title h2{
    font-size:clamp(34px,10.2vw,46px);
    line-height:1.02;
    letter-spacing:-.045em;
  }
}

/* v4.5 Geometric HUD Signals — remove sticker/card treatment while preserving
   the client-requested shape language: rebate=circle, speed=hexagon, switch=oval. */
.hud-benefit{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  isolation:isolate;
}
.hud-benefit .hud-icon,
.hud-benefit .hud-copy{
  position:relative;
  z-index:3;
  transform:none!important;
}
.hud-benefit .hud-icon{
  margin:0 auto 4px;
  filter:none;
}
.hud-benefit .hud-copy{
  width:100%;
  justify-items:center;
  text-align:center;
}
.hud-benefit small{color:#a9bfd0}
.hud-benefit em{color:#d2dee7}

/* EXCLUSIVE REBATE — broken circular HUD ring, not a filled badge. */
.hud-rebate{
  width:210px!important;
  min-width:210px!important;
  height:210px!important;
  min-height:210px!important;
  padding:34px 24px!important;
  border-radius:50%!important;
  transform-style:preserve-3d;
  box-shadow:0 0 42px rgba(255,212,0,.08)!important;
}
.hud-rebate:before,
.hud-rebate:after{
  content:""!important;
  display:block!important;
  position:absolute;
  inset:8px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}
.hud-rebate:before{
  border:1px solid transparent;
  border-top-color:rgba(255,212,0,.92);
  border-right-color:rgba(255,212,0,.42);
  border-bottom-color:rgba(255,212,0,.18);
  transform:rotate(18deg);
  filter:drop-shadow(0 0 8px rgba(255,212,0,.26));
}
.hud-rebate:after{
  inset:20px;
  border:1px solid transparent;
  border-left-color:rgba(255,240,151,.44);
  border-bottom-color:rgba(255,212,0,.62);
  transform:rotate(-34deg);
  opacity:.82;
  filter:drop-shadow(0 0 10px rgba(255,212,0,.18));
}
.hud-rebate .hud-icon{color:#ffe36a}
.hud-rebate strong{
  font-size:54px!important;
  color:var(--yellow)!important;
  text-shadow:0 0 20px rgba(255,212,0,.20);
}
.hud-rebate .hud-copy:before{
  content:"";
  position:absolute;
  left:50%;
  top:-10px;
  width:72px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,212,0,.45),transparent);
  opacity:.7;
}

/* SALES MOTION — open hex frame. Corners/edges imply a hexagon without
   enclosing the content in a solid six-sided card. */
.hud-speed{
  width:250px!important;
  min-width:250px!important;
  height:188px!important;
  min-height:188px!important;
  padding:30px 38px!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  filter:none!important;
  box-shadow:0 0 40px rgba(97,228,228,.07)!important;
}
.hud-speed:before,
.hud-speed:after{
  content:""!important;
  display:block!important;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background-repeat:no-repeat;
}
.hud-speed:before{
  background:
    linear-gradient(30deg,transparent 46%,rgba(97,228,228,.72) 48%,rgba(97,228,228,.72) 52%,transparent 54%) left top/64px 48px no-repeat,
    linear-gradient(-30deg,transparent 46%,rgba(97,228,228,.72) 48%,rgba(97,228,228,.72) 52%,transparent 54%) right top/64px 48px no-repeat,
    linear-gradient(-30deg,transparent 46%,rgba(97,228,228,.55) 48%,rgba(97,228,228,.55) 52%,transparent 54%) left bottom/64px 48px no-repeat,
    linear-gradient(30deg,transparent 46%,rgba(97,228,228,.55) 48%,rgba(97,228,228,.55) 52%,transparent 54%) right bottom/64px 48px no-repeat;
  filter:drop-shadow(0 0 7px rgba(97,228,228,.24));
  opacity:.95;
}
.hud-speed:after{
  inset:12px 24px;
  background:
    linear-gradient(90deg,rgba(97,228,228,.55),transparent) left top/72px 1px no-repeat,
    linear-gradient(270deg,rgba(97,228,228,.55),transparent) right bottom/72px 1px no-repeat;
  opacity:.65;
}
.hud-speed .hud-icon{color:var(--cyan)}
.hud-speed strong{
  font-size:34px!important;
  color:var(--cyan)!important;
  text-shadow:0 0 18px rgba(97,228,228,.14);
}
.hud-speed .hud-icon:before,
.hud-speed .hud-icon:after{display:none!important}

/* BRAND SWITCH — two floating elliptical arcs. The oval is suggested by
   motion/trajectory lines rather than a filled capsule. */
.hud-switch{
  width:274px!important;
  min-width:274px!important;
  height:160px!important;
  min-height:160px!important;
  padding:27px 42px!important;
  border-radius:50% / 48%!important;
  box-shadow:0 0 42px rgba(255,112,67,.07)!important;
}
.hud-switch:before,
.hud-switch:after{
  content:""!important;
  display:block!important;
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}
.hud-switch:before{
  inset:8px 4px;
  border:1px solid transparent;
  border-top-color:rgba(255,112,67,.78);
  border-right-color:rgba(255,112,67,.34);
  transform:rotate(-5deg);
  filter:drop-shadow(0 0 8px rgba(255,112,67,.20));
}
.hud-switch:after{
  inset:20px 17px;
  border:1px solid transparent;
  border-left-color:rgba(255,138,101,.32);
  border-bottom-color:rgba(255,112,67,.62);
  transform:rotate(8deg);
  opacity:.86;
  filter:drop-shadow(0 0 9px rgba(255,112,67,.16));
}
.hud-switch .hud-icon{color:#ff8a65}
.hud-switch strong{
  font-size:20px!important;
  color:#fff!important;
  text-shadow:0 0 16px rgba(255,112,67,.11);
}

/* Add depth as light-plane separation instead of card thickness. */
.hud-rebate{
  animation:hudRebateSignal 6.5s ease-in-out infinite!important;
}
@keyframes hudRebateSignal{
  0%,100%{transform:translate3d(0,-4px,34px) rotateY(-12deg) rotateX(4deg) rotateZ(-1deg)}
  50%{transform:translate3d(-2px,-8px,47px) rotateY(-10deg) rotateX(3deg) rotateZ(-.5deg)}
}
.hud-speed{
  transform:translate3d(-4px,2px,20px) rotateY(13deg) rotateX(-4deg) rotateZ(1.3deg)!important;
}
.hud-switch{
  transform:translate3d(0,34%,12px) rotateY(-13deg) rotateX(-3deg) rotateZ(-1.3deg)!important;
}

@media (hover:hover) and (pointer:fine){
  .hud-speed,.hud-switch{transition:transform .5s var(--ease),filter .5s ease}
  .hud-speed:hover{transform:translate3d(2px,-4px,31px) rotateY(9deg) rotateX(-2deg) rotateZ(.7deg)!important}
  .hud-switch:hover{transform:translate3d(-3px,30%,24px) rotateY(-9deg) rotateX(-2deg) rotateZ(-.7deg)!important}
}

/* Mobile — preserve each distinct geometry but flatten the perspective and
   keep the three HUD signals from covering one another. */
@media(max-width:900px){
  .hud-rebate{
    width:164px!important;min-width:164px!important;height:164px!important;min-height:164px!important;
    padding:24px 15px!important;
    transform:none!important;
    animation:hudRebateSignalMobile 6.5s ease-in-out infinite!important;
  }
  @keyframes hudRebateSignalMobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .hud-rebate strong{font-size:40px!important}

  .hud-speed{
    width:190px!important;min-width:190px!important;height:146px!important;min-height:146px!important;
    padding:22px 30px!important;
    transform:rotateY(4deg) rotateX(-1.5deg) rotateZ(.35deg)!important;
  }
  .hud-speed strong{font-size:24px!important}

  .hud-switch{
    width:202px!important;min-width:202px!important;height:126px!important;min-height:126px!important;
    padding:20px 30px!important;
    transform:rotateY(-4deg) rotateX(-1.2deg) rotateZ(-.35deg)!important;
  }
  .hud-switch strong{font-size:15px!important}
}

@media(max-width:520px){
  .hud-rebate{width:152px!important;min-width:152px!important;height:152px!important;min-height:152px!important}
  .hud-speed{width:174px!important;min-width:174px!important;height:136px!important;min-height:136px!important;padding:20px 26px!important}
  .hud-switch{width:184px!important;min-width:184px!important;height:118px!important;min-height:118px!important;padding:18px 26px!important}
}

@media(max-width:370px){
  .hud-rebate{width:142px!important;min-width:142px!important;height:142px!important;min-height:142px!important}
  .hud-speed{width:164px!important;min-width:164px!important;height:130px!important;min-height:130px!important}
  .hud-switch{width:174px!important;min-width:174px!important;height:112px!important;min-height:112px!important}
}

@media(prefers-reduced-motion:reduce){
  .hud-rebate{animation:none!important;transform:none!important}
  .hud-speed,.hud-switch{transform:none!important}
}


/* v4.6 HUD visibility + artefact fix
   - removes detached dark pseudo-element / ellipse artefacts
   - adds restrained colour fields while keeping the open-HUD treatment
   - increases contrast/readability without returning to sticker cards */

/* Kill any legacy pseudo/depth layers that can detach during 3D compositing. */
.hud-rebate:after,
.hud-speed:after,
.hud-switch:after{
  content:none!important;
  display:none!important;
}

/* Make all HUD copy sit above decorative geometry. */
.hud-rebate .hud-copy,
.hud-speed .hud-copy,
.hud-switch .hud-copy,
.hud-rebate .hud-icon,
.hud-speed .hud-icon,
.hud-switch .hud-icon{
  position:relative;
  z-index:5;
}

/* REBATE: yellow energy ring + subtle warm centre illumination. */
.hud-rebate{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,212,0,.13) 0 38%,rgba(255,212,0,.035) 55%,transparent 72%)!important;
  filter:drop-shadow(0 0 15px rgba(255,212,0,.18));
}
.hud-rebate:before{
  background:
    conic-gradient(from 18deg,
      #ffd400 0 14%,
      transparent 14% 23%,
      rgba(255,224,72,.82) 23% 43%,
      transparent 43% 57%,
      #ffd400 57% 73%,
      transparent 73% 84%,
      rgba(255,224,72,.72) 84% 96%,
      transparent 96% 100%)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:.9!important;
  filter:drop-shadow(0 0 7px rgba(255,212,0,.58));
}
.hud-rebate small,.hud-rebate em{color:#fff3a8!important}
.hud-rebate strong{
  color:#ffd400!important;
  text-shadow:0 0 14px rgba(255,212,0,.38),0 2px 16px rgba(0,0,0,.42);
}

/* SPEED: cyan open hex with a faint blue/cyan energy wash. */
.hud-speed{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(34,211,238,.16),rgba(14,116,144,.055) 52%,transparent 72%)!important;
  filter:drop-shadow(0 0 15px rgba(97,228,228,.16));
}
.hud-speed:before{
  background:
    linear-gradient(#61e4e4,#61e4e4) 18% 4%/24% 2px no-repeat,
    linear-gradient(#61e4e4,#61e4e4) 82% 4%/24% 2px no-repeat,
    linear-gradient(30deg,transparent 47%,#61e4e4 48% 52%,transparent 53%) 0 0/25% 50% no-repeat,
    linear-gradient(-30deg,transparent 47%,#61e4e4 48% 52%,transparent 53%) 100% 0/25% 50% no-repeat,
    linear-gradient(-30deg,transparent 47%,#61e4e4 48% 52%,transparent 53%) 0 100%/25% 50% no-repeat,
    linear-gradient(30deg,transparent 47%,#61e4e4 48% 52%,transparent 53%) 100% 100%/25% 50% no-repeat,
    linear-gradient(#61e4e4,#61e4e4) 18% 96%/24% 2px no-repeat,
    linear-gradient(#61e4e4,#61e4e4) 82% 96%/24% 2px no-repeat!important;
  opacity:.88!important;
  filter:drop-shadow(0 0 6px rgba(97,228,228,.48));
}
.hud-speed small,.hud-speed em{color:#c9fbff!important}
.hud-speed strong{
  color:#61e4e4!important;
  text-shadow:0 0 13px rgba(97,228,228,.36),0 2px 16px rgba(0,0,0,.4);
}

/* SWITCH: orange/magenta elliptical signal, but no solid oval surface. */
.hud-switch{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(255,112,67,.16),rgba(226,72,153,.055) 48%,transparent 72%)!important;
  filter:drop-shadow(0 0 16px rgba(255,112,67,.17));
}
.hud-switch:before{
  background:
    conic-gradient(from 8deg,
      #ff7043 0 12%,
      transparent 12% 27%,
      rgba(255,112,67,.82) 27% 42%,
      transparent 42% 61%,
      #ff8a65 61% 76%,
      transparent 76% 89%,
      rgba(236,72,153,.72) 89% 97%,
      transparent 97% 100%)!important;
  border-radius:50%!important;
  -webkit-mask:radial-gradient(ellipse at center,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(ellipse at center,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:.9!important;
  filter:drop-shadow(0 0 7px rgba(255,112,67,.5));
}
.hud-switch small,.hud-switch em{color:#ffd7cb!important}
.hud-switch strong{
  color:#fff!important;
  text-shadow:0 0 12px rgba(255,112,67,.32),0 2px 16px rgba(0,0,0,.5);
}
.hud-switch .hud-icon{
  color:#ff8a65!important;
  filter:drop-shadow(0 0 8px rgba(255,112,67,.45));
}

/* Ensure no old dark fill survives from earlier shape-card versions. */
.hud-rebate,
.hud-speed,
.hud-switch{
  box-shadow:none!important;
  border-color:transparent!important;
}

/* Mobile: slightly stronger illumination because the signals render smaller. */
@media(max-width:900px){
  .hud-rebate{
    background:radial-gradient(circle,rgba(255,212,0,.17),rgba(255,212,0,.04) 55%,transparent 72%)!important;
  }
  .hud-speed{
    background:radial-gradient(ellipse,rgba(34,211,238,.2),rgba(14,116,144,.055) 55%,transparent 74%)!important;
  }
  .hud-switch{
    background:radial-gradient(ellipse,rgba(255,112,67,.2),rgba(226,72,153,.055) 54%,transparent 74%)!important;
  }
}


/* v4.7 client polish
   - stronger / slightly larger icons
   - shorter four diagonal segments on Sales Motion
   - light translucent patterned fill for Brand Switch */

/* Stronger icon presence across all three HUD signals. */
.hud-benefit .hud-icon{
  width:78px!important;
  height:78px!important;
  flex:0 0 78px!important;
  filter:
    drop-shadow(0 0 8px color-mix(in srgb,var(--hud-accent) 70%,transparent))
    drop-shadow(0 0 18px color-mix(in srgb,var(--hud-accent) 28%,transparent))!important;
}
.hud-benefit .hud-icon svg{
  width:66px!important;
  height:66px!important;
  stroke-width:1.8!important;
}
.hud-rebate .hud-icon{
  color:#ffe45c!important;
}
.hud-speed .hud-icon{
  color:#7ff5ff!important;
}
.hud-switch .hud-icon{
  color:#ff9a78!important;
}
.hud-icon-speed{
  width:88px!important;
  gap:6px!important;
}
.hud-icon-speed i{
  width:19px!important;
  height:19px!important;
  border-width:3px!important;
  color:#7ff5ff!important;
  filter:
    drop-shadow(0 0 7px rgba(127,245,255,.78))
    drop-shadow(0 0 14px rgba(97,228,228,.28))!important;
}

/* Sales Motion: shorten the four diagonal corner segments by roughly 50%.
   Horizontal top/bottom signal segments stay unchanged. */
.hud-speed:before{
  background:
    linear-gradient(#61e4e4,#61e4e4) 18% 4%/24% 2px no-repeat,
    linear-gradient(#61e4e4,#61e4e4) 82% 4%/24% 2px no-repeat,

    linear-gradient(30deg,transparent 45%,#61e4e4 47% 53%,transparent 55%) 3% 18%/13% 28% no-repeat,
    linear-gradient(-30deg,transparent 45%,#61e4e4 47% 53%,transparent 55%) 97% 18%/13% 28% no-repeat,
    linear-gradient(-30deg,transparent 45%,#61e4e4 47% 53%,transparent 55%) 3% 82%/13% 28% no-repeat,
    linear-gradient(30deg,transparent 45%,#61e4e4 47% 53%,transparent 55%) 97% 82%/13% 28% no-repeat,

    linear-gradient(#61e4e4,#61e4e4) 18% 96%/24% 2px no-repeat,
    linear-gradient(#61e4e4,#61e4e4) 82% 96%/24% 2px no-repeat!important;
}

/* Brand Switch: give the ellipse a light translucent patterned interior.
   It remains HUD-like rather than a solid sticker. */
.hud-switch{
  background:
    radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.16) 0 18%,transparent 45%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.045) 0 1px,
      transparent 1px 14px),
    linear-gradient(120deg,
      rgba(255,170,145,.20) 0%,
      rgba(255,112,67,.11) 38%,
      rgba(206,119,255,.10) 72%,
      rgba(125,220,255,.08) 100%)!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.12)!important;
  backdrop-filter:blur(7px) saturate(1.12)!important;
}

/* Additional faint geometric pattern only inside Brand Switch. */
.hud-switch .hud-copy:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-34px -54px -30px;
  pointer-events:none;
  opacity:.42;
  background:
    radial-gradient(circle at 18% 28%,rgba(255,255,255,.22) 0 2px,transparent 2.5px),
    radial-gradient(circle at 82% 68%,rgba(255,154,120,.26) 0 2px,transparent 2.5px),
    linear-gradient(60deg,transparent 47%,rgba(255,255,255,.05) 48% 52%,transparent 53%) 0 0/34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 70%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 0 70%,transparent 100%);
}

/* Mobile: keep icons a touch larger, but not enough to force overlap. */
@media(max-width:900px){
  .hud-benefit .hud-icon{
    width:56px!important;
    height:56px!important;
    flex-basis:56px!important;
  }
  .hud-benefit .hud-icon svg{
    width:48px!important;
    height:48px!important;
  }
  .hud-icon-speed{
    width:66px!important;
  }
  .hud-icon-speed i{
    width:14px!important;
    height:14px!important;
    border-width:2.5px!important;
  }
}

@media(max-width:520px){
  .hud-benefit .hud-icon{
    width:52px!important;
    height:52px!important;
    flex-basis:52px!important;
  }
  .hud-benefit .hud-icon svg{
    width:44px!important;
    height:44px!important;
  }
  .hud-icon-speed{
    width:62px!important;
  }
}


/* v4.8 client adjustment
   - Brand Switch visual returns to v4.6 treatment
   - icons flash brighter and faster */

/* Restore Brand Switch background/treatment to v4.6. */
.hud-switch{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(255,112,67,.16),rgba(226,72,153,.055) 48%,transparent 72%)!important;
  filter:drop-shadow(0 0 16px rgba(255,112,67,.17))!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.hud-switch:before{
  background:
    conic-gradient(from 8deg,
      #ff7043 0 12%,
      transparent 12% 27%,
      rgba(255,112,67,.82) 27% 42%,
      transparent 42% 61%,
      #ff8a65 61% 76%,
      transparent 76% 89%,
      rgba(236,72,153,.72) 89% 97%,
      transparent 97% 100%)!important;
  border-radius:50%!important;
  -webkit-mask:radial-gradient(ellipse at center,transparent calc(100% - 3px),#000 calc(100% - 2px))!important;
  mask:radial-gradient(ellipse at center,transparent calc(100% - 3px),#000 calc(100% - 2px))!important;
  opacity:.9!important;
  filter:drop-shadow(0 0 7px rgba(255,112,67,.5))!important;
}
/* Remove v4.7 interior pattern. */
.hud-switch .hud-copy:before{
  content:none!important;
  display:none!important;
}

/* Faster, brighter icon flash across all three signals. */
.hud-rebate .hud-icon,
.hud-speed .hud-icon,
.hud-switch .hud-icon{
  animation:hudIconPulse 1.35s ease-in-out infinite!important;
}
@keyframes hudIconPulse{
  0%,100%{
    opacity:.72;
    filter:
      brightness(1)
      drop-shadow(0 0 7px color-mix(in srgb,var(--hud-accent) 55%,transparent))
      drop-shadow(0 0 14px color-mix(in srgb,var(--hud-accent) 22%,transparent));
  }
  36%{
    opacity:1;
    filter:
      brightness(1.55)
      drop-shadow(0 0 11px color-mix(in srgb,var(--hud-accent) 95%,transparent))
      drop-shadow(0 0 26px color-mix(in srgb,var(--hud-accent) 52%,transparent));
  }
  52%{
    opacity:.84;
    filter:
      brightness(1.16)
      drop-shadow(0 0 8px color-mix(in srgb,var(--hud-accent) 70%,transparent));
  }
  68%{
    opacity:1;
    filter:
      brightness(1.42)
      drop-shadow(0 0 10px color-mix(in srgb,var(--hud-accent) 88%,transparent))
      drop-shadow(0 0 22px color-mix(in srgb,var(--hud-accent) 42%,transparent));
  }
}

/* Keep the speed chevrons visibly energetic as well. */
.hud-icon-speed i{
  animation:speedChevronFast 1.15s ease-in-out infinite!important;
}
.hud-icon-speed i:nth-child(2){animation-delay:.08s!important}
.hud-icon-speed i:nth-child(3){animation-delay:.16s!important}
@keyframes speedChevronFast{
  0%,100%{
    opacity:.26;
    transform:translateX(-2px) rotate(45deg);
    filter:brightness(1) drop-shadow(0 0 5px rgba(127,245,255,.5));
  }
  46%{
    opacity:1;
    transform:translateX(3px) rotate(45deg);
    filter:brightness(1.65) drop-shadow(0 0 12px rgba(127,245,255,.95));
  }
  68%{
    opacity:.48;
    transform:translateX(5px) rotate(45deg);
    filter:brightness(1.2) drop-shadow(0 0 7px rgba(127,245,255,.66));
  }
}

/* Brand Switch arrows flash a little faster than the parent icon. */
.hud-icon-switch .switch-a,
.hud-icon-switch .switch-b{
  animation:switchFlowFast 1.55s ease-in-out infinite!important;
}
.hud-icon-switch .switch-b{animation-delay:.12s!important}
@keyframes switchFlowFast{
  0%,100%{opacity:.28;transform:translateX(-1px)}
  38%{opacity:1;transform:translateX(4px)}
  62%{opacity:.58;transform:translateX(1px)}
  78%{opacity:1;transform:translateX(3px)}
}

@media(prefers-reduced-motion:reduce){
  .hud-rebate .hud-icon,
  .hud-speed .hud-icon,
  .hud-switch .hud-icon,
  .hud-icon-speed i,
  .hud-icon-switch .switch-a,
  .hud-icon-switch .switch-b{
    animation:none!important;
  }
}


/* v4.9 Brand Switch elliptical energy frame
   Adds a broken orange/magenta outer frame similar in visual language
   to Exclusive Rebate, while keeping +3% as the stronger signal. */

.hud-switch{
  position:absolute;
  isolation:isolate;
}

/* Main broken elliptical energy frame */
.hud-switch:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-7px -10px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:
    conic-gradient(from 5deg,
      #ff7043 0 10%,
      transparent 10% 18%,
      rgba(255,138,101,.92) 18% 34%,
      transparent 34% 46%,
      rgba(236,72,153,.72) 46% 58%,
      transparent 58% 69%,
      #ff7043 69% 83%,
      transparent 83% 91%,
      rgba(255,168,132,.76) 91% 97%,
      transparent 97% 100%)!important;
  -webkit-mask:radial-gradient(ellipse at center,
      transparent calc(100% - 3px),
      #000 calc(100% - 2px))!important;
  mask:radial-gradient(ellipse at center,
      transparent calc(100% - 3px),
      #000 calc(100% - 2px))!important;
  opacity:.92!important;
  filter:
    drop-shadow(0 0 5px rgba(255,112,67,.64))
    drop-shadow(0 0 11px rgba(236,72,153,.20))!important;
  animation:brandFramePulse 2.15s ease-in-out infinite!important;
}

/* A second, very faint offset arc gives the frame a little HUD depth
   without creating a solid sticker/backplate. */
.hud-switch > .hud-icon:before{
  content:"";
  position:absolute;
  width:226px;
  height:128px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-5deg);
  border-radius:50%;
  border-top:1px solid rgba(255,174,143,.30);
  border-bottom:1px solid rgba(211,92,180,.18);
  border-left:1px solid transparent;
  border-right:1px solid transparent;
  pointer-events:none;
  opacity:.58;
  filter:drop-shadow(0 0 5px rgba(255,112,67,.22));
}

@keyframes brandFramePulse{
  0%,100%{
    opacity:.72;
    filter:
      drop-shadow(0 0 4px rgba(255,112,67,.48))
      drop-shadow(0 0 8px rgba(236,72,153,.14));
  }
  36%{
    opacity:1;
    filter:
      brightness(1.28)
      drop-shadow(0 0 7px rgba(255,112,67,.82))
      drop-shadow(0 0 15px rgba(236,72,153,.28));
  }
  58%{
    opacity:.82;
    filter:
      drop-shadow(0 0 5px rgba(255,112,67,.58))
      drop-shadow(0 0 10px rgba(236,72,153,.18));
  }
}

/* Keep Brand Switch copy and icon safely above the new frame. */
.hud-switch .hud-icon,
.hud-switch .hud-copy{
  position:relative;
  z-index:5;
}

/* Mobile: scale the secondary ellipse with the smaller HUD. */
@media(max-width:900px){
  .hud-switch:before{
    inset:-5px -7px!important;
  }
  .hud-switch > .hud-icon:before{
    width:174px;
    height:108px;
  }
}

@media(max-width:520px){
  .hud-switch > .hud-icon:before{
    width:158px;
    height:100px;
  }
}

@media(max-width:370px){
  .hud-switch > .hud-icon:before{
    width:146px;
    height:94px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hud-switch:before{
    animation:none!important;
    opacity:.86!important;
  }
}


/* v5.0 PA-500 hero visual rebuild
   Client direction: product image first, then three benefits in one row.
   Removes the former circular PA-500 core presentation. */

.velocity-panel--pa500{
  width:min(100%,680px)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:12px 0 4px;
  overflow:visible!important;
  perspective:none!important;
}

.velocity-panel--pa500:before,
.velocity-panel--pa500:after{
  content:none!important;
  display:none!important;
}

.velocity-panel--pa500 .pa500-product-visual{
  position:relative;
  width:min(100%,590px);
  display:flex;
  justify-content:center;
  align-items:center;
  isolation:isolate;
}

.velocity-panel--pa500 .pa500-product-visual:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:78%;
  height:70%;
  left:50%;
  top:50%;
  transform:translate(-50%,-47%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(79,207,255,.16),rgba(39,111,190,.055) 48%,transparent 72%);
  filter:blur(8px);
}

.velocity-panel--pa500 .pa500-product-visual img{
  display:block;
  width:100%;
  height:auto;
  max-height:250px;
  object-fit:contain;
  filter:
    drop-shadow(0 20px 22px rgba(0,0,0,.28))
    drop-shadow(0 0 16px rgba(84,207,255,.10));
}

.pa500-benefits{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

.pa500-benefit{
  position:relative;
  min-width:0;
  min-height:128px;
  padding:15px 10px 13px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  color:#fff;
  background:linear-gradient(180deg,rgba(9,40,67,.30),rgba(3,20,38,.08));
  border-top:1px solid color-mix(in srgb,var(--benefit-accent) 68%,transparent);
  border-bottom:1px solid rgba(255,255,255,.05);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.pa500-benefit:before,
.pa500-benefit:after{
  content:"";
  position:absolute;
  top:0;
  width:1px;
  height:32%;
  background:linear-gradient(var(--benefit-accent),transparent);
  opacity:.6;
}
.pa500-benefit:before{left:0}
.pa500-benefit:after{right:0}

.pa500-benefit--speed{--benefit-accent:#61e4e4}
.pa500-benefit--switch{--benefit-accent:#ff8060}
.pa500-benefit--rebate{--benefit-accent:#ffd400}

.pa500-benefit-icon{
  width:48px;
  height:42px;
  margin-bottom:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--benefit-accent);
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--benefit-accent) 72%,transparent));
  animation:pa500BenefitFlash 1.45s ease-in-out infinite;
}
.pa500-benefit:nth-child(2) .pa500-benefit-icon{animation-delay:.18s}
.pa500-benefit:nth-child(3) .pa500-benefit-icon{animation-delay:.36s}

.pa500-benefit-icon svg{
  width:42px;
  height:42px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pa500-benefit .hud-icon-speed{
  width:58px!important;
  gap:4px!important;
}
.pa500-benefit .hud-icon-speed i{
  width:12px!important;
  height:12px!important;
  border-width:2px!important;
}

.pa500-benefit > span:not(.pa500-benefit-icon){
  font-size:11px;
  line-height:1.15;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:#d7e4ee;
}

.pa500-benefit strong{
  margin-top:5px;
  font-size:18px;
  line-height:1.05;
  letter-spacing:.02em;
  color:var(--benefit-accent);
}
.pa500-benefit--rebate strong{
  font-size:30px;
  letter-spacing:-.03em;
}
.pa500-benefit--switch strong{
  font-size:14px;
}

@keyframes pa500BenefitFlash{
  0%,100%{opacity:.68;filter:brightness(1) drop-shadow(0 0 6px color-mix(in srgb,var(--benefit-accent) 48%,transparent))}
  42%{opacity:1;filter:brightness(1.55) drop-shadow(0 0 13px color-mix(in srgb,var(--benefit-accent) 92%,transparent))}
  62%{opacity:.82;filter:brightness(1.15) drop-shadow(0 0 8px color-mix(in srgb,var(--benefit-accent) 62%,transparent))}
}

@media(max-width:900px){
  .velocity-panel--pa500{
    max-width:560px!important;
    height:auto!important;
    gap:18px;
    padding-top:0;
  }
  .velocity-panel--pa500 .pa500-product-visual{
    width:min(100%,500px);
  }
  .velocity-panel--pa500 .pa500-product-visual img{
    max-height:210px;
  }
  .pa500-benefits{
    gap:8px;
  }
  .pa500-benefit{
    min-height:112px;
    padding:12px 7px 10px;
  }
  .pa500-benefit-icon{
    width:42px;
    height:36px;
  }
  .pa500-benefit-icon svg{width:36px;height:36px}
  .pa500-benefit > span:not(.pa500-benefit-icon){font-size:9px;letter-spacing:.08em}
  .pa500-benefit strong{font-size:15px}
  .pa500-benefit--rebate strong{font-size:25px}
  .pa500-benefit--switch strong{font-size:12px}
}

@media(max-width:520px){
  .velocity-panel--pa500{
    gap:14px;
    width:100%!important;
  }
  .velocity-panel--pa500 .pa500-product-visual{
    width:100%;
  }
  .velocity-panel--pa500 .pa500-product-visual img{
    max-height:165px;
  }
  .pa500-benefits{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  .pa500-benefit{
    min-height:105px;
    padding:10px 4px 8px;
  }
  .pa500-benefit-icon{width:36px;height:32px;margin-bottom:5px}
  .pa500-benefit-icon svg{width:31px;height:31px}
  .pa500-benefit .hud-icon-speed{width:44px!important;gap:2px!important}
  .pa500-benefit .hud-icon-speed i{width:9px!important;height:9px!important}
  .pa500-benefit > span:not(.pa500-benefit-icon){
    font-size:8px;
    letter-spacing:.04em;
  }
  .pa500-benefit strong{font-size:12px}
  .pa500-benefit--rebate strong{font-size:21px}
  .pa500-benefit--switch strong{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .pa500-benefit-icon{animation:none!important}
}


/* v5.1 PA-500 Product Hero Polish
   Adds product label, float, cyan glow, scan sweep and subtle baseline.
   Keeps the three benefit blocks unchanged. */

.pa500-product-wrap{
  position:relative;
  width:min(100%,590px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  isolation:isolate;
}

.velocity-panel--pa500 .pa500-product-visual{
  width:100%!important;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  isolation:isolate;
  animation:pa500Float 5.8s ease-in-out infinite;
  will-change:transform;
}

/* Layered product glow: broad blue haze + tighter cyan aura. */
.velocity-panel--pa500 .pa500-product-visual:before{
  content:"";
  position:absolute;
  z-index:-2;
  width:88%;
  height:78%;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(88,221,255,.24) 0%,
      rgba(67,150,239,.12) 34%,
      rgba(26,92,170,.055) 52%,
      transparent 72%);
  filter:blur(14px);
  animation:pa500Glow 5.8s ease-in-out infinite;
  pointer-events:none;
}

.velocity-panel--pa500 .pa500-product-visual:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:12%;
  right:12%;
  bottom:2%;
  height:14px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(69,214,255,.32),rgba(69,214,255,.08) 42%,transparent 72%);
  filter:blur(7px);
  opacity:.72;
  pointer-events:none;
}

/* Product image depth and highlight. */
.velocity-panel--pa500 .pa500-product-visual img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  max-height:250px;
  object-fit:contain;
  transform:translateZ(0);
  filter:
    drop-shadow(0 22px 22px rgba(0,0,0,.34))
    drop-shadow(0 0 14px rgba(91,218,255,.15))
    brightness(1.03) contrast(1.03);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease;
}

/* Occasional horizontal scan-light over the product. */
.pa500-scan-line{
  position:absolute;
  z-index:4;
  top:4%;
  left:-24%;
  width:24%;
  height:92%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(151,235,255,.06) 28%,
    rgba(231,251,255,.48) 52%,
    rgba(98,214,255,.12) 70%,
    transparent 100%);
  filter:blur(2px);
  transform:skewX(-12deg);
  mix-blend-mode:screen;
  animation:pa500Scan 6.8s ease-in-out 1.4s infinite;
}

/* Product name below the device. */
.pa500-product-title{
  position:relative;
  z-index:5;
  margin-top:-2px;
  color:#f5fbff;
  font-size:clamp(22px,2vw,31px);
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:650;
  text-shadow:
    0 0 12px rgba(86,222,255,.24),
    0 4px 18px rgba(0,0,0,.28);
  opacity:0;
  transform:translate3d(0,10px,0);
  filter:blur(6px);
  animation:pa500TitleReveal .75s var(--ease) .35s forwards;
}

.pa500-product-title span{
  color:#ffffff;
  font-weight:760;
}

.pa500-product-title strong{
  color:#78ebff;
  font-weight:760;
}

/* Thin luminous baseline visually anchors product to the benefit row. */
.pa500-product-baseline{
  display:block;
  width:min(78%,470px);
  height:1px;
  margin-top:2px;
  background:linear-gradient(90deg,
    transparent,
    rgba(97,228,228,.26) 16%,
    rgba(126,238,255,.82) 50%,
    rgba(255,112,67,.24) 84%,
    transparent);
  box-shadow:0 0 10px rgba(97,228,228,.22);
  transform-origin:center;
  animation:pa500Baseline 4.8s ease-in-out infinite;
}

@keyframes pa500Float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-6px,0)}
}

@keyframes pa500Glow{
  0%,100%{opacity:.68;transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
}

@keyframes pa500Scan{
  0%,68%{left:-24%;opacity:0}
  72%{opacity:.15}
  82%{opacity:.9}
  94%{left:108%;opacity:.15}
  100%{left:108%;opacity:0}
}

@keyframes pa500TitleReveal{
  to{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}

@keyframes pa500Baseline{
  0%,100%{opacity:.44;transform:scaleX(.84)}
  50%{opacity:.92;transform:scaleX(1)}
}

@media (hover:hover) and (pointer:fine){
  .pa500-product-wrap:hover .pa500-product-visual img{
    transform:translate3d(0,-5px,0) scale(1.012);
    filter:
      drop-shadow(0 26px 26px rgba(0,0,0,.36))
      drop-shadow(0 0 20px rgba(91,218,255,.24))
      brightness(1.06) contrast(1.04);
  }
}

@media(max-width:900px){
  .pa500-product-wrap{
    width:min(100%,500px);
    gap:8px;
  }
  .velocity-panel--pa500 .pa500-product-visual img{
    max-height:210px!important;
  }
  .pa500-product-title{
    font-size:clamp(20px,5vw,27px);
  }
  .pa500-product-baseline{
    width:74%;
  }
}

@media(max-width:520px){
  .pa500-product-wrap{
    width:100%;
    gap:7px;
  }
  .velocity-panel--pa500 .pa500-product-visual img{
    max-height:165px!important;
  }
  .pa500-product-title{
    font-size:clamp(18px,5.6vw,23px);
    letter-spacing:.065em;
  }
  .pa500-product-baseline{
    width:72%;
  }
  .pa500-scan-line{
    width:28%;
  }
}

@media(prefers-reduced-motion:reduce){
  .velocity-panel--pa500 .pa500-product-visual,
  .velocity-panel--pa500 .pa500-product-visual:before,
  .pa500-scan-line,
  .pa500-product-baseline{
    animation:none!important;
  }
  .pa500-product-title{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
}

/* v5.2 PA-500 Product Energy Field */
.pa500-scan-line{display:none!important;animation:none!important}
.velocity-panel--pa500 .pa500-product-visual{overflow:visible!important}

.velocity-panel--pa500 .pa500-product-visual:before{
  content:"";position:absolute;z-index:-3;width:92%;height:88%;left:50%;top:52%;
  transform:translate(-50%,-50%) scale(.96);border-radius:50%;
  background:radial-gradient(ellipse at 50% 54%,rgba(118,236,255,.28) 0%,rgba(63,174,255,.15) 28%,rgba(36,107,209,.07) 48%,transparent 73%);
  filter:blur(15px);opacity:.74;animation:pa500EnergyHalo 6.4s ease-in-out infinite;pointer-events:none
}
.pa500-product-wrap:before{
  content:"";position:absolute;z-index:-4;width:84%;height:64%;left:50%;top:38%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(ellipse at 35% 50%,rgba(97,228,228,.12),transparent 52%),radial-gradient(ellipse at 70% 50%,rgba(73,137,255,.11),transparent 50%);
  filter:blur(22px);opacity:.62;animation:pa500GlowDrift 9.5s ease-in-out infinite alternate;pointer-events:none
}
.pa500-product-wrap:after{
  content:"";position:absolute;z-index:-5;width:86%;height:72%;left:50%;top:39%;transform:translate(-50%,-50%);
  background-image:linear-gradient(rgba(119,229,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(119,229,255,.045) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 50%,transparent 82%);
  mask-image:radial-gradient(ellipse at center,#000 0 50%,transparent 82%);
  opacity:.5;pointer-events:none
}
.velocity-panel--pa500 .pa500-product-visual:after{
  content:"";position:absolute;z-index:-2;left:12%;right:12%;bottom:1%;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(100,229,255,.40) 0%,rgba(72,165,255,.17) 38%,transparent 73%);
  filter:blur(7px);opacity:.76;animation:pa500PlatformPulse 5.6s ease-in-out infinite;pointer-events:none
}
.pa500-product-title:before,.pa500-product-title:after{
  content:"";position:absolute;z-index:-2;top:-96px;width:118px;height:1px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(113,234,255,.78),transparent);
  filter:drop-shadow(0 0 6px rgba(97,228,228,.42));animation:pa500BackStreak 4.8s linear infinite
}
.pa500-product-title:before{left:-120px;animation-delay:-1.1s}
.pa500-product-title:after{right:-120px;width:92px;animation-delay:-3.2s;background:linear-gradient(90deg,transparent,rgba(108,157,255,.68),transparent)}
.pa500-product-baseline{position:relative}
.pa500-product-baseline:before,.pa500-product-baseline:after{
  content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;
  background:#8af1ff;box-shadow:0 0 9px rgba(138,241,255,.72);animation:pa500NodeBlink 2.8s ease-in-out infinite
}
.pa500-product-baseline:before{left:22%;animation-delay:-.6s}
.pa500-product-baseline:after{right:24%;animation-delay:-1.8s}

@keyframes pa500EnergyHalo{0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(.94)}50%{opacity:.94;transform:translate(-50%,-50%) scale(1.045)}}
@keyframes pa500GlowDrift{0%{transform:translate(-53%,-50%) scale(.98);opacity:.48}100%{transform:translate(-47%,-50%) scale(1.04);opacity:.7}}
@keyframes pa500PlatformPulse{0%,100%{opacity:.55;transform:scaleX(.88)}50%{opacity:.9;transform:scaleX(1.04)}}
@keyframes pa500BackStreak{0%,60%{opacity:0;transform:translateX(-26px) scaleX(.45)}68%{opacity:.75}84%{opacity:.95;transform:translateX(38px) scaleX(1.15)}100%{opacity:0;transform:translateX(72px) scaleX(.72)}}
@keyframes pa500NodeBlink{0%,100%{opacity:.18;transform:scale(.75)}48%{opacity:1;transform:scale(1.25)}72%{opacity:.45;transform:scale(.9)}}

@media(max-width:900px){
  .pa500-product-wrap:after{background-size:24px 24px;opacity:.38}
  .pa500-product-title:before,.pa500-product-title:after{top:-78px;width:84px}
  .pa500-product-title:before{left:-72px}
  .pa500-product-title:after{right:-72px;width:68px}
}
@media(max-width:520px){
  .velocity-panel--pa500 .pa500-product-visual:before{width:96%;height:86%}
  .pa500-product-wrap:before{width:90%;height:60%;opacity:.48}
  .pa500-product-wrap:after{width:92%;height:66%;background-size:21px 21px;opacity:.3}
  .pa500-product-title:before,.pa500-product-title:after{top:-60px;width:54px}
  .pa500-product-title:before{left:-38px}
  .pa500-product-title:after{right:-38px;width:46px}
}
@media(prefers-reduced-motion:reduce){
  .velocity-panel--pa500 .pa500-product-visual:before,.pa500-product-wrap:before,.velocity-panel--pa500 .pa500-product-visual:after,
  .pa500-product-title:before,.pa500-product-title:after,.pa500-product-baseline:before,.pa500-product-baseline:after{animation:none!important}
}






.video-top-text {
  font-size: 18px;
  text-align: right;
  padding: 0 0 14px 0;
}

.video-bottom-text {
  font-size: 18px;
  padding: 14px 0 0 0;
}

/* Video stage — single canonical definition */
.video-stage {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  color: #fff;
  background: linear-gradient(135deg, rgba(8,24,48,.88), rgba(25,64,110,.72));
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 30px 70px rgba(62,12,62,.35);
}

.video-stage video {
  display: block;
  width: 100%;
  height: auto;
}