@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
}


body {
  font-family: 'Nunito', sans-serif;
  /* background-color: var(--bg-color); */
  /* background: #f7fff9; */
  background-color: var(--body-bg-color);
  color: var(--text-color);
  /* transition: background-color 0.3s, color 0.3s; */
}

/* section h2 {
 font-size: 32px !important;
 margin: 2px auto 20px;
} */


:root {
  /*todo GLOBAL */
  /* Obsht fon na stranitsata i osnovni cvetove za tekst */
  --body-bg-color: #f0efef;
  /* obsht fon na stranitsata */
  --text-color: #111827;
  /* osnoven cvqt na teksta */

  --second-p-color: #475569;
  /* vtorichen teksta, za podteksti */
  --auto-p-color: #FFFFFF;
  /* avtomatichen bel tekst, izpolzva se kym svetli elementi */

  /*todo FEATURES SECTION */
  /* Cvqtove za zaglavieto i kartite s funkcii */
  --features-title-color: #0f5a55;
  /* cvqt na zaglavieto v features sekciqta */
  --feature-card-bg-color: #ffffff;
  /* fon na vseki feature card */
  --feature-card-border-color: #e5e7eb;
  /* granca na card */
  --feature-card-box-shadow: rgba(2, 6, 23, .04);
  /* senka na card */
  --feature-card-box-shadow-hover: rgba(2, 6, 23, .07);
  /* senka pri hover */
  --feature-card-border-color-hover: #bbf7d0;
  /* cvqt na granica pri hover */

  --feature-card-icon-bg-color: #ecfdf5;
  /* fon na ikonata v kartata */
  --feature-card-icon-color: #065f46;
  /* cvqt na ikonata */

  --feature-card-h3-color: #111827;
  /* zaglavie h3 v kartata */
  --feature-card-p-color: #64748b;
  /* podteksten v kartata */
  --feature-card-link-color: #0f766e;
  /* link v kartata */
  --feature-card-link-hover-border-color: #22c55e;
  /* link border pri hover */
  --feature-card-link-hover-color: #065f46;
  /* link text pri hover */

  --feature-card-premium-bg-color: linear-gradient(180deg, #ffffff, #f0fdf4 60%, #ffffff);
  /* premium card gradient */
  --feature-card-premium-border-color: #bbf7d0;
  /* granca premium karti */
  --feature-card-premium-icon-bg-color: #d1fae5;
  /* ikonata fon v premium karti */
  --feature-card-premium-icon-color: #047857;
  /* ikonata cvqt v premium karti */

  /*todo    CALCULATOR SECTION */
  /* Cvqtove i stajling za demo kalkulatora */
  --demo-calculator-section-bg-color: rgb(250, 250, 250);
  /* fon na kalkulator sekciqta */
  --demo-calculator-section-h2-color: #0f5a55;
  /* zaglavie h2 v kalkulatora */
  --demo-calculator-error-color: #dc2626;
  --demo-calculator-result-color: #0f5132;


  --demo-calculator-input-border-color: #d1fae5;
  /* granca na input polene */
  --demo-calculator-input-focus-border-color: #16a34a;
  /* granca pri fokus */
  --demo-calculator-input-box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  /* senka pri fokus */
  --demo-calculator-calc-mult-color: #065f46;
  /* cvqt na mnozhitelia v izchisleniqta */

  --demo-calcumator-btn-bg-color: #16a34a;
  /* fon na button za kalkulaciq */
  --demo-calcumator-btn-color: #FFFFFF;
  /* tekst na button */
  --demo-calcumator-results-bg-color: #f0fdf4;
  --demo-calcumator-btn-hover-bg-color: #0f5a55;
  --demo-calcumator-results-shadow: 0 10px 20px rgba(16, 185, 129, 0.08);
  /* hover cvqt na button */

  --demo-calcumator-results-color: #0f5a55;
  /* cvqt na rezultata */

  /*todo     WHY SECTION */
  /* Cvqtove za Why sekciqta, kartite, progress bar i partneri */
  --why-bg-color: #f7fff9;
  /* obsht fon na sekciqta */

  --why-badge-bg-color: #d1fae5;
  /* fon na badge */
  --why-badge-color: #047857;
  /* tekst na badge */

  --why-jar-fill-color1: #cbd5e0;
  /* cvqtove za grafiki/indikatori */
  --why-jar-fill-color2: #4299e1;
  --why-jar-fill-color3: #48bb78;
  --why-jar-fill-color4: #cbd5e0;

  --why-jar-fill-blur-1: rgba(66, 153, 225, 0.3);
  /* blur efekt za jar */
  --why-jar-fill-blur-2: rgba(16, 185, 129, 0.08);

  --why-progress-ball-color: #22c55e;
  /* cvqt na balona v progress bar */
  --why-progress-blur: rgba(22, 197, 94, 0.16);
  /* blur na progress */
  --why-progress-target-color: #065f46;
  /* cvqt na target markera */

  --why-feature-border-color: #d7dfe7;
  /* granca na kartite */
  --why-feature-icon-color: #0f766e;
  /* ikonata cvqt */

  --why-feature-icon-bg-color-1: #bbf7d0;
  /* fonove za ikonite (razlichni efekti) */
  --why-feature-icon-bg-color-2: rgba(16, 185, 129, 0.08);
  --why-feature-icon-bg-color-3: rgba(22, 197, 94, 0.08);
  --why-feature-icon-bg-color-4: rgba(22, 197, 94, .18);
  --why-feature-icon-bg-color-5: rgba(16, 185, 129, 0.08);
  --why-feature-icon-bg-color-6: rgba(22, 197, 94, .24);

  --why-section-bg-color: linear-gradient(to right, #107557, #0F8459, #0F5A55);
  /* gradient fon na why sekciqta */
  --why-section-small-heading-color: blanchedalmond;
  /* cvqt na malkite zaglavia */
  --why-section-card-bg-color: whitesmoke;
  /* kartite fon */
  --why-section-card-border-color: #e5e7eb;
  /* granca karti */
  --why-section-card-box-shadow: 0 10px 26px rgba(2, 6, 23, .04);
  /* senka karti */

  --why-section-card-hover-box-shadow: 0 16px 32px rgba(2, 6, 23, .07);
  /* hover senka */
  --why-section-card-hover-border-color: #bbf7d0;
  /* hover granca */

  --why-section-card-icon-bg-color: #ecfdf5;
  /* ikonata fon */
  --why-section-card-icon-color: #065f46;
  /* cvqt ikonata */
  --why-section-card-h3-color: #111827;
  /* h3 tekst */
  --why-section-card-p-color: #64748b;
  /* p tekst */

  /*todo    WHY PARTNERS */
  --why-partner-section-bg-color: linear-gradient(0deg, #f0fdf4, #ffffff);
  /* fon na partner strip */
  --why-partner-section-border-color: #bbf7d0;

  --why-partner-section-why-btn-bg-color: #22c55e;
  /* green CTA bg */
  --why-partner-section-why-btn-color: #062a17;
  /* green CTA text */
  --why-partner-section-why-btn-border-color: #a7f3d0;
  /* green CTA border */
  --why-partner-section-why-btn-box-shadow-color: rgba(34, 197, 94, .18);
  /* shadow CTA */
  --why-partner-section-why-btn-hover-box-shadow-color: 0 16px 28px rgba(34, 197, 94, .24);
  --why-partner-section-why-btn-alt-bg-color: #FFFFFF;
  /* alt button bg */
  --why-partner-section-why-btn-alt-color: #065f46;
  /* alt button text */
  --why-partner-section-why-btn-alt-border-color: #bbf7d0;
  /* alt border */
  --why-partner-section-why-btn-alt-box-shadow: 0 12px 24px rgba(2, 6, 23, .06);

  /*todo      PARTNERS SECTION */
  --partners-section-bg-color: #f0f0f0;
  /* fon partners sekciqta */
  --partners-section-border-color: #e5e7eb;
  /* granica partners sekciqta */
  --partners-section-h2-color: #0f5a55;
  /* h2 tekst */

  --partner-card-bg-color: #f7fff9;
  /* fon karti */
  --partner-card-border-color: #bbf7d0;
  /* granca karti */
  --partner-card-border-color: 0 8px 24px rgba(2, 6, 23, .04);
  /* shadow na karti */
  --partner-card-hover-border-color: 0 14px 28px rgba(2, 6, 23, .06);
  /* hover shadow */
  --partner-card-zauchenikabg-bg-color: #FFFFFF;
  /* bg special card */
  --partner-card-p-color: #111827;
  /* tekst karti */

  --partner-btn-bg-color: #22c55e;
  /* bg button */
  --partner-btn-color: #062a17;
  /* text button */
  --partner-btn-border-color: #a7f3d0;
  /* border button */

  --partner-btn--hover-bg-color: #0f5a55;
  /* hover bg */
  --partner-btn-hover-color: #ffffff;
  /* hover text */

  /* CURRENT PLAN */
  --current-plan-section-bg-color: #f0f0f0;
  /* fon current plan sekciqta */
  --current-plan-section-p-color: black;
  /* tekst plan */

  --plans-notice-bg-color: rgba(22, 197, 94, 0.08);
  /* notice bg */
  --plans-notice-border-color: #16a34a;
  /* notice border */
  --plans-notice-p-color: #065f46;
  /* notice text */

}


.invert-root {
  /*todo GLOBAL */
  /* Obsht fon na stranitsata i osnovni cvetove za tekst */
  --body-bg-color: #252525;
  /* tŭmen fon */
  /* obsht fon na stranitsata */
  --text-color: #F3F4F6;
  /* svetŭl tekst */
  /* osnoven cvqt na teksta */

  --second-p-color: #CBD5E1;
  /* podteksti za kontrast */
  /* vtorichen teksta, za podteksti */
  --auto-p-color: #FFFFFF;
  /* avtomatichen bel tekst, izpolzva se kym svetli elementi */
  /* avtomatichen bel tekst, izpolzva se kym svetli elementi */

  /* FEATURES SECTION */
  /* Cvqtove za zaglavieto i kartite s funkcii */
  --features-title-color: #A7F3D0;
  /* cvqt na zaglavieto v features sekciqta #1F2937*/
  --feature-card-bg-color: #313131;
  /* fon na vseki feature card */
  --feature-card-border-color: #374151;
  /* granca na card */
  --feature-card-box-shadow: rgba(0, 0, 0, .4);
  /* senka na card */
  --feature-card-box-shadow-hover: rgba(0, 0, 0, .6);
  /* senka pri hover */
  --feature-card-border-color-hover: #22C55E;
  /* cvqt na granica pri hover */

  --feature-card-icon-bg-color: #065F46;
  /* fon na ikonata v kartata */
  --feature-card-icon-color: #ECFDF5;
  /* cvqt na ikonata */

  --feature-card-h3-color: #F3F4F6;
  /* zaglavie h3 v kartata */
  --feature-card-p-color: #CBD5E1;
  /* podteksten v kartata */
  --feature-card-link-color: #A7F3D0;
  /* link v kartata */
  --feature-card-link-hover-border-color: #22C55E;
  /* link border pri hover */
  --feature-card-link-hover-color: #ECFDF5;
  /* link text pri hover */

  --feature-card-premium-bg-color: #2b3325;
  /* premium card gradient */
  --feature-card-premium-border-color: #22C55E;
  /* granca premium karti */
  --feature-card-premium-icon-bg-color: #065F46;
  /* ikonata fon v premium karti */
  --feature-card-premium-icon-color: #ECFDF5;
  /* ikonata cvqt v premium karti */

  /* CALCULATOR SECTION */
  /* Cvqtove i stajling za demo kalkulatora */
  --demo-calculator-section-bg-color: #253a3b;
  /* fon na kalkulator sekciqta */
  --demo-calculator-section-h2-color: #ffffff;
  /* zaglavie h2 v kalkulatora */
  --demo-calculator-error-color: orange;
  --demo-calculator-result-color: greenyellow;

  --demo-calculator-input-border-color: #22C55E;
  /* granca na input polene */
  --demo-calculator-input-focus-border-color: #34d34e;
  /* granca pri fokus */
  --demo-calculator-input-box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4);
  /* senka pri fokus */
  --demo-calculator-calc-mult-color: #A7F3D0;
  /* cvqt na mnozhitelia v izchisleniqta */

  --demo-calcumator-btn-bg-color: #11911b;
  /* fon na button za kalkulaciq */
  --demo-calcumator-btn-color: #F3F4F6;
  --demo-calcumator-results-bg-color: rgb(40, 40, 40);
  --demo-calcumator-results-shadow: 0 10px 20px rgba(230, 230, 230, 0.08);

  /* tekst na button */
  --demo-calcumator-btn-hover-bg-color: #22C55E;
  /* hover cvqt na button */

  --demo-calcumator-results-color: #F3F4F6;
  /* cvqt na rezultata */

  /* WHY SECTION */
  /* Cvqtove za Why sekciqta, kartite, progress bar i partneri */
  --why-bg-color: #111827;
  /* obsht fon na sekciqta */

  --why-badge-bg-color: #065F46;
  /* fon na badge */
  --why-badge-color: #ECFDF5;
  /* tekst na badge */

  --why-jar-fill-color1: #1E293B;
  /* cvqtove za grafiki/indikatori */
  --why-jar-fill-color2: #2563EB;
  --why-jar-fill-color3: #16A34A;
  --why-jar-fill-color4: #1E293B;

  --why-jar-fill-blur-1: rgba(37, 99, 235, 0.3);
  /* blur efekt za jar */
  --why-jar-fill-blur-2: rgba(16, 163, 84, 0.08);

  --why-progress-ball-color: #34D399;
  /* cvqt na balona v progress bar */
  --why-progress-blur: rgba(34, 197, 94, 0.16);
  /* blur na progress */
  --why-progress-target-color: #22C55E;
  /* cvqt na target markera */

  --why-feature-border-color: #374151;
  /* granca na kartite */
  --why-feature-icon-color: #A7F3D0;
  /* ikonata cvqt */

  --why-feature-icon-bg-color-1: #065F46;
  /* fonove za ikonite (razlichni efekti) */
  --why-feature-icon-bg-color-2: rgba(16, 163, 84, 0.08);
  --why-feature-icon-bg-color-3: rgba(34, 197, 94, 0.08);
  --why-feature-icon-bg-color-4: rgba(34, 197, 94, .18);
  --why-feature-icon-bg-color-5: rgba(16, 163, 84, 0.08);
  --why-feature-icon-bg-color-6: rgba(34, 197, 94, .24);

  --why-section-bg-color: linear-gradient(to right, #065F46, #0F8459, #0F5A55);
  /* gradient fon na why sekciqta */
  --why-section-small-heading-color: #F3F4F6;
  /* cvqt na malkite zaglavia #1F2937*/
  --why-section-card-bg-color: #313131;
  /* kartite fon */
  --why-section-card-border-color: #374151;
  /* granca karti */
  --why-section-card-box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
  /* senka karti */

  --why-section-card-hover-box-shadow: 0 16px 32px rgba(0, 0, 0, .7);
  /* hover senka */
  --why-section-card-hover-border-color: #225836;
  /* hover granca */

  --why-section-card-icon-bg-color: #065F46;
  /* ikonata fon */
  --why-section-card-icon-color: #F3F4F6;
  /* cvqt ikonata */
  --why-section-card-h3-color: #F3F4F6;
  /* h3 tekst */
  --why-section-card-p-color: #CBD5E1;
  /* p tekst */

  /* WHY PARTNERS */
  --why-partner-section-bg-color: linear-gradient(0deg, #1F2937, #111827);
  /* fon na partner strip */
  --why-partner-section-border-color: #22C55E;

  --why-partner-section-why-btn-bg-color: #22C55E;
  /* green CTA bg */
  --why-partner-section-why-btn-color: #111827;
  /* green CTA text */
  --why-partner-section-why-btn-border-color: #34D399;
  /* green CTA border */
  --why-partner-section-why-btn-box-shadow-color: rgba(34, 197, 94, .18);
  /* shadow CTA */
  --why-partner-section-why-btn-hover-box-shadow-color: 0 16px 28px rgba(34, 197, 94, .24);
  --why-partner-section-why-btn-alt-bg-color: #111827;
  /* alt button bg */
  --why-partner-section-why-btn-alt-color: #A7F3D0;
  /* alt button text */
  --why-partner-section-why-btn-alt-border-color: #22C55E;
  /* alt border */
  --why-partner-section-why-btn-alt-box-shadow: 0 12px 24px rgba(0, 0, 0, .6);

  /* PARTNERS SECTION #1F2937*/
  --partners-section-bg-color: transparent;
  /* fon partners sekciqta */
  --partners-section-border-color: #374151;
  /* granica partners sekciqta */
  --partners-section-h2-color: #A7F3D0;
  /* h2 tekst */

  --partner-card-bg-color: #313131;
  /* fon karti */
  --partner-card-border-color: #22C55E;
  /* granca karti */
  --partner-card-border-color: 0 8px 24px rgba(0, 0, 0, .6);
  /* shadow na karti */
  --partner-card-hover-border-color: 0 14px 28px rgba(0, 0, 0, .8);
  /* hover shadow */
  --partner-card-zauchenikabg-bg-color: transparent;
  /* bg special card */
  --partner-card-p-color: #F3F4F6;
  /* tekst karti */

  --partner-btn-bg-color: #22C55E;
  /* bg button */
  --partner-btn-color: #111827;
  /* text button */
  --partner-btn-border-color: #34D399;
  /* border button */

  --partner-btn--hover-bg-color: #065F46;
  /* hover bg */
  --partner-btn-hover-color: #F3F4F6;
  /* hover text */

  /* CURRENT PLAN #1F2937*/
  --current-plan-section-bg-color: transparent;
  /* fon current plan sekciqta */
  --current-plan-section-p-color: #F3F4F6;
  /* tekst plan */

  --plans-notice-bg-color: rgba(34, 197, 94, 0.2);
  /* notice bg */
  --plans-notice-border-color: #22C55E;
  /* notice border */
  --plans-notice-p-color: #d8ffed;
  /* notice text */

}



/*!       HERO      */
/*!       HERO      */
/*!       HERO      */

.hero-section {
  width: 100%;
  /* background: url("/Images/HeroSecionBackground.png") no-repeat center center/cover; */
  background: linear-gradient(to right, #107557, #0F8459, #0F5A55);
  height: 90vh;
  min-height: 600px;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8%;
  position: relative;
  overflow: hidden;
}


.hero-div-left {
  width: 55%;
  z-index: 2;
  /* display: flex;
 justify-content: center;
 align-items: left;
 flex-direction: column;
 gap: 1px;*/
}

.hero-section h1 {
  font-size: 1rem;
  color: #a3bffa;
  margin-bottom: 1rem;
  letter-spacing: 2px;
}

.hero-section h2 {
  font-size: 4.5rem;
  line-height: 1.1;
  margin: 20px 0;
  background: linear-gradient(45deg, #fff 60%, #ebf8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

.hero-span-h2 {
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
  color: white;
}

.hero-span-h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #4299e1 0%, #48bb78 100%);
  border-radius: 10px;
  transform-origin: left;
  animation: underline 1.2s ease-out;
}

@keyframes underline {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

.hero-section p {
  font-size: 1rem;
  max-width: 800px;
  line-height: 1.5;
  color: #d7dfe7;
  /* color: #cbd5e0; */
  margin: 2rem 0;
  /* font-family: "Playpen Sans", cursive; */
  font-weight: 500;
}

#aproved-teachers {
  color: yellow;
  font-weight: 600;
  text-shadow: none;


}


#hero-cta-btn {
  /* background: linear-gradient(45deg, #4299e1 0%, #48bb78 100%); */
  /* background: #48bb78; */
  /* background: #58aef5; */
  /* background: #98d1ff; */
  background: pink;
  color: black;
  border-radius: 12px;
  font-size: 1.1rem;
  padding: 18px 35px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

#hero-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(66, 153, 225, 0.3);
}

.hero-download-btn {
  /* border: 1px solid darkgray; */
  border: 1px solid rgb(201, 200, 200);
  font-size: 1.1rem;
  border-radius: 12px;
  padding: 18px 24px;
  color: rgb(211, 211, 211);
  text-decoration: none;
  background: none;
  transition: all 0.3s ease;

}

.hero-download-btn:hover {
  /* transform: translateY(-3px); */
  /* background: linear-gradient(45deg, #4299e1 0%, #48bb78 100%); */
  background: rgba(211, 211, 211, 0.5);
  color: black;
  border-color: rgba(211, 211, 211, 0.5);
  backdrop-filter: blur(50px);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  /* box-shadow: 0 15px 30px rgba(66, 153, 225, 0.3); */
}

.cta-btns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-section a {
  text-decoration: none;
  color: white;
}

.hero-section img {
  width: 45%;
  max-width: 600px;
  height: auto;
  animation: float 4s ease-in-out infinite;
  /* filter: invert(75%); */
}

/* @keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-20px)
  }
} */


/* #aproved-by-teachers {
  margin-top: 40px;
  font-size: 1.075rem;
  font-family: playpen sans;
  font-weight: 500 !important;
  font-style: italic;
} */



.scroll-down {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.scroll-down svg {
  animation: bounce 2s infinite;
}

/* Анимация за стрелката */
@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(8px);
  }

  60% {
    transform: translateY(4px);
  }
}



@media (max-width: 1480px) {
  .hero-section {
    height: auto;
    max-height: calc(90vh - 70px);
  }

  .hero-div-left {
    width: 100%;
  }


  .hero-section h2 {
    font-size: 3.825rem;
  }

  .hero-section p {
    font-size: 0.95rem;
    max-width: 500px;
    line-height: 1.8;
    color: #cbd5e0;
    text-align: left;
  }

  .hero-section img {
    width: 40%;
    margin-top: 40px;
  }

  #hero-cta-btn {
    font-size: 16px;
    padding: 14px 18px;
  }

  .hero-download-btn {
    font-size: 16px;
    padding: 14px 18px;
  }
}



@media (max-width: 1200px) {
  .hero-section {
    max-height: calc(90vh - 70px);
  }

  .hero-div-left {
    width: 100%;
    scale: 0.9 !important;
  }

  .hero-section img {
    width: 20rem !important;
    height: auto;
  }

  .hero-section h2 {
    font-size: 3.25rem;
  }

  .hero-section p {
    font-size: 1rem;
    max-width: 600px;
    line-height: 1.8;
    color: #cbd5e0;
    margin: 32px auto;
  }

  .cta-btns {
    gap: 15px;
  }

}





@media (max-width: 940px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
    padding: 60px 20px 15px 20px;
    height: auto;
    gap: 12px;
    max-height: none;
  }

  #installBtn {
    margin: auto;
  }

  .hero-section img {
    width: 60%;
    max-width: 300px;
    height: auto;
    margin-top: -17.5px;
  }

  .hero-section h1 {
    font-size: 1rem;
  }

  .hero-section h2 {
    font-size: 2.8rem;
  }

  .hero-section p {
    font-size: 0.95rem;
    text-align: center;
  }

  .cta-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }

  #hero-cta-btn {
    width: 80%;
    min-width: 290px;
    justify-content: center;
  }
}




