/* ============================================================================
   ZMI HEALTHCARE THEME
   Complete theme stylesheet for the current PHP markup.

   Purpose:
   - Keeps the current ZMI website design from header.php, index.php, footer.php,
     main_original_bak.php and the old demo page.
   - Provides ZMI brand tokens, light/dark mode, layout helpers, card/hero/menu
     styling, carousel styling, marquee, reveal/stagger animations and the small
     legacy utility set used by the current markup.
   - This file is designed to run without any Tailwind CSS file or Tailwind build step.
   ============================================================================ */

/* ============================== TOKENS ============================== */
:root{
  color-scheme: light;

  --zmi-primary:#0d6efd;
  --zmi-primary-hover:#0b5ed7;
  --zmi-purple:#6f42c1;
  --zmi-cyan:#06b6d4;
  --zmi-green:#16a34a;
  --zmi-amber:#f59e0b;
  --zmi-rose:#f43f5e;

  --zmi-primary-rgb:13 110 253;
  --zmi-purple-rgb:111 66 193;
  --zmi-cyan-rgb:6 182 212;
  --zmi-green-rgb:22 163 74;
  --zmi-amber-rgb:245 158 11;
  --zmi-rose-rgb:244 63 94;

  --zmi-page:#ffffff;
  --zmi-card:#ffffff;
  --zmi-soft:#f6f9ff;
  --zmi-soft:color-mix(in oklab,#ffffff 88%,#eff4ff 12%);
  --zmi-border:#e5e7eb;
  --zmi-border-strong:#d8dee8;

  --zmi-text:#1f2937;
  --zmi-ink:#111827;
  --zmi-strong:#0f172a;
  --zmi-muted:#64748b;
  --zmi-muted-2:#7a889c;

  --zmi-link:#0d6efd;
  --zmi-link-hover:#0b5ed7;

  --zmi-tint-primary-4:#f4f8ff;
  --zmi-tint-primary-8:#ecf3ff;
  --zmi-tint-primary-12:#e3efff;
  --zmi-tint-primary-4:color-mix(in srgb,var(--zmi-card) 96%,var(--zmi-primary) 4%);
  --zmi-tint-primary-8:color-mix(in srgb,var(--zmi-card) 92%,var(--zmi-primary) 8%);
  --zmi-tint-primary-12:color-mix(in srgb,var(--zmi-card) 88%,var(--zmi-primary) 12%);

  --zmi-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --zmi-shadow:0 10px 28px rgba(13,110,253,.08);
  --zmi-shadow-md:0 16px 42px rgba(13,110,253,.11);
  --zmi-shadow-lg:0 24px 70px rgba(15,23,42,.16);

  --zmi-radius-sm:.375rem;
  --zmi-radius:.5rem;
  --zmi-radius-lg:.75rem;
  --zmi-radius-xl:1rem;
  --zmi-radius-2xl:1.25rem;
  --zmi-radius-3xl:1.5rem;

  --zmi-transition-fast:150ms ease;
  --zmi-transition:220ms ease;
  --zmi-transition-slow:420ms cubic-bezier(.22,.61,.36,1);
}

html.dark,
html[data-bs-theme="dark"],
[data-bs-theme="dark"]{
  color-scheme: dark;

  --zmi-page:#0b1220;
  --zmi-card:#0f172a;
  --zmi-soft:#0f1b33;
  --zmi-soft:color-mix(in oklab,#0f172a 92%,#17273f 8%);
  --zmi-border:#1f2a45;
  --zmi-border-strong:#2c3a59;

  --zmi-text:#e5e7eb;
  --zmi-ink:#f8fafc;
  --zmi-strong:#f8fafc;
  --zmi-muted:#9aa4b2;
  --zmi-muted-2:#7f8aa0;

  --zmi-link:#64a9ff;
  --zmi-link-hover:#8bbdff;

  --zmi-tint-primary-4:#101f38;
  --zmi-tint-primary-8:#132947;
  --zmi-tint-primary-12:#173358;
  --zmi-tint-primary-4:color-mix(in srgb,var(--zmi-card) 96%,var(--zmi-primary) 4%);
  --zmi-tint-primary-8:color-mix(in srgb,var(--zmi-card) 88%,var(--zmi-primary) 12%);
  --zmi-tint-primary-12:color-mix(in srgb,var(--zmi-card) 82%,var(--zmi-primary) 18%);

  --zmi-shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --zmi-shadow:0 10px 28px rgba(0,0,0,.26);
  --zmi-shadow-md:0 16px 42px rgba(0,0,0,.30);
  --zmi-shadow-lg:0 24px 70px rgba(0,0,0,.40);
}

/* ============================== BASE =============================== */
*,*::before,*::after{ box-sizing:border-box; border-color:var(--zmi-border); }
html{ min-height:100%; background:var(--zmi-page); scroll-behavior:smooth; }
body{
  min-height:100vh;
  margin:0;
  background:var(--zmi-page);
  color:var(--zmi-text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color var(--zmi-transition),color var(--zmi-transition);
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button,input,optgroup,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; opacity:.65; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:inherit; }
a:focus-visible,
button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--zmi-link) 65%,transparent);
  outline-offset:2px;
  border-radius:6px;
}
p,h1,h2,h3,h4,h5,h6{ margin-top:0; }
ul,ol{ margin-top:0; }

::selection{ background:color-mix(in srgb,var(--zmi-primary) 22%,transparent); color:var(--zmi-ink); }
.zmi-body{
  min-height:100vh;
  margin:0;
  background:var(--zmi-page);
  color:var(--zmi-ink);
}


/* explicit content links */
a.link,.prose a,.content a{ color:var(--zmi-link); }
a.link:hover,.prose a:hover,.content a:hover{ color:var(--zmi-link-hover); text-decoration:underline; }

/* ============================== COMPONENTS =============================== */
.shadow-soft{ box-shadow:var(--zmi-shadow); }

/* Header */
header.sticky,
#zmiNavBar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  background:var(--zmi-card);
  background:color-mix(in srgb,var(--zmi-card) 92%,transparent);
  border-bottom:1px solid var(--zmi-border);
  transition:background-color var(--zmi-transition),box-shadow var(--zmi-transition),border-color var(--zmi-transition),backdrop-filter var(--zmi-transition);
}
header.sticky.scrolled,
#zmiNavBar.scrolled{
  background:var(--zmi-card);
  box-shadow:var(--zmi-shadow-sm),0 10px 26px rgba(15,23,42,.06);
}
html.dark header.sticky.scrolled,
html.dark #zmiNavBar.scrolled,
[data-bs-theme="dark"] header.sticky.scrolled,
[data-bs-theme="dark"] #zmiNavBar.scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 30px rgba(0,0,0,.32);
}

#zmiNavBar a,
#zmiNavBar button{ transition:color var(--zmi-transition-fast),background-color var(--zmi-transition-fast),border-color var(--zmi-transition-fast),transform var(--zmi-transition-fast); }
#zmiNavBar .bi{ line-height:1; }

/* dropdown panels */
.fade-scale-enter{
  opacity:0;
  transform:translateY(10px) scale(.98);
  pointer-events:none;
  transition:opacity 180ms ease,transform 180ms ease,visibility 180ms ease;
  visibility:hidden;
}
.fade-scale-enter.show,
.nav-hover-open{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto !important;
  visibility:visible;
}
#megaDesktop{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--zmi-muted) 48%,transparent) transparent;
}
#megaDesktop::-webkit-scrollbar{ width:10px; }
#megaDesktop::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--zmi-muted) 35%,transparent); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
#megaDesktop::-webkit-scrollbar-track{ background:transparent; }

/* Hero */
.hero-slab{
  position:relative;
  overflow:hidden;
  border:1px solid var(--zmi-border);
  border-radius:20px;
  background:var(--zmi-soft);
  background:
    radial-gradient(1100px 260px at 15% -20%,rgba(13,110,253,.14),transparent 65%),
    radial-gradient(1000px 240px at 120% 0,rgba(111,66,193,.12),transparent 55%),
    var(--zmi-soft);
  isolation:isolate;
}
.hero-slab::before{
  content:"";
  position:absolute;
  inset:-30% -20%;
  z-index:0;
  background:
    radial-gradient(380px 220px at 12% 12%,rgba(13,110,253,.12),transparent 70%),
    radial-gradient(360px 210px at 88% 18%,rgba(111,66,193,.10),transparent 72%),
    radial-gradient(280px 180px at 55% 115%,rgba(6,182,212,.08),transparent 72%);
  opacity:.9;
  transform:translate3d(0,0,0);
  animation:zmiAmbientFloat 16s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-slab > *{ position:relative; z-index:1; }
html.dark .hero-slab,
[data-bs-theme="dark"] .hero-slab{
  background:var(--zmi-soft);
  background:
    radial-gradient(820px 220px at 15% -20%,rgba(13,110,253,.18),transparent 65%),
    radial-gradient(760px 200px at 120% 0,rgba(111,66,193,.16),transparent 55%),
    var(--zmi-soft);
}

.hero-illustration{
  position:relative;
  overflow:hidden;
  border:1px solid var(--zmi-border);
  border-radius:16px;
  background:#f3f7ff;
  background:
    radial-gradient(160px 110px at 25% 30%,rgba(13,110,253,.12),transparent 65%),
    radial-gradient(150px 100px at 75% 35%,rgba(111,66,193,.12),transparent 60%),
    linear-gradient(135deg,color-mix(in oklab,#ffffff 92%,#eef2ff 8%),color-mix(in oklab,#ffffff 92%,#eaf6ff 8%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.hero-illustration::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.24) 42%,transparent 70%);
  transform:translateX(-120%);
  animation:zmiImageShimmer 6.5s ease-in-out infinite;
  pointer-events:none;
}
.hero-illustration img{
  position:relative;
  z-index:1;
  transition:transform 800ms cubic-bezier(.22,.61,.36,1),filter 800ms ease;
}
.hero-illustration:hover img{ transform:scale(1.018); }
html.dark .hero-illustration,
[data-bs-theme="dark"] .hero-illustration{
  background:#0f1b33;
  background:
    radial-gradient(160px 110px at 25% 30%,rgba(13,110,253,.22),transparent 65%),
    radial-gradient(150px 100px at 75% 35%,rgba(111,66,193,.24),transparent 60%),
    linear-gradient(135deg,#0f1b33,#0f172a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
html.dark .hero-illustration::after,
[data-bs-theme="dark"] .hero-illustration::after{ background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.08) 42%,transparent 70%); }

/* Hero carousel */
.slides-wrap{
  position:relative;
  overflow:hidden;
  min-height:360px;
  transition:height 420ms cubic-bezier(.22,.61,.36,1);
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(100%);
  pointer-events:none;
  will-change:transform,opacity;
}
.slide.active{
  z-index:2;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  transition:transform 620ms cubic-bezier(.22,.61,.36,1),opacity 620ms ease;
}
.slide.exit-left{
  z-index:1;
  opacity:0;
  transform:translateX(-100%);
  transition:transform 620ms cubic-bezier(.22,.61,.36,1),opacity 620ms ease;
}
.slide.exit-right{
  z-index:1;
  opacity:0;
  transform:translateX(100%);
  transition:transform 620ms cubic-bezier(.22,.61,.36,1),opacity 620ms ease;
}
.slide-body{ min-height:360px; }
.indicator{
  border:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.55),0 2px 8px rgba(15,23,42,.18);
  transition:opacity var(--zmi-transition-fast),transform var(--zmi-transition-fast),background-color var(--zmi-transition-fast);
}
.indicator:hover{ transform:scale(1.2); opacity:1 !important; }
.arrow-btn{
  opacity:0;
  z-index:40;
  color:#111827;
  border:0;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:opacity var(--zmi-transition),background-color var(--zmi-transition),transform var(--zmi-transition),box-shadow var(--zmi-transition);
}
html.dark .arrow-btn,
[data-bs-theme="dark"] .arrow-btn{ color:#fff; background:rgba(15,23,42,.24); }
#zmiHero:hover .arrow-btn,
#zmiHero:focus-within .arrow-btn{ opacity:1; }
.arrow-btn:hover{ transform:translateY(-50%) scale(1.06); box-shadow:0 10px 20px rgba(15,23,42,.16); }

/* stagger/reveal */
.stagger-in{ opacity:0; }
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.show{ opacity:1; transform:none; transition:opacity 620ms ease,transform 620ms cubic-bezier(.22,.61,.36,1); }
.reveal:nth-child(2){ transition-delay:60ms; }
.reveal:nth-child(3){ transition-delay:110ms; }
.reveal:nth-child(4){ transition-delay:160ms; }

/* Clients marquee */
.clients{
  position:relative;
  overflow:hidden;
}
.clients::before,
.clients::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:9%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to right,var(--zmi-page),rgba(255,255,255,0));
}
.clients::before{ left:0; }
.clients::after{ right:0; transform:scaleX(-1); }
html.dark .clients::before,
html.dark .clients::after,
[data-bs-theme="dark"] .clients::before,
[data-bs-theme="dark"] .clients::after{ background:linear-gradient(to right,var(--zmi-page),rgba(11,18,32,0)); }
.clients-track{
  display:flex;
  gap:64px;
  padding:18px 0;
  will-change:transform;
  animation:zmiMarquee 28s linear infinite;
}
.clients:hover .clients-track{ animation-play-state:paused; }
.brand{
  opacity:.9;
  filter:none;
  transition:opacity var(--zmi-transition),filter var(--zmi-transition),transform var(--zmi-transition),color var(--zmi-transition);
}
.brand:hover{ opacity:1; filter:none; transform:translateY(-1px); color:var(--zmi-primary); }

/* Cards */
.card-surface{
  position:relative;
  background:var(--zmi-card);
  border:1px solid var(--zmi-border);
  border-radius:var(--zmi-radius-xl);
  box-shadow:0 1px 0 rgba(15,23,42,.02);
  transition:transform var(--zmi-transition),box-shadow var(--zmi-transition),border-color var(--zmi-transition),background-color var(--zmi-transition);
}
.card-surface::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(13,110,253,.045),rgba(111,66,193,.035));
  opacity:0;
  transition:opacity var(--zmi-transition);
  pointer-events:none;
}
.card-surface:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--zmi-primary) 24%,var(--zmi-border));
  box-shadow:var(--zmi-shadow-md);
}
.card-surface:hover::before{ opacity:1; }
.card-surface > *{ position:relative; z-index:1; }

/* Page/show content */
.page{
  max-width:80rem;
  margin:0 auto;
  padding:2.5rem 1rem;
  color:var(--zmi-text);
}
.page h1{ color:var(--zmi-strong); font-size:clamp(2rem,4vw,3.25rem); line-height:1.1; margin-bottom:1rem; font-weight:800; }
.content{ color:var(--zmi-text); }
.content p{ margin:0 0 1rem; color:var(--zmi-text); }
.content h2,.content h3{ color:var(--zmi-strong); margin-top:1.5rem; margin-bottom:.75rem; font-weight:700; }
.prose{ color:var(--zmi-text); max-width:72ch; }
.prose p{ margin:0 0 1rem; }
.prose ul,.prose ol{ margin:0 0 1rem 1.25rem; }
.prose h1,.prose h2,.prose h3,.prose h4{ color:var(--zmi-strong); font-weight:800; line-height:1.2; margin:1.35em 0 .6em; }
.dark\:prose-invert{ --tw-prose-body:var(--zmi-text); }

/* ============================== KEYFRAMES =============================== */
@keyframes zmiAmbientFloat{
  0%{ transform:translate3d(-1%,0,0) scale(1); opacity:.75; }
  50%{ transform:translate3d(1.5%,1%,0) scale(1.015); opacity:.95; }
  100%{ transform:translate3d(0,-1%,0) scale(1.03); opacity:.82; }
}
@keyframes zmiImageShimmer{
  0%,42%{ transform:translateX(-120%); }
  70%,100%{ transform:translateX(120%); }
}
@keyframes zmiMarquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes zmiFadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes zmiPulseSoft{
  0%,100%{ box-shadow:0 0 0 0 rgba(13,110,253,.20); }
  50%{ box-shadow:0 0 0 8px rgba(13,110,253,0); }
}

/* ============================== LEGACY VIEW UTILITY COMPATIBILITY =============================== */
/* These selectors preserve the current PHP view design after removing the generated utility CSS file. */

/* layout width */
.max-w-7xl{ max-width:80rem; }
.max-w-none{ max-width:none; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* display */
.block{ display:block; }
.inline{ display:inline; }
.inline-block{ display:inline-block; }
.flex{ display:flex; }
.inline-flex{ display:inline-flex; }
.grid{ display:grid; }
.hidden{ display:none; }
.contents{ display:contents; }

/* position */
.static{ position:static; }
.relative{ position:relative; }
.absolute{ position:absolute; }
.fixed{ position:fixed; }
.sticky{ position:sticky; }
.top-0{ top:0; }
.top-1\/2{ top:50%; }
.left-0{ left:0; }
.left-1\/2{ left:50%; }
.left-2{ left:.5rem; }
.right-2{ right:.5rem; }
.bottom-3{ bottom:.75rem; }
.z-20{ z-index:20; }
.z-50{ z-index:50; }

/* transforms */
.-translate-x-1\/2{ transform:translateX(-50%); }
.-translate-y-1\/2{ transform:translateY(-50%); }
.translate-x-\[-50\%\]{ transform:translateX(-50%); }
.transform{ transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1)); }

/* flex/grid */
.flex-col{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.items-start{ align-items:flex-start; }
.items-center{ align-items:center; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }
.grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
.gap-1{ gap:.25rem; }
.gap-1\.5{ gap:.375rem; }
.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-4{ gap:1rem; }
.gap-5{ gap:1.25rem; }
.gap-6{ gap:1.5rem; }
.gap-8{ gap:2rem; }
.order-1{ order:1; }
.order-2{ order:2; }
.order-3{ order:3; }
.order-last{ order:9999; }

/* spacing */
.m-0{ margin:0; }
.mt-0\.5{ margin-top:.125rem; }
.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:.75rem; }
.mt-4{ margin-top:1rem; }
.mt-16{ margin-top:4rem; }
.mb-0{ margin-bottom:0; }
.mb-1{ margin-bottom:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:.75rem; }
.mb-4{ margin-bottom:1rem; }
.mb-5{ margin-bottom:1.25rem; }
.mb-6{ margin-bottom:1.5rem; }
.ml-1{ margin-left:.25rem; }
.ml-2{ margin-left:.5rem; }
.ml-5{ margin-left:1.25rem; }
.ml-auto{ margin-left:auto; }
.mr-1{ margin-right:.25rem; }
.me-2{ margin-inline-end:.5rem; }
.my-3{ margin-top:.75rem; margin-bottom:.75rem; }

.p-1{ padding:.25rem; }
.p-1\.5{ padding:.375rem; }
.p-2{ padding:.5rem; }
.p-3{ padding:.75rem; }
.p-4{ padding:1rem; }
.p-5{ padding:1.25rem; }
.p-6{ padding:1.5rem; }
.p-8{ padding:2rem; }
.px-2{ padding-left:.5rem; padding-right:.5rem; }
.px-3{ padding-left:.75rem; padding-right:.75rem; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.px-5{ padding-left:1.25rem; padding-right:1.25rem; }
.px-6{ padding-left:1.5rem; padding-right:1.5rem; }
.py-1{ padding-top:.25rem; padding-bottom:.25rem; }
.py-1\.5{ padding-top:.375rem; padding-bottom:.375rem; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; }
.py-2\.5{ padding-top:.625rem; padding-bottom:.625rem; }
.py-3{ padding-top:.75rem; padding-bottom:.75rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }
.py-6{ padding-top:1.5rem; padding-bottom:1.5rem; }
.py-8{ padding-top:2rem; padding-bottom:2rem; }
.py-10{ padding-top:2.5rem; padding-bottom:2.5rem; }
.pb-3{ padding-bottom:.75rem; }

.space-y-1 > :not([hidden]) ~ :not([hidden]){ margin-top:.25rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ margin-top:.375rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]){ margin-top:.5rem; }

/* arbitrary property compatibility */
.\[image-rendering\:crisp-edges\]{ image-rendering:crisp-edges; }

/* sizing */
.w-2\.5{ width:.625rem; }
.w-7{ width:1.75rem; }
.w-9{ width:2.25rem; }
.w-60{ width:15rem; }
.w-72{ width:18rem; }
.w-full{ width:100%; }
.h-2\.5{ height:.625rem; }
.h-7{ height:1.75rem; }
.h-9{ height:2.25rem; }
.h-full{ height:100%; }
.max-h-\[360px\]{ max-height:360px; }
.min-h-screen{ min-height:100vh; }
.min-w-\[280px\]{ min-width:280px; }
.shrink-0{ flex-shrink:0; }

/* overflow/object */
.overflow-hidden{ overflow:hidden; }
.overflow-x-hidden{ overflow-x:hidden; }
.overflow-y-auto{ overflow-y:auto; }
.overscroll-contain{ overscroll-behavior:contain; }
.object-contain{ object-fit:contain; }
.whitespace-nowrap{ white-space:nowrap; }

