@import url("design-canon.css");
    :root{--zi-promo:3000;
      --acc: var(--c-brand);
      --acc-rgb:83 209 138;
      --acc2: var(--c-brand);
      --acc2-rgb:83 209 138;
      --txt:#0b1220;
      --mut:#6b7280;
      --bg:#ffffff;
      --bg2:#f6f7fb;
      --card:#ffffff;
      --br:#e7eaf1;
      --shadow:0 18px 44px rgba(2,6,23,.07);
      --shadow2:0 8px 20px rgba(2,6,23,.05);
      --r-xl:28px;
      --r-lg:18px;
      --r-md:14px;
      --max:1240px;
    
      --shadow-modal:0 24px 70px rgba(2,6,23,.22);
      --shadow-float:0 16px 44px rgba(2,6,23,.14);
      /* Kitchen-like CTA accent shadow */
      --cta-shadow:0 18px 42px rgba(13,126,70,.28), 0 10px 18px rgba(2,6,23,.08);
      --cta-shadow-hover:0 22px 54px rgba(13,126,70,.32), 0 14px 24px rgba(2,6,23,.10);
      --cta-shadow-active:0 12px 26px rgba(13,126,70,.18), 0 8px 14px rgba(2,6,23,.06);
      --lh-title:1.05;
      --lh-body:1.45;
      --ls-title:-.02em;
      --text-rgb:11 18 32;
      --mut-rgb:107 114 128;
      --ring:124 58 237;
      --ring2:79 70 229;
      --pad:22px;
      --pad-sm:16px;}
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Manrope,Inter,Manrope,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
      color:var(--txt);
      background:
        radial-gradient(1200px 520px at 15% -10%, rgba(var(--acc-rgb),.10), transparent 60%),
        radial-gradient(900px 420px at 90% 10%, rgba(var(--acc-rgb),.10), transparent 55%),
        var(--bg2);
    }
    a{color:inherit}
    .container{max-width:var(--max);margin:0 auto;padding:0 18px}
    .pill{
      display:inline-flex;align-items:center;gap:10px;
      padding:8px 12px;border-radius:999px;
      background:rgba(var(--acc-rgb),.10);border:1px solid rgba(124,58,237,.18);
      color:#4c1d95;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase
    }

    /* badges / tags (cards, series) */
    .hz-tag, .hz-series__tag{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;border-radius:999px;
      background:rgba(var(--acc-rgb),.10);
      border:1px solid rgba(124,58,237,.18);
      color:#4c1d95;
      font-weight:800;font-size:12px;line-height:1;
      letter-spacing:.02em
    }
    .hz-series__tag{font-weight:800;color:rgba(76,29,149,.95)}

    /* small button (used in portfolio card slider controls) */
    .btn--sm, .hz-btn--sm{height:40px;padding:0 14px;font-size:13px}
    .btn, .hz-btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      height:44px;padding:0 16px;border-radius:999px;border:none;
      font-weight:850;font-size:14px;text-decoration:none;
      background:linear-gradient(135deg,var(--acc),var(--acc2));
      color:#fff;box-shadow:0 10px 22px rgba(79,70,229,.18);
      transition:transform .14s ease, filter .14s ease, opacity .14s ease
    }
    /* hover effects are applied only on devices that actually support hover (see media query below) */
    .btn--ghost, .hz-btn--ghost{
      background:rgba(255,255,255,.75);
      color:var(--txt);
      border:1px solid rgba(2,6,23,.10);
      box-shadow:0 12px 28px rgba(2,6,23,.08)
    }
    .btn svg, .hz-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

    /* Promo */
    .promo{
      position:fixed;top:0;left:0;right:0;z-index:var(--zi-promo);
      background:linear-gradient(135deg,#0b1220,#111827);
      color:#fff;border-bottom:1px solid rgba(255,255,255,.10)
    }
    .promo__in{
      max-width:var(--max);margin:0 auto;padding:9px 16px;
      display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap
    }
    .promo__left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .promo__badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:4px 10px;border-radius:999px;
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
      font-size:12px;font-weight:800;white-space:nowrap
    }
    .promo__text{font-size:13px;opacity:.92}
    .promo__right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .promo__btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:8px 14px;border-radius:999px;text-decoration:none;
      color:#0b1220;background:rgba(255,255,255,.92);
      border:1px solid rgba(255,255,255,.55);
      font-weight:800;font-size:12px;
      box-shadow:0 10px 22px rgba(0,0,0,.22);
      transition:transform .16s ease,opacity .16s ease
    }
    /* hover handled in @media (hover:hover) */
    .promo__timer{font-weight:900}
    @media (max-width:520px){.promo__text{white-space:normal}}

    /* v4.5.4 — iPhone promo compact (avoid half-screen promo) */
    @media (max-width:520px){
      .promo__in{padding:8px 12px;gap:10px}
      .promo__badge{padding:4px 9px;font-size:11px}
      .promo__text{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
      .promo__right{gap:8px}
      .promo__btn{padding:7px 12px;font-size:11px}
      .promo__btn[data-hz-promo-cta2]{display:none}
    }
    @media (max-width:380px){
      .promo__text{display:none}
    }

    /* Header */
    .hdr, .hz-hdr{
      position:fixed;top:var(--promo-h,0px);left:0;right:0;z-index:var(--zi-header);
      background:rgba(255,255,255,.86);
      backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(2,6,23,.08);
      box-shadow:0 10px 30px rgba(2,6,23,.06);
    }
    .hdr__in, .hz-hdr__in{max-width:var(--max);margin:0 auto;padding:10px 16px;display:flex;gap:18px;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
    .brand__logo{
      width:44px;height:44px;border-radius:10px;
      background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(79,70,229,.16));
      border:1px solid rgba(79,70,229,.18);
      display:grid;place-items:center;font-weight:800;color:#1f2937
    }
    .brand__txt{display:flex;flex-direction:column;line-height:1.1}
    .brand__name{font-weight:800;letter-spacing:.02em}
    .brand__cap{font-size:12px;color:var(--mut);font-weight:700}
    .hdr__nav, .hz-hdr__nav{display:flex;gap:10px;align-items:center}
    .hdr__link, .hz-hdr__link{font-weight:800;font-size:13px;color:#111827;text-decoration:none;padding:10px 10px;border-radius:12px}
    .hdr__link:hover, .hz-hdr__link:hover{background:rgba(2,6,23,.04)}
    .hdr__right, .hz-hdr__right{display:flex;gap:10px;align-items:center}
    .hdr__phone, .hz-hdr__phone{font-weight:800;text-decoration:none;white-space:nowrap}
    .burger{display:none;width:40px;height:34px;border:none;background:transparent;padding:0}
    .burger span{display:block;height:3px;width:100%;background:#111827;border-radius:999px;margin:4px 0;transition:.25s ease}
    .hdr.is-open .burger span:nth-child(1), .hz-hdr.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .hdr.is-open .burger span:nth-child(2), .hz-hdr.is-open .burger span:nth-child(2){opacity:0}
    .hdr.is-open .burger span:nth-child(3), .hz-hdr.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    @media (max-width:920px){
      .burger{display:block}
      .hdr__nav, .hz-hdr__nav{display:none}
      .hdr.is-open .hdr__nav, .hz-hdr.is-open .hz-hdr__nav{
        display:flex;flex-direction:column;align-items:flex-start;gap:6px;
        position:absolute;left:0;right:0;top:100%;
        background:rgba(255,255,255,.96);
        border-bottom:1px solid rgba(2,6,23,.08);
        padding:12px 16px
      }
    }

    /* Spacer for fixed header */
    .spacer{height:calc(var(--promo-h,0px) + 92px)}
    @media (max-width:520px){.spacer{height:calc(var(--promo-h,0px) + 108px)}}
    @media (max-width:520px){
      .hdr__phone, .hz-hdr__phone{max-width:32vw}
    }


    /* HERO */
    .hero{padding:22px 0 26px}
    .hero__box{
  position:relative;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(94,234,212,.22), transparent 55%),
    radial-gradient(900px 520px at 85% 20%, rgba(167,139,250,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 60px rgba(2,6,23,.18);
  padding:22px 18px 18px;
  border-radius:var(--r-xl);
  overflow:hidden;
}

.hero__bg{position:absolute; inset:0; pointer-events:none}
.hero__grid{
  position:absolute; inset:-2px;
  background-image: linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(closest-side at 50% 40%, rgba(0,0,0,.9), transparent 70%);
  opacity:.55;
}
.hero__blob{
  position:absolute; width:520px; height:520px; border-radius:999px;
  filter: blur(34px);
  opacity:.6;
  transform: translate3d(0,0,0);
  animation: floaty 9s ease-in-out infinite;
}
.hero__blob--1{left:-220px; top:-220px; background: rgba(94,234,212,.55)}
.hero__blob--2{right:-260px; top:-180px; background: rgba(167,139,250,.55); animation-duration: 11s}
@keyframes floaty{
  0%,100%{transform: translate(0,0) scale(1)}
  50%{transform: translate(18px,22px) scale(1.03)}
}
.hero__stats{
  position:relative;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 2px;
}
.hero__stat{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.6);
  border-radius:10px;
  padding:10px 12px;
  min-width:160px;
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}
.hero__stat .k{font-size:12px; color:var(--mut); letter-spacing:.06em; text-transform:uppercase}
.hero__stat .v{font-weight:800; margin-top:2px}

    .hero__top{
      padding:26px 22px 16px;
      display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;
      align-items:stretch
    }
    @media (max-width:980px){.hero__top{grid-template-columns:1fr}}
    .hero__h1{margin:10px 0 8px;font-size:34px;line-height:1.08;font-weight:800;letter-spacing:-.02em}
    .hero__p{margin:0;color:var(--mut);font-size:15px;line-height:1.6;max-width:60ch}
    .hero__cta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
    .hero__meta{
      background:linear-gradient(180deg, rgba(79,70,229,.06), rgba(124,58,237,.03));
      border:1px solid rgba(var(--acc-rgb),.10);
      border-radius:var(--r-lg);
      padding:16px 16px 14px;
      display:grid;gap:10px;align-content:start
    }
    .meta__title{font-weight:900}
    .meta__row{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed rgba(2,6,23,.10);padding-top:10px}
    .meta__row:first-of-type{border-top:none;padding-top:0}
    .meta__row b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
    .meta__row span{font-weight:800;text-align:right}

    /* Hero slider */
    .hsl, .hz-hsl{
      background:#0b1220;
      border-radius:var(--r-lg);
      overflow:hidden;
      position:relative;
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 20px 50px rgba(2,6,23,.25);
    }
    .hsl__main, .hz-hsl__main{aspect-ratio: 16/10; position:relative; overflow:hidden}
    .hsl__main img, .hz-hsl__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .18s ease, transform .35s ease}
    .hsl__main img.is-fade, .hz-hsl__main img.is-fade{opacity:0}
    .hsl__nav, .hz-hsl__nav{
      position:absolute;top:50%;transform:translateY(-50%);
      width:44px;height:44px;border-radius:999px;border:none;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
      display:grid;place-items:center;transition:transform .16s ease, opacity .16s ease;
      opacity:.0
    }
    .hsl:hover .hsl__nav, .hz-hsl:hover .hz-hsl__nav{opacity:.98}
    .hsl__nav:hover, .hz-hsl__nav:hover{transform:translateY(-50%) scale(1.06)}
    .hsl__nav:active, .hz-hsl__nav:active{transform:translateY(-50%) scale(.98)}
    .hsl__prev, .hz-hsl__prev{left:12px}
    .hsl__next, .hz-hsl__next{right:12px}
    .hsl__nav:before, .hz-hsl__nav:before{
      content:"";width:10px;height:10px;border-right:3px solid #fff;border-bottom:3px solid #fff;
      transform:rotate(135deg);display:block
    }
    .hsl__next:before, .hz-hsl__next:before{transform:rotate(-45deg)}
    @media (max-width:700px){.hsl__nav{opacity:.98}}
    .hsl__thumbs, .hz-hsl__thumbs{
      display:flex;gap:8px; padding:10px;
      overflow:auto;scrollbar-width:none;
  scroll-snap-type:x mandatory;
  scroll-padding: 0 14px;background:rgba(255,255,255,.06);
      border-top:1px solid rgba(255,255,255,.10)
    }
    .hsl__thumbs::-webkit-scrollbar, .hz-hsl__thumbs::-webkit-scrollbar{display:none}
    .hsl__t, .hz-hsl__t{flex:0 0 72px;height:52px;border-radius:12px;overflow:hidden;border:2px solid transparent;background:#111827}
    .hsl__t img, .hz-hsl__t img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
    .hsl__t.is-active, .hz-hsl__t.is-active{border-color:rgba(255,255,255,.85)}
    .hsl__t.is-active img, .hz-hsl__t.is-active img{opacity:1}
    .hsl__cap, .hz-hsl__cap{
      position:absolute;left:14px;bottom:14px;
      background:rgba(2,6,23,.72);
      border:1px solid rgba(255,255,255,.10);
      color:#fff;border-radius:10px;
      padding:10px 12px;
      max-width:min(520px, calc(100% - 28px));
      box-shadow:0 18px 40px rgba(0,0,0,.35)
    }
    .hsl__name, .hz-hsl__name{font-weight:900}
    .hsl__tag, .hz-hsl__tag{margin-top:2px;font-size:13px;opacity:.88;line-height:1.35}

    /* Series grid (как в кухнях: карточки выбора) */
    .series, .hz-series{
      padding:0 18px 18px;
      display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px
    }
    @media (max-width:1100px){.series{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media (max-width:640px){.series{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px 18px}}

    .seriesNav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px 12px}
    @media (max-width:640px){.seriesNav{padding:0 14px 10px}}
    .seriesNav__info{font-size:13px;color:rgba(2,6,23,.65)}
    .navbtn, .hz-navbtn{
      width:40px;height:40px;border-radius:10px;
      border:1px solid rgba(2,6,23,.10);
      background:rgba(255,255,255,.86);
      box-shadow:var(--shadow2);
      transition:transform .16s ease, border-color .16s ease, opacity .16s ease
    }
    .navbtn:hover, .hz-navbtn:hover{transform:translateY(-1px)}
    .navbtn:disabled, .hz-navbtn:disabled{opacity:.45;cursor:not-allowed;transform:none}

    .series__btn, .hz-series__btn{
      text-align:left;border:none;
      background:rgba(255,255,255,.86);
      border:1px solid rgba(2,6,23,.08);
      border-radius:18px;overflow:hidden;
      box-shadow:var(--shadow2);
      padding:0; transition:transform .16s ease, border-color .16s ease
    }
    .series__btn:hover, .hz-series__btn:hover{transform:translateY(-1px)}
    .series__btn.is-active, .hz-series__btn.is-active{border-color:rgba(79,70,229,.35)}
    .series__img, .hz-series__img{display:block;aspect-ratio: 16/10;background:#eef2ff}
    .series__img img, .hz-series__img img{width:100%;height:100%;object-fit:cover;display:block}
    .series__name, .hz-series__name{display:block;padding:8px 10px 10px;font-weight:800;font-size:12px;line-height:1.25}

    /* Sections */

    /* Sections */
    section{padding:32px 0}

    /* hz-namespace helpers (reviews section / general) */
    .hz-container{max-width:var(--max);margin:0 auto;padding:0 18px}
    .hz-sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
    .hz-h2{margin:0;font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-0.02em}
    .hz-muted{color:var(--mut)}
    .box{
      background:rgba(255,255,255,.86);
      border:1px solid rgba(2,6,23,.08);
      border-radius:var(--r-xl);
      box-shadow:var(--shadow);
      padding:26px 18px;
    }
    .head{display:flex;gap:14px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
    h2{margin:0;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.01em}
    .sub{margin:6px 0 0;color:var(--mut);max-width:70ch;line-height:1.55}
    .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
    @media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:640px){.grid{grid-template-columns:1fr}.box{padding:20px 14px}}
    .card, .hz-card{
      background:var(--card);
      border:1px solid rgba(2,6,23,.06);
      border-radius:18px;
      box-shadow:var(--shadow2);
      overflow:hidden;
      display:flex;flex-direction:column;
    }
    .card::before, .hz-card::before{
      content:"";position:absolute;inset:0;
      background:radial-gradient(circle at top left, rgba(var(--acc-rgb),.10), transparent 60%);
      opacity:0;transition:opacity .28s ease;pointer-events:none
    }
    /* Card lift (unified hover) */
    .card, .hz-card{position:relative}
    .card, .hz-card,
    .hzR .hz-review-card{
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      will-change:transform;
    }
    @media (hover: hover) and (pointer: fine){
      .card:hover::before, .hz-card:hover::before{opacity:1}
      .card:hover, .hz-card:hover{
        transform:translateY(-2px);
        box-shadow:0 18px 44px rgba(2,6,23,.10);
        border-color:rgb(var(--acc-rgb) / 0.16);
      }
      .hzR .hz-review-card:hover{
        transform:translateY(-2px);
        box-shadow:0 16px 40px rgba(2,6,23,.10);
        border-color:rgb(var(--acc-rgb) / 0.16);
      }
    }

    /* Steps infographic */
    .hzStepsGrid{gap:16px}
    .hzStep{padding:16px;min-height:156px}

/* Steps + value cards: stronger hover + accent top line */
.hzStep,.adv__item{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.hzStep::after{content:"";position:absolute;left:16px;right:16px;top:12px;height:3px;border-radius:999px;background:rgba(var(--acc-rgb),.18);opacity:.0;transition:opacity .2s ease;}
@media (hover:hover) and (pointer:fine){
  .hzStep:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(15,23,42,.10);border-color:rgba(var(--acc-rgb),.28);}
  .hzStep:hover::after{opacity:1;}
}

    .hzStepTop{display:flex;align-items:center;gap:10px}
    .hzStepBadge{width:40px;height:40px;border-radius:999px;
      background:rgb(var(--acc-rgb) / 0.08);
      border:1px solid rgb(var(--acc-rgb) / 0.18);
      display:flex;align-items:center;justify-content:center;flex:0 0 auto}
    .hzStepNum{font-weight:800;color:rgb(var(--acc-rgb))}
    .hzStepIco{width:48px;height:48px;border-radius:10px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(2,6,23,.08);
      display:flex;align-items:center;justify-content:center;flex:0 0 auto;
      color:rgb(var(--acc-rgb));box-shadow:0 10px 22px rgba(2,6,23,.06)}
    .hzStepIco svg{width:26px;height:26px;display:block}
    .hzStepTitle{margin:12px 0 6px;font-weight:800;letter-spacing:-.01em}
    .hzStepDesc{margin:0;color:var(--mut);line-height:1.45}

    @media (min-width:981px){
      .hzStepsGrid .hzStep:nth-child(1)::after,
      .hzStepsGrid .hzStep:nth-child(2)::after,
      .hzStepsGrid .hzStep:nth-child(4)::after,
      .hzStepsGrid .hzStep:nth-child(5)::after{
        content:"";position:absolute;top:28px;right:-10px;width:20px;height:2px;
        background:rgb(var(--acc-rgb) / 0.20);border-radius:2px
      }
      .hzStepsGrid .hzStep:nth-child(1)::before,
      .hzStepsGrid .hzStep:nth-child(2)::before,
      .hzStepsGrid .hzStep:nth-child(4)::before,
      .hzStepsGrid .hzStep:nth-child(5)::before{
        content:"";position:absolute;top:24px;right:-2px;width:0;height:0;
        border-left:6px solid rgb(var(--acc-rgb) / 0.24);
        border-top:4px solid transparent;border-bottom:4px solid transparent;
      }
    }
/* Portfolio cards with mini-slider (механика слайдера как в кухнях-portfolio) */
    .pf__main, .hz-pf__main{position:relative;padding-top:68%;background:#eef2ff;overflow:hidden}
    .pf__main img, .hz-pf__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .18s ease, transform .35s ease}
    .card:hover .pf__main img, .hz-card:hover .hz-pf__main img{transform:scale(1.03)}
    .pf__main img.is-fade, .hz-pf__main img.is-fade{opacity:0}
    .pf__nav, .hz-pf__nav{
      position:absolute;top:50%;transform:translateY(-50%);
      width:44px;height:44px;border-radius:999px;border:none;
      background:rgba(79,70,229,.92);
      border:1px solid rgba(255,255,255,.25);
      box-shadow:0 16px 36px rgba(2,6,23,.22);
      opacity:0;pointer-events:none;transition:transform .16s ease, opacity .16s ease;
    }
    .card:hover .pf__nav, .hz-card:hover .hz-pf__nav{opacity:.98;pointer-events:auto}
    .pf__nav:hover, .hz-pf__nav:hover{transform:translateY(-50%) scale(1.06)}
    .pf__nav:active, .hz-pf__nav:active{transform:translateY(-50%) scale(.98)}
    .pf__prev, .hz-pf__prev{left:12px}
    .pf__next, .hz-pf__next{right:12px}
    .pf__nav:before, .hz-pf__nav:before{content:"";width:10px;height:10px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(135deg);display:block;margin:auto}
    .pf__next:before, .hz-pf__next:before{transform:rotate(-45deg)}
    @media (max-width:640px){.pf__nav{opacity:.98;pointer-events:auto;width:40px;height:40px}}
    .pf__thumbs, .hz-pf__thumbs{display:flex;gap:8px;padding:10px;overflow:auto;scrollbar-width:none;background:#fff;border-top:1px solid rgba(2,6,23,.06)}
    .pf__thumbs::-webkit-scrollbar, .hz-pf__thumbs::-webkit-scrollbar{display:none}
    .pf__t, .hz-pf__t{flex:0 0 54px;height:46px;border-radius:12px;overflow:hidden;border:1px solid rgba(2,6,23,.10);background:#fff;padding:0}
    .pf__t img, .hz-pf__t img{width:100%;height:100%;object-fit:cover;display:block}
    .pf__t.is-active, .hz-pf__t.is-active{border-color:rgba(var(--acc-rgb),.55);box-shadow:0 10px 22px rgba(var(--acc-rgb),.18)}
    .pf__t.a, .hz-pf__t.a{border-color:rgba(var(--acc-rgb),.55);box-shadow:0 10px 22px rgba(var(--acc-rgb),.18)}
    .pf__b, .hz-pf__b{padding:14px 14px 16px;display:grid;gap:10px}
    .hz-pf__head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
    .hz-pf__sub{color:var(--hz-muted);font-size:13px;line-height:1.35;margin-top:3px}
    .pf__name, .hz-pf__name{font-weight:800;line-height:1.14;letter-spacing:var(--ls-title)}
    .pf__tag, .hz-pf__tag{color:var(--mut);font-size:13px;line-height:1.35}
    .pf__meta, .hz-pf__meta{display:grid;gap:8px}
    .mrow{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
    .ic{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(2,6,23,.06)}
    .ic.c{background:rgba(var(--acc-rgb),.10);color:rgb(var(--acc-rgb))}
    .ic.f{background:rgba(var(--acc-rgb),.10);color:#4c1d95}
    .ic.h{background:rgba(245,158,11,.14);color:#92400e}
    .ic.c:before{content:"⬛"}
    .ic.f:before{content:"▤"}
    .ic.h:before{content:"⚙"}
    .ic.t{background:rgb(var(--acc-rgb) / .12);color:var(--acc2)}
    .ic.t:before{content:"▦"}
    .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(2,6,23,.55);line-height:1.05}
    .val{font-size:13.5px;font-weight:700;line-height:1.35}
    .foot, .hz-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .chip{padding:8px 12px;border-radius:999px;background:rgba(79,70,229,.08);border:1px solid rgba(79,70,229,.18);color:rgb(var(--acc-rgb));font-weight:800;font-size:12px}

    /* Advantages */
    .adv{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:14px}
    @media (max-width:980px){.adv{grid-template-columns:1fr}}

    /* Why HOLZCOM cards */
    .adv__list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      align-items:stretch;
    }
    @media (max-width:740px){.adv__list{grid-template-columns:1fr}}

    /* Make the last card span both columns (looks "balanced" like Kitchen). */
    @media (min-width:741px){
      .adv__list > .adv__item:last-child{ grid-column: 1 / -1; }
    }

    .adv__item{
      position:relative;
      display:flex;gap:14px;align-items:flex-start;
      padding:14px;border-radius:18px;
      background:var(--card);
      border:1px solid rgba(2,6,23,.06);
      box-shadow:var(--shadow2);
      overflow:hidden;
      height:100%;
      opacity:1;
      transform:none;
      transition:transform .28s ease, opacity .28s ease, box-shadow .22s ease, border-color .22s ease;
      will-change:transform;
    }
    .adv__item.is-inview{ opacity:1; transform:none; }
    .adv__item::before{
      content:"";position:absolute;inset:0;
      background:radial-gradient(circle at top left, rgb(var(--acc-rgb) / .10), transparent 60%);
      opacity:1;transition:opacity .28s ease;pointer-events:none
    }
    @media (hover: hover) and (pointer: fine){
      .adv__item:hover::before{opacity:1}
      .adv__item:hover{
        transform:translateY(-2px);
        box-shadow:0 18px 44px rgba(2,6,23,.10);
        border-color:rgb(var(--acc-rgb) / 0.16);
      }
    }

    
    /* SVG draw animation is prepared via JS (stroke-dasharray/offset + per-path delays).
       Here we only define base stroke style. */
    .adv__ico svg{width:22px;height:22px}
    .adv__ico svg .s{
      fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
      vector-effect:non-scaling-stroke;
      opacity:0.96;
    }

.adv__ico{
      width:44px;height:44px;border-radius:12px;flex:0 0 44px;
      display:grid;place-items:center;
      background:rgb(var(--acc-rgb) / .10);
      border:1px solid rgb(var(--acc-rgb) / .16);
      color:rgb(var(--acc-rgb));
    }
    .adv__ico svg{width:22px;height:22px;display:block}
    .adv__ico .s{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

    .adv__h{margin:0 0 5px;font-weight:800}
    .adv__t{margin:0;color:var(--mut);line-height:1.55;font-size:14px}

    .ctaCard{
      background:linear-gradient(180deg, rgba(var(--acc-rgb),.10), rgba(79,70,229,.05));
      border:1px solid rgba(79,70,229,.16);
      border-radius:22px;padding:16px;box-shadow:var(--shadow2)
    }
    .ctaCard__t{margin:0 0 6px;font-weight:900}
    .ctaCard__s{margin:0 0 12px;color:var(--mut);line-height:1.55}
    .ctaCard__row{display:flex;gap:10px;flex-wrap:wrap}

/* Contact */
    .contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:14px}
    @media (max-width:980px){.contact{grid-template-columns:1fr}}
    .cbox{background:#fff;border:1px solid rgba(2,6,23,.06);border-radius:18px;padding:16px;box-shadow:var(--shadow2)}
    .ci{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;background:#f9fafb;border:1px solid rgba(2,6,23,.06)}
    .ci__l{font-size:12px;color:var(--mut);margin-bottom:2px}
    .ci__v{font-weight:800;margin:0}
    .note{font-size:12px;color:var(--mut);margin-top:10px;line-height:1.45}

    /* Dock */
    .dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:var(--zi-dock);transition:transform .28s ease, opacity .28s ease}

    .dock.hide{transform:translateX(-50%) translateY(100px);opacity:0;pointer-events:none}
    .dock__in{
      display:flex;gap:10px;align-items:center;
      padding:8px 14px;border-radius:16px;
      background:rgba(10,12,20,.60);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border:1px solid rgba(255,255,255,.15);box-shadow:var(--hz-dock-shadow)
    }

    /* Desktop: dock can look "too small" on wide screens — give it a comfortable max width and padding */
    @media (min-width: 1200px){
      .dock__in{padding:10px 18px;max-width:640px;width:max-content;}
      .dock__a{padding:10px 16px;font-size:12px;}
    }
    .dock__a{
      display:inline-flex;align-items:center;gap:8px;justify-content:center;
      padding:9px 14px;border-radius:999px;text-decoration:none;
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
      color:#fff;font-weight:800;font-size:11px;white-space:nowrap;
      transition:transform .16s ease, opacity .16s ease
    }
    .dock__a:hover{transform:translateY(-1px);opacity:.98;background:rgba(255,255,255,.14)}
    .dock__a svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .dock__a--call{background:rgba(79,70,229,.22);border-color:rgba(79,70,229,.28)}
    .dock__a--tg{background:rgba(34,158,217,.22);border-color:rgba(34,158,217,.28)}
    @media (max-width:520px){.dock{bottom:10px}.dock__a span{display:none}}

/* Touch devices: avoid sticky :hover states (iOS) */
@media (hover: none){
  .dock__a:hover{transform:none;opacity:1;background:rgba(255,255,255,.10)}
  .hzH-btn:hover{transform:none;}
}

    /* Simple modal gallery (optional) */
    .mic{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.04)}
    .mic.t{background:rgba(59,130,246,.10);color:#2563eb}
    .mic.f{background:rgba(245,158,11,.12);color:#b45309}
    .mic.t:before{content:"▦"}
    .mic.f:before{content:"⚙"}
    .mlbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);line-height:1.1}
    .mval{font-size:12.5px;font-weight:800;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  
      .pf__series, .hz-pf__series{margin-top:6px;font-size:12px;opacity:.7}

    .hsl__sub, .hz-hsl__sub{margin-top:6px;font-size:13px;color:rgba(2,6,23,.76);font-weight:600}
    .hsl__sub2, .hz-hsl__sub2{margin-top:2px;font-size:12px;color:rgba(2,6,23,.60);max-width:46ch}


/* JS helper: lock scroll when mobile menu open */
.no-scroll{overflow:hidden}


.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* v2.4.2 SAFETY: hz-only classes mapping (keeps behavior even if some alias rule missed) */
.hz-hdr{ }
.hz-hdr.is-open .hz-hdr__nav{ }
.hz-hsl{ }
.hz-series{ }
.hz-series__btn{ }
.hz-card{ }
.hz-pf__main{ }
.hz-pf__b{ }
.hz-pf__t{ }
.hz-foot{ }
.hz-tag{ }
.hz-btn{ }
.hz-btn--sm{ }
.hz-navbtn{ }
.hz-m__t{ }


/* v2.4.3 UX tweaks */
.note .hz-btn{margin-top:15px;}
.hz-modal__main-img{max-height:50vh;}


/* v2.4.4 UI */
.seriesNav__prog, .hz-seriesNav__prog{height:3px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;margin:10px 0 0;}
.seriesNav__progbar, .hz-seriesNav__progbar{height:100%;width:0%;background:var(--acc);transition:width .25s ease;}
.hz-linklike{border:0;background:transparent;padding:0;margin:0;text-align:left;color:inherit;}
.hz-linklike:hover{text-decoration:underline;}
@media (hover: hover) and (pointer: fine){
  .hz-card:active{ transform: scale(.98); }
}


/* v2.4.7 REVIEWS slider (real images) */
.hz-rev{position:relative}
.hz-rev__track{
  display:flex;
  gap:12px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding:4px 44px;
  scrollbar-width:none;
}
.hz-rev__track::-webkit-scrollbar{display:none}

.hz-revCard{
  min-width:min(360px,82vw);
  scroll-snap-align:start;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);
  padding:16px;
  overflow:hidden;
}
.hz-revCard__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.hz-revCard__name{font-weight:900}
.hz-revCard__txt{
  color:var(--mut);
  margin-top:10px;
  line-height:1.5;
}
.hz-rev__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.30);
  color:var(--txt);
}
.hz-rev__nav--prev{left:6px}
.hz-rev__nav--next{right:6px}


/* v2.5.0 PORTFOLIO slider parity (kitchens sample) */
.hz-pf__mainBtn{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:pointer}
.hz-pfMore{grid-column:1/-1;display:flex;justify-content:center;margin-top:8px}

/* ===== PORTFOLIO CARDS (sample like kitchens) ===== */
.hz{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
  color:#111827;
  --g:#19a463;
  --hz-card-radius:24px;
  --hz-card-pad:22px;
  --hz-title:clamp(20px,2.15vw,24px);
  --hz-tag:14px;
  --hz-muted-1:rgba(2,6,23,.68);
  --hz-muted-2:rgba(2,6,23,.56);
}
/* Section shell */
.hz .sec{max-width:var(--max);margin:0 auto;padding:0 20px}
@media (max-width:640px){.hz .sec{margin:0 auto 34px;padding:0 16px}}
.hz .box{
  background:radial-gradient(circle at top left,#f9fcff,#f5f7fa);
  border-radius:24px;
  padding:26px 18px;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 45px rgba(0,0,0,.06)
}
.hz .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hz .badge{display:inline-flex;gap:8px;align-items:center;padding:3px 10px;border-radius:999px;background:rgba(25,164,99,.08);color:var(--g);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.hz h2{margin:0;font-size:28px;font-weight:800;line-height:1.15}
.hz .sub{max-width:520px;color:#6b7280;font-size:14px;line-height:1.5}
.hz .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:980px){.hz .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.hz .grid{grid-template-columns:1fr}.hz .box{padding:20px 14px}}

/* Card base (align with кухни-эталон по мягкости/радиусу/отступам) */
.hz .card{
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius:var(--hz-card-radius);
  overflow:hidden;
  box-shadow:0 14px 34px rgba(2,6,23,.06);
  display:flex;flex-direction:column;height:100%;
  position:relative;
}
.hz .card::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at top left, rgb(var(--acc-rgb) / .10), transparent 60%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
.hz .card:hover::before{opacity:1}

/* ===== MAIN IMAGE ===== */
.hz .main{
  position:relative;
  padding-top:68%;
  background:#f3f4f6;
  overflow:hidden;
  cursor:zoom-in
}
.hz .main img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transition:opacity .18s ease,transform .28s ease
}
.hz .card:hover .main img{transform:scale(1.03)}
.hz .fade{opacity:0}

/* ===== NAV (hover, on mobile always) ===== */
.hz .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:999px;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:0;line-height:0;
  transition:transform .16s ease,filter .16s ease,opacity .16s ease;
  opacity:0;pointer-events:none;
  backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);
  z-index: 6; /* keep arrows above the favorites heart on small screens */
}
.hz .card:hover .nav,.hz .main:hover .nav{opacity:.96;pointer-events:auto}
.hz .nav:hover{transform:translateY(-50%) scale(1.06);filter:brightness(1.05)}
.hz .nav:active{transform:translateY(-50%) scale(.98)}
.hz .prev{left:12px}
.hz .next{right:12px}
.hz .nav::before{content:"";width:10px;height:10px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(135deg);display:block}
.hz .next::before{transform:rotate(-45deg)}
@media (max-width: 620px){.hz .nav{width:40px;height:40px;opacity:.96;pointer-events:auto}}

/* ===== THUMBS (миниатюры как у кухни: компактнее, мягче активное состояние) ===== */
.hz .thumbs{
  display:flex;gap:12px;
  padding:12px 14px;
  overflow-x:auto;
  border-top:1px solid rgba(2,6,23,.06);
  scrollbar-width:none;
  background:#fff
}
.hz .thumbs::-webkit-scrollbar{display:none}
.hz .t{
  flex:0 0 52px;
  height:44px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  padding:0;
  transition:transform .12s ease,border-color .12s ease
}
.hz .t img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .12s ease}
.hz .t:hover{transform:translateY(-1px)}
.hz .t:hover img{opacity:1}
.hz .t.a{
  border-color:rgb(var(--acc-rgb) / .38);
  box-shadow:none;
}

/* ===== CONTENT (типографика/ритм как в эталоне кухни) ===== */
.hz .b{
  padding:var(--hz-card-pad);
  flex:1;
  display:grid !important;
  row-gap:14px;
  align-content:start
}
.hz .name{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:fit-content;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(2,6,23,.03);
  color:rgba(15,23,42,.78);
  font-weight:700;
  font-size:12px;
  line-height:1.05;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hz .tag{
  color:var(--txt);
  font-weight:800;
  font-size:calc(var(--hz-title) - 2px);
  line-height:1.14;
  letter-spacing:-.02em;
  margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* top params line inside card (быстрые параметры) */
.hz .hzMParamLine{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin:2px 0 0;
  font-size:13px;
  color:var(--hz-muted-1);
  line-height:1.45
}
.hz .hzPL b{color:#111827}

/* feature list */
.hz .p{display:grid;gap:10px;align-content:start}
.hz .row{
  display:grid !important;
  grid-template-columns:40px 1fr;
  gap:10px;
  align-items:start
}
.hz .row > div:last-child{min-width:0}
.hz .ic{
  width:38px;height:38px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 10px 22px rgba(2,6,23,.04) inset
}
.hz .ic.t{background:rgb(var(--acc-rgb) / .12);color:var(--acc2)}
.hz .ic.c{background:rgba(59,130,246,.12);color:#2563eb}
.hz .ic.h{background:rgba(245,158,11,.14);color:#b45309}
.hz .ic.f{background:rgba(139,92,246,.14);color:rgb(var(--acc-rgb))}
.hz .ic.k{background:rgba(148,163,184,.16);color:#475569}
.hz .ic.f:before{content:"▤"}
.hz .ic.k:before{content:"◼"}
.hz .ic.t:before{content:"▦"}
.hz .ic.c:before{content:"⬛"}
.hz .ic.h:before{content:"⚙"}
.hz .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--hz-muted-2);line-height:1.1}
.hz .val{
  font-size:13px;
  font-weight:600;
  line-height:1.28;
  min-height:2.56em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}


/* modal: align icons + text, softer typography (kitchen canon) */
.hzM .p{gap:12px}
.hzM .row{display:flex !important;align-items:center;gap:12px}
.hzM .ic{flex:0 0 auto}
.hzM .lbl{opacity:.6}
.hzM .val{font-weight:600;min-height:auto;display:block;-webkit-line-clamp:unset;overflow:visible}
/* price + footer */
.hz .price{
  margin:0 !important;
  margin-top:2px;
  margin-bottom:-2px;
  font-weight:800;
  color:var(--acc2);
  align-self:start;
  font-size:clamp(18px,1.7vw,20px);
  letter-spacing:-.01em
}
.hz .foot{
  margin:0 !important;
  align-self:stretch;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}
.hz .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(25,164,99,.08);
  border:1px solid rgba(25,164,99,.18);
  color:#0e8b52;
  font-weight:800;
  font-size:13px;
  letter-spacing:-.005em
}
.hz .btn{
  border:none;
  border-radius:999px;
  height:48px;
  padding:0 22px;
  background:linear-gradient(135deg,#19a463,#0e8b52);
  color:#fff;
  font-weight:800;
  font-size:14.5px;
  box-shadow:0 12px 26px rgba(79,70,229,.22);
  min-width:220px;
  text-align:center;
  transition:transform .14s ease,filter .14s ease
}
.hz .btn:hover{transform:translateY(-1px);filter:brightness(1.02)}
.hz .btn:active{transform:translateY(0)}
/* ===== modal ===== */

/* ===== modal (Kitchen canon 1:1) ===== */
.hzM{
  position:fixed;
  inset:0;
  z-index:var(--zi-modal);
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.2s;
  padding:16px
}
.hzM.o{opacity:1;visibility:visible}
.hzD{
  /* Default desktop width is comfortable, but on iPad (1366px) 1100 looked too small.
     Use a wider cap while keeping safe gutters. */
  width:min(1240px, calc(100vw - 32px));
  max-height:calc(92vh - env(safe-area-inset-bottom, 0px));
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding-bottom:env(safe-area-inset-bottom, 0px)
}

/* Tablet polish: keep modal large and centered on iPad landscape */
@media (min-width: 921px) and (max-width: 1400px){
  .hzD{ width:min(1240px, 94vw); max-height: 90vh; }
}

/* ===== v4.0.4 STABILITY: lock modal layout ===== */
.hzD{align-items:stretch;}
.hzG,.hzC{min-height:0;}
.hzC{display:flex;flex-direction:column;overflow:hidden;}
.hzCScroll{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:22px 22px 18px;
  scrollbar-width:thin; scrollbar-color: rgba(var(--acc-rgb)/.85) transparent;
}
.hzCScroll::-webkit-scrollbar{width:8px;height:8px;}
.hzCScroll::-webkit-scrollbar-thumb{background:rgba(var(--acc-rgb)/.55);border-radius:999px;border:2px solid transparent;background-clip:content-box;}
.hzCScroll::-webkit-scrollbar-track{background:transparent;}
.hzCFooter{flex:0 0 auto;background:#fff;border-top:1px solid rgba(2,6,23,.06);padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));} 
.hzCFooter .hzBtns{display:flex;gap:12px;flex-wrap:wrap;}
.hzCFooter .hzBtns .btn{flex:1 1 240px;}
.hzCFooter .hzDecFt{display:flex;gap:10px;margin-top:10px;}
.hzCFooter .hzDecFt a{flex:1 1 auto;}

@media(max-width:920px){
  .hzM{padding:0}
  /* Mobile/tablet portrait: make modal a two-block vertical layout.
     IMPORTANT: the info column must stretch so the footer is always visible.
     Grid rows + align-items:start caused the footer to "fall out" on some iPhone heights. */
  .hzD{
    border-radius:0;
    max-height:100vh;
    height:100vh;
    width:100vw;
    max-width:100vw;
    display:flex;
    flex-direction:column;
  }
  .hzG{background:#fff;flex:0 0 auto;}
  .hzC{flex:1 1 auto;min-height:0;background:#fff;overflow:hidden;}
  .hzGM{background:#0b0d10;aspect-ratio:auto;height:clamp(260px, 46vh, 520px);}
  .hzX{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 10px);
    right:10px;
    z-index:9999;
    width:40px;height:40px;
  }


  .hzCScroll{padding:18px 16px 18px;}
  .hzMeta{padding-top:2px;}
  .hzC{background:#fff;overflow-x:hidden;}
  .hzC .row{display:grid;grid-template-columns:44px 1fr;gap:10px 12px;align-items:start;padding:8px 0;}
  .hzC .row > div:last-child{min-width:0;}
  .hzC .ic{width:40px;height:40px;border-radius:12px;}
  .hzC .val{overflow-wrap:anywhere;word-break:break-word;}

  .hzC .lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,23,42,.58);line-height:1.25;margin-bottom:2px;}

  .hzC .val{font-size:15px;line-height:1.55;font-weight:600;color:#0f172a;overflow-wrap:anywhere;word-break:break-word;}

  /* v4.2.18: mobile modal readability */
  .hzC .ttl{font-size:20px;line-height:1.25;font-weight:850;}
  .hzC .tg{font-size:15px;line-height:1.65;}
  .hzC .mm{font-size:14px;line-height:1.7;}
  .hzC .p{gap:12px;margin-top:10px;}
  .hzC .row{padding:10px 0;}


}

/* v4.5.4 — iPhone modal bottom: keep action area visible, respect safe-area
   Symptom: bottom buttons partly clipped on iPhone heights.
   Solution: make action rows sticky in the scroll column.
*/
@media (max-width:920px){
  .hzM .hzC .hzBtns,
  .hzM .hzC .hzDecFt{
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(2,6,23,.06);
  }
  .hzM .hzC .hzDecFt{display:flex;gap:10px;justify-content:space-between;}
  .hzM .hzC .hzDecFt a{flex:1 1 auto;}
}

/* v4.6.0 — iPhone modal: avoid sticky overlap + keep CTA visible without clipping
   Problem: sticky .hzBtns + sticky .hzDecFt can overlap on small iPhone heights.
   Solution:
   - Keep primary CTA block (.hzBtns) sticky.
   - Make secondary links (.hzDecFt) non-sticky on mobile.
   - Add extra bottom padding to the scroll column so content never hides under sticky CTA.
*/
@media (max-width:920px){
  .hzM .hzCScroll{ padding-bottom: 18px !important; }
  .hzM .hzC .hzBtns{ position: static; }
  .hzM .hzC .hzDecFt{
    position: static;
    padding: 10px 0 0;
    border-top: none;
  }
}



/* v4.8.8 — Modal footer refactor (hzCScroll + hzCFooter)
   We no longer rely on sticky hzBtns inside the scroll column.
   Disable previous sticky/padding overrides that caused CTA clipping on some heights.
*/
@media (max-width:920px){
  .hzM .hzC{ padding-bottom: 0 !important; }
  .hzM .hzC .hzBtns,
  .hzM .hzC .hzDecFt{
    position: static !important;
    bottom: auto !important;
    background: transparent !important;
    padding: 0 !important;
    border-top: none !important;
  }
  .hzCFooter{ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* v4.6.0 — HERO topbar: prevent phone CTA from breaking layout on narrow iPhones
   On very small widths we show the icon-only call button.
*/
@media (max-width: 720px){
  .hzH-actions a[aria-label="Позвонить"]{
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 520px){
  .hzCFooter .hzBtns{flex-direction:column;}
  .hzCFooter .hzBtns .btn{flex:1 1 auto;width:100%;} 
  .hzCFooter .hzDecFt{flex-direction:column;}
  .hzCFooter .hzDecFt a{width:100%;}
}
@media (max-width:920px){
  .hzCScroll{padding:16px 16px 16px;}
  .hzCFooter{padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));}
}
@media (max-width: 560px){
  .hzH-actions a[aria-label="Позвонить"]{
    min-width: 44px;
    width: 44px;
    padding: 0 12px;
    justify-content: center;
    gap: 0;
    font-size: 0;          /* hide text, keep SVG */
    white-space: nowrap;
  }
  .hzH-actions a[aria-label="Позвонить"] svg{ width:18px; height:18px; }
}
.hzG{background:#fff;position:relative;display:flex;flex-direction:column;}
.hzX{
  position:absolute;
  top:calc(12px + env(safe-area-inset-top, 0px));right:calc(12px + env(safe-area-inset-right, 0px));
  z-index:6;
  width:38px;height:38px;
  border:none;border-radius:999px;
  background:rgba(255,255,255,.95);
  font-size:20px;font-weight:800;
  cursor:pointer
}
.hzPr{
  position:absolute;
  top:12px;left:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  font-weight:800;
  font-size:12px
}
.hzGM{aspect-ratio:4/3;overflow:hidden;position:relative}
.hzGM img{width:100%;height:100%;object-fit:cover;display:block}

/* modal nav (wardrobes extension, styled like Kitchen arrows) */
.hzNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:999px;
  background:rgba(17,24,39,.55);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;line-height:0;
  transition:transform .16s ease,filter .16s ease,opacity .16s ease;
  opacity:.96;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px)
}
.hzNav.prev{left:14px}
.hzNav.next{right:14px}
.hzNav::before{
  content:"";
  width:10px;height:10px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(135deg);
  display:block
}
.hzNav.next::before{transform:rotate(-45deg)}
.hzNav:focus-visible{outline:2px solid rgba(var(--acc-rgb)/.65);outline-offset:2px}
.hzNav:active{transform:translateY(-50%) scale(.98)}


@media (hover: hover) and (pointer: fine){
  .hzNav:hover{transform:translateY(-50%) scale(1.06);filter:brightness(1.05)}
  .hzT button:hover{border-color:rgba(var(--acc-rgb)/.75);transform:translateY(-1px)}
  .hzT button:hover img{opacity:.98}
}

.hzT{
  display:flex;
  gap:8px;
  padding:10px 14px;
  background:#fff;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid #f0f2f6;
  scrollbar-width:none
}
.hzT::after{
  content:"";
  flex:0 0 14px;
}
.hzT::-webkit-scrollbar{display:none}
.hzT button{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  flex:0 0 74px;
  height:54px;
  border-radius:10px;           /* FIX: no ovals */
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  background:transparent;
  padding:0
}
.hzT button{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}

.hzT img{width:100%;height:100%;object-fit:cover;display:block}
.hzT button.a, .hzT button.active{border-color:#19a463}
.hzT button:focus-visible{outline:2px solid rgba(var(--acc-rgb)/.65);outline-offset:2px}

.hzC{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.hzC .ttl{font-size:18px;font-weight:750;line-height:1.22;letter-spacing:-.01em}
.hzC .tg{color:#6b7280;font-size:14px;line-height:1.5}
.hzC .mm{color:#374151;font-size:13px;line-height:1.65}
/* modal params layout (kitchen-like spacing) */
.hzC .p{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:8px;
}
.hzC .p .row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  column-gap:12px;
  align-items:flex-start;
  padding:2px 0;
}
.hzC .p .row > div:last-child{min-width:0}
.hzC .p .val{margin-top:3px;line-height:1.45}
@media (max-width: 720px){
  .hzC{padding:16px 16px 18px;gap:12px}
  .hzC .p{gap:14px}
  .hzC .ttl{font-size:17px}
  .hzC .tg{line-height:1.65}
}

.hzC .lbl{opacity:.6;font-size:12px;font-weight:600;letter-spacing:.02em}
.hzC .val{font-weight:600;color:#111827}
.hzMetaRow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.hzMetaRow .lbl{min-width:36px}
.hzC .act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* v4.2.14 — Modal typography & spacing polish */
.hzC .hzI{display:flex;flex-direction:column;flex:1;min-height:0}
.hzC .ttl{margin:0 0 2px}
.hzC .sub{margin:0 0 10px}
.hzC .p{margin-top:14px}
.hzC .p .row{padding:6px 0}
.hzC .lbl{margin:0 0 2px}
.hzC .val{font-size:14.5px;line-height:1.6}
.hzC .act{margin-top:auto;padding-top:14px}
.hzC .b2{
  border:1px solid #e6eaf2;
  background:#fff;
  color:#111827;
  border-radius:999px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(0,0,0,.06)
}
.hzC .cta{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  background:linear-gradient(135deg,#19a463,#0e8b52);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--cta-shadow);
  text-decoration:none
}
.hzC .cta:active{transform:translateY(0);box-shadow:var(--cta-shadow-active)}
.hzTo{
  position:absolute;
  bottom:14px;left:14px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(17,24,39,.92);
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  opacity:0;
  transform:translateY(6px);
  transition:.18s;
  pointer-events:none
}
.hzTo.s{opacity:1;transform:translateY(0)}

.hzDecM{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.62);backdrop-filter:saturate(140%) blur(6px);z-index:9999;opacity:1;transition:opacity var(--t) ease;}
.hzDecM[aria-hidden="true"]{pointer-events:none;opacity:0;}
.hzDecD{width:min(920px, 96vw);max-height:min(82vh, 760px);overflow:auto;background:var(--card);border:1px solid rgba(var(--text-rgb)/.10);border-radius:18px;box-shadow:0 30px 110px rgba(0,0,0,.35);padding:18px 18px 16px;position:relative;}
.hzDecC{position:absolute;right:12px;top:10px;width:38px;height:38px;border-radius:12px;border:1px solid rgba(var(--text-rgb)/.10);background:rgba(255,255,255,.02);color:rgba(var(--text-rgb)/.86);font-size:22px;line-height:1;transition:background var(--t) ease, border-color var(--t) ease, transform var(--t) ease;}
.hzDecC:hover{transform:translateY(-1px);border-color:rgba(var(--text-rgb)/.18);background:rgba(255,255,255,.04);}
.hzDecHd{display:flex;gap:12px;align-items:center;padding-right:44px;}
.hzDecLogo{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(var(--acc-rgb)/.16), rgba(var(--brand-rgb)/.14));border:1px solid rgba(var(--text-rgb)/.08);font-weight:800;font-size:12px;letter-spacing:.3px;}
.hzDecK{font-size:12px;font-weight:800;letter-spacing:.25px;color:rgba(var(--text-rgb)/.62)}
.hzDecH{font-size:18px;font-weight:800;line-height:1.15}
.hzDecBody{margin-top:14px;}
.hzDecGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media (max-width: 820px){.hzDecGrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 520px){.hzDecGrid{grid-template-columns:1fr;}}
.hzDecItem{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid rgba(var(--text-rgb)/.08);border-radius:16px;background:rgba(255,255,255,.02);transition:transform var(--t) ease, border-color var(--t) ease;}
.hzDecItem:hover{transform:translateY(-1px);border-color:rgba(var(--text-rgb)/.14);}
.hzDecSw{width:68px;height:68px;border-radius:10px;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 24px rgba(15,23,42,.08) inset;}
.hzDecSw--big{width:180px;height:180px;border-radius:18px;}
.hzDecMeta{min-width:0}
.hzDecCode{font-weight:800;font-size:13px;letter-spacing:.2px}
.hzDecName{margin-top:4px;font-weight:800;font-size:14px;line-height:1.25}
.hzDecGrp{margin-top:6px;font-size:12px;color:rgba(var(--text-rgb)/.62)}
.hzDecFt{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:14px;flex-wrap:wrap;}
.hzDecBtn{padding:12px 14px;border-radius:10px;}
.hzDecBtn2{padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(var(--text-rgb)/.10);color:rgba(var(--text-rgb)/.88);}
.hzDecEmpty2{padding:18px;border:1px dashed rgba(var(--text-rgb)/.18);border-radius:16px;color:rgba(var(--text-rgb)/.72);background:rgba(255,255,255,.02);}

/* Brand pages */
.hzMain{padding-top:72px;}
.hzDecPageTop{padding-top:26px;}
.hzDecPageHd{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;}
@media (max-width: 720px){.hzDecPageHd{grid-template-columns:1fr;}}
.hzDecPageLogo{width:140px;height:140px;border-radius:28px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(var(--acc-rgb)/.18), rgba(var(--brand-rgb)/.16));border:1px solid rgba(var(--text-rgb)/.08);font-weight:800;letter-spacing:.4px;}
.hzH1{font-size:clamp(26px, 3.0vw, 40px);line-height:1.05;margin:0;font-weight:800;}
.hzLead{margin:10px 0 0;color:rgba(var(--text-rgb)/.72);max-width:64ch}
.hzDecPageCta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

.hzDecTools{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
.hzDecInput{width:min(420px, 92vw);padding:12px 12px;border-radius:10px;border:1px solid rgba(var(--text-rgb)/.12);background:rgba(255,255,255,.02);color:rgba(var(--text-rgb)/.92);outline:none}
.hzDecInput:focus{border-color:rgba(var(--acc-rgb)/.42);box-shadow:0 0 0 4px rgba(var(--acc-rgb)/.12);}
.hzDecChips{display:flex;gap:8px;flex-wrap:wrap}
.hzChip{padding:10px 12px;border-radius:999px;border:1px solid rgba(var(--text-rgb)/.10);background:rgba(255,255,255,.02);color:rgba(var(--text-rgb)/.84);font-weight:800;font-size:12px;transition:transform var(--t) ease, border-color var(--t) ease, background var(--t) ease;}
.hzChip:hover{transform:translateY(-1px);border-color:rgba(var(--text-rgb)/.16);}
.hzChip.is-active{border-color:rgba(var(--acc-rgb)/.40);background:rgba(var(--acc-rgb)/.10);color:rgba(var(--text-rgb)/.92);}

.hzDecCatalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media (max-width: 980px){.hzDecCatalog{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 520px){.hzDecCatalog{grid-template-columns:1fr;}}
.hzDecTile{display:flex;gap:12px;align-items:flex-start;text-align:left;border:1px solid rgba(var(--text-rgb)/.08);background:rgba(255,255,255,.02);border-radius:16px;padding:12px;transition:transform var(--t) ease, border-color var(--t) ease, box-shadow var(--t) ease;}
.hzDecTile:hover{transform:translateY(-2px);border-color:rgba(var(--text-rgb)/.14);box-shadow:0 18px 46px rgba(15,23,42,.10);}
.hzDecSw2{width:54px;height:54px;border-radius:10px;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 24px rgba(15,23,42,.08) inset;flex:0 0 auto}
.hzDecTile__t{display:flex;flex-direction:column;min-width:0}
.hzDecTile__code{font-weight:800;font-size:13px;letter-spacing:.2px}
.hzDecTile__name{margin-top:3px;font-weight:850;font-size:14px;line-height:1.2}
.hzDecTile__grp{margin-top:6px;font-size:12px;color:rgba(var(--text-rgb)/.62)}
.hzDecEmpty{padding:16px;border:1px dashed rgba(var(--text-rgb)/.18);border-radius:16px;color:rgba(var(--text-rgb)/.72);background:rgba(255,255,255,.02);}

/* Reveal */
.hz-reveal{opacity:0;transform:translateY(10px);transition:opacity 420ms ease, transform 420ms ease;}
.hz-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .hz-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}


/* ============================
   v3.6.0 — KITCHEN DESIGN TOKENS + HERO/GALLERY CANON
   Goal: wardrobes landing visually matches kitchen.holzcom-mebel.ru baseline
   ============================ */

:root{
  /* keep old vars; add missing aliases used across blocks */
  --text-rgb: 11 18 32; /* equals --txt */
  --mut-rgb: 107 114 128;
  --ring: rgba(var(--acc-rgb)/.16);
  --ring2: rgba(var(--acc-rgb)/.10);
  --pad: 24px;
  --pad-sm: 16px;
}

/* site container */
.wrap{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
@media (max-width: 720px){
  .wrap{padding:0 var(--pad-sm);}
}

/* sections */
.hz-sec{
  padding:56px 0;
}
@media (max-width: 720px){
  .hz-sec{padding:42px 0;}
}
.secHd{margin:0 0 18px;}
.secT{font-size:clamp(26px, 3.0vw, 38px);line-height:1.1;margin:0;font-weight:800;letter-spacing:-0.02em;}
.secS{margin:10px 0 0;color:rgba(var(--text-rgb)/.70);max-width:70ch;}

/* ===== HERO (Topbar + Gallery) ===== */
.hzH{
  position:relative;
  overflow:hidden;
  min-height:0;
  padding:22px 0 18px;
}
.hzH-bg{
  position:absolute;inset:0;
  pointer-events:none;
}
.hzH-bg::before{
  content:"";
  position:absolute;inset:-2px;
  background:
    radial-gradient(1200px 520px at 15% -10%, rgba(var(--acc-rgb)/.18), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(var(--acc2-rgb)/.14), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.94));
  z-index:1;
}
.hzH-bgImg{
  position:absolute;inset:-6%;
  width:112%;height:112%;
  object-fit:cover;
  opacity:.22;           /* make background visible (was effectively invisible) */
  filter:saturate(1.05) contrast(.98);
  transform:scale(1.03);
  z-index:0;
}
@media (prefers-reduced-motion: no-preference){
  .hzH-bgImg{transition:transform 10s linear;}
  .hzH[data-hz-playing="1"] .hzH-bgImg{transform:scale(1.08);}
}

.hzH-wrap{position:relative;z-index:2;}

.hzH-tb{margin:0 auto 18px;}
.hzH-tbIn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(231,234,241,.85);
  border-radius:999px;
  padding:10px 12px;
  box-shadow:0 14px 40px rgba(2,6,23,.08);
  backdrop-filter: blur(14px);
}
.hzH-brand{display:flex;align-items:center;gap:12px;min-width:220px;}
.hzH-logoImgWrap{
  width:42px;height:42px;border-radius:10px;
  background:rgba(var(--acc-rgb)/.10);
  border:1px solid rgba(var(--acc-rgb)/.18);
  display:grid;place-items:center;
  flex:0 0 auto;
}
.hzH-logoImg{width:26px;height:26px;display:block;}
.hzH-title{margin:0;font-weight:800;letter-spacing:-.01em;font-size:14px;line-height:1.1;}
.hzH-sub{margin:2px 0 0;color:rgba(var(--text-rgb)/.62);font-size:12px;line-height:1.2;}
.hzH-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

@media (max-width: 360px){
  .hzH-tbIn{padding:8px 10px;gap:10px;flex-wrap:wrap;}
  .hzH-brand{min-width:0;flex:1 1 auto;}
  .hzH-sub{display:none;}
  .hzH-actions{width:100%;justify-content:flex-start;gap:8px;}
  .hzH-btn{padding:9px 12px;font-size:12px;}
}
.hzH-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  background:#fff;border:1px solid rgba(231,234,241,.95);
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  color:rgba(var(--text-rgb)/.92);
  text-decoration:none;font-weight:800;
}
.hzH-btn svg{opacity:.9}
/* hover handled in @media (hover:hover) */
.hzH-btn--primary{
  background:linear-gradient(135deg, rgba(var(--acc-rgb)/1), rgba(var(--acc2-rgb)/1));
  color:#fff;border-color:transparent;
  box-shadow:var(--cta-shadow);
}
.hzH-btn--primary:active{transform:translateY(0);box-shadow:var(--cta-shadow-active)}
@media (prefers-reduced-motion: reduce){
  .hzH-btn:hover{transform:none;}
}

/* ================================
   HOVER ONLY ON DESKTOP POINTERS
   (no hover effects on touch)
================================ */
@media (hover: hover) and (pointer: fine){
  .btn:hover, .hz-btn:hover{transform:translateY(-0.5px);filter:brightness(1.01);opacity:.99}
  .promo__btn:hover{transform:translateY(-1px);opacity:.98}

  .hzH-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(2,6,23,.08);}
  .hzH-btn--primary:hover{transform:translateY(-1px);box-shadow:var(--cta-shadow-hover);filter:brightness(1.01)}

  .hzC .b2:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(2,6,23,.10)}
  .hzC .cta:hover{transform:translateY(-1px);box-shadow:var(--cta-shadow-hover);filter:brightness(1.01)}
}

/* hero card */

.hzH-in{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(231,234,241,.85);
  border-radius:var(--r-xl);
  box-shadow:0 22px 60px rgba(2,6,23,.10);
  backdrop-filter: blur(16px);
  padding:28px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
}
.hzH-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:rgba(var(--text-rgb)/.70);font-weight:800;font-size:12px;}
.hzH-kickerDot{width:10px;height:10px;border-radius:999px;background:rgba(var(--acc-rgb)/1);box-shadow:0 0 0 6px rgba(var(--acc-rgb)/.14);}
.hzH-kickerSep{opacity:.5}
.hzH-h1{margin:10px 0 0;}
.hzH-h1Main{display:block;font-size:clamp(30px, 3.4vw, 46px);line-height:1.05;font-weight:800;letter-spacing:-.03em;}
.hzH-h1Sub{display:block;font-size:clamp(28px, 3.0vw, 40px);line-height:1.08;font-weight:800;letter-spacing:-.03em;color:rgba(var(--text-rgb)/.92);}
.hzH-lead{margin:12px 0 0;color:rgba(var(--text-rgb)/.72);max-width:68ch;}
.hzH-points{margin:18px 0 0;display:grid;gap:10px;}
.hzH-point{display:flex;align-items:center;gap:10px;}
.hzH-ptI{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(var(--acc-rgb)/.10);border:1px solid rgba(var(--acc-rgb)/.18);
  color:rgba(var(--acc-rgb)/1);font-weight:800;
}
.hzH-ptT{font-weight:850;color:rgba(var(--text-rgb)/.90);}
.hzH-ctaRow{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.hzH-mini{margin-top:10px;display:flex;align-items:center;gap:10px;color:rgba(var(--text-rgb)/.70);font-weight:850;}
.hzH-mini b{color:rgba(var(--text-rgb)/.92);}
.hzH-miniI{font-size:18px;line-height:1}

/* ===== Gallery (hzHG) ===== */
.hzHG{display:flex;flex-direction:column;gap:12px;}
.hzHG-main{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  background:#000;
  aspect-ratio: 16/10;
  box-shadow:0 14px 34px rgba(2,6,23,.09);
}
.hzHG-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.96;}
.hzHG-progress{position:absolute;left:14px;right:14px;top:14px;height:6px;border-radius:999px;background:rgba(255,255,255,.22);backdrop-filter:blur(10px);z-index:3;overflow:hidden;}
.hzHG-bar{height:100%;width:0%;background:rgba(var(--acc-rgb)/1);border-radius:999px;}
.hzHG-cap{
  position:absolute;left:14px;right:14px;bottom:14px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  z-index:3;
}
.hzHG-name{
  color:#fff;font-weight:800;letter-spacing:-.01em;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.16);
  padding:10px 12px;border-radius:10px;backdrop-filter:blur(10px);
}
.hzHG-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.hzHG-props{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;margin-top:8px;max-width:560px}
.hzHG-prop{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);color:#fff;padding:6px 8px;border-radius:12px;font-size:12px;line-height:1.2;backdrop-filter:blur(10px)}
.hzHG-prop b{font-weight:900}

.hzHG-pill{
  background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.16);
  color:#fff;padding:8px 10px;border-radius:999px;font-weight:800;
  backdrop-filter:blur(10px);
}
.hzHG-nav{
  position:absolute;top:50%;
  width:44px;height:44px;border-radius:999px;border:none;
  transform:translateY(-50%);
  background:rgba(var(--acc-rgb)/1);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  z-index:3;
}
.hzHG-prev{left:12px;}
.hzHG-next{right:12px;}
.hzHG-nav::before{
  content:"";
  position:absolute;inset:0;
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.22));
}
.hzHG-prev::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 6l-6 6 6 6' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.hzHG-next::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 6l6 6-6 6' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.hzHG-play{
  position:absolute;right:14px;top:32px;
  width:40px;height:40px;border-radius:999px;border:none;
  background:rgba(255,255,255,.88);
  color:rgba(var(--text-rgb)/.92);
  display:grid;place-items:center;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  z-index:4;
}
.hzHG-thumbs{
  display:flex;gap:10px;flex-wrap:nowrap;justify-content:center;
  overflow-x:auto; padding:2px 2px 6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.hzHG-thumbs::-webkit-scrollbar{display:none;}

/* HERO thumbnail button (Kitchen-canon) */
.hzHG-th{
  appearance:none;
  border:1px solid rgba(2,6,23,.10);
  background:#000;
  padding:0;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  flex:0 0 auto;
  width:96px;
  height:64px;
  box-shadow:0 10px 24px rgba(2,6,23,.07);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
@media (hover: hover) and (pointer: fine) and (pointer:fine){
  .hzHG-th:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(2,6,23,.10);}
  .hzHG-th:active{transform:translateY(0);}
}

.hzHG-th:focus-visible{
  outline:2px solid rgba(118,77,255,.65);
  outline-offset:2px;
}
.hzHG-th img{width:100%;height:100%;object-fit:cover;display:block;opacity:.95;}
.hzHG-th.is-active{border-color:rgba(var(--acc-rgb)/.95);box-shadow:0 0 0 4px rgba(var(--acc-rgb)/.12), 0 12px 26px rgba(2,6,23,.08);}
@media (max-width: 980px){
  .hzH-in{grid-template-columns:1fr; padding:22px;}
  .hzH-brand{min-width:unset;}
}
@media (max-width: 720px){
  .hzH-tbIn{border-radius:22px;}
  .hzH-actions{gap:8px;}
  .hzH-btn{padding:10px 12px;}
  .hzHG-nav{width:42px;height:42px;}
  .hzHG-main{aspect-ratio: 16/11;}
}

/* Decors block: fix alignment + cards grid */
.hzDec__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){ .hzDec__grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width: 520px){ .hzDec__grid{grid-template-columns:1fr;} }

.hzDecCard{
  border-radius:22px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(231,234,241,.85);
  box-shadow:0 14px 36px rgba(2,6,23,.08);
  backdrop-filter:blur(12px);
  padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.hzDecCard:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(2,6,23,.10);}
@media (prefers-reduced-motion: reduce){
  .hzDecCard{transition:none;}
  .hzDecCard:hover{transform:none;}
}
.hzDecCard__left{display:flex;align-items:center;gap:12px;min-width:0;}
.hzDecCard__logo{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(var(--acc-rgb)/.10);
  border:1px solid rgba(var(--acc-rgb)/.18);
  flex:0 0 auto;
}
.hzDecCard__logo img{width:28px;height:28px;object-fit:contain;display:block;}
.hzDecCard__txt{min-width:0;}
.hzDecCard__name{margin:0;font-weight:800;letter-spacing:-.01em;}
.hzDecCard__sub{margin:4px 0 0;color:rgba(var(--text-rgb)/.66);font-weight:800;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hzDecCard__cta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.hzDecBtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;border:1px solid rgba(231,234,241,.95);
  background:#fff;color:rgba(var(--text-rgb)/.92);
  font-weight:800;text-decoration:none;
}
.hzDecBtn--ghost{background:rgba(var(--acc-rgb)/.08);border-color:rgba(var(--acc-rgb)/.18);color:rgba(var(--acc-rgb)/1);}


/* v3.6.0 patch: map existing init.js markup to tokens */
.hzDecCard{align-items:stretch;}
.hzDecCard__link{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;
  flex:1 1 auto;min-width:0;
}
.hzDecCard__txt{min-width:0;}
.hzDecCard__name{font-weight:800;}
.hzDecCard__kind{margin-top:3px;color:rgba(var(--text-rgb)/.70);font-weight:800;font-size:12px;}
.hzDecCard__desc{margin-top:4px;color:rgba(var(--text-rgb)/.62);font-weight:800;font-size:12px;line-height:1.25;max-height:2.5em;overflow:hidden;}
.hzDecCard__actions{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:flex-end;}
.hzDecCard__btn,.hzDecCard__btn2{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(231,234,241,.95);
  background:#fff;color:rgba(var(--text-rgb)/.92);
  font-weight:800;text-decoration:none;
  white-space:nowrap;
}
.hzDecCard__btn2{background:rgba(var(--acc-rgb)/.08);border-color:rgba(var(--acc-rgb)/.18);color:rgba(var(--acc-rgb)/1);}
@media (max-width: 720px){
  .hzDecCard{flex-direction:column;}
  .hzDecCard__actions{flex-direction:row;justify-content:flex-start;align-items:center;}
}

/* Gallery thumbs class in JS is hzHG-t (+ 'a' for active) */
/* HERO muted when search returns no results */
.hzH.hzH--searchEmpty{opacity:.22; filter:saturate(.85) grayscale(.15); pointer-events:none;}


/* v3.7.5: if catalog failed, keep hero layout stable */
.hzH.is-no-catalog .hzH-thumbs{display:none !important;}
.hzH.is-no-catalog [data-hzh-thumbs]{display:none !important;}


/* v3.8.0: DESIGN-LOCK typography from kitchen (system stack) */
.hz, .hzM, .hzDecM, .hzH, .hzH *{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}

/* v3.8.0: HERO mobile cleanup (no overlapping bubbles, kitchen-like cap strip) */
@media (max-width: 560px){
  .hzH{padding:14px 0 12px;}
  .hzH-in{padding:16px;border-radius:22px;gap:14px;}
  .hzH-left{gap:12px;}
  .hzH-kicker{font-size:11px;}
  .hzH-h1{font-size:26px;line-height:1.1;}
  .hzH-lead{font-size:13px;line-height:1.45;}
  .hzH-ctaRow{flex-direction:column;align-items:stretch;}
  .hzH-ctaRow .hzH-btn{width:100%;justify-content:center;}
  .hzH-mess{justify-content:center;}
  .hzH-proof{justify-content:center;}
  .hzH-points{gap:8px;}
  .hzH-point{padding:10px 12px;border-radius:16px;}
  .hzHG-main{border-radius:18px;aspect-ratio: 4/5;}
  .hzHG-progress{left:10px;right:10px;top:10px;}
  .hzHG-nav{width:40px;height:40px;}
  /* move caption block below the image */
  .hzHG-cap{
    position:static;
    inset:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:8px;
    padding:10px 12px;
    background:#0b0d10;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .hzHG-name{
    background:transparent;
    border:none;
    padding:0;
    border-radius:0;
    backdrop-filter:none;
    font-weight:800;
    font-size:14px;
  }
  .hzHG-meta{justify-content:flex-start;}
  .hzHG-pill{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
  }
  .hzHG-props{margin-top:10px;}
  .hzHG-thumbs{padding:10px 10px 6px;}
}

/* v3.8.0: mobile thumbs as grid (hero + portfolio cards) */
@media (max-width: 560px){
  .hzHG-thumbs{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    overflow:visible;
    .hzHG-th{width:100%;height:64px;border-radius:12px;}
}
.hz .thumbs{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    overflow:visible;
    padding:12px;
  }
  .hz .t{
    flex:unset;
    width:100%;
    height:64px;
    border-radius:10px;
  }
}


/* v4.0.0: catalog pagination wrapper */
[data-hz-morewrap]{display:none;margin-top:16px;text-align:center}


/* Smooth scroll: account for fixed promo+header */
[id]{scroll-margin-top: calc(var(--promo-h,0px) + 92px);}

/* ===== v4.0.4 STABILITY: modal-open disables dock interactions ===== */
body.modal-open .dock{
  display:none;
}
body.modal-open .promo{
  pointer-events:none;
}

/* ===== v4.0.4 STABILITY: harden modal thumbs against global button radius ===== */
.hzM .hzT .hzTT{
  border-radius:10px;
  overflow:hidden;
}
.hzM .hzT .hzTT img{border-radius:0}


@media (max-width:560px){
  .hzHG-th{min-height:48px}
}

@media (prefers-reduced-motion: reduce){
  .hzHG-bar{transition:none !important;animation:none !important}
}


/* ===============================
   HERO CANON FIX (layout restore)
   =============================== */
.hzH-wrap{max-width:var(--max);margin:0 auto;padding:0 18px;position:relative;z-index:2;}
.hzH-tb{position:relative;top:auto;z-index:3;margin-bottom:14px;}
.hzH-tbIn{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 12px;border-radius:16px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 26px rgba(15,18,30,.06);
  backdrop-filter:saturate(1.05) blur(10px);
}
.hzH-brand{display:flex;align-items:center;gap:10px;min-width:0;}
.hzH-logoImgWrap{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(var(--acc-rgb)/.10);border:1px solid rgba(var(--acc-rgb)/.18);
}
.hzH-logoImg{width:22px;height:22px;display:block;object-fit:contain}
.hzH-brandTxt{min-width:0}
.hzH-title{font-weight:800;letter-spacing:-.01em;margin:0;line-height:1.05}
.hzH-sub{margin:2px 0 0;opacity:.72;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hzH-actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.hzH-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.80);
  color:var(--txt);font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 10px 24px rgba(15,18,30,.06);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
@media (hover: hover) and (pointer: fine) and (pointer:fine){
  .hzH-btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(15,18,30,.10);background:#fff}
}
.hzH-btn--primary{border-color:rgba(var(--acc-rgb)/.34);background:rgba(var(--acc-rgb)/.10);}
.hzH-btn--ghost{background:rgba(255,255,255,.60);}
.hzH-hero{border-radius:26px;background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 60px rgba(15,18,30,.08);
  overflow:hidden;
}
.hzH-in{display:grid;grid-template-columns:1.02fr .98fr;gap:18px;align-items:stretch;padding:18px;}
.hzH-left{padding:8px 6px 8px 8px;}
.hzH-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;opacity:.86}
.hzH-kickerDot{width:8px;height:8px;border-radius:999px;background:rgba(var(--acc-rgb)/.92);box-shadow:0 0 0 4px rgba(var(--acc-rgb)/.14)}
.hzH-kickerSep{opacity:.45}
.hzH-h1{margin:10px 0 10px;line-height:1.02;letter-spacing:-.03em}
.hzH-h1Main{display:block;font-size:44px;font-weight:900}
.hzH-h1Sub{display:block;font-size:34px;font-weight:800;opacity:.92}
.hzH-p{margin:10px 0 14px;opacity:.78;line-height:1.45;max-width:54ch}
.hzH-rational{margin:0 0 10px;opacity:.72;font-weight:600;font-size:14px;letter-spacing:.2px}
.hzH-points{display:grid;gap:10px;margin:12px 0 14px}
.hzH-point{display:flex;align-items:center;gap:10px}
.hzH-ptI{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;
  background:rgba(var(--acc-rgb)/.12);border:1px solid rgba(var(--acc-rgb)/.22);font-weight:900}
.hzH-ptT{font-weight:700;opacity:.92}
.hzH-ctaRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.hzH-mess{display:flex;align-items:center;gap:8px}
.hzH-messBtn{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:44px;
  padding:0 12px;border-radius:999px;border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.72);text-decoration:none;color:var(--txt);font-weight:800}
.hzH-proof{margin-top:10px;font-weight:700;opacity:.72;font-size:13px}
.hzH-proofLink{text-decoration:none;color:inherit}
@media (max-width: 980px){
  .hzH-in{grid-template-columns:1fr;gap:14px}
}

/* v4.8.0 PATCH — avoid duplicate contact rows on desktop:
   keep fixed header as the primary contact/navigation bar,
   keep HERO topbar only on tablet/mobile where header collapses.
   (No layout changes, just hide duplicated topbar.) */
@media (min-width: 921px){
  .hzH-tb{display:none !important;}
}

/* v4.8.0 PATCH — Phone modal must be full-bleed (but do not affect iPad mini).
   Previous wide breakpoints caused regressions. */
@media (max-width: 720px){
  .hzM{padding:0 !important; align-items:stretch !important; justify-content:stretch !important;}
  .hzD{width:100vw !important; max-width:100vw !important; border-radius:0 !important;
       height: 100vh;
       height: 100dvh !important; min-height: 100vh;
       height: 100dvh !important; max-height: 100vh;
       height: 100dvh !important;
       grid-template-columns:1fr !important;}
}
@supports (-webkit-touch-callout: none){
  @media (max-width: 720px){
    .hzD{height:-webkit-fill-available !important; min-height:-webkit-fill-available !important; max-height:-webkit-fill-available !important;}
  }
}

/* v4.8.0 PATCH — Steps section headings centered like WHY */
#steps .head{justify-content:center;align-items:center;text-align:center;}
#steps .head > div{margin:0 auto;}
#steps .pill{margin-left:auto;margin-right:auto;}
#steps .sub{margin-left:auto;margin-right:auto;}
#steps h2{margin-left:auto;margin-right:auto;}
@media (max-width: 560px){
  .hzH-h1Main{font-size:34px}
  .hzH-h1Sub{font-size:26px}
  .hzH-tb{top:6px}
  .hzH-tbIn{padding:9px 10px;border-radius:14px}
  .hzH-sub{display:none}
}

/* HERO thumbs tap targets */
@media (max-width: 560px){
  .hzHG-th{min-height:48px}
}

/* ===============================
   v4.8.17 — Mobile stability fixes
   - 320px: hero topbar wraps safely (no overlap)
   - modal buttons: stack on very small widths
   - favorites heart: avoid covering nav/buttons
   =============================== */
@media (max-width: 360px){
  .hzH-tbIn{flex-wrap:wrap; gap:10px;}
  .hzH-brand{min-width:0; flex:1 1 auto;}
  .hzH-actions{flex:1 1 100%; justify-content:space-between; flex-wrap:wrap;}
  .hzH-actions a[aria-label="Позвонить"]{max-width:100%;}

  .hzM .hzCFooter .hzBtns{flex-direction:column; align-items:stretch;}
  .hzM .hzCFooter .hzBtns > *{width:100%;}
}

@media (max-width: 520px){
  /* keep heart away from slider arrows on tiny screens */
  .hzFavBtn{ top:10px; right:10px; }
}


/* ===============================
   REVIEWS (slider + lightbox)
   =============================== */
.hzR{padding:18px;border-radius:26px;}
.hz-reviews{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;margin-top:14px;}
.hz-reviewCard{border-radius:18px;background:rgba(255,255,255,.84);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 40px rgba(15,18,30,.06);
  padding:14px 14px 12px;
}
.hz-reviewTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.hz-reviewName{font-weight:800;letter-spacing:-.01em;line-height:1.15}
.hz-reviewStars{display:inline-flex;gap:2px;opacity:.9;font-size:12px}
.hz-reviewText{opacity:.82;line-height:1.5;margin:0;font-size:14px}
.hz-reviews-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap}
.hz-reviews-yandex{display:flex;flex-direction:column;gap:6px;max-width:62ch}
.hz-reviews-yandex-label{font-weight:800;letter-spacing:-.01em}
.hz-reviews-yandex-text{opacity:.78;margin:0;line-height:1.45}
.hz-reviews-badge-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hz-reviews-rating-pill{display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(var(--acc-rgb)/.10);
  border:1px solid rgba(var(--acc-rgb)/.22);
  font-weight:800;
}
.hz-reviews-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;
  border-radius:999px;border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.72);text-decoration:none;color:var(--txt);font-weight:800;
  box-shadow:0 12px 30px rgba(15,18,30,.06);
}
@media (hover: hover) and (pointer: fine) and (pointer:fine){
  .hz-reviews-btn:hover{transform:translateY(-1px)}
}

/* shots slider */
.hz-revShots{margin-top:18px}
.hz-revShots-title{font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.hz-revShots-wrap{position:relative;display:flex;align-items:center;gap:10px}
.hz-revShots-track{display:flex;gap:10px;overflow:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 8px;scrollbar-width:none;flex:1;min-width:0}
.hz-revShots-track::-webkit-scrollbar{display:none}
.hz-revShot{flex:0 0 auto;width:220px;height:140px;border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 14px 30px rgba(15,18,30,.06);
  overflow:hidden;scroll-snap-align:start;position:relative;cursor:pointer
}
.hz-revShot img{width:100%;height:100%;object-fit:cover;display:block}
.hz-revShots-nav{width:40px;height:40px;border-radius:999px;border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.80);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
@media (hover: hover) and (pointer: fine) and (pointer:fine){
  .hz-revShots-nav:hover{transform:translateY(-1px)}
}
.hz-revShots-dots{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.hz-revDot{width:8px;height:8px;border-radius:999px;background:rgba(0,0,0,.18)}
.hz-revDot.is-active{background:rgba(var(--acc-rgb)/.92);box-shadow:0 0 0 4px rgba(var(--acc-rgb)/.14)}

/* lightbox */
.hz-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(10,12,20,.62);z-index:var(--zi-modal);
  padding:18px;
}
.hz-lightbox.is-open{display:flex}
.hz-lightbox-inner{position:relative;max-width:min(980px, 100%);max-height:min(86vh, 100%);
  width:100%;
  border-radius:22px;background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.26);
  overflow:hidden;
}
.hz-lightbox-img{width:100%;height:min(72vh, 720px);object-fit:contain;display:block;background:#0f111a}
.hz-lightbox-close{position:absolute;top:10px;right:10px;width:42px;height:42px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(15,18,30,.44);color:#fff;font-size:24px;line-height:1;cursor:pointer
}
.hz-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(15,18,30,.44);color:#fff;display:grid;place-items:center;cursor:pointer
}
.hz-lightbox-nav--prev{left:10px}
.hz-lightbox-nav--next{right:10px}
.hz-lightbox-counter{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  padding:6px 10px;border-radius:999px;
  background:rgba(15,18,30,.44);color:#fff;font-weight:800;font-size:12px;
  border:1px solid rgba(255,255,255,.22);
}
@media (max-width: 860px){
  .hz-reviews{grid-template-columns:1fr}
  .hz-revShot{width:180px;height:120px}
  .hz-lightbox-img{height:min(66vh, 560px)}
}



/* v4.2.0 — Skeleton cards */
.hzSk{pointer-events:none;}
.hzSkMain{height:180px;border-radius:18px;background:rgba(var(--text-rgb)/.06);position:relative;overflow:hidden;}
.hzSkB{padding:14px;display:grid;gap:10px;}
.hzSkLn,.hzSkBtn{height:12px;border-radius:999px;background:rgba(var(--text-rgb)/.06);position:relative;overflow:hidden;}
.hzSkBtn{height:40px;border-radius:14px;}
.hzSkLn.w60{width:60%;}
.hzSkLn.w40{width:40%;}
.hzSkLn.w80{width:80%;}
.hzSkLn.w55{width:55%;}
.hzSkMain::before,.hzSkLn::before,.hzSkBtn::before{content:'';position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);animation:hzSkSh 1.25s ease-in-out infinite;}
@keyframes hzSkSh{to{transform:translateX(120%);}}
@media (prefers-reduced-motion: reduce){.hzSkMain::before,.hzSkLn::before,.hzSkBtn::before{animation:none;}}