/* ===== FEATURES SECTION (light + green accent) ===== */
.features-section {
  width: 100%;
  /* background: #f7fff9; */
  /* много светло зеленикаво */
  /* border-top: 1px solid #e5e7eb; */
  /* border-bottom: 1px solid #e5e7eb; */
  padding: clamp(32px, 5vw, 64px) 6%;
}

.features-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.features-title {
  font-size: clamp(22px, 3.6vw, 28px);
  margin: 0 0 18px 0;
  color: var(--features-title-color);
  /* тъмно зелено заглавие */
  font-weight: 900;
}

.features-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media(min-width:720px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width:1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  background: var(--feature-card-bg-color);
  border: 1px solid var(--feature-card-border-color);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 26px var(--feature-card-box-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px var(--feature-card-box-shadow-hover);
  border-color: var(--feature-card-border-color-hover);
  /* зелен акцент при hover */
}

.feature-card .icon {
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--feature-card-icon-bg-color);
  color: var(--feature-card-icon-color);
}

.feature-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--feature-card-h3-color);
}

.feature-card p {
  margin: 0;
  color: var(--feature-card-p-color);
  line-height: 1.6;
}

.feature-link {
  margin-top: auto;
  /* линкът отива долу */
  display: inline-block;
  color: var(--feature-card-link-color);
  font-weight: 800;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.feature-link:hover {
  border-color: var(--feature-card-link-hover-border-color);
  color: var(--feature-card-link-hover-color);
}

/* Premium карта – леко отличима */
.feature-card.premium {
  background: var(--feature-card-premium-bg-color);
  border-color: var(--feature-card-premium-border-color);
  position: relative;
}

.feature-card.premium .icon {
  background: var(--feature-card-premium-icon-bg-color);
  color: var(--feature-card-premium-icon-color);
}

/* .feature-card.premium p,
.feature-card.premium a,
#article-heading {
  text-decoration: line-through;
  font-style: italic;
  cursor: not-allowed;
} */

.feature-card.premium #gratis-period-info {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 77.5px;
  transform: rotate(-12.5deg);
  /* background-color: crimson;
  padding: 4px 8px;
  color: white;
  border-radius: 10px;
  font-size: 14px;
  font-family: "playpen sans", cursive;
  font-weight: 600;
  text-transform: capitalize; */
}