/* borders/radius/shadow */
.border{ border-width:1px; border-style:solid; }
.border-b{ border-bottom-width:1px; border-bottom-style:solid; }
.border-t{ border-top-width:1px; border-top-style:solid; }
.border-\[var\(--zmi-border\)\],.border-zmi-border{ border-color:var(--zmi-border); }
.border-zmi-primary\/50{ border-color:color-mix(in srgb,var(--zmi-primary) 50%,transparent); }
.rounded{ border-radius:.25rem; }
.rounded-md{ border-radius:.375rem; }
.rounded-lg{ border-radius:.5rem; }
.rounded-xl{ border-radius:.75rem; }
.rounded-2xl{ border-radius:1rem; }
.rounded-3xl{ border-radius:1.5rem; }
.rounded-full{ border-radius:9999px; }
.shadow-sm{ box-shadow:var(--zmi-shadow-sm); }
.shadow-xl{ box-shadow:0 20px 25px -5px rgba(0,0,0,.10),0 8px 10px -6px rgba(0,0,0,.10); }
.shadow-2xl{ box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }

/* backgrounds */
.bg-\[var\(--zmi-page\)\]{ background-color:var(--zmi-page); }
.bg-\[var\(--zmi-card\)\]{ background-color:var(--zmi-card); }
.bg-zmi-card{ background-color:var(--zmi-card); }
.bg-zmi-soft{ background-color:var(--zmi-soft); }
.bg-zmi-primary{ background-color:var(--zmi-primary); }
.bg-zmi-purple{ background-color:var(--zmi-purple); }
.bg-zmi-cyan{ background-color:var(--zmi-cyan); }
.bg-zmi-green{ background-color:var(--zmi-green); }
.bg-zmi-amber{ background-color:var(--zmi-amber); }
.bg-zmi-rose{ background-color:var(--zmi-rose); }
.bg-black{ background-color:#000; }
.bg-slate-50{ background-color:#f8fafc; }
.bg-slate-100\/50{ background-color:rgba(241,245,249,.5); }

/* text */
.text-left{ text-align:left; }
.text-center{ text-align:center; }
.align-middle{ vertical-align:middle; }
.leading-none{ line-height:1; }
.leading-6{ line-height:1.5rem; }
.text-xs{ font-size:.75rem; line-height:1rem; }
.text-sm{ font-size:.875rem; line-height:1.25rem; }
.text-base{ font-size:1rem; line-height:1.5rem; }
.text-lg{ font-size:1.125rem; line-height:1.75rem; }
.text-xl{ font-size:1.25rem; line-height:1.75rem; }
.text-2xl{ font-size:1.5rem; line-height:2rem; }
.text-3xl{ font-size:1.875rem; line-height:2.25rem; }
.text-\[clamp\(1rem\,\.94rem_\+_\.2vw\,1\.08rem\)\]{ font-size:clamp(1rem,.94rem + .2vw,1.08rem); }
.font-semibold{ font-weight:600; }
.font-bold{ font-weight:700; }
.font-extrabold{ font-weight:800; }
.text-white{ color:#fff; }
.text-\[var\(--zmi-ink\)\]{ color:var(--zmi-ink); }
.text-\[var\(--zmi-text\)\]{ color:var(--zmi-text); }
.text-\[var\(--zmi-muted\)\]{ color:var(--zmi-muted); }
.text-\[var\(--zmi-strong\)\]{ color:var(--zmi-strong); }
.text-zmi-text{ color:var(--zmi-text); }
.text-zmi-muted{ color:var(--zmi-muted); }
.text-zmi-primary{ color:var(--zmi-primary); }
.text-zmi-purple{ color:var(--zmi-purple); }
.text-zmi-cyan{ color:var(--zmi-cyan); }
.text-zmi-green{ color:var(--zmi-green); }
.text-zmi-amber{ color:var(--zmi-amber); }
.text-zmi-rose{ color:var(--zmi-rose); }
.text-slate-500{ color:#64748b; }
.text-slate-600{ color:#475569; }
.text-slate-700{ color:#334155; }
.text-slate-800{ color:#1e293b; }
.text-green-500{ color:#22c55e; }
.text-green-600{ color:#16a34a; }
.text-emerald-600{ color:#059669; }
.text-amber-500{ color:#f59e0b; }
.opacity-0{ opacity:0; }
.opacity-50{ opacity:.5; }
.opacity-75{ opacity:.75; }
.opacity-90{ opacity:.9; }

/* lists */
.list-disc{ list-style-type:disc; }
.list-inside{ list-style-position:inside; }

/* accessibility */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.pointer-events-none{ pointer-events:none; }

/* transitions */
.transition{ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter; transition-duration:150ms; transition-timing-function:ease; }
.transition-colors{ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; transition-duration:150ms; transition-timing-function:ease; }
.transition-transform{ transition-property:transform; transition-duration:150ms; transition-timing-function:ease; }

/* hover/group utilities */
.hover\:-translate-y-1:hover{ transform:translateY(-.25rem); }
.hover\:underline:hover{ text-decoration:underline; }
.hover\:text-white:hover{ color:#fff; }
.hover\:text-zmi-primary:hover{ color:var(--zmi-primary); }
.hover\:bg-zmi-primary:hover{ background-color:var(--zmi-primary); color:#fff; }
.hover\:bg-slate-100:hover{ background-color:#f1f5f9; }
.hover\:bg-white\/5:hover{ background-color:rgba(255,255,255,.05); }
.hover\:bg-black\/10:hover{ background-color:rgba(0,0,0,.10); }
.hover\:bg-\[color-mix\(in_oklab\,var\(--zmi-card\)_80\%\,_\#0d6efd_8\%\)\]:hover,
.hover\:bg-\[var\(--zmi-tint-primary-8\)\]:hover{ background-color:var(--zmi-tint-primary-8); }
.group:hover .group-hover\:text-current{ color:currentColor; }
.group:hover .group-hover\:scale-\[1\.03\]{ transform:scale(1.03); }

/* dark-mode utilities */
html.dark .dark\:bg-white,
[data-bs-theme="dark"] .dark\:bg-white{ background-color:#fff; }
html.dark .dark\:bg-slate-800\/50,
[data-bs-theme="dark"] .dark\:bg-slate-800\/50{ background-color:rgba(30,41,59,.5); }
html.dark .dark\:bg-slate-900\/30,
[data-bs-theme="dark"] .dark\:bg-slate-900\/30{ background-color:rgba(15,23,42,.3); }
html.dark .dark\:text-slate-100,
[data-bs-theme="dark"] .dark\:text-slate-100{ color:#f1f5f9; }
html.dark .dark\:text-slate-300,
[data-bs-theme="dark"] .dark\:text-slate-300{ color:#cbd5e1; }
html.dark .dark\:text-slate-400,
[data-bs-theme="dark"] .dark\:text-slate-400{ color:#94a3b8; }
html.dark .dark\:hover\:bg-slate-800:hover,
[data-bs-theme="dark"] .dark\:hover\:bg-slate-800:hover{ background-color:#1e293b; }
html.dark .dark\:hover\:bg-white\/10:hover,
[data-bs-theme="dark"] .dark\:hover\:bg-white\/10:hover{ background-color:rgba(255,255,255,.10); }
html.dark .dark\:hover\:bg-white\/5:hover,
[data-bs-theme="dark"] .dark\:hover\:bg-white\/5:hover{ background-color:rgba(255,255,255,.05); }

/* responsive utilities */
@media (min-width:640px){
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:flex-row{ flex-direction:row; }
  .sm\:gap-6{ gap:1.5rem; }
  .sm\:px-6{ padding-left:1.5rem; padding-right:1.5rem; }
  .sm\:text-sm{ font-size:.875rem; line-height:1.25rem; }
}
@media (min-width:768px){
  .md\:col-span-1{ grid-column:span 1 / span 1; }
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .md\:order-1{ order:1; }
  .md\:order-2{ order:2; }
  .md\:order-3{ order:3; }
  .md\:order-4{ order:4; }
  .md\:text-base{ font-size:1rem; line-height:1.5rem; }
}
@media (min-width:1024px){
  .lg\:flex{ display:flex; }
  .lg\:hidden{ display:none !important; }
  .lg\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lg\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .lg\:gap-8{ gap:2rem; }
  .lg\:p-8{ padding:2rem; }
  .lg\:px-8{ padding-left:2rem; padding-right:2rem; }
  .lg\:text-4xl{ font-size:2.25rem; line-height:2.5rem; }
  .lg\:text-5xl{ font-size:3rem; line-height:1; }
}
@media (max-width:1023.98px){
  #megaDesktop{ display:none !important; }
}

/* local improvements */
@media (max-width:767.98px){
  .hero-slab{ border-radius:18px; }
  .slide-body{ min-height:auto; }
  .slides-wrap{ min-height:520px; }
  .clients-track{ gap:36px; animation-duration:34s; }
  .arrow-btn{ opacity:1; }
}
@media (max-width:575.98px){
  .slides-wrap{ min-height:560px; }
  .hero-illustration{ min-height:220px; }
  .text-3xl{ font-size:1.65rem; line-height:2rem; }
  .lg\:text-4xl,.lg\:text-5xl{ font-size:1.85rem; line-height:2.15rem; }
}

/* motion safety */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
  .clients-track{ animation:none !important; }
  .slide,.slide.active,.slide.exit-left,.slide.exit-right{ transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Compatibility for old demo/reference markup */
.scroll-smooth{ scroll-behavior:smooth; }
html.dark .dark\:text-slate-200,
[data-bs-theme="dark"] .dark\:text-slate-200{ color:#e2e8f0; }

/* ==========================================================================
   BOOTSTRAP MIGRATION RECOVERY PATCH
   Purpose: fixes layout regressions after removing Tailwind and loading Bootstrap.
   Keep this at the end of theme.css so it overrides Bootstrap's default ul/button
   styling and provides safe CSS animation fallback when theme.js is not ready.
   ========================================================================== */

/* Header list/button reset: Bootstrap/browser defaults were showing bullets and grey buttons. */
#zmiNavBar ul,
#zmiNavBar ol,
#megaDesktop ul,
#megaDesktop ol,
#navMenu ul,
#navMenu ol{
  list-style:none !important;
  padding-left:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

#zmiNavBar li::marker,
#megaDesktop li::marker,
#navMenu li::marker{
  content:"" !important;
}

#zmiNavBar button{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  color:inherit;
}

#zmiNavBar button:hover,
#zmiNavBar button:focus{
  color:inherit;
}

#themeToggle,
#themeToggle2,
#navToggle{
  border:1px solid var(--zmi-border) !important;
  background:color-mix(in srgb,var(--zmi-card) 92%,var(--zmi-primary) 2%) !important;
}

#themeToggle:hover,
#themeToggle2:hover,
#navToggle:hover{
  background:var(--zmi-tint-primary-8) !important;
  border-color:color-mix(in srgb,var(--zmi-primary) 30%,var(--zmi-border)) !important;
}

#zmiNavBar .group,
#zmiNavBar .inline-flex,
#zmiNavBar .flex{
  text-decoration:none !important;
}

/* Remove Bootstrap underline/default link behavior inside the navigation and cards. */
#zmiNavBar a,
.card-surface a,
.hero-slab a,
footer a{
  text-decoration:none;
}

/* Make desktop nav look like the original clean demo. */
#zmiNavBar .lg\:flex > li,
#zmiNavBar ul.hidden.lg\:flex > li,
#zmiNavBar ul.lg\:flex > li{
  display:flex;
  align-items:center;
}

#zmiNavBar ul.hidden.lg\:flex,
#zmiNavBar ul.lg\:flex{
  align-items:center;
}

#zmiNavBar ul.hidden.lg\:flex > li > a,
#zmiNavBar ul.hidden.lg\:flex > li > button,
#zmiNavBar ul.lg\:flex > li > a,
#zmiNavBar ul.lg\:flex > li > button{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  min-height:2.25rem;
  border-radius:.5rem;
}

/* Mega and dropdown panels should float above hero cleanly. */
#megaDesktop,
#zmiNavBar ul.fade-scale-enter{
  background:var(--zmi-card) !important;
  border:1px solid var(--zmi-border) !important;
  box-shadow:var(--zmi-shadow-lg) !important;
}

#megaDesktop a,
#zmiNavBar ul.fade-scale-enter a{
  display:block;
  color:var(--zmi-text);
}

#megaDesktop a:hover,
#zmiNavBar ul.fade-scale-enter a:hover{
  color:var(--zmi-primary) !important;
  background:var(--zmi-tint-primary-8) !important;
}

/* Safe animation fallback: previously .stagger-in and .reveal stayed opacity:0
   if the old Tailwind/inline JS animation did not run. */
.stagger-in{
  opacity:1;
}

.slide.active .stagger-in{
  opacity:0;
  animation:zmiRise 520ms cubic-bezier(.22,.61,.36,1) both;
}

.slide.active .stagger-in:nth-child(1){ animation-delay:80ms; }
.slide.active .stagger-in:nth-child(2){ animation-delay:150ms; }
.slide.active .stagger-in:nth-child(3){ animation-delay:220ms; }
.slide.active .stagger-in:nth-child(4){ animation-delay:290ms; }
.slide.active .stagger-in:nth-child(5){ animation-delay:360ms; }

.reveal{
  opacity:1 !important;
  transform:none !important;
  animation:zmiReveal 640ms cubic-bezier(.22,.61,.36,1) both;
}

.reveal.show{
  opacity:1 !important;
  transform:none !important;
}

/* Hero fallback layout without Tailwind. */
.slide-body.grid,
.slide-body{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  align-items:center;
}

@media (min-width:1024px){
  .slide-body.lg\:grid-cols-2,
  .slide-body{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}

.slide.active .hero-illustration{
  animation:zmiHeroMediaIn 680ms cubic-bezier(.22,.61,.36,1) both;
}

/* Fix Bootstrap's default p margin in compact blocks where Tailwind used mb-0. */
.mb-0{ margin-bottom:0 !important; }

/* Keep hero height stable after removing Tailwind. */
#zmiHero,
.slides-wrap{
  width:100%;
}

.hero-slab{
  min-height:0;
}

.hero-illustration img{
  width:100%;
  height:100%;
  max-height:360px;
  object-fit:contain;
}

/* Ensure hidden mobile menu stays hidden on desktop and visible toggle works. */
#navMenu.hidden{
  display:none !important;
}

@media (min-width:1024px){
  #navMenu{
    display:none !important;
  }
}

@media (max-width:1023.98px){
  #zmiNavBar ul.hidden.lg\:flex,
  #zmiNavBar ul.lg\:flex{
    display:none !important;
  }
}

/* Bootstrap migration animation keyframes. */
@keyframes zmiReveal{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes zmiRise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes zmiHeroMediaIn{
  from{ opacity:.72; transform:translateX(18px) scale(.985); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}

@media (prefers-reduced-motion:reduce){
  .slide.active .stagger-in,
  .slide.active .hero-illustration,
  .reveal{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ============================================================================
   ZMI DATABASE-AWARE BOOTSTRAP FINAL PATCH
   Purpose:
   - Preserve DB-driven menu/content; do not hardcode menu items in CSS/JS.
   - Fix navbar display after Tailwind removal.
   - Make the mega menu adapt to the actual database menu group count.
   - Soften dark mode to avoid high-contrast black/white appearance.
   - Improve hero carousel and clients ticker stability.
   ============================================================================ */

/* Softer dark mode: not pure black, not high-contrast white borders. */
html.dark,
html[data-bs-theme="dark"]{
  color-scheme:dark;

  --zmi-page:#111827;
  --zmi-card:#151f32;
  --zmi-soft:#18243a;
  --zmi-border:#2a354a;
  --zmi-border-strong:#36435b;

  --zmi-text:#d7deea;
  --zmi-ink:#edf2fa;
  --zmi-strong:#f3f6fb;
  --zmi-muted:#aab4c3;
  --zmi-muted-2:#8d99ab;

  --zmi-link:#78b7ff;
  --zmi-link-hover:#9ccaff;

  --zmi-tint-primary-4:#182840;
  --zmi-tint-primary-8:#1b304f;
  --zmi-tint-primary-12:#203a60;

  --zmi-shadow-sm:0 1px 2px rgba(0,0,0,.18);
  --zmi-shadow:0 12px 30px rgba(0,0,0,.18);
  --zmi-shadow-md:0 18px 44px rgba(0,0,0,.22);
  --zmi-shadow-lg:0 26px 70px rgba(0,0,0,.28);
}

html.dark body,
html[data-bs-theme="dark"] body,
html.dark .zmi-body,
html[data-bs-theme="dark"] .zmi-body{
  background:var(--zmi-page) !important;
  color:var(--zmi-text) !important;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6{
  color:var(--zmi-strong);
}

/* Header layout and navbar item visibility. */
#zmiNavBar{
  background:var(--zmi-card) !important;
  border-bottom:1px solid var(--zmi-border) !important;
}

#zmiNavBar nav{
  max-width:80rem;
  margin-inline:auto;
}

#zmiNavBar nav > .relative.flex{
  min-height:4.125rem;
  gap:1.25rem;
}

#zmiNavBar a,
#zmiNavBar button{
  text-decoration:none !important;
}

#zmiNavBar ul,
#zmiNavBar ol,
#megaDesktop ul,
#megaDesktop ol,
#navMenu ul,
#navMenu ol{
  list-style:none !important;
  padding-left:0 !important;
  margin:0 !important;
}

#zmiNavBar li::marker,
#megaDesktop li::marker,
#navMenu li::marker{
  content:"" !important;
}

#zmiNavBar button{
  appearance:none !important;
  -webkit-appearance:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:var(--zmi-ink) !important;
}

#zmiNavBar a{
  color:var(--zmi-ink);
}

#zmiNavBar .font-semibold,
#zmiNavBar .font-bold{
  color:var(--zmi-ink);
}

#zmiNavBar ul.hidden.lg\:flex,
#zmiNavBar ul.lg\:flex{
  align-items:center !important;
  gap:.75rem !important;
}

#zmiNavBar ul.hidden.lg\:flex > li,
#zmiNavBar ul.lg\:flex > li{
  display:flex !important;
  align-items:center !important;
  min-width:max-content;
}

#zmiNavBar ul.hidden.lg\:flex > li > a,
#zmiNavBar ul.hidden.lg\:flex > li > button,
#zmiNavBar ul.lg\:flex > li > a,
#zmiNavBar ul.lg\:flex > li > button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.35rem !important;
  min-height:2.5rem;
  padding:.55rem .8rem !important;
  border-radius:.6rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
  background:transparent !important;
  color:var(--zmi-ink) !important;
  border:1px solid transparent !important;
}

#zmiNavBar ul.hidden.lg\:flex > li > a:hover,
#zmiNavBar ul.hidden.lg\:flex > li > button:hover,
#zmiNavBar ul.lg\:flex > li > a:hover,
#zmiNavBar ul.lg\:flex > li > button:hover,
#zmiNavBar ul.hidden.lg\:flex > li:hover > button,
#zmiNavBar ul.lg\:flex > li:hover > button{
  color:var(--zmi-primary) !important;
  background:var(--zmi-tint-primary-8) !important;
  border-color:color-mix(in srgb,var(--zmi-primary) 18%,var(--zmi-border)) !important;
}

#zmiNavBar .ml-auto{
  margin-left:auto !important;
}

#themeToggle,
#themeToggle2,
#navToggle{
  border:1px solid var(--zmi-border) !important;
  background:color-mix(in srgb,var(--zmi-card) 94%,var(--zmi-primary) 3%) !important;
  color:var(--zmi-ink) !important;
}

#themeToggle:hover,
#themeToggle2:hover,
#navToggle:hover{
  background:var(--zmi-tint-primary-8) !important;
  border-color:color-mix(in srgb,var(--zmi-primary) 28%,var(--zmi-border)) !important;
}

/* Desktop dropdown and DB-driven mega menu. */
#megaDesktop,
#zmiNavBar ul.fade-scale-enter{
  background:var(--zmi-card) !important;
  color:var(--zmi-text) !important;
  border:1px solid var(--zmi-border) !important;
  box-shadow:var(--zmi-shadow-lg) !important;
}

#megaDesktop{
  width:min(1240px,calc(100vw - 1.5rem)) !important;
  max-width:calc(100vw - 1.5rem) !important;
  padding:1.15rem !important;
  border-radius:1rem !important;
  overflow-x:hidden !important;
}

#megaDesktop > .grid{
  display:grid !important;
  grid-template-columns:repeat(var(--zmi-mega-columns,5),minmax(0,1fr)) !important;
  gap:1.15rem !important;
  min-width:0 !important;
  width:100% !important;
}

#megaDesktop > .grid > div{
  min-width:0 !important;
}

#megaDesktop .font-extrabold{
  display:flex;
  align-items:center;
  gap:.4rem;
  color:var(--zmi-strong);
  font-size:.95rem;
  line-height:1.25;
  margin-bottom:.65rem !important;
  white-space:normal;
}

