/* ── TOKENS ────────────────────────────────────────────── */
:root {
  --bg:      #08080A;
  --s1:      #101013;
  --s2:      #18181D;
  --border:  #26262E;
  --border2: #32323C;
  --green:   #10E060;
  --green-d: #0A9C42;
  --red:     #E8302A;
  --red-d:   #9C1F1A;
  --gold:    #E8B840;
  --white:   #F2EFE8;
  --muted:   #68687A;
  --dim:     #3A3A46;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Grain overlay */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* ── NAV ───────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 40px;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
nav.stuck {
  background: rgba(8,8,10,0.95);
  border-color: var(--border);
  backdrop-filter: blur(16px);
}
.nav-logo {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:17px; letter-spacing:0.5px; color:var(--white);
  display:flex; align-items:center; gap:8px;
}
.nav-logo-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%,100%{ box-shadow: 0 0 0 0 rgba(16,224,96,0.5); }
  50%    { box-shadow: 0 0 0 6px rgba(16,224,96,0); }
}
.nav-right {
  display:flex; align-items:center; gap:28px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); font-family:'Inter', sans-serif;
}
.nav-cta {
  background: var(--green); color: var(--bg);
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  padding: 9px 20px; border:none; cursor:pointer;
  transition: opacity 0.2s;
}
.nav-cta:hover { opacity:0.85; }

/* ── HERO ──────────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
  padding: 120px 40px 80px;
  position:relative; overflow:hidden;
}

/* Kenya flag stripe — vertical, right side */
.hero-stripe {
  position:absolute; top:0; right:0; bottom:0; width:4px;
  background: linear-gradient(to bottom,
    var(--green) 0%, var(--green) 33%,
    var(--bg)    33%, var(--bg)    34%,
    #000         34%, #000         66%,
    var(--bg)    66%, var(--bg)    67%,
    var(--red)   67%, var(--red)   100%
  );
  opacity:0.35;
}

/* Background number watermark */
.hero-watermark {
  position:absolute; right:-20px; top:50%; transform:translateY(-50%);
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(160px, 22vw, 320px); color:rgba(255,255,255,0.02);
  pointer-events:none; user-select:none; line-height:1; white-space:nowrap;
}

.hero-kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); margin-bottom:28px;
  opacity:0; animation:fadeUp 0.6s ease 0.15s forwards;
}
.hero-kicker-live {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--green); font-size:10px; letter-spacing:2px;
}
.live-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green); animation:pulse-dot 1.8s ease infinite;
}

.hero-title {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(68px, 11vw, 150px);
  line-height:0.88; letter-spacing:-2px;
  margin-bottom:32px;
  opacity:0; animation:fadeUp 0.8s ease 0.3s forwards;
}
.hero-title .line-dim  { color:var(--dim); display:block; }
.hero-title .line-main { color:var(--white); display:block; }
.hero-title .line-accent { color:var(--green); display:block; }

.hero-sub {
  font-size:clamp(14px, 1.6vw, 17px); font-weight:300;
  color:var(--muted); line-height:1.7; max-width:420px;
  margin-bottom:48px;
  opacity:0; animation:fadeUp 0.8s ease 0.45s forwards;
}

/* COUNTDOWN */
.countdown {
  display:flex; align-items:flex-start; gap:0;
  margin-bottom:48px;
  opacity:0; animation:fadeUp 0.8s ease 0.55s forwards;
}
.cd-unit {
  display:flex; flex-direction:column; align-items:center;
  padding: 0 24px 0 0;
  position:relative;
}
.cd-unit + .cd-unit { border-left:1px solid var(--border); padding-left:24px; }
.cd-num {
  font-family:'Space Mono', monospace; font-weight:700;
  font-size:clamp(36px, 5vw, 56px); line-height:1; color:var(--white);
  letter-spacing:-1px;
}
.cd-label {
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:var(--dim); margin-top:6px;
}
.cd-sep {
  font-family:'Space Mono', monospace; font-size:clamp(28px, 4vw, 44px);
  color:var(--dim); align-self:flex-start; padding:0 12px; line-height:1;
  opacity:0.3;
}

.hero-btn {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--green); color:var(--bg);
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  padding:16px 36px; border:none; cursor:pointer;
  transition:all 0.25s;
  opacity:0; animation:fadeUp 0.8s ease 0.65s forwards;
}
.hero-btn:hover { background:var(--white); }
.hero-btn i { font-size:12px; }

