/* ============================================================
   ZODIZE DESIGN SYSTEM
   Built for Scale. Designed for Impact.
   ============================================================ */

/* ── FONTS ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS VARIABLES ──────────────────────────────────────── */
:root {
  --z-primary:       #0A1F44;
  --z-primary-light: #122E60;
  --z-accent:        #2F6BFF;
  --z-accent-hover:  #1A56E8;
  --z-gold:          #C9A24A;
  --z-dark:          #0B0B0C;
  --z-dark-2:        #111827;
  --z-gray-900:      #1F2937;
  --z-gray-800:      #374151;
  --z-gray-600:      #6B7280;
  --z-gray-400:      #9CA3AF;
  --z-gray-200:      #E5E7EB;
  --z-gray-100:      #F3F4F6;
  --z-light:         #F5F7FA;
  --z-white:         #FFFFFF;
  --z-success:       #10B981;
  --z-warning:       #F59E0B;
  --z-error:         #EF4444;

  --z-font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --z-mono:          'JetBrains Mono', monospace;

  --z-radius-sm:     6px;
  --z-radius:        10px;
  --z-radius-lg:     16px;
  --z-radius-xl:     24px;
  --z-radius-full:   9999px;

  --z-shadow-sm:     0 1px 3px rgba(10,31,68,0.06), 0 1px 2px rgba(10,31,68,0.04);
  --z-shadow:        0 4px 16px rgba(10,31,68,0.08), 0 2px 4px rgba(10,31,68,0.04);
  --z-shadow-lg:     0 20px 48px rgba(10,31,68,0.12), 0 8px 16px rgba(10,31,68,0.06);
  --z-shadow-glow:   0 0 40px rgba(47,107,255,0.18);

  --z-transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --z-transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--z-font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--z-gray-900);
  background: var(--z-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--z-accent); text-decoration: none; transition: var(--z-transition); }
a:hover { color: var(--z-accent-hover); }

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--z-accent); color: #fff; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--z-font);
  font-weight: 700;
  line-height: 1.2;
  color: var(--z-primary);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
p  { line-height: 1.75; color: var(--z-gray-600); }

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--z-light); }
::-webkit-scrollbar-thumb { background: var(--z-accent); border-radius: 3px; }

