:root {
     --primary: #1e9452;
     --primary-600: #187c45;
     --primary-700: #136d3b;
     --primary-50: #eaf7f0;
     --text: #0b1a13;
     --muted: #5c6b63;
     --border: #e7efe9;
     --bg: #ffffff;
     --shadow: 0 8px 24px rgba(16, 94, 54, .08);
     --radius: 14px;


     --fs-xxl: clamp(28px, 4vw + .5rem, 48px);
     --fs-xl: clamp(22px, 2.4vw + .5rem, 34px);
     --fs-lg: clamp(18px, 1.4vw + .5rem, 22px);
     --fs-md: 16px;
     --fs-sm: 14px;


     --container: 1200px;
     --pad-x: clamp(16px, 3.2vw, 32px);

       --wa-green:#25D366;
  --wa-dark:#075E54;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
  --shadow:0 12px 32px rgba(2, 6, 23, .18);
  --radius:18px;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 html,
 body {
     height: 100%;
 }

 body {
     margin: 0;
     font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     color: var(--text);
     background: var(--bg);
     line-height: 1.6;
     text-rendering: optimizeLegibility;
 }

 img {
     max-width: 100%;
     display: block;
     height: auto;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 .container {
     max-width: var(--container);
     margin-inline: auto;
     padding-inline: var(--pad-x);
 }

 .accent {
     color: var(--primary);
 }

 .btn {
     --h: 48px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: .5rem;
     height: var(--h);
     padding-inline: 20px;
     font-weight: 600;
     border-radius: 999px;
     transition: .2s ease-in-out;
     border: 1px solid transparent;
     cursor: pointer;
     white-space: nowrap;
 }

 .btn--xl {
     --h: 56px;
     padding-inline: 28px;
     font-size: var(--fs-lg);
 }

 .btn--primary {
     background: var(--primary);
     color: #fff;
     box-shadow: 0 6px 14px rgba(30, 148, 82, .22);
 }

 .btn--primary:hover {
     background: var(--primary-600);
     transform: translateY(-1px);
 }

 .btn--primary:active {
     background: var(--primary-700);
     transform: translateY(0);
 }

 .btn--outline {
     background: #fff;
     color: var(--primary);
     border-color: var(--primary);
 }

 .btn--outline:hover {
     background: var(--primary-50);
 }

 .topbar {
     position: sticky;
     top: 0;
     z-index: 50;
     backdrop-filter: saturate(180%) blur(10px);
     background: color-mix(in oklab, #fff 82%, #ffffff00 18%);
     border-bottom: 1px solid var(--border);
 }

 .topbar__row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 72px;
     gap: 16px;
     padding: 10px;
 }

 .brand .logo { 
     width: 250px;
     padding: 10px;
     border-radius: 10px;
     box-shadow: var(--shadow);
     background-color: var(--primary);;
 }

 .menu {
     display: none;
 }

 .menu__list {
     display: flex;
     gap: 28px;
     align-items: center;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .menu__link {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: 10px 0;
     font-weight: 600;
     color: var(--muted);
     position: relative;
 }

 .menu__link::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: -6px;
     height: 2px;
     transform: scaleX(0);
     transform-origin: left;
     background: var(--primary);
     transition: transform .2s ease;
 }

 .menu__link:hover {
     color: var(--text);
 }

 .menu__link:hover::after {
     transform: scaleX(1);
 }

 .topbar__actions {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .burger {
     --bar-h: 2px;
     width: 44px;
     height: 44px;
     border-radius: 10px;
     border: 1px solid var(--border);
     background: #fff;
     display: inline-grid;
     place-items: center;
     gap: 5px;
     padding: 8px;
 }

 .burger__bar {
     display: block;
     width: 22px;
     height: var(--bar-h);
     background: var(--text);
     border-radius: 2px;
     transition: .2s;
 }

 .burger[aria-expanded="true"] .burger__bar:nth-child(1) {
     transform: translateY(6px) rotate(45deg);
 }

 .burger[aria-expanded="true"] .burger__bar:nth-child(2) {
     opacity: 0;
 }

 .burger[aria-expanded="true"] .burger__bar:nth-child(3) {
     transform: translateY(-6px) rotate(-45deg);
 }

 .drawer[hidden] {
     display: none;
 }

 .drawer {
     position: fixed;
     inset: 72px 0 auto 0;
     z-index: 49;
     background: #fff;
     border-bottom: 1px solid var(--border);
     box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
     animation: slideDown .2s ease-out;
 }

 @keyframes slideDown {
     from {
         transform: translateY(-8px);
         opacity: 0
     }

     to {
         transform: none;
         opacity: 1
     }
 }

 .drawer__nav {
     display: grid;
     gap: 10px;
     padding: 16px var(--pad-x) 20px;
 }

 .drawer__link {
     padding: 12px 14px;
     border-radius: 10px;
     font-weight: 600;
     color: var(--text);
 }

 .drawer__link:hover {
     background: var(--primary-50);
 }


 .hero-claim {
     padding: 48px 0;
 }

 .hero-claim__row {
     display: grid;
     gap: 28px;
     grid-template-columns: 1fr;
     align-items: center;
 }

 .hero-claim__content {
     display: grid;
     gap: 16px;
 }

 .hero-claim__title {
     font-size: var(--fs-xxl);
     line-height: 1.15;
     margin: 0;
 }

 .hero-claim__text {
     color: var(--muted);
     font-size: var(--fs-lg);
     margin: 0;
 }

 .hero-claim__actions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 6px;
 }

 

 .hero-claim__img {
     border-radius: var(--radius);
     box-shadow: var(--shadow);
 }


 .about-lead {
     padding: 56px 0;
     background: var(--primary-50);
 }

 .about-lead__inner {
     display: grid;
     gap: 12px;
 }

 .about-lead__title {
     font-size: var(--fs-xl);
     margin: 0 0 6px;
 }

 .about-lead__text {
     margin: 0;
     color: var(--muted);
 }


 .benefits {
     padding: 56px 0;
 }

 .benefits__title {
     font-size: var(--fs-xl);
     margin: 0 0 8px;
 }

 .benefits__subtitle {
     color: var(--muted);
     margin: 0 0 22px;
 }

 .benefits__grid {
     display: grid;
     gap: 16px;
 }

 .bcard {
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 18px 18px 16px;
     background: #fff;
     box-shadow: var(--shadow);
 }

 .bcard__title {
     margin: 0 0 6px;
     font-size: var(--fs-lg);
 }

 .bcard__text {
     margin: 0;
     color: var(--muted);
 }


 .stats {
     padding: 56px 0;
     background: linear-gradient(180deg, #fff 0, #f7fbf8 100%);
 }

 .stats__title {
     font-size: var(--fs-xl);
     margin: 0 0 18px;
 }

 .stats__grid {
     display: grid;
     gap: 12px;
 }

 .stat {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 18px;
     text-align: center;
     box-shadow: var(--shadow);
 }

 .stat__value {
     font-size: clamp(22px, 3.2vw, 38px);
     font-weight: 800;
     color: var(--primary);
 }

 .stat__note {
     color: var(--muted);
     font-weight: 600;
 }


 .how {
     padding: 56px 0;
 }

 .how__title {
     font-size: var(--fs-xl);
     margin: 0 0 8px;
 }

 .how__subtitle {
     color: var(--muted);
     margin: 0 0 20px;
 }

 .how__grid {
     display: grid;
     gap: 22px;
 }

 .how__steps {
     display: grid;
     gap: 14px;
 }

 .sitem {
     display: grid;
     grid-template-columns: 44px 1fr;
     gap: 12px;
     background: #fff;
     border: 1px solid var(--border);
     padding: 16px;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
 }

 .sitem__icon {
     color: var(--primary);
 }

 .sitem__title {
     margin: 0 0 4px;
     font-size: var(--fs-lg);
 }

 .sitem__text {
     margin: 0;
     color: var(--muted);
 }

 .how__img {
     border-radius: var(--radius);
     box-shadow: var(--shadow);
 }


 .reasons {
     padding: 56px 0;
     background: var(--primary-50);
 }

 .reasons__title {
     font-size: var(--fs-xl);
     margin: 0 0 18px;
 }

 .reasons__grid {
     display: grid;
     gap: 12px;
 }

 .r-item {
     display: grid;
     grid-template-columns: 56px 1fr;
     gap: 12px;
     background: #fff;
     border: 1px solid var(--border);
     padding: 16px;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
 }

 .r-item__title {
     margin: 0 0 4px;
     font-size: var(--fs-lg);
 }

 .r-item__text {
     margin: 0;
     color: var(--muted);
 }


 .leadform {
     padding: 56px 0;
 }

 .lf-card {
     max-width: 720px;
     margin-inline: auto;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: calc(var(--radius) + 4px);
     padding: 22px;
     box-shadow: var(--shadow);
 }

 .lf-title {
     margin: 0 0 8px;
     font-size: var(--fs-xl);
 }

 .lf-subtitle {
     margin: 0 0 18px;
     color: var(--muted);
 }

 .lf-form {
     display: grid;
     gap: 12px;
 }

 .lf-field {
     display: grid;
     gap: 6px;
 }

 .lf-label b {
     color: var(--primary);
 }

 .lf-input {
     height: 48px;
     border-radius: 12px;
     border: 1px solid var(--border);
     padding: 0 14px;
     font-size: var(--fs-md);
     transition: border-color .15s, box-shadow .15s;
 }

 .lf-input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
 }

 .lf-note {
     margin: 6px 0 0;
     color: var(--muted);
     font-size: var(--fs-sm);
 }


 .faq {
     padding: 56px 0;
     background: linear-gradient(180deg, #f7fbf8 0, #fff 100%);
 }

 .faq__title {
     font-size: var(--fs-xl);
     margin: 0 0 8px;
 }

 .faq__subtitle {
     color: var(--muted);
     margin: 0 0 18px;
 }

 .faq__grid {
     display: grid;
     gap: 14px;
 }

 .faq__col {
     display: grid;
     gap: 12px;
 }

 .faq-item {
     border: 1px solid var(--border);
     border-radius: var(--radius);
     background: #fff;
     box-shadow: var(--shadow);
 }

 .faq-q {
     width: 100%;
     text-align: left;
     background: transparent;
     border: 0;
     cursor: pointer;
     padding: 16px 18px;
     font-weight: 700;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .faq-sign {
     width: 20px;
     height: 20px;
     border-radius: 6px;
     border: 1.5px solid var(--primary);
     position: relative;
     flex: 0 0 20px;
 }

 .faq-sign::before,
 .faq-sign::after {
     content: "";
     position: absolute;
     inset: 0;
     margin: auto;
     background: var(--primary);
 }

 .faq-sign::before {
     width: 10px;
     height: 2px;
     top: 0px;
     left: 0cap;
 }

 .faq-sign::after {
     width: 2px;
     height: 10px;
     top: 0px;
     left: 0px;
     transition: .2s;
 }

 .faq-q[aria-expanded="true"] .faq-sign::after {
     transform: scaleY(0);
 }

 .faq-a {
     grid-template-rows: 0fr;
     display: grid;
     transition: grid-template-rows .25s ease;
 }

 .faq-a>* {
     overflow: hidden;
 }

 .faq-q[aria-expanded="true"]+.faq-a {
     grid-template-rows: 1fr;
 }

 .faq-a p {
     padding: 0 18px 0;
     margin: 0;
     color: var(--muted);
 }


 .footer {
     padding: 36px 0 46px;
     background: #0f2219;
     color: #dce8e1;
 }

 .footer__org {
    text-align: center;
     font-style: normal;
     margin: 0 0 12px;
     color: #cfe2d8;
 }

 .footer__copy {
     margin: 0;
     font-size: var(--fs-sm);
     color: #cfe2d8;
 }

 .footer__link {
     color: #9fe0b7;
     text-decoration: underline;
     text-underline-offset: 3px;
 }


 .modal[aria-hidden="true"] {
     display: none;
 }

 .modal {
     position: fixed;
     inset: 0;
     z-index: 60;
     display: grid;
     place-items: center;
 }

 .modal__overlay {
     position: absolute;
     inset: 0;
     background: rgba(5, 18, 12, .5);
     backdrop-filter: blur(2px);
 }

 .modal__dialog {
     position: relative;
     z-index: 1;
     width: min(560px, calc(100% - 2*var(--pad-x)));
     background: #fff;
     border-radius: calc(var(--radius) + 6px);
     border: 1px solid var(--border);
     padding: 22px;
     box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
     animation: pop .18s ease-out;
 }

 @keyframes pop {
     from {
         transform: translateY(6px);
         opacity: 0
     }

     to {
         transform: none;
         opacity: 1
     }
 }

 .modal__icon {
     display: grid;
     place-items: center;
     margin-bottom: 8px;
     color: var(--primary);
 }

 .modal__title {
     margin: 0 0 6px;
     font-size: var(--fs-lg);
 }

 .modal__text {
     margin: 0 0 14px;
     color: var(--muted);
 }

 .modal__close {
     position: absolute;
     right: 10px;
     top: 10px;
     width: 36px;
     height: 36px;
     border-radius: 10px;
     border: 1px solid var(--border);
     background: #fff;
     cursor: pointer;
 }


 [data-animate] {
     opacity: 0;
     transform: translateY(10px);
     transition: .35s ease;
 }

 [data-animate].in {
     opacity: 1;
     transform: none;
 }


 @media (min-width: 780px) {
     .menu {
         display: block;
     }

     .burger {
         display: none;
     }

     .drawer {
         display: none !important;
     }

     .hero-claim {
         padding: 72px 0;
     }

     .hero-claim__row {
         grid-template-columns: 1.05fr .95fr;
     }

     .hero-claim__media {
         order: initial;
     }

     .benefits__grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .stats__grid {
         grid-template-columns: repeat(4, 1fr);
     }

     .how__grid {
         grid-template-columns: 1.05fr .95fr;
         align-items: center;
     }

     .reasons__grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .faq__grid {
         grid-template-columns: 1fr;
     }
 }
   .btn-header {
        display: none;
     }
 @media (min-width: 1100px) {
     .topbar__row {
         min-height: 80px;
     }

     .brand .logo {
         width: 250px;
     }
     .btn-header {
        display: block;
        line-height: 2.8;
     }
 }

 
.wa-fab{
  position: fixed;
  right: 20px;
  bottom: 22px;
  width: 60px; height: 60px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--wa-green), #1ebe5c);
  color:#fff;
  font-size: 26px;
  cursor:pointer;
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, box-shadow .2s ease;
  z-index: 9999;
}
.wa-fab:hover{ transform: translateY(-2px); box-shadow:0 16px 38px rgba(2,6,23,.24);}
.wa-fab:active{ transform: translateY(0);}
 
.wa-card{
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: min(360px, calc(100vw - 32px));
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(2,6,23,.06);
  overflow: hidden;
  transform: translateY(10px);
  opacity:0; visibility:hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 9999;
}
.wa-card.open{ opacity:1; visibility:visible; transform:translateY(0);}

.wa-card__header{
  display:flex; align-items:center; gap:12px;
  padding:14px 14px;
  background: linear-gradient(135deg, var(--wa-dark), #087261);
  color:#fff;
}
.wa-card__avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.4);}
.wa-card__info{ flex:1; min-width:0;}
.wa-card__title{ font-weight:700; line-height:1.2;}
.wa-card__status{ font-size:12px; opacity:.9;}

.wa-card__close{
  background:transparent; border:0; color:#fff; font-size:26px; cursor:pointer;
  line-height:1; opacity:.8;
}
.wa-card__close:hover{ opacity:1;}

.wa-card__body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.wa-label{ font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:6px;}
.wa-input,.wa-textarea{
  width:100%; border:1px solid rgba(2,6,23,.12); border-radius:12px; padding:10px 12px;
  font: inherit; color: var(--text); background:#fff; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wa-input:focus,.wa-textarea:focus{ border-color: #7dd3fc; box-shadow: 0 0 0 4px rgba(125,211,252,.25);}

.wa-send{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background: var(--wa-green); color:#04210f;
  border:0; border-radius:12px; padding:12px 14px; cursor:pointer;
  font-weight:700; transition: transform .1s ease, filter .2s ease;
}
.wa-send:hover{ filter: brightness(1.02);}
.wa-send:active{ transform: translateY(1px);}

.wa-privacy{ font-size:12px; color:var(--muted); margin:2px 2px 0;}
.wa-privacy a{ color:#0ea5e9; text-decoration: underline; }

@media (max-width: 480px){
  .wa-fab{ right: 16px; bottom: 16px;}
  .wa-card{ right: 16px; bottom: 84px;}
}

.lf-field { position: relative; }
.lf-input.error { border-color: #e53935 !important; outline: none; }
.lf-error { display:block; font-size:.875rem; line-height:1.3; color:#e53935; min-height:1.1em; margin-top:.35rem; }
.lf-status { margin-top: .75rem; }
.lf-status.ok { color:#2e7d32; }
.lf-status.err { color:#e53935; }
.thanks-box {
      background: #fff;
      border-radius: 12px;
      text-align: center;
      padding: 40px 30px; 
      max-width: 500px;
      width: 100%;
      margin: 0 auto;
      animation: fadeIn 0.6s ease;
    }
    .thanks-box h1 {
      font-size: 28px;
      margin-bottom: 15px;
      color: #2e7d32;
    }
    .thanks-box p {
      margin-bottom: 10px;
      font-size: 16px;
      line-height: 1.5;
    }
    .thanks-box a {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 24px;
      background: #2e7d32;
      color: #fff;
      text-decoration: none;
      border-radius: 6px;
      transition: background 0.3s;
    }
    .thanks-box a:hover {
      background: #256428;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
.tg-fab {
    position: fixed;
    bottom: 20px; /* відступ знизу */
    right: 90px; /* змісти трохи, якщо вже є WhatsApp кнопка */
    width: 60px;
    height: 60px;
    background-color: #0088cc; /* темно-голубий фон Telegram */
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    z-index: 9999;
}
.tg-fab:hover {
    background-color: #007ab8;
    transform: scale(1.1);
}