/* =============================================================================
   APEX Soft Tech — World-Class Enterprise Light Design System v5.0
   Brand Colors: Deep Navy · Royal Blue · Electric Blue · Sky Blue · White
   Philosophy: Apple clarity · Stripe precision · Linear elegance
   ============================================================================= */

/* ─── 1. FONTS ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&family=Manrope:wght@400;500;600;700;800;900&display=swap');

/* ─── 2. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* ── Brand Palette ─── */
  --brand-navy:        #0A1628;
  --brand-navy-mid:    #0F2347;
  --brand-royal:       #1A4DC8;
  --brand-electric:    #2563EB;
  --brand-sky:         #38BDF8;
  --brand-sky-light:   #BAE6FD;
  --brand-cyan:        #06B6D4;

  /* ── Semantic Colours ─── */
  --color-primary:     var(--brand-electric);
  --color-primary-hover: var(--brand-royal);
  --color-accent:      var(--brand-sky);

  /* ── Surface Colours (LIGHT ONLY) ─── */
  --surface-base:      #FFFFFF;
  --surface-subtle:    #F8FAFC;
  --surface-muted:     #F0F4F9;
  --surface-blue-tint: #EFF6FF;
  --surface-card:      #FFFFFF;

  /* ── Text ─── */
  --text-primary:   #0A1628;
  --text-secondary: #334155;
  --text-muted:     #64748B;
  --text-light:     #94A3B8;
  --text-inverse:   #FFFFFF;

  /* ── Borders ─── */
  --border-soft:  rgba(10,22,40,0.08);
  --border-blue:  rgba(37,99,235,0.20);
  --border-card:  rgba(10,22,40,0.07);

  /* ── Shadows ─── */
  --shadow-xs:    0 1px 3px rgba(10,22,40,0.05), 0 1px 2px rgba(10,22,40,0.04);
  --shadow-sm:    0 4px 12px rgba(10,22,40,0.06), 0 2px 4px rgba(10,22,40,0.04);
  --shadow-md:    0 12px 32px rgba(10,22,40,0.07), 0 4px 12px rgba(10,22,40,0.04);
  --shadow-lg:    0 24px 64px rgba(10,22,40,0.08), 0 8px 24px rgba(10,22,40,0.05);
  --shadow-xl:    0 48px 96px rgba(10,22,40,0.10), 0 16px 48px rgba(10,22,40,0.06);
  --shadow-card:  0 2px 8px rgba(10,22,40,0.06), 0 0 0 1px rgba(10,22,40,0.04);
  --shadow-card-hover: 0 16px 48px rgba(10,22,40,0.10), 0 0 0 1px rgba(37,99,235,0.12);
  --shadow-blue:  0 8px 32px rgba(37,99,235,0.20), 0 2px 8px rgba(37,99,235,0.12);
  --shadow-btn:   0 4px 14px rgba(37,99,235,0.30);
  --glow-blue:    0 0 40px rgba(37,99,235,0.15), 0 0 80px rgba(56,189,248,0.08);

  /* ── Typography ─── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, sans-serif;

  /* ── Type Scale (fluid) ─── */
  --text-xs:   clamp(0.75rem,  1.5vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 1.8vw, 0.9375rem);
  --text-base: clamp(1rem,     2vw,   1.0625rem);
  --text-lg:   clamp(1.125rem, 2.2vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   3vw,   2rem);
  --text-3xl:  clamp(1.875rem, 4vw,   2.5rem);
  --text-4xl:  clamp(2.25rem,  5vw,   3.25rem);
  --text-5xl:  clamp(2.75rem,  6vw,   4.25rem);
  --text-hero: clamp(3rem,     7.5vw, 5.5rem);

  /* ── Spacing ─── */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
  --sp-32: 8rem;   --sp-40: 10rem;

  /* ── Section Padding ─── */
  --section-y: clamp(5rem, 10vw, 8rem);
  --section-y-sm: clamp(3rem, 6vw, 5rem);

  /* ── Radii ─── */
  --r-sm:   6px;  --r-md:  10px; --r-lg:  16px;
  --r-xl:   20px; --r-2xl: 28px; --r-3xl: 36px;
  --r-full: 9999px;

  /* ── Motion ─── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-slower:  600ms;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  color: var(--text-primary) !important;
  background: var(--surface-base) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* HARD OVERRIDE: kill any Tailwind dark background classes */
