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

:root {
  /* ═══ Core Palette ═══ */
  --bg-color: #fafbfc;
  --text-main: #1d1d1f;
  --text-muted: #6e6e73;
  --primary-color: #007aff;
  --secondary-color: #0056b3;
  --border-color: rgba(0, 0, 0, 0.08);
  --card-bg: #ffffff;
  --card-hover: #ffffff;

  /* ═══ Accent Palette ═══ */
  --teal: #00cc88;
  --teal-light: rgba(0, 204, 136, 0.08);
  --purple: #8a2be2;
  --purple-light: rgba(138, 43, 226, 0.08);
  --warm-orange: #ff6b35;
  --warm-orange-light: rgba(255, 107, 53, 0.08);
  --rose: #e6005c;
  --rose-light: rgba(230, 0, 92, 0.08);
  --deep-blue: #0a1628;

  /* ═══ Glass System ═══ */
  --glass-bg: rgba(255, 255, 255, 0.01);
  --glass-blur: blur(15px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.05);

  /* ═══ Shadows ═══ */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);
  --shadow-glass: 0 10px 40px rgba(0, 0, 0, 0.05);
  --shadow-glow-blue: 0 0 30px rgba(0, 122, 255, 0.15);
  --shadow-glow-purple: 0 0 30px rgba(138, 43, 226, 0.12);
  --shadow-glow-teal: 0 0 30px rgba(0, 204, 136, 0.12);
  --shadow-card-hover: 0 30px 60px rgba(0, 0, 0, 0.1);

  /* ═══ Typography ═══ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --h1-size: clamp(2.5rem, 5vw, 3.5rem);
  --h2-size: clamp(1.8rem, 3.5vw, 2.8rem);
  --h3-size: clamp(1.3rem, 2vw, 1.6rem);
  --body-lg: 1.15rem;
  --body-max-width: 68ch;

  /* ═══ Spacing Scale ═══ */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 80px;
  --space-4xl: 120px;

  /* ═══ Transitions ═══ */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-medium: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --nav-height: 70px;

  /* ═══ Focus Ring ═══ */
  --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.4);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Safety net: any <img> without explicit sizing must never overflow its
   container on narrow viewports. Component-level rules (.nav-logo-img,
   .tech-badge img, etc.) are more specific and still take precedence. */
img {
  max-width: 100%;
  height: auto;
}

.hero-visual-img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-main);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--secondary-color);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================
   NAVIGATION BAR (Dynamic Island)
   ========================================== */
.navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
  height: var(--nav-height);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 40px;
  z-index: 1000;
  display: flex;
  align-items: center;
  /* Extremely strict, linear-feeling ease so both directions are identically paced */
  transition: width 2.0s ease,
    padding 2.0s ease,
    background 2.0s ease,
    box-shadow 2.0s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.nav-container {
  width: 100%;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-main);
  z-index: 1001;
  display: flex;
  align-items: center;
}

.nav-logo-img {
  height: 62px;
  width: auto;
  max-height: 100%;
  object-fit: contain;
  transition: height 0.3s ease;
}

.nav-links {
  display: flex;
  gap: 35px;
  list-style: none;
  /* Slowed down link fading to match the island expansion shape */
  transition: opacity 1.5s ease, transform 1.5s ease, width 1.5s ease;
  white-space: nowrap;
  /* IMPORTANT: Removing overflow: hidden here so dropdowns can escape the container */
  position: relative;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 10px 0;
  display: inline-block;
}

.nav-links a:hover {
  color: var(--primary-color);
}

/* ==========================================
   DYNAMIC ISLAND COLLAPSED STATE
   ========================================== */
.navbar.collapsed {
  width: 320px;
  background: rgba(255, 255, 255, 0.01);
  /* Super transparent when collapsed */
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);

  /* EXACT duplicate transition to force browser compliance on collapse */
  transition: width 2.0s ease,
    padding 2.0s ease,
    background 2.0s ease,
    box-shadow 2.0s ease;
}

.navbar.collapsed .nav-logo {
  font-size: 1.1rem;
  /* slightly smaller logo */
}

.navbar.collapsed .nav-logo-img {
  height: 46px;
}

/* Hide the main nav links completely when collapsed */
.navbar.collapsed .nav-links {
  opacity: 0;
  width: 0;
  gap: 0;
  transform: scale(0.9);
  pointer-events: none;
  visibility: hidden;
  /* Ensures child dropdowns don't register hovers while collapsed */
}

