/* 
   Zonix Pharma - Pixel Perfect Migration Styles 
   Protocol Phase 1 & 2: Token Mapping & Semantic Architecture
*/

:root {
  /* --- PHASE 1: TOKEN MAPPING (Forensic Extraction) --- */

  /* Typography */
  --font-display: "Plus Jakarta Sans", sans-serif;

  /* Colors — BRAND_ZONIX_PHARMA.md (canónico pharma) */
  --zonix-primary: #56C7B8;       /* brandTeal — CTA principal */
  --zonix-navy: #1E2A5A;            /* brandNavy */
  --zonix-navy-light: #0F4C5C;      /* brandTealDeep */
  --zonix-blue: #0F4C5C;            /* acento profundo / links */
  --zonix-yellow: #F2A65A;          /* brandCtaAccent */

  /* Aliases documentados */
  --brand-teal: #56C7B8;
  --brand-mint: #A8DCCB;
  --brand-surface-light: #F5F7FA;

  /* Backgrounds */
  --zonix-bg-light: #F5F7FA;
  --zonix-bg-dark: #142033;

  /* Slate Scale (Tailwind defaults) */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-900: #0f172a;

  /* Geometry & Measurements */
  --container-max: 1440px;
  --radius-lg: 1.5rem; /* 24px */
  --radius-xl: 2rem; /* 32px */
  --radius-2xl: 3rem; /* 48px */
  --radius-hero: 4rem; /* 64px */

  /* Effects */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-primary: 0 10px 15px -3px rgba(86, 199, 184, 0.35);
}

/* --- GLOBAL RESETS & OVERRIDES --- */

body {
  font-family: var(--font-display);
  background-color: var(--zonix-bg-light);
  color: var(--slate-900);
  -webkit-font-smoothing: antialiased; 
  overflow-x: hidden;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/* Container Override for 1440px Match */
.container-zonix {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container-zonix {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container-zonix {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  color: var(--zonix-navy);
  margin-bottom: 0.5rem;
}

.font-black {
  font-weight: 900 !important;
}
.font-bold {
  font-weight: 700 !important;
}
.font-medium {
  font-weight: 500 !important;
}

.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}

.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-relaxed {
  line-height: 1.625 !important;
}

/* Text Sizes (Fluid where needed) */
/* Text Sizes (Fluid where needed) */
/* Forensic Match for: text-5xl sm:text-6xl lg:text-7xl */
.text-hero-zonix {
  font-size: 3rem; /* text-5xl (48px) */
  line-height: 1;
}
@media (min-width: 640px) {
  .text-hero-zonix {
    font-size: 3.75rem; /* text-6xl (60px) */
  }
}
@media (min-width: 1024px) {
  .text-hero-zonix {
    font-size: 4.5rem; /* text-7xl (72px) */
  }
}
.text-display {
  font-size: clamp(3rem, 5vw, 4.5rem);
} /* text-5xl to text-7xl */
.text-xs {
  font-size: 0.75rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.text-2xl {
  font-size: 1.5rem;
}
@media (min-width: 640px) {
  .text-sm-xl {
    font-size: 1.25rem !important; /* 20px */
  }
}
/* Responsive 5xl for Tablet/Desktop */
@media (min-width: 768px) {
  .text-md-5xl {
    font-size: 3rem !important; /* 48px / Tailwind 5xl */
    line-height: 1 !important;
  }
}
@media (min-width: 1024px) {
  .text-lg-6xl {
    font-size: 3.75rem !important; /* 60px / Tailwind 6xl */
    line-height: 1.1 !important;
  }
}
.text-3xl {
  font-size: 1.875rem;
}
.text-4xl {
  font-size: 2.25rem;
}
.text-5xl {
  font-size: 3rem !important; /* 48px */
}


/* Color Utilities */
.text-primary-zonix {
  color: var(--zonix-primary) !important;
}
.text-teal-deep {
  color: var(--zonix-navy-light) !important;
}
.text-brand-mint {
  color: var(--brand-mint) !important;
}
.bg-primary-zonix {
  background-color: var(--zonix-primary) !important;
}
.bg-mint-soft {
  background-color: rgba(168, 220, 203, 0.35) !important;
}
.bg-badge-navy {
  background-color: var(--zonix-navy) !important;
  color: #fff !important;
}
.badge.bg-primary-zonix {
  color: var(--zonix-navy) !important;
}
.text-navy {
  color: var(--zonix-navy) !important;
}
.bg-navy {
  background-color: var(--zonix-navy) !important;
}
.text-yellow {
  color: var(--zonix-yellow) !important;
}
.bg-yellow {
  background-color: var(--zonix-yellow) !important;
}
.text-blue-zonix {
  color: var(--zonix-blue) !important;
}
.bg-blue-zonix {
  background-color: var(--zonix-blue) !important;
}
.bg-red-50 {
  background-color: #fef2f2 !important; /* Tailwind red-50 */
}
.bg-blue-50 {
  background-color: #eff6ff !important; /* Tailwind blue-50 */
}
.bg-yellow-50 {
  background-color: #fefce8 !important; /* Tailwind yellow-50 */
}
.bg-green-100 {
  background-color: #dcfce7 !important; /* Tailwind green-100 */
}
.bg-green-500 {
  background-color: #22c55e !important; /* Tailwind green-500 */
}
.text-green-600 {
  color: #16a34a !important; /* Tailwind green-600 */
}

/* Opacity Variants (Fix for bg-opacity-10 failing with !important hex) */
.bg-yellow-10 {
  background-color: rgba(242, 166, 90, 0.1) !important;
}
.bg-primary-10 {
  background-color: rgba(86, 199, 184, 0.12) !important;
}
.bg-blue-10 {
  background-color: rgba(15, 76, 92, 0.1) !important;
}
.bg-success-10 {
  background-color: rgba(25, 135, 84, 0.1) !important; /* Bootstrap Success approx */
}



/* Missing Slate Utilities (Forensic Recovery) */
.bg-slate-50 {
  background-color: #f8fafc !important; /* Tailwind slate-50 */
}
.bg-slate-200 {
  background-color: #e2e8f0 !important; /* Tailwind slate-200 */
}
.border-slate-900 {
  border-color: #0f172a !important; /* Tailwind slate-900 */
}

.text-slate-300 {
  color: var(--slate-300) !important;
}
.text-slate-400 {
  color: var(--slate-400) !important;
}
.text-slate-500 {
  color: var(--slate-500) !important;
}
.text-slate-600 {
  color: var(--slate-600) !important;
}

/* Radius Utilities */
/* Radius Utilities - FORENSIC CORRECTION */
.rounded-xl {
  border-radius: 1rem !important; /* Tailwind default rounded-xl is 0.75rem, but User Config says 2rem? Wait. Let's look at the config again. Config: "xl": "2rem". So it MUST be 2rem. */
  border-radius: var(--radius-xl) !important; /* var(--radius-xl) is 2rem (32px) */
}
.rounded-2xl {
  border-radius: var(--radius-2xl) !important; /* 3rem (48px) */
}
.rounded-3rem {
  border-radius: var(--radius-2xl) !important;
}
.rounded-4rem-bl {
  border-bottom-left-radius: var(--radius-hero) !important;
}
/* Border Width Utilities */
.border-8 {
  border-width: 8px !important;
  border-style: solid !important;
}


/* --- PHASE 2: SEMANTIC COMPONENT ARCHITECTURE --- */

/* 1. Navbar Component */
.navbar-zonix {
  height: 5rem;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--slate-100);
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
}
.nav-search-wrapper {
  position: relative;
  max-width: 32rem;
  flex-grow: 1;
  margin-left: 2rem; /* mx-8 = 32px (2rem) */
  margin-right: 2rem;
}
.nav-search-input {
  background-color: var(--slate-100);
  border: none;
  border-radius: 9999px;
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  width: 100%;
  transition: all 0.2s;
  font-size: 1rem;
  color: var(--slate-900);
}
.nav-search-input::placeholder {
  color: var(--slate-500);
}
.nav-search-input:focus {
  background-color: white;
  box-shadow: 0 0 0 2px var(--zonix-primary);
  outline: none;
}
.nav-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-400);
  pointer-events: none;
}
.nav-search-btn {
  position: absolute;
  right: 0.25rem; /* right-1 = 4px */
  top: 0.25rem;   /* inset-y-1 = top: 4px */
  bottom: 0.25rem; /* inset-y-1 = bottom: 4px */
  display: flex;
  align-items: center;
  background-color: var(--zonix-primary);
  color: white;
  border-radius: 9999px;
  padding: 0 1rem; /* Horizontal padding only */
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  transition: background-color 0.2s;
  height: auto;
}
.nav-search-btn:hover {
  background-color: var(--zonix-navy-light);
}

