/* =========================================================
   SPB-INTRA — HOME PAGE UI
   ЕДИНЫЙ КОНТЕЙНЕР КАК НА МАКЕТЕ
   ========================================================= */

:root{
  --bg-main:#07111d;
  --bg-card:#081625;
  --bg-card-2:#0d1d31;

  --line:rgba(77,163,255,.22);
  --line-soft:rgba(255,255,255,.08);

  --text:#ffffff;
  --muted:#a7bfd7;

  --blue:#1ea7ff;
  --blue-2:#0d6efd;

  --shadow:
    0 20px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);

  --footer-bg: linear-gradient(135deg, #0b1626 0%, #13233a 100%);
  --footer-text: #cfd8e3;
  --footer-muted: #8fa3b8;
  --footer-link: #4da3ff;
  --footer-link-hover: #ffffff;
  --footer-heading: #ffffff;
  --footer-border: rgba(255,255,255,.15);
  --footer-divider: rgba(255,255,255,.12);
}

/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
}

body{
  font-family:'Inter',sans-serif;
  background: #f5f7fb; /* мягкий светлый фон вместо тёмно-синего */
  color: #1a1a1a;
}

/* =========================================================
   ГЛАВНЫЙ ОБЩИЙ БЛОК
   ========================================================= */

.home-page{
  width:100%;
  max-width:1200px;

  margin:20px auto;

  border-radius:26px;

  overflow:hidden;

  position:relative;

  background:
    linear-gradient(180deg,#071523 0%, #081626 100%);

  border:1px solid rgba(77,163,255,.16);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 40px 120px rgba(0,0,0,.6);
}

/* светящиеся линии как на макете */
.home-page::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(135deg,
      transparent 0%,
      rgba(0,162,255,.07) 28%,
      transparent 40%
    );

  z-index:0;
}

/* =========================================================
   ОБЩИЕ СЕКЦИИ
   ========================================================= */

.transformers-block,
.products-block,
.projects-block,
.site-footer{
  position:relative;
  z-index:2;
}

.transformers-block-container,
.products-block-container,
.projects-block-container{
  width:100%;
  padding-left:34px;
  padding-right:34px;

  box-sizing:border-box;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:relative;
  z-index:100;

  width:100%;

  border-bottom:1px solid rgba(255,255,255,.06);
}

.site-header .header-container{
  width:100%;

  padding:18px 34px;

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

  background:transparent;

  border:none;
  border-radius:0;

  backdrop-filter:blur(14px);

  transition:transform .35s ease;
}

/* ===== LOGO ===== */

.header-logo a{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--footer-heading);
}

.header-logo img{
  max-width:58px;
}

.header-logo span{
  font-size:24px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* ===== MENU ===== */

.header-nav{
  display:flex;
  gap:34px;
}

.header-nav a{
  font-size:15px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  position:relative;
  transition:.3s ease;
}

.header-nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-8px;

  width:0;
  height:2px;

  background:var(--blue);
  transition:.3s ease;
}

.header-nav a:hover{
  color:#fff;
}

.header-nav a:hover::after{
  width:100%;
}

/* ===== BURGER ===== */

.header-burger{
  display:none;
  width:46px;
  height:46px;

  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:6px;

  border-radius:12px;

  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);

  cursor:pointer;
  transition:.3s ease;
  z-index:1200;
}

.header-burger span{
  height:2px;
  width:26px;
  background:white;
  border-radius:2px;
  transition:.3s ease;
}

.header-burger.active span:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}

.header-burger.active span:nth-child(2){
  opacity:0;
}

.header-burger.active span:nth-child(3){
  transform:rotate(-45deg) translate(5px,-5px);
}

/* ===== OVERLAY ===== */

.header-overlay{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);

  opacity:0;
  pointer-events:none;

  transition:opacity .35s ease;
  z-index:999;
}

.header-overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* ===== DRAWER ===== */

