/* =========================
   HOME (index.html)
   ========================= */

/* -------------------------
   HERO / INTRO
   ------------------------- */

.hero { margin: 30px 0; }

.hero__inner{
  display: grid;
  grid-template-columns: 1.15fr 1.85fr;
  gap: 26px;
  align-items: center;
}

.hero__media{
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__image{
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
}

.hero__title{
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.15;
  color: #002C5F;
}

.hero__lead{
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.6;
  color: #334155;
}

.hero__label{
  margin: 12px 0 10px;
  color: #0f172a;
}

.hero__list{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}

.hero__item{
  position: relative;
  padding-left: 28px;
  line-height: 1.55;
  color: #0f172a;
}

.hero__item::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #006CFF;
  font-weight: 800;
}

.hero__text{
  margin: 0 0 10px;
  line-height: 1.6;
  color: #334155;
}

.link{
  color: #006CFF;
  text-decoration: none;
}
.link:hover{ text-decoration: underline; }

.hero__actions{
  margin-top: 16px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* HERO responsive */
@media (max-width: 900px){
  .hero__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__item{ text-align: left; }
  .hero__actions{ justify-content: center; }
}

/* -------------------------
   ADDRESS CHECK
   ------------------------- */

.addr{ text-align: left; }

.addr__head{ margin-bottom: 16px; }

.addr__titlebox{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* SVG-иконка */
.addr__icon{
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
  transform: translateY(-1px);
}

.addr__title{
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  color: #002C5F;
  white-space: nowrap;
}

.addr__sub{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #334155;
  white-space: nowrap;
  max-width: 80ch;
}

/* Form */
.addr__form{ margin-top: 10px; }

.addr__privacy{
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.addr__privacy a{
  color: var(--blue);
  text-decoration: none;
}
.addr__privacy a:hover{
  text-decoration: underline;
}

.addr__row{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: end;
  width: 100%;
}

.addr__field{ min-width: 0; }

.addr__label{
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  color: #002C5F;
}

.addr__input{
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,44,95,.18);
  background: #fff;
  font-size: 15px;
  color: #0f172a;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.addr__input:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,108,255,.18);
}

.addr__actions{ display: flex; }

.addr__check{
  height: 48px;
  padding: 0 22px;
  white-space: nowrap;
}

/* RESULT: скрыт до результата */
.addr__result{
  margin-top: 18px;
  width: 100%;
  display: none;
}
.addr__result.show{ display: block; }

/* Кон3инфа: контейнер текста */
.addr__resultBox{
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,44,95,.04);
  border: 1px solid rgba(0,44,95,.10);
  margin-bottom: 14px;
}

.addr__resultBox .status{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #002C5F;
  margin: 0 0 8px;
}

/* DOT: нейтральная -> success/error через классы JS */
.addr__resultBox .dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 12px;
  display: inline-block;
  background: #94a3b8;
  transition: background .2s ease, box-shadow .2s ease;
}

.addr__resultBox .dot.is-success{
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}

.addr__resultBox .dot.is-error{
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.15);
}

.addr__resultBox .hint{
  margin: 0;
  color: #334155;
  line-height: 1.6;
}

/* Кнопки (по центру) */
.addr__resultActions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* Иконки в кнопках addr — белый цвет (как на странице оплаты) */
.addr__btn-ico{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  filter: brightness(0) invert(1);
}

/* WhatsApp button */
.btn--wa{
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
.btn--wa:hover{
  background: #16a34a;
  border-color: #16a34a;
  transform: translateY(-1px);
}

/* Desktop button sizing */
@media (min-width: 901px){
  .addr__resultActions .btn{
    min-width: 260px;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 900px){
  .addr__title,
  .addr__sub{ white-space: normal; }

  .addr__row{ grid-template-columns: 1fr; }

  .addr__actions{ width: 100%; }
  .addr__check{ width: 100%; }

  .addr__resultActions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------
   BALANCE CHECK (index)
   ------------------------- */

.bal{
  text-align: left;
}

.bal__head{
  margin-bottom: 16px;
}

.bal__titlebox{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.bal__icon{
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
  transform: translateY(-1px);
}

.bal__title{
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  color: #002C5F;
  white-space: nowrap; /* ПК — 1 строка */
}

.bal__sub{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #334155;
  white-space: nowrap; /* ПК — 1 строка */
  max-width: 80ch;
}

/* form */
.bal__form{ margin-top: 10px; }

.bal__row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  width: 100%;
}

.bal__field{ min-width: 0; }

.bal__label{
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  color: #002C5F;
}

.bal__input{
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,44,95,.18);
  background: #fff;
  font-size: 15px;
  color: #0f172a;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.bal__input:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,108,255,.18);
}

.bal__actions{ display: flex; }

.bal__check{
  height: 48px;
  padding: 0 22px;
  white-space: nowrap;
}

/* error */
.bal__err{
  margin-top: 12px;
  color: var(--error);
  font-weight: 800;
  display: none; /* включается через JS */
}

/* result */
.bal__result{
  margin-top: 18px;
  width: 100%;
  display: none; /* JS показывает */
}

.bal__grid{
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 16px;
  align-items: stretch;
}

.bal__info{
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,44,95,.04);
  border: 1px solid rgba(0,44,95,.10);
}

.bal__info p{
  margin: 6px 0;
  color: #0f172a;
  line-height: 1.55;
}

.bal__labelStrong strong{
  color: #002C5F;
  font-weight: 800;
}

.bal__money{
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,108,255,.06);
  border: 1px solid rgba(0,108,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* сумма */
.balance-amount{
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: 56px;
}

.balance-amount .rub{
  font-size: 26px;
  font-weight: 900;
  margin-left: 8px;
  line-height: 1;
  color: inherit;
}

/* отрицательный баланс (JS добавляет is-negative) */
.balance-amount.is-negative{
  color: var(--error);
}

/* Responsive */
@media (max-width: 900px){
  .bal__title,
  .bal__sub{
    white-space: normal; /* мобила: перенос разрешаем */
  }

  .bal__row{
    grid-template-columns: 1fr;
  }

  .bal__check{
    width: 100%;
  }

  .bal__grid{
    grid-template-columns: 1fr;
  }

  .balance-amount{
    font-size: 48px;
  }
}

/* -------------------------
   WHY (Почему выбирают)
   ------------------------- */

.why{
  padding: 34px 44px; /* как у pricing/cctv для воздуха по бокам */
}

.why__head{
  text-align: center;
  margin-bottom: 26px;
}

.why__title{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.12;
  color: #002C5F;
}

.why__sub{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #64748b;
}

/* grid 4 карточки */
.why__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  justify-items: center;

  max-width: 1120px;
  margin: 0 auto;
}

/* карточка = такая же анимация как у тарифов */
.why-card{
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;

  border: 1px solid rgba(0,44,95,.06);
  box-shadow: 0 10px 22px rgba(2,44,95,.08);

  transition: transform .25s ease, box-shadow .25s ease;
}

.why-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(2,44,95,.12);
}

