:root { --green:#19e45b; --dark:#020402; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:#000; font-family: Arial, Helvetica, sans-serif; }
body { overflow-x:hidden; }
.page { position:relative; width:100vw; min-height:100vh; background:#000; display:grid; place-items:center; }
.hero { width:100vw; height:auto; min-height:100vh; object-fit:cover; display:block; }
.cta-overlay { position:absolute; left:3.7%; top:55.7%; width:34.8%; height:8.5%; border-radius:18px; z-index:5; }
.cta-overlay:focus-visible, .cta-overlay:hover { outline:3px solid rgba(25,228,91,.85); outline-offset:4px; box-shadow:0 0 36px rgba(25,228,91,.55); }
.mobile-panel { display:none; }
@media (max-width: 760px) {
  .page { display:block; min-height:100svh; background: radial-gradient(circle at 50% 0%, #06230f, #000 62%); }
  .hero { width:100%; min-height:0; height:auto; object-fit:contain; }
  .cta-overlay { display:none; }
  .mobile-panel { display:block; padding: 22px 18px 28px; color:white; text-align:left; }
  .brand { color:var(--green); font-weight:900; letter-spacing:.06em; margin-bottom:12px; }
  h1 { margin:0 0 8px; font-size: clamp(38px, 13vw, 58px); line-height:.9; text-transform:uppercase; }
  h1 span { color:var(--green); }
  p { margin: 0 0 18px; font-size:18px; font-weight:700; }
  .mobile-cta { display:block; text-align:center; color:#031007; background:linear-gradient(90deg,#17d956,#22f36a); text-decoration:none; padding:18px 16px; border-radius:16px; font-weight:950; font-size:18px; box-shadow:0 0 32px rgba(25,228,91,.45); }
  small { display:block; text-align:center; margin-top:18px; color:#999; font-size:11px; }
}