.header-drawer{
  position:absolute;
  top:0;
  right:0;

  width:320px;
  height:100%;

  background:linear-gradient(135deg,#0b1626 0%,#0f1c2f 60%,#13233a 100%);
  border-left:1px solid rgba(255,255,255,.08);

  padding:28px 22px;

  display:flex;
  flex-direction:column;
  gap:16px;

  transform:translateX(110%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);

  box-shadow:-30px 0 60px rgba(0,0,0,.35);
}

.header-overlay.active .header-drawer{
  transform:translateX(0);
}

.header-drawer a{
  color:rgba(255,255,255,.85);
  font-size:18px;
  font-weight:600;
  text-decoration:none;

  padding:10px 12px;
  border-radius:10px;

  opacity:0;
  transform:translateX(15px);
  transition:.25s ease;
}

.header-drawer a:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  transform:translateX(6px);
}

.header-overlay.active .header-drawer a:nth-child(1){animation:fadeInMenu .4s .05s forwards;}
.header-overlay.active .header-drawer a:nth-child(2){animation:fadeInMenu .4s .10s forwards;}
.header-overlay.active .header-drawer a:nth-child(3){animation:fadeInMenu .4s .15s forwards;}
.header-overlay.active .header-drawer a:nth-child(4){animation:fadeInMenu .4s .20s forwards;}

@keyframes fadeInMenu{
  to{
    opacity:1;
    transform:translateX(0);
  }
}

body.menu-open .header-container{
  transform:scale(.98);
}

/* =========================================================
   HERO (DIAGONAL SPLIT LIKE DESIGN)
   ========================================================= */

.transformers-block{
  padding:0;
  margin-bottom:60px;
}

.transformers-block-container{
  min-height:420px;

  padding:56px 42px 34px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;

  gap:18px;

  position:relative;
  overflow:hidden;

  border-bottom:1px solid rgba(255,255,255,.06);
}

/* ===== BACKGROUND LAYERS ===== */
.transformers-block-container::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    linear-gradient(110deg,
      rgba(5,14,24,.98) 0%,
      rgba(5,14,24,.96) 38%,
      rgba(5,14,24,.55) 52%,
      rgba(5,14,24,.10) 65%,
      transparent 72%
    ),
    url('../image/main_var1.webp') center/cover no-repeat;

  z-index:0;
}

/* ===== DIAGONAL CUT LINE ===== */
.transformers-block-container::after{
  content:'';
  position:absolute;

  top:-30%;
  left:40%; /* 👈 ВАЖНО: теперь привязка слева */

  width:2px;
  height:180%;

  transform:rotate(28deg);

  background: linear-gradient(
    to bottom,
    rgba(0,162,255,.45),
    rgba(0,162,255,.05)
  );

  box-shadow:
    0 0 22px rgba(0,162,255,.25);

  z-index:1;
  pointer-events:none;
}

/* чтобы контент был выше фона */
.transformers-block-container > *{
  position:relative;
  z-index:2;
}


.transformers-title{
  font-size:58px;
  line-height:1.04;
  font-weight:800;

  max-width:520px;
  margin:0;

  color:#fff;

  position:relative;
  z-index:2;
}

.transformers-subtitle{
  font-size:22px;
  line-height:1.5;

  color:var(--muted);

  max-width:560px;
  margin:0;

  position:relative;
  z-index:2;
}

.transformers-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;

  margin-top:8px;
  position:relative;
  z-index:2;
}

/* =========================================================
   BUTTONS (REBUILT — STYLE LIKE PRODUCTS)
   ========================================================= */

.btn-primary,
.btn-secondary,
.open-request-btn{
  min-height:52px;

  padding:14px 26px;

  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);

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

  font-size:15px;
  font-weight:700;

  text-decoration:none;
  cursor:pointer;

  position:relative;
  overflow:hidden;

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