/* иконка */
.why-card__icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--blue);
  display: grid;
  place-items: center;
}

.why-card__icon img,
.why-card__icon svg{
  width: 28px;
  height: 28px;
  display: block;
}

/* если у svg нет fill=white, то будет синим — принудим белый */
.why-card__icon svg *{
  fill: #fff;
}

/* заголовок */
.why-card__title{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.2;
  color: #002C5F;
  font-weight: 800;
}

/* текст */
.why-card__text{
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 1100px){
  .why__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .why{
    padding: 26px 18px;
  }

  .why__title{
    font-size: 28px;
  }

  .why__grid{
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: none;
  }

  .why-card{
    max-width: 420px;
  }
}

/* -------------------------
   REVIEWS (index)
   ------------------------- */

.reviews{
  padding: 34px 44px;
}

.reviews__head{
  text-align: center;
  margin-bottom: 26px;
}

.reviews__title{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.12;
  color: #002C5F;
}

.reviews__sub{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #64748b;
}

/* grid */
.reviews__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  justify-items: center;

  max-width: 1120px;
  margin: 0 auto;
}

/* card */
.review{
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px 22px;
  text-align: left;

  border: 1px solid rgba(0,44,95,.06);
  box-shadow: 0 10px 22px rgba(2,44,95,.08);
  position: relative;

  transition: transform .25s ease, box-shadow .25s ease;
}

.review:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(2,44,95,.12);
}

/* avatar circle (инициалы) */
.review__avatar{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;

  display: grid;
  place-items: center;

  font-weight: 800;
  font-size: 22px;
  letter-spacing: .5px;

  position: absolute;
  top: -32px;
  left: 22px;

  box-shadow: 0 12px 24px rgba(2,44,95,.12);
}

/* name */
.review__name{
  margin: 8px 0 8px;
  padding-left: 92px; /* чтобы имя не залезало под кружок */
  font-size: 18px;
  line-height: 1.25;
  color: #0f172a;
  font-weight: 800;
}

/* stars */
.review__stars{
  padding-left: 92px;
  margin: 0 0 10px;
  color: #f59e0b; /* тёплый жёлтый */
  letter-spacing: 1px;
  font-size: 14px;
}

/* text */
.review__text{
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1100px){
  .reviews__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .reviews{
    padding: 26px 18px;
  }

  .reviews__title{
    font-size: 28px;
  }

  .reviews__grid{
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: none;
  }

  .review{
    max-width: 420px;
  }
}

/* -------------------------
   FAQ (index)
   ------------------------- */

.faq{
  padding: 34px 44px;
}

.faq__head{
  text-align: center;
  margin-bottom: 26px;
}

.faq__title{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.12;
  color: #002C5F;
}

.faq__sub{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #64748b;
}

.faq__list{
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.faq__item{
  background: #fff;
  border: 1px solid rgba(0,44,95,.12);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(2,44,95,.06);
  overflow: hidden;
}

.faq__q{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 18px 18px;
  font-size: 18px;
  font-weight: 800;
  color: #002C5F;
}

/* убрать дефолтный маркер у summary */
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }

/* стрелка */
.faq__chev{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  position: relative;
}
.faq__chev::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform .22s ease;
}

/* открыто: поворот */
.faq__item[open] .faq__chev::before{
  transform: rotate(-135deg);
}

.faq__a{
  padding: 0 18px 18px;
  color: #475569;
  line-height: 1.6;
  font-size: 16px;
}

.faq__a p{ margin: 0; }
.faq__a ol{
  margin: 0;
  padding-left: 18px;
}

/* лёгкий hover как у карточек */
.faq__item{
  transition: transform .25s ease, box-shadow .25s ease;
}
.faq__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(2,44,95,.10);
}

/* Mobile */
@media (max-width: 900px){
  .faq{ padding: 26px 18px; }
  .faq__title{ font-size: 28px; }
  .faq__q{ font-size: 16px; padding: 16px; }
  .faq__a{ padding: 0 16px 16px; font-size: 15px; }
}

.faq__phone{
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.faq__phone:hover{
  text-decoration: underline;
}