/* v4.2.28 — Skeleton → content morph (premium, no layout shift)
   - skeleton fades out while cards fade in
   - transform/opacity only (no reflow)
*/
.hzSk{transition:opacity 220ms var(--ease-fast, ease), transform 220ms var(--ease-fast, ease);}
.hzSk.hzSk--out{opacity:0;transform:scale(.985);}
.hzEnter{opacity:0;transform:translateY(6px);transition:opacity 260ms var(--ease-fast, ease), transform 260ms var(--ease-fast, ease);}
.hzEnter.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .hzSk,.hzEnter{transition:none !important;}
  .hzSk.hzSk--out{opacity:0;}
  .hzEnter{opacity:1;transform:none;}
}
@keyframes hzDraw{to{stroke-dashoffset:0}}


/* v4.2.14: catalog load-more visibility */
.hz-pfMoreWrap{display:flex;justify-content:center;margin:18px 0 28px;}
.hz-pfMoreWrap .hz-btn{min-width:220px;}
@media (max-width:768px){.hz-pfMoreWrap{margin:14px 0 96px;}}

/* v4.2.14 — layout & UX fixes (modal text spacing, WHY HOLZCOM, reviews underlay, hover) */
:root{
  --hz-accent-rgb: 26 164 99;
  --hz-accent: rgb(var(--hz-accent-rgb));
}

