/* ===== 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');

  .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;
    overflow-x: hidden;
  }

  .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;
  }

  /* ===== 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;
    }

    .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;
    }
  }