/* ============================================================
   SOVE LONÈ — Design system
   ============================================================ */
:root{
  --red:#D21034;  --red-dark:#A50D28;  --red-soft:#FDF2F4;
  --blue:#00209F; --blue-dark:#001873;  --blue-soft:#F0F3FF;
  --gold:#D4AF37; --gold-light:#F0D97B; --gold-soft:#FDF9EC;

  --ink:#111827; --body:#374151; --muted:#6B7280; --line:#E5E7EB;
  --bg:#FFFFFF; --surface:#F9FAFB;

  --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow:0 1px 3px rgba(17,24,39,.07), 0 8px 28px rgba(17,24,39,.06);
  --shadow-lg:0 4px 12px rgba(17,24,39,.09), 0 24px 60px rgba(17,24,39,.12);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--body);
  background:var(--bg); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5.5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1.1em}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.narrow{max-width:640px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Tricolor rule ---------- */
.tricolor{height:5px;background:linear-gradient(90deg,var(--blue) 0 33.33%,var(--red) 33.33% 66.66%,var(--gold) 66.66% 100%);border:0;margin:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:inherit;font-weight:700;font-size:1.05rem;
  padding:.95em 2em;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  text-decoration:none;text-align:center;line-height:1.2;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 20px rgba(210,16,52,.32)}
.btn-primary:hover:not(:disabled){background:var(--red-dark);box-shadow:0 10px 30px rgba(210,16,52,.42)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 20px rgba(0,32,159,.3)}
.btn-blue:hover:not(:disabled){background:var(--blue-dark)}
.btn-ghost{background:#fff;color:var(--blue);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-soft)}
.btn-gold{background:var(--gold);color:#3A2E05;box-shadow:0 6px 20px rgba(212,175,55,.35)}
.btn-gold:hover{background:var(--gold-light)}
.btn-sm{padding:.6em 1.3em;font-size:.94rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 22px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:900;letter-spacing:-.03em;color:var(--ink);font-size:1.15rem;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:38px;height:38px;flex:none}
.brand span i{color:var(--red);font-style:normal}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a{color:var(--body);font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--red);text-decoration:none}
/* `.nav a` (0,2,0) outranks `.btn-primary` (0,1,0), so without these the
   nav CTA rendered dark-on-red. Restate the button colours at nav depth. */
.nav a.btn-primary,.nav a.btn-primary:hover{color:#fff}
.nav a.btn-blue,.nav a.btn-blue:hover{color:#fff}
/* Same specificity trap as the two above: `.nav a` would repaint the gold
   button's dark text to --body and kill the contrast that makes it legible. */
.nav a.btn-gold,.nav a.btn-gold:hover{color:#3A2E05}

/* The donate call. Gold rather than red so it reads as a separate action
   from "Enskri", which is still the site's primary job — a second red
   button beside the first one makes neither of them the obvious next step.
   The ring is what carries the "very visible" instruction without
   resorting to animation, which costs battery on the low-end Android
   phones most of this audience is using. */
.btn-don{position:relative;background:var(--gold);color:#3A2E05;
  box-shadow:0 0 0 4px var(--gold-soft),0 8px 26px rgba(212,175,55,.45)}
.btn-don:hover{background:var(--gold-light);color:#3A2E05}
.don-block{background:var(--gold-soft);border:2px solid var(--gold);
  border-radius:var(--r-lg);padding:1.4rem;text-align:center;margin:1.6rem 0}
.don-block h3{margin:0 0 .4rem;color:var(--ink);font-size:1.15rem}
.don-block p{margin:0 0 1rem;color:var(--body);font-size:.95rem}
.don-note{font-size:.82rem;color:var(--muted);margin-top:.7rem}
.nav a.btn-gold,.nav a.btn-gold:hover{color:#3A2E05}
.nav a.btn-ghost,.nav a.btn-ghost:hover{color:var(--blue)}

/* ---------- Mobile: hamburger ----------
   The first version hid every non-button link on small screens, which
   stranded the candidate / vote / ID pages with no route to them at all.
   Now they collapse into a proper menu instead. */
.nav-toggle{
  display:none;position:relative;width:44px;height:44px;flex:none;
  border:0;background:transparent;cursor:pointer;border-radius:10px;padding:0;
}
.nav-toggle:hover{background:var(--surface)}
/* Absolute bars, not grid rows: grid row sizing made the closed/open
   offsets depend on the button's height, so the X never met in the middle. */
.nav-toggle span{
  position:absolute;left:11px;width:22px;height:2.5px;
  background:var(--ink);border-radius:2px;
  transition:top .2s ease,transform .2s ease,opacity .15s ease;
}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:20.75px}
.nav-toggle span:nth-child(3){top:27.5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:20.75px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:20.75px;transform:rotate(-45deg)}

@media(max-width:800px){
  .nav-toggle{display:block}
  .site-head{position:sticky}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:.35rem 22px 1.1rem;box-shadow:var(--shadow-lg);
    display:none;
  }
  .nav.open{display:flex;animation:navDrop .18s ease}
  .nav a:not(.btn){
    padding:.95rem .15rem;border-bottom:1px solid var(--line);
    font-size:1.02rem;color:var(--ink);
  }
  .nav a:not(.btn):last-of-type{border-bottom:0}
  .nav .btn{width:100%;margin-top:1rem}
  .nav .lang-toggle{margin-top:1rem;align-self:flex-start}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nav.open{animation:none}.nav-toggle span{transition:none}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60rem 30rem at 50% -10%,var(--blue-soft),transparent 70%),
  radial-gradient(40rem 24rem at 85% 15%,var(--red-soft),transparent 70%);z-index:-1}
.hero .logo{max-width:min(560px,88%);margin:0 auto clamp(1.5rem,4vw,2.5rem)}
.hero .lede{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--body);max-width:44ch;margin:0 auto 2rem}
.hero .cta-row{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* ---------- Live counter ---------- */
.counter{
  display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
  padding:1.4rem 2.6rem;box-shadow:var(--shadow);margin:0 auto 2rem;position:relative;
}
.counter::after{content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:60%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--red),var(--gold))}
.counter .n{font-size:clamp(2.6rem,8vw,4.2rem);font-weight:900;letter-spacing:-.045em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.counter .n.loading{color:var(--line)}
.counter .lbl{font-size:.82rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.counter .sub{font-size:.9rem;color:var(--muted)}
.counter .sub b{color:var(--red)}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16A34A;margin-right:.4rem;vertical-align:middle;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(22,163,74,.5)}50%{opacity:.75;box-shadow:0 0 0 7px rgba(22,163,74,0)}}

/* ---------- Sections ---------- */
.section{padding:clamp(3rem,6vw,4.5rem) 0}
.section.alt{background:var(--surface);border-block:1px solid var(--line)}
.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem}

/* ---------- Cards ---------- */
.grid{display:grid;gap:1.15rem}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}
.card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem;background:var(--blue-soft)}
.card .ico.r{background:var(--red-soft)}
.card .ico.g{background:var(--gold-soft)}