#megaDesktop a,
#zmiNavBar ul.fade-scale-enter a{
  display:block !important;
  color:var(--zmi-text) !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
  line-height:1.35 !important;
  border-radius:.55rem !important;
}

#megaDesktop a:hover,
#zmiNavBar ul.fade-scale-enter a:hover{
  color:var(--zmi-primary) !important;
  background:var(--zmi-tint-primary-8) !important;
}

#zmiNavBar ul.fade-scale-enter{
  min-width:15rem;
  padding:.5rem !important;
}

@media (max-width:1199.98px){
  #megaDesktop > .grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:1023.98px){
  #megaDesktop{ display:none !important; }

  #zmiNavBar nav > .relative.flex{
    min-height:3.75rem;
  }

  #zmiNavBar ul.hidden.lg\:flex,
  #zmiNavBar ul.lg\:flex{
    display:none !important;
  }

  #navMenu{
    border-top:1px solid var(--zmi-border);
    padding-top:.75rem;
  }

  #navMenu a,
  #navMenu button{
    width:100%;
    justify-content:space-between;
  }
}

/* Softer dark hero and cards. */
html.dark .hero-slab,
html[data-bs-theme="dark"] .hero-slab{
  background:
    radial-gradient(900px 240px at 12% -20%,rgba(13,110,253,.13),transparent 62%),
    radial-gradient(760px 220px at 110% 0,rgba(111,66,193,.10),transparent 58%),
    #151f32 !important;
  border-color:var(--zmi-border) !important;
}

html.dark .hero-illustration,
html[data-bs-theme="dark"] .hero-illustration,
html.dark .card-surface,
html[data-bs-theme="dark"] .card-surface{
  background:#172238 !important;
  border-color:var(--zmi-border) !important;
}

html.dark .bg-slate-50,
html[data-bs-theme="dark"] .bg-slate-50,
html.dark .dark\:bg-slate-900\/30,
html[data-bs-theme="dark"] .dark\:bg-slate-900\/30{
  background-color:#111827 !important;
}

/* Hero carousel: stable text/media alignment and better indicators. */
#zmiHero,
.slides-wrap{
  width:100%;
}

.slide-body{
  min-height:360px;
}

.slide-body.grid,
.slide-body{
  display:grid !important;
  grid-template-columns:1fr;
  gap:1.5rem;
  align-items:center;
}

@media (min-width:1024px){
  .slide-body.lg\:grid-cols-2,
  .slide-body{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
}

.stagger-in{
  opacity:1;
}

.slide.active .stagger-in{
  opacity:0;
  animation:zmiRise 520ms cubic-bezier(.22,.61,.36,1) both;
}

.slide.active .hero-illustration{
  animation:zmiHeroMediaIn 680ms cubic-bezier(.22,.61,.36,1) both;
}

.indicator{
  width:.7rem !important;
  height:.7rem !important;
  border:2px solid color-mix(in srgb,var(--zmi-ink) 55%,transparent) !important;
  background:transparent !important;
  box-shadow:none !important;
}

.indicator.active,
.indicator[aria-current="true"]{
  background:var(--zmi-primary) !important;
  border-color:var(--zmi-primary) !important;
  opacity:1 !important;
}

.hero-illustration img{
  width:100%;
  height:100%;
  max-height:360px;
  object-fit:contain;
}

.reveal{
  opacity:1 !important;
  transform:none !important;
}

.reveal.show{
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:767.98px){
  .slides-wrap{ min-height:560px; }
  .slide-body{ min-height:520px; }
  .hero-illustration{ min-height:220px; }
  .arrow-btn{ opacity:1; }
}

/* Clients ticker: keep database items readable and smooth. */
.clients{
  border:1px solid var(--zmi-border);
  border-radius:.9rem;
  background:color-mix(in srgb,var(--zmi-card) 95%,var(--zmi-primary) 2%);
}

.clients-track{
  gap:4rem !important;
  padding:.95rem 0 !important;
  animation:zmiMarquee 34s linear infinite !important;
}

.brand{
  flex:0 0 auto;
  white-space:nowrap;
  color:var(--zmi-muted);
  opacity:.88 !important;
  filter:none !important;
}

.brand:hover{
  color:var(--zmi-primary);
}

/* Prevent accidental horizontal overflow from long DB menu labels. */
body,
.zmi-body{
  overflow-x:hidden;
}

@keyframes zmiRise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes zmiHeroMediaIn{
  from{ opacity:.78; transform:translateX(16px) scale(.985); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}

@media (prefers-reduced-motion:reduce){
  .slide.active .stagger-in,
  .slide.active .hero-illustration{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ============================================================================
   FINAL NAVBAR + CAROUSEL STABILITY PATCH
   Purpose:
   - Fix dropdown panels drawing behind sibling navbar items.
   - Keep DB-driven menu content; no menu labels are hardcoded here.
   - Center and constrain the mega menu so it never exits the viewport.
   - Soften dark mode while preserving the ZMI brand style.
   - Improve carousel dot/media behavior after Tailwind removal.
   ============================================================================ */

html.dark,
html[data-bs-theme="dark"]{
  --zmi-page:#172033;
  --zmi-card:#1d2940;
  --zmi-soft:#22314c;
  --zmi-border:#3a465b;
  --zmi-border-strong:#4a5870;
  --zmi-text:#dce4f1;
  --zmi-ink:#f0f4fb;
  --zmi-strong:#f7f9fd;
  --zmi-muted:#b5c0cf;
  --zmi-muted-2:#9daabc;
  --zmi-tint-primary-4:#21324e;
  --zmi-tint-primary-8:#263b5d;
  --zmi-tint-primary-12:#2b456e;
  --zmi-shadow-sm:0 2px 8px rgba(0,0,0,.16);
  --zmi-shadow:0 12px 30px rgba(0,0,0,.18);
  --zmi-shadow-md:0 18px 42px rgba(0,0,0,.22);
  --zmi-shadow-lg:0 26px 64px rgba(0,0,0,.26);
}

#zmiNavBar{
  z-index:1060 !important;
  overflow:visible !important;
}

#zmiNavBar nav,
#zmiNavBar nav > .relative.flex{
  overflow:visible !important;
}

#zmiNavBar nav > .relative.flex{
  min-height:4rem;
  column-gap:1.25rem;
}

#zmiNavBar .group.flex.items-center{
  flex:0 0 auto;
  min-width:max-content;
}

#zmiNavBar ul.hidden.lg\:flex,
#zmiNavBar ul.lg\:flex{
  display:none;
  flex:1 1 auto;
  min-width:0;
  align-items:center !important;
  gap:.45rem !important;
}

@media (min-width:1024px){
  #zmiNavBar ul.hidden.lg\:flex,
  #zmiNavBar ul.lg\:flex{
    display:flex !important;
  }
}

#zmiNavBar ul.hidden.lg\:flex.ml-auto,
#zmiNavBar ul.lg\:flex.ml-auto{
  flex:0 0 auto;
  margin-left:auto !important;
}

#zmiNavBar li.relative{
  position:relative !important;
  z-index:1;
}

#zmiNavBar li.relative.zmi-open,
#zmiNavBar li.relative:hover,
#zmiNavBar li.relative:focus-within{
  z-index:1080 !important;
}

#zmiNavBar ul.hidden.lg\:flex > li > a,
#zmiNavBar ul.hidden.lg\:flex > li > button,
#zmiNavBar ul.lg\:flex > li > a,
#zmiNavBar ul.lg\:flex > li > button{
  position:relative;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:2.35rem;
  padding:.52rem .72rem !important;
  border:1px solid transparent !important;
  border-radius:.6rem !important;
  background:transparent !important;
  color:var(--zmi-ink) !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}

#zmiNavBar ul.hidden.lg\:flex > li > a:hover,
#zmiNavBar ul.hidden.lg\:flex > li > button:hover,
#zmiNavBar ul.lg\:flex > li > a:hover,
#zmiNavBar ul.lg\:flex > li > button:hover,
#zmiNavBar li.zmi-open > button,
#zmiNavBar li.zmi-open > a{
  color:var(--zmi-primary) !important;
  background:var(--zmi-tint-primary-8) !important;
  border-color:color-mix(in srgb,var(--zmi-primary) 22%,var(--zmi-border)) !important;
}

#zmiNavBar ul.fade-scale-enter{
  position:absolute !important;
  top:calc(100% + .5rem) !important;
  left:0 !important;
  right:auto !important;
  z-index:1120 !important;
  min-width:16rem !important;
  max-width:min(22rem, calc(100vw - 2rem)) !important;
  margin-top:0 !important;
  padding:.55rem !important;
  border-radius:.85rem !important;
  background:var(--zmi-card) !important;
  border:1px solid var(--zmi-border) !important;
  box-shadow:var(--zmi-shadow-lg) !important;
}

#zmiNavBar ul.fade-scale-enter.show{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
}

#zmiNavBar ul.fade-scale-enter a{
  position:relative;
  display:block !important;
  width:100%;
  padding:.62rem .78rem !important;
  border-radius:.6rem !important;
  color:var(--zmi-text) !important;
  line-height:1.35 !important;
  white-space:normal !important;
}

#zmiNavBar ul.fade-scale-enter a:hover,
#zmiNavBar ul.fade-scale-enter a:focus{
  background:var(--zmi-tint-primary-8) !important;
  color:var(--zmi-primary) !important;
}

#megaDesktop{
  position:fixed !important;
  z-index:1130 !important;
  top:var(--zmi-mega-top, 4rem) !important;
  left:50vw !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(1080px, calc(100vw - 2rem)) !important;
  max-width:calc(100vw - 2rem) !important;
  max-height:calc(100vh - var(--zmi-mega-top, 4rem) - 1rem) !important;
  overflow:auto !important;
  padding:1.1rem !important;
  border-radius:1rem !important;
  background:var(--zmi-card) !important;
  border:1px solid var(--zmi-border) !important;
  box-shadow:var(--zmi-shadow-lg) !important;
}

#megaDesktop.show{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#megaDesktop > .grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap:1.15rem !important;
  width:100% !important;
  min-width:0 !important;
}

@media (min-width:1200px){
  #megaDesktop[data-group-count="1"] > .grid{ grid-template-columns:repeat(1, minmax(0, 1fr)) !important; }
  #megaDesktop[data-group-count="2"] > .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  #megaDesktop[data-group-count="3"] > .grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
  #megaDesktop[data-group-count="4"] > .grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
  #megaDesktop[data-group-count="5"] > .grid{ grid-template-columns:repeat(5, minmax(0, 1fr)) !important; }
}

#megaDesktop > .grid > div{
  min-width:0 !important;
}

#megaDesktop .font-extrabold{
  display:flex !important;
  align-items:center;
  gap:.45rem;
  min-height:1.5rem;
  margin-bottom:.55rem !important;
  color:var(--zmi-strong) !important;
  font-size:.92rem;
  line-height:1.25;
  white-space:normal;
}

#megaDesktop a{
  display:block !important;
  width:100%;
  padding:.45rem .55rem !important;
  border-radius:.55rem !important;
  color:var(--zmi-text) !important;
  font-size:.9rem;
  line-height:1.35 !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
}

#megaDesktop a:hover,
#megaDesktop a:focus{
  background:var(--zmi-tint-primary-8) !important;
  color:var(--zmi-primary) !important;
}

#themeToggle2,
#themeToggle,
#navToggle{
  background:color-mix(in srgb,var(--zmi-card) 96%,var(--zmi-primary) 3%) !important;
  border:1px solid var(--zmi-border) !important;
  color:var(--zmi-ink) !important;
  box-shadow:none !important;
}

#themeToggle2:hover,
#themeToggle:hover,
#navToggle:hover{
  background:var(--zmi-tint-primary-8) !important;
  border-color:color-mix(in srgb,var(--zmi-primary) 30%,var(--zmi-border)) !important;
}

.hero-slab{
  border-radius:1.35rem !important;
}

.slide-body{
  min-height:360px;
}

.hero-illustration{
  min-height:260px;
}

.hero-illustration img{
  width:100%;
  height:100%;
  max-height:360px;
  object-fit:cover;
  border-radius:.75rem;
}

.indicator{
  width:.72rem !important;
  height:.72rem !important;
  padding:0 !important;
  border:2px solid color-mix(in srgb,var(--zmi-muted) 70%,transparent) !important;
  background:transparent !important;
  opacity:.7 !important;
  box-shadow:none !important;
}

.indicator.active,
.indicator[aria-current="true"]{
  background:var(--zmi-primary) !important;
  border-color:var(--zmi-primary) !important;
  opacity:1 !important;
}

html.dark .hero-slab,
html[data-bs-theme="dark"] .hero-slab{
  background:
    radial-gradient(900px 260px at 14% -20%,rgba(13,110,253,.10),transparent 62%),
    radial-gradient(760px 230px at 110% 0,rgba(111,66,193,.08),transparent 58%),
    var(--zmi-card) !important;
}

html.dark .hero-illustration,
html[data-bs-theme="dark"] .hero-illustration{
  background:#22314c !important;
  border-color:var(--zmi-border) !important;
}

html.dark .card-surface,
html[data-bs-theme="dark"] .card-surface,
html.dark .clients,
html[data-bs-theme="dark"] .clients{
  background:#1d2940 !important;
  border-color:var(--zmi-border) !important;
}

.clients{
  overflow:hidden !important;
}

.clients-track{
  min-width:max-content;
}

.brand{
  flex:0 0 auto;
  white-space:nowrap;
}

@media (max-width:1199.98px){
  #megaDesktop{
    width:min(960px, calc(100vw - 2rem)) !important;
  }
  #megaDesktop > .grid{
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)) !important;
  }
}

@media (max-width:1023.98px){
  #megaDesktop,
  #zmiNavBar ul.hidden.lg\:flex,
  #zmiNavBar ul.lg\:flex{
    display:none !important;
  }

  #zmiNavBar nav > .relative.flex{
    min-height:3.75rem;
  }

  #navMenu:not(.hidden){
    display:block !important;
  }
}

@media (max-width:767.98px){
  .slides-wrap{ min-height:560px !important; }
  .slide-body{ min-height:520px !important; }
  .hero-illustration img{ object-fit:contain; }
}

/* ============================================================================
   ZMI LANDING PAGE PREMIUM REFRESH
   Purpose:
   - More professional, colorful, and calmer homepage design.
   - Keep all homepage text/content database-driven.
   - Reduce glow, remove heavy hero border, improve animation and fit.
   ============================================================================ */

.zmi-landing{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--zmi-page) 96%,var(--zmi-primary) 4%) 0%, var(--zmi-page) 18%, var(--zmi-page) 100%);
}

.zmi-landing::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:820px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(560px 260px at 8% 0%, rgba(13,110,253,.10), transparent 70%),
    radial-gradient(460px 240px at 96% 8%, rgba(6,182,212,.10), transparent 68%),
    linear-gradient(180deg, rgba(13,110,253,.035), transparent 72%);
  opacity:.92;
}

.zmi-landing > section{
  position:relative;
  z-index:1;
}

.zmi-section{
  position:relative;
  padding-top:3.5rem !important;
  padding-bottom:3.5rem !important;
}

.zmi-section-soft{
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 92%,var(--zmi-primary) 3%), color-mix(in srgb,var(--zmi-card) 96%,var(--zmi-cyan) 2%));
  border-block:1px solid color-mix(in srgb,var(--zmi-border) 80%,transparent);
}

.zmi-section-heading{
  max-width:760px;
}

.zmi-section-heading h2,
.zmi-section-heading h3,
.zmi-section h2,
.zmi-section h3{
  letter-spacing:-.035em;
  color:var(--zmi-strong);
}

.zmi-section-heading p,
.zmi-section > div > p{
  max-width:700px;
}

/* Hero: borderless, calm, premium */
.zmi-hero-section{
  padding-top:1.35rem !important;
  padding-bottom:2.75rem !important;
}

.hero-slab.zmi-hero-panel{
  border:0 !important;
  border-radius:1.8rem !important;
  box-shadow:0 18px 50px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,250,255,.96) 52%, rgba(239,248,255,.96)),
    linear-gradient(135deg, rgba(13,110,253,.08), rgba(6,182,212,.05)) !important;
  overflow:hidden;
}

.hero-slab.zmi-hero-panel::before{
  opacity:.55 !important;
  background:
    radial-gradient(520px 230px at 6% 0%, rgba(13,110,253,.11), transparent 68%),
    radial-gradient(420px 240px at 100% 0%, rgba(111,66,193,.09), transparent 64%),
    radial-gradient(340px 200px at 70% 105%, rgba(22,163,74,.07), transparent 64%) !important;
  animation:zmiPremiumAmbient 20s ease-in-out infinite alternate !important;
}

.zmi-hero-carousel{
  border-radius:1.35rem !important;
}

.zmi-hero-grid{
  min-height:420px !important;
  gap:2.4rem !important;
  padding:1rem;
}

.zmi-hero-copy{
  max-width:620px;
  padding:1rem !important;
}

.zmi-eyebrow{
  color:var(--zmi-primary) !important;
  background:rgba(13,110,253,.075) !important;
  border:1px solid rgba(13,110,253,.16) !important;
  box-shadow:none !important;
  font-weight:700;
  letter-spacing:.01em;
}

.zmi-hero-title{
  max-width:12.5em;
  font-size:clamp(2.15rem,4.25vw,4.1rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.055em;
  color:var(--zmi-strong);
}

.zmi-hero-subtitle{
  max-width:56ch;
  font-size:clamp(1rem,.93rem + .28vw,1.16rem);
  line-height:1.72;
  color:var(--zmi-muted) !important;
}

.zmi-btn{
  position:relative;
  isolation:isolate;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:3rem;
  font-weight:700;
  border-radius:.9rem !important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.zmi-btn-primary{
  border:1px solid color-mix(in srgb,var(--zmi-primary) 88%,#fff) !important;
  background:linear-gradient(135deg, var(--zmi-primary), color-mix(in srgb,var(--zmi-primary) 70%,var(--zmi-cyan) 30%)) !important;
  box-shadow:0 10px 22px rgba(13,110,253,.18) !important;
}

.zmi-btn-primary:hover{
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(13,110,253,.22) !important;
}

.zmi-hero-media{
  min-height:340px;
  border:0 !important;
  border-radius:1.35rem !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(245,249,255,.72)),
    linear-gradient(135deg, rgba(13,110,253,.07), rgba(6,182,212,.06)) !important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.18), 0 16px 34px rgba(15,23,42,.07) !important;
}

.zmi-hero-media::after{
  opacity:.35 !important;
  animation:zmiSubtleShimmer 9s ease-in-out infinite !important;
}

.zmi-hero-media img,
.hero-illustration img{
  object-fit:contain !important;
  padding:.25rem;
  filter:saturate(1.02) contrast(1.01);
}

.zmi-hero-dot.indicator{
  width:.78rem !important;
  height:.78rem !important;
  border:1px solid color-mix(in srgb,var(--zmi-primary) 45%,transparent) !important;
  background:rgba(255,255,255,.55) !important;
  opacity:.65 !important;
}

.zmi-hero-dot.indicator.active,
.zmi-hero-dot.indicator[aria-current="true"]{
  width:1.65rem !important;
  border-radius:999px !important;
  background:var(--zmi-primary) !important;
  border-color:var(--zmi-primary) !important;
  opacity:1 !important;
}

.zmi-hero-arrow{
  width:2.55rem;
  height:2.55rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.70) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  color:var(--zmi-ink) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}

/* Clients */
.zmi-client-strip.clients{
  border:0 !important;
  border-radius:1.35rem !important;
  background:color-mix(in srgb,var(--zmi-card) 94%,var(--zmi-primary) 2%) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 82%,transparent), 0 10px 26px rgba(15,23,42,.045);
}

.zmi-client-strip .brand{
  font-weight:700;
  letter-spacing:.01em;
}

/* Cards */
.zmi-card-grid{
  align-items:stretch;
}

.card-surface.zmi-feature-card,
.card-surface.zmi-compact-card,
.card-surface.zmi-proof-card,
.card-surface.zmi-statement-card,
.card-surface.zmi-testimonial-card,
.card-surface.zmi-plan-card{
  border:0 !important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 96%,#fff 4%), var(--zmi-card)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 84%,transparent), 0 12px 26px rgba(15,23,42,.055) !important;
  overflow:hidden;
}

.card-surface.zmi-feature-card::after,
.card-surface.zmi-compact-card::after,
.card-surface.zmi-proof-card::after,
.card-surface.zmi-statement-card::after,
.card-surface.zmi-plan-card::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--zmi-card-accent,var(--zmi-primary));
  opacity:.8;
}

