:root{
    /* Синий ряд (из Color_Gamma_Blue) */
    --blue-900:#285471;  /* петрольный из логотипа — заголовки, кнопки */
    --blue-700:#566D8B;
    --blue-500:#7F92A9;
    --blue-300:#9EB1C9;
    --blue-100:#DCE4EC;
    --blue-050:#F1F4F8;
    /* Охристый ряд (из Color_Gamma_Brown) */
    --ochre-900:#8A6435;
    --ochre-700:#9C753F;
    --ochre-500:#C9A162;
    --ochre-300:#E5C887;
    --ochre-100:#F3E7C9;
    --ochre-050:#FAF5E9;
    /* База */
    --bg:#FFFFFF;
    --text:#2B3440;
    --text-2:#5C6773;
    --line:#E6E9ED;
    --head:'Montserrat',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --radius:14px;
    --shadow:0 6px 24px rgba(40,84,113,.10);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--text);
    font-family:var(--body);font-size:17px;line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--blue-300);color:#fff}
  .wrap{max-width:1120px;margin:0 auto;padding:0 40px}
  h1,h2,h3{font-family:var(--head);color:var(--blue-900)}

  /* ---- Шапка ---- */
  header.site{
    position:sticky;top:0;z-index:40;
    background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:76px;position:relative}
  .logo img{height:44px;display:block}
  .nav ul{display:flex;gap:34px;list-style:none;align-items:center}
  .nav a.link{
    color:var(--text-2);text-decoration:none;font-size:15px;font-weight:500;
    transition:color .2s;
  }
  .nav-toggle{
    display:none;background:none;border:none;padding:8px;margin:-8px;
    color:var(--blue-900);cursor:pointer;
  }
  .nav-toggle svg{width:26px;height:26px;display:block}
  .nav a.link:hover,.nav a.link:focus-visible{color:var(--blue-900)}
  .nav a.link.active{color:var(--ochre-700);font-weight:600}
  .nav a.link.active:hover{color:var(--ochre-900)}

  /* ---- Кнопки ---- */
  .btn{
    display:inline-block;padding:14px 28px;border-radius:10px;
    font-family:var(--head);font-size:15px;font-weight:600;
    text-decoration:none;transition:.2s;
  }
  .btn-blue{background:var(--blue-900);color:#fff}
  .btn-blue:hover{background:#1E425A}
  .btn-ochre{background:var(--ochre-500);color:#3D2D14}
  .btn-ochre:hover{background:var(--ochre-300)}
  .btn-ghost{border:1.5px solid var(--blue-300);color:var(--blue-900)}
  .btn-ghost:hover{border-color:var(--blue-900)}

  /* ---- Ярлык раздела ---- */
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--head);font-size:12.5px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;
  }
  .eyebrow .spiral{width:20px;height:auto;flex:none;display:block}
  .eyebrow.blue{color:var(--blue-700)}
  .eyebrow.ochre{color:var(--ochre-700)}

  /* ---- Hero ---- */
  .hero{position:relative;overflow:hidden;padding:96px 0 110px}
  .hero .wrap{position:relative;z-index:2;max-width:1120px}
  .hero h1{
    font-size:clamp(34px,4.6vw,56px);line-height:1.14;font-weight:800;
    letter-spacing:-.01em;max-width:17ch;
  }
  .hero h1 .oc{color:var(--ochre-700)}
  .hero p.lead{margin-top:24px;max-width:52ch;color:var(--text-2);font-size:19px}
  .hero .cta-row{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
  /* Слоистые волны справа — мотив баннеров */
  .hero .waves{
    position:absolute;top:0;right:0;bottom:0;width:52%;z-index:1;
    pointer-events:none;
  }
  .hero .waves svg{position:absolute;inset:0;width:100%;height:100%}
  .hero .waves img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:right center;
  }
  @media (max-width:960px){.hero .waves{opacity:.22;width:100%}}

  /* ---- Секции ---- */
  section{padding:92px 0}
  section.tint-blue{background:var(--blue-050)}
  section.tint-ochre{background:var(--ochre-050)}
  h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.005em}
  .section-intro{margin-top:16px;max-width:62ch;color:var(--text-2)}

  /* Волна-разделитель между секциями */
  .divider{display:block;width:100%;height:64px}

  /* ---- Карточки ---- */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
  .card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:32px 30px;display:flex;flex-direction:column;position:relative;
    transition:transform .25s, box-shadow .25s;
  }
  a.card{color:inherit;text-decoration:none}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .card .band{
    height:6px;border-radius:99px;width:56px;margin-bottom:22px;
  }
  .band.blue{background:linear-gradient(90deg,var(--blue-700),var(--blue-300))}
  .band.ochre{background:linear-gradient(90deg,var(--ochre-700),var(--ochre-300))}
  .card h3{font-size:20px;font-weight:700;margin-bottom:12px}
  .card p{color:var(--text-2);font-size:15.5px;flex:1}
  .card .more{
    margin-top:22px;text-decoration:none;font-weight:600;font-size:15px;
  }
  .card .more.blue{color:var(--blue-700)} .card a.more.blue:hover,a.card:hover .more.blue{color:var(--blue-900)}
  .card .more.ochre{color:var(--ochre-700)} .card a.more.ochre:hover,a.card:hover .more.ochre{color:var(--ochre-900)}
  .card .soon{
    position:absolute;top:24px;right:24px;
    font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.14em;
    color:var(--blue-700);border:1.5px solid var(--blue-300);
    border-radius:99px;padding:5px 12px;text-transform:uppercase;background:#fff;
  }
  /* Растянутая ссылка: делает всю карточку кликабельной, когда в карточке
     есть второй самостоятельный <a> — тот остаётся кликабельным поверх. */
  .card a.more.stretched::after{content:'';position:absolute;inset:0}
  .card a.more:not(.stretched){position:relative;z-index:1}

  /* ---- Оборудование ---- */
  .equip{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px}
  .equip .photo{
    height:266px;border-radius:10px;margin-bottom:24px;overflow:hidden;
    background:
      radial-gradient(circle at 78% 30%, var(--ochre-300) 0 14%, transparent 15%),
      linear-gradient(135deg,var(--ochre-100),var(--ochre-050));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.14em;
    color:var(--ochre-700);
  }
  .equip .photo img{width:100%;height:100%;object-fit:cover;display:block}
  .spec{margin-top:20px;border-top:1px solid var(--line);font-size:14.5px}
  .spec div{
    display:flex;justify-content:space-between;gap:16px;
    padding:10px 0;border-bottom:1px solid var(--line);
  }
  .spec span:first-child{color:var(--text-2)}
  .spec span:last-child{font-weight:600;color:var(--text)}

  /* ---- Наши клиенты ---- */
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px}
  @media (max-width:900px){.grid-4{grid-template-columns:1fr 1fr}}
  @media (max-width:640px){.grid-4{grid-template-columns:1fr}}
  .client-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .client-logo{
    display:flex;align-items:center;justify-content:center;
    height:64px;margin-bottom:20px;
  }
  .client-logo img{max-height:100%;max-width:100%;object-fit:contain}
  .client-card h3{font-size:19px;font-weight:800;color:var(--blue-900)}
  .client-card .client-full{margin-top:8px;font-size:13.5px;color:var(--text-2)}
  .client-card .client-address{margin-top:6px;font-size:13px;color:var(--text-2);opacity:.8}

  /* ---- Паспорт ---- */
  .passport{
    margin-top:46px;border-radius:var(--radius);padding:52px 48px;
    position:relative;overflow:hidden;color:#fff;
    background:linear-gradient(120deg,var(--blue-900) 0%,var(--blue-700) 60%,var(--blue-500) 100%);
  }
  .passport h3{position:relative;z-index:2;color:#fff;font-size:26px;font-weight:800;max-width:24ch}
  .passport p{position:relative;z-index:2;margin-top:14px;max-width:56ch;color:var(--blue-100)}
  .passport .cta-row{position:relative;z-index:2}
  .passport .passport-bg{
    position:absolute;right:0;top:0;height:100%;width:auto;z-index:1;
    pointer-events:none;
  }

  /* ---- Подвал ---- */
  footer.site{border-top:1px solid var(--line);padding:56px 0 48px;background:var(--blue-050)}
  .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .foot .col p{color:var(--text-2);font-size:14.5px}
  .foot a{color:var(--blue-900);text-decoration:none;font-weight:500}
  .foot a:hover{text-decoration:underline}
  .foot img{height:40px}

  /* ---- Внутренняя шапка страниц раздела (equipment/knowledge и т.п.) ---- */
  .page-hero{padding:64px 0 20px}
  .page-hero .lead{margin-top:20px;max-width:62ch;color:var(--text-2);font-size:19px}
  .photo-frame{
    margin-top:40px;margin-right:auto;margin-left:0;
    border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  }
  .photo-frame img{display:block;width:100%;height:auto}
  nav[aria-label="Хлебные крошки"]{font-size:14px;color:var(--text-2);margin-bottom:18px}
  nav[aria-label="Хлебные крошки"] a{color:var(--text-2)}
  nav[aria-label="Хлебные крошки"] a:hover{color:var(--blue-900)}

  /* ---- Сетка 2 колонки для карточек-фич ---- */
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px}
  @media (max-width:900px){.grid-2{grid-template-columns:1fr}}

  /* ---- Нумерованные карточки (этапы процесса) ---- */
  .step-num{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;margin-bottom:16px;
    background:var(--ochre-100);color:var(--ochre-900);
    font-family:var(--head);font-weight:700;font-size:15px;flex:none;
  }

  /* ---- Сравнение моделей ---- */
  .compare-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
  table.compare-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
  .compare-table caption{sr-only:true}
  .compare-table th,.compare-table td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line)}
  .compare-table thead th{
    font-family:var(--head);font-weight:700;color:var(--blue-900);
    background:var(--ochre-100);font-size:14px;
  }
  .compare-table tbody tr:nth-child(even){background:#F2F2F2}
  .compare-table th:not(:first-child),.compare-table td:not(:first-child){text-align:center;width:180px}
  .compare-table td:first-child{color:var(--text);font-weight:500}
  .compare-table tbody tr:last-child td{border-bottom:none}
  .compare-table .yes{color:var(--ochre-900);font-weight:700}
  .compare-table .no{color:var(--text-2);opacity:.5}
  .compare-table.diff-only tr.same{display:none}
  /* Модификатор для таблиц со свободным текстом в ячейках (не короткие ✓/опция) */
  .compare-table.wide{min-width:760px}
  .compare-table.wide th:not(:first-child),.compare-table.wide td:not(:first-child){
    text-align:left;width:auto;font-weight:400;color:var(--text)
  }
  .compare-table.wide td:first-child{width:260px}
  .compare-actions{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .compare-actions button{
    font-family:var(--head);font-size:14px;font-weight:600;color:var(--ochre-700);
    background:none;border:1.5px solid var(--ochre-500);border-radius:10px;
    padding:10px 18px;cursor:pointer;transition:.2s;
  }
  .compare-actions button:hover{background:var(--ochre-050)}

  /* ---- Полные спецификации: поиск + аккордеон ---- */
  .spec-search{
    margin-top:32px;width:100%;max-width:420px;padding:12px 16px;
    border:1.5px solid var(--line);border-radius:10px;font-family:var(--body);
    font-size:15px;color:var(--text);background:#fff;
  }
  .spec-search:focus-visible{outline:2px solid var(--blue-700);outline-offset:2px}
  .accordion{margin-top:24px;display:flex;flex-direction:column;gap:12px}
  .accordion details{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:6px 26px;
  }
  .accordion summary{
    cursor:pointer;list-style:none;padding:18px 0;
    font-family:var(--head);font-weight:700;color:var(--blue-900);font-size:16px;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
  }
  .accordion summary::-webkit-details-marker{display:none}
  .accordion summary::after{
    content:'+';font-weight:400;font-size:22px;color:var(--ochre-700);flex:none;
  }
  .accordion details[open] summary::after{content:'–'}
  .accordion .spec{margin-top:0;padding-bottom:18px}

  /* ---- Портфолио / галерея ---- */
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
  .gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff}
  .gallery img{display:block;width:100%;height:auto;cursor:zoom-in}
  .gallery figcaption{padding:14px 18px;font-size:15px;color:var(--text-2);background:var(--ochre-050)}
  @media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
  @media (max-width:640px){.gallery{grid-template-columns:1fr}}

  /* ---- Портфолио «в деле»: окна фото фиксированной пропорции 1.78:1 ---- */
  #portfolio .gallery img{aspect-ratio:1.78/1;height:auto;object-fit:cover;object-position:center;cursor:pointer}
  #portfolio .gallery figure a{display:block}

  /* ---- Лайтбокс галереи ---- */
  .lightbox{
    position:fixed;inset:0;z-index:100;display:none;
    align-items:center;justify-content:center;padding:32px;
    background:rgba(20,24,30,.9);cursor:zoom-out;
  }
  .lightbox.open{display:flex}
  .lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .lightbox-close{
    position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.12);border:none;color:#fff;font-size:24px;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .lightbox-close:hover{background:rgba(255,255,255,.22)}

  /* ---- Видео-галерея ---- */
  .video-gallery{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px}
  .video-gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff}
  .video-gallery video{display:block;width:100%;height:auto;background:#000}
  .video-gallery figcaption{padding:14px 18px;font-size:14px;color:var(--text-2)}
  @media (max-width:640px){.video-gallery{grid-template-columns:1fr}}

  /* ---- Слайдер сравнения (направленное / диффузное освещение) ---- */
  .compare-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:46px}
  @media (max-width:900px){.compare-grid{grid-template-columns:1fr}}
  .compare-slider{
    position:relative;overflow:hidden;border-radius:var(--radius);
    border:1px solid var(--line);user-select:none;-webkit-user-select:none;
    touch-action:pan-y;
  }
  .compare-slider img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
  .compare-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
  .compare-handle{
    position:absolute;top:0;bottom:0;left:50%;width:0;
    transform:translateX(-50%);cursor:ew-resize;
  }
  .compare-handle::before{
    content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;
    background:#fff;transform:translateX(-50%);box-shadow:0 0 6px rgba(0,0,0,.4);
  }
  .compare-handle::after{
    content:'⟷';position:absolute;top:50%;left:50%;width:36px;height:36px;
    transform:translate(-50%,-50%);border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;
    color:var(--blue-900);box-shadow:0 2px 8px rgba(0,0,0,.3);
  }
  .compare-label{
    position:absolute;top:12px;z-index:2;font-family:var(--head);font-size:11px;
    font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;
    background:rgba(43,52,64,.62);border-radius:99px;padding:5px 12px;pointer-events:none;
  }
  .compare-label.left{left:12px}
  .compare-label.right{right:12px}
  .compare-caption{margin-top:14px;font-size:14.5px;color:var(--text-2)}

  /* ---- CTA-блок раздела (аналог .passport, охристая гамма) ---- */
  .cta-box{
    margin-top:46px;border-radius:var(--radius);padding:48px;
    background:var(--ochre-050);border:1px solid var(--ochre-100);
    display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
  }
  .cta-box h3{font-size:24px;font-weight:800;max-width:26ch}
  .cta-box p{margin-top:10px;color:var(--text-2);max-width:44ch}
  .cta-box.blue{background:var(--blue-050);border-color:var(--blue-100)}

  /* ---- Каталог: поиск + фильтры по типу материала ---- */
  .catalog-controls{margin-top:40px;display:flex;flex-direction:column;gap:20px}
  .filter-tabs{display:flex;gap:10px;flex-wrap:wrap}
  .filter-tabs button{
    font-family:var(--head);font-size:14px;font-weight:600;color:var(--blue-700);
    background:#fff;border:1.5px solid var(--blue-300);border-radius:99px;
    padding:9px 18px;cursor:pointer;transition:.2s;
  }
  .filter-tabs button:hover{border-color:var(--blue-900)}
  .filter-tabs button.active{background:var(--blue-900);border-color:var(--blue-900);color:#fff}
  .catalog-grid{margin-top:8px}
  .catalog-grid .card p{font-size:14.5px}
  .catalog-empty{margin-top:32px;color:var(--text-2);display:none}
  .catalog-empty.show{display:block}

  /* ---- Тег-метка типа материала на карточке ---- */
  .tag{
    display:inline-block;font-family:var(--head);font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--blue-700);
    background:var(--blue-050);border-radius:99px;padding:4px 10px;margin-bottom:14px;
  }
  .tag.ochre{color:var(--ochre-700);background:var(--ochre-050)}

  /* ---- Форма сбора заявок (submit -> mailto) ---- */
  .signup-form{max-width:560px;margin-top:40px;display:flex;flex-direction:column;gap:18px}
  .signup-form label{font-family:var(--head);font-weight:600;font-size:14px;color:var(--text);display:block;margin-bottom:8px}
  .signup-form input,.signup-form textarea{
    width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;
    font-family:var(--body);font-size:15px;color:var(--text);background:#fff;
  }
  .signup-form input:focus-visible,.signup-form textarea:focus-visible{outline:2px solid var(--blue-700);outline-offset:2px}
  .signup-form textarea{min-height:110px;resize:vertical}
  .signup-form .hint{font-size:13px;color:var(--text-2);margin-top:-8px}
  .signup-form .field{display:flex;flex-direction:column}
  .signup-form button{align-self:flex-start;font-family:var(--head);cursor:pointer}

  /* ---- Появление при скролле ---- */
  .reveal{opacity:0;transform:translateY(16px);
    transition:opacity .55s ease,transform .55s ease}
  .reveal.on{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .card,.card:hover{transform:none;transition:none}
  }
  a:focus-visible{outline:2px solid var(--blue-700);outline-offset:3px;border-radius:6px}

  @media (max-width:900px){
    .grid-3{grid-template-columns:1fr}
    .equip{grid-template-columns:1fr}
    .nav-toggle{display:block}
    .nav ul{
      display:none;position:absolute;top:100%;left:0;right:0;z-index:1;
      flex-direction:column;align-items:stretch;gap:0;
      background:#fff;border-bottom:1px solid var(--line);
      box-shadow:0 16px 28px rgba(40,84,113,.14);
    }
    .nav ul.open{display:flex}
    .nav ul li{width:100%}
    .nav ul a.link{display:block;padding:16px 22px}
    .nav ul a.btn{display:block;margin:10px 22px;text-align:center}
  }
  @media (max-width:640px){
    .wrap{padding:0 22px}
    .hero{padding:64px 0 72px}
    section{padding:64px 0}
    .passport{padding:36px 28px}
  }