.free-premium a {
  width: 90%;
}

#more-info-paid-plans {
  position: absolute;
  bottom: 7.5px;
  right: 12.5px;
  font-size: 10px;
  /* font-style: italic; */
  color: var(--second-p-color);
}


#right-gratis-info {
  text-align: right;
  font-size: 10px;
  font-style: italic;
  color: var(--second-p-color);
  font-weight: 400;
}

#right-gratis-info sup {
  font-weight: 600;
  font-style: normal;
  font-size: 7.25px;
  color: var(--second-p-color);
}





/* ===== DEMO CALCULATOR SECTION ===== */
.demo-calculator {
  width: 100%;
  background: var(--demo-calculator-section-bg-color);
  padding: clamp(48px, 8vw, 80px) 6%;
  /* border-top: 1px solid #e5e7eb; */
  /* border-bottom: 1px solid #e5e7eb; */
  text-align: center;
}

.demo-wrap {
  max-width: 800px;
  margin: 0 auto;
}

.demo-wrap h2 {
  font-size: clamp(22px, 3vw, 32px);
  color: var(--demo-calculator-section-h2-color);
  font-weight: 900;
  margin-bottom: 12px;
}

.demo-wrap p {
  color: var(--second-p-color);
  font-family: "Playpen Sans", cursive;
  margin-bottom: 28px;
  line-height: 1.6;
}