/* 2. Buttons */
.btn-zonix-primary {
    background-color: var(--zonix-primary);
    color: var(--zonix-navy);
    font-weight: 700;
    padding: 0.625rem 1.5rem; /* py-2.5 (10px) px-6 (24px) - Navbar Base */
    border-radius: 9999px;
    border: none;
    box-shadow: var(--shadow-primary);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-zonix-lg {
    padding: 1rem 2rem !important; /* py-4 (16px) px-8 (32px) - Hero */
    font-size: 1rem;
}
.btn-zonix-primary:hover {
    background-color: var(--zonix-navy-light);
    color: white;
    transform: translateY(-1px);
}
.btn-zonix-glass {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 700;
    padding: 1rem 2rem; /* py-4 px-8 */
    border-radius: 9999px;
    border: none;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}
.btn-zonix-glass:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* 3. Hero Section */
.hero-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--zonix-navy);
}

@media (min-width: 1024px) {
    .hero-wrapper {
        height: 85vh;
        min-height: 650px;
        max-height: 1080px;
    }
}

.hero-media-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: inherit;
}

@media (min-width: 1024px) {
    .hero-inner {
        flex-direction: row;
        align-items: stretch;
        min-height: 85vh;
        height: 100%;
    }
}

.hero-left {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 1.5rem;
}
@media (min-width: 640px) {
    .hero-left {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
@media (min-width: 1024px) {
    .hero-left {
        width: min(52%, 42rem);
        flex: 0 0 auto;
        background: transparent;
        padding-left: 6rem;
        padding-right: 3rem;
    }
}

.hero-right {
    position: relative;
    flex: 1;
    min-height: 25rem;
    background-color: var(--zonix-bg-dark);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .hero-right {
        flex: 1;
        min-height: 0;
        background: transparent;
        height: auto;
    }
}

.hero-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}

.hero-fallback-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-fallback-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    animation: heroKenBurns 24s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes heroKenBurns {
    0% { transform: scale(1) translateX(0); }
    100% { transform: scale(1.06) translateX(-1.5%); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-fallback-media img {
        animation: none;
    }
    .hero-video {
        display: none;
    }
}

.hero-copy-max { max-width: 36rem; }
.hero-subcopy { margin-bottom: 2.5rem !important; }

.hero-trust-card {
  width: 20rem;
  z-index: 3;
  position: relative;
}

.hero-trust-icon { width: 2.5rem; height: 2.5rem; }

/* Subtle teal particles — emotional hero accent (no JS) */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(86, 199, 184, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(168, 220, 203, 0.08) 0%, transparent 40%);
}
.hero-particles::before,
.hero-particles::after {
    content: "";
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(86, 199, 184, 0.35), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(168, 220, 203, 0.25), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(86, 199, 184, 0.3), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(168, 220, 203, 0.2), transparent),
        radial-gradient(1px 1px at 160px 120px, rgba(86, 199, 184, 0.25), transparent);
    background-size: 200px 200px;
    animation: heroParticlesDrift 28s linear infinite;
}
.hero-particles::after {
    animation-duration: 36s;
    animation-direction: reverse;
    opacity: 0.6;
}
@keyframes heroParticlesDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-200px, -200px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-particles::before,
    .hero-particles::after {
        animation: none;
    }
}

