:root { color-scheme: dark; --paper: #070a06; --ink: #f2ffe7; --accent: #b2ff24; --pointer-x: 50%; --pointer-y: 45%; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 50% 46%, #132105 0%, var(--paper) 62%); color: var(--ink); font-family: Arial, Helvetica, sans-serif; display: flex; flex-direction: column; isolation: isolate; }
#ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.cursor-light { position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(500px circle at var(--pointer-x) var(--pointer-y), #b2ff2412, transparent 75%); }
header { position: relative; z-index: 2; padding: 20px 32px; }
.brand { display: inline-block; width: 240px; color: inherit; text-decoration: none; mix-blend-mode: lighten; animation: appear 1.3s ease both; transition: opacity .3s; }
.brand:hover { opacity: .75; }
.brand img { display: block; width: 100%; height: auto; }
main { flex: 1; min-height: calc(100svh - 124px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 55px 5vw 16vh; }
.hero-intro { max-width: 34ch; margin: 0 0 34px; color: #c8d9b6; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; letter-spacing: -.025em; text-align: center; animation: appear 1s .1s both; }
h1 { position: relative; margin: 0; color: var(--accent); font-size: clamp(100px, 12.8vw, 200px); line-height: .84; font-weight: 700; letter-spacing: -.075em; text-align: center; cursor: default; filter: drop-shadow(0 0 32px #a2ff001c); }
.title-line { display: block; overflow: hidden; padding: .12em .12em .1em; margin: -.12em -.12em -.1em; }
.title-line + .title-line { margin-top: .02em; }
.word { display: inline-block; }
.letter { display: inline-block; color: transparent; background: linear-gradient(180deg, #dfffaa 0%, #b2ff24 45%, #83df00 100%); -webkit-background-clip: text; background-clip: text; animation: letter-in 1.35s cubic-bezier(.18,.76,.2,1) both; animation-delay: calc(160ms + var(--i) * 48ms); transition: color .35s, text-shadow .35s; }
.title-line + .title-line .letter { background-image: linear-gradient(180deg, #c4ff58 0%, #a3ff12 50%, #77d900 100%); }
.letter:hover { color: #e5ffbd; text-shadow: 0 0 38px #b2ff2455; }
form { position: relative; width: min(100%, 430px); margin-top: 52px; animation: form-in 1s .85s both; }
.email-row { position: relative; display: flex; align-items: center; padding: 7px 7px 7px 20px; border: 1px solid #b2ff2440; border-radius: 8px; background: #0b1209dd; backdrop-filter: blur(18px); box-shadow: 0 12px 45px #0005; transition: border-color .3s, box-shadow .3s; }
.email-row::before { content: ''; position: absolute; height: 1px; width: 80px; top: -1px; left: 0; background: linear-gradient(90deg, transparent, #c2ff66, transparent); animation: border-pass 6s 2s ease-in-out infinite; pointer-events: none; }
.email-row:focus-within { border-color: #b2ff2499; box-shadow: 0 0 32px #b2ff2412; }
input, button { font: inherit; color: inherit; }
input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 13px 0; outline: none; font-size: 16px; }
input::placeholder { color: #a7b59c; opacity: 1; }
button { display: grid; place-items: center; width: 47px; height: 47px; flex-shrink: 0; border: 0; border-radius: 4px; background: var(--accent); color: var(--paper); box-shadow: 0 0 20px #b2ff2426; cursor: pointer; transition: transform .25s ease, background .25s, box-shadow .25s; }
button:hover { background: #d4ff8a; box-shadow: 0 0 28px #b2ff2445; }
button:active { transform: scale(.93); }
button:disabled { opacity: .5; cursor: wait; }
button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s; }
button:hover svg { transform: translateX(3px); }
#form-status { position: absolute; top: 100%; left: 0; right: 0; margin: 15px 0 0; color: #d0e5b9; font-size: 14px; line-height: 1.5; text-align: center; }
.sr-only, .trap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
#email:focus-visible { outline: none; }
.site-footer { position: relative; padding: 38px 5vw 22px; background: #070a06f5; border-top: 1px solid #b2ff2429; }
.footer-meta { display: flex; justify-content: space-between; align-items: center; gap: 24px; color: #c6d4bb; font-size: 16px; line-height: 1.6; }
.footer-meta p { margin: 0; }
.footer-love { color: var(--accent); }
.footer-wordmark { margin-top: 45px; color: var(--accent); font-size: clamp(48px, 15.5vw, 300px); font-weight: 800; letter-spacing: -.075em; line-height: .9; text-align: center; white-space: nowrap; background: linear-gradient(180deg, #c8ff6b, #88d20b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes letter-in { from { transform: translateY(115%) rotate(7deg); opacity: 0; filter: blur(8px); } to { transform: translateY(0) rotate(0); opacity: 1; filter: blur(0); } }
@keyframes appear { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes form-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes border-pass { 0%, 15% { opacity: 0; left: 0; } 35% { opacity: 1; } 70%, 100% { opacity: 0; left: calc(100% - 80px); } }
@media (max-width: 600px) {
  header { padding: 18px; }
  .brand { width: 190px; }
  main { min-height: calc(100svh - 102px); padding: 60px 26px 18vh; }
  h1 { font-size: 22vw; }
  .hero-intro { max-width: 27ch; margin-bottom: 30px; }
  form { margin-top: 42px; }
  .cursor-light { display: none; }
  .site-footer { padding: 28px 26px 20px; }
  .footer-meta { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 15px; }
  .footer-wordmark { margin-top: 35px; font-size: 14.8vw; }
}
@media (max-height: 550px) and (min-width: 601px) {
  header { padding-top: 10px; padding-bottom: 10px; }
  .brand { width: 180px; }
  main { padding-top: 20px; padding-bottom: 70px; }
  h1 { font-size: 18vh; }
  form { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cursor-light { display: none; }
}