.zmi-feature-card:nth-child(6n+1), .zmi-compact-card:nth-child(6n+1), .zmi-proof-card:nth-child(6n+1), .zmi-plan-card:nth-child(6n+1){ --zmi-card-accent:var(--zmi-primary); }
.zmi-feature-card:nth-child(6n+2), .zmi-compact-card:nth-child(6n+2), .zmi-proof-card:nth-child(6n+2), .zmi-plan-card:nth-child(6n+2){ --zmi-card-accent:var(--zmi-green); }
.zmi-feature-card:nth-child(6n+3), .zmi-compact-card:nth-child(6n+3), .zmi-proof-card:nth-child(6n+3), .zmi-plan-card:nth-child(6n+3){ --zmi-card-accent:var(--zmi-purple); }
.zmi-feature-card:nth-child(6n+4), .zmi-compact-card:nth-child(6n+4), .zmi-proof-card:nth-child(6n+4), .zmi-plan-card:nth-child(6n+4){ --zmi-card-accent:var(--zmi-cyan); }
.zmi-feature-card:nth-child(6n+5), .zmi-compact-card:nth-child(6n+5), .zmi-proof-card:nth-child(6n+5), .zmi-plan-card:nth-child(6n+5){ --zmi-card-accent:var(--zmi-amber); }
.zmi-feature-card:nth-child(6n+6), .zmi-compact-card:nth-child(6n+6), .zmi-proof-card:nth-child(6n+6), .zmi-plan-card:nth-child(6n+6){ --zmi-card-accent:var(--zmi-rose); }

.zmi-icon-badge,
.zmi-statement-card .bi,
.zmi-compact-card .bi,
.zmi-proof-card .bi,
.zmi-plan-card > .bi{
  width:2.2rem;
  height:2.2rem;
  border-radius:.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 12%,var(--zmi-card));
  color:var(--zmi-card-accent,var(--zmi-primary)) !important;
}

.zmi-icon-badge .bi{
  color:inherit !important;
}

.card-surface:hover{
  transform:translateY(-4px) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 22%,var(--zmi-border)), 0 18px 36px rgba(15,23,42,.075) !important;
}

.card-surface::before{
  background:linear-gradient(135deg, color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 9%,transparent), transparent 58%) !important;
}

.zmi-about-card{
  border-radius:1.5rem;
  padding:clamp(1.25rem,3vw,2rem);
  background:linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 94%,var(--zmi-primary) 2%), var(--zmi-card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 78%,transparent);
}

.zmi-statement-card{
  min-height:100%;
}

.zmi-testimonial-card{
  border-left:4px solid var(--zmi-primary) !important;
}

.zmi-final-cta{
  border:0 !important;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--zmi-primary) 10%,var(--zmi-card)), color-mix(in srgb,var(--zmi-cyan) 8%,var(--zmi-card)) 56%, var(--zmi-card)) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.08), inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 75%,transparent) !important;
}

.zmi-final-cta h3{
  letter-spacing:-.035em;
}

/* Animation: premium and calm */
.reveal{
  opacity:0 !important;
  transform:translateY(18px) scale(.992) !important;
  animation:none !important;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1) !important;
  transition-delay:var(--zmi-reveal-delay,0ms) !important;
}

.reveal.show{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}

.slide.active .zmi-hero-title,
.slide.active .zmi-hero-subtitle,
.slide.active .zmi-eyebrow,
.slide.active .zmi-btn{
  animation:zmiPremiumRise .64s cubic-bezier(.22,.61,.36,1) both !important;
}

.slide.active .zmi-hero-media{
  animation:zmiMediaSettle .78s cubic-bezier(.22,.61,.36,1) both !important;
}

.zmi-feature-card,
.zmi-compact-card,
.zmi-proof-card,
.zmi-plan-card{
  animation:zmiCardSettle .55s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:var(--zmi-card-delay,0ms);
}

@keyframes zmiPremiumAmbient{
  0%{ transform:translate3d(-1%,0,0) scale(1); }
  100%{ transform:translate3d(1%,.8%,0) scale(1.02); }
}

@keyframes zmiSubtleShimmer{
  0%,48%{ transform:translateX(-120%); opacity:.0; }
  62%{ opacity:.32; }
  100%{ transform:translateX(120%); opacity:0; }
}

@keyframes zmiPremiumRise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes zmiMediaSettle{
  from{ opacity:.72; transform:translateX(18px) scale(.985); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}

@keyframes zmiCardSettle{
  from{ opacity:.85; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Soft dark mode for the refreshed landing page */
html.dark .zmi-landing,
html[data-bs-theme="dark"] .zmi-landing{
  background:linear-gradient(180deg, #172033 0%, var(--zmi-page) 28%, var(--zmi-page) 100%);
}

html.dark .hero-slab.zmi-hero-panel,
html[data-bs-theme="dark"] .hero-slab.zmi-hero-panel{
  background:
    linear-gradient(135deg, rgba(29,41,64,.96), rgba(34,49,76,.94)),
    linear-gradient(135deg, rgba(13,110,253,.08), rgba(6,182,212,.05)) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html.dark .zmi-hero-media,
html[data-bs-theme="dark"] .zmi-hero-media{
  background:linear-gradient(145deg, rgba(34,49,76,.90), rgba(29,41,64,.78)) !important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.16), 0 16px 34px rgba(0,0,0,.16) !important;
}

html.dark .card-surface.zmi-feature-card,
html.dark .card-surface.zmi-compact-card,
html.dark .card-surface.zmi-proof-card,
html.dark .card-surface.zmi-statement-card,
html.dark .card-surface.zmi-testimonial-card,
html.dark .card-surface.zmi-plan-card,
html[data-bs-theme="dark"] .card-surface.zmi-feature-card,
html[data-bs-theme="dark"] .card-surface.zmi-compact-card,
html[data-bs-theme="dark"] .card-surface.zmi-proof-card,
html[data-bs-theme="dark"] .card-surface.zmi-statement-card,
html[data-bs-theme="dark"] .card-surface.zmi-testimonial-card,
html[data-bs-theme="dark"] .card-surface.zmi-plan-card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 92%,#fff 4%), var(--zmi-card)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 75%,transparent), 0 12px 26px rgba(0,0,0,.12) !important;
}

html.dark .zmi-section-soft,
html[data-bs-theme="dark"] .zmi-section-soft{
  background:linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 92%,var(--zmi-primary) 4%), color-mix(in srgb,var(--zmi-page) 96%,var(--zmi-cyan) 2%));
}

/* Responsive refinements */
@media (max-width:1023.98px){
  .zmi-hero-grid{
    min-height:auto !important;
    padding:.75rem;
  }
  .zmi-hero-copy{
    max-width:none;
    padding:.5rem !important;
  }
  .zmi-hero-media{
    min-height:300px;
  }
}

@media (max-width:767.98px){
  .zmi-section{
    padding-top:2.65rem !important;
    padding-bottom:2.65rem !important;
  }
  .hero-slab.zmi-hero-panel{
    border-radius:1.35rem !important;
    padding:1rem !important;
  }
  .zmi-hero-title{
    font-size:clamp(1.95rem,9vw,2.75rem) !important;
  }
  .zmi-hero-media{
    min-height:240px;
  }
  .zmi-final-cta{
    padding:1.5rem !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .reveal,
  .reveal.show,
  .slide.active .zmi-hero-title,
  .slide.active .zmi-hero-subtitle,
  .slide.active .zmi-eyebrow,
  .slide.active .zmi-btn,
  .slide.active .zmi-hero-media,
  .zmi-feature-card,
  .zmi-compact-card,
  .zmi-proof-card,
  .zmi-plan-card{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ============================================================================
   HERO OUTER SLIDER BORDERLESS PATCH
   Purpose: remove the visible outer hero slider/card frame while keeping
   inner content, image card, carousel dots, animation, and DB-driven slides.
   ============================================================================ */

.zmi-hero-section{
  padding-top:1.45rem !important;
}

.hero-slab.zmi-hero-panel{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:visible !important;
}

.hero-slab.zmi-hero-panel::before,
.hero-slab.zmi-hero-panel::after{
  display:none !important;
}

.zmi-hero-carousel{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:hidden !important;
}

.zmi-hero-grid{
  padding:0 !important;
}

.zmi-hero-media{
  border:0 !important;
  box-shadow:0 14px 30px rgba(15,23,42,.06) !important;
}

html.dark .hero-slab.zmi-hero-panel,
html[data-bs-theme="dark"] .hero-slab.zmi-hero-panel,
html.dark .zmi-hero-carousel,
html[data-bs-theme="dark"] .zmi-hero-carousel{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

html.dark .zmi-hero-media,
html[data-bs-theme="dark"] .zmi-hero-media{
  box-shadow:0 14px 30px rgba(0,0,0,.18) !important;
}


/* ============================================================================
   ZMI LATEST WIDE LANDING REFINEMENT PATCH
   Purpose:
   - Work on the latest theme.css only; no PHP/database changes.
   - Make the website shell closer to the BioMaint desktop width.
   - Keep the hero outer area borderless.
   - Reduce the image frame/border thickness.
   - Align hero text/media and keep all DB-driven content intact.
   ============================================================================ */

:root{
  --zmi-container-wide:84rem;
  --zmi-container-gutter:clamp(1rem, 2.2vw, 2rem);
  --zmi-hero-media-min:360px;
  --zmi-hero-media-max:420px;
}

/* Wider shell: applies to existing PHP markup that still uses max-w-7xl. */
.max-w-7xl,
#zmiNavBar nav{
  width:min(var(--zmi-container-wide), calc(100vw - (var(--zmi-container-gutter) * 2))) !important;
  max-width:min(var(--zmi-container-wide), calc(100vw - (var(--zmi-container-gutter) * 2))) !important;
}

/* Keep header aligned with the widened page content. */
#zmiNavBar nav{
  margin-inline:auto !important;
}

/* Hero spacing: professional wide layout, no visible outer slider box. */
#heroArea,
.zmi-hero-section{
  padding-top:clamp(2rem, 3.2vw, 3.25rem) !important;
  padding-bottom:clamp(3.5rem, 5vw, 5.25rem) !important;
}

#heroArea .hero-slab,
.hero-slab.zmi-hero-panel{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:visible !important;
  padding:0 !important;
}

#heroArea .hero-slab::before,
#heroArea .hero-slab::after,
.hero-slab.zmi-hero-panel::before,
.hero-slab.zmi-hero-panel::after{
  display:none !important;
}

#zmiHero,
.zmi-hero-carousel{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:visible !important;
}

#slidesWrap,
.slides-wrap{
  overflow:visible !important;
}

/* Hero grid: wider, balanced, and closer to BioMaint visual rhythm. */
.slide-body,
.slide-body.grid,
.zmi-hero-grid{
  min-height:clamp(390px, 39vw, 470px) !important;
  display:grid !important;
  align-items:center !important;
  gap:clamp(2.25rem, 4vw, 4.5rem) !important;
}

@media (min-width:1024px){
  .slide-body,
  .slide-body.grid,
  .slide-body.lg\:grid-cols-2,
  .zmi-hero-grid{
    grid-template-columns:minmax(0, 1fr) minmax(440px, .95fr) !important;
  }
}

/* Hero text: aligned and readable without changing PHP content. */
.slide-body > div:first-child,
.zmi-hero-copy{
  align-self:center !important;
  max-width:650px !important;
  padding:clamp(.25rem, 1vw, .75rem) 0 !important;
}

.slide-body > div:first-child .inline-flex,
.zmi-eyebrow{
  margin-bottom:clamp(1rem, 1.4vw, 1.35rem) !important;
}

.slide-body h1,
.slide-body h2,
.zmi-hero-title{
  max-width:12.8em !important;
  margin-bottom:clamp(1rem, 1.8vw, 1.35rem) !important;
  font-size:clamp(2.45rem, 4.8vw, 4.65rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.06em !important;
}

.slide-body p,
.zmi-hero-subtitle{
  max-width:58ch !important;
  margin-bottom:clamp(1.35rem, 2vw, 1.75rem) !important;
  font-size:clamp(1.02rem, .92rem + .36vw, 1.22rem) !important;
  line-height:1.72 !important;
}

.slide-body a.bg-zmi-primary,
.zmi-btn-primary{
  min-width:clamp(10.5rem, 14vw, 13rem) !important;
  min-height:3.2rem !important;
  justify-content:center !important;
}

/* Hero image: reduce the visible frame/border and improve photo fit. */
.hero-illustration,
.zmi-hero-media{
  align-self:center !important;
  justify-self:stretch !important;
  min-height:var(--zmi-hero-media-min) !important;
  max-height:var(--zmi-hero-media-max) !important;
  padding:.55rem !important;
  border:0 !important;
  border-radius:1.2rem !important;
  background:linear-gradient(145deg, rgba(255,255,255,.72), rgba(245,249,255,.52)) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.055), inset 0 0 0 1px rgba(148,163,184,.14) !important;
}

.hero-illustration img,
.zmi-hero-media img{
  width:100% !important;
  height:100% !important;
  min-height:calc(var(--zmi-hero-media-min) - 1.1rem) !important;
  max-height:calc(var(--zmi-hero-media-max) - 1.1rem) !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  border-radius:.85rem !important;
}

/* Indicators should not sit under the image card after widening. */
#zmiHero .absolute.left-1\/2.bottom-3,
#zmiHero .absolute.left-1\/2.-translate-x-1\/2.bottom-3{
  bottom:.85rem !important;
}

#zmiHero .indicator,
.zmi-hero-dot.indicator{
  box-shadow:none !important;
}

/* Page sections follow the same wider visual line. */
#clients,
#solutions,
#about,
#team,
#why,
#testimonials,
#future,
.zmi-section{
  scroll-margin-top:5rem;
}

#clients .max-w-7xl,
#solutions .max-w-7xl,
#about .max-w-7xl,
#team .max-w-7xl,
#why .max-w-7xl,
#testimonials .max-w-7xl,
#future .max-w-7xl{
  width:min(var(--zmi-container-wide), calc(100vw - (var(--zmi-container-gutter) * 2))) !important;
  max-width:min(var(--zmi-container-wide), calc(100vw - (var(--zmi-container-gutter) * 2))) !important;
}

.clients,
.zmi-client-strip.clients{
  border-radius:1.1rem !important;
  box-shadow:0 10px 24px rgba(15,23,42,.035), inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 74%,transparent) !important;
}

/* Soft dark mode matching the current calmer dark theme. */
html.dark .hero-illustration,
html.dark .zmi-hero-media,
html[data-bs-theme="dark"] .hero-illustration,
html[data-bs-theme="dark"] .zmi-hero-media{
  background:linear-gradient(145deg, rgba(34,49,76,.74), rgba(29,41,64,.55)) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(148,163,184,.14) !important;
}

html.dark .hero-slab,
html.dark .hero-slab.zmi-hero-panel,
html[data-bs-theme="dark"] .hero-slab,
html[data-bs-theme="dark"] .hero-slab.zmi-hero-panel{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

@media (min-width:1500px){
  :root{ --zmi-container-wide:86rem; }
}

@media (max-width:1199.98px){
  :root{
    --zmi-container-wide:74rem;
    --zmi-hero-media-min:320px;
    --zmi-hero-media-max:390px;
  }

  .slide-body,
  .slide-body.grid,
  .zmi-hero-grid{
    gap:2rem !important;
  }
}

@media (max-width:1023.98px){
  :root{
    --zmi-hero-media-min:300px;
    --zmi-hero-media-max:360px;
  }

  .slide-body,
  .slide-body.grid,
  .zmi-hero-grid{
    min-height:auto !important;
    grid-template-columns:1fr !important;
  }

  .slide-body h1,
  .slide-body h2,
  .zmi-hero-title{
    font-size:clamp(2.1rem, 6vw, 3.2rem) !important;
  }
}

@media (max-width:767.98px){
  :root{
    --zmi-container-gutter:1rem;
    --zmi-hero-media-min:230px;
    --zmi-hero-media-max:300px;
  }

  #heroArea,
  .zmi-hero-section{
    padding-top:1.5rem !important;
    padding-bottom:3rem !important;
  }

  .hero-illustration,
  .zmi-hero-media{
    padding:.35rem !important;
    border-radius:1rem !important;
  }

  .hero-illustration img,
  .zmi-hero-media img{
    min-height:calc(var(--zmi-hero-media-min) - .7rem) !important;
    max-height:calc(var(--zmi-hero-media-max) - .7rem) !important;
    object-fit:contain !important;
    border-radius:.75rem !important;
  }
}


/* ============================================================================
   ZMI MOBILE/TABLET FIT FINAL PATCH
   Purpose:
   - Keep the latest wide desktop design unchanged.
   - Ensure the landing hero, carousel, clients strip, and cards fit cleanly on
     mobile and tablet screens without horizontal overflow or cropped content.
   ============================================================================ */

html,
body,
.zmi-body,
.zmi-landing{
  max-width:100%;
  overflow-x:hidden !important;
}

img,
.hero-illustration,
.zmi-hero-media,
.card-surface,
.clients{
  max-width:100%;
}

@media (max-width:1199.98px){
  :root{
    --zmi-container-gutter:1.5rem;
  }

  .zmi-section{
    padding-top:3rem !important;
    padding-bottom:3rem !important;
  }
}

@media (max-width:1023.98px){
  :root{
    --zmi-container-gutter:1.25rem;
    --zmi-hero-media-min:280px;
    --zmi-hero-media-max:350px;
  }

  .max-w-7xl,
  #zmiNavBar nav,
  #clients .max-w-7xl,
  #solutions .max-w-7xl,
  #about .max-w-7xl,
  #team .max-w-7xl,
  #why .max-w-7xl,
  #testimonials .max-w-7xl,
  #future .max-w-7xl{
    width:min(100%, calc(100vw - (var(--zmi-container-gutter) * 2))) !important;
    max-width:min(100%, calc(100vw - (var(--zmi-container-gutter) * 2))) !important;
  }

  #heroArea,
  .zmi-hero-section{
    padding-top:1.6rem !important;
    padding-bottom:2.75rem !important;
  }

  #zmiHero,
  .zmi-hero-carousel,
  #slidesWrap,
  .slides-wrap{
    width:100% !important;
    max-width:100% !important;
  }

  #slidesWrap,
  .slides-wrap{
    overflow:hidden !important;
  }

  .slide{
    width:100% !important;
    max-width:100% !important;
  }

  .slide-body,
  .slide-body.grid,
  .zmi-hero-grid{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:1.7rem !important;
    align-items:start !important;
  }

  .slide-body > div:first-child,
  .zmi-hero-copy{
    max-width:100% !important;
    width:100% !important;
    padding-top:.2rem !important;
    padding-bottom:0 !important;
  }

  .slide-body h1,
  .slide-body h2,
  .zmi-hero-title{
    max-width:11.8em !important;
    font-size:clamp(2.15rem, 6.4vw, 3.35rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.052em !important;
  }

  .slide-body p,
  .zmi-hero-subtitle{
    max-width:62ch !important;
    font-size:1.02rem !important;
    line-height:1.64 !important;
  }

  .hero-illustration,
  .zmi-hero-media{
    width:100% !important;
    min-height:var(--zmi-hero-media-min) !important;
    max-height:var(--zmi-hero-media-max) !important;
    padding:.45rem !important;
    border-radius:1rem !important;
    justify-self:stretch !important;
  }

  .hero-illustration img,
  .zmi-hero-media img{
    min-height:calc(var(--zmi-hero-media-min) - .9rem) !important;
    max-height:calc(var(--zmi-hero-media-max) - .9rem) !important;
    border-radius:.75rem !important;
  }

  .zmi-card-grid,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4{
    gap:1rem !important;
  }
}

@media (max-width:767.98px){
  :root{
    --zmi-container-gutter:1rem;
    --zmi-hero-media-min:220px;
    --zmi-hero-media-max:270px;
  }

  .zmi-landing::before{
    height:620px !important;
    opacity:.68 !important;
  }

  .zmi-section{
    padding-top:2.35rem !important;
    padding-bottom:2.35rem !important;
  }

  #heroArea,
  .zmi-hero-section{
    padding-top:1.05rem !important;
    padding-bottom:2.35rem !important;
  }

  .slide-body,
  .slide-body.grid,
  .zmi-hero-grid{
    gap:1.25rem !important;
  }

  .slide-body > div:first-child,
  .zmi-hero-copy{
    text-align:left !important;
  }

  .slide-body > div:first-child .inline-flex,
  .zmi-eyebrow{
    max-width:100% !important;
    margin-bottom:.9rem !important;
    white-space:normal !important;
  }

  .slide-body h1,
  .slide-body h2,
  .zmi-hero-title{
    max-width:100% !important;
    margin-bottom:.85rem !important;
    font-size:clamp(1.95rem, 10.3vw, 2.72rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.046em !important;
  }

  .slide-body p,
  .zmi-hero-subtitle{
    max-width:100% !important;
    margin-bottom:1.15rem !important;
    font-size:.96rem !important;
    line-height:1.6 !important;
  }

  .slide-body a.bg-zmi-primary,
  .zmi-btn-primary{
    width:100% !important;
    max-width:18rem !important;
    min-width:0 !important;
    min-height:3rem !important;
    padding-inline:1rem !important;
  }

  .hero-illustration,
  .zmi-hero-media{
    min-height:var(--zmi-hero-media-min) !important;
    max-height:var(--zmi-hero-media-max) !important;
    padding:.25rem !important;
    border-radius:.85rem !important;
    box-shadow:0 8px 18px rgba(15,23,42,.045), inset 0 0 0 1px rgba(148,163,184,.10) !important;
  }

  .hero-illustration img,
  .zmi-hero-media img{
    min-height:calc(var(--zmi-hero-media-min) - .5rem) !important;
    max-height:calc(var(--zmi-hero-media-max) - .5rem) !important;
    object-fit:contain !important;
    object-position:center center !important;
    border-radius:.65rem !important;
  }

  .zmi-hero-arrow,
  .arrow-btn{
    display:none !important;
  }

  #zmiHero .absolute.left-1\/2.bottom-3,
  #zmiHero .absolute.left-1\/2.-translate-x-1\/2.bottom-3{
    bottom:.1rem !important;
  }

  .zmi-hero-dot.indicator,
  #zmiHero .indicator{
    width:.58rem !important;
    height:.58rem !important;
  }

  .zmi-hero-dot.indicator.active,
  .zmi-hero-dot.indicator[aria-current="true"],
  #zmiHero .indicator.active,
  #zmiHero .indicator[aria-current="true"]{
    width:1.35rem !important;
  }

  .clients,
  .zmi-client-strip.clients{
    border-radius:.85rem !important;
  }

  .clients-track{
    gap:2rem !important;
    padding:.75rem 0 !important;
    animation-duration:42s !important;
  }

  .brand{
    font-size:.86rem !important;
  }

  .card-surface.zmi-feature-card,
  .card-surface.zmi-compact-card,
  .card-surface.zmi-proof-card,
  .card-surface.zmi-statement-card,
  .card-surface.zmi-testimonial-card,
  .card-surface.zmi-plan-card{
    border-radius:1rem !important;
  }

  .zmi-about-card,
  .zmi-final-cta{
    border-radius:1rem !important;
  }
}