/* ── NAVBAR ─────────────────────────────────────────────── */
.z-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0;
  transition: var(--z-transition);
  background: transparent;
}
.z-navbar.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--z-shadow);
  padding: 0;
}
.z-navbar .navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  transition: var(--z-transition);
}
.z-navbar.scrolled .navbar-inner { padding: 0.875rem 0; }
.z-navbar .nav-logo img  { height: 36px; width: auto; }
.z-navbar .nav-logo .logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--z-white);
  transition: var(--z-transition);
}
.z-navbar.scrolled .nav-logo .logo-text { color: var(--z-primary); }
.z-navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.z-navbar .nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  padding: 0.5rem 0.875rem;
  border-radius: var(--z-radius-sm);
  transition: var(--z-transition);
  letter-spacing: 0.01em;
}
.z-navbar .nav-links a:hover,
.z-navbar .nav-links a.active {
  color: var(--z-white);
  background: rgba(255,255,255,0.12);
}
.z-navbar.scrolled .nav-links a { color: var(--z-gray-800); }
.z-navbar.scrolled .nav-links a:hover,
.z-navbar.scrolled .nav-links a.active {
  color: var(--z-accent);
  background: rgba(47,107,255,0.06);
}
.z-navbar .nav-cta {
  background: var(--z-accent) !important;
  color: var(--z-white) !important;
  padding: 0.5625rem 1.25rem !important;
  border-radius: var(--z-radius-full) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
.z-navbar .nav-cta:hover {
  background: var(--z-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(47,107,255,0.35);
}
.z-navbar.scrolled .nav-cta { color: var(--z-white) !important; }

/* Mobile nav toggle */
.z-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
.z-nav-toggle span {
  width: 24px; height: 2px;
  background: var(--z-white);
  border-radius: 2px;
  transition: var(--z-transition);
  display: block;
}
.z-navbar.scrolled .z-nav-toggle span { background: var(--z-primary); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-z {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--z-font);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--z-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--z-transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn-z::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
  opacity: 0;
  transition: var(--z-transition);
}
.btn-z:hover::before { opacity: 1; }

.btn-z-primary {
  background: var(--z-accent);
  color: var(--z-white);
  border-color: var(--z-accent);
  box-shadow: 0 4px 16px rgba(47,107,255,0.25);
}
.btn-z-primary:hover {
  background: var(--z-accent-hover);
  border-color: var(--z-accent-hover);
  color: var(--z-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(47,107,255,0.35);
}
.btn-z-outline {
  background: transparent;
  color: var(--z-white);
  border-color: rgba(255,255,255,0.45);
}
.btn-z-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.8);
  color: var(--z-white);
}
.btn-z-outline-dark {
  background: transparent;
  color: var(--z-primary);
  border-color: var(--z-gray-200);
}
.btn-z-outline-dark:hover {
  background: var(--z-primary);
  color: var(--z-white);
  border-color: var(--z-primary);
}
.btn-z-ghost {
  background: transparent;
  color: var(--z-accent);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn-z-ghost:hover { color: var(--z-accent-hover); gap: 0.75rem; }
.btn-z-ghost .btn-arrow { transition: var(--z-transition); }
.btn-z-ghost:hover .btn-arrow { transform: translateX(4px); }
.btn-z-sm { padding: 0.5625rem 1.25rem; font-size: 0.875rem; }
.btn-z-lg { padding: 1.0625rem 2.25rem; font-size: 1rem; }

/* ── SECTION SHARED ──────────────────────────────────────── */
.z-section { padding: 6rem 0; position: relative; }
.z-section-sm { padding: 4rem 0; }
.z-section-dark { background: var(--z-dark); }
.z-section-navy { background: var(--z-primary); }
.z-section-light { background: var(--z-light); }

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--z-accent);
  background: rgba(47,107,255,0.08);
  border: 1px solid rgba(47,107,255,0.15);
  padding: 0.375rem 0.875rem;
  border-radius: var(--z-radius-full);
  margin-bottom: 1rem;
}
.section-badge .badge-dot {
  width: 6px; height: 6px;
  background: var(--z-accent);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
.section-heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--z-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.section-heading span { color: var(--z-accent); }
.section-heading-white { color: var(--z-white); }
.section-desc {
  font-size: 1.0625rem;
  color: var(--z-gray-600);
  max-width: 600px;
  line-height: 1.8;
}
.section-desc-white { color: rgba(255,255,255,0.72); }

/* ── HERO ────────────────────────────────────────────────── */
.z-hero {
  min-height: 100vh;
  background: var(--z-primary);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.z-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(47,107,255,0.18) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 20% 80%, rgba(201,162,74,0.07) 0%, transparent 60%);
}
.z-hero-canvas {
  position: absolute;
  inset: 0;
  opacity: 0.12;
}
.z-hero-content { position: relative; z-index: 2; padding: 8rem 0 5rem; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.4375rem 1rem;
  border-radius: var(--z-radius-full);
  margin-bottom: 1.5rem;
  animation: fadeInDown 0.7s ease both;
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--z-gold);
  border-radius: 50%;
}
.hero-title {
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 900;
  color: var(--z-white);
  line-height: 1.07;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s 0.1s ease both;
}
.hero-title .accent-line { color: var(--z-accent); display: block; }
.hero-title .gradient-text {
  background: linear-gradient(135deg, #6B9FFF, #2F6BFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-desc {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.68);
  max-width: 560px;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  animation: fadeInUp 0.8s 0.2s ease both;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.5rem;
  animation: fadeInUp 0.8s 0.3s ease both;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  animation: fadeInUp 0.8s 0.4s ease both;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
}
.hero-trust-item .trust-icon {
  color: var(--z-success);
  font-size: 1rem;
}
.hero-visual {
  position: relative;
  animation: fadeInRight 1s 0.2s ease both;
}

/* Hero 3D floating card */
.hero-card-3d {
  perspective: 1000px;
}
.hero-card-inner {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--z-radius-xl);
  padding: 2rem;
  transform-style: preserve-3d;
  animation: float3d 6s ease-in-out infinite;
}
@keyframes float3d {
  0%,100% { transform: rotateX(2deg) rotateY(-3deg) translateY(0); }
  25%      { transform: rotateX(-1deg) rotateY(3deg) translateY(-10px); }
  50%      { transform: rotateX(2deg) rotateY(-2deg) translateY(-16px); }
  75%      { transform: rotateX(-1deg) rotateY(2deg) translateY(-8px); }
}
.hero-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hero-metric {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--z-radius);
  padding: 1.25rem;
  text-align: center;
}
.hero-metric .metric-value {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--z-white);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hero-metric .metric-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.hero-code-block {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--z-radius);
  padding: 1.25rem;
  font-family: var(--z-mono);
  font-size: 0.8125rem;
}
.hero-code-block .code-line { color: rgba(255,255,255,0.6); line-height: 1.7; }
.hero-code-block .code-accent { color: #6B9FFF; }
.hero-code-block .code-string { color: #A3E635; }
.hero-code-block .code-comment { color: rgba(255,255,255,0.25); }

/* Floating orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.orb-1 { width: 400px; height: 400px; background: rgba(47,107,255,0.15); top: -100px; right: -100px; }
.orb-2 { width: 300px; height: 300px; background: rgba(10,31,68,0.4);    bottom: -80px; left: -80px; }

/* ── STATS BAR ───────────────────────────────────────────── */
.z-stats-bar {
  background: var(--z-white);
  border-bottom: 1px solid var(--z-gray-200);
  padding: 2.5rem 0;
  position: relative;
  z-index: 1;
}
.z-stats-bar .stat-item {
  text-align: center;
  padding: 1rem 1.5rem;
  border-right: 1px solid var(--z-gray-200);
}
.z-stats-bar .stat-item:last-child { border-right: none; }
.stat-value {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--z-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-value span { color: var(--z-accent); }
.stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--z-gray-600);
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}

/* ── SERVICE CARDS ───────────────────────────────────────── */
.z-service-card {
  background: var(--z-white);
  border: 1px solid var(--z-gray-200);
  border-radius: var(--z-radius-lg);
  padding: 2rem;
  transition: var(--z-transition);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.z-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color, var(--z-accent)), transparent);
  opacity: 0;
  transition: var(--z-transition);
}
.z-service-card:hover {
  border-color: rgba(47,107,255,0.2);
  transform: translateY(-4px);
  box-shadow: var(--z-shadow-lg);
}
.z-service-card:hover::before { opacity: 1; }
.z-service-card .svc-icon {
  width: 56px; height: 56px;
  background: rgba(47,107,255,0.07);
  border-radius: var(--z-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: var(--z-transition);
}
.z-service-card:hover .svc-icon {
  background: var(--z-accent);
  transform: scale(1.05);
}
.z-service-card:hover .svc-icon svg { color: white; }
.z-service-card .svc-icon svg { width: 26px; height: 26px; color: var(--z-accent); transition: var(--z-transition); }
.z-service-card h3 { font-size: 1.1875rem; margin-bottom: 0.75rem; color: var(--z-primary); }
.z-service-card p  { font-size: 0.9375rem; color: var(--z-gray-600); line-height: 1.7; margin: 0; }
.z-service-card .svc-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--z-accent);
  margin-top: 1.25rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: var(--z-transition);
}
.z-service-card:hover .svc-arrow { opacity: 1; transform: translateX(0); }

