/* ============================================================
   Віра у добро — дизайн-скелет. Палітра 60/30/10 з логотипу.
   Класи префіксовані vd- (уникаємо колізій у репо).
   ============================================================ */
:root{
  /* 60% — тепле світло */
  --paper:#FCFAF5;
  --cream:#FBF6EE;
  --ink:#241D17;
  --muted:#6B6256;
  /* 30% — бірюза довіри */
  --teal:#0F5E73;
  --teal-700:#0B4A5B;
  --teal-050:#E9F1F2;
  /* 10% — тепла дія */
  --red:#E23A2E;
  --red-deep:#C21F18;
  --grad-red:linear-gradient(135deg,#E8443A 0%,#C21F18 100%);
  /* іскра */
  --yellow:#FCDC00;
  /* нейтралі */
  --card:#FFFFFF;
  --line:#E7DECF;
  --line-soft:#F0E9DC;

  --maxw:1140px;
  --gut:clamp(20px,5vw,40px);
  --r:16px;
  --r-sm:11px;
  --shadow:0 1px 2px rgba(36,29,23,.04),0 8px 28px rgba(36,29,23,.06);
  --shadow-lift:0 8px 18px rgba(36,29,23,.08),0 22px 50px rgba(36,29,23,.12);
  --sans:'Onest','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}

.vd-container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ── типографіка ── */
.vd-eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:14px;
}
.vd-eyebrow--on-dark{color:#9FD7E2}
.vd-h1{
  font-size:clamp(36px,6vw,58px);line-height:1.04;font-weight:800;
  letter-spacing:-.02em;margin-bottom:18px;
}
.vd-h1__accent{color:var(--teal)}
.vd-h2{
  font-size:clamp(27px,3.6vw,38px);line-height:1.12;font-weight:800;
  letter-spacing:-.015em;margin-bottom:16px;max-width:18ch;
}
.vd-h2--on-dark{color:#fff}
.vd-lead{font-size:clamp(17px,2vw,19px);color:var(--muted);max-width:46ch}
.vd-section__lead{font-size:clamp(16px,1.8vw,18px);color:var(--muted);max-width:60ch;margin-bottom:34px}
.vd-section__lead--on-dark{color:#D7E7EB}

/* ── кнопки ── */
.vd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;
  border:0;border-radius:999px;padding:13px 24px;min-height:48px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  text-align:center;
}
.vd-btn--lg{font-size:17px;padding:16px 30px;min-height:54px}
.vd-btn--sm{font-size:14px;padding:9px 16px;min-height:40px}
.vd-btn--donate{background:var(--grad-red);color:#fff;box-shadow:0 6px 16px rgba(194,31,24,.28)}
.vd-btn--donate:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(194,31,24,.34)}
.vd-btn--ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.vd-btn--ghost:hover{background:var(--teal-050)}
@media (prefers-reduced-motion:reduce){.vd-btn:hover{transform:none}}

/* ── демо-бейдж ── */
.vd-demo{
  position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:4px 14px;border-radius:0 0 8px 8px;opacity:.82;
}

/* ── Header ── */
.vd-header{position:sticky;top:0;z-index:60;background:rgba(252,250,245,.86);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s}
.vd-header.is-stuck{border-color:var(--line);box-shadow:0 6px 20px rgba(36,29,23,.05)}
.vd-header__in{display:flex;align-items:center;gap:18px;min-height:68px}
.vd-brand{display:flex;align-items:center;gap:11px;flex:none}
.vd-brand__mark{width:30px;height:30px;fill:var(--red)}
.vd-brand__txt{display:flex;flex-direction:column;line-height:1.05}
.vd-brand__txt b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.vd-brand__txt i{font-size:11px;font-style:normal;color:var(--muted);letter-spacing:.04em}
.vd-nav{display:none;gap:24px;margin-inline:auto}
.vd-nav a{font-size:15px;font-weight:600;color:var(--ink);opacity:.8}
.vd-nav a:hover{opacity:1;color:var(--teal)}
.vd-header__cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.vd-lang{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.vd-lang button{font-family:inherit;font-weight:700;font-size:13px;border:0;background:transparent;
  color:var(--muted);padding:7px 12px;cursor:pointer;min-height:38px}
.vd-lang button.is-on{background:var(--teal);color:#fff}
.vd-header .vd-btn--donate{padding:10px 20px;min-height:42px;font-size:15px}
@media(min-width:980px){.vd-nav{display:flex}}

/* ── Hero ── */
.vd-hero{padding:clamp(40px,7vw,84px) 0 clamp(44px,7vw,88px)}
.vd-hero__grid{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
.vd-hero__actions{display:flex;flex-direction:column;gap:22px;margin-top:28px}
.vd-trust{display:flex;flex-wrap:wrap;gap:22px 30px;list-style:none}
.vd-trust li{display:flex;flex-direction:column;line-height:1.1}
.vd-trust b{font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.vd-trust span{font-size:13px;color:var(--muted);max-width:14ch}
@media(min-width:900px){
  .vd-hero__grid{grid-template-columns:1.05fr .95fr}
  .vd-hero__actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:30px}
}

/* Перекладач допомоги (сигнатура) */
.vd-trans{margin-top:28px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;box-shadow:var(--shadow);max-width:480px}
.vd-trans__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.vd-trans__head .vd-eyebrow{margin:0}
.vd-trans__sum{font-size:22px;font-weight:800;color:var(--red-deep);font-variant-numeric:tabular-nums}
.vd-trans__chips{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.vd-trans__chips button{font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--paper);color:var(--muted);
  border-radius:999px;padding:7px 14px;min-height:38px;transition:all .15s}
.vd-trans__chips button.is-on{border-color:var(--teal);background:var(--teal-050);color:var(--teal-700)}
.vd-trans__range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--red) 0 var(--p,10%),var(--line) var(--p,10%) 100%);cursor:pointer}
.vd-trans__range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--red);box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:pointer}
.vd-trans__range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid var(--red);cursor:pointer}
.vd-trans__out{display:flex;align-items:center;gap:14px;margin-top:16px}
.vd-trans__heart{width:42px;height:42px;flex:none}
.vd-trans__line{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}