/* step-numbered cards (vote guide) */
.step-card{position:relative;padding-left:4.6rem}
.step-card .num{position:absolute;left:1.6rem;top:1.7rem;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--red);color:#fff;font-weight:900;display:grid;place-items:center;font-size:1rem}

/* ---------- Department bars ---------- */
.dept-list{display:grid;gap:.6rem;margin-top:1.5rem}
.dept{display:grid;grid-template-columns:8.5rem 1fr auto;align-items:center;gap:.85rem;font-size:.94rem}
.dept .nm{font-weight:700;color:var(--ink)}
.dept .track{height:11px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.dept .fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--blue),var(--red));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.dept .ct{font-weight:800;font-variant-numeric:tabular-nums;color:var(--body);min-width:3.5rem;text-align:right}
@media(max-width:560px){.dept{grid-template-columns:6.6rem 1fr auto;font-size:.87rem;gap:.6rem}}

/* ---------- Leaderboard ---------- */
.board{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.board .row{display:grid;grid-template-columns:3.2rem 1fr auto;align-items:center;gap:1rem;padding:.95rem 1.3rem;border-bottom:1px solid var(--line)}
.board .row:last-child{border-bottom:0}
.board .row.head{background:var(--surface);font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.board .rk{font-weight:900;font-size:1.05rem;color:var(--muted);text-align:center}
.board .row:nth-child(2) .rk{color:var(--gold);font-size:1.3rem}
.board .row:nth-child(3) .rk{color:#94A3B8;font-size:1.2rem}
.board .row:nth-child(4) .rk{color:#B87333;font-size:1.15rem}
.board .nm{font-weight:700;color:var(--ink)}
.board .ct{font-weight:800;font-variant-numeric:tabular-nums}
.board .ct span{font-weight:600;color:var(--muted);font-size:.85rem}
.board .empty{padding:2.5rem 1.3rem;text-align:center;color:var(--muted)}

/* ============================================================
   FORM
   ============================================================ */
.form-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--surface)}
.progress{height:6px;background:var(--line);position:sticky;top:0;z-index:20}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--red));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.form-body{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 22px 3rem}
.step{
  width:100%;max-width:600px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(1.7rem,4vw,2.8rem);
  animation:stepIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.step{animation:none}.dept .fill,.progress .bar{transition:none}}
