.product-demo{overflow:hidden;border:.55rem solid #edf2f6;border-radius:1.35rem;background:#071426;box-shadow:0 2.3rem 5rem #07142633;transform:rotate(1deg)}
.demo-topbar{min-height:4.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;background:#071426;color:#fff}
.demo-brand,.demo-match{display:flex;align-items:center;gap:.55rem}.demo-brand img{width:1.8rem;height:1.8rem;border-radius:.4rem}.demo-brand span{font-family:Oswald,sans-serif;font-size:1.05rem;font-weight:700;text-transform:uppercase}.demo-match{font-size:.72rem}.demo-score{padding:.3rem .5rem;border-radius:.35rem;background:#cf1f31;font-weight:900}.demo-clock{color:#91a1b4;font-variant-numeric:tabular-nums}
.demo-stage{position:relative;height:25rem;background:#0d2038}
.demo-screen{position:absolute;inset:0;overflow:hidden;padding:1.15rem;opacity:0;visibility:hidden;transform:translateX(1.25rem) scale(.985);transition:opacity .45s ease,transform .45s ease,visibility .45s}
.demo-screen.is-active{z-index:2;opacity:1;visibility:visible;transform:none}
.demo-screen-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:2.8rem;margin-bottom:.8rem;color:#fff}.demo-screen-header>div{display:grid;gap:.18rem}.demo-screen-header small,.demo-side-panel>small,.leaderboard>small{color:#68c4ff;font-size:.6rem;font-weight:900;letter-spacing:.12em}.demo-screen-header strong{font-size:.93rem}.demo-badge{padding:.42rem .6rem;border-radius:2rem;background:#ffffff12;color:#9ed7ff;font-size:.62rem;font-weight:850}.demo-badge.red{background:#cf1f3128;color:#ff8793}.demo-badge.blue{background:#0c79d833;color:#88cdff}
.lineup-workspace{height:19.2rem;display:grid;grid-template-columns:1fr 7.5rem;gap:.75rem}.demo-pitch{position:relative;overflow:hidden;border:1px solid #ffffff77;border-radius:.65rem;background:repeating-linear-gradient(90deg,#168248 0 16.66%,#127642 16.66% 33.32%)}.field-line{position:absolute;display:block;border-color:#ffffff72}.halfway-line{left:50%;top:0;bottom:0;border-left:1px solid}.center-ring{left:50%;top:50%;width:4.7rem;height:4.7rem;border:1px solid;border-radius:50%;transform:translate(-50%,-50%)}.demo-player{position:absolute;display:grid;justify-items:center;color:#fff;font-size:.55rem;font-style:normal;transform:translate(-50%,-50%);transition:transform .4s ease}.demo-player b{width:1.9rem;height:1.9rem;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#cf1f31;box-shadow:0 .25rem .5rem #0007;font-size:.68rem}.demo-player em{margin-top:.15rem;padding:.08rem .22rem;border-radius:.2rem;background:#071426cc;font-style:normal}.dp1{left:22%;top:32%}.dp2{left:22%;top:68%}.dp3{left:48%;top:15%}.dp4{left:48%;top:39%}.dp5{left:48%;top:63%}.dp6{left:48%;top:86%}.dp7{left:75%;top:38%}.dp8{left:82%;top:68%}.is-active .dp1,.is-active .dp4,.is-active .dp7{animation:player-pop .55s ease both}.is-active .dp4{animation-delay:.15s}.is-active .dp7{animation-delay:.3s}@keyframes player-pop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.demo-side-panel{display:flex;flex-direction:column;gap:.45rem;padding:.75rem;border-radius:.6rem;background:#071426;color:#fff}.demo-side-panel span{display:flex;align-items:center;gap:.45rem;padding:.48rem;border-radius:.4rem;background:#ffffff0c;font-size:.68rem}.demo-side-panel span b{width:1.25rem;height:1.25rem;display:grid;place-items:center;border-radius:50%;background:#223a56;font-size:.58rem}.demo-side-panel button,.confirm-sub{margin-top:auto;border:0;border-radius:.4rem;background:#cf1f31;color:#fff;padding:.55rem;font-size:.62rem;font-weight:900}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}.action{display:flex;align-items:center;gap:.5rem;padding:.7rem;border:1px solid #ffffff13;border-radius:.55rem;background:#ffffff09;color:#c5d1de;font-size:.7rem;font-weight:800}.action b{font-size:.9rem}.goal-action{border-color:#2dd36f55;background:#2dd36f17;color:#fff}.live-event{margin:1rem 0;display:grid;grid-template-columns:3.2rem 1fr 2rem;align-items:center;gap:.75rem;padding:1rem;border:1px solid #2dd36f55;border-radius:.7rem;background:#0b2d25;color:#fff}.event-minute{font-family:Oswald,sans-serif;font-size:1.5rem;color:#54e18c}.live-event>div:nth-child(2){display:grid;gap:.18rem}.live-event small{color:#54e18c;font-size:.56rem;font-weight:900;letter-spacing:.1em}.live-event strong{font-size:.83rem}.live-event span{color:#9cb0c0;font-size:.68rem}.event-check{width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:50%;background:#2dd36f;color:#062416;font-weight:950}.is-active .live-event{animation:event-in .6s .25s ease both}@keyframes event-in{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}.live-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.live-totals span{display:grid;gap:.15rem;padding:.65rem;border-radius:.5rem;background:#ffffff09;color:#899caf;font-size:.58rem}.live-totals b{color:#fff;font-size:1rem}
.sub-board{display:grid;grid-template-columns:1fr 2.5rem 1fr;align-items:center;gap:.6rem}.sub-player{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem;align-items:center;padding:.8rem;border-radius:.7rem;background:#ffffff09;color:#fff}.sub-player>span{position:absolute;right:.55rem;top:.5rem;font-size:.5rem;font-weight:950;letter-spacing:.1em}.sub-player>b{grid-row:1/3;width:2.7rem;height:2.7rem;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#344b64}.sub-player strong{font-size:.78rem}.sub-player small{color:#91a4b6}.sub-player.out>span{color:#ff8793}.sub-player.in>span{color:#54e18c}.sub-player.in>b{background:#cf1f31}.sub-arrow{text-align:center;color:#68c4ff;font-size:1.5rem}.is-active .sub-player.in{animation:sub-in .7s .25s ease both}@keyframes sub-in{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}.minutes-list{display:grid;gap:.55rem;margin-top:1rem}.minutes-list>div,.leaderboard>div{display:grid;grid-template-columns:4rem 1fr 2.3rem;align-items:center;gap:.55rem;color:#bdc9d5;font-size:.65rem}.minutes-list i,.leaderboard i{height:.35rem;overflow:hidden;border-radius:1rem;background:#ffffff12}.minutes-list i b,.leaderboard i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0c79d8,#68c4ff)}.minutes-list strong,.leaderboard>div>strong{text-align:right;color:#fff}.confirm-sub{display:block;margin:1rem 0 0 auto;padding:.65rem .9rem;background:#12934d}
.insight-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}.insight-cards>div{display:grid;gap:.2rem;padding:.85rem;border:1px solid #ffffff12;border-radius:.65rem;background:#ffffff09;color:#fff}.insight-cards small{color:#91a4b6;font-size:.52rem;font-weight:850}.insight-cards b{font-size:1.35rem}.insight-cards span{color:#68c4ff;font-size:.6rem}.leaderboard{display:grid;gap:.8rem;margin-top:1rem;padding:1rem;border-radius:.7rem;background:#071426}.leaderboard>div{grid-template-columns:5rem 1fr 2.3rem}.leaderboard span b{display:inline-grid;width:1.2rem;height:1.2rem;margin-right:.3rem;place-items:center;border-radius:50%;background:#ffffff10;color:#68c4ff}.is-active .leaderboard i b{animation:bar-grow .9s .2s ease both;transform-origin:left}@keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.demo-controls{display:grid;grid-template-columns:repeat(4,1fr);background:#071426}.demo-controls button{position:relative;display:flex;align-items:center;justify-content:center;gap:.35rem;border:0;border-top:2px solid transparent;background:transparent;color:#74869a;padding:.75rem .3rem;font:inherit;font-size:.65rem;font-weight:850;cursor:pointer}.demo-controls button span{color:#516479}.demo-controls button.is-active{border-top-color:#cf1f31;background:#ffffff08;color:#fff}.demo-controls button.is-active span{color:#68c4ff}.demo-controls button.is-active:after{content:"";position:absolute;left:0;bottom:0;height:2px;background:#cf1f31;animation:demo-progress 3.8s linear both}@keyframes demo-progress{from{width:0}to{width:100%}}
@media(max-width:900px){.product-demo{width:min(100%,42rem);margin:auto;transform:none}}
@media(max-width:600px){.demo-topbar{align-items:flex-start}.demo-brand span{display:none}.demo-match{gap:.35rem}.demo-stage{height:23.5rem}.demo-screen{padding:.85rem}.demo-screen-header strong{font-size:.82rem}.demo-badge{font-size:.55rem}.lineup-workspace{height:17.8rem;grid-template-columns:1fr 5.6rem}.demo-side-panel{padding:.55rem}.demo-side-panel span{padding:.38rem;font-size:.58rem}.demo-side-panel span b{display:none}.live-totals span{padding:.5rem}.sub-player{padding:.65rem}.sub-player>b{width:2.2rem;height:2.2rem}.insight-cards>div{padding:.65rem}.leaderboard{padding:.8rem}.demo-controls button{font-size:.58rem}}
@media(prefers-reduced-motion:reduce){.demo-screen,.demo-player,.live-event,.sub-player.in,.leaderboard i b,.demo-controls button.is-active:after{animation:none!important;transition:none!important}}

/* Real XISFC U14G Premier product views in the homepage hero. */
.real-hero-demo{border-color:#dce5ed;transform:rotate(.35deg)}
.real-demo-topbar{display:grid;grid-template-columns:auto 1fr auto;min-height:3.35rem;padding:.55rem .7rem;background:#f3f6f8;color:#4f6276}
.demo-window-dots{display:flex;align-items:center;gap:.28rem}.demo-window-dots i{width:.48rem;height:.48rem;border-radius:50%;background:#cf1f31}.demo-window-dots i:nth-child(2){background:#efb72d}.demo-window-dots i:nth-child(3){background:#31aa62}
.demo-address{justify-self:center;width:min(18rem,75%);display:flex;align-items:center;justify-content:center;gap:.38rem;padding:.37rem .8rem;border:1px solid #d6dfe7;border-radius:.45rem;background:#fff;color:#22364c}.demo-address span{color:#7d8da0;font-size:.62rem}.demo-address strong{font-size:.63rem}
.demo-real-badge{display:flex;align-items:center;gap:.36rem;padding:.34rem .48rem;border-radius:2rem;background:#eaf7ef;color:#167c43;font-size:.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.demo-real-badge i{width:.42rem;height:.42rem;border-radius:50%;background:#25b866;box-shadow:0 0 0 .18rem #25b8661f}
.real-demo-stage{height:auto;aspect-ratio:1.455/1;background:#071426}
.real-demo-screen{margin:0;padding:0!important;background:#071426}.real-demo-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.real-demo-screen figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.18rem;padding:4.2rem 1rem .9rem;background:linear-gradient(transparent,#071426f5);color:#fff}.real-demo-screen figcaption small{color:#68c4ff;font-size:.56rem;font-weight:900;letter-spacing:.1em}.real-demo-screen figcaption strong{font-size:.82rem}.real-demo-screen figcaption span{color:#b4c2d0;font-size:.62rem;line-height:1.45}
.real-demo-controls{grid-template-columns:repeat(3,1fr)}.real-demo-controls button{min-height:3rem;font-size:.62rem}
@media(max-width:600px){.real-demo-topbar{grid-template-columns:auto 1fr}.demo-real-badge{display:none}.demo-address{width:100%}.real-demo-stage{aspect-ratio:1.28/1}.real-demo-screen figcaption{padding-top:2.6rem}.real-demo-screen figcaption span{display:none}.real-demo-controls button{font-size:.55rem}.real-demo-controls button span{display:none}}