/* ── PRODUCT CARDS ───────────────────────────────────────── */
.z-product-card {
  background: var(--z-white);
  border: 1px solid var(--z-gray-200);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  transition: var(--z-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.z-product-card:hover {
  border-color: rgba(47,107,255,0.25);
  transform: translateY(-6px);
  box-shadow: var(--z-shadow-lg);
}
.z-product-card .product-header {
  padding: 1.75rem 1.75rem 1.25rem;
  background: linear-gradient(135deg, rgba(10,31,68,0.03), rgba(47,107,255,0.03));
  border-bottom: 1px solid var(--z-gray-200);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.z-product-card .product-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--z-primary), var(--z-accent));
  border-radius: var(--z-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.z-product-card .product-icon svg { width: 24px; height: 24px; color: white; }
.z-product-card .product-body { padding: 1.5rem 1.75rem; flex: 1; }
.z-product-card h4 { font-size: 1.0625rem; color: var(--z-primary); margin-bottom: 0.5rem; }
.z-product-card p  { font-size: 0.9rem; color: var(--z-gray-600); line-height: 1.65; margin: 0; }
.z-product-card .product-footer {
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--z-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--z-radius-full);
}
.status-badge.coming-soon {
  background: rgba(245,158,11,0.1);
  color: #92400E;
  border: 1px solid rgba(245,158,11,0.2);
}
.status-badge.active {
  background: rgba(16,185,129,0.1);
  color: #065F46;
  border: 1px solid rgba(16,185,129,0.2);
}
.status-badge.beta {
  background: rgba(47,107,255,0.08);
  color: var(--z-accent);
  border: 1px solid rgba(47,107,255,0.15);
}
.status-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ── WHY SECTION ─────────────────────────────────────────── */
.z-why-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--z-white);
  border: 1px solid var(--z-gray-200);
  border-radius: var(--z-radius-lg);
  transition: var(--z-transition);
}
.z-why-card:hover {
  border-color: rgba(47,107,255,0.2);
  box-shadow: var(--z-shadow);
  transform: translateX(4px);
}
.z-why-card .why-num {
  font-size: 2rem;
  font-weight: 900;
  color: rgba(47,107,255,0.12);
  line-height: 1;
  flex-shrink: 0;
  font-family: var(--z-font);
  letter-spacing: -0.04em;
}
.z-why-card h5 { font-size: 1rem; color: var(--z-primary); margin-bottom: 0.375rem; }
.z-why-card p  { font-size: 0.9rem; color: var(--z-gray-600); margin: 0; line-height: 1.65; }

/* ── TESTIMONIAL CARDS ───────────────────────────────────── */
.z-testimonial-card {
  background: var(--z-white);
  border: 1px solid var(--z-gray-200);
  border-radius: var(--z-radius-lg);
  padding: 2rem;
  transition: var(--z-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.z-testimonial-card:hover {
  box-shadow: var(--z-shadow-lg);
  border-color: rgba(47,107,255,0.15);
  transform: translateY(-4px);
}
.z-testimonial-card .stars { color: var(--z-gold); font-size: 1rem; margin-bottom: 1rem; letter-spacing: 2px; }
.z-testimonial-card .review { font-size: 1rem; color: var(--z-gray-700); line-height: 1.75; flex: 1; font-style: italic; }
.z-testimonial-card .review::before { content: '\201C'; }
.z-testimonial-card .review::after  { content: '\201D'; }
.z-testimonial-card .reviewer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--z-gray-200);
}
.z-testimonial-card .reviewer-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--z-primary), var(--z-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  flex-shrink: 0;
}
.z-testimonial-card .reviewer-name { font-size: 0.9375rem; font-weight: 600; color: var(--z-primary); }
.z-testimonial-card .reviewer-role { font-size: 0.8125rem; color: var(--z-gray-500); }

/* ── BLOG CARDS ──────────────────────────────────────────── */
.z-blog-card {
  background: var(--z-white);
  border: 1px solid var(--z-gray-200);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  transition: var(--z-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.z-blog-card:hover {
  box-shadow: var(--z-shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(47,107,255,0.15);
}
.z-blog-card .blog-thumb {
  width: 100%; height: 200px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--z-primary), var(--z-accent));
  position: relative;
  overflow: hidden;
}
.z-blog-card .blog-thumb-placeholder {
  width: 100%; height: 200px;
  background: linear-gradient(135deg, var(--z-primary) 0%, var(--z-accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.z-blog-card .blog-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.z-blog-card .blog-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--z-gray-500);
  margin-bottom: 0.875rem;
}
.z-blog-card .blog-cat {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--z-accent);
  background: rgba(47,107,255,0.07);
  padding: 0.2rem 0.625rem;
  border-radius: var(--z-radius-full);
}
.z-blog-card h4 {
  font-size: 1.0625rem;
  color: var(--z-primary);
  line-height: 1.4;
  margin-bottom: 0.75rem;
  flex: 1;
}
.z-blog-card p { font-size: 0.9rem; color: var(--z-gray-600); line-height: 1.65; }
.z-blog-card .blog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--z-gray-200);
  font-size: 0.875rem;
}

/* ── CTA SECTION ─────────────────────────────────────────── */
.z-cta-section {
  background: linear-gradient(135deg, var(--z-primary) 0%, #0D2A5C 50%, var(--z-accent) 130%);
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
}
.z-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.z-cta-section h2 { color: var(--z-white); }
.z-cta-section p  { color: rgba(255,255,255,0.7); }

/* ── PAGE HERO (inner pages) ──────────────────────────────── */
.z-page-hero {
  background: var(--z-primary);
  padding: 7rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.z-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 40%, rgba(47,107,255,0.15) 0%, transparent 70%);
}
.z-page-hero .page-title { color: var(--z-white); font-size: clamp(2rem,4vw,3rem); margin-bottom: 1rem; }
.z-page-hero .page-desc  { color: rgba(255,255,255,0.68); max-width: 560px; font-size: 1.0625rem; }
.z-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}
.z-breadcrumb a { color: rgba(255,255,255,0.55); }
.z-breadcrumb a:hover { color: rgba(255,255,255,0.9); }
.z-breadcrumb .sep { color: rgba(255,255,255,0.25); }
.z-breadcrumb .current { color: rgba(255,255,255,0.85); font-weight: 500; }

