/* ===========================
   RESPONSIVE / MOBILE-ONLY
   =========================== */

/* --- крупные планшеты --- */
@media (max-width: 1200px){
  .nav-container{ padding: 1.5rem 2rem; }
  .section{ padding: 80px 0; }
  .hero-title{ font-size: 3rem; }
  .hero-subtitle{ font-size: 1.15rem; }
  .goals-content-wrapper{ gap: 60px; max-width: 1100px; }
}

/* --- ноуты / горизонтальные планшеты --- */
@media (max-width: 992px){
  .logo{ min-width: 0; }
  .logo h1{ font-size: 1.05rem; }

  /* герой */
  .hero{ min-height: 100svh; height: 100svh; }
  .hero-title{ font-size: 2.2rem; margin-bottom: .75rem; }
  .hero-subtitle{ font-size: 1rem; }
  .scroll-indicator{ height: 32px; }

  /* фон героя спокойнее */
  .pipe-line{ opacity: .55; }
  .energy-particle{ transform: scale(.85); filter: blur(.7px); }
}

/* --- планшеты, портрет + Мобильное меню --- */
@media (max-width: 768px){
  /* базовая защита от горизонтального скролла */
  html, body{ overflow-x: hidden; }
  .container{ padding: 0 16px; }

  /* Шапка */
  .nav-container{ padding: 1rem 16px; position: relative; }
  .logo h1{ font-size:.98rem; letter-spacing:.2px; }
  .header.scrolled .nav-container{ padding:1rem 16px; }
  .header.scrolled .logo h1{ font-size:.98рем; }

  /* === ГАМБУРГЕР (фикс: виден, ровные три полосы, не зависит от числа span) === */
  .hamburger{
    display:flex;              /* <-- включаем, иначе скрыт базой */
    position:relative;
    z-index:1201;              /* над оверлеем меню (1200) */
    width:34px;
    height:22px;
    cursor:pointer;
    align-items:center;
    justify-content:center;
  }

  /* если в HTML несколько span — показываем только первый как «среднюю» полосу */
  .hamburger span{ display:none; }
  .hamburger span:first-child{
    display:block;
    position:absolute;
    left:0; top:50%;
    width:100%; height:2.5px;
    background:#fff; border-radius:999px;
    transform:translateY(-50%);
    transition:transform .25s ease, opacity .2s ease;
    margin:0 !important;
    box-shadow:none;
  }

  /* Верх/низ — псевдоэлементы, поэтому всегда будет три линии */
  .hamburger::before,
  .hamburger::after{
    content:"";
    position:absolute; left:0;
    width:100%; height:2.5px;
    background:#fff; border-radius:999px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .hamburger::before{ top:0; }
  .hamburger::after { bottom:0; }

  /* Состояние "крестик" */
  .hamburger.active span:first-child{
    opacity:0; transform:translateY(-50%) scaleX(.6);
  }
  .hamburger.active::before{
    top:50%; transform:translateY(-50%) rotate(45deg);
  }
  .hamburger.active::after{
    bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg);
  }

  /* === ОВЕРЛЕЙ-МЕНЮ без «мига» (жёсткий сброс десктопных стилей) === */
  .nav-menu{
    all: unset;                 /* чистим наследие десктопа */
    position: fixed;
    inset: 0;

    display: none;              /* до активации вообще не рендерим */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    background:
      linear-gradient(
        185deg,
        rgba(5, 8, 6, 0.96)   0%,
        rgba(8, 12, 10, 0.95) 18%,
        rgba(12, 20, 14, 0.93) 40%,
        rgba(18, 30, 20, 0.90) 65%,
        rgba(28, 48, 34, 0.86) 100%
      );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1200;

    opacity: 0;
    transform: scale(.98);
    transition: opacity .25s ease, transform .25s ease;
  }
  .nav-menu.active,
  .nav.nav-open .nav-menu,
  .header.nav-open .nav-menu{
    display: flex;     /* теперь реально рисуем */
    opacity: 1;
    transform: scale(1);
  }

  /* пункты меню + стейджинг появления */
  .nav-menu li{ list-style:none; width:100%; text-align:center; }
  .nav-link{
    display:inline-block; padding: 14px 0;
    font-size: 1.3rem; font-weight: 800;
    color:#fff; text-transform:uppercase; letter-spacing:.11em;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
    opacity:0; transform: translateY(18px);
    transition: opacity .4s ease, transform .4s ease, color .2s ease;
  }
  .nav-menu.active .nav-link{ opacity:1; transform: translateY(0); }
  .nav-menu.active li:nth-child(1) .nav-link{ transition-delay:.08s; }
  .nav-menu.active li:nth-child(2) .nav-link{ transition-delay:.16s; }
  .nav-menu.active li:nth-child(3) .nav-link{ transition-delay:.24s; }
  .nav-menu.active li:nth-child(4) .nav-link{ transition-delay:.32s; }
  .nav-link:hover{ color:#e8ffb0; transform: translateY(-2px); }

  /* при открытом меню — блокируем скролл, шапку не блюрим */
  body.nav-open{ overflow:hidden; }
  body.nav-open .header{ background: transparent !important; backdrop-filter: none !important; }

  /* герой */
  .hero{ min-height: 100svh; height: 100svh; }
  .pipe-line{ opacity: .55; }
  .energy-particle{ transform: scale(.85); filter: blur(.7px); }

  /* О НАС — сетка в 1 колонку, центр, без подрезания */
  .about-content-wrapper{
    display:grid; grid-template-columns:1fr; gap:1rem;
    overflow: visible !important;
    justify-items: center; align-items: center;
  }
  /* критично: снять правый паддинг у текста */
  .about-section .text-content p,
  .about-content-wrapper .text-content p,
  .text-content p{ font-size:1.05rem; line-height:1.65; padding-right:0 !important; }
  #about .text-content p strong{ font-weight:700; }

  /* reset позиционирования инженера + центрирование */
  .engineer-image-wrapper{
    position:relative !important; right:auto !important; bottom:auto !important;
    width:100% !important; max-width:340px !important; height:auto !important;
    margin:0 auto !important; display:flex !important; justify-content:center !important;
    justify-self:center !important;
  }
  .engineer-image{
    position:static !important; width:100% !important;
    display:flex !important; justify-content:center !important; align-items:flex-end !important;
    transform:none !important; margin:0 auto !important; text-align:center !important;
  }
  .engineer-image img{
    position:static !important; display:block !important; margin:0 auto !important;
    transform:none !important; object-fit:contain !important; object-position:center bottom !important;
    width:80% !important; max-width:260px !important; height:auto !important; padding:0 !important;
  }
  .about-text-block{ order:2; padding-right:0; }

  /* МИССИЯ — по одной карточке */
  .mission-grid{ grid-template-columns:1fr; gap:1.25rem; }
  .mission-item{ padding:1.5rem; }
  .mission-icon{ width:110px; height:110px; }

  /* ЦЕЛИ — башня между колонками в одну линию */
  .goals-block{ padding:64px 16px; }
  .goals-content-wrapper{
    flex-wrap: wrap; gap:24px; max-width:680px; padding:0; justify-content:center;
  }
  .goals-left{ order:1; }
  .cooling-tower-container{ order:2; flex:1 1 100%; text-align:center; }
  .goals-right{ order:3; }
  .goals-column{ flex:1 1 100%; max-width:100%; gap:20px; transform:none; }
  .goal-item{ font-size:16px; }
  .cooling-tower{ width:min(360px, 90%); }
  .cooling-tower-container::before{ display:none; }
  .goals-word{ font-size:40px; top:50%; transform:translate(-50%,-55%); }
  .goals-word-back{ transform:translate(-115%,-58%); }
  .goals-word-front{ transform:translate(8%,-58%); }

  /* Участники/Документы/Знания */
  .members-grid--heroheads{ grid-template-columns: 1fr !important; gap: 1rem; }
  .member-hero{ height: 150px; }
  .member-card .services{ padding: 1rem 1rem 1.2rem; }

  .docs-showcase{ gap: 1rem; }
  .doc-showcase-card{ max-width: 240px; overflow:hidden; }

  /* База знаний: карточка в столбик, кнопки ниже текста */
  .kcard{ padding: 1rem; }
  .kitem{ display:grid; grid-template-columns:1fr; gap:.75rem; }
  .kitem__main{ min-width:0; }
  .kitem__actions{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-start; }

  /* КОНТАКТЫ */
  #contacts{ padding: 240px 0 0; min-height: 520px; }
  .contacts-panel{
    grid-template-columns:1fr;
    padding:32px 18px 40px;
    border-radius:12px 12px 0 0;
    background:linear-gradient(115deg, rgba(18,40,25,.9), rgba(36,74,45,.9));
  }

  /* КНОПКА «Скачать файл» — под заголовком */
  .file-download{
    flex-direction: column !important; align-items: stretch !important;
    gap: .75rem; padding: 1.25rem; border-radius: 16px; text-align: center;
  }
  .file-download h3{ font-size: 1.2rem; margin-bottom: .5rem; text-align:center; }
  .download-btn{ justify-content: center; width: 100%; margin-top: .5rem; }

  /* Убираем декоративные линии у любых заголовков */
  .section-title::before,
  .section-title::after,
  .mission-block h3::before,
  .mission-block h3::after,
  #contacts .section-title::before,
  #contacts .section-title::after{
    display: none !important; content: none !important;
  }
}