/* Landing utilities — migrated from welcome.blade.php inline styles */
.logo-preloader { height: 4rem; }
.logo-sticky-sm { height: 2.5rem; }
.logo-footer { height: 4rem; filter: none !important; }
.logo-offcanvas { height: 3rem; }
.logo-modal { height: 3rem; }
.btn-close-sticky { font-size: 0.7rem; }
.badge-footer-sm { height: 2rem; opacity: 0.7; }
.icon-xs { font-size: 14px; }
.blob-bg-centered { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; }
.mock-skeleton-banner { height: 8rem; }
.mock-skeleton-circle { width: 4rem; height: 4rem; }
.mock-skeleton-row { height: 5rem; }
.steps-gap { gap: 2.5rem; }
.step-icon-circle { width: 3.5rem; height: 3.5rem; }
.smart-banner-icon { width: 2.5rem; height: 2.5rem; }
.section-audience-overlap {
  margin-top: 0;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: visible;
  background-color: var(--zonix-bg-light);
  position: relative;
  z-index: 2;
}

.section-audience-overlap .row {
  overflow: visible;
}

.section-audience-overlap .col-md-4 {
  padding-bottom: 0.5rem;
}
.cat-nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--zonix-navy);
  background: transparent;
  color: var(--zonix-navy);
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
  cursor: pointer;
}
.cat-nav-btn--filled {
  background: var(--zonix-navy);
  color: white;
}
.cat-nav-btn--outline:hover:not(:disabled) {
  background: rgba(30, 42, 90, 0.06);
}
.cat-nav-btn--filled:hover:not(:disabled) {
  background: var(--zonix-navy-light);
  border-color: var(--zonix-navy-light);
}
.cat-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.section-phone-mockup { padding-top: 6rem; padding-bottom: 6rem; overflow: visible; }

.phone-section-grid-bg {
  position: relative;
}

.phone-section-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(30, 42, 90, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 42, 90, 0.04) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
}

.phone-mockup-col {
  overflow: visible;
  padding-bottom: 2rem;
}

@media (max-width: 991px) {
  .section-phone-mockup .phone-mockup-col {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }

  .section-phone-mockup .phone-steps-col {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 2;
  }

  .section-phone-mockup .blob-bg-centered {
    display: none;
  }
}

.card-audience-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    500px circle at 50% 20%,
    rgba(86, 199, 184, 0.1) 0%,
    transparent 55%
  );
}
.section-download-cta { margin-bottom: -4rem; position: relative; z-index: 10; }
.footer-landing { padding-top: 5rem; padding-bottom: 3rem; }
.about-copy-max { max-width: 800px; }
.about-trust-list { max-width: 560px; margin-left: auto; margin-right: auto; }
.about-visual { max-width: 960px; }
.about-visual-img {
    border-radius: 1.5rem;
    box-shadow: var(--shadow-xl);
    object-fit: cover;
    aspect-ratio: 16 / 9;
}
.faq-copy-max { max-width: 800px; }
.drivers-copy-max { max-width: 42rem; }

/* Exact Gradient Replacements for Hero */
@media (max-width: 1023px) {
  .hero-inner {
    position: relative;
    min-height: 28rem;
  }

  .hero-right {
    position: absolute;
    inset: 0;
    min-height: 100%;
    z-index: 0;
  }

  .hero-left {
    position: relative;
    z-index: 2;
    background: transparent;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .hero-overlay-mobile {
    background: linear-gradient(
      to bottom,
      rgba(30, 42, 90, 0.92) 0%,
      rgba(30, 42, 90, 0.78) 42%,
      rgba(30, 42, 90, 0.45) 72%,
      rgba(30, 42, 90, 0.25) 100%
    );
  }
}

.hero-overlay-mobile {
    background: linear-gradient(to top, rgba(30,42,90,0.8) 0%, transparent 100%);
    position: absolute; inset: 0; pointer-events: none;
}
.hero-overlay-full {
    background: linear-gradient(
        90deg,
        rgba(30, 42, 90, 0.92) 0%,
        rgba(30, 42, 90, 0.75) 28%,
        rgba(30, 42, 90, 0.25) 45%,
        transparent 58%
    );
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.hero-overlay-desktop {
    background: linear-gradient(to right, rgba(30,42,90,0.35) 0%, transparent 35%, transparent 100%);
    position: absolute; inset: 0; pointer-events: none;
    z-index: 2;
}
.driver-overlay-gradient {
    /* Exact match: form-navy via-navy/90 to-transparent */
    background: linear-gradient(90deg, var(--zonix-navy) 0%, rgba(30, 42, 90, 0.9) 40%, transparent 100%) !important;
    opacity: 1 !important;
}


/* 4. Audience Cards */
.card-audience {
    background: white;
    border-radius: 3rem; /* Exact match: rounded-2xl in Tailwind config is 3rem based on forensic audit */
    overflow: hidden;
    position: relative;
    border: 1px solid var(--slate-100);
    box-shadow:
        0 20px 40px -12px rgba(30, 42, 90, 0.12),
        0 8px 16px -8px rgba(30, 42, 90, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    padding: 1.5rem; /* p-8 (32px) exact match */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.card-audience .card-content {
    position: relative;
    z-index: 2;
}
.card-audience:hover {
    transform: translateY(-0.25rem);
    box-shadow:
        0 28px 50px -14px rgba(30, 42, 90, 0.16),
        0 12px 24px -10px rgba(30, 42, 90, 0.1);
}
.card-audience-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem; /* mb-4 (16px) */
    transition: transform 0.3s;
}
.card-audience-icon .material-symbols-outlined {
    font-size: 1.875rem !important; /* text-3xl (30px) */
}
.card-audience:hover .card-audience-icon {
    transform: scale(1.1);
}
.bg-gradient-glass {
    /* Exact match: from-white via-white to-slate-50 opacity-90 */
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #ffffff 50%,
        var(--slate-50) 100%
    );
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.9;
    z-index: 0;
}
.card-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Custom Grid Gap Match */
.gap-zonix-md { gap: 1.5rem; } /* gap-6 */
.gap-zonix-lg { gap: 2rem; }   /* lg:gap-8 (32px) */

/* 5. Categories */
.section-categories {
  background: linear-gradient(
    180deg,
    rgba(168, 220, 203, 0.22) 0%,
    #fff 45%,
    var(--zonix-bg-light) 100%
  );
  padding: 3rem 0 3.5rem;
}

@media (min-width: 768px) {
  .section-categories {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }
}

.section-app-offers {
  background-color: #fff;
  border-top: 1px solid rgba(168, 220, 203, 0.25);
}

.section-head__kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zonix-navy-light);
  margin-bottom: 0.5rem;
}

