/* =========================
   Design tokens
   ========================= */
:root{
  --bg:#0b0b0c;
  --panel:rgba(15,15,15,.9);
  --ink:#e6e6e6;
  --muted:#bcbcbc;
  --brand:#00e6ff;
  --brand-2:#ff00ff;
  --line:#1f1f1f;
  --radius:18px;
  --shadow:0 8px 28px rgba(0,0,0,.45),0 0 16px rgba(0,230,255,.18);
}

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html,body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--ink);
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  background: var(--bg) url('background.png') center/cover no-repeat;
  /* fixed backgrounds stutter on iOS; avoid */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:underline;transition:color .25s ease}
a:hover,a:focus{color:var(--brand-2)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* =========================
   Header (flex)
   ========================= */
.header-container{
  position:sticky; top:0; left:0;
  width:100%;
  background:rgba(15,15,15,.88);
  border-bottom:1px solid var(--line);
  z-index:1000;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 16px;
  backdrop-filter:saturate(120%) blur(4px);
}
@supports not ((backdrop-filter: blur(4px))){
  .header-container{background:rgba(15,15,15,.94)}
}
.logo{height:48px;width:auto}

nav{display:flex;gap:10px;align-items:center;justify-content:center;margin-left:auto;margin-right:auto}
.nav-button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;
  font-size:.95rem;font-weight:600;
  background:#0f0f0f;color:var(--brand);
  border:1px solid var(--brand);
  border-radius:10px;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  box-shadow:0 0 6px rgba(0,230,255,.28);
}
.nav-button:hover,.nav-button:focus-visible{
  background:var(--brand);color:#0f0f0f;
  box-shadow:0 0 10px var(--brand),0 0 18px var(--brand);
  transform:translateY(-1px);
}

/* =========================
   Typography
   ========================= */
h1,h2{margin:0 0 10px;line-height:1.2;text-align:center}
h3{margin:0 0 6px;line-height:1.2;text-align:center}
p{margin:8px 0 12px;line-height:1.6;text-align:left}
.aligned-list{list-style:none;padding:0;margin:22px auto 8px;max-width:700px}
.aligned-list-1{list-style:disc inside;margin:22px auto 8px;max-width:700px;text-align:left}
.aligned-list li{margin:.4rem 0}

/* =========================
   Main container
   ========================= */