/* Show a tiny 'menu' indicator inside the collapsed pill */
.island-menu-indicator {
  display: none;
  background: var(--primary-color);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.5s ease;
  opacity: 0;
  transform: scale(0.5);
}

.navbar.collapsed .island-menu-indicator {
  display: flex;
  opacity: 1;
  transform: scale(1);
}

.navbar.collapsed .island-menu-indicator:hover {
  background: var(--secondary-color);
  transform: scale(1.05);
}

/* Dropdown */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(10px);
  background: var(--card-bg);
  border: var(--glass-border);
  border-radius: 16px;
  padding: 15px;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-lg);
  list-style: none;
  /* Remove bubbles */
}

.nav-links li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  margin-bottom: 5px;
  list-style-type: none;
  /* Just to be safe */
}

.dropdown-menu li:last-child {
  margin-bottom: 0;
}

.dropdown-menu a {
  display: block;
  padding: 10px 15px;
  border-radius: 8px;
  color: var(--text-main);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.dropdown-menu a:hover {
  background: #f0f2f5;
  color: var(--primary-color);
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1001;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

/* Nav switches to the hamburger/full-screen menu at 1024px, not just 768px.
   Below 1024px the desktop nav's dropdown only opens on :hover, which has
   no equivalent on a touchscreen — a tablet (or a touch laptop) between
   769-1024px would otherwise get a cramped pill nav with an unreachable
   dropdown. Giving that whole range the same well-tested mobile menu (with
   its click-to-expand dropdown, wired in main.js) fixes both problems. */
@media screen and (max-width: 1024px) {
  .mobile-toggle {
    display: flex;
  }

  /* The hamburger above already covers menu access; hiding the
     collapsed-island indicator avoids showing two overlapping toggle
     buttons at once after scrolling. */
  .island-menu-indicator {
    display: none !important;
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    background: var(--bg-color);
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 40px;
    align-items: center;
    gap: 30px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 1000;
    box-shadow: var(--shadow-md);
  }

  .nav-links.active {
    opacity: 1;
    visibility: visible;
  }

  .nav-links a {
    font-size: 1.2rem;
    padding: 12px 20px;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
    padding: 10px 0 0;
    display: none;
  }

  .nav-links li.active .dropdown-menu {
    display: block;
  }
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background: var(--primary-color);
  color: #fff;
  border: none;
}

.btn-primary:hover {
  background: var(--secondary-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-outline:hover {
  background: #f8f9fa;
  color: var(--text-main);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Global utility for outline buttons on dark backgrounds */
.text-light .btn-outline,
.bg-dark-mesh .btn-outline,
.cta-enterprise .btn-outline,
.btn-outline[style*="color: #fff"],
.btn-outline[style*="color: #ffffff"],
.btn-outline[style*="color: white"] {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.text-light .btn-outline:hover,
.bg-dark-mesh .btn-outline:hover,
.cta-enterprise .btn-outline:hover,
.btn-outline[style*="color: #fff"]:hover,
.btn-outline[style*="color: #ffffff"]:hover,
.btn-outline[style*="color: white"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   CARDS & GRIDS
   ========================================== */
.grid {
  display: grid;
  gap: 30px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.form-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 991px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-4,
  .form-grid-row {
    grid-template-columns: 1fr;
  }
}

/* Bento Grid System for Services */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.bento-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.5;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s ease;
}

.card-premium:hover .bento-bg-img {
  transform: scale(1.08);
  opacity: 0.8;
}

.bento-span-4 {
  grid-column: span 4;
}

.bento-span-2 {
  grid-column: span 2;
}

.bento-span-1 {
  grid-column: span 1;
}

@media (max-width: 991px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-span-4,
  .bento-span-2 {
    grid-column: span 2;
  }

  .bento-span-1 {
    grid-column: span 1;
  }
}

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

  .bento-span-4,
  .bento-span-2,
  .bento-span-1 {
    grid-column: span 1;
  }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 40px;
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #f0f4ff;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 25px;
}

.card-title {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.card-text {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 25px;
  flex-grow: 1;
  line-height: 1.5;
}

/* Premium Card Variants */
.card-premium {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: -1;
  border-radius: inherit;
}

.hover-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.hover-lift:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 122, 255, 0.12);
  border-color: var(--primary-color);
}

/* New Extreme Hover Effect (Phase 7) */
.hover-glow-intense {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.hover-glow-intense::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
  transition: box-shadow 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  z-index: -1;
}

.hover-glow-intense:hover {
  transform: translateY(-8px) scale(1.03) rotateX(2deg) rotateY(-2deg);
  border-color: rgba(0, 122, 255, 0.8);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hover-glow-intense:hover::after {
  opacity: 1;
  box-shadow: 0 0 40px 10px rgba(0, 122, 255, 0.3), inset 0 0 20px rgba(0, 122, 255, 0.1);
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary-color) 0%, #b00058 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================
   PAGE HEADERS (Dynamic UI)
   ========================================== */
.page-header {
  padding: 180px 0 100px;
  text-align: center;
  background: linear-gradient(180deg, #f0f4ff 0%, var(--bg-color) 100%);
  position: relative;
  overflow: hidden;
}

/* Dynamic background accent */
.page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 150vw;
  height: 100vh;
  background: radial-gradient(ellipse at center, rgba(0, 122, 255, 0.05) 0%, rgba(250, 251, 252, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 4rem;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #1d1d1f 0%, #434346 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.page-subtitle {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 650px;
  margin: 0 auto;
  font-weight: 400;
}

/* ==========================================
   SECTIONS
   ========================================== */
.section {
  padding: 120px 0;
}

.section-title {
  font-size: 2.8rem;
  margin-bottom: 50px;
  text-align: center;
  font-weight: 800;
}

/* ==========================================
   ANIMATIONS (Scroll Reveal)
   ========================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ==========================================
   FOOTER (Light Variant)
   ========================================== */
.footer {
  background: #ffffff;
  border-top: 1px solid var(--border-color);
  padding: 80px 0 40px;
  margin-top: 60px;
  font-size: 0.9rem;
}

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

.footer-brand h3 {
  color: var(--text-main);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 15px;
}

.footer-col h4 {
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul a {
  color: var(--text-muted);
  transition: color var(--transition-fast);
  font-weight: 500;
}

.footer-col ul a:hover {
  color: var(--primary-color);
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}

/* ==========================================
   PHASE 9: PREMIUM BACKGROUND UTILITIES
   ========================================== */

/* Dark Tech Mesh (Cybersecurity / IT) */
.bg-dark-mesh {
  background-color: #050a14;
  background: linear-gradient(145deg, #0a0f1e 0%, #151a2f 50%, #050814 100%);
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.bg-dark-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5, 10, 20, 0.85) 0%, rgba(5, 10, 20, 0.6) 100%);
  z-index: -1;
}

.bg-dark-mesh .section-title {
  color: #ffffff;
}

.bg-dark-mesh .card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.bg-dark-mesh .card-title {
  color: #ffffff;
}

.bg-dark-mesh .card-text {
  color: rgba(255, 255, 255, 0.7);
}

.bg-dark-mesh .card:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 40px rgba(0, 204, 255, 0.1);
  border-color: rgba(0, 204, 255, 0.3);
}

/* Vibrant Soft Gradient (Cloud / Marketing) */
.bg-vibrant-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #312e81 50%, #4c1d95 100%);
  position: relative;
  z-index: 1;
}

.bg-vibrant-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  z-index: -1;
}

/* Dark Section Utilities */
.text-light {
  color: #ffffff !important;
}

.text-light-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */
@media (max-width: 991px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-title {
    font-size: 3rem;
  }
}

@media (max-width: 600px) {
  /* Contact page quick-connect strip: without this, each icon+label pair
     centers as its own independent block once it wraps to its own line,
     so the icons land at different horizontal positions depending on how
     wide that row's label text is. Fixing every row to the same width and
     left-aligning within it keeps the icons in one consistent column. */
  .quick-connect-strip {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .quick-connect-item {
    width: 100%;
    max-width: 260px;
    justify-content: flex-start;
  }

  /* "Connect With Us" social row: 8 icons wrapping freely left an
     unbalanced 6-then-2 split. A fixed 4-column grid always lands as two
     even rows of 4 instead. */
  .connect-social-icons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .connect-social-icons a {
    width: 100% !important;
  }

  /* "Who We Are" intro on the About page used a 2-column magazine-style
     text layout with no mobile fallback, so it split each paragraph across
     two very narrow columns with a confusing top-to-bottom-then-jump-back
     reading order. Single column on small screens. */
  .about-intro-columns {
    columns: 1 !important;
  }
}

@media (max-width: 768px) {
  /* Blurred full-viewport ambient lights + animated gradient backgrounds are
     expensive to recomposite every frame; disabling them on mobile removes
     the single biggest contributor to scroll jank on smaller/weaker devices
     while leaving the effect intact on desktop. */
  .global-ambient-lights::before,
  .global-ambient-lights::after {
    animation: none;
    opacity: 0.08;
  }

  .bg-mesh-light,
  .bg-vibrant-gradient {
    animation: none;
  }

  .page-title {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

}

/* ==========================================
   DYNAMIC BACKGROUND ANIMATIONS (Phase 4)
   ========================================== */

/* 1. Moving Mesh Gradient */
@keyframes meshShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Global Ambient Lights (Phase 7) */
.global-ambient-lights {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -999;
  /* Stay behind everything */
  overflow: hidden;
}

.global-ambient-lights::before,
.global-ambient-lights::after {
  content: '';
  position: absolute;
  width: 55vw;
  height: 55vw;
  max-width: 650px;
  max-height: 650px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.15;
  will-change: transform;
}

/* Slow moving blue light from top left */
.global-ambient-lights::before {
  background: rgba(0, 122, 255, 0.6);
  top: -20%;
  left: -20%;
  animation: floatOrbGlobal1 35s infinite alternate ease-in-out;
}

/* Slow moving purple/pink light from bottom right */
.global-ambient-lights::after {
  background: rgba(176, 0, 88, 0.4);
  bottom: -20%;
  right: -20%;
  animation: floatOrbGlobal2 40s infinite alternate ease-in-out;
}

@keyframes floatOrbGlobal1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(30vw, 20vh) scale(1.3);
  }

  100% {
    transform: translate(-10vw, 40vh) scale(0.9);
  }
}

@keyframes floatOrbGlobal2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-40vw, -30vh) scale(1.2);
  }

  100% {
    transform: translate(20vw, -10vh) scale(1.1);
  }
}

.bg-mesh-light {
  /* Added subtle pinks, cyans, and purples to make it eye-catchy */
  background: linear-gradient(120deg, #ffffff, #f0f7ff, #fff0f5, #f3e8ff, #ffffff);
  background-size: 200% 200%;
  animation: meshShift 20s ease infinite;
}

.bg-dark-mesh {
  background: linear-gradient(145deg, #0a0f1e 0%, #151a2f 50%, #050814 100%);
  position: relative;
  z-index: 1;
}

.bg-dark-mesh::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 20px 20px, 40px 40px;
  background-position: 0 0, 10px 10px;
  z-index: -1;
}

.bg-vibrant-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #312e81 50%, #4c1d95 100%);
  background-size: 200% 200%;
  animation: meshShift 15s ease infinite;
  color: #ffffff;
}

/* 2. Floating Orb Glows (Behind Content) */
@keyframes floatOrb1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
    opacity: 0.7;
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
    opacity: 0.5;
  }

  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
}