.section-head__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  color: var(--zonix-navy);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.section-head__subtitle {
  color: var(--slate-600);
  font-weight: 500;
  max-width: 36rem;
}

.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-head__actions {
  flex-shrink: 0;
}

.section-head__actions.is-hidden {
  display: none !important;
}

.badge-app-only {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  background: rgba(168, 220, 203, 0.35);
  color: var(--zonix-navy);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge-app-only .material-symbols-outlined {
  font-size: 1rem !important;
}

@media (max-width: 767px) {
  .section-head--split {
    align-items: flex-start;
  }

  .section-head--split .badge-app-only {
    align-self: flex-start;
  }
}

.categories-scroll-wrap {
  position: relative;
}

.categories-scroll-wrap::before,
.categories-scroll-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0.5rem;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
}

.categories-scroll-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(168, 220, 203, 0.35) 0%, transparent 100%);
}

.categories-scroll-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(168, 220, 203, 0.35) 0%, transparent 100%);
}

@media (min-width: 1024px) {
  .categories-scroll-wrap::before,
  .categories-scroll-wrap::after {
    display: none;
  }
}

.categories-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: visible;
  }
}

@media (max-width: 1023px) {
  .categories-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(8.5rem, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem;
  }
}

.category-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 7.5rem;
  padding: 1rem 0.75rem;
  background: #fff;
  border: 1px solid var(--slate-100);
  border-radius: 1rem;
  box-shadow: 0 4px 12px -6px rgba(30, 42, 90, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}

.category-chip:hover {
  transform: translateY(-3px);
  border-color: rgba(86, 199, 184, 0.55);
  box-shadow: 0 12px 24px -10px rgba(30, 42, 90, 0.14);
}

.category-chip__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 220, 203, 0.35);
  color: var(--zonix-navy-light);
}

.category-chip__icon .material-symbols-outlined {
  font-size: 1.75rem !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.category-chip__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--zonix-navy);
  text-align: center;
  line-height: 1.25;
}

.categories-footnote {
  font-size: 0.875rem;
}

.categories-cta-link {
  color: var(--zonix-navy-light);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.categories-cta-link:hover {
  color: var(--zonix-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.categories-cta-link:focus-visible {
  outline: 2px solid var(--zonix-primary);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Hide scrollbar */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Grid Gap Match AND Z-Grid System */
@media (min-width: 1024px) {
    .g-lg-zonix {
        --bs-gutter-x: 2rem; /* 32px matches lg:gap-8 */
    }
    
    /* Tailwind 'lg' = 1024px overrides */
    .col-lg-zonix-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-zonix-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-zonix-6 { flex: 0 0 auto; width: 50%; }
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 6. Promo Cards */
.card-promo-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.card-promo-link:focus-visible {
  outline: 2px solid var(--zonix-primary);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.card-promo {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--slate-100);
  box-shadow:
    0 20px 40px -12px rgba(30, 42, 90, 0.12),
    0 8px 16px -8px rgba(30, 42, 90, 0.08);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  height: 100%;
}

.card-promo-link:hover .card-promo {
  transform: translateY(-4px);
  box-shadow:
    0 28px 50px -14px rgba(30, 42, 90, 0.16),
    0 12px 24px -10px rgba(30, 42, 90, 0.1);
}

.card-promo-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    500px circle at 50% 0%,
    rgba(86, 199, 184, 0.08) 0%,
    transparent 55%
  );
}

.card-promo-img-wrapper {
  height: 12rem;
  position: relative;
  overflow: hidden;
}

.card-promo-img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 42, 90, 0.18) 0%, transparent 45%);
  pointer-events: none;
}

.card-promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card-promo-link:hover .card-promo-img-wrapper img {
  transform: scale(1.05);
}

.card-promo-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.card-promo-tag--otc {
  background: rgba(168, 220, 203, 0.92);
  color: var(--zonix-navy);
}

.card-promo-tag--verified {
  background: var(--zonix-navy);
  color: white;
}

.card-promo-tag--fast {
  background: rgba(86, 199, 184, 0.92);
  color: var(--zonix-navy);
}