/* --- телефоны --- */
@media (max-width: 576px){
  .section{ padding: 64px 0; }
  .section-title{ font-size: 1.8rem; padding: 0 1rem; }
  .hero-title{ font-size: 1.9rem; }
  .hero-subtitle{ font-size: .95rem; }
  .mission-block h3{ font-size: 1.8rem; margin-bottom: 1.25rem; }
  .member-hero{ height: 140px; }
  .member-hero__title{ font-size: 1rem; }
  .contacts-panel p,
  .contacts-panel .contact-details p{ font-size: .98rem; }

  /* ещё немного уменьшим «инженера» */
  .engineer-image-wrapper{ max-width: 300px; }
  .engineer-image img{ max-width: 260px; width: 80%; }
}

/* --- сверхузкие / старые смартфоны --- */
@media (max-width: 380px){
  .logo h1{ font-size: .9rem; }
  .nav-container{ padding: .9rem 12px; }
  .hero-title{ font-size: 1.65rem; }
  .hero-subtitle{ font-size: .9rem; }
  .kitem{ padding: .85rem; }
  .kbtn{ --btn-px: 12px; font-size: .85rem; }
  .contact-details p{ font-size: .95rem; }
  .hamburger{ width: 28px; }
}

/* --- системные правки --- */

/* якоря не уезжают под фикс-хедер */
[id]{ scroll-margin-top: 84px; }

