/* ==========================================================================
   BULLETPROOF ABSOLUTE HIDE FOR UNOPENED MOBILE DRAWER
   ========================================================================== */
.mobile-nav-drawer:not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transform: translateX(100%) !important;
}

/* ==========================================================================
   MALIK AXIOM TECHNOLOGY - Official Brand Design System
   Dual Theme Architecture: Pitch Obsidian Dark & Crisp Porcelain Light
   Custom Glowing Magnetic Cursor & Responsive Floating Hero Capability Pills
   Exact Standalone Emblem Logo (justlogo.png) + Premium Typography Treatment
   Multi-Device Responsive Breakpoint Architecture (1920px -> 320px)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&family=Sora:wght@600;700;800&family=Fira+Code:wght@400;500;600&display=swap');

:root {
  /* Default Dark Palette */
  --bg-dark: #04050a;
  --bg-surface: #090a12;
  --bg-card: rgba(13, 16, 28, 0.78);
  --bg-card-hover: rgba(20, 26, 46, 0.92);
  --glass-bg: rgba(6, 8, 15, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(0, 140, 255, 0.2);

  /* Primary Brand Accents */
  --accent-blue: #0077ff;
  --accent-blue-light: #0077ff;
  --accent-blue-glow: rgba(0, 119, 255, 0.2);
  --accent-azure: #38bdf8;
  --accent-white: #ffffff;
  --accent-green: #25d366;

  /* Typography & Neutral Colors */
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --logo-stroke: #ffffff;

  --font-heading: 'Space Grotesk', 'Syne', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-code: 'Fira Code', monospace;

  --container-max: 1440px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --tr-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Deliberately Designed Corporate SaaS Light Theme Variables (Soft Porcelain White - Eye Friendly) */
[data-theme="light"] {
  --bg-dark: #ffffff;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --glass-bg: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(10, 30, 60, 0.1);
  --glass-border-hover: rgba(0, 102, 255, 0.2);

  --accent-blue: #0066ff;
  --accent-blue-light: #0066ff;
  --accent-blue-glow: rgba(0, 102, 255, 0.2);
  --accent-azure: #0066ff;
  --accent-white: #0f172a;
  --accent-green: #16a34a;

  --text-main: #0f172a;
  --text-muted: #334155;
  --text-dim: #64748b;
  --border-subtle: rgba(10, 30, 60, 0.1);
  --logo-stroke: #0066ff;
}

/* Base Reset & Globals */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark light;
}

/* Global Fixed Header Scroll Margin Offset & Accessible Focus */
section[id],
#services,
#work,
#whyus,
#why-malikaxiom,
#testimonials,
#process,
#founders,
#faq,
#tech,
#impactSection,
#built-for-real-world,
#final-cta {
  scroll-margin-top: 100px;
}

section[tabindex="-1"]:focus {
  outline: none;
}

/* ==========================================================================
   GLOBAL CUSTOM SCROLLBAR (Dark + Electric Blue Identity)
   ========================================================================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #04050a;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 140, 255, 0.2);
  border-radius: 9999px;
  border: 2px solid #04050a;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #008cff;
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: #ffffff;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 10, 0.2);
  border: 2px solid #ffffff;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #0066ff;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--tr-smooth), color var(--tr-smooth);
}









/* Custom Scrollbar */
::-webkit-scrollbar {
  height: 8px;
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 140, 255, 0.2);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

/* Scroll Progress Line */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: #0077ff;
  width: 0%;
  z-index: 100000;
  box-shadow: 0 0 10px #0077ff, 0 0 5px rgba(0, 119, 255, 0.8);
  transition: width 0.08s linear;
  pointer-events: none;
}

/* Background Node Canvas */
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Utility Containers */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.text-center { text-align: center; }

/* Animated Gradient Title Text */
.text-gradient-blue {
  background: linear-gradient(135deg, var(--text-main) 30%, var(--accent-blue-light) 70%, var(--accent-azure) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineGradient 6s ease infinite;
}

@keyframes shineGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.accent-dot {
  color: var(--accent-blue);
  text-shadow: 0 0 16px var(--accent-blue-glow);
}

/* ==========================================================================
   PREMIUM BRAND IDENTITY (EXACT STANDALONE EMBLEM + TYPOGRAPHY TREATMENT)
   ========================================================================== */
.logo-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
  transition: transform var(--tr-smooth);
}


/* Logo Brand Hover (Preserve Colors) */
.logo-brand {
  transition: transform var(--tr-smooth);
}

.logo-brand:hover {
  transform: scale(1.02);
}


.brand-emblem-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0, 140, 255, 0.2));
  transition: transform var(--tr-smooth);
}

.dark-emblem {
  display: block;
}

.light-emblem {
  display: none;
}

[data-theme="light"] .dark-emblem {
  display: none !important;
}

[data-theme="light"] .light-emblem {
  display: block !important;
}

[data-theme="light"] .logo-title {
  color: #0f172a;
}

.logo-text-block {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
}

.logo-title {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.logo-sub {
  font-family: var(--font-heading);
  font-size: 0.54rem;
  font-weight: 700;
  color: #0066ff !important;
  letter-spacing: 2.2px;
  margin-top: 2px;
  white-space: nowrap;
}

/* Theme Toggle Pill Button */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px var(--accent-blue-glow);
  transform: rotate(20deg);
}


/* Buttons & Secondary Action Links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--tr-smooth);
  border: 1px solid transparent;
  outline: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* 1. Primary CTA: Start Project (Gradient Blue to Indigo + Hover Brightness) */
.btn-primary {
  background: #0066ff;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.2);
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 44px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.2);
  filter: brightness(1.16);
}

/* 2. Nav Link Animated Underline & Transition */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  display: none !important;
}

/* ==========================================================================
   DESKTOP FLOATING SERVICES DROPDOWN MENU & MOBILE ACCORDION
   ========================================================================== */
.nav-item-dropdown {
  position: relative;
}

.nav-link-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.nav-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--accent-blue-light);
}

/* Open State Chevron Rotation */
.nav-item-dropdown:hover .nav-chevron,
.nav-item-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
  color: #38bdf8;
}

/* Floating Dropdown Menu Container (640px 2-Column Grid) */
.nav-services-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  width: 640px;
  background: rgba(8, 10, 18, 0.96);
  border: 1px solid rgba(0, 140, 255, 0.2);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 140, 255, 0.2);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s ease;
  z-index: 1000;
}

[data-theme="light"] .nav-services-dropdown {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.1);
  box-shadow: 0 20px 50px rgba(10, 10, 10, 0.1);
}

/* Open State */
.nav-item-dropdown:hover .nav-services-dropdown,
.nav-item-dropdown.is-open .nav-services-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.dropdown-inner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Single Dropdown Service Item Link */
.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-main);
  background: transparent;
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-item:hover {
  background: rgba(0, 140, 255, 0.2);
}

[data-theme="light"] .dropdown-item:hover {
  background: rgba(0, 102, 255, 0.2);
}

.dropdown-item-num {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 10px;
  transition: color 0.25s ease;
}

[data-theme="light"] .dropdown-item-num {
  color: rgba(10, 10, 10, 0.4);
}

.dropdown-item:hover .dropdown-item-num {
  color: var(--accent-blue-light);
}

.dropdown-item-body {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.dropdown-item-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  transition: color 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-item:hover .dropdown-item-title {
  color: #0066ff !important;
}

/* Small Subtle CORE Badge */
.dropdown-core-badge {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: #0066ff !important;
  line-height: 1;
}

.dropdown-item-arrow {
  font-size: 0.95rem;
  color: #0066ff !important;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-item:hover .dropdown-item-arrow {
  opacity: 1;
  color: #0066ff !important;
  transform: translateX(4px);
}

/* MOBILE SERVICES ACCORDION */
.mobile-nav-item-accordion {
  width: 100%;
}

.mobile-nav-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-accordion-icon {
  font-size: 1.2rem;
  color: var(--accent-blue-light);
  transition: transform 0.3s ease;
}

.mobile-nav-accordion-btn.is-active .mobile-accordion-icon {
  transform: rotate(45deg);
}

.mobile-accordion-submenu {
  display: none;
  list-style: none;
  padding: 8px 0 12px 12px;
  margin: 0;
  flex-direction: column;
  gap: 10px;
}

.mobile-accordion-submenu.is-open {
  display: flex;
}

.mobile-accordion-submenu li a {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  transition: color 0.25s ease;
}

[data-theme="light"] .mobile-accordion-submenu li a {
  color: rgba(10, 10, 10, 0.7);
}

.mobile-accordion-submenu li a .m-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--accent-blue-light);
}

.mobile-accordion-submenu li a:hover {
  color: #38bdf8;
}

/* 2. Vibrant WhatsApp CTA Button in Header & Hero */
.btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid rgba(37, 211, 102, 0.2);
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.2);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.btn-whatsapp:hover {
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.2), 0 0 20px rgba(37, 211, 102, 0.2);
  filter: brightness(1.15);
  transform: translateY(-2px);
  color: #ffffff;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  border-color: var(--glass-border);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 44px;
}

.btn-secondary:hover {
  background: rgba(0, 140, 255, 0.2);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  color: var(--text-main);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.86rem;
}

/* 3. Executive Professional Email Button in Header */
.nav-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.nav-email-btn svg {
  color: var(--accent-blue-light);
  transition: transform 0.3s ease, color 0.3s ease;
}

[data-theme="light"] .nav-email-btn {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(10, 30, 60, 0.14);
  color: #1e293b;
}

.nav-email-btn:hover {
  color: #ffffff;
  background: #0066ff;
  border-color: #0066ff;
  box-shadow: 0 4px 18px rgba(0, 102, 255, 0.2);
  transform: translateY(-1.5px);
}

.nav-email-btn:hover svg {
  transform: scale(1.15) rotate(-5deg);
  color: #ffffff;
}

[data-theme="light"] .nav-email-btn:hover {
  background: #0066ff;
  color: #ffffff;
  border-color: #0066ff;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .nav-email-btn:hover svg {
  color: #ffffff;
}

/* Header Navbar Layout */
.header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1420px;
  z-index: 1000;
  padding: 10px 24px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, top 0.2s ease, padding 0.2s ease;
}

/* On Scroll: Slightly More Opaque & Slightly Reduced Padding */
.header.scrolled {
  top: 10px;
  padding: 8px 22px;
  background: rgba(6, 8, 15, 0.92);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 25px var(--accent-blue-glow);
}

[data-theme="light"] .header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(10, 30, 60, 0.16);
  box-shadow: 0 20px 50px rgba(10, 30, 60, 0.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Nav Links */
.desktop-nav {
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  background: rgba(0, 0, 0, 0.03);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.84rem;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  transition: color 0.25s ease, background 0.25s ease;
  display: inline-block;
  white-space: nowrap;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.nav-link.active {
  color: #008cff;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  font-weight: 700;
  box-shadow: none;
}

/* Mobile Hamburger Toggle */
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.5rem;
  padding: 4px 8px;
  cursor: pointer;
}

/* Mobile Drawer Base & Hover Styling */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 360px;
  min-width: 200px;
  height: 100vh;
  background: var(--bg-surface);
  backdrop-filter: blur(25px);
  z-index: 2000;
  padding: clamp(20px, 4vw, 32px) clamp(14px, 3.5vw, 24px);
  display: none !important;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid var(--glass-border-hover);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mobile-nav-drawer.open {
  display: flex !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 8px;
}

.mobile-drawer-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.mobile-drawer-close:hover {
  background: rgba(0, 140, 255, 0.2);
  color: var(--text-main);
  border-color: var(--accent-blue);
  transform: rotate(90deg);
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-nav-link {
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 3.8vw, 1.1rem);
  font-weight: 600;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-link:hover, .mobile-nav-link:active, .mobile-nav-link.active {
  background: rgba(0, 140, 255, 0.2);
  border-color: rgba(0, 140, 255, 0.2);
  color: var(--accent-blue-light);
  padding-left: 18px;
  box-shadow: 0 4px 15px rgba(0, 140, 255, 0.2);
}

/* Mobile Drawer Footer Buttons (100% Fluid & Non-Overflowing) */
.mobile-drawer-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  width: 100%;
  box-sizing: border-box;
}

.drawer-btn {
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  padding: 10px 14px;
  box-sizing: border-box;
  overflow: hidden;
  gap: 8px;
}

.drawer-btn-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.74rem, 3.2vw, 0.86rem);
}

/* Hero Section (60% Title Viewport + 40% Video Carousel Peeking Fold) */
.hero {
  position: relative;
  min-height: auto;
  padding-top: clamp(120px, 12vh, 150px);
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  /* Layer 1: BASE — deep obsidian/navy foundation */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(4, 8, 20, 0.9) 0%, rgba(4, 5, 10, 1) 60%, #04050a 100%);
}

/* Readability protection zone — soft dark veil directly behind content */
.hero-read-zone {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 92%);
  height: 62%;
  background: radial-gradient(ellipse at center, rgba(4, 5, 10, 0.42) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .hero-read-zone {
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.1) 0%, transparent 72%);
}

/* Layer 4: GRID / TEXTURE — extremely subtle technical texture */
.hero .hero-grid-layer,
.hero-grid-layer {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 102, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 102, 255, 0.2) 1px, transparent 1px);
  background-size: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 96px);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* Layer 5: MOVEMENT via canvas (existing particle system, z-index 1) */

/* Readability: keep content above background layers */
.hero .container { position: relative; z-index: 2; }
.hero .hero-tag,
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-ctas { position: relative; z-index: 2; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: var(--accent-blue-light);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.hero-tag-pulse {
  width: 8px;
  height: 8px;
  background: var(--accent-blue);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-blue);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.electric-blue-text,
.sp-highlight {
  color: #0066ff !important;
  background: none !important;
  background-color: transparent !important;
  -webkit-text-fill-color: #0066ff !important;
  font-weight: 700 !important;
  display: inline-block !important;
  text-shadow: none !important;
  filter: none !important;
}

[data-theme="light"] .electric-blue-text,
[data-theme="light"] .sp-highlight {
  color: #0066ff !important;
  background: none !important;
  background-color: transparent !important;
  -webkit-text-fill-color: #0066ff !important;
  font-weight: 700 !important;
  display: inline-block !important;
  text-shadow: none !important;
  filter: none !important;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Easy DevTools Font Toggle System */
.hero-title[data-font="space-grotesk"], [data-font="space-grotesk"] { font-family: 'Space Grotesk', sans-serif; }
.hero-title[data-font="syne"], [data-font="syne"] { font-family: 'Syne', sans-serif; }
.hero-title[data-font="sora"], [data-font="sora"] { font-family: 'Sora', sans-serif; }
.hero-title[data-font="poppins"], [data-font="poppins"] { font-family: 'Poppins', sans-serif; }
.hero-title[data-font="general-sans"], [data-font="general-sans"], [data-font="clash"] { font-family: 'Plus Jakarta Sans', sans-serif; }
.hero-title[data-font="outfit"], [data-font="outfit"] { font-family: 'Outfit', sans-serif; }

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.76);
  max-width: 960px;
  margin-top: 24px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
  line-height: 1.55;
  position: relative;
  z-index: 2;
}

[data-theme="light"] .hero-subtitle {
  color: rgba(15, 23, 42, 0.72);
}

.desktop-subheading {
  display: block;
}

.mobile-subheading {
  display: none;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

/* Capability Badges Container (Non-overlapping & Responsive Flex Positioning) */
.hero-badges-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
}

.hero-badges-container .hero-capability-pill {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   FLOATING HERO CAPABILITY PILLS (INTELLIGENT RESPONSIVE BEHAVIOR)
   ========================================================================== */
.hero-title-wrapper {
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 20px 40px;
}

.hero-capability-pill {
  position: absolute;
  z-index: 15;
  padding: 11px 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 140, 255, 0.2);
  border-radius: var(--radius-full);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28), 0 0 25px var(--accent-blue-glow);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  will-change: transform;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.hero-capability-pill:hover {
  transform: scale(1.12) translateY(-6px) !important;
  border-color: var(--accent-blue-light);
  box-shadow: 0 22px 55px rgba(0, 140, 255, 0.2), 0 0 40px var(--accent-blue);
  background: rgba(0, 140, 255, 0.2);
}

[data-theme="light"] .hero-capability-pill {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 140, 255, 0.2);
  color: #0f172a;
  box-shadow: 0 14px 35px rgba(0, 140, 255, 0.2), 0 0 25px rgba(0, 140, 255, 0.2);
}

[data-theme="light"] .hero-capability-pill:hover {
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 20px 45px rgba(0, 140, 255, 0.2), 0 0 35px rgba(0, 140, 255, 0.2);
  background: rgba(255, 255, 255, 0.98);
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-blue-light);
  box-shadow: 0 0 12px var(--accent-blue-light);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* Ambient Coherent Floating Motion System for 6 Service Labels */
@keyframes calmFloatingMotion {
  0% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-7px) scale(1.015); }
  100% { transform: translateY(0px) scale(1); }
}

/* Hero Entrance Sequence with 3D Title Reveal */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes titleReveal3D {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96) rotateX(8deg);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0);
  }
}

.hero-entrance-1 { animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-entrance-2 { animation: titleReveal3D 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards; }
.hero-entrance-3 { animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards; }
.hero-entrance-4 { animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards; }

/* 2 Subtle Glass Pill Offsets (Full Left & Full Right Framing) */
.pill-pos-1 { top: 0%; left: -6%; animation: calmFloatingMotion 7.5s ease-in-out infinite; }
.pill-pos-2 { top: 0%; right: -6%; animation: calmFloatingMotion 7.5s ease-in-out infinite 1.2s; }

/* ==========================================================================
   GSAP CONTINUOUS SCROLL-SCRUBBED FULLSCREEN VIDEO SECTION (FLEX CENTERED)
   ========================================================================== */

/* Outer full-bleed flex container (always 100vw, flex centered) */
.fullscreen-video-outer {
  width: 100%;
  max-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0 52px 0;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 10;
  overflow: hidden;
}

/* Inner card (animates smoothly while staying 100% flex centered) */
.fullscreen-video-wrapper {
  position: relative;
  width: calc(100% - 80px);
  max-width: 1200px;
  height: 70vh;
  min-height: 480px;
  max-height: 780px;
  margin: 0 auto;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 35px rgba(0, 140, 255, 0.2);
  transform: scale(0.95);
  background: #04050a;
  box-sizing: border-box;
  will-change: width, height, max-width, border-radius, transform;
}

.video-expand-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #04050a;
}

.fullscreen-video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: #04050a;
  border-radius: inherit;
}

/* Gradient Overlay for Text Readability */
.video-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 5, 10, 0.35) 0%, rgba(4, 5, 10, 0.75) 100%);
  pointer-events: none;
  z-index: 2;
}

[data-theme="light"] .video-gradient-overlay {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.4) 100%);
}

/* Decorative Ring & Pulse Dot Fading Elements */
.video-decorative-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity 0.8s ease;
}

.video-dashed-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0, 140, 255, 0.2);
  animation: spinRing 40s linear infinite;
}

.ring-outer { width: 340px; height: 340px; }
.ring-inner { width: 220px; height: 220px; animation-direction: reverse; }

@keyframes spinRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Centered Overlay Title & Audio Toggle Button */
.video-content-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}

.video-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 140, 255, 0.2);
}

.video-overlay-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.video-overlay-subtitle {
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
  max-width: 680px;
}

.video-tech-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.tech-tag {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  backdrop-filter: blur(10px);
}

.showreel-overlay-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 5;
  padding: 10px 18px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-main);
}

/* ==========================================================================
   RESPONSIVE FULLSCREEN VIDEO SECTION MEDIA QUERIES (320px to 1920px)
   ========================================================================== */
@media (max-width: 1024px) {
  .video-overlay-title {
    font-size: clamp(1.3rem, 3.8vw, 1.9rem);
  }

  .video-overlay-subtitle {
    font-size: 0.92rem;
    max-width: 620px;
  }
}

@media (max-width: 768px) {
  .fullscreen-video-wrapper {
    width: calc(100% - 32px);
    height: 50vh;
    min-height: 320px;
    border-radius: 16px;
  }

  .video-content-overlay {
    padding: 16px 12px;
  }

  .video-pill-badge {
    font-size: 0.68rem;
    padding: 4px 12px;
    margin-bottom: 8px;
  }

  .video-overlay-title {
    font-size: clamp(1.05rem, 4.5vw, 1.45rem);
    letter-spacing: 0.8px;
    margin-bottom: 6px;
  }

  .video-overlay-subtitle {
    font-size: clamp(0.74rem, 3vw, 0.84rem);
    margin-bottom: 12px;
    line-height: 1.35;
    max-width: 92%;
  }

  .video-tech-pills {
    gap: 6px;
    margin-bottom: 8px;
  }

  .tech-tag {
    padding: 3px 10px;
    font-size: 0.72rem;
  }

  .ring-outer { width: 200px; height: 200px; }
  .ring-inner { width: 130px; height: 130px; }

  .showreel-overlay-badge {
    bottom: 14px;
    left: 14px;
    padding: 6px 12px;
    font-size: 0.75rem;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .fullscreen-video-wrapper {
    width: calc(100% - 20px);
    height: 46vh;
    min-height: 280px;
    border-radius: 14px;
  }

  .video-content-overlay {
    padding: 14px 10px;
  }

  .video-pill-badge {
    font-size: 0.62rem;
    padding: 3px 10px;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
  }

  .video-overlay-title {
    font-size: clamp(0.92rem, 4.5vw, 1.22rem);
    letter-spacing: 0.4px;
    margin-bottom: 4px;
  }

  .video-overlay-subtitle {
    font-size: 0.72rem;
    line-height: 1.3;
    max-width: 98%;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .video-tech-pills {
    gap: 4px;
  }

  .tech-tag {
    padding: 2px 8px;
    font-size: 0.68rem;
  }

  .showreel-overlay-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
    padding: 4px 10px;
    font-size: 0.7rem;
    gap: 6px;
    background: rgba(6, 8, 15, 0.92);
  }
}

.badge-live-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-blue-light);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-blue-light);
}

/* Live Terminal Code Sandbox Widget */
.terminal-widget {
  background: rgba(4, 6, 15, 0.95);
  border: 1px solid rgba(0, 140, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.82rem;
  color: #38bdf8;
  max-width: 820px;
  margin: 22px auto 0 auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 140, 255, 0.2);
  text-align: left;
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 5;
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terminal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.terminal-title {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-left: 6px;
  font-family: monospace;
}

.terminal-status-badge {
  margin-left: auto;
  color: #25d366;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.terminal-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.term-line {
  margin: 0;
  line-height: 1.6;
}

.term-prompt {
  color: #25d366;
  font-weight: 600;
}

.term-info {
  color: #008cff;
  font-weight: 600;
}

.term-tree {
  color: rgba(255, 255, 255, 0.45);
}

.term-val {
  color: #ffffff;
}

.term-ai {
  color: #00e5ff;
  font-weight: 600;
}

.term-success {
  color: #25d366;
}

.term-success-bold {
  color: #25d366;
  font-weight: 700;
}

.term-live {
  color: #00ff88;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* ==========================================================================
   IMPACT & METRICS SECTION (INTERNATIONAL TECH + BUSINESS GROWTH)
   ========================================================================== */
.metrics-section {
  position: relative;
  padding: 92px 0;
  background: var(--bg-dark);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

.metrics-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}

/* LEFT COLUMN: Eyebrow, Headline, Description & CTA */
.metrics-content-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.metrics-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  color: var(--accent-blue-light);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-blue-light);
  box-shadow: 0 0 8px var(--accent-blue-light);
}

.metrics-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 0;
  padding-left: 20px;
  border-left: 3px solid rgba(0, 140, 255, 0.2);
  margin-left: 4px;
}

.metrics-attribution {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
  margin-bottom: 24px;
  padding-left: 23px;
  letter-spacing: 0.2px;
}

[data-theme="light"] .metrics-section {
  background: #f8fafc;
  border-top-color: rgba(10, 30, 60, 0.08);
  border-bottom-color: rgba(10, 30, 60, 0.08);
}

[data-theme="light"] .metrics-attribution {
  color: rgba(71, 85, 105, 0.7);
}

.metrics-description {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 32px;
  max-width: 580px;
}

[data-theme="light"] .metrics-description {
  color: rgba(71, 85, 105, 0.85);
}

.metrics-cta-wrapper {
  margin-top: 4px;
}

.metrics-cta-btn {
  padding: 12px 28px;
  font-size: 0.92rem;
}

/* RIGHT COLUMN: 2x2 Statistics Grid */
.metrics-grid-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.metric-card-v3 {
  background: rgba(13, 16, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  text-align: left;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .metric-card-v3 {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.1);
  box-shadow: 0 10px 30px rgba(10, 30, 60, 0.05);
}

.metric-card-v3:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 14px 35px rgba(0, 140, 255, 0.2), 0 0 20px rgba(0, 140, 255, 0.2);
  background: rgba(20, 26, 46, 0.8);
}

[data-theme="light"] .metric-card-v3:hover {
  background: #ffffff;
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 14px 35px rgba(0, 102, 255, 0.2);
}

.metric-number-wrapper {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
  font-family: var(--font-heading);
}

.metric-num-val, .metric-text-val {
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text-main);
  letter-spacing: -0.02em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.metric-card-v3:hover .metric-num-val,
.metric-card-v3:hover .metric-text-val {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(0, 140, 255, 0.2);
}

[data-theme="light"] .metric-card-v3:hover .metric-num-val,
[data-theme="light"] .metric-card-v3:hover .metric-text-val {
  color: #0066ff;
  text-shadow: 0 0 12px rgba(0, 102, 255, 0.2);
}

.metric-unit {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--accent-blue-light);
  margin-left: 2px;
}

.metric-card-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

[data-theme="light"] .metric-card-label {
  color: rgba(71, 85, 105, 0.8);
}

/* Scroll Reveal Base Classes */
.metrics-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.metrics-section.is-revealed .metrics-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Respect Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .metrics-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .metric-card-v3 {
    transition: none !important;
  }
  .metric-card-v3:hover {
    transform: none !important;
  }
}

.metrics-attribution {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
  margin-bottom: 24px;
  padding-left: 23px;
  letter-spacing: 0.2px;
}

[data-theme="light"] .metrics-section {
  background: #f8fafc;
  border-top-color: rgba(10, 30, 60, 0.08);
  border-bottom-color: rgba(10, 30, 60, 0.08);
}

[data-theme="light"] .metrics-attribution {
  color: rgba(71, 85, 105, 0.7);
}

.metrics-description {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 32px;
  max-width: 580px;
}

[data-theme="light"] .metrics-description {
  color: rgba(71, 85, 105, 0.85);
}

.metrics-cta-wrapper {
  margin-top: 4px;
}

.metrics-cta-btn {
  padding: 12px 28px;
  font-size: 0.92rem;
}

/* RIGHT COLUMN: 2x2 Statistics Grid */
.metrics-grid-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.metric-card-v3 {
  background: rgba(13, 16, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  text-align: left;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .metric-card-v3 {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.1);
  box-shadow: 0 10px 30px rgba(10, 30, 60, 0.05);
}

.metric-card-v3:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 14px 35px rgba(0, 140, 255, 0.2), 0 0 20px rgba(0, 140, 255, 0.2);
  background: rgba(20, 26, 46, 0.8);
}

[data-theme="light"] .metric-card-v3:hover {
  background: #ffffff;
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 14px 35px rgba(0, 102, 255, 0.2);
}

.metric-number-wrapper {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
  font-family: var(--font-heading);
}

.metric-num-val, .metric-text-val {
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text-main);
  letter-spacing: -0.02em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.metric-card-v3:hover .metric-num-val,
.metric-card-v3:hover .metric-text-val {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(0, 140, 255, 0.2);
}

[data-theme="light"] .metric-card-v3:hover .metric-num-val,
[data-theme="light"] .metric-card-v3:hover .metric-text-val {
  color: #0066ff;
  text-shadow: 0 0 12px rgba(0, 102, 255, 0.2);
}

.metric-unit {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--accent-blue-light);
  margin-left: 2px;
}

.metric-card-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

[data-theme="light"] .metric-card-label {
  color: rgba(71, 85, 105, 0.8);
}

/* Scroll Reveal Base Classes */
.metrics-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.metrics-section.is-revealed .metrics-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Respect Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .metrics-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .metric-card-v3 {
    transition: none !important;
  }
  .metric-card-v3:hover {
    transform: none !important;
  }
}

/* RESPONSIVE LAYOUT MEDIA QUERIES FOR METRICS SECTION */
@media (max-width: 992px) {
  .metrics-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .metrics-content-left {
    max-width: 100%;
  }

  .metrics-description {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .metrics-section {
    padding: 70px 0;
  }

  .metrics-grid-right {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .metric-card-v3 {
    padding: 20px 16px;
  }

  .metric-num-val, .metric-text-val {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }

  .metric-unit {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  .metric-card-label {
    font-size: 0.8rem;
  }
}

@media (max-width: 380px) {
  .metrics-grid-right {
    grid-template-columns: 1fr;
  }
}

.metric-label {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Section Styling */
.section {
  padding: 110px 0;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 24px;
}

.section-subtitle {
  color: var(--accent-blue);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-main);
}

/* ==========================================================================
   SERVICES SECTION V3 (STACKED ROW EXPERIENCE WITH ABSTRACT VISUALS)
   ========================================================================== */
.services-section-v3 {
  position: relative;
  padding: 102px 0;
  background: var(--bg-dark);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 100px;
}

#services {
  scroll-margin-top: 100px;
}

/* Contained Container for Services Section (1220px Centered) */
.services-container-v3 {
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .services-container-v3 {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.services-header-v3 {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 56px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.services-eyebrow-v3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: #0066ff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

/* Scoped override: services section eyebrow uses #0066FF */
#services .services-eyebrow-v3 {
  background: transparent !important;
  border: 1px solid rgba(0, 102, 255, 0.2) !important;
  color: #0066ff !important;
}
#services .services-eyebrow-v3 .eyebrow-dot {
  background: #0066ff !important;
  box-shadow: 0 0 8px #0066ff !important;
}

.services-title-v3 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 20px;
}

.services-subheading-v3 {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 28px;
  max-width: 760px;
}

[data-theme="light"] .services-subheading-v3 {
  color: rgba(71, 85, 105, 0.75);
}

.services-cta-header {
  margin-top: 4px;
}

/* Service Rows List (Stacked Line-Based Interactive Directory) */
.services-list-v3 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-row-v3 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 38px 12px;
  text-decoration: none;
  color: var(--text-main);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}

/* Left accent bar on hover */
/* Simple hover: subtle background tint only */
[data-theme="light"] .service-row-v3 {
  border-bottom: 1px solid rgba(10, 30, 60, 0.1);
}

/* Flagship Treatment for Services 01-03 */
.service-row-v3.is-flagship {
  padding: 46px 12px;
}

/* Hover Interactions (Clean Enterprise Corporate Standard — No Blue Background Fill) */
.service-row-v3:hover {
  background: transparent !important;
}

[data-theme="light"] .service-row-v3:hover {
  background: transparent !important;
}

/* LEFT AREA (~60%) */
.service-row-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.service-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.service-number {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

[data-theme="light"] .service-number {
  color: rgba(71, 85, 105, 0.6);
}

.service-row-v3:hover .service-number {
  color: #0066ff;
}

[data-theme="light"] .service-row-v3:hover .service-number {
  color: #0066ff;
}

.flagship-badge {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: #4d9fff;
}

.service-title-wrap {
  position: relative;
  margin-bottom: 12px;
}

.service-title-text {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  transition: color 0.3s ease;
}

.service-row-v3.is-flagship .service-title-text {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  font-weight: 700;
}

.service-row-v3:hover .service-title-text {
  color: #0066ff;
}

[data-theme="light"] .service-row-v3:hover .service-title-text {
  color: #0066ff;
}

.service-desc-text {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px;
  max-width: 580px;
}

[data-theme="light"] .service-desc-text {
  color: rgba(71, 85, 105, 0.75);
}

/* Arrow Button Hover Response */
.service-arrow-btn {
  font-size: 1.2rem;
  color: var(--accent-blue-light);
  opacity: 0.6;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.service-row-v3:hover .service-arrow-btn {
  opacity: 1;
  transform: translateX(5px);
}

/* RIGHT AREA (~40%) INTEGRATED VISUAL/MEDIA CONTAINER HOVER RESPONSE */
.service-row-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.service-visual-container {
  width: 100%;
  height: 140px;
  border-radius: 14px;
  background: rgba(4, 6, 15, 0.85);
  border: 1px solid rgba(0, 140, 255, 0.2);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.service-row-v3.is-flagship .service-visual-container {
  height: 160px;
}

.service-row-v3:hover .service-visual-container {
  transform: scale(1.02) translateY(-2px);
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.2);
}

/* Service video preview (Web Development row) */
.service-video-wrap {
  background: #000;
  padding: 0;
  pointer-events: none;
}
.service-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-row-v3:hover .service-video {
  transform: scale(1.03);
}
.service-video::-webkit-media-controls {
  display: none !important;
}
.service-video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Services Expandable Drawer & Smooth Phased Reveal */
.services-extra-collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-extra-collapsed.is-expanded {
  max-height: 3000px;
  opacity: 1;
}

/* Staggered Item Fade + Upward Reveal Inside Drawer */
.services-extra-collapsed .service-row-v3 {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--row-delay, 0ms),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--row-delay, 0ms),
              background 0.4s ease;
}

.services-extra-collapsed.is-expanded .service-row-v3 {
  opacity: 1;
  transform: translateY(0);
}

.services-expand-wrapper {
  margin-top: 50px;
}

.services-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 34px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.2);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.services-toggle-btn:hover {
  background: rgba(0, 102, 255, 0.2);
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 8px 30px rgba(0, 102, 255, 0.2);
  transform: translateY(-2px);
}

.services-toggle-btn .btn-icon {
  color: #0066ff;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.services-toggle-btn.is-expanded .btn-icon {
  transform: rotate(180deg);
}

/* SHOW LESS state — solid electric blue */
.services-toggle-btn.is-expanded {
  background: #0066ff;
  border-color: #0066ff;
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 102, 255, 0.2);
}
.services-toggle-btn.is-expanded:hover {
  background: #1a75ff;
  border-color: #1a75ff;
}
.services-toggle-btn.is-expanded .btn-icon { color: #ffffff; }

/* 10 ABSTRACT CSS GRAPHIC VISUALS (NO PURPLE, BLUE/CYAN TECH GEOMETRY) */
.service-visual-01 {
  background: radial-gradient(circle at center, rgba(0, 140, 255, 0.2) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.visual-element-browser {
  width: 80%;
  height: 70%;
  border: 1px solid rgba(0, 140, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 140, 255, 0.2);
  position: relative;
  padding: 8px;
}
.browser-bar {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}
.browser-bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 140, 255, 0.2);
}
.browser-grid-lines {
  height: 60%;
  background: linear-gradient(90deg, rgba(0, 140, 255, 0.2) 1px, transparent 1px),
              linear-gradient(0deg, rgba(0, 140, 255, 0.2) 1px, transparent 1px);
  background-size: 14px 14px;
}

.service-visual-02 {
  background: radial-gradient(circle at center, rgba(0, 119, 255, 0.2) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.visual-element-mobile {
  position: relative;
  width: 90px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-frame {
  width: 50px;
  height: 85px;
  border: 2px solid rgba(56, 189, 248, 0.6);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 140, 255, 0.2);
}

.service-visual-03 {
  background: radial-gradient(circle at center, rgba(0, 229, 255, 0.25) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.visual-element-ai {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.neural-core {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 25px #00e5ff;
}
.neural-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0, 229, 255, 0.4);
}
.neural-orbit.ring-1 { width: 55px; height: 55px; animation: spinRing 12s linear infinite; }
.neural-orbit.ring-2 { width: 85px; height: 85px; animation: spinRing 20s linear infinite reverse; }

.service-visual-04 {
  background: linear-gradient(135deg, rgba(0, 140, 255, 0.2), rgba(4, 6, 15, 0.95));
}
.visual-element-backend {
  width: 80%;
  height: 60%;
  border-left: 2px solid rgba(0, 140, 255, 0.2);
  border-bottom: 2px solid rgba(0, 140, 255, 0.2);
  position: relative;
}

.service-visual-05 {
  background: radial-gradient(circle at center, rgba(37, 211, 102, 0.2) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.visual-element-automation {
  display: flex;
  align-items: center;
  gap: 20px;
}
.workflow-node {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #25d366;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.2);
}
.workflow-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #25d366, #008cff);
}

.service-visual-06 {
  background: radial-gradient(circle at center, rgba(0, 140, 255, 0.2) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.commerce-card-shape {
  width: 70px;
  height: 45px;
  border-radius: 8px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
}

.service-visual-07 {
  background: radial-gradient(circle at center, rgba(0, 119, 255, 0.2) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.visual-element-seo {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 60px;
}
.chart-bar {
  width: 12px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #38bdf8, #008cff);
}
.chart-bar.bar-1 { height: 25px; }
.chart-bar.bar-2 { height: 40px; }
.chart-bar.bar-3 { height: 58px; box-shadow: 0 0 15px rgba(56, 189, 248, 0.5); }

.service-visual-08 {
  background: radial-gradient(circle at center, rgba(0, 229, 255, 0.2) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.prospect-network {
  display: flex;
  gap: 14px;
}
.prospect-network .node {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 12px #00e5ff;
}

.service-visual-09 {
  background: radial-gradient(circle at center, rgba(0, 140, 255, 0.2) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.visual-element-uiux {
  position: relative;
  width: 90px;
  height: 60px;
}
.ui-layer {
  position: absolute;
  width: 70px;
  height: 45px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ui-layer.layer-back { top: 0; left: 0; background: rgba(0, 140, 255, 0.2); }
.ui-layer.layer-front { top: 12px; left: 16px; background: rgba(0, 140, 255, 0.2); border-color: #38bdf8; box-shadow: 0 0 15px rgba(0, 140, 255, 0.2); }

.service-visual-10 {
  background: radial-gradient(circle at center, rgba(0, 255, 136, 0.2) 0%, rgba(4, 6, 15, 0.95) 75%);
}
.game-cube-3d {
  width: 40px;
  height: 40px;
  border: 2px solid #00ff88;
  transform: rotate(45deg);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

/* SCROLL REVEAL ANIMATIONS FOR SERVICES SECTION */
.services-header-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0ms,
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0ms;
}

.services-section-v3.is-revealed .services-header-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   PREMIUM DIRECTIONAL SCROLL REVEAL ANIMATIONS PER SERVICE ROW
   ========================================================================== */

/* 1. Divider Line (scaleX: 0 -> 1 from left: 0ms) */
.service-row-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0ms;
}

.service-row-v3.is-in-view .service-row-divider {
  transform: scaleX(1);
}

/* 2. Service Number (Enters from TOP: translateY(-20px) scale(0.95): 80ms) */
.service-row-v3 .service-meta {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 80ms,
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}

/* 3. Service Title (Enters from LEFT: translateX(-35px): 140ms) */
.service-row-v3 .service-title-wrap {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 140ms,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 140ms;
}

/* 4. Service Visual Container (Enters from RIGHT: translateX(45px) scale(0.96): 180ms) */
.service-row-v3 .service-visual-container {
  opacity: 0;
  transform: translateX(45px) scale(0.96);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 180ms,
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 180ms,
              box-shadow 0.4s ease, border-color 0.4s ease;
}

/* 5. Service Description (Enters slightly upward: translateY(15px): 220ms) */
.service-row-v3 .service-desc-text {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 220ms,
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 220ms;
}

/* 6. Service Arrow CTA (Enters from LEFT: translateX(-10px): 280ms) */
.service-row-v3 .service-arrow-btn {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 280ms,
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 280ms;
}

/* REVEAL ACTIVE STATE (When row enters viewport) */
.service-row-v3.is-in-view .service-meta {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-row-v3.is-in-view .service-title-wrap {
  opacity: 1;
  transform: translateX(0);
}

.service-row-v3.is-in-view .service-desc-text {
  opacity: 1;
  transform: translateY(0);
}

.service-row-v3.is-in-view .service-arrow-btn {
  opacity: 0.7;
  transform: translateX(0);
}

.service-row-v3.is-in-view .service-visual-container {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* HOVER INTERACTIONS AFTER REVEAL (INDEPENDENT) */
.service-row-v3.is-in-view:hover .service-arrow-btn {
  opacity: 1;
  transform: translateX(7px);
}

.service-row-v3.is-in-view:hover .service-visual-container {
  transform: scale(1.04);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 0 30px rgba(0, 140, 255, 0.2);
}

/* MOBILE REVEAL SIMPLIFICATION (< 768px: VERTICAL MOVEMENT ONLY TO PREVENT OVERFLOW) */
@media (max-width: 768px) {
  .service-row-v3 .service-meta {
    transform: translateY(-15px);
  }
  .service-row-v3 .service-title-wrap {
    transform: translateY(15px);
  }
  .service-row-v3 .service-desc-text {
    transform: translateY(12px);
  }
  .service-row-v3 .service-arrow-btn {
    transform: translateY(10px);
  }
  .service-row-v3 .service-visual-container {
    transform: translateY(20px) scale(0.98);
  }

  .service-row-v3.is-in-view .service-meta,
  .service-row-v3.is-in-view .service-title-wrap,
  .service-row-v3.is-in-view .service-desc-text,
  .service-row-v3.is-in-view .service-arrow-btn {
    transform: translateY(0);
  }
  .service-row-v3.is-in-view .service-visual-container {
    transform: translateY(0) scale(1);
  }
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .services-header-reveal,
  .service-row-v3 .service-meta,
  .service-row-v3 .service-title-wrap,
  .service-row-v3 .service-desc-text,
  .service-row-v3 .service-arrow-btn,
  .service-row-v3 .service-visual-container {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* RESPONSIVE MEDIA QUERIES FOR SERVICES SECTION */
@media (max-width: 992px) {
  .service-row-v3 {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 26px;
  }
  .service-row-v3.is-flagship {
    padding: 32px 28px;
  }
  .service-row-right {
    justify-content: flex-start;
  }
  .service-visual-container {
    height: 120px;
  }
  .service-row-v3.is-flagship .service-visual-container {
    height: 140px;
  }
}

@media (max-width: 576px) {
  .services-section-v3 {
    padding: 70px 0;
  }
  .services-header-v3 {
    margin-bottom: 40px;
  }
  .service-row-v3 {
    padding: 22px 18px;
    border-radius: var(--radius-md);
  }
  .service-row-v3.is-flagship {
    padding: 24px 20px;
  }
  .service-title-text {
    font-size: 1.25rem;
  }
  .service-row-v3.is-flagship .service-title-text {
    font-size: 1.35rem;
  }
  .service-visual-container {
    height: 100px;
  }
  .service-row-v3.is-flagship .service-visual-container {
    height: 110px;
  }
}

.service-card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: all var(--tr-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.service-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 140, 255, 0.2), transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card-v2:hover::before {
  opacity: 1;
}

.service-card-v2:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 119, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.service-card-num {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-blue);
  margin-bottom: 16px;
}

.service-card-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-main);
}

.service-card-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
  flex-grow: 1;
  line-height: 1.6;
}

.service-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.service-tag {
  padding: 4px 12px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.service-card-btn {
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.service-card-btn:hover {
  text-decoration: underline;
}

/* Enterprise Comparison Table */
.comparison-table-wrapper {
  overflow-x: auto;
  margin-top: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border-hover);
  background: var(--bg-card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}

.comparison-table th, .comparison-table td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.comparison-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  background: rgba(0, 140, 255, 0.2);
}

.comparison-table tr:hover td {
  background: rgba(0, 140, 255, 0.2);
}

.check-yes {
  color: #25d366;
  font-weight: 700;
}

.check-no {
  color: #ef4444;
}

/* ROI Savings Calculator Box */
.roi-box {
  background: linear-gradient(135deg, rgba(0, 140, 255, 0.2) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius-lg);
  padding: 48px;
  margin-top: 40px;
}

.roi-slider-group {
  margin: 20px 0;
  text-align: left;
}

.roi-slider {
  width: 100%;
  accent-color: var(--accent-blue);
}

/* Category Filter Tabs */
.filter-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--tr-fast);
  cursor: pointer;
}

.filter-tab:hover, .filter-tab.active {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
  font-weight: 600;
  box-shadow: 0 4px 15px var(--accent-blue-glow);
}

/* Carousel Section Styles */
.carousel-container {
  position: relative;
  width: 100%;
  margin-top: 36px;
  overflow: hidden;
  padding: 20px 0 40px 0;
}

.carousel-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 10px 4px 30px 4px;
  -webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 380px;
  scroll-snap-align: center;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease,
              box-shadow 0.5s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.carousel-slide:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 18px rgba(0, 140, 255, 0.2);
}

.carousel-nav-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.carousel-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1.2rem;
  cursor: pointer;
}

.carousel-arrow:hover {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(0, 140, 255, 0.2);
  transform: translateY(-2px);
}

/* Testimonials Slide Card */
.testimonial-slide-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  flex: 0 0 520px;
  scroll-snap-align: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease,
              box-shadow 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.testimonial-slide-card:hover {
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 140, 255, 0.2);
  transform: translateY(-4px);
}

.testimonial-stars {
  color: #f59e0b;
  font-size: 1.1rem;
  margin-bottom: 16px;
  display: flex;
  gap: 4px;
}

.testimonial-quote {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 28px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), #0033aa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  color: #ffffff;
  box-shadow: 0 0 15px var(--accent-blue-glow);
}

.author-info h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
}

.author-info p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Process Grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.process-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: all var(--tr-smooth);
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.process-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
}

.process-step-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent-blue);
  line-height: 1;
  margin-bottom: 12px;
}

.process-step-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
}

.process-step-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Agency Partnership Banner */
.agency-partner-banner {
  background: linear-gradient(135deg, rgba(0, 140, 255, 0.2) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  box-shadow: 0 20px 50px rgba(0, 140, 255, 0.2);
}

.agency-partner-text {
  max-width: 680px;
}

.agency-partner-text h3 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-main);
}

.agency-partner-text p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Founders / Team Section */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.team-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
  transition: all var(--tr-smooth);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.team-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-6px);
}

.team-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), #0033aa);
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 0 20px var(--accent-blue-glow);
}

.team-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-main);
}

.team-role {
  color: var(--accent-blue);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.team-bio {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.team-link {
  color: var(--accent-blue);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.team-link:hover {
  text-decoration: underline;
}

/* Tech Stack Grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.tech-item {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: all var(--tr-fast);
  box-shadow: 0 8px 24px rgba(0,0,0,0.03);
}

.tech-item:hover {
  transform: translateY(-6px) scale(1.05);
  border-color: var(--glass-border-hover);
  background: var(--bg-card-hover);
  box-shadow: 0 12px 30px var(--accent-blue-glow);
}

.tech-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* FAQ Accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
  margin: 40px auto 0 auto;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--tr-fast);
  box-shadow: 0 8px 24px rgba(0,0,0,0.03);
  cursor: pointer;
}

.faq-question {
  padding: 24px 28px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-main);
}

.faq-answer {
  padding: 0 28px 24px 28px;
  color: var(--text-muted);
  font-size: 0.95rem;
  display: none;
  line-height: 1.6;
}

.faq-item.active {
  border-color: var(--glass-border-hover);
}

.faq-item.active .faq-answer {
  display: block;
}

/* Project Estimator Widget */
.estimator-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.estimator-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 28px 0;
}

.estimator-opt {
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: all var(--tr-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--text-main);
  cursor: pointer;
}

.estimator-opt:hover, .estimator-opt.selected {
  background: rgba(0, 140, 255, 0.2);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  font-weight: 600;
}

.estimator-opt input {
  accent-color: var(--accent-blue);
}

.estimator-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 20px;
}

.estimator-total-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.estimator-total-val {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent-blue);
}

/* Modal Overlay & Smart Questionnaire */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 4, 8, 0.85);
  backdrop-filter: blur(14px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-smooth);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 640px;
  padding: 40px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform var(--tr-smooth);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-overlay.active .modal-container {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-main);
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--tr-fast);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px var(--accent-blue-glow);
}

/* Floating Interactive Assistant Chatbot Widget (Zero Backend Required) */
.floating-widget-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chat-widget-launcher {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.chat-widget-launcher:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 38px rgba(0, 102, 255, 0.2);
}

.launcher-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(0, 102, 255, 0.2);
  animation: launcherPulse 2.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
}

@keyframes launcherPulse {
  0% { transform: scale(0.95); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

.chat-widget-launcher .icon-chat { display: block; }
.chat-widget-launcher .icon-close { display: none; }

.chat-widget-launcher.is-active {
  background: #11162b;
  border-color: rgba(0, 102, 255, 0.2);
}

.chat-widget-launcher.is-active .icon-chat { display: none; }
.chat-widget-launcher.is-active .icon-close { display: block; }

/* Proactive Chat Teaser Bubble Attached to Launcher */
.chat-teaser-bubble {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 290px;
  max-width: calc(100vw - 48px);
  padding: 14px 16px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 0%, rgba(15, 23, 42, 0.98) 0%, rgba(6, 10, 24, 0.98) 100%);
  border: 1px solid rgba(0, 102, 255, 0.2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 102, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-heading);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0.35s ease;
  pointer-events: none;
}

.chat-teaser-bubble.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

.teaser-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.teaser-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.teaser-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 10px 0;
  font-weight: 500;
}

.teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.teaser-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.2);
}

@media (max-width: 768px) {
  .chat-teaser-bubble {
    width: 245px;
    bottom: 68px;
    padding: 12px 14px;
  }
  .teaser-text {
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .teaser-cta {
    font-size: 0.72rem;
    padding: 5px 12px;
  }
}

/* Chat Window Modal */
.chat-widget-window {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 335px;
  max-width: calc(100vw - 32px);
  height: 450px;
  max-height: calc(100vh - 90px);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0.98) 0%, rgba(6, 10, 24, 0.99) 100%);
  border: 1px solid rgba(0, 102, 255, 0.2);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 102, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.chat-widget-window.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.chat-header {
  padding: 12px 16px;
  background: rgba(0, 102, 255, 0.2);
  border-bottom: 1px solid rgba(0, 102, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-bot-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 35% 35%, #0066ff 0%, #0038a8 70%, #002277 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.06em;
  border: 1px solid rgba(0, 102, 255, 0.2);
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: avatarBreathingGlow 4s infinite ease-in-out;
  user-select: none;
}

@keyframes avatarBreathingGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 102, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(0, 102, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 18px rgba(0, 102, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(0, 102, 255, 0.2);
  }
}

.chat-bot-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.chat-status {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  animation: statusBlinkPulse 1.6s infinite ease-in-out;
}

@keyframes statusBlinkPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.85);
    box-shadow: 0 0 3px rgba(16, 185, 129, 0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.9);
  }
}

.chat-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.15rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.chat-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.chat-body {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
}

.chat-msg p { margin: 0; }

.bot-msg {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-top-left-radius: 4px;
}

.bot-msg a {
  color: #008cff;
  text-decoration: underline;
  font-weight: 600;
}

.user-msg {
  align-self: flex-end;
  background: #0066ff;
  color: #ffffff;
  border-radius: 12px 12px 2px 12px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .user-msg {
  background: #0066ff !important;
  color: #ffffff !important;
  border-radius: 12px 12px 2px 12px !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.2) !important;
}

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.chat-chips button {
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.chat-chips button:hover {
  background: rgba(0, 102, 255, 0.2);
  border-color: #0066ff;
}

.chat-footer {
  padding: 10px 12px;
  background: rgba(6, 10, 24, 0.95);
  border-top: 1px solid rgba(0, 102, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-footer input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  padding: 8px 14px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  outline: none;
  transition: border-color 0.25s ease;
}

.chat-footer input:focus {
  border-color: #0066ff;
}

.chat-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0066ff;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.chat-send-btn:hover {
  transform: scale(1.05);
  background: #0052cc;
}

/* Mobile Responsive Chatbot & Teaser Bubble */
@media (max-width: 600px) {
  .chat-widget-launcher {
    width: 44px !important;
    height: 44px !important;
  }
  .chat-widget-launcher svg {
    width: 18px !important;
    height: 18px !important;
  }
  .chat-teaser-bubble {
    width: min(220px, calc(100vw - 32px)) !important;
    bottom: 56px !important;
    right: 0 !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }
  .teaser-text {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }
  .teaser-cta {
    font-size: 0.64rem !important;
    padding: 3px 8px !important;
  }
  .teaser-close-btn {
    top: 6px !important;
    right: 6px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 0.8rem !important;
  }
  .chat-widget-window {
    width: min(285px, calc(100vw - 20px)) !important;
    height: min(375px, calc(100vh - 80px)) !important;
    bottom: 54px !important;
    right: 0 !important;
    border-radius: 16px !important;
  }
  .chat-header {
    padding: 8px 10px !important;
  }
  .chat-avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.65rem !important;
  }
  .chat-bot-name {
    font-size: 0.78rem !important;
  }
  .chat-status {
    font-size: 0.6rem !important;
  }
  .chat-close-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.9rem !important;
  }
  .chat-body {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .chat-msg {
    max-width: 90% !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    border-radius: 10px !important;
  }
  .chat-chips {
    gap: 3px !important;
  }
  .chat-chips button {
    font-size: 0.62rem !important;
    padding: 3px 7px !important;
  }
  .chat-footer {
    padding: 6px 8px !important;
    gap: 5px !important;
  }
  .chat-footer input {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
  }
  .chat-send-btn {
    width: 28px !important;
    height: 28px !important;
  }
  .chat-send-btn svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* Footer */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: 72px 0 32px 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.footer-col h4 {
  font-family: var(--font-heading);
  color: var(--text-main);
  font-size: 1rem;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--tr-fast);
}

.footer-links a:hover {
  color: var(--accent-blue);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 20px;
}

/* ==========================================================================
   CLEAN RESPONSIVE BREAKPOINT SYSTEM
   1022px+ = Desktop Composition (Locked Layout)
   1920px+ = Proportional 4K Expansion
   1021px- = Responsive Mode Begins
   ========================================================================== */

/* 1. 4K / Ultrawide Expansion (1920px and above) */
@media (min-width: 1920px) {
  .hero-title-wrapper {
    max-width: 1680px;
  }
  .pill-pos-1 { top: -2%; left: -10%; }
  .pill-pos-2 { top: -2%; right: -10%; }
  .pill-pos-3 { top: 34%; left: -6%; }
  .pill-pos-4 { top: 34%; right: -6%; }
  .pill-pos-5 { top: 62%; left: -10%; }
  .pill-pos-6 { top: 62%; right: -10%; }
}

/* 2. Responsive Laptop Navbar Adaptation (1399px to 1022px) */
@media (max-width: 1399px) and (min-width: 1022px) {
  .header {
    width: calc(100% - 24px);
    padding: 7px 14px;
  }
  .header-inner {
    gap: 10px;
  }
  .logo-brand {
    gap: 6px;
  }
  .brand-emblem-img {
    height: 28px;
  }
  .logo-title {
    font-size: 0.9rem;
  }
  .logo-sub {
    font-size: 0.44rem;
    letter-spacing: 1.6px;
  }
  .nav-links {
    gap: 1px;
  }
  .nav-link {
    padding: 5px 7px;
    font-size: 0.76rem;
  }
  .header-actions {
    gap: 6px;
  }
  .nav-email-btn, .nav-wa-desktop {
    display: inline-flex !important; /* Keep Email and WhatsApp buttons visible in laptop range */
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  .btn-sm {
    padding: 6px 12px;
    font-size: 0.78rem;
  }
}

/* 2b. Responsive Navbar for 1280px to 1080px screens */
@media (max-width: 1280px) and (min-width: 1080px) {
  .header {
    width: calc(100% - 16px);
    padding: 6px 12px;
    top: 8px;
  }
  .header-inner {
    gap: 6px;
  }
  .logo-brand {
    gap: 4px;
  }
  .brand-emblem-img {
    height: 24px;
  }
  .logo-title {
    font-size: 0.78rem;
    letter-spacing: 0.5px;
  }
  .logo-sub {
    font-size: 0.38rem;
    letter-spacing: 1.2px;
  }
  .nav-links {
    gap: 0;
    padding: 2px;
  }
  .nav-link {
    padding: 4px 5px;
    font-size: 0.68rem;
    letter-spacing: 0.2px;
  }
  .nav-link span {
    font-size: 0.68rem;
  }
  .nav-chevron {
    width: 10px;
    height: 10px;
  }
  .header-actions {
    gap: 4px;
  }
  .theme-toggle-btn {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
    padding: 4px;
  }
  .nav-email-btn {
    padding: 5px 8px;
    font-size: 0.7rem;
    gap: 4px;
  }
  .nav-email-btn svg {
    width: 13px;
    height: 13px;
  }
  .email-btn-text {
    display: none; /* Hide email text, show only icon */
  }
  .btn-nav-contact,
  .btn-nav-start {
    padding: 5px 10px;
    font-size: 0.7rem;
    height: 32px;
    min-height: 32px;
  }
  .btn-nav-contact span,
  .btn-nav-start span {
    font-size: 0.7rem;
  }
  .btn-sm {
    padding: 5px 10px;
    font-size: 0.7rem;
  }
}

/* 3. Responsive Mode Transition Threshold (Collapse Navbar below 1024px) */
@media (max-width: 1128px) {
  .header { width: calc(100% - 32px); top: 12px; padding: 10px 20px; }
  .desktop-nav { display: none !important; }
  .nav-mobile-toggle { display: block !important; }
  .email-btn-text { display: none; }
  
  .hero { padding-top: 130px; }
  .hero-title-wrapper {
    padding: 0;
    margin-bottom: 24px;
  }

  .services-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .agency-partner-banner { padding: 36px; }
}

/* 4. Tablets & Mobile Top Navbar & Subheading Optimization (768px and below) */
@media (max-width: 768px) {
  .header {
    width: calc(100% - 24px);
    top: 10px;
    padding: 8px 16px;
    border-radius: 9999px;
  }
  .header-inner {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .nav-email-btn,
  .nav-wa-desktop,
  .btn-nav-contact,
  .header-actions .btn-nav-contact {
    display: none !important;
  }
  .theme-toggle-btn {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .nav-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    padding: 0;
    width: 36px;
    height: 36px;
    line-height: 1;
    color: var(--text-main, #ffffff);
  }
  .desktop-subheading { display: none !important; }
  .mobile-subheading { display: block !important; }
  
  .hero-title {
    font-size: clamp(1.4rem, 5.2vw, 2.2rem);
    line-height: 1.18;
    letter-spacing: 0.3px;
    max-width: 95%;
    margin-bottom: 14px;
  }

  .hero-subtitle.mobile-subheading {
    font-size: clamp(0.82rem, 2.8vw, 0.98rem);
    line-height: 1.45;
    max-width: 94%;
    margin: 0 auto 20px auto;
  }
}

/* 5. Mobile Devices & Small Screens (576px and below) */
@media (max-width: 576px) {
  .header { width: calc(100% - 20px); top: 10px; padding: 8px 14px; }
  .header-actions { gap: 6px; }
  .brand-emblem-img { height: 26px; }
  .logo-title { font-size: 0.88rem; }
  .logo-sub { font-size: 0.44rem; letter-spacing: 1.6px; }
  .btn-sm { padding: 6px 12px; font-size: 0.78rem; min-height: 44px; }
  
  .hero { padding-top: 110px; padding-bottom: 30px; }
  .hero-ctas { flex-direction: column; width: 100%; gap: 12px; }
  .hero-ctas .btn { width: 100%; min-height: 46px; }

  .metrics-section { padding: 50px 0; }
  .metrics-statement { font-size: 1.2rem; }
  .metrics-grid { grid-template-columns: 1fr; gap: 16px; }
  .metric-card { padding: 20px 16px; }
  .metric-number { font-size: 2.2rem; }

  .section { padding: 50px 0; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }

  .estimator-result { flex-direction: column; align-items: flex-start; gap: 12px; }
  .estimator-total-val { font-size: 2rem; }

  .carousel-slide { flex: 0 0 280px; }
  .testimonial-slide-card { flex: 0 0 290px; padding: 20px; }
}

/* 6. Ultra-Compact Mobile Phones (100px to 465px - iPhone SE, Galaxy S, Pixel) */
@media (max-width: 465px) {
  .container { padding: 0 14px; }
  .header { width: calc(100% - 12px); top: 8px; padding: 6px 10px; }
  .header-inner { gap: 4px; }
  .header-actions { gap: 4px; }
  .logo-brand { gap: 5px; }
  .brand-emblem-img { height: 23px; }
  .logo-title { font-size: 0.8rem; letter-spacing: 0.3px; }
  .logo-sub { font-size: 0.4rem; letter-spacing: 1.2px; }

  .btn-sm { padding: 5px 10px; font-size: 0.74rem; }
  .theme-toggle-btn { width: 30px; height: 30px; font-size: 0.8rem; }
  .nav-mobile-toggle { font-size: 1.3rem; }

  .hero-title { font-size: clamp(1.2rem, 5.8vw, 1.65rem); line-height: 1.18; letter-spacing: 0.2px; max-width: 98%; }
  .hero-subtitle.mobile-subheading { font-size: clamp(0.76rem, 3.1vw, 0.88rem); line-height: 1.42; max-width: 96%; margin-bottom: 18px; }
  .hero-tag { font-size: 0.68rem; padding: 5px 10px; margin-bottom: 14px; }

  .metrics-grid { grid-template-columns: 1fr; }
  .modal-container { padding: 20px; width: 95%; }
  .whatsapp-float { bottom: 16px; right: 16px; width: 46px; height: 46px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* 6b. Ultra-Small Screens (310px to 365px) */
@media (max-width: 365px) {
  .header { width: calc(100% - 8px); top: 6px; padding: 5px 8px; }
  .header-inner { gap: 3px; }
  .header-actions { gap: 3px; }
  .brand-emblem-img { height: 20px; }
  .logo-title { font-size: 0.7rem; letter-spacing: 0.2px; }
  .logo-sub { font-size: 0.35rem; letter-spacing: 1px; }

  .btn-sm { padding: 4px 6px; font-size: 0.65rem; min-height: 34px; }
  .btn-nav-start,
  .header-actions .btn-nav-start,
  .btn-nav-contact,
  .header-actions .btn-nav-contact {
    display: none !important;
  }
  .theme-toggle-btn { width: 26px; height: 26px; font-size: 0.7rem; padding: 2px; }
  .nav-mobile-toggle { font-size: 1.1rem; padding: 2px 4px; }
}

/* Subtle Outline Ghost Button Style */
.btn-ghost-subtle {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  opacity: 0.85;
}

.btn-ghost-subtle:hover {
  opacity: 1;
  border-color: var(--glass-border-hover);
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

/* Accessibility: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-capability-pill {
    animation: none !important;
  }
}

/* ==========================================================================
   MALIKAXIOM TECH STACK V3 (MINIMAL ENTERPRISE ECOSYSTEM SHOWCASE)
   ========================================================================== */
.tech-section-v3 {
  position: relative;
  padding: 92px 0;
  background: #04050a;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

[data-theme="light"] .tech-section-v3 {
  background: #ffffff;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
  border-bottom: 1px solid rgba(10, 30, 60, 0.08);
}

.tech-header-v3 {
  max-width: 650px;
  margin: 0 auto 50px auto;
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tech-eyebrow-v3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 9999px;
  background: rgba(0, 119, 255, 0.12);
  border: 1px solid rgba(0, 119, 255, 0.2);
  color: #0099ff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 0 0 20px rgba(0, 119, 255, 0.2), inset 0 0 10px rgba(0, 119, 255, 0.2);
  transition: all 0.3s ease;
}

.tech-eyebrow-v3 .eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0099ff;
  box-shadow: 0 0 10px #0099ff, 0 0 18px #0099ff;
}

[data-theme="light"] .tech-eyebrow-v3 {
  background: transparent !important;
  border-color: rgba(0, 102, 255, 0.28) !important;
  color: #0066ff !important;
  box-shadow: none !important;
}

.tech-main-title {
  font-family: var(--font-heading);
  font-size: clamp(1.88rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

[data-theme="light"] .tech-main-title {
  color: #0f172a;
}

.tech-subtitle-v3 {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0 auto;
}

[data-theme="light"] .tech-subtitle-v3 {
  color: rgba(71, 85, 105, 0.75);
}

/* Rows Container & Separators */
.tech-rows-container-v3 {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.tech-row-v3 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px 14px;
  align-items: flex-start;
  padding: 30px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.35s ease;
}

.tech-row-v3:last-child {
  border-bottom: none;
}

[data-theme="light"] .tech-row-v3 {
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

/* Vertical Stacked Tech Item Link */
.tech-item-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 6px;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.3s ease;
  cursor: pointer;
  outline: none;
}

.tech-item-v3:focus-visible {
  outline: 2px solid var(--accent-blue-light);
  outline-offset: 4px;
}

/* LOGO CONTAINER & PROMINENT SIZING (REFINED 54-60px DESKTOP / 47-51px MOBILE) */
.tech-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  width: auto;
  min-width: 54px;
  flex-shrink: 0;
  will-change: transform, filter;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.35s ease;
}

.tech-logo-wrap svg,
.tech-logo-wrap img {
  height: 54px;
  max-height: 54px;
  width: auto;
  max-width: 86px;
  object-fit: contain;
}

.tech-label-v3 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.1px;
  white-space: nowrap;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}

[data-theme="light"] .tech-label-v3 {
  color: rgba(51, 65, 85, 0.85);
}

/* --------------------------------------------------------------------------
   ENTERPRISE TECH STACK SCROLL & HOVER SYSTEM (SEPARATED TRANSFORM LAYERS)
   -------------------------------------------------------------------------- */

/* PREMIUM GROUP HOVER / FOCUS-VISIBLE INTERACTION (NO CONFLICT WITH SCROLL ENTRANCE) */
.tech-item-v3 {
  outline: none;
  cursor: pointer;
}

.tech-item-v3:hover .tech-logo-wrap,
.tech-item-v3:focus-visible .tech-logo-wrap {
  transform: translateY(-4px) scale(1.05);
  filter: brightness(1.08) drop-shadow(0 5px 14px rgba(22, 119, 255, 0.14));
}

.tech-item-v3:hover .tech-label-v3,
.tech-item-v3:focus-visible .tech-label-v3 {
  color: rgba(255, 255, 255, 0.90);
}

[data-theme="light"] .tech-item-v3:hover .tech-label-v3,
[data-theme="light"] .tech-item-v3:focus-visible .tech-label-v3 {
  color: #0066ff;
}

.tech-item-v3:focus-visible {
  outline: 2px solid var(--accent-blue-light);
  outline-offset: 6px;
  border-radius: 8px;
}

/* SECTION HEADING & SUBTITLE ENTRANCE */
.tech-header-title-anim,
.tech-header-sub-anim,
.tech-header-badge-anim {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.tech-header-badge-anim {
  transform: translateY(30px);
}

.tech-header-title-anim {
  transform: translateY(60px);
}

.tech-header-sub-anim {
  transform: translateY(40px);
}

.tech-section-v3.is-revealed .tech-header-badge-anim,
.tech-section-v3.is-revealed .tech-header-title-anim,
.tech-section-v3.is-revealed .tech-header-sub-anim {
  opacity: 1;
  transform: translateY(0);
}

/* DIRECTIONAL LOGO ENTRANCE ANIMATIONS (1.8s ULTRA-SMOOTH WAVE WITH SUBTLE 2px BLUR) */
.tech-enter-top {
  opacity: 0;
  transform: translateY(-110px);
  filter: blur(2px);
  will-change: opacity, transform, filter;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.tech-enter-bottom {
  opacity: 0;
  transform: translateY(110px);
  filter: blur(2px);
  will-change: opacity, transform, filter;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.tech-enter-left {
  opacity: 0;
  transform: translateX(-120px);
  filter: blur(2px);
  will-change: opacity, transform, filter;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.tech-enter-right {
  opacity: 0;
  transform: translateX(120px);
  filter: blur(2px);
  will-change: opacity, transform, filter;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.tech-enter-center {
  opacity: 0;
  transform: translateY(70px) scale(0.82);
  filter: blur(2px);
  will-change: opacity, transform, filter;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

/* ACTIVE REVEAL STATE (TRIGGERS IN BOTH SCROLL DIRECTIONS DOWN & UP) */
.tech-section-v3.is-revealed .tech-enter-top,
.tech-section-v3.is-revealed .tech-enter-bottom,
.tech-section-v3.is-revealed .tech-enter-left,
.tech-section-v3.is-revealed .tech-enter-right,
.tech-section-v3.is-revealed .tech-enter-center {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0px);
}

/* Tech Stack Expand/Collapse Button (<= 1024px) */
.tech-expand-wrapper {
  display: none;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
  position: relative;
  z-index: 5;
}

.btn-tech-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.12);
  border: 1px solid rgba(0, 102, 255, 0.3);
  color: #008cff;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  outline: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-tech-expand:hover {
  background: #0066ff;
  color: #ffffff;
  border-color: #0066ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.35);
}

.tech-expand-arrow {
  display: inline-block;
  font-size: 1rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-tech-expand.is-expanded .tech-expand-arrow {
  transform: rotate(180deg);
}

/* Light Mode Overrides for Tech Expand Button */
[data-theme="light"] .btn-tech-expand {
  background: #ffffff;
  border-color: rgba(0, 102, 255, 0.3);
  color: #0066ff;
  box-shadow: 0 4px 16px rgba(10, 30, 60, 0.08);
}

[data-theme="light"] .btn-tech-expand:hover {
  background: #0066ff;
  color: #ffffff;
  border-color: #0066ff;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.25);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .tech-expand-wrapper {
    display: flex;
  }

  .tech-rows-container-v3:not(.is-expanded) .tech-item-extra,
  .tech-rows-container-v3:not(.is-expanded) .tech-row-extra {
    display: none !important;
  }

  .tech-rows-container-v3:not(.is-expanded) .tech-row-v3:nth-child(2) {
    border-bottom: none;
  }

  .tech-rows-container-v3.is-expanded .tech-item-extra {
    display: flex !important;
  }

  .tech-rows-container-v3.is-expanded .tech-row-extra {
    display: grid !important;
  }

  .tech-row-v3 {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 12px;
    padding: 28px 16px;
  }
}

@media (max-width: 640px) {
  .tech-section-v3 {
    padding: 64px 0 70px 0;
  }
  .tech-header-v3 {
    margin-bottom: 40px;
  }
  .tech-row-v3 {
    grid-template-columns: repeat(2, 1fr);
    padding: 24px 10px;
    gap: 20px 10px;
  }
  .tech-logo-wrap {
    height: 54px;
    min-width: 50px;
  }
  .tech-logo-wrap svg,
  .tech-logo-wrap img {
    height: 50px;
    max-height: 50px;
    width: auto;
    max-width: 82px;
  }
  .tech-label-v3 {
    font-size: 0.82rem;
  }
  .tech-enter-top {
    transform: translateY(-80px);
    transition-duration: 1.6s;
  }
  .tech-enter-bottom {
    transform: translateY(80px);
    transition-duration: 1.6s;
  }
  .tech-enter-left {
    transform: translateX(-80px);
    transition-duration: 1.6s;
  }
  .tech-enter-right {
    transform: translateX(80px);
    transition-duration: 1.6s;
  }
  .tech-enter-center {
    transform: translateY(50px) scale(0.85);
    transition-duration: 1.6s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-enter-top,
  .tech-enter-bottom,
  .tech-enter-left,
  .tech-enter-right,
  .tech-enter-scale,
  .tech-header-title-anim,
  .tech-header-sub-anim,
  .tech-header-badge-anim,
  .tech-logo-wrap,
  .tech-label-v3 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   MALIKAXIOM SELECTED WORK & EXPERIENCE SECTION (EDITORIAL BLOCK LAYOUT)
   ========================================================================== */
.work-section-v3 {
  position: relative;
  padding: 110px 0 130px 0;
  background: #04050a;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* ==========================================================================
   MALIKAXIOM ULTRA-ATTRACTIVE BENTO SHOWCASE (V6)
   ========================================================================== */
.work-section-v6 {
  position: relative;
  background: #04050a;
  padding: 102px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .work-section-v6 {
  background: #f8fafc;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
}

/* Centered Section Header */
.work-header-v6 {
  max-width: 720px;
  margin: 0 auto 70px auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.work-eyebrow-v6 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: #0066ff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.work-eyebrow-v6 .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0066ff;
  box-shadow: 0 0 10px #0066ff;
}

.work-main-title-v6 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
}

[data-theme="light"] .work-main-title-v6 {
  color: #0f172a;
}

.work-subtitle-v6 {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin: 0 auto;
}

[data-theme="light"] .work-subtitle-v6 {
  color: rgba(15, 23, 42, 0.7);
}

/* Asymmetric Bento Showcase Container */
.work-bento-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Bento Hero Banners (Row 1 & Row 3) */
.work-bento-hero {
  width: 100%;
  border-radius: 28px;
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  will-change: transform, box-shadow, border-color;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease;
}

[data-theme="light"] .work-bento-hero {
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid rgba(0, 140, 255, 0.2);
}

.work-bento-hero-link {
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.work-bento-hero-link.reverse-hero {
  grid-template-columns: 42% 58%;
}

.work-bento-hero-visual {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: rgba(8, 11, 20, 0.95);
}

.work-bento-hero-info {
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Bento Dual Cards (Row 2) */
.work-bento-dual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  width: 100%;
}

.work-bento-card {
  border-radius: 28px;
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  will-change: transform, box-shadow, border-color;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease;
}

[data-theme="light"] .work-bento-card {
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid rgba(0, 140, 255, 0.2);
}

.work-card-inner-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.work-card-visual {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: rgba(8, 11, 20, 0.95);
}

.work-card-content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
}

/* Light Glare Sweep Beam */
.work-shine-sweep {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 30%,
    rgba(0, 140, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.03) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
  transform: skewX(-20deg);
  will-change: left;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-bento-hero:hover .work-shine-sweep,
.work-bento-card:hover .work-shine-sweep {
  left: 180%;
}

/* Interactive Bouncy Spring Media / Play Hover Button Overlay */
.work-hover-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%) scale(0.7);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  border-radius: 9999px;
  background: rgba(0, 140, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 12px 35px rgba(0, 140, 255, 0.2);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.work-bento-hero:hover .work-hover-play-badge,
.work-bento-card:hover .work-hover-play-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-1deg);
}

/* Floating Glassmorphic Badges */
.work-glass-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(4, 6, 12, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.work-bento-hero:hover .work-glass-badge,
.work-bento-card:hover .work-glass-badge {
  border-color: rgba(0, 140, 255, 0.2);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 140, 255, 0.2);
}

.work-glass-badge .badge-num {
  font-family: var(--font-heading);
  font-weight: 800;
  color: #008cff;
  font-size: 0.82rem;
}

.work-glass-badge .badge-divider {
  color: rgba(255, 255, 255, 0.3);
}

.work-glass-badge .badge-text {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}

/* Typography & Titles */
.work-bento-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  transition: color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .work-bento-title {
  color: #0f172a;
}

.work-bento-hero:hover .work-bento-title,
.work-bento-card:hover .work-bento-title {
  color: #008cff;
  transform: translateX(4px);
}

.work-bento-desc {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin-bottom: 20px;
}

[data-theme="light"] .work-bento-desc {
  color: rgba(15, 23, 42, 0.7);
}

/* Technology Pills Row with Stagger Shimmer */
.work-pills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.work-pills-row.align-start {
  justify-content: flex-start;
}

.work-pill-tag {
  padding: 5px 15px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

[data-theme="light"] .work-pill-tag {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: rgba(15, 23, 42, 0.75);
}

.work-bento-hero:hover .work-pill-tag,
.work-bento-card:hover .work-pill-tag {
  background: rgba(0, 140, 255, 0.2);
  border-color: rgba(0, 140, 255, 0.2);
  color: #008cff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 140, 255, 0.2);
}

.work-bento-hero:hover .work-pill-tag:nth-child(2),
.work-bento-card:hover .work-pill-tag:nth-child(2) {
  transition-delay: 60ms;
}

.work-bento-hero:hover .work-pill-tag:nth-child(3),
.work-bento-card:hover .work-pill-tag:nth-child(3) {
  transition-delay: 120ms;
}

/* Bento CTA Button */
.work-bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
  transition: color 0.35s ease;
  margin-top: auto;
}

[data-theme="light"] .work-bento-cta {
  color: #0f172a;
}

.work-bento-cta .work-cta-arrow {
  color: #008cff;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.work-bento-hero:hover .work-bento-cta,
.work-bento-card:hover .work-bento-cta {
  color: #008cff;
}

.work-bento-hero:hover .work-cta-arrow,
.work-bento-card:hover .work-cta-arrow {
  transform: translateX(8px) scale(1.15);
}

/* High-Impact Multi-Layer Card Hover Elevation */
.work-bento-hero:hover,
.work-bento-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 24px 60px rgba(0, 140, 255, 0.2),
              inset 0 0 30px rgba(0, 140, 255, 0.2);
}

.work-bento-hero:hover .work-visual-img,
.work-bento-card:hover .work-visual-img {
  transform: scale(1.06) rotate(-0.5deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   WORK SECTION — SIMPLE 3-CARD PROJECT GRID
   (One project = one card = one image + text + CTA)
   ============================================================ */
.work-edit-grid {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.work-edit-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-surface, #0d1117);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.work-edit-card:hover {
  border-color: rgba(0, 102, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
}
.work-edit-card-inner {
  text-decoration: none;
  display: block;
}

/* Single contained image */
.work-edit-media {
  display: block;
  overflow: hidden;
  background: #0a0d14;
  aspect-ratio: 16 / 9;
  position: relative;
}
.work-edit-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 5, 10, 0.45));
  pointer-events: none;
}
.work-edit-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.work-edit-card:hover .work-edit-img { transform: scale(1.03); }

/* Featured FOFO card — full width, balanced & compact proportions */
.work-edit-featured { width: 100%; }
.work-edit-featured .work-edit-media {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 340px;
}
.work-edit-featured .work-edit-info { padding: 20px 24px 22px; }
.work-edit-featured .work-edit-meta { margin-bottom: 8px; }
.work-edit-featured .work-edit-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: 8px; }
.work-edit-featured .work-edit-desc { max-width: 580px; font-size: 0.88rem; line-height: 1.55; margin-bottom: 12px; }

/* Half-width duo row */
.work-edit-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Info */
.work-edit-info {
  padding: 22px 24px 26px;
}
.work-edit-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.work-edit-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0066ff;
}
.work-edit-badge {
  font-family: 'Fira Code', monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted, #94a3b8);
}
.work-edit-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main, #fff);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}
.work-edit-card:hover .work-edit-title { color: #0066ff; }
.work-edit-desc {
  font-size: 0.92rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.65;
  margin-bottom: 18px;
}
.work-edit-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0066ff;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(0, 102, 255, 0.2);
  transition: gap 0.3s ease, border-color 0.3s ease;
}
.work-edit-card:hover .work-edit-cta { border-color: #0066ff; }
.work-edit-arrow { font-size: 1.05rem; transition: transform 0.3s ease; }
.work-edit-card:hover .work-edit-arrow { transform: translateX(4px); }

/* Cinematic 3D scroll reveal for case-study cards */
.work-edit-card {
  opacity: 0;
  transform: translateY(55px) scale(0.94) perspective(1000px) rotateX(4deg);
  filter: blur(8px);
  will-change: opacity, transform, filter;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              border-color 0.35s ease, box-shadow 0.35s ease;
}

.work-edit-card.in-view,
.work-section-v6.is-revealed .work-edit-card {
  opacity: 1;
  transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
  filter: blur(0);
}

/* Directional entry transitions for duo cards */
#project-afrotech.work-edit-card {
  transform: translateY(50px) translateX(-30px) scale(0.95) rotate(-1.5deg);
}
#project-afrotech.work-edit-card.in-view {
  transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}

#project-kno.work-edit-card {
  transform: translateY(50px) translateX(30px) scale(0.95) rotate(1.5deg);
}
#project-kno.work-edit-card.in-view {
  transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}

/* Internal content micro-stagger: image scale-in + text slide-up */
.work-edit-card .work-edit-media {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--delay, 0ms) + 60ms),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--delay, 0ms) + 60ms);
}

.work-edit-card .work-edit-info {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--delay, 0ms) + 140ms),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--delay, 0ms) + 140ms);
}

.work-edit-card.in-view .work-edit-media,
.work-edit-card.in-view .work-edit-info {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Light mode */
[data-theme="light"] .work-edit-card {
  background: #ffffff;
  border-color: rgba(10, 10, 10, 0.08);
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.06);
}
[data-theme="light"] .work-edit-card:hover { border-color: rgba(0, 102, 255, 0.2); }
[data-theme="light"] .work-edit-title { color: #0f172a; }
[data-theme="light"] .work-edit-desc,
[data-theme="light"] .work-edit-badge { color: #475569; }

/* Responsive */
@media (max-width: 1024px) {
  .work-edit-duo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .work-edit-duo { grid-template-columns: 1fr; gap: 20px; }
  .work-edit-featured .work-edit-media { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .work-edit-img { transition: none !important; }
}

/* ============================================================
   WORK SECTION — AUTO-ROTATING PREMIUM PROJECT CAROUSEL
   ============================================================ */
.work-carousel {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 2;
}
.work-car-slide {
  display: none;
}
.work-car-slide.is-active {
  display: block;
  animation: workCarFade 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes workCarFade {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.work-car-slide-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(22px, 4vw, 40px);
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.55), rgba(10, 14, 26, 0.7));
  transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-car-slide-inner:hover {
  border-color: rgba(0, 102, 255, 0.2);
  transform: translateY(-4px);
}
.work-car-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
}
.work-car-img-main {
  position: relative;
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  background: #0a0d14;
}
.work-car-img-main img {
  width: 100%;
  height: clamp(300px, 38vw, 440px);
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-car-slide-inner:hover .work-car-img-main img {
  transform: scale(1.05);
}
.work-car-img-side {
  position: relative;
  width: 130px;
  margin-left: -46px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 102, 255, 0.2);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55);
  transform: rotate(3deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-car-slide-inner:hover .work-car-img-side {
  transform: rotate(0deg) translateX(-4px);
}
.work-car-img-side img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.work-car-info {
  position: relative;
  z-index: 2;
}
.work-car-info .work-glass-badge {
  margin-bottom: 16px;
}
.work-car-info .work-bento-title {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  margin-bottom: 14px;
}

/* Carousel Nav */
.work-car-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 34px;
  position: relative;
  z-index: 2;
}
.work-car-prev,
.work-car-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.work-car-prev:hover,
.work-car-next:hover {
  border-color: #0066ff;
  color: #0066ff;
  background: rgba(0, 102, 255, 0.2);
  transform: scale(1.05);
}
.work-car-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.work-car-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}
.work-car-dot.is-active {
  background: #0066ff;
  transform: scale(1.25);
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.2);
}

/* Light mode */
[data-theme="light"] .work-car-slide-inner {
  background: linear-gradient(160deg, #ffffff, #fafafa);
  border-color: rgba(10, 10, 10, 0.08);
}
[data-theme="light"] .work-car-slide-inner:hover {
  border-color: rgba(0, 102, 255, 0.2);
}
[data-theme="light"] .work-car-img-main {
  border-color: rgba(10, 10, 10, 0.1);
  box-shadow: 0 24px 50px rgba(10, 10, 10, 0.1);
}
[data-theme="light"] .work-car-prev,
[data-theme="light"] .work-car-next {
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.15);
}
[data-theme="light"] .work-car-dot { background: rgba(10, 10, 10, 0.25); }

/* Responsive */
@media (max-width: 1024px) {
  .work-car-slide-inner { grid-template-columns: 1fr; gap: 30px; }
  .work-car-img-side { width: 100px; }
}
@media (max-width: 640px) {
  .work-car-img-main img { height: 230px; }
  .work-car-img-side { width: 76px; height: 120px; }
  .work-car-nav { gap: 16px; }
}

/* Glowing Pill CTA Button */
.work-footer-cta-v6 {
  display: flex;
  justify-content: center;
  margin-top: 75px;
  position: relative;
  z-index: 2;
}

/* Smooth Simple CTA Button — View All Case Studies */
.work-all-btn-v6 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.12);
  border: 1px solid rgba(0, 102, 255, 0.25);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  box-shadow: none;
  will-change: transform, background, border-color;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.work-all-btn-v6 .work-btn-arrow {
  color: #0077ff;
  transition: transform 0.3s ease, color 0.3s ease;
}

.work-all-btn-v6:hover {
  background: #0066ff;
  border-color: #0066ff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.25);
}

.work-all-btn-v6:hover .work-btn-arrow {
  transform: translateX(5px);
  color: #ffffff;
}

[data-theme="light"] .work-all-btn-v6 {
  background: #ffffff !important;
  border: 1px solid rgba(0, 102, 255, 0.25) !important;
  color: #0066ff !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.08) !important;
}

[data-theme="light"] .work-all-btn-v6 .work-btn-arrow {
  color: #0066ff !important;
}

[data-theme="light"] .work-all-btn-v6:hover {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(0, 102, 255, 0.25) !important;
}

[data-theme="light"] .work-all-btn-v6:hover .work-btn-arrow {
  color: #ffffff !important;
}

/* ==========================================================================
   HIGH-END DYNAMIC PER-CARD SCROLL REVEAL MOTION SYSTEM (LONG & ATTRACTIVE)
   ========================================================================== */
.work-reveal-header {
  opacity: 0;
  transform: translateY(55px) scale(0.93);
  filter: blur(8px);
  will-change: opacity, transform, filter;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.work-reveal-header.in-view,
.work-section-v6.is-revealed .work-reveal-header {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Hero Cards 3D Scroll Reveal (01 FOFO & 04 BLOCKONAIRE) */
.work-bento-hero {
  opacity: 0;
  transform: translateY(85px) scale(0.91) perspective(1200px) rotateX(5deg);
  filter: blur(10px);
  will-change: opacity, transform, box-shadow, filter;
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              box-shadow 0.5s ease,
              border-color 0.5s ease;
}

.work-bento-hero.in-view,
.work-section-v6.is-revealed .work-bento-hero {
  opacity: 1;
  transform: translateY(0) scale(1) perspective(1200px) rotateX(0deg);
  filter: blur(0);
}

/* Dual Side-by-Side Cards Scroll Reveal (02 AFROTECH & 03 KNO) */
#project-afrotech.work-bento-card {
  opacity: 0;
  transform: translate(-60px, 75px) scale(0.91) rotate(-2deg);
  filter: blur(10px);
  will-change: opacity, transform, box-shadow, filter;
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              box-shadow 0.5s ease,
              border-color 0.5s ease;
}

#project-kno.work-bento-card {
  opacity: 0;
  transform: translate(60px, 75px) scale(0.91) rotate(2deg);
  filter: blur(10px);
  will-change: opacity, transform, box-shadow, filter;
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              box-shadow 0.5s ease,
              border-color 0.5s ease;
}

#project-afrotech.in-view,
#project-kno.in-view,
.work-section-v6.is-revealed #project-afrotech,
.work-section-v6.is-revealed #project-kno,
.work-bento-card.in-view,
.work-section-v6.is-revealed .work-bento-card {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
  filter: blur(0);
}

/* Inner elements stagger float when card enters view */
.work-bento-hero .work-glass-badge,
.work-bento-card .work-glass-badge {
  transform: translateY(-12px) scale(0.85);
  opacity: 0;
  transition: opacity 0.8s ease 0.25s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}

.work-bento-hero.in-view .work-glass-badge,
.work-bento-card.in-view .work-glass-badge,
.work-section-v6.is-revealed .work-glass-badge {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.work-bento-hero .work-bento-title,
.work-bento-card .work-bento-title {
  transform: translateY(22px);
  opacity: 0;
  transition: opacity 0.9s ease 0.15s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.work-bento-hero.in-view .work-bento-title,
.work-bento-card.in-view .work-bento-title,
.work-section-v6.is-revealed .work-bento-title {
  opacity: 1;
  transform: translateY(0);
}

.work-bento-hero .work-bento-desc,
.work-bento-card .work-bento-desc {
  transform: translateY(18px);
  opacity: 0;
  transition: opacity 0.9s ease 0.25s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.work-bento-hero.in-view .work-bento-desc,
.work-bento-card.in-view .work-bento-desc,
.work-section-v6.is-revealed .work-bento-desc {
  opacity: 1;
  transform: translateY(0);
}

.work-bento-hero .work-pills-row,
.work-bento-card .work-pills-row {
  transform: translateY(18px);
  opacity: 0;
  transition: opacity 0.9s ease 0.35s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.work-bento-hero.in-view .work-pills-row,
.work-bento-card.in-view .work-pills-row,
.work-section-v6.is-revealed .work-pills-row {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .work-bento-hero-link,
  .work-bento-hero-link.reverse-hero {
    grid-template-columns: 1fr;
  }

  .work-bento-hero-visual {
    height: 320px;
  }

  .work-bento-hero-info {
    padding: 36px;
  }
}

@media (max-width: 768px) {
  .work-bento-dual {
    grid-template-columns: 1fr;
  }

  .work-card-visual {
    height: 250px;
  }

  .work-card-content {
    padding: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-reveal-header,
  .work-reveal-card,
  .work-bento-hero,
  .work-bento-card,
  .work-edit-card,
  .work-edit-media,
  .work-edit-info,
  .work-visual-img,
  .work-all-btn-v6 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   WHY MALIKAXIOM SECTION (EDITORIAL 2-COLUMN PRINCIPLES SHOWCASE)
   ========================================================================== */
.why-section {
  position: relative;
  background: #04050a;
  color: #ffffff;
  padding: 102px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.why-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: calc(36% - 35px) calc(64% - 35px);
  gap: 70px;
  align-items: start;
}

/* LEFT COLUMN: Sticky Editorial Intro */
.why-intro-column {
  position: sticky;
  top: 130px;
}

.why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 16px rgba(0, 140, 255, 0.2);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #008cff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.why-eyebrow:hover {
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 0 25px rgba(0, 140, 255, 0.2);
}

.why-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #008cff;
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.2);
}

.why-main-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

[data-theme="light"] .why-main-title {
  color: #0f172a;
}

.why-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 32px;
}

[data-theme="light"] .why-subtitle {
  color: rgba(71, 85, 105, 0.85);
}

/* Left Column Decorative Engineering Badge */
.why-badge-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(0, 102, 255, 0.2);
  backdrop-filter: blur(10px);
  max-width: 380px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.why-badge-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 8px 30px rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .why-badge-card {
  background: rgba(10, 10, 10, 0.02);
  border-color: rgba(0, 102, 255, 0.2);
}

.why-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 102, 255, 0.2);
  flex-shrink: 0;
}

.why-badge-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.why-badge-text .badge-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0066ff;
  letter-spacing: 1px;
}

.why-badge-text .badge-sub {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

[data-theme="light"] .why-badge-text .badge-sub {
  color: rgba(10, 10, 10, 0.6);
}

/* MalikAxiom Philosophy Card — Pinned at Bottom-Left */
.why-philosophy-card {
  margin-top: auto;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(0, 140, 255, 0.2);
  border-left: 3px solid #008cff;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 360px;
  text-align: left;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.why-philosophy-card:hover {
  border-left-color: #008cff;
  box-shadow: 0 4px 20px rgba(0, 140, 255, 0.2);
}

.philosophy-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.philosophy-badge-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #008cff;
}

.philosophy-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(0, 140, 255, 0.2);
  letter-spacing: 1.2px;
}

.philosophy-quote {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

/* RIGHT COLUMN: Editorial Principles Vertical Flow */
.why-principles-column {
  display: flex;
  flex-direction: column;
}

.why-principles-list {
  display: flex;
  flex-direction: column;
}

/* Principles Item: Editorial Row Layout (No Cards, No Boxes) */
.why-principle-item {
  position: relative;
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 36px;
  padding: 52px 0 52px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Glare Sweep Beam for Principles */
.why-shine-sweep {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 30%,
    rgba(0, 140, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.02) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
  transform: skewX(-20deg);
  will-change: left;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-principle-item:hover .why-shine-sweep,
.why-principle-item.is-active .why-shine-sweep {
  left: 180%;
}

/* Hover Indicator Beam on Left Edge */
.why-hover-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleY(0);
  width: 3.5px;
  height: 65%;
  border-radius: 3px;
  background: linear-gradient(to bottom, #008cff, #0055cc);
  box-shadow: 0 0 14px rgba(0, 140, 255, 0.2);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.why-principle-item:hover .why-hover-indicator,
.why-principle-item.is-active .why-hover-indicator {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

.why-principle-number {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.18);
  line-height: 1.1;
  will-change: transform, color;
  transition: color 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 0.4s ease;
  user-select: none;
}

[data-theme="light"] .why-principle-number {
  color: rgba(10, 10, 10, 0.2);
}

.why-principle-content {
  display: flex;
  flex-direction: column;
}

.why-principle-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  line-height: 1.25;
  will-change: transform, color;
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .why-principle-title {
  color: #0f172a;
}

.why-principle-desc {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 18px;
  transition: color 0.4s ease, transform 0.4s ease;
}

[data-theme="light"] .why-principle-desc {
  color: rgba(71, 85, 105, 0.85);
}

/* Capability Tags Row with Elastic Bouncy Spring Hover */
.why-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.why-tag {
  padding: 5px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  will-change: transform, background, border-color, box-shadow;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease,
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

[data-theme="light"] .why-tag {
  background: rgba(10, 10, 10, 0.04);
  border-color: rgba(10, 10, 10, 0.1);
  color: rgba(10, 10, 10, 0.7);
}

.why-principle-item:hover .why-tag,
.why-principle-item.is-active .why-tag {
  background: transparent !important;
  border-color: rgba(0, 102, 255, 0.3) !important;
  color: #0066ff !important;
  transform: translateY(-2px);
  box-shadow: none !important;
}

.why-principle-item:hover .why-tag:nth-child(2),
.why-principle-item.is-active .why-tag:nth-child(2) {
  transition-delay: 60ms;
}

.why-principle-item:hover .why-tag:nth-child(3),
.why-principle-item.is-active .why-tag:nth-child(3) {
  transition-delay: 120ms;
}

/* Subtle Horizontal Editorial Separators */
.why-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  width: 100%;
}

[data-theme="light"] .why-divider {
  background: rgba(10, 10, 10, 0.08);
}

/* Multi-Layer Hover Interaction */
.why-principle-item:hover,
.why-principle-item.is-active {
  transform: translateX(6px);
}

.why-principle-item:hover .why-principle-number,
.why-principle-item.is-active .why-principle-number {
  color: #008cff;
  transform: scale(1.15) rotate(-3deg);
  text-shadow: 0 0 18px rgba(0, 140, 255, 0.2);
}

.why-principle-item:hover .why-principle-title,
.why-principle-item.is-active .why-principle-title {
  color: #ffffff;
  transform: translateX(4px);
}

.why-principle-item:hover .why-principle-desc,
.why-principle-item.is-active .why-principle-desc {
  color: rgba(255, 255, 255, 0.88);
}

[data-theme="light"] .why-principle-item:hover .why-principle-title,
[data-theme="light"] .why-principle-item.is-active .why-principle-title {
  color: #0066ff;
}

[data-theme="light"] .why-principle-item:hover .why-principle-desc,
[data-theme="light"] .why-principle-item.is-active .why-principle-desc {
  color: rgba(10, 10, 10, 0.9);
}

/* Top Center Banner Row for Why Choose Us — Simple & Attractive */
.why-top-banner-container {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

@keyframes bannerSparklePulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.8));
    opacity: 0.85;
  }
  50% {
    transform: scale(1.3) rotate(180deg);
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 1));
    opacity: 1;
  }
}

@keyframes bannerTextShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.why-closing-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  cursor: default;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.why-closing-banner::before {
  display: none;
}

.why-closing-banner:hover {
  border-color: rgba(0, 119, 255, 0.35);
  background: rgba(0, 119, 255, 0.06);
}

.why-closing-banner .banner-sparkle {
  color: #00f0ff;
  font-size: 0.95rem;
  display: inline-block;
  opacity: 0.85;
}

.why-closing-banner .banner-sparkle.right {
  animation-delay: 1.5s;
}

.why-closing-banner .banner-text {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
}

/* Light mode: clean bordered pill with subtle accent */
[data-theme="light"] .why-closing-banner {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .why-closing-banner:hover {
  border-color: rgba(0, 102, 255, 0.35);
  background: rgba(0, 102, 255, 0.05);
}

[data-theme="light"] .why-closing-banner .banner-sparkle {
  color: #0066ff;
  opacity: 0.9;
  filter: none;
}

[data-theme="light"] .why-closing-banner .banner-text {
  color: #0f172a;
}

/* ==========================================================================
   WHY MALIKAXIOM MOTION & ANIMATION SYSTEM (1.35s Easing Wave)
   ========================================================================== */
.why-reveal-header {
  opacity: 0;
  transform: translateY(45px);
  will-change: opacity, transform;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.why-reveal-header.in-view,
.why-section.is-revealed .why-reveal-header {
  opacity: 1;
  transform: translateY(0);
}

.why-reveal-left {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  will-change: opacity, transform;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.why-reveal-left.in-view,
.why-section.is-revealed .why-reveal-left {
  opacity: 1;
  transform: translate(0, 0);
}

.why-reveal-right {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  will-change: opacity, transform;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.why-reveal-right.in-view,
.why-section.is-revealed .why-reveal-right {
  opacity: 1;
  transform: translate(0, 0);
}

/* RESPONSIVE BREAKPOINTS FOR WHY MALIKAXIOM */
@media (max-width: 1024px) {
  .why-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .why-intro-column {
    position: static;
  }

  .why-section {
    padding: 100px 0 120px;
  }

  .why-principle-item {
    padding: 40px 0;
    grid-template-columns: 70px 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .why-section {
    padding: 80px 0 100px;
  }

  .why-principle-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }

  .why-principle-number {
    font-size: 1.4rem;
  }

  .why-closing-statement {
    margin-top: 50px;
    padding-top: 32px;
  }

  /* Reduced Motion Distances for Mobile */
  .why-reveal-left {
    transform: translate(-30px, 35px);
    transition-duration: 1.2s;
  }

  .why-reveal-right {
    transform: translate(30px, 35px);
    transition-duration: 1.2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-reveal-header,
  .why-reveal-left,
  .why-reveal-right,
  .why-principle-item {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.3s ease !important;
  }
}

/* ==========================================================================
   MALIKAXIOM WHY CHOOSE US — EDITORIAL ENGINEERING MANIFESTO
   ========================================================================== */

/* Opening statement — simple centered banner */
.why-open-statement {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 80px;
  z-index: 2;
  text-align: center;
}

/* Intro index counter */
.why-intro-index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0066ff;
}
.why-index-sep, .why-index-total { color: var(--text-dim, #64748b); }

/* Principles — editorial manifesto sequence */
.why-principles-list { position: relative; }
.why-principle-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(28px, 4vw, 44px) 0;
  opacity: 0.5;
  transition: opacity 0.6s ease, background-color 0.3s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
.why-principle-item:first-child { border-top: none; }
.why-principle-item.is-active { opacity: 1; }
.why-principle-item:hover { background-color: transparent !important; }

/* Rail + dot on the left */
.why-principle-rail {
  position: relative;
  width: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.why-principle-dot {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0066ff;
  box-shadow: 0 0 14px rgba(0, 102, 255, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.why-principle-item.is-active .why-principle-dot { opacity: 1; }

.why-principle-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}
.why-principle-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0066ff;
  opacity: 0.6;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.why-principle-item.is-active .why-principle-number { opacity: 1; transform: scale(1.1); }
.why-principle-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main, #fff);
  transition: color 0.4s ease;
}
.why-principle-item.is-active .why-principle-title { color: #0066ff; }

/* Abstract visual */
.why-principle-visual {
  width: 120px;
  height: 40px;
  margin: 4px 0 14px;
  opacity: 0.35;
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.why-principle-visual svg { width: 100%; height: 100%; overflow: visible; }
.why-principle-item.is-active .why-principle-visual {
  opacity: 1;
  transform: translateX(4px);
}

.why-principle-desc {
  font-size: 1rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 620px;
  transition: color 0.4s ease;
}
.why-principle-item.is-active .why-principle-desc { color: var(--text-main, #fff); }

.why-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.why-tag {
  padding: 5px 14px;
  border-radius: 9999px;
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: var(--text-muted, #94a3b8);
  opacity: 0.5;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease;
}
.why-principle-item.is-active .why-tag {
  opacity: 1;
  transform: translateY(0);
  color: #94a3b8;
}
.why-principle-item.is-active .why-tag:nth-child(1) { transition-delay: 0.05s; }
.why-principle-item.is-active .why-tag:nth-child(2) { transition-delay: 0.1s; }
.why-principle-item.is-active .why-tag:nth-child(3) { transition-delay: 0.15s; }

/* Light mode */
[data-theme="light"] .why-principle-rail { background: rgba(10, 10, 10, 0.12); }
[data-theme="light"] .why-principle-item { border-top-color: rgba(10, 10, 10, 0.08); }
[data-theme="light"] .why-principle-item:hover { background-color: transparent !important; }
[data-theme="light"] .why-tag { color: #334155; background: transparent !important; border-color: rgba(0, 102, 255, 0.25) !important; }
[data-theme="light"] .why-principle-item.is-active .why-principle-title { color: #0066ff; }
[data-theme="light"] .why-principle-item.is-active .why-principle-desc { color: #0f172a; }

/* Responsive */
@media (max-width: 768px) {
  .why-open-statement { margin-bottom: 60px; }
  .why-intro-index { margin-top: 18px; }
  .why-principle-item { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .why-principle-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .why-principle-item,
  .why-principle-visual,
  .why-tag { transition: none !important; opacity: 1 !important; transform: none !important; }
}

[data-theme="light"] .why-section {
  background: #ffffff;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
  color: #0f172a;
}

/* ==========================================================================
   MALIKAXIOM "BUILT FOR THE REAL WORLD" SHOWCASE SECTION
   ========================================================================== */
.realworld-section {
  position: relative;
  background: #04050a;
  color: #ffffff;
  padding: 112px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.realworld-bg-image-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.realworld-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: grayscale(100%) contrast(120%);
  transform: scale(1.05);
  transition: transform 10s ease-out;
}

.realworld-section:hover .realworld-bg-img {
  transform: scale(1.08);
}

.realworld-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(4, 5, 10, 0.65) 0%, rgba(4, 5, 10, 0.94) 100%),
              linear-gradient(to bottom, #04050a 0%, transparent 20%, transparent 80%, #04050a 100%);
}

.realworld-container {
  position: relative;
  z-index: 2;
  max-width: 1240px;
}

/* Eyebrow */
.realworld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #008cff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 32px;
}

.realworld-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #008cff;
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.2);
}

/* Headline Wrapper with Laurel Wreath Framing */
.realworld-headline-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 24px;
}

.realworld-headline-wrapper .laurel-wreath {
  color: #008cff;
  opacity: 0.85;
  filter: drop-shadow(0 0 12px rgba(0, 140, 255, 0.2));
  flex-shrink: 0;
}

.realworld-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0;
}

.realworld-title .highlight-text {
  color: #ffffff;
}

[data-theme="light"] .realworld-title {
  color: #0f172a;
}

/* Description Paragraph */
.realworld-desc {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 64px;
}

/* Auto-Rotating Accreditations Marquee / Carousel */
@keyframes realworldAutoRotate {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.realworld-ticker-wrapper {
  width: 100%;
  overflow: hidden;
  margin-bottom: 60px;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.realworld-ticker-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
  animation: realworldAutoRotate 50s linear infinite;
}

.realworld-ticker-track:hover {
  animation-play-state: paused;
}

.accreditation-card {
  width: 275px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.accreditation-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 12px 35px rgba(0, 140, 255, 0.2);
}

.accreditation-year {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.accreditation-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 95px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px stroke rgba(0, 140, 255, 0.2);
  outline: 2px dashed rgba(0, 140, 255, 0.2);
  outline-offset: -5px;
  margin-bottom: 18px;
  transition: background 0.35s ease;
}

.accreditation-badge.highlight {
  background: rgba(0, 140, 255, 0.2);
  outline-color: rgba(0, 140, 255, 0.2);
}

.accreditation-badge .badge-title {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  color: #008cff;
  letter-spacing: 0.8px;
  text-align: center;
}

.accreditation-badge .badge-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.accreditation-label {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

/* Editorial Text Action CTA */
.realworld-cta-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}

.realworld-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  transition: color 0.4s ease;
}

[data-theme="light"] .realworld-cta-link {
  color: #0f172a;
}

.realworld-cta-link .cta-arrow {
  color: #0066ff;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.realworld-cta-link:hover {
  color: #0066ff;
}

[data-theme="light"] .realworld-cta-link:hover {
  color: #0066ff;
}

.realworld-cta-link:hover .cta-arrow {
  transform: translateX(6px);
}

.realworld-cta-link:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Optional Metadata Categories */
.realworld-metadata {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 2px;
}

[data-theme="light"] .realworld-metadata {
  color: rgba(10, 10, 10, 0.4);
}

.realworld-metadata .meta-divider {
  color: rgba(0, 102, 255, 0.2);
  font-size: 0.8rem;
}

/* ==========================================================================
   CINEMATIC PHASED SCROLL REVEAL WAVE (1.15s – 1.5s Easing)
   ========================================================================== */
.realworld-reveal-top {
  opacity: 0;
  transform: translateY(-25px);
  will-change: opacity, transform;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.realworld-reveal-top.in-view,
.realworld-section.is-revealed .realworld-reveal-top {
  opacity: 1;
  transform: translateY(0);
}

.realworld-reveal-bottom {
  opacity: 0;
  transform: translateY(65px);
  will-change: opacity, transform;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.realworld-reveal-bottom.in-view,
.realworld-section.is-revealed .realworld-reveal-bottom {
  opacity: 1;
  transform: translateY(0);
}

.realworld-reveal-left {
  opacity: 0;
  transform: translateY(45px);
  will-change: opacity, transform;
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.realworld-reveal-left.in-view,
.realworld-section.is-revealed .realworld-reveal-left {
  opacity: 1;
  transform: translateY(0);
}

.realworld-reveal-visual {
  opacity: 0;
  transform: translateY(70px) scale(0.965);
  will-change: opacity, transform;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.realworld-reveal-visual.in-view,
.realworld-section.is-revealed .realworld-reveal-visual {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.realworld-reveal-right {
  opacity: 0;
  transform: translateY(35px);
  will-change: opacity, transform;
  transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.realworld-reveal-right.in-view,
.realworld-section.is-revealed .realworld-reveal-right {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE BREAKPOINTS FOR REAL WORLD SECTION */
@media (max-width: 1024px) {
  .realworld-section {
    padding: 110px 0 130px;
  }

  .realworld-accreditations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .realworld-section {
    padding: 85px 0 100px;
  }

  .realworld-headline-wrapper {
    gap: 12px;
  }

  .realworld-headline-wrapper .laurel-wreath {
    width: 36px;
    height: 60px;
  }

  .realworld-desc {
    margin-bottom: 40px;
  }

  .realworld-accreditations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 44px;
  }

  .accreditation-card {
    padding: 18px 12px;
  }

  .accreditation-badge {
    width: 100px;
    height: 80px;
  }

  .accreditation-label {
    font-size: 0.78rem;
  }

  /* Reduced Movement Distances for Mobile */
  .realworld-reveal-top,
  .realworld-reveal-bottom,
  .realworld-reveal-left,
  .realworld-reveal-right,
  .realworld-reveal-visual {
    transition-duration: 1.2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .realworld-reveal-top,
  .realworld-reveal-bottom,
  .realworld-reveal-left,
  .realworld-reveal-right,
  .realworld-reveal-visual,
  .realworld-visual-img {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.3s ease !important;
  }
}

/* ==========================================================================
   MALIKAXIOM CLIENT REVIEWS / TESTIMONIALS SECTION (GOJILABS MATCH)
   ========================================================================== */
.testimonials-section {
  position: relative;
  padding: 102px 0;
  background: #04050a;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.testimonials-container {
  position: relative;
  z-index: 2;
  max-width: 1240px;
}

.testimonials-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

.testimonials-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Eyebrow with Radar Dot & Smooth Hover Transition */
@keyframes dotPulseRadar {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 140, 255, 0.2), 0 0 10px rgba(0, 140, 255, 0.2);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(0.2, 140.2, 255, 0.2), 0 0 14px rgba(0, 140, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0.2, 140.2, 255, 0.2), 0 0 10px rgba(0, 140, 255, 0.2);
  }
}

.testimonials-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  border-radius: 9999px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #008cff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              letter-spacing 0.4s ease,
              color 0.4s ease;
}

.testimonials-eyebrow:hover {
  transform: translateY(-2px) scale(1.02);
  background: rgba(0, 140, 255, 0.2);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 0 25px rgba(0, 140, 255, 0.2);
  color: #38bdf8;
  letter-spacing: 0.17em;
}

.testimonials-eyebrow .eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #008cff;
  animation: dotPulseRadar 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
  transition: background-color 0.35s ease, transform 0.35s ease;
}

.testimonials-eyebrow:hover .eyebrow-dot {
  background: #38bdf8;
  transform: scale(1.2);
}

.testimonials-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

[data-theme="light"] .testimonials-title {
  color: #0f172a;
}

.clutch-rating-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              background 0.4s ease;
}

.clutch-rating-badge:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 8px 25px rgba(0, 140, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.clutch-text {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
  transition: color 0.3s ease;
}

.clutch-brand {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.clutch-stars {
  color: #ff4d4d;
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin: 2px 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.clutch-rating-badge:hover .clutch-stars {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(255, 77, 77, 0.6));
}

.clutch-count {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: #008cff;
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}

/* Auto-Moving Continuous Ticker Track (reads --drag-x so users can grab the
   row and drag it left/right with mouse or finger; auto-play is preserved) */
@keyframes testimonialsAutoMove {
  0% { transform: translateX(var(--drag-x, 0px)); }
  100% { transform: translateX(calc(var(--drag-x, 0px) - 50%)); }
}

.testimonials-ticker-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 15px 0 25px;
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  transition: opacity 0.5s ease;
}

.testimonials-ticker-track {
  display: flex;
  gap: 26px;
  width: max-content;
  will-change: transform;
  animation: testimonialsAutoMove 65s linear infinite;
  transition: animation-play-state 0.4s ease;
  cursor: grab;
  touch-action: pan-y;
}

.testimonials-ticker-track:hover {
  animation-play-state: paused;
}

.testimonials-ticker-track.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.testimonials-ticker-track.is-dragging .goji-testimonial-card {
  pointer-events: none;
}

/* Focus & Dimming Transitions on Track Hover */
.testimonials-ticker-track:hover .goji-testimonial-card {
  opacity: 0.65;
  transform: scale(0.985);
  filter: brightness(0.9);
}

.testimonials-ticker-track .goji-testimonial-card:hover {
  opacity: 1 !important;
  transform: translateY(-10px) scale(1.025) !important;
  filter: none !important;
  z-index: 10;
}

/* GojiLabs Testimonial Card Transition Architecture */
.goji-testimonial-card {
  width: 390px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 30px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s ease,
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.45s ease,
              opacity 0.4s ease,
              filter 0.4s ease;
}

/* Card Ambient Top Sheen Line */
.goji-testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: background 0.45s ease, opacity 0.45s ease;
  opacity: 0.5;
}

/* Dynamic Spotlight Sheen on Hover */
.goji-testimonial-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 0%), rgba(0, 140, 255, 0.2), transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 1;
}

.goji-testimonial-card:hover {
  border-color: rgba(0, 140, 255, 0.2);
  background: radial-gradient(circle at top left, rgba(0, 140, 255, 0.2) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: 0 22px 50px -10px rgba(0, 140, 255, 0.2),
              0 0 0 1px rgba(0, 140, 255, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.goji-testimonial-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.8), transparent);
  opacity: 1;
}

.goji-testimonial-card:hover::after {
  opacity: 1;
}

.card-brand-row {
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}

.brand-logo-text {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.35s ease, transform 0.35s ease;
}

.brand-symbol {
  color: #008cff;
  font-size: 1.15rem;
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.35s ease,
              text-shadow 0.35s ease;
}

.goji-testimonial-card:hover .brand-symbol {
  transform: rotate(18deg) scale(1.25);
  color: #00d2ff;
  text-shadow: 0 0 14px rgba(0, 210, 255, 0.8);
}

.goji-testimonial-card:hover .brand-logo-text {
  color: #ffffff;
  transform: translateX(2px);
}

.card-quote-text {
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 30px 0;
  flex-grow: 1;
  position: relative;
  z-index: 2;
  transition: color 0.35s ease, transform 0.35s ease;
}

.goji-testimonial-card:hover .card-quote-text {
  color: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

.card-author-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 2;
  transition: border-color 0.4s ease;
}

.goji-testimonial-card:hover .card-author-footer {
  border-top-color: rgba(0, 140, 255, 0.2);
}

.author-info-wrap {
  display: flex;
  align-items: center;
  gap: 13px;
}

.author-avatar-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  color: #008cff;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease,
              background 0.45s ease,
              color 0.45s ease;
}

.goji-testimonial-card:hover .author-avatar-badge {
  transform: scale(1.14) rotate(-6deg);
  background: rgba(0, 140, 255, 0.2);
  border-color: #00d2ff;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 140, 255, 0.2);
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.goji-testimonial-card:hover .author-name {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.author-role {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}

.goji-testimonial-card:hover .author-role {
  color: rgba(255, 255, 255, 0.75);
}

.card-learn-more {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: #008cff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.35s ease,
              text-shadow 0.35s ease;
}

.goji-testimonial-card:hover .card-learn-more {
  transform: translate(5px, -2px);
  color: #00d2ff;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.7);
}

/* Scroll Reveal Animation Styles (Bi-directional Observer) */
.testimonials-reveal-item {
  opacity: 0;
  transform: translateY(35px);
  will-change: opacity, transform;
  transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.testimonials-section.is-revealed .testimonials-reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Light Theme Enhancements for Client Experiences */
[data-theme="light"] .testimonials-section {
  background: #f8fafc;
  border-top-color: rgba(0, 0, 0, 0.06);
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .goji-testimonial-card {
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .goji-testimonial-card:hover {
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 1) 0%, rgba(240, 249, 255, 0.95) 100%);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 20px 40px -10px rgba(0, 140, 255, 0.2),
              0 0 0 1px rgba(0, 140, 255, 0.2);
}

[data-theme="light"] .brand-logo-text,
[data-theme="light"] .author-name {
  color: #0f172a;
}

[data-theme="light"] .card-quote-text {
  color: #334155;
}

[data-theme="light"] .goji-testimonial-card:hover .card-quote-text {
  color: #0f172a;
}

[data-theme="light"] .card-author-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .author-role {
  color: #64748b;
}

/* Light mode hover: keep all card text readable on white surfaces */
[data-theme="light"] .goji-testimonial-card:hover .brand-logo-text {
  color: #0f172a;
}

[data-theme="light"] .goji-testimonial-card:hover .brand-symbol {
  color: #0066ff;
  text-shadow: none;
}

[data-theme="light"] .goji-testimonial-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.2), transparent);
}

[data-theme="light"] .goji-testimonial-card:hover .author-name {
  color: #0f172a;
  text-shadow: none;
}

[data-theme="light"] .goji-testimonial-card:hover .author-role {
  color: #475569;
}

/* Responsive Rules for Testimonials */
@media (max-width: 768px) {
  .testimonials-section {
    padding: 80px 0 95px;
  }
  .testimonials-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
  }
  .clutch-rating-badge {
    align-items: flex-start;
  }
  .goji-testimonial-card {
    width: 320px;
    padding: 26px 22px;
  }
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .testimonials-eyebrow .eyebrow-dot,
  .testimonials-reveal-item,
  .testimonials-ticker-track {
    animation: none !important;
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
}

/* ==========================================================================
   MALIKAXIOM 5-STEP ENGINEERING PROCESS SECTION
   ========================================================================== */
.process-section {
  position: relative;
  padding: 112px 0;
  background: #04050a;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.process-container {
  position: relative;
  z-index: 2;
  max-width: 1240px;
}

/* Eyebrow */
.process-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #0066ff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 24px;
}

.process-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0066ff;
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.2);
}

.process-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

[data-theme="light"] .process-title {
  color: #0f172a;
}

.process-subheading {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto 64px;
}

[data-theme="light"] .process-subheading {
  color: rgba(15, 23, 42, 0.7);
}

/* Horizontal Process Journey Wrapper (Desktop/Tablet) */
.process-journey-wrapper {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

/* Base Gray Track & GPU-Accelerated ScaleX Electric Blue Progress Line */
.process-line-track {
  position: absolute;
  top: 24px;
  left: 70px;
  right: 70px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.process-line-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: #0066ff;
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.2);
  will-change: transform;
}

/* 5 Nodes Row */
.process-nodes-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 64px;
}

.process-node-btn {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  padding: 0;
  width: 140px;
  outline: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-node-btn:hover {
  transform: translateY(-2px);
}

.node-number {
  position: relative;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #04050a;
  border: 2px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: border-color 0.35s ease, color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.process-node-btn:hover .node-number {
  color: #ffffff;
  background: #09101f;
  border-color: #0066ff;
}

.process-node-btn.is-active .node-number {
  border-color: #0066ff;
  color: #ffffff;
  background: #0066ff;
  box-shadow: 0 0 16px rgba(0, 102, 255, 0.4);
}

.process-node-btn.is-passed .node-number {
  border-color: #0066ff;
  color: #0066ff;
  background: #060d1d;
}

.process-node-btn.is-passed .node-title {
  color: rgba(255, 255, 255, 0.75);
}

.node-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  transition: color 0.35s ease;
}

.process-node-btn:hover .node-title {
  color: rgba(255, 255, 255, 0.85);
}

.process-node-btn.is-active .node-title {
  color: #ffffff;
}

.node-sub {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.3;
  transition: color 0.35s ease;
}

.process-node-btn.is-active .node-sub {
  color: #0066ff;
}

/* Active Step Stage Display Panel */
.process-active-stage {
  position: relative;
  min-height: 200px;
  max-width: 760px;
  margin: 0 auto;
}

.process-step-content {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.process-step-content.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.active-step-meta {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #0066ff;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

.active-step-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

[data-theme="light"] .active-step-heading {
  color: #0f172a;
}

.active-step-description {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 24px;
}

[data-theme="light"] .active-step-description {
  color: rgba(15, 23, 42, 0.72);
}

.active-step-deliverable {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0066ff;
  padding: 8px 20px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease;
}

.active-step-deliverable:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 102, 255, 0.2);
  background: rgba(0, 102, 255, 0.2);
}

.deliverable-label {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 800;
  margin-right: 6px;
}

/* Mobile Vertical Timeline (< 768px) */
.process-mobile-timeline {
  display: none;
  position: relative;
  padding-left: 32px;
  text-align: left;
}

.mobile-timeline-track {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 14px;
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.mobile-timeline-item {
  position: relative;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-timeline-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

.mobile-node-dot {
  position: absolute;
  left: -32px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #04050a;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-timeline-item.is-active .mobile-node-dot {
  border-color: #0066ff;
  color: #ffffff;
  background: rgba(0, 102, 255, 0.2);
}

.mobile-step-tag {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  color: #0066ff;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.mobile-step-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.mobile-step-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

/* Bi-directional Scroll Reveal Styles with Stagger Delays & Micro-Parallax */
.process-reveal-eyebrow {
  opacity: 0;
  transform: translateY(calc(35px + var(--micro-parallax, 0px)));
  will-change: opacity, transform;
  transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-reveal-title {
  opacity: 0;
  transform: translateY(calc(45px + var(--micro-parallax, 0px)));
  will-change: opacity, transform;
  transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1) 100ms,
              transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 100ms;
}

.process-reveal-subheading {
  opacity: 0;
  transform: translateY(calc(35px + var(--micro-parallax, 0px)));
  will-change: opacity, transform;
  transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1) 200ms,
              transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}

.process-reveal-journey {
  opacity: 0;
  transform: translateY(calc(30px + var(--micro-parallax, 0px)));
  will-change: opacity, transform;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.process-section.is-revealed .process-reveal-eyebrow.in-view,
.process-section.is-revealed .process-reveal-title.in-view,
.process-section.is-revealed .process-reveal-subheading.in-view,
.process-section.is-revealed .process-reveal-journey.in-view {
  opacity: 1;
  transform: translateY(var(--micro-parallax, 0px));
}

/* Responsive Styles for Process Section (Active on all screens 320px - 4K) */
.process-mobile-timeline {
  display: none !important;
}

.process-journey-wrapper {
  display: block;
  width: 100%;
}

@media (max-width: 770px) {
  .process-section {
    padding: 65px 0 70px 0;
  }

  .process-header {
    margin-bottom: 32px;
  }

  .process-title {
    font-size: clamp(1.8rem, 6.2vw, 2.3rem);
    margin-bottom: 12px;
  }

  .process-subheading {
    font-size: 0.94rem;
    line-height: 1.6;
    margin-bottom: 32px;
    padding: 0 4px;
  }

  .process-nodes-row {
    margin-bottom: 30px;
    gap: 4px;
  }

  .process-node-btn {
    flex: 1 1 0px;
    min-width: 0;
    width: auto;
    padding: 4px 2px;
  }

  .node-number {
    width: 38px;
    height: 38px;
    font-size: 0.82rem;
    margin-bottom: 8px;
  }

  .process-line-track {
    top: 19px;
    left: 10%;
    right: 10%;
    height: 2px;
  }

  .node-title {
    font-size: 0.74rem;
    font-weight: 700;
    margin-bottom: 2px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .node-sub {
    font-size: 0.62rem;
    line-height: 1.25;
    display: block;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .process-active-stage {
    min-height: 180px;
    padding: 24px 18px 20px;
    border-radius: 20px;
    background: rgba(10, 14, 28, 0.75);
    border: 1px solid rgba(0, 102, 255, 0.2);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  [data-theme="light"] .process-active-stage {
    background: #ffffff;
    border: 1px solid rgba(10, 30, 60, 0.12);
    box-shadow: 0 12px 32px rgba(10, 30, 60, 0.08);
  }

  .active-step-meta {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }

  .active-step-heading {
    font-size: clamp(1.22rem, 4.5vw, 1.55rem);
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .active-step-description {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .active-step-deliverable {
    font-size: 0.75rem;
    padding: 7px 14px;
    line-height: 1.4;
    max-width: 100%;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .process-section {
    padding: 55px 0 60px 0;
  }

  .process-nodes-row {
    margin-bottom: 24px;
    gap: 2px;
  }

  .node-number {
    width: 34px;
    height: 34px;
    font-size: 0.76rem;
    margin-bottom: 6px;
  }

  .process-line-track {
    top: 17px;
    left: 10%;
    right: 10%;
  }

  .node-title {
    font-size: 0.68rem;
  }

  .node-sub {
    display: none;
  }

  .process-active-stage {
    padding: 20px 14px 18px;
    border-radius: 16px;
  }

  .active-step-meta {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
  }

  .active-step-heading {
    font-size: 1.18rem;
  }

  .active-step-description {
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 14px;
  }

  .active-step-deliverable {
    font-size: 0.72rem;
    padding: 6px 12px;
  }
}

@media (max-width: 360px) {
  .node-number {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
  }

  .process-line-track {
    top: 15px;
  }

  .node-title {
    font-size: 0.62rem;
  }

  .active-step-heading {
    font-size: 1.1rem;
  }
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .process-reveal-eyebrow,
  .process-reveal-title,
  .process-reveal-subheading,
  .process-reveal-journey,
  .process-line-fill,
  .process-step-content,
  .mobile-timeline-item {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   COMPREHENSIVE LIGHT THEME & SPACING REDUCTION SYSTEM
   Ultra-Crisp, High-End Porcelain Aesthetic (Silicon Valley Engineering Quality)
   ========================================================================== */

/* 1. Global Section Spacing Optimization (Compact & Intentional Rhythm) */
.section,
.services-section-v3,
.tech-matrix-section,
.why-malikaxiom-section,
.realworld-section,
.testimonials-section,
.process-section,
.founders-section,
.faq-section,
.final-cta-section {
  padding: 102px 0;
}

@media (max-width: 1024px) {
  .section,
  .services-section-v3,
  .tech-matrix-section,
  .why-malikaxiom-section,
  .realworld-section,
  .testimonials-section,
  .process-section,
  .founders-section,
  .faq-section,
  .final-cta-section {
    padding: 50px 0;
  }
}

@media (max-width: 768px) {
  .section,
  .services-section-v3,
  .tech-matrix-section,
  .why-malikaxiom-section,
  .realworld-section,
  .testimonials-section,
  .process-section,
  .founders-section,
  .faq-section,
  .final-cta-section {
    padding: 40px 0;
  }
}

/* 2. Ultra-Crisp Light Mode Theme Overrides ([data-theme="light"]) */
[data-theme="light"] {
  background-color: #ffffff;
  color: #0f172a;
}

/* Header & Navigation in Light Mode */
[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(10, 30, 60, 0.12);
  box-shadow: 0 4px 20px rgba(10, 30, 60, 0.06);
}

[data-theme="light"] .nav-link {
  color: #333333;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  color: #0066ff;
  background: rgba(10, 10, 10, 0.04);
}

/* Hero Section in Light Mode */
[data-theme="light"] .hero-badge {
  background: rgba(10, 10, 10, 0.04);
  border: 1px solid rgba(10, 10, 10, 0.1);
  color: #0066ff;
}

[data-theme="light"] .hero-title {
  color: #0f172a;
}

[data-theme="light"] .hero {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 1) 60%, #fafafa 100%);
}
[data-theme="light"] .hero-grid-layer {
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.05) 1px, transparent 1px);
}

@media (prefers-reduced-motion: reduce) {
  #heroCanvas { opacity: 0.6; }
}

/* Mobile optimization: lighter grid, calmer motion */
@media (max-width: 768px) {
  .hero-grid-layer {
    background-size: clamp(44px, 12vw, 60px) clamp(44px, 12vw, 60px);
    opacity: 0.6;
  }
  .hero-read-zone { top: 10%; height: 68%; }
}

[data-theme="light"] .hero-subtitle {
  color: #475569;
}

[data-theme="light"] .hero-capability-pill {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.1);
  color: #0a0a0a;
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.04);
}

[data-theme="light"] .pill-sub {
  color: #555555;
}

/* Services Section in Light Mode */
[data-theme="light"] .services-section-v3 {
  background: #ffffff;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

[data-theme="light"] .service-row-v2 {
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

[data-theme="light"] .service-name-v2 {
  color: #0a0a0a;
}

[data-theme="light"] .service-desc-v2 {
  color: #333333;
}

/* Services Section Toggle Button (VIEW ALL SERVICES / SHOW LESS) in Light Mode */
[data-theme="light"] .services-toggle-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 102, 255, 0.25) !important;
  color: #0066ff !important;
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.08) !important;
}

[data-theme="light"] .services-toggle-btn .btn-icon {
  color: #0066ff !important;
}

[data-theme="light"] .services-toggle-btn:hover {
  background: rgba(0, 102, 255, 0.06) !important;
  border-color: #0066ff !important;
  color: #0066ff !important;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.15) !important;
}

[data-theme="light"] .services-toggle-btn.is-expanded {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(0, 102, 255, 0.25) !important;
}

[data-theme="light"] .services-toggle-btn.is-expanded .btn-icon {
  color: #ffffff !important;
}

[data-theme="light"] .services-toggle-btn.is-expanded:hover {
  background: #0052cc !important;
  border-color: #0052cc !important;
  color: #ffffff !important;
  box-shadow: 0 8px 26px rgba(0, 102, 255, 0.3) !important;
}

/* Tech Matrix Section in Light Mode */
[data-theme="light"] .tech-matrix-section {
  background: #ffffff;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

[data-theme="light"] .tech-cat-btn {
  background: #fafafa;
  color: #333333;
  border: 1px solid rgba(10, 10, 10, 0.08);
}

[data-theme="light"] .tech-cat-btn.active {
  background: #0066ff;
  color: #ffffff;
  border-color: #0066ff;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .tech-card-v2 {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.02);
}

[data-theme="light"] .tech-card-v2:hover {
  background: #ffffff;
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .tech-name-v2 {
  color: #0a0a0a;
}

[data-theme="light"] .tech-role-v2 {
  color: #555555;
}

/* Why Choose Us Section in Light Mode */
[data-theme="light"] .why-malikaxiom-section {
  background: #ffffff;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

[data-theme="light"] .statement-pill {
  background: rgba(10, 10, 10, 0.04);
  border: 1px solid rgba(10, 10, 10, 0.1);
  color: #0066ff;
}

[data-theme="light"] .statement-title {
  color: #0a0a0a;
}

[data-theme="light"] .difference-card,
[data-theme="light"] .philosophy-card {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 4px 20px rgba(10, 10, 10, 0.03);
}

[data-theme="light"] .difference-title,
[data-theme="light"] .philosophy-author-name {
  color: #0a0a0a;
}

[data-theme="light"] .difference-desc,
[data-theme="light"] .philosophy-quote {
  color: #333333;
}

/* Proven Expertise Showcase in Light Mode */
[data-theme="light"] .realworld-section {
  background: #ffffff;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

/* Light mode: veil the cinematic team photo behind a premium porcelain surface so the
   navy text keeps strong readability while the photographic texture stays subtle */
[data-theme="light"] .realworld-bg-img {
  opacity: 0.22;
}

[data-theme="light"] .realworld-bg-overlay {
  background: radial-gradient(ellipse at 50% 50%, rgba(248, 250, 252, 0.88) 0%, rgba(248, 250, 252, 0.97) 100%),
              linear-gradient(to bottom, #f8fafc 0%, transparent 20%, transparent 80%, #f8fafc 100%);
}

[data-theme="light"] .realworld-title {
  color: #0f172a;
}

[data-theme="light"] .realworld-title .highlight-text {
  color: #0f172a;
}

[data-theme="light"] .realworld-desc {
  color: #475569;
}

[data-theme="light"] .realworld-cta-link {
  color: #0f172a;
}

[data-theme="light"] .realworld-cta-link:hover {
  color: #0066ff;
}

[data-theme="light"] .realworld-headline-wrapper .laurel-wreath {
  stroke: #0066ff;
  filter: drop-shadow(0 0 10px rgba(0, 102, 255, 0.2));
}

[data-theme="light"] .laurel-wreath {
  fill: #0066ff;
}

[data-theme="light"] .accreditation-card {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.02);
}

[data-theme="light"] .accreditation-label {
  color: #0a0a0a;
}

[data-theme="light"] .accreditation-sub {
  color: #555555;
}

/* Client Experiences Testimonials in Light Mode */
[data-theme="light"] .testimonials-section {
  background: #ffffff;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

[data-theme="light"] .testimonials-title {
  color: #0f172a;
}

[data-theme="light"] .testimonials-subheading {
  color: #475569;
}

[data-theme="light"] .goji-testimonial-card {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.1);
  box-shadow: 0 4px 20px rgba(10, 30, 60, 0.05);
}

[data-theme="light"] .card-quote-text {
  color: #334155;
}

[data-theme="light"] .author-name {
  color: #0f172a;
}

[data-theme="light"] .author-role {
  color: #64748b;
}

[data-theme="light"] .author-avatar-badge {
  background: rgba(0, 102, 255, 0.2);
  color: #0066ff;
  border: 1px solid rgba(0, 102, 255, 0.2);
}

/* Our Process Section in Light Mode */
[data-theme="light"] .process-section {
  background: #ffffff;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

[data-theme="light"] .process-title {
  color: #0f172a;
}

[data-theme="light"] .process-subheading {
  color: rgba(71, 85, 105, 0.75);
}

[data-theme="light"] .process-line-track {
  background: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .node-number {
  background: #ffffff;
  border: 2px solid rgba(10, 30, 60, 0.18);
  color: #475569;
}

[data-theme="light"] .process-node-btn.is-active .node-number {
  border-color: #0066ff;
  color: #ffffff;
  background: #0066ff;
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .process-node-btn.is-passed .node-number {
  border-color: #0066ff;
  color: #0066ff;
  background: #eef5ff;
}

[data-theme="light"] .process-node-btn.is-passed .node-title {
  color: #334155;
}

[data-theme="light"] .node-title {
  color: #1e293b;
}

[data-theme="light"] .process-node-btn.is-active .node-title {
  color: #0f172a;
}

[data-theme="light"] .node-sub {
  color: rgba(71, 85, 105, 0.8);
}

[data-theme="light"] .process-node-btn.is-active .node-sub {
  color: #0066ff;
}

/* Light mode: keep node text readable on hover (solid opaque ice blue) */
[data-theme="light"] .process-node-btn:not(.is-active):hover .node-number {
  color: #0066ff;
  background: #e6f0fd;
  border-color: #0066ff;
}

[data-theme="light"] .process-node-btn:not(.is-active):hover .node-title {
  color: #0066ff;
}

[data-theme="light"] .active-step-heading {
  color: #0f172a;
}

[data-theme="light"] .active-step-description {
  color: rgba(71, 85, 105, 0.85);
}

[data-theme="light"] .active-step-deliverable {
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  color: #0066ff;
}

[data-theme="light"] .deliverable-label {
  color: #64748b;
}

[data-theme="light"] .mobile-node-dot {
  background: #ffffff;
  border: 2px solid rgba(10, 30, 60, 0.18);
  color: #475569;
}

[data-theme="light"] .mobile-timeline-item.is-active .mobile-node-dot {
  border-color: #0066ff;
  color: #ffffff;
  background: #0066ff;
}

[data-theme="light"] .mobile-timeline-track {
  background: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .mobile-step-title {
  color: #0f172a;
}

[data-theme="light"] .mobile-step-text {
  color: rgba(71, 85, 105, 0.85);
}

/* FAQ Accordion Section in Light Mode */
[data-theme="light"] #faq {
  background: #ffffff !important;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

[data-theme="light"] .faq-item {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.02);
}

[data-theme="light"] .faq-question {
  color: #0a0a0a;
}

[data-theme="light"] .faq-answer {
  color: #333333;
}

/* Footer in Light Mode */
[data-theme="light"] .footer {
  background: #ffffff;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  color: #333333;
}

[data-theme="light"] .footer-logo-title {
  color: #0a0a0a;
}

[data-theme="light"] .footer-link {
  color: #333333;
}

[data-theme="light"] .footer-link:hover {
  color: #0066ff;
}

/* ==========================================================================
   MALIKAXIOM EDITORIAL FOUNDERS SECTION STYLING (EXECUTIVE LUXURY REDESIGN)
   ========================================================================== */
.founders-section {
  position: relative;
  padding: 102px 0;
  background: #030408;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.founders-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}

/* Eyebrow */
.founders-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #0066ff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 24px;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              color 0.4s ease;
}

.founders-eyebrow:hover {
  transform: translateY(-3px) scale(1.03);
  background: rgba(0, 102, 255, 0.2);
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 8px 28px rgba(0, 102, 255, 0.2);
  color: #ffffff;
}

.founders-eyebrow .eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0066ff;
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.2);
  transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.founders-eyebrow:hover .eyebrow-dot {
  transform: scale(1.4);
  background: #ffffff;
  box-shadow: 0 0 16px rgba(0, 0.202, 255, 0.2);
}

.founders-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

.founders-subheading {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.72;
  max-width: 740px;
  margin: 0 auto 68px;
}

/* Executive Leadership Profiles 2-Column Grid Redesign */
.founders-profiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  max-width: 1040px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .founders-profiles-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.founder-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 48px 40px 42px;
  border-radius: 24px;
  background: rgba(10, 14, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease, 
              box-shadow 0.4s ease,
              background 0.4s ease;
}

.founder-card-v2::before {
  display: none;
}

.founder-card-top-beam {
  display: none;
}

.founder-watermark-num {
  position: absolute;
  top: 16px;
  right: 28px;
  font-family: var(--font-heading);
  font-size: 6.5rem;
  font-weight: 900;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 102, 255, 0.2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.5s ease, background 0.5s ease;
}

.founder-card-v2:hover .founder-watermark-num {
  transform: scale(1.05);
  background: linear-gradient(180deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 102, 255, 0.2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.founder-card-v2:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(14, 18, 34, 0.95);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.founder-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.founder-v2-name {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}

.founder-v2-role {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #0066ff;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.founder-v2-bio {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
}

.founder-v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.founder-v2-tag {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.founder-card-v2:hover .founder-v2-tag {
  background: rgba(0, 102, 255, 0.2);
  border-color: rgba(0, 102, 255, 0.2);
  color: #ffffff;
}

.founder-card-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 102, 255, 0.2) 50%, transparent 100%);
  margin-top: auto;
  margin-bottom: 24px;
}

.founder-v2-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  width: 100%;
}

.founder-profile-card {
  position: relative;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
  padding: 44px 48px;
  border-radius: 24px;
  background: radial-gradient(circle at 85% 15%, rgba(0, 140, 255, 0.2) 0%, rgba(7, 10, 20, 0.85) 75%);
  border: 1px solid rgba(0, 140, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}

.founder-profile-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #008cff 0%, rgba(0, 140, 255, 0.2) 100%);
  border-radius: 99px 0 0 99px;
  opacity: 0.8;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.founder-profile-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 140, 255, 0.2), transparent);
  transform: skewX(-20deg);
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.founder-profile-card:hover::after {
  left: 150%;
}

.founder-profile-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 24px 60px rgba(0, 140, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.founder-profile-card:hover::before {
  opacity: 1;
  width: 6px;
}

/* Photo Column / Avatar Frame */
.founder-photo-column,
.founder-avatar-wrap {
  width: 100%;
}

.founder-photo-wrapper,
.founder-avatar-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #0d1224 0%, #04060d 100%);
  border: 1px solid rgba(0, 140, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.founder-portrait-img,
.founder-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) brightness(0.95);
  transition: filter 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.founder-profile-card:hover .founder-portrait-img,
.founder-profile-card:hover .founder-photo-img {
  filter: contrast(1.08) brightness(1.02);
  transform: scale(1.03);
}

.founder-photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(circle at center, rgba(0, 140, 255, 0.2) 0%, #050814 80%);
  border: 1px solid rgba(0, 140, 255, 0.2);
}

.fallback-initials {
  font-family: var(--font-heading);
  font-size: 3.8rem;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 30%, #008cff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  filter: drop-shadow(0 0 16px rgba(0, 140, 255, 0.2));
}

.fallback-badge,
.founder-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #008cff;
  letter-spacing: 0.12em;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.fallback-badge::before,
.founder-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #008cff;
  box-shadow: 0 0 8px #008cff;
}

/* Content Area */
.founder-content-column,
.founder-info-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.founder-meta-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.founder-index-num {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 900;
  color: #008cff;
  letter-spacing: -0.04em;
  line-height: 1;
}

.founder-roles-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.founder-primary-role {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  color: #008cff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.founder-secondary-role {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.founder-name {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.founder-bio {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 24px;
}

/* Focus / Expertise Tags */
.founder-tags-list,
.founder-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.founder-tag {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(0, 140, 255, 0.2);
  transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.founder-tag:hover,
.founder-profile-card:hover .founder-tag {
  border-color: #008cff;
  color: #ffffff;
  background: rgba(0, 140, 255, 0.2);
  box-shadow: 0 4px 14px rgba(0, 140, 255, 0.2);
}

/* Action Buttons */
.founder-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-founder-primary,
.btn-founder-portfolio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 9999px;
  background: #0066ff !important;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 20px rgba(0, 140, 255, 0.2);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.btn-founder-primary:hover,
.btn-founder-portfolio:hover {
  background: #0077e6;
  transform: translateY(-2.5px);
  box-shadow: 0 10px 28px rgba(0, 140, 255, 0.2);
}

.btn-founder-primary .btn-arrow,
.btn-founder-portfolio .btn-arrow {
  transition: transform 0.3s ease;
}

.btn-founder-primary:hover .btn-arrow,
.btn-founder-portfolio:hover .btn-arrow {
  transform: translateX(6px);
}

.btn-founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 119, 181, 0.2);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: transform 0.35s ease, border-color 0.35s ease, color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.btn-founder-linkedin:hover {
  background: rgba(0, 119, 181, 0.2);
  border-color: #0077b5;
  color: #0077b5;
  transform: translateY(-2.5px);
  box-shadow: 0 6px 20px rgba(0, 119, 181, 0.2);
}

.btn-founder-linkedin .btn-arrow {
  transition: transform 0.3s ease;
}

.btn-founder-linkedin:hover .btn-arrow {
  transform: translateX(6px);
}

/* Bi-directional Scroll Reveal Styles for Founders (Ultra-Smooth 1.5s Motion) */
.founders-reveal-item {
  opacity: 0;
  transform: translateY(60px) scale(0.93);
  filter: blur(8px);
  will-change: opacity, transform, filter;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 1.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.founders-section.is-revealed .founders-reveal-item.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Responsive Rules for Founders */
@media (max-width: 1024px) {
  .founder-profile-card {
    grid-template-columns: 280px 1fr;
    gap: 32px;
    padding: 32px;
  }
}

@media (max-width: 768px) {
  .founder-profile-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px;
  }

  .founder-photo-wrapper {
    max-width: 260px;
    margin: 0 auto;
  }

  .founder-actions {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.85rem;
  }
}

/* Light Mode Overrides for Founders Section */
[data-theme="light"] .founders-section {
  background: #f8fafc;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
}

[data-theme="light"] .founders-title {
  color: #0f172a;
}

[data-theme="light"] .founders-subheading {
  color: #475569;
}

[data-theme="light"] .founder-profile-card {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 4px 20px rgba(10, 10, 10, 0.03);
}

[data-theme="light"] .founder-profile-card:hover {
  background: #ffffff;
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 12px 32px rgba(0, 102, 255, 0.2);
}

[data-theme="light"] .founder-name {
  color: #0a0a0a;
}

[data-theme="light"] .founder-bio {
  color: #333333;
}

[data-theme="light"] .founder-secondary-role {
  color: #555555;
}

[data-theme="light"] .founder-tag {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  color: #333333;
}

[data-theme="light"] .btn-founder-linkedin {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.12);
  color: #0a0a0a;
}

[data-theme="light"] .btn-founder-linkedin:hover {
  background: rgba(10, 10, 10, 0.04);
  border-color: #0066ff;
  color: #0066ff;
}

/* Dark Mode: Reduce Glow Effects for Better Visibility */
[data-theme="dark"] .founder-profile-card {
  background: radial-gradient(circle at 85% 15%, rgba(0, 140, 255, 0.2) 0%, rgba(7, 10, 20, 0.85) 75%);
  border: 1px solid rgba(0, 140, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .founder-profile-card:hover {
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .founder-profile-card::before {
  background: linear-gradient(180deg, #008cff 0%, rgba(0, 140, 255, 0.2) 100%);
  opacity: 0.5;
}

[data-theme="dark"] .founder-profile-card::after {
  background: linear-gradient(90deg, transparent, rgba(0, 140, 255, 0.2), transparent);
}

[data-theme="dark"] .btn-founder-primary,
[data-theme="dark"] .btn-founder-portfolio {
  box-shadow: 0 2px 10px rgba(0, 140, 255, 0.2);
}

[data-theme="dark"] .btn-founder-primary:hover,
[data-theme="dark"] .btn-founder-portfolio:hover {
  box-shadow: 0 4px 15px rgba(0, 140, 255, 0.2);
}

[data-theme="dark"] .founder-tag {
  border: 1px solid rgba(0, 140, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .founder-tag:hover,
[data-theme="dark"] .founder-profile-card:hover .founder-tag {
  border-color: rgba(0, 140, 255, 0.2);
  background: rgba(0, 140, 255, 0.2);
  box-shadow: none;
}

[data-theme="dark"] .fallback-initials {
  filter: drop-shadow(0 0 8px rgba(0, 140, 255, 0.2));
}

/* Small Screen Responsive: Better Button Sizing */
@media (max-width: 480px) {
  .founder-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.85rem;
  }

  .founder-profile-card {
    padding: 20px;
    gap: 20px;
  }

  .founder-photo-wrapper {
    max-width: 200px;
    margin: 0 auto;
  }

  .founder-tag {
    font-size: 0.7rem;
    padding: 5px 12px;
  }
}

@media (max-width: 375px) {
  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    padding: 12px 16px;
    font-size: 0.8rem;
  }

  .founder-profile-card {
    padding: 16px;
  }
}

/* Accessibility: Prefers Reduced Motion for Founders */
@media (prefers-reduced-motion: reduce) {
  .founders-reveal-item,
  .founder-portrait-img,
  .founder-profile-card {
    animation: none !important;
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
}

/* ==========================================================================
   MALIKAXIOM PREMIUM FAQ SECTION ACCORDION STYLING
   ========================================================================== */
.faq-section {
  position: relative;
  padding: 92px 0;
  background: #04050a;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-container {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}

/* Eyebrow */
.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #008cff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 24px;
}

.faq-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #008cff;
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.2);
}

.faq-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.8vw, 3.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.faq-subheading {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0 auto 50px auto;
  max-width: 620px;
}

[data-theme="light"] .faq-subheading {
  color: #64748b;
}

/* Accordion List */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background-color 0.35s ease;
}

.faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 140, 255, 0.2);
}

.faq-item.is-active {
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 0 16px rgba(0, 140, 255, 0.2);
  background: rgba(255, 255, 255, 0.028);
}

/* Button & Chevron */
.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.faq-question-text {
  font-family: var(--font-heading);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  transition: color 0.3s ease;
}

.faq-item.is-active .faq-question-text {
  color: #ffffff;
}

.faq-chevron {
  color: #008cff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-active .faq-chevron {
  transform: rotate(180deg);
}

/* Answer Wrapper & Content */
.faq-answer-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
  opacity: 0;
}

.faq-item.is-active .faq-answer-wrapper {
  opacity: 1;
}

.faq-answer-content {
  padding: 0 28px 24px 28px;
}

.faq-answer-content p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

/* Bi-directional Scroll Reveal Styles for FAQ Cards */
.faq-reveal-item {
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.faq-item.faq-reveal-item,
.faq-item {
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              border-color 0.35s ease, box-shadow 0.35s ease;
}

.faq-section.is-revealed .faq-reveal-item.in-view,
.faq-section.is-revealed .faq-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Rules for FAQ */
@media (max-width: 768px) {
  .faq-question-btn {
    padding: 16px 18px;
  }
  .faq-answer-content {
    padding: 0 18px 18px 18px;
  }
  /* Mobile: Show only 3 main FAQ questions */
  .faq-list .faq-item:nth-child(n+4),
  .faq-accordion .faq-item:nth-child(n+4),
  .about-faq-wrap .faq-item:nth-child(n+4),
  .faq-section .faq-item:nth-child(n+4) {
    display: none !important;
  }
}

/* Light Mode Overrides for FAQ Section */
[data-theme="light"] .faq-section {
  background: #ffffff;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
}

[data-theme="light"] .faq-title {
  color: #0f172a;
}

[data-theme="light"] .faq-item {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.1);
  box-shadow: 0 2px 10px rgba(10, 30, 60, 0.03);
}

[data-theme="light"] .faq-item:hover {
  border-color: rgba(0, 102, 255, 0.3) !important;
  background: #ffffff !important;
}

[data-theme="light"] .faq-item.is-active {
  border-color: #0066ff;
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.2);
  background: #ffffff;
}

[data-theme="light"] .faq-question-text {
  color: #1e293b;
}

[data-theme="light"] .faq-item.is-active .faq-question-text {
  color: #0066ff;
}

[data-theme="light"] .faq-answer-content p {
  color: #475569;
}

/* Accessibility: Prefers Reduced Motion for FAQ */
@media (prefers-reduced-motion: reduce) {
  .faq-reveal-item,
  .faq-item,
  .faq-chevron,
  .faq-answer-wrapper {
    animation: none !important;
    transform: none !important;
  transition: opacity 0.4s ease !important;
  }
}

/* ==========================================================================
   MALIKAXIOM FINAL CTA CLOSING SECTION STYLING (MINIMALIST EXECUTIVE V3)
   ========================================================================== */
.final-cta-section {
  position: relative;
  padding: 102px 0;
  background: #04050a;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.final-cta-ambient-glow,
.final-cta-orb-1,
.final-cta-orb-2,
.final-cta-line-accent {
  display: none !important;
}

.final-cta-container {
  position: relative;
  z-index: 3;
  max-width:  1280px;
  margin: 0 auto;
}

.final-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  box-shadow: none;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.final-cta-card::after {
  display: none !important;
}

.final-cta-card:hover {
  transform: translateY(-3px);
  box-shadow: none;
  border-color: rgba(0, 102, 255, 0.2);
}

/* Eyebrow Pill */
.final-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2) !important;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #0066ff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 24px;
  cursor: default;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.final-cta-eyebrow:hover {
  transform: translateY(-2px);
  background: rgba(0, 102, 255, 0.2);
  border-color: rgba(0, 102, 255, 0.2) !important;
  color: #ffffff;
}

.final-cta-eyebrow .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0066ff;
}

/* Title */
.final-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  max-width:  980px;
}

.final-cta-gradient-text {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: initial;
  filter: none;
}

/* Subheading */
.final-cta-subheading {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.7;
  max-width:  880px;
  margin: 0 auto 40px;
}

/* Final CTA 2-Button Action Container */
.final-cta-actions-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.btn-cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 9999px;
  background: #0066ff !important;
  color: #ffffff !important;
  border: none !important;
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0, 102, 255, 0.2) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease !important;
}

.btn-cta-primary::after {
  display: none !important;
}

.btn-cta-primary:hover {
  background: #0055cc !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0, 102, 255, 0.2) !important;
}

.btn-cta-primary .btn-arrow {
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-cta-primary:hover .btn-arrow {
  transform: translateX(6px);
}

.btn-talk-team {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease !important;
}

.btn-talk-team:hover {
  background: transparent !important;
  border-color: rgba(0, 102, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateY(-3px);
}

.btn-talk-team .cta-btn-icon {
  transition: transform 0.3s ease;
}

.btn-talk-team:hover .cta-btn-icon {
  transform: none;
}

/* Contact Channel Options Modal Pop-Up */
.contact-options-modal-container {
  max-width: 580px;
  width: 90%;
  padding: 38px 36px;
  border-radius: 24px;
  background: radial-gradient(circle at top right, rgba(0, 102, 255, 0.2) 0%, rgba(6, 8, 16, 0.96) 75%);
  border: 1px solid rgba(0, 102, 255, 0.2);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.contact-modal-header {
  margin-bottom: 26px;
}

.contact-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 9999px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0066ff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-modal-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.contact-modal-sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.contact-channels-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.channel-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  color: #ffffff;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.channel-card:hover {
  transform: translateY(-2.5px);
  border-color: rgba(0, 102, 255, 0.2);
  background: rgba(0, 102, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.2);
}

.channel-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 102, 255, 0.2);
  color: #0066ff;
  border: 1px solid rgba(0, 102, 255, 0.2);
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.channel-whatsapp .channel-icon-wrap {
  background: rgba(37, 211, 102, 0.2);
  color: #25d366;
  border-color: rgba(37, 211, 102, 0.2);
}

.channel-card:hover .channel-icon-wrap {
  transform: scale(1.08);
}

.channel-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.channel-title {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 700;
  color: #ffffff;
}

.channel-desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

.channel-arrow {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease, color 0.3s ease;
}

.channel-card:hover .channel-arrow {
  transform: translateX(5px);
  color: #0066ff;
}
.final-cta-secondary-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cta-contact-label {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cta-contact-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 140, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.btn-cta-secondary:hover {
  background: rgba(0, 140, 255, 0.2);
  border-color: #008cff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(0, 140, 255, 0.2);
}

.btn-cta-secondary.cta-whatsapp-btn:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.2);
  color: #25d366;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.2);
}

.cta-btn-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn-cta-secondary:hover .cta-btn-icon {
  transform: scale(1.1);
}

/* Bi-directional Scroll Reveal Styles for Final CTA */
.final-cta-reveal-item {
  opacity: 0;
  transform: translateY(36px);
  will-change: opacity, transform;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.final-cta-section.is-revealed .final-cta-reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Rules for Final CTA */
@media (max-width: 768px) {
  .final-cta-section {
    padding: 70px 0 80px;
  }
  .final-cta-card {
    padding: 60px 28px;
  }
  .final-cta-actions-wrap,
  .final-cta-actions {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  .btn-cta-primary,
  .btn-talk-team,
  .btn-cta-secondary {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .final-cta-card {
    padding: 44px 18px;
    border-radius: 20px;
  }
  .btn-cta-primary,
  .btn-talk-team,
  .btn-cta-secondary {
    padding: 13px 20px;
    font-size: 0.88rem;
  }
}

@media (max-width: 350px) {
  .final-cta-card {
    padding: 32px 12px;
    border-radius: 16px;
  }
  .final-cta-title {
    font-size: 1.35rem;
  }
  .btn-cta-primary,
  .btn-talk-team,
  .btn-cta-secondary {
    padding: 11px 12px;
    font-size: 0.8rem;
    gap: 6px;
  }
}

/* Light Mode Overrides for Final CTA Section */
[data-theme="light"] .final-cta-section {
  background: #fbfdff;
  border-top: 1px solid rgba(10, 30, 60, 0.08);
}

[data-theme="light"] .final-cta-card {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.12);
  box-shadow: 0 24px 70px rgba(10, 30, 60, 0.08);
}
[data-theme="light"] .final-cta-card:hover {
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 28px 80px rgba(0, 102, 255, 0.2);
}
[data-theme="light"] .final-cta-title {
  color: #0f172a;}







[data-theme="light"] .final-cta-subheading {
  color: rgba(71, 85, 105, 0.85);
}

[data-theme="light"] .btn-cta-secondary {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.16);
  color: #0f172a;
}

[data-theme="light"] .btn-cta-secondary:hover {
  background: rgba(0, 102, 255, 0.2);
  border-color: #0066ff;
  color: #0066ff;
}

/* Eyebrow hover stays readable on the light card */
[data-theme="light"] .final-cta-eyebrow:hover {
  color: #0066ff;
  background: rgba(0, 102, 255, 0.2);
}

/* Accessibility: Prefers Reduced Motion for Final CTA */
@media (prefers-reduced-motion: reduce) {
  .final-cta-reveal-item,
  .btn-cta-primary,
  .btn-cta-secondary {
    animation: none !important;
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
}

/* ==========================================================================
   MALIKAXIOM PREMIUM CONTACT & SOCIAL FOOTER STYLING
   ========================================================================== */
.footer {
  position: relative;
  padding: 77px 0 32px;
  background: #04050a;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-container {
  position: relative;
  z-index: 2;
}

/* 4-Column Grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.1fr 1.4fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20px;
  height: 2px;
  background: #0066ff;
  border-radius: 99px;
}

/* Brand Column */
.footer-brand-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 18px 0 20px;
  max-width: 340px;
}

.footer-location-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-location-badge .location-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #008cff;
  box-shadow: 0 0 8px rgba(0, 140, 255, 0.2);
}

/* Navigation Lists */
.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
}

.footer-nav-link:hover {
  color: #008cff;
  transform: translateX(4px);
}

/* Contact Buttons Grid */
.footer-contact-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.footer-contact-btn:hover {
  background: rgba(0, 140, 255, 0.2);
  border-color: rgba(0, 140, 255, 0.2);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 140, 255, 0.2);
}

.footer-contact-btn.btn-whatsapp-accent:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.2);
  color: #25d366;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.2);
}

.contact-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.footer-contact-btn:hover .contact-icon {
  transform: scale(1.1);
}

/* Social Block */
.footer-social-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.social-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
}

.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Social Media Follow Buttons — Official Brand Colors (Dark & Light) */
.social-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.25s ease,
              background 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease;
}

/* Base icon colors in Dark Mode */
.social-icon-btn.social-linkedin { color: #0a66c2; }
.social-icon-btn.social-whatsapp { color: #25d366; }
.social-icon-btn.social-facebook,
.social-icon-btn.social-facebook-accent { color: #1877f2; }
.social-icon-btn.social-instagram { color: #e4405f; }
.social-icon-btn.social-youtube { color: #ff0000; }
.social-icon-btn.social-tiktok { color: #fe2c55; }
.social-icon-btn.social-github { color: #ffffff; }
.social-icon-btn.social-twitter,
.social-icon-btn.social-x { color: #1da1f2; }

/* Light Mode Base State for Social Icons & FOLLOW US Label */
[data-theme="light"] .social-label {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .social-icon-btn {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .social-icon-btn.social-linkedin { color: #0a66c2 !important; }
[data-theme="light"] .social-icon-btn.social-whatsapp { color: #25d366 !important; }
[data-theme="light"] .social-icon-btn.social-facebook,
[data-theme="light"] .social-icon-btn.social-facebook-accent { color: #1877f2 !important; }
[data-theme="light"] .social-icon-btn.social-instagram { color: #e4405f !important; }
[data-theme="light"] .social-icon-btn.social-youtube { color: #ff0000 !important; }
[data-theme="light"] .social-icon-btn.social-tiktok { color: #000000 !important; }
[data-theme="light"] .social-icon-btn.social-github { color: #181717 !important; }
[data-theme="light"] .social-icon-btn.social-twitter,
[data-theme="light"] .social-icon-btn.social-x { color: #0f1419 !important; }

/* ── Specific Brand Hover States with Original Brand Colors & Glows (Dark & Light) ── */
.social-icon-btn.social-linkedin:hover,
[data-theme="light"] .social-icon-btn.social-linkedin:hover {
  background: #0a66c2 !important;
  border-color: #0a66c2 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(10, 102, 194, 0.5) !important;
}

.social-icon-btn.social-whatsapp:hover,
[data-theme="light"] .social-icon-btn.social-whatsapp:hover {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5) !important;
}

.social-icon-btn.social-facebook:hover,
.social-icon-btn.social-facebook-accent:hover,
[data-theme="light"] .social-icon-btn.social-facebook:hover,
[data-theme="light"] .social-icon-btn.social-facebook-accent:hover {
  background: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.5) !important;
}

.social-icon-btn.social-instagram:hover,
[data-theme="light"] .social-icon-btn.social-instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border-color: #dc2743 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(220, 39, 67, 0.5) !important;
}

.social-icon-btn.social-youtube:hover,
[data-theme="light"] .social-icon-btn.social-youtube:hover {
  background: #ff0000 !important;
  border-color: #ff0000 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5) !important;
}

.social-icon-btn.social-tiktok:hover,
[data-theme="light"] .social-icon-btn.social-tiktok:hover {
  background: #000000 !important;
  border-color: #fe2c55 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(254, 44, 85, 0.5), 0 0 10px rgba(37, 244, 238, 0.4) !important;
}

.social-icon-btn.social-github:hover,
[data-theme="light"] .social-icon-btn.social-github:hover {
  background: #24292e !important;
  border-color: #24292e !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

.social-icon-btn.social-twitter:hover,
.social-icon-btn.social-x:hover,
[data-theme="light"] .social-icon-btn.social-twitter:hover,
[data-theme="light"] .social-icon-btn.social-x:hover {
  background: #000000 !important;
  border-color: #1da1f2 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(29, 161, 242, 0.45) !important;
}

/* Compact Contact CTA Strip — Clean & Elegant */
.footer-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 40px;
  gap: 20px;
  flex-wrap: wrap;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.footer-cta-strip:hover {
  transform: translateY(-2px);
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(0, 102, 255, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.strip-text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.strip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #008cff;
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.2);
}

.strip-heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.strip-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.strip-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 9999px;
  background: #0066ff;
  color: #ffffff;
  border: none;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.2);
  transition: transform 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}

.strip-btn-primary:hover {
  background: #0055cc;
  transform: translateY(-2px);
}

.strip-btn-primary .btn-arrow {
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.25s ease;
}

.strip-btn-primary:hover .btn-arrow {
  transform: translateX(4px);
}

.strip-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.strip-btn-secondary:hover {
  border-color: rgba(0, 140, 255, 0.2);
  color: #ffffff;
  transform: translateY(-2px);
}

.strip-btn-secondary.strip-whatsapp-accent:hover {
  border-color: rgba(37, 211, 102, 0.2);
  color: #25d366;
}

/* Footer Bottom Copyright */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legal-link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.25s ease;
}

.legal-link:hover {
  color: #008cff;
}

.legal-divider {
  color: rgba(255, 255, 255, 0.2);
}

/* Bi-directional Scroll Reveal Styles for Footer */
.footer-reveal-item {
  opacity: 0;
  transform: translateY(36px);
  will-change: opacity, transform;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.footer.is-revealed .footer-reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility: keep the reveal, drop the movement for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer-reveal-item {
    transition: none;
  }
}

/* Responsive Rules for Footer */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}





@media (max-width: 768px) {
  .footer {
    padding: 65px 0 35px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-brand-desc {
    max-width: 100%;
  }

  .footer-cta-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
    gap: 16px;
  }

  .strip-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .strip-btn-primary {
    white-space: nowrap;
    padding: 10px 22px;
  }

  .strip-btn-secondary {
    white-space: nowrap;
    padding: 10px 18px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .footer-cta-strip {
    padding: 18px 16px;
    border-radius: 14px;
    gap: 14px;
  }

  .strip-text {
    width: 100%;
  }

  .strip-heading {
    font-size: 0.98rem;
  }

  .strip-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .strip-btn-primary,
  .strip-btn-secondary {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.84rem;
    box-sizing: border-box;
  }

  .strip-btn-primary .btn-arrow {
    flex-shrink: 0;
  }

  .footer-social-icons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    width: auto;
  }
}

/* Specific optimization for 320px - 350px ultra-small screens */
@media (max-width: 350px) {
  .footer-cta-strip {
    padding: 14px 10px;
    border-radius: 12px;
    gap: 10px;
    margin-bottom: 28px;
  }

  .strip-text {
    gap: 6px;
  }

  .strip-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
  }

  .strip-heading {
    font-size: 0.88rem;
    line-height: 1.25;
  }

  .strip-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 7px;
  }

  .strip-btn-primary {
    width: 100%;
    padding: 9px 10px;
    font-size: 0.78rem;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .strip-btn-primary span {
    white-space: nowrap;
  }

  .strip-btn-primary .btn-arrow {
    flex-shrink: 0;
    margin-left: 2px;
  }

  .strip-btn-secondary {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.76rem;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .footer-social-icons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: auto;
    max-width: 100%;
  }

  .footer-contact-buttons-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .footer-contact-btn {
    padding: 8px 6px;
    font-size: 0.72rem;
    gap: 5px;
  }

  .footer-contact-btn svg {
    width: 13px;
    height: 13px;
  }
}

/* Light Mode Overrides for Footer */
/* Light Mode Overrides for Footer — Clean & Elegant Typography */
[data-theme="light"] .footer {
  background: #ffffff;
  border-top: 1px solid rgba(10, 30, 60, 0.1);
  color: #334155;
}

[data-theme="light"] .footer-heading {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .footer-brand-desc {
  color: #334155 !important;
  font-weight: 400 !important;
}

[data-theme="light"] .footer-nav-link,
[data-theme="light"] .footer-bottom,
[data-theme="light"] .copyright-text,
[data-theme="light"] .legal-link {
  color: #334155 !important;
  font-weight: 500 !important;
}

[data-theme="light"] .footer-location-badge {
  background: rgba(0, 102, 255, 0.06) !important;
  border: 1px solid rgba(0, 102, 255, 0.2) !important;
  color: #0066ff !important;
  font-weight: 600 !important;
}

[data-theme="light"] .footer-nav-link:hover,
[data-theme="light"] .legal-link:hover {
  color: #0066ff !important;
}

[data-theme="light"] .footer-contact-btn {
  background: #ffffff !important;
  border: 1px solid rgba(10, 30, 60, 0.15) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="light"] .footer-contact-btn:hover {
  background: rgba(0, 102, 255, 0.08) !important;
  border-color: #0066ff !important;
  color: #0066ff !important;
}

[data-theme="light"] .social-icon-btn {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.12);
  color: #475569;
}

[data-theme="light"] .social-icon-btn:hover {
  background: #0066ff;
  border-color: #0066ff;
  color: #ffffff;
}

[data-theme="light"] .footer-cta-strip {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.1);
  box-shadow: 0 2px 14px rgba(10, 30, 60, 0.04);
}

[data-theme="light"] .strip-heading {
  color: #0f172a;
}

[data-theme="light"] .strip-btn-secondary {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.14);
  color: #1e293b;
}

[data-theme="light"] .strip-btn-secondary:hover {
  background: rgba(0, 102, 255, 0.2);
  border-color: #0066ff;
  color: #0066ff;
}

/* Accessibility: Prefers Reduced Motion for Footer */
@media (prefers-reduced-motion: reduce) {
  .footer-reveal-item,
  .footer-contact-btn,
  .social-icon-btn {
    animation: none !important;
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }
}

/* ==========================================================================
   MALIKAXIOM ABOUT US PAGE DEDICATED STYLING
   ========================================================================== */

/* 1. About Hero Section */
.about-hero-section {
  position: relative;
  padding: 147px 0 67px;
  overflow: hidden;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}

.about-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 20px 0;
}

.about-hero-lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.75;
  margin-bottom: 14px;
}

.about-hero-sublead {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
  margin-bottom: 32px;
}

.about-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.about-tech-canvas-card {
  position: relative;
  padding: 36px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.canvas-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 140, 255, 0.2) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
}

.tech-nodes-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}

.visual-badge-floating {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  color: #008cff;
}

.visual-badge-floating .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #008cff;
  box-shadow: 0 0 8px rgba(0, 140, 255, 0.2);
}

/* 2. Who We Are Section */
.who-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.who-text-paragraph {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
  margin-top: 16px;
}

.who-visual-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.who-glass-card {
  position: relative;
  padding: 28px 32px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.who-glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 140, 255, 0.2);
}

.who-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #008cff;
  border-radius: 99px 0 0 99px;
}

.who-card-number {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  color: #008cff;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.who-card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.who-card-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}

/* 3. What We Build Capabilities */
.build-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.build-card {
  padding: 32px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.build-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 140, 255, 0.2);
}

.build-card-wide {
  grid-column: span 3;
}

.build-icon {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.build-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

.build-card p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}

.build-footer-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* 4 & 5. Mission & Vision */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.mv-card {
  position: relative;
  padding: 48px 40px;
  border-radius: 22px;
  overflow: hidden;
}

.mission-card {
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  box-shadow: 0 0 35px rgba(0, 140, 255, 0.2);
}

.vision-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mv-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  color: #008cff;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.mv-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 16px;
}

.mv-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.75;
}

/* 6. Values Grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.value-card {
  padding: 32px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 140, 255, 0.2);
}

.value-num {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: #008cff;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.value-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.value-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}

/* 7. How We Think Flow */
.think-flow-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.think-connect-line {
  position: absolute;
  top: 40px;
  left: 15%;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 140, 255, 0.2), transparent);
  z-index: 1;
}

.think-step-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.step-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 140, 255, 0.2);
  border: 2px solid #008cff;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.step-heading {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.step-text {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

/* 9. Our Technology Stack Pills */
.tech-pills-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.about-tech-pill {
  padding: 10px 22px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.about-tech-pill:hover {
  border-color: #008cff;
  color: #008cff;
  transform: translateY(-2px);
}

/* 10. Why Malik Axiom Grid */
.about-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.why-point-card {
  padding: 32px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.why-point-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 140, 255, 0.2);
}

.why-point-card-wide {
  grid-column: span 3;
}

.point-num {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: #008cff;
  margin-bottom: 12px;
}

.why-point-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

.why-point-card p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}



.about-reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Rules for About Us Page */
@media (max-width: 1024px) {
  .about-hero-grid,
  .who-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .build-capability-grid,
  .about-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .build-card-wide,
  .why-point-card-wide {
    grid-column: span 2;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .think-flow-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .think-connect-line {
    display: none;
  }
}

@media (max-width: 768px) {
  .about-hero-section {
    padding: 117px 0 37px;
  }

  .build-capability-grid,
  .about-why-grid,
  .values-grid,
  .mv-grid {
    grid-template-columns: 1fr;
  }

  .build-card-wide,
  .why-point-card-wide {
    grid-column: span 1;
  }

  .about-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .about-hero-actions .btn-cta-primary,
  .about-hero-actions .btn-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Light Mode Overrides for About Us Page */
[data-theme="light"] .about-hero-title,
[data-theme="light"] .who-card-title,
[data-theme="light"] .build-card h3,
[data-theme="light"] .mv-title,
[data-theme="light"] .value-title,
[data-theme="light"] .step-heading,
[data-theme="light"] .why-point-card h3 {
  color: #0f172a;
}

[data-theme="light"] .about-hero-lead,
[data-theme="light"] .about-hero-sublead,
[data-theme="light"] .who-text-paragraph,
[data-theme="light"] .who-card-desc,
[data-theme="light"] .build-card p,
[data-theme="light"] .mv-desc,
[data-theme="light"] .value-desc,
[data-theme="light"] .step-text,
[data-theme="light"] .why-point-card p {
  color: #475569;
}

[data-theme="light"] .about-tech-canvas-card,
[data-theme="light"] .who-glass-card,
[data-theme="light"] .build-card,
[data-theme="light"] .vision-card,
[data-theme="light"] .value-card,
[data-theme="light"] .think-step-card,
[data-theme="light"] .about-tech-pill,
[data-theme="light"] .why-point-card {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .mission-card {
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
}

[data-theme="light"] .about-tech-pill {
  color: #0f172a;
}

[data-theme="light"] .about-tech-pill:hover {
  color: #008cff;
  border-color: #008cff;
}

/* ==========================================================================
   GLOBAL UNIFIED EYEBROW PILL STYLING
   Exact 1-to-1 match of 'HOW WE CREATE IMPACT' (.metrics-eyebrow) design system:
   Font, Font-size, Weight, Letter-spacing, Color, Background, Border, Dot & Glow
   ========================================================================== */

@keyframes eyebrowDotBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px #0066ff, 0 0 4px #0077ff;
  }
  50% {
    opacity: 0.3;
    transform: scale(0.65);
    box-shadow: 0 0 2px #0066ff;
  }
}

.hero-tag,
.section-eyebrow,
.services-eyebrow-v3,
.tech-eyebrow-v3,
.work-eyebrow-v6,
.why-eyebrow,
.philosophy-eyebrow,
.realworld-eyebrow,
.testimonials-eyebrow,
.process-eyebrow,
.process-reveal-eyebrow,
.founders-eyebrow,
.faq-eyebrow,
.final-cta-eyebrow,
.contact-modal-eyebrow,
.wizard-eyebrow,
.mv-eyebrow,
.metrics-eyebrow,
.eyebrow-pill,
.sp-eyebrow,
.sp-featured-eyebrow,
.sp-video-badge,
.cs-hero-eyebrow,
.aft-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  border-radius: var(--radius-full, 9999px) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(0, 119, 255, 0.25) !important;
  color: #0077ff !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-tag-pulse,
.eyebrow-dot,
.pill-dot,
.sp-eyebrow-dot,
.eyebrow-mini-dot,
.cs-eyebrow-dot,
.aft-eyebrow-dot,
.section-eyebrow .eyebrow-dot,
.services-eyebrow-v3 .eyebrow-dot,
.tech-eyebrow-v3 .eyebrow-dot,
.work-eyebrow-v6 .eyebrow-dot,
.why-eyebrow .eyebrow-dot,
.realworld-eyebrow .eyebrow-dot,
.testimonials-eyebrow .eyebrow-dot,
.process-eyebrow .eyebrow-dot,
.founders-eyebrow .eyebrow-dot,
.faq-eyebrow .eyebrow-dot,
.final-cta-eyebrow .eyebrow-dot,
.eyebrow-pill .pill-dot,
.eyebrow-pill .eyebrow-dot,
.mv-eyebrow .eyebrow-dot,
.metrics-eyebrow .eyebrow-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #0066ff !important;
  box-shadow: 0 0 10px #0066ff !important;
  animation: eyebrowDotBlink 1.6s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

/* Light Mode Adaptation: 100% Transparent Background & Crisp Electric Blue Text */
[data-theme="light"] .hero-tag,
[data-theme="light"] .section-eyebrow,
[data-theme="light"] .services-eyebrow-v3,
[data-theme="light"] .tech-eyebrow-v3,
[data-theme="light"] .work-eyebrow-v6,
[data-theme="light"] .why-eyebrow,
[data-theme="light"] .philosophy-eyebrow,
[data-theme="light"] .realworld-eyebrow,
[data-theme="light"] .testimonials-eyebrow,
[data-theme="light"] .process-eyebrow,
[data-theme="light"] .process-reveal-eyebrow,
[data-theme="light"] .founders-eyebrow,
[data-theme="light"] .faq-eyebrow,
[data-theme="light"] .final-cta-eyebrow,
[data-theme="light"] .contact-modal-eyebrow,
[data-theme="light"] .wizard-eyebrow,
[data-theme="light"] .mv-eyebrow,
[data-theme="light"] .metrics-eyebrow,
[data-theme="light"] .eyebrow-pill,
[data-theme="light"] .sp-eyebrow,
[data-theme="light"] .sp-featured-eyebrow,
[data-theme="light"] .sp-video-badge,
[data-theme="light"] .cs-hero-eyebrow,
[data-theme="light"] .aft-eyebrow {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(0, 102, 255, 0.28) !important;
  color: #0066ff !important;
  box-shadow: none !important;
}

[data-theme="light"] .hero-tag-pulse,
[data-theme="light"] .eyebrow-dot,
[data-theme="light"] .pill-dot,
[data-theme="light"] .sp-eyebrow-dot,
[data-theme="light"] .eyebrow-mini-dot,
[data-theme="light"] .cs-eyebrow-dot,
[data-theme="light"] .aft-eyebrow-dot {
  background: #0066ff !important;
  box-shadow: 0 0 10px #0066ff !important;
  animation: eyebrowDotBlink 1.6s ease-in-out infinite !important;
}

/* PROVEN EXPERIENCE section — retain the site's electric-blue accent (#0066FF) in light mode */
[data-theme="light"] .work-eyebrow-v6 {
  color: #0066ff !important;
}

/* Proven Expertise section — retain the site's electric-blue accent (#0066FF) in light mode */
[data-theme="light"] .realworld-eyebrow {
  color: #0066ff !important;
}

/* Light Mode WHO WE ARE & OUR PHILOSOPHY Section Polish */
[data-theme="light"] #whoWeAre {
  background: #f8fafc !important;
  border-top: 1px solid rgba(0, 102, 255, 0.08) !important;
  border-bottom: 1px solid rgba(0, 102, 255, 0.08) !important;
}

[data-theme="light"] .story-badge-pill {
  background: rgba(0, 102, 255, 0.06) !important;
  border: 1px solid rgba(0, 102, 255, 0.2) !important;
  color: #0066ff !important;
  font-weight: 700 !important;
}

[data-theme="light"] .story-badge-pill:hover {
  background: rgba(0, 102, 255, 0.12) !important;
  border-color: rgba(0, 102, 255, 0.35) !important;
  color: #0055cc !important;
}

[data-theme="light"] .about-motto-box {
  background: #ffffff !important;
  border: 1px solid rgba(0, 102, 255, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 102, 255, 0.08) !important;
}

[data-theme="light"] .about-motto-box:hover {
  background: #ffffff !important;
  border-color: rgba(0, 102, 255, 0.35) !important;
  box-shadow: 0 16px 45px rgba(0, 102, 255, 0.14) !important;
}

[data-theme="light"] .about-motto-box::after {
  color: rgba(0, 102, 255, 0.06) !important;
}

[data-theme="light"] .motto-tabs {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 102, 255, 0.12) !important;
}

[data-theme="light"] .motto-tab-btn {
  color: #475569 !important;
}

[data-theme="light"] .motto-tab-btn.active,
[data-theme="light"] .motto-tab-btn:hover {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.28) !important;
}

[data-theme="light"] .motto-quote {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="light"] .about-pillar-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 102, 255, 0.14) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .about-pillar-card.in-view:hover,
[data-theme="light"] .about-pillar-card:hover {
  border-color: rgba(0, 102, 255, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 102, 255, 0.12) !important;
}

[data-theme="light"] .pillar-icon-box {
  background: rgba(0, 102, 255, 0.08) !important;
  border: 1px solid rgba(0, 102, 255, 0.2) !important;
  color: #0066ff !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1) !important;
}

[data-theme="light"] .pillar-num-badge {
  background: rgba(0, 102, 255, 0.08) !important;
  border: 1px solid rgba(0, 102, 255, 0.2) !important;
  color: #0066ff !important;
  font-weight: 800 !important;
}

[data-theme="light"] .pillar-arrow {
  color: #0066ff !important;
}

[data-theme="light"] .pillar-title {
  color: #0f172a !important;
}

[data-theme="light"] .pillar-desc {
  color: #475569 !important;
}

[data-theme="light"] .pillar-tag {
  background: rgba(0, 102, 255, 0.06) !important;
  border: 1px solid rgba(0, 102, 255, 0.18) !important;
  color: #0066ff !important;
}

[data-theme="light"] .pillar-tag:hover {
  background: rgba(0, 102, 255, 0.12) !important;
  border-color: rgba(0, 102, 255, 0.35) !important;
}

/* ==========================================================================
   NAVBAR LINK INTERACTION SYSTEM
   1. Normal Hover: Expanding Cyan-Blue Line Underneath, Transparent Background
   2. Active / Clicked Section: Filled Electric-Blue Capsule Pill, NO Line Underneath
   ========================================================================== */
.nav-link {
  position: relative !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.84rem !important;
  padding: 7px 14px !important;
  border-radius: var(--radius-full) !important;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Hover State on Inactive Link: Line Underneath, Transparent Background */
.nav-link::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: #008cff !important;
  border-radius: 99px !important;
  transform: translateX(-50%) !important;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.2) !important;
}

.nav-link:hover {
  color: #008cff !important;
  background: transparent !important;
}

.nav-link:hover::after {
  width: 70% !important;
}

/* Active / Clicked State (When section is open): Filled Electric-Blue Capsule, NO Underline */
.nav-link.active {
  color: #ffffff !important;
  background: #0066ff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(0, 140, 255, 0.2) !important;
  border: none !important;
}

.nav-link.active::after,
.nav-link.active:hover::after {
  display: none !important;
  width: 0 !important;
  content: none !important;
}

/* Light Theme Overrides */
[data-theme="light"] .nav-link {
  color: #334155 !important;
}

[data-theme="light"] .nav-link:hover {
  color: #0066ff !important;
  background: transparent !important;
}

[data-theme="light"] .nav-link.active {
  color: #ffffff !important;
  background: #0066ff !important;
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2) !important;
}

/* ==========================================================================
   GLOBAL SECTION SPACING (RESPONSIVE)
   ========================================================================== */
@media (max-width: 1024px) {
  .section,
  .hero,
  .metrics-section,
  .services-section-v3,
  .tech-section-v3,
  .work-section-v6,
  .why-section,
  .realworld-section,
  .testimonials-section,
  .process-section,
  .founders-section,
  .faq-section,
  .final-cta-section {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
  }
  .hero {
    padding-top: 110px !important;
    padding-bottom: 30px !important;
  }
}

@media (max-width: 768px) {
  .section,
  .hero,
  .metrics-section,
  .services-section-v3,
  .tech-section-v3,
  .work-section-v6,
  .why-section,
  .realworld-section,
  .testimonials-section,
  .process-section,
  .founders-section,
  .faq-section,
  .final-cta-section {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
  }
  .hero {
    padding-top: 100px !important;
    padding-bottom: 25px !important;
  }
}

/* Ensure no horizontal overflow anywhere globally */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Floating WhatsApp Button */
.whatsapp-float {
  width: 58px;
  height: 58px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.2);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  margin-bottom: 12px;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.2);
  color: #FFF;
}
.whatsapp-float svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 576px) {
  .floating-widget-wrap {
    bottom: 16px;
    right: 16px;
  }
  .chat-widget-launcher {
    width: 48px;
    height: 48px;
  }
  .whatsapp-float {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
  }
  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

/* Global Accessibility Focus States */
*:focus-visible {
  outline: 2px solid #008cff !important;
  outline-offset: 2px !important;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* MalikAxiom Light Theme Specific Adjustments & Overrides */
[data-theme="light"] .theme-toggle-btn {
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  color: #0f172a;
}
[data-theme="light"] .theme-toggle-btn:hover {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
}

[data-theme="light"] .chat-teaser-bubble {
  background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.98) 0%, rgba(244, 246, 248, 0.98) 100%);
  border: 1px solid rgba(0, 140, 255, 0.2);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.1), 0 0 24px rgba(0, 140, 255, 0.2);
  color: #0f172a;
}
[data-theme="light"] .teaser-text {
  color: #1e293b;
}
[data-theme="light"] .teaser-close-btn {
  color: rgba(15, 23, 42, 0.6);
}
[data-theme="light"] .teaser-close-btn:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.1);
}

/* High-End Executive Chatbot Widget Styling in Light Mode */
[data-theme="light"] .chat-widget-window {
  background: #ffffff !important;
  border: 1px solid rgba(10, 30, 60, 0.12) !important;
  box-shadow: 0 20px 60px rgba(10, 30, 60, 0.14) !important;
}

[data-theme="light"] .chat-header {
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(10, 30, 60, 0.08) !important;
}

[data-theme="light"] .chat-avatar {
  background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25) !important;
}

[data-theme="light"] .chat-bot-name {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .chat-status {
  color: #475569 !important;
}

[data-theme="light"] .chat-close-btn {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #64748b !important;
}

[data-theme="light"] .chat-close-btn:hover {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .bot-msg {
  background: #f1f5f9 !important;
  border: 1px solid rgba(10, 30, 60, 0.08) !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}

[data-theme="light"] .bot-msg strong {
  color: #0066ff !important;
}

[data-theme="light"] .chat-chips button {
  background: #ffffff !important;
  border: 1px solid rgba(0, 102, 255, 0.25) !important;
  color: #0066ff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(10, 30, 60, 0.03) !important;
}

[data-theme="light"] .chat-chips button:hover {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25) !important;
}

[data-theme="light"] .chat-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(10, 30, 60, 0.08) !important;
}

[data-theme="light"] .chat-footer input {
  background: #f8fafc !important;
  border: 1px solid rgba(10, 30, 60, 0.14) !important;
  color: #0f172a !important;
}

[data-theme="light"] .chat-footer input::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] .chat-footer input:focus {
  border-color: #0066ff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1) !important;
}

[data-theme="light"] .contact-options-modal-container {
  background: radial-gradient(circle at top right, rgba(0, 142, 255, 0.08) 0%, rgba(255, 255, 255, 0.98) 75%);
  border: 1px solid rgba(0, 140, 255, 0.2);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .contact-modal-title {
  color: #0f172a;
}
[data-theme="light"] .contact-modal-sub {
  color: #475569;
}
[data-theme="light"] .channel-card {
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  color: #0f172a;
}
[data-theme="light"] .channel-card:hover {
  background: rgba(0, 140, 255, 0.2);
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 140, 255, 0.2);
}
[data-theme="light"] .channel-title {
  color: #0f172a;
}
[data-theme="light"] .channel-desc {
  color: #475569;
}
[data-theme="light"] .channel-arrow {
  color: rgba(15, 23, 42, 0.4);
}
[data-theme="light"] .cta-contact-label {
  color: #475569;
}

/* ==========================================================================
   MALIK AXIOM SERVICE LANDING PAGE SYSTEM
   ========================================================================== */
.service-page-hero {
  padding-top: clamp(130px, 14vh, 175px);
  padding-bottom: clamp(60px, 8vh, 100px);
  position: relative;
  overflow: hidden;
}

.sp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 992px) {
  .sp-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.sp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-blue);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.sp-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--text-main);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.sp-hero-lead {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 32px;
  max-width: 620px;
}

.sp-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sp-mockup-frame {
  position: relative;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 140, 255, 0.2);
  overflow: hidden;
  padding: 20px;
}

.sp-mockup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.sp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.sp-dot-red { background: #ef4444; }
.sp-dot-yellow { background: #f59e0b; }
.sp-dot-green { background: #10b981; }

.sp-mockup-body {
  font-family: var(--font-code);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--accent-azure);
  background: rgba(4, 5, 10, 0.6);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

/* Service Problem & Solve Grid */
.solve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.solve-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: transform var(--tr-smooth), border-color var(--tr-smooth), box-shadow var(--tr-smooth);
}

.solve-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: 0 12px 30px rgba(0, 140, 255, 0.2);
}

.solve-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--accent-blue);
  margin-bottom: 20px;
}

.solve-card-title {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.solve-card-desc {
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Service Process Stepper v2 */
.process-stepper-v2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.p-step-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 28px;
  align-items: start;
  transition: border-color var(--tr-smooth), transform var(--tr-smooth);
}

@media (max-width: 640px) {
  .p-step-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.p-step-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateX(4px);
}

.p-step-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-blue);
  line-height: 1;
}

.p-step-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.p-step-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Light Theme Overrides for Service Page Components */
[data-theme="light"] .sp-mockup-frame {
  background: #ffffff;
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08), 0 0 40px rgba(0, 140, 255, 0.2);
}

[data-theme="light"] .sp-mockup-body {
  background: #f8fafc;
  border-color: rgba(0, 140, 255, 0.2);
  color: #0284c7;
}

[data-theme="light"] .solve-card,
[data-theme="light"] .p-step-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .solve-card:hover,
[data-theme="light"] .p-step-card:hover {
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 140, 255, 0.2);
}

/* --- Hero Trust Indicator Pills --- */
.sp-trust-pills {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.sp-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: border-color var(--tr-smooth), color var(--tr-smooth);
}

.sp-trust-pill:hover {
  border-color: var(--accent-blue);
  color: var(--text-main);
}

.sp-trust-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-blue);
}

/* --- 04 What We Build Grid --- */
.sp-build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.sp-build-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform var(--tr-smooth), border-color var(--tr-smooth), box-shadow var(--tr-smooth);
}

.sp-build-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: 0 12px 30px rgba(0, 140, 255, 0.2);
}

.sp-build-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0, 140, 255, 0.2);
  border: 1px solid rgba(0, 140, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.sp-build-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.sp-build-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --- 05 Capabilities Split Section --- */
.sp-cap-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 992px) {
  .sp-cap-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.sp-cap-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.sp-cap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  transition: border-color var(--tr-smooth), transform var(--tr-smooth);
}

.sp-cap-item:hover {
  border-color: var(--accent-blue);
  transform: translateX(4px);
}

.sp-cap-check {
  color: var(--accent-blue);
  font-weight: 800;
}

/* --- 06 Strategy 6-Step Connected Diagram --- */
.sp-strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.sp-strategy-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 28px;
  position: relative;
  transition: transform var(--tr-smooth), border-color var(--tr-smooth);
}

.sp-strategy-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
}

.sp-strategy-num {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent-blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 140, 255, 0.2);
  border-radius: 9999px;
  border: 1px solid rgba(0, 140, 255, 0.2);
}

/* --- 09 Engineering Architecture Flow --- */
.sp-arch-diagram {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  margin-top: 40px;
  box-shadow: var(--glass-shadow);
}

.sp-arch-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sp-arch-node {
  flex: 1;
  min-width: 130px;
  background: rgba(4, 5, 10, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  transition: border-color var(--tr-smooth), transform var(--tr-smooth);
}

.sp-arch-node:hover {
  border-color: var(--accent-blue);
  transform: translateY(-3px);
}

.sp-arch-node-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.sp-arch-node-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.sp-arch-node-sub {
  font-family: var(--font-code);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.sp-arch-arrow {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--accent-blue);
  font-weight: 800;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .sp-arch-flow {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-arch-arrow {
    text-align: center;
    transform: rotate(90deg);
  }
}

/* --- 10 Pillars (UX + Performance + Security) --- */
.sp-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.sp-pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: transform var(--tr-smooth), border-color var(--tr-smooth);
}

.sp-pillar-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
}

.sp-pillar-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* --- 12 Video / Visual Showcase --- */
.sp-media-showcase {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  margin-top: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.sp-media-frame {
  position: relative;
  padding-top: 52%;
  background: #04050a;
}

@media (max-width: 768px) {
  .sp-media-frame {
    padding-top: 65%;
  }
}

.sp-media-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.sp-media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(4, 5, 10, 0.3) 0%, rgba(4, 5, 10, 0.85) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.sp-play-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(0, 140, 255, 0.2);
  transition: transform var(--tr-smooth), box-shadow var(--tr-smooth);
  margin-bottom: 16px;
}

.sp-play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 45px rgba(0, 140, 255, 0.2);
}

/* --- 14 Who This Is For --- */
.sp-for-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.sp-for-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: border-color var(--tr-smooth), transform var(--tr-smooth);
}

.sp-for-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-3px);
}

/* --- 15 Engagement Models --- */
.sp-engagement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.sp-engagement-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--tr-smooth), transform var(--tr-smooth);
}

.sp-engagement-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-4px);
}

.sp-model-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* --- Dual Theme Overrides for New Master Components --- */
[data-theme="light"] .sp-trust-pill {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #475569;
}

[data-theme="light"] .sp-trust-pill:hover {
  border-color: #008cff;
  color: #0f172a;
}

[data-theme="light"] .sp-build-card,
[data-theme="light"] .sp-cap-item,
[data-theme="light"] .sp-strategy-card,
[data-theme="light"] .sp-arch-diagram,
[data-theme="light"] .sp-pillar-card,
[data-theme="light"] .sp-media-showcase,
[data-theme="light"] .sp-for-card,
[data-theme="light"] .sp-engagement-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .sp-arch-node {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .sp-build-card:hover,
[data-theme="light"] .sp-strategy-card:hover,
[data-theme="light"] .sp-pillar-card:hover,
[data-theme="light"] .sp-for-card:hover,
[data-theme="light"] .sp-engagement-card:hover {
  border-color: rgba(0, 140, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 140, 255, 0.2);
}




.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 6, 11, 0.85);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  padding: 20px;
  box-sizing: border-box;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.contact-options-modal-container {
  background: #080A0F;
  border: 1px solid rgba(0, 119, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 119, 255, 0.2);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 560px;
  position: relative;
  transform: scale(0.96);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal-overlay.active .contact-options-modal-container {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 1.5rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.contact-modal-header {
  margin-bottom: 28px;
}

.contact-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: 700;
  color: #0077ff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact-modal-title {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.contact-modal-sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

.contact-channels-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.channel-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.25s ease;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

.channel-card:hover {
  background: rgba(0, 119, 255, 0.2);
  border-color: rgba(0, 119, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 119, 255, 0.2);
}

.channel-num {
  font-family: var(--font-code);
  font-size: 0.85rem;
  font-weight: 800;
  color: #0077ff;
  opacity: 0.9;
  flex-shrink: 0;
}

.channel-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0, 119, 255, 0.2);
  border: 1px solid rgba(0, 119, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0077ff;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.channel-card:hover .channel-icon-wrap {
  background: #0077ff;
  color: #ffffff;
}

.channel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.channel-title {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
}

.channel-desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #94a3b8;
}

.channel-arrow {
  font-family: var(--font-code);
  font-size: 1.1rem;
  color: #0077ff;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.channel-card:hover .channel-arrow {
  transform: translateX(4px);
}

/* Light mode overrides for modal */
[data-theme="light"] .contact-options-modal-container {
  background: #ffffff;
  border-color: rgba(0, 119, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .contact-modal-title {
  color: #0f172a;
}

[data-theme="light"] .contact-modal-sub {
  color: #475569;
}

[data-theme="light"] .channel-card {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .channel-card:hover {
  background: #f0f7ff;
  border-color: rgba(0, 119, 255, 0.2);
}

[data-theme="light"] .channel-title {
  color: #0f172a;
}

[data-theme="light"] .channel-desc {
  color: #64748b;
}

[data-theme="light"] .modal-close {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #64748b;
}

@media (max-width: 600px) {
  .contact-options-modal-container {
    padding: 26px 18px 22px;
    border-radius: 18px;
    max-width: 460px;
    width: 100%;
  }
  .channel-card {
    padding: 13px 15px;
    gap: 12px;
  }
  .channel-icon-wrap {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 12px !important;
  }
  .contact-options-modal-container {
    padding: 22px 14px 18px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
  }
  .modal-close {
    top: 10px !important;
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 1.25rem !important;
  }
  .contact-modal-header {
    margin-bottom: 16px !important;
    padding-right: 20px !important;
  }
  .contact-modal-eyebrow {
    font-size: 0.68rem !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.08em !important;
  }
  .contact-modal-title {
    font-size: clamp(1.2rem, 5.2vw, 1.42rem) !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
  }
  .contact-modal-sub {
    font-size: clamp(0.75rem, 3.2vw, 0.84rem) !important;
    line-height: 1.4 !important;
  }
  .contact-channels-grid {
    gap: 8px !important;
  }
  .channel-card {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  .channel-icon-wrap {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }
  .channel-icon-wrap svg {
    width: 17px !important;
    height: 17px !important;
  }
  .channel-title {
    font-size: 0.88rem !important;
  }
  .channel-desc {
    font-size: 0.73rem !important;
    line-height: 1.3 !important;
  }
  .channel-arrow {
    font-size: 0.95rem !important;
  }
}

@media (max-width: 360px) {
  .modal-overlay {
    padding: 8px !important;
  }
  .contact-options-modal-container {
    padding: 18px 10px 14px !important;
    border-radius: 14px !important;
  }
  .modal-close {
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 1.1rem !important;
  }
  .contact-modal-header {
    margin-bottom: 12px !important;
  }
  .contact-modal-eyebrow {
    font-size: 0.62rem !important;
    margin-bottom: 4px !important;
  }
  .contact-modal-title {
    font-size: 1.12rem !important;
  }
  .contact-modal-sub {
    font-size: 0.72rem !important;
  }
  .contact-channels-grid {
    gap: 6px !important;
  }
  .channel-card {
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  .channel-icon-wrap {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
  }
  .channel-icon-wrap svg {
    width: 15px !important;
    height: 15px !important;
  }
  .channel-title {
    font-size: 0.82rem !important;
  }
  .channel-desc {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }
}


















/* ==========================================================================
   MALIKAXIOM NAVBAR CTA BUTTON SYSTEM — UNIFIED PILL DIMENSIONS & HEIGHT
   ========================================================================== */

.nav-email-btn,
.btn-nav-contact,
.header-actions .btn-nav-contact,
.btn-nav-start,
.header-actions .btn-nav-start {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease !important;
}

/* 1. EMAIL BUTTON */
.nav-email-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text-main, #ffffff) !important;
}

.nav-email-btn svg {
  color: #0066ff !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.nav-email-btn:hover {
  background: transparent !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(0, 102, 255, 0.2) !important;
  transform: translateY(-1.5px) !important;
}

.nav-email-btn:hover svg {
  transform: scale(1.1) rotate(-5deg) !important;
  color: #3385ff !important;
}

/* 2. SECONDARY CTA — CONTACT US → */
.btn-nav-contact,
.header-actions .btn-nav-contact {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-nav-contact .btn-arrow,
.header-actions .btn-nav-contact .btn-arrow {
  display: inline-block !important;
  transition: transform 220ms ease !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
}

.btn-nav-contact:hover,
.header-actions .btn-nav-contact:hover {
  background: transparent !important;
  border-color: #0066ff !important;
  color: #0066ff !important;
  box-shadow: 0 0 14px rgba(0, 102, 255, 0.2) !important;
  transform: translateY(-1.5px) !important;
}

.btn-nav-contact:hover .btn-arrow,
.header-actions .btn-nav-contact:hover .btn-arrow {
  transform: translateX(3px) !important;
}

.btn-nav-contact:active,
.header-actions .btn-nav-contact:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 3. PRIMARY CTA — START A PROJECT → */
.btn-nav-start,
.header-actions .btn-nav-start {
  background: #0066ff;
  border: 1px solid #0066ff;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.2) !important;
}

.btn-nav-start .btn-arrow,
.header-actions .btn-nav-start .btn-arrow {
  display: inline-block !important;
  transition: transform 220ms ease !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
}

.btn-nav-start:hover,
.header-actions .btn-nav-start:hover {
  background: #1a75ff !important;
  border-color: #1a75ff !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.2) !important;
  transform: translateY(-1.5px) !important;
  filter: brightness(1.05) !important;
}

.btn-nav-start:hover .btn-arrow,
.header-actions .btn-nav-start:hover .btn-arrow {
  transform: translateX(3px) !important;
}

.btn-nav-start:active,
.header-actions .btn-nav-start:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2) !important;
}

/* 4. LIGHT THEME OVERRIDES */
/* 4. LIGHT THEME OVERRIDES */
[data-theme="light"] .nav-email-btn {
  background: #ffffff !important;
  border: 1px solid rgba(10, 30, 60, 0.15) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(10, 30, 60, 0.04) !important;
}

[data-theme="light"] .nav-email-btn:hover {
  background: rgba(0, 102, 255, 0.08) !important;
  color: #0066ff !important;
  border-color: #0066ff !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.15) !important;
}

[data-theme="light"] .btn-nav-contact,
[data-theme="light"] .header-actions .btn-nav-contact {
  background: #ffffff !important;
  border: 1px solid rgba(10, 30, 60, 0.15) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(10, 30, 60, 0.04) !important;
}

[data-theme="light"] .btn-nav-contact:hover,
[data-theme="light"] .header-actions .btn-nav-contact:hover {
  background: rgba(0, 102, 255, 0.08) !important;
  border-color: #0066ff !important;
  color: #0066ff !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.15) !important;
}

[data-theme="light"] .btn-nav-start,
[data-theme="light"] .header-actions .btn-nav-start {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
}

/* 5. RESPONSIVE BEHAVIOR */
@media (max-width: 1280px) and (min-width: 1080px) {
  .header-actions .btn-nav-contact,
  .nav-email-btn {
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  .email-btn-text {
    display: none !important;
  }
  .header-actions .btn-nav-start {
    height: 32px !important;
    min-height: 32px !important;
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 768px) {
  .header-actions .btn-nav-contact,
  .nav-email-btn,
  .btn-nav-contact {
    display: none !important;
  }
}

/* Tablet Navbar Start Project CTA Button Styling (577px to 1024px) */
@media (min-width: 577px) and (max-width: 1024px) {
  .btn-nav-start,
  .header-actions .btn-nav-start {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
  }

  .btn-nav-start span,
  .header-actions .btn-nav-start span {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 576px) {
  .header-actions .btn-nav-start,
  .btn-nav-start,
  .header-actions .btn-nav-contact,
  .btn-nav-contact {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .about-video-badge {
    display: none !important;
  }
}



/* ==========================================================================
   SMOOTH SCROLL REVEAL & STAGGERED TRANSITIONS ENGINE (ABOUT US PAGE)
   ========================================================================== */

.about-reveal-item {
  opacity: 0;
  transform: translateY(38px);
  filter: blur(4px);
  will-change: opacity, transform, filter;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.about-reveal-item.in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0px) !important;
}

.about-reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  filter: blur(4px);
  will-change: opacity, transform, filter;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.about-reveal-left.in-view {
  opacity: 1 !important;
  transform: translateX(0) !important;
  filter: blur(0px) !important;
}

.about-reveal-right {
  opacity: 0;
  transform: translateX(48px);
  filter: blur(4px);
  will-change: opacity, transform, filter;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.about-reveal-right.in-view {
  opacity: 1 !important;
  transform: translateX(0) !important;
  filter: blur(0px) !important;
}

.about-reveal-scale {
  opacity: 0;
  transform: scale(0.92) translateY(24px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

.about-reveal-scale.in-view {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  filter: blur(0px) !important;
}

/* Smooth Card Hover Transforms */
.about-cap-card,
.about-pillar-card,
.about-lifecycle-card,
.about-principle-card,
.founder-card-v3,
.why-editorial-card,
.purpose-card,
.about-faq-wrap .faq-item {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background-color 0.35s ease !important;
}

.about-cap-card:hover,
.about-pillar-card:hover,
.about-lifecycle-card:hover,
.about-principle-card:hover,
.founder-card-v3:hover,
.why-editorial-card:hover,
.purpose-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(0, 102, 255, 0.2) !important;
  box-shadow: 0 16px 36px rgba(0, 102, 255, 0.2) !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .about-reveal-item,
  .about-reveal-left,
  .about-reveal-right,
  .about-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}



/* ==========================================================================
   ENHANCED SMART PROJECT WIZARD MODAL DESIGN SYSTEM
   ========================================================================== */

.wizard-modal-container {
  max-width: 780px !important;
  width: 94% !important;
  background: #0a0d17 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  padding: 34px 36px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}

[data-theme="light"] .wizard-modal-container {
  max-width: 780px !important;
  width: 94% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 102, 255, 0.2) !important;
  border-radius: 22px !important;
  padding: 34px 36px !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12), 0 0 35px rgba(0, 102, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}

[data-theme="light"] .wizard-modal-container .modal-close {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #64748b !important;
}

[data-theme="light"] .wizard-modal-container .modal-close:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .wizard-eyebrow {
  background: rgba(0, 102, 255, 0.08) !important;
  border-color: rgba(0, 102, 255, 0.2) !important;
  color: #0066ff !important;
}

[data-theme="light"] .wizard-title {
  color: #0f172a !important;
}

[data-theme="light"] .wizard-subtitle {
  color: #475569 !important;
}

[data-theme="light"] .wizard-step-label {
  color: #0f172a !important;
}

[data-theme="light"] .wizard-mini-label {
  color: #475569 !important;
}

[data-theme="light"] .wizard-input,
[data-theme="light"] .wizard-textarea {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
}

[data-theme="light"] .wizard-input::placeholder,
[data-theme="light"] .wizard-textarea::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] .wizard-input:focus,
[data-theme="light"] .wizard-textarea:focus {
  outline: none !important;
  border-color: #0066ff !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15) !important;
  background: #ffffff !important;
}

[data-theme="light"] .wizard-privacy-note {
  color: #64748b !important;
}

.wizard-header {
  margin-bottom: 22px;
}

.wizard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  padding: 5px 14px;
  border-radius: 9999px;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: #0066ff;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.wizard-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 800;
  color: var(--text-main, #ffffff);
  line-height: 1.22;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.wizard-subtitle {
  font-family: var(--font-body, sans-serif);
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.6;
  margin: 0;
}

.wizard-step-group {
  margin-bottom: 20px;
}

.wizard-step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main, #ffffff);
  margin-bottom: 12px;
}

.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0066ff;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.required-star {
  color: #0066ff;
}

.wizard-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 6px;
  padding-bottom: 4px;
}

.wizard-options-grid::-webkit-scrollbar {
  width: 6px;
}

.wizard-options-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 102, 255, 0.2);
  border-radius: 4px;
}

.wizard-option-card {
  position: relative;
  cursor: pointer;
  margin: 0;
  display: block;
}

.wizard-option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.22s ease;
  height: 100%;
  box-sizing: border-box;
}

[data-theme="light"] .option-card-inner {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.option-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0066ff;
  flex-shrink: 0;
  transition: all 0.22s ease;
}

.option-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.option-card-title {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-core {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: #0066ff;
  color: #ffffff;
}

.option-card-desc {
  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-option-card:hover .option-card-inner {
  border-color: rgba(0, 102, 255, 0.2);
  background: rgba(0, 102, 255, 0.2);
}

.wizard-option-card input[type="radio"]:checked + .option-card-inner {
  background: transparent !important;
  border-color: #0066ff !important;
  box-shadow: 0 0 14px rgba(0, 102, 255, 0.2) !important;
}

.wizard-option-card input[type="radio"]:checked + .option-card-inner .option-icon-wrap {
  background: #0066ff !important;
  color: #ffffff !important;
}

.wizard-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wizard-chip-select-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wizard-chip-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main, #ffffff);
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="light"] .wizard-chip-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

.wizard-chip-btn:hover {
  border-color: #0066ff;
  color: #0066ff;
}

.wizard-chip-btn.active {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.2) !important;
}

.wizard-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wizard-input-full {
  grid-column: span 2;
}

.wizard-mini-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 5px;
}

.wizard-input,
.wizard-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: var(--text-main, #ffffff) !important;
  font-family: var(--font-body, sans-serif) !important;
  font-size: 0.85rem !important;
  box-sizing: border-box !important;
  transition: all 0.22s ease !important;
}

[data-theme="light"] .wizard-input,
[data-theme="light"] .wizard-textarea {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

.wizard-input:focus,
.wizard-textarea:focus {
  outline: none !important;
  border-color: #0066ff !important;
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.2) !important;
  background: transparent !important;
}

.wizard-trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 102, 255, 0.2);
  padding: 10px 16px;
  border-radius: 12px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-main, #ffffff);
}

.wizard-actions {
  display: flex;
  gap: 12px;
}

.wizard-submit-btn {
  flex: 1.2;
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
}

.wizard-whatsapp-btn {
  flex: 1;
  background: #25D366 !important;
  border: 1px solid #25D366 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.wizard-whatsapp-btn:hover {
  background: #1ebc59 !important;
  border-color: #1ebc59 !important;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.2) !important;
}

@media (max-width: 640px) {
  .wizard-modal-container {
    max-width: 520px !important;
    width: calc(100% - 24px) !important;
    padding: 28px 20px 24px !important;
    border-radius: 18px !important;
    max-height: calc(100dvh - 30px) !important;
    overflow-y: auto !important;
  }
  .wizard-options-grid {
    grid-template-columns: 1fr;
    max-height: 180px;
  }
  .wizard-row-2col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .wizard-inputs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .wizard-input-full {
    grid-column: span 1 !important;
  }
  .wizard-actions {
    flex-direction: column;
  }
  .wizard-trust-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .wizard-modal-container {
    padding: 22px 14px 18px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    box-sizing: border-box !important;
  }
  .modal-close {
    top: 10px !important;
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 1.25rem !important;
  }
  .wizard-header {
    margin-bottom: 16px !important;
    padding-right: 24px !important;
  }
  .wizard-eyebrow {
    font-size: 0.68rem !important;
    padding: 4px 10px !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 8px !important;
  }
  .wizard-title {
    font-size: clamp(1.2rem, 5.2vw, 1.45rem) !important;
    margin-bottom: 6px !important;
    line-height: 1.25 !important;
  }
  .wizard-subtitle {
    font-size: clamp(0.75rem, 3.2vw, 0.84rem) !important;
    line-height: 1.4 !important;
  }
  .wizard-step-group {
    margin-bottom: 14px !important;
  }
  .wizard-step-label {
    font-size: 0.82rem !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .step-num {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.7rem !important;
  }
  .wizard-select-input {
    font-size: 0.82rem !important;
    padding: 10px 34px 10px 12px !important;
    border-radius: 8px !important;
  }
  .wizard-row-2col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 14px !important;
  }
  .wizard-inputs-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .wizard-mini-label {
    font-size: 0.72rem !important;
    margin-bottom: 4px !important;
  }
  .wizard-input {
    font-size: 0.82rem !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
  }
  .wizard-textarea {
    font-size: 0.82rem !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    min-height: 65px !important;
  }
  .wizard-form-footer {
    margin-top: 16px !important;
  }
  .btn-submit-wizard {
    padding: 12px 16px !important;
    font-size: 0.86rem !important;
    border-radius: 10px !important;
  }
  .wizard-privacy-note {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 360px) {
  .wizard-modal-container {
    padding: 18px 10px 14px !important;
    border-radius: 14px !important;
  }
  .modal-close {
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 1.1rem !important;
  }
  .wizard-header {
    margin-bottom: 12px !important;
  }
  .wizard-eyebrow {
    font-size: 0.62rem !important;
    padding: 3px 8px !important;
  }
  .wizard-title {
    font-size: 1.15rem !important;
  }
  .wizard-subtitle {
    font-size: 0.72rem !important;
  }
  .wizard-step-label {
    font-size: 0.76rem !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  .step-num {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
  }
  .wizard-select-input {
    font-size: 0.78rem !important;
    padding: 8px 30px 8px 10px !important;
  }
  .wizard-input,
  .wizard-textarea {
    font-size: 0.78rem !important;
    padding: 8px 10px !important;
  }
  .btn-submit-wizard {
    font-size: 0.8rem !important;
    padding: 10px 14px !important;
  }
  .wizard-privacy-note {
    font-size: 0.68rem !important;
  }
}


/* Service Page Hero 2-Column Side-by-Side Flex/Grid */
.sp-hero-grid {
  display: grid !important;
  grid-template-columns: 1.08fr 1fr !important;
  align-items: center !important;
  gap: 48px !important;
  width: 100% !important;
}

@media (max-width: 991px) {
  .sp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* Clean Professional Dropdown Select Styling for Smart Project Wizard */
.wizard-select-wrapper {
  position: relative;
  width: 100%;
}
.wizard-select-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  background: #0d111a;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 40px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.wizard-select-input:focus {
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
  outline: none;
  background-color: #101522;
}
.wizard-select-input option {
  background-color: #0d111a;
  color: #ffffff;
  padding: 10px;
}
[data-theme="light"] .wizard-select-input {
  background-color: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0F172A !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
[data-theme="light"] .wizard-select-input:focus {
  border-color: #0066ff !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15) !important;
  background-color: #ffffff !important;
}
[data-theme="light"] .wizard-select-input option {
  background-color: #FFFFFF;
  color: #0F172A;
}

/* Simple Professional Wizard Submit Button */
.btn-submit-wizard {
  width: 100%;
  padding: 14px 24px;
  border-radius: 10px;
  background: #0066FF;
  border: 1px solid #0066FF;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-submit-wizard:hover {
  background: #0052cc;
  border-color: #0052cc;
  transform: translateY(-1px);
}
.wizard-privacy-note {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

/* Guaranteed Hidden Modal State (Zero Bleed into Footer) */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(3, 4, 8, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* Maximum Top Z-Index Custom Glowing Magnetic Cursor (Works Everywhere Including Modals) */


/* ==========================================================================
   CUSTOM GLOWING MAGNETIC CURSOR SYSTEM (NO !IMPORTANT ON TOP/LEFT)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after {
    cursor: none !important;
  }
}





/* Guaranteed Visible FAQ Section */
.faq-section {
  opacity: 1 !important;
  visibility: visible !important;
}

.faq-reveal-item,
.faq-item {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

.faq-item.is-active .faq-answer-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
}



/* GLOBAL CUSTOM CURSOR ENGINE */
body.custom-cursor-active,
body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active input,
body.custom-cursor-active select,
body.custom-cursor-active textarea,
body.custom-cursor-active label,
body.custom-cursor-active [role="button"],
body.custom-cursor-active [onclick] {
  cursor: none !important;
}



/* --------------------------------------------------------------------------
   Interactive Magnetic Spotlight & Fluid Card Hover Transitions
   -------------------------------------------------------------------------- */
.cs-project-card,
.cs-lifecycle-card,
.cs-cap-box,
.cs-tech-box,
.cs-review-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              background 0.4s ease !important;
}

.cs-project-card::before,
.cs-lifecycle-card::before,
.cs-cap-box::before,
.cs-tech-box::before,
.cs-review-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: radial-gradient(450px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(0, 119, 255, 0.2), transparent 80%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.cs-project-card:hover {
  transform: translateY(-8px) scale(1.008) !important;
  border-color: rgba(0, 119, 255, 0.2) !important;
  box-shadow: 0 35px 80px rgba(0, 119, 255, 0.2), 0 0 30px rgba(0, 119, 255, 0.2) !important;
}

.cs-project-card:hover .cs-image-frame {
  transform: scale(1.03) translateY(-2px) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 119, 255, 0.2) !important;
}

.cs-lifecycle-card:hover,
.cs-cap-box:hover,
.cs-tech-box:hover,
.cs-review-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(0, 119, 255, 0.2) !important;
  box-shadow: 0 20px 50px rgba(0, 119, 255, 0.2) !important;
}

.faq-item {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-item:hover {
  border-color: rgba(0, 119, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 119, 255, 0.2) !important;
  transform: translateX(4px);
}

.faq-question-btn {
  transition: color 0.3s ease, background-color 0.3s ease;
}

.faq-question-btn:hover {
  color: #0077ff !important;
}

.faq-icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   GLOBAL HIGH-PERFORMANCE CUSTOM CURSOR
   -------------------------------------------------------------------------- */
body.custom-cursor-active,
body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active input,
body.custom-cursor-active select,
body.custom-cursor-active textarea,
body.custom-cursor-active label,
body.custom-cursor-active [role="button"],
body.custom-cursor-active [onclick] {
  cursor: none !important;
}

.custom-cursor-dot {
  position: fixed !important;
  top: -100px;
  left: -100px;
  width: 8px !important;
  height: 8px !important;
  background: #0077ff !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 9999999 !important;
  box-shadow: 0 0 14px #0077ff, 0 0 4px #ffffff !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  opacity: 0;
  transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
  will-change: left, top;
}

.custom-cursor-ring,
.custom-cursor-outline {
  position: fixed !important;
  top: -100px;
  left: -100px;
  width: 38px !important;
  height: 38px !important;
  border: 1.5px solid rgba(0, 119, 255, 0.2) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 9999998 !important;
  box-shadow: 0 0 20px rgba(0, 119, 255, 0.2) !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  opacity: 0;
  transition: opacity 0.2s ease, width 0.22s ease, height 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
  will-change: left, top;
}

.custom-cursor-ring.hovered {
  width: 42px !important;
  height: 42px !important;
  background: rgba(0, 119, 255, 0.08) !important;
  border-color: #0077ff !important;
  box-shadow: 0 0 16px rgba(0, 119, 255, 0.25) !important;
}

[data-theme="light"] .custom-cursor-ring.hovered {
  background: rgba(0, 102, 255, 0.06) !important;
  border-color: #0066FF !important;
  box-shadow: 0 0 16px rgba(0, 102, 255, 0.2) !important;
}

.custom-cursor-dot.hovered {
  background: #0077ff !important;
  box-shadow: 0 0 10px #0077ff !important;
}

[data-theme="light"] .custom-cursor-dot.hovered {
  background: #0066FF !important;
  box-shadow: 0 0 10px #0066FF !important;
}

/* ==========================================================================
   HOMEPAGE LIGHT-MODE POLISH — FINAL ADDITIONS
   New light-mode rules for components without existing overrides.
   Dark mode is NOT affected (every rule below is [data-theme="light"]).
   Accent: #0066FF (unchanged)
   ========================================================================== */

/* -- Navbar chrome -- */
[data-theme="light"] .theme-toggle-btn {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(10, 30, 60, 0.14);
  color: #0f172a;
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: #0066ff;
  border-color: #0066ff;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(0, 102, 255, 0.2);
}

/* -- Mobile drawer -- */
[data-theme="light"] .mobile-nav-drawer {
  background: #ffffff;
  border-left-color: rgba(10, 30, 60, 0.16);
  box-shadow: -20px 0 50px rgba(10, 30, 60, 0.14);
}

[data-theme="light"] .mobile-drawer-close {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(10, 30, 60, 0.14);
  color: #0f172a;
}

/* -- Hero eyebrow badge -- */
[data-theme="light"] .hero-tag {
  background: transparent !important;
  border-color: rgba(0, 102, 255, 0.28) !important;
  color: #0066ff !important;
}

/* -- Button hierarchy (light) -- */
[data-theme="light"] .btn-primary:hover {
  background: #0055cc;
  filter: none;
  /* -- Button hierarchy (light) -- */
[data-theme="light"] .btn-primary:hover {
  background: #0055cc;
  filter: none;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.2),
              0 0 18px rgba(0, 102, 255, 0.2);
}
}

[data-theme="light"] .btn-secondary {
  background: #ffffff;
  border-color: rgba(10, 30, 60, 0.16);
  color: #0f172a;
  box-shadow: 0 2px 10px rgba(10, 30, 60, 0.05);
}

[data-theme="light"] .btn-secondary:hover {
  background: rgba(0, 102, 255, 0.2);
  border-color: #0066ff;
  color: #0066ff;
}

[data-theme="light"] .btn-ghost-subtle {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(10, 30, 60, 0.18);
  color: #0f172a;
  opacity: 1;
}

[data-theme="light"] .btn-ghost-subtle:hover {
  background: rgba(0, 102, 255, 0.2);
  border-color: ;
  color: #0066ff;
}

[data-theme="light"] .btn-talk-team {
  background: #ffffff;
  border: 1px solid rgba(10, 30, 60, 0.16);
  color: #0f172a !important;
}

[data-theme="light"] .btn-talk-team:hover {
  background: rgba(0, 102, 255, 0.2);
  border-color: #0066ff;
  color: #0066ff !important;
}


/* -- Testimonials link accent -- */
[data-theme="light"] .goji-testimonial-card:hover .card-learn-more {
  color: #0066ff;
  text-shadow: none;
}

/* -- Founders: homepage cards (.founder-card-v2) light surface -- */
[data-theme="light"] .founder-card-v2 {
  background: #ffffff;
  border-color: rgba(10, 30, 60, 0.12);
  box-shadow: 0 16px 40px rgba(10, 30, 60, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .founder-card-v2:hover {
  background: #ffffff;
  border-color: rgba(10, 30, 60, 0.2);
  box-shadow: 0 24px 50px rgba(10, 30, 60, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .founder-v2-name {
  color: #0f172a;
}
[data-theme="light"] .founder-v2-bio {
  color: #475569;
}

[data-theme="light"] .founder-v2-tag {
  background: rgba(0, 102, 255, 0.2);
  border-color: rgba(0, 102, 255, 0.2);
  color: #1e293b;
}

[data-theme="light"] .founder-card-v2:hover .founder-v2-tag {
  background: rgba(0, 102, 255, 0.2);
  border-color: rgba(0, 102, 255, 0.2);
  color: #0f172a;
}

[data-theme="light"] .btn-founder-linkedin {
  background: #ffffff;
  border-color: rgba(10, 30, 60, 0.16);
  color: #1e293b;
}

[data-theme="light"] .btn-founder-linkedin:hover {
  background: rgba(0, 102, 255, 0.2);
  border-color: #0066ff;
  color: #0066ff;
}

/* -- Footer separations -- */
[data-theme="light"] .footer-bottom {
  border-top-color: rgba(10, 30, 60, 0.1);
}

/* -- Tech stack: monochrome white SVG logos → dark charcoal on light bg
      (ios, unity, unreal-engine, openai, fastapi, vercel, express are pure-white
       SVGs; colored logos are NOT touched) -- */
[data-theme="light"] .tech-item-v3 .tech-logo-wrap img[src*="ios"],
[data-theme="light"] .tech-item-v3 .tech-logo-wrap img[src*="unity"],
[data-theme="light"] .tech-item-v3 .tech-logo-wrap img[src*="unreal-engine"],
[data-theme="light"] .tech-item-v3 .tech-logo-wrap img[src*="openai"],
[data-theme="light"] .tech-item-v3 .tech-logo-wrap img[src*="fastapi"],
[data-theme="light"] .tech-item-v3 .tech-logo-wrap img[src*="vercel"],
[data-theme="light"] .tech-item-v3 .tech-logo-wrap img[src*="express"] {
  filter: brightness(0.15);
}


@media (max-width: 576px) {
  .header-actions .btn-nav-start,
  .btn-nav-start {
    display: none !important;
  }
}

/* -- Mobile 310px - 420px Responsive Polish for WHO WE ARE & OUR PHILOSOPHY -- */
@media (max-width: 420px) {
  #whoWeAre {
    padding: 47px 0 !important;
  }

  .about-story-grid {
    gap: 32px !important;
  }

  .about-story-content {
    width: 100% !important;
  }

  .about-story-badges {
    margin: 18px 0 22px !important;
    gap: 6px !important;
  }

  .story-badge-pill {
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
  }

  .about-motto-box {
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  .motto-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .motto-tabs {
    width: 100% !important;
    display: flex !important;
    gap: 4px !important;
    padding: 3px !important;
  }

  .motto-tab-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 5px 6px !important;
    font-size: 0.7rem !important;
  }

  .motto-status {
    align-self: flex-start !important;
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }

  .motto-quote-wrapper {
    min-height: auto !important;
  }

  .motto-quote {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  .about-story-pillars {
    gap: 16px !important;
  }

  .about-pillar-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .pillar-top-row {
    margin-bottom: 10px !important;
  }

  .pillar-title-group {
    gap: 10px !important;
  }

  .pillar-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .pillar-icon-box svg {
    width: 18px !important;
    height: 18px !important;
  }

  .pillar-title {
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
  }

  .pillar-num-badge {
    font-size: 0.72rem !important;
    padding: 3px 10px !important;
  }

  .pillar-desc {
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
  }

  .pillar-tags {
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .pillar-tag {
    font-size: 0.7rem !important;
    padding: 3px 10px !important;
  }
}

/* GLOBAL NO-BLUE-HOVER FILL RULE
   Ensures card, principle item, and row backgrounds remain clean and simple on hover */
.service-row-v3:hover,
.service-row-v2:hover,
.services-card:hover,
.service-card-v2:hover,
.why-principle-item:hover,
.why-card:hover {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="light"] .service-row-v3:hover,
[data-theme="light"] .service-row-v2:hover,
[data-theme="light"] .services-card:hover,
[data-theme="light"] .service-card-v2:hover,
[data-theme="light"] .why-principle-item:hover,
[data-theme="light"] .why-card:hover {
  background: transparent !important;
  background-color: transparent !important;
}


/* ==========================================================================
   UNIFIED BRAND BLINKING DOT ENGINE FOR ALL SECTION EYEBROWS
   ========================================================================== */
@keyframes eyebrowDotBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px #0077ff, 0 0 4px #0077ff;
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
    box-shadow: 0 0 2px #0077ff;
  }
}

.eyebrow-dot,
.sp-eyebrow-dot,
.w-eyebrow-dot,
.kno-eyebrow-dot,
.fof-eyebrow-dot,
.aft-eyebrow-dot,
.eyebrow-mini-dot,
.hero-tag-pulse {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #0077ff !important;
  box-shadow: 0 0 10px #0077ff, 0 0 4px #0077ff !important;
  animation: eyebrowDotBlink 1.6s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}


/* ==========================================================================
   WHATSAPP MODAL CARD BRAND GREEN HOVER STYLING
   ========================================================================== */
.channel-card.channel-whatsapp:hover {
  background: rgba(37, 211, 102, 0.12) !important;
  border-color: rgba(37, 211, 102, 0.45) !important;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.2) !important;
}

.channel-card.channel-whatsapp:hover .channel-icon-wrap {
  background: #25D366 !important;
  color: #ffffff !important;
  border-color: #25D366 !important;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.4) !important;
}

.channel-card.channel-whatsapp:hover .channel-title {
  color: #25D366 !important;
}

.channel-card.channel-whatsapp:hover .channel-arrow {
  color: #25D366 !important;
  transform: translateX(5px) !important;
}


/* Increased font-size of FOLLOW US label by +1px */
.social-label {
  font-size: 0.79rem !important;
  letter-spacing: 0.12em !important;
}

.social-youtube:hover {
  background: rgba(255, 0, 0, 0.15) !important;
  color: #ff0000 !important;
  border-color: rgba(255, 0, 0, 0.4) !important;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.3) !important;
}

.social-tiktok:hover {
  background: rgba(254, 44, 85, 0.15) !important;
  color: #fe2c55 !important;
  border-color: rgba(254, 44, 85, 0.4) !important;
  box-shadow: 0 0 12px rgba(254, 44, 85, 0.3) !important;
}





/* ==========================================================================
   UNIFIED BRAND PILL-BUTTON BADGE STYLING FOR ALL SECTION EYEBROWS
   ========================================================================== */
.services-eyebrow-v3,
.sp-eyebrow,
.metrics-eyebrow,
.tech-eyebrow-v3,
.work-eyebrow-v6,
.why-eyebrow,
.realworld-eyebrow,
.testimonials-eyebrow,
.process-eyebrow,
.founders-eyebrow,
.faq-eyebrow,
.final-cta-eyebrow,
.contact-modal-eyebrow,
.wizard-eyebrow,
.hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: 1px solid rgba(0, 119, 255, 0.28) !important;
  color: #0077ff !important;
  font-family: var(--font-heading, 'Inter', sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 15px rgba(0, 119, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  margin-bottom: 20px !important;
}

[data-theme="light"] .services-eyebrow-v3,
[data-theme="light"] .sp-eyebrow,
[data-theme="light"] .metrics-eyebrow,
[data-theme="light"] .tech-eyebrow-v3,
[data-theme="light"] .work-eyebrow-v6,
[data-theme="light"] .why-eyebrow,
[data-theme="light"] .realworld-eyebrow,
[data-theme="light"] .testimonials-eyebrow,
[data-theme="light"] .process-eyebrow,
[data-theme="light"] .founders-eyebrow,
[data-theme="light"] .faq-eyebrow,
[data-theme="light"] .final-cta-eyebrow,
[data-theme="light"] .contact-modal-eyebrow,
[data-theme="light"] .wizard-eyebrow,
[data-theme="light"] .hero-tag {
  background: rgba(0, 102, 255, 0.08) !important;
  border-color: rgba(0, 102, 255, 0.2) !important;
  color: #0066ff !important;
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.06) !important;
}


/* ==========================================================================
   WHY CHOOSE US — LEFT STICKY COLUMN VISUAL CARD (LAPTOP & DESKTOP)
   ========================================================================== */
.why-left-visual-card {
  margin-top: 28px;
  background: rgba(13, 17, 24, 0.75);
  border: 1px solid rgba(0, 119, 255, 0.22);
  border-radius: 18px;
  padding: 22px 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 119, 255, 0.08);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.why-left-visual-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 119, 255, 0.45);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45), 0 0 25px rgba(0, 119, 255, 0.16);
}

.why-visual-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.why-visual-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0077ff;
  box-shadow: 0 0 10px #0077ff;
  animation: eyebrowDotBlink 1.6s ease-in-out infinite;
}

.why-visual-card-tag {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0077ff;
  text-transform: uppercase;
}

.why-visual-metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.why-metric-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.why-left-visual-card:hover .why-metric-pill {
  background: rgba(0, 119, 255, 0.06);
  border-color: rgba(0, 119, 255, 0.18);
}

.metric-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.metric-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-text strong {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
}

.metric-text span {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem;
  color: #94a3b8;
}

.why-visual-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.why-footer-badge {
  font-family: var(--font-code, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.why-footer-arrow {
  font-size: 0.9rem;
  color: #0077ff;
  transition: transform 0.25s ease;
}

.why-left-visual-card:hover .why-footer-arrow {
  transform: translateX(4px);
}

/* Light mode overrides */
[data-theme="light"] .why-left-visual-card {
  background: #ffffff;
  border-color: rgba(0, 102, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .why-metric-pill {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .metric-text strong {
  color: #0f172a;
}

[data-theme="light"] .metric-text span {
  color: #64748b;
}

@media (max-width: 768px) {
  .why-left-visual-card {
    margin-top: 24px;
    padding: 16px 14px;
  }
}


/* ==========================================================================
   SLEEK REFINED ABOUT HERO SECTION (REDUCED TOP PADDING & BALANCED COPY)
   ========================================================================== */
.about-hero-section {
  padding: 117px 0 42px !important;
  min-height: auto !important;
  display: flex;
  align-items: center;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}

.about-hero-copy {
  max-width: 600px;
}

.about-hero-copy .sp-eyebrow {
  margin-bottom: 16px !important;
}

.about-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.4vw, 3.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-main, #ffffff);
  margin: 0 0 16px !important;
}

.about-hero-lead {
  font-family: var(--font-body);
  font-size: 1.05rem !important;
  color: var(--text-muted, rgba(255, 255, 255, 0.82)) !important;
  line-height: 1.65 !important;
  margin: 0 0 12px !important;
}

.about-hero-sublead {
  font-family: var(--font-body);
  font-size: 0.92rem !important;
  color: var(--text-dim, rgba(255, 255, 255, 0.6)) !important;
  line-height: 1.6 !important;
  margin: 0 0 24px !important;
}

.about-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .about-hero-section {
    padding: 107px 0 27px !important;
  }
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-hero-copy {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .about-hero-section {
    padding: 97px 0 24px !important;
  }
}

@media (max-width: 425px) {
  .about-hero-section {
    padding: 90px 0 22px !important;
  }
}


/* ==========================================================================
   EXACT MAIN PAGE EYEBROW DESIGN SYSTEM (GLOWING PILL BADGE & BLINKING DOT)
   ========================================================================== */
.services-eyebrow-v3,
.sp-eyebrow,
.section-eyebrow,
.metrics-eyebrow,
.tech-eyebrow-v3,
.work-eyebrow-v6,
.why-eyebrow,
.realworld-eyebrow,
.testimonials-eyebrow,
.process-eyebrow,
.founders-eyebrow,
.faq-eyebrow,
.about-faq-eyebrow,
.final-cta-eyebrow,
.contact-modal-eyebrow,
.wizard-eyebrow,
.hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: 1px solid rgba(0, 119, 255, 0.28) !important;
  color: #0077ff !important;
  font-family: var(--font-heading, 'Inter', sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 15px rgba(0, 119, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  margin-bottom: 20px !important;
}

.eyebrow-dot,
.sp-eyebrow-dot,
.w-eyebrow-dot,
.kno-eyebrow-dot,
.fof-eyebrow-dot,
.aft-eyebrow-dot,
.eyebrow-mini-dot,
.hero-tag-pulse {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #0077ff !important;
  box-shadow: 0 0 10px #0077ff, 0 0 4px #0077ff !important;
  animation: eyebrowDotBlink 1.6s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .services-eyebrow-v3,
[data-theme="light"] .sp-eyebrow,
[data-theme="light"] .section-eyebrow,
[data-theme="light"] .metrics-eyebrow,
[data-theme="light"] .tech-eyebrow-v3,
[data-theme="light"] .work-eyebrow-v6,
[data-theme="light"] .why-eyebrow,
[data-theme="light"] .realworld-eyebrow,
[data-theme="light"] .testimonials-eyebrow,
[data-theme="light"] .process-eyebrow,
[data-theme="light"] .founders-eyebrow,
[data-theme="light"] .faq-eyebrow,
[data-theme="light"] .about-faq-eyebrow,
[data-theme="light"] .final-cta-eyebrow,
[data-theme="light"] .contact-modal-eyebrow,
[data-theme="light"] .wizard-eyebrow,
[data-theme="light"] .hero-tag {
  background: rgba(0, 102, 255, 0.08) !important;
  border-color: rgba(0, 102, 255, 0.2) !important;
  color: #0066ff !important;
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.06) !important;
}


/* ==========================================================================
   TRANSPARENT BACKGROUND FOR ALL SECTION EYEBROWS (BLUISH BG REMOVED)
   ========================================================================== */
.services-eyebrow-v3,
.sp-eyebrow,
.section-eyebrow,
.metrics-eyebrow,
.tech-eyebrow-v3,
.work-eyebrow-v6,
.why-eyebrow,
.realworld-eyebrow,
.testimonials-eyebrow,
.process-eyebrow,
.founders-eyebrow,
.faq-eyebrow,
.about-faq-eyebrow,
.final-cta-eyebrow,
.contact-modal-eyebrow,
.wizard-eyebrow,
.hero-tag {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(0, 119, 255, 0.28) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="light"] .services-eyebrow-v3,
[data-theme="light"] .sp-eyebrow,
[data-theme="light"] .section-eyebrow,
[data-theme="light"] .metrics-eyebrow,
[data-theme="light"] .tech-eyebrow-v3,
[data-theme="light"] .work-eyebrow-v6,
[data-theme="light"] .why-eyebrow,
[data-theme="light"] .realworld-eyebrow,
[data-theme="light"] .testimonials-eyebrow,
[data-theme="light"] .process-eyebrow,
[data-theme="light"] .founders-eyebrow,
[data-theme="light"] .faq-eyebrow,
[data-theme="light"] .about-faq-eyebrow,
[data-theme="light"] .final-cta-eyebrow,
[data-theme="light"] .contact-modal-eyebrow,
[data-theme="light"] .wizard-eyebrow,
[data-theme="light"] .hero-tag {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(0, 102, 255, 0.28) !important;
  color: #0066ff !important;
  box-shadow: none !important;
}


/* ============================================================
   UNIVERSAL LIGHT MODE TECH LOGO CONTRAST & VISIBILITY ENGINE
   Ensures monochrome white SVGs (express, openai, vercel, unity,
   unreal-engine, ios, fastapi, django-rest, claude, etc.) are crisp
   dark charcoal on white backgrounds in Light Mode across all pages.
   ============================================================ */
[data-theme="light"] img[src*="tech/express"],
[data-theme="light"] img[src*="tech/openai"],
[data-theme="light"] img[src*="tech/vercel"],
[data-theme="light"] img[src*="tech/unity"],
[data-theme="light"] img[src*="tech/unreal-engine"],
[data-theme="light"] img[src*="tech/ios"],
[data-theme="light"] img[src*="tech/fastapi"],
[data-theme="light"] img[src*="tech/django-rest"],
[data-theme="light"] img[src*="tech/claude"],
[data-theme="light"] img[src*="tech-logos/openai"],
[data-theme="light"] img[src*="tech-logos/unity"],
[data-theme="light"] img[src*="tech-logos/unreal-engine"],
[data-theme="light"] img[src*="tech-logos/ios"],
[data-theme="light"] img[src*="tech-logos/fastapi"] {
  filter: brightness(0.12) !important;
}

[data-theme="light"] .w-tech-logo:hover img,
[data-theme="light"] .tech-item-v3:hover img {
  filter: none;
  opacity: 1;
}
[data-theme="light"] .w-tech-logo:hover img[src*="tech/express"],
[data-theme="light"] .w-tech-logo:hover img[src*="tech/openai"],
[data-theme="light"] .w-tech-logo:hover img[src*="tech/vercel"],
[data-theme="light"] .w-tech-logo:hover img[src*="tech/unity"],
[data-theme="light"] .w-tech-logo:hover img[src*="tech/unreal-engine"],
[data-theme="light"] .w-tech-logo:hover img[src*="tech/ios"],
[data-theme="light"] .w-tech-logo:hover img[src*="tech/fastapi"],
[data-theme="light"] .w-tech-logo:hover img[src*="tech/django-rest"],
[data-theme="light"] .w-tech-logo:hover img[src*="tech/claude"],
[data-theme="light"] .tech-item-v3:hover img[src*="tech/express"],
[data-theme="light"] .tech-item-v3:hover img[src*="tech/openai"],
[data-theme="light"] .tech-item-v3:hover img[src*="tech/vercel"],
[data-theme="light"] .tech-item-v3:hover img[src*="tech/unity"],
[data-theme="light"] .tech-item-v3:hover img[src*="tech/unreal-engine"],
[data-theme="light"] .tech-item-v3:hover img[src*="tech/ios"],
[data-theme="light"] .tech-item-v3:hover img[src*="tech/fastapi"] {
  filter: brightness(0.12) !important;
}


/* ==========================================================================
   MALIK AXIOM — UNIVERSAL BI-DIRECTIONAL SCROLL TRANSITIONS
   Silky-Smooth Dual-Direction Easing (Scroll Down & Scroll Up)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .scroll-anim-ready {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease,
                background 0.25s ease;
    transition-delay: calc(var(--stagger-index, 0) * 40ms);
  }

  /* When In-View (Revealed) */
  .scroll-anim-ready.in-view,
  .scroll-anim-ready.is-revealed,
  .kno-section-head, .fof-section-head, .aft-section-head,
  .kno-hero-figure, .fof-hero-frame, .aft-hero-visual,
  .kno-showcase-frame, .fof-showcase-frame, .aft-showcase-frame {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  /* Subtle Variations based on element types */
  .section-header.scroll-anim-ready,
  .sp-section-header.scroll-anim-ready {
    transform: translate3d(0, 12px, 0);
  }

  .sp-hero-dual-visual.scroll-anim-ready {
    transform: translate3d(0, 14px, 0) scale(0.99);
  }

  .sp-video-frame.scroll-anim-ready {
    transform: translate3d(0, 16px, 0) scale(0.99);
  }

  /* Mobile responsiveness reduction */
  @media (max-width: 768px) {
    .scroll-anim-ready {
      transform: translate3d(0, 10px, 0);
      transition-duration: 0.3s;
      transition-delay: calc(var(--stagger-index, 0) * 30ms);
    }
  }
}

/* ==========================================================================
   4K, ULTRA-WIDE & 2K HIGH-DENSITY OPTIMIZATION SYSTEM
   Targeted High-Density & Large Viewports:
   - 1440px – 1920px (Fluid Desktop Scale)
   - 2560px Wide (QHD / 2K Displays)
   - 3440px Wide (Ultra-Wide 21:9 Displays)
   - 3840px Wide (UHD / 4K Displays & Beyond)
   Preserves 100% of the Existing Branding, Layout, Colors & Animations
   ========================================================================== */

/* ── 1. FLUID DESKTOP OPTIMIZATION (1440px - 1999px) ──────────────────────── */
@media (min-width: 1440px) and (max-width: 1999px) {
  :root {
    --container-max: clamp(1340px, 84vw, 1580px);
  }

  .container {
    max-width: var(--container-max);
    padding: 0 32px;
  }

  .header {
    max-width: clamp(1340px, 86vw, 1560px);
  }

  .fof-container,
  .kno-container,
  .afr-container {
    max-width: clamp(1380px, 86vw, 1560px);
  }

  .service-desc-text {
    max-width: 720px;
  }

  .hero-subtitle {
    max-width: 860px;
  }
}

/* ── 2. 2K VIEWPORT OPTIMIZATION (min-width: 2000px) ─────────────────────── */
@media (min-width: 2000px) {
  :root {
    --container-max: 1780px;
  }

  body {
    font-size: 17px;
  }

  .container {
    max-width: 1780px;
    padding: 0 40px;
  }

  /* Case Study Containers on 2K */
  .fof-container,
  .kno-container,
  .afr-container {
    max-width: 1780px !important;
    padding: 0 44px !important;
  }

  /* Header & Navbar Scaling */
  .header {
    max-width: 1720px;
    top: 20px;
    padding: 12px 28px;
  }

  .header.scrolled {
    top: 14px;
    padding: 10px 24px;
  }

  .brand-emblem-img {
    height: 40px;
  }

  .logo-title {
    font-size: 1.18rem;
  }

  .logo-sub {
    font-size: 0.6rem;
    letter-spacing: 2.6px;
  }

  .desktop-nav .nav-links {
    gap: 28px;
  }

  .desktop-nav .nav-link {
    font-size: 1.02rem;
  }

  .btn-nav-start,
  .btn-nav-contact {
    font-size: 0.95rem;
    padding: 10px 22px;
    min-height: 44px;
  }

  .theme-toggle-btn {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .nav-services-dropdown {
    width: 740px;
    padding: 20px;
    border-radius: 18px;
  }

  /* Hero Section */
  .hero {
    padding: 180px 0 110px;
  }

  .hero-title-wrapper {
    max-width: 1440px;
  }

  .hero-tag {
    font-size: 0.88rem;
    padding: 8px 20px;
    letter-spacing: 2.2px;
    margin-bottom: 24px;
  }

  .hero-title {
    font-size: clamp(3.2rem, 3.8vw, 4.6rem);
    line-height: 1.14;
    margin-bottom: 24px;
  }

  .hero-subtitle {
    font-size: 1.25rem;
    max-width: 900px;
    line-height: 1.7;
    margin: 0 auto 38px;
  }

  .hero-ctas {
    gap: 20px;
  }

  .hero-ctas .btn {
    font-size: 1.08rem;
    padding: 14px 34px;
    min-height: 52px;
  }

  /* Video Fullscreen Section */
  .fullscreen-video-outer {
    padding: 60px 0 80px;
  }

  .fullscreen-video-wrapper {
    max-width: 1800px;
    margin: 0 auto;
  }

  .video-expand-container {
    border-radius: 28px;
  }

  /* Impact & Metrics Section */
  .metrics-section {
    padding: 130px 0;
  }

  .metrics-layout {
    gap: 80px;
  }

  .metrics-eyebrow {
    font-size: 0.88rem;
    margin-bottom: 18px;
  }

  .metrics-headline {
    font-size: 2.2rem;
    line-height: 1.25;
    margin-bottom: 18px;
  }

  .metrics-attribution {
    font-size: 1.05rem;
    margin-bottom: 18px;
  }

  .metrics-description {
    font-size: 1.18rem;
    line-height: 1.7;
    margin-bottom: 32px;
  }

  .metric-card-v3 {
    padding: 34px 30px;
    border-radius: 20px;
  }

  .metric-num-val {
    font-size: 3.4rem;
  }

  .metric-unit {
    font-size: 2.2rem;
  }

  .metric-text-val {
    font-size: 2rem;
  }

  .metric-card-label {
    font-size: 1.05rem;
  }

  /* Services Section */
  .services-section,
  .services-section-v3 {
    padding: 130px 0;
  }

  .section-header,
  .services-header-v3 {
    margin-bottom: 60px;
  }

  .section-eyebrow,
  .services-eyebrow-v3 {
    font-size: 0.88rem;
    margin-bottom: 14px;
  }

  .section-title,
  .services-title-v3 {
    font-size: clamp(2.6rem, 3.2vw, 3.4rem);
  }

  .section-subtitle,
  .services-subheading-v3 {
    font-size: 1.2rem;
    max-width: 780px;
  }

  .service-row-v3 {
    padding: 36px 44px;
    border-radius: 24px;
    gap: 36px;
    min-height: 180px;
  }

  .service-num-badge {
    font-size: 1.25rem;
  }

  .service-title-text {
    font-size: 1.85rem;
  }

  .service-desc-text {
    font-size: 1.08rem;
    max-width: 680px;
  }

  .service-arrow-btn {
    width: 54px;
    height: 54px;
    font-size: 1.35rem;
  }

  /* Technology Marquee */
  .tech-stack-section,
  .tech-section-v3 {
    padding: 90px 0;
  }

  .tech-pill {
    padding: 12px 24px;
    border-radius: 14px;
    gap: 12px;
  }

  .tech-pill-icon {
    width: 26px;
    height: 26px;
  }

  .tech-pill-text {
    font-size: 1.05rem;
  }

  /* Work Section */
  .work-section {
    padding: 130px 0;
  }

  .work-edit-grid {
    gap: 32px;
  }

  .work-edit-duo {
    gap: 32px;
  }

  .work-edit-card {
    border-radius: 24px;
  }

  .work-edit-featured .work-edit-media {
    max-height: 440px;
    border-radius: 24px 24px 0 0;
  }

  .work-edit-featured .work-edit-info {
    padding: 26px 32px 30px;
  }

  .work-edit-featured .work-edit-title {
    font-size: 1.95rem;
  }

  .work-edit-featured .work-edit-desc {
    font-size: 1.02rem;
    max-width: 720px;
  }

  .work-edit-info {
    padding: 26px 28px 30px;
  }

  .work-edit-title {
    font-size: 1.65rem;
  }

  .work-edit-desc {
    font-size: 1.02rem;
  }

  .work-footer-cta-v6 {
    margin-top: 52px;
  }

  .work-all-btn-v6 {
    font-size: 1.08rem;
    padding: 14px 34px;
  }

  /* Why Choose Us Section */
  .why-section {
    padding: 130px 0;
  }

  .why-open-statement {
    margin-bottom: 60px;
  }

  .why-closing-banner {
    padding: 10px 26px;
  }

  .why-closing-banner .banner-text {
    font-size: 1rem;
  }

  .why-container {
    gap: 60px;
  }

  .why-main-title {
    font-size: 2.8rem;
  }

  .why-intro-desc {
    font-size: 1.15rem;
    line-height: 1.7;
  }

  .why-editorial-card {
    padding: 38px 42px;
    border-radius: 22px;
    gap: 18px;
  }

  .editorial-title {
    font-size: 1.55rem;
  }

  .editorial-body {
    font-size: 1.05rem;
    line-height: 1.68;
  }

  /* Testimonials */
  .testimonials-section {
    padding: 130px 0;
  }

  .goji-testimonial-card {
    width: 440px;
    padding: 32px 34px;
    border-radius: 22px;
  }

  .card-quote-text {
    font-size: 1.08rem;
    line-height: 1.68;
  }

  .author-avatar-badge {
    width: 44px;
    height: 44px;
    font-size: 0.98rem;
  }

  .author-name {
    font-size: 1.05rem;
  }

  .author-role {
    font-size: 0.85rem;
  }

  /* 7-Step Process */
  .process-section {
    padding: 130px 0;
  }

  .process-step-node {
    padding: 24px 28px;
    border-radius: 20px;
  }

  .step-marker-num {
    font-size: 1.25rem;
  }

  /* Founders */
  .founders-section {
    padding: 130px 0;
  }

  .founders-grid-v3 {
    gap: 32px;
  }

  .founder-card-inner-v3 {
    padding: 36px;
    border-radius: 24px;
    gap: 32px;
  }

  .founder-name-v3 {
    font-size: 1.85rem;
  }

  .founder-role-v3 {
    font-size: 1rem;
  }

  .founder-quote-v3 {
    font-size: 1.08rem;
    line-height: 1.65;
  }

  .founder-bio-v3 {
    font-size: 1rem;
    line-height: 1.68;
  }

  /* FAQ */
  .faq-section {
    padding: 130px 0;
  }

  .faq-accordion-item,
  .faq-item {
    border-radius: 18px;
    margin-bottom: 18px;
  }

  .faq-accordion-header,
  .faq-question-btn {
    padding: 22px 28px;
  }

  .faq-question-text {
    font-size: 1.18rem;
  }

  .faq-accordion-body p,
  .faq-answer-content p {
    font-size: 1.05rem;
    line-height: 1.68;
    padding: 0 28px 22px;
  }

  /* Final CTA */
  .final-cta-section {
    padding: 130px 0;
  }

  .final-cta-card {
    padding: 80px 60px;
    border-radius: 32px;
  }

  .cta-headline-v3 {
    font-size: clamp(2.6rem, 3.4vw, 3.6rem);
  }

  .cta-subhead-v3 {
    font-size: 1.2rem;
    max-width: 780px;
  }

  .cta-action-buttons .btn {
    font-size: 1.08rem;
    padding: 15px 36px;
  }

  /* Footer */
  .footer-v3 {
    padding: 90px 0 40px;
  }

  .footer-col-title {
    font-size: 1.1rem;
  }

  .footer-links li a {
    font-size: 1.02rem;
  }

  /* Modals Scaling on 2K */
  .contact-options-modal-container {
    max-width: 680px !important;
    padding: 44px 40px !important;
  }

  .wizard-modal-container {
    max-width: 920px !important;
    padding: 44px 46px !important;
  }

  /* Floating Chatbot */
  .ai-chatbot-widget {
    bottom: 36px;
    right: 36px;
  }

  .chat-toggle-btn {
    width: 62px;
    height: 62px;
  }

  .chat-panel {
    width: 440px;
    max-height: 660px;
  }
}

/* ── 3. ULTRA-WIDE 21:9 VIEWPORTS (min-width: 2560px and min-aspect-ratio: 21/10) ── */
@media (min-width: 2560px) and (min-aspect-ratio: 21/10) {
  .hero {
    padding: clamp(140px, 12vh, 190px) 0 80px !important;
  }

  .section,
  .services-section,
  .services-section-v3,
  .metrics-section,
  .work-section,
  .why-section,
  .process-section,
  .founders-section,
  .faq-section,
  .final-cta-section {
    padding: clamp(80px, 7vh, 120px) 0 !important;
  }

  .container {
    max-width: 2160px !important;
  }

  .fof-container,
  .kno-container,
  .afr-container {
    max-width: 2160px !important;
  }

  .hero-subtitle,
  .section-subtitle,
  .services-subheading-v3,
  .why-intro-desc,
  .editorial-body,
  .service-desc-text {
    max-width: 860px !important;
  }
}

/* ── 4. 4K ULTRA-HIGH DENSITY VIEWPORT OPTIMIZATION (min-width: 3200px) ───── */
@media (min-width: 3200px) {
  :root {
    --container-max: 2380px;
  }

  body {
    font-size: 20px;
  }

  .container {
    max-width: 2380px;
    padding: 0 60px;
  }

  /* Case Study Containers on 4K */
  .fof-container,
  .kno-container,
  .afr-container {
    max-width: 2380px !important;
    padding: 0 64px !important;
  }

  /* Header & Navbar Scaling */
  .header {
    max-width: 2280px;
    top: 28px;
    padding: 16px 36px;
  }

  .header.scrolled {
    top: 18px;
    padding: 12px 30px;
  }

  .brand-emblem-img {
    height: 48px;
  }

  .logo-title {
    font-size: 1.35rem;
  }

  .logo-sub {
    font-size: 0.68rem;
    letter-spacing: 3px;
  }

  .desktop-nav .nav-links {
    gap: 36px;
  }

  .desktop-nav .nav-link {
    font-size: 1.18rem;
  }

  .btn-nav-start,
  .btn-nav-contact {
    font-size: 1.1rem;
    padding: 12px 28px;
    min-height: 52px;
  }

  .theme-toggle-btn {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }

  .nav-services-dropdown {
    width: 900px;
    padding: 26px;
    border-radius: 22px;
    top: calc(100% + 20px);
  }

  .dropdown-item {
    padding: 16px 20px;
    border-radius: 14px;
    gap: 16px;
  }

  .dropdown-icon {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }

  .dropdown-title {
    font-size: 1.18rem;
  }

  .dropdown-desc {
    font-size: 0.95rem;
  }

  /* Hero Section */
  .hero {
    padding: 230px 0 140px;
  }

  .hero-title-wrapper {
    max-width: 1840px;
  }

  .hero-tag {
    font-size: 1.05rem;
    padding: 10px 26px;
    letter-spacing: 2.6px;
    margin-bottom: 28px;
  }

  .hero-title {
    font-size: clamp(4.2rem, 4.8vw, 5.8rem);
    line-height: 1.12;
    margin-bottom: 30px;
  }

  .hero-subtitle {
    font-size: 1.5rem;
    max-width: 1180px;
    line-height: 1.75;
    margin: 0 auto 48px;
  }

  .hero-ctas {
    gap: 26px;
  }

  .hero-ctas .btn {
    font-size: 1.25rem;
    padding: 18px 44px;
    min-height: 64px;
  }

  /* Fullscreen Video Section */
  .fullscreen-video-outer {
    padding: 80px 0 110px;
  }

  .fullscreen-video-wrapper {
    max-width: 2380px;
  }

  .video-expand-container {
    border-radius: 36px;
  }

  /* Impact & Metrics Section */
  .metrics-section {
    padding: 170px 0;
  }

  .metrics-layout {
    gap: 120px;
    grid-template-columns: 1.1fr 1fr;
  }

  .metrics-eyebrow {
    font-size: 1.02rem;
    letter-spacing: 2.8px;
    margin-bottom: 24px;
  }

  .metrics-headline {
    font-size: 2.9rem;
    line-height: 1.25;
    margin-bottom: 24px;
  }

  .metrics-attribution {
    font-size: 1.25rem;
    margin-bottom: 24px;
  }

  .metrics-description {
    font-size: 1.45rem;
    line-height: 1.75;
    margin-bottom: 44px;
  }

  .metrics-cta-btn {
    font-size: 1.2rem;
    padding: 18px 42px;
    min-height: 60px;
  }

  .metrics-grid-right {
    gap: 28px;
  }

  .metric-card-v3 {
    padding: 46px 40px;
    border-radius: 26px;
    gap: 14px;
  }

  .metric-num-val {
    font-size: 4.5rem;
  }

  .metric-unit {
    font-size: 2.8rem;
  }

  .metric-text-val {
    font-size: 2.6rem;
  }

  .metric-card-label {
    font-size: 1.28rem;
  }

  /* Services Section */
  .services-section,
  .services-section-v3 {
    padding: 170px 0;
  }

  .section-header,
  .services-header-v3 {
    margin-bottom: 80px;
  }

  .section-eyebrow,
  .services-eyebrow-v3 {
    font-size: 1.05rem;
    letter-spacing: 2.8px;
    margin-bottom: 18px;
  }

  .section-title,
  .services-title-v3 {
    font-size: clamp(3.2rem, 3.8vw, 4.4rem);
    margin-bottom: 18px;
  }

  .section-subtitle,
  .services-subheading-v3 {
    font-size: 1.45rem;
    max-width: 980px;
  }

  .services-list-v3 {
    gap: 28px;
  }

  .service-row-v3 {
    padding: 50px 60px;
    border-radius: 30px;
    gap: 50px;
    min-height: 220px;
  }

  .service-num-badge {
    font-size: 1.55rem;
  }

  .service-badge-pill {
    font-size: 0.88rem;
    padding: 6px 16px;
  }

  .service-title-text {
    font-size: 2.3rem;
  }

  .service-desc-text {
    font-size: 1.3rem;
    line-height: 1.7;
    max-width: 880px;
  }

  .service-arrow-btn {
    width: 68px;
    height: 68px;
    font-size: 1.6rem;
    border-radius: 18px;
  }

  /* Technology Marquee */
  .tech-stack-section,
  .tech-section-v3 {
    padding: 120px 0;
  }

  .tech-pill {
    padding: 16px 32px;
    border-radius: 18px;
    gap: 16px;
  }

  .tech-pill-icon {
    width: 34px;
    height: 34px;
  }

  .tech-pill-text {
    font-size: 1.3rem;
  }

  /* Work Section */
  .work-section {
    padding: 170px 0;
  }

  .work-edit-grid {
    gap: 44px;
  }

  .work-edit-duo {
    gap: 44px;
  }

  .work-edit-card {
    border-radius: 30px;
  }

  .work-edit-featured .work-edit-media {
    max-height: 560px;
    border-radius: 30px 30px 0 0;
  }

  .work-edit-featured .work-edit-info {
    padding: 36px 44px 40px;
  }

  .work-edit-featured .work-edit-number {
    font-size: 1.35rem;
  }

  .work-edit-featured .work-edit-badge {
    font-size: 0.85rem;
    letter-spacing: 2.6px;
  }

  .work-edit-featured .work-edit-title {
    font-size: 2.5rem;
    margin-bottom: 14px;
  }

  .work-edit-featured .work-edit-desc {
    font-size: 1.3rem;
    line-height: 1.65;
    max-width: 960px;
    margin-bottom: 18px;
  }

  .work-edit-info {
    padding: 34px 38px 38px;
  }

  .work-edit-number {
    font-size: 1.25rem;
  }

  .work-edit-badge {
    font-size: 0.82rem;
    letter-spacing: 2.4px;
  }

  .work-edit-title {
    font-size: 2.1rem;
    margin-bottom: 12px;
  }

  .work-edit-desc {
    font-size: 1.25rem;
    line-height: 1.65;
    margin-bottom: 20px;
  }

  .work-edit-cta {
    font-size: 1.18rem;
  }

  .work-footer-cta-v6 {
    margin-top: 68px;
  }

  .work-all-btn-v6 {
    font-size: 1.25rem;
    padding: 18px 44px;
    border-radius: 9999px;
  }

  /* Why Choose Us Section */
  .why-section {
    padding: 170px 0;
  }

  .why-open-statement {
    margin-bottom: 80px;
  }

  .why-closing-banner {
    padding: 12px 34px;
  }

  .why-closing-banner .banner-text {
    font-size: 1.2rem;
    letter-spacing: 2.8px;
  }

  .why-container {
    gap: 90px;
  }

  .why-eyebrow {
    font-size: 1.05rem;
    margin-bottom: 16px;
  }

  .why-main-title {
    font-size: 3.6rem;
    margin-bottom: 20px;
  }

  .why-intro-desc {
    font-size: 1.45rem;
    line-height: 1.75;
  }

  .why-editorial-card {
    padding: 50px 54px;
    border-radius: 28px;
    gap: 22px;
  }

  .card-step-num {
    font-size: 1.25rem;
  }

  .editorial-title {
    font-size: 2rem;
  }

  .editorial-body {
    font-size: 1.32rem;
    line-height: 1.72;
  }

  /* Testimonials */
  .testimonials-section {
    padding: 170px 0;
  }

  .goji-testimonial-card {
    width: 560px;
    padding: 42px 46px;
    border-radius: 28px;
    gap: 20px;
  }

  .card-quote-text {
    font-size: 1.35rem;
    line-height: 1.7;
  }

  .author-avatar-badge {
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
    border-radius: 14px;
  }

  .author-name {
    font-size: 1.25rem;
  }

  .author-role {
    font-size: 1.05rem;
  }

  .card-learn-more {
    font-size: 1.08rem;
  }

  /* 7-Step Process */
  .process-section {
    padding: 170px 0;
  }

  .process-step-node {
    padding: 32px 36px;
    border-radius: 26px;
  }

  .step-marker {
    width: 54px;
    height: 54px;
  }

  .step-marker-num {
    font-size: 1.5rem;
  }

  .step-title {
    font-size: 1.45rem;
  }

  .step-desc {
    font-size: 1.2rem;
    line-height: 1.65;
  }

  /* Founders */
  .founders-section {
    padding: 170px 0;
  }

  .founders-grid-v3 {
    gap: 44px;
  }

  .founder-card-inner-v3 {
    padding: 46px;
    border-radius: 30px;
    gap: 40px;
  }

  .founder-photo-img-v3 {
    border-radius: 24px;
  }

  .founder-name-v3 {
    font-size: 2.3rem;
  }

  .founder-role-v3 {
    font-size: 1.25rem;
  }

  .founder-quote-v3 {
    font-size: 1.32rem;
    line-height: 1.7;
  }

  .founder-bio-v3 {
    font-size: 1.22rem;
    line-height: 1.72;
  }

  .badge-item {
    font-size: 0.95rem;
    padding: 8px 18px;
    border-radius: 10px;
  }

  /* FAQ */
  .faq-section {
    padding: 170px 0;
  }

  .faq-accordion-item,
  .faq-item {
    border-radius: 22px;
    margin-bottom: 24px;
  }

  .faq-accordion-header,
  .faq-question-btn {
    padding: 28px 36px;
  }

  .faq-question-text {
    font-size: 1.35rem;
  }

  .faq-icon {
    width: 36px;
    height: 36px;
    font-size: 1.35rem;
  }

  .faq-accordion-body p,
  .faq-answer-content p {
    font-size: 1.22rem;
    line-height: 1.75;
    padding: 0 36px 28px;
  }

  /* Final CTA */
  .final-cta-section {
    padding: 170px 0;
  }

  .final-cta-card {
    padding: 110px 80px;
    border-radius: 40px;
    max-width: 2200px;
    margin: 0 auto;
  }

  .cta-eyebrow {
    font-size: 1.05rem;
    letter-spacing: 2.8px;
    margin-bottom: 24px;
  }

  .cta-headline-v3 {
    font-size: clamp(3.4rem, 4.2vw, 4.8rem);
    margin-bottom: 24px;
  }

  .cta-subhead-v3 {
    font-size: 1.55rem;
    max-width: 1050px;
    margin-bottom: 48px;
  }

  .cta-action-buttons {
    gap: 24px;
  }

  .cta-action-buttons .btn {
    font-size: 1.25rem;
    padding: 20px 46px;
  }

  /* Footer */
  .footer-v3 {
    padding: 120px 0 60px;
  }

  .footer-col-title {
    font-size: 1.35rem;
    margin-bottom: 24px;
  }

  .footer-links li a {
    font-size: 1.2rem;
    line-height: 2.1;
  }

  .footer-copyright {
    font-size: 1.12rem;
  }

  /* Modals Scaling on 4K */
  .contact-options-modal-container {
    max-width: 820px !important;
    padding: 56px 50px !important;
    border-radius: 28px !important;
  }

  .contact-modal-title {
    font-size: 2.2rem !important;
  }

  .contact-modal-sub {
    font-size: 1.15rem !important;
  }

  .channel-card {
    padding: 22px 28px !important;
    border-radius: 18px !important;
  }

  .channel-title {
    font-size: 1.22rem !important;
  }

  .channel-desc {
    font-size: 1rem !important;
  }

  .wizard-modal-container {
    max-width: 1100px !important;
    padding: 54px 58px !important;
    border-radius: 30px !important;
  }

  .wizard-title {
    font-size: 2.3rem !important;
  }

  .wizard-subtitle {
    font-size: 1.18rem !important;
  }

  .wizard-select-input,
  .wizard-input,
  .wizard-textarea {
    font-size: 1.08rem !important;
    padding: 16px 20px !important;
  }

  /* Floating Chatbot */
  .ai-chatbot-widget {
    bottom: 48px;
    right: 48px;
  }

  .chat-toggle-btn {
    width: 74px;
    height: 74px;
    font-size: 1.6rem;
  }

  .chat-panel {
    width: 520px;
    max-height: 780px;
    border-radius: 28px;
  }

  .chat-header {
    padding: 22px 26px;
  }

  .chat-messages {
    padding: 24px 26px;
  }

  .chat-msg {
    font-size: 1.15rem;
    padding: 14px 18px;
  }

  .chat-input-row {
    padding: 18px 24px;
  }

  .chat-input {
    font-size: 1.15rem;
  }
}


/* ── Hide Navbar 'Start a Project' CTA Button between 320px and 380px across all pages ── */
@media (max-width: 380px) {
  .header .btn-nav-start,
  .header-actions .btn-nav-start,
  .btn-nav-start,
  .header-cta-btn,
  .nav-btn-primary {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}



/* ==========================================================================
   HERO SECTION & CODE EDITOR 320px - 425px MOBILE RESPONSIVE OPTIMIZATION
   ========================================================================== */
@media (max-width: 425px) {
  /* Hero Container & Layout */
  .sp-clean-hero {
    padding: 90px 0 22px !important;
    min-height: auto !important;
  }
  
  .sp-hero-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
  }

  .sp-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  /* Hero Typography */
  .sp-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sp-eyebrow {
    font-size: 0.68rem !important;
    padding: 3px 10px !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    gap: 6px !important;
  }

  .sp-hero-title {
    font-size: clamp(1.4rem, 6.4vw, 1.85rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 12px !important;
    word-break: break-word !important;
  }

  .sp-hero-lead {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    margin: 0 0 18px !important;
    color: var(--text-muted, #94a3b8) !important;
  }

  .sp-hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .sp-hero-ctas .btn,
  .sp-hero-ctas button,
  .sp-hero-ctas a {
    width: 100% !important;
    min-height: 44px !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.86rem !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }

  /* Visual Column & Dual Visual Wrapper */
  .sp-hero-dual-visual {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  /* Code Editor / IDE Responsive Refinements */
  .sp-hero-code-editor {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  /* Tab Bar */
  .sp-editor-tab-bar {
    padding: 8px 10px !important;
    gap: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  .sp-editor-dots {
    gap: 4px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .sp-editor-dots span {
    width: 8px !important;
    height: 8px !important;
  }

  .sp-editor-tab {
    padding: 2px 8px !important;
    font-size: 0.68rem !important;
    border-radius: 6px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
    flex-shrink: 1 !important;
  }

  .sp-editor-status {
    padding: 2px 6px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.4px !important;
    border-radius: 5px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .sp-editor-status .sp-eyebrow-dot {
    width: 5px !important;
    height: 5px !important;
  }

  /* Editor Body & Syntax Area */
  .sp-editor-body {
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    padding: 10px 0 !important;
    min-height: 190px !important;
    max-height: 250px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .sp-editor-line-nums {
    font-size: 0.7rem !important;
    line-height: 1.6 !important;
    padding-right: 4px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .sp-editor-code {
    font-size: 0.68rem !important;
    line-height: 1.6 !important;
    padding: 0 8px !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow: hidden !important;
  }

  .sp-code-cursor {
    width: 2px !important;
    height: 1em !important;
  }
}



/* ==========================================================================
   VIDEO BUTTONS & BADGES PROGRESSIVE SHRINK & MOBILE HIDE ENGINE
   (Scales down below 1024px and completely hides on small screens <= 576px)
   ========================================================================== */
@media (max-width: 1024px) {
  .sp-video-badge,
  .about-video-badge,
  .kno-video-badge,
  .video-pill-badge {
    padding: 6px 12px !important;
    font-size: 0.65rem !important;
    letter-spacing: 1px !important;
    top: 14px !important;
    left: 14px !important;
    transform: scale(0.92);
    transform-origin: top left;
  }

  .sp-video-toggle-btn,
  .about-video-toggle-btn,
  .video-sound-btn,
  .video-expand-btn {
    padding: 7px 16px !important;
    font-size: 0.74rem !important;
  }
}

@media (max-width: 768px) {
  .sp-video-badge,
  .about-video-badge,
  .kno-video-badge,
  .video-pill-badge {
    padding: 4px 9px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.6px !important;
    top: 10px !important;
    left: 10px !important;
    transform: scale(0.85);
    transform-origin: top left;
  }

  .sp-video-toggle-btn,
  .about-video-toggle-btn,
  .video-sound-btn,
  .video-expand-btn {
    padding: 5px 12px !important;
    font-size: 0.68rem !important;
  }
}

@media (max-width: 576px) {
  .sp-video-badge,
  .about-video-badge,
  .kno-video-badge,
  .video-pill-badge,
  .sp-video-toggle-btn,
  .about-video-toggle-btn,
  .video-sound-btn,
  .video-expand-btn,
  .sp-video-controls .sp-video-toggle-btn,
  .about-video-controls .about-video-toggle-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   WHAT WE BUILD SECTION RESPONSIVE ENGINE (320px - 730px)
   ========================================================================== */
@media (max-width: 730px) {
  #whatWeBuild {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  #whatWeBuild .sp-section-header {
    margin-bottom: 24px !important;
  }

  #whatWeBuild .sp-section-title {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  #whatWeBuild .sp-section-sub {
    font-size: clamp(0.85rem, 2.6vw, 0.95rem) !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* Main Featured Showcase Card */
  .sp-build-featured-showcase {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .sp-build-featured-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Left Column: Copy */
  .sp-featured-copy-col {
    gap: 12px !important;
    width: 100% !important;
  }

  .sp-featured-eyebrow {
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
  }

  .sp-featured-title {
    font-size: clamp(1.3rem, 4.8vw, 1.65rem) !important;
    line-height: 1.25 !important;
  }

  .sp-featured-desc {
    font-size: clamp(0.84rem, 2.5vw, 0.92rem) !important;
    line-height: 1.55 !important;
  }

  .sp-featured-highlights {
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .sp-highlight-item {
    font-size: clamp(0.78rem, 2.4vw, 0.85rem) !important;
    gap: 8px !important;
    line-height: 1.35 !important;
  }

  .sp-highlight-check {
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
  }

  /* Right Column: Visual Container */
  .sp-featured-visual-col {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 1. Web / Mobile / Backend / Cloud Ecosystem Visual */
  .sp-web-ecosystem-visual {
    min-height: auto !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    border-radius: 14px !important;
  }

  .eco-frame-bar {
    height: 34px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }

  .eco-window-controls {
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .eco-dot {
    width: 6px !important;
    height: 6px !important;
  }

  .eco-address-bar {
    font-size: 0.6rem !important;
    padding: 2px 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .eco-address-bar svg {
    flex-shrink: 0 !important;
  }

  .eco-status-tag {
    font-size: 0.58rem !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .eco-canvas {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  .eco-nodes-overlay {
    display: none !important;
  }

  .eco-sidebar {
    display: none !important;
  }

  .eco-center-shell {
    width: 100% !important;
    gap: 8px !important;
  }

  .eco-header-strip {
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }

  .eco-strip-text {
    font-size: 0.72rem !important;
  }

  .eco-pill-mark {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
  }

  .eco-metrics-triple {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .eco-stat-box {
    padding: 6px 8px !important;
    border-radius: 8px !important;
    gap: 4px !important;
  }

  .eco-label-text {
    font-size: 0.54rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .eco-chart-panel {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    gap: 4px !important;
  }

  .eco-chart-tag {
    font-size: 0.58rem !important;
  }

  .eco-chart-svg {
    height: 55px !important;
    max-height: 60px !important;
  }

  .eco-right-panel {
    width: 100% !important;
    gap: 8px !important;
  }

  .eco-portal-card {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    gap: 6px !important;
  }

  .eco-portal-title {
    font-size: 0.72rem !important;
  }

  .eco-portal-desc {
    font-size: 0.65rem !important;
    line-height: 1.35 !important;
  }

  .eco-responsive-mini {
    padding: 6px 8px !important;
    border-radius: 8px !important;
    gap: 4px !important;
  }

  .eco-mini-block {
    height: 14px !important;
  }

  /* 2. AI Interactive Engine Card (AI Solutions Page) */
  .ai-interactive-engine-card {
    padding: 16px 12px !important;
    border-radius: 14px !important;
    gap: 12px !important;
  }

  .ai-engine-header-bar {
    padding-bottom: 10px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .ai-engine-badge {
    font-size: 0.65rem !important;
    padding: 3px 9px !important;
  }

  .ai-engine-status-text {
    font-size: 0.65rem !important;
  }

  .ai-pipeline-node {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    gap: 6px !important;
  }

  .ai-node-left {
    gap: 8px !important;
  }

  .ai-node-icon-box {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
  }

  .ai-node-icon-box svg {
    width: 13px !important;
    height: 13px !important;
  }

  .ai-node-step-label {
    font-size: 0.56rem !important;
  }

  .ai-node-step-title {
    font-size: 0.74rem !important;
  }

  .ai-node-chips-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .ai-node-chip {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
  }

  .ai-step-connector {
    height: 8px !important;
  }

  /* 3. Game Sim Card (Game Dev Page) */
  .game-sim-card {
    border-radius: 14px !important;
  }

  .game-sim-header-bar {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .game-sim-url-pill {
    font-size: 0.62rem !important;
    padding: 3px 8px !important;
  }

  .game-sim-status-badge {
    font-size: 0.6rem !important;
    padding: 2px 8px !important;
  }

  .game-hud-center-card {
    padding: 12px !important;
  }

  .game-hud-mainlabel {
    font-size: 0.82rem !important;
  }

  .game-hud-sublabel {
    font-size: 0.68rem !important;
  }

  .game-metrics-bar {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .game-stage-buttons {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .game-stage-btn {
    font-size: 0.62rem !important;
    padding: 4px 8px !important;
  }
}

@media (max-width: 620px) {
  .game-sim-url-pill,
  .game-sim-status-badge,
  .game-sim-top-strip,
  .game-metrics-bar,
  #gameHudTelemetryLeft,
  #gameHudTelemetryRight {
    display: none !important;
  }

  .game-sim-header-bar {
    padding: 8px 12px !important;
    justify-content: flex-start !important;
  }

  .sp-cinematic-stage {
    min-height: 200px !important;
    width: 100% !important;
  }

  .game-hud-center-card {
    padding: 8px 10px !important;
    max-width: 92% !important;
    background: rgba(8, 10, 15, 0.75) !important;
    backdrop-filter: blur(8px) !important;
  }

  .game-hud-mainlabel {
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
  }

  .game-hud-sublabel {
    font-size: 0.62rem !important;
  }

  .game-hud-desc {
    display: none !important;
  }

  .game-stage-buttons {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .game-stage-btn {
    font-size: 0.62rem !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Supporting 4-Card Grid */
  .sp-build-supporting-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 16px !important;
  }

  .sp-build-support-panel {
    padding: 16px 14px !important;
    border-radius: 14px !important;
    gap: 8px !important;
  }

  .sp-support-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  .sp-support-icon-wrap svg {
    width: 16px !important;
    height: 16px !important;
  }

  .sp-support-num {
    font-size: 0.76rem !important;
  }

  .sp-support-title {
    font-size: 0.98rem !important;
    line-height: 1.3 !important;
  }

  .sp-support-desc {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  .sp-support-highlights {
    gap: 6px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  .sp-support-tag {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
  }
}

/* Extra Compact Polish for Extra Small Screens (<= 450px down to 320px) */
@media (max-width: 450px) {
  #whatWeBuild {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .sp-build-featured-showcase {
    padding: 16px 12px !important;
    border-radius: 14px !important;
  }

  .sp-featured-title {
    font-size: 1.25rem !important;
  }

  .sp-featured-desc {
    font-size: 0.82rem !important;
  }

  .sp-highlight-item {
    font-size: 0.76rem !important;
  }

  .eco-metrics-triple {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .eco-status-tag {
    display: none !important;
  }

  .sp-build-support-panel {
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }

  .sp-support-title {
    font-size: 0.92rem !important;
  }

  .sp-support-desc {
    font-size: 0.78rem !important;
  }

  .sp-support-tag {
    font-size: 0.68rem !important;
    padding: 2px 6px !important;
  }
}

@media (max-width: 360px) {
  .sp-build-featured-showcase {
    padding: 14px 10px !important;
  }

  .sp-featured-title {
    font-size: 1.15rem !important;
  }

  .sp-build-support-panel {
    padding: 12px 10px !important;
  }
}

/* ==========================================================================
   WHY IT MATTERS (PROBLEM -> SOLUTION ROWS) RESPONSIVE ENGINE (320px - 810px)
   ========================================================================== */
@media (max-width: 810px) {
  .sp-problems-section,
  #problems {
    padding: 40px 0 !important;
  }

  .sp-problems-section .sp-section-header,
  #problems .sp-section-header {
    margin-bottom: 24px !important;
  }

  .sp-problems-section .sp-section-title,
  #problems .sp-section-title {
    font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }

  .sp-problems-section .sp-section-sub,
  #problems .sp-section-sub {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
    line-height: 1.55 !important;
    margin-top: 8px !important;
    max-width: 100% !important;
  }

  .sp-transform-list {
    margin-top: 28px !important;
    gap: 20px !important;
  }

  .sp-comparison-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sp-card {
    width: 100% !important;
    padding: 18px 18px !important;
    border-radius: 14px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .sp-problem-card {
    border-left: 2px solid #FF4D5A !important;
  }

  .sp-solution-card {
    border-left: 2px solid #22C55E !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  [data-theme="light"] .sp-solution-card {
    border-left: 2px solid #10B981 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .sp-card-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .sp-card-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
  }

  .sp-card-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .sp-card-badge {
    font-size: 0.65rem !important;
  }

  .sp-card-title {
    font-size: clamp(0.98rem, 3.8vw, 1.12rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
  }

  .sp-card-desc {
    font-size: clamp(0.82rem, 2.5vw, 0.88rem) !important;
    line-height: 1.55 !important;
  }

  .sp-connector-bridge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 2px 0 !important;
    margin: 0 !important;
  }

  .connector-line-left,
  .connector-line-right {
    display: none !important;
  }

  .connector-circle-btn {
    width: 34px !important;
    height: 34px !important;
    margin: 0 auto !important;
    box-shadow: 0 0 12px rgba(0, 119, 255, 0.2) !important;
  }

  .connector-circle-btn svg {
    width: 14px !important;
    height: 14px !important;
    transform: rotate(90deg) !important;
  }

  .sp-comparison-row:hover .connector-circle-btn svg {
    transform: rotate(90deg) translateY(3px) !important;
  }
}

/* Extra Compact Sizing for Smaller Mobile Screens (<= 450px down to 320px) */
@media (max-width: 450px) {
  .sp-problems-section,
  #problems {
    padding: 30px 0 !important;
  }

  .sp-transform-list {
    margin-top: 20px !important;
    gap: 16px !important;
  }

  .sp-comparison-row {
    gap: 8px !important;
  }

  .sp-card {
    padding: 14px 14px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }

  .sp-card-body {
    gap: 10px !important;
  }

  .sp-card-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
  }

  .sp-card-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  .sp-card-badge {
    font-size: 0.62rem !important;
  }

  .sp-card-title {
    font-size: 0.95rem !important;
  }

  .sp-card-desc {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
  }

  .connector-circle-btn {
    width: 30px !important;
    height: 30px !important;
  }

  .connector-circle-btn svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 360px) {
  .sp-card {
    padding: 12px 10px !important;
  }

  .sp-card-title {
    font-size: 0.9rem !important;
  }

  .sp-card-desc {
    font-size: 0.75rem !important;
  }
}

/* ==========================================================================
   HOW WE WORK (PROCESS PIPELINE EXPERIENCE) RESPONSIVE ENGINE (320px - 800px)
   ========================================================================== */
@media (max-width: 800px) {
  .sp-process-section,
  #howWeWork {
    padding: 40px 0 !important;
  }

  .sp-process-section .sp-section-header,
  #howWeWork .sp-section-header {
    margin-bottom: 24px !important;
  }

  .sp-process-section .sp-section-title,
  #howWeWork .sp-section-title {
    font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }

  .sp-process-section .sp-section-sub,
  #howWeWork .sp-section-sub {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .sp-pipeline-experience {
    margin-top: 24px !important;
    gap: 20px !important;
  }

  /* Timeline Navigation Track - Ensure track line & traveling light always display & animate seamlessly */
  .sp-pipeline-nav-container {
    position: relative !important;
    width: 100% !important;
    padding-top: 6px !important;
    overflow: visible !important;
  }

  .sp-pipeline-track-line {
    display: block !important;
    position: absolute !important;
    top: 15px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 2.5px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    z-index: 1 !important;
    border-radius: 2px !important;
  }

  [data-theme="light"] .sp-pipeline-track-line {
    background: rgba(0, 0, 0, 0.1) !important;
  }

  .sp-pipeline-progress-bar {
    display: block !important;
    height: 100% !important;
    background: linear-gradient(90deg, #0066FF 0%, #0077ff 100%) !important;
    box-shadow: 0 0 12px rgba(0, 102, 255, 0.4) !important;
  }

  .sp-pipeline-traveling-light {
    display: block !important;
    position: absolute !important;
    top: -3.5px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #0066FF !important;
    box-shadow: 0 0 12px #0066FF, 0 0 20px rgba(0, 102, 255, 0.4) !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
  }

  .sp-pipeline-steps-nav {
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 2 !important;
    gap: 2px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .sp-pipeline-step-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 2px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .sp-step-node {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
  }

  [data-theme="light"] .sp-step-node {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
  }

  .sp-step-dot {
    width: 5px !important;
    height: 5px !important;
  }

  .sp-pipeline-step-btn.active .sp-step-node {
    background: #0066FF !important;
    border-color: #0066FF !important;
    box-shadow: 0 0 12px rgba(0, 102, 255, 0.4) !important;
  }

  .sp-step-meta {
    gap: 1px !important;
    width: 100% !important;
  }

  .sp-step-num {
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
  }

  .sp-step-name {
    font-size: clamp(0.62rem, 1.8vw, 0.78rem) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Stage Canvas Frame */
  .sp-pipeline-stage-frame {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    min-height: auto !important;
  }

  .sp-stage-panel {
    gap: 18px !important;
  }

  .sp-stage-visual-area {
    padding: 16px 14px !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }

  .pipe-scene-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
  }

  .pipe-scene-badge {
    font-size: 0.64rem !important;
  }

  .pipe-scene-status {
    font-size: 0.6rem !important;
  }

  /* Scene 1: Discover */
  .pipe-disc-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pipe-disc-connector {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    padding: 4px 0 !important;
    gap: 8px !important;
  }

  .disc-vector-line {
    width: 32px !important;
    height: 2px !important;
  }

  .pipe-req-card,
  .pipe-brief-card {
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }

  .req-title {
    font-size: 0.8rem !important;
  }

  /* Scene 2: Plan */
  .pipe-arch-topology {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .arch-arrow {
    display: none !important;
  }

  .arch-layer-card {
    padding: 10px 8px !important;
    border-radius: 8px !important;
  }

  .arch-name {
    font-size: 0.78rem !important;
  }

  /* Scene 3: Design */
  .pipe-design-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pipe-wireframe-card,
  .pipe-hifi-card {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  /* Scene 4: Build */
  .pipe-build-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pipe-build-terminal {
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }

  .term-code-body {
    font-size: 0.68rem !important;
    line-height: 1.5 !important;
  }

  .pipe-staging-card {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  /* Scene 5: Validate */
  .pipe-val-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .val-env-box {
    padding: 10px 8px !important;
    border-radius: 8px !important;
  }

  .env-title {
    font-size: 0.7rem !important;
  }

  .val-checks-matrix {
    gap: 6px !important;
  }

  .val-pill {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
  }

  /* Scene 6: Launch */
  .pipe-launch-track {
    padding: 10px 14px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .launch-step-chip {
    font-size: 0.65rem !important;
  }

  .pipe-launch-card {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Bottom Stage Info Area */
  .sp-stage-info-area {
    gap: 6px !important;
  }

  .sp-stage-meta-tag {
    font-size: 0.62rem !important;
  }

  .sp-stage-title {
    font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important;
    line-height: 1.25 !important;
  }

  .sp-stage-desc {
    font-size: clamp(0.82rem, 2.4vw, 0.9rem) !important;
    line-height: 1.55 !important;
  }

  .sp-stage-deliverables {
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .sp-deliverable-tag {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
  }
}

/* Extra Compact Polish for Extra Small Screens (<= 450px down to 320px) */
@media (max-width: 450px) {
  .sp-process-section,
  #howWeWork {
    padding: 28px 0 !important;
  }

  .sp-process-section .sp-section-header,
  #howWeWork .sp-section-header {
    margin-bottom: 18px !important;
  }

  .sp-pipeline-experience {
    margin-top: 18px !important;
    gap: 16px !important;
  }

  .sp-pipeline-nav-container {
    padding-top: 4px !important;
  }

  .sp-pipeline-track-line {
    top: 12px !important;
    height: 2px !important;
  }

  .sp-step-node {
    width: 15px !important;
    height: 15px !important;
  }

  .sp-step-dot {
    width: 4px !important;
    height: 4px !important;
  }

  .sp-pipeline-traveling-light {
    top: -2.5px !important;
    width: 7px !important;
    height: 7px !important;
  }

  .sp-step-num {
    font-size: 0.55rem !important;
  }

  .sp-step-name {
    font-size: 0.56rem !important;
    letter-spacing: -0.01em !important;
  }

  .sp-pipeline-stage-frame {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  }

  .sp-stage-visual-area {
    padding: 12px 10px !important;
    border-radius: 10px !important;
  }

  .pipe-scene-header {
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    gap: 4px !important;
  }

  .pipe-scene-badge {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
  }

  .pipe-scene-status {
    font-size: 0.55rem !important;
  }

  /* Scene 1: Discover */
  .pipe-disc-grid {
    gap: 8px !important;
  }

  .pipe-col-label {
    font-size: 0.58rem !important;
    margin-bottom: 4px !important;
  }

  .pipe-req-card,
  .pipe-brief-card {
    padding: 7px 10px !important;
    border-radius: 7px !important;
    margin-bottom: 4px !important;
  }

  .req-title {
    font-size: 0.72rem !important;
  }

  .brief-row {
    font-size: 0.68rem !important;
    gap: 4px !important;
  }

  .brief-key,
  .brief-val {
    font-size: 0.65rem !important;
  }

  .disc-vector-line {
    width: 20px !important;
  }

  .disc-vector-pill {
    font-size: 0.55rem !important;
    padding: 2px 6px !important;
  }

  /* Scene 2: Plan — Ultra-smooth connected pill pipeline */
  .pipe-arch-topology {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .arch-layer-card {
    padding: 5px 9px !important;
    border-radius: 7px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .arch-name {
    font-size: 0.68rem !important;
    letter-spacing: 0.03em !important;
  }

  .arch-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.68rem !important;
    color: #0077ff !important;
    opacity: 0.85 !important;
    margin: 0 !important;
  }

  /* Scene 3: Design */
  .pipe-design-grid {
    gap: 8px !important;
  }

  .pipe-wireframe-card,
  .pipe-hifi-card {
    padding: 9px 10px !important;
    border-radius: 7px !important;
  }

  /* Scene 4: Build */
  .pipe-build-grid {
    gap: 8px !important;
  }

  .pipe-build-terminal {
    padding: 8px 10px !important;
    border-radius: 7px !important;
  }

  .term-code-body {
    font-size: 0.62rem !important;
    line-height: 1.4 !important;
  }

  .pipe-staging-card {
    padding: 8px 10px !important;
    border-radius: 7px !important;
  }

  /* Scene 5: Validate */
  .pipe-val-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .val-env-box {
    padding: 7px 9px !important;
    border-radius: 7px !important;
  }

  .env-title {
    font-size: 0.65rem !important;
  }

  .val-pill {
    font-size: 0.62rem !important;
    padding: 2px 6px !important;
  }

  /* Scene 6: Launch */
  .pipe-launch-track {
    padding: 7px 10px !important;
    gap: 4px !important;
  }

  .launch-step-chip {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
  }

  .pipe-launch-card {
    padding: 8px 10px !important;
    border-radius: 7px !important;
  }

  /* Bottom Stage Info Area */
  .sp-stage-info-area {
    gap: 4px !important;
    margin-top: 8px !important;
  }

  .sp-stage-meta-tag {
    font-size: 0.6rem !important;
  }

  .sp-stage-title {
    font-size: clamp(1.05rem, 4.4vw, 1.25rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 2px !important;
  }

  .sp-stage-desc {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .sp-stage-deliverables {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-top: 6px !important;
  }

  .sp-deliverable-tag {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
  }
}

/* Extra Slim Polish specifically for 320px - 370px */
@media (max-width: 370px) {
  .sp-pipeline-experience {
    margin-top: 14px !important;
    gap: 12px !important;
  }

  .sp-pipeline-steps-nav {
    gap: 1px !important;
  }

  .sp-pipeline-step-btn {
    padding: 0 1px !important;
    gap: 4px !important;
  }

  .sp-step-node {
    width: 13px !important;
    height: 13px !important;
  }

  .sp-step-dot {
    width: 3px !important;
    height: 3px !important;
  }

  .sp-pipeline-track-line {
    top: 11px !important;
  }

  .sp-step-num {
    font-size: 0.5rem !important;
  }

  .sp-step-name {
    font-size: 0.5rem !important;
  }

  .sp-pipeline-stage-frame {
    padding: 12px 9px !important;
    border-radius: 12px !important;
  }

  .sp-stage-visual-area {
    padding: 10px 8px !important;
    border-radius: 8px !important;
  }

  .arch-layer-card {
    padding: 4px 7px !important;
    border-radius: 6px !important;
  }

  .arch-name {
    font-size: 0.62rem !important;
  }

  .arch-arrow {
    font-size: 0.62rem !important;
  }

  .sp-stage-title {
    font-size: 1.05rem !important;
  }

  .sp-stage-desc {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
  }

  .sp-deliverable-tag {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }
}

/* ==========================================================================
   TECHNOLOGY SECTION RESPONSIVE ENGINE (320px - 1020px)
   ========================================================================== */
.sp-tech-toggle-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  width: 100%;
}

.sp-tech-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 119, 255, 0.1);
  border: 1px solid rgba(0, 119, 255, 0.3);
  color: #0077ff;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

.sp-tech-expand-btn:hover {
  background: rgba(0, 119, 255, 0.2);
  border-color: #0077ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 119, 255, 0.25);
}

.sp-tech-expand-btn .btn-chevron {
  transition: transform 0.25s ease;
}

.sp-tech-expand-btn.is-active .btn-chevron {
  transform: rotate(180deg);
}

[data-theme="light"] .sp-tech-expand-btn {
  background: #f0f7ff;
  border-color: rgba(0, 102, 255, 0.3);
  color: #0066ff;
}

[data-theme="light"] .sp-tech-expand-btn:hover {
  background: #0066ff;
  color: #ffffff;
  border-color: #0066ff;
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.2);
}

@media (min-width: 769px) {
  .sp-tech-toggle-wrap {
    display: none !important;
  }
}

@media (max-width: 1020px) {
  .sp-tech-section,
  #technology {
    padding: 50px 0 !important;
  }

  .sp-tech-tabs-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
    justify-content: flex-start !important;
  }

  .sp-tech-tab {
    padding: 9px 18px !important;
    font-size: 0.82rem !important;
  }

  .sp-tech-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 14px !important;
  }

  .sp-tech-item {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    gap: 12px !important;
  }

  .sp-tech-item-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  .sp-tech-item-icon img,
  .sp-tech-item-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .sp-tech-item-name {
    font-size: 0.88rem !important;
  }
}

@media (max-width: 768px) {
  .sp-tech-section,
  #technology {
    padding: 40px 0 !important;
  }

  .sp-tech-tabs-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 5px !important;
    margin-bottom: 20px !important;
  }

  .sp-tech-tab {
    padding: 9px 10px !important;
    font-size: 0.8rem !important;
    text-align: center !important;
    border-radius: 8px !important;
  }

  .sp-tech-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .sp-tech-item {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    gap: 9px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .sp-tech-item-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .sp-tech-item-icon img,
  .sp-tech-item-icon svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }

  .sp-tech-item-name {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 480px) {
  .sp-tech-section,
  #technology {
    padding: 30px 0 !important;
  }

  .sp-tech-tabs-bar {
    gap: 5px !important;
    padding: 4px !important;
  }

  .sp-tech-tab {
    padding: 8px 6px !important;
    font-size: 0.74rem !important;
  }

  .sp-tech-grid {
    gap: 8px !important;
  }

  .sp-tech-item {
    padding: 8px 10px !important;
    border-radius: 10px !important;
    gap: 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .sp-tech-item-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }

  .sp-tech-item-icon img,
  .sp-tech-item-icon svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }

  .sp-tech-item-name {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .sp-tech-expand-btn {
    font-size: 0.76rem !important;
    padding: 7px 15px !important;
  }
}

@media (max-width: 400px) {
  .sp-tech-grid {
    gap: 7px !important;
  }

  .sp-tech-item {
    padding: 8px 7px !important;
    border-radius: 9px !important;
    gap: 6px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .sp-tech-item-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .sp-tech-item-icon img,
  .sp-tech-item-icon svg {
    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
  }

  .sp-tech-item-name {
    font-size: 0.72rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 350px) {
  .sp-tech-tabs-bar {
    gap: 3px !important;
    padding: 3px !important;
  }

  .sp-tech-tab {
    padding: 6px 3px !important;
    font-size: 0.68rem !important;
  }

  .sp-tech-grid {
    gap: 5px !important;
  }

  .sp-tech-item {
    padding: 6px 5px !important;
    border-radius: 7px !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .sp-tech-item-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
  }

  .sp-tech-item-icon img,
  .sp-tech-item-icon svg {
    width: 13px !important;
    height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
  }

  .sp-tech-item-name {
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

/* ==========================================================================
   SELECTED WORK SECTION RESPONSIVE ENGINE (320px - 800px)
   ========================================================================== */
@media (max-width: 800px) {
  .sp-work-section,
  #work {
    padding: 40px 0 !important;
  }

  .sp-work-section .sp-section-header,
  #work .sp-section-header {
    margin-bottom: 24px !important;
  }

  .sp-work-section .sp-section-title,
  #work .sp-section-title {
    font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .sp-work-section .sp-section-sub,
  #work .sp-section-sub {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .sp-featured-project {
    margin-bottom: 24px !important;
  }

  .sp-featured-project-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .sp-featured-project-copy {
    padding: 0 !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .sp-featured-project-copy::before,
  .sp-featured-project-copy::after {
    display: none !important;
  }

  .sp-featured-project-cat {
    font-size: 0.68rem !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 4px !important;
  }

  .sp-featured-project-title {
    font-size: clamp(1.3rem, 5vw, 1.7rem) !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
  }

  .sp-featured-project-desc {
    font-size: clamp(0.84rem, 2.6vw, 0.92rem) !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
    max-width: 100% !important;
  }

  .sp-featured-project-link {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    gap: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
  }

  /* Visual Container */
  .sp-featured-project-visual {
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  .sp-featured-main-img {
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .sp-showcase-bar {
    height: 32px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }

  .sp-bar-dots {
    gap: 4px !important;
  }

  .sp-bar-dots span {
    width: 6px !important;
    height: 6px !important;
  }

  .sp-bar-url {
    font-size: 0.62rem !important;
    padding: 2px 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sp-bar-live {
    font-size: 0.58rem !important;
    flex-shrink: 0 !important;
  }

  .sp-featured-main-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Alternative Work Cards */
  .sp-work-featured {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
  }

  .sp-work-featured-body {
    padding: 18px 16px !important;
  }

  .sp-work-title {
    font-size: 1.25rem !important;
  }

  .sp-work-desc {
    font-size: 0.85rem !important;
  }

  .sp-work-tech {
    font-size: 0.74rem !important;
    margin-bottom: 12px !important;
  }

  .sp-work-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sp-work-card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .sp-work-card-body {
    padding: 16px 14px !important;
  }

  /* Bottom CTA */
  .sp-explore-all-cta {
    margin-top: 24px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .sp-explore-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.84rem !important;
    padding: 10px 22px !important;
    border-radius: 9999px !important;
    width: fit-content !important;
  }
}

/* Extra Compact Polish for Extra Small Screens (<= 480px down to 320px) */
@media (max-width: 480px) {
  .sp-work-section,
  #work {
    padding: 30px 0 !important;
  }

  .sp-featured-project-grid {
    padding: 16px 12px !important;
    border-radius: 14px !important;
    gap: 14px !important;
  }

  .sp-featured-main-img img {
    max-height: 220px !important;
  }

  .sp-explore-btn {
    width: 100% !important;
    max-width: 280px !important;
    font-size: 0.8rem !important;
    padding: 9px 18px !important;
  }
}

@media (max-width: 360px) {
  .sp-featured-project-grid {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }

  .sp-featured-project-title {
    font-size: 1.2rem !important;
  }

  .sp-featured-main-img img {
    max-height: 180px !important;
  }
}

/* ==========================================================================
   FAQ & READY TO BUILD (FINAL CTA) RESPONSIVE ENGINE (320px - 800px)
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. FAQ SECTION */
  .faq-section,
  #faq {
    padding: 40px 0 !important;
  }

  .faq-container {
    max-width: 100% !important;
    padding: 0 16px !important;
  }

  .faq-header {
    margin-bottom: 24px !important;
  }

  .faq-eyebrow {
    font-size: 0.72rem !important;
    padding: 5px 14px !important;
    margin-bottom: 12px !important;
  }

  .faq-title {
    font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .faq-subheading {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
    max-width: 100% !important;
  }

  .faq-list {
    gap: 10px !important;
  }

  .faq-item {
    border-radius: 12px !important;
  }

  .faq-question-btn {
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .faq-question-text {
    font-size: clamp(0.88rem, 2.8vw, 0.98rem) !important;
    line-height: 1.35 !important;
  }

  .faq-chevron {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .faq-chevron svg {
    width: 16px !important;
    height: 16px !important;
  }

  .faq-answer-content {
    padding: 0 16px 14px !important;
    font-size: clamp(0.82rem, 2.4vw, 0.88rem) !important;
    line-height: 1.55 !important;
  }

  /* 2. READY TO BUILD / FINAL CTA SECTION */
  .final-cta-section,
  #final-cta,
  .sp-cta-section {
    padding: 40px 0 !important;
  }

  .final-cta-container {
    max-width: 100% !important;
    padding: 0 16px !important;
  }

  .final-cta-card,
  .sp-cta-inner {
    padding: 36px 20px !important;
    border-radius: 20px !important;
  }

  .final-cta-eyebrow {
    font-size: 0.72rem !important;
    padding: 5px 14px !important;
    margin-bottom: 12px !important;
  }

  .final-cta-title,
  .sp-cta-title {
    font-size: clamp(1.4rem, 5.5vw, 1.95rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
  }

  .final-cta-subheading,
  .sp-cta-sub {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
    line-height: 1.6 !important;
    margin: 0 auto 24px !important;
    max-width: 100% !important;
  }

  .final-cta-actions-wrap,
  .sp-cta-btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .btn-cta-primary,
  .btn-cta-secondary,
  .btn-talk-team {
    width: 100% !important;
    max-width: 280px !important;
    padding: 12px 22px !important;
    font-size: 0.85rem !important;
    justify-content: center !important;
  }
}

/* Extra Compact Polish for Extra Small Screens (<= 450px down to 320px) */
@media (max-width: 450px) {
  .faq-section,
  #faq,
  .final-cta-section,
  #final-cta,
  .sp-cta-section {
    padding: 30px 0 !important;
  }

  .faq-question-btn {
    padding: 12px 12px !important;
    gap: 10px !important;
  }

  .faq-answer-content {
    padding: 0 12px 12px !important;
  }

  .final-cta-card,
  .sp-cta-inner {
    padding: 24px 14px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 360px) {
  .faq-question-btn {
    padding: 10px 10px !important;
  }

  .faq-question-text {
    font-size: 0.84rem !important;
  }

  .final-cta-card,
  .sp-cta-inner {
    padding: 20px 10px !important;
  }

  .btn-cta-primary,
  .btn-cta-secondary,
  .btn-talk-team {
    max-width: 100% !important;
    padding: 11px 16px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 630px) {
  .sp-telemetry-details {
    display: none !important;
  }
}

.sp-section-header.text-center {
  text-align: center !important;
}
.sp-section-header.text-center .sp-eyebrow {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.sp-section-header.text-center .sp-section-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.sp-section-header.text-center .sp-section-sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 820px !important;
}

/* Responsive Engine for Automation Engine Section (320px - 820px) */
@media (max-width: 820px) {
  #automationFlow {
    padding: 45px 0 !important;
  }

  .auto-flow-badge-group {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
    padding: 6px 4px 10px 4px !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .auto-flow-badge {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.74rem !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px !important;
  }

  .auto-flow-arrow {
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
    opacity: 0.7;
  }

  .auto-workflow-card {
    padding: 20px 16px !important;
    border-radius: 14px !important;
    max-width: 100% !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
  }

  .auto-workflow-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
  }

  .auto-workflow-header-title {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .auto-workflow-status-badge {
    font-size: 0.68rem !important;
    padding: 4px 10px !important;
    align-self: flex-start !important;
  }

  .auto-pipeline-row {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding: 4px 2px 10px 2px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .auto-pipeline-step {
    flex: 0 0 auto !important;
    min-width: 105px !important;
    padding: 12px 8px !important;
    border-radius: 8px !important;
  }

  .auto-pipeline-step-num {
    font-size: 0.62rem !important;
    margin-bottom: 2px !important;
  }

  .auto-pipeline-step-name {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  .auto-pipeline-connector {
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
  }

  .auto-breakdown-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-top: 28px !important;
    width: 100% !important;
  }

  .auto-breakdown-card {
    padding: 16px 14px !important;
    border-radius: 10px !important;
  }

  .auto-breakdown-title {
    font-size: 0.76rem !important;
    margin-bottom: 6px !important;
  }

  .auto-breakdown-desc {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 520px) {
  .auto-flow-badge-group {
    gap: 6px 8px !important;
  }

  .auto-flow-badge {
    font-size: 0.68rem !important;
    padding: 5px 10px !important;
  }

  .auto-breakdown-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .auto-workflow-card {
    padding: 16px 12px !important;
  }

  .auto-pipeline-step {
    min-width: 95px !important;
    padding: 10px 6px !important;
  }

  .auto-pipeline-step-name {
    font-size: 0.72rem !important;
  }
}

/* Responsive E-Commerce Platforms Grid (320px - 400px & Mobile) */
@media (max-width: 768px) {
  #platforms {
    padding: 50px 0 !important;
  }
  .ecom-platforms-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ecom-platform-card {
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }
  .ecom-card-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .ecom-card-title {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
  }
  .ecom-card-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
  }
  .ecom-card-features {
    gap: 8px !important;
  }
  .ecom-feature-item {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 400px) {
  #platforms {
    padding: 40px 0 !important;
  }
  .ecom-platform-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }
  .ecom-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .ecom-card-badge {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
  }
  .ecom-card-platform-name {
    font-size: 0.75rem !important;
  }
  .ecom-card-title {
    font-size: 1.12rem !important;
    margin-bottom: 8px !important;
    line-height: 1.25 !important;
  }
  .ecom-card-desc {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }
  .ecom-card-features {
    gap: 6px !important;
  }
  .ecom-feature-item {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 350px) {
  .ecom-platform-card {
    padding: 14px 10px !important;
    border-radius: 10px !important;
  }
  .ecom-card-badge {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }
  .ecom-card-title {
    font-size: 1.05rem !important;
  }
  .ecom-card-desc {
    font-size: 0.78rem !important;
  }
  .ecom-feature-item {
    font-size: 0.74rem !important;
  }
}

/* E-Commerce Projects Grid & Cards (COMMERCE EXPERIENCES) */
.sp-ecom-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.ecom-project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ecom-project-num {
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
}

.badge-proj-01 { background: rgba(0, 119, 255, 0.12); color: #0077ff; }
.badge-proj-02 { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.badge-proj-03 { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }

.ecom-project-tag {
  color: #64748b;
  font-family: 'Fira Code', monospace;
  font-size: 0.78rem;
  font-weight: 700;
}

.ecom-project-hashtags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  font-family: 'Fira Code', monospace;
  margin-top: 16px;
}

.ecom-project-hashtags span {
  padding: 3px 8px;
  border-radius: 4px;
}

.hashtags-proj-01 { color: #0077ff; }
.hashtags-proj-01 span { background: rgba(0, 119, 255, 0.08); }

.hashtags-proj-02 { color: #10b981; }
.hashtags-proj-02 span { background: rgba(16, 185, 129, 0.08); }

.hashtags-proj-03 { color: #a78bfa; }
.hashtags-proj-03 span { background: rgba(167, 139, 250, 0.08); }

/* Responsive E-Commerce Projects (320px - 400px & Mobile) */
@media (max-width: 768px) {
  .sp-ecom-projects-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 400px) {
  .ecom-project-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }
  .ecom-project-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .ecom-project-num {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
  }
  .ecom-project-tag {
    font-size: 0.72rem !important;
  }
  .ecom-project-hashtags {
    gap: 6px !important;
    font-size: 0.68rem !important;
    margin-top: 12px !important;
  }
  .ecom-project-hashtags span {
    padding: 2px 6px !important;
  }
}

@media (max-width: 350px) {
  .ecom-project-card {
    padding: 14px 10px !important;
    border-radius: 10px !important;
  }
  .ecom-project-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   MASTER VIDEO BACKGROUND SYSTEM (ALL PAGES POST-HERO)
   - Light Mode: Pure White (#ffffff) background with outer side floating blue dots
   - Dark Mode: Pure Black (#04050a) background with outer side floating subtle dots
   - Dots strictly in far side margins only — ZERO dots on top of or near the video
   ========================================================================== */

/* Ultra-smooth slow floating keyframes */
@keyframes floatDotSmooth1 {
  0%   { transform: translate(0px, 0px); opacity: 0.45; }
  33%  { transform: translate(14px, -16px); opacity: 0.8; }
  66%  { transform: translate(-10px, 10px); opacity: 0.55; }
  100% { transform: translate(0px, 0px); opacity: 0.45; }
}

@keyframes floatDotSmooth2 {
  0%   { transform: translate(0px, 0px); opacity: 0.5; }
  33%  { transform: translate(-16px, 14px); opacity: 0.85; }
  66%  { transform: translate(12px, -12px); opacity: 0.45; }
  100% { transform: translate(0px, 0px); opacity: 0.5; }
}

@keyframes floatDotSmooth3 {
  0%   { transform: translate(0px, 0px); opacity: 0.4; }
  50%  { transform: translate(12px, 16px); opacity: 0.75; }
  100% { transform: translate(0px, 0px); opacity: 0.4; }
}

@keyframes floatDotSmooth4 {
  0%   { transform: translate(0px, 0px); opacity: 0.5; }
  50%  { transform: translate(-14px, -16px); opacity: 0.8; }
  100% { transform: translate(0px, 0px); opacity: 0.5; }
}

/* Base Dark Mode Video Section Backgrounds (Pure Black) */
.sp-video-section,
.kno-video-section,
.about-video-section,
#videoFullscreenSection,
.fullscreen-video-outer,
.w-showcase-section,
.fof-hero-section,
.fof-showcase-section,
.vbg-effects-enabled {
  background-color: #04050a !important;
  background: #04050a !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Disable section-wide pseudo-element grids so no dots ever cover the video area */
.sp-video-section::before,
.kno-video-section::before,
.about-video-section::before,
#videoFullscreenSection::before,
.fullscreen-video-outer::before,
.w-showcase-section::before,
.fof-hero-section::before,
.fof-showcase-section::before,
.vbg-effects-enabled::before,
.sp-video-section::after,
.kno-video-section::after,
.about-video-section::after,
#videoFullscreenSection::after,
.fullscreen-video-outer::after,
.w-showcase-section::after,
.fof-hero-section::after,
.fof-showcase-section::after,
.vbg-effects-enabled::after {
  display: none !important;
  content: none !important;
}

/* All video cards, wrappers, containers and controls sit firmly ABOVE background */
.sp-video-section .container,
.about-video-section .container,
.about-video-showcase-wrap,
.sp-video-showcase-wrap,
.sp-video-cinematic,
.about-video-cinematic,
.kno-video-frame,
.kno-video-wrapper,
.fullscreen-video-wrapper,
.video-expand-container,
.fof-hero-media,
.w-showcase-media,
.kno-video-container {
  position: relative !important;
  z-index: 20 !important;
}

/* Background dots layer stays strictly below video content */
.video-bg-dots-wrap {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* Base Dot Styling (Dark Mode) */
.vbg-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  background: #0099ff;
  box-shadow: 0 0 6px rgba(0, 153, 255, 0.45);
  opacity: 0.5;
}

/* Discrete floating dots placed ONLY on the FAR LEFT and FAR RIGHT flanks (outside video) */
/* Far Left Flank */
.vbg-dot.dot-1  { top: 15%; left: 2%;   width: 6px; height: 6px; animation: floatDotSmooth1 22s ease-in-out infinite; }
.vbg-dot.dot-2  { top: 32%; left: 3.5%; width: 7px; height: 7px; animation: floatDotSmooth2 26s ease-in-out infinite 2s; }
.vbg-dot.dot-3  { top: 50%; left: 1.8%; width: 6px; height: 6px; animation: floatDotSmooth3 24s ease-in-out infinite 1s; }
.vbg-dot.dot-4  { top: 68%; left: 3.2%; width: 7px; height: 7px; animation: floatDotSmooth4 28s ease-in-out infinite 3s; }
.vbg-dot.dot-5  { top: 85%; left: 2%;   width: 6px; height: 6px; animation: floatDotSmooth1 25s ease-in-out infinite 1.5s; }

/* Far Right Flank */
.vbg-dot.dot-6  { top: 16%; right: 2%;   width: 6px; height: 6px; animation: floatDotSmooth2 24s ease-in-out infinite 1.5s; }
.vbg-dot.dot-7  { top: 34%; right: 3.5%; width: 7px; height: 7px; animation: floatDotSmooth1 27s ease-in-out infinite 3.5s; }
.vbg-dot.dot-8  { top: 52%; right: 1.8%; width: 6px; height: 6px; animation: floatDotSmooth4 23s ease-in-out infinite 0.5s; }
.vbg-dot.dot-9  { top: 70%; right: 3.2%; width: 7px; height: 7px; animation: floatDotSmooth3 29s ease-in-out infinite 2.5s; }
.vbg-dot.dot-10 { top: 86%; right: 2%;   width: 6px; height: 6px; animation: floatDotSmooth2 26s ease-in-out infinite 4s; }

/* Video Card / Media Wrappers in Dark Mode */
.sp-video-cinematic,
.about-video-cinematic,
.kno-video-frame,
.kno-video-wrapper,
.fullscreen-video-wrapper,
.video-expand-container,
.fof-hero-media,
.w-showcase-media {
  background: #04050a !important;
  background-color: #04050a !important;
  z-index: 20 !important;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES ([data-theme="light"])
   ========================================================================== */

/* Pure White Background in Light Mode for Video Sections (NO Blue Tint) */
[data-theme="light"] .sp-video-section,
[data-theme="light"] .kno-video-section,
[data-theme="light"] .about-video-section,
[data-theme="light"] #videoFullscreenSection,
[data-theme="light"] .fullscreen-video-outer,
[data-theme="light"] .w-showcase-section,
[data-theme="light"] .fof-hero-section,
[data-theme="light"] .fof-showcase-section,
[data-theme="light"] .vbg-effects-enabled {
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
  position: relative !important;
}

/* Light Mode Dynamic Dots Styling (Far Side Flanks) */
[data-theme="light"] .vbg-dot {
  background: #0070f3 !important;
  box-shadow: 0 0 6px rgba(0, 112, 243, 0.4) !important;
  opacity: 0.6 !important;
}

/* Pure White inner containers in Light Mode */
[data-theme="light"] .sp-video-cinematic,
[data-theme="light"] .about-video-cinematic,
[data-theme="light"] .kno-video-frame,
[data-theme="light"] .kno-video-wrapper,
[data-theme="light"] .fullscreen-video-wrapper,
[data-theme="light"] .video-expand-container,
[data-theme="light"] .fof-hero-media,
[data-theme="light"] .w-showcase-media {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(0, 119, 255, 0.2) !important;
  box-shadow: 0 0 0 1px rgba(0, 119, 255, 0.08), 0 25px 60px rgba(0, 119, 255, 0.12) !important;
  z-index: 20 !important;
}

[data-theme="light"] .fullscreen-video-element,
[data-theme="light"] .sp-video-cinematic video,
[data-theme="light"] .about-video-cinematic video,
[data-theme="light"] .kno-video-frame video,
[data-theme="light"] .fof-hero-media video {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ==========================================================================
   FOUNDER CARDS ACTION BUTTONS — 100% RESPONSIVE (320px to 4K Ultra-Wide)
   ========================================================================== */

/* Base & Desktop (>= 769px) */
.founder-v2-actions,
.founder-v3-actions,
.founder-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: auto !important;
  width: 100% !important;
}

.btn-founder-primary,
.btn-founder-portfolio {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  border-radius: 9999px !important;
  background: #0066ff !important;
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 18px rgba(0, 102, 255, 0.25) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  flex: 0 1 auto !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
}

.btn-founder-primary:hover,
.btn-founder-portfolio:hover {
  background: #0052cc !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.35) !important;
  color: #ffffff !important;
}

.btn-founder-linkedin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
  flex: 0 1 auto !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
}

.btn-founder-linkedin:hover {
  background: rgba(0, 119, 181, 0.2) !important;
  border-color: #0077b5 !important;
  color: #38bdf8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 119, 181, 0.25) !important;
}

.btn-founder-linkedin svg {
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
}

/* Light Mode Styling for Founder Buttons */
[data-theme="light"] .btn-founder-primary,
[data-theme="light"] .btn-founder-portfolio {
  background: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.25) !important;
}

[data-theme="light"] .btn-founder-primary:hover,
[data-theme="light"] .btn-founder-portfolio:hover {
  background: #0052cc !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-founder-linkedin {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .btn-founder-linkedin:hover {
  background: rgba(0, 119, 181, 0.08) !important;
  border-color: #0a66c2 !important;
  color: #0a66c2 !important;
}

/* Tablet Screens (769px to 1024px) */
@media (max-width: 1024px) {
  .founder-v2-actions,
  .founder-v3-actions,
  .founder-actions {
    gap: 10px !important;
  }
  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    padding: 10px 18px !important;
    font-size: 0.82rem !important;
    min-height: 40px !important;
  }
}

/* Tablet & Phablet Screens (577px to 768px) */
@media (max-width: 768px) {
  .founder-v2-actions,
  .founder-v3-actions,
  .founder-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 130px !important;
    padding: 11px 16px !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Mobile Screens (<= 576px) — Clean Full-Width Vertical Stacking */
@media (max-width: 576px) {
  .founder-v2-actions,
  .founder-v3-actions,
  .founder-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    width: 100% !important;
    flex: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 18px !important;
    font-size: 0.84rem !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  .btn-founder-primary span,
  .btn-founder-linkedin span,
  .btn-founder-portfolio span {
    font-size: 0.84rem !important;
    white-space: nowrap !important;
  }
}

/* Ultra-Small Mobile (<= 375px) */
@media (max-width: 375px) {
  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    min-height: 40px !important;
  }
  .btn-founder-primary span,
  .btn-founder-linkedin span,
  .btn-founder-portfolio span {
    font-size: 0.78rem !important;
  }
}

/* Large Displays (1600px+) */
@media (min-width: 1600px) {
  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    padding: 13px 26px !important;
    font-size: 0.9rem !important;
    min-height: 46px !important;
  }
}

/* 4K Ultra-Wide (2560px+) */
@media (min-width: 2560px) {
  .btn-founder-primary,
  .btn-founder-linkedin,
  .btn-founder-portfolio {
    padding: 16px 32px !important;
    font-size: 1.05rem !important;
    min-height: 52px !important;
  }
}

/* ==========================================================================
   REFINED CINEMATIC HERO VIDEO OVERLAY & EDITORIAL TYPOGRAPHY
   Continuous Moving Video Background + Dominant Hero Headline
   Accent: #0077FF | 100% Fluid Responsive | Dark & Light Contrast
   ========================================================================== */
.cinematic-video-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: clamp(18px, 4vw, 44px);
  box-sizing: border-box;
  overflow: hidden;
  border-radius: inherit;
}

/* Localized negative-space gradient layer (strongest behind text, natural fade into moving footage) */
.cinematic-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(4, 5, 10, 0.76) 0%,
    rgba(4, 5, 10, 0.44) 38%,
    rgba(4, 5, 10, 0.14) 72%,
    rgba(4, 5, 10, 0.02) 100%
  );
  pointer-events: none;
  transition: background 0.35s ease;
}

/* Light Mode localized gradient (~8-15% neutral darkening for crisp text contrast) */
[data-theme="light"] .cinematic-overlay-gradient {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.62) 0%,
    rgba(15, 23, 42, 0.30) 38%,
    rgba(15, 23, 42, 0.08) 72%,
    rgba(15, 23, 42, 0.01) 100%
  );
}

.cinematic-quote-wrap {
  position: relative;
  z-index: 2;
  max-width: min(820px, 94%);
  text-align: left;
  animation: cinematicHeroFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.cinematic-label-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.cinematic-label-text {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #0077FF;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.cinematic-accent-line {
  width: clamp(28px, 2.5vw, 42px);
  height: 3px;
  background: #0077FF;
  border-radius: 2px;
  margin: 6px 0 10px 0;
  box-shadow: 0 0 12px rgba(0, 119, 255, 0.65);
}

.cinematic-quote-text {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1.75rem, 3.8vw, 3.4rem);
  font-weight: 600;
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}

.sp-accent-word {
  color: #0077FF;
  font-weight: 600;
  display: inline-block;
}

.cinematic-subtag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: clamp(0.82rem, 1.25vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 8px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.cinematic-subtag-sep {
  color: #0077FF;
  font-weight: 600;
  font-size: 1.05em;
  opacity: 0.9;
}

.cinematic-brand-text {
  font-family: 'Fira Code', monospace, sans-serif;
  font-size: clamp(0.6rem, 0.8vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 10px;
  display: block;
}

.cinematic-brand-tech {
  color: #0077FF;
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .cinematic-video-overlay {
    padding: 24px;
  }
}

/* Mobile (<= 768px) */
@media (max-width: 768px) {
  .cinematic-video-overlay {
    padding: 18px 20px;
  }
  .cinematic-quote-wrap {
    max-width: 96%;
  }
  .cinematic-label-text {
    font-size: 0.68rem;
    letter-spacing: 1.8px;
  }
  .cinematic-accent-line {
    width: 24px;
    height: 2.5px;
    margin: 4px 0 6px 0;
  }
  .cinematic-quote-text {
    font-size: clamp(1.78rem, 6.2vw, 2.4rem);
    margin-bottom: 14px;
  }
  .cinematic-brand-text {
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    margin-top: 6px;
  }
}

/* Ultra-Small Mobile (<= 480px) */
@media (max-width: 480px) {
  .cinematic-video-overlay {
    padding: 14px 14px;
  }
  .cinematic-quote-text {
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   HERO CINEMATIC VIDEO OVERLAY — REFINED PREMIUM COMPOSITION
   Improves ONLY the UI layered above the hero video. The video element,
   its Cloudinary sources and playback behaviour are intentionally untouched.
   ========================================================================== */
.afro-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 40px) clamp(24px, 4.5vw, 72px) 0 clamp(24px, 4.5vw, 72px);
  pointer-events: none;
  box-sizing: border-box;
}

.sp-video-cinematic .afro-hero-overlay,
.about-video-cinematic .afro-hero-overlay {
  padding: clamp(20px, 3.5vw, 40px) clamp(24px, 4.5vw, 56px);
}

.sp-video-cinematic .afro-main-content,
.about-video-cinematic .afro-main-content {
  margin-top: auto;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Layered cinematic scrim (intentional, not a flat black filter):
   LEFT   -> strongest darkening so the copy always reads cleanly
   CENTRE -> moderate darkening
   RIGHT  -> lightest so the video keeps its depth on the open side
   BOTTOM -> soft fade that hands off into the statistics bar          */
.afro-dark-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(3, 4, 9, 0.85) 0%,
      rgba(3, 4, 9, 0.64) 30%,
      rgba(3, 4, 9, 0.34) 58%,
      rgba(3, 4, 9, 0.14) 100%),
    linear-gradient(180deg,
      rgba(3, 4, 9, 0.24) 0%,
      rgba(3, 4, 9, 0.03) 38%,
      rgba(3, 4, 9, 0.24) 74%,
      rgba(2, 3, 8, 0.78) 100%),
    radial-gradient(70% 85% at 88% 28%, rgba(0, 119, 255, 0.1) 0%, transparent 66%);
  pointer-events: none;
}

/* Service Pages Videos — Ultra-light 5% Black Layer */
.sp-video-cinematic .afro-dark-scrim,
.sp-video-cinematic .cinematic-overlay-gradient,
.sp-video-cinematic .video-gradient-overlay {
  background: rgba(0, 0, 0, 0.05) !important;
  opacity: 1 !important;
}

[data-theme="light"] .sp-video-cinematic .afro-dark-scrim,
[data-theme="light"] .sp-video-cinematic .cinematic-overlay-gradient,
[data-theme="light"] .sp-video-cinematic .video-gradient-overlay {
  background: rgba(0, 0, 0, 0.05) !important;
  opacity: 1 !important;
}

.sp-video-cinematic .afro-hero-title,
.sp-video-cinematic .cinematic-quote-text {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

.sp-video-cinematic .afro-hero-subtag,
.sp-video-cinematic .cinematic-subtag {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75) !important;
}

.afro-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  position: relative;
  z-index: 3;
  margin-bottom: clamp(16px, 2.4vw, 34px);
}

.cinematic-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(3, 6, 16, 0.85);
  border: 1px solid rgba(0, 119, 255, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 119, 255, 0.25);
}

.cinematic-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0077FF;
  box-shadow: 0 0 8px #0077FF, 0 0 14px rgba(0, 119, 255, 0.8);
  animation: pulseCyanDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseCyanDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px #0077FF, 0 0 14px rgba(0, 119, 255, 0.8);
  }
  50% {
    transform: scale(1.3);
    opacity: 0.75;
    box-shadow: 0 0 14px #0077FF, 0 0 22px rgba(0, 119, 255, 0.95);
  }
}

.cinematic-status-text {
  font-family: 'Fira Code', monospace;
  font-size: clamp(0.68rem, 0.85vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 1.8px;
  color: #ffffff;
  text-transform: uppercase;
}

.cinematic-tech-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 9999px;
  background: rgba(0, 119, 255, 0.14);
  border: 1px solid rgba(0, 119, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Fira Code', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0077FF;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.afro-main-content {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  width: 100%;
  margin-bottom: auto;
  padding-bottom: clamp(18px, 2.4vw, 32px);
}

.afro-text-col {
  max-width: 760px;
}

.afro-eyebrow-text {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Fira Code', monospace;
  font-size: clamp(0.66rem, 0.85vw, 0.76rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.afro-eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0077FF;
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.16);
  flex-shrink: 0;
}

.afro-hero-title {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.1rem, 4.1vw, 3.8rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: #ffffff;
  margin: 0 0 18px 0;
  text-wrap: balance;
}

.afro-accent-word {
  color: #0077FF;
  font-weight: 600;
}

.afro-hero-subtag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: clamp(0.98rem, 1.55vw, 1.24rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.76);
  margin-bottom: 0;
}

.afro-subtag-sep {
  color: #0077FF;
  font-weight: 500;
  font-size: 0.94em;
  line-height: 1;
  opacity: 0.9;
}

/* Right-Side Capability Badge — a quiet text marker, not a floating glass card */
.afro-emblem-badge {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  padding: 2px 0 2px 16px;
  border-left: 1px solid rgba(0, 119, 255, 0.4);
  flex-shrink: 0;
}

.afro-emblem-label {
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.afro-emblem-sub {
  font-family: 'Fira Code', monospace;
  font-size: 0.64rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

/* Bottom statistics bar — a deliberate continuation of the hero surface */
.afro-stats-banner {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 3vw, 40px);
  background: rgba(4, 6, 13, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-top-left-radius: clamp(14px, 2vw, 20px);
  border-top-right-radius: clamp(14px, 2vw, 20px);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

/* Single accent hairline — the one intentional brand detail on this surface */
.afro-stats-banner::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(20px, 3vw, 40px);
  width: 56px;
  height: 1px;
  background: #0077FF;
  opacity: 0.75;
}

.afro-stat-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-left: clamp(16px, 2.4vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.afro-stat-col:first-child {
  padding-left: 0;
  border-left: 0;
}

.afro-stat-number {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 6px;
}

.afro-stat-label {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: clamp(0.62rem, 0.78vw, 0.72rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Light Mode Overrides — a cooler, lighter cinematic grade instead of the
   same black filter, so the video stays visible while copy remains readable. */
[data-theme="light"] .afro-dark-scrim {
  background:
    linear-gradient(100deg,
      rgba(9, 13, 26, 0.8) 0%,
      rgba(9, 13, 26, 0.58) 30%,
      rgba(9, 13, 26, 0.26) 58%,
      rgba(9, 13, 26, 0.1) 100%),
    linear-gradient(180deg,
      rgba(9, 13, 26, 0.2) 0%,
      rgba(9, 13, 26, 0.02) 38%,
      rgba(9, 13, 26, 0.22) 74%,
      rgba(7, 10, 22, 0.74) 100%),
    radial-gradient(70% 85% at 88% 28%, rgba(0, 119, 255, 0.09) 0%, transparent 66%);
}

[data-theme="light"] .afro-stats-banner {
  background: rgba(9, 13, 26, 0.95);
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .cinematic-status-pill {
  background: rgba(9, 13, 26, 0.5);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 12px rgba(9, 13, 26, 0.25);
}

[data-theme="light"] .cinematic-tech-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .cinematic-status-text {
  color: rgba(255, 255, 255, 0.85);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .afro-main-content {
    gap: 24px;
  }
  .afro-text-col {
    max-width: 100%;
  }
}

/* Mobile Screens (<= 991px): Video Stays in Fixed Single Contained Position (No Fullscreen Scroll Expansion) */
@media (max-width: 991px) {
  .fullscreen-video-outer {
    padding: 24px 0 36px 0 !important;
    min-height: auto !important;
    overflow: hidden;
  }

  .fullscreen-video-wrapper {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 480px !important;
    max-height: none !important;
    border-radius: 20px !important;
    transform: none !important;
    margin: 0 auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 119, 255, 0.18) !important;
  }

  .video-expand-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    border-radius: inherit !important;
    transform: none !important;
  }

  .fullscreen-video-element {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 860px) {
  .afro-emblem-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .fullscreen-video-outer {
    padding: 16px 0 24px 0 !important;
  }

  .fullscreen-video-wrapper {
    width: calc(100% - 24px) !important;
    min-height: 360px !important;
    border-radius: 18px !important;
  }

  .video-expand-container,
  .fullscreen-video-element {
    min-height: 360px !important;
  }

  .afro-hero-overlay {
    padding: 16px 18px 0 18px;
  }

  /* Soften / reduce dark black layer in mobile view for cleaner, brighter video display */
  .afro-dark-scrim {
    opacity: 0.62 !important;
  }

  [data-theme="light"] .afro-dark-scrim {
    opacity: 0.42 !important;
  }

  .cinematic-overlay-gradient {
    opacity: 0.58 !important;
  }

  .video-gradient-overlay {
    opacity: 0.5 !important;
  }

  /* On mobile: keep ONLY title and 2 points */
  .afro-top-row {
    display: none !important;
  }
  .afro-eyebrow-text {
    display: none !important;
  }
  .afro-emblem-badge {
    display: none !important;
  }
  .afro-subtag-item-3,
  .afro-subtag-sep-3 {
    display: none !important;
  }

  .afro-main-content {
    margin-top: auto;
    margin-bottom: 12px;
    padding-bottom: 0;
  }

  .afro-hero-title {
    font-size: clamp(1.6rem, 5.8vw, 2.1rem);
    margin-bottom: 8px;
  }

  .afro-hero-subtag {
    font-size: clamp(0.78rem, 2.6vw, 0.95rem);
    margin-bottom: 0;
    gap: 2px 8px;
  }

  /* Sleek 2-Option Bottom Stats on Mobile */
  .afro-stats-banner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    padding: 10px 14px !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
  }

  .afro-stat-col:nth-child(n+3) {
    display: none !important;
  }

  .afro-stat-col {
    padding-left: 12px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .afro-stat-col:first-child {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .afro-stat-number {
    font-size: clamp(0.95rem, 2.8vw, 1.15rem) !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }

  .afro-stat-label {
    font-size: clamp(0.48rem, 1.4vw, 0.56rem) !important;
    letter-spacing: 0.04em !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 480px) {
  .fullscreen-video-outer {
    padding: 12px 0 20px 0 !important;
  }

  .fullscreen-video-wrapper {
    width: calc(100% - 18px) !important;
    min-height: 320px !important;
    border-radius: 14px !important;
  }

  .video-expand-container,
  .fullscreen-video-element {
    min-height: 320px !important;
  }

  .afro-hero-overlay {
    padding: 12px 14px 0 14px;
  }

  .afro-main-content {
    margin-bottom: 8px;
  }

  .afro-hero-title {
    font-size: 1.48rem;
    margin-bottom: 6px;
  }

  .afro-hero-subtag {
    font-size: 0.78rem;
    gap: 2px 6px;
  }

  .afro-stats-banner {
    padding: 8px 10px !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
  }

  .afro-stat-col {
    padding-left: 10px !important;
  }

  .afro-stat-number {
    font-size: 0.92rem !important;
    margin-bottom: 1px !important;
  }

  .afro-stat-label {
    font-size: 0.46rem !important;
    letter-spacing: 0.03em !important;
  }
}

@media (max-width: 360px) {
  .fullscreen-video-wrapper {
    width: calc(100% - 14px) !important;
    min-height: 290px !important;
    border-radius: 12px !important;
  }

  .video-expand-container,
  .fullscreen-video-element {
    min-height: 290px !important;
  }

  .afro-hero-overlay {
    padding: 10px 10px 0 10px;
  }

  .afro-hero-title {
    font-size: 1.3rem;
    margin-bottom: 5px;
  }

  .afro-hero-subtag {
    font-size: 0.72rem;
    gap: 2px 4px;
  }

  .afro-stats-banner {
    padding: 6px 8px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
  }

  .afro-stat-col {
    padding-left: 8px !important;
  }

  .afro-stat-number {
    font-size: 0.85rem !important;
    margin-bottom: 1px !important;
  }

  .afro-stat-label {
    font-size: 0.42rem !important;
    letter-spacing: 0.02em !important;
  }
}

/* Small-screen guard: the fixed chat launcher (bottom-right on phones) shares
   the same corner as the final statistic, so reserve space for it rather than
   letting the label slide underneath the button. Home page only. */
@media (max-width: 600px) {
  .home .afro-stat-col:last-child {
    padding-right: 56px;
  }
}

/* ==========================================================================
   HOME HERO NAVBAR REFINEMENT
   Scoped to <body class="home"> so every other page is completely untouched.
   Only surface chrome (transparency, border, shadow, blur) plus desktop-only
   spacing is adjusted — no layout, links or behaviour changes.
   ========================================================================== */
.home .header {
  background: rgba(5, 7, 14, 0.7);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.home .header.scrolled {
  background: rgba(4, 6, 12, 0.94);
  border-color: rgba(0, 119, 255, 0.16);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home .nav-links {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .home .header {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(10, 30, 60, 0.09);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .home .header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(10, 30, 60, 0.14);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .home .nav-links {
  background: transparent;
  border-color: rgba(10, 30, 60, 0.08);
}

/* Desktop-only breathing room for nav items.
   Deliberately bounded to 1025–1439px so it never clobbers the intentional
   wide-screen nav spacing defined for 1440px+ / 2000px+ / 4K layouts. */
@media (min-width: 1025px) and (max-width: 1439px) {
  .home .nav-links {
    gap: 4px;
  }
  .home .nav-link {
    padding: 7px 15px;
  }
}