/* ── PORTFOLIO GRID ──────────────────────────────────────── */
.z-portfolio-card {
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--z-gray-100);
  aspect-ratio: 4/3;
  cursor: pointer;
}
.z-portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.z-portfolio-card:hover img { transform: scale(1.06); }
.z-portfolio-card .portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,31,68,0.92) 0%, rgba(10,31,68,0.3) 50%, transparent 100%);
  opacity: 0;
  transition: var(--z-transition);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
}
.z-portfolio-card:hover .portfolio-overlay { opacity: 1; }
.z-portfolio-card .portfolio-cat { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--z-gold); margin-bottom: 0.5rem; }
.z-portfolio-card .portfolio-title { font-size: 1.125rem; font-weight: 700; color: white; margin-bottom: 0.5rem; }
.z-portfolio-card .portfolio-client { font-size: 0.875rem; color: rgba(255,255,255,0.65); }

/* Category filter pills */
.z-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.z-filter-pill {
  padding: 0.5rem 1.125rem;
  border-radius: var(--z-radius-full);
  border: 1.5px solid var(--z-gray-200);
  background: var(--z-white);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--z-gray-600);
  cursor: pointer;
  transition: var(--z-transition);
}
.z-filter-pill:hover,
.z-filter-pill.active {
  background: var(--z-primary);
  border-color: var(--z-primary);
  color: white;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.z-footer {
  background: var(--z-dark);
  color: rgba(255,255,255,0.7);
  padding: 5rem 0 0;
}
.z-footer .footer-logo-text {
  font-size: 1.625rem;
  font-weight: 900;
  color: var(--z-white);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.z-footer .footer-desc { font-size: 0.9375rem; line-height: 1.75; max-width: 300px; color: rgba(255,255,255,0.5); }
.z-footer .footer-heading {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--z-white);
  margin-bottom: 1.25rem;
}
.z-footer .footer-links { list-style: none; }
.z-footer .footer-links li { margin-bottom: 0.625rem; }
.z-footer .footer-links a { color: rgba(255,255,255,0.5); font-size: 0.9375rem; transition: var(--z-transition); }
.z-footer .footer-links a:hover { color: var(--z-accent); padding-left: 4px; }
.z-footer .social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.z-footer .social-link {
  width: 38px; height: 38px;
  border-radius: var(--z-radius);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  transition: var(--z-transition);
}
.z-footer .social-link:hover {
  background: var(--z-accent);
  border-color: var(--z-accent);
  color: white;
  transform: translateY(-2px);
}
.z-footer .footer-bottom {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.35);
}
.z-footer .footer-bottom a { color: rgba(255,255,255,0.45); }
.z-footer .footer-bottom a:hover { color: var(--z-accent); }
.z-footer .footer-newsletter input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--z-radius-full);
  padding: 0.6875rem 1.25rem;
  color: white;
  font-family: var(--z-font);
  font-size: 0.9375rem;
  width: 260px;
  outline: none;
  transition: var(--z-transition);
}
.z-footer .footer-newsletter input::placeholder { color: rgba(255,255,255,0.3); }
.z-footer .footer-newsletter input:focus { border-color: var(--z-accent); background: rgba(255,255,255,0.09); }

/* ── FORM STYLES ─────────────────────────────────────────── */
.z-form-group { margin-bottom: 1.5rem; }
.z-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--z-gray-800);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.z-form-control {
  width: 100%;
  padding: 0.875rem 1.125rem;
  border: 1.5px solid var(--z-gray-200);
  border-radius: var(--z-radius);
  font-family: var(--z-font);
  font-size: 0.9375rem;
  color: var(--z-gray-900);
  background: var(--z-white);
  transition: var(--z-transition);
  outline: none;
}
.z-form-control:focus {
  border-color: var(--z-accent);
  box-shadow: 0 0 0 3px rgba(47,107,255,0.1);
}
.z-form-control::placeholder { color: var(--z-gray-400); }
textarea.z-form-control { resize: vertical; min-height: 140px; }

/* ── CONTACT INFO CARDS ──────────────────────────────────── */
.z-contact-info-card {
  background: var(--z-white);
  border: 1px solid var(--z-gray-200);
  border-radius: var(--z-radius-lg);
  padding: 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  transition: var(--z-transition);
}
.z-contact-info-card:hover { box-shadow: var(--z-shadow); border-color: rgba(47,107,255,0.2); }
.z-contact-info-card .ci-icon {
  width: 48px; height: 48px;
  background: rgba(47,107,255,0.07);
  border-radius: var(--z-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.z-contact-info-card .ci-icon svg { width: 22px; height: 22px; color: var(--z-accent); }
.z-contact-info-card h5 { font-size: 0.875rem; font-weight: 600; color: var(--z-gray-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
.z-contact-info-card p  { font-size: 1rem; color: var(--z-primary); font-weight: 500; margin: 0; }

/* ── PROCESS STEPS ───────────────────────────────────────── */
.z-process-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
}
.z-process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: -24px;
  width: 1px;
  background: linear-gradient(to bottom, var(--z-accent), transparent);
}
.z-process-step .step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--z-primary), var(--z-accent));
  color: white;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(47,107,255,0.3);
}
.z-process-step h5 { font-size: 1.0625rem; color: var(--z-primary); margin-bottom: 0.375rem; }
.z-process-step p  { font-size: 0.9rem; color: var(--z-gray-600); margin: 0; }