/* планшеты-портрет: башня меньше, слова — шире разнесены */
@media (max-width: 1024px) and (orientation: portrait){
  /* башня: чуть компактнее, чтобы не «съедать» текст */
  .cooling-tower{ width:min(320px, 82%); }

  /* общий размер заголовка поверх башни */
  .goals-word{
    font-size: clamp(40px, 6.4vw, 56px);
    top: 52%;
    transform: translate(-50%, -56%);
  }

  /* «ЦЕЛИ» — левее, чтобы буква И не пряталась за башней */
  .goals-word-back{
    transform: translate(-135%, -58%);  /* было около -140% на десктопе и -115% на мобиле */
    opacity: 0.95;
  }

  /* «СОЮЗА» — чуть правее центра */
  .goals-word-front{
    transform: translate(10%, -58%);
  }
}

/* узкие смартфоны-портрет: ещё компактнее и сильнее разнос */
@media (max-width: 570px){
  .cooling-tower{ width:min(300px, 78%); }

  .goals-word{
    font-size: clamp(32px, 7.2vw, 44px);
    top: 52%;
    transform: translate(-50%, -56%);
  }

  .goals-word-back{
    transform: translate(-145%, -58%);  /* уводим левее, чтобы «ЦЕЛИ» было целиком */
  }

  .goals-word-front{
    transform: translate(12%, -58%);
  }
}