/* Hide any theme toggles on the public screen (if present) */
.hzThemeToggle,
.theme-toggle,
#themeToggle,
[data-hz-theme-toggle],
[data-theme-toggle]{
  display:none !important;
}

/* Modal: make right panel readable (less compressed) */
.hzD{
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
}
@media (max-width: 980px){
  .hzD{ grid-template-columns: 1fr; }
}
.hzC{
  padding: 26px 28px;
}
.hzC h3{
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hzC p,
.hzC .hzSub{
  line-height: 1.45;
}
.hzM{
  gap: 14px;
}
.hzM > div{
  gap: 10px;
}
.hzM .ic{
  width: 42px;
  height: 42px;
}
.hzM .txt{
  line-height: 1.35;
}
.hzB{
  gap: 12px;
}
.hzB .p{
  padding: 10px 14px;
}
.hzB .s{
  padding: 10px 14px;
}

/* WHY HOLZCOM: remove empty grid column that squeezed content to the left */
.adv{
  display:block;
}
.adv__list{
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}
@media (max-width: 820px){
  .adv__list{ grid-template-columns: 1fr; }
}

/* Reviews: add underlay/pad like other sections */
#reviews .box{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  padding: 28px;
}
@media (max-width: 820px){
  #reviews .box{ padding: 18px; border-radius: 22px; }
}

