/* ==============================
   Modern Reset CSS
============================== */

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #1E1E1E;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button, input, textarea, select {
  font: inherit;
  background: none;
  border: none;
  outline: none;
  color: inherit;
}

table { border-collapse: collapse; }
fieldset { border: none; }

main, section, article, aside, nav, header, footer {
  display: block;
}

/* ==============================
   CONTAINER
============================== */



.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

/* ==============================
   HERO
============================== */

.hero {
  position: relative;
  background-color: #EEEEEE;
  padding: 40px 0;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.content-block {
  margin-top: -200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 50px;
}

.content-block .text {
  max-width: 630px;
  flex: 1;
}

.content-block h1 {
  font-family: 'Gilroy', Arial, sans-serif;
  font-weight: 800;
  font-size: 30px;
  margin-bottom: 17px;
}

.content-block .sub-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #555;
}

.content-block ul {
  padding-left: 10px;
  list-style: disc inside;
  font-size: 24px;
  color: #333;
  line-height: 1.6;
}

.vertical-text {
  position: absolute;
  right: 0;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 295px;
  font-weight: 800;
  color: rgba(0,0,0,0.1);
  height: 100%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

/* ==============================
   ADVANTAGES
============================== */

.advantages {
  background-color: #F5F5F5;
}

.advantages .container {
  background-color: #F5F5F5;
  max-width: 1290px;
}

.advantages h2 {
  text-align: center;
  padding-top: 100px;
  font-size: 30px;
  font-weight: 800;
}

/* ==============================
   ADVANTAGES - одинаковые карточки
============================== */

.advantages-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-top: 60px;
  padding-bottom: 120px;
  align-items: stretch; /* растягиваем карточки по высоте */
}

.advantages-cards .card {
  flex: 1 1 calc(50% - 15px);
  max-width: 630px;
  border-radius: 40px;
  background: linear-gradient(250.5deg, #E5E5E5 16%, #F3F3F3 81.89%);
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.advantages-cards .card .icon {
  flex-shrink: 0; /* иконка не сжимается */
  margin-bottom: 20px;
}

.advantages-cards .card p {
  flex-grow: 1; /* текст занимает оставшееся место */
  display: flex;
  align-items: center; /* текст по центру вертикально внутри карточки */
  justify-content: center; /* текст по центру горизонтально */
  font-size: 20px;
  font-weight: 500;
}

.advantages-cards .card:hover {
  transform: translateY(-10px);
}

.advantages-cards img {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}


/* ==============================
   FEATURES
============================== */

.features {
  background-color: #EEEEEE;
}

.features .specifications{
	padding-bottom:40px;
}

.features h2 {
  text-align: center;
  padding-top: 100px;
  font-family: 'Gilroy', Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
}

/* ==============================
   PRODUCT OFFER (FIXED)
============================== */

/* 🔥 НОВЫЙ КЛАСС — вместо первого .offer */
.product-offer {
  background-color: #EEEEEE;
}

.product-offer .container {
  max-width: 1290px;
}

/* СТАРЫЕ СТИЛИ — БЕЗ ИЗМЕНЕНИЙ */
.offer .container {
  max-width: 1290px;
}

.offer-cards {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  flex-wrap: wrap;
}

.offer-card {
  position: relative;
  flex: 1 1 calc(50% - 15px);
  max-width: 630px;
}

.offer-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
}

.offer-card .price {
  position: absolute;
  left: 60px;
  bottom: 40px;
  font-weight: 800;
  font-size: 25px;
}

/* ==============================
   SPECIFICATIONS
============================== */

.specifications .container {
  max-width: 834px;
  margin: 0 auto;
  padding-top: 62px;
  padding-bottom: 110px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.spec-col {
  flex: 1;
  font-size: 25px;
  text-align: center;
  color: #333;
}

.spec-col.value,
.spec-col.number {
  font-weight: 600;
}

/* ==============================
   USAGE
============================== */

.usage {
  background-color: #FFFFFF;
}

.section-title {
  text-align: center;
  padding-top: 100px;
  font-size: 36px;
  font-weight: 700;
}

/* Контейнер блока */
.text-cards .container {
  max-width: 1290px;
  margin: 0 auto;
  padding: 60px 0;
}

/* Flex-контейнер для карточек */
.cards-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* расстояние между карточками */
  flex-wrap: wrap; /* чтобы на маленьких экранах карточки переносились */
}

/* Карточки с тенью */
.cards-wrapper .card {
  width: 410px;
  margin-top: 30px;
  margin-bottom: 120px;
  border-radius: 40px;
  background: linear-gradient(135deg, #FFFFFF, #F0F0F0); /* градиент наоборот */
  padding: 30px 25px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* тень */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), /* основная тень */
              0 4px 10px rgba(0, 0, 0, 0.05); /* дополнительная мягкая тень */
}

/* Hover эффект — карточка поднимается + тень усиливается */
.cards-wrapper .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.12),
              0 8px 15px rgba(0, 0, 0, 0.06);
}

