body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(to bottom right, #8be28f, #3bc088);
  color: #000;
}
/* другий фон */
.alt-bg {
  background: url("/static/img/Layer2.jpg") no-repeat center;
  background-size: cover;     /* щоб картинка заповнювала блок */
  padding: 80px 0;            /* відступи зверху і знизу */
  color: #000;                /* чорний текст */

  max-width: 1200px;    /* обмежуємо як у тексту */
  margin: 0 auto;       /* центруємо */
  border-radius: 12px;  /* можна додати, щоб було акуратніше */
}

.alt-bg .container {
  max-width: 1200px;
  margin: 0 auto;
}

.btn {
  display: inline-block;   /* щоб кнопка займала лише потрібну ширину */
  background: #0d7d4d;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 18px rgba(13,125,77,.28);
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  transform: translateY(-1px);
}

.container {
  width: 90%;        /* завжди 90% від ширини екрану */
  max-width: 1200px; /* але не більше ніж 1200px */
  margin: 0 auto;    /* центрує блок */
  padding: 20px;
}

.cards {
  display: grid;
  /*grid-template-columns: repeat(4, 1fr); !* 4 в ряд *!*/
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 4 колонки */
  gap: 30px;            /* більше простору між картками */
  margin: 20px auto;
  max-width: 1200px; /* щоб картки не розтягувались */
}

.cards .mini {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.mini {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.mini h4 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #1b372c;
}

.mini .val {
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 6px;
}

.mini .meta {
  font-size: 14px;
  color: #1a7c49;
}

.btn {
  background: #0d7d4d;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 18px 36px;   /* товща і ширша: визначає висоту (12px зверху/знизу) і ширину (22px зліва/справа).*/
  font-weight: 600;
  font-size: 18px;      /* більший текст */
  cursor: pointer;
  box-shadow: 0 12px 18px rgba(13,125,77,.28);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
}

h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
  line-height: 1.3;
}

h2 {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;  /* більше простору під субтитул */
  line-height: 1.5;
}

.section {
  margin-bottom: 40px;  /* більше повітря між секціями */
  text-align: justify;
  font-size: 20px;
  font-weight: bold;
}

.section h3 {
  font-size: 18px;
  margin-bottom: 10px;
}


@media (max-width: 600px) {
  h1 { font-size: 28px; }
  h2 { font-size: 16px; }
  .scout-text { font-size: 18px; }
  .cards {grid-template-columns: 1fr;}
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* AI photo */
/* Блок із фото і текстом */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;   /* вирівняти по верхньому краю */
  margin: 20px auto;
  max-width: 1200px;
}

.row img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* Текстова частина */
.row .text {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 200;   /* normal 400 - нормальна товщина */
  text-align: justify;
  display: flex;
  flex-direction: column;  /* дозволяє кнопку поставити вниз */
  justify-content: space-between;
  margin: -20px 20px;   /* 20px зліва і справа */
}

/* Кнопка під текстом */
/* Центруємо кнопку */
.btn-wrapper {
  text-align: center;   /* центрує всередині контейнера */
  margin: 40px 0;       /* відступи зверху і знизу */
}

/* робимо кнопку більшою */
.big-btn {
  padding: 20px 48px;   /* внутрішні відступи */
  font-size: 20px;      /* збільшений шрифт */
  border-radius: 999px;
  box-shadow: 0 12px 20px rgba(13,125,77,.3);
}


/* Адаптив для блоку з AI фото і текстом */
@media (max-width: 768px) {
  .row {
    grid-template-columns: 1fr;  /* один стовпець замість двох */
    text-align: center;          /* центруємо вміст */
  }

  .row img {
    max-width: 80%;              /* обмежуємо ширину картинки */
    margin: 0 auto;              /* центруємо картинку */
  }

  .row .text {
    text-align: center;          /* текст по центру */
    font-size: 15px;             /* трохи зменшений шрифт */
    margin-top: 15px;            /* відступ від картинки */
    max-width: 90%;
    line-height: 1.5;
  }
}