/* Steps: hover highlight like other interactive cards */
@media (hover:hover){
  .hzStep{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .hzStep:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15,23,42,.12);
    border-color: rgba(var(--hz-accent-rgb), .28);
  }
  .hzStep:hover .hzStepIco{
    transform: translateY(-1px);
    border-color: rgba(var(--hz-accent-rgb), .28);
    box-shadow: 0 10px 22px rgba(var(--hz-accent-rgb), .18);
  }
  .hzStepIco{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
}

/* ===============================
   v4.2.14 — Layout polish (orphans + reviews panel + modal width + svg draw)
   =============================== */

/* WHY HOLZCOM: grid that centers the last (orphan) card */
.adv__list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 360px));
  justify-content:center;
  gap:18px;
}
@media (min-width: 980px){
  .adv__list{ gap:24px; }
}
.adv__item{ width:100%; max-width:360px; }

/* STEPS: grid that centers orphan step */
.hzStepsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 360px));
  justify-content:center;
  gap:18px;
}
@media (min-width: 980px){
  .hzStepsGrid{ gap:24px; }
}
.hzStep{ width:100%; max-width:360px; }

/* Orphan card rule: if the last card is alone in the last row — center content */
.adv__item.is-orphan,
.hzStep.is-orphan{
  text-align:center;
}
.adv__item.is-orphan .adv__text,
.hzStep.is-orphan p{ margin-left:auto; margin-right:auto; }