@media (max-width:575.98px){
  :root{
    --zmi-container-gutter:.875rem;
    --zmi-hero-media-min:200px;
    --zmi-hero-media-max:248px;
  }

  #zmiNavBar nav > .relative.flex{
    min-height:3.55rem !important;
  }

  #heroArea,
  .zmi-hero-section{
    padding-top:.85rem !important;
    padding-bottom:2.1rem !important;
  }

  .slide-body h1,
  .slide-body h2,
  .zmi-hero-title{
    font-size:clamp(1.72rem, 10vw, 2.28rem) !important;
  }

  .slide-body p,
  .zmi-hero-subtitle{
    font-size:.92rem !important;
  }

  .hero-illustration,
  .zmi-hero-media{
    min-height:var(--zmi-hero-media-min) !important;
    max-height:var(--zmi-hero-media-max) !important;
  }

  .hero-illustration img,
  .zmi-hero-media img{
    min-height:calc(var(--zmi-hero-media-min) - .5rem) !important;
    max-height:calc(var(--zmi-hero-media-max) - .5rem) !important;
  }

  .zmi-section h2,
  .zmi-section h3{
    font-size:clamp(1.45rem, 7vw, 2rem) !important;
  }
}

/* ============================================================================
   ZMI RESPONSIVE CONTENT + CARD FIT PATCH
   Purpose:
   - Make all DB-driven landing cards dynamically fit mobile, tablet, laptop,
     and desktop screens.
   - Prevent cramped text, uneven card sizing, and overflow without changing PHP.
   - Keep the current visual design, color accents, animation, and Bootstrap setup.
   ============================================================================ */

:root{
  --zmi-card-gap:clamp(.9rem, 1.15vw, 1.25rem);
  --zmi-card-min-feature:20rem;
  --zmi-card-min-compact:13.75rem;
  --zmi-card-min-proof:12.75rem;
  --zmi-card-min-plan:15rem;
  --zmi-card-min-testimonial:20rem;
  --zmi-card-min-statement:22rem;
}

/* Dynamic grid behavior for DB-driven homepage sections. */
.zmi-solutions-section .zmi-card-grid,
.zmi-solutions-section .grid,
.zmi-team-section .grid,
.zmi-why-section .grid,
.zmi-testimonial-section .grid,
.zmi-future-section .grid,
.zmi-mission-section .grid{
  display:grid !important;
  gap:var(--zmi-card-gap) !important;
  align-items:stretch !important;
}

.zmi-solutions-section .zmi-card-grid,
.zmi-solutions-section .grid:has(.zmi-feature-card){
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-feature)), 1fr)) !important;
}

.zmi-team-section .grid:has(.zmi-compact-card){
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-compact)), 1fr)) !important;
}

.zmi-why-section .grid:has(.zmi-proof-card){
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-proof)), 1fr)) !important;
}

.zmi-testimonial-section .grid:has(.zmi-testimonial-card){
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-testimonial)), 1fr)) !important;
}

.zmi-future-section .grid:has(.zmi-plan-card){
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-plan)), 1fr)) !important;
}

.zmi-mission-section .grid:has(.zmi-statement-card){
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-statement)), 1fr)) !important;
}

/* Fallback for browsers without :has support. These rules remain safe because
   they are scoped by section type. */
@supports not selector(:has(*)){
  .zmi-solutions-section .grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-feature)), 1fr)) !important; }
  .zmi-team-section .grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-compact)), 1fr)) !important; }
  .zmi-why-section .grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-proof)), 1fr)) !important; }
  .zmi-testimonial-section .grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-testimonial)), 1fr)) !important; }
  .zmi-future-section .grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-plan)), 1fr)) !important; }
  .zmi-mission-section .grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--zmi-card-min-statement)), 1fr)) !important; }
}

/* Card internals: keep text readable and prevent content squeeze. */
.card-surface.zmi-feature-card,
.card-surface.zmi-compact-card,
.card-surface.zmi-proof-card,
.card-surface.zmi-statement-card,
.card-surface.zmi-testimonial-card,
.card-surface.zmi-plan-card{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
  padding:clamp(1rem, 1.1vw, 1.35rem) !important;
}

.zmi-feature-card{ min-height:clamp(8.5rem, 10vw, 10.75rem); }
.zmi-compact-card{ min-height:clamp(8rem, 9vw, 10rem); }
.zmi-proof-card{ min-height:clamp(7.25rem, 8vw, 9rem); }
.zmi-plan-card{ min-height:clamp(7.75rem, 8.5vw, 9.75rem); }
.zmi-testimonial-card{ min-height:clamp(10rem, 10vw, 12rem); }
.zmi-statement-card{ min-height:clamp(8.5rem, 8vw, 10.5rem); }

.zmi-card-head,
.zmi-feature-card > .flex,
.zmi-compact-card > .flex,
.zmi-proof-card > .flex,
.zmi-statement-card > .flex{
  align-items:flex-start !important;
  gap:.75rem !important;
  min-width:0 !important;
}

.zmi-feature-card h4,
.zmi-feature-card h5,
.zmi-feature-card h6,
.zmi-compact-card h4,
.zmi-compact-card h5,
.zmi-compact-card h6,
.zmi-proof-card h4,
.zmi-proof-card h5,
.zmi-proof-card h6,
.zmi-statement-card h4,
.zmi-testimonial-card h4,
.zmi-plan-card h4,
.zmi-plan-card h5,
.zmi-plan-card h6{
  min-width:0 !important;
  margin:0 !important;
  color:var(--zmi-strong) !important;
  line-height:1.25 !important;
  overflow-wrap:anywhere;
  word-break:normal;
}

.zmi-feature-card h5,
.zmi-compact-card h4{
  font-size:clamp(.98rem, .92rem + .2vw, 1.12rem) !important;
}

.zmi-proof-card h6,
.zmi-plan-card h6{
  font-size:clamp(.9rem, .86rem + .15vw, 1rem) !important;
}

.zmi-feature-card p,
.zmi-compact-card p,
.zmi-proof-card p,
.zmi-statement-card p,
.zmi-testimonial-card p,
.zmi-plan-card p,
.zmi-about-card p,
.zmi-final-cta p{
  min-width:0 !important;
  margin-bottom:0 !important;
  color:var(--zmi-muted) !important;
  line-height:1.62 !important;
  overflow-wrap:anywhere;
  word-break:normal;
}

.zmi-feature-card p,
.zmi-compact-card p,
.zmi-proof-card p,
.zmi-plan-card p{
  font-size:clamp(.88rem, .84rem + .14vw, .98rem) !important;
}

.zmi-testimonial-card p,
.zmi-statement-card .text-sm,
.zmi-about-card .prose,
.zmi-about-card .content{
  font-size:clamp(.92rem, .88rem + .15vw, 1rem) !important;
  line-height:1.72 !important;
}

.zmi-icon-badge,
.zmi-statement-card .bi,
.zmi-compact-card .bi,
.zmi-proof-card .bi,
.zmi-plan-card > .bi{
  width:clamp(2.05rem, 2vw, 2.35rem) !important;
  height:clamp(2.05rem, 2vw, 2.35rem) !important;
  min-width:clamp(2.05rem, 2vw, 2.35rem) !important;
}

.zmi-plan-card{
  flex-direction:row !important;
}

.zmi-plan-card > p{
  flex:1 1 auto;
}

.zmi-about-card{
  max-width:none !important;
  padding:clamp(1.25rem, 2vw, 2rem) !important;
}

.zmi-about-card .prose,
.zmi-about-card .content{
  max-width:none !important;
}

.zmi-final-cta{
  max-width:100% !important;
}

.zmi-final-cta .zmi-btn,
.zmi-final-cta a.bg-zmi-primary{
  width:auto;
  min-width:12rem;
}

/* Better section rhythm and heading scale. */
.zmi-section-heading,
.zmi-section > .max-w-7xl > h2,
.zmi-section > .max-w-7xl > h3{
  max-width:min(100%, 820px) !important;
}

.zmi-section h2,
.zmi-section h3{
  font-size:clamp(1.55rem, 1.2rem + 1vw, 2.25rem) !important;
  line-height:1.14 !important;
}

.zmi-section-heading p,
.zmi-section > .max-w-7xl > p{
  max-width:min(100%, 760px) !important;
  line-height:1.65 !important;
}

/* Tablet: avoid 5 tiny columns and improve readable card widths. */
@media (max-width:1199.98px){
  :root{
    --zmi-card-min-feature:18rem;
    --zmi-card-min-compact:14.5rem;
    --zmi-card-min-proof:14rem;
    --zmi-card-min-plan:16rem;
    --zmi-card-min-testimonial:18rem;
    --zmi-card-min-statement:19rem;
  }

  .zmi-section{
    padding-top:3.1rem !important;
    padding-bottom:3.1rem !important;
  }
}

/* Tablet portrait / large mobile: two-column when there is enough room. */
@media (max-width:991.98px){
  :root{
    --zmi-card-gap:1rem;
    --zmi-card-min-feature:17rem;
    --zmi-card-min-compact:15.5rem;
    --zmi-card-min-proof:15rem;
    --zmi-card-min-plan:17rem;
    --zmi-card-min-testimonial:17rem;
    --zmi-card-min-statement:17rem;
  }

  .zmi-feature-card,
  .zmi-compact-card,
  .zmi-proof-card,
  .zmi-plan-card,
  .zmi-testimonial-card,
  .zmi-statement-card{
    min-height:auto !important;
  }
}

/* Mobile: full-width cards, readable text, no cramped multi-column layout. */
@media (max-width:767.98px){
  :root{
    --zmi-card-gap:.9rem;
    --zmi-card-min-feature:100%;
    --zmi-card-min-compact:100%;
    --zmi-card-min-proof:100%;
    --zmi-card-min-plan:100%;
    --zmi-card-min-testimonial:100%;
    --zmi-card-min-statement:100%;
  }

  .zmi-solutions-section .grid,
  .zmi-team-section .grid,
  .zmi-why-section .grid,
  .zmi-testimonial-section .grid,
  .zmi-future-section .grid,
  .zmi-mission-section .grid{
    grid-template-columns:1fr !important;
  }

  .card-surface.zmi-feature-card,
  .card-surface.zmi-compact-card,
  .card-surface.zmi-proof-card,
  .card-surface.zmi-statement-card,
  .card-surface.zmi-testimonial-card,
  .card-surface.zmi-plan-card{
    padding:1.05rem !important;
    border-radius:1rem !important;
  }

  .zmi-feature-card p,
  .zmi-compact-card p,
  .zmi-proof-card p,
  .zmi-plan-card p,
  .zmi-testimonial-card p,
  .zmi-statement-card .text-sm,
  .zmi-about-card .prose,
  .zmi-about-card .content{
    font-size:.92rem !important;
    line-height:1.62 !important;
  }

  .zmi-section-heading,
  .zmi-section > .max-w-7xl > h2,
  .zmi-section > .max-w-7xl > h3,
  .zmi-section-heading p,
  .zmi-section > .max-w-7xl > p{
    max-width:100% !important;
  }

  .zmi-final-cta{
    text-align:left !important;
  }

  .zmi-final-cta .zmi-btn,
  .zmi-final-cta a.bg-zmi-primary{
    width:100% !important;
    max-width:18rem !important;
  }
}

/* Very small phones: slightly tighter but still readable. */
@media (max-width:420px){
  .card-surface.zmi-feature-card,
  .card-surface.zmi-compact-card,
  .card-surface.zmi-proof-card,
  .card-surface.zmi-statement-card,
  .card-surface.zmi-testimonial-card,
  .card-surface.zmi-plan-card{
    padding:.95rem !important;
  }

  .zmi-icon-badge,
  .zmi-statement-card .bi,
  .zmi-compact-card .bi,
  .zmi-proof-card .bi,
  .zmi-plan-card > .bi{
    width:2rem !important;
    height:2rem !important;
    min-width:2rem !important;
  }
}

/* CMS text length helpers added by theme.js. */
.zmi-card-medium-text p{
  line-height:1.56 !important;
}

.zmi-card-long-text{
  padding-block:1.15rem !important;
}

.zmi-card-long-text p{
  font-size:clamp(.84rem, .82rem + .1vw, .94rem) !important;
  line-height:1.54 !important;
}

@media (max-width:767.98px){
  .zmi-card-long-text p{
    font-size:.9rem !important;
    line-height:1.58 !important;
  }
}


/* ============================================================================
   ZMI MOBILE/TABLET FULL-WIDTH FIT PATCH
   Purpose:
   - Remove the double side gutters caused by legacy px-* utility classes plus
     custom max-width calculations.
   - Make mobile/tablet use the full device width with only a small safe gutter.
   - Keep all existing PHP, DB-driven content, header, hero, cards and animation.
   ============================================================================ */

:root{
  --zmi-mobile-safe-gutter:1rem;
  --zmi-tablet-safe-gutter:1.25rem;
}

@media (max-width:1023.98px){
  html,
  body,
  .zmi-body,
  .zmi-landing{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    margin:0 !important;
  }

  /* Use one clean responsive gutter only. This overrides the older combination
     of width: calc(100vw - gutters) + px-4/sm:px-6 classes that created extra
     empty space on mobile and tablet screens. */
  .max-w-7xl,
  #zmiNavBar nav,
  #heroArea > .max-w-7xl,
  #clients .max-w-7xl,
  #solutions .max-w-7xl,
  #about .max-w-7xl,
  #company .max-w-7xl,
  #mission .max-w-7xl,
  #team .max-w-7xl,
  #why .max-w-7xl,
  #testimonials .max-w-7xl,
  #future .max-w-7xl,
  .zmi-cta-section .max-w-7xl{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--zmi-tablet-safe-gutter) !important;
    padding-right:var(--zmi-tablet-safe-gutter) !important;
  }

  #zmiNavBar nav > .relative.flex{
    width:100% !important;
    min-width:0 !important;
  }

  #navMenu{
    width:100% !important;
  }

  .zmi-section,
  .zmi-hero-section,
  #heroArea{
    width:100% !important;
    max-width:100% !important;
  }

  .zmi-section-soft{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #zmiHero,
  .zmi-hero-carousel,
  #slidesWrap,
  .slides-wrap,
  .slide,
  .slide.active,
  .slide-body,
  .zmi-hero-grid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .slide-body,
  .slide-body.grid,
  .zmi-hero-grid{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .zmi-hero-copy,
  .slide-body > div:first-child{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .hero-illustration,
  .zmi-hero-media,
  .card-surface,
  .zmi-about-card,
  .zmi-final-cta,
  .clients,
  .zmi-client-strip{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .zmi-card-grid,
  .zmi-solutions-section .grid,
  .zmi-team-section .grid,
  .zmi-why-section .grid,
  .zmi-testimonial-section .grid,
  .zmi-future-section .grid,
  .zmi-mission-section .grid{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media (max-width:767.98px){
  :root{
    --zmi-mobile-safe-gutter:.875rem;
  }

  .max-w-7xl,
  #zmiNavBar nav,
  #heroArea > .max-w-7xl,
  #clients .max-w-7xl,
  #solutions .max-w-7xl,
  #about .max-w-7xl,
  #company .max-w-7xl,
  #mission .max-w-7xl,
  #team .max-w-7xl,
  #why .max-w-7xl,
  #testimonials .max-w-7xl,
  #future .max-w-7xl,
  .zmi-cta-section .max-w-7xl{
    padding-left:var(--zmi-mobile-safe-gutter) !important;
    padding-right:var(--zmi-mobile-safe-gutter) !important;
  }

  #zmiNavBar nav{
    min-height:3.6rem !important;
  }

  #zmiNavBar nav > .relative.flex{
    min-height:3.6rem !important;
    padding-top:.55rem !important;
    padding-bottom:.55rem !important;
  }

  #heroArea,
  .zmi-hero-section{
    padding-top:1rem !important;
    padding-bottom:2rem !important;
  }

  .zmi-section{
    padding-top:2rem !important;
    padding-bottom:2rem !important;
  }

  .zmi-section-heading{
    margin-bottom:1rem !important;
  }

  .slide-body,
  .slide-body.grid,
  .zmi-hero-grid{
    gap:1.1rem !important;
  }

  .slide-body > div:first-child .inline-flex,
  .zmi-eyebrow{
    width:auto !important;
    max-width:100% !important;
  }

  .slide-body h1,
  .slide-body h2,
  .zmi-hero-title{
    font-size:clamp(1.78rem, 9vw, 2.35rem) !important;
    line-height:1.08 !important;
  }

  .slide-body p,
  .zmi-hero-subtitle{
    font-size:.94rem !important;
    line-height:1.6 !important;
  }

  .slide-body a.bg-zmi-primary,
  .zmi-btn-primary{
    width:100% !important;
    max-width:none !important;
  }

  .hero-illustration,
  .zmi-hero-media{
    min-height:210px !important;
    max-height:260px !important;
  }

  .hero-illustration img,
  .zmi-hero-media img{
    min-height:calc(210px - .5rem) !important;
    max-height:calc(260px - .5rem) !important;
  }

  .clients,
  .zmi-client-strip.clients{
    border-radius:.8rem !important;
  }

  .clients-track{
    padding:.65rem 0 !important;
  }

  .zmi-card-grid,
  .zmi-solutions-section .grid,
  .zmi-team-section .grid,
  .zmi-why-section .grid,
  .zmi-testimonial-section .grid,
  .zmi-future-section .grid,
  .zmi-mission-section .grid{
    gap:.85rem !important;
  }

  .card-surface.zmi-feature-card,
  .card-surface.zmi-compact-card,
  .card-surface.zmi-proof-card,
  .card-surface.zmi-statement-card,
  .card-surface.zmi-testimonial-card,
  .card-surface.zmi-plan-card,
  .zmi-about-card,
  .zmi-final-cta{
    padding:1rem !important;
  }

  .zmi-plan-card{
    flex-direction:row !important;
    align-items:flex-start !important;
  }
}

@media (max-width:420px){
  :root{
    --zmi-mobile-safe-gutter:.7rem;
  }

  .max-w-7xl,
  #zmiNavBar nav,
  #heroArea > .max-w-7xl,
  #clients .max-w-7xl,
  #solutions .max-w-7xl,
  #about .max-w-7xl,
  #company .max-w-7xl,
  #mission .max-w-7xl,
  #team .max-w-7xl,
  #why .max-w-7xl,
  #testimonials .max-w-7xl,
  #future .max-w-7xl,
  .zmi-cta-section .max-w-7xl{
    padding-left:var(--zmi-mobile-safe-gutter) !important;
    padding-right:var(--zmi-mobile-safe-gutter) !important;
  }

  .hero-illustration,
  .zmi-hero-media{
    min-height:198px !important;
    max-height:245px !important;
  }

  .hero-illustration img,
  .zmi-hero-media img{
    min-height:calc(198px - .5rem) !important;
    max-height:calc(245px - .5rem) !important;
  }
}

@media (max-width:360px){
  :root{
    --zmi-mobile-safe-gutter:.625rem;
  }

  .slide-body h1,
  .slide-body h2,
  .zmi-hero-title{
    font-size:clamp(1.68rem, 8.8vw, 2.1rem) !important;
  }

  .slide-body p,
  .zmi-hero-subtitle{
    font-size:.9rem !important;
  }
}

/* ============================================================================
   CMS-driven landing refinement: softer healthcare glass, less glow, clearer hover
   ============================================================================ */
.zmi-landing .zmi-hero-panel,
.zmi-cms-public-page .zmi-hero-panel,
.hero-slab{
  border:1px solid color-mix(in srgb,var(--zmi-border) 86%,var(--zmi-primary) 14%) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--zmi-card) 92%,transparent), color-mix(in srgb,var(--zmi-card) 82%,var(--zmi-primary) 4%)) !important;
  box-shadow:0 18px 50px rgba(15,23,42,.075) !important;
  backdrop-filter:saturate(155%) blur(12px);
}