/*.row .text h3 {*/
/*  margin-bottom: 80px; !* відступ під заголовком *!*/
/*}*/

/*.row .text p {*/
/*  margin-bottom: 10px; !* відступ під абзацом *!*/
/*}*/

/*.row .btn {*/
/*  margin-top: 20px;*/
/*  display: inline-block;           !* робимо блочним *!        !* кнопка стає блочним елементом *!*/
/*  margin: 20px auto;        !* центрує по горизонталі *! !* щоб кнопка не прилипала *!*/

/*  padding: 16px 36px;    !* зробимо її більшою *!*/
/*  text-align: center;    !* текст усередині по центру *!*/
/*  align-content: center;*/
/*}*/


/* Graphics */
.charts {
  position: relative; /* щоб можна було розміщати плаваючий графік */
  text-align: center;
  margin: 20px auto;
  max-width: 1200px;
}

.charts h3 {
  font-size: 16px;
  margin-bottom: 40px;
  line-height: 1.6;
  text-align: justify; /* вирівняти края тексту */
     /* top: -30px; регулюй відступ зверху */
   /* right: -20px; регулюй відступ праворуч */
   /* width: 1200px; регулюй розмір */
  max-width: 100%;    /* займає всю ширину контейнера */
  margin-left: 0;     /* прибрати правий зсув */
  margin-right: 0;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  overflow: visible;          /* щоб зміщення не обрізались */
}

.chart-row img {
  width: 100%;
  height: 320px;        /* однакова висота */
  object-fit: cover;    /* обрізає, але пропорції зберігаються */
  /*margin-right: 30px; !* посунути вправо *!*/
  /*margin-top: -40px;  !* підняти вверх *!*/
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  display: block;
  object-fit: cover;
}

/* Плаваючий графік у верхньому правому куті */
.floating-graph {
  position: absolute;
  top: -30px;   /* регулюй відступ зверху */
  right: -20px; /* регулюй відступ праворуч */
  width: 480px; /* регулюй розмір */
  opacity: 0.9;
  z-index: 2;        /* поверх картинок */
  pointer-events: none;  /* не блокує кліки по тексту під ним */
}

/* Ліва картинка: трохи лівіше і нижче */
.left-img {
  transform: translate(-32px, 10px);  /* X, Y у px */
}

/* Права картинка: трохи правіше і вище */
.right-img {
  transform: translate(-32px, 10px);
}


/* Додаткові можливості для експериментів */
.resizable {
  transition: transform 0.3s ease;
}

.resizable:hover {
  transform: scale(0.95); /* зменшується при наведенні */
  cursor: grab;
}

@media (max-width: 900px) {
  .chart-row {
    grid-template-columns: 1fr;
  }
  .floating-graph {
    display: none; /* на мобілках можна сховати */
  }
}


/* --- SCOUT --- */
.scout {
  margin: 90px auto 60px;
  max-width: 1200px;

}

.scout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ліва трохи ширша */
  gap: 40px;
  align-items: start;  /* вирівняти по верхньому краю */
}

.scout-left {
  /*position: relative;*/
  /*min-height: 420px;                  !* щоб було місце і для кнопки зверху, і для тексту знизу *!*/
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
}

.scout-right {
  display: flex;
  flex-direction: column;  /* ставимо елементи стовпчиком */
  align-items: center;     /* центрує по горизонталі */
  gap: 20px;               /* відстань між карткою і кнопкою */
}

.right-btn {
  padding: 14px 28px;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* кнопка зверху зліва */
.pinned-btn {
  margin-bottom: 0px;  /* відступ від тексту */
  position: static;     /* більше не absolute */
  display: inline-block;
}

.big-btn {
  padding: 16px 28px;
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(12, 110, 66, .25);
}

/* картка-аналітика по центру лівої колонки */
.anal-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  width: 320px; /* регулюй під макет */
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  margin: 10px 0; /* відступи від інших блоків */
}