/* Stronger hover (desktop) to match other blocks */
@media (hover:hover){
  .adv__item:hover,
  .hzStep:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .12);
    border-color: rgba(25, 164, 99, .35);
  }
  .adv__item:hover .adv__ico,
  .hzStep:hover .hzStepIco{
    box-shadow: 0 14px 34px rgba(25, 164, 99, .14);
    border-color: rgba(25, 164, 99, .22);
  }
}

/* REVIEWS: podlozhka must wrap content; HTML has no `.container` inside `.hzR`. */
#reviews{ padding: 72px 0; background: linear-gradient(135deg, rgba(25,164,99,.10), rgba(138,117,255,.10)); }
.hzR{
  background: #fff;
  border-radius: 28px;
  padding: 44px 40px;
  border: 1px solid rgba(92,108,160,.18);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .08);
}
@media (max-width: 720px){
  #reviews{ padding: 56px 0; }
  .hzR{ padding: 28px 18px; border-radius: 22px; }
}

/* WHY + STEPS: center rows when last row is not full (avoid "одна плитка слева") */
.adv__list{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.adv__item{
  flex: 0 1 360px;
  max-width: 380px;
}
@media (max-width: 520px){
  .adv__item{ flex-basis: 100%; max-width: 100%; }
}

.hzStepsGrid{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.hzStep{
  flex: 0 1 300px;
  max-width: 330px;
}
@media (min-width: 980px){
  /* make 4 steps fit on desktop more often */
  .hzStep{ flex-basis: 260px; max-width: 280px; }
}

/* MODAL: make the right panel wider (text not cramped) */
.hzC{ max-width: 1180px; grid-template-columns: 1fr 1fr; }
@media (max-width: 980px){
  .hzC{ max-width: 980px; }
}

/* SVG icons: ensure strokes are visible and draw animations work */
.adv__ico svg,
.hzStepIco svg{
  width: 22px;
  height: 22px;
  display:block;
}
.adv__ico svg .s,
.hzStepIco svg .s{
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Theme switch: hide on public screens (dev only via ?theme=1) */
.pf-themeSwitch{ display:none; }

/* Hover micro-interactions (desktop) */
@media (hover:hover) and (pointer:fine){
  .adv__item,
  .hzStep{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .adv__item:hover,
  .hzStep:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
    border-color: rgba(25,164,99,.28);
  }
  .adv__ico,
  .hzStepIco{
    transition: transform .22s ease, filter .22s ease;
  }
  .adv__item:hover .adv__ico,
  .hzStep:hover .hzStepIco{
    transform: scale(1.06);
    filter: drop-shadow(0 8px 18px rgba(25,164,99,.25));
  }
}

/* MODAL: give the text more breathing room on desktop */
@media (min-width: 900px){
  .hzC{
    grid-template-columns: 1fr 1fr;
    max-width: 1180px;
  }
  .hzD{ padding: 28px 28px 24px; }
  .hzD h3{ line-height: 1.15; }
  .hzMeta .row{ gap: 14px; }
  .hzMeta .row p{ line-height: 1.45; }
}

/* Hide theme toggle on production screen (can be enabled with ?theme=1) */
.pf-themeSwitch{ display:none; }

/* SVG icon draw animation (JS sets dash lengths, CSS gives paint) */
.adv__ico svg, .hzStepIco svg{ width: 22px; height: 22px; display:block; }
.adv__ico svg .s, .hzStepIco svg .s{
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset .9s ease;
}
@media (hover:hover){
  .adv__item:hover .adv__ico svg .s,
  .hzStep:hover .hzStepIco svg .s{ stroke-dashoffset: 0; }
}
/* =========================
   v4.2.14 — Reviews clean bg
   ========================= */

/* Убираем фоновую “ауру/градиент” секции */
#reviews{
  background: transparent !important;
}

/* Убираем “двойную подложку”, если .box тоже рисует фон */
#reviews .box{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Единая нормальная карточка-секция */
#reviews .box.hzR{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(16,24,40,.08) !important;
  box-shadow: 0 18px 60px rgba(16,24,40,.10) !important;
  border-radius: 28px !important;

  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 26px;
}

/* Чуть аккуратнее типографика внутри */
#reviews .hzR h2{ margin: 6px 0 10px; }
#reviews .hzR .lead{ max-width: 78ch; }

/* На узких — не душим паддинги */
@media (max-width: 640px){
  #reviews .box.hzR{ padding: 18px 14px; border-radius: 22px !important; }
}

/* =========================================
   v4.2.14 — Orphan tile centering (desktop)
   ========================================= */

/* WHY HOLZCOM grid */
.hzAdvGrid{
  display: grid;
  gap: 20px;
}

@media (min-width: 980px){
  .hzAdvGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hzAdvGrid.has-orphan .adv__item.is-orphan{
    grid-column: 2;              /* ровно по центру */
    justify-self: center;
    width: 100%;
    max-width: 520px;
    text-align: center;
  }
  .hzAdvGrid.has-orphan .adv__item.is-orphan *{
    text-align: center;
  }
}

@media (min-width: 640px) and (max-width: 979px){
  .hzAdvGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hzAdvGrid.has-orphan .adv__item.is-orphan{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 520px;
    text-align: center;
  }
}

/* STEPS grid */
.hzStepsGrid{
  display: grid;
  gap: 20px;
}

@media (min-width: 980px){
  .hzStepsGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hzStepsGrid.has-orphan .step__item.is-orphan{
    grid-column: 2;
    justify-self: center;
    width: 100%;
    max-width: 520px;
    text-align: center;
  }
  .hzStepsGrid.has-orphan .step__item.is-orphan *{
    text-align: center;
  }
}

@media (min-width: 640px) and (max-width: 979px){
  .hzStepsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hzStepsGrid.has-orphan .step__item.is-orphan{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 520px;
    text-align: center;
  }
}

/* v4.2.14 — button baseline polish */
.btn, .hz-btn{
  line-height: 1;
}

.btn svg, .hz-btn svg{
  display: block;
}

/* =====================================
   v4.2.14 — Modal typography & spacing
   ===================================== */

.hzC .hzI{
  gap: 18px !important;          /* было тесно */
}

.hzC .t{
  margin: 6px 0 6px !important;
}

.hzC .sub{
  margin: 0 0 14px !important;
  line-height: 1.45;
}

.hzC .p{
  gap: 16px !important;
}

.hzC .p .row{
  padding: 10px 0 !important;
}

.hzC .p .lab{
  margin-bottom: 4px;
  letter-spacing: .06em;
}

.hzC .p .val{
  line-height: 1.35;
}

.hzC .act{
  margin-top: 10px !important;
}

/* Чуть лучше на больших экранах — “распределённее” */
@media (min-width: 980px){
  .hzC .hzI{
    min-height: 420px;
  }
}


/* ==============================
   v4.2.15 — Modal density + thumbs strip fix
   ============================== */

/* 1) Убираем чёрную полосу под миниатюрами (если "хвост" от галереи/подложки) */
.hzHG,
.hzHG-thumbs{
  background: transparent !important;
}

.hzHG-thumbs{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  align-items: center;
}

/* На всякий случай: не даём галерее рисовать лишний overflow снизу */
.hzHG-main{
  overflow: hidden;
}

/* 2) Плотность блока "Фасады / Корпус / Фурнитура" как Kitchen-канон */
.hzC .p{
  gap: 10px !important;
}

.hzC .p .row{
  padding: 6px 0 !important;
  gap: 8px !important;
}

.hzC .p .lab{
  margin-bottom: 2px !important;
  font-size: 11px;
  letter-spacing: .08em;
  opacity: .55;
}

.hzC .p .val{
  line-height: 1.25;
  font-size: 14px;
}


/* ======================================
   v4.2.17 — Remove residual black strip
   ====================================== */

/* HERO/MODAL gallery thumbs: remove dark underlay */
.hzHG-thumbs{
  padding-bottom: 2px !important;          /* was 6px -> showed dark underlay */
  background: transparent !important;
}

/* Thumbnail button base should not be black (can peek on subpixel/rounding) */
.hzHG-th{
  background: #fff !important;
}

/* Ensure nothing leaks below rounded thumbs */
.hzHG-th, .hzHG-th img{
  transform: translateZ(0);
}


/* ======================================================================
   v4.2.23 PATCH — iPhone modal stability (full-bleed on small viewports)
   Fix: iOS/DevTools widths where previous @media may not apply consistently.
   Ensures modal occupies full viewport and avoids side gutters.
   ====================================================================== */
/* NOTE (v4.7.8):
   The original rule used max-width:1024px and forced phone-style full-bleed modal on tablets
   (e.g. iPad mini 768x1024). We now apply full-bleed only for phone-like viewports:
   - narrow screens OR limited height
   - pointer:coarse (touch)
   This preserves the desktop-like two-column modal on tablets.
*/
@media (pointer:coarse) and (max-width: 720px),
       (pointer:coarse) and (max-width: 1024px) and (max-height: 1000px){
  .hzM{padding:0 !important; align-items:stretch !important; justify-content:stretch !important;}
  .hzD{width:100vw !important; max-width:100vw !important; border-radius:0 !important;
        height: 100vh;
       height: 100dvh !important; min-height: 100vh;
       height: 100dvh !important; max-height: 100vh;
       height: 100dvh !important;
        grid-template-columns:1fr !important;}
  .hzC{-webkit-overflow-scrolling:touch;}
}
@supports (-webkit-touch-callout: none){
  @media (pointer:coarse) and (max-width: 720px),
         (pointer:coarse) and (max-width: 1024px) and (max-height: 1000px){
    .hzD{height:-webkit-fill-available !important; min-height:-webkit-fill-available !important; max-height:-webkit-fill-available !important;}
  }
}


/* ===============================
   v4.2.24_PATCH — Contacts + Logo + Map embed
   =============================== */
.brand__logo{display:grid;place-items:center;}
.brand__logoImg{width:22px;height:22px;display:block;object-fit:contain;}
/* Map embed */
.hzMap{
  width:100%;
  height:280px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--shadow2);
  background:#fff;
}
.hzMap iframe{width:100%;height:100%;border:0;display:block;}
@media (max-width:640px){
  .hzMap{height:320px;border-radius:16px;}
}



