:root{--neon:#39FF14; --accent:#00FFA0; --fg:#e6f6ea;}
*{box-sizing:border-box}
html,body{height:100%} body{margin:0; background:#000; color:var(--fg); font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial}
.bg{position:fixed; inset:0; z-index:-1;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(0,80,40,.35), transparent 60%), radial-gradient(800px 600px at 10% 110%, rgba(0,100,50,.25), transparent 60%), #000;}
.bg::before{content:""; position:absolute; inset:-200px; opacity:.18; background-image:linear-gradient(transparent 98%, rgba(57,255,20,.6) 2%), linear-gradient(90deg, transparent 98%, rgba(57,255,20,.6) 2%); background-size:40px 40px; transform:perspective(600px) rotateX(55deg) translateY(-120px); animation:grid 18s linear infinite}
@keyframes grid{to{transform:perspective(600px) rotateX(55deg) translateY(-80px)}}
.wrap{max-width:1100px; margin:0 auto; padding:24px}
.wrap a{color:var(--neon); text-decoration:none} .wrap a:hover{text-shadow:0 0 12px rgba(57,255,20,.5)}
.header{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:52px; height:52px; border-radius:12px; box-shadow:0 0 0 2px #0f2, 0 0 18px rgba(57,255,20,.35)}
.brand .name{font-weight:900; letter-spacing:.6px; color:var(--neon)}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:34px 0 12px}
@media (max-width:860px){.hero{grid-template-columns:1fr; text-align:center} .art{order:-1}}
.h-title{font-size:clamp(32px,6vw,56px); margin:0 0 8px; font-weight:900; color:var(--neon); text-shadow:0 0 28px rgba(57,255,20,.35)}
.h-sub{font-size:clamp(16px,3.2vw,20px); color:#fff; margin:0 0 18px}
.h-bullets{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 24px}
.pill{padding:8px 12px; border:1px solid #1b1b1b; border-radius:999px; background:#0a0a0a; color:#d8fbdc; font-weight:700}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{padding:12px 16px; border-radius:12px; border:1.5px solid #153; background:linear-gradient(90deg, var(--neon), var(--accent)); color:#001500; font-weight:900; letter-spacing:.3px; box-shadow:0 10px 26px rgba(0,255,120,.18)}
.btn.ghost{background:#0a0a0a; border-color:#153; color:#dff}
.btn:hover{transform:translateY(-2px)}
.art{min-height:260px; border:1px solid #132; border-radius:18px; background:radial-gradient(240px 120px at 30% 20%, rgba(57,255,20,.25), transparent 60%), #020; display:grid; place-items:center}
.art img{width:180px; height:auto; filter:drop-shadow(0 0 12px #0f2)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 16px}
@media (max-width:960px){.grid{grid-template-columns:1fr}}
.card{padding:16px; border:1px solid #141; border-radius:14px; background:linear-gradient(180deg,#0a0a0a,#050505)}
.kicker{font-size:12px; letter-spacing:.2em; color:#8ae6a8; text-transform:uppercase; margin-bottom:6px}
.icons{display:flex; gap:12px; justify-content:center; margin:20px 0}
.ico{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid #1a1a1a; background:#0a0a0a; color:var(--neon); font-weight:900}
.ico:hover{box-shadow:0 0 0 2px #0f2}
.footer{color:#9ab; text-align:center; padding:18px 0 32px}

/* Ensure email & footer links are neon and readable */
.neon-link, .footer a, .card a { color: var(--neon) !important; text-decoration: none; }
.neon-link:hover, .footer a:hover, .card a:hover { text-shadow: 0 0 12px rgba(57,255,20,.6); }

/* Hero art improvements */
.art{display:grid; place-items:center; padding:18px; border:1px solid #132; border-radius:18px;
     background: radial-gradient(240px 120px at 30% 20%, rgba(57,255,20,.18), transparent 60%), #020;}
.hero-logo{width:min(420px, 90%); height:auto; filter: drop-shadow(0 0 22px #00ff6a) drop-shadow(0 0 8px #00ff6a);}

/* Avoid huge empty area: let art size to content */
.hero{align-items:center;}
.art{min-height:unset;}

/* === v3 visual polish === */
body{font:17px/1.7 Inter,system-ui,Segoe UI,Roboto,Arial}
.h-sub{font-size:1.05rem; opacity:.95}
.hero{grid-template-columns:1fr; text-align:center; gap:22px}
.copy{max-width:900px; margin:0 auto}
.art{order:2}
.hero-logo{width:min(360px, 80%)}
.cta-row{justify-content:center}
.btn{background:#031; border-color:#0a3; color:#eaffef}
.btn:hover{box-shadow:0 0 18px rgba(57,255,20,.35)}
.header .social{opacity:.92}

/* Accessibility: skip link */
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:12px;width:auto;height:auto;background:#031;color:#eaffef;padding:8px 12px;border-radius:8px;outline:2px solid var(--neon)}

/* === Lead capture section === */
.lead{margin:22px auto 8px; max-width:900px; background:rgba(0,30,12,.55); border:1px solid #0a3; border-radius:16px; padding:18px 18px 12px; box-shadow:0 0 24px rgba(57,255,20,.08)}
.lead .h{font-size:1.6rem; margin:0 0 8px}
.lead .h-sub{margin:0 0 14px; opacity:.95}
.lead-form{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.lead-form input{flex:1; min-width:240px; padding:12px 14px; border-radius:12px; border:1px solid #0a3; background:#041; color:#eaffef; outline:none}
.lead-form input::placeholder{color:#a7f5c1}
.lead-form .btn{padding:12px 16px}
.form-note{font-size:.85rem; opacity:.8; margin:6px 0 0}
.form-msg{font-size:.95rem; margin:8px 0 0}
@media (max-width:640px){.lead{margin:16px 12px}.lead .h{font-size:1.3rem}}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1,1); border:0}
.neon{color:var(--neon)}

/* === Modal === */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:50; display:grid; place-items:center}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px)}
.modal-card{position:relative; max-width:520px; width:92%; background:rgba(0,30,12,.9); border:1px solid #0a3; border-radius:16px; padding:18px; box-shadow:0 0 28px rgba(57,255,20,.25)}
.modal-title{color:var(--neon); font-weight:800; margin:0 0 8px}
.modal-text{margin:0 0 12px}
.modal-actions{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px}
.modal-sub{opacity:.9; font-size:.92rem}
.modal-x{position:absolute; top:8px; right:10px; background:#041; color:#eaffef; border:1px solid #0a3; border-radius:10px; padding:2px 10px; cursor:pointer}
.btn.sm{padding:8px 12px; font-size:.95rem}
.btn.sm.ghost{background:#031; border-color:#063}
/* === Toast === */
.toast[hidden]{display:none}
.toast{position:fixed; right:16px; bottom:16px; max-width:320px; background:rgba(3,25,12,.95); border:1px solid #0a3; border-radius:14px; padding:12px 14px; box-shadow:0 8px 28px rgba(0,0,0,.35)}
.toast .toast-actions{display:flex; gap:8px; margin-top:8px}
@media (max-width:640px){.toast{left:12px; right:12px; bottom:12px; max-width:unset}}

/* Toast glow effect */
.toast{animation:toastFade .4s ease-out;}
@keyframes toastFade{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:translateY(0);}}
.toast{border:1px solid #0f5; box-shadow:0 0 18px rgba(57,255,20,.25);}

/* Header social capsule buttons */
.icons-top a{display:inline-block;margin-left:12px;padding:6px 12px;border-radius:10px;border:1px solid #0a3;background:#041;color:var(--neon);font-weight:700;font-size:.92rem;letter-spacing:.2px;transition:transform .12s ease, box-shadow .2s ease}
.icons-top a:hover{transform:translateY(-1px);box-shadow:0 0 0 2px #0f2,0 0 14px rgba(57,255,20,.35);text-shadow:0 0 6px rgba(57,255,20,.35)}

.why-list{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:8px}
.why-list li{background:#031; border:1px solid #063; border-radius:10px; padding:8px 10px}
.why-list strong{color:var(--neon)}

/* Modal fallback link visibility */
.modal a{color:var(--neon); text-decoration:underline}
.modal a:hover{ text-shadow:0 0 8px rgba(57,255,20,.5) }

/* Pulse-once attention animation for Subscribe button */
@keyframes pulseOnce{
  0%{transform:scale(1); box-shadow:0 0 0 0 rgba(57,255,20,.0)}
  40%{transform:scale(1.03); box-shadow:0 0 24px rgba(57,255,20,.35)}
  100%{transform:scale(1); box-shadow:0 0 0 0 rgba(57,255,20,.0)}
}
.pulse-once{animation:pulseOnce 900ms ease-out 1;}


/* HARD LOCK: exactly one visible element inside .lead-form.force-one */
.lead-form.force-one > :not(#email):not(button):not(input[type="hidden"]):not(label){display:none !important;}
.lead-form.force-one #email{display:block !important; min-width:280px;}