/* =====================================================================
   EPET × CNN Prima NEWS – kalkulačka energií
   Podzimní kampaň „Energie pod kontrolou“ – TMAVÝ VIZUÁL
   ---------------------------------------------------------------------
   Jak to funguje:
   • Tento soubor je jediná vizuální vrstva navíc. HTML, skripty, kvízy,
     kalkulačky (iframe epet.cz), Clarity a Meta Pixel zůstávají beze změny.
   • Selektory mají předponu :root → vždy přebijí původní inline styly
     ze stránky (vyšší specificita), bez !important.
   • Návrat ke světlé verzi = odebrat <link> na tento soubor v <head>.
   Barvy dle manuálu kampaně: #8CC63F (primary), #008E7F (secondary),
   přechod #4FAB47 → #8CC63F. Pozadí černé (sladěno s tmavou kalkulačkou epet).
   ===================================================================== */

/* ---------- 1) Tokeny ---------- */
html:root {
  color-scheme: dark;
  --epd-bg: #000000;
  --epd-bg-2: #060805;
  --epd-surface: #0a0d09;
  --epd-surface-2: #10140e;
  --epd-line: rgba(255, 255, 255, 0.08);
  --epd-line-strong: rgba(255, 255, 255, 0.14);
  --epd-text: #f4f6f1;
  --epd-muted: rgba(244, 246, 241, 0.68);
  --epd-faint: rgba(244, 246, 241, 0.48);
  --epd-lime: #8cc63f;
  --epd-lime-light: #a8d86a;
  --epd-green: #4fab47;
  --epd-teal: #008e7f;
  --epd-ink: #071004;
  --epd-error: #f0585c;
  --epd-grad: linear-gradient(100deg, #6fb43c 0%, #8cc63f 45%, #a6d665 100%);
  --epd-glow: 0 0 0 1px rgba(140, 198, 63, 0.35), 0 0 22px rgba(140, 198, 63, 0.45), 0 0 70px rgba(140, 198, 63, 0.18);

  /* Webflow tokeny (globálně) */
  --primary--background: #000000;
  --primary--text: #f4f6f1;
  --primary--border: rgba(255, 255, 255, 0.1);
  --primary--accent: #8cc63f;
  --primary--accent-dark: #4fab47;
  background-color: #000000;
}

:root body {
  background-color: #000000;
  color: var(--epd-text);
}

:root ::selection {
  background: var(--epd-lime);
  color: var(--epd-ink);
}

/* ---------- 2) Webflow sekce (primary / secondary / red-active) ---------- */
:root .page-wrapper {
  --primary--background: #000000;
  --primary--text: #f4f6f1;
  background-color: #000000;
}

:root .section {
  --primary--background: #000000;
  --primary--text: #f4f6f1;
  --primary--border: rgba(255, 255, 255, 0.1);
  --primary--accent: #8cc63f;
  --primary--accent-dark: #4fab47;
}

/* secondary + secondary-full-width: o odstín světlejší černá pro rytmus stránky */
:root .section:where(.w-variant-ffdae436-6d76-12b6-39d6-0e4201c47aad),
:root .section:where(.w-variant-5a3b2588-a7f4-dd06-61a1-e697adf3e2de) {
  --primary--background: #060805;
  --primary--text: #f4f6f1;
  --primary--border: rgba(255, 255, 255, 0.1);
  --primary--accent: #8cc63f;
  --primary--accent-dark: #4fab47;
}

/* původně „red-active“ (růžový přechod) → tmavá se zeleným svitem */
:root .section.toppad:where(.w-variant-9a786847-e030-41cd-80e0-1709438dca74) {
  background-color: #000000;
  background-image:
    radial-gradient(70% 90% at 0% 0%, rgba(140, 198, 63, 0.16), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(0, 142, 127, 0.18), transparent 62%),
    linear-gradient(124deg, #050704 0%, #000000 55%, #030504 100%);
  border-top: 1px solid rgba(140, 198, 63, 0.12);
  border-bottom: 1px solid rgba(140, 198, 63, 0.12);
}

:root .section.red {
  background-image: linear-gradient(#000000, #0b1408);
}

/* ---------- 3) Typografie z Webflow komponent ---------- */
:root .heading-text,
:root .heading-component h1,
:root .heading-component h2,
:root .heading-component h3,
:root .heading-component h4,
:root .heading-component h5,
:root .heading-component h6 {
  color: var(--epd-text);
}

:root .rich-text,
:root .rich-text p,
:root .rich-text li {
  color: rgba(244, 246, 241, 0.74);
}

:root .rich-text strong {
  color: var(--epd-text);
}

:root .rich-text a {
  color: var(--epd-lime);
}

:root blockquote {
  border-left-color: var(--epd-lime);
}

:root .icon-color:where(.w-variant-51d5d8fc-9046-c299-32a4-4c984147d74e) {
  color: var(--epd-lime);
}

/* ---------- 4) Navigace ---------- */
:root .nav {
  background-color: rgba(0, 0, 0, 0.86);
  background-image: none;
  border-bottom: 1px solid rgba(140, 198, 63, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- 5) Webflow tlačítka ---------- */
:root .button {
  background-color: var(--epd-lime);
  background-image: var(--epd-grad);
  color: var(--epd-ink);
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(140, 198, 63, 0.28);
}

:root .button:hover {
  background-color: var(--epd-green);
  background-image: linear-gradient(100deg, #5fae3f 0%, #8cc63f 100%);
  color: var(--epd-ink);
}

:root .button:where(.w-variant-052759b4-b398-e98d-c28c-099b380d4426) {
  background-color: transparent;
  background-image: none;
  color: var(--epd-lime);
  border-color: rgba(140, 198, 63, 0.7);
  box-shadow: none;
}

:root .button:hover:where(.w-variant-052759b4-b398-e98d-c28c-099b380d4426) {
  background-color: rgba(140, 198, 63, 0.12);
  color: var(--epd-lime-light);
}

/* ---------- 6) Karty a obrázky ---------- */
:root .card {
  background-color: transparent;
}

:root .card:hover:where(.w-variant-7a49f1e4-82e5-f9b4-164d-70415eb8af86) {
  background-color: rgba(255, 255, 255, 0.04);
}

:root .img-component img {
  border-radius: inherit;
}

/* ---------- 7) Zelený pás s kalkulačkou (dříve červený .div-block-4) ---------- */
:root .div-block-4 {
  background-color: #000000;
  background-image:
    radial-gradient(60% 70% at 50% 0%, rgba(140, 198, 63, 0.14), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(0, 142, 127, 0.14), transparent 70%);
  border-top: 1px solid rgba(140, 198, 63, 0.14);
  border-bottom: 1px solid rgba(140, 198, 63, 0.14);
}

:root .div-block {
  background-color: #050704;
  border: 2px solid var(--epd-lime);
  box-shadow: var(--epd-glow), inset 0 0 26px rgba(140, 198, 63, 0.12);
}

/* ---------- 8) Patička ---------- */
:root .footer-dark {
  background-color: #000000;
  border-top: 1px solid rgba(140, 198, 63, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

:root .container-2,
:root .text-span,
:root .footer-copyright-center,
:root .footer-emaail-left {
  color: rgba(244, 246, 241, 0.78);
}

:root .footer-link-2 {
  color: rgba(244, 246, 241, 0.78);
}

:root .footer-link-2:hover,
:root .link {
  color: var(--epd-lime);
}

:root .div-block-10 {
  background-color: var(--epd-lime);
  color: var(--epd-ink);
}

:root .text-block-2 {
  color: rgba(244, 246, 241, 0.5);
}

@media screen and (max-width: 767px) {
  :root .footer-link-2:hover {
    color: var(--epd-lime);
  }
}

/* ---------- 9) Formuláře (401 heslo) ---------- */
:root .input,
:root .w-input {
  background-color: #0a0d09;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--epd-text);
}

:root .input:focus,
:root .w-input:focus {
  border-color: var(--epd-lime);
  outline-color: var(--epd-lime);
}

/* =====================================================================
   AUTOMATICKY PŘEBARVENÉ INLINE BLOKY (kvízy, modaly, slider, checklist…)
   Každý blok odpovídá jednomu <style> v index.html; mění se jen barvy.
   ===================================================================== */










/* ===== auto: inline <style> @ index.html line 712 ===== */
:root .ep-hero-premium {
  color: #f4f6f1;
  background: radial-gradient(circle at 12% 18%, rgba(140, 198, 63, 0.108), transparent 34%),
      radial-gradient(circle at 92% 20%, rgba(0, 142, 127, 0.22), transparent 34%),
      linear-gradient(135deg, #0d110c 0%, #0d110c 48%, #0d110c 100%);
}
:root .ep-hero-bg-glow-red {
  background: rgba(140, 198, 63, 0.108);
}
:root .ep-hero-bg-glow-blue {
  background: rgba(0, 142, 127, 0.18);
}
:root .ep-hero-kicker {
  color: #f4f6f1;
}
:root .ep-hero-kicker-icon {
  color: #8cc63f;
}
:root .ep-hero-title {
  color: #f4f6f1;
}
:root .ep-hero-title span {
  color: #8cc63f;
}
:root .ep-hero-text {
  color: rgba(244, 246, 241, 0.76);
}
:root .ep-hero-benefit:not(:last-child)::after {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.12) 48%, transparent 100%);
}
:root .ep-hero-benefit-icon {
  color: #8cc63f;
}
:root .ep-hero-benefit p {
  color: rgba(244, 246, 241, 0.82);
}
:root .ep-btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.041);
  background: linear-gradient(135deg, #acdc6c 0%, #8cc63f 46%, #4fab47 100%);
  color: #060c04;
  box-shadow: 0 18px 38px rgba(140, 198, 63, 0.225), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
:root .ep-btn-primary:hover {
  color: #060c04;
  box-shadow: 0 24px 52px rgba(140, 198, 63, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.029);
}
:root .ep-btn-primary:active {
  box-shadow: 0 12px 26px rgba(140, 198, 63, 0.21), inset 0 2px 6px rgba(140, 198, 63, 0.165);
}
:root .ep-btn-arrow {
  background: rgba(13, 17, 12, 0.94);
  color: #8cc63f;
  box-shadow: 0 8px 18px rgba(140, 198, 63, 0.135), inset 0 1px 0 rgba(255, 255, 255, 0.054);
}
:root .ep-btn-primary:hover .ep-btn-arrow {
  background: #0d110c;
}
:root .ep-hero-microcopy {
  color: rgba(244, 246, 241, 0.54);
}
:root .ep-savings-card {
  background: linear-gradient(135deg, rgba(13, 17, 12, 0.92), rgba(13, 17, 12, 0.58)),
      radial-gradient(circle at 100% 0%, rgba(140, 198, 63, 0.162), transparent 42%);
  border: 1px solid rgba(140, 198, 63, 0.16);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.448), 0 0 0 8px rgba(255, 255, 255, 0.026);
}
:root .ep-savings-card::before {
  border: 1px solid rgba(255, 255, 255, 0.094);
}
:root .ep-savings-card-inner {
  background: radial-gradient(circle at 85% 8%, rgba(140, 198, 63, 0.09), transparent 36%),
      rgba(13, 17, 12, 0.58);
}
:root .ep-savings-label {
  color: #f4f6f1;
}
:root .ep-savings-label-icon {
  color: #8cc63f;
  background: rgba(13, 17, 12, 0.84);
  border: 1px solid rgba(140, 198, 63, 0.1);
}
:root .ep-savings-number {
  color: #f4f6f1;
}
:root .ep-savings-number strong {
  color: #8cc63f;
}
:root .ep-chart-divider {
  background: rgba(255, 255, 255, 0.1);
}
:root .ep-chart-title {
  color: rgba(244, 246, 241, 0.82);
}
:root .ep-chart-grid line {
  stroke: rgba(244, 246, 241, 0.08);
}
:root .ep-chart-years {
  color: rgba(244, 246, 241, 0.56);
}
:root .ep-card-note {
  color: rgba(244, 246, 241, 0.72);
}
:root .ep-card-soft-note {
  background: rgba(13, 17, 12, 0.56);
  color: rgba(244, 246, 241, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.043);
}
@media screen and (max-width: 767px) {
  :root .ep-hero-benefit:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
  }
}

/* ===== auto: inline <style> @ index.html line 1335 ===== */
:root .ep-calculator-section {
  color: #f4f6f1;
  background: radial-gradient(circle at 8% 15%, rgba(140, 198, 63, 0.072), transparent 34%),
      radial-gradient(circle at 88% 78%, rgba(0, 142, 127, 0.14), transparent 36%),
      linear-gradient(135deg, #0d110c 0%, #0d110c 48%, #0d110c 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.089);
}
:root .ep-calc-bg-red {
  background: rgba(140, 198, 63, 0.072);
}
:root .ep-calc-bg-gold {
  background: rgba(0, 142, 127, 0.14);
}
:root .ep-calc-title {
  color: #f4f6f1;
}
:root .ep-title-line {
  background: linear-gradient(90deg, #8cc63f, #4fab47);
}
:root .ep-calc-text {
  color: rgba(244, 246, 241, 0.7);
}
:root .ep-process-line {
  border-left: 2px dotted rgba(140, 198, 63, 0.28);
}
:root .ep-step-number {
  background: rgba(13, 17, 12, 0.94);
  border: 1px solid rgba(140, 198, 63, 0.24);
  color: #8cc63f;
  box-shadow: 0 10px 28px rgba(140, 198, 63, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.048);
}
:root .ep-step-card {
  background: radial-gradient(circle at 0% 0%, rgba(140, 198, 63, 0.054), transparent 42%),
      rgba(13, 17, 12, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.112);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
:root .ep-step-icon {
  color: #8cc63f;
  background: rgba(140, 198, 63, 0.063);
}
:root .ep-step-card h3 {
  color: #f4f6f1;
}
:root .ep-step-card p {
  color: rgba(244, 246, 241, 0.62);
}
:root .ep-trust-strip {
  background: rgba(13, 17, 12, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.112);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.224),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
:root .ep-trust-item {
  border-right: 1px solid rgba(255, 255, 255, 0.112);
  color: rgba(244, 246, 241, 0.72);
}
:root .ep-trust-icon {
  color: rgba(244, 246, 241, 0.58);
}
:root .ep-calculator-card {
  background: radial-gradient(circle at 80% 0%, rgba(140, 198, 63, 0.072), transparent 36%),
      rgba(13, 17, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.112);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.416),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
:root .ep-calculator-card-glow {
  background: linear-gradient(
        135deg,
        rgba(140, 198, 63, 0.144),
        rgba(255, 255, 255, 0),
        rgba(0, 142, 127, 0.14)
      );
}
:root .ep-iframe-wrap {
  background: #0d110c;
  border: 1px solid rgba(255, 255, 255, 0.112);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.256),
      inset 0 1px 0 rgba(255, 255, 255, 0.052);
}
@media screen and (max-width: 1100px) {
  :root .ep-trust-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.112);
  }
}

/* ===== auto: inline <style> @ index.html line 1860 ===== */
:root .epet-calculator-embed {
  background: #0d110c;
}

/* ===== auto: inline <style> @ index.html line 1955 ===== */
:root .ep-modal-clean-2__button {
  border: 1px solid rgba(255, 255, 255, 0.041);
  background: linear-gradient(135deg, #acdc6c 0%, #8cc63f 46%, #4fab47 100%);
  color: #060c04;
  box-shadow: 0 18px 38px rgba(140, 198, 63, 0.225),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
:root .ep-modal-clean-2__button:hover {
  color: #060c04;
  box-shadow: 0 24px 52px rgba(140, 198, 63, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.029);
}
:root .ep-modal-clean-2__button-icon {
  background: rgba(13, 17, 12, 0.94);
  color: #8cc63f;
  box-shadow: 0 8px 18px rgba(140, 198, 63, 0.135),
      inset 0 1px 0 rgba(255, 255, 255, 0.054);
}
:root .ep-modal-clean-2__button:hover .ep-modal-clean-2__button-icon {
  background: #0d110c;
}
:root .ep-modal-clean-2__modal {
  background: rgba(13, 17, 12, 0.76) !important;
}
:root .ep-modal-clean-2__dialog {
  background: #0d110c;
  border: 1px solid rgba(255, 255, 255, 0.112);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.7),
      0 12px 32px rgba(140, 198, 63, 0.075);
}
:root .ep-modal-clean-2__close {
  border: 1px solid rgba(255, 255, 255, 0.112);
  background: rgba(13, 17, 12, 0.94);
  color: #f4f6f1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.384);
}
:root .ep-modal-clean-2__close:hover {
  background: #0d110c;
  color: #8cc63f;
}
:root .ep-modal-clean-2__frame-wrap {
  background: #0d110c;
}
:root .ep-modal-clean-2__iframe {
  background: #0d110c;
}

/* ===== auto: inline <style> @ index.html line 2288 ===== */
:root .ep-quiz-section {
  color: #f4f6f1;
  border: 1px solid rgba(255, 255, 255, 0.089);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.192),
      inset 0 1px 0 rgba(255, 255, 255, 0.042);
}
:root .ep-quiz-section.is-energy {
  background: radial-gradient(circle at 10% 10%, rgba(140, 198, 63, 0.108), transparent 30%),
      radial-gradient(circle at 92% 14%, rgba(0, 142, 127, 0.14), transparent 28%),
      radial-gradient(circle at 95% 90%, rgba(0, 142, 127, 0.18), transparent 32%),
      linear-gradient(135deg, #0d110c 0%, #0d110c 48%, #0d110c 100%);
}
:root .ep-quiz-kicker {
  background: rgba(13, 17, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.112);
  color: #8cc63f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.128);
}
:root .ep-quiz-title {
  color: #f4f6f1;
}
:root .ep-quiz-text {
  color: rgba(244, 246, 241, 0.62);
}
:root .ep-quiz-feature-icon {
  background: rgba(13, 17, 12, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.112);
  color: #8cc63f;
}
:root .ep-quiz-feature p {
  color: rgba(244, 246, 241, 0.8);
}
:root .ep-quiz-card {
  background: rgba(13, 17, 12, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.135);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.051);
}
:root .ep-quiz-progress-top {
  color: #8cc63f;
}
:root .ep-quiz-progress-bar {
  background: rgba(255, 255, 255, 0.1);
}
:root .ep-quiz-progress-fill {
  background: linear-gradient(90deg, #8cc63f 0%, #4fab47 100%);
}
:root .ep-quiz-question {
  color: #f4f6f1;
}
:root .ep-answer-button {
  background: rgba(13, 17, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.135);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.096);
}
:root .ep-answer-button:hover {
  border-color: rgba(140, 198, 63, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.192);
}
:root .ep-answer-button.is-selected {
  background: rgba(13, 17, 12, 0.98);
  border-color: rgba(140, 198, 63, 0.34);
  box-shadow: 0 14px 28px rgba(140, 198, 63, 0.075),
      inset 0 0 0 1px rgba(140, 198, 63, 0.075);
}
:root .ep-answer-button.is-correct {
  box-shadow: 0 14px 28px rgba(34, 197, 94, 0.1),
      inset 0 0 0 1px rgba(34, 197, 94, 0.16);
}
:root .ep-answer-button.is-wrong {
  border-color: rgba(140, 198, 63, 0.36);
}
:root .ep-answer-badge {
  border: 1px solid rgba(255, 255, 255, 0.181);
  color: #f4f6f1;
}
:root .ep-answer-text {
  color: rgba(244, 246, 241, 0.9);
}
:root .ep-answer-endicon {
  color: rgba(244, 246, 241, 0.5);
}
:root .ep-quiz-note {
  color: rgba(244, 246, 241, 0.54);
}
:root .ep-quiz-note svg {
  color: rgba(244, 246, 241, 0.46);
}
:root .ep-result-icon {
  color: #8cc63f;
  background: rgba(140, 198, 63, 0.072);
  border: 1px solid rgba(140, 198, 63, 0.14);
}
:root .ep-result-title {
  color: #f4f6f1;
}
:root .ep-result-score {
  background: rgba(140, 198, 63, 0.072);
  color: #8cc63f;
}
:root .ep-result-text {
  color: rgba(244, 246, 241, 0.66);
}
:root .ep-quiz-button,
:root .ep-restart-button {
  border: 1px solid rgba(255, 255, 255, 0.041);
  background: linear-gradient(135deg, #acdc6c 0%, #8cc63f 46%, #4fab47 100%);
  color: #060c04;
  box-shadow: 0 16px 34px rgba(140, 198, 63, 0.21),
      inset 0 1px 0 rgba(255, 255, 255, 0.024);
}
:root .ep-quiz-button:hover,
:root .ep-restart-button:hover {
  color: #060c04;
  box-shadow: 0 22px 46px rgba(140, 198, 63, 0.285),
      inset 0 1px 0 rgba(255, 255, 255, 0.028);
}
:root .ep-restart-button {
  background: rgba(13, 17, 12, 0.78);
  color: #f4f6f1;
  border: 1px solid rgba(255, 255, 255, 0.158);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.192);
}
:root .ep-restart-button:hover {
  color: #f4f6f1;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}
:root .ep-quiz-button-icon {
  background: rgba(13, 17, 12, 0.94);
  color: #8cc63f;
  box-shadow: 0 8px 18px rgba(140, 198, 63, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.054);
}

/* ===== auto: inline <style> @ index.html line 3411 ===== */
:root .ep-dyk-box {
  --ep-red: #8cc63f;
  --ep-red-dark: #4fab47;
  --ep-text: #f4f6f1;
  --ep-muted: rgba(244, 246, 241, 0.68);
}
:root .ep-dyk-inner {
  border: 1px solid rgba(255, 255, 255, 0.101);
  background: radial-gradient(circle at 88% 78%, rgba(140, 198, 63, 0.041), transparent 34%),
        radial-gradient(circle at 18% 12%, rgba(140, 198, 63, 0.023), transparent 28%),
        linear-gradient(135deg, #0d110c 0%, #0d110c 56%, #0d110c 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.224),
        inset 0 1px 0 rgba(255, 255, 255, 0.054);
}
:root .ep-dyk-inner::after {
  background: radial-gradient(circle, rgba(140, 198, 63, 0.05), transparent 70%);
}
:root .ep-dyk-icon {
  background: rgba(140, 198, 63, 0.05);
  box-shadow: inset 0 0 0 1px rgba(140, 198, 63, 0.06);
}
:root .ep-dyk-link::after {
  background: linear-gradient(90deg, var(--ep-red), rgba(140, 198, 63, 0.09));
}
:root .ep-dyk-ring {
  background: conic-gradient(
          from -30deg,
          var(--ep-red) 0deg,
          var(--ep-red) 268deg,
          rgba(140, 198, 63, 0.068) 268deg 360deg
        );
  box-shadow: 0 16px 34px rgba(140, 198, 63, 0.075);
}
:root .ep-dyk-ring::before {
  background: linear-gradient(135deg, #0d110c, #0d110c);
  box-shadow: inset 0 0 0 1px rgba(140, 198, 63, 0.053);
}
:root .ep-dyk-dots {
  background-image: radial-gradient(rgba(140, 198, 63, 0.18) 1.2px, transparent 1.2px);
}
:root .ep-dyk-house-glow {
  background: radial-gradient(circle, rgba(140, 198, 63, 0.09), transparent 68%);
}

/* ===== auto: inline <style> @ index.html line 4342 ===== */
:root .ep-profile-quiz-section {
  color: #f4f6f1;
  border: 1px solid rgba(255, 255, 255, 0.089);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.192),
      inset 0 1px 0 rgba(255, 255, 255, 0.042);
  background: radial-gradient(circle at 12% 16%, rgba(140, 198, 63, 0.072), transparent 30%),
      radial-gradient(circle at 92% 18%, rgba(0, 142, 127, 0.16), transparent 26%),
      radial-gradient(circle at 92% 92%, rgba(0, 142, 127, 0.18), transparent 34%),
      linear-gradient(135deg, #0d110c 0%, #0d110c 48%, #0d110c 100%);
}
:root .ep-profile-quiz-kicker {
  background: rgba(13, 17, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.112);
  color: #8cc63f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.128);
}
:root .ep-profile-quiz-title {
  color: #f4f6f1;
}
:root .ep-profile-quiz-text {
  color: rgba(244, 246, 241, 0.62);
}
:root .ep-profile-quiz-feature-icon {
  background: rgba(13, 17, 12, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.112);
  color: #8cc63f;
}
:root .ep-profile-quiz-feature p {
  color: rgba(244, 246, 241, 0.8);
}
:root .ep-profile-quiz-card {
  background: rgba(13, 17, 12, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.135);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.051);
}
:root .ep-profile-quiz-progress-top {
  color: #8cc63f;
}
:root .ep-profile-quiz-progress-bar {
  background: rgba(255, 255, 255, 0.1);
}
:root .ep-profile-quiz-progress-fill {
  background: linear-gradient(90deg, #8cc63f 0%, #4fab47 100%);
}
:root .ep-profile-quiz-question {
  color: #f4f6f1;
}
:root .ep-profile-answer-button {
  background: rgba(13, 17, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.135);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.096);
}
:root .ep-profile-answer-button:hover {
  border-color: rgba(140, 198, 63, 0.22);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.192);
}
:root .ep-profile-answer-button.is-selected {
  background: rgba(13, 17, 12, 0.98);
  border-color: rgba(140, 198, 63, 0.34);
  box-shadow: 0 14px 28px rgba(140, 198, 63, 0.075),
      inset 0 0 0 1px rgba(140, 198, 63, 0.075);
}
:root .ep-profile-answer-badge {
  border: 1px solid rgba(255, 255, 255, 0.181);
  color: #f4f6f1;
}
:root .ep-profile-answer-text {
  color: rgba(244, 246, 241, 0.9);
}
:root .ep-profile-answer-endicon {
  color: rgba(244, 246, 241, 0.5);
}
:root .ep-profile-option-button {
  background: rgba(13, 17, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.135);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.096);
}
:root .ep-profile-option-button:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.192);
}
:root .ep-profile-option-button.is-selected {
  border-color: rgba(140, 198, 63, 0.28);
  box-shadow: 0 14px 28px rgba(140, 198, 63, 0.075),
      inset 0 0 0 1px rgba(140, 198, 63, 0.06);
  background: rgba(13, 17, 12, 0.98);
}
:root .ep-profile-option-icon {
  background: #0d110c;
  color: #8cc63f;
}
:root .ep-profile-option-icon.is-orange {
  color: #4fab47;
}
:root .ep-profile-option-icon.is-blue {
  color: #008e7f;
}
:root .ep-profile-option-icon.is-purple {
  color: #008e7f;
}
:root .ep-profile-option-title {
  color: #f4f6f1;
}
:root .ep-profile-quiz-note {
  color: rgba(244, 246, 241, 0.54);
}
:root .ep-profile-quiz-note svg {
  color: rgba(244, 246, 241, 0.46);
}
:root .ep-profile-result-icon {
  color: #8cc63f;
  background: rgba(140, 198, 63, 0.072);
  border: 1px solid rgba(140, 198, 63, 0.14);
}
:root .ep-profile-result-title {
  color: #f4f6f1;
}
:root .ep-profile-result-score {
  background: rgba(140, 198, 63, 0.072);
  color: #8cc63f;
}
:root .ep-profile-result-text {
  color: rgba(244, 246, 241, 0.66);
}
:root .ep-profile-quiz-button,
:root .ep-profile-restart-button {
  border: 1px solid rgba(255, 255, 255, 0.041);
  background: linear-gradient(135deg, #acdc6c 0%, #8cc63f 46%, #4fab47 100%);
  color: #060c04;
  box-shadow: 0 16px 34px rgba(140, 198, 63, 0.21),
      inset 0 1px 0 rgba(255, 255, 255, 0.024);
}
:root .ep-profile-quiz-button:hover,
:root .ep-profile-restart-button:hover {
  color: #060c04;
  box-shadow: 0 22px 46px rgba(140, 198, 63, 0.285),
      inset 0 1px 0 rgba(255, 255, 255, 0.028);
}
:root .ep-profile-restart-button {
  background: rgba(13, 17, 12, 0.78);
  color: #f4f6f1;
  border: 1px solid rgba(255, 255, 255, 0.158);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.192);
}
:root .ep-profile-restart-button:hover {
  color: #f4f6f1;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}
:root .ep-profile-quiz-button-icon {
  background: rgba(13, 17, 12, 0.94);
  color: #8cc63f;
  box-shadow: 0 8px 18px rgba(140, 198, 63, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.054);
}

/* ===== auto: inline <style> @ index.html line 5524 ===== */
:root .ep-compact-quiz {
  --ep-red: #8cc63f;
  --ep-red-dark: #8cc63f;
  --ep-green: #4ad680;
  --ep-green-dark: #4ad680;
  --ep-text: #f4f6f1;
  --ep-muted: rgba(244, 246, 241, 0.58);
  --ep-border: rgba(255, 255, 255, 0.112);
}
:root .ep-compact-quiz__card {
  border: 1px solid rgba(255, 255, 255, 0.101);
  background: radial-gradient(circle at 100% 100%, rgba(140, 198, 63, 0.05), transparent 36%),
        radial-gradient(circle at 0% 0%, rgba(140, 198, 63, 0.032), transparent 30%),
        linear-gradient(135deg, #0d110c 0%, #0d110c 55%, #0d110c 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.051);
}
:root .ep-compact-quiz__dot {
  box-shadow: 0 0 0 7px rgba(140, 198, 63, 0.053);
}
:root .ep-compact-quiz__mini {
  color: rgba(244, 246, 241, 0.42);
}
:root .ep-compact-quiz__answer {
  background: rgba(13, 17, 12, 0.88);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.176);
}
:root .ep-compact-quiz__answer:hover {
  border-color: rgba(140, 198, 63, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}
:root .ep-compact-quiz__answer:focus-visible {
  outline: 2px solid rgba(140, 198, 63, 0.28);
}
:root .ep-compact-quiz__icon {
  background: rgba(140, 198, 63, 0.068);
  box-shadow: inset 0 0 0 1px rgba(140, 198, 63, 0.045);
}
:root .ep-compact-quiz__answer.is-wrong {
  border-color: rgba(140, 198, 63, 0.28);
  background: radial-gradient(circle at 100% 0%, rgba(140, 198, 63, 0.072), transparent 42%),
        rgba(140, 198, 63, 0.032);
}
:root .ep-compact-quiz__answer.is-correct {
  box-shadow: 0 14px 30px rgba(31, 157, 85, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.176);
}
:root .ep-compact-quiz__answer.is-correct .ep-compact-quiz__icon {
  box-shadow: 0 8px 18px rgba(31, 157, 85, 0.2);
}
:root .ep-compact-quiz__answer.is-dimmed {
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.112);
}

/* ===== auto: inline <style> @ index.html line 5896 ===== */
:root .ep-myth-slider {
  --ep-red: #8cc63f;
  --ep-red-dark: #8cc63f;
  --ep-text: #f4f6f1;
  --ep-muted: rgba(244, 246, 241, 0.58);
  --ep-border: rgba(255, 255, 255, 0.112);
}
:root .ep-myth-slider__card {
  border: 1px solid rgba(255, 255, 255, 0.101);
  background: radial-gradient(circle at 100% 100%, rgba(140, 198, 63, 0.05), transparent 36%),
        radial-gradient(circle at 0% 0%, rgba(140, 198, 63, 0.032), transparent 30%),
        linear-gradient(135deg, #0d110c 0%, #0d110c 55%, #0d110c 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.051);
}
:root .ep-myth-slider__dot {
  box-shadow: 0 0 0 7px rgba(140, 198, 63, 0.053);
}
:root .ep-myth-slider__counter {
  color: rgba(244, 246, 241, 0.42);
}
:root .ep-myth-slider__image {
  background: radial-gradient(circle at 50% 60%, rgba(140, 198, 63, 0.072), transparent 48%),
        rgba(13, 17, 12, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.083);
}
:root .ep-myth-slider__image::before {
  background-image: radial-gradient(rgba(140, 198, 63, 0.198) 1.2px, transparent 1.2px);
}
:root .ep-myth-slider__answer {
  background: rgba(140, 198, 63, 0.068);
}
:root .ep-myth-slider__button {
  border: 1px solid rgba(255, 255, 255, 0.112);
  background: rgba(13, 17, 12, 0.82);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.176);
}
:root .ep-myth-slider__button:hover {
  border-color: rgba(140, 198, 63, 0.18);
  background: #0d110c;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}
:root .ep-myth-slider__button:focus-visible {
  outline: 2px solid rgba(140, 198, 63, 0.28);
}
:root .ep-myth-slider__pager {
  background: rgba(255, 255, 255, 0.16);
}

/* ===== auto: inline <style> @ index.html line 7571 ===== */
:root .ep-mini-hot-quiz {
  --ep-red: #8cc63f;
  --ep-red-dark: #4fab47;
  --ep-green: #4ad680;
  --ep-text: #f4f6f1;
  --ep-muted: rgba(244, 246, 241, 0.62);
  --ep-border: rgba(255, 255, 255, 0.112);
}
:root .ep-mini-hot-quiz__card {
  border: 1px solid rgba(255, 255, 255, 0.101);
  background: radial-gradient(circle at 88% 12%, rgba(140, 198, 63, 0.05), transparent 32%),
        radial-gradient(circle at 8% 92%, rgba(140, 198, 63, 0.032), transparent 34%),
        linear-gradient(135deg, #0d110c 0%, #0d110c 55%, #0d110c 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.224),
        inset 0 1px 0 rgba(255, 255, 255, 0.054);
}
:root .ep-mini-hot-quiz__card::after {
  background: radial-gradient(circle, rgba(140, 198, 63, 0.05), transparent 70%);
}
:root .ep-mini-hot-quiz__label::before {
  box-shadow: 0 0 0 7px rgba(140, 198, 63, 0.053);
}
:root .ep-mini-hot-quiz__answer {
  background: rgba(13, 17, 12, 0.88);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.144);
}
:root .ep-mini-hot-quiz__answer:hover {
  border-color: rgba(140, 198, 63, 0.18);
  background: #0d110c;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.208);
}
:root .ep-mini-hot-quiz__answer:focus-visible {
  outline: 2px solid rgba(140, 198, 63, 0.28);
}
:root .ep-mini-hot-quiz__letter {
  background: rgba(140, 198, 63, 0.068);
}
:root .ep-mini-hot-quiz__answer.is-wrong {
  border-color: rgba(140, 198, 63, 0.28);
  background: rgba(140, 198, 63, 0.032);
}
:root .ep-mini-hot-quiz__answer.is-correct {
  background: radial-gradient(circle at 100% 0%, rgba(39, 130, 82, 0.1), transparent 42%),
        rgba(13, 17, 12, 0.96);
  box-shadow: 0 14px 30px rgba(39, 130, 82, 0.1),
        0 8px 22px rgba(0, 0, 0, 0.144);
}
:root .ep-mini-hot-quiz__answer.is-dimmed {
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.112);
}

/* ===== auto: inline <style> @ index.html line 8526 ===== */
:root .ep-checklist-cards {
  --ep-red: #8cc63f;
  --ep-green: #4ad680;
  --ep-text: #f4f6f1;
  --ep-muted: rgba(244, 246, 241, 0.62);
  --ep-border: rgba(255, 255, 255, 0.112);
}
:root .ep-checklist-cards__wrap {
  border: 1px solid rgba(255, 255, 255, 0.101);
  background: radial-gradient(circle at 88% 12%, rgba(140, 198, 63, 0.045), transparent 32%),
        radial-gradient(circle at 8% 92%, rgba(140, 198, 63, 0.027), transparent 34%),
        linear-gradient(135deg, #0d110c 0%, #0d110c 55%, #0d110c 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.224),
        inset 0 1px 0 rgba(255, 255, 255, 0.054);
}
:root .ep-checklist-cards__wrap::after {
  background: radial-gradient(circle, rgba(140, 198, 63, 0.045), transparent 70%);
}
:root .ep-checklist-cards__label::before {
  box-shadow: 0 0 0 7px rgba(140, 198, 63, 0.053);
}
:root .ep-checklist-cards__item {
  background: rgba(13, 17, 12, 0.88);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.144);
}
:root .ep-checklist-cards__item:hover {
  border-color: rgba(140, 198, 63, 0.16);
  background: #0d110c;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.224);
}
:root .ep-checklist-cards__icon {
  background: rgba(140, 198, 63, 0.063);
  box-shadow: inset 0 0 0 1px rgba(140, 198, 63, 0.06);
}
:root .ep-checklist-cards__check {
  background: rgba(39, 130, 82, 0.1);
}


/* =====================================================================
   RUČNÍ DOLADĚNÍ podle schváleného vizuálu (hero + sekce kalkulačky)
   – načítá se až po automaticky přebarvených blocích, proto má přednost.
   ===================================================================== */

/* ---------- A) HERO ---------- */
:root .ep-hero-premium {
  color: var(--epd-text);
  background:
    radial-gradient(55% 60% at 32% 46%, rgba(140, 198, 63, 0.045), transparent 70%),
    radial-gradient(40% 50% at 72% 55%, rgba(140, 198, 63, 0.05), transparent 70%),
    #000000;
}

/* původní barevné „glow“ koule → zelená optická vlákna ze schváleného vizuálu */
:root .ep-hero-bg-glow,
:root .ep-calc-bg {
  filter: none;
  opacity: 1;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}

:root .ep-hero-bg-glow-red,
:root .ep-calc-bg-red {
  --epd-sw: clamp(150px, 19.4vw, 440px);
  top: auto;
  right: auto;
  bottom: 0;
  /* vlákna drží v okraji vedle obsahu (kontejner 1180 px), aby nepřekrývala text */
  left: clamp(calc(var(--epd-sw) * -0.7), calc((100vw - 1180px) / 2 + 28px - var(--epd-sw)), 0px);
  width: var(--epd-sw);
  height: auto;
  aspect-ratio: 372 / 580;
  background-image: url("../images/ep-swirl-left.webp");
  background-position: left bottom;
}

:root .ep-hero-bg-glow-blue,
:root .ep-calc-bg-gold {
  --epd-sw: clamp(140px, 18.7vw, 424px);
  top: 0;
  right: clamp(calc(var(--epd-sw) * -0.7), calc((100vw - 1180px) / 2 + 28px - var(--epd-sw)), 0px);
  bottom: auto;
  left: auto;
  width: var(--epd-sw);
  height: auto;
  aspect-ratio: 358 / 540;
  background-image: url("../images/ep-swirl-right.webp");
  background-position: right top;
}

:root .ep-hero-kicker {
  color: var(--epd-text);
}

:root .ep-hero-kicker-icon,
:root .ep-hero-title span,
:root .ep-hero-benefit-icon,
:root .ep-savings-number strong {
  color: var(--epd-lime);
}

:root .ep-hero-title {
  color: #fbf8f6;
}

:root .ep-hero-text {
  color: rgba(244, 246, 241, 0.78);
}

:root .ep-hero-benefit p {
  color: rgba(244, 246, 241, 0.82);
}

:root .ep-hero-benefit:not(:last-child)::after {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.1) 48%, transparent 100%);
}

:root .ep-hero-microcopy {
  color: rgba(244, 246, 241, 0.52);
}

/* karta „Vaše možná úspora“ – svítící zelený rám */
:root .ep-savings-card {
  background: #040603;
  border: 3px solid #a3d65a;
  box-shadow:
    0 0 0 1px rgba(140, 198, 63, 0.35),
    0 0 20px rgba(140, 198, 63, 0.55),
    0 0 70px rgba(140, 198, 63, 0.2),
    inset 0 0 24px rgba(140, 198, 63, 0.2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root .ep-savings-card::before {
  border-color: rgba(255, 255, 255, 0.035);
}

:root .ep-savings-card-inner {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(140, 198, 63, 0.05), transparent 70%),
    rgba(255, 255, 255, 0.012);
}

:root .ep-savings-label {
  color: var(--epd-text);
}

:root .ep-savings-label-icon {
  color: var(--epd-lime);
  background: transparent;
  border-color: transparent;
}

:root .ep-savings-number {
  color: var(--epd-text);
}

:root .ep-chart-divider {
  background: rgba(255, 255, 255, 0.07);
}

:root .ep-chart-title {
  color: rgba(244, 246, 241, 0.88);
}

:root .ep-chart-grid line {
  stroke: rgba(255, 255, 255, 0.045);
}

:root #epChartFill stop {
  stop-color: #8cc63f;
}

:root #epChartFill stop:first-child {
  stop-opacity: 0.1;
}