/* форма */
.calc-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.calc-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-inputs input {
  width: 120px;
  padding: 10px 12px;
  border: 2px solid var(--demo-calculator-input-border-color);
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.calc-inputs input:focus {
  border-color: var(--demo-calculator-input-focus-border-color);
  box-shadow: var(--demo-calculator-input-box-shadow);
}

.calc-mult {
  font-weight: 700;
  color: var(--demo-calculator-calc-mult-color);
}

#calc-btn {
  background: var(--demo-calcumator-btn-bg-color);
  color: var(--demo-calcumator-btn-color);
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

#calc-btn:hover {
  background: var(--demo-calcumator-btn-hover-bg-color);
  transform: translateY(-2px);
}

.calc-result {
  font-family: "Playpen Sans", cursive;
  font-size: 1.1rem;
  color: var(--demo-calcumator-results-color);
  font-weight: 600;
  background: var(--demo-calcumator-results-bg-color);
  border-radius: 12px;
  padding: 14px 20px;
  display: inline-block;
  min-width: 220px;
  box-shadow: var(--demo-calcumator-results-shadow);
}




/* ===== WHY SECTION ===== */
.why-section {
  width: 100%;
  background: var(--why-section-bg-color);
  /* background: #f7fff9; */
  /* много светло зеленикаво */
  /* border-top: 1px solid #e5e7eb;
 border-bottom: 1px solid #e5e7eb; */
  padding: clamp(40px, 7vw, 80px) 6%;
}

