/* ================================================================
   ZOONUM — HOMEPAGE CSS v5.4 — PROFESSIONAL LAB / PHARMA
   Paste into: WPCode > Add Snippet > CSS Snippet
   ----------------------------------------------------------------
   CHANGES FROM v5.3:
   1. Unified opacity vars: one value per section, applied to all
      devices (no more desktop/mobile split).
   2. Featured Products bg now mirrors Hero bg sizing EXACTLY:
      cover + center + no-repeat. Identical rendering on every
      breakpoint, matching the hero.
   ================================================================ */


/* ================================================================
   ★ BG OPACITY CONTROLS — EDIT THESE TO TUNE TEXTURE OPACITY ★
   Single value per section, applied across all devices.
   ================================================================ */
:root {
  --zn-hero-bg-opacity:     0.5;  /* HERO section */
  --zn-products-bg-opacity: 0.5;  /* FEATURED PRODUCTS section */
  --zn-filler-bg-opacity:   0.5;  /* NEXT-GENERATION / FILLER section */
}
body.home .wp-block-html, body.page .wp-block-html,
body.home .wp-block-shortcode, body.page .wp-block-shortcode {
  padding:  0 !important;
  margin:   0 !important;
}

/* ── THEME-AWARE BLOCK BACKGROUNDS ───────────────────────────── */
body.home .entry-content > *, body.page .entry-content > *,
body.home .wp-block-post-content > *, body.page .wp-block-post-content > *,
body.home .wp-block-html, body.page .wp-block-html,
body.home .wp-block-shortcode, body.page .wp-block-shortcode {
  background-color: transparent !important;
}
body.home .entry-content, body.page .entry-content,
body.home .wp-block-post-content, body.page .wp-block-post-content {
  background: transparent !important;
}

/* ── BASE / TOKENS ────────────────────────────────────────────── */

.zn-wrap {
  font-family:            'DM Sans', sans-serif;
  background:             var(--zn-light);
  color:                  var(--zn-text);
  line-height:            1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x:             hidden;
}
.zn-wrap *, .zn-wrap *::before, .zn-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.zn-wrap a { text-decoration: none; color: inherit; }

.zn-container {
  max-width: 1180px;
  width:     100%;
  margin:    0 auto;
  padding:   0 24px;
}
.zn-accent { color: var(--zn-primary); }

.zn-label {
  display:        inline-block;
  font-family:    'Montserrat', sans-serif;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--zn-primary);
  background:     var(--zn-primary-bg);
  border:         1px solid var(--zn-primary-bdr);
  border-radius:  6px;
  padding:        4px 10px;
  margin-bottom:  16px;
}