.card-promo-body {
  position: relative;
  z-index: 2;
  padding: 1rem;
}

.card-promo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-100);
}

.card-promo-zone {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-promo-footer__badges {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.card-promo-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--zonix-navy);
  background: var(--slate-50);
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
}

.card-promo-trust .material-symbols-outlined {
  color: var(--zonix-navy-light);
  font-size: 0.875rem !important;
}

.card-promo-shipping {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--slate-500);
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
}

.card-promo-shipping--free {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

/* 7. Footer */
.footer-link {
  color: var(--slate-400);
  text-decoration: none;
  font-size: 0.875rem; /* text-sm (14px) */
  line-height: 1.25rem; /* leading-5 (20px) */
  transition: color 0.2s;
  display: block;
  margin-bottom: 0.75rem; /* space-y-3 approx */
}
.footer-link:hover {
  color: white;
}
.social-circle {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: background-color 0.2s;
}
.social-circle:hover {
  background-color: var(--zonix-primary);
}

/* Utils */
.glass-panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xl);
}
.blob-bg {
  position: absolute;
  bottom: -6rem;
  left: -6rem;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  background-color: rgba(0, 153, 221, 0.05); /* Tailwind bg-blue/5 matches 5% opacity */
  filter: blur(48px);
  pointer-events: none;
}

/* Animation Keyframes */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Extracted Inline Styles */
@media (min-width: 1024px) { 
}

/* Mobile Menu */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 400px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    z-index: 1050;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.1);
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.offcanvas-menu.show {
    right: 0;
}

.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 30, 50, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.offcanvas-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.nav-link-mobile {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    padding: 0.75rem 0;
    transition: color 0.2s, transform 0.2s;
}

.nav-link-mobile:hover {
    color: var(--zonix-primary);
    transform: translateX(4px);
}

.nav-link-mobile .material-symbols-outlined {
    font-size: 24px;
    color: var(--slate-400);
    flex-shrink: 0;
}

.nav-link-mobile:hover .material-symbols-outlined {
    color: var(--zonix-primary);
}

.btn-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    transition: background 0.2s;
}

.btn-icon:hover {
    background: var(--slate-100);
}


/* Sticky Navbar */
/* Sticky Navbar Duplicate Removed */


/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }


/* v3 Micro-interactions */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn:active {
    transform: scale(0.96);
}

.card-promo-link:hover .card-promo-img-wrapper img {
    transform: scale(1.05);
}

.nav-link-mobile:active {
    background-color: var(--slate-50);
    border-radius: 0.5rem;
}


/* Skeleton Loader */
#skeleton-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    transition: opacity 0.5s ease;
}

.skeleton-header {
    height: 4rem;
    width: 100%;
    background: #f1f5f9;
    border-radius: 1rem;
    animation: pulse 1.5s infinite;
}

.skeleton-hero {
    height: 40vh;
    width: 100%;
    background: #f1f5f9;
    border-radius: 2rem;
    animation: pulse 1.5s infinite;
}

.skeleton-grid {
    display: flex;
    gap: 1.5rem;
}

.skeleton-card {
    flex: 1;
    height: 200px;
    background: #f1f5f9;
    border-radius: 1.5rem;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}


/* Back to Top Button */
#backToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--zonix-primary);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(86, 199, 184, 0.4);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
}
#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#backToTop:hover {
    background-color: var(--zonix-navy-light);
    transform: translateY(-4px);
}


/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.toast-zonix {
    background: rgba(15, 23, 42, 0.9); /* Slate-900 */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.toast-zonix.show {
    opacity: 1;
    transform: translateY(0);
}

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    border-top: 1px solid var(--slate-100);
    padding: 1rem 1.5rem;
    z-index: 1070;
    box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.05);
    transform: translateY(100%);
    transition: transform 0.5s ease-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.cookie-banner.show {
    transform: translateY(0);
}
@media (max-width: 991px) {
    .cookie-banner {
        bottom: 80px; /* Lift above Sticky Bar */
        border-top: 1px solid rgba(0,0,0,0.05); /* Ensure separation */
    }
}
@media (min-width: 992px) {
    .cookie-banner {
        padding: 1.5rem 3rem;
    }
}


/* App Store Badges */
.app-badge {
    height: 3.5rem;
    transition: transform 0.2s;
}
.app-badge:hover {
    transform: translateY(-2px);
}


/* Adjust App Badges visibility */
.app-badge img {
    height: 100%;
    width: auto;
}


/* Social Proof Strip */
.social-proof-strip {
  position: relative;
  z-index: 5;
  margin-top: -2rem;
  padding: 0 1rem 1.5rem;
  overflow: visible;
  background: transparent;
}

.social-proof-strip .container-zonix {
  background: #fff;
  border: 1px solid var(--slate-100);
  border-radius: 1.5rem;
  box-shadow:
    0 20px 40px -12px rgba(30, 42, 90, 0.12),
    0 8px 16px -8px rgba(30, 42, 90, 0.08);
  padding: 1.75rem 1.5rem;
  overflow: visible;
}

@media (min-width: 768px) {
  .social-proof-strip {
    margin-top: -2.5rem;
  }
  .social-proof-strip .container-zonix {
    padding: 2rem 2.5rem;
  }
}