.why-wrap {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.why-section h2 {
  font-size: clamp(22px, 3.6vw, 32px);
  color: var(--auto-p-color);
  font-weight: 900;
  margin: 0;
}

.why-sub {
  color: var(--why-section-small-heading-color);
  margin: 17.5px auto 30px;
  max-width: 56ch;
  font-family: playpen sans, cursive;
  font-size: 12px;
}

/* Grid с карти */
.why-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}

@media(min-width:760px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width:1080px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.why-card {
  background: var(--why-section-card-bg-color);
  border: 1px solid var(--why-section-card-border-color);
  border-radius: 16px;
  padding: 18px;
  text-align: left;
  box-shadow: var(--why-section-card-box-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.why-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--why-section-card-hover-box-shadow);
  border-color: var(--why-section-card-hover-border-color);
}

.why-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--why-section-card-icon-bg-color);
  color: var(--why-section-card-icon-color);
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}

.why-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--why-section-card-h3-color);
}

.why-card p {
  margin: 0;
  color: var(--why-section-card-p-color);
  line-height: 1.6;
}

/* Партньорска лента */
.why-partner {
  margin: 18px auto 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--why-partner-section-bg-color);
  border: 1px solid var(--why-partner-section-border-color);
  border-radius: 14px;
  padding: 10px 14px;
}

