:root{
  --ink:#0b1f2a;
  --brand-yellow:#f3c33b;
  --brand-green:#34b36a;
  --section-soft:#f6f4ef;
  --radius-xl:22px;
}

/* helpers (už máte, ale nevadí) */
.font-display{ font-family:"Oswald", system-ui, sans-serif; }
.font-script{ font-family:"Kolker Brush", cursive; }

.btn-cta{
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:800;
}

/* ===========================
   HERO / JAK POMOCI
   =========================== */
.help-hero{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-image:var(--help-hero-img);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.help-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.52), rgba(0,0,0,.36));
}
.help-hero__content{
  position:relative;
  z-index:2;
  max-width:980px;
  padding:140px 18px 80px;
  color:#fff;
}
.help-hero__kicker{
  display:inline-block;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:rgba(255,255,255,.70);
  margin-bottom:14px;
}
.help-hero__title{
  margin:0;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  line-height:1.25;
  font-size:clamp(42px, 6vw, 84px);
}
.help-hero__titleRow{ display:inline-flex; align-items:baseline; gap:14px; }
.help-hero__script{
  font-weight:500;
  color:var(--brand-yellow);
  text-transform:none;
  font-size:clamp(3.8rem, 9vw, 9.5rem);
  line-height:.9;
  letter-spacing:-0.02em;
}
.help-hero__subtitle{
  margin:14px auto 26px;
  color:rgba(255,255,255,.82);
  font-size:16px;
  line-height:1.7;
  max-width:66ch;
}
.help-hero__links a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.help-hero__links a:hover{ color:#fff; border-color:rgba(255,255,255,.6); }

/* ===========================
   INTRO (3 mini cards)
   =========================== */
.help-intro{
  background: var(--section-soft);
  padding:clamp(70px, 9vw, 110px) 0;
}
.help-intro__title{
  font-weight:600;
  font-size:clamp(30px, 4vw, 46px);
  margin:0 0 10px;
  color:var(--ink);
}
.help-intro__subtitle{
  max-width:720px;
  margin:0 auto;
  font-size:16px;
  line-height:1.8;
  color:rgba(11,31,42,.64);
}

.help-mini{
  border-radius:var(--radius-xl);
  padding:26px 24px;
  position:relative;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}
.help-mini__title{ margin:0 0 10px; font-size:28px; font-weight:700; }
.help-mini__text{ margin:0; font-size:15.5px; line-height:1.8; }
.help-mini__cta{
  display:inline-flex;
  margin-top:16px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  text-decoration:none;
}
.help-mini--yellow{ background:var(--brand-yellow); color:rgba(11,31,42,.95); }
.help-mini--yellow .help-mini__cta{ color:rgba(11,31,42,.95); }

.help-mini--green{ background:var(--brand-green); color:#fff; }
.help-mini--green .help-mini__cta{ color:#fff; }

.help-mini--dark{ background:#0b1f2a; color:#fff; }
.help-mini--dark .help-mini__cta{ color:#fff; }



/* ===========================
   SDÍLENÍ – pro styl (odstavce jako O nás)
   =========================== */
.help-share-pro{
  background: var(--section-soft);
  position: relative;
  padding: clamp(80px, 10vw, 130px) 0;
  overflow: hidden;
}
.help-share-pro::before{
  content:"";
  position:absolute;
  inset:-22%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(243,195,59,.10), transparent 55%),
    radial-gradient(circle at 78% 18%, rgba(52,179,106,.10), transparent 52%),
    radial-gradient(circle at 70% 78%, rgba(11,31,42,.06), transparent 58%);
}

/* Head */
.help-share-pro__head{
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}
.help-share-pro__kicker{
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(11,31,42,.55);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.help-share-pro__kicker::before{
  content:"";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: rgba(52,179,106,.85);
}
.help-share-pro__title{
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  color: var(--ink);
}
.help-share-pro__underline{
  margin-top: 14px;
  color: var(--brand-yellow);
  line-height: 0;
}
.help-share-pro__lead{
  margin: 18px auto 0;
  max-width: 74ch;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(11,31,42,.62);
}

/* Body */
.help-share-pro__body{
  max-width: 72ch;
  margin: clamp(18px, 3vw, 36px) auto 0;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}

.help-share-pro__panelKicker{
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(11,31,42,.55);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-top: 35px;
}
.help-share-pro__panelKicker::before{
  content:"";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: rgba(243,195,59,.85);
}

.help-share-pro__panelTitle{
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  color: var(--ink);
}

.help-share-pro__text{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(11,31,42,.68);
}
.help-share-pro__text:last-child{ margin-bottom: 0; }

/* Quote */
.help-share-pro__quoteWrap{
  max-width: 64ch;
  margin: clamp(46px, 6vw, 76px) auto 0;
}
.help-share-pro__quote{
  position: relative;
  padding-top: 28px;
  text-align: center;
}
.help-share-pro__quoteMark{
  font-size: 96px;
  line-height: 1;
  color: rgba(52,179,106,.25);
  font-family: Georgia, serif;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
  pointer-events: none;
}
.help-share-pro__quoteText{
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--brand-green);
}

/* CTA row (kdybys někdy chtěl tlačítka; klidně může zůstat) */
.help-share-pro__ctaRow{
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 575.98px){
  .help-share-pro__ctaRow .btn{ width: 100%; }
}



/* ===========================
   SOCIAL ICONS – čisté znaky
   =========================== */
/* SOCIAL – čistá ikonová řada (bez koleček) */
.help-share-pro__social{
  margin-top: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3.2vw, 30px);
  opacity: .95;
}

/* ikona = jen svg, stejné rozměry */
.social-icon{
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* nejsou to odkazy */
  cursor: default;
  user-select: none;

  /* jedna barva, elegantní */
  color: rgba(11,31,42,.62); /* ink */
  transition: transform .16s ease, color .16s ease, opacity .16s ease;
}

/* SVG vyplní box */
.social-icon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* jemná živost */
.social-icon:hover{
  transform: translateY(-2px);
  color: rgba(52,179,106,.85); /* brand green */
  opacity: 1;
}

/* mobil */
@media (max-width: 575.98px){
  .social-icon{ width: 30px; height: 30px; }
}


/* ===========================
   FINANCE – PRO styl (jako O nás / sdílení)
   =========================== */
.help-finance-pro{
  background:#fff;
  position:relative;
  padding: clamp(80px, 10vw, 130px) 0;
  overflow:hidden;
}
.help-finance-pro::before{
  content:"";
  position:absolute;
  inset:-22%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(243,195,59,.10), transparent 55%),
    radial-gradient(circle at 78% 18%, rgba(52,179,106,.10), transparent 52%),
    radial-gradient(circle at 70% 78%, rgba(11,31,42,.06), transparent 58%);
}

/* Head */
.help-finance-pro__head{
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}
.help-finance-pro__kicker{
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(11,31,42,.55);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.help-finance-pro__kicker::before{
  content:"";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: rgba(243,195,59,.85);
}
.help-finance-pro__title{
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  color: var(--ink);
}
.help-finance-pro__underline{
  margin-top: 14px;
  color: var(--brand-yellow);
  line-height: 0;
}
.help-finance-pro__lead{
  margin: 18px auto 0;
  max-width: 74ch;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(11,31,42,.62);
}
.help-finance-pro__text{
  margin: 14px auto 0;
  max-width: 74ch;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(11,31,42,.68);
}

/* ===========================
   TRANSPARENTNÍ ÚČET – SIMPLE (center)
   =========================== */
.finance-account-simple{
  position: relative;
  z-index: 2;
  padding-top: clamp(34px, 4vw, 52px);
}

.finance-account-simple__title{
  text-align: center;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 26px;
}

.finance-account-simple__list{
  max-width: 640px;
  margin: 0 auto;
  text-align: center; /* ✅ na střed */
}

.finance-account-simple__row{
  padding: 22px 0;
  border-bottom: 1px solid rgba(11,31,42,.12);
}
.finance-account-simple__row:last-child{
  border-bottom: none;
}

.finance-account-simple__label{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(11,31,42,.55);
  margin-bottom: 8px;
}

.finance-account-simple__value{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .4px;
  color: rgba(11,31,42,.92);
  word-break: break-word;
}

@media (max-width: 575.98px){
  .finance-account-simple__value{ font-size: 18px; }
}


/* ===========================
   Donate band – ONLY badge + QR
   =========================== */
/* ===========================
   Donate band – badge + QR v řadě
   =========================== */
/* ===========================
   Donate band – QR grid (4 stejné)
   =========================== */
.donate-band--qr{
  position: relative;
  padding: clamp(42px, 6vw, 78px) 0;
  background: var(--brand-yellow);
  overflow: hidden;
}

.donate-band--qr::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 10px 16px;
  opacity:.25;
}

.donate-band--qr::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 22px;
  background: rgba(255,255,255,.92);
  clip-path: polygon(
    0% 42%, 6% 62%, 12% 48%, 18% 68%, 24% 50%, 30% 70%,
    36% 52%, 42% 72%, 48% 54%, 54% 74%, 60% 56%, 66% 76%,
    72% 58%, 78% 77%, 84% 60%, 90% 78%, 96% 62%, 100% 79%,
    100% 100%, 0% 100%
  );
  filter: drop-shadow(0 -10px 14px rgba(0,0,0,.10));
}

.donate-band--qr .container{ position: relative; z-index: 2; }

/* === GRID: 4 / 2 / 1 === */
.donate-qr-grid{
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
  justify-items: center;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* tablet: 2x2 */
@media (max-width: 991.98px){
  .donate-qr-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* mobil: 1 sloupec */
@media (max-width: 575.98px){
  .donate-qr-grid{ grid-template-columns: 1fr; }
}

/* === ITEM: box + částka (částka fixní, neposkakuje) === */
.donate-qr-item{
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* stejné čtverce */
.donate-qr-box,
.donate-qr-item--badge .donate-badge{
  width: clamp(220px, 22vw, 300px);
  aspect-ratio: 1 / 1;
}

/* QR box (ne bílá krabice jak z Wordu) */
.donate-qr-box{
  border: clamp(4px, .55vw, 6px) solid rgba(255,255,255,.95);
  border-radius: 10px;
  padding: clamp(14px, 1.4vw, 18px);
  background: rgba(255,255,255,.08);         /* transparentní jako badge */
  box-shadow: 0 22px 50px rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* QR obrázek */
.donate-qr-img{
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  filter: contrast(1.05);
}

/* částka – bílá + pevná výška (nebude poskakovat) */
.donate-qr-amount{
  margin-top: 12px;
  min-height: 26px; /* fix, aby nic neujíždělo */
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: clamp(16px, 1.4vw, 20px);
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 18px rgba(0,0,0,.22);
}

/* badge wrapper – ať to sedí s ostatními */
.donate-qr-item--badge .donate-badge{
  background: rgba(255,255,255,.06);
  box-shadow: 0 22px 50px rgba(0,0,0,.18);
}

/* ===========================
   Material
   =========================== */
/* ===========================
   MATERIÁLNÍ POMOC – PRO styl
   =========================== */
.help-material-pro{
  background:#fff;
  position:relative;
  padding: clamp(80px, 10vw, 130px) 0;
  overflow:hidden;
}
.help-material-pro::before{
  content:"";
  position:absolute;
  inset:-22%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(52,179,106,.10), transparent 55%),
    radial-gradient(circle at 78% 18%, rgba(243,195,59,.10), transparent 52%),
    radial-gradient(circle at 70% 78%, rgba(11,31,42,.06), transparent 58%);
}

/* Head */
.help-material-pro__head{
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}
.help-material-pro__kicker{
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(11,31,42,.55);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.help-material-pro__kicker::before{
  content:"";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: rgba(52,179,106,.85);
}
.help-material-pro__title{
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  color: var(--ink);
}
.help-material-pro__underline{
  margin-top: 14px;
  color: var(--brand-yellow);
  line-height: 0;
}
.help-material-pro__lead{
  margin: 18px auto 0;
  max-width: 74ch;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(11,31,42,.62);
}
.help-material-pro__text{
  margin: 14px auto 0;
  max-width: 74ch;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(11,31,42,.68);
}
.help-material-pro__text--note{
  margin-top: 16px;
  color: rgba(11,31,42,.58);
}

/* Body */
.help-material-pro__body{
  max-width: 72ch;
  margin: clamp(18px, 3vw, 34px) auto 0; /* menší odsazení od head */
  position: relative;
  z-index: 2;
  padding: 0 10px;
}

.help-material-pro__panelKicker{
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(11,31,42,.55);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-top: 22px;
}
.help-material-pro__panelKicker::before{
  content:"";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: rgba(243,195,59,.85);
}

.help-material-pro__panelTitle{
  margin:0 0 14px;
  font-weight:700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height:1.12;
  color: var(--ink);
}

/* List – čistě, žádné chips/karty */
.help-material-pro__list{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,31,42,.70);
  font-size: 15.5px;
  line-height: 1.9;
}
.help-material-pro__list li{ margin-bottom: 10px; }

/* actions */
.help-material-pro__actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 575.98px){
  .help-material-pro__actions .btn{ width: 100%; }
}

/* Quote */
.help-material-pro__quoteWrap{
  max-width: 64ch;
  margin: clamp(46px, 6vw, 76px) auto 0;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}
.help-material-pro__quote{
  position: relative;
  padding-top: 28px;
  text-align: center;
}
.help-material-pro__quoteMark{
  font-size: 96px;
  line-height: 1;
  color: rgba(52,179,106,.25);
  font-family: Georgia, serif;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
  pointer-events: none;
}
.help-material-pro__quoteText{
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--brand-green);
}

/* mobile */
@media (max-width: 575.98px){
  .help-material-pro__lead,
  .help-material-pro__text{
    line-height: 1.85;
  }
}