/* ===== PRIMARY ===== */
.btn-primary{
  background: linear-gradient(180deg,#1ea7ff 0%,#007cff 100%);
  color:#fff;

  box-shadow:
    0 0 24px rgba(0,132,255,.35);
}

.btn-primary:hover{
  transform: translateY(-4px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.15),
    0 0 38px rgba(0,132,255,.55);

  border-color: rgba(0,183,255,.35);
}

/* ===== SECONDARY + REQUEST ===== */
.btn-secondary,
.open-request-btn{
  background: rgba(255,255,255,.05);
  color:#fff;

  backdrop-filter: blur(12px);
}

/* мягкая подсветка как у product-card */
.btn-secondary::before,
.open-request-btn::before{
  content:'';
  position:absolute;
  inset:0;

  background: linear-gradient(
    180deg,
    rgba(0,162,255,.10),
    rgba(0,162,255,.02)
  );

  opacity:0;
  transition:.3s ease;
}

.btn-secondary:hover,
.open-request-btn:hover{
  transform: translateY(-4px);

  background: rgba(255,255,255,.08);

  border-color: rgba(0,183,255,.30);

  box-shadow:
    0 12px 28px rgba(0,0,0,.15),
    0 0 22px rgba(0,162,255,.18);
}

.btn-secondary:hover::before,
.open-request-btn:hover::before{
  opacity:1;
}

.products-block {
  padding: 0 22px 24px;
  margin-top: 60px;
  position: relative;
  z-index: 2;
}

.products-block-container {
  padding: 0;
}

/* ===== WRAPPER (МАСКА СЛАЙДЕРА) ===== */
.products-wrapper {
  overflow: hidden;
  position: relative;
}

/* ===== TRACK (ДВИЖЕНИЕ) ===== */
.products-track {
  display: flex;
  gap: 16px;

  transition: transform .45s ease;
  will-change: transform;

  padding-top: 10px; /* даёт место для hover вверх */
}

/* ===== CARD ===== */
.products-track .product-card {
  flex: 0 0 calc((100% - 48px) / 4);
  height: 320px;

  position: relative;
  overflow: hidden; /* ВАЖНО: возвращаем нормальное поведение */
  text-decoration:none;

  border-radius: 16px;

  display: flex;
  flex-direction: column;

  background: linear-gradient(
    180deg,
    rgba(11, 25, 40, 0.96),
    rgba(7, 18, 31, 0.96)
  );

  border: 1px solid rgba(0, 183, 255, 0.15);

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

  will-change: transform;
}

/* ===== HOVER ===== */
.products-track .product-card:hover {
  transform: translateY(-6px);
  z-index: 50;

  border-color: rgba(0, 183, 255, .45);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.08),
    0 0 20px rgba(0, 162, 255, .12);
}

/* ===== IMAGE ===== */
.products-track .product-img {
  height: 190px;

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

  padding: 20px;
}

.products-track .product-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  transition: transform .35s ease;
}

.products-track .product-card:hover .product-img img {
  transform: scale(1.05);
}

/* ===== TITLE ===== */
.products-track .product-title {
  padding: 12px 16px 0 16px;

  font-size: 20px;
  font-weight: 600;
  color: #fff;

  line-height: 1.3;

  min-height: 44px;
}

/* ===== BUTTON MORE ===== */
.products-track .product-more {
  position: absolute;
  right: 14px;
  bottom: 14px;

  width: 34px;
  height: 34px;

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

  z-index: 3;
  background: transparent;
}

.products-track .product-more img {
  width: 28px;
  height: 28px;

  transition: transform .2s ease;
}

.products-track .product-card:hover .product-more img {
  transform: translateX(3px);
}

/* =========================================================
   PROJECTS
   ========================================================= */

.projects-block {
  padding: 0 22px 30px;
}

.projects-block-container {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ===== HEADER ===== */

.projects-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 18px;
}

.projects-head h2 {
  margin: 0;

  font-size: 34px;
  font-weight: 800;
  color: #fff;
}

/* ===== SLIDER ===== */

.projects-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== WRAPPER ===== */

.projects-wrapper {
  flex: 1;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
  scroll-behavior: smooth;
}

.projects-wrapper::-webkit-scrollbar {
  display: none;
}