@media (max-width: 767px) {
  .social-proof-strip {
    margin-top: 0;
    padding: 0.75rem 1rem 1.25rem;
  }

  .social-proof-strip .container-zonix {
    padding: 1rem 1.125rem;
    border-radius: 1.25rem;
  }

  .social-proof-row {
    row-gap: 0.5rem;
  }

  .social-stat {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 0.875rem;
    background: var(--zonix-bg-light);
  }

  .social-stat-number {
    font-size: 1.0625rem;
  }

  .social-stat-label {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .social-stat-icon {
    width: 2.625rem;
    height: 2.625rem;
  }

  .social-stat-icon .material-symbols-outlined {
    font-size: 1.5rem !important;
  }
}

@media (min-width: 768px) {
  .social-stat-label {
    white-space: nowrap;
  }
}

.social-stat {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.social-stat-copy {
  min-width: 0;
}

.social-stat-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mint-soft, rgba(86, 199, 184, 0.12));
  color: var(--zonix-teal-deep, #0F4C5C);
}

.social-stat-icon .material-symbols-outlined {
  font-size: 1.75rem !important;
}

.social-stat-number {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--zonix-navy);
    line-height: 1;
}
.social-stat-label {
    font-size: 0.875rem;
    color: var(--slate-500);
    line-height: 1.1;
    font-weight: 600;
}

/* Final CTA Banner */
.cta-banner {
    background: var(--zonix-navy);
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}
@media (min-width: 768px) {
    .cta-banner {
        padding: 4rem;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


/* CTA Banner Redesign — navy dominante (60%), teal reservado a botones store */
.cta-banner {
    background: linear-gradient(135deg, var(--zonix-navy) 0%, var(--zonix-navy-light) 100%) !important;
    box-shadow: 0 25px 50px -12px rgba(30, 42, 90, 0.35) !important;
}

/* Testimonials */
.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--slate-100);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}
.avatar-ring {
    padding: 3px;
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: 50%;
}


/* Smart App Banner */
.smart-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 2000;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}
.smart-banner.visible {
    transform: translateY(0);
}

/* Corporate Footer Upgrades */
.footer-link {
    color: var(--slate-400);
    text-decoration: none;
    transition: color 0.2s;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: block;
}
.footer-link:hover {
    color: white;
}
.social-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
    text-decoration: none;
}
.social-icon-btn:hover {
    background: var(--zonix-primary);
    transform: translateY(-3px);
    color: white;
}


/* Dynamic Branding Logic */

/* Ensure the logo image adapts too */
.navbar-brand-logo {
    filter: brightness(0) invert(1); /* White logo on dark hero */
    transition: filter 0.3s ease;
    height: 3rem !important; /* BIGGER LOGO */
}
.navbar-zonix.navbar-sticky .navbar-brand-logo {
    filter: none; /* Original color on white navbar */
}

/* Fix sticky class if missing */
.navbar-zonix.navbar-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    animation: none !important;
    transform: none !important;
    transition: background 0.3s ease !important; /* Only animate background */
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}


/* RE-OVERRIDING BRANDING LOGIC */

/* Logo Image */
.navbar-brand-logo {
    height: 3.3rem !important; /* Even bigger */
    filter: none !important; /* SHOW ORIGINAL COLORS BY DEFAULT */
    transition: all 0.3s ease;
}
/* Only invert if the original logo is invisible on dark background. 
   But user said "splash_logo_dark.png", implies dark text.
   Dark text on Dark Hero = Invisible.
   So we MUST invert it on Hero.
*/
.navbar-brand-logo {
   filter: brightness(0) invert(1) !important; /* Make it WHITE on Hero */
}

.navbar-zonix.navbar-sticky .navbar-brand-logo {
    filter: none !important; /* Original (Dark?) on White Sticky */
}

/* 3. Footer Logo */
footer img[alt="Zonix Pharma"] {
    filter: brightness(0) invert(1) !important; /* Check if footer background is dark */
}


/* FORCE VISIBILITY */
.navbar-brand img {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}


/* Z-INDEX FIX & SIMPLIFIED VISIBILITY */
.navbar-brand {
    position: relative;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
}

/* Ensure Logo is Visible */
.navbar-brand-logo {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* --- FINAL GLASSMORPHISM & LOGO FIX --- */

/* 1. Navbar: Semi-Transparent White (Glass) ON HERO */
.navbar-zonix {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1030;
    transition: all 0.3s ease;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Logo Image: ALWAYS ORIGINAL COLORS */
.navbar-brand-logo {
    filter: none !important; /* No inversion, show colorful logo */
    height: 3.3rem !important; /* Big size */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Footer Logo: Inverted for contrast (White on Navy) */
footer .col-lg-4 img {
    filter: brightness(0) invert(1) !important;
}

/* 5. Mobile Toggle Button: Needs to be visible on white bg */
.navbar-toggler {
    border-color: rgba(0,0,0,0.1);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba(0, 0, 0, 0.55)%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e") !important;
}


/* FOOTER LOGO FIX - CONTAINER STRATEGY */
.footer-logo-container {
    background-color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px; /* Pill shape */
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Ensure Footer Logo has NO filters and uses original colors */
.footer-logo-container img {
    filter: none !important; /* Original Colors */
    height: 2.5rem !important;
}

.footer-logo-container .text-navy {
    color: var(--zonix-navy) !important; /* Ensure text is dark inside the white pill */
}


/* FOOTER LOGO - DARK MODE NATIVE */
/* Remove previous container styles if any remain generic */
/* Ensure footer image is NOT inverted anymore, we want color */
footer img[alt="Zonix Pharma"] {
    filter: none !important; 
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    height: 100%;
}

body {
    min-height: 100%;
}

/* Flex wrapper to push footer down and handle screenshots cleanly */
#content-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
}

#content-wrapper > * {
    flex-shrink: 0;
}

#content-wrapper > footer {
    margin-top: auto;
}


/* Cursor Grabbing for Drag Scroll */
#categoriesContainer.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}
#categoriesContainer {
    cursor: grab; /* Suggest dragging */
}