.container{
  max-width:980px;
  margin:110px auto 44px;
  padding:28px 22px;
  background:var(--panel);
  border:1px solid #0d2e33;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* =========================
   Hero
   ========================= */
.glitch-text{
  font-size:clamp(2.2rem,6vw,4rem);
  font-weight:800;
  color:#fff;
  letter-spacing:.5px;
  margin-bottom:10px;
  text-shadow:0 0 2px #fff, 0 0 6px #fff, 1px 0 0 rgba(255,0,0,.6), -1px 0 0 rgba(0,0,255,.6);
  animation:glitchShift 3.2s infinite;
}
@keyframes glitchShift{
  0%{text-shadow:1px 0 rgba(255,0,0,.6), -1px 0 rgba(0,0,255,.6)}
  50%{text-shadow:-1px 0 rgba(255,0,0,.6), 1px 0 rgba(0,0,255,.6)}
  100%{text-shadow:1px 0 rgba(255,0,0,.6), -1px 0 rgba(0,0,255,.6)}
}
.tagline{
  font-size:clamp(1.05rem,2.2vw,1.6rem);
  font-weight:700;
  color:var(--brand);
  margin-top:6px;
  text-align:center;
}

/* =========================
   Countdown
   ========================= */
.countdown-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0}
#election-select{
  padding:8px 10px;font-size:1rem;border:1px solid #2d2d2d;border-radius:10px;background:#0f0f0f;color:#fff
}
.countdown-timer{
  font-size:clamp(1rem,2vw,1.4rem);
  color:#9fb5b7;
  text-shadow:0 0 10px rgba(0,229,255,.22);
  font-weight:700;
  margin:6px 0 4px;
  text-align:center;
}
.countdown-date{opacity:.85;font-size:.95rem;text-align:center}
.election-copy{max-width:780px;margin:10px auto 4px;text-align:center}
.countdown-caption{
  font-weight:700;
  background:linear-gradient(90deg,var(--brand),#7afcff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 8px rgba(0,229,255,.2);
}
.credibility-line{color:var(--brand);font-weight:600;text-shadow:0 0 10px rgba(0,229,255,.22)}

/* =========================
   CTA
   ========================= */
.cta-row{margin-top:14px;text-align:center}
.cta-row .nav-button{display:inline-flex}

/* =========================
   Rotating list
   ========================= */
.rotating-list li{
  display:none;opacity:0;
  transition:opacity .4s ease-in-out;
  font-size:1.08rem;color:var(--ink);text-align:center
}
.rotating-list li.visible{display:block;opacity:1}

/* =========================
   Footer
   ========================= */
footer{
  text-align:center;
  padding:26px 14px;
  font-size:.95rem;
  color:var(--muted);
  background:rgba(10,10,10,.9);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 6px rgba(0,0,0,.6);
}

/* =========================
   Page specific
   ========================= */
.page-index .container{padding:30px 26px}
.page-about .container{max-width:820px}
.page-about h2{
  color:var(--brand);
  text-shadow:0 0 6px rgba(0,230,255,.45);
  font-weight:700;text-align:center
}
.page-about h3{
  color:var(--brand);
  text-shadow:0 0 6px rgba(0,230,255,.45);
  font-weight:700;text-align:left
}
.page-about p{line-height:1.65}
.page-gdpr .container{max-width:700px;padding:26px 22px}
.page-gdpr h2{
  color:var(--brand-2);
  text-shadow:0 0 6px rgba(255,0,255,.35);
  font-weight:700;text-align:left
}
.page-gdpr p,.page-gdpr li{
  font-size:1rem;line-height:1.65;text-align:left;margin:6px 0 10px
}
.page-gdpr a{color:#66d9ff}
.page-gdpr a:hover,.page-gdpr a:focus{color:#ff66ff}

/* =========================
   Forms
   ========================= */
input,select,button,textarea{
  font:inherit;color:inherit;background:#0f0f0f;border:1px solid #2d2d2d;border-radius:10px;
  padding:10px 12px;outline:none;transition:border-color .2s ease, box-shadow .2s ease
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,230,255,.2)}
button{
  cursor:pointer;background:var(--brand);color:#0f0f0f;border-color:var(--brand);
  font-weight:700;box-shadow:0 0 8px rgba(0,230,255,.35)
}
button:hover,button:focus-visible{filter:brightness(1.05)}

/* =========================
   Animations and motion prefs
   ========================= */
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)}}
.container{animation:fadeIn .7s ease}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px){
  .header-container{height:auto;padding:10px 12px}
  nav{gap:8px;flex-wrap:wrap}
  .nav-button{padding:7px 12px}
  .container{margin:96px 12px 28px}
  h1{font-size:clamp(1.7rem,6vw,2.2rem);max-width:22ch;margin:10px auto 10px}
  .container > p:first-of-type{
    font-size:clamp(1rem,4.2vw,1.12rem);
    line-height:1.55;max-width:48ch;margin:8px auto 12px;color:rgba(255,255,255,.95)
  }
  p,.election-copy p,.aligned-list li{
    font-size:clamp(1rem,4vw,1.08rem);
    line-height:1.55;max-width:54ch;margin-left:auto;margin-right:auto
  }
  .countdown-timer{font-size:clamp(1.02rem,4.8vw,1.3rem)}
  .countdown-date{font-size:.92rem}
}

/* ===== Desktop guardrail: keep original sizing on ≥901px ===== */
@media (min-width: 901px){
  .nav-button{ font-size:.95rem; padding:8px 16px; min-height:40px }
  button{ font-size:1rem; min-height:44px }
  input,select,textarea{ font-size:1rem; min-height:44px; width:auto }
  .page-signup .container{ font-size:1rem; padding:28px 22px; max-width:980px }
  .glitch-text{ font-size:clamp(2.2rem,6vw,4rem) }
  .tagline{ font-size:clamp(1.05rem,2.2vw,1.6rem) }
}

/* ===== Mobile-only upgrades: ≤900px ===== */
@media (max-width: 900px){
  :root{ --tap:48px; --tap-lg:56px }

  .header-container{ padding:12px 14px }
  nav{ gap:10px; flex-wrap:wrap }

  .nav-button{
    font-size:1.02rem;
    padding:10px 16px;
    min-height:var(--tap);
    flex:0 1 auto;
  }

  /* Signup feels ~50% bigger only on mobile */
  .page-signup .container{
    margin:92px 12px 28px;
    padding:32px 22px;
    font-size:1.08rem;
    max-width:760px;   /* still narrower than desktop */
  }
  .page-signup input,
  .page-signup select,
  .page-signup textarea{
    width:100%;
    min-height:56px;
    font-size:1.08rem;
  }
  .page-signup button{
    min-height:56px;
    font-size:1.08rem;
  }

  /* Larger, but mobile-only hero text */
  .glitch-text{ font-size:clamp(2rem,8vw,2.6rem) }
  .tagline{ font-size:clamp(1.1rem,3.8vw,1.5rem) }

  /* Wrap long emails and links on small screens */
  a, .email, .breakable, footer{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* Tiny phones: tighten spacing */
@media (max-width: 420px){
  .nav-button{ padding:9px 12px }
  .page-signup .container{ padding:28px 18px }
}