/* ZEFFIRO 4.56 — approved hand-colored-pencil icons, theme-specific, quick first paint.
   The categories stay after “Знайомтесь ближче”; no HTML section was moved.
   Keep title as normal UI typography: only the illustrations are pencil-drawn.
*/
html body main[data-page="home"] section#categories.quick-sections{
  visibility:visible!important;opacity:1!important;content-visibility:visible!important;
  contain:none!important;
}
html body main[data-page="home"] #categories .quick-sections-head .section-kicker{display:none!important}
html body main[data-page="home"] #categories .quick-sections-head{
  padding-inline:60px!important;min-height:72px!important;margin-bottom:14px!important;
}
html body main[data-page="home"] #categories .quick-sections-head h2{
  font-style:normal!important;letter-spacing:-.03em!important;line-height:1.23!important;
  overflow:visible!important;text-wrap:balance!important;
}
html body main[data-page="home"] #categories .quick-sections-track{
  gap:12px!important;padding:5px 12px 12px!important;align-items:stretch!important;
  animation:none!important;transform:none!important;
}
html body main[data-page="home"] #categories a.quick-section-link{
  box-sizing:border-box!important;flex:0 0 240px!important;width:240px!important;
  min-width:240px!important;max-width:240px!important;height:120px!important;
  min-height:120px!important;max-height:120px!important;
  padding:9px 12px!important;gap:9px!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:center!important;border-radius:17px!important;
  background:linear-gradient(135deg,#063934,#062c2b)!important;
  border:1px solid rgba(82,205,184,.75)!important;
  box-shadow:none!important;filter:none!important;transform:none!important;
  text-decoration:none!important;
}
html body main[data-page="home"] #categories a.quick-section-link:hover,
html body main[data-page="home"] #categories a.quick-section-link:focus-visible{
  border-color:#52cdb8!important;background:#0b4943!important;
  box-shadow:0 0 0 2px rgba(82,205,184,.14)!important;
}
html[data-theme="light"] body main[data-page="home"] section#categories.quick-sections{
  background:#ffffff!important;
}
html[data-theme="light"] body main[data-page="home"] #categories a.quick-section-link{
  background:linear-gradient(130deg,#fff,#f2fcf9)!important;
  border-color:rgba(63,194,171,.55)!important;
  box-shadow:0 3px 8px rgba(0,55,45,.045)!important;
}
html[data-theme="light"] body main[data-page="home"] #categories a.quick-section-link:hover,
html[data-theme="light"] body main[data-page="home"] #categories a.quick-section-link:focus-visible{
  background:#ecfbf7!important;border-color:#3ecdb2!important;
}
html body main[data-page="home"] #categories a.quick-section-link .quick-section-icon{
  box-sizing:border-box!important;display:grid!important;place-items:center!important;
  flex:0 0 97px!important;width:97px!important;min-width:97px!important;max-width:97px!important;
  height:104px!important;min-height:104px!important;max-height:104px!important;
  border:0!important;border-radius:0!important;background:none!important;
  padding:0!important;margin:0!important;box-shadow:none!important;
  position:relative!important;overflow:visible!important;
}
html body main[data-page="home"] #categories a.quick-section-link .quick-section-icon img.zf456-pencil{
  box-sizing:border-box!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center!important;
  border:0!important;background:none!important;border-radius:0!important;
  padding:0!important;margin:0!important;box-shadow:none!important;
  filter:none!important;mix-blend-mode:normal!important;transform:none!important;
}
/* Use the site's explicit theme setting, not the operating system's color preference. */
html[data-theme="dark"] body main[data-page="home"] #categories a.quick-section-link .quick-section-icon img.zf456-pencil-light,
html:not([data-theme="light"]) body main[data-page="home"] #categories a.quick-section-link .quick-section-icon img.zf456-pencil-light{display:none!important}
html[data-theme="dark"] body main[data-page="home"] #categories a.quick-section-link .quick-section-icon img.zf456-pencil-dark,
html:not([data-theme="light"]) body main[data-page="home"] #categories a.quick-section-link .quick-section-icon img.zf456-pencil-dark{display:block!important}
html[data-theme="light"] body main[data-page="home"] #categories a.quick-section-link .quick-section-icon img.zf456-pencil-dark{display:none!important}
html[data-theme="light"] body main[data-page="home"] #categories a.quick-section-link .quick-section-icon img.zf456-pencil-light{display:block!important}
html body main[data-page="home"] #categories a.quick-section-link .quick-section-copy{
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:1 1 auto!important;min-width:0!important;text-align:center!important;
  padding:0!important;margin:0!important;
}
html body main[data-page="home"] #categories a.quick-section-link .quick-section-copy strong{
  color:#f6fffc!important;font-size:15px!important;line-height:1.3!important;
  font-weight:750!important;white-space:normal!important;word-break:normal!important;
  overflow-wrap:normal!important;text-align:center!important;
}
html[data-theme="light"] body main[data-page="home"] #categories a.quick-section-link .quick-section-copy strong{
  color:#103b34!important;
}
/* Clear, sharp banner: updated source artwork rather than a white CSS overlay.
   Cache-busting query prevents old hazy tech image from being retained by a CDN. */
html[data-theme="light"] body main[data-page="home"] section.zf-showcase .zf-showcase-slide[data-slide="tech"] .zf-showcase-photo{
  background-image:url('/assets/banners-453/tech-light.webp?v=4.56.0')!important;
}
@media(max-width:850px){
 html body main[data-page="home"] #categories a.quick-section-link{
   flex-basis:204px!important;width:204px!important;min-width:204px!important;max-width:204px!important;
   height:107px!important;min-height:107px!important;max-height:107px!important;padding:7px 8px!important;
 }
 html body main[data-page="home"] #categories a.quick-section-link .quick-section-icon{
   flex:0 0 86px!important;width:86px!important;min-width:86px!important;max-width:86px!important;
   height:91px!important;min-height:91px!important;max-height:91px!important;
 }
 html body main[data-page="home"] #categories a.quick-section-link .quick-section-copy strong{font-size:13px!important}
 html body main[data-page="home"] #categories .quick-sections-head{min-height:66px!important;padding-inline:52px!important}
}
/* Rail controls are separate from the centered heading in both themes. */
html body main[data-page="home"] #categories .quick-sections-head{position:relative!important;}
html body main[data-page="home"] #categories .zeffiro-rail-controls{
 position:absolute!important;right:12px!important;top:50%!important;
 transform:translateY(-50%)!important;display:flex!important;gap:9px!important;
 z-index:5!important;
}
@media(max-width:650px){
 html body main[data-page="home"] #categories .quick-sections-head{
  padding:0 12px!important;min-height:59px!important;margin-bottom:46px!important;
 }
 html body main[data-page="home"] #categories .quick-sections-head h2{
  font-size:clamp(22px,6vw,28px)!important;white-space:normal!important;
 }
 html body main[data-page="home"] #categories .zeffiro-rail-controls{
  top:calc(100% + 23px)!important;right:14px!important;transform:translateY(-50%)!important;
 }
}