@keyframes floatOrb2 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }

  33% {
    transform: translate(-40px, 30px) scale(1.2);
    opacity: 0.6;
  }

  66% {
    transform: translate(25px, -25px) scale(0.8);
    opacity: 0.4;
  }

  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
}

.bg-glow-pulse {
  position: relative;
  overflow: hidden;
  background-color: #fafbfc;
}

.bg-glow-pulse::before,
.bg-glow-pulse::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  /* Increased blur for smoother merging */
  z-index: 0;
  pointer-events: none;
}

/* Intense Cyan/Blue primary orb */
.bg-glow-pulse::before {
  width: 55vw;
  height: 55vw;
  max-width: 700px;
  max-height: 700px;
  background: rgba(0, 204, 255, 0.12);
  /* Vibrant Cyan */
  top: -15%;
  left: -15%;
  animation: floatOrb1 25s infinite ease-in-out;
}

/* Deep Vivid Purple secondary orb */
.bg-glow-pulse::after {
  width: 45vw;
  height: 45vw;
  max-width: 600px;
  max-height: 600px;
  background: rgba(255, 0, 128, 0.08);
  /* Hot pink/magenta */
  bottom: -15%;
  right: -10%;
  animation: floatOrb2 30s infinite ease-in-out reverse;
}

.bg-glow-pulse>* {
  position: relative;
  z-index: 1;
}