.zmi-landing .zmi-hero-panel::before,
.hero-slab::before{
  opacity:.22 !important;
}

.zmi-landing .card-surface,
.zmi-cms-public-page .card-surface,
.zmi-about-card,
.zmi-final-cta{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--zmi-border) 88%,var(--zmi-primary) 12%) !important;
  background:color-mix(in srgb,var(--zmi-card) 91%,transparent) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.055) !important;
  backdrop-filter:saturate(145%) blur(10px);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.zmi-landing .card-surface:hover,
.zmi-cms-public-page .card-surface:hover,
.zmi-about-card:hover,
.zmi-final-cta:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--zmi-primary) 38%,var(--zmi-border)) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.085) !important;
  background:color-mix(in srgb,var(--zmi-card) 96%,var(--zmi-primary) 3%) !important;
}

.zmi-landing .zmi-icon-badge,
.zmi-cms-public-page .zmi-icon-badge{
  box-shadow:none !important;
  background:color-mix(in srgb,var(--zmi-primary) 10%,transparent) !important;
}

.zmi-landing .zmi-eyebrow,
.zmi-cms-public-page .zmi-eyebrow{
  border:1px solid color-mix(in srgb,var(--zmi-border) 80%,var(--zmi-primary) 20%) !important;
  background:color-mix(in srgb,var(--zmi-card) 86%,transparent) !important;
  box-shadow:none !important;
  backdrop-filter:saturate(140%) blur(8px);
}

.zmi-landing .zmi-btn-primary,
.zmi-cms-public-page .zmi-btn-primary{
  box-shadow:0 12px 26px rgba(13,110,253,.16) !important;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.zmi-landing .zmi-btn-primary:hover,
.zmi-cms-public-page .zmi-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(13,110,253,.22) !important;
  filter:saturate(1.05);
}

.zmi-landing .zmi-section-heading,
.zmi-cms-public-page .zmi-section-heading{
  max-width:58rem;
}

.zmi-landing img,
.zmi-cms-public-page img{
  max-width:100%;
}

html.dark .zmi-landing .card-surface,
html[data-bs-theme="dark"] .zmi-landing .card-surface,
html.dark .zmi-cms-public-page .card-surface,
html[data-bs-theme="dark"] .zmi-cms-public-page .card-surface,
html.dark .zmi-about-card,
html[data-bs-theme="dark"] .zmi-about-card,
html.dark .zmi-final-cta,
html[data-bs-theme="dark"] .zmi-final-cta{
  box-shadow:0 16px 42px rgba(0,0,0,.22) !important;
}

@media (max-width:767.98px){
  .zmi-landing .zmi-hero-panel,
  .zmi-cms-public-page .zmi-hero-panel,
  .hero-slab{
    border-radius:1.1rem !important;
    box-shadow:0 12px 30px rgba(15,23,42,.07) !important;
  }

  .zmi-landing .card-surface:hover,
  .zmi-cms-public-page .card-surface:hover,
  .zmi-about-card:hover,
  .zmi-final-cta:hover{
    transform:none;
  }
}

/* ============================================================================
   ZMI HEALTHCARE SUPPLIER AWARD-LEVEL LANDING SYSTEM
   Purpose:
   - Final visual layer for healthcare equipment supplier/vendor positioning.
   - Keeps all homepage content database-driven; this is design-only.
   - Creates reusable, calmer, premium block styling without adding PHP files.
   ============================================================================ */

:root{
  --zmi-award-max:88rem;
  --zmi-award-gutter:clamp(1rem,2.6vw,2.25rem);
  --zmi-award-line:color-mix(in srgb,var(--zmi-border) 72%,var(--zmi-primary) 13%);
  --zmi-award-glass:color-mix(in srgb,var(--zmi-card) 88%,transparent);
  --zmi-award-soft-blue:color-mix(in srgb,var(--zmi-primary) 7%,var(--zmi-page));
  --zmi-award-soft-cyan:color-mix(in srgb,var(--zmi-cyan) 6%,var(--zmi-page));
  --zmi-award-soft-green:color-mix(in srgb,var(--zmi-green) 5%,var(--zmi-page));
  --zmi-award-card-shadow:0 18px 44px rgba(15,23,42,.075);
  --zmi-award-card-shadow-hover:0 24px 58px rgba(15,23,42,.11);
}

.max-w-7xl,
#zmiNavBar nav,
#clients .max-w-7xl,
#solutions .max-w-7xl,
#about .max-w-7xl,
#company .max-w-7xl,
#mission .max-w-7xl,
#team .max-w-7xl,
#why .max-w-7xl,
#testimonials .max-w-7xl,
#future .max-w-7xl,
.zmi-cta-section .max-w-7xl{
  width:min(var(--zmi-award-max), calc(100vw - (var(--zmi-award-gutter) * 2))) !important;
  max-width:min(var(--zmi-award-max), calc(100vw - (var(--zmi-award-gutter) * 2))) !important;
}

.zmi-supplier-home{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(900px 360px at 8% -10%, rgba(13,110,253,.085), transparent 70%),
    radial-gradient(760px 320px at 100% 4%, rgba(6,182,212,.07), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb,var(--zmi-page) 96%,var(--zmi-primary) 4%) 0%, var(--zmi-page) 22%, var(--zmi-page) 100%) !important;
}

.zmi-supplier-home::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(to right, color-mix(in srgb,var(--zmi-border) 42%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--zmi-border) 42%,transparent) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, black 0%, transparent 48%);
  z-index:0;
}

.zmi-supplier-home > section{
  position:relative;
  z-index:1;
}

/* Section language: consistent, professional healthcare rhythm */
.zmi-section{
  padding-top:clamp(3.25rem,5vw,5.75rem) !important;
  padding-bottom:clamp(3.25rem,5vw,5.75rem) !important;
}

.zmi-section-soft{
  border-block:1px solid color-mix(in srgb,var(--zmi-border) 62%,transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 92%,var(--zmi-primary) 3%), color-mix(in srgb,var(--zmi-card) 96%,var(--zmi-cyan) 2%)) !important;
}

.zmi-section-heading{
  max-width:850px !important;
  margin-bottom:clamp(1.35rem,2.2vw,2rem) !important;
}

.zmi-section-heading h2,
.zmi-section-heading h3,
.zmi-section h2,
.zmi-section h3{
  position:relative;
  margin-bottom:.65rem !important;
  color:var(--zmi-strong) !important;
  font-size:clamp(1.75rem,1.18rem + 1.45vw,2.65rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.055em !important;
}

.zmi-section-heading h2::after,
.zmi-section-heading h3::after{
  content:"";
  display:block;
  width:3.3rem;
  height:3px;
  margin-top:.8rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--zmi-primary),var(--zmi-cyan));
}

.zmi-section-heading p,
.zmi-section > .max-w-7xl > p{
  color:var(--zmi-muted) !important;
  font-size:clamp(.98rem,.92rem + .18vw,1.08rem) !important;
  line-height:1.72 !important;
}

/* Hero: healthcare supplier/vendor positioning, premium without noisy glow */
.zmi-award-hero-section,
#heroArea{
  padding-top:clamp(2.25rem,3.6vw,4rem) !important;
  padding-bottom:clamp(3.5rem,5.5vw,6.5rem) !important;
}

.hero-slab.zmi-hero-panel,
.zmi-supplier-home .hero-slab.zmi-hero-panel{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

#zmiHero,
.zmi-hero-carousel{
  overflow:visible !important;
}

.slide-body,
.slide-body.grid,
.zmi-hero-grid{
  min-height:clamp(430px,40vw,540px) !important;
  gap:clamp(2rem,5vw,5.5rem) !important;
  align-items:center !important;
}

@media (min-width:1024px){
  .slide-body,
  .slide-body.grid,
  .slide-body.lg\:grid-cols-2,
  .zmi-hero-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(455px,.98fr) !important;
  }
}

.zmi-hero-copy{
  position:relative;
  max-width:690px !important;
}

.zmi-eyebrow{
  color:var(--zmi-primary) !important;
  background:color-mix(in srgb,var(--zmi-card) 90%,transparent) !important;
  border:1px solid var(--zmi-award-line) !important;
  box-shadow:0 10px 24px rgba(13,110,253,.055) !important;
  backdrop-filter:saturate(135%) blur(8px);
}

.zmi-hero-title{
  max-width:11.8em !important;
  font-size:clamp(2.75rem,5.2vw,5.25rem) !important;
  line-height:.99 !important;
  letter-spacing:-.074em !important;
  color:var(--zmi-strong) !important;
}

.zmi-hero-subtitle{
  max-width:62ch !important;
  color:var(--zmi-muted) !important;
  font-size:clamp(1.04rem,.94rem + .36vw,1.24rem) !important;
  line-height:1.78 !important;
}

.zmi-btn,
.zmi-btn-primary{
  min-height:3.25rem !important;
  border-radius:1rem !important;
}

.zmi-btn-primary{
  background:linear-gradient(135deg, #0d6efd 0%, #087fd8 58%, #06a4c4 100%) !important;
  box-shadow:0 16px 34px rgba(13,110,253,.19) !important;
}

.zmi-btn-primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 22px 46px rgba(13,110,253,.26) !important;
}

.zmi-hero-media,
.hero-illustration{
  position:relative;
  min-height:clamp(360px,32vw,465px) !important;
  max-height:clamp(390px,36vw,520px) !important;
  padding:.75rem !important;
  border:1px solid color-mix(in srgb,var(--zmi-border) 70%,transparent) !important;
  border-radius:1.65rem !important;
  background:
    linear-gradient(145deg, color-mix(in srgb,var(--zmi-card) 88%,transparent), color-mix(in srgb,var(--zmi-card) 78%,var(--zmi-primary) 3%)),
    radial-gradient(260px 180px at 80% 12%, rgba(6,182,212,.10), transparent 72%) !important;
  box-shadow:var(--zmi-award-card-shadow), inset 0 1px 0 rgba(255,255,255,.45) !important;
  overflow:hidden !important;
}

.zmi-hero-media::before,
.hero-illustration::before{
  content:"Clinical equipment partner";
  position:absolute;
  left:1rem;
  top:1rem;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:2rem;
  padding:.45rem .75rem;
  border:1px solid color-mix(in srgb,var(--zmi-border) 72%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--zmi-card) 86%,transparent);
  color:var(--zmi-muted);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.01em;
  backdrop-filter:saturate(135%) blur(10px);
}

.zmi-hero-media img,
.hero-illustration img{
  width:100% !important;
  height:100% !important;
  min-height:calc(clamp(360px,32vw,465px) - 1.5rem) !important;
  max-height:calc(clamp(390px,36vw,520px) - 1.5rem) !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:1.15rem !important;
  filter:saturate(1.03) contrast(1.02) !important;
}

.zmi-hero-dot.indicator,
#zmiHero .indicator{
  border:1px solid color-mix(in srgb,var(--zmi-primary) 45%,transparent) !important;
  background:color-mix(in srgb,var(--zmi-card) 70%,transparent) !important;
  backdrop-filter:blur(8px);
}

.zmi-hero-arrow,
.arrow-btn{
  opacity:.96 !important;
  background:color-mix(in srgb,var(--zmi-card) 82%,transparent) !important;
  border:1px solid color-mix(in srgb,var(--zmi-border) 72%,transparent) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.09) !important;
  backdrop-filter:saturate(135%) blur(10px);
}

/* Trust/client strip */
.zmi-trust-section{
  padding-top:clamp(2rem,3vw,3.25rem) !important;
}

.zmi-client-strip.clients{
  border:1px solid color-mix(in srgb,var(--zmi-border) 72%,transparent) !important;
  background:color-mix(in srgb,var(--zmi-card) 88%,transparent) !important;
  box-shadow:0 14px 36px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.35) !important;
  backdrop-filter:saturate(140%) blur(10px);
}

.zmi-client-strip .brand{
  color:var(--zmi-muted) !important;
  font-weight:800 !important;
  letter-spacing:.015em;
}

/* Card system: clean supplier capability cards */
.card-surface.zmi-feature-card,
.card-surface.zmi-compact-card,
.card-surface.zmi-proof-card,
.card-surface.zmi-statement-card,
.card-surface.zmi-testimonial-card,
.card-surface.zmi-plan-card,
.zmi-about-card,
.zmi-final-cta{
  border:1px solid color-mix(in srgb,var(--zmi-border) 70%,transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 92%,transparent), color-mix(in srgb,var(--zmi-card) 98%,var(--zmi-primary) 2%)) !important;
  box-shadow:var(--zmi-award-card-shadow) !important;
  backdrop-filter:saturate(140%) blur(10px);
}

.card-surface.zmi-feature-card,
.card-surface.zmi-compact-card,
.card-surface.zmi-proof-card,
.card-surface.zmi-statement-card,
.card-surface.zmi-testimonial-card,
.card-surface.zmi-plan-card{
  border-radius:1.35rem !important;
}

.card-surface.zmi-feature-card::after,
.card-surface.zmi-compact-card::after,
.card-surface.zmi-proof-card::after,
.card-surface.zmi-statement-card::after,
.card-surface.zmi-plan-card::after{
  width:3px !important;
  opacity:.95 !important;
}

.card-surface:hover,
.zmi-about-card:hover,
.zmi-final-cta:hover{
  transform:translateY(-5px) !important;
  border-color:color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 38%,var(--zmi-border)) !important;
  box-shadow:var(--zmi-award-card-shadow-hover) !important;
}

.zmi-icon-badge,
.zmi-statement-card .bi,
.zmi-compact-card .bi,
.zmi-proof-card .bi,
.zmi-plan-card > .bi{
  border:1px solid color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 18%,transparent);
  background:color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 10%,var(--zmi-card)) !important;
}

.zmi-feature-card p,
.zmi-compact-card p,
.zmi-proof-card p,
.zmi-statement-card p,
.zmi-testimonial-card p,
.zmi-plan-card p{
  color:var(--zmi-muted) !important;
}

/* About/company block */
.zmi-company-story .zmi-about-card{
  border-radius:1.65rem !important;
  padding:clamp(1.35rem,2.8vw,2.4rem) !important;
}

.zmi-company-story .zmi-about-media{
  position:relative;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:1.35rem;
  background:linear-gradient(145deg,var(--zmi-award-soft-blue),var(--zmi-award-soft-cyan));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 64%,transparent);
  overflow:hidden;
}

.zmi-company-story .zmi-about-media img{
  width:100%;
  height:100%;
  max-height:420px !important;
  object-fit:contain !important;
  padding:.9rem;
}

/* Testimonials and CTA */
.zmi-testimonial-card{
  border-left:0 !important;
}

.zmi-testimonial-card::after{
  width:100% !important;
  height:3px;
  bottom:auto;
  right:0;
  background:linear-gradient(90deg,var(--zmi-primary),var(--zmi-cyan));
}

.zmi-final-cta{
  position:relative;
  border-radius:1.7rem !important;
  overflow:hidden;
  background:
    radial-gradient(460px 220px at 12% 0%, rgba(13,110,253,.12), transparent 70%),
    radial-gradient(420px 220px at 100% 0%, rgba(6,182,212,.10), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb,var(--zmi-card) 92%,var(--zmi-primary) 4%), var(--zmi-card)) !important;
}

.zmi-final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
  transform:translateX(-120%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}

.zmi-final-cta:hover::before{
  transform:translateX(120%);
}

/* Responsive */
@media (max-width:1199.98px){
  :root{ --zmi-award-max:78rem; }
}

@media (max-width:1023.98px){
  :root{ --zmi-award-gutter:1.25rem; }
  .slide-body,
  .slide-body.grid,
  .zmi-hero-grid{
    min-height:auto !important;
    grid-template-columns:1fr !important;
    gap:1.8rem !important;
  }
  .zmi-hero-title{
    font-size:clamp(2.2rem,6.6vw,3.6rem) !important;
  }
  .zmi-hero-media,
  .hero-illustration{
    min-height:300px !important;
    max-height:380px !important;
  }
  .zmi-hero-media img,
  .hero-illustration img{
    min-height:calc(300px - 1.5rem) !important;
    max-height:calc(380px - 1.5rem) !important;
  }
}

@media (max-width:767.98px){
  :root{ --zmi-award-gutter:.875rem; }
  .max-w-7xl,
  #zmiNavBar nav,
  #clients .max-w-7xl,
  #solutions .max-w-7xl,
  #about .max-w-7xl,
  #company .max-w-7xl,
  #mission .max-w-7xl,
  #team .max-w-7xl,
  #why .max-w-7xl,
  #testimonials .max-w-7xl,
  #future .max-w-7xl,
  .zmi-cta-section .max-w-7xl{
    width:100% !important;
    max-width:100% !important;
    padding-left:var(--zmi-award-gutter) !important;
    padding-right:var(--zmi-award-gutter) !important;
  }
  .zmi-section{
    padding-top:2.5rem !important;
    padding-bottom:2.5rem !important;
  }
  .zmi-award-hero-section,
  #heroArea{
    padding-top:1.15rem !important;
    padding-bottom:2.3rem !important;
  }
  .zmi-hero-title{
    font-size:clamp(1.9rem,9.8vw,2.65rem) !important;
    letter-spacing:-.052em !important;
  }
  .zmi-hero-subtitle{
    font-size:.96rem !important;
    line-height:1.62 !important;
  }
  .zmi-hero-media,
  .hero-illustration{
    min-height:220px !important;
    max-height:280px !important;
    padding:.45rem !important;
    border-radius:1.1rem !important;
  }
  .zmi-hero-media::before,
  .hero-illustration::before{
    left:.65rem;
    top:.65rem;
    min-height:1.65rem;
    padding:.3rem .55rem;
    font-size:.68rem;
  }
  .zmi-hero-media img,
  .hero-illustration img{
    min-height:calc(220px - .9rem) !important;
    max-height:calc(280px - .9rem) !important;
    object-fit:contain !important;
    border-radius:.85rem !important;
  }
  .zmi-section-heading h2::after,
  .zmi-section-heading h3::after{
    width:2.6rem;
    margin-top:.6rem;
  }
  .card-surface:hover,
  .zmi-about-card:hover,
  .zmi-final-cta:hover{
    transform:none !important;
  }
}

@media (max-width:420px){
  :root{ --zmi-award-gutter:.7rem; }
  .zmi-hero-title{ font-size:clamp(1.7rem,9.4vw,2.24rem) !important; }
  .zmi-hero-media,
  .hero-illustration{
    min-height:198px !important;
    max-height:248px !important;
  }
  .zmi-hero-media img,
  .hero-illustration img{
    min-height:calc(198px - .9rem) !important;
    max-height:calc(248px - .9rem) !important;
  }
}

html.dark .zmi-supplier-home,
html[data-bs-theme="dark"] .zmi-supplier-home{
  background:
    radial-gradient(900px 360px at 8% -10%, rgba(13,110,253,.075), transparent 70%),
    radial-gradient(760px 320px at 100% 4%, rgba(6,182,212,.055), transparent 68%),
    linear-gradient(180deg, #172033 0%, var(--zmi-page) 28%, var(--zmi-page) 100%) !important;
}

html.dark .zmi-hero-media,
html.dark .hero-illustration,
html[data-bs-theme="dark"] .zmi-hero-media,
html[data-bs-theme="dark"] .hero-illustration{
  background:
    linear-gradient(145deg, color-mix(in srgb,var(--zmi-card) 82%,transparent), color-mix(in srgb,var(--zmi-card) 92%,var(--zmi-primary) 3%)),
    radial-gradient(260px 180px at 80% 12%, rgba(6,182,212,.06), transparent 72%) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

@media (prefers-reduced-motion:reduce){
  .zmi-final-cta::before{ display:none !important; }
}


/* ============================================================================
   ZMI HERO SLIDER FINAL RESPONSIVE PATCH
   Purpose:
   - Remove the decorative "Clinical equipment partner" label from hero images.
   - Stabilize slider clipping, transitions, dots, touch swipe, and hero height
     across mobile, tablet, laptop, and desktop.
   - Keep all previous landing design and DB-driven content intact.
   ============================================================================ */

.zmi-hero-media::before,
.hero-illustration::before{
  content:none !important;
  display:none !important;
}

#zmiHero,
.zmi-hero-carousel{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  isolation:isolate;
  touch-action:pan-y;
}

#slidesWrap,
.slides-wrap{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  transition:height 460ms cubic-bezier(.22,.61,.36,1) !important;
  will-change:height;
}

#zmiHero .slide,
.zmi-hero-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  opacity:0;
  pointer-events:none;
  transform:translate3d(100%,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
}

#zmiHero .slide.active,
.zmi-hero-slide.active{
  z-index:2;
  opacity:1;
  pointer-events:auto;
  transform:translate3d(0,0,0);
  transition:transform 660ms cubic-bezier(.22,.61,.36,1), opacity 660ms ease;
}

#zmiHero .slide.exit-left,
.zmi-hero-slide.exit-left{
  z-index:1;
  opacity:0;
  transform:translate3d(-100%,0,0);
  transition:transform 660ms cubic-bezier(.22,.61,.36,1), opacity 660ms ease;
}

#zmiHero .slide.exit-right,
.zmi-hero-slide.exit-right{
  z-index:1;
  opacity:0;
  transform:translate3d(100%,0,0);
  transition:transform 660ms cubic-bezier(.22,.61,.36,1), opacity 660ms ease;
}

#zmiHero .slide-body,
#zmiHero .zmi-hero-grid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

#zmiHero .zmi-hero-copy,
#zmiHero .zmi-hero-media,
#zmiHero .hero-illustration{
  min-width:0 !important;
}

#zmiHero .zmi-hero-media,
#zmiHero .hero-illustration{
  overflow:hidden !important;
}