/* ===============================
   v4.2.29 — CONTACTS 1:1 (Visit section) + Materials placeholders
   =============================== */

.hzVisit{padding:56px 0;}
.hzVisitHead{text-align:center;}
.hzVisitTitle{margin:0;font-size:clamp(28px,3.2vw,40px);line-height:1.08;font-weight:800;letter-spacing:-.02em;}
.hzVisitSub{margin:10px auto 0;color:rgba(var(--text-rgb)/.68);max-width:70ch;line-height:1.55;}

.hzVisitShell{
  margin-top:22px;
  background:radial-gradient(1200px 600px at 15% 0%, rgba(var(--acc-rgb)/.10), transparent 55%),
             radial-gradient(900px 520px at 90% 10%, rgba(var(--acc2-rgb)/.08), transparent 55%),
             linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.80));
  border:1px solid rgba(2,6,23,.06);
  border-radius:28px;
  box-shadow:0 20px 70px rgba(2,6,23,.08);
  padding:22px;
}
.hzVisitGrid{display:grid;grid-template-columns:1fr 1.05fr;gap:18px;align-items:stretch;}
@media (max-width:980px){.hzVisitGrid{grid-template-columns:1fr;}}

.hzVisitCard{
  background:#fff;
  display:flex;
  flex-direction:column;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(2,6,23,.06);
  border-radius:22px;
  box-shadow:0 14px 34px rgba(2,6,23,.06);
  padding:20px;
  position:relative;
  overflow:hidden;
}
.hzVisitCard::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at top left, rgba(var(--acc-rgb)/.10), transparent 60%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .hzVisitCard:hover::before{opacity:1;}
  .hzVisitCard:hover{transform:translateY(-2px);}
}

.hzVisitCardTitle{margin:0;font-weight:800;font-size:18px;letter-spacing:-.01em;}
.hzVisitRows{margin-top:14px;display:grid;gap:14px;}
.hzVisitRow{display:flex;gap:12px;align-items:flex-start;}
.hzVisitIco{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:rgba(var(--acc-rgb)/.10);
  border:1px solid rgba(var(--acc-rgb)/.18);
  color:rgba(var(--acc-rgb)/1);
  flex:0 0 auto;
  box-shadow:0 10px 22px rgba(2,6,23,.04) inset;
}
.hzVisitRow b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--text-rgb)/.55);line-height:1.1;}
.hzVisitRow span, .hzVisitRow a{display:block;font-weight:800;color:rgba(var(--text-rgb)/.92);line-height:1.55;}

/* Contacts rows (current HTML uses .k/.v instead of <b>label</b>) */
.hzVisitRow .k{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--text-rgb)/.55);line-height:1.1;font-weight:800;}
.hzVisitRow .v{display:block;font-weight:800;color:rgba(var(--text-rgb)/.92);line-height:1.55;text-decoration:none;}
.hzVisitRow .v:hover{text-decoration:underline;text-underline-offset:3px;}
.hzVisitRow a.v[href^="mailto:"]{word-break:break-word;}
.hzVisitRow a.v[href^="tel:"]{white-space:nowrap;}

@media (max-width: 540px){
  .hzVisitRow{flex-direction:column;gap:6px;}
  .hzVisitRow .v{max-width:100%;}
}

.hzVisitLabel{margin-top:14px;color:rgba(var(--text-rgb)/.62);font-weight:800;font-size:13px;}

.hzVisitPills{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.hzPillBtn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.86);
  color:rgba(var(--text-rgb)/.92);
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(2,6,23,.05);
}
.hzPillBtn--vk{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.18);}

.hzVisitCtaWrap{margin-top:16px;}
.hzVisitCta{
  width:100%;
  height:54px;
  border-radius:18px;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  background:linear-gradient(135deg,#19a463,#0e8b52);
  color:#fff;
  box-shadow:var(--cta-shadow);
}

.hzVisitNote{margin-top:10px;color:rgba(var(--text-rgb)/.55);font-size:12px;line-height:1.45;}

.hzVisitMapFrame{
  margin-top:14px;
  padding:14px; /* premium inner padding like cards */
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 14px 34px rgba(2,6,23,.06);
}

/* Map box (fixed height like the reference) */
.hzVisitMapFrame .hzMap{
  position:relative;
  height:320px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(2,6,23,.04);
  border:1px solid rgba(2,6,23,.08);
}
.hzVisitMapFrame .hzMap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Skeleton placeholder (premium) */
.hzVisitMapFrame .hzMapSk{
  position:absolute;
  inset:0;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));
  overflow:hidden;
  pointer-events:none;
  opacity:1;
  transition:opacity 220ms ease;
}
.hzVisitMapFrame .hzMapSk::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  transform:translateX(-30%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:hzMapSh 1.2s ease-in-out infinite;
}
@keyframes hzMapSh{to{transform:translateX(30%);}}
.hzVisitMapFrame .hzMap.is-loaded .hzMapSk{opacity:0;}
@media (prefers-reduced-motion: reduce){
  .hzVisitMapFrame .hzMapSk::before{animation:none;}
}
@media (max-width:640px){
  .hzVisitShell{padding:16px;border-radius:24px;}
  .hzVisitCard{padding:16px;border-radius:20px;}
  .hzVisitMapFrame{padding:12px;border-radius:18px;}
  .hzVisitMapFrame .hzMap{height:300px;}
}

.hzVisitMapBtns{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.hzVisitMapBtns a{height:44px;}

/* Materials placeholders */
.hzMatGrid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:18px;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

 .hzMatCard{
  flex:0 1 360px;
  min-width:280px;
  max-width:360px;
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 14px 34px rgba(2,6,23,.06);
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
}
.hzMatCard::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left, rgba(var(--acc-rgb)/.10), transparent 60%);opacity:0;transition:opacity .28s ease;pointer-events:none;}
@media (hover:hover) and (pointer:fine){
  .hzMatCard:hover{transform:translateY(-2px);}
  .hzMatCard:hover::before{opacity:1;}
}
.hzMatLogoWrap{
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(2,6,23,.06);
  background:rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  box-shadow:0 10px 22px rgba(2,6,23,.04) inset;
}
.hzMatLogo{
  width:38px;
  height:38px;
  display:block;
  object-fit:contain;
}
.hzMatTxt{min-width:0;display:flex;flex-direction:column;gap:2px;}
.hzMatName{font-weight:800;letter-spacing:-.01em;}
.hzMatDesc{color:rgba(var(--text-rgb)/.62);font-weight:700;font-size:12.5px;line-height:1.3;}
.hzMatHint{margin-left:auto;font-weight:800;font-size:12px;color:rgba(var(--acc-rgb)/1);background:rgba(var(--acc-rgb)/.10);border:1px solid rgba(var(--acc-rgb)/.18);padding:8px 10px;border-radius:999px;white-space:nowrap;}
/* ===============================
   PREMIUM MOTION CANON — v4.2.26
   Magnetic CTA + Soft Reveal + Haptic press + Image focus transition + Micro Parallax
   - Transform-only (no layout)
   - Subtle amplitudes
   - Disabled when prefers-reduced-motion
   =============================== */

:root{
  --hz-mag-max: 8px;      /* desktop magnetic amplitude */
  --hz-mag-max-m: 4px;    /* mobile magnetic amplitude */
  --hz-press-scale: .985; /* haptic press */
  --hz-reveal-dy: 6px;
}

@media (prefers-reduced-motion: reduce){
  .hzMag, .hzMag *{transition:none !important;}
  .hzReveal{transition:none !important; transform:none !important; opacity:1 !important;}
  .hzImgFocus{transition:none !important; filter:none !important; transform:none !important;}
}