.why-partner img {
  height: 34px;
  width: auto;
}

/* CTA бутони в края */
.why-cta {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.why-btn {
  background: var();
  color: var(--why-partner-section-why-btn-color);
  border: 1px solid var(--why-partner-section-why-btn-border-color);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px var(--why-partner-section-why-btn-box-shadow-color);
  transition: transform .15s ease, box-shadow .15s ease;
}

.why-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--why-partner-section-why-btn-hover-box-shadow-color);
}

.why-btn.alt {
  background: var(--why-partner-section-why-btn-alt-bg-color);
  color: var(--why-partner-section-why-btn-alt-color);
  border-color: var(--why-partner-section-why-btn-alt-border-color);
}

.why-btn.alt:hover {
  box-shadow: var(--why-partner-section-why-btn-alt-box-shadow);
}







/* ===== PARTNERS SECTION ===== */
.partners-section {
  background: var(--partners-section-bg-color);
  padding: clamp(40px, 7vw, 80px) 6%;
  text-align: center;
  border-top: 1px solid var(--partners-section-border-color);
}

.partners-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.partners-section h2 {
  color: var(--partners-section-h2-color);
  font-weight: 900;
  margin-bottom: 8px;
  font-size: clamp(22px, 3vw, 30px);
}

.partners-section p {
  color: var(--second-p-color);
  margin-bottom: 26px;
  line-height: 1.2;
}