[class*="bg-dark-"], [class*="from-dark-"], [class*="via-dark-"], [class*="to-dark-"],
.bg-black, .bg-neutral-900, .bg-neutral-800, .bg-neutral-950,
.bg-gray-900, .bg-gray-950, .bg-zinc-900, .bg-slate-900 {
  background: var(--surface-base) !important;
  background-color: var(--surface-base) !important;
  background-image: none !important;
}

/* Fix Tailwind text-white on body copy */
.text-white:not(.btn-enterprise):not([class*="btn-"]):not(button):not(.badge-light):not(.nav-cta) {
  color: var(--text-primary) !important;
}

/* ─── 4. TYPOGRAPHY SYSTEM ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.text-hero    { font-size: var(--text-hero) !important; letter-spacing: -0.04em !important; line-height: 1.0 !important; }
.text-display { font-size: var(--text-5xl) !important; letter-spacing: -0.035em !important; line-height: 1.05 !important; }
.text-display-sm { font-size: var(--text-4xl) !important; letter-spacing: -0.03em !important; line-height: 1.08 !important; }
.text-heading    { font-size: var(--text-3xl) !important; letter-spacing: -0.02em !important; }
.text-heading-md { font-size: var(--text-2xl) !important; letter-spacing: -0.018em !important; }
.text-heading-sm { font-size: var(--text-xl) !important;  letter-spacing: -0.015em !important; }
.text-hero-sm    { font-size: var(--text-4xl) !important; letter-spacing: -0.03em !important;  line-height: 1.08 !important; }
.text-body-xl { font-size: var(--text-xl)   !important; line-height: 1.7 !important; }
.text-body-lg { font-size: var(--text-lg)   !important; line-height: 1.7 !important; }
.text-body    { font-size: var(--text-base) !important; line-height: 1.7 !important; }
.text-body-sm { font-size: var(--text-sm)   !important; line-height: 1.6 !important; }

p { color: var(--text-secondary) !important; line-height: 1.75; }

a { color: var(--brand-electric); text-decoration: none; transition: color var(--dur-base) var(--ease-smooth); }
a:hover { color: var(--brand-royal); }

/* Brand Gradient Text */
.text-gradient-premium,
.text-gradient-brand {
  background: linear-gradient(135deg, var(--brand-electric) 0%, var(--brand-sky) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.text-gradient-navy {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-royal) 60%, var(--brand-electric) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── 5. LAYOUT UTILITIES ──────────────────────────────────────────────────── */
.container { max-width: 1280px; margin-left: auto; margin-right: auto; }
.section-padding {
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
}
.section-padding-sm {
  padding-top: var(--section-y-sm) !important;
  padding-bottom: var(--section-y-sm) !important;
}

/* ─── 6. NAVBAR ────────────────────────────────────────────────────────────── */
.navbar {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--border-card) !important;
  box-shadow: 0 1px 0 rgba(10,22,40,0.04) !important;
  transition: all var(--dur-slow) var(--ease-smooth) !important;
}

.navbar-scrolled {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: var(--shadow-sm) !important;
}

.nav-link {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
  padding-bottom: 2px !important;
  transition: color var(--dur-base) var(--ease-smooth) !important;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-electric), var(--brand-sky));
  border-radius: 2px;
  transition: width var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--brand-electric) !important; }
.nav-link:hover::after { width: 100%; }

/* Logo in nav — crisp with multiply blend mode for white background */
.navbar .logo img {
  height: 2.75rem !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}

/* Dropdown */
.glass-effect-strong {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ─── 7. BUTTON SYSTEM ─────────────────────────────────────────────────────── */
.btn-enterprise {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  background: var(--brand-electric) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  padding: 0.875rem 2rem !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  box-shadow: var(--shadow-btn) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.btn-enterprise::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-smooth);
}
.btn-enterprise:hover {
  background: var(--brand-royal) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,0.40) !important;
  color: #FFFFFF !important;
}
.btn-enterprise:hover::before { opacity: 1; }
.btn-enterprise:active { transform: translateY(0px) !important; }

.btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--brand-electric) !important;
  background: transparent !important;
  border: 1.5px solid var(--border-blue) !important;
  border-radius: var(--r-lg) !important;
  padding: 0.875rem 2rem !important;
  cursor: pointer !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.btn-outline:hover {
  background: var(--surface-blue-tint) !important;
  border-color: var(--brand-electric) !important;
  transform: translateY(-1px) !important;
  color: var(--brand-royal) !important;
}

.btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--brand-electric) !important;
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0 !important;
  cursor: pointer !important;
  transition: all var(--dur-base) var(--ease-smooth) !important;
  text-decoration: none !important;
}
.btn-ghost:hover { color: var(--brand-royal) !important; gap: 0.75rem !important; }

/* Ripple effect */
.btn-enterprise .ripple, .btn-outline .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ─── 8. BADGE SYSTEM ──────────────────────────────────────────────────────── */
.badge-premium {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--brand-electric) !important;
  background: var(--surface-blue-tint) !important;
  border: 1px solid rgba(37,99,235,0.15) !important;
  border-radius: var(--r-full) !important;
  padding: 0.375rem 1rem !important;
}

.badge-navy {
  color: var(--brand-navy) !important;
  background: var(--surface-muted) !important;
  border-color: var(--border-soft) !important;
}

.badge-sky {
  color: #0369A1 !important;
  background: #F0F9FF !important;
  border-color: rgba(56,189,248,0.20) !important;
}

/* ─── 9. CARD SYSTEM ───────────────────────────────────────────────────────── */
.card-premium {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--r-xl) !important;
  padding: 2.5rem !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
  box-shadow: var(--shadow-card) !important;
}
.card-premium:hover {
  border-color: var(--border-blue) !important;
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-4px) !important;
}

.glass-card-premium {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  border-radius: var(--r-xl) !important;
  padding: 2.5rem !important;
  box-shadow: var(--shadow-card) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
}
.glass-card-premium:hover {
  background: rgba(255,255,255,0.92) !important;
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-4px) !important;
}

.glass-effect {
  background: rgba(255,255,255,0.80) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--border-card) !important;
}

/* Service Cards */
.service-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--r-xl) !important;
  padding: 2rem !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
  box-shadow: var(--shadow-xs) !important;
  position: relative !important;
  overflow: hidden !important;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-electric), var(--brand-sky));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-smooth);
}
.service-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-6px) !important;
  border-color: var(--border-blue) !important;
}
.service-card:hover::before { opacity: 1; }

/* Tech Card */
.tech-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--r-lg) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
  box-shadow: var(--shadow-xs) !important;
}
.tech-card:hover {
  border-color: var(--border-blue) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Blog Card */
.blog-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
  box-shadow: var(--shadow-xs) !important;
}
.blog-card:hover {
  border-color: var(--border-blue) !important;
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.blog-card img { transition: transform 0.6s var(--ease-out) !important; }
.blog-card:hover img { transform: scale(1.05) !important; }

/* Portfolio/Project Cards */
.portfolio-item { display: block; }
.portfolio-item .card-premium { overflow: hidden !important; }
.portfolio-item .card-premium img { transition: transform 0.7s var(--ease-out) !important; }
.portfolio-item:hover .card-premium img { transform: scale(1.04) !important; }

/* Testimonial Card */
.testimonial-card {
  position: relative !important;
  overflow: hidden !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--r-xl) !important;
  padding: 2rem !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -1.5rem; left: 1.5rem;
  font-size: 8rem;
  line-height: 1;
  font-family: Georgia, serif;
  color: var(--brand-electric);
  opacity: 0.07;
  pointer-events: none;
}
.testimonial-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px) !important; }

/* ─── 10. HERO SYSTEM ──────────────────────────────────────────────────────── */
/* -- Hero text always visible, gradient blobs are decorative only -- */
.hero-title {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.hero-subtitle {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem) !important;
  line-height: 1.75 !important;
  color: var(--text-secondary) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.hero-badge, .hero-cta, .hero-stats, .hero-stats > * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Background orb blobs */
.section-decoration {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
  animation: pulse-orb 10s ease-in-out infinite !important;
  z-index: 0 !important;
}
@keyframes pulse-orb {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(1.08); }
}