.step .q{font-size:clamp(1.25rem,3vw,1.6rem);font-weight:800;color:var(--ink);line-height:1.3;margin:0 0 .4rem;letter-spacing:-.02em}
.step .q .req{color:var(--red);margin-right:.15em}
.step .hint{color:var(--muted);font-size:.95rem;margin:0 0 1.5rem}
.step .q + .opts,.step .q + .fields{margin-top:1.5rem}

/* radio / checkbox options */
.opts{display:grid;gap:.6rem;margin-bottom:1.8rem}
.opt{
  display:flex;align-items:center;gap:.9rem;padding:.95rem 1.15rem;
  border:2px solid var(--line);border-radius:var(--r);cursor:pointer;
  transition:border-color .15s,background .15s;background:#fff;
  font-size:1.02rem;color:var(--ink);font-weight:500;
}
.opt:hover{border-color:#C7CDD6;background:var(--surface)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .dot{width:22px;height:22px;border:2px solid #C7CDD6;border-radius:50%;flex:none;display:grid;place-items:center;transition:border-color .15s}
.opt .dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .18s cubic-bezier(.2,1.4,.4,1)}
.opt:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.opt:has(input:checked) .dot{border-color:var(--red)}
.opt:has(input:checked) .dot::after{transform:scale(1)}
.opt:has(input:focus-visible){outline:3px solid rgba(0,32,159,.35);outline-offset:2px}

/* text inputs */
.fields{display:grid;gap:1.15rem;margin-bottom:1.8rem}
.field label{display:block;font-weight:700;color:var(--ink);font-size:.94rem;margin-bottom:.4rem}
.field input,.field select{
  width:100%;font:inherit;font-size:1.02rem;padding:.85rem 1rem;color:var(--ink);
  border:2px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .15s;
}
.field input:focus,.field select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,32,159,.12)}
.field input::placeholder{color:#9CA3AF}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.8rem}
.field .note{font-size:.85rem;color:var(--muted);margin-top:.4rem}

/* consent */
.consent-body{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--r);padding:1.3rem;font-size:.96rem;line-height:1.68;color:var(--body);
  max-height:16rem;overflow-y:auto;margin-bottom:1.3rem}
.consent-body strong{color:var(--ink)}
.check{display:flex;align-items:flex-start;gap:.85rem;cursor:pointer;font-weight:600;color:var(--ink);margin-bottom:1.8rem;font-size:1rem;line-height:1.45}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:24px;height:24px;border:2px solid #C7CDD6;border-radius:7px;flex:none;display:grid;place-items:center;margin-top:1px;transition:.15s}
.check .box svg{width:15px;height:15px;stroke:#fff;stroke-width:3.5;fill:none;opacity:0;transform:scale(.5);transition:.18s}
.check:has(input:checked) .box{background:var(--red);border-color:var(--red)}
.check:has(input:checked) .box svg{opacity:1;transform:scale(1)}
.check:has(input:focus-visible) .box{outline:3px solid rgba(0,32,159,.35);outline-offset:2px}

/* nav row */
.step-nav{display:flex;gap:.7rem;align-items:center}
.step-nav .btn-primary{flex:1}
.back{width:52px;height:52px;flex:none;border:2px solid var(--line);background:#fff;border-radius:var(--r);
  cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:.15s}
.back:hover{border-color:var(--blue);color:var(--blue)}
.back svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.5;fill:none}

.err{background:var(--red-soft);border:1px solid #F5C2CB;color:var(--red-dark);
  padding:.8rem 1rem;border-radius:var(--r);font-size:.94rem;font-weight:600;margin-bottom:1.1rem}