.anal-card h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #222;
}

.anal-card .val {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 18px;
  color: #111;
}

.meta-row {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.meta-box {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 10px;
  flex: 1;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}

.meta-label {
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
}

.meta-value {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

.meta-change {
  font-size: 13px;
  font-weight: 600;
}

.meta-change.plus {
  color: #0a8a40; /* зелений для позитивних значень */
}

.meta-change.minus {
  color: #d33; /* червоний для негативних */
}


/* текст нижче зліва */
.scout-text {
  /*position: absolute;*/
  left: 0;
  bottom: 0;
  font-size: 17px;
  max-width: 600px;
  font-weight: 200;   /* normal 400 - нормальна товщина */
  text-align: left;
  line-height: 1.6;
}

.justify { text-align: justify; }     /* рівний абзац (обидва краї) */

/* права колонка з «тортиком» */
.scout-right { text-align: center; }
.scout-visual {
  width: min(440px, 100%);
  border-radius: 14px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.12));
}

/* адаптив */
@media (max-width: 980px) {
  .scout-grid {
    grid-template-columns: 1fr;       /* в один стовпчик */
  }
  .scout-left {
    min-height: 620px;
  }
  .scout-text {
    position: static;                 /* без absolute на мобілках */
    margin-top: 18px;
    padding: 0 12px;   /* бокові відступи, щоб текст не злипався */
    text-align: left;  /* краще читабельність на мобілці */
  }
  .pinned-btn {
    position: static;                 /* кнопка стає звичайною у потоці */
    margin-bottom: 18px;
  }
  .anal-card {
    margin: 0 auto 12px;              /* по центру */
  }
}

/* Імпресум */
.footer {
  background: #000;
         /* width: 100%;  завжди 90% від ширини екрану */
  max-width: 1200px; /* але не більше ніж 1200px */
  color: #fff;
  font-size: 12px;
  padding: 30px;
  text-align: justify;
  line-height: 1.5;
  margin: 0 auto; /* так футер теж матиме рівні відступи */
}

.footer h3 {
  margin: 0 0 15px 0;
  font-size: 16px;

}

.footer p {
  margin: 8px 0;
  width: 100%;        /* завжди 90% від ширини екрану */
  margin: 0 auto; /* так футер теж матиме рівні відступи */
}


/* Перемикач мов */
.lang-switch {
  position: absolute;
  top: 20px;
  right: 70px;
  font-size: 18px;
  font-weight: bold;
  z-index: 9999;
}

.lang-switch a {
  color: #000;
  text-decoration: none;
  margin: 0 8px;
}

/*  color: white;*/
/*  background: #000;*/
/*  padding: 5px 10px;*/
/*  margin-left: 5px;*/
/*  border-radius: 4px;*/
/*  text-decoration: none;*/
/*  font-size: 14px;*/
/*}*/

.lang-switch a:hover {
  /*background: #444;*/
  text-decoration: underline;
}



















.form-box {
  background: #f0f0f0;   /* світло-сірий фон */
  color: #000;           /* чорний текст */
  border: 1px solid #ccc; /* тонка сіра рамка, як у Windows */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* легка тінь */
  /*border: 2px solid #d0d0d0;*/
  /*box-shadow: inset 2px 2px #fff, inset -2px -2px #888;*/
  border-radius: 16px;     /* легке округлення */
  padding: 30px;
  max-width: 420px;
  margin: 30px auto;
  text-align: center;
  position: relative;
}

.form-box input {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

.form-box button {
  padding: 10px 20px;
  background: #00cc44;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.form-box button:hover { background: #009933; }

.phone-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
}
#phone_country { flex: 0 0 190px; } /* ширина селекта */
#phone_number  { flex: 1 1 auto; }   /* тягнеться на решту */
@media (max-width: 520px) {
  .phone-inputs { flex-direction: column; align-items: stretch; }
  #phone_country, #phone_number { width: 100%; }
}