/* ==========================================
   CLIENT RIBBON ANIMATIONS
   ========================================== */
.client-ribbon {
  overflow: hidden;
  white-space: nowrap;
  background: transparent;
  padding: 20px 0;
}

.client-track {
  display: inline-flex;
  animation: scrollRibbon 80s linear infinite;
  align-items: center;
  will-change: transform;
}

.client-track img {
  height: 60px;
  max-width: 160px;
  margin: 0 40px;
  object-fit: contain;
  transition: transform 0.3s ease;
  transform: translateZ(0);
  /* Hardware acceleration for smoother scaling */
  backface-visibility: hidden;
}

.client-track img:hover {
  transform: scale(1.1) translateZ(0);
}

@keyframes scrollRibbon {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ==========================================
   TIMELINE (OUR JOURNEY)
   ========================================== */
.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  counter-reset: timeline-counter;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background: linear-gradient(180deg, var(--primary-color), #8a2be2);
  opacity: 0.35;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
  border-radius: 2px;
}

.timeline-item {
  padding: 20px 50px;
  position: relative;
  width: 50%;
  box-sizing: border-box;
  counter-increment: timeline-counter;
}

.timeline-item.left {
  left: 0;
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.timeline-item.right {
  left: 50%;
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.timeline-item::after {
  content: counter(timeline-counter);
  position: absolute;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--primary-color), #8a2be2);
  color: #fff;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: 0 0 0 5px var(--bg-color), 0 4px 14px rgba(0, 122, 255, 0.45);
}

.timeline-item.left::after {
  right: -17px;
}

.timeline-item.right::after {
  left: -17px;
}

/* Timeline Cards should behave nicely inside flex contexts */
.timeline-item .card {
  width: 100%;
  max-width: 400px;
  text-align: left;
  /* Keep text inside card left-aligned for readability */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Timeline Responsive */
@media screen and (max-width: 767px) {
  .timeline::after {
    left: 31px;
  }

  .timeline-item {
    width: 100%;
    padding: 14px 15px 14px 68px;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
    justify-content: flex-start;
    text-align: left;
  }

  .timeline-item .card {
    max-width: 100%;
  }

  .timeline-item.left::after,
  .timeline-item.right::after {
    left: 14px;
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}

/* ==========================================
   MEGA FOOTER
   ========================================== */
.footer-mega {
  background-color: #03050c;
  color: #fff;
  padding: 80px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-primary);
  position: relative;
  overflow: hidden;
}

.footer-mega-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 3fr 3fr;
  gap: 40px;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.footer-col h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 15px;
}

.footer-col ul li a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.footer-col ul li a:hover {
  color: var(--primary-color);
  padding-left: 5px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-contact-item i {
  color: var(--primary-color);
  font-size: 1.2rem;
  margin-top: 3px;
}

.country-flags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 25px;
}

.country-flags img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.country-flags img:hover {
  transform: translateY(-5px);
}

.footer-subscribe {
  margin-bottom: 30px;
}

.footer-subscribe p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.footer-subscribe input {
  width: 100%;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.footer-subscribe input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: rgba(0, 122, 255, 0.05);
}

.footer-subscribe button {
  width: 100%;
  padding: 15px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.footer-subscribe button:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 122, 255, 0.4);
}

.footer-social-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-social-section h4 {
  margin-bottom: 0;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.social-icon-btn {
  font-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
  padding: 5px;
  min-width: 44px;
  min-height: 44px;
}

.social-icon-btn:hover {
  transform: translateY(-5px) scale(1.1);
}

.country-flags {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 15px;
  margin-top: 5px;
}

.country-flags img {
  width: 44px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.country-flags img:hover {
  transform: scale(1.05);
}

.footer-mega-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 2;
}

.footer-mega-bottom-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  margin-left: 20px;
  transition: color 0.3s ease;
}

.footer-mega-bottom-links a:hover {
  color: #fff;
}

.floating-contact-btns {
  display: flex;
  gap: 10px;
}

.float-btn {
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 20px;
}

.float-btn.phone-btn {
  background: var(--primary-color);
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4);
}