/* ── TEAM CARDS ──────────────────────────────────────────── */
.z-team-card {
  background: var(--z-white);
  border: 1px solid var(--z-gray-200);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  transition: var(--z-transition);
  text-align: center;
}
.z-team-card:hover { box-shadow: var(--z-shadow-lg); transform: translateY(-4px); }
.z-team-card .team-photo {
  width: 100%; height: 240px;
  object-fit: cover;
  object-position: top;
  background: linear-gradient(135deg, var(--z-primary), var(--z-accent));
}
.z-team-card .team-photo-placeholder {
  width: 100%; height: 240px;
  background: linear-gradient(135deg, var(--z-primary), var(--z-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255,255,255,0.6);
}
.z-team-card .team-info { padding: 1.5rem; }
.z-team-card h4 { font-size: 1.0625rem; color: var(--z-primary); margin-bottom: 0.25rem; }
.z-team-card .team-role { font-size: 0.875rem; color: var(--z-accent); font-weight: 500; margin-bottom: 1rem; }
.z-team-card .team-socials {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}
.z-team-card .team-social-link {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--z-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--z-gray-600);
  font-size: 0.75rem;
  transition: var(--z-transition);
}
.z-team-card .team-social-link:hover { background: var(--z-accent); color: white; }

/* ── ALERT MESSAGES ──────────────────────────────────────── */
.z-alert {
  padding: 1rem 1.25rem;
  border-radius: var(--z-radius);
  font-size: 0.9375rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-left: 3px solid;
}
.z-alert-success { background: #ECFDF5; color: #065F46; border-color: var(--z-success); }
.z-alert-error   { background: #FEF2F2; color: #991B1B; border-color: var(--z-error); }
.z-alert-info    { background: rgba(47,107,255,0.06); color: var(--z-accent); border-color: var(--z-accent); }

/* ── FAQ ACCORDION ───────────────────────────────────────── */
.z-faq-item {
  border: 1px solid var(--z-gray-200);
  border-radius: var(--z-radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: var(--z-transition);
}
.z-faq-item:hover { border-color: rgba(47,107,255,0.2); }
.z-faq-question {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--z-primary);
  font-size: 1rem;
  background: var(--z-white);
  transition: var(--z-transition);
}
.z-faq-question:hover { color: var(--z-accent); }
.z-faq-question.open  { color: var(--z-accent); border-bottom: 1px solid var(--z-gray-200); }
.z-faq-chevron { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.3s ease; color: var(--z-gray-400); }
.z-faq-question.open .z-faq-chevron { transform: rotate(180deg); color: var(--z-accent); }
.z-faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  font-size: 0.9375rem;
  color: var(--z-gray-600);
  line-height: 1.8;
}
.z-faq-answer.open { max-height: 500px; padding: 1.25rem 1.5rem; }

/* ── NEWSLETTER SECTION ──────────────────────────────────── */
.z-newsletter-section {
  background: linear-gradient(135deg, var(--z-primary), #0D2A5C);
  padding: 4rem 0;
}
.z-newsletter-form {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
}
.z-newsletter-form input {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--z-radius-full);
  padding: 0.875rem 1.25rem;
  color: white;
  font-family: var(--z-font);
  font-size: 0.9375rem;
  outline: none;
  transition: var(--z-transition);
}
.z-newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.z-newsletter-form input:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.14); }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* AOS overrides */
[data-aos] { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* ── UTILITY CLASSES ─────────────────────────────────────── */
.text-accent   { color: var(--z-accent) !important; }
.text-gold     { color: var(--z-gold)   !important; }
.text-primary  { color: var(--z-primary)!important; }
.text-white-70 { color: rgba(255,255,255,0.7) !important; }
.text-white-50 { color: rgba(255,255,255,0.5) !important; }
.bg-primary    { background: var(--z-primary) !important; }
.bg-accent     { background: var(--z-accent)  !important; }
.bg-light      { background: var(--z-light)   !important; }
.border-accent { border-color: var(--z-accent) !important; }
.z-divider     { height: 1px; background: var(--z-gray-200); margin: 0; border: none; }

.mono { font-family: var(--z-mono); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .z-nav-toggle  { display: flex; }
  .z-navbar .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--z-gray-200);
    box-shadow: var(--z-shadow-lg);
  }
  .z-navbar .nav-links.open { display: flex; }
  .z-navbar .nav-links a {
    color: var(--z-gray-800) !important;
    padding: 0.75rem 1rem;
    border-radius: var(--z-radius);
  }
  .z-navbar .nav-links a:hover { background: var(--z-light); color: var(--z-accent) !important; }
  .z-section { padding: 4rem 0; }
  .hero-title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .hero-visual { display: none; }
  .z-stats-bar .stat-item { border-right: none; border-bottom: 1px solid var(--z-gray-200); padding: 1.25rem; }
  .z-stats-bar .stat-item:last-child { border-bottom: none; }
  .z-newsletter-form { flex-direction: column; }
}

@media (max-width: 575.98px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-trust   { flex-direction: column; gap: 0.5rem; }
  .z-footer .footer-bottom { justify-content: center; text-align: center; }
}



/* ════════════════════════════════════════════════════
   DARK MODE — Comprehensive
════════════════════════════════════════════════════ */