/* ── SECTION SHELL ─────────────────────────────────────── */
.section {
  max-width:1000px; margin:0 auto; padding:88px 40px;
}
.section-rule { height:1px; background:var(--border); }

.sec-eyebrow {
  display:flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:4px; text-transform:uppercase;
  color:var(--muted); margin-bottom:32px;
}
.sec-eyebrow::after { content:''; flex:1; height:1px; background:var(--border); }

.sec-title {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(28px, 4.5vw, 44px); line-height:1.05; letter-spacing:-0.5px;
  margin-bottom:10px;
}
.sec-sub {
  font-size:13px; color:var(--muted); line-height:1.7;
  margin-bottom:44px; max-width:500px;
}

/* ── CANDIDATE GRID ────────────────────────────────────── */
.c-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px; margin-bottom:24px;
}

.c-card {
  position:relative; border:1px solid var(--border);
  background:var(--s1); cursor:pointer;
  overflow:hidden; aspect-ratio:3/4;
  display:flex; flex-direction:column;
  transition:border-color 0.2s, transform 0.25s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.c-card:hover { transform:translateY(-4px); border-color:var(--border2); }
.c-card.sel   { border-color:var(--green) !important; }

/* Photo zone */
.c-photo {
  flex:1; position:relative; overflow:hidden;
}
.c-photo-bg {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.c-photo-bg img {
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block; filter:grayscale(20%) contrast(1.05);
  transition:filter 0.3s, transform 0.4s;
}
.c-card:hover .c-photo-bg img { filter:grayscale(0%) contrast(1.1); transform:scale(1.04); }
.c-card.sel   .c-photo-bg img { filter:grayscale(0%) contrast(1.1); }

/* Initials fallback */
.c-initials {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(30px, 4vw, 48px);
  letter-spacing:2px; color:rgba(255,255,255,0.1);
  z-index:0;
}
/* Show initials when img fails */
.c-photo-bg img.fail { display:none; }
.c-photo-bg img.fail ~ .c-initials { display:flex !important; }

/* Vignette */
.c-vignette {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,8,10,0.88) 0%,
    rgba(8,8,10,0.2)  45%,
    transparent 100%
  );
  z-index:1;
}

/* Rising badge */
.c-rising {
  position:absolute; top:10px; left:10px; z-index:3;
  background:var(--green); color:var(--bg);
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:8px; letter-spacing:2px; text-transform:uppercase;
  padding:4px 8px;
  display:flex; align-items:center; gap:4px;
}
.c-rising i { font-size:8px; }