.float-btn.email-btn {
  background: #EA4335;
  box-shadow: 0 4px 15px rgba(234, 67, 53, 0.4);
}

.float-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

/* Sitewide persistent WhatsApp click-to-chat bubble (added 24 Jul 2026) */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  z-index: 998;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.55);
}

@media screen and (max-width: 600px) {
  .whatsapp-fab {
    width: 52px;
    height: 52px;
    font-size: 24px;
    bottom: 18px;
    right: 18px;
  }
}

.footer-contact-item:hover {
  color: var(--primary-color) !important;
}

@media screen and (max-width: 1024px) {
  .footer-mega-grid {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }
}

@media screen and (max-width: 767px) {
  .footer-mega-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-mega-bottom {
    flex-direction: column-reverse;
    gap: 20px;
    text-align: center;
  }

  .footer-mega-bottom-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
  }

  .footer-mega-bottom-links a {
    margin: 0;
  }
}

/* ==========================================
   SOCIAL ICON BRAND COLORS
   ========================================== */
.social-icon-btn.instagram {
  color: #E1306C;
}

.social-icon-btn.facebook {
  color: #1877F2;
}

.social-icon-btn.x-twitter {
  color: #ffffff;
}

.social-icon-btn.linkedin {
  color: #0A66C2;
}