/* MOBILE RESPONSIVENESS FIXES */
@media (max-width: 991px) {
    /* 1. Hero Text Sizing */
    .text-hero-zonix {
        font-size: clamp(2rem, 9vw, 2.75rem) !important;
        line-height: 1.08 !important;
    }
    
    /* 2. Hero Spacing (Tighter for Mobile) */
    .hero-wrapper {
        padding-top: 0 !important;
    }
    
    /* 3. Navbar Tweaks */
    .navbar-brand-logo {
        height: 2.5rem !important;
    }
    
    /* 4. Hero copy */
    .hero-left {
        padding-top: 1.5rem !important;
        padding-right: 1rem;
    }

    /* 5. Footer + safe area for sticky/cookies */
    body.has-mobile-sticky-bar {
        padding-bottom: 5.75rem;
    }

    .footer-landing {
        padding-top: 3rem;
        padding-bottom: 1.5rem;
    }

    .footer-landing .row.g-4 > [class*="col-"] {
        margin-bottom: 0.25rem;
    }

    #mobileStickyCTA {
        padding: 0.75rem 1rem 0.875rem;
        padding-right: 2.25rem;
    }

    #mobileStickyCTA .btn-zonix-primary {
        padding: 0.5rem 1.125rem !important;
        font-size: 0.875rem;
        white-space: nowrap;
    }
}

@media (max-width: 576px) {
    .text-hero-zonix {
        font-size: clamp(1.875rem, 8.5vw, 2.5rem) !important;
    }
}


/* PRELOADER */
.z-fixed-max { z-index: 9999 !important; }
.animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(0.95); }
}

/* SOCIAL ICONS (BOOTSTRAP ICONS POLYFILL IF NEEDED OR MATERIAL) */
/* We used material symbols usually, but user might want brand icons. 
   Assuming we only have material symbols, let us use generic icons or text for now 
   OR assume user has bootstrap icons. 
   Wait, index.html does NOT link bootstrap icons. 
   Let us use Material Symbols for "groups" (Social) as fallback or just generic logic 
   Actually, let us just use text for now to be safe or investigate if we can add CDN.
   The implementation plan said "Social Icons".
   Let us add Bootstrap Icons CDN to head in next step if needed. 
*/


/* EMERGENCY FIX: FORCE VISIBILITY */
.reveal {
    opacity: 1 !important;
    transform: none !important;
}


/* Prevent desktop drag/overflow */
.container-fluid {
    max-width: 100vw;
    overflow-x: hidden;
}


/* Responsive Phone Mockup */
.phone-mockup {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 1 / 2;
    border-width: 8px !important;
    margin: 0 auto;
}

/* Fix for undesired scroll in How It Works section */
.fix-overflow {
    overflow: visible !important;
}

/* Prevent desktop drag/overflow */


/* --- UI FIXES & UPDATES --- */

/* Navbar Z-Index Fix */
.navbar-zonix {
  z-index: 1030 !important;
}

/* Social Icons SVG Styling */
.social-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform 0.3s;
}
.social-icon-btn:hover svg {
  transform: scale(1.1);
}

/* Landing — ui-ux-pro-max a11y (Zonix-filtered) */
.navbar-zonix a:focus-visible,
.nav-link:focus-visible,
.nav-link-mobile:focus-visible,
.btn-zonix-primary:focus-visible,
.btn-ghost:focus-visible,
.app-badge:focus-visible,
.app-badge-depth:focus-visible,
.btn-icon:focus-visible,
.navbar-brand:focus-visible,
.cat-nav-btn:focus-visible,
.category-chip:focus-visible {
  outline: 2px solid var(--brand-teal, var(--zonix-primary));
  outline-offset: 2px;
}

.app-badge,
.navbar-zonix .nav-link {
  cursor: pointer;
}

.hover-scale {
  transition: transform 0.2s ease;
  cursor: pointer;
}
.hover-scale:hover {
  transform: scale(1.03);
}

/* Landing — Fase 7 cinematic polish (Zonix-filtered) */
.premium-depth-card {
  position: relative;
  background: linear-gradient(145deg, var(--zonix-navy) 0%, var(--zonix-bg-dark) 100%);
  box-shadow:
    0 40px 100px -20px rgba(0, 0, 0, 0.45),
    0 20px 40px -20px rgba(0, 0, 0, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.premium-depth-card--light {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 25px 50px -12px rgba(30, 42, 90, 0.12),
    0 12px 24px -8px rgba(30, 42, 90, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 1);
}

.hero-trust-card.premium-depth-card--light {
  background: rgba(255, 255, 255, 0.92);
}

.card-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.08) 0%,
    transparent 45%
  );
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}

.text-depth-matte {
  text-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.app-badge-depth {
  display: inline-block;
  border-radius: 0.875rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 12px 24px -4px rgba(0, 0, 0, 0.2);
}

.app-badge-depth:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 6px 12px -2px rgba(0, 0, 0, 0.15),
    0 20px 32px -6px rgba(0, 0, 0, 0.25);
}

.app-badge-depth:active {
  transform: translateY(1px);
}

.cta-banner.premium-depth-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.phone-mockup-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone-mockup-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

.iphone-bezel {
  position: relative;
  width: 280px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 280 / 580;
  background-color: #111;
  border-radius: 3rem;
  box-shadow:
    inset 0 0 0 2px #52525b,
    inset 0 0 0 7px #000,
    0 40px 80px -15px rgba(0, 0, 0, 0.55),
    0 15px 25px -5px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
}