/* ── 1. Override CSS variables globally ─────────────
   This is the most powerful approach — every element
   using these variables automatically adapts.
   Sections with hardcoded dark bg (hero, cta, footer)
   are unaffected because their text colors are
   hardcoded to white/rgba(255,255,255,x).
─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --z-white:    #0F1117;
  --z-light:    #1A1D27;
  --z-gray-100: #1E2130;
  --z-gray-200: #2A2D3E;
  --z-gray-400: #6B7280;
  --z-gray-500: #9CA3AF;
  --z-gray-600: #A0AAB8;
  --z-gray-700: #B8C0CC;
  --z-gray-800: #D1D5DB;
  --z-gray-900: #F3F4F6;
  --z-border:   #2A2D3E;
}

[data-theme="dark"] body {
  background: #0F1117;
  color: #D1D5DB;
}

/* ── 2. Headings — light surface only ──────────────
   Use :not() to protect always-dark sections.
   The selectors cover every heading that could appear
   on a light/card background.
─────────────────────────────────────────────────── */
/* Headings on light surfaces only — dark bg sections excluded */
[data-theme="dark"] .z-section:not(.z-section-navy):not(.z-section-dark) h1,
[data-theme="dark"] .z-section:not(.z-section-navy):not(.z-section-dark) h2,
[data-theme="dark"] .z-section:not(.z-section-navy):not(.z-section-dark) h3,
[data-theme="dark"] .z-section:not(.z-section-navy):not(.z-section-dark) h4,
[data-theme="dark"] .z-section:not(.z-section-navy):not(.z-section-dark) h5,
[data-theme="dark"] .z-section:not(.z-section-navy):not(.z-section-dark) h6,
[data-theme="dark"] .z-service-card h3,
[data-theme="dark"] .z-product-card h4,
[data-theme="dark"] .z-blog-card h4,
[data-theme="dark"] .z-why-card h5,
[data-theme="dark"] .z-team-card h4,
[data-theme="dark"] .z-testimonial-card .reviewer-name,
[data-theme="dark"] .z-contact-info-card p,
[data-theme="dark"] .z-faq-question,
[data-theme="dark"] .prose h1,
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3,
[data-theme="dark"] .prose h4 {
  color: #F3F4F6;
}

/* Protect headings inside always-dark sections — never override */
[data-theme="dark"] .z-hero h1,
[data-theme="dark"] .z-hero h2,
[data-theme="dark"] .z-hero h3,
[data-theme="dark"] .z-page-hero h1,
[data-theme="dark"] .z-page-hero h2,
[data-theme="dark"] .z-page-hero p,
[data-theme="dark"] .z-cta-section h2,
[data-theme="dark"] .z-cta-section p,
[data-theme="dark"] .z-section-navy h2,
[data-theme="dark"] .z-section-navy h3,
[data-theme="dark"] .z-section-navy h4,
[data-theme="dark"] .z-newsletter-section h2,
[data-theme="dark"] .z-newsletter-section p,
[data-theme="dark"] .z-footer h1,
[data-theme="dark"] .z-footer h2,
[data-theme="dark"] .z-footer h3,
[data-theme="dark"] .z-footer h4,
[data-theme="dark"] .z-footer h5,
[data-theme="dark"] .z-footer h6 {
  color: inherit;
}

/* ── 3. Paragraphs & spans — light surface only ─── */
[data-theme="dark"] p:not(.z-hero *):not(.z-page-hero *):not(.z-cta-section *):not(.z-section-navy *):not(.z-newsletter-section *):not(.z-footer *),
[data-theme="dark"] span:not(.z-hero *):not(.z-page-hero *):not(.z-cta-section *):not(.z-section-navy *):not(.z-newsletter-section *):not(.z-footer *):not(.badge-count):not(.z-badge):not(.status-badge):not(.section-badge) {
  color: #A0AAB8;
}