.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.partner-card {
  background: var(--partner-card-bg-color);
  border: 1px solid var(--partner-card-border-color);
  border-radius: 14px;
  padding: 16px 20px;
  width: 220px;
  text-align: center;
  box-shadow: var(--partner-card-border-color);
  transition: transform .15s ease, box-shadow .15s ease;
}

.partner-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--partner-card-hover-border-color);
}

.partner-card img {
  height: 60px;
  width: auto;
  margin-bottom: 8px;
}

#zauchenikabg {
  background-color: var(--partner-card-zauchenikabg-bg-color);
  border-radius: 20px;
  padding: 4px;
}

#icdsoft {
  height: 36px;
  width: auto;
  margin-bottom: 30px;
}

.partner-card p {
  margin: 0;
  color: var(--partner-card-p-color);
  font-size: .95rem;
}

.partner-cta {
  margin-top: 24px;
}

.partner-btn {
  background: var(--partner-btn-bg-color);
  color: var(--partner-btn-color);
  border: 1px solid var(--partner-btn-border-color);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}

.partner-btn:hover {
  background: var(--partner-btn--hover-bg-color);
  color: var(--partner-btn-hover-color);
  transition: .2s;
}


.invert-root #zauchenikabg {
  /* filter: brightness(1.5); */
  background-color: white;
  border-radius: 8px;
}










