.bisto-page{background:#0a120f;color:var(--paper)}
.bisto-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,72px);border-bottom:1px solid #ffffff17;background:#09110eee;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.bisto-main{width:min(960px,100%);margin:auto;padding:clamp(40px,7vw,80px) clamp(20px,5vw,40px) 100px;text-align:center}
.bisto-main .eyebrow{color:var(--lime);font:700 13px 'DM Sans';letter-spacing:.18em;text-transform:uppercase}
.bisto-main h1{margin:8px 0 18px;font:800 clamp(48px,10vw,120px)/.85 'Barlow Condensed';letter-spacing:-.03em;text-transform:uppercase}
.bisto-main h1 em{color:var(--lime);font-style:italic}
.bisto-main .lede{max-width:560px;margin:0 auto;color:#b8c1bb;font-size:clamp(15px,2vw,18px);line-height:1.6}

.court{position:relative;width:min(560px,100%);height:340px;margin:56px auto 0;background:linear-gradient(180deg,#14221c,#0e1814);border:1px solid #ffffff1c;overflow:hidden}
.court:before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--lime);opacity:.5}
.court .t-line{position:absolute;left:50%;bottom:0;width:1px;height:38%;background:#ffffff22}
.court .service-line{position:absolute;left:0;right:0;bottom:38%;height:1px;background:#ffffff18}

.mascot{position:absolute;left:22%;bottom:14%;width:64px;height:100px;transform-origin:bottom center;animation:hop 1.8s ease-in-out infinite}
.mascot .body{position:absolute;left:14px;bottom:0;width:36px;height:74px;background:var(--lime);border-radius:40% 40% 50% 50%/50% 50% 60% 60%}
.mascot .body:before,.mascot .body:after{content:'';position:absolute;width:9px;height:9px;background:var(--ink);border-radius:50%;top:22px}
.mascot .body:before{left:8px}
.mascot .body:after{left:20px}
.mascot .smile{position:absolute;left:12px;top:36px;width:12px;height:6px;border:2px solid var(--ink);border-top:0;border-radius:0 0 12px 12px}
.mascot .arm{position:absolute;left:38px;bottom:44px;width:26px;height:5px;background:var(--paper);border-radius:3px;transform-origin:left center;animation:swing 1.8s ease-in-out infinite}
.mascot .racket{position:absolute;left:24px;top:-4px;width:16px;height:20px;border:3px solid var(--paper);border-radius:50%}
.mascot .legs{position:absolute;left:16px;bottom:-6px;width:32px;height:10px}
.mascot .legs:before,.mascot .legs:after{content:'';position:absolute;bottom:0;width:5px;height:12px;background:var(--paper);border-radius:2px}
.mascot .legs:before{left:2px;transform:rotate(-8deg)}
.mascot .legs:after{right:2px;transform:rotate(8deg)}

.ball{position:absolute;width:12px;height:12px;border-radius:50%;background:#111;box-shadow:0 0 12px 3px #d7ff3760;animation:rally 1.8s ease-in-out infinite}

@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}55%{transform:translateY(-6px)}70%{transform:translateY(2px)}}
@keyframes swing{0%,55%{transform:rotate(-25deg)}70%{transform:rotate(-95deg)}85%{transform:rotate(-40deg)}100%{transform:rotate(-25deg)}}
@keyframes rally{0%{left:26%;bottom:34%}35%{left:78%;bottom:78%}45%{left:88%;bottom:82%}70%{left:34%;bottom:26%}100%{left:26%;bottom:34%}}

.bisto-caption{margin-top:22px;color:#7f8983;font-size:11px;letter-spacing:.14em;text-transform:uppercase}

@media(max-width:650px){.bisto-header{height:62px}.court{height:280px}}