/* =========================
   1) ПЛАНШЕТЫ-ПОРТРЕТ (iPad Air 820×1180, iPad Pro 1024×1366, Surface Pro 7 912×1368)
   Диапазон: 769–1180px по ширине, портретная ориентация
   Чиним блок "О нас" (убираем чрезмерный padding-right, уменьшаем инженера),
   и подправляем "ЦЕЛИ СОЮЗА".
========================= */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait){

  /* Шапка чуть компактнее, чтобы не перекашивало колонку */
  .nav-container{ padding: 1rem 20px; }

  /* О НАС: уменьшаем запас под картинку и саму картинку */
  .about-content-wrapper{ min-height: 420px; }
  .text-content p{ padding-right: 14rem !important; } /* было 30rem → слишком много для планшета */
  .engineer-image-wrapper{
    width: 300px; height: 460px; right: 10px; bottom: 0;
  }
  .engineer-image img{
    height: 120%; padding: 0; transform: none;
  }

  /* Миссия — карточки крупнее шага, чтобы равномерно легли */
  .mission-grid{ grid-template-columns: repeat(2, minmax(280px,1fr)); gap: 1.5rem; }

  /* ЦЕЛИ СОЮЗА: башню и слова чуть сжать/разнести */
  .cooling-tower{ width: min(360px, 82%); }
  .goals-word{
    font-size: clamp(42px, 6.0vw, 58px);
    top: 52%; transform: translate(-50%, -56%);
  }
  .goals-word-back{  transform: translate(-135%, -58%); opacity: .95; }
  .goals-word-front{ transform: translate(10%,  -58%); }

  /* Сетка участников/доков — две колонки = аккуратнее центр */
  .members-grid--heroheads{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* =========================
   2) ПЛАНШЕТЫ-ЛАНДШАФТ (Nest Hub 1024×600, Nest Hub Max 1280×800, iPad Pro/Air landscape)
   Диапазон: 900–1368px, ландшафт. Мало по высоте — уменьшаем Hero и "Цели".
========================= */
@media (min-width: 900px) and (max-width: 1368px) and (orientation: landscape){

  /* Герой: не 100svh, чтобы не съедать вертикаль */
  .hero{ min-height: 78svh; height: auto; }

  /* "О нас": поджать инженера и правый отступ */
  .text-content p{ padding-right: 12rem !important; }
  .engineer-image-wrapper{ width: 280px; height: 420px; right: 12px; }

  /* Карточки миссии — 3 аккуратные колонки */
  .mission-grid{ grid-template-columns: repeat(3, minmax(220px,1fr)); gap: 1.25rem; }

  /* ЦЕЛИ СОЮЗА — башня и надпись компактнее */
  .cooling-tower{ width: min(340px, 76%); }
  .goals-word{
    font-size: clamp(36px, 4.8vw, 52px);
    top: 52%; transform: translate(-50%, -56%);
  }
  .goals-word-back{  transform: translate(-140%, -58%); }
  .goals-word-front{ transform: translate(12%,   -58%); }
}

/* =========================
   3) УЗКИЕ СМАРТФОНЫ-ПОРТРЕТ (например 412×915, 540×720)
   Здесь ты уже переводишь "О нас" в одну колонку, но подправим "Цели".
========================= */
@media (max-width: 570px){
  /* башня чуть меньше, слова сильнее разнести */
  .cooling-tower{ width: min(300px, 78%); }
  .goals-word{
    font-size: clamp(32px, 7.2vw, 44px);
    top: 52%; transform: translate(-50%, -56%);
  }
  .goals-word-back{  transform: translate(-145%, -58%); }
  .goals-word-front{ transform: translate(12%,   -58%); }
}

/* =========================
   4) ОБЩИЙ ТАБЛЕТ-ПАТЧ  (подчищаем «белый пустырь» справа в 769–1024 ширине)
   Виноваты большой padding-right и абсолютная картинка. Дополнительно страхуемся.
========================= */
@media (min-width: 769px) and (max-width: 1024px){
  .container{ padding: 0 18px; }
  .about-content-wrapper{ overflow: visible; }
  .text-content p{ padding-right: 12rem !important; }
  .engineer-image-wrapper{ width: 280px; height: 420px; }
}

/* =========================
   5) СЕРФЕЙСЫ/ПРОМЕЖУТОЧНЫЕ (Surface Pro 7, ширина ~912)
   Чуть больше места тексту, картинку ещё уменьшить.
========================= */
@media (min-width: 880px) and (max-width: 940px){
  .text-content p{ padding-right: 10rem !important; }
  .engineer-image-wrapper{ width: 260px; height: 400px; right: 8px; }
}