:root{
  --night:#070a0b; --ink:#0c0e11; --bone:#e8e3d9; --muted:#a9a59c;
  --neon:#39ff14; --neon-soft:#a4ffb1; --neon-dim:#00c46b;
  /* neon color broken out so glow can be tuned globally */
  --neon-color: 57,255,20;
  --neon-glow-intensity: .18; /* global default for glow shadows; tune to increase/decrease all glows */
  --bg-tile-size:780px; --bg-line-alpha:.24; --motion-secs:60s;
  --grain-opacity:.10; --scan-opacity:.06;
}

/* Reset/base */
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--bone);
  background: radial-gradient(1200px 800px at 70% 10%, #0f1316 0%, var(--night) 55%, #050708 100%);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.5; overflow-x:hidden; overflow-y:auto;
}

/* Drifting neon background */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: rgba(57,255,20,var(--bg-line-alpha));
  -webkit-mask: url("../img/background_traced_optimized.svg") repeat 0 0 / var(--bg-tile-size) auto;
          mask: url("../img/background_traced_optimized.svg") repeat 0 0 / var(--bg-tile-size) auto;
  animation:drift var(--motion-secs) linear infinite;
}
@keyframes drift{ from{ -webkit-mask-position:0 0; mask-position:0 0 } to{ -webkit-mask-position:var(--bg-tile-size) 0; mask-position:var(--bg-tile-size) 0 } }

/* Film textures */
.grain{
  position:fixed; inset:0; pointer-events:none; opacity:var(--grain-opacity); mix-blend-mode:soft-light;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  animation:grainy 11s steps(10) infinite;
}
@keyframes grainy{to{transform:translate3d(0,0,0)}}
.scanlines{
  position:fixed; inset:0; pointer-events:none; opacity:var(--scan-opacity);
  background:repeating-linear-gradient(to bottom, rgba(163,255,197,.10) 0 1px, transparent 2px 4px);
  mix-blend-mode:overlay;
}

/* Layout */
.wrap{position:relative; z-index:2; display:grid; place-items:center; min-height:100dvh; padding:clamp(16px,3vw,48px);}

/* Card */
.card{
  position:relative; text-align:center; max-width:min(92vw,900px);
  padding: clamp(16px,3vw,28px); border-radius:28px;
  background: linear-gradient(180deg, rgba(5,7,8,.46), rgba(5,7,8,.20));
  backdrop-filter: blur(3px) saturate(115%) brightness(.97);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 24px 70px rgba(0,0,0,.55);
  display:flex; flex-direction:column; min-height: min(92dvh, 980px);
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  border:1px solid rgba(var(--neon-color),.32);
  box-shadow:0 0 24px rgba(var(--neon-color),.18), inset 0 0 60px rgba(var(--neon-color),.06);
}

/* Fishbowl lens behind the logo */
.logo{ position:relative; width:min(42vw,320px); margin:10px auto 22px; }
.logo::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:115%; height:115%; border-radius:50%; pointer-events:none;
  backdrop-filter: contrast(1.25) saturate(1.25) brightness(1.05) blur(1.2px);
  -webkit-backdrop-filter: contrast(1.25) saturate(1.25) brightness(1.05) blur(1.2px);
  box-shadow: 0 0 45px rgba(var(--neon-color),.18), 0 0 95px rgba(var(--neon-color),.14) inset;
  background: radial-gradient(closest-side, rgba(0,0,0,0) 70%, rgba(0,0,0,.25) 100%);
}

/* Inline SVG sizing */
.logo-svg{ display:block; width:100%; height:auto; }

/* Type */
h1{
  font-family:Cinzel,serif; letter-spacing:.08em; text-transform:uppercase;
  margin:.2rem 0 .6rem; font-weight:600; font-size:clamp(1.6rem,2.9rem,3.2rem);
  text-shadow:0 2px 0 rgba(0,0,0,.45), 0 10px 35px rgba(0,0,0,.35);
}
.motto{font-family:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color:#bfe9c9;letter-spacing:.12em;text-transform:uppercase;font-size:.92rem}
.est{font-family:Cinzel,serif;color:var(--neon-soft);letter-spacing:.10em;margin-top:.35rem}

/* Badges */
.tags{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:1.1rem 0 1.35rem}
.tag{
  color:var(--bone); padding:.48rem .75rem; border-radius:999px; font-size:.84rem; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(10,14,12,.55); border:1px solid rgba(163,255,197,.25); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}

/* Buttons unchanged */
.ctas{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.25rem}
.btn{--pad:.95rem; display:inline-flex; align-items:center; gap:.55rem; padding:var(--pad) clamp(1.1rem,2.3vw,1.45rem);
  border-radius:999px; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; font-size:.9rem;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease}
.btn--primary{
  color:#0a140d; background:linear-gradient(180deg, rgba(163,255,197,.85), rgba(57,255,20,.85));
  border:1px solid var(--neon); box-shadow:0 0 0 2px rgba(var(--neon-color),.25) inset, 0 10px 30px rgba(var(--neon-color),.18)
}
.btn--primary:hover{transform:translateY(-1px); box-shadow:0 0 0 2px rgba(var(--neon-color),.35) inset, 0 16px 45px rgba(var(--neon-color),.28)}

/* Footer fixed to the bottom of the card */
.foot{margin-top:auto; padding-top:1.25rem; font-size:.85rem; color:var(--muted)}
.accent{color:var(--neon-soft)}

@media (prefers-reduced-motion:reduce){ body::before{animation:none} .grain{animation:none} }
@media (max-width:520px){ .logo{width:58vw} .logo::after{width:64vw; height:64vw; top:24%} }
@media (max-width:360px){
  .btn{ --pad:.8rem; font-size:.85rem; }
  .card{ padding: clamp(12px, 3vw, 20px); }
}

/* Accessibility: visible focus styles for keyboard users */
:where(.btn, .ctas a) { outline: none; }
.btn:focus-visible, .ctas a:focus-visible {
  outline: 3px solid rgba(var(--neon-color), .28);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(var(--neon-color), .12);
  transform: translateY(-1px);
}