:root{--ink:#1F1F1F;--panel:#1F1F1F;--surface:#EBEBEB;--paper:#FFFFFF;--muted:#EBEBEB;--accent:#8ED4B1;--fs-xs:.78rem;--fs-sm:.92rem;--fs-md:1rem;--fs-lg:1.4rem;--fs-xl:clamp(2.3rem,6vw,4.8rem);--radius:8px;--shadow:0 16px 40px rgba(0,0,0,.24)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:"Roboto",sans-serif;font-size:var(--fs-md);line-height:1.6;overflow-x:hidden}h1,h2,h3,.navbar-brand,.eyebrow{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;line-height:1.04}a{color:inherit}img{max-width:100%}.section-pad{padding:80px 0}.section-title{font-size:clamp(2rem,4vw,3.4rem);font-weight:700;margin:0 0 32px}.section-title:after{content:"";display:block;width:72px;height:4px;background:var(--accent);margin-top:16px}.text-accent{color:var(--accent)}.text-muted-custom{color:var(--muted)!important}.navbar{background:var(--ink);border-bottom:1px solid var(--surface);min-height:80px}.navbar-brand img{width:156px;height:auto}.navbar-toggler{border-color:var(--muted);color:var(--paper)}.navbar-toggler:focus{box-shadow:none}.navbar-nav .nav-link{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-size:var(--fs-lg);color:var(--paper);padding:12px 16px!important}.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{color:var(--accent)}.phone{font-weight:700;white-space:nowrap;text-decoration:none}.hero{min-height:660px;display:flex;align-items:center;background-color:var(--panel);background-image:linear-gradient(90deg,rgba(18,20,23,.96) 0%,rgba(18,20,23,.78) 42%,rgba(18,20,23,.18) 100%),url('https://u-bmt-kub-m.ru/public/output/img/index/tuchka_bg2.webp');background-repeat:no-repeat;background-size:cover;background-position:center}.hero .eyebrow{font-size:var(--fs-lg);font-weight:700;letter-spacing:.06em;color:var(--accent);margin-bottom:16px}.hero h1{font-size:var(--fs-xl);font-weight:800;max-width:780px;margin-bottom:24px}.hero .lead{max-width:680px;font-size:var(--fs-lg);color:var(--paper)}.btn{border-radius:var(--radius);font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:13px 24px}.btn-primary{background:var(--accent);border-color:var(--accent)}.btn-primary:hover,.btn-primary:focus{background:var(--paper);border-color:var(--paper);color:var(--ink)}.btn-outline-light:hover{color:var(--ink)}.facts{background:var(--panel)}.fact{height:100%;padding:24px;border-left:3px solid var(--accent);background:var(--surface)}.fact i{font-size:var(--fs-lg);color:var(--accent)}.fact strong{display:block;font-family:"Barlow Condensed";font-size:var(--fs-lg);text-transform:uppercase;margin:8px 0 4px}.dark-grid{background-color:var(--ink);background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px}.protection-card{height:100%;background:var(--panel);border:1px solid var(--surface);padding:32px;border-radius:var(--radius)}.protection-card i{font-size:2rem;color:var(--accent)}.protection-card h3{font-size:1.8rem;margin:16px 0}.media-frame{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface)}.media-frame img,.media-frame video{display:block;width:100%;height:100%;object-fit:cover}.content-panel{background:var(--paper);color:var(--ink)}.content-panel .section-title{color:var(--ink)}.feature-list{padding:0;margin:0;list-style:none}.feature-list li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--muted)}.feature-list i{color:var(--accent);margin-top:5px}.category{height:100%;background:var(--paper);color:var(--ink);padding:32px;border-radius:var(--radius)}.category .num{font-family:"Barlow Condensed";font-size:3rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}.gallery a{display:block;overflow:hidden}.gallery img{transition:transform .35s ease}.gallery a:hover img{transform:scale(1.035)}.accent-band{background:var(--accent);color:var(--ink);position:relative;overflow:hidden}.accent-band::before{content:"80+";position:absolute;right:6%;top:50%;transform:translateY(-50%);font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:clamp(6rem,12vw,18rem);color:rgba(31,31,31,.06);pointer-events:none;z-index:0;letter-spacing:.02em}.accent-band > .container-xl{position:relative;z-index:1}.accent-band .metric{font-family:"Barlow Condensed";font-size:3rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.contact-card{background:var(--panel);padding:32px;border-radius:var(--radius);height:100%}.contact-card a{text-decoration:none}.footer{border-top:1px solid var(--surface);color:var(--muted);padding:32px 0}.modal-content{background:var(--paper);color:var(--ink);border-radius:var(--radius)}:focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px}@media(max-width:991.98px){.navbar-collapse{padding:16px 0}.hero{min-height:600px;background-position:62% center}.hero h1{max-width:640px}}@media(max-width:767.98px){.section-pad{padding:56px 0}.hero{min-height:620px;background-image:linear-gradient(rgba(18,20,23,.84),rgba(18,20,23,.92)),url('https://u-bmt-kub-m.ru/public/output/img/index/tuchka_bg2.webp')}.hero .lead{font-size:var(--fs-md)}.btn{width:100%}.section-title{margin-bottom:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallery img{transition:none}}

    /* Корпоративная палитра и анимации при прокрутке */
    .hero{
      background-image:linear-gradient(90deg,rgba(31,31,31,.96) 0%,rgba(31,31,31,.78) 42%,rgba(31,31,31,.18) 100%),url('/public/output/img/index/tuchka_bg2.webp');
    }
    .facts{background:var(--paper);color:var(--ink)}
    .fact{background:var(--surface);color:var(--ink)}
    .fact .text-muted-custom,.content-panel .text-muted-custom,.category .text-muted-custom{color:var(--ink)!important}
    .dark-grid{background-color:var(--ink)}
    .protection-card{background:var(--ink);border-color:var(--accent)}
    .category{background:var(--surface)}
    .contact-card{border:1px solid var(--accent)}
    .btn-primary{color:var(--ink)}
    .btn-dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
    .btn-dark:hover,.btn-dark:focus{background:var(--paper);border-color:var(--paper);color:var(--ink)}
    

    
    .scroll-reveal{opacity:0;transform:translateY(80px);transition:opacity 10s cubic-bezier(.16,.9,.24,1),transform 10s cubic-bezier(.16,.9,.24,1);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
    .scroll-reveal.reveal-left{transform:translateX(-120px)}
    .scroll-reveal.reveal-right{transform:translateX(120px)}
    .scroll-reveal.reveal-scale{transform:scale(.82) translateY(60px)}
    .scroll-reveal.is-visible{opacity:1;transform:none}
    

    /* Hover: явные микровзаимодействия для карточек и скругления углов в нужных разделах */
    .hover-animated{transition:transform .36s cubic-bezier(.2,.9,.25,1),box-shadow .36s cubic-bezier(.2,.9,.25,1);will-change:transform}
    /* Преимущества: скруглённые карточки и явный hover */
    .facts .fact{border-radius:14px;overflow:hidden}
    .facts .fact.hover-animated:hover,.facts .fact.hover-animated:focus-within{transform:translateY(-10px) scale(1.02);box-shadow:0 26px 50px rgba(31,31,31,.28)}

    /* От чего защищает: hover для protection-card */
    .dark-grid .protection-card{border-radius:12px}
    .dark-grid .protection-card.hover-animated:hover,.dark-grid .protection-card.hover-animated:focus-within{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.28)}

    /* Разновидности и категории: hover */
    #types .category{border-radius:12px}
    #types .category.hover-animated:hover,#types .category.hover-animated:focus-within{transform:translateY(-8px);box-shadow:0 18px 36px rgba(0,0,0,.18)}

    /* Процесс: скругления и hover в разделе "от проекта до монтажа" */
    #production .process-card{border-radius:14px}
    #production .process-card.hover-animated:hover,#production .process-card.hover-animated:focus-within{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.22)}

    /* Доступность: видимый фокус для keyboard navigation */
    .hover-animated:focus,.hover-animated:focus-within{outline:3px solid rgba(142,212,177,.16);outline-offset:6px}
    .scroll-reveal.reveal-left{transform:translateX(-80px)}
    .scroll-reveal.reveal-right{transform:translateX(80px)}
    .scroll-reveal.reveal-scale{transform:scale(.88)}
    .scroll-reveal.is-visible{opacity:1;transform:none}
    @media(max-width:767.98px){
      .hero{background-image:linear-gradient(rgba(31,31,31,.84),rgba(31,31,31,.92)),url('/public/output/img/index/tuchka_bg2.webp')}
      .scroll-reveal.reveal-left,.scroll-reveal.reveal-right{transform:translateY(60px)}
      .scroll-reveal.is-visible{transform:none}
    }
    @media(prefers-reduced-motion:reduce){.scroll-reveal,.scroll-reveal.reveal-left,.scroll-reveal.reveal-right,.scroll-reveal.reveal-scale{opacity:1;transform:none;transition:none}}

    /* Типографика и интерактивная шапка */
    :root{--fs-xs:.72rem;--fs-sm:.84rem;--fs-md:.94rem;--fs-lg:1.22rem;--fs-xl:clamp(2.05rem,5.2vw,4.15rem)}
    .section-title{font-size:clamp(1.8rem,3.5vw,3rem)}
    .protection-card h3,.seo-copy h3{font-size:1.55rem}
    .seo-copy{max-width:920px}.seo-copy h3{margin-top:32px}
    .process-card{height:100%;padding:24px;border-top:3px solid var(--accent);background:var(--surface);color:var(--ink)}
    .process-card strong{display:block;font-family:"Barlow Condensed",sans-serif;font-size:var(--fs-lg);text-transform:uppercase;margin-bottom:8px}
    .faq .accordion-button{font-weight:700;background:var(--paper);color:var(--ink);font-size:var(--fs-md)}
    .faq .accordion-button:not(.collapsed){background:var(--accent);color:var(--ink)}
    .faq .accordion-body{background:var(--paper);color:var(--ink)}

    .site-header{position:sticky;top:0;z-index:1030;background:var(--ink);transition:box-shadow 1.3s ease}
    .header-main{min-height:80px;position:relative;z-index:2;transition:min-height 1.3s ease}
    .brand-wrap{display:flex;align-items:center;gap:18px;text-decoration:none;min-width:0;flex:0 0 auto}
    .brand-wrap img{width:176px;height:auto;transition:width 1.3s ease}
    .brand-caption{max-width:270px;color:var(--muted);font-size:var(--fs-xs);line-height:1.35;transition:opacity .25s ease,max-width 1.3s ease,margin 1.3s ease}
    .compact-nav{display:flex;align-items:center;gap:2px;max-width:0;opacity:0;visibility:hidden;overflow:hidden;transform:translateY(8px);transition:max-width .5s ease,opacity .28s ease .08s,transform 1.3s ease,visibility 0s linear 1.3s}
    .compact-nav a{padding:8px 9px;color:var(--paper);font-family:"Barlow Condensed",sans-serif;font-size:var(--fs-xs);font-weight:600;letter-spacing:.03em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
    .compact-nav a:hover,.compact-nav a:focus{color:var(--accent)}
    .header-contact{display:flex;align-items:center;gap:24px;position:relative}
    .contact-hover{position:relative;padding:10px 0}
    .header-phone{display:flex;flex-direction:column;text-decoration:none;white-space:nowrap}
    .header-phone strong{font-size:var(--fs-md);color:var(--paper)}
    .header-phone span{font-size:var(--fs-xs);color:var(--muted)}
    .contact-details{position:absolute;top:calc(100% - 2px);right:0;width:320px;padding:20px;background:var(--paper);color:var(--ink);border-top:3px solid var(--accent);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
    .contact-details a{display:block;color:var(--ink);text-decoration:none;margin-bottom:8px}
    .contact-details p{margin:0;font-size:var(--fs-sm)}
    .contact-hover:hover .contact-details,.contact-hover:focus-within .contact-details{opacity:1;visibility:visible;transform:none;transition-delay:0s}
    .mobile-menu-toggle{display:none;border-color:var(--muted);color:var(--paper);padding:8px 11px}
    .header-nav{max-height:56px;overflow:hidden;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--surface);opacity:1;transform:translateY(0);transition:max-height .42s ease,opacity .28s ease,transform .42s ease,border-color .28s ease}
    .header-nav .navbar{min-height:auto;background:transparent;border:0;padding:0}
    .header-nav .nav-link{color:var(--ink);font-size:var(--fs-xs);letter-spacing:.035em;padding:12px 14px!important}
    .header-nav .nav-link:hover,.header-nav .nav-link:focus{color:var(--ink);background:var(--accent)}
    .site-header.is-compact{box-shadow:var(--shadow)}
    .site-header.is-compact .header-main{min-height:64px}
    .site-header.is-compact .brand-wrap img{width:126px}
    .site-header.is-compact .brand-caption{opacity:0;max-width:0;margin-left:-18px;overflow:hidden}
    .site-header.is-compact .compact-nav{max-width:680px;opacity:1;visibility:visible;transform:none;transition:max-width .5s ease .08s,opacity .32s ease .18s,transform 1.3s ease .12s,visibility 0s}
    .site-header.is-compact .header-nav{max-height:0;opacity:0;transform:translateY(-100%);border-color:transparent}

    .footer{padding:0;background:var(--ink);border-top:4px solid var(--accent)}
    .footer-main{padding:56px 0 40px}
    .footer-brand{width:160px;height:auto;margin-bottom:20px}
    .footer-title{font-family:"Barlow Condensed",sans-serif;font-size:var(--fs-lg);text-transform:uppercase;color:var(--paper);margin-bottom:16px}
    .footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:8px}
    .footer-links a{text-decoration:none;color:var(--muted)}.footer-links a:hover{color:var(--accent)}
    .footer-bottom{padding:20px 0;border-top:1px solid rgba(235,235,235,.18);font-size:var(--fs-sm)}

    /* Hero и адаптив */
    .hero{position:relative;isolation:isolate;background-color:var(--ink);background-image:url('/public/output/img/index/tuchka_bg3.webp');background-size:auto 100%;background-position:right center;background-repeat:no-repeat}
    .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ink) 0%,rgba(31,31,31,.94) 34%,rgba(31,31,31,.42) 61%,rgba(31,31,31,0) 82%)}
    .hero > .container-xl{position:relative;z-index:1}
    @media(max-width:1199.98px){.compact-nav a{padding-inline:6px}.brand-caption{display:none}}
    @media(max-width:991.98px){
      .site-header,.site-header.is-compact{box-shadow:var(--shadow)}
      .header-main,.site-header.is-compact .header-main{min-height:64px}
      .header-main .container-xl{flex-wrap:nowrap}
      .brand-wrap img,.site-header.is-compact .brand-wrap img{width:136px}
      .brand-caption,.compact-nav,.site-header.is-compact .compact-nav,.header-contact .btn{display:none}
      .header-contact{margin-left:auto;gap:10px}
      .contact-hover{padding:0}.header-phone span{display:none}
      .contact-details{display:none}
      .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
      .header-nav,.site-header.is-compact .header-nav{position:absolute;top:64px;left:0;right:0;max-height:none;overflow:visible;opacity:1;transform:none;background:var(--ink);border:0}
      .header-nav .navbar{padding:0}.header-nav .container-xl{padding:0}
      .header-nav .navbar-collapse{padding:8px 20px 16px;border-top:1px solid rgba(235,235,235,.18);box-shadow:var(--shadow)}
      .header-nav .nav-link{color:var(--paper);font-size:var(--fs-sm);padding:10px 0!important}
      .header-nav .nav-link:hover,.header-nav .nav-link:focus{color:var(--accent);background:transparent}
      .header-nav .header-email{color:var(--paper)!important;display:block;padding:10px 0}
      .hero{background-size:auto 100%;background-position:68% center}
      .hero::before{background:linear-gradient(90deg,rgba(31,31,31,.96) 0%,rgba(31,31,31,.78) 58%,rgba(31,31,31,.28) 100%)}
    }
    @media(max-width:575.98px){
      .header-main .container-xl{gap:8px!important;padding-inline:12px}
      .brand-wrap img,.site-header.is-compact .brand-wrap img{width:112px}
      .header-phone strong{font-size:.72rem}
      .mobile-menu-toggle{font-size:var(--fs-sm);padding:7px 9px}
      .hero{min-height:600px;background-size:auto 100%;background-position:72% center}
      .hero::before{background:rgba(31,31,31,.7)}
      .footer-main{padding:40px 0 24px}
    }
    @media(prefers-reduced-motion:reduce){.site-header,.header-main,.brand-wrap img,.brand-caption,.compact-nav,.header-nav,.contact-details{transition:none!important}}
  