/* ===== TRACK ===== */

.projects-track {
  display: flex;
  gap: 16px;

  padding: 10px 0;

  align-items: flex-start;
}

/* ===== CARD ===== */

.projects-track .project-card {
  flex: 0 0 calc((100% - 48px) / 4);

  aspect-ratio: 1 / 1;

  height: auto;
  align-self: flex-start;

  position: relative;
  overflow: hidden;

  border-radius: 16px;

  background: #081421;
  border: 1px solid rgba(255,255,255,.06);

  cursor: pointer;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

/* ===== HOVER ===== */

.projects-track .project-card:hover {
  transform: translateY(-6px);

  border-color: rgba(0,162,255,.28);

  box-shadow: 0 0 28px rgba(0,162,255,.15);
}

/* ===== IMAGE ===== */

.projects-track .project-img {
  width: 100%;
  height: 100%;
}

.projects-track .project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform .5s ease;
}

.projects-track .project-card:hover .project-img img {
  transform: scale(1.08);
}

/* ===== OVERLAY ===== */

.projects-track .project-overlay {
  position: absolute;
  inset: auto 0 0 0;

  padding: 16px;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0),
    rgba(0,0,0,.85)
  );

  color: #fff;

  font-size: 15px;
  font-weight: 600;

  opacity: 0;
  transform: translateY(10px);

  transition: all .3s ease;
}

/* ===== SHOW ON HOVER ===== */

.projects-track .project-card:hover .project-overlay {
  opacity: 1;
  transform: translateY(0);
}

.projects-track .project-card:hover .project-overlay {
  backdrop-filter: blur(4px);
}

/* ===== BUTTONS ===== */

.projects-btn {
  width: 44px;
  height: 44px;

  flex-shrink: 0;

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

  border-radius: 12px;

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.08);

  cursor: pointer;

  transition: .25s ease;
}

.projects-btn:hover {
  background: rgba(0,162,255,.16);

  border-color: rgba(0,162,255,.35);
}

.projects-btn img {
  width: 20px;
  height: 20px;
}

/* ===== SCROLLBAR ===== */

.projects-scrollbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  margin-top: 18px;
}

