/* =========================
   Theme tokens (легко менять стиль)
========================= */
:root{
  --c-text:#0f172a;
  --c-muted:#334155;
  --c-bg:#ffffff;
  --c-border:rgba(15,23,42,.08);

  --c-primary:#2196F3;
  --c-primary-hover:#fe4f4a;

  --radius:14px;
  --radius-sm:10px;

  --shadow-sm:0 8px 18px -10px rgba(36,36,59,.18);
  --shadow-md:0 14px 30px -16px rgba(36,36,59,.32);
}

/* =========================
   Services grid
========================= */
.service-wrapper{
  margin: 0 0 18px;
}

.service-wrapper .row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px; /* вместо плясок с padding */
}

/* Базово: 2 в ряд */
.service-wrapper .col-md-3,
.service-wrapper .col-sm-6{
  flex: 0 0 calc(50% - 10px);
  max-width: calc(50% - 10px);
  padding: 0; /* gap управляет расстояниями */
}

/* Планшет: 3 в ряд */
@media (min-width: 768px){
  .service-wrapper .col-sm-6{
    flex: 0 0 calc(33.333% - 10px);
    max-width: calc(33.333% - 10px);
  }
}

/* ПК: 4 в ряд */
@media (min-width: 992px){
  .service-wrapper .col-md-3{
    flex: 0 0 calc(25% - 10px);
    max-width: calc(25% - 10px);
  }
}

/* =========================
   Service card
========================= */
.service-item{
  position:relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin: 0; /* gap уже есть */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}

.service-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(33,150,243,.25);
}

.service-item .title{
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 8px;
  line-height: 1.2;
}

.service-item .text{
  font-size: 14px;
  color: var(--c-muted);
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
}

/* Иконка/картинка в карточке */
.service-banner_image{
  margin: 0 0 12px;
}

.service-banner_image img{
  max-width: 44px;  /* аккуратнее, чем % */
  height: auto;
  display: inline-block;
  transition: transform .25s ease;
}

.service-item:hover .service-banner_image img{
  transform: scale(1.05);
}

/* Адаптив карточек */
@media (max-width: 1200px){
  .service-item{
    text-align:center;
    padding: 16px;
  }
}

@media (max-width: 767px){
  .service-item{
    padding: 14px 12px;
  }
  .service-item .title{ font-size: 14px; }
  .service-item .text{ font-size: 14px; }
  .service-banner_image img{ max-width: 46px; }
}

/* =========================
   Home SEO text block (accordion)
========================= */
.home-text{
  margin: 30px 0;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 22px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.home-text-container{
  position: relative;
  padding-right: 72px; /* место под кнопку */
}

.home-text-container h2{
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.2;
  color: var(--c-text);
}

.home-text p,
.home-text li{
  color: var(--c-muted);
  font-size: 15px;
  line-height: 1.55;
}

.home-text-container ul{
  padding-left: 18px;
  margin: 10px 0 14px;
}

/* Более аккуратные маркеры списков */
.home-text li{
  margin: 6px 0;
}

/* =========================
   Expand (+) button
========================= */
#expand-home-text{
  background: var(--c-primary);
  width: 48px;
  height: 48px;
  border-radius: 999px; /* круг */
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 30px;
  line-height: 1;
  position:absolute;
  right: 0;
  top: 0;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  color:#fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 22px -10px rgba(33,150,243,.55);
  user-select: none;
}

#expand-home-text:hover{
  background: var(--c-primary-hover);
  box-shadow: 0 12px 26px -12px rgba(254,79,74,.6);
}

/* Поворот, когда открыт */
#expand-home-text.open{
  transform: rotate(45deg);
}

/* Мобилка: кнопка не уезжает */
@media (max-width: 992px){
  .home-text{
    padding: 18px 16px;
  }
  .home-text-container{
    padding-right: 58px;
  }
  #expand-home-text{
    width: 42px;
    height: 42px;
    font-size: 28px;
    top: 0; /* вместо -50px — чтобы не прыгало */
  }
}

#expand-home-text{
  width: auto;
  min-width: 140px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  position: absolute;
  right: 0;
  top: 0;

  background: #2196F3;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 22px -10px rgba(33,150,243,.55);

  transition: .2s ease;
  user-select: none;
}

#expand-home-text:hover{
  background: #fe4f4a;
  border-color: #fe4f4a;
  box-shadow: 0 12px 26px -12px rgba(254,79,74,.6);
}

/* на мобилке компактнее */
@media (max-width: 992px){
  #expand-home-text{
    min-width: 120px;
    height: 40px;
    padding: 0 12px;
    top: 0;
  }
}