/* Ms Top Ukraine — сторінка голосування.
   Палітра й радіуси взяті з чинного продакшену, щоб сторінка не випадала
   зі стилю сайту: золото #BAA169, темний #292929, кремовий #f6f4ef,
   радіус 30px, Roboto + Georgia. Змінено не стиль, а спосіб подачі. */

:root{
  --gold:#BAA169; --gold-d:#8a7743; --gold-l:#d8c9a3;
  --dark:#292929; --dark-2:#1f1f1f; --ink:#111;
  --cream:#f6f4ef; --light:#fff; --muted:#8d8d8d;
  --line:rgba(186,161,105,.35); --line-soft:rgba(41,41,41,.12);
  --r:30px; --r-s:14px;
  /* Шрифтова пара як на bzubs.com: Sora тримає заголовки, Poppins — текст.
     --serif лишили ім'ям, щоб не переписувати сто місць: тепер це
     дисплейний гротеск, а не антиква. */
  --sans:'Poppins',system-ui,-apple-system,sans-serif;
  --disp:'Sora',system-ui,sans-serif;
  --serif:'Sora',system-ui,sans-serif;
  --pad:clamp(16px,4vw,48px);
  --hdr:clamp(58px,9vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);overflow-x:clip;
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:700;
  line-height:1.14;letter-spacing:-.015em}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── шапка ───────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:40;background:var(--dark);color:#fff;
  height:var(--hdr);display:flex;align-items:center;gap:14px;padding-inline:var(--pad)}
.hdr__logo{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.hdr__logo img{height:clamp(30px,5.6vw,40px);width:auto}
.hdr__logo span{font:600 clamp(14px,2.2vw,18px)/1 var(--serif);letter-spacing:.03em;
  white-space:nowrap}
.hdr__back{flex:none;border:1px solid var(--gold);color:var(--gold-l);background:none;
  border-radius:var(--r);padding:9px 18px;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;transition:background .25s,color .25s}
.hdr__back:hover{background:var(--gold);color:#fff}
@media(max-width:520px){.hdr__back{padding:8px 13px;font-size:11px}
  .hdr__logo span{display:none}}

/* ── герой ───────────────────────────────────────────────────
   Кадр і є повідомлення: жінка піднімається червоними сходами до світла.
   Домальовувати тут нічого не треба — раніше на цьому місці був силует
   на канві, і він програвав живому кадру в усьому.

   Відео приглушене й затемнене градієнтом: воно тло, а не атракціон,
   поверх нього має читатися текст. */
.hero{position:relative;background:var(--dark);color:#fff;overflow:clip;
  min-height:clamp(520px,88svh,900px);display:grid;align-items:end}
.hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;filter:saturate(1.06) contrast(1.04)}
/* Градієнт знизу — щоб типографіка лягала на темне, а не на сходи */
/* Кадр треба і показати, і зробити придатним для тексту. Рівна підкладка
   на весь герой з'їдала героїню, тому затемнюємо тільки низ: верхня
   половина лишається чистим кадром, текст лягає на темну основу. */
.hero__grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(24,20,18,.55) 0%,
      rgba(24,20,18,.10) 22%,
      rgba(24,20,18,.10) 40%,
      rgba(24,20,18,.72) 66%,
      rgba(41,41,41,.95) 88%,
      var(--dark) 100%)}
.hero__in{position:relative;z-index:2;text-align:center;
  padding-block:clamp(30px,6vw,64px) clamp(26px,5vw,52px)}
/* Кадр знято так, що героїня трохи вище центру — тримаємо її у видимій частині */
.hero__v{object-position:50% 34%}
.kick{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  margin-bottom:16px}
/* У герої напис лягає на кадр — беремо світліше золото й тінь,
   інакше він губиться на освітлених сходах */
.hero .kick{color:var(--gold-l);text-shadow:0 1px 10px rgba(0,0,0,.85)}
.hero h1{font-size:clamp(26px,5vw,46px);max-width:20ch;margin-inline:auto;
  text-shadow:0 2px 30px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.6)}
.hero__s{margin:18px auto 0;max-width:56ch;color:rgba(255,255,255,.92);
  font-family:var(--serif);font-size:clamp(15px,1.5vw,18px);
  text-shadow:0 1px 16px rgba(0,0,0,.8)}
.hero__s b{color:var(--gold-l);font-weight:400}

/* лічильник етапу */
.meter{margin:clamp(26px,4vw,38px) auto 0;max-width:520px}
.meter__t{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;
  color:rgba(255,255,255,.8);text-shadow:0 1px 8px rgba(0,0,0,.7);margin-bottom:9px}
.meter__b{height:5px;border-radius:5px;background:rgba(255,255,255,.2);overflow:hidden}
.meter__b i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l));
  transition:width 1.4s cubic-bezier(.16,1,.3,1)}