.projects-scrollbar span {
  width: 38px;
  height: 4px;

  border-radius: 20px;

  background: rgba(255,255,255,.10);

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

.projects-scrollbar span.active {
  background: #2f7bff;

  transform: scaleX(1.15);

  box-shadow:
    0 0 10px rgba(47,123,255,.55);
}

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

.site-footer{
  width:100%;

  padding:28px 34px 20px;

  border-top:1px solid rgba(255,255,255,.06);

  position:relative;
}

.footer-container{
  width:100%;

  display:grid;
  grid-template-columns:300px 1fr 320px;

  gap:34px;

  padding:0;
  align-items:start;

  background:transparent;

  border:none;
  border-radius:0;

  backdrop-filter:none;
}

/* ===== ВЕРТИКАЛЬНЫЕ РАЗДЕЛИТЕЛИ ===== */

.footer-column{
  position:relative;
}

.footer-column:not(:last-child)::after{
  content:'';

  position:absolute;
  right:-17px;
  top:8px;
  bottom:8px;

  width:1px;

  background:var(--footer-divider);
}

/* ===== TITLES ===== */

.footer-column h3{
  font-size:13px;
  font-weight:700;

  margin:0 0 18px;
  padding-bottom:10px;

  color:var(--footer-heading);

  text-transform:uppercase;
  letter-spacing:1.2px;

  position:relative;
}

.footer-column:not(.footer-first-col) h3::after{
  content:'';

  position:absolute;
  left:0;
  bottom:0;

  width:42px;
  height:2px;

  background:var(--footer-link);
  border-radius:2px;
}

/* ===== FIRST ===== */

.footer-first-col{
  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

/* ===== LOGO + TEXT ===== */

.footer-logo-and-text{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;

  margin-bottom:10px;
}

.footer-logo-and-text img{
  width:54px;
  height:auto;

  flex-shrink:0;
}

.footer-title-slogan{
  display:flex;
  flex-direction:column;

  gap:4px;

  align-items:flex-start;
  text-align:left;
}

.footer-company-name{
  position:relative;

  display:inline-block;

  margin:0;

  font-size:18px;
  font-weight:700;

  line-height:1.1;

  color:var(--footer-heading);
}

.footer-company-name::after{
  content:'';

  position:absolute;

  left:0;
  bottom:-4px;

  width:34px;
  height:2px;

  border-radius:2px;

  background:var(--footer-link);
}

.footer-slogan{
  margin-top:8px;

  font-size:13px;
  line-height:1.35;

  color:var(--footer-muted);

  max-width:220px;
}

/* ===== LINKS ===== */

.footer-nav-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:18px;

  margin-top:0px;
}

/* ВОЗВРАЩАЕМ СТИЛЬ КАК В ПРОДУКЦИИ */

.footer-nav-links a{
  color:var(--footer-link);
  text-decoration:none;

  font-size:14px;

  display:inline-flex;
  align-items:center;
  gap:6px;

  transition:.2s ease;
}

.footer-nav-links a:hover{
  color:#fff;
}

/* ===== PRODUCTS ===== */

.products-list{
  column-count:2;
  column-gap:28px;

  padding:0;
  margin:0;
}

.products-list li{
  list-style:none;
  margin-bottom:10px;
  break-inside:avoid;
}

.products-list li a{
  font-size:14px;
  color:var(--footer-link);
  text-decoration:none;

  display:inline-flex;
  align-items:center;
  gap:6px;
}

.products-list li a:hover{
  color:#fff;
}

/* ===== CONTACTS ===== */

.footer-contacts-col ul{
  margin:0;
  padding:0;
}

.footer-contact{
  display:flex;
  align-items:flex-start;
  gap:10px;

  margin-bottom:14px;

  color:var(--footer-muted);
  font-size:14px;

  word-break:break-word;
}

.footer-contact a{
  color:var(--footer-link);
  text-decoration:none;
}

.footer-contact a:hover{
  color:#fff;
}

/* ===== ICONS ===== */

.footer-link-icon,
.footer-icon-img{
  width:16px;
  height:16px;

  color:var(--footer-link);
  fill:currentColor;
  opacity:.9;
}

.footer-nav-links .footer-link-icon{
  margin-right:6px;
  vertical-align:middle;
}

/* ===== BOTTOM ===== */

.footer-bottom{
  margin-top:24px;
  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.08);

  text-align:center;
  font-size:13px;

  color:var(--footer-muted);
}

/* =========================================================
   MODAL
   ========================================================= */

.project-modal{
  position:fixed;
  inset:0;

  display:none;
  justify-content:center;
  align-items:center;

  z-index:9999;
}

.modal-bg{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.82);
  backdrop-filter:blur(6px);
}

.modal-content{
  position:relative;

  max-width:90%;
  max-height:90%;

  display:flex;
  flex-direction:column;
  align-items:center;

  z-index:2;
}

.project-modal img{
  max-width:100%;
  max-height:80vh;

  border-radius:18px;

  box-shadow:
    0 30px 90px rgba(0,0,0,.55);
}