/* ===== PREMIUM / PLANS ===== */

.current-plan {
  background-color: var(--current-plan-section-bg-color);
  padding-bottom: 50px;
  margin: 0;
  width: 100%;
  text-align: center;
}

.current-plan #heading {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  margin: auto 12.5px;
  color: var(--current-plan-section-p-color);
}

.plans-notice {
  text-align: center;
  background: var(--plans-notice-bg-color);
  border: 2px dashed var(--plans-notice-border-color);
  color: var(--plans-notice-p-color);
  border-radius: 12px;
  padding: 15px 20px;
  margin: auto;
  /* margin: 20px auto 30px; */
  max-width: 750px;
  line-height: 1.5;
  animation: pulseGreen 3s infinite;
}

@keyframes pulseGreen {

  0%,
  100% {
    background-color: rgba(22, 197, 94, 0.08);
  }

  50% {
    background-color: rgba(22, 197, 94, 0.16);
  }
}


#upcoming-price-list {
  font-style: italic;
  font-size: 11px;
  line-height: 1.0 !important;
}





/*todo   TUKA           */
/*!          TUKA           */
/*!          TUKA           */

.plans-section {
  background: linear-gradient(180deg, #ffffff, #f0fdf4 70%, #ffffff);
  /* border-top: 1px solid #e5e7eb; */
  padding: clamp(40px, 7vw, 80px) 6%;
  display: none;
}

.plans-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.plans-head {
  text-align: center;
  margin-bottom: 16px;
}

.plans-head h2 {
  color: #065f46;
  font-weight: 900;
  font-size: clamp(22px, 3.6vw, 32px);
  margin: 0;
}

.plans-sub {
  color: #475569;
  margin: 8px auto 16px;
  max-width: 60ch;
}

/* billing toggle */
.billing-toggle {
  display: inline-flex;
  gap: 8px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 6px;
}

.bill-btn {
  background: #ffffff;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 800;
  color: #065f46;
  cursor: pointer;
}

.bill-btn.active {
  background: #22c55e;
  color: #062a17;
  border-color: #a7f3d0;
  box-shadow: 0 8px 18px rgba(34, 197, 94, .18);
}

.save-pill {
  margin-left: 6px;
  background: #bbf7d0;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 12px;
}

/* grid */
.plans-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media(min-width:900px) {
  .plans-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

.plan-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .05);
  display: flex;
  flex-direction: column;
  /* padding: 20px 16px; */
  /* justify-content: space-between; */
  gap: 25px;
  /* height: 500px; */
}

.plan-card.highlight {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #ffffff, #f6fff9);
}

.plan-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-head .badge {
  align-self: flex-start;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
}

.plan-card h3 {
  margin: 0;
  font-size: 20px;
  color: #0f5a55;
}

.price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.amount {
  font-size: 24px;
  font-weight: 900;
  color: #111827;
}

.per {
  color: #64748b;
}

.short {
  margin: 0;
  color: #475569;
}

.feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feat-list li {
  color: #111827;
}

.muted {
  color: #94a3b8;
  text-decoration: line-through;
}

.lock {
  color: #94a3b8;
  margin-left: 6px;
}

.plan-cta {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  background: #ffffff;
  color: #065f46;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
}

.plan-cta.primary {
  background: #22c55e;
  color: #062a17;
  border-color: #a7f3d0;
  box-shadow: 0 10px 24px rgba(34, 197, 94, .18);
}

.plan-cta:hover {
  filter: brightness(0.98);
}

/* promo line */
.promo-line {
  margin: 18px auto 2px;
  max-width: 640px;
  text-align: center;
}

.promo-line label {
  display: block;
  color: #065f46;
  font-weight: 800;
  margin-bottom: 8px;
}

.promo-box {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

#promo-code {
  width: 220px;
  padding: 10px 12px;
  border: 2px solid #d1fae5;
  border-radius: 10px;
  outline: none;
  text-align: center;
}

#promo-code:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}

#promo-apply {
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

#promo-apply:hover {
  background: #0f5a55;
}

.promo-msg {
  margin: 8px 0 0;
  color: #065f46;
}

/* FAQ */
.plans-faq {
  margin-top: 18px;
  border-top: 1px dashed #bbf7d0;
  padding-top: 12px;
}

.plans-faq details {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 0;
}

.plans-faq summary {
  cursor: pointer;
  font-weight: 800;
  color: #0f5a55;
}

.plans-faq p {
  margin: 8px 0 0;
  color: #475569;
  line-height: 1.6;
}

.currency-note {
  margin-top: 12px;
  text-align: center;
  color: #64748b;
  font-size: .9rem;
}