.zn-section { padding: 96px 0; }
.zn-section--alt {
  background:    var(--zn-light-alt);
  border-top:    1px solid var(--zn-border);
  border-bottom: 1px solid var(--zn-border);
}
.zn-section__heading {
  font-family:   'Montserrat', sans-serif;
  font-size:     clamp(26px, 3.5vw, 44px);
  font-weight:   700;
  line-height:   1.15;
  color:         var(--zn-text);
  margin-bottom: 16px;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.zn-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  font-family:     'Montserrat', sans-serif;
  font-size:       14px;
  font-weight:     700;
  letter-spacing:  0.04em;
  padding:         13px 26px;
  border-radius:   50px;
  border:          none !important;
  cursor:          pointer;
  transition:      background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
  white-space:     nowrap;
  text-decoration: none !important;
  line-height:     1;
  -webkit-appearance: none;
  appearance:      none;
}
.zn-btn--primary {
  background: var(--zn-primary) !important;
  color:      #fff !important;
  box-shadow: 0 4px 14px rgba(var(--zn-primary-rgb), 0.25);
}
.zn-btn--primary:hover {
  background: var(--zn-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(var(--zn-primary-rgb), 0.35);
  transform:  translateY(-2px);
  color:      #fff !important;
}
.zn-btn--outline {
  background: transparent !important;
  color:      var(--zn-text) !important;
  border:     1px solid var(--zn-border) !important;
}
.zn-btn--outline:hover {
  border-color: var(--zn-primary) !important;
  color:        var(--zn-primary) !important;
  transform:    translateY(-2px);
}

/* CTA pill button (hero — now on white bg) */
.zn-btn--cta {
  background:     var(--zn-primary) !important;
  color:          #fff !important;
  border:         none !important;
  padding:        8px 8px 8px 20px !important;
  gap:            12px;
  box-shadow:     0 4px 14px rgba(var(--zn-primary-rgb), 0.3);
}
.zn-btn--cta:hover {
  background: var(--zn-primary-dark) !important;
  transform:  translateY(-2px);
  color:      #fff !important;
  box-shadow: 0 6px 20px rgba(var(--zn-primary-rgb), 0.4);
}
.zn-btn__cta-text {
  font-family:    'Montserrat', sans-serif;
  font-size:      12px;
  font-weight:    800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height:    1;
}
.zn-btn__cta-circle {
  width:           38px;
  height:          38px;
  background:      rgba(255,255,255,0.2);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background 0.2s;
}
.zn-btn__cta-circle svg { width: 16px; height: 16px; stroke: #fff; display: block; }
.zn-btn--cta:hover .zn-btn__cta-circle { background: rgba(255,255,255,0.3); }

/* ── HERO  (WHITE / LIGHT) ───────────────────────────────────── */
.zn-hero {
  position:            relative;
  overflow:            hidden;
  background-color:    var(--zn-light);
  min-height:          90vh;
  display:             flex;
  align-items:         center;
  padding:             80px 0;
  margin-top:          0 !important;
}
.zn-hero::before {
  content:             '';
  position:            absolute;
  inset:               0;
  background-image:    var(--zn-bg-hero, none);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             var(--zn-hero-bg-opacity);
  pointer-events:      none;
  z-index:             0;
}
.zn-hero__bg-grid {
  position:           absolute;
  inset:              0;
  background-image:   linear-gradient(rgba(var(--zn-primary-rgb), 0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(var(--zn-primary-rgb), 0.04) 1px, transparent 1px);
  background-size:    60px 60px;
  mask-image:         radial-gradient(ellipse 80% 80% at 40% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 40% 50%, #000 30%, transparent 100%);
  pointer-events:     none;
}
.zn-hero__bg-glow {
  position:       absolute;
  top:            50%;
  left:           20%;
  transform:      translateY(-50%);
  width:          500px;
  height:         500px;
  background:     radial-gradient(circle, rgba(var(--zn-primary-rgb), 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero inner: FLEXBOX — text left, visual right */
.zn-hero__inner {
  position:        relative;
  z-index:         1;
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center;
  gap:             60px;
  width:           100%;
}

/* Text (always LEFT, order 1) */
.zn-hero__text {
  flex:           1 1 0%;
  min-width:      0;
  order:          1 !important;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  animation:      znFadeUp 0.7s ease both;
}
.zn-hero__h1 {
  font-family:    'Montserrat', sans-serif;
  font-size:      clamp(38px, 5vw, 74px);
  font-weight:    800;
  line-height:    1.05;
  color:          var(--zn-text);
  margin-bottom:  20px;
  letter-spacing: -0.025em;
}
.zn-hero__sub {
  font-size:     17px;
  color:         var(--zn-text-muted);
  max-width:     440px;
  line-height:   1.75;
  font-weight:   400;
  margin-bottom: 32px;
}

/* Mobile badge row — hidden on desktop */
.zn-hero__badges-mobile { display: none; }
.zn-hero__badge-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     'Montserrat', sans-serif;
  font-size:       12px;
  font-weight:     600;
  color:           var(--zn-text);
  background:      var(--zn-light);
  border:          1px solid var(--zn-border);
  border-radius:   30px;
  padding:         7px 12px 7px 6px;
  white-space:     nowrap;
  box-shadow:      0 2px 8px rgba(0,0,0,0.06);
}
.zn-hero__badge-dot {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      var(--zn-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.zn-hero__badge-dot svg { width: 11px; height: 11px; stroke: #fff; display: block; }

/* Visual (always RIGHT, order 2) */
.zn-hero__visual {
  flex:            1 1 0%;
  min-width:       0;
  order:           2 !important;
  position:        relative;
  height:          500px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  animation:       znFadeUp 0.7s 0.15s ease both;
}
.zn-hero__vis-glow {
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 55% 55% at 50% 50%, rgba(var(--zn-primary-rgb), 0.06), transparent 70%);
  pointer-events: none;
}
.zn-hero__vis-ring {
  position:      absolute;
  border-radius: 50%;
  top:           50%;
  left:          50%;
  transform:     translate(-50%,-50%);
  animation:     znOrbit 30s linear infinite;
  pointer-events: none;
}
.zn-hero__vis-ring--sm {
  width: 300px; height: 300px;
  border: 1px solid rgba(var(--zn-primary-rgb), 0.1);
}
.zn-hero__vis-ring--lg {
  width: 460px; height: 460px;
  border: 1px solid rgba(var(--zn-primary-rgb), 0.06);
  animation-duration: 48s;
  animation-direction: reverse;
}
.zn-hero__product-img {
  position:   relative;
  z-index:    2;
  max-height: 420px;
  max-width:  100%;
  object-fit: contain;
  filter:     drop-shadow(0 16px 40px rgba(0,0,0,0.12));
  animation:  znFloat 4s ease-in-out infinite;
}

/* Floating badges (desktop — light theme) */
.zn-hero__float {
  position:        absolute;
  z-index:         3;
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     'Montserrat', sans-serif;
  font-size:       12px;
  font-weight:     600;
  color:           var(--zn-text);
  background:      var(--zn-light);
  border:          1px solid var(--zn-border);
  border-radius:   30px;
  padding:         8px 14px 8px 8px;
  box-shadow:      0 4px 16px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space:     nowrap;
  animation:       znFloat 4s ease-in-out infinite;
}
.zn-hero__float--tl { top: 16%;  left: -4%;  animation-delay: 0s; }
.zn-hero__float--br { bottom: 16%; right: -4%; animation-delay: 2s; }
.zn-hero__float-dot {
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--zn-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.zn-hero__float-dot svg { width: 12px; height: 12px; stroke: #fff; display: block; }

/* ── BENEFITS BAR  (LIGHT — inline with page) ───────────────── */
.zn-stats {
  background:    var(--zn-light);
  border-top:    1px solid var(--zn-border);
  border-bottom: 1px solid var(--zn-border);
  padding:       48px 0;
  margin-bottom: 0 !important;
}
.zn-stats__grid {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       nowrap;
  gap:             0;
}
.zn-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        12px 20px;
  flex:           1 1 0%;
  gap:            10px;
  border-right:   1px solid var(--zn-border);
}
.zn-stat:last-child { border-right: none; }
.zn-stat__icon {
  width:           56px;
  height:          56px;
  background:      var(--zn-primary-bg);
  border:          1px solid var(--zn-primary-bdr);
  border-radius:   14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--zn-primary);
  flex-shrink:     0;
  transition:      background 0.2s, box-shadow 0.2s;
}
.zn-stat__icon svg { width: 24px; height: 24px; }
.zn-stat:hover .zn-stat__icon {
  background: rgba(var(--zn-primary-rgb), 0.14);
  box-shadow: 0 0 16px rgba(var(--zn-primary-rgb), 0.1);
}
.zn-stat__body { display: flex; flex-direction: column; gap: 3px; }
.zn-stat__label {
  font-family: 'Montserrat', sans-serif;
  font-size:   13px;
  font-weight: 700;
  color:       var(--zn-text);
  line-height: 1.2;
}
.zn-stat__sub {
  font-family: 'Montserrat', sans-serif;
  font-size:   11px;
  font-weight: 400;
  color:       var(--zn-text-muted);
}

/* ── FEATURED PRODUCTS WRAPPER (.zn-block-1) ────────────────── */
/* ★ v5.4: BG now matches HERO exactly — cover + center + no-repeat.
   Identical rendering behaviour at every breakpoint. */
.zn-wrap.zn-block-1 {
  background-color: var(--zn-light);
  position:         relative;
  margin-top:       0 !important;
  padding-top:      0 !important;
}
.zn-wrap.zn-block-1 > * {
  position: relative;
  z-index:  1;
}
.zn-wrap.zn-block-1::after {
  content:             '';
  position:            absolute;
  inset:               0;
  background-image:    var(--zn-bg-products, none);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             var(--zn-products-bg-opacity);
  pointer-events:      none;
  z-index:             0;
}

/* ── FEATURED PRODUCTS HEADER  (LIGHT — centered layout) ─────── */
.zn-products-hdr {
  background: transparent;
  padding:    56px 0 28px;
  margin:     0 !important;
}
.zn-products-hdr__inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             20px;
}
.zn-products-hdr__text {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}
.zn-products-hdr__sub {
  font-family: 'Montserrat', sans-serif;
  font-size:   15px;
  color:       var(--zn-text-muted);
  margin-top:  8px;
  max-width:   520px;
}

/* ── WOOCOMMERCE PRODUCT GRID  (LIGHT BG) ────────────────────── */
.wp-block-shortcode {
  background: transparent !important;
  padding:    0 !important;
  margin:     0 !important;
}
.wp-block-shortcode .woocommerce,
.wp-block-shortcode .woocommerce-page {
  background-color:    transparent !important;
  padding:             0 0 80px !important;
}
.zn-wrap.zn-block-1 > .woocommerce,
.zn-wrap.zn-block-1 > .woocommerce.columns-4 {
  padding-bottom: 80px !important;
}























/* ── COA SECTION  (LIGHT-ALT — soft gray bg) ─────────────────── */
.zn-coa__layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr auto;
  grid-template-areas:
    "text  media"
    "cta   media";
  column-gap: 72px;
  row-gap:    0;
  align-items: start;
}
.zn-coa__text  { grid-area: text;  padding-top: 4px; }
.zn-coa__media { grid-area: media; align-self: stretch; }
.zn-coa__cta   { grid-area: cta;   padding-top: 28px; }

.zn-coa__body {
  font-size:     16px;
  color:         var(--zn-text-muted);
  line-height:   1.78;
  max-width:     460px;
}

.zn-coa__img-wrap {
  width:         100%;
  height:        100%;
  min-height:    320px;
  border-radius: 16px;
  overflow:      hidden;
  border:        none;
  background:    transparent;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.zn-coa__img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}
.zn-coa__placeholder {
  display:        none;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  padding:        48px 32px;
  text-align:     center;
  color:          #94a3b8;
}
.zn-coa__placeholder svg { width: 44px; height: 44px; stroke: var(--zn-primary-bdr); }
.zn-coa__placeholder span { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: var(--zn-text-muted); }
.zn-coa__placeholder small { font-family: 'Montserrat', sans-serif; font-size: 10px; color: #94a3b8; line-height: 1.7; }

/* ── FILLER / NEXT-GEN SECTION  (LIGHT — with bg texture) ────── */
.zn-filler {
  position:      relative;
  background:    var(--zn-light);
  border-top:    none;
  border-bottom: none;
  overflow:      hidden;
}
.zn-filler::before {
  content:             '';
  position:            absolute;
  inset:               0;
  background-image:    var(--zn-bg-filler, none);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             var(--zn-filler-bg-opacity);
  pointer-events:      none;
  z-index:             0;
}
.zn-filler > * {
  position: relative;
  z-index:  1;
}

.zn-filler__layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   72px;
  align-items:           center;
}
/* Image LEFT, text RIGHT on desktop */
.zn-filler__text-col { order: 2; }
.zn-filler__stats-col { order: 1; }
.zn-filler__body {
  font-size:     16px;
  color:         var(--zn-text-muted);
  line-height:   1.78;
  margin-bottom: 28px;
}

/* Feature cards */
.zn-filler__features {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-bottom:         32px;
}
.zn-filler__feat {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     14px 14px;
  background:  var(--zn-light-alt);
  border:      1px solid var(--zn-border);
  border-radius: 10px;
  font-size:   13px;
  color:       var(--zn-text);
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;
  transition:  border-color 0.2s;
}
.zn-filler__feat:hover { border-color: var(--zn-primary-bdr); }
.zn-filler__feat-icon {
  width:           30px;
  height:          30px;
  min-width:       30px;
  background:      var(--zn-primary-bg);
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--zn-primary);
}
.zn-filler__feat-icon svg { width: 14px; height: 14px; }

/* ── Right-side IMAGE (replaces old stat panel) ── */
.zn-filler__stats-col {
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.zn-filler__img-wrap {
  width:           100%;
  border-radius:   20px;
  overflow:        hidden;
  border:          none;
  background:      transparent;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      440px;
}
.zn-filler__img {
  width:      100%;
  height:     100%;
  min-height: 440px;
  object-fit: contain;
  display:    block;
}
.zn-filler__img-placeholder {
  display:        none;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
  padding:        48px 32px;
  text-align:     center;
  color:          #94a3b8;
}
.zn-filler__img-placeholder svg { width: 52px; height: 52px; stroke: var(--zn-primary-bdr); }
.zn-filler__img-placeholder span { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: var(--zn-text-muted); }
.zn-filler__img-placeholder small { font-family: 'Montserrat', sans-serif; font-size: 11px; color: #94a3b8; line-height: 1.7; }

/* Hide old stat panel elements if still in DOM (backward compat) */
.zn-filler__panel          { display: none !important; }
.zn-filler__panel-glow     { display: none !important; }
.zn-filler__panel-grid     { display: none !important; }
.zn-filler__stat-grid      { display: none !important; }
.zn-filler__stat-card      { display: none !important; }
.zn-filler__stat-icon      { display: none !important; }
.zn-filler__stat-num       { display: none !important; }
.zn-filler__stat-sup       { display: none !important; }
.zn-filler__stat-lbl       { display: none !important; }

/* ── FAQ SECTION  (LIGHT-ALT) ─────────────────────────────────── */
.zn-faq__header { text-align: center; margin-bottom: 48px; }
.zn-faq__sub {
  font-size:   15px;
  color:       var(--zn-text-muted);
  max-width:   520px;
  margin:      0 auto;
  line-height: 1.75;
  font-family: 'Montserrat', sans-serif;
}
.zn-faq__link { color: var(--zn-primary); border-bottom: 1px solid var(--zn-primary-bdr); }
.zn-faq__link:hover { border-color: var(--zn-primary); }

.zn-faq__list {
  max-width:      760px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
}
.zn-faq__item {
  border-bottom: 1px solid var(--zn-border);
}
.zn-faq__item:first-child { border-top: 1px solid var(--zn-border); }

/* FAQ button: full reset */
.zn-wrap .zn-faq__q {
  -webkit-appearance: none !important;
  appearance:         none !important;
  width:              100% !important;
  display:            flex !important;
  align-items:        center !important;
  gap:                14px !important;
  padding:            20px 4px !important;
  background:         transparent !important;
  background-color:   transparent !important;
  background-image:   none !important;
  border:             none !important;
  border-radius:      0 !important;
  box-shadow:         none !important;
  outline:            none !important;
  color:              var(--zn-text) !important;
  font-family:        'Montserrat', sans-serif !important;
  font-size:          16px !important;
  font-weight:        500 !important;
  cursor:             pointer !important;
  text-align:         left !important;
  transition:         color 0.2s !important;
}
.zn-wrap .zn-faq__q:hover,
.zn-wrap .zn-faq__q:focus,
.zn-wrap .zn-faq__q:active,
.zn-wrap .zn-faq__q[aria-expanded="true"] {
  background:       transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:       none !important;
  border:           none !important;
  outline:          none !important;
}
.zn-wrap .zn-faq__q:hover { color: var(--zn-primary) !important; }

.zn-faq__q-icon {
  width:           34px;
  height:          34px;
  min-width:       34px;
  background:      var(--zn-primary-bg);
  border:          1px solid var(--zn-primary-bdr);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--zn-primary);
  transition:      background 0.2s;
  flex-shrink:     0;
}
.zn-faq__q-icon svg { width: 14px; height: 14px; }
.zn-faq__item.open .zn-faq__q-icon { background: rgba(var(--zn-primary-rgb), 0.15); }

.zn-faq__q-text {
  flex:        1;
  min-width:   0;
  line-height: 1.4;
}
.zn-faq__chevron {
  margin-left: auto;
  flex-shrink: 0;
  color:       #94a3b8;
  transition:  transform 0.3s ease;
}
.zn-faq__chevron svg { width: 18px; height: 18px; display: block; }
.zn-faq__item.open .zn-faq__chevron { transform: rotate(180deg); color: var(--zn-primary); }

/* FAQ answer */
.zn-faq__a {
  max-height: 0 !important;
  overflow:   hidden !important;
  transition: max-height 0.36s ease;
}
.zn-faq__item.open .zn-faq__a {
  max-height: 600px !important;
}
.zn-faq__a p {
  font-size:   15px;
  color:       var(--zn-text-muted);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.82;
  padding:     0 4px 20px 48px;
}

/* ── DISCLAIMER  (DARK — footer band) ────────────────────────── */
.zn-disclaimer {
  background: var(--zn-dark);
  border-top: 1px solid var(--zn-border-dark);
  padding:    24px 0;
}
.zn-disclaimer p {
  font-family: 'Montserrat', sans-serif;
  font-size:   11px;
  color:       #475569;
  line-height: 1.85;
  text-align:  center;
  max-width:   960px;
  margin:      0 auto;
}
.zn-disclaimer strong { color: #ef4444; }

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes znFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes znOrbit {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes znFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}

/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 1024px) {
  .zn-hero__inner  { gap: 40px; }
  .zn-hero__visual { height: 420px; }
  .zn-hero__vis-ring--lg { width: 380px; height: 380px; }
  .zn-coa__layout  { column-gap: 48px; }
  .zn-filler__layout { gap: 48px; }
  .zn-filler__img-wrap { min-height: 380px; }
  .zn-filler__img     { min-height: 380px; }

  
}

@media (max-width: 900px) {
  .zn-hero__inner  { gap: 28px; }
  .zn-hero__visual { height: 360px; }
  .zn-stat         { padding: 10px 14px; }
  .zn-stat__icon   { width: 48px; height: 48px; border-radius: 13px; }
  .zn-stat__icon svg { width: 20px; height: 20px; }
  .zn-stat__label  { font-size: 12px; }
  .zn-stat__sub    { font-size: 10px; }
}

/* ── 768px: tablet — stack everything, visual BETWEEN text and button ── */
@media (max-width: 768px) {

  .zn-hero {
    min-height: auto;
    padding:    28px 0 36px;
    align-items: flex-start;
  }
  .zn-hero__inner {
    flex-direction:  column !important;
    gap:             0;
    align-items:     stretch;
    padding-top:     8px;
  }
  .zn-hero__text {
    order:       1 !important;
    align-items: center;
    text-align:  center;
  }
  .zn-hero__sub { max-width: 100%; font-size: 15px; margin-bottom: 20px; }

  /* Show visual on mobile, scaled down, above CTA button */
  .zn-hero__visual {
    order:           2 !important;
    display:         flex !important;
    width:           100% !important;
    max-width:       340px !important;
    height:          300px !important;
    margin:          8px auto 20px !important;
    flex:            none !important;
  }
  .zn-hero__vis-ring--sm { width: 220px !important; height: 220px !important; }
  .zn-hero__vis-ring--lg { width: 300px !important; height: 300px !important; }
  .zn-hero__product-img { max-height: 260px !important; }

  /* Floating badges stay visible, scaled down */
  .zn-hero__float {
    font-size: 11px !important;
    padding:   6px 10px 6px 6px !important;
    gap:       6px !important;
  }
  .zn-hero__float-dot     { width: 20px !important; height: 20px !important; }
  .zn-hero__float-dot svg { width: 10px !important; height: 10px !important; }
  .zn-hero__float--tl     { top: 8% !important; left: 2% !important; }
  .zn-hero__float--br     { bottom: 8% !important; right: 2% !important; }

  /* Hide the redundant pill badges since floats now show on mobile */
  .zn-hero__badges-mobile { display: none !important; }

  /* Benefits: 2×2 grid + 5th centered */
  .zn-stats { padding: 36px 0; }
  .zn-stats__grid {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   2px;
    max-width:             520px;
    margin:                0 auto;
  }
  .zn-stat {
    border-right:  none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-direction: row;
    text-align:    left;
    gap:           12px;
    padding:       16px 14px;
    flex:          unset;
  }
  .zn-stat__body { gap: 2px; }
  .zn-stat__label { font-size: 13px; }
  .zn-stat--centered {
    grid-column:     1 / 3;
    justify-content: center;
    text-align:      center;
    border-bottom:   none;
  }
  .zn-stat--centered .zn-stat__body { align-items: center; }

  
  

  .zn-products-hdr { padding: 32px 0 16px; }

  .zn-section { padding: 60px 0; }

  /* COA: stack */
  .zn-coa__layout {
    display:        flex !important;
    flex-direction: column !important;
    gap:            28px;
  }
  .zn-coa__text  { order: 1; }
  .zn-coa__media { order: 2; }
  .zn-coa__cta   { order: 3; padding-top: 0; }
  .zn-coa__body  { max-width: 100%; }
  .zn-coa__img-wrap { min-height: 240px; height: 240px; }

  /* Filler: stack — text above image on mobile */
  .zn-filler__layout {
    display:        flex !important;
    flex-direction: column !important;
    gap:            32px;
  }
  .zn-filler__text-col  { order: 1 !important; }
  .zn-filler__stats-col { order: 2 !important; }
  .zn-filler__img-wrap { min-height: 280px; }
  .zn-filler__img     { min-height: 280px; }
  .zn-filler__features { grid-template-columns: 1fr 1fr; gap: 8px; }

  .zn-faq__a p { padding-left: 8px; }
}

/* ── 480px: phone ── */
@media (max-width: 480px) {
  .zn-container { padding: 0 16px; }

  .zn-hero { padding: 24px 0 32px; }
  .zn-hero__h1 { font-size: clamp(28px, 9vw, 42px); margin-bottom: 14px; }
  .zn-hero__sub { font-size: 14px; margin-bottom: 16px; }

  /* Visual shrinks further on phone */
  .zn-hero__visual {
    max-width: 280px !important;
    height:    250px !important;
    margin:    4px auto 16px !important;
  }
  .zn-hero__vis-ring--sm { width: 180px !important; height: 180px !important; }
  .zn-hero__vis-ring--lg { width: 240px !important; height: 240px !important; }
  .zn-hero__product-img { max-height: 220px !important; }
  .zn-hero__float {
    font-size: 10px !important;
    padding:   5px 8px 5px 5px !important;
  }
  .zn-hero__float-dot     { width: 18px !important; height: 18px !important; }
  .zn-hero__float--tl     { top: 6% !important; left: 0 !important; }
  .zn-hero__float--br     { bottom: 6% !important; right: 0 !important; }

  /* Benefits: single column */
  .zn-stats__grid { grid-template-columns: 1fr !important; max-width: 100%; }
  .zn-stat--centered { grid-column: 1 / 2; justify-content: flex-start; text-align: left; }
  .zn-stat--centered .zn-stat__body { align-items: flex-start; }
  .zn-stat:last-child { border-bottom: none; }

  
  
  
  

  .zn-coa__img-wrap { min-height: 200px; height: 200px; }

  .zn-filler__features { grid-template-columns: 1fr; gap: 8px; }
  .zn-filler__img-wrap { min-height: 220px; }
  .zn-filler__img     { min-height: 220px; }

  .zn-section__heading { font-size: clamp(22px, 6.5vw, 32px); }

  .zn-wrap .zn-faq__q { font-size: 14px !important; padding: 16px 4px !important; gap: 10px !important; }
  .zn-faq__a p { font-size: 14px; padding: 0 4px 16px; }
  .zn-faq__q-icon { width: 30px; height: 30px; min-width: 30px; }

  .zn-btn--primary, .zn-btn--outline { font-size: 13px; padding: 11px 20px; }
  .zn-btn--cta { padding: 6px 6px 6px 16px !important; }
  .zn-btn__cta-circle { width: 32px; height: 32px; }
  .zn-btn__cta-circle svg { width: 14px; height: 14px; }

  .zn-disclaimer p { font-size: 10px; }
}

/* ── 360px: small phones ── */
@media (max-width: 360px) {
  .zn-hero__h1 { font-size: 26px; }
  .zn-hero__visual { max-width: 240px !important; height: 220px !important; }
  .zn-hero__vis-ring--sm { width: 160px !important; height: 160px !important; }
  .zn-hero__vis-ring--lg { width: 210px !important; height: 210px !important; }
  .zn-hero__product-img { max-height: 190px !important; }

  
}