.project-caption{
  margin-top:16px;

  color:#fff;
  font-size:18px;
  font-weight:600;

  text-align:center;
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ (ДО 768px)
   ========================================================= */

@media (max-width: 768px) {

  /* ----- ОБЩИЕ ПРАВКИ ----- */
  .home-page {
    margin: 0;
    border-radius: 0;
  }

  /* ----- ХЕДЕР ----- */
  .site-header .header-container {
    padding: 16px;
  }
  .header-nav {
    display: none;
  }
  .header-burger {
    display: flex;
  }
  .header-logo img {
    max-width: 46px;
  }
  .header-logo span {
    font-size: 18px;
  }

  /* ----- HERO ----- */
  .transformers-block-container {
    min-height: auto;
    padding: 34px 18px 26px;
  }
  .transformers-title {
    font-size: 34px;
    max-width: 100%;
  }
  .transformers-subtitle {
    font-size: 16px;
    max-width: 100%;
  }
  .transformers-buttons {
    flex-direction: column;
    width: 100%;
  }
  .btn-primary,
  .btn-secondary,
  .open-request-btn {
    width: 100%;
  }

  /* ----- БЛОКИ ПРОДУКЦИИ И ПРОЕКТОВ ----- */
  .products-block,
  .projects-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Продукция — горизонтальный скролл */
  .products-track {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    gap: 16px;
  }
  .products-track .product-card {
    width: 240px;
    min-width: 240px;
    flex: 0 0 auto;
  }

  /* Проекты — горизонтальный скролл, кнопки скрыты, шкала остаётся */
  .projects-slider .projects-btn {
    display: none;
  }
  .projects-wrapper {
    overflow-x: auto;
    scroll-padding: 0 16px;
  }
  .projects-track {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }
  .projects-track .project-card {
    width: 240px;
    min-width: 240px;
    flex: 0 0 auto;
  }
  .projects-track::-webkit-scrollbar,
  .products-track::-webkit-scrollbar {
    display: none;
  }
  /* Шкала (точки) остаётся видимой */
  .projects-scrollbar {
    display: flex;
  }

  /* ----- ФУТЕР — АККОРДЕОН (исправленный) ----- */
  .site-footer {
    padding: 0;
  }
  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
  }
  /* Убираем вертикальные разделители */
  .footer-column:not(:last-child)::after {
    display: none;
  }
  /* Оформление колонок */
  .footer-column {
    border: 1px solid var(--footer-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    padding: 16px;
    width: 100%;
    overflow-x: hidden;
    word-break: break-word;
    box-sizing: border-box;
  }
  /* Первая колонка — всегда открыта, центрирование */
  .footer-first-col {
    text-align: center;
  }
  .footer-first-col .footer-logo-and-text {
    justify-content: center;
  }
  .footer-first-col .footer-nav-links {
    justify-content: center;
  }
  /* Заголовки колонок (кроме первой) — кликабельны со стрелкой */
  .footer-column:not(.footer-first-col) h3 {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-right: 20px;
    position: relative;
  }
  /* Синяя полоса под заголовком */
  .footer-column:not(.footer-first-col) h3::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 40px;
    height: 2px;
    background: var(--footer-link);
    border-radius: 2px;
  }
  /* Стрелка (треугольник) */
  .footer-column:not(.footer-first-col) h3::after {
    content: '▾';
    background: none;
    width: auto;
    height: auto;
    font-size: 16px;
    transition: transform 0.3s;
    position: static;
    margin-left: 10px;
  }
  /* Скрываем содержимое по умолчанию */
  .footer-column:not(.footer-first-col) > ul:not(.products-list),
  .footer-column:not(.footer-first-col) .products-list,
  .footer-column:not(.footer-first-col) > .footer-contact,
  .footer-column:not(.footer-first-col) > div:not(.products-list) {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 0;
  }
  /* Открытое состояние */
  .footer-column:not(.footer-first-col).active > ul:not(.products-list),
  .footer-column:not(.footer-first-col).active .products-list,
  .footer-column:not(.footer-first-col).active > .footer-contact,
  .footer-column:not(.footer-first-col).active > div:not(.products-list) {
    max-height: 500px;
    opacity: 1;
    margin-top: 16px;
  }
  .footer-column.active h3::after {
    transform: rotate(180deg);
  }
  /* Продукция — одна колонка, без гридов */
  .products-list {
    column-count: 1;
    column-gap: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* Контакты — центрирование */
  .footer-contact {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    justify-content: center;
  }
  .footer-contact img {
    margin-bottom: 2px;
  }
  /* Уменьшаем иконки */
  .footer-link-icon,
  .footer-icon-img {
    width: 14px;
    height: 14px;
  }
}