/* Floating shapes */
.animate-float { animation: float-element 7s ease-in-out infinite !important; }
@keyframes float-element {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

/* Dot grid background */
.dot-grid-bg {
  background-image: radial-gradient(circle, rgba(37,99,235,0.12) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* ─── 11. SECTION BACKGROUNDS ─────────────────────────────────────────────── */
/* Alternating light sections */
.bg-section-alt { background: var(--surface-subtle) !important; }
.bg-section-blue { background: var(--surface-blue-tint) !important; }
.bg-section-muted { background: var(--surface-muted) !important; }

/* CTA Section */
.cta-section-gradient {
  background: linear-gradient(135deg, var(--surface-blue-tint) 0%, var(--surface-subtle) 50%, #F0F9FF 100%) !important;
}

/* Home-specific background */
.bg-home-variant {
  background: var(--surface-base) !important;
}

/* ─── 12. FORM SYSTEM ──────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="url"],
textarea, select {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  color: var(--text-primary) !important;
  background: var(--surface-base) !important;
  border: 1.5px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 0.875rem 1.125rem !important;
  width: 100% !important;
  transition: all var(--dur-base) var(--ease-smooth) !important;
  outline: none !important;
  box-shadow: inset 0 1px 3px rgba(10,22,40,0.03) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-light) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-electric) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.10) !important;
  background: var(--surface-base) !important;
}
label {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  display: block !important;
  margin-bottom: 0.375rem !important;
}

/* ─── 13. FAQ / ACCORDION ─────────────────────────────────────────────────── */
.faq-item {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--dur-base) var(--ease-smooth) !important;
}
.faq-item[open] {
  border-color: var(--border-blue) !important;
  box-shadow: var(--shadow-sm) !important;
}
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h4 {
  transition: color var(--dur-base) var(--ease-smooth) !important;
  color: var(--text-primary) !important;
}
.faq-item[open] summary h4,
.faq-item summary:hover h4 { color: var(--brand-electric) !important; }

/* ─── 14. TIMELINE ─────────────────────────────────────────────────────────── */
.enterprise-timeline {
  position: relative !important;
  padding-left: 3rem !important;
}
.enterprise-timeline::before {
  content: '';
  position: absolute;
  left: 0.75rem; top: 0.5rem; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-electric) 0%, rgba(37,99,235,0.1) 100%);
}
.enterprise-timeline-item {
  position: relative !important;
  margin-bottom: 3rem !important;
}
.enterprise-timeline-item::before {
  content: '';
  position: absolute;
  left: -2.4rem; top: 0.4rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface-base);
  border: 3px solid var(--brand-electric);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

/* ─── 15. PROGRESS BARS ────────────────────────────────────────────────────── */
.progress-bar-track {
  background: var(--surface-muted) !important;
  border-radius: var(--r-full) !important;
  height: 6px !important;
  overflow: hidden !important;
}
.progress-bar-fill {
  height: 100% !important;
  border-radius: var(--r-full) !important;
  background: linear-gradient(90deg, var(--brand-electric), var(--brand-sky)) !important;
}

/* ─── 16. STATS / COUNTER ─────────────────────────────────────────────────── */
.stat-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--r-xl) !important;
  padding: 2rem !important;
  text-align: center;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
}
.stat-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-4px) !important; }
.stat-number {
  font-family: var(--font-display) !important;
  font-size: var(--text-4xl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-electric) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
}

/* ─── 17. BLOG / CONTENT ──────────────────────────────────────────────────── */
.blog-magazine-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 1.75rem !important;
}

