/* =========================================================
   ЦентрМеталлПрофиль — adaptive.css v16
   Чистый адаптив: не ломает ПК, правит телефон/планшет.
   Заменить файл adaptive.css полностью.
========================================================= */

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* ---------- Планшеты и маленькие ноутбуки ---------- */
@media (min-width: 769px) and (max-width: 1180px) {
  .arch-nav { min-height: 82px; }
  .nav-container { max-width: 100%; padding: 12px 24px; gap: 18px; }
  .nav-logo-img { width: 46px; }
  .logo-primary { font-size: 17px; line-height: 1.05; white-space: nowrap; }
  .logo-sub { font-size: 11px; line-height: 1.15; white-space: nowrap; }
  .nav-links { gap: 16px; }
  .nav-label { font-size: 13px; white-space: nowrap; }
  .nav-contact-info { font-size: 11px; max-width: 260px; }
  .nav-cta { padding: 12px 18px; font-size: 12px; white-space: nowrap; }

  .hero-engineering { min-height: auto; padding: 110px 18px 30px; }
  .hero-arch-composition { width: 100%; max-width: 1080px; display: block; margin: 0 auto; }
  .arch-annotation-zone { padding-top: 0; }
  .hero-backplate, .text-plate { width: 100%; max-width: 920px; margin: 0 auto; }
  .text-plate { padding: 28px 30px; }
  .annotation-main { margin-bottom: 18px; }
  .annotation-meta { flex-wrap: nowrap; gap: 10px; margin-bottom: 18px; }
  .annotation-id { white-space: nowrap; }
  .hero-title { font-size: clamp(40px, 5.2vw, 58px); line-height: .95; margin: 0 0 18px; }
  .annotation-subtitle { max-width: 720px; padding-top: 14px; }
  .hero-subtitle { font-size: 15px; line-height: 1.45; }

  .full-width-strip { width: 100%; margin: 14px auto 0; left: auto; right: auto; margin-left: auto; margin-right: auto; padding: 0 18px 22px; background: transparent; border: 0; box-shadow: none; }
  .strip-content { max-width: 920px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
  .strip-left-part, .strip-right-part { width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 22px; background: rgba(10,10,10,.82); border: 1px solid rgba(255,107,0,.32); }
  .strip-divider { display: none; }
  .strip-btn { min-height: 48px; padding: 0 18px; font-size: 13px; white-space: nowrap; }
  .telegram-features { gap: 6px; }

  .tabs-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .tab-btn { min-height: 76px; border-radius: 18px; border: 1px solid rgba(0,0,0,.08); padding: 14px 10px; }
}

/* ---------- Телефоны ---------- */
@media (max-width: 768px) {
  :root { --mobile-side: 14px; }

  body { overflow-x: hidden !important; background: #fff; }
  section { width: 100%; max-width: 100%; overflow: hidden; }
  .container { width: 100%; max-width: 100%; padding-left: var(--mobile-side); padding-right: var(--mobile-side); }

  /* ШАПКА */
  .arch-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 74px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(0,0,0,.06);
    backdrop-filter: blur(16px);
  }
  .nav-container {
    min-height: 74px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .nav-logo { display: flex; align-items: center; min-width: 0; gap: 9px; }
  .nav-logo-img { width: 34px; height: auto; flex: 0 0 auto; }
  .logo-text { min-width: 0; }
  .logo-primary { display: block; font-size: 15px; line-height: 1.05; font-weight: 800; white-space: nowrap; }
  .logo-sub { display: block; font-size: 10px; line-height: 1.15; color: rgba(0,0,0,.62); white-space: nowrap; }

  .nav-links {
    position: fixed;
    inset: 74px 0 auto 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 18px 18px 22px;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
    z-index: 999;
  }
  .arch-nav.is-open .nav-links,
  body.menu-open .nav-links,
  .nav-links.active { display: flex; }
  .nav-link, .dropdown-toggle {
    width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.06); color: #111; text-decoration: none;
  }
  .nav-label { font-size: 14px; font-weight: 700; }
  .dropdown-menu { position: static; width: 100%; box-shadow: none; border: 0; padding: 8px 0 10px; display: none; }
  .nav-dropdown.open .dropdown-menu, .nav-dropdown:hover .dropdown-menu { display: block; }
  .dropdown-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .dropdown-item { min-height: 38px; }
  .nav-contact-info { display: grid; gap: 6px; padding: 12px 0; font-size: 12px; }
  .nav-cta { width: 100%; min-height: 44px; margin-top: 8px; border-radius: 14px; font-size: 12px; }

  .nav-toggle {
    width: 48px; height: 48px; border-radius: 18px; border: 1px solid rgba(0,0,0,.10);
    background: #111 !important; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 0; box-shadow: 0 10px 24px rgba(0,0,0,.14); flex: 0 0 auto;
  }
  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    content: ""; display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff !important; transform: none !important; opacity: 1 !important;
  }
  .nav-toggle span:nth-child(n+3) { display: none; }
  .arch-nav.is-open .nav-toggle span:nth-child(1),
  body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .arch-nav.is-open .nav-toggle span:nth-child(2),
  body.menu-open .nav-toggle span:nth-child(2) { opacity: 0 !important; }
  .arch-nav.is-open .nav-toggle::after,
  body.menu-open .nav-toggle::after { transform: translateY(-7px) rotate(-45deg) !important; }
  .arch-nav.is-open .nav-toggle::before,
  body.menu-open .nav-toggle::before { opacity: 0 !important; }

  /* HERO */
  .hero-engineering {
    width: 100%; min-height: auto; padding: 0 0 18px; background-position: center top; overflow: hidden !important;
  }
  .hero-engineering::before { opacity: .58; }
  .hero-arch-composition { width: 100%; max-width: 100%; display: block; margin: 0; padding: 12px var(--mobile-side) 0; }
  .arch-annotation-zone { padding: 0; width: 100%; max-width: 100%; }
  .hero-backplate { width: 100%; max-width: 100%; margin: 0; }
  .text-plate, .hero-card, .hero-glass-card {
    width: 100%; max-width: 100%; margin: 0; padding: 14px 14px 15px;
    border-radius: 22px; background: rgba(15,15,15,.78) !important; color: #fff;
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 38px rgba(0,0,0,.34); backdrop-filter: blur(14px);
  }
  .plate-content { padding: 0 !important; }
  .annotation-main { margin: 0 0 10px !important; }
  .annotation-line { display: none !important; }
  .annotation-content { padding-left: 0 !important; }
  .annotation-meta {
    display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; margin: 0 0 10px !important;
    overflow: hidden !important; width: 100%;
  }
  .annotation-id {
    display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0;
    height: 22px; padding: 0 5px; border-radius: 999px; border: 1px solid rgba(255,107,0,.42);
    background: rgba(255,107,0,.10); color: #ff6b00; font-size: 8px; line-height: 1; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hero-title {
    margin: 0 0 10px !important; font-size: clamp(27px, 8.2vw, 36px) !important; line-height: .92 !important;
    letter-spacing: -0.035em !important; text-shadow: 0 2px 8px rgba(0,0,0,.45);
  }
  .hero-title .title-line { display: block; }
  .hero-title .title-line.line-3 { margin-top: 4px; font-size: .9em; color: #ff6b00; }
  .hero-title .title-line.line-3::after { bottom: -3px; height: 2px; }
  .annotation-subtitle { max-width: 100%; padding-top: 10px !important; margin: 0 !important; }
  .annotation-subtitle .subtitle-line { width: 32px; margin-bottom: 9px; }
  .hero-subtitle {
    margin: 0 !important; font-size: 12.5px !important; line-height: 1.42 !important; color: rgba(255,255,255,.9);
  }
  .plate-indicators { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 13px; }
  .indicator { min-width: 0; padding: 9px 4px; border-radius: 14px; background: rgba(255,255,255,.08); text-align: center; }
  .indicator-number { font-size: 17px !important; line-height: 1; color: #ff6b00; }
  .indicator-label { margin-top: 3px; font-size: 8px !important; line-height: 1.15; letter-spacing: .08em; }

  .hero-additional-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px !important; }
  .hero-additional-actions .action-btn, .catalog-btn, .video-btn {
    min-width: 0; min-height: 58px; padding: 9px 10px !important; border-radius: 16px; gap: 8px;
  }
  .action-icon { width: 28px !important; height: 28px !important; border-radius: 10px; flex: 0 0 auto; }
  .action-title { font-size: 10px !important; line-height: 1.15; white-space: normal; }
  .action-meta { font-size: 8px !important; line-height: 1.15; }

  /* HERO формы: 2 отдельных компактных ряда */
  .full-width-strip {
    position: relative !important; left: auto !important; right: auto !important; width: 100% !important;
    margin: 10px 0 0 !important; padding: 0 var(--mobile-side) 14px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important;
  }
  .strip-content { width: 100%; max-width: 100%; padding: 0 !important; display: grid !important; grid-template-columns: 1fr; gap: 9px !important; }
  .strip-divider { display: none !important; }
  .strip-left-part, .strip-right-part {
    width: 100% !important; min-width: 0 !important; display: grid !important; align-items: center !important;
    grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px !important; padding: 10px !important;
    border-radius: 18px !important; background: rgba(8,8,8,.84) !important; border: 1px solid rgba(255,107,0,.26) !important;
    overflow: hidden !important;
  }
  .strip-icon { width: 34px !important; height: 34px !important; border-radius: 12px !important; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .strip-input-wrapper { min-width: 0 !important; position: relative; }
  .strip-phone-input { width: 100% !important; height: 42px !important; border-radius: 12px !important; font-size: 12px !important; padding: 0 10px !important; }
  .input-label { top: -12px !important; left: 8px !important; font-size: 8px !important; padding: 2px 6px !important; border-radius: 6px !important; white-space: nowrap; }
  .strip-btn { min-width: 0 !important; height: 42px !important; min-height: 42px !important; padding: 0 12px !important; border-radius: 12px !important; font-size: 11px !important; line-height: 1.05 !important; white-space: nowrap !important; }
  .strip-btn .btn-text { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  .btn-arrow { margin-left: 4px; }
  .telegram-content { min-width: 0 !important; margin: 0 !important; }
  .telegram-title { font-size: 11px !important; line-height: 1.12 !important; margin: 0 0 4px !important; color: #fff; }
  .telegram-features { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 4px; }
  .telegram-features .feature { font-size: 7.5px !important; line-height: 1; padding: 3px 5px; white-space: nowrap; }
  .tg-btn { background: #149bd7 !important; }

  /* ВТОРОЙ БЛОК */
  .systems { padding: 34px 0 42px !important; overflow: hidden; background: #fff; }
  .engineering-header-divider { margin: 0 auto 18px !important; max-width: 100%; padding: 0 var(--mobile-side) !important; }
  .engineering-divider { margin-bottom: 8px !important; }
  .engineering-section-title {
    font-size: clamp(27px, 7vw, 34px) !important; line-height: .98 !important; letter-spacing: -0.035em !important; margin: 0 0 10px !important; text-align: center;
  }
  .engineering-section-title .title-part { display: block; }
  .engineering-section-title .accent { color: #ff6b00; }
  .engineering-section-subtitle { font-size: 11px !important; line-height: 1.4 !important; letter-spacing: .13em !important; margin: 8px auto 0 !important; max-width: 330px; }
  .systems-tabs { width: 100%; max-width: 100%; margin: 0 !important; padding: 0 var(--mobile-side) !important; overflow: hidden; }
  .tabs-nav {
    width: 100%; max-width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px !important;
    padding: 8px !important; margin: 0 0 16px !important; background: #f7f7f7 !important; border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 18px !important; overflow: visible !important; box-shadow: none !important;
  }
  .tab-btn {
    width: 100%; min-width: 0; min-height: 56px !important; padding: 9px 6px !important; border-radius: 13px !important;
    background: #fff !important; border: 1px solid rgba(0,0,0,.06) !important; box-shadow: none !important; overflow: hidden;
  }
  .tab-btn::before { display: none !important; }
  .tab-title { font-size: 11px !important; line-height: 1.15 !important; white-space: normal !important; color: #111; }
  .tab-sub { font-size: 9px !important; line-height: 1.15 !important; margin-top: 3px; color: rgba(0,0,0,.55); }
  .tab-btn.active { border-color: rgba(255,107,0,.48) !important; background: #fff7f1 !important; }
  .tab-btn.active .tab-title, .tab-btn.active .tab-sub { color: #ff6b00 !important; }
  .tabs-content, .tab-pane, .catalog-pane { width: 100%; max-width: 100%; overflow: hidden; }

  /* product viewer and characteristics: don't overflow */
  .catalog-pane { display: block !important; }
  .catalog-visual, .catalog-info { width: 100%; max-width: 100%; }
  .dv-stage, .viewer3d__card { max-width: 100%; }
  .dv-thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .dv-thumb { min-width: 0; }
  .privacy-info, .product-info, .spec-card { width: 100%; max-width: 100%; }
  .quality-badge, .spec-row { min-width: 0; }
  .ral-grid, .colors-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
  .ral-card, .color-card { min-width: 0; min-height: 54px; padding: 9px; }

  /* ВЫБЕРИТЕ ПРОФИЛЬ */
  .profile-atelier { padding: 42px 0 !important; min-height: auto !important; overflow: hidden; }
  .profile-atelier .container { padding-left: var(--mobile-side); padding-right: var(--mobile-side); }
  .atelier-header { margin-bottom: 18px !important; text-align: center; }
  .atelier-header .pre-title { font-size: 11px !important; letter-spacing: .28em !important; margin-bottom: 9px !important; }
  .atelier-header .main-title, .profile-atelier .main-title { font-size: clamp(32px, 9vw, 42px) !important; line-height: .95 !important; margin: 0 0 12px !important; }
  .title-sub { font-size: 14px !important; line-height: 1.35 !important; margin: 10px auto 0 !important; }
  .atelier-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .profile-card { width: 100%; min-height: auto !important; padding: 16px !important; overflow: hidden !important; }
  .profile-card .card-header { display: grid !important; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; }
  .profile-card .card-icon { width: 42px !important; height: 42px !important; }
  .profile-card .card-title { font-size: 18px !important; line-height: 1.1 !important; white-space: normal !important; }
  .profile-card .card-ref { font-size: 9px !important; letter-spacing: .12em !important; margin-top: 2px !important; }
  .profile-card .card-subtitle { font-size: 11px !important; line-height: 1.25 !important; margin-top: 3px !important; }
  .profile-card .card-status { align-self: start; }
  .profile-card .status-badge { font-size: 8px !important; padding: 4px 7px !important; }
  .profile-card .card-content { margin-top: 12px !important; display: block !important; }
  .profile-card .divider { margin: 10px 0 !important; }
  .features-list { display: grid !important; gap: 8px !important; }
  .feature-item { font-size: 12px !important; line-height: 1.35 !important; padding-left: 16px !important; }
  .profile-action-btn { min-height: 44px !important; margin-top: 12px !important; font-size: 11px !important; border-radius: 12px !important; }
  .profile-card .card-spec { margin-top: 12px !important; padding-top: 10px !important; }

  /* Металл/цинк: компактно */
  .quality-showcase { padding-top: 38px !important; padding-bottom: 38px !important; }
  .quality-card { padding: 16px !important; min-height: auto !important; }
  .quality-spec-list { gap: 8px !important; }

  /* Сертификаты */
  .certificates-grid, .certificates-list, .docs-grid, .certs-grid {
    display: grid !important; grid-auto-flow: column !important; grid-auto-columns: 31% !important; grid-template-columns: none !important;
    gap: 10px !important; overflow-x: auto !important; padding: 0 var(--mobile-side) 10px !important; scroll-snap-type: x mandatory;
  }
  .certificate-card, .doc-card, .cert-card { min-width: 0 !important; padding: 8px !important; scroll-snap-align: start; }
  .certificate-card img, .doc-card img, .cert-card img { width: 100%; height: auto; object-fit: contain; }

  /* Диалог со специалистом */
  .dialog-v20 { padding: 42px 0 46px !important; overflow: hidden; }
  .v20-container { width: 100%; max-width: 100%; padding: 0 var(--mobile-side) !important; }
  .v20-header { margin-bottom: 18px !important; text-align: center; }
  .v20-title-wrapper { gap: 8px !important; }
  .v20-title-wrapper h2, .dialog-v20 h2 { font-size: clamp(30px, 8vw, 38px) !important; line-height: .98 !important; margin: 0 !important; }
  .v20-header p { font-size: 13px !important; line-height: 1.4 !important; margin-top: 10px !important; }
  .v20-two-columns { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .v6-card, .v20-quick-card, .v20-form-card { width: 100%; max-width: 100%; border-radius: 18px !important; padding: 14px !important; }
  .v20-quick-list { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .v20-quick-item { min-height: 38px; font-size: 12px; }
  .v20-form-row { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .v20-field input, .v20-field select { height: 46px !important; padding: 0 12px !important; font-size: 13px !important; }
  .v20-submit { height: 48px !important; font-size: 13px !important; border-radius: 14px !important; }
  .v20-benefits { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .v20-benefit { padding: 12px !important; min-height: auto !important; }

  /* Футер */
  .arch-footer { padding: 34px 0 24px !important; }
  .footer-container { padding: 0 var(--mobile-side) !important; }
  .footer-main { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; }
  .footer-bottom { margin-top: 18px !important; padding-top: 14px !important; display: grid !important; gap: 8px !important; }
}

/* ---------- Узкие телефоны ---------- */
@media (max-width: 390px) {
  .logo-primary { font-size: 13px; }
  .logo-sub { font-size: 9px; }
  .nav-logo-img { width: 30px; }
  .hero-title { font-size: 25px !important; }
  .annotation-id { font-size: 7px; padding: 0 3px; }
  .strip-left-part, .strip-right-part { grid-template-columns: 30px minmax(0,1fr) auto; gap: 6px !important; padding: 9px !important; }
  .strip-icon { width: 30px !important; height: 30px !important; }
  .strip-btn { font-size: 10px !important; padding: 0 9px !important; }
  .tabs-nav { grid-template-columns: 1fr 1fr; gap: 6px !important; padding: 7px !important; }
  .tab-title { font-size: 10px !important; }
}

/* =========================================================
   V17 — точечная доводка первых 3 блоков по скринам
   1) меню, 2) HERO формы, 3) второй блок, 4) профиль в одну строку
========================================================= */

@media (max-width: 768px) {
  /* 1. Мобильное меню: чистая кнопка из 3 полосок + нормальная панель */
  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: #111 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 0 !important;
  }
  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    content: "" !important;
    display: block !important;
    width: 21px !important;
    height: 2px !important;
    min-height: 2px !important;
    max-height: 2px !important;
    border-radius: 4px !important;
    background: #fff !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
  }
  .nav-toggle span:nth-child(n+3) { display: none !important; }
  body.menu-open .nav-toggle span:nth-child(1),
  .arch-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  body.menu-open .nav-toggle span:nth-child(2),
  .arch-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0 !important; }
  body.menu-open .nav-toggle::after,
  .arch-nav.is-open .nav-toggle::after { transform: translateY(-7px) rotate(-45deg) !important; }
  body.menu-open .nav-toggle::before,
  .arch-nav.is-open .nav-toggle::before { opacity: 0 !important; }

  .nav-links {
    inset: 74px 14px auto 14px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 20px !important;
    padding: 14px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.18) !important;
  }
  .nav-link, .dropdown-toggle { min-height: 42px !important; padding: 0 !important; }
  .nav-contact-info { padding: 10px 0 !important; }
  .nav-cta { margin-top: 8px !important; }

  /* 2. HERO: меньше пустоты, заголовок не сжат и не огромный */
  .hero-engineering { padding-top: 0 !important; padding-bottom: 14px !important; }
  .hero-arch-composition { padding: 10px var(--mobile-side) 0 !important; }
  .text-plate {
    padding: 13px 13px 14px !important;
    border-radius: 20px !important;
  }
  .annotation-meta {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 5px !important;
    margin-bottom: 9px !important;
  }
  .annotation-id {
    height: 20px !important;
    font-size: 7.4px !important;
    padding: 0 3px !important;
    letter-spacing: 0 !important;
    border-radius: 999px !important;
  }
  .hero-title {
    font-size: clamp(25px, 6.6vw, 33px) !important;
    line-height: .95 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.025em !important;
  }
  .hero-title .title-line.line-3 {
    margin-top: 3px !important;
    font-size: .82em !important;
  }
  .annotation-subtitle {
    padding-top: 8px !important;
  }
  .hero-subtitle {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
  .plate-indicators { margin-top: 10px !important; gap: 7px !important; }
  .indicator { padding: 8px 3px !important; border-radius: 13px !important; }
  .indicator-number { font-size: 15px !important; }
  .indicator-label { font-size: 7.5px !important; }

  .hero-additional-actions {
    margin-top: 8px !important;
    gap: 7px !important;
  }
  .hero-additional-actions .action-btn {
    min-height: 52px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }
  .action-title { font-size: 9.5px !important; }
  .action-meta { font-size: 7.5px !important; }

  /* HERO формы — две карточки не сливаются, Telegram не уезжает */
  .full-width-strip {
    margin-top: 9px !important;
    padding-bottom: 16px !important;
    overflow: visible !important;
  }
  .strip-content {
    gap: 10px !important;
  }
  .strip-left-part,
  .strip-right-part {
    grid-template-columns: 32px minmax(0,1fr) minmax(132px, auto) !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
  }
  .strip-icon { width: 32px !important; height: 32px !important; }
  .strip-phone-input { height: 39px !important; font-size: 11px !important; }
  .input-label {
    top: -11px !important;
    left: 8px !important;
    font-size: 7.2px !important;
    padding: 2px 6px !important;
  }
  .strip-btn {
    height: 39px !important;
    min-height: 39px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    border-radius: 12px !important;
    letter-spacing: .01em !important;
  }
  .call-btn .btn-text { white-space: normal !important; line-height: 1.08 !important; }
  .tg-btn .btn-text { white-space: nowrap !important; }
  .telegram-content {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .telegram-title {
    font-size: 10px !important;
    line-height: 1.05 !important;
    margin: 0 0 4px !important;
    max-width: 100% !important;
  }
  .telegram-features {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  .telegram-features .feature {
    font-size: 6.8px !important;
    padding: 3px 4px !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 3. Второй блок: меньше отступ между заголовком и меню */
  .systems {
    padding-top: 24px !important;
  }
  .engineering-header-divider {
    margin-bottom: 10px !important;
  }
  .engineering-divider {
    margin-bottom: 6px !important;
  }
  .engineering-section-title {
    font-size: clamp(25px, 6.2vw, 31px) !important;
    line-height: .97 !important;
    margin-bottom: 6px !important;
  }
  .header-technical-line { margin: 5px auto 0 !important; }
  .engineering-section-subtitle {
    margin-top: 6px !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
  }
  .systems-tabs { padding-top: 0 !important; }
  .tabs-nav {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 16px !important;
  }
  .tab-btn {
    min-height: 48px !important;
    padding: 7px 5px !important;
    border-radius: 12px !important;
  }
  .tab-title { font-size: 10px !important; line-height: 1.12 !important; }
  .tab-sub { font-size: 8px !important; line-height: 1.1 !important; }

  /* 4. Каталог: текст описания на всю ширину, переключатель не ломает строку */
  .catalog-info { padding: 14px !important; border-radius: 18px !important; }
  .catalog-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .catalog-head__text { width: 100% !important; max-width: 100% !important; }
  .catalog-title {
    font-size: 23px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
  }
  .catalog-subtitle {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    white-space: normal !important;
  }
  .profile-toggle {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .toggle-btn {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 11px !important;
  }
  .micro-advantages {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 7px !important;
    margin-top: 12px !important;
  }
  .micro-adv { padding: 10px 8px !important; min-height: auto !important; border-radius: 13px !important; }
  .micro-adv-title { font-size: 11px !important; }
  .micro-adv-text { font-size: 9.5px !important; line-height: 1.15 !important; }

  /* 5. Третий блок: три варианта в одну строку, без огромных межстрочных отступов */
  .profile-atelier { padding-top: 34px !important; }
  .atelier-header { margin-bottom: 14px !important; }
  .atelier-header .main-title, .profile-atelier .main-title {
    font-size: clamp(30px, 7.4vw, 38px) !important;
  }
  .title-sub { font-size: 12.5px !important; line-height: 1.28 !important; }
  .atelier-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .profile-card {
    min-height: 112px !important;
    padding: 10px 6px !important;
    border-radius: 16px !important;
  }
  .profile-card .card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 5px !important;
  }
  .profile-card .card-icon { width: 30px !important; height: 30px !important; }
  .profile-card .card-icon svg { width: 24px !important; height: 24px !important; }
  .profile-card .card-title {
    font-size: 12px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .profile-card .card-ref,
  .profile-card .card-subtitle,
  .profile-card .card-status,
  .profile-card .card-content,
  .profile-card .card-spec {
    display: none !important;
  }
}

@media (min-width: 391px) and (max-width: 768px) {
  .strip-left-part,
  .strip-right-part {
    grid-template-columns: 34px minmax(0,1fr) minmax(150px, auto) !important;
  }
  .strip-btn { font-size: 11px !important; padding: 0 12px !important; }
  .catalog-subtitle { font-size: 13px !important; }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .annotation-meta { display: flex !important; flex-wrap: nowrap !important; }
  .hero-title { font-size: clamp(38px, 4.6vw, 52px) !important; }
  .full-width-strip { margin-top: 12px !important; }
  .strip-content { gap: 10px !important; }
  .systems { padding-top: 44px !important; }
  .engineering-header-divider { margin-bottom: 18px !important; }
  .catalog-head { grid-template-columns: 1fr !important; }
  .catalog-subtitle { max-width: 100% !important; }
  .profile-toggle { width: 100% !important; }
  .atelier-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =========================================================
   V18 FINAL FOCUS FIX — HERO / SYSTEMS / PROFILE / MOBILE MENU
   Исправляет только первые 3 блока и мобильное меню.
========================================================= */

@media (max-width: 1180px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* -------- Мобильное меню: нормальные 3 полоски и рабочая панель -------- */
  .arch-nav { z-index: 9999 !important; }
  .nav-container { position: relative !important; }
  .nav-toggle {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    background: #111 !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    right: 11px !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #fff !important;
    transform: none !important;
    opacity: 1 !important;
    transition: transform .22s ease, opacity .22s ease, top .22s ease !important;
  }
  .nav-toggle::before { top: 13px !important; }
  .nav-toggle span:first-child { top: 20px !important; }
  .nav-toggle span:last-child,
  .nav-toggle::after { top: 27px !important; bottom: auto !important; }
  .nav-toggle.active::before { top: 20px !important; transform: rotate(45deg) !important; }
  .nav-toggle.active span:first-child { opacity: 0 !important; }
  .nav-toggle.active span:last-child,
  .nav-toggle.active::after { top: 20px !important; transform: rotate(-45deg) !important; }

  .nav-links {
    display: none !important;
  }
  .nav-links.active,
  body.menu-open .nav-links {
    display: flex !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 72px !important;
    z-index: 9998 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(18px) !important;
  }
  .nav-links.active .nav-link,
  body.menu-open .nav-links .nav-link,
  .nav-links.active .dropdown-toggle,
  body.menu-open .nav-links .dropdown-toggle {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .nav-links.active .nav-contact-info,
  body.menu-open .nav-links .nav-contact-info {
    display: grid !important;
    gap: 8px !important;
    padding: 14px 0 !important;
    color: #111 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .nav-links.active .nav-cta,
  body.menu-open .nav-links .nav-cta {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
  }

  /* -------- HERO: компактная карточка, текст сверху в одну строку -------- */
  .hero-engineering {
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }
  .hero-arch-composition {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .arch-annotation-zone,
  .hero-backplate,
  .text-plate,
  .plate-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-backplate,
  .text-plate {
    min-height: 0 !important;
  }
  .plate-content {
    padding: 14px !important;
  }
  .annotation-main,
  .annotation-content,
  .annotation-subtitle {
    margin: 0 !important;
    padding: 0 !important;
  }
  .annotation-meta {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 9px !important;
    overflow: hidden !important;
    align-items: center !important;
  }
  .annotation-id {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: .02em !important;
  }
  .hero-title {
    margin: 0 0 12px !important;
    max-width: 100% !important;
    font-size: clamp(25px, 6.4vw, 36px) !important;
    line-height: .92 !important;
    letter-spacing: -0.035em !important;
  }
  .hero-title .title-line { display: block !important; }
  .hero-title .line-3 {
    font-size: .74em !important;
    line-height: .92 !important;
    margin-top: 5px !important;
    color: #ff6b00 !important;
  }
  .annotation-subtitle {
    margin-top: 9px !important;
    padding-top: 10px !important;
  }
  .hero-subtitle {
    font-size: clamp(11px, 2.65vw, 13px) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .plate-indicators {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 13px !important;
  }
  .indicator { min-height: 46px !important; padding: 7px 5px !important; border-radius: 13px !important; }
  .indicator-number { font-size: 14px !important; line-height: 1 !important; }
  .indicator-label { font-size: 7.2px !important; line-height: 1.05 !important; }
  .hero-additional-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
  }
  .hero-additional-actions .action-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 8px !important;
  }

  /* -------- HERO формы: замер и Telegram аккуратно, текст не столбиком -------- */
  .full-width-strip {
    position: static !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 12px 14px !important;
    overflow: visible !important;
  }
  .strip-content {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .strip-divider { display: none !important; }
  .strip-left-part,
  .strip-right-part {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 17px !important;
    background: rgba(15,15,15,.86) !important;
    overflow: hidden !important;
  }
  .strip-left-part { grid-template-columns: 32px minmax(0, 1fr) minmax(145px, auto) !important; }
  .strip-right-part { grid-template-columns: 32px minmax(0, 1fr) minmax(150px, auto) !important; }
  .strip-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 10px !important; }
  .strip-input-wrapper { min-width: 0 !important; width: 100% !important; }
  .strip-phone-input {
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }
  .input-label {
    position: absolute !important;
    top: -10px !important;
    left: 8px !important;
    width: max-content !important;
    max-width: 110px !important;
    height: auto !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    font-size: 6.8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .strip-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .telegram-content {
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  .telegram-title {
    font-size: 11px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .telegram-features {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  .telegram-features .feature {
    display: inline-flex !important;
    width: auto !important;
    max-width: 86px !important;
    padding: 2px 5px !important;
    font-size: 6.8px !important;
    line-height: 1.05 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .tg-btn .btn-text { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* -------- Второй блок: меньше воздух + меню не вылезает -------- */
  .systems { padding-top: 22px !important; }
  .engineering-header-divider { margin-bottom: 10px !important; }
  .engineering-divider { margin-bottom: 5px !important; }
  .engineering-section-title {
    margin: 0 auto 6px !important;
    font-size: clamp(25px, 5.8vw, 32px) !important;
    line-height: .94 !important;
    letter-spacing: -0.035em !important;
    max-width: 92% !important;
  }
  .engineering-section-subtitle { margin-top: 6px !important; font-size: 10px !important; line-height: 1.35 !important; }
  .systems-tabs { padding-top: 0 !important; overflow: hidden !important; }
  .tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .tab-btn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 8px 5px !important;
    border-radius: 13px !important;
    text-align: center !important;
  }
  .tab-title { font-size: 10px !important; line-height: 1.1 !important; white-space: normal !important; }
  .tab-sub { font-size: 8px !important; line-height: 1.1 !important; }

  /* catalog info: описание во всю ширину, не столбиком */
  .catalog-info { padding: 14px !important; border-radius: 18px !important; }
  .catalog-head {
    display: block !important;
    width: 100% !important;
  }
  .catalog-head__text { width: 100% !important; max-width: 100% !important; }
  .catalog-title { font-size: 23px !important; line-height: 1 !important; margin: 0 0 8px !important; }
  .catalog-subtitle {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    display: block !important;
  }
  .profile-toggle {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 5px !important;
    padding: 4px !important;
    margin: 0 0 12px !important;
    border-radius: 15px !important;
  }
  .toggle-btn { min-width: 0 !important; padding: 8px 4px !important; font-size: 10px !important; white-space: nowrap !important; }

  /* -------- Третий блок: вернуть полные карточки, а индикаторы — в одну строку -------- */
  .profile-atelier { padding-top: 32px !important; padding-bottom: 34px !important; }
  .atelier-header { margin-bottom: 16px !important; }
  .atelier-header .main-title, .profile-atelier .main-title {
    font-size: clamp(30px, 7vw, 38px) !important;
    line-height: .96 !important;
  }
  .title-sub { font-size: 12px !important; line-height: 1.3 !important; margin-top: 8px !important; }
  .atelier-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  .profile-card {
    min-height: auto !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }
  .profile-card .card-header {
    display: grid !important;
    grid-template-columns: 36px 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: left !important;
    margin-bottom: 10px !important;
  }
  .profile-card .card-icon { width: 36px !important; height: 36px !important; }
  .profile-card .card-icon svg { width: 28px !important; height: 28px !important; }
  .profile-card .card-title {
    font-size: 18px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .profile-card .card-ref { display: block !important; font-size: 8px !important; line-height: 1.1 !important; margin-top: 3px !important; }
  .profile-card .card-subtitle { display: block !important; font-size: 10px !important; line-height: 1.25 !important; margin: 4px 0 0 !important; }
  .profile-card .card-status { display: block !important; }
  .status-badge { font-size: 7px !important; padding: 5px 7px !important; border-radius: 999px !important; }
  .profile-card .card-content,
  .profile-card .card-spec { display: block !important; }
  .profile-card .card-content { margin-top: 8px !important; }
  .features-list { display: grid !important; gap: 7px !important; margin: 8px 0 !important; }
  .feature-item { font-size: 11px !important; line-height: 1.28 !important; }
  .profile-action-btn { min-height: 42px !important; padding: 0 12px !important; font-size: 10px !important; border-radius: 12px !important; }
  .profile-card .card-spec { margin-top: 10px !important; padding-top: 10px !important; }
  .spec-label { font-size: 8px !important; }
  .spec-desc { font-size: 9px !important; line-height: 1.2 !important; }

  .atelier-nav { margin-top: 12px !important; }
  .nav-indicators {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .nav-indicator {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 2px !important;
    text-align: center !important;
  }
  .nav-indicator .indicator-label {
    display: block !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .nav-hint { margin-top: 10px !important; min-height: 38px !important; padding: 0 12px !important; }
  .hint-text { font-size: 10px !important; letter-spacing: .08em !important; }
}

@media (max-width: 390px) {
  .hero-title { font-size: clamp(23px, 7.2vw, 29px) !important; }
  .annotation-id { font-size: 6.5px !important; padding: 0 3px !important; }
  .strip-left-part,
  .strip-right-part { grid-template-columns: 30px minmax(0, 1fr) !important; }
  .strip-left-part .strip-btn,
  .strip-right-part .strip-btn { grid-column: 1 / -1 !important; }
  .telegram-title { font-size: 11px !important; }
  .tabs-nav { grid-template-columns: 1fr 1fr !important; }
}

/* =========================================================
   V21 — TARGETED RESPONSIVE FIX: HERO + SYSTEMS + PROFILE
   Applies to phone and tablet without breaking desktop
========================================================= */

@media (max-width: 1100px) {
  html, body { overflow-x: hidden !important; }
  body { max-width: 100vw !important; }
  .container { width: 100% !important; max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; }

  /* HEADER / MOBILE MENU */
  .arch-nav { position: sticky !important; top: 0 !important; z-index: 9999 !important; background: rgba(255,255,255,.97) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 1px 0 rgba(0,0,0,.06) !important; }
  .nav-container { min-height: 74px !important; padding: 10px 18px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; }
  .nav-logo { min-width: 0 !important; display:flex !important; align-items:center !important; gap:10px !important; }
  .nav-logo-img { width: 36px !important; height:auto !important; flex:0 0 auto !important; }
  .logo-text { min-width:0 !important; }
  .logo-primary { font-size: 15px !important; line-height: 1.05 !important; white-space: nowrap !important; }
  .logo-sub { font-size: 10px !important; line-height: 1.1 !important; white-space: nowrap !important; }
  .nav-toggle { width: 46px !important; height: 46px !important; border-radius: 16px !important; background: #111 !important; border: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; padding: 0 !important; box-shadow: 0 12px 28px rgba(0,0,0,.18) !important; flex: 0 0 46px !important; position: relative !important; }
  .nav-toggle::before,
  .nav-toggle::after,
  .nav-toggle span { content:'' !important; display:block !important; width: 20px !important; height: 2px !important; background:#fff !important; border-radius: 99px !important; position: static !important; transform:none !important; margin:0 !important; opacity:1 !important; }
  .nav-toggle span:nth-child(2) { display:none !important; }
  .nav-toggle.active::before { transform: rotate(45deg) translate(5px,5px) !important; }
  .nav-toggle.active span:first-child { opacity: 0 !important; }
  .nav-toggle.active::after { transform: rotate(-45deg) translate(5px,-5px) !important; }
  .nav-links { position: absolute !important; top: calc(100% + 8px) !important; left: 14px !important; right: 14px !important; display: none !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 16px !important; background: rgba(255,255,255,.98) !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 24px !important; box-shadow: 0 22px 60px rgba(0,0,0,.16) !important; z-index: 10000 !important; }
  .nav-links.active { display: flex !important; }
  .nav-link, .dropdown-toggle { width:100% !important; padding: 14px 0 !important; justify-content: space-between !important; color:#111 !important; font-size:14px !important; border-bottom: 1px solid rgba(0,0,0,.06) !important; }
  .nav-contact-info { display:flex !important; flex-direction:column !important; gap:8px !important; padding:14px 0 !important; font-size:12px !important; color:#111 !important; }
  .nav-divider { display:none !important; }
  .nav-cta { width:100% !important; height:46px !important; margin-top:8px !important; font-size:12px !important; border-radius:14px !important; }
  .dropdown-menu { position: static !important; display:none !important; opacity:1 !important; visibility:visible !important; transform:none !important; box-shadow:none !important; border:0 !important; padding:0 0 8px 12px !important; background:transparent !important; }
  .nav-dropdown.open .dropdown-menu { display:block !important; }

  /* HERO — fixed width, no side clipping */
  .hero-engineering { width:100% !important; max-width:100vw !important; min-height:auto !important; padding: 12px 0 0 !important; overflow:hidden !important; background-position:center !important; }
  .hero-arch-composition { width:100% !important; max-width:100% !important; display:block !important; margin:0 !important; padding: 14px 18px 10px !important; overflow:visible !important; }
  .arch-annotation-zone, .hero-backplate { width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; }
  .text-plate, .hero-glass-card, .hero-card { width:100% !important; max-width:100% !important; margin:0 !important; background: rgba(17,18,18,.82) !important; color:#fff !important; border:1px solid rgba(255,107,0,.28) !important; border-radius: 22px !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; overflow:hidden !important; }
  .plate-content { padding: 18px 18px 16px !important; }
  .annotation-main, .annotation-content { width:100% !important; max-width:100% !important; }
  .annotation-meta { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:6px !important; align-items:center !important; width:100% !important; overflow:hidden !important; margin-bottom: 12px !important; }
  .annotation-id { flex: 1 1 0 !important; min-width:0 !important; text-align:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; font-size: clamp(8px, 1.55vw, 11px) !important; line-height:1 !important; padding: 6px 5px !important; border-radius:999px !important; background: rgba(255,107,0,.11) !important; border:1px solid rgba(255,107,0,.35) !important; color:#ff7a1a !important; letter-spacing:.02em !important; }
  .hero-title { max-width:100% !important; margin: 0 0 12px !important; font-size: clamp(29px, 6.2vw, 45px) !important; line-height: .92 !important; letter-spacing: -.045em !important; }
  .hero-title .title-line { display:block !important; white-space:normal !important; max-width:100% !important; }
  .hero-title .line-3 { font-size: .8em !important; line-height:.95 !important; margin-top:4px !important; }
  .annotation-subtitle { margin-top: 12px !important; padding-top: 12px !important; }
  .hero-subtitle { font-size: clamp(12px, 2vw, 14px) !important; line-height:1.42 !important; margin:0 !important; max-width:100% !important; }
  .plate-indicators { display:grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap:8px !important; margin-top: 14px !important; }
  .indicator { min-width:0 !important; padding:10px 6px !important; border-radius:14px !important; background: rgba(255,255,255,.08) !important; text-align:center !important; }
  .indicator-number { font-size: clamp(16px, 3vw, 22px) !important; line-height:1 !important; }
  .indicator-label { font-size: 9px !important; line-height:1.1 !important; }

  .hero-additional-actions { width:100% !important; max-width:100% !important; display:grid !important; grid-template-columns: 1fr 1fr !important; gap:8px !important; margin:10px 0 0 !important; padding:0 !important; }
  .action-btn { min-width:0 !important; min-height:58px !important; padding:10px !important; border-radius:14px !important; }
  .action-title { font-size:12px !important; line-height:1.15 !important; white-space:normal !important; }
  .action-meta { font-size:9px !important; line-height:1.1 !important; }
  .action-icon { width:34px !important; height:34px !important; flex:0 0 34px !important; }

  .full-width-strip { width:100% !important; max-width:100% !important; margin:0 !important; padding: 0 18px 14px !important; position:static !important; overflow:visible !important; background: transparent !important; }
  .strip-content { width:100% !important; max-width:100% !important; display:flex !important; flex-direction:column !important; gap:10px !important; padding:0 !important; margin:0 !important; }
  .strip-left-part, .strip-right-part { width:100% !important; max-width:100% !important; display:grid !important; grid-template-columns: 34px minmax(0,1fr) auto !important; align-items:center !important; gap:8px !important; padding:10px !important; border-radius:16px !important; background: rgba(10,10,10,.78) !important; border:1px solid rgba(255,107,0,.28) !important; overflow:hidden !important; }
  .strip-icon { width:34px !important; height:34px !important; border-radius:10px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  .strip-input-wrapper { min-width:0 !important; width:100% !important; }
  .strip-phone-input { height:42px !important; width:100% !important; font-size:12px !important; padding: 0 12px !important; border-radius:12px !important; }
  .input-label { top:auto !important; bottom:-9px !important; left:10px !important; font-size:8px !important; padding:2px 6px !important; border-radius:5px !important; }
  .strip-btn { height:42px !important; min-height:42px !important; padding:0 12px !important; border-radius:12px !important; font-size: clamp(10px, 1.8vw, 12px) !important; line-height:1.05 !important; white-space:nowrap !important; justify-content:center !important; }
  .call-btn { min-width: 142px !important; }
  .tg-btn { min-width: 150px !important; background:#169bd5 !important; }
  .telegram-content { min-width:0 !important; width:100% !important; display:flex !important; flex-direction:column !important; gap:6px !important; align-items:flex-start !important; overflow:hidden !important; }
  .telegram-title { width:100% !important; font-size:12px !important; line-height:1.1 !important; color:#fff !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  .telegram-features { width:100% !important; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:4px !important; align-items:center !important; overflow:visible !important; }
  .telegram-features .feature { display:inline-flex !important; width:auto !important; max-width:none !important; white-space:nowrap !important; font-size:8px !important; line-height:1 !important; padding:4px 6px !important; border-radius:999px !important; }

  /* SECOND BLOCK */
  .systems { padding-top: 26px !important; padding-bottom: 32px !important; overflow:hidden !important; }
  .engineering-header-divider { margin:0 0 8px !important; }
  .header-content-wrapper { margin:0 !important; padding:0 !important; }
  .engineering-section-title { font-size: clamp(28px, 5.2vw, 42px) !important; line-height:.95 !important; letter-spacing:-.04em !important; margin:0 0 8px !important; text-align:center !important; }
  .engineering-section-subtitle { font-size: clamp(11px, 1.8vw, 13px) !important; line-height:1.35 !important; margin: 8px auto 14px !important; max-width: 82% !important; }
  .systems-tabs { width:100% !important; max-width:100% !important; margin-top:12px !important; overflow:hidden !important; }
  .tabs-nav { width:100% !important; max-width:100% !important; display:grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap:8px !important; padding:10px !important; border-radius:18px !important; overflow:visible !important; }
  .tab-btn { width:100% !important; min-width:0 !important; min-height:54px !important; padding:9px 8px !important; border-radius:12px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; white-space:normal !important; }
  .tab-title { font-size:11px !important; line-height:1.15 !important; white-space:normal !important; }
  .tab-sub { font-size:9px !important; line-height:1.15 !important; margin-top:3px !important; white-space:normal !important; }
  .catalog-pane { display:block !important; width:100% !important; max-width:100% !important; }
  .catalog-visual, .catalog-info { width:100% !important; max-width:100% !important; }
  .dv-stage { max-width:100% !important; min-height:260px !important; }
  .catalog-head { display:block !important; }
  .catalog-title { font-size: clamp(24px, 4.8vw, 34px) !important; line-height:.98 !important; margin-bottom:8px !important; }
  .catalog-subtitle { width:100% !important; max-width:100% !important; display:block !important; font-size: clamp(13px, 2vw, 15px) !important; line-height:1.35 !important; white-space:normal !important; margin: 0 0 12px !important; }
  .profile-toggle { width:100% !important; max-width:100% !important; display:grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:4px !important; margin:12px 0 14px !important; }
  .toggle-btn { min-width:0 !important; padding:9px 5px !important; font-size:11px !important; white-space:nowrap !important; text-align:center !important; }
  .micro-advantages { display:grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:8px !important; }
  .micro-adv { min-height:auto !important; padding:12px 8px !important; border-radius:12px !important; }
  .micro-adv-title { font-size:12px !important; }
  .micro-adv-text { font-size:10px !important; line-height:1.25 !important; }

  /* PROFILE ATELIER */
  .profile-atelier { padding: 34px 0 !important; overflow:hidden !important; }
  .atelier-header { margin-bottom:18px !important; }
  .atelier-header .main-title { font-size: clamp(34px, 6vw, 48px) !important; line-height:.95 !important; }
  .title-sub { font-size:14px !important; line-height:1.35 !important; }
  .atelier-grid { display:grid !important; grid-template-columns: 1fr !important; gap:14px !important; width:100% !important; max-width:640px !important; margin:0 auto !important; overflow:visible !important; }
  .profile-card { width:100% !important; min-height:auto !important; padding:0 !important; overflow:hidden !important; }
  .profile-card .card-header { padding:18px !important; display:grid !important; grid-template-columns:44px 1fr auto !important; gap:12px !important; align-items:center !important; }
  .profile-card .card-title { font-size:20px !important; line-height:1.1 !important; white-space:normal !important; }
  .card-ref { font-size:9px !important; line-height:1.1 !important; margin-top:2px !important; }
  .card-subtitle { font-size:12px !important; line-height:1.3 !important; }
  .card-content { padding:0 18px 18px !important; }
  .features-list { margin-bottom:14px !important; }
  .feature-item { font-size:13px !important; line-height:1.35 !important; margin-bottom:8px !important; }
  .profile-action-btn { height:46px !important; padding:0 14px !important; font-size:11px !important; border-radius:12px !important; }
  .card-spec { padding:14px 18px !important; }
  .atelier-nav { margin-top:14px !important; }
  .nav-indicators { width:100% !important; display:grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:8px !important; padding:0 !important; background:transparent !important; border:0 !important; }
  .nav-indicator { min-width:0 !important; justify-content:center !important; }
  .indicator-label { font-size:10px !important; line-height:1 !important; letter-spacing:.08em !important; white-space:nowrap !important; }
}

@media (max-width: 480px) {
  .nav-container { min-height:68px !important; padding-left:14px !important; padding-right:14px !important; }
  .logo-primary { font-size:13px !important; }
  .logo-sub { font-size:9px !important; }
  .nav-logo-img { width:32px !important; }
  .hero-arch-composition { padding: 10px 10px 8px !important; }
  .plate-content { padding: 15px 14px 14px !important; }
  .hero-title { font-size: 31px !important; }
  .hero-subtitle { font-size:12px !important; }
  .full-width-strip { padding-left:10px !important; padding-right:10px !important; }
  .strip-left-part { grid-template-columns: 32px minmax(0,1fr) 132px !important; gap:6px !important; padding:8px !important; }
  .strip-right-part { grid-template-columns: 32px minmax(0,1fr) 140px !important; gap:6px !important; padding:8px !important; }
  .strip-btn { font-size:10px !important; padding:0 8px !important; }
  .telegram-title { font-size:11px !important; }
  .tabs-nav { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .systems .container { padding-left:12px !important; padding-right:12px !important; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .hero-engineering { padding-top: 0 !important; }
  .hero-arch-composition { padding: 24px 28px 12px !important; }
  .text-plate { max-width: 760px !important; margin:0 auto !important; }
  .full-width-strip { padding-left:28px !important; padding-right:28px !important; }
  .strip-content { max-width:760px !important; margin:0 auto !important; }
  .tabs-nav { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* =========================================================
   V22 — точечные правки: HERO-теги, Telegram-чипы, профиль
   Правит только мобильную и планшетную версии.
========================================================= */

/* 1) Возвращаем текст над заголовком HERO и убираем вид 'трёх полосок' */
@media (max-width: 1100px) {
  .annotation-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .annotation-meta::before,
  .annotation-meta::after {
    display: none !important;
    content: none !important;
  }

  .annotation-id {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 22px !important;
    flex: 0 1 auto !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 107, 0, .42) !important;
    background: rgba(255, 107, 0, .13) !important;
    color: #ff7a1a !important;
    font-size: clamp(7px, 1.45vw, 10px) !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
  }

  /* HERO не должен обрезать верхние подписи */
  .text-plate,
  .hero-card,
  .hero-glass-card,
  .hero-backplate,
  .hero-arch-composition,
  .arch-annotation-zone {
    overflow: visible !important;
  }
}

@media (max-width: 420px) {
  .annotation-meta { gap: 4px !important; }
  .annotation-id {
    padding: 0 6px !important;
    font-size: 7px !important;
  }
}

/* 2) Telegram: заголовок + Обзоры / Кейсы / Видео / Новинки в одну аккуратную строку */
@media (max-width: 1100px) {
  .strip-right-part {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "tgtext tgbtn" !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  .strip-right-part .strip-icon {
    display: none !important;
  }

  .telegram-content {
    grid-area: tgtext !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    overflow: hidden !important;
  }

  .telegram-title {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(11px, 2.1vw, 14px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .telegram-features {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .telegram-features .feature {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-height: 18px !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    font-size: clamp(7px, 1.35vw, 10px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .strip-right-part .tg-btn,
  .tg-btn,
  .telegram-btn {
    grid-area: tgbtn !important;
    width: auto !important;
    min-width: 170px !important;
    max-width: 260px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    flex: 0 0 auto !important;
    font-size: clamp(11px, 1.8vw, 13px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 560px) {
  .strip-right-part {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "tgtext"
      "tgbtn" !important;
    gap: 8px !important;
  }

  .telegram-content {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .telegram-title {
    width: 100% !important;
    font-size: 12px !important;
  }

  .telegram-features {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .telegram-features::-webkit-scrollbar { display: none !important; }

  .telegram-features .feature {
    font-size: 8px !important;
    padding: 4px 7px !important;
  }

  .strip-right-part .tg-btn,
  .tg-btn,
  .telegram-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* 3) Блок "Выберите ваш профиль": вернуть карточки, но подписи снизу оставить одной строкой */
@media (max-width: 768px) {
  .profile-atelier .atelier-grid,
  .atelier-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .profile-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  .profile-card .card-content,
  .profile-card .card-spec,
  .profile-card .features-list {
    display: block !important;
  }

  .profile-toggle,
  .atelier-nav .nav-indicators,
  .nav-indicators {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }

  .profile-toggle button,
  .nav-indicator,
  .atelier-nav .nav-indicator {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .indicator-label,
  .nav-indicator span,
  .profile-toggle button {
    font-size: clamp(8px, 2.05vw, 10px) !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* 4) Подстраховка меню: кнопка всегда три понятные полоски */
@media (max-width: 1100px) {
  .nav-toggle,
  .mobile-menu-toggle,
  .burger,
  .menu-toggle {
    position: relative !important;
    overflow: hidden !important;
  }

  .nav-toggle span,
  .mobile-menu-toggle span,
  .burger span,
  .menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   FINAL RESPONSIVE SYSTEM — MOBILE FIRST / 17.07.2026
   Единый завершающий слой. Должен оставаться в конце файла.
   ========================================================= */

@media (max-width: 1100px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  body {
    font-size: 15px !important;
    line-height: 1.55 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  img,
  video,
  iframe,
  svg,
  canvas {
    max-width: 100% !important;
  }

  p,
  li,
  a,
  button,
  input,
  textarea,
  select,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }

  .container,
  .hero-ranch-container,
  .hero-siding-container,
  .hero-slat-container,
  .hero-swing-container,
  .hero-wicket-container,
  .hero-engineer-container,
  .hero-jal-container,
  .pf-hero__inner,
  .footer-container,
  .v20-container {
    width: min(calc(100% - 48px), 980px) !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Навигация */
  .arch-nav {
    height: 78px !important;
    min-height: 78px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .nav-container {
    width: 100% !important;
    max-width: none !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 0 24px !important;
    gap: 16px !important;
  }

  .nav-logo {
    min-width: 0 !important;
    max-width: calc(100% - 66px) !important;
    gap: 9px !important;
    flex: 1 1 auto !important;
  }

  .nav-logo-img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    object-fit: contain !important;
  }

  .logo-text {
    min-width: 0 !important;
  }

  .logo-primary {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .logo-sub {
    max-width: 100% !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nav-toggle {
    position: relative !important;
    z-index: 10003 !important;
    display: flex !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #111 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  .nav-links {
    position: fixed !important;
    z-index: 10002 !important;
    top: 88px !important;
    right: 20px !important;
    left: 20px !important;
    display: none !important;
    max-height: calc(100dvh - 108px) !important;
    padding: 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.99) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.18) !important;
  }

  .nav-links.active,
  body.menu-open .nav-links {
    display: flex !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }

  .nav-links .nav-link,
  .nav-links .dropdown-toggle {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    justify-content: space-between !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  .nav-dropdown,
  .dropdown-menu,
  .dropdown-grid,
  .dropdown-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dropdown-menu {
    position: static !important;
    max-height: 48vh !important;
    padding: 8px !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #f6f7f8 !important;
    box-shadow: none !important;
  }

  .nav-dropdown.open .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .dropdown-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dropdown-item {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  /* Общая типографика */
  .section-title,
  .gallery-title,
  .main-title,
  .club-title,
  .lab-title,
  .usage-dark-title,
  .gates-unique-title,
  .pf-hero__title,
  .engineering-section-title,
  .v20-title-wrapper h2,
  .dialog-v20 h2 {
    max-width: 900px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: clamp(30px, 4.4vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
  }

  .section-header,
  .gallery-header,
  .engineering-header {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .section-subtitle,
  .gallery-subtitle,
  .gallery-subheader,
  .engineering-section-subtitle,
  .catalog-subtitle {
    max-width: 720px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .pre-title,
  .gallery-badge,
  [class$="-badge"] {
    max-width: 100% !important;
    line-height: 1.25 !important;
  }

  /* Герои внутренних страниц */
  .hero-ranch,
  .hero-siding,
  .hero-slat,
  .hero-swing,
  .hero-wicket,
  .hero-engineer,
  .hero-jal,
  .pf-hero {
    height: auto !important;
    min-height: auto !important;
    padding-top: 116px !important;
    padding-bottom: 64px !important;
    overflow: hidden !important;
  }

  .hero-ranch-container,
  .hero-siding-container,
  .hero-slat-container,
  .hero-swing-container,
  .hero-wicket-container,
  .hero-engineer-container,
  .hero-jal-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr) !important;
    align-items: center !important;
    gap: 36px !important;
  }

  .hero-ranch-content,
  .hero-siding-content,
  .hero-slat-content,
  .hero-swing-content,
  .hero-wicket-content,
  .hero-engineer-left,
  .hero-jal-content {
    width: 100% !important;
    max-width: 620px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-ranch-title,
  .hero-siding-title,
  .hero-slat-title,
  .hero-swing-title,
  .hero-wicket-title,
  .hero-title-engineer,
  .hero-jal .hero-title {
    max-width: 100% !important;
    margin: 0 0 16px !important;
    font-size: clamp(38px, 5.2vw, 52px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance;
  }

  .hero-ranch-desc,
  .hero-siding-desc,
  .hero-slat-desc,
  .hero-swing-desc,
  .hero-wicket-desc,
  .hero-desc-engineer,
  .hero-description {
    max-width: 620px !important;
    margin: 0 0 22px !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }

  .hero-ranch-visual,
  .hero-siding-visual,
  .hero-slat-visual,
  .hero-swing-visual,
  .hero-wicket-visual,
  .hero-engineer-right,
  .hero-jal-image {
    width: 100% !important;
    max-width: 480px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .hero-ranch-visual img,
  .hero-siding-visual img,
  .hero-slat-visual img,
  .hero-swing-visual img,
  .hero-wicket-visual img,
  .hero-engineer-right img,
  .hero-jal-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 360px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* Главный HERO */
  .hero-engineering {
    height: auto !important;
    min-height: auto !important;
    padding: 116px 24px 64px !important;
    overflow: hidden !important;
  }

  .hero-arch-composition,
  .arch-annotation-zone,
  .hero-backplate,
  .text-plate,
  .plate-content {
    width: 100% !important;
    max-width: 920px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .hero-title,
  .hero-title .title-line {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .hero-engineering .hero-title {
    max-width: 100% !important;
    font-size: clamp(38px, 5.2vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
  }

  .hero-additional-actions,
  .plate-indicators {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Полоса замера и Telegram */
  .full-width-strip {
    width: 100% !important;
    padding: 14px 0 !important;
    overflow: hidden !important;
  }

  .strip-content {
    width: min(calc(100% - 48px), 980px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .strip-divider {
    display: none !important;
  }

  .strip-left-part,
  .strip-right-part {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .strip-icon {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 38px !important;
    height: 38px !important;
  }

  .strip-input-wrapper,
  .telegram-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .strip-left-part .strip-btn,
  .strip-right-part .strip-btn,
  .strip-right-part .tg-btn,
  .telegram-btn {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 11px 14px !important;
  }

  .telegram-features {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  .telegram-features .feature {
    flex: 0 1 auto !important;
    font-size: 9px !important;
  }

  /* Сетки и сложные блоки */
  .profiles-grid,
  .options-grid,
  .fillings-grid,
  .advantages-grid,
  .ranch-advantages-grid,
  .siding-advantages-grid,
  .slat-advantages-grid,
  .solutions-strict-grid,
  .extras-engineering-grid,
  .coatings-modern-grid,
  .reviews-grid,
  .certificates-grid,
  .matters-grid,
  .showcase-grid,
  .finish-min__grid,
  .pf-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .constructor-grid,
  .construct-grid,
  .exploded-wrapper,
  .material-studio-layout,
  .usage-dark-grid,
  .gates-unique-wrapper,
  .lab-grid,
  .engineering-grid,
  .v20-two-columns,
  .dv-layout {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
    gap: 24px !important;
  }

  .gallery-grid,
  .ranch-gallery-grid,
  .siding-gallery-grid,
  .slat-gallery-grid,
  .swing-gallery-grid,
  .wicket-gallery-grid,
  .frames-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .profile-card,
  .option-card,
  .filling-card,
  .adv-card,
  .siding-adv-item,
  .slat-adv-item,
  .extra-eng-item,
  .solution-card,
  .pf-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 20px !important;
    border-radius: 18px !important;
  }

  .exploded-image,
  .exploded-legend,
  .legend-block,
  .legend-note,
  .legend-extra,
  .constructor-visual,
  .constructor-options,
  .construct-visual,
  .construct-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Модальные окна и формы */
  .profile-modal-container,
  .color-modal-container,
  .v20-container,
  .dialog-container {
    width: min(calc(100% - 40px), 760px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 40px) !important;
    margin: 20px auto !important;
    overflow-y: auto !important;
  }

  input,
  textarea,
  select,
  .form-control {
    max-width: 100% !important;
  }

  .v20-form-row {
    grid-template-columns: 1fr !important;
  }

  /* Подвал */
  .footer-grid,
  .footer-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .footer-accent-line {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .arch-nav,
  .nav-container {
    height: 74px !important;
    min-height: 74px !important;
  }

  .nav-container {
    padding: 0 16px !important;
  }

  .nav-links {
    top: 82px !important;
    right: 12px !important;
    left: 12px !important;
    max-height: calc(100dvh - 94px) !important;
    border-radius: 16px !important;
  }

  .dropdown-grid {
    grid-template-columns: 1fr !important;
  }

  .container,
  .hero-ranch-container,
  .hero-siding-container,
  .hero-slat-container,
  .hero-swing-container,
  .hero-wicket-container,
  .hero-engineer-container,
  .hero-jal-container,
  .pf-hero__inner,
  .footer-container,
  .v20-container {
    width: calc(100% - 32px) !important;
  }

  body > section:not([class*="hero"]),
  .pf-catalog,
  .dialog-v20,
  .profile-atelier,
  .quality-showcase,
  .club-section,
  .lab-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .section-title,
  .gallery-title,
  .main-title,
  .club-title,
  .lab-title,
  .usage-dark-title,
  .gates-unique-title,
  .pf-hero__title,
  .engineering-section-title,
  .v20-title-wrapper h2,
  .dialog-v20 h2 {
    font-size: clamp(27px, 7.5vw, 34px) !important;
    line-height: 1.1 !important;
  }

  .section-header,
  .gallery-header,
  .engineering-header {
    margin-bottom: 22px !important;
  }

  .section-subtitle,
  .gallery-subtitle,
  .gallery-subheader,
  .engineering-section-subtitle,
  .catalog-subtitle {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .pre-title,
  .gallery-badge,
  .hero-badge,
  .hero-ranch-badge,
  .hero-siding-badge,
  .hero-slat-badge,
  .hero-swing-badge,
  .hero-wicket-badge {
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: .12em !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .header-dimension {
    gap: 7px !important;
  }

  .header-dimension .dimension-line {
    display: none !important;
  }

  /* Компактные и читаемые герои */
  .hero-ranch,
  .hero-siding,
  .hero-slat,
  .hero-swing,
  .hero-wicket,
  .hero-engineer,
  .hero-jal,
  .pf-hero {
    padding-top: 104px !important;
    padding-bottom: 44px !important;
  }

  .hero-ranch-container,
  .hero-siding-container,
  .hero-slat-container,
  .hero-swing-container,
  .hero-wicket-container,
  .hero-engineer-container,
  .hero-jal-container {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
    text-align: center !important;
  }

  .hero-ranch-content,
  .hero-siding-content,
  .hero-slat-content,
  .hero-swing-content,
  .hero-wicket-content,
  .hero-engineer-left,
  .hero-jal-content {
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    transform: none !important;
  }

  .hero-ranch-title,
  .hero-siding-title,
  .hero-slat-title,
  .hero-swing-title,
  .hero-wicket-title,
  .hero-title-engineer,
  .hero-jal .hero-title {
    font-size: clamp(31px, 8.7vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.03em !important;
  }

  .hero-ranch-desc,
  .hero-siding-desc,
  .hero-slat-desc,
  .hero-swing-desc,
  .hero-wicket-desc,
  .hero-desc-engineer,
  .hero-description {
    max-width: 560px !important;
    margin: 0 auto 20px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .hero-ranch-stats,
  .hero-siding-stats,
  .hero-slat-stats,
  .hero-swing-stats,
  .hero-stats {
    width: 100% !important;
    max-width: 560px !important;
    margin: 20px auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .stat-item {
    min-width: 0 !important;
    padding: 10px 6px !important;
  }

  .stat-value,
  .hero-ranch-stats .stat-value,
  .hero-siding-stats .stat-value,
  .hero-slat-stats .stat-value,
  .hero-swing-stats .stat-value,
  .hero-stats .stat-value {
    font-size: clamp(22px, 6vw, 27px) !important;
    line-height: 1.05 !important;
  }

  .stat-label,
  .hero-ranch-stats .stat-label,
  .hero-siding-stats .stat-label,
  .hero-slat-stats .stat-label,
  .hero-swing-stats .stat-label,
  .hero-stats .stat-label {
    font-size: 9px !important;
    line-height: 1.25 !important;
    letter-spacing: .06em !important;
  }

  .hero-ranch-buttons,
  .hero-siding-buttons,
  .hero-slat-buttons,
  .hero-swing-buttons,
  .hero-wicket-actions,
  .hero-actions,
  .hero-buttons,
  .pf-hero__actions {
    width: 100% !important;
    max-width: 520px !important;
    margin: 18px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-ranch-buttons > *,
  .hero-siding-buttons > *,
  .hero-slat-buttons > *,
  .hero-swing-buttons > *,
  .hero-wicket-actions > *,
  .hero-actions > *,
  .hero-buttons > *,
  .pf-hero__actions > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .hero-ranch-visual,
  .hero-siding-visual,
  .hero-slat-visual,
  .hero-swing-visual,
  .hero-wicket-visual,
  .hero-engineer-right,
  .hero-jal-image {
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
  }

  .hero-ranch-visual img,
  .hero-siding-visual img,
  .hero-slat-visual img,
  .hero-swing-visual img,
  .hero-wicket-visual img,
  .hero-engineer-right img,
  .hero-jal-image img {
    max-height: 280px !important;
  }

  .hero-ranch-badge-float,
  .hero-siding-badge-float,
  .hero-slat-badge-float,
  .hero-swing-badge-float,
  .hero-ranch-scroll,
  .hero-siding-scroll,
  .hero-slat-scroll,
  .hero-swing-scroll,
  .hero-wicket-scroll,
  .hero-scroll-hint,
  .hero-scroll-hint,
  .hero-features-mini {
    display: none !important;
  }

  /* Главная страница */
  .hero-engineering {
    padding: 100px 16px 44px !important;
  }

  .text-plate {
    padding: 22px 18px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .annotation,
  .annotation-content,
  .annotation-subtitle {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .annotation-meta {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  .annotation-id {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 6px 7px !important;
    justify-content: center !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .hero-engineering .hero-title {
    display: block !important;
    margin: 0 0 16px !important;
    font-size: clamp(30px, 8.5vw, 36px) !important;
    line-height: 1.04 !important;
    text-align: left !important;
  }

  .hero-title .title-line {
    display: block !important;
    width: 100% !important;
  }

  .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  .plate-indicators {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .indicator {
    min-width: 0 !important;
    padding: 10px 5px !important;
  }

  .indicator-number {
    font-size: 21px !important;
  }

  .indicator-label {
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .hero-additional-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  /* Полоса заявки */
  .strip-content {
    width: calc(100% - 24px) !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .strip-left-part,
  .strip-right-part {
    grid-template-columns: 36px minmax(0,1fr) !important;
    gap: 9px !important;
    padding: 11px !important;
  }

  .strip-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .strip-phone-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    font-size: 14px !important;
  }

  .telegram-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  /* Все основные сетки — без смещений */
  .profiles-grid,
  .options-grid,
  .fillings-grid,
  .advantages-grid,
  .ranch-advantages-grid,
  .siding-advantages-grid,
  .slat-advantages-grid,
  .solutions-strict-grid,
  .extras-engineering-grid,
  .coatings-modern-grid,
  .reviews-grid,
  .certificates-grid,
  .matters-grid,
  .showcase-grid,
  .finish-min__grid,
  .pf-grid,
  .constructor-grid,
  .construct-grid,
  .exploded-wrapper,
  .material-studio-layout,
  .usage-dark-grid,
  .gates-unique-wrapper,
  .lab-grid,
  .engineering-grid,
  .v20-two-columns,
  .dv-layout,
  .gallery-grid,
  .ranch-gallery-grid,
  .siding-gallery-grid,
  .slat-gallery-grid,
  .swing-gallery-grid,
  .wicket-gallery-grid,
  .frames-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important;
  }

  .gallery-item,
  .gallery-item.large,
  .gallery-item.wide,
  .ranch-gallery-grid > *,
  .siding-gallery-grid > *,
  .slat-gallery-grid > *,
  .swing-gallery-grid > *,
  .wicket-gallery-grid > * {
    width: 100% !important;
    height: 240px !important;
    min-height: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .profile-card,
  .option-card,
  .filling-card,
  .adv-card,
  .siding-adv-item,
  .slat-adv-item,
  .extra-eng-item,
  .solution-card,
  .pf-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .profile-card h3,
  .option-card h3,
  .filling-card h3,
  .adv-card h3,
  .siding-adv-item h3,
  .slat-adv-item h3,
  .extra-eng-item h3,
  .solution-card h3,
  .pf-card__title {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .profile-card p,
  .option-card p,
  .filling-card p,
  .adv-card p,
  .siding-adv-item p,
  .slat-adv-item p,
  .extra-eng-item p,
  .solution-card p,
  .pf-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Палитры не растягивают страницу */
  .colors-swatches,
  .ral-grid,
  .ral-grid--static,
  .ral-grid--tight,
  .colors-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 9px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .color-swatch,
  .ral-item,
  .color-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .color-swatch img,
  .ral-item img,
  .color-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
  }

  /* Портфолио */
  .pf-hero__inner,
  .pf-hero__content,
  .pf-hero__info {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pf-hero__bottom-line {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  .pf-toolbar,
  .pf-filters {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .pf-search,
  .pf-search input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Модальные окна, диалог, футер */
  .profile-modal-container,
  .color-modal-container,
  .v20-container,
  .dialog-container {
    width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    border-radius: 16px !important;
  }

  .profile-modal-content,
  .modal-content,
  .v20-content,
  .dialog-content {
    padding: 18px !important;
  }

  .modal-detail,
  .modal-actions,
  .v20-benefits {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modal-image,
  .modal-info {
    min-width: 0 !important;
  }

  .footer-grid,
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .site-footer,
  .footer {
    overflow: hidden !important;
  }
}

@media (max-width: 390px) {
  .nav-container {
    padding: 0 12px !important;
  }

  .nav-logo-img {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .logo-primary {
    font-size: 13px !important;
  }

  .logo-sub {
    font-size: 8px !important;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }

  .container,
  .hero-ranch-container,
  .hero-siding-container,
  .hero-slat-container,
  .hero-swing-container,
  .hero-wicket-container,
  .hero-engineer-container,
  .hero-jal-container,
  .pf-hero__inner,
  .footer-container,
  .v20-container {
    width: calc(100% - 24px) !important;
  }

  .hero-ranch-title,
  .hero-siding-title,
  .hero-slat-title,
  .hero-swing-title,
  .hero-wicket-title,
  .hero-title-engineer,
  .hero-jal .hero-title,
  .hero-engineering .hero-title {
    font-size: clamp(29px, 8.7vw, 34px) !important;
  }

  .section-title,
  .gallery-title,
  .main-title,
  .club-title,
  .lab-title,
  .usage-dark-title,
  .gates-unique-title,
  .pf-hero__title,
  .engineering-section-title,
  .v20-title-wrapper h2,
  .dialog-v20 h2 {
    font-size: clamp(25px, 7.6vw, 30px) !important;
  }

  .hero-ranch-stats,
  .hero-siding-stats,
  .hero-slat-stats,
  .hero-swing-stats,
  .hero-stats,
  .plate-indicators {
    gap: 5px !important;
  }

  .stat-item,
  .indicator {
    padding-right: 3px !important;
    padding-left: 3px !important;
  }

  .stat-label,
  .indicator-label {
    font-size: 8px !important;
  }

  .colors-swatches,
  .ral-grid,
  .ral-grid--static,
  .ral-grid--tight,
  .colors-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

/* Финальная проверка: сенсорные палитры и миниатюры каталога. */
@media (max-width: 1100px) {
  .dv--catalog .dv-layout,
  #privacy .dv-layout,
  .catalog-visual .dv-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  #privacy .dv-thumbs {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
  }

  .colors-scroll-container,
  .slat-colors-carousel {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }

  .colors-swatches,
  .slat-colors-strip {
    display: flex !important;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    grid-template-columns: none !important;
    gap: 10px !important;
  }

  .color-swatch,
  .slat-color-swatch {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  #slat .dv-thumbs {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
  }

  #slat .dv-thumb {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px !important;
  }

  #slat .dv-thumb span {
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .gallery-carousel,
  .carousel-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  #slat .dv-thumbs {
    grid-template-columns: 1fr !important;
  }

  .slat-color-swatch {
    width: 88px !important;
    height: 148px !important;
  }

  .slat-color-swatch img {
    height: 96px !important;
  }
}

/* =========================================================
   Главная страница: финальная мобильная корректировка.
   Только #hero и #systems; ПК и остальные страницы не затрагиваются.
========================================================= */
/* Точечная адаптация только главной страницы */
@media (max-width: 768px) {
  #hero .telegram-features {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  #hero .telegram-features .feature {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  #systems .engineering-header-divider {
    margin-bottom: 12px !important;
  }

  #systems .systems-tabs {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #systems .tabs-nav {
    margin-bottom: 14px !important;
  }

  #systems .dv-thumb span,
  #systems .tab-title,
  #systems .catalog-title {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #systems .finish-block,
  #systems .finish-min,
  #systems .ral-grid,
  #systems .ral-swatch {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* Компактный верхний блок */
  #hero.hero-engineering {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 0 !important;
    overflow: hidden !important;
  }

  #hero .hero-arch-composition {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px 6px !important;
  }

  #hero .arch-annotation-zone,
  #hero .hero-backplate,
  #hero .text-plate,
  #hero .plate-content,
  #hero .annotation-main,
  #hero .annotation-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }

  #hero .text-plate {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 20px !important;
  }

  #hero .plate-content {
    padding: 15px 14px 14px !important;
  }

  #hero .annotation-main {
    margin: 0 0 8px !important;
  }

  #hero .annotation-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
    overflow: visible !important;
  }

  #hero .annotation-id {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 27px !important;
    height: auto !important;
    padding: 6px 5px !important;
    font-size: 8.5px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #hero .hero-title {
    margin: 0 0 9px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(26px, 7vw, 30px) !important;
    font-weight: 700 !important;
    line-height: 1.01 !important;
    letter-spacing: -0.025em !important;
    text-align: left !important;
  }

  #hero .hero-title .title-line {
    width: 100% !important;
    white-space: normal !important;
  }

  #hero .hero-title .line-3 {
    margin-top: 3px !important;
    font-size: .82em !important;
    line-height: 1 !important;
  }

  #hero .annotation-subtitle {
    margin: 7px 0 0 !important;
    padding: 8px 0 0 !important;
  }

  #hero .annotation-subtitle .subtitle-line {
    width: 30px !important;
    margin-bottom: 6px !important;
  }

  #hero .hero-subtitle {
    margin: 0 !important;
    font-family: 'Manrope', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
  }

  #hero .plate-indicators {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 11px !important;
    padding-top: 11px !important;
  }

  #hero .indicator {
    min-height: 0 !important;
    padding: 7px 3px !important;
    border-radius: 12px !important;
  }

  #hero .indicator-number {
    margin-bottom: 3px !important;
    font-size: 19px !important;
  }

  #hero .indicator-label {
    font-size: 7.5px !important;
    line-height: 1.12 !important;
  }

  #hero .hero-additional-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 8px 0 0 !important;
  }

  #hero .hero-additional-actions .action-btn {
    min-height: 51px !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 13px !important;
  }

  #hero .hero-additional-actions .action-icon {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  #hero .hero-additional-actions .action-title {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }

  #hero .hero-additional-actions .action-meta {
    font-size: 7.5px !important;
  }

  #hero .full-width-strip {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px 12px !important;
  }

  #hero .strip-content {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #hero .strip-left-part,
  #hero .strip-right-part {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 15px !important;
  }

  #hero .strip-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 32px !important;
    height: 32px !important;
  }

  #hero .strip-input-wrapper,
  #hero .telegram-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #hero .strip-left-part .strip-btn,
  #hero .strip-right-part .strip-btn {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }

  #hero .strip-phone-input {
    height: 40px !important;
    font-size: 12px !important;
  }

  #hero .telegram-title {
    margin-bottom: 5px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #hero .telegram-features {
    justify-content: flex-start !important;
    gap: 3px !important;
  }

  #hero .telegram-features .feature {
    padding: 3px 4px !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }

  /* Компактный каталог видов ограждений */
  #systems.systems {
    margin-top: 0 !important;
    padding: 24px 0 30px !important;
    overflow: hidden !important;
  }

  #systems > .container {
    width: 100% !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  #systems .engineering-header-divider {
    max-width: 100% !important;
    margin: 0 auto 11px !important;
    padding: 0 4px !important;
  }

  #systems .engineering-divider {
    margin: 0 auto 7px !important;
  }

  #systems .header-content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  #systems .engineering-section-title {
    margin: 0 0 6px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(26px, 7.2vw, 29px) !important;
    font-weight: 700 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em !important;
  }

  #systems .engineering-section-title .accent {
    padding-bottom: 5px !important;
  }

  #systems .header-technical-line {
    margin: 4px auto 6px !important;
  }

  #systems .engineering-section-subtitle {
    display: block !important;
    max-width: 310px !important;
    margin: 5px auto 0 !important;
    padding: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    letter-spacing: .02em !important;
  }

  #systems .systems-tabs {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #systems .tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 12px !important;
    padding: 6px !important;
    border-radius: 15px !important;
  }

  #systems .tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
  }

  #systems .tab-title {
    width: 100% !important;
    font-size: 9.5px !important;
    line-height: 1.14 !important;
    text-align: center !important;
  }

  #systems .tab-sub {
    display: none !important;
  }

  #systems .catalog-pane {
    width: 100% !important;
    padding: 0 !important;
    gap: 10px !important;
  }

  #systems .dv-stage {
    width: 100% !important;
    min-height: 240px !important;
    height: 240px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  #systems .dv-chips {
    left: 10px !important;
    bottom: 10px !important;
    gap: 4px !important;
  }

  #systems .dv-chip {
    padding: 5px 7px !important;
    font-size: 9px !important;
  }

  #systems .dv-nav {
    width: 36px !important;
    height: 36px !important;
  }

  #systems .dv-thumbs,
  #systems #privacy .dv-thumbs,
  #systems #openness .dv-thumbs,
  #systems #slat .dv-thumbs,
  #systems #siding .dv-thumbs,
  #systems #gates .dv-thumbs {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
    margin: 8px 0 0 !important;
    overflow: visible !important;
  }

  #systems .dv-thumb,
  #systems #slat .dv-thumb {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 7px 5px !important;
    gap: 5px !important;
    text-align: center !important;
  }

  #systems .dv-thumb img,
  #systems #slat .dv-thumb img {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  #systems .dv-thumb span,
  #systems #slat .dv-thumb span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #systems .catalog-info {
    width: 100% !important;
    margin: 0 !important;
    padding: 13px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
  }

  #systems .catalog-title {
    margin: 0 0 7px !important;
    font-size: 21px !important;
    line-height: 1.08 !important;
  }

  #systems .catalog-subtitle {
    margin: 0 0 10px !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  #systems .profile-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 0 10px !important;
    padding: 4px !important;
  }

  #systems .toggle-btn {
    min-width: 0 !important;
    padding: 7px 3px !important;
    font-size: 9.5px !important;
  }

  #systems .micro-advantages {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 10px 0 !important;
  }

  #systems .micro-adv {
    min-width: 0 !important;
    padding: 9px 6px !important;
    border-radius: 11px !important;
  }

  #systems .micro-adv-title {
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  #systems .micro-adv-text {
    font-size: 9px !important;
    line-height: 1.22 !important;
  }

  #systems .specs-table,
  #systems .specs-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  #systems .spec-item,
  #systems .spec-row {
    min-width: 0 !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
  }

  #systems .spec-k,
  #systems .spec-label,
  #systems .spec-v,
  #systems .spec-value {
    min-width: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  #systems .finish-block,
  #systems .finish-min {
    width: 100% !important;
    margin-top: 11px !important;
    padding: 11px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  #systems .finish-min__top,
  #systems .finish-min__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #systems .finish-min__meta {
    min-width: 0 !important;
    gap: 5px !important;
  }

  #systems .finish-title {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    letter-spacing: .06em !important;
  }

  #systems .finish-min__strong,
  #systems .finish-min__muted {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  #systems .ral-grid,
  #systems .ral-grid--static,
  #systems .ral-grid--tight {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
  }

  #systems .ral-swatch {
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
  }

  #systems .ral-color {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
  }

  #systems .ral-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #systems .ral-text b {
    font-size: 10.5px !important;
  }

  #systems .ral-text small {
    font-size: 9px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #systems .catalog-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 11px !important;
  }

  #systems .catalog-actions .action-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 6px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  /* Тексты Telegram компактно, без изменения index.html. */
  #hero .telegram-features .feature:nth-child(2),
  #hero .telegram-features .feature:nth-child(3),
  #hero .telegram-features .feature:nth-child(4),
  #systems .catalog-actions .action-btn.secondary {
    font-size: 0 !important;
  }

  #hero .telegram-features .feature:nth-child(2)::after {
    content: "Кейсы";
  }

  #hero .telegram-features .feature:nth-child(3)::after {
    content: "Инструкции";
  }

  #hero .telegram-features .feature:nth-child(4)::after {
    content: "Новые работы";
  }

  #hero .telegram-features .feature:nth-child(2)::after,
  #hero .telegram-features .feature:nth-child(3)::after,
  #hero .telegram-features .feature:nth-child(4)::after {
    font-size: 7px !important;
    line-height: 1 !important;
  }

  #systems .catalog-actions .action-btn.secondary::after {
    content: "Подробнее";
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }
}