/* Заголовок и текст */
.cards-wrapper .card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  max-width: 250px;   /* ограничение ширины */
  margin-left: auto;   /* центрирование */
  margin-right: auto;  /* центрирование */
  text-align: center;  /* текст по центру */
  word-wrap: break-word; /* перенос длинного текста */
}

.cards-wrapper .card p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 250px;   /* ограничение ширины */
  margin-left: auto;   /* центрирование */
  margin-right: auto;  /* центрирование */
  text-align: center;  /* текст по центру */
  word-wrap: break-word; /* перенос длинного текста */
}
/* ==============================
   COMMERCIAL OFFER (OLD .offer)
============================== */

.offer {
  background-color: #EEEEEE;
  padding-bottom: 100px;
}

.offer h2 {
  padding-bottom: 40px;
}

.bottom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  background-color: #FFFFFF;
  border-radius: 54px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  gap: 40px;
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
}

.code-text p {
  font-weight: 700;
  font-size: 32px;
}

.code-text span {
  text-decoration: underline;
}

.offer-bottom-text {
  width: 840px;
  margin: 40px auto 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;             /* расстояние между строками */
}

.offer-bottom-text p {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 32px;
  color: #1E1E1E;
  margin: 0;
}

/* Линии слева и справа от текста */
.offer-bottom-text p::before,
.offer-bottom-text p::after {
  content: "";
  flex: 1;                     /* линия растягивается по оставшемуся месту */
  height: 1px;
  background-color: #333;
}

/* Отступ между линией и текстом */
.offer-bottom-text p::before {
  margin-right: 10px;
}

.offer-bottom-text p::after {
  margin-left: 10px;
}

/* ==============================
   FOOTER
============================== */

.footer {
  background-color: #E6E6E6;
  padding: 40px 20px;
}

.footer-content {
  max-width: 1280px;
  margin: 0 auto;
}

.footer-title {
  font-weight: 500;
  color: #6E6E6E;
  font-size: 20px;
  margin-bottom: 20px;
}

.footer-contacts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-contacts span {
  font-weight: 600;
  font-size: 24px;
}


.footer-contacts a {
  color: #1E1E1E;            /* основной цвет */
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}

.footer-contacts a:hover {
  color: #555;               /* hover-эффект */
  text-decoration: underline;
}
/* ==============================
   ADAPTIVE
============================== */
@media (max-width: 1607px) {

  .vertical-text {
    display: none;
  }
}


@media (max-width: 1120px) {



  .content-block {
    margin-top: 0;
  }
  
  .content-block .image {
    max-width: 420px;
    flex-shrink: 0;
  }

  .content-block .image img {
    width: 100%;
    height: auto;
  }
}


@media (max-width: 1024px) {

  .header-container {
    justify-content: center; /* логотип по центру на планшете */
  }

  .content-block {
    margin-top: 0;
    flex-direction: column;
    text-align: center;
  }

  .content-block .text {
    max-width: 100%;
  }

  .content-block ul {
    list-style-position: inside;
  }

  .vertical-text {
    font-size: 180px;
  }
}

@media (max-width: 768px) {
  .content-block {
    flex-direction: column;       /* текст и изображение друг под другом */
    justify-content: center;       /* центр по основной оси */
    align-items: center;           /* центр по поперечной оси */
    margin-top: 0;                 /* убираем отрицательный отступ */
    gap: 20px;                     /* немного расстояния между блоками */
    text-align: center;            /* текст по центру */
  }

  .content-block .text {
    max-width: 100%;               /* чтобы текст не сжимался */
  }

  .content-block .image {
    max-width: 300px;              /* уменьшаем картинку на мобильных */
    width: 100%;
  }

  .content-block .image img {
    width: 100%;
    height: auto;
  }
}




/* ==============================
   ADVANTAGES - адаптив одинаковые карточки
============================== */

/* Планшет: до 1024px */
@media (max-width: 1024px) {
  .advantages-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* центрируем карточки */
    gap: 20px;
    align-items: stretch;    /* растягиваем по высоте */
  }

  .advantages-cards .card {
    flex: 1 1 calc(45% - 10px);
    max-width: 450px;
    padding: 30px 20px;
  }
}

/* Мобильные: до 768px */
@media (max-width: 768px) {
  .advantages-cards {
    display: grid;
    grid-template-columns: 1fr; /* одна колонка */
    gap: 20px;
    justify-items: center;       /* центрируем карточки по горизонтали */
  }

  .advantages-cards .card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* текст по центру вертикально */
    align-items: center;      /* текст по центру горизонтально */
    padding: 25px 15px;
    box-sizing: border-box;
    height: 100%;             /* карточки будут одинаковой высоты внутри grid */
  }

  .advantages-cards .card p {
    font-size: 18px;
    text-align: center;
    margin: 0;
  }

  .advantages-cards .card .icon {
    margin-bottom: 15px;
    flex-shrink: 0;
  }
}