/* На вузькому екрані текст накривав кадр цілком: вертикальний формат
   не лишає місця, щоб і героїню показати, і абзаци прочитати. Тому
   на телефоні це не накладення, а два блоки — кадр, під ним текст.
   Нічого не ховаємо: на маленькому екрані просто інша композиція. */
@media (max-width:760px){
  .hero{min-height:0;display:block;background:var(--dark)}
  .hero__v{position:relative;height:min(52svh,420px);object-position:50% 30%}
  .hero__grade{height:min(52svh,420px);inset:0 0 auto;
    background:linear-gradient(180deg,rgba(24,20,18,.5) 0%,rgba(24,20,18,.05) 26%,
      rgba(24,20,18,.10) 52%,rgba(41,41,41,.9) 92%,var(--dark) 100%)}
  .hero__in{padding-block:clamp(22px,6vw,34px) clamp(26px,7vw,40px)}
  .hero h1,.hero__s,.hero .kick,.meter__t{text-shadow:none}
  .hero h1{max-width:none}
}

/* ── секції з коронами ──────────────────────────────────────── */
.sec{position:relative;padding-block:clamp(40px,6vw,78px)}
.sec--crowns{overflow:clip}
.crowns{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.85}
.sec>.wrap{position:relative;z-index:1}
.sec__h{margin-bottom:clamp(20px,3vw,34px)}
.sec__h h2{font-size:clamp(24px,3.4vw,38px)}
.sec__h .kick{margin-bottom:10px}

/* ── пʼєдестал ───────────────────────────────────────────────
   Перше місце має бути вище за решту — інакше пʼєдестал читається
   навпаки. Розмітка йде 2-1-3, тож перша картка стоїть посередині,
   а порядок у сітці задає --col. */
.podium__g{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.6vw,20px);align-items:end}
.pod{order:var(--col);border-radius:var(--r-s);overflow:hidden;
  text-align:center;position:relative;display:flex;flex-direction:column}