.hardware-btn {
  position: absolute;
  width: 3px;
  background: linear-gradient(90deg, #404040 0%, #171717 100%);
  box-shadow:
    -2px 0 5px rgba(0, 0, 0, 0.6),
    inset -1px 0 1px rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 0;
}

.hardware-btn--vol-up { top: 21%; left: -3px; height: 25px; border-radius: 3px 0 0 3px; }
.hardware-btn--vol-down { top: 28%; left: -3px; height: 45px; border-radius: 3px 0 0 3px; }
.hardware-btn--power { top: 38%; left: -3px; height: 45px; border-radius: 3px 0 0 3px; }
.hardware-btn--side { top: 29%; right: -3px; height: 70px; border-radius: 0 3px 3px 0; transform: scaleX(-1); }

.iphone-screen {
  position: absolute;
  inset: 7px;
  background: var(--zonix-bg-dark);
  border-radius: 2.5rem;
  overflow: hidden;
  color: #fff;
  z-index: 10;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 1);
}

.screen-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 45%);
  z-index: 40;
  pointer-events: none;
}

.dynamic-island {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #000;
  border-radius: 9999px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.75rem;
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.1);
}

.dynamic-island-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-teal);
  box-shadow: 0 0 8px rgba(86, 199, 184, 0.8);
  animation: pulse 2s ease-in-out infinite;
}

.mock-app-inner {
  position: relative;
  height: 100%;
  padding: 3rem 1.25rem 4.5rem;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.mock-widget-list {
  margin-bottom: 0;
}

.mock-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.mock-search-bar {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
}

.mock-progress-wrap {
  position: relative;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
}

.mock-progress-ring-bg,
.mock-progress-ring-fill {
  fill: none;
  stroke-width: 10;
}

.mock-progress-ring-bg { stroke: rgba(255, 255, 255, 0.06); }
.mock-progress-ring-fill {
  stroke: var(--brand-teal);
  stroke-linecap: round;
  stroke-dasharray: 402;
  stroke-dashoffset: 100;
}

.mock-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mock-progress-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.mock-progress-caption {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(168, 220, 203, 0.7);
  font-weight: 700;
  margin-top: 0.25rem;
}

.widget-depth {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px 1px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.widget-depth-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.widget-depth-icon--teal {
  background: linear-gradient(135deg, rgba(86, 199, 184, 0.25) 0%, rgba(15, 76, 92, 0.15) 100%);
  color: var(--brand-teal);
}

.widget-depth-icon--mint {
  background: linear-gradient(135deg, rgba(168, 220, 203, 0.25) 0%, rgba(86, 199, 184, 0.1) 100%);
  color: var(--brand-mint);
}

.widget-depth-lines {
  flex: 1;
  min-width: 0;
}

.widget-depth-line {
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 0.35rem;
}

.widget-depth-line--sm { width: 45%; height: 0.35rem; background: rgba(255, 255, 255, 0.12); }

.widget-depth-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.15rem;
}

.widget-depth-sub {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.45);
}

.mock-order-toast {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  animation: mock-toast-float 3s ease-in-out infinite;
  z-index: 20;
}

.mock-order-toast-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brand-mint);
  color: var(--zonix-navy-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@keyframes mock-toast-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.floating-ui-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 25px 50px -12px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  z-index: 30;
  animation: float-badge 4s ease-in-out infinite;
}

.floating-ui-badge--float {
  position: absolute;
}

.floating-ui-badge--left {
  top: 8%;
  left: -2.5rem;
}

.floating-ui-badge--right {
  bottom: 18%;
  right: -2.5rem;
  animation-delay: 1s;
}

.floating-ui-badge-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(86, 199, 184, 0.25) 0%, rgba(15, 76, 92, 0.15) 100%);
  border: 1px solid rgba(86, 199, 184, 0.35);
  color: var(--brand-teal);
  flex-shrink: 0;
}

.floating-ui-badge-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--zonix-navy);
  margin: 0;
  line-height: 1.2;
}

.floating-ui-badge-sub {
  font-size: 0.65rem;
  color: var(--slate-500);
  margin: 0;
}

@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.step-depth-panel {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow:
    0 10px 24px -8px rgba(30, 42, 90, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step-depth-panel:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 32px -10px rgba(30, 42, 90, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.testimonial-card-premium {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 20px 40px -12px rgba(30, 42, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
}

.testimonial-card-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(86, 199, 184, 0.08) 0%, transparent 55%);
  pointer-events: none;
}

.testimonial-card-premium:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 50px -14px rgba(30, 42, 90, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.testimonial-quote-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(86, 199, 184, 0.15) 0%, rgba(168, 220, 203, 0.08) 100%);
  border: 1px solid rgba(86, 199, 184, 0.2);
  color: var(--zonix-navy-light);
  margin-bottom: 1rem;
}

.driver-stat-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 991px) {
  .phone-mockup-stage {
    max-width: min(340px, 92vw);
    min-height: auto;
    padding: 1rem 0 2rem;
    margin-inline: auto;
  }

  .floating-ui-badge--float {
    position: static;
    width: 100%;
    max-width: 280px;
    animation: none;
    margin-top: 0.75rem;
  }

  .floating-ui-badge--left,
  .floating-ui-badge--right {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  .iphone-bezel {
    width: min(260px, 78vw);
  }

  .phone-mockup-tilt {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hover-scale:hover {
    transform: none;
  }

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

  .animate-pulse,
  .mock-order-toast,
  .floating-ui-badge,
  .dynamic-island-dot {
    animation: none !important;
  }

  .app-badge-depth:hover,
  .app-badge-depth:active,
  .step-depth-panel:hover,
  .testimonial-card-premium:hover {
    transform: none !important;
  }

  .phone-mockup-tilt {
    transform: none !important;
  }

  .hover-lift:hover,
  .card-audience:hover,
  .card-promo-link:hover .card-promo,
  .category-chip:hover,
  .card-promo-link:hover .card-promo-img-wrapper img,
  .social-icon-btn:hover svg {
    transform: none !important;
  }

  .btn:active {
    transform: none !important;
  }
}