/* Neon hacker night theme - single stylesheet (mobile-first) */
:root{
  --bg: #000;
  --card: rgba(0,0,0,.55);
  --fg: #eafff0;
  --muted: #bafbd1;
  --neon: #39ff14;
  --neon-soft: rgba(57,255,20,.25);
  --glass: rgba(0,0,0,.55);
}
*,. *:before,*:after{box-sizing:border-box}
html, body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#000;
  color:#eafff0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a{color:var(--neon); text-decoration:none}
a:focus-visible, button:focus-visible, [tabindex]:focus{outline:2px solid var(--neon); outline-offset:2px}
.brand{font-weight:800; color:#baffbd; text-shadow:0 0 8px rgba(57,255,20,.6)}

.site-header{
  position:sticky; top:0; width:100%; z-index:10;
  background: rgba(0,0,0,.6);
  border-bottom:1px solid rgba(57,255,20,.4);
  padding:10px 14px; display:flex; justify-content:center; align-items:center;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.main{display:block}
.hero{ padding:2rem 1rem; display:grid; place-items:center; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; width:100%; max-width:1100px; align-items:center }
.hero-copy h1{ font-size:1.75rem; margin:0 0 .5rem; color:#d7ffde; text-shadow:0 0 8px rgba(57,255,20,.6) }
.subhead{ color:#d5ffd8; font-size:1rem; opacity:.95; }
.cta{ display:inline-block; padding:.75rem 1.2rem; border-radius:999px;
  border:1px solid rgba(57,255,20,.7); background: rgba(57,255,20,.15);
  color:#eafff0; font-weight:700; margin-top:.75rem;
  box-shadow:0 0 12px rgba(57,255,20,.6);
}
.cta:hover{ background: rgba(57,255,20,.25); transform: translateY(-1px); }

.hero-visual-wrap{ display:flex; justify-content:center; align-items:center;
  padding:1rem; border-radius:14px; background: rgba(0,0,0,.55);
  border:1px solid rgba(57,255,20,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-visual{ width:100%; height:auto; max-width:680px; border-radius:12px; display:block; }

.features{ padding:2rem 1rem; }
.features h2{ text-align:center; font-size:1.25rem; color:#baffd1; margin-bottom:.75rem; }
.features-grid{ display:grid; grid-template-columns:1fr; gap:1rem; width:100%; max-width:1000px; margin:0 auto; }
.feature{ background:var(--card); border:1px solid rgba(57,255,20,.25);
  padding:1rem; border-radius:12px; min-height:100px; }
.feature h3{ color:#eaffd9; margin-bottom:.25rem; }

.testimonials{ padding:2rem 1rem; }
.testimonials h2{ text-align:center; font-size:1.25rem; color:#baffd1; }
.testimonials-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; width:100%; max-width:900px; margin:0 auto; }
.testimonial{ background:var(--card); border:1px solid rgba(57,255,20,.25);
  padding:1rem; border-radius:12px; }
.testimonial footer{ font-size:.9rem; color:#caffd2; margin-top:.25rem; }

.ad{ padding:1rem; text-align:center; }
.ad-link{ display:inline-block; padding:.65rem 1rem; border-radius:999px;
  border:1px solid rgba(57,255,20,.7); color:#d9ffd0; background: rgba(57,255,20,.12);
  transition: transform .2s ease; }
.ad-link:hover{ transform: translateY(-1px); }

footer{ padding:1rem; text-align:center; color:#a5ffd0; border-top:1px solid rgba(57,255,20,.15); }

/* Layout tweaks for larger screens (desktop / laptop) */
@media (min-width: 768px){
  .hero-grid{ grid-template-columns: 1.05fr 0.95fr; }
  .hero-copy h1{ font-size:2rem; }
  .features-grid{ grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid{ grid-template-columns: repeat(3, 1fr); }
}