/* Hero media / video */
.vd-hero__media{width:100%}
.vd-video{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;cursor:pointer;
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lift);background:var(--teal)}
.vd-video__poster{position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 80% 10%,rgba(252,220,0,.28),transparent 55%),
    linear-gradient(135deg,#147086 0%,#0F5E73 55%,#0B4A5B 100%);}
.vd-video__poster::after{content:"♥";position:absolute;right:-10px;bottom:-20px;font-size:180px;
  color:rgba(255,255,255,.07);line-height:1}
.vd-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s}
.vd-video__play svg{width:30px;height:30px;fill:var(--red-deep);margin-left:3px}
.vd-video:hover .vd-video__play{transform:translate(-50%,-50%) scale(1.08)}
.vd-video__label{position:absolute;left:14px;bottom:13px;color:#fff;font-size:13px;font-weight:600;
  background:rgba(0,0,0,.32);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
@media (prefers-reduced-motion:reduce){.vd-video:hover .vd-video__play{transform:translate(-50%,-50%)}}

/* ── Секції ── */
.vd-section{padding:clamp(52px,8vw,104px) 0}
.vd-section--cream{background:var(--cream)}

/* категорії */
.vd-cats{list-style:none;display:grid;gap:16px;grid-template-columns:1fr;margin-top:6px}
.vd-cats li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;display:grid;gap:4px;box-shadow:var(--shadow)}
.vd-cats__ic{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:var(--teal-050);color:var(--teal);font-size:18px;margin-bottom:8px}
.vd-cats b{font-size:17px;font-weight:700}
.vd-cats i{font-style:normal;color:var(--muted);font-size:15px}
@media(min-width:640px){.vd-cats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.vd-cats{grid-template-columns:repeat(4,1fr)}}

