.coach-demo-page { min-height: 100vh; background: linear-gradient(180deg, #fff 0%, #f3faff 100%); color: #071523; }
.coach-demo-hero { position: relative; overflow: hidden; padding: clamp(52px, 7vw, 96px) 0 clamp(72px, 10vw, 132px); }
.coach-demo-hero::before, .coach-demo-hero::after { position: absolute; z-index: 0; width: min(42vw, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(53 180 244 / 16%), transparent 68%); content: ""; pointer-events: none; }
.coach-demo-hero::before { top: -220px; left: -220px; }.coach-demo-hero::after { right: -260px; bottom: -280px; }
.coach-demo-layout { position: relative; z-index: 1; display: grid; justify-items: center; }.coach-demo-intro { max-width: 760px; text-align: center; }
.coach-demo-intro h1 { max-width: 16ch; margin: 0 auto; color: #071523; font-size: clamp(2.35rem, 5vw, 4.55rem); letter-spacing: -.065em; line-height: .98; }
.coach-demo-intro > p:last-child { max-width: 620px; margin: 24px auto 0; color: #40566e; font-size: clamp(1rem, 2vw, 1.14rem); line-height: 1.75; }
.coach-demo-player-card { width: min(100%, 1020px); margin-top: clamp(38px, 6vw, 64px); padding: clamp(14px, 2.4vw, 24px); border: 1px solid #c9e4f7; border-radius: 28px; background: rgb(255 255 255 / 88%); box-shadow: 0 25px 70px rgb(8 54 89 / 15%); }
.coach-demo-controls { display: flex; justify-content: center; gap: 10px; margin: 0 0 20px; }.coach-demo-toggle { min-height: 44px; padding: 0 18px; border: 1px solid #c9e4f7; border-radius: 12px; background: #fff; color: #12304c; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 800; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }.coach-demo-toggle:hover { transform: translateY(-1px); border-color: #71cbff; }.coach-demo-toggle.is-selected { border-color: transparent; background: linear-gradient(135deg, #35b4f4, #0871c6); color: #fff; box-shadow: 0 10px 24px rgb(8 113 198 / 25%); }
.coach-demo-frame { position: relative; width: min(100%, 920px); margin-inline: auto; overflow: hidden; border: 1px solid #b8dbf1; border-radius: 19px; background: #071523; box-shadow: 0 14px 32px rgb(7 21 35 / 16%); }.coach-demo-frame[data-demo-frame="mobile"] { width: min(100%, 430px); aspect-ratio: 9 / 16; }.coach-demo-frame iframe { display: block; width: 100%; height: 100%; border: 0; }.coach-demo-frame iframe[hidden] { display: none; }.coach-demo-poster { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #071523; cursor: pointer; position: relative; }.coach-demo-poster[hidden] { display: none; }.coach-demo-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }.coach-demo-poster-play { position: absolute; inset: 50% auto auto 50%; width: 76px; height: 54px; transform: translate(-50%, -50%); border-radius: 15px; background: #ff1744; box-shadow: 0 10px 24px rgb(0 0 0 / 28%); }.coach-demo-poster-play::after { position: absolute; top: 50%; left: 52%; width: 0; height: 0; transform: translate(-50%, -50%); border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid #fff; content: ""; }.coach-demo-poster:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }.coach-demo-status { margin: 17px 0 0; color: #5b6f84; font-size: .9rem; font-weight: 650; text-align: center; }.coach-demo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(30px, 5vw, 48px); }
@media (max-width: 640px) { .coach-demo-hero { padding-top: 42px; }.coach-demo-player-card { border-radius: 20px; }.coach-demo-controls { display: grid; grid-template-columns: 1fr; }.coach-demo-toggle { width: 100%; }.coach-demo-frame { border-radius: 14px; }.coach-demo-actions { display: grid; width: 100%; }.coach-demo-actions .button { width: 100%; } }