/* ============================================================
   Страница «Неон» — блоки только этой страницы.
   Общие компоненты (карточки ниш, шаги процесса) — в pages.css.
   Подключается ПОСЛЕ styles.css и pages.css.
   ============================================================ */

/* ---------- HERO ---------- */
.hero--neon .hero__title{max-width:790px;}
.hero--neon .hero__features{gap:40px;flex-wrap:wrap;}
.hero--neon .feat svg{width:21px;height:21px;flex:none;}

/* Заголовок портфолио в макете идёт одной строкой — базовых 1050px не хватает */
.portfolio .head__text{max-width:1300px;}

/* ---------- «Почему LED-неон» ---------- */
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;}
.why-card{background:var(--gray);border-radius:20px;padding:30px;display:flex;flex-direction:column;
  justify-content:space-between;gap:30px;min-height:250px;}
.why-card__text{display:flex;flex-direction:column;gap:15px;}
.why-card__title{font-size:21px;line-height:25px;font-weight:500;color:var(--navy);}
.why-card__desc{font-size:14px;line-height:23px;color:rgba(15,22,40,.6);}
.why-card__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.why-card__tag{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;background:#fff;
  font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.3px;color:var(--navy);white-space:nowrap;}
.why-card__icon{width:62px;height:62px;flex:none;border-radius:18px;background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(237,44,47,.35);}
.why-card__icon svg,.why-card__icon img{width:30px;height:30px;}

/* ---------- Адаптив ---------- */
@media (max-width:1500px){
  .hero--neon .hero__features{gap:10px;flex-wrap:wrap;}
}
@media (max-width:1280px){
  .why__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1024px){
  .hero--neon .hero__title{max-width:none;}
}
@media (max-width:768px){
  .why__grid{grid-template-columns:1fr;gap:20px;}
  .why-card{min-height:0;gap:20px;}
  .hero--neon .hero__features{gap:12px;flex-direction:column;align-items:flex-start;}
}