/* Tags / Chips */
.tag-chip {
  display: inline-block !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  color: var(--brand-electric) !important;
  background: var(--surface-blue-tint) !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: var(--r-full) !important;
  padding: 0.25rem 0.75rem !important;
  transition: all var(--dur-base) var(--ease-smooth) !important;
  text-decoration: none !important;
}
.tag-chip:hover {
  background: var(--brand-electric) !important;
  color: #fff !important;
  border-color: var(--brand-electric) !important;
}

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.breadcrumb a { font-size: var(--text-sm) !important; color: var(--text-muted) !important; }
.breadcrumb a:hover { color: var(--brand-electric) !important; }
.breadcrumb span { color: var(--text-light) !important; font-size: var(--text-sm) !important; }

/* ─── 18. ICON CONTAINERS ──────────────────────────────────────────────────── */
.icon-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  height: 3rem !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface-blue-tint) !important;
  color: var(--brand-electric) !important;
  flex-shrink: 0 !important;
  transition: all var(--dur-base) var(--ease-smooth) !important;
}
.icon-box-lg {
  width: 4rem !important;
  height: 4rem !important;
  border-radius: var(--r-xl) !important;
}
.card-premium:hover .icon-box,
.service-card:hover .icon-box {
  background: var(--brand-electric) !important;
  color: #fff !important;
}

/* ─── 19. SCROLL ANIMATIONS (initial states) ──────────────────────────────── */
.animate-on-scroll {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out) !important;
}
.animate-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.stagger-children > * {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out) !important;
}
.stagger-children.is-visible > *:nth-child(1) { opacity:1 !important; transform:none !important; transition-delay:0ms !important; }
.stagger-children.is-visible > *:nth-child(2) { opacity:1 !important; transform:none !important; transition-delay:80ms !important; }
.stagger-children.is-visible > *:nth-child(3) { opacity:1 !important; transform:none !important; transition-delay:160ms !important; }
.stagger-children.is-visible > *:nth-child(4) { opacity:1 !important; transform:none !important; transition-delay:240ms !important; }
.stagger-children.is-visible > *:nth-child(5) { opacity:1 !important; transform:none !important; transition-delay:320ms !important; }
.stagger-children.is-visible > *:nth-child(6) { opacity:1 !important; transform:none !important; transition-delay:400ms !important; }
.stagger-children.is-visible > *:nth-child(n+7) { opacity:1 !important; transform:none !important; transition-delay:480ms !important; }

/* ─── 20. SCROLL PROGRESS BAR ─────────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-electric), var(--brand-sky));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ─── 21. 404 PAGE ─────────────────────────────────────────────────────────── */
.error-page-hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--surface-blue-tint) 0%, var(--surface-base) 70%) !important;
}
.error-code {
  font-family: var(--font-display) !important;
  font-size: clamp(6rem, 20vw, 14rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-electric) 50%, var(--brand-sky) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── 22. POLICY PAGES ─────────────────────────────────────────────────────── */
.policy-content h2 {
  font-size: var(--text-2xl) !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
  color: var(--text-primary) !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid var(--surface-muted) !important;
}
.policy-content h3 {
  font-size: var(--text-xl) !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
}
.policy-content p { margin-bottom: 1.25rem !important; }
.policy-content ul { padding-left: 1.5rem !important; margin-bottom: 1.25rem !important; }
.policy-content li { margin-bottom: 0.5rem !important; color: var(--text-secondary) !important; }

/* ─── 23. SCROLLBAR ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--surface-subtle); }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
::selection { background: rgba(37,99,235,0.18); color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--brand-electric); outline-offset: 3px; border-radius: var(--r-sm); }

/* ─── 24. RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card-premium, .glass-card-premium { padding: 1.5rem !important; border-radius: var(--r-lg) !important; }
  .btn-enterprise, .btn-outline { padding: 0.75rem 1.5rem !important; }
  .blog-magazine-grid { grid-template-columns: 1fr !important; }
  .section-padding { padding-top: clamp(3rem, 8vw, 5rem) !important; padding-bottom: clamp(3rem, 8vw, 5rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .animate-on-scroll, .stagger-children > * { opacity: 1 !important; transform: none !important; }
  .section-decoration { animation: none !important; }
}

/* ─── 25. SHADOW-PREMIUM UTILITY ───────────────────────────────────────────── */
.shadow-premium { box-shadow: var(--shadow-md) !important; }
.shadow-sm      { box-shadow: var(--shadow-sm) !important; }