:root #epChartLine stop:nth-child(1) {
  stop-color: #2fcf5a;
}

:root #epChartLine stop:nth-child(2) {
  stop-color: #6fbf45;
}

:root #epChartLine stop:nth-child(3) {
  stop-color: #a3d65a;
}

:root .ep-chart circle {
  fill: #a3d65a;
}

:root .ep-chart-years {
  color: rgba(244, 246, 241, 0.42);
}

:root .ep-card-note {
  color: rgba(244, 246, 241, 0.74);
}

:root .ep-card-soft-note {
  background: transparent;
  box-shadow: none;
  color: rgba(244, 246, 241, 0.42);
}

/* ---------- B) HLAVNÍ CTA – všechny varianty zeleného tlačítka ---------- */
:root .ep-btn-primary,
:root .ep-modal-clean-2__button,
:root .ep-quiz-button,
:root .ep-profile-quiz-button {
  background: var(--epd-grad);
  color: var(--epd-ink);
  border: 1px solid rgba(214, 240, 170, 0.55);
  box-shadow:
    0 0 0 1px rgba(140, 198, 63, 0.18),
    0 12px 34px rgba(140, 198, 63, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

:root .ep-btn-primary:hover,
:root .ep-modal-clean-2__button:hover,
:root .ep-quiz-button:hover,
:root .ep-profile-quiz-button:hover {
  color: var(--epd-ink);
  box-shadow:
    0 0 0 1px rgba(140, 198, 63, 0.3),
    0 16px 44px rgba(140, 198, 63, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(1.04);
}

:root .ep-btn-primary:active,
:root .ep-modal-clean-2__button:active {
  box-shadow:
    0 8px 22px rgba(140, 198, 63, 0.24),
    inset 0 2px 6px rgba(0, 40, 0, 0.25);
}

:root .ep-btn-arrow,
:root .ep-modal-clean-2__button-icon,
:root .ep-quiz-button-icon,
:root .ep-profile-quiz-button-icon {
  background: #050704;
  color: var(--epd-lime);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.28);
}

:root .ep-btn-primary:hover .ep-btn-arrow,
:root .ep-modal-clean-2__button:hover .ep-modal-clean-2__button-icon,
:root .ep-quiz-button:hover .ep-quiz-button-icon,
:root .ep-profile-quiz-button:hover .ep-profile-quiz-button-icon {
  background: #000000;
}

/* sekundární „Zkusit znovu“ */
:root .ep-restart-button,
:root .ep-profile-restart-button {
  background: transparent;
  color: var(--epd-text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

:root .ep-restart-button:hover,
:root .ep-profile-restart-button:hover {
  color: var(--epd-lime);
  border-color: rgba(140, 198, 63, 0.55);
  box-shadow: none;
}

/* ---------- C) SEKCE KALKULAČKY (#kalkulacka) ---------- */
:root .ep-calculator-section {
  color: var(--epd-text);
  background:
    radial-gradient(45% 55% at 70% 50%, rgba(140, 198, 63, 0.05), transparent 70%),
    #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

:root .ep-calc-title {
  color: #fbf8f6;
}

:root .ep-title-line {
  background: linear-gradient(90deg, #4fab47, #8cc63f);
}

:root .ep-calc-text {
  color: rgba(244, 246, 241, 0.72);
}

:root .ep-process-line {
  border-left-color: rgba(140, 198, 63, 0.22);
}

:root .ep-step-number {
  background: #060805;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--epd-lime);
  box-shadow: 0 0 0 4px #000000, 0 10px 24px rgba(0, 0, 0, 0.5);
}

:root .ep-step-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(140, 198, 63, 0.04), transparent 45%),
    rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:root .ep-step-icon {
  color: var(--epd-lime);
  background: rgba(140, 198, 63, 0.08);
}

:root .ep-step-card h3 {
  color: #fbf8f6;
}

:root .ep-step-card p {
  color: rgba(244, 246, 241, 0.56);
}

:root .ep-trust-strip {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:root .ep-trust-item {
  border-right-color: rgba(255, 255, 255, 0.07);
  color: rgba(244, 246, 241, 0.86);
}

:root .ep-trust-icon {
  color: rgba(244, 246, 241, 0.7);
}

/* karta s kalkulačkou – černé pozadí splývá s tmavým widgetem epet.cz */
:root .ep-calculator-card {
  background: #000000;
  border: 3px solid #a3d65a;
  box-shadow:
    0 0 0 1px rgba(140, 198, 63, 0.35),
    0 0 22px rgba(140, 198, 63, 0.55),
    0 0 80px rgba(140, 198, 63, 0.2),
    inset 0 0 26px rgba(140, 198, 63, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root .ep-calculator-card-glow {
  display: none;
}

:root .ep-iframe-wrap {
  background: #000000;
  border-color: transparent;
  box-shadow: none;
}

@media screen and (max-width: 1100px) {
  :root .ep-trust-item {
    border-bottom-color: rgba(255, 255, 255, 0.07);
  }
}

/* ---------- D) Široká kalkulačka v zeleném pásu + modální okno ---------- */
:root .epet-calculator-embed {
  background: #000000;
}

:root .ep-modal-clean-2__modal {
  background: rgba(0, 0, 0, 0.78) !important;
}

:root .ep-modal-clean-2__dialog {
  background: #000000;
  border: 2px solid #a3d65a;
  box-shadow:
    0 0 0 1px rgba(140, 198, 63, 0.3),
    0 0 26px rgba(140, 198, 63, 0.45),
    0 34px 90px rgba(0, 0, 0, 0.7);
}

:root .ep-modal-clean-2__frame-wrap,
:root .ep-modal-clean-2__iframe {
  background: #000000;
}

:root .ep-modal-clean-2__close {
  background: rgba(10, 13, 9, 0.94);
  color: var(--epd-text);
  border-color: rgba(255, 255, 255, 0.14);
}

:root .ep-modal-clean-2__close:hover {
  background: #000000;
  color: var(--epd-lime);
}

/* ---------- E) Kvízy – chybná odpověď zůstává „chybová“, ne zelená ---------- */
:root .ep-answer-button.is-wrong {
  border-color: rgba(240, 88, 92, 0.55);
}

:root .ep-answer-button.is-correct {
  border-color: rgba(74, 214, 128, 0.55);
}

:root .ep-compact-quiz__feedback,
:root .ep-mini-hot-quiz__feedback {
  color: var(--epd-error);
}

:root .ep-compact-quiz__feedback.is-success,
:root .ep-mini-hot-quiz__feedback.is-success {
  color: #4ad680;
}

:root .ep-compact-quiz__answer.is-wrong,
:root .ep-mini-hot-quiz__answer.is-wrong {
  border-color: rgba(240, 88, 92, 0.45);
  background: rgba(240, 88, 92, 0.06);
}

/* ---------- F) Ilustrace v SVG (barvy zapsané přímo v atributech) ---------- */
:root .ep-dyk-box [stroke="#5d3030"],
:root .ep-myth-slider [stroke="#5d3030"] {
  stroke: rgba(244, 246, 241, 0.78);
}

:root .ep-dyk-box [stroke="#d31718"],
:root .ep-myth-slider [stroke="#d31718"] {
  stroke: #8cc63f;
}

:root .ep-dyk-box [fill="#d31718"],
:root .ep-myth-slider [fill="#d31718"] {
  fill: #8cc63f;
}

:root .ep-myth-slider [fill="#fff"] {
  fill: #0a0d09;
}

/* ---------- G) Mobil ---------- */
@media screen and (max-width: 991px) {
  :root .ep-hero-bg-glow-red,
  :root .ep-calc-bg-red {
    left: -40px;
    width: 200px;
    opacity: 0.5;
  }

  :root .ep-hero-bg-glow-blue,
  :root .ep-calc-bg-gold {
    right: -30px;
    width: 170px;
    opacity: 0.45;
  }
}

@media screen and (max-width: 767px) {
  :root .ep-hero-bg-glow-red,
  :root .ep-calc-bg-red {
    width: 150px;
    opacity: 0.4;
  }

  :root .ep-hero-bg-glow-blue,
  :root .ep-calc-bg-gold {
    width: 130px;
    opacity: 0.6;
  }

  :root .ep-hero-benefit:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
  }

  /* oprava: na mobilu se skrytým <br> slepovala slova („Nezávazněověření“) */
  :root .ep-hero-benefit p br {
    display: inline;
  }
}