/* ============ Палитра (сине-красная, по логотипу) ============
   Меняете цвет — меняете только здесь. */
   :root {
    --accent:        #E30613;  /* фирменный красный: фоны, рамки, линии, иконки */
    --accent-text:   #e92015;  /* красный для мелкого текста на тёмном фоне (контраст ≥ 4.5:1) */
    --accent-hover:  #FF3B47;  /* hover у кнопок и ссылок */
    --accent-soft:   #FF9AA0;  /* светлый красный: текст поверх красной подложки */
    --accent-rgb:    227, 6, 19;   /* для rgba(var(--accent-rgb), .xx) */
    --on-accent:     #FFFFFF;  /* текст на красной кнопке */
    --cool:          #0066FF;  /* синий */
    --cool-light:    #4D93FF;
  }
  
  /* В файле нигде не было box-sizing:border-box. Из-за этого элементы
       вида width:100% + padding (например .hero-grid) считали padding
       ПОВЕРХ 100% ширины и вылезали за пределы родителя на величину
       padding — на любом размере экрана, не только на мобильном. Просто
       не было видно, т.к. .page глушит это через overflow-x:hidden. */
       *, *::before, *::after { box-sizing: border-box; }
       html { scroll-behavior: smooth; }
       body { margin: 0; background: #11151B; color: #E9E9ED; font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
       /* На узких экранах длинные русские слова (напр. "терморегулированию")
          иначе не переносятся и вылезают за пределы блока — .page обрезает
          это через overflow-x:hidden, и текст просто исчезает без предупреждения. */
       section[id] { scroll-margin-top: 110px; }
       a { color: var(--accent-text); text-decoration: none; }
       a:hover { color: var(--accent-hover); }
       ::selection { background: rgba(var(--accent-rgb),0.3); }
       :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
     
       @keyframes dashflow { to { stroke-dashoffset: -200; } }
       @keyframes dashflow-slow { to { stroke-dashoffset: -400; } }
       @keyframes pulsemark { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
       @keyframes riselines { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
     
       /* Real :hover rules — this file no longer uses the design-canvas-only
          "style-hover" attribute, which a normal browser ignores completely. */
       .nav-link:hover { color: #FFFFFF; }
       .nav-cta:hover { background: rgba(var(--accent-rgb), .14); color: var(--accent-soft); }
       .btn-fill:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-2px); }
       .btn-outline:hover { border-color: var(--cool); background: rgba(0, 102, 255, .1); color: #FFFFFF; }
       .product-card:hover { background: #181E27; }
       .product-card:hover [data-schem] { opacity: .55; }
       .app-tile:hover { background: #181E27; }
       .footer-link:hover { color: #FFFFFF; }
       button { font-family: inherit; }
     
       /* ---------- Modal (project request) ---------- */
       .modal-overlay {
         position: fixed; inset: 0; z-index: 100;
         background: rgba(10, 12, 16, .72);
         backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
         display: none; align-items: flex-start; justify-content: center;
         padding: 56px 20px; overflow-y: auto;
       }
       .modal-overlay.is-open { display: flex; }
       .modal {
         position: relative; width: 100%; max-width: 640px;
         background: #141922; border: 1px solid #292B31; margin: auto 0;
       }
       .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 30px 32px 0; }
       .modal-title { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -.01em; color: #E9E9ED; }
       .modal-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #9397AB; }
       .modal-close {
         flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
         background: transparent; border: 1px solid #292B31; color: #9397AB; cursor: pointer; font-size: 18px; line-height: 1;
       }
       .modal-close:hover { color: #FFFFFF; border-color: #3F424D; }
       .modal-body { padding: 22px 32px 32px; }
       .modal-section-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .2em; color: #75798C; margin: 26px 0 14px; padding-top: 22px; border-top: 1px solid #23262E; }
       .modal-section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
       .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
       .field { display: grid; gap: 7px; margin-bottom: 16px; }
       .field.full { grid-column: 1 / -1; }
       .field label { font-size: 13px; color: #B2B6CA; }
       .field .hint { font-size: 11.5px; color: #595D6C; }
       .field input, .field select {
         width: 100%; box-sizing: border-box; background: #11151B; border: 1px solid #292B31; color: #E9E9ED;
         font-family: 'Inter', sans-serif; font-size: 14.5px; padding: 12px 14px;
       }
       .field input::placeholder { color: #595D6C; }
       .field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
       .field select {
         appearance: none;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2375798C' stroke-width='1.6'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
       }
       .modal-actions { margin-top: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
       .modal-note { font-size: 12.5px; color: #75798C; }
       .modal-status { font-size: 13.5px; margin-top: 14px; display: none; }
       .modal-status.is-visible { display: block; }
       .modal-status.is-success { color: #4D93FF; }
       .modal-status.is-error { color: var(--accent-text); }
       .btn-fill:disabled { opacity: .55; cursor: default; transform: none; }
     
       /* ---------- "Теркон-КТТ в цифрах" strip ---------- */
       .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
       .stat-strip > div { padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px); border-left: 1px solid #23262E; }
       .stat-strip > div:first-child { border-left: none; padding-left: 0; }
       .stat-icon { width: 34px; height: 34px; display: block; margin-bottom: 22px; }
     
       /* ---------- Applications numbered list ---------- */
       .app-list {  display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #23262E; }
       .app-list > div { padding: 30px 28px 34px 1rem; border-right: 1px solid #23262E; border-bottom: 1px solid #23262E; }
       .app-list > div:nth-child(3n) { border-right: none; }
       .app-list > div:nth-last-child(-n+3) { border-bottom: none; }
     
       /* ---------- Heat-pipe solution card ---------- */
       .heatpipe-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(280px,1.08fr); gap: clamp(24px,3vw,48px); align-items: start; }
       .heatpipe-diagram { background: #141922; border: 1px solid #292B31; padding: clamp(16px, 2vw, 26px); }
       .heatpipe-legend { display: grid; gap: 0; margin-top: 22px; }
       .heatpipe-legend-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid #23262E; }
       .heatpipe-legend-row:first-child { border-top: none; padding-top: 0; }
       .heatpipe-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
       .limits-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
       .limits-list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: #9397AB; }
       .limits-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--accent); }
     
       /* ---------- Mobile ---------- */
       @media (max-width: 900px) {
         /* было: overflow-x:auto без всякой подсказки, что список можно
            промотать — "Контакты" и "О компании" просто не были видны
            и до них нельзя было добраться. Теперь пункty меню переносятся
            на новую строку, ничего не прячется. */
         header .site-nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; column-gap: 16px; overflow-x: visible; }
         header > div { flex-wrap: wrap; row-gap: 10px; }
     
         /* Хедер на мобильном занимает 2 строки — при переходе по якорной
            ссылке (например "Производство") фиксированный хедер иначе
            перекрывает заголовок секции. */
         section[id] { scroll-margin-top: 150px; }
     
         .hero-grid { grid-template-columns: 1fr !important; }
         .diagram-grid, .heatpipe-grid { grid-template-columns: 1fr !important; }
     
         .stat-strip { grid-template-columns: repeat(2, 1fr); }
         .stat-strip > div:nth-child(odd) { border-left: none; padding-left: 0; }
         .stat-strip > div:nth-child(n+3) { border-top: 1px solid #23262E; padding-top: 20px; }
     
         .app-list { grid-template-columns: repeat(2, 1fr); }
         .app-list > div:nth-child(3n) { border-right: 1px solid #23262E; }
         .app-list > div:nth-child(2n) { border-right: none; }
         .app-list > div:nth-last-child(-n+2) { border-bottom: none; }
         /* без min-width:0 грид-колонки считают ширину по самому длинному
            неразрывному слову ("Авиационная") и раздувают ячейку правой
            колонки шире экрана — текст обрезался невидимо через overflow-x:hidden
            на .page. */
         .app-list > div { min-width: 0; }
         .app-list > div > div { max-width: 100% !important; }
     
         .field-grid { grid-template-columns: 1fr; }
         .modal-overlay { padding: 0; }
         .modal { max-width: 100%; min-height: 100%; }
         .modal-body, .modal-head { padding-left: 20px; padding-right: 20px; }
       }
       /* Старый, задвоенный набор .tk-* правил был удалён отсюда: он
          задавал слайдеру продукции фиксированную height:460px с
          overflow:hidden БЕЗ адаптива под мобильный (min-height/адаптив
          заданы в production.css, но т.к. это разные CSS-свойства,
          каскад их не перекрывал). На мобильном это обрезало описание
          и полностью прятало точки/стрелки навигации слайдера ниже
          460px. Полный и уже адаптивный набор .tk-* классов — в
          production.css, дублировать его здесь не нужно. */
  
  
          /* ============ ОБЛАСТИ ПРИМЕНЕНИЯ (с иконками) ============
     Сетка/бордеры .app-list уже определены в main.css — здесь только
     то, чего там не было: фоновая подсветка секции, стили иконок и
     увеличенный заголовок на шрифте Unbounded.
  
     ВАЖНО: шрифт 'Unbounded' сейчас НЕ подключён в page_base.html
     (там только Inter + JetBrains Mono). Чтобы использовать этот
     дизайн как есть, добавьте family=Unbounded:wght@500;600 в
     существующую ссылку на Google Fonts. Если не хотите подключать
     ещё один шрифт — замените font-family ниже на 'Inter', sans-serif.
  
     Два акцентных цвета вынесены в CSS-переменные (--app-accent-a/-b),
     в дизайне это были настраиваемые accentA/accentB — поменять тему
     можно в одном месте, ниже. */
  
  .applications-section {
    --app-accent-a: var(--accent);
    --app-accent-b: #4D93FF;
    position: relative;
    padding: clamp(80px, 11vh, 140px) clamp(20px, 4vw, 56px);
    border-bottom: 1px solid #1D2129;
    overflow: hidden;
  }
  
  .applications__glow {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    pointer-events: none;
  }
  .applications__glow--a {
    top: -220px;
    right: -160px;
    background: radial-gradient(circle, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 70%);
  }
  .applications__glow--b {
    bottom: -260px;
    left: -140px;
    background: radial-gradient(circle, rgba(77,147,255,.12), rgba(77,147,255,0) 70%);
  }
  
  .applications__inner {
    position: relative;
    max-width: 1520px;
    margin: 0 auto;
  }
  
  .applications__eyebrow-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
  }
  
  .applications__eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .26em;
    color: #75798C;
  }
  
  .applications__heading {
    margin: 0 0 clamp(36px, 6vh, 64px);
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(34px, 5vw, 68px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.01em;
  }
  
  .app-list__icon {
    display: block;
    margin-bottom: 20px;
  }
  .app-list__icon--a { stroke: var(--app-accent-a); }
  .app-list__icon--b { stroke: var(--app-accent-b); }
  .app-list__icon-fill--a { fill: var(--app-accent-a); }
  .app-list__icon-fill--b { fill: var(--app-accent-b); }
  
  .app-list__index {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .2em;
  }
  .app-list__index--a { color: var(--app-accent-a); }
  .app-list__index--b { color: var(--app-accent-b); }
  
  .app-list__label {
    margin-top: 16px;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -.01em;
    max-width: 280px;
  }
  
    .field-consent { margin-top: 8px; }
    .consent-label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      line-height: 1.45;
      cursor: pointer;
    }
    .consent-label input[type="checkbox"] {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .consent-label a { color: inherit; text-decoration: underline; }
    .consent-label a:hover { color: var(--accent-text); }
    .field-consent.has-error .consent-label { color: #d93025; }
  
    .panel-pill{position:fixed;right:16px;bottom:16px;z-index:1000;padding:8px 14px;
      border:1px solid var(--accent);border-radius:999px;background:#11151B;color:var(--accent-text);
      font:500 13px/1 Inter,sans-serif;text-decoration:none}
    .panel-pill:hover{background:var(--accent);color:var(--on-accent)}