.social-icon-btn.threads {
  color: #ffffff;
}

.social-icon-btn.whatsapp {
  color: #25D366;
}

.social-icon-btn.google-maps {
  color: #EA4335;
}

.social-icon-btn.google-biz {
  color: #4285F4;
}

.social-icon-btn.instagram:hover {
  filter: drop-shadow(0 5px 10px rgba(225, 48, 108, 0.5));
}

.social-icon-btn.facebook:hover {
  filter: drop-shadow(0 5px 10px rgba(24, 119, 242, 0.5));
}

.social-icon-btn.x-twitter:hover {
  filter: drop-shadow(0 5px 10px rgba(255, 255, 255, 0.4));
}

.social-icon-btn.linkedin:hover {
  filter: drop-shadow(0 5px 10px rgba(10, 102, 194, 0.5));
}

.social-icon-btn.threads:hover {
  filter: drop-shadow(0 5px 10px rgba(255, 255, 255, 0.4));
}

.social-icon-btn.whatsapp:hover {
  filter: drop-shadow(0 5px 10px rgba(37, 211, 102, 0.5));
}

.social-icon-btn.google-maps:hover {
  filter: drop-shadow(0 5px 10px rgba(234, 67, 53, 0.5));
}

.social-icon-btn.google-biz:hover {
  filter: drop-shadow(0 5px 10px rgba(66, 133, 244, 0.5));
}

/* ========================================
   ENTERPRISE DESIGN SYSTEM (Phase A)
   ======================================== */

/* --- Layered Backgrounds --- */
.bg-subtle-grid {
  position: relative;
}

.bg-subtle-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 122, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 122, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.bg-radial-accent {
  position: relative;
}

.bg-radial-accent::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(0, 122, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.bg-dark-enterprise {
  background: linear-gradient(135deg, #0a0e1a 0%, #111827 40%, #0a0e1a 100%);
  position: relative;
}

.bg-dark-enterprise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

/* --- Section Dividers --- */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 122, 255, 0.15) 30%, rgba(0, 122, 255, 0.15) 70%, transparent 100%);
  margin: 0;
  border: none;
}

.section-divider-dark {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.08) 70%, transparent 100%);
  margin: 0;
  border: none;
}

/* --- Enhanced Section Spacing --- */
.section-lg {
  padding: 120px 0;
}

.section-xl {
  padding: 140px 0;
}

/* --- Partnership Badge Strip --- */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  justify-items: center;
  align-items: center;
  padding: 50px 0;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .partner-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .partner-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .partner-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.partner-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  padding: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: floatBadge 6s infinite ease-in-out;
}

.partner-badge::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, transparent, rgba(0, 122, 255, 0.4), transparent);
  border-radius: inherit;
  z-index: -1;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.partner-badge::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: none;
  pointer-events: none;
  transform: rotate(45deg);
}

.partner-badge:hover {
  transform: translateY(-10px) rotateX(10deg) rotateY(-10px) scale(1.05);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 122, 255, 0.2);
}

.partner-badge:hover::before {
  opacity: 1;
}

.partner-badge:hover::after {
  animation: glintEffect 1.5s ease;
}

@keyframes glintEffect {
  0% { transform: translate(-30%, -30%) rotate(45deg); }
  100% { transform: translate(30%, 30%) rotate(45deg); }
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-15px) rotateX(5deg); }
}

.partner-badge img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  transition: transform 0.5s ease;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

.partner-badge:hover img {
  transform: translateZ(20px) scale(1.1);
}

/* --- Tech Stack Badges --- */
/* --- Infinite Logo Ribbon Ticker --- */
.logo-ticker-container {
  overflow: hidden;
  padding: 30px 0;
  background: transparent;
  position: relative;
  width: 100%;
  margin: 40px auto;
  display: flex !important;
  justify-content: flex-start;
  /* Fading Edges Mask */
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.logo-ticker-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: scroll-ticker 50s linear infinite; /* Slowed down from 30s for a more premium feel */
  gap: 60px;
  align-items: center;
  white-space: nowrap;
}

.tech-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  transition: all 0.4s ease;
}

.tech-badge img {
  height: 60px;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: none;
  transition: all 0.4s ease;
}

.tech-badge:hover img {
  transform: scale(1.15);
}

@keyframes scroll-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Animated KPI Counter --- */
.kpi-counter {
  text-align: center;
  padding: 20px;
}

