/* Ремонт оргтехники — сетка устройств */
.devices{
  margin-top:24px;
}
.flow3d__icon {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 6px 12px rgba(30,144,255,.25));
}
.h2{
  font-size:26px;
  margin:0 0 18px 0;
}

.devices__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.device{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px;
  border-radius:16px;
  background:var(--bg-soft);
}

.device--soft{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(32,86,138,0.08);
}

.device__icon{
  font-size:32px;
}

.device__title{
  font-weight:700;
}

.device__desc{
  color:var(--muted);
  font-size:15px;
}

@media (max-width:900px){
  .devices__grid{
    grid-template-columns:1fr;
  }
}

/* Стили вкладок */
.tabs.card.card--glass{
  display:inline-flex !important;
  align-items:center;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  gap:8px;
  max-width:100%;
  width:fit-content;
  box-sizing:border-box;
  padding:6px 10px !important; /* override .card padding */
  border-radius:16px;
  scrollbar-width:thin;
}
.tabs.card.card--glass .tab{white-space:nowrap;flex:0 0 auto;}
.tabs.card.card--glass::-webkit-scrollbar{height:6px}
.tabs.card.card--glass::-webkit-scrollbar-thumb{background:rgba(30,144,255,.35);border-radius:999px}
.tabs.card.card--glass::-webkit-scrollbar-track{background:transparent}

.tab{
  position:relative;
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  color:#5a7693;
  text-decoration:none;
  font-weight:700;
  transition:color .18s ease;
  white-space:nowrap;
}
.tab--active{color:#1e90ff;}
.tab--active::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background:#1e90ff;
  box-shadow:0 0 8px rgba(54,140,182,.35);
}
.tab:hover:not(.tab--active){color:#1e90ff;}

@media (max-width:600px){
  .tabs.card.card--glass{gap:6px;padding:6px 8px !important;}
  .tab{padding:8px 12px;font-size:14px;}
}
/* Отступ вниз для контента */
.mission {
  margin-top: 18px;
}

/* ====== Общие секции для страницы ремонта ====== */
.page-title{
  margin:0 0 8px 0;
  font-size:32px;
  font-weight:800;
}

.section{
  margin-top:40px;
}

.section-title{
  font-size:26px;
  margin:0 0 10px 0;
  font-weight:800;
}

.section-title--left{
  text-align:left;
}

.section-subtitle{
  margin:0 0 24px 0;
  color:var(--muted);
  font-size:15px;
  text-align:center;
}

.section--cta{
  margin-bottom:40px;
}

/* ====== HERO блок ====== */
.hero{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap:28px;
  align-items:stretch;
  margin-bottom:32px;
}

.hero--repair{
  padding:28px 30px;
}

.hero__title{
  margin:0 0 10px 0;
  font-size:28px;
  font-weight:800;
}

.hero__subtitle{
  margin:0 0 18px 0;
  color:var(--muted);
  font-size:15px;
}

.hero__bullets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.hero-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#f3f8ff;
  border:1px solid #d9e7fb;
  font-size:13px;
  color:#30516f;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero__side{
  display:flex;
  align-items:stretch;
}

.hero-checklist{
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--bg-soft);
  padding:18px 20px;
}

.hero-checklist__title{
  font-weight:700;
  margin-bottom:8px;
}

.hero-checklist__list{
  margin:0;
  padding-left:18px;
  font-size:14px;
  color:var(--muted);
}
.hero-checklist__list li + li{
  margin-top:4px;
}

/* Дополнительная защита от переполнения текста на мобильных
   (особенно для страниц ремонта, включая МФУ) */
@media (max-width: 640px){
  .hero--repair,
  .hero--repair *{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* ====== Блок цен ====== */
.pricing{
  display:grid;
  grid-template-columns:1.3fr 1.1fr;
  gap:24px;
  align-items:stretch;
}

.pricing__col{
  display:flex;
  flex-direction:column;
}

.pricing__list{
  list-style:none;
  margin:0 0 12px 0;
  padding:0;
  display:grid;
  gap:8px;
  font-size:15px;
}

.pricing__list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.pricing__list span:last-child{
  font-weight:700;
}

.pricing__list--simple li{
  justify-content:flex-start;
  gap:6px;
}

.pricing__hint{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

.pricing__col--highlight{
  border-radius:16px;
  padding:18px 20px;
  background:linear-gradient(180deg,#e8f3ff,#f3f9ff);
  border:1px solid #cfe3ff;
  box-shadow:0 14px 36px rgba(32,86,138,.16);
}

.pricing__text{
  margin:10px 0 10px 0;
  font-size:14px;
  color:#1f2933;
}

/* ====== Преимущества ====== */
.benefits{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.benefit-card{
  border-radius:18px;
  padding:18px 18px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(32,86,138,.08);
}

.benefit-card__icon{
  font-size:26px;
  margin-bottom:6px;
}

.benefit-card__title{
  font-weight:700;
  margin-bottom:4px;
}

.benefit-card__text{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

/* ====== Финальный CTA ====== */
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 26px;
}

.cta__title{
  margin:0 0 6px 0;
  font-size:22px;
  font-weight:800;
}

.cta__text{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

.cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ====== Адаптив ====== */
@media (max-width:1024px){
  .hero{
    grid-template-columns:1fr;
  }
  .pricing{
    grid-template-columns:1fr;
  }
  .benefits{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .hero--repair{
    padding:22px 20px;
  }
  .cta{
    flex-direction:column;
    align-items:flex-start;
  }
  .benefits{
    grid-template-columns:1fr;
  }
  .page-title{
    font-size:26px;
  }
}

/* =========================================================
   Repair page layout fixes (scoped)
   ========================================================= */

/* Constrain content to the same readable width as other pages */
.page-repair .content{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* Tabs: single row like on IT-outsourcing page (no wrapping) */
.page-repair .tabs.card.card--glass{
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* keep a bit of right padding so last tab doesn't stick to the edge */
.page-repair .tabs.card.card--glass::after{
  content:"";
  flex: 0 0 8px;
}

/* hide scrollbar in WebKit (optional, keeps it clean) */
.page-repair .tabs.card.card--glass::-webkit-scrollbar{
  height: 6px;
}
.page-repair .tabs.card.card--glass::-webkit-scrollbar-thumb{
  background: rgba(30,144,255,.25);
  border-radius: 999px;
}
.page-repair .tabs.card.card--glass::-webkit-scrollbar-track{
  background: transparent;
}
.section .section-subtitle{
  text-align: center;
}