/* --- Magnetic CTA (transform is set by JS via CSS variables) --- */
.hzMag{
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  will-change: transform;
}
@media (hover:hover) and (pointer:fine){
  .hzMag{transition: transform 160ms cubic-bezier(.2,.8,.2,1);}
}
@media (hover:none){
  .hzMag{transition: transform 140ms cubic-bezier(.2,.8,.2,1);}
}

/* --- Haptic-style press (visual) --- */
.hzPress{will-change: transform, box-shadow;}
.hzPress:active{transform: scale(var(--hz-press-scale));}
@media (prefers-reduced-motion: reduce){
  .hzPress:active{transform:none;}
}

/* --- Soft reveal (stagger) --- */
.hzReveal{
  opacity:0;
  transform: translate3d(0, var(--hz-reveal-dy), 0);
  transition: opacity 320ms ease, transform 320ms ease;
}
.hzReveal.is-in{opacity:1; transform: translate3d(0,0,0);}

/* --- Image focus transition (blur + tiny scale) --- */
.hzImgFocus{will-change: filter, transform, opacity;}
.hzImgFocus.is-loading{filter: blur(1.5px); transform: scale(1.02); opacity:.98;}

/* --- Micro parallax (JS sets --pz) --- */
[data-hz-parallax]{
  --pz: 0px;
  transform: translate3d(0, var(--pz), 0);
  will-change: transform;
}


/* ===============================
   v4.2.27 — PREMIUM MOTION CANON (micro, non-layout)
   - Adaptive shadow: switches dock + CTA shadows (soft/strong)
   - Typography breathing: subtle opacity pulse (no layout shift)
   =============================== */

:root{
  --hz-dock-shadow-soft: 0 12px 26px rgba(0,0,0,.18);
  --hz-dock-shadow-strong: 0 18px 42px rgba(0,0,0,.28);
  --hz-dock-shadow: var(--hz-dock-shadow-soft);

  /* CTA shadow tuning (keeps existing --cta-shadow variables as final source) */
  --hz-cta-shadow-soft: 0 16px 38px rgba(13,126,70,.22), 0 10px 18px rgba(2,6,23,.07);
  --hz-cta-shadow-strong: 0 20px 52px rgba(13,126,70,.28), 0 14px 24px rgba(2,6,23,.10);
}

body[data-hz-shadow="soft"]{
  --hz-dock-shadow: var(--hz-dock-shadow-soft);
  --cta-shadow: var(--hz-cta-shadow-soft);
}
body[data-hz-shadow="strong"]{
  --hz-dock-shadow: var(--hz-dock-shadow-strong);
  --cta-shadow: var(--hz-cta-shadow-strong);
}

@media (prefers-reduced-motion: no-preference){
  .hz-breathe{
    animation: hzBreathe 10.5s ease-in-out infinite;
    will-change: opacity;
  }
  @keyframes hzBreathe{
    0%,100%{ opacity: 1; }
    50%{ opacity: .90; }
  }
}

/* safety: never animate in reduce motion */
@media (prefers-reduced-motion: reduce){
  .hz-breathe{ animation: none !important; }
}

/* ===============================
   v4.2.32 — Typography thin pass (premium)
   =============================== */

body{font-weight:500;}

h2,.secT,.hzVisitTitle{font-weight:800;}

.btn,.hz-btn,.hzPillBtn{font-weight:800;}

.hzH-h1Main,.hzH-h1Sub{font-weight:850;}


/* ===============================
   v4.2.32 — Materials shell (podlozhka)
   =============================== */

.hzMatShell{
  margin-top:18px;
  background:radial-gradient(1200px 600px at 15% 0%, rgba(var(--acc-rgb)/.10), transparent 55%),
             radial-gradient(900px 520px at 90% 10%, rgba(var(--acc2-rgb)/.08), transparent 55%),
             linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.82));
  border:1px solid rgba(2,6,23,.06);
  border-radius:28px;
  box-shadow:0 20px 70px rgba(2,6,23,.08);
  padding:18px;
}
@media(max-width:640px){.hzMatShell{border-radius:24px;padding:14px;}}

/* v4.8.5 PATCH — Materials headings (centered + premium typography) */
.hzMatSub{margin-top:0; text-align:center;}
.hzMatSubT{font-size:18px;font-weight:900;letter-spacing:-0.01em;margin:4px 0 4px;color:rgba(2,6,23,.92);}
.hzMatSubS{font-size:14px;line-height:1.55;margin:0 auto 10px;max-width:72ch;color:rgba(2,6,23,.66);font-weight:600;}
@media(max-width:640px){
  .hzMatSubT{font-size:16px;}
  .hzMatSubS{font-size:13px;max-width:44ch;}
}


/* ===============================
   v4.2.32 — Typography lighter (premium)
   =============================== */

/* Global buttons + pills */
.btn, .hz-btn{font-weight:800;}
.hzPillBtn{font-weight:800;}

/* Big headings */
h2, .secT, .hzVisitTitle{font-weight:800;}
.hzH-h1Main, .hzH-h1Sub{font-weight:800;}

/* Card titles */
.hzVisitCardTitle, .hzMatName{font-weight:800;}


/* ===============================
   v4.2.33 — WHY section centered (screen-centered headings)
   =============================== */

#why .head{justify-content:center;align-items:center;text-align:center;}
#why .head > div{margin:0 auto;}
#why .pill{margin-left:auto;margin-right:auto;}
#why .sub{margin-left:auto;margin-right:auto;}
#why h2{margin-left:auto;margin-right:auto;}


/* ===============================
   v4.2.33 — WHY center alignment
   =============================== */
#why .head{justify-content:center;}
#why .head > div{margin:0 auto; text-align:center;}
#why .head .pill{margin-left:auto;margin-right:auto;}
#why .sub{margin-left:auto;margin-right:auto;}
#why h2{margin-left:auto;margin-right:auto;}

/* ===============================
   v4.7.8 — STEPS headings centered (screen-centered like WHY)
   Fix: "ЭТАПЫ / Как мы работаем" heading block looked left-shifted on some widths.
   No layout changes to cards/grid.
   =============================== */
#steps .head{justify-content:center;align-items:center;text-align:center;}
#steps .head > div{margin:0 auto;}
#steps .pill{margin-left:auto;margin-right:auto;}
#steps .sub{margin-left:auto;margin-right:auto;}
#steps h2{margin-left:auto;margin-right:auto;}

/* ===== v4.2.34 PATCH: Contacts card vertical rhythm (even distribution) ===== */
.hzVisitCard--contacts{
  gap:18px;
}
.hzVisitCard--contacts .hzVisitRows{
  margin-top:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
}
.hzVisitCard--contacts .hzVisitLabel,
.hzVisitCard--contacts .hzVisitPills,
.hzVisitCard--contacts .hzVisitCtaWrap,
.hzVisitCard--contacts .hzVisitNote{
  margin-top:0;
}
@media (max-width: 980px){
  .hzVisitCard--contacts{gap:16px;}
}


/* ===== v4.2.35 PATCH: Contacts card — distribute all content by height ===== */
.hzVisitCard--contacts{gap:18px;}
.hzVisitCard--contacts .hzVisitCardBody{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  min-height:0;
}
/* Keep rows block compact; main distribution happens at CardBody level */
.hzVisitCard--contacts .hzVisitRows{margin-top:0;display:grid;gap:14px;}
.hzVisitCard--contacts .hzVisitLabel,
.hzVisitCard--contacts .hzVisitPills,
.hzVisitCard--contacts .hzVisitCtaWrap,
.hzVisitCard--contacts .hzVisitNote{margin-top:0;}


/* ===============================
   v4.2.36 — Promo bar restore + Calc CTA center alignment
   =============================== */

/* Promo: ensure it is not visually "missing" behind header.
   JS sets --promo-h based on actual promo height. */
.promo{ display:block; }

/* WHY → Quick calc card: center text relative to screen */
#why .ctaCard{
  text-align:center;
}
#why .ctaCard__t,
#why .ctaCard__s{
  margin-left:auto;
  margin-right:auto;
  max-width:70ch;
}
#why .ctaCard__row{
  justify-content:center;
}
#why .ctaCard__row .hz-btn,
#why .ctaCard__row .btn,
#why .ctaCard__row a{
  justify-content:center;
}


/* ===============================
   v4.3.0 — Materials & Hardware pages (catalog + modal)
   - Textured swatches via CSS patterns (no images)
   - Shared with decors-*.html and hardware-*.html
   =============================== */
.hzMatEmpty{padding:16px;border:1px dashed rgba(var(--text-rgb)/.18);border-radius:16px;color:rgba(var(--text-rgb)/.72);background:rgba(255,255,255,.02);}

.hzMatTile{
  display:flex;gap:12px;align-items:flex-start;
  text-align:left;
  width:100%;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(var(--text-rgb)/.10);
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition:transform var(--t,220ms) ease, border-color var(--t,220ms) ease, box-shadow var(--t,220ms) ease;
}
.hzMatTile:hover{transform:translateY(-2px);border-color:rgba(var(--text-rgb)/.16);box-shadow:0 18px 46px rgba(15,23,42,.10);}
.hzMatTile__t{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1;}
.hzMatTile__code{font-weight:850;font-size:13px;letter-spacing:.2px;color:rgba(var(--text-rgb)/.92);}
.hzMatTile__name{font-weight:850;font-size:14px;line-height:1.2;color:rgba(var(--text-rgb)/.94);}
.hzMatTile__grp{margin-top:4px;font-size:12px;color:rgba(var(--text-rgb)/.62);}
.hzMatTile__desc{margin-top:6px;font-size:12.5px;line-height:1.35;color:rgba(var(--text-rgb)/.70);max-width:62ch;}
.hzMatTile__hint{margin-left:auto;font-weight:850;font-size:12px;color:rgba(var(--acc-rgb)/1);background:rgba(var(--acc-rgb)/.10);border:1px solid rgba(var(--acc-rgb)/.18);padding:8px 10px;border-radius:999px;white-space:nowrap;}

.hzMatSw{
  width:54px;height:54px;border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(15,23,42,.08) inset;
  flex:0 0 auto;
  background:#f3f4f6;
}
/* pattern presets */
.hzMatSw--solid{background:linear-gradient(135deg, rgba(var(--acc-rgb)/.14), rgba(255,255,255,.75));}
.hzMatSw--wood{background:
  repeating-linear-gradient(90deg, rgba(124,58,237,.10) 0 6px, rgba(255,255,255,.0) 6px 12px),
  linear-gradient(135deg, rgba(83,209,138,.12), rgba(255,255,255,.78));
}
.hzMatSw--stone{background:
  radial-gradient(circle at 20% 25%, rgba(0,0,0,.10), transparent 55%),
  radial-gradient(circle at 70% 60%, rgba(0,0,0,.08), transparent 55%),
  linear-gradient(135deg, rgba(59,130,246,.10), rgba(255,255,255,.80));
}
.hzMatSw--metal{background:
  linear-gradient(90deg, rgba(255,255,255,.75), rgba(0,0,0,.06), rgba(255,255,255,.70)),
  linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.80));
}
.hzMatSw--soft{background:
  radial-gradient(circle at 30% 30%, rgba(0,0,0,.06), transparent 58%),
  linear-gradient(135deg, rgba(167,139,250,.12), rgba(255,255,255,.82));
}
.hzMatSw--edge{background:
  linear-gradient(180deg, rgba(0,0,0,.08), rgba(255,255,255,.0)),
  linear-gradient(135deg, rgba(37,99,235,.10), rgba(255,255,255,.82));
}

/* Modal content */
.hzMatModalRow{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:16px;border:1px solid rgba(var(--text-rgb)/.10);background:rgba(255,255,255,.02);}
.hzMatModalSw{width:88px;height:88px;border-radius:18px;border:1px solid rgba(0,0,0,.06);box-shadow:0 12px 26px rgba(15,23,42,.10) inset;flex:0 0 auto;}
.hzMatModalMeta{min-width:0;}
.hzMatModalCode{font-weight:850;font-size:12px;letter-spacing:.2px;color:rgba(var(--text-rgb)/.70);}
.hzMatModalName{margin-top:4px;font-weight:900;font-size:16px;line-height:1.15;color:rgba(var(--text-rgb)/.92);}
.hzMatModalGrp{margin-top:6px;font-size:12.5px;color:rgba(var(--text-rgb)/.62);}
.hzMatModalDesc{margin-top:10px;color:rgba(var(--text-rgb)/.80);line-height:1.55;max-width:70ch;}
.hzMatModalStruct{margin-top:12px;padding:12px;border-radius:16px;border:1px solid rgba(var(--text-rgb)/.10);background:rgba(255,255,255,.02);}
.hzMatModalStructT{font-weight:900;}
.hzMatModalStructL{margin:10px 0 0;padding-left:18px;color:rgba(var(--text-rgb)/.78);line-height:1.55;}


/* ===============================
   v4.4.0 — Materials rich choice (tiers + compare + use-cases)
   =============================== */

/* Tier badge */
.hzTierBadge{display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 12px;border-radius:999px;
  font-weight:900;font-size:12px;letter-spacing:.02em;
  border:1px solid rgba(var(--text-rgb)/.10);
  background:rgba(255,255,255,.02);
  color:rgba(var(--text-rgb)/.86);
  white-space:nowrap;
}
.hzTierBadge.is-premium{background:rgba(25,164,99,.10);border-color:rgba(25,164,99,.18);color:rgb(25 164 99);}
.hzTierBadge.is-standard{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.16);color:rgb(37 99 235);}
.hzTierBadge.is-budget{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.18);color:rgb(146 64 14);}

/* chips with tier tint */
.hzChip.is-premium{border-color:rgba(25,164,99,.20);}
.hzChip.is-budget{border-color:rgba(245,158,11,.22);}

/* tile richer layout */
.hzDecTile--rich{align-items:stretch;}
.hzDecTile__right{margin-left:auto;display:flex;flex-direction:column;gap:10px;align-items:flex-end;justify-content:space-between;}
.hzDecTile__use{margin-top:8px;font-size:12px;color:rgba(var(--text-rgb)/.62);font-weight:800;line-height:1.25;max-width:50ch;}
.hzCompareMark{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(var(--text-rgb)/.10);
  background:rgba(255,255,255,.02);
  color:rgba(var(--text-rgb)/.90);
  font-weight:900;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.hzCompareMark.is-on{background:rgba(25,164,99,.12);border-color:rgba(25,164,99,.20);color:rgb(25 164 99);}

/* compare bar */
.hzCompareBar{position:fixed;left:0;right:0;bottom:0;z-index:2300;pointer-events:none;}
.hzCompareBarIn{max-width:var(--max);margin:0 auto;padding:0 16px 90px;pointer-events:none;}
@media (max-width:640px){.hzCompareBarIn{padding:0 12px 88px;}}
.hzCompareBarCard{
  pointer-events:auto;
  width:min(980px, 100%);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(2,6,23,.08);
  border-radius:22px;
  box-shadow:0 18px 60px rgba(15,23,42,.12);
  backdrop-filter: blur(14px);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 220ms var(--ease-fast, ease), transform 220ms var(--ease-fast, ease);
}
.hzCompareBar.is-on .hzCompareBarCard{opacity:1;transform:none;}
.hzCompareBarTxt{min-width:0;}
.hzCompareBarT{font-weight:900;}
.hzCompareBarS{margin-top:2px;color:rgba(var(--text-rgb)/.62);font-weight:800;font-size:12.5px;line-height:1.25;}
.hzCompareBarBtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.hzCompareBtn[disabled], .hzCompareBtn2[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.2);}

/* tie bar into existing dock safe area */
@media (max-width:520px){
  .hzCompareBarIn{padding-bottom:96px;}
}

/* compare modal */
.hzCompareD{max-height:min(86vh, 840px);}
.hzCompareHint{color:rgba(var(--text-rgb)/.72);font-weight:800;line-height:1.45;margin:8px 0 14px;}
.hzCompareWrap{overflow:auto;border-radius:16px;border:1px solid rgba(var(--text-rgb)/.10);background:rgba(255,255,255,.02);}
.hzCompareTable{min-width:760px;}
.hzCompareHeader,.hzCompareRowGrid{display:grid;grid-template-columns:220px repeat(3, minmax(220px, 1fr));}
.hzCompareCols-2 .hzCompareHeader,.hzCompareCols-2 .hzCompareRowGrid{grid-template-columns:220px repeat(2, minmax(240px, 1fr));min-width:680px;}
.hzCompareCols-3 .hzCompareHeader,.hzCompareCols-3 .hzCompareRowGrid{grid-template-columns:220px repeat(3, minmax(220px, 1fr));min-width:860px;}
.hzCompareRowLabel{padding:12px 12px;border-right:1px solid rgba(var(--text-rgb)/.08);font-weight:900;color:rgba(var(--text-rgb)/.80);background:rgba(255,255,255,.02);}
.hzCompareCol,.hzCompareCell{padding:12px 12px;border-right:1px solid rgba(var(--text-rgb)/.08);}
.hzCompareHeader .hzCompareCol{background:rgba(255,255,255,.02);}
.hzCompareHeader .hzCompareCol:last-child,.hzCompareRowGrid .hzCompareCell:last-child{border-right:none;}
.hzCompareColTop{display:flex;flex-direction:column;gap:8px;}
.hzCompareColCode{font-weight:900;color:rgba(var(--text-rgb)/.72);font-size:12px;}
.hzCompareColName{font-weight:900;line-height:1.15;}
.hzCompareCell b{font-weight:850;color:rgba(var(--text-rgb)/.88);}
.hzCompareMini .hzCompareRow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(var(--text-rgb)/.12);}
.hzCompareMini .hzCompareRow:last-child{border-bottom:none;}
.hzCompareMini span{color:rgba(var(--text-rgb)/.62);font-weight:800;font-size:12px;}
.hzCompareMini b{font-weight:900;color:rgba(var(--text-rgb)/.88);}