.kpi-counter .kpi-number {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--primary-color), #00cc66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kpi-counter .kpi-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kpi-counter.accent-red .kpi-number {
  background: linear-gradient(135deg, #e6005c, #ff6b6b);
  -webkit-background-clip: text;
  background-clip: text;
}

.kpi-counter.accent-green .kpi-number {
  background: linear-gradient(135deg, #00cc66, #66ffb2);
  -webkit-background-clip: text;
  background-clip: text;
}

.kpi-counter.accent-purple .kpi-number {
  background: linear-gradient(135deg, #8a2be2, #d08cff);
  -webkit-background-clip: text;
  background-clip: text;
}

.kpi-counter.accent-orange .kpi-number {
  background: linear-gradient(135deg, #ff9900, #ffcc66);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- Business Problem Section --- */
.problem-section {
  position: relative;
  background: linear-gradient(180deg, #f8f0f0 0%, var(--bg-color) 100%);
  border-left: 4px solid #e6005c;
}

.problem-card {
  padding: 30px;
  border-radius: 16px;
  background: rgba(230, 0, 92, 0.03);
  border: 1px solid rgba(230, 0, 92, 0.08);
}

.problem-card h4 {
  color: #e6005c;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

/* --- Methodology Timeline --- */
.methodology-step {
  position: relative;
  padding-left: 80px;
  padding-bottom: 40px;
}

.methodology-step::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.methodology-step::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 56px;
  width: 2px;
  height: calc(100% - 56px);
  background: linear-gradient(to bottom, var(--primary-color), transparent);
}

.methodology-step:last-child::after {
  display: none;
}

/* --- Deep Capability Cards --- */
.capability-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 35px;
  transition: all var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.capability-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.capability-card:hover::before {
  transform: scaleX(1);
}

.capability-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* --- Industry Use Case Cards --- */
.usecase-card {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.03) 0%, rgba(138, 43, 226, 0.03) 100%);
  border: 1px solid rgba(0, 122, 255, 0.08);
  border-radius: 20px;
  padding: 35px;
  position: relative;
}

.usecase-card .usecase-industry {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}

/* --- Engagement Flow Diagram --- */
.flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
}

.flow-step-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), #0056b3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.flow-arrow {
  font-size: 1.5rem;
  color: var(--text-muted);
  padding: 0 5px;
  align-self: center;
}

@media screen and (max-width: 700px) {
  /* On desktop this wraps freely with whatever fits per row, which on a
     narrow screen lands wherever the flex algorithm happens to break —
     the "2 steps squeezed into one row" look. A deliberate vertical
     journey (one step per row, arrow rotated to point down to the next)
     reads as an intentional flow instead of something that just wrapped. */
  .flow-steps {
    flex-direction: column;
    gap: 4px;
  }

  .flow-step {
    width: 100%;
    max-width: 280px;
  }

  .flow-arrow {
    transform: rotate(90deg);
  }
}

/* --- Stronger CTA Section --- */
.cta-enterprise {
  background: linear-gradient(135deg, #080c17 0%, #1a1040 50%, #080c17 100%);
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}

.cta-enterprise::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(0, 122, 255, 0.15), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(138, 43, 226, 0.1), transparent 50%);
  pointer-events: none;
}

.cta-enterprise h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
}

