:root{
    --black:#0F0F0E;
    --yellow:#FFC72C;
    --white:#FFFFFF;
    --section-gray:#F5F5F0;
    --text-secondary:#4A4A44;
    --text-muted:#6B6B62;
    --divider:#E8E7E0;
    --danger:#E14B3D;

    --radius-sm:6px;
    --radius-md:8px;
    --radius-card:12px;
    --radius-banner:16px;

    --xs:4px; --sm:8px; --md:16px; --lg:24px; --xl:48px; --xxl:80px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--white);
    color:var(--black);
    font-family:'Onest', Arial, sans-serif;
    font-weight:400;
    line-height:1.5;
  }
  .mono{font-family:'JetBrains Mono', monospace; font-weight:500;}

  .container{
    max-width:1200px;
    margin:0 auto;
    padding:0 var(--lg);
  }

  section, header, footer{ position:relative; }

  .bg-white{background:var(--white);}
  .bg-gray{background:var(--section-gray);}

  .divider-top{border-top:0.5px solid var(--divider);}
  .divider-bottom{border-bottom:0.5px solid var(--divider);}

  h1,h2,h3{margin:0; font-weight:800; letter-spacing:-0.01em;}
  h1{font-size:44px; line-height:1.08;}
  h2{font-size:28px; line-height:1.15; font-weight:800;}
  h3{font-size:18px; line-height:1.3; font-weight:600;}
  p{margin:0; color:var(--text-secondary); font-size:15px; line-height:1.6;}

  a{color:inherit; text-decoration:none;}

  .eyebrow{
    display:flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px; font-weight:500;
    letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-muted);
  }
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--yellow); display:inline-block;}

  .marker{
    background:var(--yellow);
    padding:0 6px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Onest', sans-serif; font-weight:600; font-size:15px;
    padding:14px 24px;
    border-radius:var(--radius-md);
    border:1px solid transparent;
    cursor:pointer;
    white-space:nowrap;
    transition:transform 0.15s var(--ease,ease), background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0); transition-duration:0.05s;}
  .btn-primary{background:var(--yellow); color:var(--black);}
  .btn-primary:hover{background:#FFD65C;}
  .btn-dark{background:var(--black); color:var(--white);}
  .btn-dark:hover{background:#26261F;}
  .btn-outline{background:var(--white); color:var(--black); border-color:var(--black);}
  .btn-outline:hover{background:var(--black); color:var(--white);}
  .btn-block{width:100%;}
  .btn span.arrow{display:inline-block; transition:transform 0.15s ease;}
  .btn:hover span.arrow{transform:translateX(3px);}

  /* Header */
  header{
    background:var(--white);
    padding:var(--md) 0;
    position:sticky;
    top:0;
    z-index:100;
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between; gap:var(--lg);
  }
  .logo{display:flex; align-items:center; gap:10px;}
  .logo-mark{
    width:40px; height:40px;
    background:var(--black);
    border-radius:20%;
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.25s ease;
  }
  .logo:hover .logo-mark{transform:rotate(-8deg) scale(1.05);}
  .logo-mark span{
    width:35%; height:35%;
    background:var(--yellow);
    border-radius:15%;
    display:block;
    transition:transform 0.25s ease;
  }
  .logo:hover .logo-mark span{transform:scale(1.15);}
  .logo-word{font-weight:800; font-size:21px; letter-spacing:0.02em;}
  nav ul{list-style:none; display:flex; gap:4px; margin:0; padding:0;}
  nav a{
    font-size:14px; font-weight:500; color:var(--black);
    padding:8px 14px;
    border-radius:20px;
    display:inline-block;
    transition:background-color 0.2s ease;
  }
  nav a:hover{background:var(--section-gray);}
  .header-cta{display:flex; align-items:center;}

  /* Hero */
  .hero{padding:var(--lg) 0 var(--xl);}
  .hero-card{
    border:0.5px solid var(--divider);
    border-radius:var(--radius-banner);
    padding:var(--xl) var(--xl);
    background:var(--white);
    text-align:center;
  }
  .hero-card .eyebrow{justify-content:center;}
  .hero-content{max-width:700px; margin:0 auto;}
  .hero h1{margin:var(--sm) 0 var(--sm);}
  .hero p.lead{font-size:17px; max-width:560px; margin:0 auto var(--md);}
  .hero-actions{display:flex; gap:var(--sm); margin-bottom:var(--lg); flex-wrap:wrap; justify-content:center;}
  .hero-actions .btn{min-width:220px;}

  .stats{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:var(--lg);
    padding-top:var(--md);
    border-top:0.5px solid var(--divider);
    text-align:center;
  }
  .stat-num{font-family:'JetBrains Mono', monospace; font-weight:500; font-size:32px; color:var(--black);}
  .stat-num .accent{color:var(--yellow);}
  .stat-label{font-size:13px; color:var(--text-muted); margin-top:4px;}

  /* Category blocks */
  .categories{padding:var(--xxl) 0;}
  .section-head{margin-bottom:var(--xl); max-width:620px;}
  .section-head .eyebrow{margin-bottom:var(--sm);}
  .cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--lg);}
  /* Вся картка категорії — це одне посилання (клікабельна повністю).
     Без transform на hover, щоб курсор не мерехтів і клік був стабільним. */
  .cat-card{
    border:0.5px solid var(--divider);
    border-radius:var(--radius-card);
    padding:var(--lg);
    background:var(--white);
    display:flex; flex-direction:column; gap:var(--md);
    text-decoration:none; color:inherit;
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .cat-card:hover{ border-color:var(--black); box-shadow:0 6px 20px rgba(15,15,14,0.07); }
  .cat-card .btn-block{ margin-top:auto; }
  .cat-media{
    aspect-ratio:4/3; border-radius:var(--radius-md);
    background:var(--section-gray);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:13px;
    overflow:hidden;
  }
  .cat-media img, .product-media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .cat-media--contain img{ object-fit:contain; }
  .spec-badges{display:flex; flex-wrap:wrap; gap:6px;}
  .spec-lines{display:flex; flex-direction:column; gap:2px;}
  .spec-lines p{margin:0; font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-secondary);}
  .spec-badge{
    font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:500;
    color:var(--text-secondary); background:var(--section-gray);
    padding:4px 10px; border-radius:20px; white-space:nowrap;
  }
  .cat-card h3{font-size:20px;}
  .cat-tag{
    align-self:flex-start;
    font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:500;
    color:var(--black); background:var(--yellow);
    padding:4px 10px; border-radius:20px; letter-spacing:0.04em; text-transform:uppercase;
  }

  /* Lead form */
  section.lead{padding:var(--xxl) 0;}
  .lead-card{
    border:0.5px solid var(--divider); border-radius:var(--radius-banner);
    background:var(--black); color:var(--white);
    padding:var(--xxl) var(--xl);
    display:grid; grid-template-columns:1fr 1fr; gap:var(--xl); align-items:center;
  }
  .lead-card h2{color:var(--white);}
  .lead-card p{color:#B8B8B0;}
  .lead-form{display:flex; flex-direction:column; gap:var(--sm);}
  .lead-form input, .lead-form textarea{
    width:100%; padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid #2A2A28;
    background:#1A1A18; color:var(--white);
    font-family:'Onest', sans-serif; font-size:14px;
  }
  .lead-form textarea{resize:vertical; min-height:80px;}
  .lead-form ::placeholder{color:#6B6B62;}
  .lead-form button[disabled]{opacity:0.6; cursor:not-allowed;}
  .form-message{font-family:'JetBrains Mono', monospace; font-size:13px;}
  .form-message:empty{display:none;}
  .form-message.success{color:#4ADE80;}
  .form-message.error{color:var(--danger);}

  /* Video block */
  .videos{padding:var(--xxl) 0;}
  .video-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--lg);}
  .video-item .frame{
    aspect-ratio:16/9; border-radius:var(--radius-md);
    background:var(--black);
    position:relative; overflow:hidden;
    margin-bottom:var(--sm);
  }
  .video-item .frame iframe{
    position:absolute; inset:0;
    width:100%; height:100%; border:0; display:block;
  }
  .video-item h4{font-size:14px; font-weight:600; margin-bottom:4px;}
  .video-item p{font-size:13px;}

  /* Audience blocks */
  .audience{padding:var(--xxl) 0;}
  .aud-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--lg);}
  .aud-card{
    background:var(--white); border:0.5px solid var(--divider); border-radius:var(--radius-card);
    padding:var(--lg);
    transition:transform 0.2s ease, border-color 0.2s ease;
  }
  .aud-card:hover{transform:translateY(-4px); border-color:var(--black);}
  .aud-num{font-family:'JetBrains Mono', monospace; color:var(--yellow); font-size:13px; margin-bottom:var(--md); transition:transform 0.2s ease;}
  .aud-card:hover .aud-num{transform:scale(1.15); display:inline-block;}
  .aud-card h3{margin-bottom:var(--sm);}

  /* Why us */
  .why{padding:var(--xxl) 0;}
  .why-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--lg);}
  .why-card{padding:var(--md) 0; border-top:1.5px solid var(--divider); transition:border-color 0.2s ease, transform 0.2s ease;}
  .why-card:hover{border-color:var(--yellow); transform:translateX(4px);}
  .why-card h3{font-size:15px; margin-bottom:var(--sm);}
  .why-card p{font-size:13px;}

  footer{padding:var(--xl) 0; background:var(--black); color:#B8B8B0;}
  .footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--md);}
  .footer-inner p{color:#8A8A82; font-size:13px;}

  @media (max-width: 1023px){
    .cat-grid, .video-grid, .why-grid{grid-template-columns:repeat(2,1fr);}
    .aud-grid{grid-template-columns:1fr;}
    .lead-card{grid-template-columns:1fr;}
    .hero h1{font-size:34px;}
  }
  @media (max-width: 767px){
    .stats{grid-template-columns:repeat(2,1fr);}
    .cat-grid{grid-template-columns:1fr;}
    .video-grid{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:1fr;}
    nav{display:none;}
    .hero-card{padding:var(--xl) var(--md);}
    .side-tag{display:none;}
    .ghost-num{display:none;}
  }

  /* ---------- Декоративний технічний шар ---------- */

  /* Кутові мітки-хрестики — як реперні точки на кресленні/оптичному приладі */
  .corner-marks{position:relative;}
  .corner-marks::before, .corner-marks::after,
  .corner-marks .cm{
    content:"+";
    position:absolute;
    font-family:'JetBrains Mono', monospace;
    font-size:14px; line-height:1;
    color:var(--divider);
    pointer-events:none;
    user-select:none;
  }
  .corner-marks::before{top:14px; left:14px; content:"+";}
  .corner-marks::after{bottom:14px; right:14px; content:"+";}
  .corner-marks .cm.tr{top:14px; right:14px;}
  .corner-marks .cm.bl{bottom:14px; left:14px;}

  /* Dot-grid текстура на сірих секціях — тонка, майже непомітна */
  .bg-gray{
    background-color:var(--section-gray);
    background-image:radial-gradient(circle, #DCDBD2 1px, transparent 1px);
    background-size:24px 24px;
  }

  /* Ghost-цифра розділу — велика напівпрозора цифра позаду заголовка */
  .section-head{position:relative; z-index:1;}
  .ghost-num{
    position:absolute;
    top:-36px; right:0;
    font-family:'JetBrains Mono', monospace;
    font-weight:500;
    font-size:120px;
    line-height:1;
    color:var(--black);
    opacity:0.04;
    z-index:-1;
    pointer-events:none;
  }
  .section-counter{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; color:var(--text-muted);
  }

  /* Пунктирні розділювачі між показниками статистики */
  .stats > div{position:relative; padding-left:var(--lg);}
  .stats > div:first-child{padding-left:0;}
  .stats > div::before{
    content:"";
    position:absolute; left:0; top:2px; bottom:2px;
    border-left:1px dashed var(--divider);
  }
  .stats > div:first-child::before{display:none;}

  /* Вертикальна бічна мітка на hero-картці. Через writing-mode текст
     центрується по висоті картки й не залазить у чорну смугу зверху,
     незалежно від довжини напису. */
  .side-tag{
    position:absolute; left:-40px; top:0; bottom:0;
    display:flex; align-items:center;
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-muted);
    white-space:nowrap;
    pointer-events:none;
  }

  /* Технічна "лінійка"-смуга під хедером із номерами моделей */
  .spec-strip{
    overflow:hidden;
    border-bottom:0.5px solid var(--divider);
    background:var(--black);
  }
  .spec-strip .container{
    display:flex; gap:var(--xl);
    padding-top:10px; padding-bottom:10px;
  }
  .spec-strip span{
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:0.08em;
    color:#7A7A72; white-space:nowrap;
  }
  .spec-strip span b{color:var(--yellow); font-weight:500;}

  /* Кутовий зріз (notch) на теговій плашці категорій — технічна деталь */
  .cat-media{position:relative;}
  .cat-media::after{
    content:"";
    position:absolute; top:0; right:0;
    width:0; height:0;
    border-style:solid;
    border-width:0 22px 22px 0;
    border-color:transparent var(--yellow) transparent transparent;
  }

  /* Scroll-reveal — плавна поява блоків при прокрутці */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  /* Каскадна поява карток всередині сітки — кожна дитина зі своєю затримкою */
  .reveal-group > *{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.5s ease, transform 0.5s ease;
  }
  .reveal-group.is-visible > *{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-group.is-visible > *:nth-child(1){transition-delay:0.05s;}
  .reveal-group.is-visible > *:nth-child(2){transition-delay:0.15s;}
  .reveal-group.is-visible > *:nth-child(3){transition-delay:0.25s;}
  .reveal-group.is-visible > *:nth-child(4){transition-delay:0.35s;}

  /* Вступна анімація hero при завантаженні сторінки */
  @keyframes heroIn{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .hero-card .eyebrow{ animation:heroIn 0.6s ease both; animation-delay:0.05s; }
  .hero h1{ animation:heroIn 0.6s ease both; animation-delay:0.15s; }
  .hero p.lead{ animation:heroIn 0.6s ease both; animation-delay:0.25s; }
  .hero-actions{ animation:heroIn 0.6s ease both; animation-delay:0.35s; }
  .stats{ animation:heroIn 0.6s ease both; animation-delay:0.45s; }

  /* Заповнення "маркера" зліва направо після появи заголовка */
  @keyframes markerFill{
    from{ background-size:0% 100%; }
    to{ background-size:100% 100%; }
  }
  .marker{
    background-image:linear-gradient(var(--yellow), var(--yellow));
    background-repeat:no-repeat;
    background-position:left center;
    background-color:transparent;
    animation:markerFill 0.5s ease-out both;
    animation-delay:0.55s;
  }

  /* Header стискається та отримує рамку при скролі */
  header{ transition:padding 0.25s ease, box-shadow 0.25s ease; }
  header.is-scrolled{ padding:10px 0; box-shadow:0 1px 0 var(--divider), 0 4px 12px rgba(15,15,14,0.04); }
  header.is-scrolled .logo-mark{ width:28px; height:28px; }

  /* Безкінечна стрічка технічних характеристик */
  .spec-strip .container{
    display:flex; gap:var(--xl);
    padding-top:10px; padding-bottom:10px;
    width:max-content;
    animation:marquee 22s linear infinite;
  }
  .spec-strip{ overflow:hidden; }
  .spec-strip:hover .container{ animation-play-state:paused; }
  @keyframes marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  /* Цифри статистики "рахуються" вгору при появі */
  .stat-num{ font-variant-numeric:tabular-nums; }

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-group > *, .btn, .cat-card, .aud-card, .why-card, .logo-mark, nav a,
    .hero-card .eyebrow, .hero h1, .hero p.lead, .hero-actions, .stats, .marker, .spec-strip .container{
      transition:none !important;
      animation:none !important;
    }
    .reveal, .reveal-group > *{opacity:1; transform:none;}
    .marker{background-size:100% 100% !important;}
  }

  /* Мітка-приціл на відео-фреймах */
  .frame{position:relative;}
  .frame::before{
    content:"";
    position:absolute; top:8px; left:8px; right:8px; bottom:8px;
    border:1px solid rgba(255,199,44,0.25);
    border-radius:4px;
    pointer-events:none;
  }

  /* ---------- Каталожні сторінки (actuators.html, pvu.html) ---------- */

  .breadcrumb{
    display:flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-size:12px;
    color:var(--text-muted);
    padding:var(--md) 0;
  }
  .breadcrumb a{color:var(--text-muted); transition:color 0.15s ease;}
  .breadcrumb a:hover{color:var(--black);}

  .page-hero{padding:var(--md) 0 var(--xs);}
  .page-hero-inner{max-width:760px;}
  .page-hero h1{font-size:32px; margin:var(--xs) 0 var(--sm);}
  .page-hero p.lead{font-size:15px; max-width:600px; margin:0;}

  .product-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--lg);
    padding:2rem 0 var(--xxl);
  }
  .product-card{
    border:0.5px solid var(--divider); border-radius:var(--radius-card);
    background:var(--white);
    padding:var(--lg);
    display:flex; flex-direction:column; gap:var(--md);
    transition:transform 0.2s ease, border-color 0.2s ease;
  }
  .product-card:hover{transform:translateY(-4px); border-color:var(--black);}
  .product-media{
    height:180px; border-radius:var(--radius-md);
    background:var(--section-gray);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:13px;
    position:relative; overflow:hidden;
  }
  .product-media::after{
    content:"";
    position:absolute; top:0; right:0;
    width:0; height:0;
    border-style:solid; border-width:0 20px 20px 0;
    border-color:transparent var(--yellow) transparent transparent;
  }
  /* Вентустановки: показуємо фото повністю на всю ширину без обрізки та без
     сірих полів з боків — рамка підлаштовує висоту під природну пропорцію фото.
     Правило має бути ПІСЛЯ .product-media, щоб перекрити фіксовану height:180px. */
  .product-media--contain{ height:auto; background:transparent; }
  .product-media--contain img{ height:auto; object-fit:contain; }
  .product-tag{
    align-self:flex-start;
    font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:500;
    color:var(--text-muted); background:var(--white); border:1px solid var(--divider);
    padding:3px 10px; border-radius:20px; letter-spacing:0.03em;
  }
  .product-card h3{font-size:17px;}
  .product-card p{font-size:14px;}
  .product-actions{display:flex; flex-direction:column; gap:8px; margin-top:auto;}
  .product-actions .btn{width:100%; padding:11px 16px; font-size:13px; box-sizing:border-box;}
  .product-actions--single{margin-bottom:25px;}

  .page-cta{
    border:0.5px solid var(--divider); border-radius:var(--radius-banner);
    background:var(--black); color:var(--white);
    padding:var(--xl); text-align:center;
    margin-bottom:var(--xxl);
  }
  .page-cta h2{color:var(--white); margin-bottom:var(--sm);}
  .page-cta p{color:#B8B8B0; max-width:520px; margin:0 auto var(--lg);}
  .page-cta .btn-row{display:flex; gap:var(--sm); justify-content:center; flex-wrap:wrap;}

  @media (max-width: 1023px){
    .product-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 767px){
    .product-grid{grid-template-columns:1fr;}
    .page-hero h1{font-size:28px;}
  }

  /* ---------- Anti-spam ---------- */
  .hp-field{
    position:absolute !important;
    left:-9999px !important;
    top:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
  }