:root{--lime:#c8ff1a;--purple:#9f46ff;--text:#fff;--muted:rgba(255,255,255,.74);--border:rgba(182,76,255,.45);--shadow:0 0 38px rgba(182,76,255,.28)}
*{box-sizing:border-box}html,body{width:100%;min-height:100%}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:radial-gradient(circle at 86% 8%,rgba(142,55,255,.28),transparent 30%),radial-gradient(circle at 14% 90%,rgba(200,255,26,.10),transparent 30%),#03040b;overflow:hidden}
.page-shell{width:100vw;height:100dvh;display:grid;place-items:center;padding:clamp(6px,1vw,18px)}
.hero-frame{position:relative;width:min(100%,calc((100dvh - clamp(12px,2vw,36px))*1.7777778));height:min(calc(100dvh - clamp(12px,2vw,36px)),calc(100vw/1.7777778));aspect-ratio:16/9;border-radius:clamp(16px,2vw,34px);overflow:hidden;background:#05060f;box-shadow:0 25px 90px rgba(0,0,0,.58),0 0 45px rgba(100,30,255,.18);border:1px solid rgba(255,255,255,.06)}
.hero-image{display:block;width:100%;height:100%;object-fit:contain}
.hotspot{position:absolute;border:0;background:transparent;cursor:pointer;z-index:5}
.hotspot-top{top:4.1%;right:3.1%;width:19.5%;height:7.4%;border-radius:18px}
.hotspot-cta{left:4.6%;bottom:26.4%;width:15.8%;height:7.2%;border-radius:18px}
.hotspot:focus-visible,.modal-close:focus-visible,.submit-btn:focus-visible,.notify-form input:focus-visible{outline:3px solid rgba(200,255,26,.95);outline-offset:2px}
.modal-backdrop{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:20px;background:rgba(0,0,0,.74);backdrop-filter:blur(12px)}
.modal-backdrop.is-open{display:grid}
.modal{position:relative;width:min(94vw,520px);padding:clamp(24px,4vw,42px);border-radius:28px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(16,16,38,.98),rgba(6,7,15,.98));box-shadow:var(--shadow),0 26px 100px rgba(0,0,0,.64);text-align:center}
.modal::before{content:"";position:absolute;inset:-2px;border-radius:30px;background:linear-gradient(135deg,rgba(200,255,26,.38),rgba(159,70,255,.62),transparent 60%);filter:blur(14px);z-index:-1}
.modal-close{position:absolute;top:12px;right:16px;width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.86);font-size:34px;cursor:pointer}
.modal-icon{font-size:42px;margin-bottom:6px}.modal h1{margin:0;font-size:clamp(34px,5vw,52px);line-height:.95}.modal h1 span{color:var(--lime)}
.modal-subtitle{margin:14px auto 22px;max-width:420px;font-size:17px;line-height:1.45;color:var(--muted)}.modal-subtitle span{color:rgba(255,255,255,.62)}
.notify-form{display:grid;gap:14px;text-align:left}.notify-form label span{display:block;margin-bottom:8px;font-weight:700;font-size:14px}
.notify-form input{width:100%;height:54px;border-radius:15px;border:1px solid rgba(167,82,255,.48);background:rgba(6,7,16,.86);color:var(--text);padding:0 16px;font-size:16px}
.notify-form input::placeholder{color:rgba(255,255,255,.44)}.hidden-field{position:absolute;opacity:0;pointer-events:none;height:0;overflow:hidden}
.submit-btn{height:58px;border:0;border-radius:16px;background:linear-gradient(180deg,#dfff44,#bbf300);color:#0d0e12;font-size:19px;font-weight:900;cursor:pointer;box-shadow:0 10px 26px rgba(200,255,26,.18)}
.submit-btn:disabled{cursor:wait;opacity:.82}.form-note{margin:0;font-size:13px;text-align:center;color:rgba(255,255,255,.6)}
.form-status{min-height:22px;margin:0;text-align:center;font-size:14px;font-weight:700}.form-status.success{color:#c8ff1a}.form-status.error{color:#ff8cda}
@media (max-width:700px){body{overflow:auto}.page-shell{min-height:100dvh;height:auto;padding:0}.hero-frame{width:100vw;height:auto;aspect-ratio:16/9;border-radius:0;border-left:0;border-right:0}.hotspot-top,.hotspot-cta{display:none}.modal{padding:22px 18px 24px;border-radius:22px}.notify-form input,.submit-btn{height:52px}}