.cta-enterprise p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 650px;
  margin: 0 auto 40px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (max 1024px) */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .section {
    padding: 70px 0;
  }

  .container {
    padding: 0 25px;
  }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 50px 0;
  }

  .container {
    padding: 0 20px;
  }

  /* Hero sections */
  .page-header {
    padding: 120px 0 50px !important;
  }

  .page-header .grid-2 {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .page-header .page-title {
    text-align: center !important;
    font-size: 2.2rem !important;
  }

  .page-header .page-subtitle {
    text-align: center !important;
    margin: 0 auto !important;
  }

  .page-header img {
    max-width: 80%;
    margin: 30px auto 0;
    display: block;
  }

  .page-header .btn {
    margin: 0 auto;
  }

  .page-header-actions {
    justify-content: center;
  }

  /* Section titles */
  .section-title {
    font-size: 1.6rem !important;
  }

  /* Cards */
  .card {
    padding: 25px !important;
  }

  /* Admin panel form grids (careers/admin.php, testimonials/admin.php) —
     contact.php itself moved to real classes (.grid-2, .form-grid-row) and no
     longer relies on this selector; kept for the two admin panels which still
     use inline grid-template-columns on their edit/add forms. */
  form div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Featured blog article */
  .featured-article-grid {
    grid-template-columns: 1fr !important;
  }

  /* Job listing cards */
  .job-listing-card {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Comparison/data tables - horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Footer adjustments */
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  /* KPI strips */
  .kpi-strip {
    flex-direction: column;
    gap: 25px;
  }

  /* Navbar logo */
  .nav-logo {
    font-size: 1.1rem;
  }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
  .page-header .page-title {
    font-size: 1.8rem !important;
  }

  .section-title {
    font-size: 1.4rem !important;
  }

  .grid-3,
  .grid-2 {
    gap: 15px;
  }

  .card {
    padding: 20px !important;
  }

  .btn {
    padding: 12px 22px;
    font-size: 0.9rem;
  }

  .container {
    padding: 0 15px;
  }

  .section {
    padding: 40px 0;
  }

  .card-title {
    font-size: 1rem !important;
  }
}

/* ==========================================
   ACCESSIBILITY: Focus States
   ========================================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.card:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

.btn:focus-visible {
  border-radius: var(--space-sm);
}

.card:focus-visible {
  border-radius: 20px;
}

/* ==========================================
   ACCESSIBILITY: Reduced Motion
   ========================================== */
@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;
  }

  .client-track {
    animation: none !important;
  }

  .global-ambient-lights::before,
  .global-ambient-lights::after {
    animation: none !important;
  }

  .bg-mesh-light {
    animation: none !important;
  }
}

/* ==========================================
   ROI STRIP (Leaf Page KPI Metrics)
   ========================================== */
.roi-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  background: linear-gradient(135deg, #080c17 0%, #0d1e38 50%, #080c17 100%);
  position: relative;
  overflow: hidden;
}

.roi-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(0, 122, 255, 0.08), transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(138, 43, 226, 0.06), transparent 50%);
  pointer-events: none;
}

.roi-metric {
  flex: 1;
  text-align: center;
  padding: 35px 20px;
  position: relative;
  z-index: 1;
}

.roi-metric:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.roi-metric .roi-value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
}

.roi-metric .roi-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

@media (max-width: 768px) {
  .roi-strip {
    flex-direction: column;
  }

  .roi-metric {
    padding: 25px 20px;
    width: 100%;
  }

  .roi-metric:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ==========================================
   BODY TEXT MAX-WIDTH
   ========================================== */
.page-subtitle,
.card-text,
p {
  max-width: var(--body-max-width, 68ch);
}

.page-subtitle {
  max-width: 650px;
}

/* ==========================================
   SUB-INDUSTRY CARD GRID (GoAds-Style)
   ========================================== */
.sub-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sub-industry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-main);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.sub-industry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.sub-industry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 122, 255, 0.2);
}

.sub-industry-card:hover::before {
  transform: scaleX(1);
}

.sub-industry-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 122, 255, 0.06);
  border-radius: 10px;
}

.sub-industry-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.sub-industry-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.sub-industry-card:hover .sub-industry-arrow {
  transform: translateX(4px);
  color: var(--primary-color);
}

@media (max-width: 1024px) {
  .sub-industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sub-industry-grid {
    grid-template-columns: 1fr;
  }

  .sub-industry-card {
    padding: 16px 20px;
  }
}

/* ==========================================
   IMAGE-BACKED INDUSTRY CARDS (Phase 7)
   ========================================== */
.industry-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.industry-image-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

.industry-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(10, 15, 30, 0.95) 0%, rgba(10, 15, 30, 0.4) 60%, rgba(10, 15, 30, 0.1) 100%);
  transition: background 0.4s ease;
  z-index: 1;
}

.industry-image-content {
  position: relative;
  z-index: 2;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.industry-image-title {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  transition: transform 0.3s ease;
}

.industry-image-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  transform: translateX(0);
}

.industry-image-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.industry-image-card:hover .industry-image-overlay {
  background: linear-gradient(to top, rgba(0, 122, 255, 0.9) 0%, rgba(10, 15, 30, 0.6) 60%, rgba(10, 15, 30, 0.2) 100%);
}

.industry-image-card:hover .industry-image-icon {
  background: #ffffff;
  color: var(--primary-color);
  transform: translateX(5px);
}

@media (max-width: 1024px) {
  .industry-image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .industry-image-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .industry-image-card {
    height: 200px;
  }
}

/* ==========================================
   ENTERPRISE TECH STACK LOGO CHIPS
   ========================================== */
.tech-stack-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 25px;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tech-chip-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.tech-chip-monogram {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.tech-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.15);
  border-color: var(--primary-color);
  color: var(--primary-color);
}