/* статистика */
.vd-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.vd-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;box-shadow:var(--shadow)}
.vd-stat__n{display:block;font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.02em;
  color:var(--teal);font-variant-numeric:tabular-nums;line-height:1;margin-bottom:8px}
.vd-stat__n small{font-size:.42em;font-weight:700;color:var(--muted);letter-spacing:0}
.vd-stat span{font-size:14px;color:var(--muted)}
@media(min-width:860px){.vd-stats{grid-template-columns:repeat(4,1fr)}}

/* картки кейсів */
.vd-cards{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
.vd-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.vd-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.vd-card__ph{aspect-ratio:4/3;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:600;
  background:linear-gradient(135deg,#2A8196,#0F5E73)}
.vd-card__ph span{background:rgba(0,0,0,.22);padding:5px 12px;border-radius:999px}
.vd-card__b{padding:18px 20px 22px}
.vd-card__name{font-size:18px;font-weight:800;margin-bottom:4px}
.vd-card__what{font-size:15px;color:var(--muted);margin-bottom:14px;min-height:42px}
.vd-card__meta{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line-soft);padding-top:12px;font-size:13px;color:var(--muted)}
.vd-card__sum{font-weight:800;color:var(--red-deep);font-size:15px;font-variant-numeric:tabular-nums}
@media(min-width:640px){.vd-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.vd-cards{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.vd-card:hover{transform:none}}

/* Reels */
.vd-reels__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.vd-reels__head .vd-h2{margin-bottom:0}
.vd-reels__nav{display:none;gap:8px;flex:none}
.vd-arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);
  font-size:22px;color:var(--teal);cursor:pointer;line-height:1;transition:all .15s}
.vd-arrow:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.vd-reels{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.vd-reels::-webkit-scrollbar{display:none}
.vd-reel{position:relative;flex:0 0 auto;width:230px;aspect-ratio:9/16;border-radius:var(--r);
  overflow:hidden;scroll-snap-align:start;cursor:pointer;border:0;background:#222;box-shadow:var(--shadow)}
.vd-reel__poster{position:absolute;inset:0}
.vd-reel__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.vd-reel__play svg{width:22px;height:22px;fill:var(--red-deep);margin-left:2px}
.vd-reel__badge{position:absolute;top:11px;left:11px;color:#fff;font-size:11px;font-weight:700;
  background:rgba(0,0,0,.4);padding:4px 9px;border-radius:999px;display:flex;align-items:center;gap:5px}
.vd-reel__cap{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-size:13px;font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media(min-width:980px){.vd-reels__nav{display:flex}}

/* Актуальний збір */
.vd-campaign{display:grid;gap:clamp(24px,4vw,44px);align-items:center}
.vd-campaign__media{aspect-ratio:4/3;border-radius:var(--r);display:grid;place-items:center;
  background:linear-gradient(135deg,#FBE9C6,#F3D7A6);box-shadow:var(--shadow)}
.vd-ph{background:rgba(36,29,23,.12);color:var(--ink);font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px}
.vd-progress{margin:8px 0 26px}
.vd-progress__bar{height:12px;border-radius:999px;background:var(--line);overflow:hidden}
.vd-progress__bar span{display:block;height:100%;background:var(--grad-red);border-radius:999px}
.vd-progress__row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:15px}
.vd-progress__row b{font-size:19px;font-weight:800}
.vd-progress__row i{font-style:normal;color:var(--muted)}
.vd-progress__pct{font-weight:800;color:var(--red-deep)}
@media(min-width:860px){.vd-campaign{grid-template-columns:1fr 1.1fr}}

/* Медіа */
.vd-media{list-style:none;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card);margin-top:6px}
.vd-media li{display:flex;align-items:center;gap:12px;padding:18px 22px;border-top:1px solid var(--line-soft)}
.vd-media li:first-child{border-top:0}
.vd-media__src{font-weight:700;color:var(--teal);font-size:14px;flex:none}
.vd-media li>span:nth-child(2){color:var(--muted)}
.vd-media__go{margin-left:auto;color:var(--teal);font-size:18px}

/* Документи */
.vd-docs{display:grid;grid-template-columns:1fr;gap:16px;margin-top:6px}
.vd-doc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  display:grid;gap:3px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.vd-doc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.vd-doc__ic{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  background:var(--teal-050);color:var(--teal);font-size:18px;margin-bottom:8px}
.vd-doc b{font-size:17px;font-weight:700}
.vd-doc i{font-style:normal;color:var(--muted);font-size:15px}
@media(min-width:760px){.vd-docs{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.vd-doc:hover{transform:none}}

/* Донат секція (на бірюзі) */
.vd-section--donate{background:linear-gradient(160deg,var(--teal) 0%,var(--teal-700) 100%);color:#fff}
.vd-donate__head{max-width:60ch}
.vd-pay{display:grid;grid-template-columns:1fr;gap:14px;margin:30px 0 16px}
.vd-pay__m{text-align:left;display:grid;gap:3px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);border-radius:var(--r);
  padding:20px 22px;color:#fff;transition:all .18s}
.vd-pay__m:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.vd-pay__m b{font-size:18px;font-weight:800}
.vd-pay__m i{font-style:normal;font-size:14px;color:#CFE6EB}
.vd-pay__m--mono{background:#fff;border-color:#fff;color:var(--ink)}
.vd-pay__m--mono:hover{background:#fff}
.vd-pay__m--mono i{color:var(--muted)}
.vd-pay__note{font-size:13px;color:#BFE0E6}
@media(min-width:760px){.vd-pay{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.vd-pay__m:hover{transform:none}}

/* Соц / контакти */
.vd-social,.vd-contacts{display:grid;gap:24px;align-items:center}
@media(min-width:760px){.vd-social,.vd-contacts{grid-template-columns:1.4fr 1fr}}
.vd-social .vd-btn{justify-self:start}
.vd-contacts__list{list-style:none;display:grid;gap:14px}
.vd-contacts__list li{display:flex;flex-direction:column;border-left:3px solid var(--teal);padding-left:14px}
.vd-contacts__list span{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.vd-contacts__list b{font-size:18px;font-weight:700}

/* Footer */
.vd-footer{background:var(--ink);color:#CFC6BA;padding:30px 0}
.vd-footer__in{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:14px}
.vd-footer__by{color:#8B8175}

/* Липка моб-полоса */
.vd-stickybar{position:fixed;left:14px;right:14px;bottom:14px;z-index:55;
  background:var(--grad-red);color:#fff;text-align:center;font-weight:800;font-size:17px;
  padding:16px;border-radius:14px;box-shadow:0 10px 30px rgba(194,31,24,.4)}
@media(min-width:980px){.vd-stickybar{display:none}}

/* Cookie */
.vd-cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lift);
  padding:18px;display:grid;gap:14px}
.vd-cookie p{font-size:14px;color:var(--ink)}
.vd-cookie__btns{display:flex;gap:10px;justify-content:flex-end}
@media(min-width:760px){.vd-cookie{left:auto;right:20px;bottom:20px;max-width:420px;grid-template-columns:1fr;
  bottom:20px}}

/* Toast */
.vd-toast{position:fixed;left:50%;bottom:84px;translate:-50% 20px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:12px 20px;border-radius:999px;
  box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;transition:opacity .25s,translate .25s;z-index:90;max-width:88vw;text-align:center}
.vd-toast.is-on{opacity:1;translate:-50% 0}

/* Reveal */
.vd-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.vd-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .vd-reveal{opacity:1;transform:none;transition:none}
}