/* ==============================
   PRODUCT OFFER - подписи над картинками, ряд сохраняется
============================== */
@media (max-width: 768px) {
  .offer-cards {
    flex-direction: row;          /* сохраняем 1 ряд */
    justify-content: space-around; /* равные промежутки */
    flex-wrap: nowrap;            /* не переносим карточки */
    gap: 20px;
    align-items: flex-start;      /* верхний край выравниваем */
  }

  .offer-card {
    position: relative;
    width: 45%;                   /* две карточки в ряд */
    max-width: 200px;             /* ограничиваем ширину на мобильных */
    display: flex;
    flex-direction: column;
    align-items: center;          /* выравниваем по центру */
  }

  /* Поднимаем подпись над картинкой */
  .offer-card .price {
    position: static;
    margin-bottom: 10px;          /* отступ до картинки */
    font-size: 16px;
    font-weight: 700;
    text-align: center;
  }

  .offer-card img {
    width: 100%;
    height: auto;
    border-radius: 20px;
  }
}

/* ==============================
   SPECIFICATIONS - горизонтальный вид на всех экранах
============================== */

/* Планшет до 1024px */
@media (max-width: 1024px) {
  .specifications .container {
    max-width: 700px;
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .spec-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 10px;
  }

  .spec-col {
    font-size: 20px;
    text-align: center;
  }
}

/* Мобильные: до 768px */
@media (max-width: 768px) {
  .specifications .container {
    max-width: 100%;
    padding: 30px 10px;
  }

  .spec-row {
    display: flex;
    flex-direction: row;          /* сохраняем три колонки горизонтально */
    justify-content: space-between;
    align-items: center;
    padding: 6px 5px;
    gap: 10px;                     /* небольшой промежуток между колонками */
    border-bottom: 1px solid #ddd;
  }

  .spec-col {
    font-size: 14px;               /* уменьшаем шрифт */
    text-align: center;
    flex: 1;                        /* колонки одинаковой ширины */
  }

  .spec-col.value,
  .spec-col.number {
    font-weight: 600;
  }

  .spec-col.name {
    font-weight: 500;
  }

  /* Последняя строка без бордера */
  .spec-row:last-child {
    border-bottom: none;
  }
}




/* Планшеты */
@media (max-width: 1024px) {
  .cards-wrapper {
    justify-content: center;   /* центрируем все карточки */
    gap: 30px;                 /* отступ между карточками */
  }

  .cards-wrapper .card {
    width: 320px;              /* уменьшаем ширину карточки на планшете */
    margin-bottom: 60px;       /* уменьшаем нижний отступ */
  }
}

/* Мобильные */
@media (max-width: 768px) {
  .cards-wrapper {
    flex-direction: column;    /* одна под другой */
    align-items: center;       /* центрирование */
    gap: 20px;                 /* уменьшаем отступы между карточками */
  }

  .cards-wrapper .card {
    width: 100%;               /* карточка занимает почти весь экран */
    max-width: 420px;          /* ограничиваем максимальную ширину */
    padding: 25px 20px;        /* уменьшаем внутренние отступы */
    margin-bottom: 40px;       /* уменьшаем нижний отступ */
  }

  .cards-wrapper .card h3 {
    font-size: 18px;
    max-width: 100%;            /* адаптивная ширина заголовка */
  }

  .cards-wrapper .card p {
    font-size: 14px;
    max-width: 100%;
  }
}




/* ==================================
   Коммерческое предложение адаптив
================================== */

/* Планшет: 1024px */
@media (max-width: 1024px) {
  .top-row {
    justify-content: space-between; /* логотипы по бокам */
    align-items: center;
    gap: 20px;
  }

  .top-row img.logo-left,
  .top-row img.logo-right {
    max-width: 80px; /* уменьшаем логотипы */
    height: auto;
  }

  .code-text p {
    font-size: 24px; /* уменьшаем шрифт цены */
    text-align: center; /* по центру */
  }

  .offer-bottom-text {
    width: 100%;
    max-width: 700px;
    margin: 30px auto 40px;
    text-align: center; /* весь текст по центру */
  }

  .offer-bottom-text p {
    font-size: 20px; /* уменьшаем шрифт */
    display: block;  /* убираем flex */
    margin: 8px 0;   /* расстояние между строками */
  }

  /* Убираем линии */
  .offer-bottom-text p::before,
  .offer-bottom-text p::after {
    display: none;
  }
}

/* Мобильные: 768px */
@media (max-width: 768px) {
  .top-row {
    gap: 15px;
  }

  .top-row img.logo-left,
  .top-row img.logo-right {
    max-width: 60px; /* еще меньше логотипы */
  }

  .code-text p {
    font-size: 18px; /* компактная цена */
  }

  .offer-bottom-text p {
    font-size: 16px; /* текст читаемый на мобильных */
    text-align: center; /* центрируем */
  }

  .bottom-content {
    padding: 20px 15px; /* уменьшаем отступы */
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .footer-contacts {
    flex-direction: column;
    gap: 10px;
  }

  .footer-contacts span {
    font-size: 18px;
  }
}