/* Selected check */
.c-check {
  position:absolute; top:10px; right:10px; z-index:4;
  width:22px; height:22px; border-radius:50%;
  background:var(--green); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
  opacity:0; transform:scale(0);
  transition:opacity 0.2s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.c-card.sel .c-check { opacity:1; transform:scale(1); }

/* Green glow on selected */
.c-card.sel::after {
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 20px rgba(16,224,96,0.12);
  pointer-events:none; z-index:2;
}

/* Name bar */
.c-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:14px 14px 13px; z-index:3;
}
.c-name {
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:clamp(11px, 1.4vw, 14px); line-height:1.2;
  color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.c-party {
  font-size:9px; color:rgba(242,239,232,0.5);
  margin-top:3px; letter-spacing:0.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* On-card vote overlay */
.c-vote-overlay {
  position:absolute; inset:0; z-index:6;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  background:linear-gradient(to top, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.45) 55%, rgba(8,8,10,0.2) 100%);
  opacity:0; pointer-events:none;
  transition:opacity 0.28s ease;
}
.c-card.sel .c-vote-overlay {
  opacity:1; pointer-events:auto;
}
.c-vote-btn {
  width:100%; max-width:220px;
  border:none; cursor:pointer;
  background:var(--green); color:var(--bg);
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:clamp(10px, 1.2vw, 12px);
  letter-spacing:2px; text-transform:uppercase;
  padding:14px 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 8px 32px rgba(16,224,96,0.35);
  transition:background 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  transform:translateY(8px) scale(0.94);
}
.c-card.sel .c-vote-btn {
  transform:translateY(0) scale(1);
}
.c-vote-btn:hover { background:var(--white); }
.c-vote-btn:disabled {
  background:var(--s2); color:var(--white); cursor:wait;
  box-shadow:none; transform:none;
}
.c-card.recording .c-vote-btn {
  background:var(--s2); color:var(--white); cursor:wait;
}

/* ── VOTE BUTTON ───────────────────────────────────────── */
.vote-wrap { display:flex; flex-direction:column; gap:12px; }

.vote-btn {
  width:100%; padding:18px; border:none; cursor:pointer;
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:15px; letter-spacing:3px; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:12px;
  transition:background 0.25s, color 0.25s;
  position:relative; overflow:hidden;
}
.vote-btn:disabled {
  background:var(--s2); color:var(--dim); cursor:default;
}
.vote-btn:not(:disabled) {
  background:var(--green); color:var(--bg);
}
.vote-btn:not(:disabled):hover { background:var(--white); }
.vote-hint {
  font-size:11px; color:var(--dim); letter-spacing:1.5px;
  text-transform:uppercase; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px; border:1px dashed var(--border); background:var(--s1);
}

/* Welcome modal — compact */
.welcome-modal {
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.welcome-modal.on { opacity:1; pointer-events:auto; }
.welcome-backdrop {
  position:absolute; inset:0;
  background:rgba(8,8,10,0.9);
  backdrop-filter:blur(6px);
}
.welcome-panel {
  position:relative; z-index:1;
  width:min(400px, 100%);
  background:var(--s1);
  border:1px solid var(--border2);
  padding:28px 24px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.welcome-modal.on .welcome-panel {
  animation:modalUp 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes modalUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.welcome-close {
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border:1px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.welcome-close:hover { color:var(--white); }
.welcome-kicker {
  font-size:9px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--green); margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}
.welcome-title {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:26px; letter-spacing:-0.5px; line-height:1.1; margin-bottom:8px;
}
.welcome-tagline {
  font-size:14px; color:var(--white); line-height:1.55; margin-bottom:8px;
}
.welcome-sub {
  font-size:12px; color:var(--muted); line-height:1.55; margin-bottom:18px;
}
.welcome-form { display:flex; flex-direction:column; gap:12px; }
.welcome-remind-label {
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
}
.welcome-channels {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.welcome-channel {
  border:1px solid var(--border2); background:var(--bg);
  color:var(--muted); cursor:pointer;
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:11px 10px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:border-color 0.2s, color 0.2s, background 0.2s;
}
.welcome-channel i { font-size:13px; }
.welcome-channel.active[data-channel="whatsapp"] {
  border-color:#25D366; color:#fff; background:rgba(37,211,102,0.12);
}
.welcome-channel.active[data-channel="whatsapp"] i { color:#25D366; }
.welcome-channel.active[data-channel="email"] {
  border-color:var(--green); color:var(--white); background:rgba(16,224,96,0.08);
}
.welcome-channel.active[data-channel="email"] i { color:var(--green); }
.welcome-contact.hidden { display:none; }
.welcome-label {
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:8px;
}
.welcome-label i { color:#25D366; font-size:14px; }
.welcome-phone-row {
  display:flex; align-items:stretch;
  border:1px solid var(--border2); background:var(--bg);
}
.welcome-prefix {
  padding:0 12px; display:flex; align-items:center;
  font-family:'Space Mono', monospace; font-size:13px; color:var(--muted);
  border-right:1px solid var(--border); flex-shrink:0;
}
.welcome-phone-row input {
  flex:1; min-width:0; border:none; background:transparent;
  color:var(--white); padding:13px 12px; font-size:15px; outline:none;
}
.welcome-phone-row:focus-within { border-color:var(--green); }
.welcome-check {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:12px; color:var(--muted); line-height:1.45;
}
.welcome-check input {
  margin-top:2px; accent-color:var(--green); flex-shrink:0;
}
.welcome-check em { color:var(--white); font-style:normal; }
.welcome-wa-btn {
  border:none; cursor:pointer; width:100%;
  background:#25D366; color:#fff;
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  padding:14px; margin-top:4px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:filter 0.2s;
}
.welcome-wa-btn:hover { filter:brightness(1.08); }
.welcome-wa-btn:disabled { background:var(--s2); color:var(--dim); cursor:default; filter:none; }
.welcome-wa-btn.is-email { background:var(--green); }
.welcome-wa-btn.is-email i { color:var(--bg); }
.welcome-email {
  width:100%; background:var(--bg); border:1px solid var(--border2);
  color:var(--white); padding:12px 14px; font-size:13px; outline:none;
}
.welcome-email:focus { border-color:var(--green); }
.welcome-email::placeholder { color:var(--dim); }
.welcome-note {
  font-size:10px; color:var(--dim); text-align:center; line-height:1.4;
}
.welcome-note.ok { color:var(--green); }
.welcome-skip {
  width:100%; margin-top:14px; padding:12px;
  background:transparent; border:none; cursor:pointer;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--dim); transition:color 0.2s;
}
.welcome-skip:hover { color:var(--white); }

/* New-week reminder banner */
.week-banner {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; margin-bottom:24px;
  border:1px solid rgba(16,224,96,0.35);
  background:rgba(16,224,96,0.06);
  font-size:12px; color:var(--white);
}
.week-banner[hidden] { display:none !important; }
.week-banner i { color:var(--green); flex-shrink:0; }
.week-banner span { flex:1; line-height:1.45; }
.week-banner button {
  border:none; background:transparent; color:var(--muted);
  font-size:20px; line-height:1; cursor:pointer; padding:0 4px;
}
.week-banner button:hover { color:var(--white); }

/* ── RESULTS ───────────────────────────────────────────── */
.results { display:none; margin-top:8px; }
.results.on { display:block; animation:fadeUp 0.5s ease; }

.results-title {
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:13px; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px;
  display:flex; align-items:center; gap:14px;
}
.results-title::after { content:''; flex:1; height:1px; background:var(--border); }

.r-row {
  display:grid;
  grid-template-columns:28px 1fr 120px 52px 28px;
  align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.r-row:last-child { border:none; }
.r-rank {
  font-family:'Space Mono', monospace; font-size:14px;
  color:var(--dim); text-align:center;
}
.r-name-block {}
.r-name {
  font-size:13px; font-weight:500; color:var(--white);
  display:flex; align-items:center; gap:8px;
}
.r-yours {
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--green); background:rgba(16,224,96,0.1);
  padding:2px 7px;
}
.r-party { font-size:10px; color:var(--muted); margin-top:2px; }
.r-bar-wrap { height:3px; background:var(--border); overflow:hidden; position:relative; }
.r-bar-fill { height:100%; width:0; transition:width 1.3s cubic-bezier(0.16,1,0.3,1); }
.r-pct {
  font-family:'Space Mono', monospace; font-weight:700;
  font-size:16px; text-align:right;
}
.r-trend {
  font-size:10px; text-align:center;
  display:flex; align-items:center; justify-content:center;
}
.r-up { color:var(--green); }
.r-dn { color:var(--red); }
.r-fl { color:var(--dim); }

.results-note {
  margin-top:20px; padding:16px 20px;
  border:1px solid var(--border); background:var(--s1);
  font-size:11px; color:var(--muted); line-height:1.8;
  display:flex; gap:12px; align-items:flex-start;
}
.results-note i { color:var(--gold); margin-top:2px; flex-shrink:0; }

/* ── BINARY POLL ───────────────────────────────────────── */
.binary-title {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(32px, 6vw, 58px); letter-spacing:-1px; line-height:1;
  margin-bottom:10px;
}
.binary-sub { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:40px; }

.binary-opts {
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--border); overflow:hidden; margin-bottom:12px;
}
.b-opt {
  padding:48px 32px; cursor:pointer; text-align:center;
  transition:background 0.2s; border:2px solid transparent;
  -webkit-tap-highlight-color:transparent; position:relative; overflow:hidden;
}
.b-opt + .b-opt { border-left:1px solid var(--border); }
.b-opt:hover { background:var(--s1); }
.b-opt.sel-w { border-color:var(--red); background:rgba(232,48,42,0.05); }
.b-opt.sel-t { border-color:var(--green); background:rgba(16,224,96,0.04); }

.b-label {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(32px, 5vw, 48px); letter-spacing:1px;
  display:block; line-height:1; margin-bottom:10px;
  transition:color 0.2s;
}
.b-opt.sel-w .b-label { color:var(--red); }
.b-opt.sel-t .b-label { color:var(--green); }
.b-desc {
  font-size:10px; color:var(--muted); letter-spacing:2.5px;
  text-transform:uppercase; display:block;
}
.b-icon {
  font-size:24px; display:block; margin-bottom:14px;
  color:var(--dim); transition:color 0.2s;
}
.b-opt.sel-w .b-icon { color:var(--red); }
.b-opt.sel-t .b-icon { color:var(--green); }

.b-btn {
  width:100%; padding:16px; background:transparent; color:var(--white);
  border:1px solid var(--border2);
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.b-btn:not(:disabled):hover { background:var(--s1); border-color:var(--muted); }
.b-btn:disabled { color:var(--dim); cursor:default; }

.b-result { display:none; margin-top:16px; }
.b-result.on { display:block; animation:fadeUp 0.5s ease; }

.b-cols { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border); overflow:hidden; }
.b-col  { padding:32px 24px; text-align:center; position:relative; overflow:hidden; }
.b-col + .b-col { border-left:1px solid var(--border); }
.b-big  {
  font-family:'Space Mono', monospace; font-weight:700;
  font-size:clamp(44px, 7vw, 72px); line-height:1; display:block; margin-bottom:6px;
}
.b-tag { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.b-floor { position:absolute; bottom:0; left:0; right:0; height:3px; }
.b-floor-fill { height:100%; width:0; transition:width 1.5s cubic-bezier(0.16,1,0.3,1); }

.b-total { font-size:11px; color:var(--muted); text-align:center; margin-top:12px; letter-spacing:1px; }

/* ── NIKO KADI ─────────────────────────────────────────── */
.niko-hero {
  display:grid; grid-template-columns:1fr auto;
  gap:40px; align-items:center; margin-bottom:40px;
}
.niko-title {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(32px, 5vw, 52px); letter-spacing:-0.5px; line-height:1.05;
  margin-bottom:12px;
}
.niko-sub { font-size:13px; color:var(--muted); line-height:1.7; max-width:480px; }
.niko-counter-block { text-align:right; flex-shrink:0; }
.niko-big {
  font-family:'Space Mono', monospace; font-weight:700;
  font-size:clamp(42px, 6vw, 68px); color:var(--green);
  line-height:1; display:block; letter-spacing:-2px;
}
.niko-big-label { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-top:4px; }

.niko-drop {
  border:1px dashed var(--border2); padding:56px 32px;
  text-align:center; cursor:pointer; position:relative;
  background:var(--s1); transition:all 0.25s;
}
.niko-drop:hover { border-color:var(--green); background:rgba(16,224,96,0.03); }
.niko-drop.ready { border-style:solid; border-color:var(--green); background:rgba(16,224,96,0.04); }
.niko-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.nd-icon { font-size:32px; color:var(--dim); margin-bottom:18px; display:block; }
.nd-main { font-family:'Syne', sans-serif; font-weight:700; font-size:16px; margin-bottom:8px; }
.nd-sub  { font-size:12px; color:var(--muted); line-height:1.7; }
.nd-private { color:var(--dim); display:flex; align-items:center; gap:6px; justify-content:center; margin-top:10px; font-size:11px; letter-spacing:1px; }

.niko-preview { display:none; margin-top:12px; position:relative; }
.niko-preview.on { display:block; animation:fadeUp 0.4s ease; }
.niko-preview img { width:100%; max-height:180px; object-fit:cover; filter:blur(10px) brightness(0.4); display:block; border:1px solid var(--border); }
.niko-preview-cap {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
}
.niko-preview-cap i { font-size:20px; color:var(--green); }

.niko-submit {
  width:100%; margin-top:12px; padding:17px;
  background:var(--green); color:var(--bg);
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:14px; letter-spacing:3px; text-transform:uppercase;
  border:none; cursor:pointer; transition:background 0.2s;
  display:none;
  align-items:center; justify-content:center; gap:10px;
}
.niko-submit.on { display:flex; }
.niko-submit:hover { background:var(--white); }

.niko-done { display:none; padding:48px 32px; border:1px solid var(--green); background:rgba(16,224,96,0.04); text-align:center; }
.niko-done.on { display:block; animation:fadeUp 0.4s ease; }
.nd2-icon  { font-size:36px; color:var(--green); margin-bottom:16px; display:block; }
.nd2-title { font-family:'Syne', sans-serif; font-weight:800; font-size:28px; letter-spacing:1px; color:var(--green); margin-bottom:8px; }
.nd2-sub   { font-size:13px; color:var(--muted); line-height:1.7; }

/* ── FOOTER ────────────────────────────────────────────── */
footer {
  border-top:1px solid var(--border); padding:28px 40px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.f-logo {
  font-family:'Syne', sans-serif; font-weight:700;
  font-size:14px; letter-spacing:1px; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.f-logo-dot { width:6px; height:6px; border-radius:50%; background:var(--green); }
.f-mid { font-size:11px; color:var(--dim); letter-spacing:0.5px; font-style:italic; }
.f-right { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); }

/* ── ANIMATIONS ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.rev { opacity:0; transform:translateY(32px); transition:opacity 0.65s ease, transform 0.65s ease; }
.rev.in { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:700px) {
  nav { padding:16px 20px; }
  .nav-right span { display:none; }
  .hero { padding:100px 20px 60px; }
  .section { padding:60px 20px; }
  .c-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
  .r-row { grid-template-columns:20px 1fr 80px 40px 20px; gap:8px; }
  .niko-hero { grid-template-columns:1fr; }
  .niko-counter-block { text-align:left; }
  footer { padding:22px 20px; flex-direction:column; gap:8px; }
  .b-opt { padding:32px 16px; }
  .welcome-panel { padding:24px 18px 18px; }
}
@media(max-width:420px) {
  .c-grid { grid-template-columns:repeat(2, 1fr); }
  .cd-unit { padding:0 16px 0 0; }
  .cd-unit + .cd-unit { padding-left:16px; }
}

/* ── ENHANCEMENTS ──────────────────────────────────────── */
.hero-glow {
  position:absolute; top:10%; left:-10%; width:60vw; height:60vw; max-width:700px;
  background:radial-gradient(circle, rgba(16,224,96,0.08) 0%, transparent 70%);
  pointer-events:none; filter:blur(40px);
}
.cd-election-label {
  padding-left:32px; font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--dim); align-self:flex-end; padding-bottom:4px;
  border-left:1px solid var(--border); margin-left:8px;
}
.stats-strip {
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;
  opacity:0; animation:fadeUp 0.8s ease 0.5s forwards;
}
.stat-pill {
  border:1px solid var(--border); background:var(--s1);
  padding:14px 20px; min-width:130px;
}
.stat-pill.accent { border-color:rgba(16,224,96,0.35); background:rgba(16,224,96,0.04); }
.stat-num {
  font-family:'Space Mono', monospace; font-weight:700;
  font-size:22px; display:block; line-height:1; margin-bottom:6px;
}
.stat-lbl {
  font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
}
.poll-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:44px;
}
.week-badge {
  border:1px solid var(--border); background:var(--s1);
  padding:16px 20px; text-align:right; flex-shrink:0;
  border-top:3px solid var(--green);
}
.week-badge-label {
  display:block; font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.week-badge-date {
  font-family:'Syne', sans-serif; font-weight:700; font-size:14px;
}
.skeleton-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%;
}
.sk-card {
  aspect-ratio:3/4; background:linear-gradient(110deg, var(--s1) 8%, var(--s2) 18%, var(--s1) 33%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite;
  border:1px solid var(--border);
}
@keyframes shimmer { to { background-position-x:-200%; } }
.c-card.locked { pointer-events:none; opacity:0.85; }
.history-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px;
}
.history-card {
  border:1px solid var(--border); background:var(--s1); padding:18px;
  transition:border-color 0.2s, transform 0.2s;
}
.history-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.history-week {
  font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.history-label { font-family:'Syne', sans-serif; font-weight:700; font-size:15px; margin-bottom:12px; }
.history-meta { font-size:11px; color:var(--dim); margin-bottom:14px; }
.history-leaders { display:flex; flex-direction:column; gap:8px; }
.history-leader {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11px;
}
.history-leader span:last-child {
  font-family:'Space Mono', monospace; font-weight:700; color:var(--green);
}
.toast {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:var(--s2); border:1px solid var(--border2); color:var(--white);
  padding:14px 18px; font-size:12px; letter-spacing:0.5px;
  transform:translateY(120%); opacity:0; transition:all 0.35s ease;
  max-width:320px; box-shadow:0 12px 40px rgba(0,0,0,0.45);
}
.toast.on { transform:translateY(0); opacity:1; }
.toast.err { border-color:var(--red); }
@media(max-width:700px) {
  .poll-head { flex-direction:column; }
  .week-badge { text-align:left; width:100%; }
  .skeleton-grid { grid-template-columns:repeat(2,1fr); }
  .stats-strip { gap:8px; }
  .stat-pill { min-width:calc(50% - 4px); flex:1; }
}