/* ===== Zilon Homepage — combined responsive (desktop / tablet / mobile) ===== */
  @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
	
  html,
	body {
	  overflow-x: clip;
	}	
  .zl-root,
  .zl-root * {
    box-sizing: border-box;
  }

  .zl-root {
    font-family: 'Manrope', sans-serif;
    color: #23214a;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    background: #ffffff;
    /* clip, not hidden: hidden turns .zl-root into its own scroll container,
       which stops position:sticky elements (e.g. the blog sidebar) sticking
       to the page. hidden stays as the fallback for browsers without clip. */
    overflow-x: hidden;
    overflow-x: clip;
  }

  .zl-view {
    width: 100%;
    margin: 0px;
    font-family: Manrope, sans-serif;
    color: rgb(35, 33, 74);
    background: rgb(255, 255, 255);
    overflow-x: hidden;
    position: relative;
  }


  .zl-root a {
    text-decoration: none;
  }

  .zl-root img {
    max-width: 100%;
  }

  .zl-root ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .zl-root button {
    font-family: inherit;
  }


  /* keyframes used by the inline styles in the design */
  @keyframes zilonGrad {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  @keyframes zilonMarquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  @keyframes zilonFloat {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-16px);
    }

    100% {
      transform: translateY(0px);
    }
  }

  @keyframes zilonPulse {
    0% {
      transform: scale(1);
      opacity: .55;
    }

    50% {
      transform: scale(1.25);
      opacity: .2;
    }

    100% {
      transform: scale(1);
      opacity: .55;
    }
  }

  @keyframes zilonSpin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes zilonSpinRev {
    to {
      transform: rotate(-360deg);
    }
  }

  @keyframes zilonCorePulse {

    0%,
    100% {
      box-shadow: 0 0 40px rgba(168, 155, 255, .35), 0 0 90px rgba(238, 0, 0, .15);
    }

    50% {
      box-shadow: 0 0 70px rgba(168, 155, 255, .6), 0 0 130px rgba(238, 0, 0, .3);
    }
  }

  @keyframes zilonBlink {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: .25;
    }
  }

  @keyframes zilonOrbit {
    from {
      transform: rotate(0deg) translateX(70px);
    }

    to {
      transform: rotate(360deg) translateX(70px);
    }
  }

  @keyframes zilonOrbitRev {
    from {
      transform: rotate(360deg) translateX(90px);
    }

    to {
      transform: rotate(0deg) translateX(90px);
    }
  }

  /* scroll-reveal — hidden state applies ONLY when JS is confirmed running (.zl-js),
   so if scripts are stripped/disabled the content is always visible. */
  .zl-js .zl-root .zl-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
  }

  .zl-js .zl-root .zl-reveal.zl-in {
    opacity: 1;
    transform: none;
  }

  /* ultimate fallback + reduced motion: force everything visible */
  .zl-reveal-fallback .zl-root .zl-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .zl-js .zl-root .zl-reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* image placeholder slots (product shots + leadership photos) */
  .zl-root .zl-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f2f1fb, #e9e8f7);
    border: 1px solid rgba(38, 34, 98, .10);
  }

  .zl-root .zl-slot-label {
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #9391b4;
    text-align: center;
    padding: 0 8px;
    line-height: 1.35;
  }

  /* logo loop (Trusted by Businesses) — pause the scroll on hover */
  .zl-root .zl-logoloop:hover .zl-logoloop-track {
    animation-play-state: paused !important;
  }

  .zl-root .zl-logoloop-img {
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    filter: grayscale(1);
    opacity: .68;
    transition: filter .3s, opacity .3s;
  }

  .zl-root .zl-logoloop-img:hover {
    filter: none;
    opacity: 1;
  }

  /* ===== nav dropdown for menu items that have children =====
     Matches the design: the panel appears on hover, and each row tints on hover.
     :focus-within keeps it reachable by keyboard, which hover alone would not. */
  .zl-root .zl-prod:hover .zl-prod-menu,
  .zl-root .zl-prod:focus-within .zl-prod-menu {
    display: flex !important;
  }

  .zl-root .zl-prod-link {
    transition: background-color .2s;
  }

  .zl-root .zl-prod-link:hover,
  .zl-root .zl-prod-link:focus-visible {
    background: #f6f6fb;
  }

  /* ===== footer: the Shama product design's collapse =====
     Four columns, two below 980px, one below 620px. These breakpoints are the
     design's own and deliberately differ from the 1200/768 view switch above,
     so the rules are written against the footer grid itself rather than a view. */
  @media (max-width:980px) {
    .zl-root .zilon-shared-footer .zl-ft-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 36px !important;
    }
  }

  @media (max-width:620px) {
    .zl-root .zilon-shared-footer .zl-ft-grid {
      grid-template-columns: 1fr !important;
      gap: 30px !important;
    }
  }

  /* Narrow tablets: tighten the header so the logo, six links, and the
     "Let's Talk" button stay on one line inside the 28px gutters. */
  @media (min-width:768px) and (max-width:900px) {
    .zl-root .zl-view-t.zilon-shared-header header > div {
      gap: 14px !important;
    }

    .zl-root .zl-view-t.zilon-shared-header nav {
      gap: 16px !important;
    }

    .zl-root .zl-view-t.zilon-shared-header .scp1 {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
  }

  /* Footer side gutters follow the header of the same view (tablet bar 28px,
     mobile bar 20px) so the logo and columns line up with the header above. */
  @media (min-width:768px) and (max-width:1199.98px) {
    .zl-root .zilon-shared-footer .zl-ft-shell {
      padding-left: 28px !important;
      padding-right: 28px !important;
    }
  }

  @media (max-width:767.98px) {
    .zl-root .zilon-shared-footer .zl-ft-shell {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
  }

  /* Social buttons lift and fill red on hover, as the Shama design specifies.
     The base colour and border are inline, so the hover state has to outrank them. */
  .zl-root .zilon-shared-footer .zl-ft-social {
    transition: background-color .25s, border-color .25s, color .25s, transform .25s;
  }

  .zl-root .zilon-shared-footer .zl-ft-social:hover,
  .zl-root .zilon-shared-footer .zl-ft-social:focus-visible {
    background: #ee0000 !important;
    border-color: #ee0000 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
  }

  /* ===== responsive switch: show only one layout per screen size ===== */
  .zl-root .zl-view {
    display: none;
  }

  @media (min-width:1200px) {
    .zl-root .zl-view-d {
      display: block;
    }
  }

  @media (min-width:768px) and (max-width:1199.98px) {
    .zl-root .zl-view-t {
      display: block;
    }

    /* The header is fixed, so it no longer occupies space in the flow. Reserving
       its exact height here keeps every page's vertical rhythm identical to
       before. 68px bar + 1px bottom border. */
    .zl-root .zl-view-t.zilon-shared-header {
      height: 69px;
    }

    /* Product pages (Shama, LincSell) are a different design source: their own
       header was always position:fixed, never sticky, so their hero sections
       already carry enough top padding to clear it on their own. Reserving
       space here on top of that padding double-counts the gap, so product
       pages get no spacer and rely on their own design's padding instead. */
    body.single-product .zl-root .zl-view-t.zilon-shared-header {
      height: 0;
    }

    .tablet-hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
  }

  @media (max-width:767.98px) {
    .zl-root .zl-view-m {
      display: block;
    }

    /* Same reservation as the tablet header above: 62px bar + 1px bottom border
       + the 1px transparent top border on the collapsed menu panel. */
    .zl-root .zl-view-m.zilon-shared-header {
      height: 64px;
    }

    /* Same product-page exception as the tablet rule above. */
    body.single-product .zl-root .zl-view-m.zilon-shared-header {
      height: 0;
    }
  }


/* footer input browser color auto fill removal */
.zl-root .zl-home-contact-input {
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.zl-root .zl-home-contact-input:focus {
  border-color: #EE0000 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(238, 0, 0, 0.10) !important;
}

.zl-root .zilon-newsletter-email:-webkit-autofill,
.zl-root .zilon-newsletter-email:-webkit-autofill:hover,
.zl-root .zilon-newsletter-email:-webkit-autofill:focus,
.zl-root .zilon-newsletter-email:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #29264f inset !important;
  box-shadow: 0 0 0 1000px #29264f inset !important;
  caret-color: #ffffff;
  border-radius: 0;
}