.pod__ph{overflow:hidden;background:var(--cream);flex:none}
.pod__ph img{width:100%;height:100%;object-fit:cover;display:block}
/* Висоти навмисно різні: 1 місце — найвище, 2 і 3 однакові */
.pod--1 .pod__ph{height:clamp(190px,24vw,300px)}
.pod--2 .pod__ph,.pod--3 .pod__ph{height:clamp(150px,19vw,232px)}
.pod--1{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 40px rgba(138,119,67,.22)}
.pod__r{position:absolute;left:10px;top:10px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font:700 13px/1 var(--disp);color:#fff;
  background:var(--gold-d);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.pod--1 .pod__r{background:linear-gradient(160deg,var(--gold),var(--gold-d));
  width:36px;height:36px;font-size:15px}
.pod__b{padding:12px 12px 15px}
.pod__n{font:600 clamp(13.5px,1.4vw,16px)/1.25 var(--sans)}
.pod__c{font-size:12.5px;color:var(--muted);margin-top:3px}
.pod__v{margin-top:8px;font:700 clamp(18px,2.2vw,24px)/1 var(--disp);color:var(--gold-d)}
.pod__v span{font:400 11px/1 var(--sans);color:var(--muted);letter-spacing:.1em;
  display:block;margin-top:4px}
@media(max-width:640px){
  .podium__g{grid-template-columns:1fr;gap:12px}
  .pod{order:0}
  .pod--1{order:-1}
  .pod--1 .pod__ph{height:clamp(200px,52vw,300px)}
  .pod--2 .pod__ph,.pod--3 .pod__ph{height:clamp(150px,38vw,220px)}
}

/* ── панель керування списком ────────────────────────────── */
.bar{position:sticky;top:var(--hdr);z-index:30;background:var(--cream);
  padding:14px 0 12px;border-bottom:1px solid var(--line-soft)}
.bar__in{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{flex:1 1 220px;min-width:0;position:relative}
.search input{width:100%;border:1px solid var(--line);background:var(--light);
  border-radius:var(--r);padding:12px 16px 12px 40px;font:400 15px var(--sans)}
.search input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;flex:none}
.seg button{background:var(--light);border:0;padding:12px 18px;font-size:13.5px;color:var(--gold-d)}
.seg button[aria-pressed=true]{background:var(--gold);color:#fff}
@media(max-width:560px){.seg button{padding:11px 13px;font-size:12.5px}}

/* ── сітка карток ────────────────────────────────────────────
   Фото займає всю картку зверху, на ховері наближається. Голову не ріжемо:
   якір object-position живе в JS, бо залежить від кадру. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(12px,1.6vw,20px)}
.card{border-radius:var(--r-s);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.card:hover{transform:translateY(-4px)}
.card__ph{position:relative;aspect-ratio:3/4;background:var(--cream);overflow:hidden}
.card__ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.card:hover .card__ph img{transform:scale(1.07)}
.card__no{position:absolute;left:10px;top:10px;background:rgba(41,41,41,.82);color:#fff;
  border-radius:var(--r);padding:5px 11px;font:600 12px/1 var(--sans);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card__b{padding:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.card__n{font:600 16px/1.25 var(--sans)}
.card__c{font-size:13px;color:var(--muted)}

/* прогрес до порогу — відповідає на питання «скільки лишилось» */
.prog{height:4px;border-radius:4px;background:rgba(41,41,41,.10);margin-top:10px;overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold));
  transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.reveal.in .prog i,.card .prog i{width:var(--w)}
.prog--done i{background:linear-gradient(90deg,#2e7d4f,#4fae76)}
.prog__t{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.prog--done+.prog__t{color:var(--ok,#2e7d4f);font-weight:500}

.card__f{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:10px}
.card__v{font:700 20px/1 var(--disp);color:var(--gold-d)}
.card__v span{font:400 11px/1 var(--sans);color:var(--muted);margin-left:5px}
.card .btn{margin-left:auto;padding:10px 18px}
.empty{grid-column:1/-1;padding:36px;text-align:center;color:var(--muted)}

/* «тут можеш бути ти» — була пласкою і на ховері біліла до нечитабельності */
.card--you{
  background:linear-gradient(155deg,#332b26,#1c1917) !important;
  color:#fff;border:1px solid rgba(186,161,105,.5) !important;
  align-items:center;justify-content:center;text-align:center;
  padding:30px 20px;min-height:300px;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 36px rgba(0,0,0,.28) !important}
.card--you:hover{
  background:linear-gradient(155deg,#3d332c,#221e1b) !important;
  border-color:var(--gold) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 20px 46px rgba(0,0,0,.36) !important}
.card--you h3{font:700 19px/1.3 var(--disp);margin-bottom:10px;color:#fff}
.card--you p{font-size:13.5px;color:rgba(255,255,255,.72);margin:0 0 20px}

/* ── кнопка заявки ───────────────────────────────────────────
   Золота губилась на світлому тлі — заклик до дії має бути червоним,
   як і всі кнопки оплати. Зʼявляється щойно герой поїхав угору. */
.btn--cta{
  background:linear-gradient(160deg,#d21a36,var(--red-d,#8a1122));
  color:#fff;border:1px solid rgba(255,255,255,.28);
  padding:15px 30px;font-size:14px;font-weight:600;letter-spacing:.04em;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 26px rgba(184,17,43,.38);
  transition:transform .25s,box-shadow .25s,filter .25s}
.btn--cta:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 16px 36px rgba(184,17,43,.5)}

.fab{position:fixed;right:calc(var(--pad) / 1.4);bottom:22px;z-index:45;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(160deg,#d21a36,#8a1122);color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r);
  padding:16px 26px;font:600 14px/1 var(--sans);letter-spacing:.03em;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 12px 30px rgba(184,17,43,.45);
  transform:translateY(160%);transition:transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .3s,filter .25s}
.fab.show{transform:none}
.fab:hover{filter:brightness(1.08);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 18px 40px rgba(184,17,43,.55)}
.fab svg{width:18px;height:18px;fill:currentColor;flex:none}
/* Пульс рідкий: кнопку видно, але вона не блимає безперервно */
.fab.show::after{content:"";position:absolute;inset:-2px;border-radius:var(--r);
  border:2px solid rgba(210,26,54,.7);animation:pulse 4.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.8}
  26%,100%{transform:scale(1.2);opacity:0}}
@media(max-width:520px){.fab{left:var(--pad);right:var(--pad);justify-content:center}}

/* ── модалка голосування ─────────────────────────────────── */
dialog{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh}
dialog::backdrop{background:rgba(17,17,17,.62);backdrop-filter:blur(3px)}
.sheet{background:var(--light);border-radius:var(--r-s);width:min(520px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);overflow:auto;position:relative}
.sheet__h{padding:22px 22px 0;display:flex;gap:14px;align-items:flex-start}
.sheet__h img{width:66px;height:88px;object-fit:cover;border-radius:10px;background:var(--cream);flex:none}
.sheet__t{flex:1;min-width:0}
.sheet__t h3{font:600 18px/1.25 var(--sans)}
.sheet__t p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.sheet__x{position:absolute;right:12px;top:12px;background:none;border:0;font-size:26px;
  line-height:1;color:var(--muted);padding:6px}
.sheet__b{padding:20px 22px 22px}
.qty{display:flex;align-items:center;gap:12px;margin:16px 0}
.qty button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--light);font-size:22px;color:var(--gold-d)}
.qty input{flex:1;min-width:0;text-align:center;border:1px solid var(--line);border-radius:var(--r);
  padding:12px;font:600 20px var(--serif);color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:var(--light);border-radius:var(--r);
  padding:9px 15px;font-size:13.5px;color:var(--gold-d)}
.chips button[aria-pressed=true]{background:var(--gold);color:#fff;border-color:var(--gold)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 4px;
  padding-top:16px;border-top:1px solid var(--line-soft)}
.total b{font:600 26px/1 var(--serif);color:var(--ink)}
.agree{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:13px;color:#555}
.agree input{margin-top:3px;accent-color:var(--gold);width:17px;height:17px;flex:none}
.agree a{color:var(--gold-d);text-decoration:underline}
.sheet .btn{width:100%;padding:16px;font-size:15px}

/* ── анкета ──────────────────────────────────────────────── */
.form{display:grid;gap:16px}
.f{display:grid;gap:6px}
.f label{font-size:13px;font-weight:500}
.f .hint{font-size:12.5px;color:var(--muted)}
.f input,.f textarea{border:1px solid var(--line);border-radius:var(--r-s);
  padding:13px 15px;font:400 15px var(--sans);background:var(--light);width:100%}
.f textarea{min-height:110px;resize:vertical;font-family:var(--serif)}
.f input:focus,.f textarea:focus{outline:2px solid var(--gold);outline-offset:-1px}
.f input[aria-invalid=true],.f textarea[aria-invalid=true]{border-color:#c0392b}
.f .err{font-size:12.5px;color:#c0392b}
.f__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.f__row{grid-template-columns:1fr}}
.count{font-size:12px;color:var(--muted);text-align:right}
.drop{border:1px dashed var(--gold);border-radius:var(--r-s);padding:20px;text-align:center;
  background:var(--cream);transition:background .25s}
.drop.over{background:#efe9dc}
.drop p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.drop img{margin:12px auto 0;max-height:190px;border-radius:10px}
.steps{display:flex;gap:6px;margin-bottom:22px}
.steps i{flex:1;height:3px;border-radius:3px;background:var(--line-soft)}
.steps i.on{background:var(--gold)}


/* ── рідке скло ──────────────────────────────────────────────
   Ефект тримається на трьох речах разом, поодинці кожна виглядає дешево:
   розмиття тла, дуже слабка заливка і світлий кант зверху — саме кант
   робить враження товщі, а не прозорості.

   backdrop-filter коштує кадрів, тому вмикаємо його там, де під склом
   справді щось є, і повністю прибираємо на слабких пристроях. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass,
  .sheet,
  .bar{
    background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset,
               0 10px 30px rgba(41,41,41,.08);
  }
  /* На темному тлі скло має бути темним, інакше воно світиться плямою */
  .card--you{
    background:linear-gradient(160deg,rgba(41,41,41,.62),rgba(31,31,31,.42));
    border-color:rgba(186,161,105,.55);
    box-shadow:0 1px 0 rgba(255,255,255,.14) inset,
               0 12px 34px rgba(0,0,0,.28);
  }
  .hdr{
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3);
    background:linear-gradient(180deg,rgba(41,41,41,.88),rgba(41,41,41,.72));
  }
  .seg,.chips button,.search input{
    background:rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
}
/* Пристрої, які не тягнуть розмиття: лишається чиста непрозора картка */
@media (max-width:480px), (prefers-reduced-transparency: reduce) {
  .sheet,.bar{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--light)}
  .card--you{background:linear-gradient(160deg,var(--dark),var(--dark-2))}
}


/* ── ціна ────────────────────────────────────────────────────
   Стара ціна закреслена поруч із новою: так знижка читається за секунду,
   без речення на два рядки. */
.price{display:flex;align-items:baseline;justify-content:center;gap:10px;
  flex-wrap:wrap;margin-top:clamp(20px,3vw,30px)}
.price__l{font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.price__now{font:700 clamp(24px,3.4vw,34px)/1 var(--disp);color:#ff5c72;
  text-shadow:0 2px 18px rgba(210,26,54,.5)}
.price__was{font-size:clamp(15px,1.7vw,19px);color:rgba(255,255,255,.5);
  text-decoration:line-through;text-decoration-thickness:2px}
.price__tag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:linear-gradient(160deg,#d21a36,#8a1122);
  border-radius:var(--r);padding:6px 13px}
.price--form{justify-content:flex-start;margin:14px 0 4px}
.price--form .price__l{color:var(--muted)}
.price--form .price__now{font-size:26px;text-shadow:none}
.price--form .price__was{color:var(--muted)}

/* ── вʼїзд блоків ────────────────────────────────────────────
   Як на bzubs.com: сусідні картки заходять з різних боків із легким
   поворотом — сітка збирається, а не просто проявляється.
   `.in` не має !important: початковий стан навмисно слабший за
   селектором, щоб «увімкнено» завжди перебивало. */
.reveal{opacity:0;transform:translateY(38px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1)}
.grid>.reveal:nth-child(odd),.podium__g>.reveal:nth-child(odd){
  transform:translate3d(-90px,26px,0) rotate(-1.4deg)}
.grid>.reveal:nth-child(even),.podium__g>.reveal:nth-child(even){
  transform:translate3d(90px,26px,0) rotate(1.4deg)}
.podium__g>.reveal.pod--1{transform:translate3d(0,54px,0) scale(.94)}
.sec__h.reveal{transform:translate3d(0,18px,0)}
.grid>.reveal.in,.podium__g>.reveal.in,.sec__h.reveal.in,.reveal.in{
  opacity:1;transform:none}
/* Затримка по черзі — сітка збирається хвилею, а не разом */
.grid>.reveal:nth-child(1){transition-delay:.02s}
.grid>.reveal:nth-child(2){transition-delay:.07s}
.grid>.reveal:nth-child(3){transition-delay:.12s}
.grid>.reveal:nth-child(4){transition-delay:.17s}
@media(max-width:760px){
  .grid>.reveal:nth-child(odd),.podium__g>.reveal:nth-child(odd){
    transform:translate3d(-40px,22px,0)}
  .grid>.reveal:nth-child(even),.podium__g>.reveal:nth-child(even){
    transform:translate3d(40px,22px,0)}
}

/* ── спалах приходу до мети ─────────────────────────────────
   Останні секунди підйому світло розгоряється, на верхній сходинці —
   спалах, і кадр тримається сім секунд. Петля різала саме цей момент. */
.hero__flash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:
    radial-gradient(58% 42% at 50% 34%,rgba(255,246,225,.92),rgba(255,214,150,.34) 42%,transparent 72%),
    linear-gradient(0deg,rgba(255,236,196,.10),rgba(255,236,196,.10))}


/* ── останній блок із заявкою ───────────────────────────────── */
.applyend{background:linear-gradient(160deg,var(--dark),var(--dark-2));
  color:#fff;overflow:clip}
.applyend__in{text-align:center;max-width:640px;margin-inline:auto}
.applyend h2{font-size:clamp(24px,3.6vw,40px);margin-bottom:14px}
.applyend p{color:rgba(255,255,255,.74);margin:0 0 26px}

/* обовʼязкове поле — зірочка, щоб не гадати */
.f--req>label::after{content:" *";color:var(--bad,#c0392b)}


/* ── акційне вікно ───────────────────────────────────────────
   Спливає по центру, коли людина доскролила до трійки лідерів.
   Скрол не блокуємо: це підказка, а не перепона. Смужка внизу
   показує, скільки лишилось до автозакриття — інакше зникнення
   виглядає як збій. */
.promo{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  padding:20px;background:rgba(17,17,17,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .38s ease}
.promo.in{opacity:1}
.promo__b{position:relative;width:min(430px,100%);text-align:center;
  padding:34px 30px 0;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#332b26,#1b1817);color:#fff;
  border:1px solid rgba(186,161,105,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 26px 60px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.97);
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.promo.in .promo__b{transform:none}
.promo__x{position:absolute;right:10px;top:8px;background:none;border:0;
  font-size:28px;line-height:1;color:rgba(255,255,255,.55);padding:6px 10px;
  transition:color .2s}
.promo__x:hover{color:#fff}
.promo__k{font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:12px}
.promo__b h3{font:700 clamp(19px,2.4vw,25px)/1.25 var(--disp)}
.promo__p{margin:14px 0 22px;font-size:14px;color:rgba(255,255,255,.76)}
.price--promo{margin:16px 0 0;justify-content:center}
.price--promo .price__now{font-size:34px}
.promo__b .btn--cta{width:100%;margin-bottom:26px}
/* смужка відліку — видно, що вікно поїде саме */
.promo__bar{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.12)}
.promo__bar i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l))}
@media(max-width:520px){.promo__b{padding:30px 22px 0}}


/* ── обʼєм ────────────────────────────────────────────────────
   Картки губилися на світлому тлі: біле на майже білому не читається
   як предмет. Дає обʼєм не одна тінь, а три речі разом — тепла підкладка,
   світлий кант зверху і подвійна тінь: коротка щільна плюс довга мʼяка. */
.card, .pod{
  background:linear-gradient(168deg,#fff,#f7f2e9) !important;
  border:1px solid rgba(186,161,105,.34) !important;
  border-radius:18px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(41,41,41,.06),
    0 18px 38px rgba(138,119,67,.18) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.card:hover, .pod:hover{
  border-color:rgba(186,161,105,.6) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 3px 6px rgba(41,41,41,.08),
    0 28px 56px rgba(138,119,67,.3) !important;
}
.pod--1{
  border-color:var(--gold) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 3px 8px rgba(41,41,41,.08),
    0 26px 54px rgba(186,161,105,.38) !important;
}
/* Фон секцій трохи тепліший за картку — інакше межі не видно */
.sec--crowns{background:linear-gradient(180deg,#efe9df,#f6f2ea)}

/* ── фото на всю картку ──────────────────────────────────────
   Раніше знімок займав частину плитки й лишав порожні поля.
   Тепер він заповнює верх цілком, а низ картки — тільки підпис. */
.card__ph{aspect-ratio:4/5}
.card__ph img,.pod__ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ── пʼєдестал не ріже учасниць ──────────────────────────────
   Секція була заниска: у другої й третьої обрізало ноги. Плитки
   вищі, а фото прив'язане до верху — обличчя завжди в кадрі. */
.pod--1 .pod__ph{height:clamp(250px,30vw,380px)}
.pod--2 .pod__ph,.pod--3 .pod__ph{height:clamp(210px,25vw,320px)}
#top3{padding-block:clamp(48px,6vw,86px) clamp(56px,7vw,96px)}

/* ── корони помітніші ────────────────────────────────────────
   Були майже прозорі й не читалися як анімація. */
.crowns{opacity:1;mix-blend-mode:multiply}
.applyend .crowns{mix-blend-mode:screen;opacity:.5}

/* ── кнопки: не квадратні і з обʼємом ────────────────────────
   Прямий кут читається як службовий елемент, а не як заклик. */
.btn{border-radius:999px;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 16px rgba(41,41,41,.10);
  transition:transform .25s,box-shadow .3s,filter .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn--g{background:linear-gradient(160deg,var(--gold),var(--gold-d));color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 24px rgba(138,119,67,.36)}
.btn--g:hover{filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 16px 34px rgba(138,119,67,.46)}
.btn--o{background:rgba(255,255,255,.7);border-color:rgba(186,161,105,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--cta{border-radius:999px}
.fab{border-radius:999px}
.fab.show::after{border-radius:999px}
.seg{border-radius:999px}
.search input{border-radius:999px}
.chips button{border-radius:999px}
.card__no{border-radius:999px}

/* Кнопка в картці «тут можеш бути ти» — у загальній стилістиці,
   червоне лишаємо для головного заклику внизу і в спливному вікні */
.card--you .btn{background:linear-gradient(160deg,var(--gold),var(--gold-d));
  color:#fff;border:1px solid rgba(255,255,255,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 12px 28px rgba(138,119,67,.45)}
.card--you .btn:hover{filter:brightness(1.08)}

/* ── спливне вікно: більше заклику ───────────────────────────── */
.promo__b{border-width:2px;border-color:rgba(210,26,54,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,
             0 0 0 6px rgba(210,26,54,.12),
             0 30px 70px rgba(0,0,0,.5)}
.promo__b::before{content:"";position:absolute;inset:-2px;border-radius:18px;
  border:2px solid rgba(210,26,54,.9);pointer-events:none;
  animation:promoRing 2.4s ease-out infinite}
@keyframes promoRing{0%{opacity:.9;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.035)}}


/* ── картка «тут можеш бути ти» ──────────────────────────────
   Була темною плитою, яка вибивалася з ряду, а після правки фону ще й
   стала білим текстом на світлому. На Тільді ця картка світла, з
   пунктирною рамкою і плюсом — читається як вільне місце, куди можна
   стати, а не як рекламний банер. Так і робимо. */
.card--you{
  background:linear-gradient(168deg,#fdfaf4,#f4ede0) !important;
  border:2px dashed rgba(186,161,105,.75) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 14px 34px rgba(138,119,67,.14) !important;
  color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px 22px;min-height:300px;gap:0}
.card--you:hover{
  border-color:var(--gold) !important;
  background:linear-gradient(168deg,#fffdf8,#f7f1e6) !important;
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,
             0 22px 46px rgba(138,119,67,.24) !important}
.you__plus{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid rgba(186,161,105,.7);margin-bottom:20px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s}
.you__plus span{font:300 30px/1 var(--sans);color:var(--gold-d);margin-top:-3px}
.card--you:hover .you__plus{transform:scale(1.08);border-color:var(--gold)}
.card--you h3{font:700 19px/1.3 var(--disp);color:var(--ink);margin-bottom:10px}
.card--you p{font-size:13.5px;color:var(--muted);margin:0 0 22px;max-width:26ch}
.card--you .btn{width:100%;max-width:230px}

/* ── довантаження списку ─────────────────────────────────────
   Маячок під сіткою: коли він показався — тягнемо наступну сторінку.
   Три крапки крутяться тільки під час запиту, решту часу блок порожній
   і нічого не блимає. */
.tail{height:40px;display:grid;place-items:center;margin-top:20px}
.tail i{display:none;width:7px;height:7px;border-radius:50%;background:var(--gold);
  margin:0 3px;animation:tailDot 1s infinite ease-in-out}
.tail.on i{display:inline-block}
.tail i:nth-child(2){animation-delay:.15s}
.tail i:nth-child(3){animation-delay:.3s}
@keyframes tailDot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.count{text-align:center;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:18px}

/* ── тости ───────────────────────────────────────────────── */
/* Кольори літералами навмисно: тост рендериться поза коренем сторінки,
   і CSS-змінні там не наслідуються — на продакшені це вже давало
   білий текст на білому тлі. */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,150%);z-index:60;
  background:#292929;color:#fff;border:1px solid rgba(186,161,105,.5);
  border-radius:30px;padding:14px 24px;font:400 14px/1.4 Arial,sans-serif;
  max-width:calc(100vw - 32px);text-align:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.toast.show{transform:translate(-50%,0)}
.toast.err{border-color:#c0392b}

.skel{background:linear-gradient(90deg,#eee,#f6f4ef,#eee);background-size:200% 100%;
  animation:sk 1.2s linear infinite;border-radius:var(--r-s)}
@keyframes sk{to{background-position:-200% 0}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #crowns{display:none}
}

/* ── пʼєдестал: своя підкладка кожному місцю ─────────────────
   Три однакові картки не читаються як пʼєдестал — місце доводиться
   вишукувати по цифрі в кутку. Тепер місце видно за кольором:
   золото, срібло, бронза. Це не декор, а те, як людина розуміє
   таблицю за півсекунди.

   Кадр більше не ріжеться. Раніше висота була фіксована, а
   object-fit:cover відрізав усе, що не влізло, — на знімку в повний
   зріст це поділ сукні або ноги. Тепер рамка тримає пропорцію, а
   знімок вписується цілком; порожнє поле по боках закриває та сама
   підкладка місця, тож воно читається як оправа, а не як помилка. */
.pod{background:var(--cream);border:1px solid rgba(186,161,105,.28)}
.pod__ph{position:relative;height:auto !important;aspect-ratio:3/4;
  display:grid;place-items:center;padding:10px 10px 0}
/* Розміри віддані самому знімку: width/height:100% разом із padding
   виносили кадр за межі рамки, і низ підрізав overflow картки. */
.pod__ph img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain !important;
  object-position:50% 50% !important;filter:drop-shadow(0 10px 24px rgba(138,119,67,.18))}

/* Підкладка за кадром — окремим шаром, щоб градієнт місця не ліз на фото */
.pod__ph::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--pod-bg);border-radius:inherit}
.pod{--pod-bg:linear-gradient(165deg,#faf7f1,#f1ece2)}
.pod--1{--pod-bg:linear-gradient(165deg,#fdf6e4,#f4e6c2 60%,#e8d3a1);
  --pod-line:#c9a227;--pod-dot:linear-gradient(160deg,#e6c65c,#b8912c)}
.pod--2{--pod-bg:linear-gradient(165deg,#fbfbfc,#eceef1 60%,#dcdfe4);
  --pod-line:#a9adb4;--pod-dot:linear-gradient(160deg,#cfd3d8,#8f959d)}
.pod--3{--pod-bg:linear-gradient(165deg,#fdf1e6,#f3ddc7 60%,#e5c39f);
  --pod-line:#b5743a;--pod-dot:linear-gradient(160deg,#d99a5c,#a4632c)}
.pod{border-color:color-mix(in srgb,var(--pod-line) 55%,transparent) !important}
.pod--1{border-color:var(--pod-line) !important;border-width:2px}

/* Плита під фото темна, як на Тільді: світлий низ зливався з фоном
   секції, і картка втрачала край. */
.pod__b{background:var(--dark);color:#fff;padding:14px 12px 16px;
  margin-top:10px;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:2px}
.pod__no{font:600 11px/1 var(--sans);letter-spacing:.18em;color:var(--gold);
  text-transform:uppercase;margin-bottom:6px}
.pod__n{color:#fff}
.pod__c{color:rgba(255,255,255,.62)}
.pod__v{color:#fff;margin-top:6px}
.pod__v span{color:rgba(255,255,255,.6)}
.pod__btn{margin-top:12px;width:100%;max-width:230px}

/* Кружок місця — того ж металу, що й підкладка */
.pod__r{background:var(--pod-dot) !important;
  box-shadow:0 3px 12px rgba(41,41,41,.32),0 0 0 3px rgba(255,255,255,.75)}
.pod--1 .pod__r{width:38px;height:38px;font-size:16px}

/* Висоту тепер тримає пропорція кадру, а різницю місць — масштаб:
   перше вище й трохи більше, друге й третє однакові. */
.pod--1 .pod__ph{height:auto !important}
.pod--2 .pod__ph,.pod--3 .pod__ph{height:auto !important}
.pod--1{transform-origin:bottom center}
@media(min-width:641px){ .pod--1{margin-bottom:0} .pod--2,.pod--3{margin-bottom:26px} }

/* ── пʼєдестал: розмір і читабельність місця ─────────────────
   Три картки на всю ширину екрана виглядали як плакати, а не як
   таблиця лідерів: щоб побачити всіх трьох, доводилось відʼїжджати.
   Ширина обмежена, перше місце більше за решту — різницю видно без
   підписів. */
.podium__g{max-width:940px;margin-inline:auto;align-items:end}
/* На вузькому екрані ширина картки не може перевищувати колонку:
   340px перша картка вилазила за край на двадцять із гаком пікселів. */
@media(max-width:640px){ .pod,.pod--1{max-width:min(340px,100%)} }
.pod{max-width:290px;margin-inline:auto;width:100%}
.pod--1{max-width:330px}
@media(min-width:641px){ .pod--2,.pod--3{margin-bottom:34px} }

/* Метал мусить читатися навіть тоді, коли знімок закриває підкладку
   цілком. Тому місце позначене не лише фоном: кант картки, смуга над
   темною плитою і колір числа голосів — одного металу. */
.pod{box-shadow:0 0 0 1px color-mix(in srgb,var(--pod-line) 45%,transparent),
  0 18px 40px rgba(41,41,41,.14) !important}
.pod--1{box-shadow:0 0 0 2px var(--pod-line),
  0 26px 60px color-mix(in srgb,var(--pod-line) 34%,transparent) !important}
.pod__b{position:relative}
.pod__b::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--pod-dot)}
.pod__v{color:color-mix(in srgb,var(--pod-line) 68%,#fff) !important}
.pod__no{color:color-mix(in srgb,var(--pod-line) 70%,#fff)}

/* Підкладка лягає під сам знімок, а не за картку: раніше її закривав
   власний фон .pod і градієнт місця не було видно взагалі. */
.pod__ph{background:var(--pod-bg)}
.pod__ph::before{display:none}

/* Перше місце має стояти вище, а не нижче. Відступ знизу у другої й
   третьої опускав центральну картку — виходив пʼєдестал навпаки.
   Тепер низ у всіх трьох спільний, а перша картка просто більша: її
   верх виявляється вищим сам собою, без жодних зсувів. */
/* Тільки від планшета: на вузькому екрані пʼєдестал стає стовпчиком,
   і три колонки тут усе б зламали — це правило стоїть у файлі нижче
   за мобільну медіа-умову й інакше перебило б її. */
@media(min-width:641px){ .podium__g{grid-template-columns:1fr 1.16fr 1fr} }
@media(min-width:641px){ .pod--2,.pod--3{margin-bottom:0} }
.pod--1{max-width:340px}

/* ── темна плита: за розміром підпису, а не за залишком висоти ───
   flex:1 розтягував її на все, що лишилось під знімком, — виходила
   підставка більша за саму кандидатку. Тепер висоту задає вміст. */
.pod__b{flex:none;margin-top:0;padding:12px 12px 14px;gap:0}
.pod__no{font-size:10px;letter-spacing:.16em;margin-bottom:4px}
.pod__n{font:600 clamp(13px,1.3vw,15px)/1.25 var(--sans)}
.pod__c{font-size:11.5px;margin-top:2px}
.pod__v{margin-top:6px;font-size:clamp(16px,1.8vw,20px)}
.pod__v span{margin-top:2px;font-size:10px}
.pod__btn{margin-top:10px;padding-block:9px;font-size:12.5px}

/* Перша картка вища за решту рівно настільки, щоб це читалось як
   пʼєдестал і не більше. */
.pod__ph{padding:8px 8px 0}
.pod--2 .pod__ph,.pod--3 .pod__ph{aspect-ratio:5/7}
.pod--1 .pod__ph{aspect-ratio:3/4}

/* Плиту роздували не власні відступи, а типові поля абзацу: браузер
   додає 1em зверху і знизу кожному <p>, і на пʼяти рядках це сімдесят
   зайвих пікселів. Обнуляємо й задаємо проміжки самі. */
.pod__b>*{margin:0}
.pod__no{margin-bottom:5px}
.pod__c{margin-top:3px}
.pod__v{margin-top:8px}
.pod__btn{margin-top:12px}

/* ── засвітка героя ──────────────────────────────────────────
   Силу світла задає --flash на самій секції. Заголовок мусить лишатися
   читабельним на повній засвітці, тому разом зі світлом під текстом
   наростає тепла тінь: біле по білому зникло б, а так текст тримається
   на власній підкладці й у піку читається навіть краще. */
.hero{--flash:0}
.hero__flash{opacity:var(--flash) !important}
.hero__in::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;
  pointer-events:none;border-radius:40px;
  background:radial-gradient(70% 60% at 50% 50%,rgba(58,44,20,.72),rgba(58,44,20,.34) 55%,transparent 78%);
  opacity:calc(var(--flash) * .95)}
.hero .kick{text-shadow:0 1px 10px rgba(0,0,0,.85),
  0 0 calc(var(--flash) * 26px) rgba(43,32,12,calc(var(--flash) * .9))}
.hero h1,.hero__s{text-shadow:0 2px 18px rgba(0,0,0,calc(.35 + var(--flash) * .5))}