:root{--bg:#1E2124;--raised:#2A2E32;--ink:#F2EFEA;--muted:#9A9DA1;--acc:#F2A900;--court:#2F5D73;--glass:#9FD3E6}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:'Helvetica Neue',Arial,system-ui,sans-serif}
h1,h2,.logo{font-family:Georgia,'Times New Roman',serif;font-weight:700}a{color:var(--acc)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:24px 6vw;position:absolute;width:100%;z-index:5}
.logo{font-size:20px;letter-spacing:.2em;color:var(--ink);text-decoration:none}.links a{color:var(--ink);margin-left:28px;text-decoration:none;font-size:14px;opacity:.85}
.hero{min-height:860px;background:radial-gradient(ellipse at 70% 30%,#3a3f44 0%,var(--bg) 60%);display:flex;align-items:center;padding:0 6vw;position:relative;overflow:hidden}
.tx{max-width:620px;position:relative;z-index:3}
.tag{color:var(--acc);font-size:13px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:20px}
h1{font-size:clamp(36px,6vw,76px);line-height:1.05;margin-bottom:24px}
.sub{font-size:18px;color:var(--muted);margin-bottom:36px;line-height:1.5;max-width:520px}
.btn{display:inline-block;position:relative;z-index:4;background:var(--acc);color:var(--bg);padding:18px 34px;border:0;border-radius:2px;font-family:inherit;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* stage: fixed box, no layout shift */
.stage{position:absolute;right:12vw;top:50%;width:46vw;aspect-ratio:240/140;transform:translateY(-45%);z-index:1;perspective:1000px;pointer-events:none}
.cam{width:100%;height:100%;transform:translateX(calc(var(--sx,0)*1%))}
#court{width:100%;height:100%;overflow:visible;transform:rotateX(50deg) rotateZ(-18deg);transform-origin:50% 50%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.tilt{transform-origin:120px 70px;transform:scale(var(--cs,1))}
.glass{fill:var(--glass);fill-opacity:.08;stroke:var(--glass);stroke-width:1.5;opacity:var(--go,.5)}
#fill{fill-opacity:var(--fo,1)}
.ln{fill:none;stroke:#fff;stroke-width:1;stroke-dasharray:100;stroke-dashoffset:0}.ln.o{stroke:var(--acc);stroke-width:1.6}.ln.n{stroke-width:1.4;stroke-dasharray:2 1.2 }
.js .ln.n{stroke-dasharray:100}
/* h1 typing — CSS only, text is real from first byte */
@media (prefers-reduced-motion:no-preference){
 .w{display:inline-block;opacity:0;transform:translateY(8px);animation:rise .4s ease-out forwards;animation-delay:calc(var(--i)*.08s)}
 .sub{opacity:0;animation:fade .4s .25s forwards}
}
@keyframes rise{to{opacity:1;transform:none}}@keyframes type{to{clip-path:inset(0 0 0 0)}}@keyframes fade{to{opacity:1}}
section{padding:100px 6vw}h2{font-size:clamp(28px,4vw,44px);margin-bottom:40px}.muted{color:var(--muted);margin:-24px 0 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.card{background:var(--raised);padding:32px;border-radius:4px}.card b{display:block;font-size:40px;color:var(--acc);margin-bottom:10px;font-family:Georgia,serif}.card span{color:var(--muted);line-height:1.5}
.tl div{border-left:3px solid var(--acc);padding:0 0 32px 24px}.tl small{color:var(--acc)}.tl p{margin-top:6px}
form{display:grid;gap:14px;max-width:480px}input,textarea{padding:16px;border:1px solid var(--muted);background:transparent;color:var(--ink);font-family:inherit;font-size:16px;border-radius:2px}textarea{min-height:96px}
input:focus,textarea:focus{outline:none;border-color:var(--acc)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.4}.consent input{margin-top:2px;accent-color:var(--acc)}
#msg{min-height:1.4em}
footer{padding:40px 6vw;color:var(--muted);font-size:14px;border-top:1px solid var(--raised)}footer a{color:var(--muted)}
@media(max-width:700px){.links{display:none}.hero{flex-direction:column;align-items:stretch;padding:80px 6vw 0;min-height:0;overflow:visible}.hero .tx{display:contents}.hero .tag{order:1}.hero h1{order:2}.hero .sub{order:3}.hero .stage{order:4}.hero .tx>.btn{order:5;margin-top:24px;text-align:center}
 .stage{position:relative;right:auto;top:auto;width:100%;aspect-ratio:240/140;height:auto;transform:none;margin-top:32px;opacity:1!important;visibility:visible!important}#court{transform:rotateX(35deg) rotateZ(-12deg)}.cam{transform:none!important}
 .logo{font-size:16px}}
.lead{max-width:760px;color:var(--ink);line-height:1.6;margin-bottom:40px}.lead p+p{margin-top:16px}.card strong{display:block;margin-bottom:8px;font-size:18px}
.faq{max-width:760px}details{border-bottom:1px solid var(--raised);padding:20px 0}summary{cursor:pointer;font-size:18px;font-weight:700}details p{color:var(--muted);margin-top:12px;line-height:1.6}

.sticky-cta{display:none}@media(max-width:700px){.sticky-cta{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:50;text-align:center;opacity:0;visibility:hidden;transform:translateY(calc(100% + 32px));transition:transform .2s,opacity .2s,visibility .2s;pointer-events:none}.sticky-cta.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}}
@media(max-width:700px) and (max-height:700px){.hero .stage{width:min(100%,calc(28vh*240/140));margin-top:8px;align-self:center}.hero .tx>.btn{margin-bottom:24px}}