.err:empty{display:none}

/* spinner */
.spin{width:19px;height:19px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .65s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Referral / share box ---------- */
.ref-box{background:linear-gradient(135deg,var(--blue-soft),var(--red-soft));border:2px solid #fff;
  border-radius:var(--r-lg);padding:1.8rem;text-align:center;box-shadow:var(--shadow);margin:1.8rem 0}
.ref-code{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;font-size:clamp(1.5rem,5vw,2.1rem);
  font-weight:800;letter-spacing:.12em;color:var(--ink);background:#fff;border:2px dashed var(--blue);
  border-radius:var(--r);padding:.8rem 1.2rem;display:inline-block;margin:.5rem 0 1.1rem}
.ref-link{display:flex;gap:.5rem;max-width:460px;margin:0 auto 1.2rem}
.ref-link input{flex:1;min-width:0;font:inherit;font-size:.9rem;padding:.75rem .9rem;border:2px solid var(--line);
  border-radius:var(--r);background:#fff;color:var(--body)}
.share-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.share{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.4rem;border-radius:var(--r-pill);
  font-weight:700;font-size:.95rem;color:#fff;text-decoration:none;transition:transform .15s,filter .15s}
.share:hover{transform:translateY(-2px);filter:brightness(1.08);text-decoration:none;color:#fff}
.share svg{width:19px;height:19px;fill:currentColor}
.share.wa{background:#25D366}.share.fb{background:#1877F2}.share.x{background:#000}.share.sms{background:var(--muted)}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink);color:#9CA3AF;padding:3rem 0 2rem;font-size:.92rem;margin-top:auto}
.site-foot a{color:#D1D5DB}
.site-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}
.site-foot h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.site-foot .bottom{border-top:1px solid #374151;padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.86rem}
.socials{display:flex;gap:.75rem}
.socials a{width:38px;height:38px;border:1px solid #374151;border-radius:10px;display:grid;place-items:center;color:#D1D5DB;transition:.15s}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff}
.socials svg{width:18px;height:18px;fill:currentColor}

/* ---------- Language toggle ---------- */
.lang-pick{display:grid;gap:.7rem;max-width:400px;margin:2rem auto 0}
.lang-toggle{display:inline-flex;border:2px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:#fff}
.lang-toggle button{font:inherit;font-weight:700;font-size:.85rem;padding:.4rem 1rem;border:0;background:transparent;cursor:pointer;color:var(--muted)}
.lang-toggle button[aria-pressed="true"]{background:var(--blue);color:#fff}

/* ---------- Utility ---------- */
.hidden{display:none !important}
.stack-sm > * + *{margin-top:.6rem}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ============================================================
   CHATBOT — "Asistan SOVE LONÈ"
   ============================================================ */
.chat-fab{
  position:fixed;right:18px;bottom:18px;z-index:90;
  width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:var(--red);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 28px rgba(210,16,52,.42);transition:transform .18s ease,box-shadow .18s;
}
.chat-fab:hover{transform:scale(1.07)}
.chat-fab svg{width:27px;height:27px;fill:currentColor}
.chat-fab .badge{
  position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  background:var(--gold);color:#3A2E05;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:900;display:grid;place-items:center;border:2px solid #fff;
}
.chat-fab[aria-expanded="true"] .badge{display:none}

/* `hidden` alone loses to `display:flex` below — this makes it win. */
.chat-panel[hidden]{display:none}
.chat-panel{
  position:fixed;right:18px;bottom:88px;z-index:91;
  width:min(380px,calc(100vw - 36px));height:min(560px,calc(100vh - 130px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;animation:chatIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chat-panel{animation:none}}
@media(max-width:480px){
  .chat-panel{right:10px;left:10px;bottom:84px;width:auto;height:min(70vh,520px)}
  .chat-fab{right:14px;bottom:14px}
}

.chat-head{background:var(--blue);color:#fff;padding:.9rem 1.1rem;display:flex;align-items:center;gap:.7rem;flex:none}
.chat-head img{width:32px;height:32px;flex:none}
.chat-head .who{font-weight:800;font-size:.98rem;line-height:1.25}
.chat-head .who small{display:block;font-weight:500;font-size:.78rem;opacity:.85}
.chat-head .x{margin-left:auto;background:transparent;border:0;color:#fff;cursor:pointer;
  font-size:1.5rem;line-height:1;padding:.2rem .4rem;border-radius:8px;opacity:.85}
.chat-head .x:hover{opacity:1;background:rgba(255,255,255,.14)}
.chat-head .lang-mini{display:flex;gap:.2rem;margin-left:auto}
.chat-head .lang-mini button{background:rgba(255,255,255,.16);border:0;color:#fff;cursor:pointer;
  font:inherit;font-size:.72rem;font-weight:800;padding:.22rem .5rem;border-radius:6px}
.chat-head .lang-mini button[aria-pressed="true"]{background:#fff;color:var(--blue)}

.chat-log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--surface)}
.msg{max-width:85%;padding:.7rem .95rem;border-radius:16px;font-size:.95rem;line-height:1.55;white-space:pre-wrap}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;color:var(--body)}
.msg.me{background:var(--blue);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg a{color:var(--blue);font-weight:700}
.msg.bot strong{color:var(--ink)}
.typing{display:flex;gap:4px;padding:.85rem .95rem;align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:#C7CDD6;animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.chat-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .8rem;background:var(--surface)}
.chat-quick button{
  font:inherit;font-size:.86rem;font-weight:600;padding:.45rem .85rem;cursor:pointer;
  background:#fff;color:var(--blue);border:1.5px solid #C9D2F0;border-radius:var(--r-pill);
  transition:background .15s,border-color .15s;
}
.chat-quick button:hover{background:var(--blue-soft);border-color:var(--blue)}
.chat-quick button.cta{background:var(--red);color:#fff;border-color:var(--red)}
.chat-quick button.cta:hover{background:var(--red-dark)}

.chat-input{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);background:#fff;flex:none}
.chat-input input{flex:1;min-width:0;font:inherit;font-size:.95rem;padding:.65rem .9rem;
  border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface)}
.chat-input input:focus{outline:0;border-color:var(--blue);background:#fff}
.chat-input button{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--red);
  color:#fff;cursor:pointer;display:grid;place-items:center}
.chat-input button:hover{background:var(--red-dark)}
.chat-input button svg{width:19px;height:19px;fill:currentColor}

/* ============================================================
   CANDIDATE PAGE
   ============================================================ */
.cand-hero{position:relative;padding:clamp(2.5rem,6vw,4.5rem) 0;overflow:hidden}
.cand-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(50rem 28rem at 20% 0%,var(--blue-soft),transparent 70%),
  radial-gradient(40rem 26rem at 90% 40%,var(--red-soft),transparent 70%)}
.cand-hero-grid{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(1.8rem,5vw,3.5rem);align-items:center}
@media(max-width:860px){
  .cand-hero-grid{grid-template-columns:1fr;text-align:center}
  .cand-hero-grid .cta-row{justify-content:center !important}
}

.badge-wrap{position:relative;margin:0 auto;width:100%;max-width:400px}
.badge{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 42px rgba(17,24,39,.22))}
.badge .ring-top,.badge .ring-bot{
  font-family:Inter,system-ui,sans-serif;font-weight:900;
  letter-spacing:2.5px;font-size:44px;
}
.badge .ring-bot{font-size:52px;letter-spacing:3px}

.cand-intro h1{font-size:clamp(2.4rem,6.5vw,4rem);margin-bottom:.15em}
.cand-intro .slogan{font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:700;color:var(--red);margin:0 0 1rem;font-style:italic}
.cand-intro .lede{font-size:clamp(1rem,2vw,1.15rem);color:var(--body);max-width:46ch;margin-bottom:1.8rem}
@media(max-width:860px){.cand-intro .lede{margin-left:auto;margin-right:auto}}

/* Blocks awaiting official campaign copy */
.fill-me{position:relative;border:1.5px dashed #C7CDD6;border-radius:var(--r);background:repeating-linear-gradient(45deg,#FAFBFC,#FAFBFC 10px,#F4F6F8 10px,#F4F6F8 20px);padding:1.5rem;color:var(--muted)}
.fill-me::before{content:attr(data-fill) " — pou ranpli";position:absolute;top:-.7rem;left:1rem;background:var(--gold);color:#3A2E05;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .55rem;border-radius:var(--r-pill)}
.card.fill-me{border-style:dashed}
.fill-me p:last-child{margin-bottom:0}

/* admin composer textareas */
.field textarea{
  width:100%;font:inherit;font-size:1rem;line-height:1.6;padding:.85rem 1rem;color:var(--ink);
  border:2px solid var(--line);border-radius:var(--r);background:#fff;resize:vertical;min-height:7rem;
}
.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,32,159,.12)}

/* ---------- Two-part form: the screen between halves ---------- */
.mid-title{font-size:clamp(1.3rem,3.4vw,1.7rem);font-weight:900;color:var(--red);
  letter-spacing:-.02em;line-height:1.2;margin:0 0 .3rem}
.opt .opt-note{display:block;font-size:.86rem;font-weight:500;color:var(--muted);margin-top:.15rem;line-height:1.4}
.opt:has(input:checked) .opt-note{color:var(--red-dark)}
.opt.stacked{align-items:flex-start}
.opt.stacked .dot{margin-top:.15rem}

/* ---------- Goal counter (real objective, count not advertised) ---------- */
.counter.goal{padding:1.6rem 2.4rem 1.4rem}
.counter.goal .lbl{margin:0 0 .4rem;order:-1}
.counter.goal .n{font-size:clamp(2.8rem,9vw,4.6rem);color:var(--blue);letter-spacing:-.05em}
.counter.goal .goal-unit{font-size:.95rem;font-weight:600;color:var(--body);margin-top:.25rem}
.counter.goal .goal-lock{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.15rem;width:100%}
.counter.goal .lock-q{font-size:.9rem;color:var(--muted)}
.counter.goal .lock-a{font-weight:800;color:var(--red);font-size:1.02rem}

/* ---------- Simple landing: logo, title, one link ---------- */
.hero-simple{padding:clamp(2.5rem,8vw,5rem) 0 clamp(3rem,8vw,5.5rem);text-align:center}
.hero-simple .logo{max-width:min(560px,90%);margin:0 auto clamp(1.6rem,4vw,2.4rem)}
.join-title{
  font-size:clamp(1.6rem,5.2vw,2.6rem);line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 clamp(1.6rem,4vw,2.2rem);font-weight:900;
}
.join-title span{color:var(--red)}
.btn-join{font-size:clamp(1.05rem,2.4vw,1.2rem);padding:1.05em 2.6em}
.join-note{margin:1rem 0 0;font-size:.95rem;color:var(--muted)}

/* The home page is one screen with no scrolling, so its footer is just the
   social icons. Everything else that used to sit down here is reachable
   from the menu instead. */
/* ---------- Landing page: one screen, no scrolling ----------
   Scoped to .landing so no other page inherits the flex column. The
   hero takes the leftover height so the footer sits ON the bottom
   edge instead of floating in the middle with white space beneath it. */
body.landing{min-height:100dvh;display:flex;flex-direction:column}
body.landing .hero-simple{flex:1;display:grid;place-items:center;padding-block:1.5rem}
body.landing .site-foot-min{margin-top:0}

.site-foot-min{padding:1.15rem 0;border-top:0}
.site-foot-min .socials{display:flex;gap:.9rem;justify-content:center}
/* The shared .socials style is built for a dark multi-column footer and
   reads washed out on its own: grey glyphs in grey boxes. Brighten the
   icons and let each brand colour show on press. */
.site-foot-min .socials a{width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#fff}
.site-foot-min .socials svg{width:20px;height:20px}
.site-foot-min .socials a:hover,.site-foot-min .socials a:active{
  background:#fff;border-color:#fff;color:var(--ink)}

/* ---------- Tap hint ----------
   A finger that taps the join button. It is decorative and aria-hidden;
   the button is reachable and labelled without it. Motion is disabled
   for anyone who has asked for reduced motion. */
.tap-hint{display:block;font-size:1.9rem;line-height:1;margin-top:.35rem;
  pointer-events:none;transform-origin:50% 0;animation:tap 1.6s ease-in-out infinite}
@keyframes tap{
  0%,100%{transform:translateY(0) scale(1);opacity:.95}
  45%{transform:translateY(-13px) scale(1.06);opacity:1}
  60%{transform:translateY(0) scale(.94);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .tap-hint{animation:none}
}

/* Two short, mutually exclusive choices read better side by side than as
   two full-width stacked bars — it also keeps the one-screen form shorter. */
.opts-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.opts-row .opt{margin:0}