#zmiHero .zmi-hero-media img,
#zmiHero .hero-illustration img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}

#zmiHero .zmi-hero-dot,
#zmiHero .indicator{
  cursor:pointer;
  transition:width .24s ease, opacity .24s ease, background-color .24s ease, border-color .24s ease, transform .24s ease !important;
}

#zmiHero .zmi-hero-dot:hover,
#zmiHero .indicator:hover{
  transform:translateY(-1px) scale(1.05) !important;
}

#zmiHero .zmi-hero-arrow,
#zmiHero .arrow-btn{
  transition:opacity .2s ease, transform .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

@media (hover:hover) and (pointer:fine){
  #zmiHero .zmi-hero-arrow,
  #zmiHero .arrow-btn{ opacity:.72 !important; }
  #zmiHero:hover .zmi-hero-arrow,
  #zmiHero:hover .arrow-btn,
  #zmiHero:focus-within .zmi-hero-arrow,
  #zmiHero:focus-within .arrow-btn{ opacity:1 !important; }
}

@media (max-width:1023.98px){
  #zmiHero,
  .zmi-hero-carousel,
  #slidesWrap,
  .slides-wrap{
    overflow:hidden !important;
  }

  #zmiHero .slide-body,
  #zmiHero .slide-body.grid,
  #zmiHero .zmi-hero-grid{
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:clamp(1.15rem,3vw,1.8rem) !important;
  }

  #zmiHero .zmi-hero-copy{
    order:1;
  }

  #zmiHero .zmi-hero-media,
  #zmiHero .hero-illustration{
    order:2;
  }
}

@media (max-width:767.98px){
  #zmiHero .zmi-hero-media,
  #zmiHero .hero-illustration{
    min-height:210px !important;
    max-height:280px !important;
  }

  #zmiHero .zmi-hero-media img,
  #zmiHero .hero-illustration img{
    min-height:calc(210px - .9rem) !important;
    max-height:calc(280px - .9rem) !important;
    object-fit:contain !important;
  }

  #zmiHero .zmi-hero-dot,
  #zmiHero .indicator{
    min-width:.58rem !important;
    min-height:.58rem !important;
  }

  #zmiHero .zmi-hero-dot.active,
  #zmiHero .indicator.active,
  #zmiHero .zmi-hero-dot[aria-current="true"],
  #zmiHero .indicator[aria-current="true"]{
    min-width:1.35rem !important;
  }
}

@media (max-width:420px){
  #zmiHero .zmi-hero-media,
  #zmiHero .hero-illustration{
    min-height:190px !important;
    max-height:245px !important;
  }

  #zmiHero .zmi-hero-media img,
  #zmiHero .hero-illustration img{
    min-height:calc(190px - .9rem) !important;
    max-height:calc(245px - .9rem) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #slidesWrap,
  .slides-wrap,
  #zmiHero .slide,
  .zmi-hero-slide{
    transition:none !important;
  }
}

/* Landing visual refinement for database-driven blocks */
.zmi-landing{
  background:
    radial-gradient(820px 280px at 12% 4%, color-mix(in srgb,var(--zmi-primary) 8%,transparent), transparent 68%),
    radial-gradient(760px 260px at 88% 18%, color-mix(in srgb,var(--zmi-cyan) 7%,transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb,var(--zmi-page) 94%,#eef6ff 6%) 0%, var(--zmi-page) 34%, var(--zmi-page) 100%);
}

.zmi-section{
  position:relative;
}

.zmi-section > .max-w-7xl{
  position:relative;
  z-index:1;
}

.zmi-section-heading{
  position:relative;
}

.zmi-section-heading::before{
  content:"";
  position:absolute;
  left:-1.15rem;
  top:.2rem;
  width:.42rem;
  height:2.55rem;
  border-radius:999px;
  background:linear-gradient(180deg,var(--zmi-primary),var(--zmi-cyan));
  opacity:.22;
}

.zmi-client-logo-marquee{
  width:100% !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.zmi-client-logo-marquee::before,
.zmi-client-logo-marquee::after{
  display:none !important;
}

.zmi-client-marquee-track,
.clients-track.zmi-client-marquee-track{
  display:flex !important;
  width:max-content !important;
  gap:0 !important;
  padding:0 !important;
  animation:zmiClientLogoMarquee 34s linear infinite !important;
  will-change:transform;
}

.zmi-client-logo-marquee:hover .zmi-client-marquee-track{
  animation-play-state:paused !important;
}

.zmi-client-marquee-group,
.clients-group{
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.2vw,2rem);
  padding-block:.35rem;
  padding-inline:clamp(.55rem,1.4vw,1.2rem);
  flex:0 0 auto;
}

.zmi-client-brand.brand{
  min-width:max-content;
  opacity:.94 !important;
  filter:none !important;
  transform:none !important;
}

.zmi-client-link{
  color:inherit;
  text-decoration:none;
}

.zmi-client-logo{
  display:block;
  width:auto;
  max-width:11rem;
  height:clamp(2.25rem,3vw,3.2rem);
  object-fit:contain;
  opacity:1;
  filter:none;
  transition:opacity .24s ease, filter .24s ease, transform .24s ease;
}

.zmi-client-text{
  display:inline-flex;
  align-items:center;
  min-height:2.7rem;
  padding:.62rem 1rem;
  border-radius:999px;
  color:color-mix(in srgb,var(--zmi-strong) 62%,var(--zmi-muted));
  font-size:clamp(.86rem,.8rem + .22vw,1rem);
  font-weight:850;
  letter-spacing:-.018em;
  background:linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 90%,transparent), color-mix(in srgb,var(--zmi-card) 70%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 64%,transparent), 0 10px 24px rgba(15,23,42,.045);
  white-space:nowrap;
}

.zmi-client-brand:hover .zmi-client-logo,
.zmi-client-brand:hover .zmi-client-text{
  opacity:1;
  filter:none;
  transform:translateY(-1px);
}

@keyframes zmiClientLogoMarquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

.card-surface.zmi-feature-card,
.card-surface.zmi-compact-card,
.card-surface.zmi-proof-card,
.card-surface.zmi-statement-card,
.card-surface.zmi-testimonial-card,
.card-surface.zmi-plan-card,
.card-surface.zmi-product-card,
.card-surface.zmi-gallery-card{
  overflow:hidden;
  isolation:isolate;
  min-height:100%;
  border:1px solid color-mix(in srgb,var(--zmi-border) 60%,transparent) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb,var(--zmi-card) 94%,transparent), color-mix(in srgb,var(--zmi-card) 84%,var(--zmi-primary) 3%)),
    radial-gradient(260px 150px at 10% 0%, color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 10%,transparent), transparent 70%) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.card-surface.zmi-feature-card::before,
.card-surface.zmi-compact-card::before,
.card-surface.zmi-proof-card::before,
.card-surface.zmi-statement-card::before,
.card-surface.zmi-plan-card::before,
.card-surface.zmi-product-card::before,
.card-surface.zmi-gallery-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(240px 120px at 12% 0%, color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 12%,transparent), transparent 68%),
    linear-gradient(135deg, color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 6%,transparent), transparent 56%) !important;
  opacity:.88;
}

.card-surface.zmi-feature-card::after,
.card-surface.zmi-compact-card::after,
.card-surface.zmi-proof-card::after,
.card-surface.zmi-statement-card::after,
.card-surface.zmi-plan-card::after,
.card-surface.zmi-product-card::after,
.card-surface.zmi-gallery-card::after{
  content:"";
  position:absolute;
  left:0;
  top:1.15rem;
  width:4px !important;
  height:2.8rem;
  border-radius:0 999px 999px 0;
  background:var(--zmi-card-accent,var(--zmi-primary));
  opacity:.9 !important;
}

.card-surface.zmi-feature-card:hover,
.card-surface.zmi-compact-card:hover,
.card-surface.zmi-proof-card:hover,
.card-surface.zmi-statement-card:hover,
.card-surface.zmi-testimonial-card:hover,
.card-surface.zmi-plan-card:hover,
.card-surface.zmi-product-card:hover,
.card-surface.zmi-gallery-card:hover{
  transform:translateY(-5px) !important;
  border-color:color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 28%,var(--zmi-border)) !important;
  box-shadow:0 22px 48px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.46) !important;
}

.zmi-card-head{
  min-height:2.65rem;
}

.zmi-icon-badge-lg,
.zmi-icon-badge,
.zmi-statement-card .zmi-icon-badge,
.zmi-plan-card > .zmi-icon-badge{
  width:2.75rem !important;
  height:2.75rem !important;
  border-radius:1rem !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 15%,var(--zmi-card)), color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 6%,var(--zmi-card))) !important;
  color:var(--zmi-card-accent,var(--zmi-primary)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 22%,transparent), 0 10px 20px color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 12%,transparent);
}

.zmi-icon-badge-lg .bi,
.zmi-icon-badge .bi{
  color:inherit !important;
  font-size:1.08rem;
}

.zmi-card-title-wrap h5,
.zmi-card-head h4,
.zmi-card-head h5,
.zmi-feature-card h5,
.zmi-compact-card h5,
.zmi-proof-card h5{
  color:var(--zmi-strong) !important;
  font-size:clamp(1rem,.93rem + .22vw,1.14rem) !important;
  line-height:1.25 !important;
  letter-spacing:-.032em !important;
}

.zmi-card-summary,
.zmi-feature-card p,
.zmi-compact-card p,
.zmi-proof-card p,
.zmi-plan-card p{
  color:var(--zmi-muted) !important;
  font-size:.94rem !important;
  line-height:1.68 !important;
}

.zmi-card-image-wrap{
  position:relative;
  overflow:hidden;
  margin:0 0 1rem;
  border-radius:1rem;
  background:color-mix(in srgb,var(--zmi-card) 88%,var(--zmi-primary) 4%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 68%,transparent);
}

.zmi-card-image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 58%, rgba(15,23,42,.12));
  pointer-events:none;
}

.zmi-card-image{
  display:block;
  width:100%;
  height:clamp(9rem,15vw,13rem);
  object-fit:cover;
  transition:transform .38s ease;
}

.card-surface:hover .zmi-card-image{
  transform:scale(1.035);
}

.zmi-solution-card{
  min-height:clamp(10.5rem,12vw,13rem) !important;
}

.zmi-team-card,
.zmi-proof-card{
  min-height:clamp(9.75rem,11vw,12rem) !important;
}

.zmi-team-card .zmi-card-summary,
.zmi-proof-card .zmi-card-summary{
  font-size:.88rem !important;
}

.zmi-testimonial-card{
  border-left:0 !important;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.zmi-quote-mark{
  width:2.55rem;
  height:2.55rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--zmi-primary);
  background:color-mix(in srgb,var(--zmi-primary) 10%,var(--zmi-card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-primary) 20%,transparent);
}

.zmi-testimonial-author{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  margin-top:auto;
  color:var(--zmi-muted) !important;
}

.zmi-testimonial-author span{
  color:var(--zmi-strong);
  font-weight:800;
}

.zmi-testimonial-author small{
  color:var(--zmi-muted);
}

.zmi-final-cta{
  position:relative;
  overflow:hidden;
}

.zmi-final-cta::before{
  content:"";
  position:absolute;
  inset:auto -8% -44% -8%;
  height:70%;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--zmi-primary) 12%,transparent), transparent 72%);
  pointer-events:none;
}

@media (max-width:1023.98px){
  .zmi-client-marquee-track,
  .clients-track.zmi-client-marquee-track{
    animation-duration:30s !important;
  }

  .zmi-client-marquee-group{
    gap:1rem;
  }
}

@media (max-width:767.98px){
  .zmi-section-heading::before{
    display:none;
  }

  .zmi-client-logo-marquee{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }

  .zmi-client-text{
    min-height:2.35rem;
    padding:.52rem .82rem;
    font-size:.84rem;
  }

  .zmi-client-logo{
    height:2.25rem;
    max-width:8.75rem;
  }

  .zmi-icon-badge-lg,
  .zmi-icon-badge{
    width:2.45rem !important;
    height:2.45rem !important;
    border-radius:.85rem !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .zmi-client-marquee-track,
  .clients-track.zmi-client-marquee-track{
    animation:none !important;
    transform:none !important;
  }
}

html.dark .zmi-landing,
html[data-bs-theme="dark"] .zmi-landing{
  background:
    radial-gradient(780px 260px at 14% 4%, rgba(13,110,253,.13), transparent 68%),
    radial-gradient(700px 240px at 88% 14%, rgba(6,182,212,.1), transparent 66%),
    linear-gradient(180deg, #172033 0%, var(--zmi-page) 34%, var(--zmi-page) 100%);
}

html.dark .zmi-client-text,
html[data-bs-theme="dark"] .zmi-client-text{
  background:linear-gradient(180deg, color-mix(in srgb,var(--zmi-card) 80%,transparent), color-mix(in srgb,var(--zmi-card) 64%,transparent));
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.16), 0 10px 24px rgba(0,0,0,.16);
}

html.dark .card-surface.zmi-feature-card,
html.dark .card-surface.zmi-compact-card,
html.dark .card-surface.zmi-proof-card,
html.dark .card-surface.zmi-statement-card,
html.dark .card-surface.zmi-testimonial-card,
html.dark .card-surface.zmi-plan-card,
html.dark .card-surface.zmi-product-card,
html.dark .card-surface.zmi-gallery-card,
html[data-bs-theme="dark"] .card-surface.zmi-feature-card,
html[data-bs-theme="dark"] .card-surface.zmi-compact-card,
html[data-bs-theme="dark"] .card-surface.zmi-proof-card,
html[data-bs-theme="dark"] .card-surface.zmi-statement-card,
html[data-bs-theme="dark"] .card-surface.zmi-testimonial-card,
html[data-bs-theme="dark"] .card-surface.zmi-plan-card,
html[data-bs-theme="dark"] .card-surface.zmi-product-card,
html[data-bs-theme="dark"] .card-surface.zmi-gallery-card{
  background:
    linear-gradient(145deg, color-mix(in srgb,var(--zmi-card) 88%,transparent), color-mix(in srgb,var(--zmi-card) 76%,var(--zmi-primary) 5%)),
    radial-gradient(260px 150px at 10% 0%, color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 10%,transparent), transparent 70%) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ============================================================================
   ZMI LANDING SHADOW + CLIENT MARQUEE TUNING PATCH
   Purpose:
   - Reduce spread shadows that looked like unwanted borders after the visual upgrade.
   - Keep the landing page database-driven and preserve the latest block design.
   - Make Clients & Partners an edge-free infinite logo marquee that blends into
     light and dark backgrounds, with calmer Suno-style movement.
   ============================================================================ */

:root{
  --zmi-soft-surface-shadow:0 4px 14px rgba(15,23,42,.032);
  --zmi-soft-surface-shadow-hover:0 8px 22px rgba(15,23,42,.052);
  --zmi-soft-media-shadow:0 6px 16px rgba(15,23,42,.038);
  --zmi-soft-button-shadow:0 8px 18px rgba(13,110,253,.145);
  --zmi-client-marquee-duration:58s;
}

/* Softer section surfaces and cards. Keep subtle separation, remove spread-heavy glow. */
.zmi-landing .card-surface.zmi-feature-card,
.zmi-landing .card-surface.zmi-compact-card,
.zmi-landing .card-surface.zmi-proof-card,
.zmi-landing .card-surface.zmi-statement-card,
.zmi-landing .card-surface.zmi-testimonial-card,
.zmi-landing .card-surface.zmi-plan-card,
.zmi-landing .card-surface.zmi-product-card,
.zmi-landing .card-surface.zmi-gallery-card,
.zmi-landing .zmi-about-card,
.zmi-landing .zmi-final-cta,
.zmi-cms-public-page .card-surface.zmi-feature-card,
.zmi-cms-public-page .card-surface.zmi-compact-card,
.zmi-cms-public-page .card-surface.zmi-proof-card,
.zmi-cms-public-page .card-surface.zmi-statement-card,
.zmi-cms-public-page .card-surface.zmi-testimonial-card,
.zmi-cms-public-page .card-surface.zmi-plan-card,
.zmi-cms-public-page .zmi-about-card,
.zmi-cms-public-page .zmi-final-cta{
  border-color:color-mix(in srgb,var(--zmi-border) 56%,transparent) !important;
  box-shadow:var(--zmi-soft-surface-shadow) !important;
}

.zmi-landing .card-surface.zmi-feature-card:hover,
.zmi-landing .card-surface.zmi-compact-card:hover,
.zmi-landing .card-surface.zmi-proof-card:hover,
.zmi-landing .card-surface.zmi-statement-card:hover,
.zmi-landing .card-surface.zmi-testimonial-card:hover,
.zmi-landing .card-surface.zmi-plan-card:hover,
.zmi-landing .card-surface.zmi-product-card:hover,
.zmi-landing .card-surface.zmi-gallery-card:hover,
.zmi-landing .zmi-about-card:hover,
.zmi-landing .zmi-final-cta:hover,
.zmi-cms-public-page .card-surface.zmi-feature-card:hover,
.zmi-cms-public-page .card-surface.zmi-compact-card:hover,
.zmi-cms-public-page .card-surface.zmi-proof-card:hover,
.zmi-cms-public-page .card-surface.zmi-statement-card:hover,
.zmi-cms-public-page .card-surface.zmi-testimonial-card:hover,
.zmi-cms-public-page .card-surface.zmi-plan-card:hover,
.zmi-cms-public-page .zmi-about-card:hover,
.zmi-cms-public-page .zmi-final-cta:hover{
  transform:translateY(-3px) !important;
  border-color:color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 22%,var(--zmi-border)) !important;
  box-shadow:var(--zmi-soft-surface-shadow-hover) !important;
}

.zmi-landing .zmi-icon-badge-lg,
.zmi-landing .zmi-icon-badge,
.zmi-landing .zmi-statement-card .bi,
.zmi-landing .zmi-compact-card .bi,
.zmi-landing .zmi-proof-card .bi,
.zmi-landing .zmi-plan-card > .bi,
.zmi-cms-public-page .zmi-icon-badge-lg,
.zmi-cms-public-page .zmi-icon-badge{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-card-accent,var(--zmi-primary)) 18%,transparent) !important;
}

.zmi-landing .zmi-card-image-wrap,
.zmi-cms-public-page .zmi-card-image-wrap{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zmi-border) 54%,transparent) !important;
}

.zmi-landing .zmi-hero-media,
.zmi-landing .hero-illustration,
.zmi-cms-public-page .zmi-hero-media,
.zmi-cms-public-page .hero-illustration,
#zmiHero .zmi-hero-media,
#zmiHero .hero-illustration{
  border-color:color-mix(in srgb,var(--zmi-border) 50%,transparent) !important;
  box-shadow:var(--zmi-soft-media-shadow) !important;
}

.zmi-landing .zmi-hero-arrow,
.zmi-landing .arrow-btn,
.zmi-cms-public-page .zmi-hero-arrow,
.zmi-cms-public-page .arrow-btn,
#zmiHero .zmi-hero-arrow,
#zmiHero .arrow-btn{
  box-shadow:0 4px 12px rgba(15,23,42,.055) !important;
}

.zmi-landing .zmi-btn-primary,
.zmi-cms-public-page .zmi-btn-primary{
  box-shadow:var(--zmi-soft-button-shadow) !important;
}

.zmi-landing .zmi-btn-primary:hover,
.zmi-cms-public-page .zmi-btn-primary:hover{
  box-shadow:0 10px 24px rgba(13,110,253,.19) !important;
}