/* ── 4. Section utility classes ─────────────────── */
[data-theme="dark"] .section-heading    { color: #F3F4F6 !important; }
[data-theme="dark"] .section-desc       { color: #A0AAB8 !important; }
[data-theme="dark"] .section-badge      { background: rgba(47,107,255,0.15); border-color: rgba(47,107,255,0.25); color: #6B9FFF; }
[data-theme="dark"] .stat-value         { color: #F3F4F6 !important; }
[data-theme="dark"] .stat-label         { color: #A0AAB8 !important; }

/* ── 5. Hardcoded inline color overrides ────────────
   Blade templates have inline style="color:#111827" etc
   We target these with attribute selectors where possible
   and class-based selectors for common patterns.
─────────────────────────────────────────────────── */
[data-theme="dark"] .text-primary,
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color:#1F2937"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color:var(--z-primary)"] {
  color: #F3F4F6 !important;
}
[data-theme="dark"] [style*="color:#6B7280"],
[data-theme="dark"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="color:var(--z-gray-600)"],
[data-theme="dark"] [style*="color:var(--z-gray-500)"] {
  color: #A0AAB8 !important;
}
[data-theme="dark"] [style*="color:#0A1F44"]:not(.z-hero *):not(.z-page-hero *):not(.z-cta-section *):not(.z-section-navy *) {
  color: #F3F4F6 !important;
}

/* ── 6. Cards ───────────────────────────────────── */
[data-theme="dark"] .z-service-card,
[data-theme="dark"] .z-product-card,
[data-theme="dark"] .z-blog-card,
[data-theme="dark"] .z-testimonial-card,
[data-theme="dark"] .z-why-card,
[data-theme="dark"] .z-contact-info-card,
[data-theme="dark"] .z-team-card,
[data-theme="dark"] .z-portfolio-card,
[data-theme="dark"] .z-faq-item,
[data-theme="dark"] .z-process-step > div {
  background: #1A1D27;
  border-color: #2A2D3E;
}

/* Blog card footer */
[data-theme="dark"] .z-blog-card .blog-footer   { border-color: #2A2D3E; }
[data-theme="dark"] .z-blog-card .blog-meta      { color: #6B7280; }
[data-theme="dark"] .z-blog-card .blog-cat       { background: rgba(47,107,255,0.15); color: #6B9FFF; }

/* Testimonial reviewer separator */
[data-theme="dark"] .z-testimonial-card .reviewer { border-color: #2A2D3E; }
[data-theme="dark"] .z-testimonial-card .review   { color: #D1D5DB; }

/* Contact info */
[data-theme="dark"] .z-contact-info-card h5 { color: #6B7280 !important; }
[data-theme="dark"] .z-contact-info-card p  { color: #D1D5DB !important; }
[data-theme="dark"] .z-contact-info-card a  { color: var(--z-accent); }

/* Why cards */
[data-theme="dark"] .z-why-card .why-num { color: rgba(47,107,255,0.25); }

/* ── 7. Stats bar ───────────────────────────────── */
[data-theme="dark"] .z-stats-bar {
  background: #1A1D27;
  border-color: #2A2D3E;
}

/* ── 8. FAQ ─────────────────────────────────────── */
[data-theme="dark"] .z-faq-question {
  background: #1A1D27;
  color: #F3F4F6 !important;
}
[data-theme="dark"] .z-faq-answer   { color: #A0AAB8; }
[data-theme="dark"] .z-faq-item:hover { border-color: rgba(47,107,255,0.3); }

/* ── 9. Sections light bg ───────────────────────── */
[data-theme="dark"] .z-section-light { background: #1A1D27; }

/* ── 10. Portfolio filter pills ─────────────────── */
[data-theme="dark"] .z-filter-pill {
  background: #1A1D27;
  border-color: #2A2D3E;
  color: #A0AAB8;
}
[data-theme="dark"] .z-filter-pill.active,
[data-theme="dark"] .z-filter-pill:hover {
  background: var(--z-accent);
  border-color: var(--z-accent);
  color: white;
}

/* ── 11. Forms ──────────────────────────────────── */
[data-theme="dark"] .z-form-control {
  background: #1A1D27;
  border-color: #2A2D3E;
  color: #F3F4F6;
}
[data-theme="dark"] .z-form-control::placeholder { color: #4B5563; }
[data-theme="dark"] .z-form-control:focus { border-color: var(--z-accent); }
[data-theme="dark"] .z-form-label { color: #D1D5DB; }
[data-theme="dark"] select.z-form-control option { background: #1A1D27; color: #F3F4F6; }

/* ── 12. Alerts ─────────────────────────────────── */
[data-theme="dark"] .z-alert-info { background: rgba(47,107,255,0.12); }

/* ── 13. Nav scrolled in dark mode ──────────────── */
[data-theme="dark"] .z-navbar.scrolled {
  background: rgba(15,17,23,0.97);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
[data-theme="dark"] .z-navbar.scrolled .nav-links a        { color: rgba(255,255,255,0.72); }
[data-theme="dark"] .z-navbar.scrolled .nav-links a:hover,
[data-theme="dark"] .z-navbar.scrolled .nav-links a.active  { color: white; background: rgba(255,255,255,0.08); }
[data-theme="dark"] .z-navbar.scrolled .z-nav-toggle span  { background: rgba(255,255,255,0.8); }
[data-theme="dark"] .z-navbar .nav-links.open               { background: rgba(15,17,23,0.98); }
[data-theme="dark"] .z-navbar .nav-links.open a             { color: #D1D5DB !important; }

/* ── 14. Theme toggle button ────────────────────── */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .375rem;
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--z-transition);
  line-height: 1;
}
.theme-toggle-btn:hover            { color: white; background: rgba(255,255,255,0.1); }
.z-navbar.scrolled .theme-toggle-btn       { color: var(--z-gray-600); }
.z-navbar.scrolled .theme-toggle-btn:hover { color: var(--z-accent); background: rgba(47,107,255,0.08); }
[data-theme="dark"] .theme-toggle-btn,
[data-theme="dark"] .z-navbar.scrolled .theme-toggle-btn        { color: rgba(255,255,255,0.72); }
[data-theme="dark"] .theme-toggle-btn:hover,
[data-theme="dark"] .z-navbar.scrolled .theme-toggle-btn:hover  { color: white; background: rgba(255,255,255,0.1); }

/* ── 15. Smooth transitions ─────────────────────── */
body, h1, h2, h3, h4, h5, h6, p, span,
.z-service-card, .z-blog-card, .z-product-card,
.z-testimonial-card, .z-why-card, .z-faq-item,
.z-contact-info-card, .z-team-card, .z-stats-bar,
.z-filter-pill, .z-form-control, .section-heading,
.section-desc, .stat-value, .stat-label {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}

/* ── BUTTON DARK MODE FIXES ─────────────────────────────────
   Light mode:
     btn-z-outline-dark  → dark border, dark text, hover = dark bg/white text
     btn-z-primary       → blue bg, white text (stays the same)
     btn-z-outline       → white border/text (on dark sections — stays same)
     btn-z-ghost         → accent color text

   Dark mode:
     btn-z-outline-dark  → should NOT go dark on hover (bg is already dark).
                           Instead: accent border, accent text, hover = accent bg
     btn-z-primary       → stays blue (correct in both modes)
     btn-z-outline       → unchanged (already styled for dark bg sections)
     btn-z-ghost         → unchanged
─────────────────────────────────────────────────────────── */

/* btn-z-outline-dark in dark mode:
   light mode = dark border + dark text + hover dark bg
   dark mode  = accent border + accent text + hover accent bg  */
[data-theme="dark"] .btn-z-outline-dark {
  color: var(--z-accent);
  border-color: var(--z-accent);
  background: transparent;
}
[data-theme="dark"] .btn-z-outline-dark:hover {
  background: var(--z-accent);
  color: white;
  border-color: var(--z-accent);
}

/* btn-z-primary — stays exactly the same (blue bg, white text) */
[data-theme="dark"] .btn-z-primary {
  background: var(--z-accent);
  color: white;
  border-color: var(--z-accent);
}
[data-theme="dark"] .btn-z-primary:hover {
  background: var(--z-accent-hover);
  color: white;
}

/* btn-z-outline — white border/text (for dark bg sections like hero, CTA)
   These sections are always dark, so this never changes */
[data-theme="dark"] .btn-z-outline {
  color: white;
  border-color: rgba(255,255,255,0.45);
}
[data-theme="dark"] .btn-z-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.8);
  color: white;
}

/* btn-z-ghost — accent text, no border */
[data-theme="dark"] .btn-z-ghost {
  color: var(--z-accent);
}
[data-theme="dark"] .btn-z-ghost:hover {
  color: #6B9FFF;
}

/* Nav CTA pill button — stays blue always */
[data-theme="dark"] .z-navbar .nav-cta,
[data-theme="dark"] .z-navbar.scrolled .nav-cta {
  background: var(--z-accent) !important;
  color: white !important;
  border-color: var(--z-accent) !important;
}

/* ════════════════════════════════════════════════════
   DARK MODE — TARGETED OVERRIDES
   Root cause: --z-white was remapped to #0F1117,
   breaking elements that use color:var(--z-white)
   for white TEXT on dark backgrounds.
════════════════════════════════════════════════════ */

/* ── 1. Hero floating card — ALWAYS white text ────── */
[data-theme="dark"] .hero-metric .metric-value,
[data-theme="dark"] .hero-code-block .code-accent,
[data-theme="dark"] .hero-code-block .code-string,
[data-theme="dark"] .hero-code-block .code-line {
  color: white;
}
[data-theme="dark"] .hero-metric .metric-label {
  color: rgba(255,255,255,0.45);
}
[data-theme="dark"] .hero-code-block .code-comment {
  color: rgba(255,255,255,0.25);
}

/* ── 2. Hero title/desc — always white (dark bg) ─── */
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-title .accent-line,
[data-theme="dark"] .hero-title .gradient-text {
  color: white;
}
[data-theme="dark"] .hero-desc { color: rgba(255,255,255,0.68); }

/* ── 3. Page hero (About, Services etc) — always white */
[data-theme="dark"] .z-page-hero .page-title,
[data-theme="dark"] .z-page-hero h1,
[data-theme="dark"] .z-page-hero h2 { color: white; }
[data-theme="dark"] .z-page-hero .page-desc,
[data-theme="dark"] .z-page-hero p   { color: rgba(255,255,255,0.68); }
[data-theme="dark"] .z-breadcrumb a  { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .z-breadcrumb .current { color: rgba(255,255,255,0.85); }

/* ── 4. CTA section — always white ─────────────────── */
[data-theme="dark"] .z-cta-section h2,
[data-theme="dark"] .z-cta-section p  { color: inherit; }

/* ── 5. Section navy (products showcase) ────────────── */
[data-theme="dark"] .z-section-navy h2,
[data-theme="dark"] .z-section-navy h3,
[data-theme="dark"] .z-section-navy p,
[data-theme="dark"] .z-section-navy .section-heading-white,
[data-theme="dark"] .z-section-navy .section-desc-white { color: inherit; }

/* ── 6. Navbar active pill fix ───────────────────────
   "Home" pill was showing dark bg on dark navbar.
   The active state on transparent navbar should be
   subtle white highlight, not a dark pill.
─────────────────────────────────────────────────── */
[data-theme="dark"] .z-navbar .nav-links a.active,
[data-theme="dark"] .z-navbar:not(.scrolled) .nav-links a.active {
  background: rgba(255,255,255,0.1);
  color: white;
}
[data-theme="dark"] .z-navbar.scrolled .nav-links a.active {
  background: rgba(47,107,255,0.12);
  color: white;
}

/* ── 7. Hero badge ───────────────────────────────────── */
[data-theme="dark"] .hero-badge { color: rgba(255,255,255,0.85); }

/* ── 8. Hero trust items ─────────────────────────────── */
[data-theme="dark"] .hero-trust-item { color: rgba(255,255,255,0.55); }

/* ── 9. Stats bar stat-value uses color:var(--z-primary)
   which is fine — primary is always navy (correct).
   But stat-value was using var(--z-white) in some
   places — ensure it stays readable.
─────────────────────────────────────────────────── */
[data-theme="dark"] .z-stats-bar .stat-value { color: var(--z-accent); }
[data-theme="dark"] .z-stats-bar .stat-label  { color: #A0AAB8; }
Fixes appliedcat

/* ════════════════════════════════════════════════════
   DARK MODE — MOBILE NAV FIXES
════════════════════════════════════════════════════ */

/* Mobile nav drawer — dark background in dark mode */
[data-theme="dark"] .z-navbar .nav-links.open {
  background: rgba(15, 17, 23, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Mobile nav links text in dark mode */
[data-theme="dark"] .z-navbar .nav-links.open a {
  color: rgba(255,255,255,0.78) !important;
}
[data-theme="dark"] .z-navbar .nav-links.open a:hover {
  background: rgba(255,255,255,0.07) !important;
  color: white !important;
}
[data-theme="dark"] .z-navbar .nav-links.open a.active {
  background: rgba(47,107,255,0.15) !important;
  color: white !important;
}

/* "Start a Project" CTA button inside mobile nav */
[data-theme="dark"] .z-navbar .nav-links.open .btn-z-primary {
  background: var(--z-accent) !important;
  color: white !important;
  border-color: var(--z-accent) !important;
}

/* Mobile toggle button (hamburger) */
[data-theme="dark"] .z-nav-toggle span {
  background: rgba(255,255,255,0.85);
}
[data-theme="dark"] .z-navbar.scrolled .z-nav-toggle span {
  background: rgba(255,255,255,0.85);
}

/* Mobile theme toggle button */
[data-theme="dark"] .d-lg-none .theme-toggle-btn {
  color: rgba(255,255,255,0.75);
}
[data-theme="dark"] .d-lg-none .theme-toggle-btn:hover {
  color: white;
  background: rgba(255,255,255,0.1);
}

/* Logo text on mobile dark mode */
[data-theme="dark"] .z-navbar .logo-text {
  color: white;
}