/* use cases pills */
.hzUseGrid{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.hzUsePill{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:999px;
  background:rgba(var(--acc-rgb)/.10);
  border:1px solid rgba(var(--acc-rgb)/.18);
  color:rgba(var(--text-rgb)/.86);
  font-weight:900;
  font-size:12px;
}


/* ===============================
   v4.4.1 — Marketplace Compare (materials/hardware)
   Sticky first column + horizontal scroll, 1:1 marketplace feel
   =============================== */
.hzCmpScroll{
  margin-top: 14px;
  border:1px solid rgba(2,6,23,.08);
  border-radius:18px;
  overflow:auto;
  background:#fff;
  box-shadow:0 14px 34px rgba(2,6,23,.06);
}
.hzCmpGrid{
  --cols: 3;
  display:grid;
  grid-template-columns: minmax(180px, 240px) repeat(var(--cols), minmax(220px, 1fr));
  min-width: calc(240px + (var(--cols) * 240px));
}
.hzCmpCell{
  padding:12px 12px;
  border-bottom:1px solid rgba(2,6,23,.06);
  border-right:1px solid rgba(2,6,23,.06);
  background:#fff;
  font-size:13.5px;
  line-height:1.4;
}
.hzCmpHead{
  position:sticky;
  top:0;
  z-index:3;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
}
.hzCmpLabel{
  position:sticky;
  left:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  font-weight:900;
  letter-spacing:-.01em;
}
.hzCmpCorner{ z-index:4; }
.hzCmpColHead .hzTierBadge{margin-top:8px;display:inline-flex;}
.hzCmpHeadTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.hzCmpHeadCode{font-weight:900;font-size:12px;color:rgba(var(--text-rgb)/.62);}
.hzCmpHeadName{margin-top:6px;font-weight:900;letter-spacing:-.01em;}
.hzCmpRm{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(2,6,23,.03);
  font-weight:900;
  cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
  .hzCmpRm:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(2,6,23,.08);}
}
.hzCmpEmpty{ color:rgba(var(--text-rgb)/.72); }
.hzCmpEmptyT{font-weight:900;}
.hzCmpEmptyS{margin-top:4px;font-weight:800;}
.hzCmpEmptyHint{margin-top:6px;font-size:12px;color:rgba(var(--text-rgb)/.60);line-height:1.35;}
@media (max-width: 640px){
  .hzCmpGrid{grid-template-columns: minmax(160px, 200px) repeat(var(--cols), minmax(220px, 1fr));}
  .hzCmpCell{padding:10px 10px;font-size:13px;}
}


/* ===============================
   v4.5.0 — WOW layer (materials/hardware)
   - guided choice bar
   - selection sticky bar (+ preset link)
   - richer tiles: solution pill, recommended, texture shine + parallax
   =============================== */

.hzGuide{max-width:var(--max);margin:0 auto;padding:0 18px;margin-top:12px;}
.hzGuide__in{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 14px 40px rgba(2,6,23,.06);
  border-radius:22px;
  padding:14px 14px 12px;
}
.hzGuide__ttl{font-weight:850;letter-spacing:-.01em;}
.hzGuide__steps{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;}
.hzGuideStep{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.92);
  text-decoration:none;color:rgba(var(--text-rgb)/.92);
  font-weight:850;font-size:12px;
}
.hzGuideStep__n{width:18px;height:18px;border-radius:999px;display:grid;place-items:center;
  background:rgba(var(--acc-rgb)/.10);border:1px solid rgba(var(--acc-rgb)/.18);color:rgba(var(--acc-rgb)/1);font-weight:900;font-size:12px;}
.hzGuideStep.is-done .hzGuideStep__n{background:rgba(var(--acc-rgb)/.16);}
.hzGuideStep.is-active{border-color:rgba(var(--acc-rgb)/.45);box-shadow:0 10px 22px rgba(var(--acc-rgb)/.12);}
.hzGuide__hint{margin-top:8px;color:rgba(var(--text-rgb)/.64);font-weight:750;font-size:12px;line-height:1.35;}

.hzSelBar{position:fixed;left:50%;transform:translateX(-50%);
  width:min(1180px, calc(100vw - 24px));
  z-index:2500;
  bottom:16px;
  opacity:0;pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
}
.hzSelBar.has-dock{bottom:76px;}
.hzSelBar.is-on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.hzSelBar__in{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:18px;
  background:rgba(10,12,20,.62);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 16px 44px rgba(0,0,0,.22);
}
.hzSelBar__ttl{color:#fff;font-weight:900;font-size:12px;letter-spacing:.02em;}
.hzSelBar__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.hzSelBar__left{display:flex;flex-direction:column;min-width:0;}
.hzSelChip{display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:8px 10px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;text-decoration:none;font-weight:850;font-size:11px;
}
.hzSelChip__k{opacity:.85;}
.hzSelChip__v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;}
.hzSelChip__t{padding:4px 8px;border-radius:999px;font-weight:900;font-size:10px;border:1px solid rgba(255,255,255,.16);}
.hzSelChip__t.t-prem{background:rgba(255,255,255,.12);}
.hzSelChip__t.t-std{background:rgba(255,255,255,.08);}
.hzSelChip__t.t-bud{background:rgba(255,255,255,.06);}
.hzSelBar__right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.hzSelBar__btn{height:40px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-weight:900;font-size:12px;cursor:pointer;
}
.hzSelBar__cta{height:40px;padding:0 14px;border-radius:999px;
  background:linear-gradient(135deg,#19a463,#0e8b52);
  color:#fff;text-decoration:none;font-weight:900;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
@media (max-width:520px){
  .hzSelBar{width:calc(100vw - 16px);}
  .hzSelChip__v{max-width:160px;}
  .hzSelBar__cta{display:none;}
}

.hzDecTile--rich{position:relative;overflow:hidden;}
.hzDecTile--rich .hzDecSw2{
  position:relative;
  background-size: 220% 220%;
  background-position: var(--bx, 50%) var(--by, 50%);
  transition:transform 180ms ease, filter 180ms ease;
}
/* subtle shine */
.hzDecTile--rich .hzDecSw2::after{
  content:"";
  position:absolute;inset:-30%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.26), transparent);
  transform:translateX(-45%) rotate(8deg);
  opacity:0;
  transition:opacity 220ms ease, transform 420ms ease;
}
@media (hover:hover) and (pointer:fine){
  .hzDecTile--rich:hover .hzDecSw2{transform:scale(1.03);}
  .hzDecTile--rich:hover .hzDecSw2::after{opacity:1;transform:translateX(35%) rotate(8deg);}
}
.hzDecTile--rich.is-reco{
  border-color:rgba(var(--acc-rgb)/.40) !important;
  box-shadow:0 18px 46px rgba(var(--acc-rgb)/.10) !important;
}
.hzSolPill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(var(--acc-rgb)/.08);
  color:rgba(var(--text-rgb)/.92);
  font-weight:900;font-size:11px;
}
.hzRecoPill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(var(--acc-rgb)/.22);
  background:rgba(var(--acc-rgb)/.12);
  color:rgba(var(--acc-rgb)/1);
  font-weight:900;font-size:11px;
}

.hzPickBtn{min-width:220px;}



/* ===============================
   v4.5.2 PATCH — polish
   1) WHY calc card spacing (not pressed)
   2) Contacts map address label
   3) Materials section: icons only (no links)
   4) iPhone: stable top offset via dynamic spacer
   =============================== */

#why .hzCalcCard{
  margin-top: 22px;
  padding: 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(124,58,237,.18);
}
@media (max-width: 640px){
  #why .hzCalcCard{margin-top:18px; padding:16px 14px; border-radius:20px;}
}

.hzVisitMapAddr{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:13px;
  color:rgba(var(--text-rgb)/.76);
  margin:0 0 10px;
}
.hzVisitMapAddr::before{
  content:"📍";
  font-size:14px;
  line-height:1;
}

.hzBrandIcons{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.hzBrandI{
  width: 86px;
  height: 66px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hzBrandI img{
  width: 54px;
  height: 54px;
  object-fit:contain;
  display:block;
}
@media (max-width: 560px){
  .hzBrandI{width: 92px; height: 64px; border-radius: 16px;}
  .hzBrandI img{width: 52px; height: 52px;}
}

/* ===============================
   v4.6.0 — Yandex Map JS API (stable center/zoom)
   - #hzYMap renders JS map, iframe is fallback
   =============================== */
.hzMap{position:relative;}
.hzYMap{position:absolute;inset:0;width:100%;height:100%;}
.hzMap.is-jsmap iframe[data-hz-map-fallback]{display:none !important;}

/* v4.7.10 PATCH — Steps heading centered (match WHY) */
#steps .head{justify-content:center;align-items:center;text-align:center;}
#steps .head > div{margin:0 auto;text-align:center;}
#steps .head .pill{margin-left:auto;margin-right:auto;}
#steps .sub{margin-left:auto;margin-right:auto;}
#steps h2{margin-left:auto;margin-right:auto;}

/* ===============================
   v4.8.1 — Price canon (Wardrobes)
   - Numeric price (price_text) + trust line (price_label)
   - Modal price centered
   - Card price keeps kitchen-like emphasis
   =============================== */

/* Card price block */
.price{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.priceVal{font-weight:900;letter-spacing:-.01em;color:#0e8b52;font-size:clamp(18px,1.7vw,20px);line-height:1.1;}
.priceSub{font-weight:800;font-size:12.5px;color:rgba(var(--text-rgb)/.62);line-height:1.25;}

/* Modal price block */
.hzPrice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;margin-top:10px;}
.hzPriceVal{font-weight:900;letter-spacing:-.01em;color:#0e8b52;font-size:22px;line-height:1.1;}
.hzPriceLbl{font-weight:800;font-size:12.5px;color:rgba(var(--text-rgb)/.62);line-height:1.25;}

/* ===============================
   v4.8.9 — Accessibility: prefers-reduced-motion
   Respect OS setting to reduce animations/transitions.
   =============================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* v4.8.9 — Favorites UI */
.hz-search-wrap{display:flex;align-items:center;gap:10px;}
.hz-favToggle{
  width:44px;height:44px;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);
  font-size:18px;line-height:1;cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.hz-favToggle:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);}
.hz-favToggle[aria-pressed="true"]{
  background:rgba(83,209,138,.14);
  border-color:rgba(83,209,138,.35);
  color:rgba(83,209,138,1);
}

.card{position:relative;}
.hzFavBtn{
  position:absolute;top:12px;right:12px;z-index:5;
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(17,24,39,.45);
  backdrop-filter: blur(10px);
  color:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.hzFavBtn:hover{transform:translateY(-1px);}
.hzFavBtn.is-pop{animation: hzFavPop .42s ease;}
@keyframes hzFavPop{
  0%{transform:scale(1);}
  40%{transform:scale(1.18);}
  100%{transform:scale(1);}
}
.card.is-fav .hzFavBtn{color:rgba(83,209,138,1);border-color:rgba(83,209,138,.35);background:rgba(83,209,138,.12);}

/* ===== v4.8.12 PATCH: 320px safety (iPhone SE/old devices) ===== */
@media (max-width: 320px){
  .wrap{padding-left:12px;padding-right:12px;}
  .hdr__in{padding-left:10px;padding-right:10px;}
  .promo__in{padding-left:10px;padding-right:10px;}
  .hzH-card{padding:14px;border-radius:18px;}
  .hzH-title{font-size:32px;line-height:1.04;}
  .btn,.hzPillBtn{height:42px;}
  .hzVisitCard{border-radius:18px;}
  .hzVisitCardBody{padding:14px;}
  .hzVisitRow .k{font-size:11px;letter-spacing:.06em;}
  .hzVisitRow .v{font-size:15px;}
  .hzVisitPills{gap:8px;}
}


/* v4.8.22 — Favorites UX: soften removal when un-favoriting in favorites-only mode */
.card.is-removing{
  opacity:0.35;
  transform:scale(.99);
  transition:opacity 220ms ease, transform 220ms ease;
}



/* ===============================
   v4.8.29 — Modal CTA must never disappear (mobile)
   =============================== */
@media (max-width: 920px){
  .hzM .hzC{
    padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .hzM .hzC .hzBtns{
    display: flex !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 6 !important;
    background: #fff !important;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(2,6,23,.06) !important;
    gap: 10px !important;
  }
  .hzM .hzC{ overflow: auto !important; }
}
@media (max-width: 360px){
  .hzM .hzC .hzBtns{ flex-direction: column !important; }
  .hzM .hzC .hzBtns .btn,
  .hzM .hzC .hzBtns .hz-btn{ width: 100% !important; justify-content: center !important; }
}


/* ===============================
   v4.8.31 — HERO→PORTFOLIO gap clamp
   Symptom: large blank space between HERO and portfolio/catalog on some viewports (iPad, some mobile).
   Fix: tighten adjacency spacing regardless of unseen blocks.
   =============================== */
.hzH{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
.hzH + #portfolio{ padding-top: 12px !important; margin-top: 0 !important; }



/* ===========================================================
   v4.8.33 — Section Rhythm System (no magic margins)
   Goal: consistent vertical spacing between sections across viewports,
         prevent accidental large gaps.
   =========================================================== */

section[id]{
  padding-top: var(--hz-section-pad);
  padding-bottom: var(--hz-section-pad);
}

/* Hero → first section (Portfolio) must be tighter */
#portfolio{
  padding-top: var(--hz-hero-next-pad);
}

/* If section is hidden, ensure it cannot reserve space (belt+braces) */
section[style*="display:none"]{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* Emergency: remove accidental top/bottom margins on section wrappers */
section[id]{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ===== P0 MODAL MOBILE DOCK (tiny viewport height) =====
   Goal: on very small screens, hide bulky action row and show compact dock,
   so CTAs never go off-screen. Safe: only activates on max-height.
*/
.hzModalDock{display:none;gap:10px;align-items:center;justify-content:space-between;margin-top:10px;padding:10px;border-radius:16px;background:rgba(17,24,39,.06);border:1px solid rgba(17,24,39,.08)}
.hzModalDock__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:999px;border:1px solid rgba(17,24,39,.10);background:#fff;color:#111827;text-decoration:none;font-weight:900;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.04);cursor:pointer}
.hzModalDock__btn--primary{background:linear-gradient(135deg,#19a463,#0e8b52);border:none;color:#fff;box-shadow:0 14px 32px rgba(13,126,70,.30)}
.hzModalDock__btn svg{width:18px;height:18px;display:block}
.hzModalDock__btn--primary svg{color:#fff}
@media (max-height:700px){
  .hzI .act{display:none !important}
  .hzModalDock{display:flex}
}
@media (max-width:360px){
  .hzModalDock__btn span{display:none}
}


/* ===== MODAL DOCK: icons + ultra-tiny menu (v4.8.39) ===== */
.hzModalDock__btn .ic{width:18px;height:18px;display:block;flex:0 0 18px}
.hzModalDock__btn .ic svg{width:18px;height:18px;display:block}
.hzModalDock__btn span{white-space:nowrap}
.hzModalDock__more{position:relative;flex:0 0 auto}
.hzModalDock__moreBtn{width:44px;min-width:44px;max-width:44px;padding:0}
.hzModalDock__menu{position:absolute;right:0;bottom:54px;min-width:180px;background:#fff;border:1px solid rgba(17,24,39,.10);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.14);padding:8px;display:none;z-index:50}
.hzModalDock__menu a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;color:#111827;font-weight:800}
.hzModalDock__menu a:hover{background:rgba(17,24,39,.05)}
.hzModalDock__menu .ic{width:18px;height:18px;display:block}
.hzModalDock__menu.is-open{display:block}

/* ULTRA-TINY: keep only CALL + PRIMARY, move TG to menu */
@media (max-height:620px){
  .hzModalDock{gap:8px}
  .hzModalDock__btn--tg{display:none !important}
  .hzModalDock__more{display:block}
}
@media (min-height:621px){
  .hzModalDock__more{display:none}
}


/* ===== P0 MODAL MOBILE STICKY FOOTER (safe-area, no cut) v4.8.40 ===== */
@media (max-width:520px){
  .hzM .hzD{max-height:100dvh}
  .hzM .hzCScroll{max-height:calc(100dvh - 72px); overflow:auto}
  .hzM .hzCFooter{
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(17,24,39,.08);
  }
}
/* Keep close button reachable */
@media (max-width:520px){
  .hzM .hzX{top:10px; right:10px}
}


/* v4.8.42 — CONTACTS POLISH: better typography + buttons feel alive */
.hzVisitMapAddr{font-weight:800;letter-spacing:.2px}
.hzVisitRow .k{min-width:92px;display:inline-block}
.hzVisitMapBtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.hzVisitMapBtns .hzPillBtn{flex:1;min-width:220px;justify-content:center;text-align:center;padding:12px 16px}
@media (max-width:520px){
  .hzVisitMapBtns .hzPillBtn{min-width:0;width:100%}
}

/* Hover polish without fighting magnetic transforms */
@media (any-hover:hover){
  #contacts .hzPillBtn:hover, #contacts .hzVisitCta:hover{
    box-shadow:0 14px 34px rgba(15,23,42,.10);
    filter:saturate(1.02);
  }
  #contacts .hzPillBtn:active, #contacts .hzVisitCta:active{
    box-shadow:0 10px 22px rgba(15,23,42,.08);
  }
}