/* Edge-free client logo marquee. This component is also called an infinite logo marquee. */
.zmi-landing .zmi-client-strip.clients,
.zmi-landing .zmi-client-logo-marquee,
.zmi-cms-public-page .zmi-client-strip.clients,
.zmi-cms-public-page .zmi-client-logo-marquee,
.clients.zmi-client-strip.zmi-client-logo-marquee{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:hidden !important;
  padding-block:.18rem !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7.5%, #000 92.5%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 7.5%, #000 92.5%, transparent 100%);
}

.zmi-landing .zmi-client-logo-marquee::before,
.zmi-landing .zmi-client-logo-marquee::after,
.zmi-cms-public-page .zmi-client-logo-marquee::before,
.zmi-cms-public-page .zmi-client-logo-marquee::after,
.clients.zmi-client-strip.zmi-client-logo-marquee::before,
.clients.zmi-client-strip.zmi-client-logo-marquee::after{
  content:none !important;
  display:none !important;
}

.zmi-landing .zmi-client-marquee-track,
.zmi-landing .clients-track.zmi-client-marquee-track,
.zmi-cms-public-page .zmi-client-marquee-track,
.zmi-cms-public-page .clients-track.zmi-client-marquee-track,
.clients-track.zmi-client-marquee-track{
  gap:0 !important;
  padding:0 !important;
  animation:zmiClientLogoMarquee var(--zmi-client-marquee-duration) linear infinite !important;
  transform:translate3d(0,0,0);
}

.zmi-landing .zmi-client-marquee-group,
.zmi-landing .clients-group,
.zmi-cms-public-page .zmi-client-marquee-group,
.zmi-cms-public-page .clients-group{
  gap:clamp(1.65rem,3vw,3.35rem) !important;
  padding-inline:clamp(.95rem,1.9vw,1.65rem) !important;
  padding-block:.32rem !important;
}

.zmi-landing .zmi-client-brand.brand,
.zmi-cms-public-page .zmi-client-brand.brand{
  opacity:.94 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
  transition:opacity .24s ease, transform .24s ease, filter .24s ease !important;
}

.zmi-landing .zmi-client-logo,
.zmi-cms-public-page .zmi-client-logo{
  height:clamp(2.1rem,2.8vw,3rem) !important;
  max-width:11.25rem !important;
  opacity:1 !important;
  filter:none !important;
}

.zmi-landing .zmi-client-text,
.zmi-cms-public-page .zmi-client-text{
  min-height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:color-mix(in srgb,var(--zmi-strong) 54%,var(--zmi-muted)) !important;
  font-size:clamp(.9rem,.83rem + .24vw,1.04rem) !important;
  font-weight:850 !important;
  letter-spacing:-.018em !important;
  white-space:nowrap !important;
}

.zmi-landing .zmi-client-brand:hover,
.zmi-cms-public-page .zmi-client-brand:hover{
  opacity:1 !important;
  transform:translateY(-1px) !important;
}

.zmi-landing .zmi-client-brand:hover .zmi-client-logo,
.zmi-cms-public-page .zmi-client-brand:hover .zmi-client-logo{
  opacity:1 !important;
  filter:none !important;
}

.zmi-landing .zmi-client-brand:hover .zmi-client-text,
.zmi-cms-public-page .zmi-client-brand:hover .zmi-client-text{
  color:color-mix(in srgb,var(--zmi-strong) 76%,var(--zmi-primary)) !important;
}

/* Softer dark mode: visible, but no heavy glow/border spread. */
html.dark,
html[data-bs-theme="dark"]{
  --zmi-soft-surface-shadow:0 4px 14px rgba(0,0,0,.10);
  --zmi-soft-surface-shadow-hover:0 8px 22px rgba(0,0,0,.15);
  --zmi-soft-media-shadow:0 6px 18px rgba(0,0,0,.13);
  --zmi-soft-button-shadow:0 8px 20px rgba(13,110,253,.18);
}

html.dark .zmi-landing .zmi-client-text,
html[data-bs-theme="dark"] .zmi-landing .zmi-client-text,
html.dark .zmi-cms-public-page .zmi-client-text,
html[data-bs-theme="dark"] .zmi-cms-public-page .zmi-client-text{
  background:transparent !important;
  box-shadow:none !important;
  color:color-mix(in srgb,var(--zmi-strong) 52%,var(--zmi-muted)) !important;
}

html.dark .zmi-landing .zmi-client-logo,
html[data-bs-theme="dark"] .zmi-landing .zmi-client-logo,
html.dark .zmi-cms-public-page .zmi-client-logo,
html[data-bs-theme="dark"] .zmi-cms-public-page .zmi-client-logo{
  opacity:1 !important;
  filter:none !important;
}

html.dark .zmi-landing .zmi-client-brand:hover .zmi-client-logo,
html[data-bs-theme="dark"] .zmi-landing .zmi-client-brand:hover .zmi-client-logo,
html.dark .zmi-cms-public-page .zmi-client-brand:hover .zmi-client-logo,
html[data-bs-theme="dark"] .zmi-cms-public-page .zmi-client-brand:hover .zmi-client-logo{
  opacity:1 !important;
  filter:none !important;
}

html.dark .zmi-landing .card-surface.zmi-feature-card,
html.dark .zmi-landing .card-surface.zmi-compact-card,
html.dark .zmi-landing .card-surface.zmi-proof-card,
html.dark .zmi-landing .card-surface.zmi-statement-card,
html.dark .zmi-landing .card-surface.zmi-testimonial-card,
html.dark .zmi-landing .card-surface.zmi-plan-card,
html.dark .zmi-landing .zmi-about-card,
html.dark .zmi-landing .zmi-final-cta,
html[data-bs-theme="dark"] .zmi-landing .card-surface.zmi-feature-card,
html[data-bs-theme="dark"] .zmi-landing .card-surface.zmi-compact-card,
html[data-bs-theme="dark"] .zmi-landing .card-surface.zmi-proof-card,
html[data-bs-theme="dark"] .zmi-landing .card-surface.zmi-statement-card,
html[data-bs-theme="dark"] .zmi-landing .card-surface.zmi-testimonial-card,
html[data-bs-theme="dark"] .zmi-landing .card-surface.zmi-plan-card,
html[data-bs-theme="dark"] .zmi-landing .zmi-about-card,
html[data-bs-theme="dark"] .zmi-landing .zmi-final-cta{
  box-shadow:var(--zmi-soft-surface-shadow) !important;
}

@media (max-width:1023.98px){
  :root{ --zmi-client-marquee-duration:52s; }

  .zmi-landing .zmi-client-marquee-group,
  .zmi-landing .clients-group,
  .zmi-cms-public-page .zmi-client-marquee-group,
  .zmi-cms-public-page .clients-group{
    gap:1.65rem !important;
  }
}

@media (max-width:767.98px){
  :root{ --zmi-client-marquee-duration:46s; }

  .zmi-landing .zmi-client-logo-marquee,
  .zmi-cms-public-page .zmi-client-logo-marquee,
  .clients.zmi-client-strip.zmi-client-logo-marquee{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  }

  .zmi-landing .card-surface.zmi-feature-card,
  .zmi-landing .card-surface.zmi-compact-card,
  .zmi-landing .card-surface.zmi-proof-card,
  .zmi-landing .card-surface.zmi-statement-card,
  .zmi-landing .card-surface.zmi-testimonial-card,
  .zmi-landing .card-surface.zmi-plan-card,
  .zmi-landing .zmi-about-card,
  .zmi-landing .zmi-final-cta{
    box-shadow:0 3px 10px rgba(15,23,42,.028) !important;
  }

  .zmi-landing .card-surface:hover,
  .zmi-landing .zmi-about-card:hover,
  .zmi-landing .zmi-final-cta:hover{
    box-shadow:0 3px 10px rgba(15,23,42,.028) !important;
  }
}

/* ============================================================================
   ZMI LANDING GRID AND CLIENT STRIP CLEANUP
   Purpose:
   - Remove the faint square background guide lines visible near the hero and
     clients section.
   - Keep the client marquee borderless and fully blended with light/dark mode.
   ============================================================================ */

.zmi-supplier-home::after,
.zmi-landing.zmi-supplier-home::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  opacity:0 !important;
  background:none !important;
}

.zmi-supplier-home,
.zmi-landing.zmi-supplier-home{
  background:
    radial-gradient(820px 280px at 12% 4%, color-mix(in srgb,var(--zmi-primary) 7%,transparent), transparent 68%),
    radial-gradient(760px 260px at 88% 18%, color-mix(in srgb,var(--zmi-cyan) 6%,transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb,var(--zmi-page) 95%,#eef6ff 5%) 0%, var(--zmi-page) 34%, var(--zmi-page) 100%) !important;
}

.zmi-clients-section,
#clients{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden;
}

.zmi-clients-section::before,
.zmi-clients-section::after,
#clients::before,
#clients::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

#clients .max-w-7xl,
.zmi-clients-section .max-w-7xl{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#clients .clients,
#clients .zmi-client-strip,
#clients .zmi-client-logo-marquee,
.zmi-clients-section .clients,
.zmi-clients-section .zmi-client-strip,
.zmi-clients-section .zmi-client-logo-marquee,
.clients.zmi-client-strip.zmi-client-logo-marquee{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

#clients .clients::before,
#clients .clients::after,
#clients .zmi-client-strip::before,
#clients .zmi-client-strip::after,
#clients .zmi-client-logo-marquee::before,
#clients .zmi-client-logo-marquee::after,
.zmi-clients-section .clients::before,
.zmi-clients-section .clients::after,
.zmi-clients-section .zmi-client-strip::before,
.zmi-clients-section .zmi-client-strip::after,
.zmi-clients-section .zmi-client-logo-marquee::before,
.zmi-clients-section .zmi-client-logo-marquee::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  box-shadow:none !important;
}

#clients .clients-track,
#clients .zmi-client-marquee-track,
.zmi-clients-section .clients-track,
.zmi-clients-section .zmi-client-marquee-track{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  animation-duration:58s !important;
}

#clients .clients-group,
#clients .zmi-client-marquee-group,
#clients .zmi-client-brand,
#clients .zmi-client-text,
.zmi-clients-section .clients-group,
.zmi-clients-section .zmi-client-marquee-group,
.zmi-clients-section .zmi-client-brand,
.zmi-clients-section .zmi-client-text{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

html.dark .zmi-supplier-home,
html[data-bs-theme="dark"] .zmi-supplier-home,
html.dark .zmi-landing.zmi-supplier-home,
html[data-bs-theme="dark"] .zmi-landing.zmi-supplier-home{
  background:
    radial-gradient(820px 280px at 12% 4%, rgba(13,110,253,.09), transparent 68%),
    radial-gradient(760px 260px at 88% 18%, rgba(6,182,212,.075), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb,var(--zmi-page) 94%,var(--zmi-primary) 6%) 0%, var(--zmi-page) 34%, var(--zmi-page) 100%) !important;
}

html.dark #clients,
html.dark .zmi-clients-section,
html[data-bs-theme="dark"] #clients,
html[data-bs-theme="dark"] .zmi-clients-section,
html.dark #clients .clients,
html.dark #clients .zmi-client-strip,
html.dark #clients .zmi-client-logo-marquee,
html[data-bs-theme="dark"] #clients .clients,
html[data-bs-theme="dark"] #clients .zmi-client-strip,
html[data-bs-theme="dark"] #clients .zmi-client-logo-marquee{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}


/* ZMI landing client logo color fix */
#clients .brand,
#clients .zmi-client-brand,
.zmi-clients-section .brand,
.zmi-clients-section .zmi-client-brand{
  opacity:.94 !important;
  filter:none !important;
}

#clients .zmi-client-logo,
.zmi-clients-section .zmi-client-logo{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

#clients .zmi-client-brand:hover,
.zmi-clients-section .zmi-client-brand:hover,
#clients .zmi-client-brand:hover .zmi-client-logo,
.zmi-clients-section .zmi-client-brand:hover .zmi-client-logo{
  opacity:1 !important;
  filter:none !important;
}

/* ============================================================================
   ZMI LANDING SECTION RHYTHM FINAL PATCH
   Purpose:
   - Reduce excessive vertical gaps between hero, clients, and company blocks.
   - Keep the existing database-driven PHP, client logo color, carousel logic,
     and visual design unchanged.
   - Keep hero copy and media aligned on the same vertical center line.
   ============================================================================ */

.zmi-landing.zmi-supplier-home{
  --zmi-landing-section-y:clamp(2.35rem, 3vw, 3.35rem);
  --zmi-landing-section-y-tight:clamp(1.35rem, 1.8vw, 2rem);
  --zmi-landing-section-y-mobile:2rem;
}

.zmi-landing.zmi-supplier-home > .zmi-section{
  padding-top:var(--zmi-landing-section-y) !important;
  padding-bottom:var(--zmi-landing-section-y) !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.zmi-landing.zmi-supplier-home #heroArea,
.zmi-landing.zmi-supplier-home .zmi-award-hero-section,
.zmi-landing.zmi-supplier-home .zmi-hero-section{
  padding-top:clamp(1rem, 1.55vw, 1.65rem) !important;
  padding-bottom:clamp(1.3rem, 1.9vw, 2.05rem) !important;
}

.zmi-landing.zmi-supplier-home #zmiHero .slide-body,
.zmi-landing.zmi-supplier-home #zmiHero .slide-body.grid,
.zmi-landing.zmi-supplier-home #zmiHero .zmi-hero-grid{
  min-height:clamp(350px, 32vw, 430px) !important;
  align-items:center !important;
  gap:clamp(2rem, 3.4vw, 3.75rem) !important;
}

.zmi-landing.zmi-supplier-home #zmiHero .zmi-hero-copy,
.zmi-landing.zmi-supplier-home #zmiHero .zmi-hero-media,
.zmi-landing.zmi-supplier-home #zmiHero .hero-illustration{
  align-self:center !important;
}

.zmi-landing.zmi-supplier-home #zmiHero .zmi-hero-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.zmi-landing.zmi-supplier-home #zmiHero .absolute.left-1\/2.bottom-3,
.zmi-landing.zmi-supplier-home #zmiHero .absolute.left-1\/2.-translate-x-1\/2.bottom-3{
  bottom:.35rem !important;
}

.zmi-landing.zmi-supplier-home #clients,
.zmi-landing.zmi-supplier-home .zmi-clients-section,
.zmi-landing.zmi-supplier-home .zmi-trust-section{
  padding-top:var(--zmi-landing-section-y-tight) !important;
  padding-bottom:clamp(1.45rem, 2vw, 2.2rem) !important;
}

.zmi-landing.zmi-supplier-home #clients .zmi-section-heading,
.zmi-landing.zmi-supplier-home .zmi-clients-section .zmi-section-heading{
  margin-bottom:clamp(.95rem, 1.25vw, 1.35rem) !important;
}

.zmi-landing.zmi-supplier-home #clients .zmi-section-heading h2,
.zmi-landing.zmi-supplier-home .zmi-clients-section .zmi-section-heading h2{
  margin-bottom:.55rem !important;
}

.zmi-landing.zmi-supplier-home #clients .zmi-section-heading p,
.zmi-landing.zmi-supplier-home .zmi-clients-section .zmi-section-heading p{
  margin-bottom:0 !important;
}

.zmi-landing.zmi-supplier-home #company,
.zmi-landing.zmi-supplier-home .zmi-company-story,
.zmi-landing.zmi-supplier-home .zmi-about-section{
  padding-top:clamp(1.55rem, 2.15vw, 2.35rem) !important;
  padding-bottom:var(--zmi-landing-section-y) !important;
}

.zmi-landing.zmi-supplier-home #company .zmi-about-card,
.zmi-landing.zmi-supplier-home .zmi-company-story .zmi-about-card{
  margin-top:0 !important;
}

.zmi-landing.zmi-supplier-home #company .grid.mt-5,
.zmi-landing.zmi-supplier-home .zmi-company-story .grid.mt-5{
  margin-top:clamp(1rem, 1.45vw, 1.5rem) !important;
}

@media (max-width:1023.98px){
  .zmi-landing.zmi-supplier-home > .zmi-section{
    padding-top:2.25rem !important;
    padding-bottom:2.25rem !important;
  }

  .zmi-landing.zmi-supplier-home #heroArea,
  .zmi-landing.zmi-supplier-home .zmi-award-hero-section,
  .zmi-landing.zmi-supplier-home .zmi-hero-section{
    padding-top:1rem !important;
    padding-bottom:1.75rem !important;
  }

  .zmi-landing.zmi-supplier-home #zmiHero .slide-body,
  .zmi-landing.zmi-supplier-home #zmiHero .slide-body.grid,
  .zmi-landing.zmi-supplier-home #zmiHero .zmi-hero-grid{
    min-height:auto !important;
    align-items:start !important;
    gap:1.55rem !important;
  }

  .zmi-landing.zmi-supplier-home #zmiHero .zmi-hero-copy{
    justify-content:flex-start !important;
  }

  .zmi-landing.zmi-supplier-home #clients,
  .zmi-landing.zmi-supplier-home .zmi-clients-section,
  .zmi-landing.zmi-supplier-home .zmi-trust-section{
    padding-top:1.25rem !important;
    padding-bottom:1.65rem !important;
  }

  .zmi-landing.zmi-supplier-home #company,
  .zmi-landing.zmi-supplier-home .zmi-company-story,
  .zmi-landing.zmi-supplier-home .zmi-about-section{
    padding-top:1.45rem !important;
    padding-bottom:2.25rem !important;
  }
}

@media (max-width:767.98px){
  .zmi-landing.zmi-supplier-home > .zmi-section{
    padding-top:var(--zmi-landing-section-y-mobile) !important;
    padding-bottom:var(--zmi-landing-section-y-mobile) !important;
  }

  .zmi-landing.zmi-supplier-home #heroArea,
  .zmi-landing.zmi-supplier-home .zmi-award-hero-section,
  .zmi-landing.zmi-supplier-home .zmi-hero-section{
    padding-top:.85rem !important;
    padding-bottom:1.45rem !important;
  }

  .zmi-landing.zmi-supplier-home #zmiHero .slide-body,
  .zmi-landing.zmi-supplier-home #zmiHero .slide-body.grid,
  .zmi-landing.zmi-supplier-home #zmiHero .zmi-hero-grid{
    gap:1.15rem !important;
  }

  .zmi-landing.zmi-supplier-home #clients,
  .zmi-landing.zmi-supplier-home .zmi-clients-section,
  .zmi-landing.zmi-supplier-home .zmi-trust-section{
    padding-top:1rem !important;
    padding-bottom:1.35rem !important;
  }

  .zmi-landing.zmi-supplier-home #company,
  .zmi-landing.zmi-supplier-home .zmi-company-story,
  .zmi-landing.zmi-supplier-home .zmi-about-section{
    padding-top:1.25rem !important;
    padding-bottom:2rem !important;
  }
}

/* ============================================================================
   ZMI HERO COMPACT CONTROL RESTORE
   Purpose:
   - Keep the latest landing spacing/alignment update.
   - Restore the hero badge and call-to-action to compact sizing instead of
     stretching across the hero text column.
   - Do not change PHP, database, CMS logic, logo color, or section spacing.
   ============================================================================ */

#zmiHero .zmi-hero-copy,
.zmi-hero-section .zmi-hero-copy{
  align-items:flex-start !important;
}

#zmiHero .zmi-eyebrow,
.zmi-hero-section .zmi-eyebrow,
#zmiHero .slide-body > div:first-child > .zmi-eyebrow,
.zmi-hero-section .slide-body > div:first-child > .zmi-eyebrow{
  display:inline-flex !important;
  align-self:flex-start !important;
  width:fit-content !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:0 1 auto !important;
}

@media (min-width:768px){
  #zmiHero .zmi-hero-copy > a.zmi-btn-primary,
  #zmiHero .slide-body > div:first-child > a.zmi-btn-primary,
  .zmi-hero-section .zmi-hero-copy > a.zmi-btn-primary,
  .zmi-hero-section .slide-body > div:first-child > a.zmi-btn-primary{
    align-self:flex-start !important;
    width:auto !important;
    max-width:max-content !important;
    min-width:clamp(10.5rem, 14vw, 13rem) !important;
    padding-left:2rem !important;
    padding-right:2rem !important;
    flex:0 0 auto !important;
  }
}


/* PageSpeed-friendly progressive loading indicator.
   It never hides page content and does not block LCP. */
html.is-loading .zmi-page-progress{
  width:72%;
  opacity:1;
}

html.is-loaded .zmi-page-progress{
  width:100%;
  opacity:0;
}

.zmi-page-progress{
  position:fixed;
  inset:0 auto auto 0;
  z-index:9999;
  width:0;
  height:3px;
  background:linear-gradient(90deg,var(--zmi-primary),var(--zmi-cyan));
  pointer-events:none;
  transition:width .36s ease,opacity .24s ease;
}

@media (prefers-reduced-motion: reduce){
  .zmi-page-progress{
    transition:none;
  }
}