/* 
   ZONIX EATS - 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 - Exact matches from Tailwind Config */
  --zonix-primary: #ff3d40;
  --zonix-navy: #003049;
  --zonix-navy-light: #004e75;
  --zonix-blue: #0099dd;
  --zonix-yellow: #fdb813;

  /* Backgrounds */
  --zonix-bg-light: #f8f5f5;
  --zonix-bg-dark: #230f0f;

  /* 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(255, 61, 64, 0.3);
}

/* --- 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;
}
.bg-primary-zonix {
  background-color: var(--zonix-primary) !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(253, 184, 19, 0.1) !important;
}
.bg-primary-10 {
  background-color: rgba(255, 61, 64, 0.1) !important;
}
.bg-blue-10 {
  background-color: rgba(0, 153, 221, 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: #dc2626;
}

/* 2. Buttons */
.btn-zonix-primary {
    background-color: var(--zonix-primary);
    color: white;
    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: #dc2626;
    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);
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .hero-wrapper {
        flex-direction: row;
        height: 85vh;
        min-height: 650px;
        max-height: 1080px;
    }
}
.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; /* sm:px-12 (48px) */
        padding-right: 3rem;
    }
}
@media (min-width: 1024px) {
    .hero-left {
        width: 50%;
        padding-left: 6rem; /* px-24 = 6rem = 96px */
        padding-right: 6rem; /* Exact match for Tailwind px-24 */
    }
}

.hero-right {
    position: relative;
    flex: 1;
    min-height: 25rem; /* Mobile height */
    background-color: var(--zonix-bg-dark);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .hero-right {
        height: 100%;
    }
}
/* Exact Gradient Replacements for Hero */
.hero-overlay-mobile {
    background: linear-gradient(to top, rgba(0,48,73,0.8) 0%, transparent 100%);
    position: absolute; inset: 0; pointer-events: none;
}
.hero-overlay-desktop {
    background: linear-gradient(to right, rgba(0,48,73,0.5) 0%, transparent 50%, transparent 100%);
    position: absolute; inset: 0; pointer-events: none;
    border-bottom-left-radius: 4rem;
}
.driver-overlay-gradient {
    /* Exact match: form-navy via-navy/90 to-transparent */
    background: linear-gradient(90deg, #003049 0%, rgba(0, 48, 73, 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;
    box-shadow: var(--shadow-xl);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    height: 100%;
    border: none;
    height: 100%;
    padding: 1.5rem; /* p-8 (32px) exact match */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.card-audience:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.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 */
.scroll-snap-x {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2rem;
}
.snap-start {
  scroll-snap-align: start;
}
/* 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;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 100px;
  flex-shrink: 0;
}
.category-ring {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: 0 0 0 2px transparent;
  transition: all 0.3s;
}
.category-item:hover .category-ring {
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px var(--zonix-primary);
}
.category-item img {
  transition: transform 0.5s;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-item:hover img {
  transform: scale(1.1);
}

/* 6. Promo Cards */
.card-promo {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
  border: none;
  height: 100%;
}
.card-promo:hover {
  box-shadow: var(--shadow-xl);
}
.card-promo-img-wrapper {
  height: 12rem;
  position: relative;
  overflow: hidden;
}
.card-promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.card-promo:hover img {
  transform: scale(1.05);
}

/* 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 span {
    font-size: 24px;
    color: var(--slate-400);
}

.nav-link-mobile:hover span {
    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);
}

.category-ring img {
    transition: transform 0.4s ease;
}
.category-item:hover .category-ring img {
    transform: scale(1.1) rotate(3deg);
}

.card-promo-img-wrapper img {
    transition: transform 0.5s ease;
}
.card-promo: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(255, 61, 64, 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: #dc2626;
    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 {
    background: white;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--slate-100);
}
.social-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.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 */
.cta-banner {
    background: linear-gradient(135deg, var(--zonix-primary) 0%, #ff6b6d 100%) !important;
    box-shadow: 0 25px 50px -12px rgba(255, 61, 64, 0.4) !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 */
.navbar-brand-text {
    color: white !important; /* Default on dark hero */
    transition: color 0.3s ease;
}
.navbar-zonix.navbar-sticky .navbar-brand-text {
    color: var(--zonix-navy) !important; /* Dark on white navbar */
}

/* 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 */

/* 1. Navbar Text */
.navbar-brand-text {
    color: white !important; /* Always white on Hero */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Add shadow for visibility */
}
.navbar-zonix.navbar-sticky .navbar-brand-text {
    color: var(--zonix-navy) !important;
    text-shadow: none;
}

/* 2. 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 EATS"] {
    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;
}
.navbar-brand span {
    opacity: 1 !important;
    visibility: visible !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 Text is Visible */
.navbar-brand-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: white !important; /* Default */
}
.navbar-zonix.navbar-sticky .navbar-brand-text {
    color: var(--zonix-navy) !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;
}

/* 2. Navbar Brand: ALWAYS ORIGINAL COLORS */
.navbar-brand-text {
    color: var(--zonix-navy) !important; /* Always Navy */
    text-shadow: none !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. 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 EATS"] {
    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: 3.5rem !important; /* Smaller on mobile */
        line-height: 1.1 !important;
    }
    
    /* 2. Hero Spacing (Tighter for Mobile) */
    .hero-wrapper {
        padding-top: 1rem !important; /* Reduced from 6rem */
    }
    
    /* 3. Navbar Tweaks */
    .navbar-brand-logo {
        height: 2.5rem !important; /* Smaller logo on mobile */
    }
    .navbar-brand-text {
        font-size: 1.5rem !important;
    }
    
    /* 4. Center Mobile Text if desired? No, keep left aligned but guarded */
    .hero-left {
        padding-top: 2rem !important; /* Tighten top space */
        padding-right: 1rem;
    }
}

@media (max-width: 576px) {
    .text-hero-zonix {
        font-size: 2.8rem !important; /* Even smaller on phones */
    }
}


/* 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, .row {
    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);
}