/* ==========================================================================
   SAISHNAA SOFTWARE SOLUTIONS - OFFICIAL SOLID BRAND COLOR STYLESHEET
   Pure solid colors without dual-color gradients:
   Primary Navy (#06275B) | Technology Blue (#0864C5) | Sky Blue (#079BE2)
   Teal Green (#00A884) | Leaf Green (#55D52E) | Magenta Pink (#D7119D) | Vibrant Orange (#FF7808)
   ========================================================================== */

:root {
  /* Official Brand Colors */
  --brand-navy: #0f172a;
  --brand-navy-dark: #020617;
  --brand-navy-deep: #031430;
  --brand-tech-blue: #0864C5;
  --brand-sky-blue: #079BE2;
  --brand-teal: #00A884;
  --brand-leaf-green: #16a34a;
  --brand-magenta: #D7119D;
  --brand-orange: #FF7808;

  /* Executive White Theme Tokens */
  --bg-body: #ffffff;
  --bg-surface: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-muted: #f1f5f9;
  --border-light: #e2e8f0;
  --border-subtle: #cbd5e1;

  --text-main: #0f172a;       /* Deep slate black */
  --text-primary: #0f172a;
  --text-secondary: #334155; /* Dark readable slate */
  --text-muted: #475569;     /* Medium-dark slate */
  --text-dim: #64748b;
  --text-light: #0f172a;

  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    --font-serif: 'Exo 2', sans-serif;
  --font-sans: 'Exo 2', sans-serif;
  --font-display: 'Exo 2', sans-serif;
  --font-primary: 'Exo 2', sans-serif;

  --container-max: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --header-height: 80px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: #ffffff;
  color: #1e293b;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Helpers */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

p {
  color: #334155;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Global Content Justification for Mobile & Desktop */
.content-text,
.section-subtitle,
.hero-subtitle,
.service-desc,
.service-back-desc,
.face.back p,
.face p,
.testimonial-body-text,
.testimonial-card-3d p,
.enterprise-spotlight-card p,
.project-card p,
.project-card-desc,
.project-desc,
.why-us-card p,
.why-card p,
.tech-card p,
.tenet-card p,
.tenet-card-desc,
.about-desc,
.about-content p,
.story-card p,
.story-text,
.modal-body p,
.modal-content p,
.modal-desc,
.footer-desc,
.footer-col p,
.feature-card p,
.feature-desc,
.timeline-desc,
.process-step p,
.process-desc,
.contact-info-card p,
.glass-card p,
.hero-desc,
.spotlight-quote,
.author-meta-role,
.author-meta-company {
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: normal;
  overflow-wrap: break-word;
}

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

img, svg {
  display: block;
  max-width: 100%;
}

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

@media (max-width: 540px) {
  .container {
    padding: 0 16px;
  }
}

.section {
  padding: 110px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}

.section-title {
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: #ffffff;
}

.section-subtitle {
  font-size: 1.12rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}

/* Base Badge Tag */
.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
  backdrop-filter: blur(10px);
}

.badge-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulseDot 2s infinite ease-in-out;
}

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

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: none;
  outline: none;
  transition: all var(--transition-normal);
  text-align: center;
}

.btn-primary {
  background: var(--brand-tech-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(8, 100, 197, 0.4) !important;
}

.btn-primary:hover {
  background: var(--brand-sky-blue) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(7, 155, 226, 0.6) !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 9px 20px;
  font-size: 0.88rem;
}

.btn-icon {
  transition: transform var(--transition-fast);
}

.btn:hover .btn-icon {
  transform: translateX(4px);
}

/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
/* ==========================================================================
   NAVIGATION BAR — NEXT-GEN CYBER-ISLAND FLOATING CAPSULE DOCK
   ========================================================================== */
.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1580px;
  height: 74px;
  z-index: 1000;
  transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(6, 39, 91, 0.88);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 9999px;
  box-shadow: 0 16px 44px -10px rgba(0, 0, 0, 0.7), 
              0 0 28px rgba(8, 100, 197, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Scrolled State */
.site-header.scrolled {
  top: 10px;
  height: 64px;
  background: rgba(6, 39, 91, 0.98);
  border-color: var(--brand-sky-blue);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.8), 
              0 0 32px rgba(7, 155, 226, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.header-inner {
  width: 100%;
  height: 100%;
  padding: 0 20px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

/* 1. Brand Identity Pod */
.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  outline: none !important;
  outline-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.brand-link:focus,
.brand-link:focus-visible,
.brand-link:active {
  outline: none !important;
  outline-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.brand-link:hover {
  transform: translateY(-1px);
  outline: none !important;
  border: none !important;
}

.brand-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(8, 100, 197, 0.5));
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-link:hover .brand-logo-img {
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 4px 18px rgba(7, 155, 226, 0.8));
}

.brand-title-group {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  line-height: 1.1;
}

.brand-sub {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-sky-blue) !important;
}

/* Futuristic Live Campus Status Pill */
.nav-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(85, 213, 46, 0.15);
  border: 1px solid var(--brand-leaf-green);
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-leaf-green);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 6px;
  box-shadow: 0 0 12px rgba(85, 213, 46, 0.2);
  user-select: none;
  white-space: nowrap;
}

.status-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-leaf-green);
  box-shadow: 0 0 8px var(--brand-leaf-green);
  animation: pulseDot 2s infinite ease-in-out;
}
/* 2. Interactive Navigation Dock */
.nav-menu {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  background: rgba(255, 255, 255, 0.035);
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: #cbd5e1;
  position: relative;
  padding: 7px 13px;
  border-radius: 9999px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(45, 212, 191, 0.14);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.35);
}

.nav-link.active {
  color: #ffffff;
  background: rgba(45, 212, 191, 0.2);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.5), 0 0 14px rgba(45, 212, 191, 0.3);
}

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

/* Dropdown System */
.nav-item-dropdown {
  position: relative;
}

.nav-caret {
  font-size: 0.68rem;
  transition: transform 0.25s ease;
  color: rgba(255, 255, 255, 0.6);
}

.nav-item-dropdown:hover .nav-caret {
  transform: rotate(180deg);
  color: #5eead4;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 310px;
  background: rgba(6, 18, 28, 0.95);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 30px rgba(45, 212, 191, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  list-style: none;
  z-index: 1010;
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 18px;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  transition: all 0.2s ease;
  color: #ffffff;
  text-decoration: none;
}

.dropdown-item:hover {
  background: rgba(45, 212, 191, 0.12);
  transform: translateX(4px);
}

.dropdown-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.dropdown-text {
  display: flex;
  flex-direction: column;
}

.dropdown-text strong {
  font-size: 0.92rem;
  color: #ffffff;
  line-height: 1.2;
}

.dropdown-text span {
  font-size: 0.75rem;
  color: #cbd5e1;
  margin-top: 3px;
  line-height: 1.3;
}

/* Mobile Drawer Submenu */
.drawer-item-dropdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-submenu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 18px;
  margin-top: 4px;
  border-left: 2px solid rgba(45, 212, 191, 0.4);
}

.drawer-sublink {
  font-size: 0.95rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.drawer-sublink:hover {
  color: #38bdf8;
}

/* 3. Executive Action Pod */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Direct WhatsApp Instant Chat Chip */
.header-wa-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.38);
  border-radius: 9999px;
  color: #25D366;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  white-space: nowrap;
}

.header-wa-chip:hover {
  background: #25D366;
  color: #042914;
  border-color: #25D366;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.55);
  transform: translateY(-2px);
}

.header-wa-chip i {
  font-size: 1rem;
}

/* Solid Consultation CTA (Vibrant Orange #FF7808) */
.header-consult-btn {
  position: relative;
  overflow: hidden;
  padding: 9px 20px !important;
  border-radius: 9999px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  background: var(--brand-orange) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 18px rgba(255, 120, 8, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.header-consult-btn:hover {
  background: #e06800 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 26px rgba(255, 120, 8, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Mobile Toggle Hamburger inside Cyber Dock */
.mobile-toggle-btn {
  display: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  color: #ffffff;
  font-size: 1.15rem;
  cursor: pointer;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.mobile-toggle-btn:hover {
  background: rgba(45, 212, 191, 0.2);
  border-color: rgba(45, 212, 191, 0.4);
  color: #5eead4;
}

/* Responsive Island Dock Rules */
@media (max-width: 1480px) {
  .nav-link {
    padding: 6px 11px;
    font-size: 0.86rem;
  }
}

@media (max-width: 1366px) {
  .header-inner {
    padding: 0 16px 0 18px;
    gap: 8px;
  }
  .nav-link {
    padding: 6px 9px;
    font-size: 0.83rem;
    gap: 4px;
  }
  .nav-status-pill {
    padding: 3px 8px;
    font-size: 0.64rem;
  }
  .header-actions {
    gap: 8px;
  }
  .header-consult-btn {
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 1220px) {
  .nav-status-pill {
    display: none;
  }
  .nav-link {
    padding: 5px 8px;
    font-size: 0.81rem;
    gap: 3px;
  }
  .header-wa-chip {
    padding: 7px 11px;
    font-size: 0.78rem;
  }
}

@media (max-width: 1120px) {
  .site-header {
    height: 64px;
    top: 10px;
    left: 14px;
    right: 14px;
    transform: none;
    width: auto;
    max-width: none;
  }
  .nav-menu {
    display: none;
  }
  .mobile-toggle-btn {
    display: flex;
  }
}

@media (max-width: 640px) {
  .site-header {
    height: 56px;
    top: 8px;
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
    max-width: none;
    border-radius: 9999px;
  }
  .header-inner {
    padding: 0 8px 0 12px;
    gap: 6px;
  }
  .brand-link {
    gap: 8px;
  }
  .brand-logo-img {
    height: 28px;
  }
  .brand-name {
    font-size: 0.95rem;
  }
  .brand-sub {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }
  .header-actions {
    gap: 6px;
  }
  .header-consult-btn {
    display: none !important;
  }
  .wa-chip-text {
    display: none;
  }
  .header-wa-chip {
    padding: 6px 9px;
    font-size: 0.9rem;
  }
  .mobile-toggle-btn {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 340px;
  height: 100vh;
  background: rgba(14, 8, 30, 0.98);
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(139, 92, 246, 0.3);
  z-index: 1002;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.7);
}

.mobile-drawer.open {
  right: 0;
}

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

.drawer-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

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

.drawer-link {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.drawer-link:hover, .drawer-link.active {
  color: #38bdf8;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   SECTION 1: HERO SECTION
   COLOR THEME: MIDNIGHT PURPLE (#0b051c)
   ========================================================================== */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 60px) 0 100px;
  background-color: #0b051c;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25);
  position: relative;
  overflow: hidden;
}

.hero-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ambient-glow-circle {
  display: none;
}

/* Hero Background Video & Cybernetic Overlay */
.hero-motion-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-motion-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.02);
  object-fit: cover;
  opacity: 0.95;
  filter: saturate(1.15) contrast(1.05) brightness(0.98);
  pointer-events: none;
  z-index: 1;
}

.hero-interactive-canvas-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

#heroInteractiveCanvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 22, 44, 0.8) 0%, rgba(8, 22, 44, 0.6) 42%, rgba(8, 22, 44, 0.18) 65%, rgba(8, 22, 44, 0.02) 82%, transparent 100%),
              linear-gradient(180deg, rgba(8, 22, 44, 0.35) 0%, transparent 20%, transparent 80%, rgba(8, 22, 44, 0.45) 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-center-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.hero-content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1060px;
  margin: 0 auto;
}

.hero-section .badge-tag {
  background: rgba(8, 100, 197, 0.18);
  border: 1px solid var(--brand-tech-blue);
  color: var(--brand-sky-blue);
  margin: 0 auto 24px;
}

.hero-section .badge-pulse-dot {
  background-color: var(--brand-leaf-green);
  box-shadow: 0 0 10px var(--brand-leaf-green);
}

.hero-title {
  font-size: clamp(1.85rem, 4.8vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 auto 24px;
  line-height: 1.18;
  color: #ffffff;
  text-align: center;
  max-width: 960px;
  position: relative;
  padding: 0 16px;
}

.hero-title-line {
  display: block;
}

.hero-title-sub {
  margin-top: 6px;
}

@media (max-width: 640px) {
  .hero-title {
    font-size: clamp(1.55rem, 6.4vw, 2.15rem);
    letter-spacing: -0.02em;
    padding: 0 12px;
  }
}

.hero-highlight-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: baseline;
}

.hero-dynamic-text {
  color: #38bdf8 !important;
  background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 45%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  position: relative;
  display: inline-block;
  min-height: 1.15em;
  line-height: 1.15;
  white-space: pre-wrap;
  word-break: keep-all;
  filter: drop-shadow(0 0 24px rgba(56, 189, 248, 0.85)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  transition: filter 0.3s ease;
  font-weight: 800;
}

.hero-typing-cursor {
  display: inline-block;
  width: 4px;
  height: 0.95em;
  background: #38bdf8;
  margin-left: 6px;
  vertical-align: -0.05em;
  border-radius: 3px;
  box-shadow: 0 0 12px #38bdf8, 0 0 26px rgba(56, 189, 248, 0.95);
  animation: cursorBlink 0.85s infinite ease-in-out;
}

.hero-typing-cursor.is-typing {
  animation: none;
  opacity: 1;
  box-shadow: 0 0 16px #38bdf8, 0 0 32px rgba(56, 189, 248, 1);
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-title .text-gradient {
  color: #fde047 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fef08a 25%, #fde047 60%, #f59e0b 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 20px rgba(251, 191, 36, 0.85)) !important;
}

.hero-description {
  font-size: 1.18rem;
  line-height: 1.78;
  color: #e2e8f0;
  margin: 0 auto 38px;
  max-width: 720px;
  text-align: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 46px;
}

.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 28px 36px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 1.95rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-plus {
  color: var(--brand-sky-blue);
  font-size: 1.4rem;
}

.stat-label {
  font-size: 0.8rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 24px 16px 0;
  }
  .hero-title {
    font-size: 2.3rem;
  }
  .hero-showcase-wrapper {
    margin-top: 36px;
  }
}

/* ==========================================================================
   SECTION 2: ABOUT US
   COLOR THEME: SOLID NAVY & TECHNOLOGY BLUE
   ========================================================================== */
#about {
  background: var(--brand-navy-dark);
  border-bottom: 1px solid var(--brand-tech-blue);
}

#about::before {
  display: none;
}

#about .badge-tag {
  background: rgba(8, 100, 197, 0.18);
  border: 1px solid var(--brand-tech-blue);
  color: var(--brand-sky-blue);
}

#about .text-gradient {
  color: var(--brand-sky-blue) !important;
  background: none !important;
  -webkit-text-fill-color: var(--brand-sky-blue) !important;
}

/* ==========================================================================
   ABOUT SECTION: NEXT-GEN EXECUTIVE BENTO & TABBED SHOWCASE
   ========================================================================== */
#about {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: var(--brand-navy-dark);
}

#about .text-gradient {
  color: var(--brand-sky-blue) !important;
  -webkit-text-fill-color: var(--brand-sky-blue) !important;
  background: none !important;
}

/* 1. Executive Hero Lead Card */
.about-hero-lead-card {
  background: rgba(6, 39, 91, 0.75);
  border: 1px solid var(--brand-tech-blue);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  padding: 28px 36px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

.about-hero-lead-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--brand-tech-blue);
}

.lead-quote-icon {
  font-size: 1.6rem;
  color: var(--brand-sky-blue);
  margin-bottom: 8px;
}

.lead-quote-text {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 500;
  line-height: 1.7;
  color: #f8fafc;
  margin-bottom: 20px;
}

.lead-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lead-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #93c5fd;
  font-weight: 600;
}

.lead-meta-item i {
  color: var(--brand-sky-blue);
}

/* 2. Main Showcase Grid (Visual Showcase + 5 Pillars Tabs) */
.about-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  align-items: stretch;
  margin-bottom: 44px;
}

/* Visual Column */
.about-visual-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.about-image-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--brand-tech-blue);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 30px rgba(8, 100, 197, 0.15);
  background: var(--brand-navy);
  height: 330px;
}

.about-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-image-card:hover .about-main-image {
  transform: scale(1.03);
}

.about-image-overlay-gradient {
  position: absolute;
  inset: 0;
  background: rgba(4, 28, 66, 0.65);
  pointer-events: none;
  z-index: 1;
}

.image-floating-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(6, 39, 91, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--brand-teal);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.78rem;
  color: var(--brand-teal);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.pulse-live-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-leaf-green);
  box-shadow: 0 0 10px var(--brand-leaf-green);
  animation: pulseLive 2s infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px var(--brand-leaf-green); }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.about-visual-column .about-experience-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  background: rgba(6, 39, 91, 0.94);
  border: 1px solid var(--brand-tech-blue);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 14px;
}

.about-visual-column .exp-years {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-sky-blue);
  font-family: var(--font-display);
}

.about-visual-column .exp-text {
  font-size: 0.8rem;
  line-height: 1.35;
  color: #f1f5f9;
  font-weight: 600;
}

/* Campus Micro-Highlights row below image */
.about-campus-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.highlight-box {
  background: rgba(6, 39, 91, 0.65);
  border: 1px solid var(--brand-tech-blue);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all var(--transition-fast);
}

.highlight-box:hover {
  background: rgba(8, 100, 197, 0.35);
  border-color: var(--brand-sky-blue);
  transform: translateY(-2px);
}

.highlight-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(8, 100, 197, 0.15);
  border: 1px solid var(--brand-tech-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-sky-blue);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.highlight-info strong {
  display: block;
  font-size: 0.82rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
}

.highlight-info span {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 2px;
}

/* Right Narrative Column (Tabbed Executive Showcase) */
.about-narrative-column {
  background: rgba(4, 28, 66, 0.85);
  border: 1px solid var(--brand-tech-blue);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* Pillar Switcher Tabs */
.about-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.about-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 9999px;
  padding: 7px 14px;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.about-tab-btn:hover {
  background: rgba(8, 100, 197, 0.25);
  border-color: var(--brand-sky-blue);
  color: #ffffff;
}

.about-tab-btn.active {
  background: var(--brand-tech-blue);
  border-color: var(--brand-sky-blue);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(8, 100, 197, 0.35);
}

.about-tab-btn .tab-num {
  font-size: 0.7rem;
  font-weight: 800;
  opacity: 0.85;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
}

/* Panels */
.about-tab-panels {
  min-height: 230px;
  margin-bottom: 20px;
}

.about-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.about-tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.panel-header {
  margin-bottom: 14px;
}

.panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.panel-title {
  font-size: 1.28rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.3;
}

.panel-lead {
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.65;
  color: #f1f5f9;
  margin-bottom: 10px;
}

.panel-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.panel-key-takeaways {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.takeaway-pill {
  font-size: 0.78rem;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.takeaway-pill i {
  color: #2dd4bf;
  font-size: 0.76rem;
}

/* Actions Row */
.about-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-toggle-all-btn {
  background: transparent;
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #7dd3fc;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.about-toggle-all-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #ffffff;
}

/* 3. Collapsible Bento Grid for All 5 Pillars */
.about-all-pillars-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
  animation: fadeInDown 0.4s ease forwards;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.bento-card {
  background: rgba(3, 26, 52, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all var(--transition-fast);
}

.bento-card:hover {
  background: rgba(6, 38, 74, 0.9);
  border-color: #38bdf8;
  transform: translateY(-3px);
}

.bento-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 8px;
}

.bento-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.bento-card p {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0;
}

/* 4. Bottom 4-Pillar Luxury Grid */
.about-bottom-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pillar-luxury-card {
  background: rgba(3, 26, 52, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.pillar-luxury-card:hover {
  background: rgba(6, 44, 88, 0.85);
  border-color: #38bdf8;
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.2);
}

.pillar-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 14px;
  transition: transform var(--transition-normal);
}

.pillar-luxury-card:hover .pillar-card-icon {
  transform: scale(1.1) rotate(5deg);
}

.pillar-card-content h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.pillar-card-content p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin-bottom: 14px;
}

.pillar-meta-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
}

@media (max-width: 1024px) {
  .about-showcase-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-bottom-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .about-bottom-pillars {
    grid-template-columns: 1fr;
  }
  .about-campus-highlights {
    grid-template-columns: 1fr;
  }
  .about-hero-lead-card {
    padding: 20px;
  }
}

/* ==========================================================================
   SECTION 3: SERVICES HUB
   COLOR THEME: EMERALD FOREST & NEON MINT
   ========================================================================== */
#services {
  background: var(--brand-navy);
  border-bottom: 1px solid var(--brand-teal);
}

#services::before {
  display: none;
}

#services .badge-tag {
  background: rgba(0, 168, 132, 0.18);
  border: 1px solid var(--brand-teal);
  color: var(--brand-teal);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 168, 132, 0.25);
  animation: servicesBadgeFloat 4s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#services .badge-tag::after {
  display: none;
}

#services .badge-tag i {
  animation: iconWiggle 4s ease-in-out infinite;
  color: var(--brand-teal);
}

@keyframes servicesBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes iconWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-8deg) scale(1.1); }
  75% { transform: rotate(8deg) scale(1.1); }
}

#services .text-gradient {
  color: var(--brand-teal) !important;
  -webkit-text-fill-color: var(--brand-teal) !important;
  background: none !important;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  perspective: 1200px;
}

/* 3D Flip Card Architecture — In-flow Front Face with Hover & Click Flip */
.service-card.card,
.service-card {
  position: relative !important;
  display: flex !important;
  min-height: 520px !important;
  height: 100% !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  text-align: left !important;
  align-items: stretch !important;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transform-style: preserve-3d !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  perspective: 1200px !important;
}

/* Service Card: Forward-facing, upright, no 3D mirror flip */
.service-card {
  perspective: none !important;
  transform-style: flat !important;
  position: relative !important;
}

.service-card .face {
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Front Face is shown first: Clean Executive Presentation */
.service-card .face.front {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  background: rgba(6, 39, 91, 0.85);
  border: 1px solid var(--brand-teal);
  padding: 38px 28px;
  transform: rotateY(0deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.7);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.service-card:hover .face.front {
  border-color: var(--brand-teal);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 168, 132, 0.35);
}

/* Front Face Inner Content */
.service-front-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

.service-front-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
}

.service-front-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0;
  max-width: 310px;
}

/* Back Face: Revealed on 'READ MORE' Click (Technical Breakdown) */
.service-card .face.back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  background: rgba(4, 28, 66, 0.95);
  border: 1px solid var(--brand-teal);
  box-shadow: 0 0 35px rgba(0, 168, 132, 0.35);
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s ease;
  padding: 28px 24px;
  z-index: 1;
}

.service-card.card.is-flipped .face.front {
  z-index: 1;
}

.service-card.card.is-flipped .face.back {
  z-index: 2;
}

.service-back-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-back-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.service-back-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-flip-back {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-flip-back:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: var(--brand-teal);
}

.btn-consult-action {
  background: var(--brand-orange);
  border: none;
  color: #ffffff;
  border-radius: 9999px;
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(255, 120, 8, 0.4);
}

.btn-consult-action:hover {
  transform: scale(1.04);
  background: #e06800;
  box-shadow: 0 4px 18px rgba(255, 120, 8, 0.6);
}

/* READ MORE Button from user specification */
.btn-read-more {
  border: 1px solid var(--brand-teal);
  background: var(--brand-teal);
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 11px 28px;
  border-radius: 9999px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  box-shadow: 0 0 22px rgba(0, 168, 132, 0.5);
}

.btn-read-more:hover,
.btn-read-more:focus {
  background: #008f70;
  color: #ffffff;
  box-shadow: 0 0 30px rgba(0, 168, 132, 0.8);
  transform: scale(1.06);
}

.service-card-top {
  margin-bottom: 18px;
  position: relative;
  z-index: 3;
}

.service-card-top::after {
  display: none;
}

/* Floating Breathing Icon Box with Micro-Motion */
.service-icon-box {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: rgba(0, 168, 132, 0.18);
  border: 1px solid var(--brand-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  color: var(--brand-teal);
  margin-bottom: 24px;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  animation: serviceIconBreathe 3.6s ease-in-out infinite;
}

.service-icon-box::after {
  display: none;
}

@keyframes serviceIconBreathe {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 0 12px rgba(0, 168, 132, 0.2);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 168, 132, 0.38);
  }
}

.service-card:hover .service-icon-box {
  animation: none;
  background: var(--brand-teal);
  color: #ffffff;
  transform: scale(1.12) rotate(6deg) translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 168, 132, 0.55);
  border-color: var(--brand-leaf-green);
}

.service-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
  transition: all 0.3s ease;
}

.service-card:hover .service-title {
  color: var(--brand-teal);
  transform: translateX(4px);
}

.service-desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 20px;
}

.service-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  padding: 0;
}

.service-feature-item {
  font-size: 0.86rem;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.service-card:hover .service-feature-item:nth-child(1) {
  transform: translateX(8px);
  transition-delay: 0.03s;
  color: #ffffff;
}

.service-card:hover .service-feature-item:nth-child(2) {
  transform: translateX(8px);
  transition-delay: 0.07s;
  color: #ffffff;
}

.service-card:hover .service-feature-item:nth-child(3) {
  transform: translateX(8px);
  transition-delay: 0.11s;
  color: #ffffff;
}

.service-feature-item i {
  color: var(--brand-leaf-green);
  font-size: 0.82rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-feature-item i {
  filter: drop-shadow(0 0 10px var(--brand-leaf-green));
  transform: scale(1.25) rotate(8deg);
}

.service-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 3;
}

.tech-tag {
  font-size: 0.75rem;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 168, 132, 0.25);
  border-radius: var(--radius-sm);
  color: #a7f3d0;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.tech-tag:hover {
  background: rgba(0, 168, 132, 0.28);
  border-color: var(--brand-leaf-green);
  color: #ffffff;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 168, 132, 0.4);
}

/* Active Category Filter Pulse */
.services-filter-nav .filter-btn {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.services-filter-nav .filter-btn:not(.active):hover {
  transform: translateY(-2px);
  border-color: var(--brand-teal);
  background: rgba(0, 168, 132, 0.14);
  box-shadow: 0 4px 18px rgba(0, 168, 132, 0.25);
  color: #ffffff;
}

.services-filter-nav .filter-btn.active {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #ffffff;
  box-shadow: 0 0 25px rgba(0, 168, 132, 0.6);
  transform: translateY(-2px);
}

@keyframes activeFilterPulse {
  0%, 100% {
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.45), 0 0 30px rgba(6, 182, 212, 0.2);
  }
  50% {
    box-shadow: 0 0 34px rgba(16, 185, 129, 0.85), 0 0 50px rgba(6, 182, 212, 0.4);
  }
}

/* ==========================================================================
   REDUCED MOTION: WHAT WE DELIVER (#services)
   Honouring reduced motion preference via .reduce-motion class & #animation-checkbox
   ========================================================================== */

/* Toggle Switch Pill */
.services-accessibility-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
}

.motion-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 8px 20px;
  border-radius: 9999px;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
  font-size: 0.85rem;
  color: #0f172a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.motion-toggle-pill:hover {
  background: #f8fafc;
  border-color: #0864C5;
  box-shadow: 0 4px 16px rgba(8, 100, 197, 0.15);
  color: #0864C5;
}

.animation-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle-switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  transition: background 0.28s ease, box-shadow 0.28s ease;
  display: inline-block;
  flex-shrink: 0;
}

.toggle-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.animation-toggle-input:checked + .toggle-switch-track {
  background: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.animation-toggle-input:checked + .toggle-switch-track .toggle-switch-thumb {
  transform: translateX(16px);
  background: #ffffff;
}

.toggle-label-text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Reduced Motion Class Rules (triggered by #animation-checkbox or system preference) */
.reduce-motion .service-card.card,
.reduce-motion .card {
  animation: none !important;
  transform: none !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  will-change: auto !important;
}

.reduce-motion .service-card.card:hover,
.reduce-motion .service-card.card:focus,
.reduce-motion .service-card.card:focus-within {
  transform: none !important;
}

.reduce-motion .service-card .face.front {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.45s ease;
  transform: none !important;
}

.reduce-motion .service-card.is-flipped .face.front {
  opacity: 0;
  pointer-events: none;
}

.reduce-motion .service-card .face.back {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  transform: none !important;
}

.reduce-motion .service-card.is-flipped .face.back {
  opacity: 1;
  pointer-events: all;
  transform: none !important;
}

.reduce-motion .service-card::before,
.reduce-motion .service-card::after,
.reduce-motion .service-card-top::after {
  display: none !important;
  animation: none !important;
}

.reduce-motion .service-icon-box {
  animation: none !important;
  transform: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.reduce-motion .service-card:hover .service-icon-box {
  animation: none !important;
  transform: none !important;
}

.reduce-motion .service-icon-box::after,
.reduce-motion .service-card:hover .service-icon-box::after {
  animation: none !important;
  display: none !important;
}

.reduce-motion .service-card:hover .service-icon-box i {
  transform: none !important;
}

.reduce-motion .service-card:hover .service-title {
  transform: none !important;
}

.reduce-motion .service-feature-item {
  transition: color 0.15s ease !important;
}

.reduce-motion .service-card:hover .service-feature-item:nth-child(1),
.reduce-motion .service-card:hover .service-feature-item:nth-child(2),
.reduce-motion .service-card:hover .service-feature-item:nth-child(3) {
  transform: none !important;
}

.reduce-motion .service-feature-item i,
.reduce-motion .service-card:hover .service-feature-item i {
  transform: none !important;
  filter: none !important;
}

.reduce-motion .tech-tag {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.reduce-motion .tech-tag:hover {
  transform: none !important;
}

.reduce-motion .badge-tag {
  animation: none !important;
  transform: none !important;
}

.reduce-motion .badge-tag::after {
  animation: none !important;
  display: none !important;
}

.reduce-motion .badge-tag i {
  animation: none !important;
  transform: none !important;
}

.reduce-motion .text-gradient {
  animation: none !important;
  background-position: 0% 50% !important;
  filter: none !important;
}

.reduce-motion .section-motion-bg .motion-img-pan {
  animation: none !important;
  transform: none !important;
}

.reduce-motion .filter-btn.active {
  animation: none !important;
  transform: none !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4) !important;
}

.reduce-motion .filter-btn:not(.active):hover {
  transform: none !important;
}

/* @media (prefers-reduced-motion: reduce) OS-level fallback */
@media (prefers-reduced-motion: reduce) {
  #services .badge-tag {
    animation: none !important;
    transform: none !important;
  }

  #services .badge-tag::after {
    animation: none !important;
    display: none !important;
  }

  #services .badge-tag i {
    animation: none !important;
    transform: none !important;
  }

  #services .text-gradient {
    animation: none !important;
    background-position: 0% 50% !important;
    filter: none !important;
  }

  #services .section-motion-bg .motion-img-pan {
    animation: none !important;
    transform: none !important;
  }

  .services-filter-nav .filter-btn {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
  }

  .services-filter-nav .filter-btn:not(.active):hover {
    transform: none !important;
  }

  .services-filter-nav .filter-btn.active {
    animation: none !important;
    transform: none !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.4) !important;
  }

  .service-card {
    animation: none !important;
    transform: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    will-change: auto !important;
  }

  .service-card:hover {
    transform: none !important;
  }

  .service-card::before,
  .service-card::after {
    display: none !important;
  }

  .service-card-top::after {
    animation: none !important;
    display: none !important;
  }

  .service-icon-box {
    animation: none !important;
    transform: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  }

  .service-card:hover .service-icon-box {
    animation: none !important;
    transform: none !important;
  }

  .service-icon-box::after,
  .service-card:hover .service-icon-box::after {
    animation: none !important;
    display: none !important;
  }

  .service-card:hover .service-icon-box i {
    transform: none !important;
  }

  .service-card:hover .service-title {
    transform: none !important;
  }

  .service-feature-item {
    transition: color 0.15s ease !important;
  }

  .service-card:hover .service-feature-item:nth-child(1),
  .service-card:hover .service-feature-item:nth-child(2),
  .service-card:hover .service-feature-item:nth-child(3) {
    transform: none !important;
  }

  .service-feature-item i,
  .service-card:hover .service-feature-item i {
    transform: none !important;
    filter: none !important;
  }

  .tech-tag {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  }

  .tech-tag:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   SECTION 4: TECH STACK MATRIX
   COLOR THEME: SOLID NAVY & SKY BLUE
   ========================================================================== */
#tech {
  background: var(--brand-navy-dark);
  border-bottom: 1px solid var(--brand-tech-blue);
}

#tech::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: transparent;
  pointer-events: none;
}

#tech .badge-tag {
  background: rgba(8, 100, 197, 0.18);
  border: 1px solid var(--brand-tech-blue);
  color: var(--brand-sky-blue);
}

#tech .text-gradient {
  color: var(--brand-sky-blue) !important;
  background: none !important;
  -webkit-text-fill-color: var(--brand-sky-blue) !important;
}

/* ==========================================================================
   INTERACTIVE INFINITE TECH MARQUEE MOTION SYSTEM
   ========================================================================== */
.tech-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 30px 0 45px;
}

.tech-marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: techMarqueeSlide 30s linear infinite;
  will-change: transform;
}

.tech-marquee-track:hover {
  animation-play-state: paused;
}

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

/* Individual Tech Card Floating Wave Motion */
@keyframes techCardWave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Tech Matrix Grid - Responsive Horizontal Left to Right Layout */
.tech-matrix-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 100%;
  margin: 36px auto 0;
  align-items: stretch;
}

.tech-matrix-grid .tech-item-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 30px 14px !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  animation: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.tech-matrix-grid .tech-item-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 16px 36px rgba(8, 100, 197, 0.16) !important;
  border-color: #0864C5 !important;
}

.tech-matrix-grid .tech-item-card .tech-icon {
  font-size: 2.4rem !important;
  color: #0284c7 !important;
  margin-bottom: 14px !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.tech-matrix-grid .tech-item-card:hover .tech-icon {
  color: #0864C5 !important;
  transform: scale(1.16) rotate(4deg) !important;
}

.tech-matrix-grid .tech-item-card .tech-name {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
  line-height: 1.25 !important;
  transition: color 0.2s ease !important;
}

.tech-matrix-grid .tech-item-card:hover .tech-name {
  color: #0864C5 !important;
}

.tech-matrix-grid .tech-item-card .tech-category {
  font-size: 0.82rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

@media (max-width: 1100px) {
  .tech-matrix-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 640px) {
  .tech-matrix-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .tech-matrix-grid .tech-item-card {
    padding: 22px 10px !important;
  }
}

@media (max-width: 400px) {
  .tech-matrix-grid {
    grid-template-columns: 1fr !important;
  }
}

.tech-item-card {
  width: 210px;
  min-width: 210px;
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: rgba(14, 32, 56, 0.82);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  animation: techCardWave 5s ease-in-out infinite;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.tech-item-card:nth-child(even) {
  animation-delay: 0.8s;
  animation-duration: 4.8s;
}

.tech-item-card:nth-child(3n) {
  animation-delay: 1.6s;
  animation-duration: 5.4s;
}

.tech-item-card:nth-child(4n) {
  animation-delay: 2.4s;
  animation-duration: 4.5s;
}

.tech-item-card:hover {
  border-color: #38bdf8;
  transform: translateY(-12px) scale(1.08) !important;
  background: rgba(18, 48, 86, 0.98);
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.6), 
    0 0 35px rgba(56, 189, 248, 0.5),
    inset 0 0 15px rgba(56, 189, 248, 0.2);
  z-index: 10;
}

.tech-icon-glow {
  display: none !important;
}

.tech-icon {
  font-size: 2.5rem;
  color: #38bdf8;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease;
  position: relative;
  z-index: 2;
}

.tech-item-card:hover .tech-icon {
  transform: scale(1.22) rotate(6deg);
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.9));
}

.tech-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}

.tech-item-card:hover .tech-name {
  color: #38bdf8;
}

.tech-category {
  font-size: 0.76rem;
  color: #94a3b8;
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   SECTION 5: PROJECTS & CASE STUDIES
   COLOR THEME: SOLID NAVY & TECHNOLOGY BLUE
   ========================================================================== */
#projects {
  background: var(--brand-navy);
  border-bottom: 1px solid var(--brand-tech-blue);
}

#projects::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 30%;
  width: 550px;
  height: 550px;
  background: transparent;
  pointer-events: none;
}

#projects .badge-tag {
  background: rgba(8, 100, 197, 0.18);
  border: 1px solid var(--brand-tech-blue);
  color: var(--brand-sky-blue);
}

#projects .text-gradient {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

.services-filter-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.filter-btn {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--brand-tech-blue);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  background: rgba(8, 100, 197, 0.25);
  border-color: var(--brand-sky-blue);
  color: #ffffff;
}

.filter-btn.active {
  background: var(--brand-tech-blue);
  color: #ffffff;
  border-color: var(--brand-sky-blue);
  box-shadow: 0 4px 18px rgba(8, 100, 197, 0.45);
}

#services .filter-btn {
  border-color: var(--brand-teal);
  color: #ffffff;
  background: rgba(0, 168, 132, 0.12);
}

#services .filter-btn:hover {
  background: rgba(0, 168, 132, 0.25);
  border-color: var(--brand-leaf-green);
  color: #ffffff;
}

#services .filter-btn.active {
  background: var(--brand-teal);
  color: #ffffff;
  border-color: var(--brand-teal);
  box-shadow: 0 4px 18px rgba(0, 168, 132, 0.45);
}

/* ==========================================================================
   CHECKERBOARD MOSAIC GRID (PROJECTS & CASE STUDIES SHOWCASE)
   Alternating full-bleed image tiles and clean white text cards with
   attractive solid brand Technology Blue (#0864C5) border (No Gradients)
   ========================================================================== */
.projects-mosaic-wrapper {
  position: relative;
  padding: 0;
  border: 3.5px solid var(--brand-tech-blue);
  border-radius: 28px;
  background: transparent;
  box-shadow: 
    0 0 35px rgba(8, 100, 197, 0.45),
    0 25px 60px -10px rgba(0, 0, 0, 0.85);
  margin-top: 24px;
  transition: all 0.35s ease;
}

.projects-mosaic-wrapper:hover {
  border-color: var(--brand-sky-blue);
  box-shadow: 
    0 0 45px rgba(7, 155, 226, 0.6),
    0 30px 70px -10px rgba(0, 0, 0, 0.9);
}

.projects-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
}

.project-tile {
  min-height: 380px;
  position: relative;
  overflow: hidden;
  display: flex;
  transition: all 0.35s ease;
}

/* 1. Full-Bleed Image Tiles */
.mosaic-tile-img {
  background: #0b0f19;
  position: relative;
  cursor: pointer;
}

.mosaic-tile-img .mosaic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  display: block;
}

.mosaic-tile-img:hover .mosaic-img {
  transform: scale(1.08);
}

.mosaic-tile-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid transparent;
  transition: border-color 0.4s ease;
  pointer-events: none;
}

.mosaic-tile-img:hover::after {
  border-color: rgba(8, 100, 197, 0.6);
}

.mosaic-category-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(6, 39, 91, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--brand-tech-blue);
  color: var(--brand-sky-blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* 2. White Text Cards (Matching User Reference Image) */
.mosaic-tile-text {
  background: #ffffff !important;
  color: #111827;
  padding: 44px 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #e2e8f0;
  z-index: 1;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.mosaic-tile-text:hover {
  background: #fafcff !important;
  box-shadow: inset 0 0 0 1.5px rgba(8, 100, 197, 0.35);
}

.mosaic-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a !important;
  margin-bottom: 14px;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.mosaic-desc {
  font-size: 0.92rem;
  line-height: 1.68;
  color: #475569 !important;
  margin-bottom: 16px;
  max-width: 320px;
}

.mosaic-meta-info {
  margin-bottom: 24px;
}

.mosaic-impact {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-tech-blue);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(8, 100, 197, 0.08);
}

.mosaic-btn {
  background: transparent !important;
  border: 1.5px solid var(--brand-tech-blue) !important;
  color: var(--brand-tech-blue) !important;
  padding: 11px 32px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.mosaic-btn:hover {
  background: var(--brand-tech-blue) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(8, 100, 197, 0.35);
}

/* Fallback / legacy support for standard project cards if referenced */
.project-card:not(.project-tile) {
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(54, 7, 48, 0.78);
  border: 1px solid rgba(244, 114, 182, 0.25);
  backdrop-filter: blur(14px);
  transition: all var(--transition-normal);
}

/* ==========================================================================
   SECTION 6: WHY CHOOSE US
   COLOR THEME: SOLID NAVY & LEAF GREEN
   ========================================================================== */
#why-us {
  background: var(--brand-navy-dark);
  border-bottom: 1px solid var(--brand-tech-blue);
}

#why-us::before {
  content: '';
  position: absolute;
  bottom: -10%;
  left: 10%;
  width: 500px;
  height: 500px;
  background: transparent;
  pointer-events: none;
}

#why-us .badge-tag {
  background: rgba(85, 213, 46, 0.15);
  border: 1px solid var(--brand-leaf-green);
  color: var(--brand-leaf-green);
}

#why-us .text-gradient {
  color: var(--brand-leaf-green) !important;
  background: none !important;
  -webkit-text-fill-color: var(--brand-leaf-green) !important;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why-card {
  background: rgba(6, 39, 91, 0.75);
  border: 1px solid var(--brand-tech-blue);
  border-radius: var(--radius-lg);
  padding: 34px 26px;
  backdrop-filter: blur(14px);
  transition: all var(--transition-normal);
}

.why-card:hover {
  background: rgba(8, 100, 197, 0.25);
  border-color: var(--brand-sky-blue);
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(8, 100, 197, 0.25);
}

.why-number {
  font-size: 2.3rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--brand-leaf-green) !important;
  background: none !important;
  -webkit-text-fill-color: var(--brand-leaf-green) !important;
  margin-bottom: 14px;
}

.why-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.why-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #cbd5e1;
}

/* ==========================================================================
   SECTION 7: TESTIMONIALS
   COLOR THEME: SOLID NAVY & MAGENTA PINK
   ========================================================================== */
#testimonials {
  background: var(--brand-navy);
  border-bottom: 1px solid var(--brand-tech-blue);
}

#testimonials::before {
  content: '';
  position: absolute;
  top: 30%;
  right: 15%;
  width: 500px;
  height: 500px;
  background: transparent;
  pointer-events: none;
}

#testimonials .badge-tag {
  background: rgba(215, 17, 157, 0.18);
  border: 1px solid var(--brand-magenta);
  color: var(--brand-magenta);
}

#testimonials .text-gradient {
  color: var(--brand-magenta) !important;
  background: none !important;
  -webkit-text-fill-color: var(--brand-magenta) !important;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.testimonial-card {
  background: rgba(6, 39, 91, 0.85);
  border: 1px solid var(--brand-magenta);
  border-radius: var(--radius-lg);
  padding: 34px;
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
}

.testimonial-card:hover {
  background: rgba(8, 100, 197, 0.2);
  border-color: var(--brand-sky-blue);
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(215, 17, 157, 0.25);
}

.testimonial-stars {
  color: #facc15;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.testimonial-quote {
  font-size: 0.98rem;
  line-height: 1.75;
  color: #fdf2e9;
  font-style: italic;
  margin-bottom: 24px;
}

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

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
}

.author-info strong {
  display: block;
  font-size: 0.94rem;
  color: #ffffff;
}

.author-info span {
  font-size: 0.8rem;
  color: #fed7aa;
}

/* ==========================================================================
   SECTION 8: CALL TO ACTION BANNER
   ========================================================================== */
.cta-section {
  background: var(--brand-navy-dark);
  padding: 80px 0;
  border-bottom: 1px solid var(--brand-tech-blue);
}

.cta-banner-wrapper {
  background: var(--brand-tech-blue) !important;
  border: 2px solid var(--brand-sky-blue);
  border-radius: var(--radius-lg);
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(8, 100, 197, 0.4);
}

.cta-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cta-banner-text h2 {
  font-size: 2.3rem;
  margin-bottom: 14px;
  color: #ffffff;
}

.cta-banner-text p {
  font-size: 1.15rem;
  color: #f8fafc;
  max-width: 620px;
}

/* ==========================================================================
   SECTION 9: CONTACT & LOCATION
   COLOR THEME: SOLID NAVY & VIBRANT ORANGE
   ========================================================================== */
#contact {
  background: var(--brand-navy);
  border-bottom: 1px solid var(--brand-tech-blue);
}

#contact::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 10%;
  width: 500px;
  height: 500px;
  background: transparent;
  pointer-events: none;
}

#contact .badge-tag {
  background: rgba(255, 120, 8, 0.18);
  border: 1px solid var(--brand-orange);
  color: var(--brand-orange);
}

#contact .text-gradient {
  color: var(--brand-orange) !important;
  background: none !important;
  -webkit-text-fill-color: var(--brand-orange) !important;
}

/* ==========================================================================
   ENHANCED CONTACT SHOWCASE - NEXT-GEN EXECUTIVE THEME
   ========================================================================== */
.contact-section-wrapper {
  position: relative;
  background: var(--brand-navy-dark);
  padding: 80px 0 100px;
  overflow: hidden;
}

.contact-section-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: none;
  pointer-events: none;
  opacity: 0;
}

/* Glowing Ambient Orbs */
.contact-glow-orb-1, .contact-glow-orb-2 {
  display: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 44px;
  align-items: start;
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Luxury Contact Info Cards */
.lux-contact-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.lux-contact-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(6, 39, 91, 0.75);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.lux-contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  transition: background 0.3s ease;
}

.lux-contact-card:hover {
  transform: translateY(-3px) translateX(4px);
  background: rgba(8, 100, 197, 0.25);
  border-color: var(--brand-sky-blue);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 25px rgba(8, 100, 197, 0.2);
}

.lux-contact-card:hover::before {
  background: var(--brand-sky-blue);
}

/* Featured WhatsApp VIP Card */
.lux-contact-card.whatsapp-vip-card {
  background: rgba(6, 39, 91, 0.9);
  border: 1px solid #25D366;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(37, 211, 102, 0.2);
  animation: vipGlowPulse 3s ease-in-out infinite;
}

@keyframes vipGlowPulse {
  0% {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 16px rgba(37, 211, 102, 0.25);
    border-color: rgba(37, 211, 102, 0.45);
  }
  50% {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 28px rgba(37, 211, 102, 0.5);
    border-color: rgba(37, 211, 102, 0.85);
  }
  100% {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 16px rgba(37, 211, 102, 0.25);
    border-color: rgba(37, 211, 102, 0.45);
  }
}

.lux-contact-card.whatsapp-vip-card:hover {
  border-color: #25D366;
  background: rgba(37, 211, 102, 0.15);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 30px rgba(37, 211, 102, 0.45);
}

.lux-contact-card.whatsapp-vip-card::before {
  background: #25D366 !important;
}

/* Card Icons */
.lux-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lux-contact-card:hover .lux-card-icon {
  transform: scale(1.1) rotate(-3deg);
}

.lux-card-body {
  flex: 1;
  min-width: 0;
}

.lux-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 3px;
}

.lux-card-value {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  display: block;
  line-height: 1.4;
  word-break: break-word;
}

.lux-card-sub {
  font-size: 0.83rem;
  color: #94a3b8;
  margin-top: 2px;
  display: block;
}

.lux-card-action-btn {
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: all 0.25s ease;
  white-space: nowrap;
}

/* NDA Security Trust Box */
.lux-nda-box {
  margin-top: 22px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

/* Right Side: Ultra Proposal Form Panel */
.lux-proposal-panel {
  position: relative;
  background: rgba(6, 39, 91, 0.95);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 24px;
  padding: 38px 36px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(8, 100, 197, 0.18);
  overflow: hidden;
}

.lux-proposal-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-orange);
}

.panel-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 120, 8, 0.16);
  color: var(--brand-orange);
  border: 1px solid var(--brand-orange);
  margin-bottom: 12px;
}

.lux-input-wrap {
  position: relative;
}

.lux-input-wrap i.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #5eead4;
  font-size: 0.95rem;
  pointer-events: none;
  transition: color 0.25s ease;
  z-index: 2;
}

.lux-input-wrap.textarea-wrap i.input-icon {
  top: 18px;
  transform: none;
}

.lux-input-field {
  width: 100%;
  padding: 13px 16px 13px 44px;
  background: rgba(3, 14, 20, 0.75);
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 12px;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lux-input-field:focus {
  outline: none;
  background: rgba(6, 24, 34, 0.95);
  border-color: #2dd4bf;
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.4);
}

.lux-input-field::placeholder {
  color: #64748b;
  font-size: 0.9rem;
}

/* Quick Requirement Scope Chips */
.scope-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}

.scope-chip-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: 9999px;
  padding: 5px 12px;
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.scope-chip-btn:hover, .scope-chip-btn.active {
  background: rgba(20, 184, 166, 0.22);
  border-color: #2dd4bf;
  color: #5eead4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

/* Interactive Map & Global Pods Showcase */
.campus-map-section {
  margin-top: 60px;
  background: rgba(8, 28, 38, 0.72);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 2;
}

.campus-map-header {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(45, 212, 191, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(5, 20, 28, 0.85);
}

/* Hero Trust Stats Row */
.contact-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.hero-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 28, 38, 0.72);
  border: 1px solid rgba(45, 212, 191, 0.3);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.84rem;
  color: #e2e8f0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.hero-stat-chip:hover {
  border-color: #2dd4bf;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.25);
}

.hero-stat-chip strong {
  color: #ffffff;
  font-weight: 700;
}

/* Global Pods Row with Live World Clocks */
.global-pods-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 22px 32px;
  background: rgba(3, 13, 18, 0.85);
  border-bottom: 1px solid rgba(45, 212, 191, 0.18);
}

@media (max-width: 960px) {
  .global-pods-row {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

.global-pod-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.global-pod-item:hover {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(45, 212, 191, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pod-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.pod-info {
  flex: 1;
  min-width: 0;
}

.pod-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.pod-info strong {
  display: block;
  font-size: 0.94rem;
  color: #ffffff;
  font-weight: 700;
}

.pod-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.pod-info > span {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
  margin-bottom: 6px;
}

.pod-clock {
  font-size: 0.76rem;
  color: #5eead4;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pod-clock-val {
  color: #ffffff;
  font-weight: 700;
}

/* Map Container & Floating Campus Card */
.map-embed-container {
  height: 420px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #0f172a;
}

.map-embed-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: contrast(105%) brightness(92%) saturate(90%);
}

.map-floating-card {
  position: absolute;
  top: 20px;
  left: 20px;
  max-width: 360px;
  padding: 18px 22px;
  background: rgba(6, 20, 28, 0.92);
  border: 1px solid rgba(45, 212, 191, 0.45);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(20, 184, 166, 0.18);
  z-index: 10;
  pointer-events: auto;
}

.map-floating-card h4 {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 8px 0 4px;
}

.map-floating-card p {
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 14px;
}

.floating-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2dd4bf;
  background: rgba(20, 184, 166, 0.16);
  border: 1px solid rgba(45, 212, 191, 0.35);
  padding: 3px 9px;
  border-radius: 6px;
}

.floating-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.floating-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(45, 212, 191, 0.35);
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.floating-action-btn:hover {
  background: rgba(20, 184, 166, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

.floating-action-btn.primary {
  background: #14b8a6;
  color: #031c17;
  border-color: #2dd4bf;
  font-weight: 800;
}

.floating-action-btn.primary:hover {
  background: #2dd4bf;
  color: #031c17;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.4);
}

@media (max-width: 640px) {
  .map-floating-card {
    position: static;
    max-width: 100%;
    margin: 16px;
    border-radius: 12px;
  }
}

/* Custom Pulse Marker Pin for Dark Map */
.custom-map-marker-pin {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.marker-center-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border: 2px solid #ffffff;
}

.marker-pulse-ring {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #2dd4bf;
  animation: mapMarkerPulse 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes mapMarkerPulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* Dark Theme Filter for OpenStreetMap Tiles */
#campusMapLeaflet .leaflet-tile-pane {
  filter: brightness(0.65) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

/* Leaflet Dark Popup & Controls */
#campusMapLeaflet .leaflet-popup-content-wrapper {
  background: rgba(8, 28, 38, 0.96) !important;
  border: 1px solid rgba(45, 212, 191, 0.45);
  border-radius: 14px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
}

#campusMapLeaflet .leaflet-popup-tip {
  background: rgba(8, 28, 38, 0.96) !important;
  border: 1px solid rgba(45, 212, 191, 0.45);
}

#campusMapLeaflet .leaflet-popup-content {
  margin: 14px 18px !important;
  line-height: 1.5;
}

#campusMapLeaflet .leaflet-control-zoom {
  border: 1px solid rgba(45, 212, 191, 0.35) !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

#campusMapLeaflet .leaflet-control-zoom a {
  background: rgba(8, 28, 38, 0.9) !important;
  color: #5eead4 !important;
  border-bottom: 1px solid rgba(45, 212, 191, 0.2) !important;
}

#campusMapLeaflet .leaflet-control-zoom a:hover {
  background: rgba(20, 184, 166, 0.3) !important;
  color: #ffffff !important;
}

#campusMapLeaflet .leaflet-control-attribution {
  background: rgba(6, 20, 28, 0.8) !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
}

#campusMapLeaflet .leaflet-control-attribution a {
  color: #5eead4 !important;
}

/* ==========================================================================
   ENGAGEMENT PROTOCOL: WHAT TO EXPECT IN 24 HOURS
   ========================================================================== */
.protocol-section {
  margin-top: 70px;
  position: relative;
  z-index: 2;
}

.protocol-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}

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

.protocol-card {
  position: relative;
  background: rgba(6, 39, 91, 0.85);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 20px;
  padding: 32px 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.protocol-card::before {
  display: none;
}

.protocol-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-sky-blue);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(8, 100, 197, 0.2);
}

.protocol-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.protocol-step-num {
  font-size: 2.2rem;
  font-weight: 900;
  font-family: var(--font-display);
  color: var(--brand-sky-blue) !important;
  -webkit-text-fill-color: var(--brand-sky-blue) !important;
  background: none !important;
  line-height: 1;
  opacity: 0.9;
}

.protocol-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.protocol-time-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-teal);
  margin-bottom: 8px;
}

.protocol-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
  line-height: 1.35;
}

.protocol-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   EXECUTIVE FAQ ACCORDION
   ========================================================================== */
.contact-faq-section {
  margin-top: 70px;
  position: relative;
  z-index: 2;
}

.faq-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}

.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-card {
  background: rgba(6, 39, 91, 0.7);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-card:hover {
  border-color: var(--brand-sky-blue);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.faq-card.open {
  border-color: var(--brand-sky-blue);
  background: rgba(8, 100, 197, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(8, 100, 197, 0.15);
}

.faq-trigger {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.25s ease;
}

.faq-trigger:hover {
  color: var(--brand-sky-blue);
}

.faq-question-text {
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-question-text i {
  color: var(--brand-sky-blue);
  font-size: 1rem;
}

.faq-chevron {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(8, 100, 197, 0.15);
  border: 1px solid var(--brand-tech-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-sky-blue);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.faq-card.open .faq-chevron {
  transform: rotate(180deg);
  background: var(--brand-tech-blue);
  color: #ffffff;
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer-inner {
  padding: 0 24px 22px 52px;
  color: #cbd5e1;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ==========================================================================
   FAST-TRACK WHATSAPP VIP BANNER (Above Footer)
   ========================================================================== */
.contact-quick-wa-banner {
  margin-top: 60px;
  background: rgba(6, 39, 91, 0.95);
  border: 2px solid #25D366;
  border-radius: 20px;
  padding: 28px 36px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(37, 211, 102, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.contact-quick-wa-banner::before {
  display: none;
}

.wa-banner-text {
  display: flex;
  align-items: center;
  gap: 18px;
}

.wa-banner-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #25D366;
  color: #042914;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
  flex-shrink: 0;
}

.wa-banner-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.wa-banner-sub {
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
  font-size: 0.94rem !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.wa-banner-sub strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
}

.wa-banner-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: #25D366;
  color: #042914;
  font-weight: 800;
  font-size: 0.98rem;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.wa-banner-cta-btn:hover {
  background: #34d399;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.6);
  color: #042914;
}

/* ==========================================================================
   UNIVERSAL FORM & CONTACT STYLING (Inputs, Rows, Groups, Labels)
   ========================================================================== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  width: 100%;
}

.form-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 4px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
  background: rgba(8, 28, 38, 0.78);
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 12px;
  padding: 13px 16px;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #2dd4bf;
  background: rgba(10, 36, 50, 0.96);
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.38);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #64748b;
  font-size: 0.9rem;
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.form-select {
  cursor: pointer;
  appearance: menulist;
}

/* Contact Info Cards & Map Wrapper (Home & Subpages) */
.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-card-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(8, 28, 38, 0.65);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.info-card-item:hover {
  background: rgba(12, 38, 52, 0.9);
  border-color: rgba(45, 212, 191, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.info-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.18);
  border: 1px solid rgba(45, 212, 191, 0.35);
  color: #2dd4bf;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.info-text-group h4 {
  font-size: 0.88rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}

.info-text-group p {
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.45;
}

.info-text-group a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.info-text-group a:hover {
  color: #2dd4bf;
}

.social-links-row {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.25);
  color: #5eead4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.social-btn:hover {
  background: #14b8a6;
  color: #042914;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
}

.map-embed-wrapper {
  margin-top: 50px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  height: 400px;
  background: #061720;
}

.map-embed-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: contrast(105%) brightness(92%);
}

.form-feedback {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 0.9rem;
  display: none;
}

.form-feedback.success {
  display: block;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
}

.form-feedback.error {
  display: block;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #f87171;
}

.star-rating-selector {
  display: flex;
  gap: 8px;
  font-size: 1.35rem;
  color: #fbbf24;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}

.star-rating-selector i {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.star-rating-selector i:hover {
  transform: scale(1.25);
}

.map-embed-wrapper {
  margin-top: 50px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.25);
  height: 340px;
}

.map-embed-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(90%) hue-rotate(180deg) contrast(90%);
}

/* ==========================================================================
   SECTION 10: EXECUTIVE MNC FOOTER & COMPLIANCE
   DESIGN: TIER-1 GLOBAL ENTERPRISE (TCS / INFOSYS / ACCENTURE GRADE)
   ========================================================================== */
.site-footer {
  background: var(--brand-navy-dark);
  border-top: 1px solid var(--brand-tech-blue);
  position: relative;
  z-index: 10;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.site-footer::before {
  display: none;
}

/* Pre-Footer Trust & Compliance Strip */
.footer-trust-strip {
  background: rgba(6, 39, 91, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 24px 0;
  backdrop-filter: blur(12px);
}

.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-strip-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.trust-strip-item:hover {
  background: rgba(8, 100, 197, 0.1);
  border-color: var(--brand-tech-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.trust-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(8, 100, 197, 0.15);
  border: 1px solid var(--brand-tech-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-sky-blue);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.trust-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.trust-content strong {
  font-size: 0.88rem;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.trust-content span {
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Main 5-Column Corporate Directory */
.footer-main-grid {
  display: grid;
  grid-template-columns: 1.8fr 1.1fr 1.1fr 1.1fr 1.7fr;
  gap: 36px;
  padding: 60px 0 44px;
}

/* Col 1: Corporate Brand */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.footer-brand-desc {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #94a3b8;
  max-width: 320px;
  margin: 0;
}

.footer-entity-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.entity-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #7dd3fc;
  background: rgba(8, 100, 197, 0.08);
  border: 1px solid var(--brand-tech-blue);
  padding: 5px 12px;
  border-radius: 6px;
  width: fit-content;
}

.entity-badge i {
  color: var(--brand-sky-blue);
  font-size: 0.8rem;
}

.footer-social-strip {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.footer-social-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-social-icon:hover {
  background: var(--brand-tech-blue);
  color: #ffffff;
  border-color: var(--brand-tech-blue);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(8, 100, 197, 0.4);
}

.footer-social-icon.whatsapp-accent {
  color: #25D366;
  border-color: rgba(37, 211, 102, 0.3);
  background: rgba(37, 211, 102, 0.08);
}

.footer-social-icon.whatsapp-accent:hover {
  background: #25D366;
  color: #ffffff;
  border-color: #25D366;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
}

/* Col 2, 3, 4: Directory Links */
.footer-links-col {
  display: flex;
  flex-direction: column;
}

.footer-heading {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.footer-heading::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--brand-tech-blue);
  margin-top: 8px;
  border-radius: 2px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-list a {
  font-size: 0.85rem;
  color: #94a3b8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.footer-links-list a i {
  font-size: 0.7rem;
  color: var(--brand-sky-blue);
  transition: transform 0.2s ease;
}

.footer-links-list a:hover {
  color: var(--brand-sky-blue);
  transform: translateX(4px);
}

.footer-links-list a:hover i {
  color: var(--brand-sky-blue);
  transform: translateX(2px);
}

/* Col 5: Global HQ & Dispatch */
.footer-hq-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-hq-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hq-card-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.hq-card-item i {
  color: var(--brand-sky-blue);
  font-size: 0.85rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.hq-card-item a {
  color: var(--brand-sky-blue);
  text-decoration: none;
  white-space: nowrap;
  word-break: keep-all;
}

.hq-card-item a:hover {
  text-decoration: underline;
}

.hq-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--brand-leaf-green);
  background: rgba(85, 213, 46, 0.1);
  border: 1px solid var(--brand-leaf-green);
  padding: 4px 10px;
  border-radius: 9999px;
  width: fit-content;
  margin-top: 4px;
}

.status-pulse-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-leaf-green);
  box-shadow: 0 0 8px var(--brand-leaf-green);
  animation: introDotPulse 1.8s infinite;
}

.footer-dispatch-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dispatch-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.dispatch-desc {
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0;
}

.footer-newsletter-form {
  margin-top: 6px;
}

.newsletter-input-wrap {
  display: flex;
  position: relative;
  background: rgba(6, 39, 91, 0.8);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 9999px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.newsletter-input-wrap:focus-within {
  border-color: var(--brand-sky-blue);
  box-shadow: 0 0 16px rgba(7, 155, 226, 0.3);
}

.footer-email-input {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.82rem;
  outline: none;
}

.footer-email-input::placeholder {
  color: #64748b;
}

.footer-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--brand-tech-blue);
  border: none;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 9999px;
  margin: 3px;
}

.footer-submit-btn:hover {
  background: var(--brand-sky-blue);
  box-shadow: 0 0 12px rgba(8, 100, 197, 0.5);
}

/* Executive MNC Bottom Legal & Compliance Bar */
.footer-legal-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.78rem;
  color: #94a3b8;
}

.legal-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.copyright-text {
  margin: 0;
  color: #cbd5e1;
}

.copyright-text strong {
  color: #ffffff;
  font-weight: 600;
}

.legal-separator {
  color: #475569;
}

.legal-cin, .legal-msme {
  color: #7dd3fc;
  font-size: 0.74rem;
  font-family: var(--font-mono, monospace);
}

.legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-links a:hover {
  color: #38bdf8;
  text-decoration: underline;
}

.legal-dot {
  color: #475569;
}

.legal-compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 9999px;
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 600;
}

.legal-compliance-badge i {
  color: #38bdf8;
  font-size: 0.75rem;
}

/* Responsive Footer Breakpoints */
@media (max-width: 1200px) {
  .trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-main-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .footer-brand-col {
    grid-column: span 3;
    max-width: 100%;
  }
  .footer-brand-desc {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .trust-strip-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0 30px;
  }
  .footer-brand-col {
    grid-column: span 1;
  }
  .footer-legal-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ==========================================================================
   MODALS (CONSULTATION & PROJECT CASE STUDY)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

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

.modal-dialog {
  background: #0f131f;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-lg);
  max-width: 650px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(139, 92, 246, 0.3);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-dialog {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
  font-size: 1.35rem;
  color: #ffffff;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.modal-close-btn:hover {
  color: #ffffff;
}

.modal-body {
  padding: 30px;
}

.calc-step-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.calc-option-btn {
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all var(--transition-fast);
}

.calc-option-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #8b5cf6;
}

.calc-option-btn.selected {
  background: rgba(139, 92, 246, 0.2);
  border-color: #a855f7;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.calc-option-btn i {
  color: var(--brand-sky-blue);
  font-size: 1.2rem;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 500px;
    margin: 0 auto;
  }

  .hero-visual {
    max-width: 550px;
    margin: 0 auto;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

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

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

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

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

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 1024px) {
  .nav-menu {
    display: none;
  }

  .mobile-toggle-btn {
    display: flex;
  }
}

@media (max-width: 768px) {

  .services-grid {
    grid-template-columns: 1fr;
  }

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

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .projects-mosaic-grid {
    border-radius: 14px;
  }

  .project-tile {
    min-height: 280px;
  }

  .mosaic-tile-text {
    padding: 32px 20px;
  }

  .mosaic-title {
    font-size: 1.25rem;
  }

  .why-us-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .calc-step-options {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 480px) {
  .hero-stats-row {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 2.1rem;
  }
}

/* ==========================================================================
   SUBPAGE STYLES (WHO WE ARE & HOW WE WORK)
   ========================================================================== */
.subpage-hero {
  padding: calc(var(--header-height) + 60px) 0 80px;
  position: relative;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  font-size: 0.92rem !important;
  color: #64748b !important;
  margin-bottom: 22px !important;
}

.breadcrumbs a {
  color: #0864C5 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

.breadcrumbs a:hover {
  color: #0284c7 !important;
  text-decoration: underline !important;
}

.breadcrumbs .separator {
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  opacity: 0.85 !important;
}

.breadcrumbs .current {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Process Timeline / Workflow Cards */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
  margin-top: 40px;
}

.process-step-card {
  background: rgba(6, 39, 91, 0.75);
  border: 1px solid var(--brand-tech-blue);
  border-radius: var(--radius-md);
  padding: 30px 20px;
  position: relative;
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.process-step-card:hover {
  transform: translateY(-8px);
  border-color: var(--brand-sky-blue);
  background: rgba(8, 100, 197, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(8, 100, 197, 0.25);
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-tech-blue);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(8, 100, 197, 0.4);
}

.step-title {
  font-size: 1.15rem;
  color: #ffffff;
  margin-bottom: 12px;
  font-weight: 700;
}

.step-desc {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.65;
}

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

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

/* ==========================================================================
   BACKGROUND IMAGE MOTION & VIDEO SYSTEM
   ========================================================================== */
.section-motion-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 1. Video Motion Layer */
.motion-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.06);
  object-fit: cover;
  opacity: 0.32;
  filter: saturate(1.4) brightness(0.85);
  pointer-events: none;
}

/* 2. Image Motion Layer (Ken Burns & Continuous Drift) */
.motion-img-pan {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  opacity: 0.22;
  filter: saturate(1.25) contrast(1.15);
  animation: kenBurnsMotion 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes kenBurnsMotion {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.15) translate(-35px, -20px);
  }
  100% {
    transform: scale(1.06) translate(25px, 15px);
  }
}

/* Subtle Animated Cyber Grid Motion - hidden to remove gradient */
.motion-grid-pattern {
  display: none !important;
}

@keyframes gridFloatMotion {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 56px 56px;
  }
}

/* Gradient Tint Overlays */
.motion-overlay-purple,
.motion-overlay-sapphire,
.motion-overlay-emerald,
.motion-overlay-magenta,
.motion-overlay-cyan,
.motion-overlay-cobalt,
.motion-overlay-amber,
.motion-overlay-teal {
  position: absolute;
  inset: 0;
  background: rgba(6, 39, 91, 0.92);
}

/* ==========================================================================
   WHO WE ARE 3D GLASS WAVE MOTION BACKGROUND SYSTEM
   ========================================================================== */
.who-we-are-main-section,
#about {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}

.who-we-are-motion-bg,
#about .section-motion-bg,
.who-we-are-main-section .section-motion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  display: block !important;
}

.who-we-are-motion-bg .who-we-are-video,
#about .who-we-are-video,
.who-we-are-main-section .who-we-are-video {
  position: absolute !important;
  top: 56% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  opacity: 0.92 !important;
  filter: saturate(1.15) contrast(1.05) brightness(0.98) !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
}

.who-we-are-motion-bg .who-we-are-poster,
#about .who-we-are-poster,
.who-we-are-main-section .who-we-are-poster {
  position: absolute !important;
  top: 56% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  opacity: 0.92 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

.who-we-are-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: 
    radial-gradient(ellipse 1000px 420px at 50% 160px, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 65%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.22) 60%, rgba(241, 245, 249, 0.52) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: block !important;
}

/* ==========================================================================
   HOW WE WORK AI-HUMAN MOTION VIDEO BACKGROUND SYSTEM
   ========================================================================== */
.how-we-work-hero {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
  min-height: 480px !important;
}

.how-we-work-motion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  display: block !important;
}

.how-we-work-motion-bg .how-we-work-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: saturate(1.2) contrast(1.15) brightness(1.0) !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
}

.how-we-work-motion-bg .how-we-work-poster {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

.how-we-work-video-overlay {
  display: none !important;
}

.how-we-work-hero .container {
  position: relative !important;
  z-index: 3 !important;
}

.how-we-work-hero .section-title {
  color: #0f172a !important;
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 255, 255, 0.9) !important;
}

.how-we-work-hero .section-subtitle {
  color: #1e293b !important;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.95), 0 0 8px rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
}

.how-we-work-hero .badge-tag {
  background: #ffffff !important;
  box-shadow: 0 2px 14px rgba(8, 100, 197, 0.18) !important;
}

.who-we-are-main-section > .container,
#about > .container {
  position: relative !important;
  z-index: 3 !important;
}

/* Enhanced High-Contrast Section Header for Who We Are */
#about .section-header,
.who-we-are-main-section .section-header {
  position: relative !important;
  z-index: 4 !important;
  max-width: 900px !important;
  margin: 0 auto 42px auto !important;
  padding: 16px 24px !important;
  border-radius: 20px !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 65%, rgba(255, 255, 255, 0) 100%) !important;
}

#about .section-header .badge-tag,
.who-we-are-main-section .section-header .badge-tag {
  background: #ffffff !important;
  border: 1px solid rgba(8, 100, 197, 0.35) !important;
  color: #0864C5 !important;
  box-shadow: 0 4px 14px rgba(8, 100, 197, 0.12) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  padding: 6px 16px !important;
}

#about .section-header .section-title,
.who-we-are-main-section .section-header .section-title {
  color: #091224 !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.95), 0 0 30px rgba(255, 255, 255, 0.9) !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

#about .section-header .section-title .text-gradient,
.who-we-are-main-section .section-header .section-title .text-gradient {
  background: linear-gradient(135deg, #0369a1 0%, #0864C5 50%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #0864C5 !important;
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.95)) !important;
  display: inline-block !important;
}

#about .section-header .section-subtitle,
.who-we-are-main-section .section-header .section-subtitle {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 1.08rem !important;
  line-height: 1.68 !important;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.98), 0 0 24px rgba(255, 255, 255, 0.95) !important;
}

/* Animated Shimmer Wave on CTA Banner (Solid tech blue, no gradient) */
.cta-banner-wrapper {
  background: var(--brand-tech-blue) !important;
  animation: none !important;
}

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-tech-blue);
  border: 1px solid var(--brand-sky-blue);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--brand-sky-blue);
  color: #ffffff;
  border-color: var(--brand-sky-blue);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(7, 155, 226, 0.5);
}

/* ==========================================================================
   WHATSAPP FLOATING CHAT SYSTEM (LEFT SIDE)
   ========================================================================== */
.whatsapp-chat-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  z-index: 2147483646 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-primary);
}

/* Floating Launcher Button */
.whatsapp-float-btn {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  cursor: pointer;
}

.whatsapp-float-btn:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.65);
  color: #ffffff !important;
}

/* Pulse Animation Ring */
.whatsapp-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: whatsappPulse 2.2s infinite cubic-bezier(0.25, 0, 0, 1);
  pointer-events: none;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.45);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Floating Tooltip Label (Opens to the right of left button) */
.whatsapp-float-tooltip {
  position: absolute;
  left: 70px;
  right: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  background: rgba(6, 39, 91, 0.94);
  border: 1px solid var(--brand-tech-blue);
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.whatsapp-float-btn:hover .whatsapp-float-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Online Notification Badge */
.whatsapp-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brand-navy);
}

/* Interactive Chat Card */
.whatsapp-chat-card {
  width: 320px;
  background: var(--brand-navy-dark);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(37, 211, 102, 0.2);
  display: none;
  transform-origin: bottom left;
  animation: cardFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(14px);
}

.whatsapp-chat-card.active {
  display: block;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.whatsapp-card-header {
  background: var(--brand-navy);
  border-bottom: 1px solid var(--brand-tech-blue);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.whatsapp-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #25D366;
}

.whatsapp-avatar img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.whatsapp-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid var(--brand-navy);
}

.whatsapp-header-info {
  flex-grow: 1;
}

.whatsapp-header-info h6 {
  margin: 0;
  font-size: 0.95rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.2;
}

.whatsapp-header-info span {
  font-size: 0.76rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.whatsapp-close-btn {
  position: relative;
  z-index: 2147483647 !important;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #ffffff !important;
  font-size: 1.25rem;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: auto;
  flex-shrink: 0;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  outline: none;
}

.whatsapp-close-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: scale(1.15);
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.7);
}

.whatsapp-close-btn:active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  transform: scale(0.92);
}

.whatsapp-close-btn,
.whatsapp-close-btn * {
  box-sizing: border-box;
}

.whatsapp-close-btn i,
.whatsapp-close-btn span,
.whatsapp-close-btn svg {
  pointer-events: none !important;
}

.whatsapp-card-body {
  padding: 16px;
  background: var(--brand-navy);
  min-height: 110px;
}

.whatsapp-bubble {
  background: rgba(6, 39, 91, 0.9);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 12px 12px 12px 2px;
  padding: 12px 14px;
  color: #e2e8f0;
  font-size: 0.86rem;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.whatsapp-bubble p {
  margin: 0 0 6px 0;
}

.whatsapp-bubble p:last-of-type {
  margin-bottom: 4px;
}

.whatsapp-bubble-time {
  display: block;
  text-align: right;
  font-size: 0.7rem;
  color: #94a3b8;
}

.whatsapp-card-footer {
  padding: 12px 16px;
  background: var(--brand-navy-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.whatsapp-start-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: #ffffff !important;
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.whatsapp-start-chat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  color: #ffffff !important;
}

@media (max-width: 600px) {
  .whatsapp-chat-widget {
    bottom: 18px;
    left: 18px;
    right: auto;
  }
  .whatsapp-float-btn {
    width: 52px;
    height: 52px;
    font-size: 28px;
  }
  .whatsapp-chat-card {
    width: calc(100vw - 36px);
    max-width: 320px;
  }
  .back-to-top {
    bottom: 18px;
    right: 18px;
  }
}

/* ==========================================================================
   GLOBAL GLASS-CARD SYSTEM
   ========================================================================== */
.glass-card {
  background: rgba(6, 39, 91, 0.75);
  border: 1px solid var(--brand-tech-blue);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65), 0 0 30px rgba(8, 100, 197, 0.25);
}

/* Testimonials Top Metrics Grid */
.testimonials-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .testimonials-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .testimonials-metrics-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.testimonials-section-wrap {
  position: relative;
  background: #f8fafc !important;
  padding: 80px 0 110px;
  overflow: hidden;
}

/* Ambient glow blobs in testimonials (Removed for clean solid styling) */
.testimonials-glow-blob-1,
.testimonials-glow-blob-2 {
  display: none !important;
}

/* Client Logo Marquee Strip */
/* ==========================================================================
   MULTI-THEMED CLIENT LOGO MARQUEE SYSTEM (SOLID BRAND NAVY THEME)
   ========================================================================== */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  padding: 18px 0;
  margin-bottom: 0 !important;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 5;
}

.marquee-container::before,
.marquee-container::after {
  display: none;
}

.marquee-track {
  display: inline-flex;
  gap: 56px;
  animation: marqueeScroll 26s linear infinite;
  will-change: transform;
}

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

@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.9;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.marquee-item:hover {
  opacity: 1;
  color: #0864C5;
  transform: scale(1.06);
}

.marquee-item i {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.marquee-item:hover i {
  transform: rotate(-8deg) scale(1.1);
}

/* Marquee Themes - Clean White Backgrounds */
.marquee-amber,
.marquee-purple,
.marquee-violet,
.marquee-emerald,
.marquee-cyan,
.marquee-magenta,
.marquee-blue,
.marquee-teal {
  border-top-color: #e2e8f0;
  border-bottom-color: #e2e8f0;
  background: #ffffff;
}

.marquee-amber::before, .marquee-amber::after,
.marquee-purple::before, .marquee-purple::after,
.marquee-violet::before, .marquee-violet::after,
.marquee-emerald::before, .marquee-emerald::after,
.marquee-cyan::before, .marquee-cyan::after,
.marquee-magenta::before, .marquee-magenta::after,
.marquee-blue::before, .marquee-blue::after,
.marquee-teal::before, .marquee-teal::after {
  display: none;
}

.marquee-amber .marquee-item i { color: var(--brand-orange); }
.marquee-purple .marquee-item i { color: var(--brand-tech-blue); }
.marquee-violet .marquee-item i { color: var(--brand-magenta); }
.marquee-emerald .marquee-item i { color: var(--brand-leaf-green); }
.marquee-cyan .marquee-item i { color: var(--brand-sky-blue); }
.marquee-magenta .marquee-item i { color: var(--brand-magenta); }
.marquee-blue .marquee-item i { color: var(--brand-tech-blue); }
.marquee-teal .marquee-item i { color: var(--brand-teal); }

/* Category Filter Pills */
.testimonials-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

.filter-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.filter-pill:hover {
  background: rgba(8, 100, 197, 0.08);
  border-color: var(--brand-tech-blue);
  color: var(--brand-tech-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(8, 100, 197, 0.15);
}

.filter-pill.active {
  background: var(--brand-tech-blue);
  border-color: var(--brand-tech-blue);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(8, 100, 197, 0.35);
  transform: translateY(-2px);
}

/* Luxury Testimonial Card 3D */
.testimonial-card-3d {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
  z-index: 2;
}

.testimonial-card-3d.hidden {
  display: none !important;
}

.testimonial-card-3d::before {
  display: none;
}

.testimonial-card-3d:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--brand-sky-blue);
  box-shadow: 0 20px 45px rgba(8, 100, 197, 0.14);
}

/* Watermark quote icon */
.card-quote-watermark {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 4rem;
  color: rgba(8, 100, 197, 0.06);
  pointer-events: none;
  transition: all 0.4s ease;
}

.testimonial-card-3d:hover .card-quote-watermark {
  color: rgba(8, 100, 197, 0.14);
  transform: scale(1.12) rotate(-8deg);
}

/* Twinkle Stars */
.star-rating-row {
  display: flex;
  gap: 5px;
  color: #fbbf24;
  font-size: 1.05rem;
}

.star-rating-row i {
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
  transition: transform 0.2s ease;
}

.testimonial-card-3d:hover .star-rating-row i {
  animation: starTwinkle 1.2s ease infinite alternate;
}

.testimonial-card-3d:hover .star-rating-row i:nth-child(2) { animation-delay: 0.15s; }
.testimonial-card-3d:hover .star-rating-row i:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card-3d:hover .star-rating-row i:nth-child(4) { animation-delay: 0.45s; }
.testimonial-card-3d:hover .star-rating-row i:nth-child(5) { animation-delay: 0.6s; }

@keyframes starTwinkle {
  0% { transform: scale(1); filter: drop-shadow(0 0 3px #fbbf24); }
  100% { transform: scale(1.22); filter: drop-shadow(0 0 8px #f59e0b); }
}

/* Verified Pill Badge */
.verified-tag {
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid currentColor;
}

.verified-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulseDot 2s infinite ease-in-out;
}

/* Testimonial Quote Typography */
.testimonial-body-text {
  color: #334155;
  font-size: 1.02rem;
  line-height: 1.78;
  font-style: italic;
  margin: 18px 0 26px;
  position: relative;
  z-index: 2;
}

/* Author Profile Section */
.testimonial-author-box {
  border-top: 1px solid #e2e8f0;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 2;
}

.author-avatar-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(8, 100, 197, 0.25);
  background: var(--brand-tech-blue);
  border: 2px solid #ffffff;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.testimonial-card-3d:hover .author-avatar-badge {
  transform: scale(1.12) rotate(4deg);
}

.author-meta-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-meta-role {
  font-size: 0.84rem;
  color: #64748b;
  display: block;
  line-height: 1.35;
}

.author-meta-company {
  font-size: 0.8rem;
  color: var(--brand-tech-blue);
  font-weight: 600;
}

/* Featured Enterprise Spotlight Box */
.enterprise-spotlight-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 44px;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.enterprise-spotlight-card::before {
  display: none;
}

.spotlight-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 100, 197, 0.1);
  border: 1px solid rgba(8, 100, 197, 0.25);
  color: var(--brand-tech-blue);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.spotlight-stats-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.spotlight-stat-item {
  text-align: center;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.spotlight-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--brand-tech-blue);
  font-family: var(--font-display);
}

.spotlight-stat-label {
  font-size: 0.76rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .enterprise-spotlight-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 30px 24px;
    gap: 28px;
  }
  .enterprise-spotlight-card > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


@media (max-width: 600px) {
  .enterprise-spotlight-card {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 20px 14px !important;
    border-radius: 16px !important;
    gap: 18px !important;
    margin-bottom: 36px !important;
  }

  .enterprise-spotlight-card > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .spotlight-metric-chip {
    font-size: 0.74rem !important;
    padding: 4px 10px !important;
    white-space: normal !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .enterprise-spotlight-card h3,
  .spotlight-headline {
    font-size: clamp(1.1rem, 4.2vw, 1.35rem) !important;
    line-height: 1.35 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .enterprise-spotlight-card p,
  .spotlight-quote {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    margin-bottom: 14px !important;
    overflow-wrap: break-word !important;
  }

  .spotlight-stats-box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 12px 8px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .spotlight-stat-item {
    padding: 8px 4px !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  .spotlight-stat-num {
    font-size: 1.35rem !important;
  }

  .spotlight-stat-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.02em !important;
  }
}

@media (max-width: 400px) {
  .enterprise-spotlight-card {
    padding: 16px 12px !important;
  }

  .spotlight-stats-box {
    padding: 10px 6px !important;
    gap: 6px !important;
  }

  .spotlight-stat-num {
    font-size: 1.2rem !important;
  }
}


/* ==========================================================================
   15. FULL-PAGE CINEMATIC CORPORATE INTRO VIDEO EXPERIENCE (TCS STYLE)
   ========================================================================== */
.intro-video-overlay,
.intro-video-overlay.full-page-tcs,
.intro-video-overlay.full-bleed-mode {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}


.tcs-close-cross-btn {
  position: relative;
  z-index: 100005;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
  outline: none;
}

.tcs-close-cross-btn:hover {
  background: rgba(239, 68, 68, 0.95);
  border-color: #ef4444;
  transform: scale(1.12);
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(239, 68, 68, 0.65);
}

.tcs-close-cross-btn:active {
  transform: scale(0.92);
}

.tcs-close-cross-btn i {
  pointer-events: none;
}

/* Full-Screen 1080p Background Video & Scrim Layer */
.tcs-video-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.tcs-full-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0.65;
  filter: saturate(1.2) contrast(1.12) brightness(0.92);
}

.tcs-video-scrim-gradient {
  position: absolute;
  inset: 0;
  background: rgba(6, 39, 91, 0.85);
}

.tcs-video-grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.35;
}

.intro-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.75;
}

/* Top Floating Header Island (TCS Style) */
.tcs-intro-header {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 56px;
  background: rgba(6, 39, 91, 0.95);
}

.tcs-brand-pod {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tcs-brand-emblem {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.75));
}

.tcs-brand-info {
  display: flex;
  flex-direction: column;
}

.tcs-brand-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
  font-family: var(--font-display, inherit);
}

.tcs-brand-sub {
  font-size: 0.78rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
}

.tcs-center-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 9999px;
  color: #7dd3fc;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  backdrop-filter: blur(12px);
}

.tcs-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 12px #38bdf8;
  animation: introDotPulse 1.8s infinite;
}

.tcs-enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 26px;
  background: var(--brand-tech-blue);
  border: 1px solid var(--brand-sky-blue);
  border-radius: 9999px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(8, 100, 197, 0.45);
  backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tcs-enter-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 32px rgba(7, 155, 226, 0.7);
  background: var(--brand-sky-blue);
}

.tcs-enter-btn i {
  transition: transform 0.25s ease;
}

.tcs-enter-btn:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   FULL BLEED SCREENPAL CORPORATE VIDEO PRESENTATION
   ========================================================================== */
.intro-video-overlay.full-bleed-mode {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100000;
  background: #000000;
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.screenpal-fullbleed-wrapper {
  display: none !important;
}

.screenpal-fullbleed-iframe {
  display: none !important;
}

/* Guaranteed Autoplaying Background Video & Cyber Motion Stage */
.intro-cinema-backdrop {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  background: #020617;
  overflow: hidden;
  pointer-events: auto;
}

.intro-cinema-video {
  display: none !important;
}

/* High-Tech Cyber Lighting & Ambience */
.intro-cinema-glow-cyan {
  display: none !important;
}

.intro-cinema-glow-purple {
  display: none !important;
}

.intro-cyber-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.intro-scanline-fx {
  display: none !important;
}

.intro-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

/* Luminous Cyber Telemetry Badge */
.intro-cinema-telemetry {
  display: none !important;
}

.telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(3, 14, 26, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.45);
  padding: 6px 16px;
  border-radius: 9999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.2);
  width: fit-content;
}

.telemetry-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: introDotPulse 1.8s infinite;
}

.telemetry-text {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #7dd3fc;
  text-transform: uppercase;
  font-family: var(--font-display, inherit);
}

.telemetry-sub {
  font-size: 0.70rem;
  font-weight: 500;
  color: rgba(224, 242, 254, 0.7);
  letter-spacing: 0.05em;
  padding-left: 6px;
}

/* ==========================================================================
   CINEMATIC TWO-STAGE CENTERPIECE (LOGO FIRST, THEN SERVICES)
   ========================================================================== */
.intro-cinema-hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 16;
  width: 92%;
  max-width: 860px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 38px 26px;
  background: rgba(6, 39, 91, 0.95);
  border: 1px solid var(--brand-tech-blue);
  border-radius: 24px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 45px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  pointer-events: none;
  animation: cinemaContentFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cinemaContentFadeUp {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Stage Slides */
.cinema-stage-slide {
  width: 100%;
  display: none !important;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0 !important;
  transform: translateY(12px) 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);
  pointer-events: none !important;
  visibility: hidden !important;
}

.cinema-stage-slide.active {
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1);
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Stage 1: Logo & Brand */
.cinema-logo-emblem-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.cinema-logo-glow-halo {
  display: none !important;
}

@keyframes cinemaHaloPulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.95; }
}

.cinema-logo-emblem {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.95)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.9));
  z-index: 2;
}

.cinema-brand-title {
  color: #ffffff;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  font-family: var(--font-display, inherit);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 4px 20px rgba(0, 0, 0, 0.95), 0 0 35px rgba(56, 189, 248, 0.6);
}

.cinema-brand-tagline {
  color: #ffffff;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  max-width: 680px;
  margin: 0;
  font-weight: 500;
  padding: 8px 24px;
  background: rgba(3, 14, 26, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}

/* Stage 2: Services Showcase */
.cinema-services-title {
  color: #ffffff;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  font-family: var(--font-display, inherit);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

.cinema-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin-top: 4px;
}

.cinema-service-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(3, 14, 26, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.1);
  text-align: left;
  transition: all 0.25s ease;
}

.cinema-service-card:hover {
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(56, 189, 248, 0.25);
}

.csc-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #38bdf8;
  flex-shrink: 0;
}

.csc-info h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 3px 0;
  letter-spacing: 0.01em;
}

.csc-info p {
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.35;
  margin: 0;
}

/* Eyebrow & Gradients */
.cinema-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.5);
  padding: 5px 16px;
  border-radius: 9999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.25);
}

.cinema-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  animation: introDotPulse 1.8s infinite;
}

.cinema-eyebrow-text {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: #7dd3fc;
  text-transform: uppercase;
  font-family: var(--font-display, inherit);
}

.cinema-title-gradient {
  color: var(--brand-sky-blue) !important;
  -webkit-text-fill-color: var(--brand-sky-blue) !important;
  background: none !important;
  text-shadow: 0 0 25px rgba(7, 155, 226, 0.85), 0 2px 10px rgba(0, 0, 0, 0.95) !important;
  filter: none !important;
  display: inline;
}

/* Stage Stepper Navigation */
.cinema-stage-stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  pointer-events: auto;
  background: rgba(3, 14, 26, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 9999px;
  padding: 4px 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.cinema-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 9999px;
  transition: all 0.2s ease;
  outline: none;
}

.cinema-step-btn:hover {
  color: #ffffff;
  background: rgba(56, 189, 248, 0.15);
}

.cinema-step-btn.active {
  color: #ffffff;
  background: var(--brand-tech-blue);
  box-shadow: 0 0 12px rgba(8, 100, 197, 0.4);
}

.cinema-step-btn .step-num {
  font-family: monospace;
  font-size: 0.70rem;
  opacity: 0.8;
}

.cinema-step-progress-bar {
  width: 42px;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.cinema-step-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--brand-tech-blue);
  transition: width 0.35s ease;
}

.cinema-press-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 5px 14px;
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  font-size: 0.74rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
  backdrop-filter: blur(10px);
  animation: cinemaHintPulse 2.5s infinite ease-in-out;
}

@keyframes cinemaHintPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.5); }
}

/* Floating Top HUD (Over Video) */
.screenpal-floating-hud {
  position: absolute;
  top: 20px;
  right: 28px;
  left: auto;
  width: auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  background: transparent;
  pointer-events: auto;
}

.hud-brand-pod {
  display: none !important;
}

.hud-center-pill {
  display: none !important;
}

.hud-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: introDotPulse 1.8s infinite;
}

.hud-actions-pod {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  flex-shrink: 0;
}

@keyframes ambientVideoPulse {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.08); opacity: 0.95; }
}

.hud-sound-btn {
  display: none !important;
}

.hud-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 9999px;
  color: #7dd3fc;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.hud-fullscreen-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

.hud-enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: var(--brand-orange);
  border: 1px solid var(--brand-orange);
  border-radius: 9999px;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 120, 8, 0.45);
  backdrop-filter: blur(14px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.hud-enter-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 28px rgba(255, 120, 8, 0.75);
  background: #e06800;
  border-color: #e06800;
}

.hud-enter-btn i {
  transition: transform 0.2s ease;
}

.hud-enter-btn:hover i {
  transform: translateX(4px);
}

.hud-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(3, 14, 26, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  outline: none;
}

.hud-close-btn:hover {
  background: rgba(239, 68, 68, 0.95);
  border-color: #ef4444;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.screenpal-bottom-hud {
  display: none !important;
}

.hud-auto-notice strong {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  padding: 1px 7px;
  border-radius: 4px;
}

/* Desktop default: mobile bottom bar hidden */
.screenpal-mobile-bottom-bar {
  display: none;
}

/* ==========================================================================
   MOBILE VIEWPORT HUD & VIDEO OPTIMIZATION (SEAMLESS SINGLE-LINE PILL)
   ========================================================================== */
@media (max-width: 768px) {
  .screenpal-floating-hud {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    left: auto !important;
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: transparent !important;
  }

  .hud-brand-pod {
    display: none !important;
  }

  .hud-brand-emblem {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }

  .hud-brand-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  .hud-brand-name {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Hide subtitle and center pill on mobile to prevent wrapping */
  .hud-brand-sub {
    display: none !important;
  }

  .hud-center-pill {
    display: none !important;
  }

  .hud-actions-pod {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .hud-sound-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #7dd3fc !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  }

  .hud-sound-btn span {
    display: none !important;
  }

  .hud-fullscreen-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #7dd3fc !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  }

  .hud-fullscreen-btn span {
    display: none !important;
  }

  .hud-enter-btn {
    padding: 6px 12px !important;
    height: 36px !important;
    font-size: 0.76rem !important;
    gap: 5px !important;
    white-space: nowrap !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
  }

  .hud-close-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 0.95rem !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .screenpal-fullbleed-wrapper {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: transparent !important;
    overflow: hidden !important;
    display: block !important;
    z-index: 5 !important;
  }

  .screenpal-fullbleed-iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh + 54px) !important;
    height: calc(100dvh + 54px) !important;
    min-width: 100% !important;
    border: none !important;
    display: block !important;
    box-shadow: none !important;
  }

  .intro-cinema-telemetry {
    bottom: 84px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .telemetry-sub {
    font-size: 0.64rem !important;
    padding-left: 0 !important;
  }

  /* Two-Stage Centerpiece on Mobile */
  .intro-cinema-hero-content {
    top: 48% !important;
    gap: 8px !important;
    width: 94% !important;
    max-width: 375px !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
  }

  .cinema-stage-slide {
    gap: 7px !important;
  }

  /* Mobile Stage 1: Logo */
  .cinema-logo-emblem-wrap {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 0 !important;
  }

  .cinema-logo-glow-halo {
    inset: -8px !important;
    filter: blur(8px) !important;
  }

  .cinema-logo-emblem {
    width: 42px !important;
    height: 42px !important;
  }

  .cinema-brand-title {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
  }

  .cinema-brand-tagline {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
    max-width: 320px !important;
  }

  /* Mobile Stage 2: Services */
  .cinema-services-title {
    font-size: 1.18rem !important;
    line-height: 1.15 !important;
  }

  .cinema-services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .cinema-service-card {
    padding: 6px 8px !important;
    gap: 5px !important;
    border-radius: 9px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .csc-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
  }

  .csc-info h4 {
    font-size: 0.70rem !important;
    margin-bottom: 2px !important;
    line-height: 1.15 !important;
  }

  .csc-info p {
    font-size: 0.58rem !important;
    line-height: 1.2 !important;
  }

  /* Stepper on Mobile */
  .cinema-stage-stepper {
    padding: 3px 10px !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .cinema-step-btn {
    padding: 3px 8px !important;
    font-size: 0.70rem !important;
    gap: 4px !important;
  }

  .cinema-step-progress-bar {
    width: 28px !important;
  }

  .cinema-eyebrow {
    padding: 3px 10px !important;
  }

  .cinema-eyebrow-text {
    font-size: 0.64rem !important;
    letter-spacing: 0.08em !important;
  }

  .cinema-press-hint {
    display: none !important;
  }

  .screenpal-mobile-bottom-bar {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 25;
    pointer-events: auto;
    padding: 0 16px;
  }

  .screenpal-mobile-bottom-bar .mobile-enter-btn {
    width: 100%;
    max-width: 290px;
    padding: 12px 20px;
    background: var(--brand-orange);
    border: 1px solid var(--brand-orange);
    border-radius: 9999px;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 25px rgba(255, 120, 8, 0.6);
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .screenpal-mobile-bottom-bar .mobile-enter-btn:active {
    transform: scale(0.97);
  }

  .screenpal-mobile-bottom-bar .mobile-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    letter-spacing: 0.02em;
  }
}

/* Extra Compact Mobile screens (<= 380px) */
@media (max-width: 380px) {
  .screenpal-floating-hud {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: auto !important;
    padding: 0 !important;
    gap: 4px !important;
  }

  .hud-brand-pod {
    display: none !important;
  }

  .hud-sound-btn, .hud-fullscreen-btn, .hud-close-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 0.80rem !important;
  }

  .hud-enter-btn {
    padding: 5px 9px !important;
    height: 32px !important;
    font-size: 0.70rem !important;
    gap: 4px !important;
  }

  .hud-actions-pod {
    gap: 4px !important;
  }
}

/* Main Full-Screen Cinematic Stage */
.tcs-intro-stage {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 56px;
  overflow: hidden;
}

.tcs-scenes-track {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tcs-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.65s;
  pointer-events: none;
}

.tcs-scene.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

.tcs-scene-center {
  width: 100%;
  max-width: 1060px;
  text-align: center;
  position: relative;
  z-index: 5;
}

.tcs-scene-full {
  width: 100%;
  max-width: 1320px;
  position: relative;
  z-index: 5;
}

/* Emblem Halo (Scene 1 & 5) */
.tcs-emblem-halo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(6, 39, 91, 0.9);
  border: 2px solid var(--brand-tech-blue);
  box-shadow: 0 0 35px rgba(8, 100, 197, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: emblemFloat 4.5s ease-in-out infinite alternate;
}

.tcs-emblem-halo.small {
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
}

.tcs-halo-emblem {
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.9));
}

.tcs-eyebrow {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #38bdf8;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.tcs-hero-title {
  font-size: clamp(2.2rem, 5.0vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 auto 16px;
  line-height: 1.12;
}

.tcs-hero-desc {
  font-size: 1.18rem;
  color: #cbd5e1;
  max-width: 800px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.tcs-chips-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tcs-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  color: #e2e8f0;
  font-size: 0.92rem;
  font-weight: 600;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.tcs-chip i {
  color: #38bdf8;
}

/* Scene 2: Who We Are & Innovation Campus */
.tcs-scene-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
  width: 100%;
  max-width: 1280px;
}

.tcs-split-info {
  display: flex;
  flex-direction: column;
}

.tcs-split-heading {
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.18;
  margin: 0 0 16px;
}

.tcs-split-desc {
  font-size: 1.05rem;
  color: #cbd5e1;
  line-height: 1.68;
  margin: 0 0 24px;
}

.tcs-highlights-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tcs-highlight-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px 18px;
  border-radius: 14px;
  backdrop-filter: blur(12px);
}

.tcs-hl-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.tcs-highlight-box strong {
  display: block;
  color: #ffffff;
  font-size: 0.96rem;
  margin-bottom: 2px;
}

.tcs-highlight-box span {
  font-size: 0.82rem;
  color: #94a3b8;
}

.tcs-split-visual {
  position: relative;
}

.tcs-campus-showcase {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 45px rgba(56, 189, 248, 0.3);
  aspect-ratio: 16 / 10;
  max-height: 380px;
}

.tcs-campus-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurnsZoom 20s ease-in-out infinite alternate;
}

.tcs-campus-glow-border {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(4, 2, 14, 0.6);
  pointer-events: none;
}

.tcs-campus-badge {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(4, 2, 14, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.45);
  padding: 8px 16px;
  border-radius: 12px;
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.tcs-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 10px #2dd4bf;
  flex-shrink: 0;
}

/* Scene 3: Services Grid (TCS Core Practices) */
.tcs-section-header {
  text-align: center;
  margin-bottom: 28px;
}

.tcs-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

.tcs-svc-card {
  background: rgba(12, 5, 28, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 20px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.tcs-svc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(56, 189, 248, 0.25);
}

.tcs-svc-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.tcs-svc-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.25;
}

.tcs-svc-card p {
  font-size: 0.84rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
}

.tcs-svc-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Scene 4: Enterprise Scale & Proven Impact */
.tcs-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 32px auto 26px;
  width: 100%;
}

.tcs-metric-pillar {
  background: rgba(12, 5, 28, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

.tcs-metric-pillar::before {
  display: none !important;
}

.tcs-pillar-num {
  display: block;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  font-family: var(--font-display, inherit);
  margin-bottom: 6px;
}

.tcs-pillar-lbl {
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tcs-quote-box {
  font-size: 1.08rem;
  font-style: italic;
  color: #cbd5e1;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Scene 5: Finale Actions */
.tcs-actions-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.tcs-enter-main-btn {
  padding: 16px 40px !important;
  font-size: 1.06rem !important;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.6) !important;
}

.tcs-replay-btn {
  padding: 16px 32px !important;
  font-size: 1.02rem !important;
}

/* Bottom Broadcast Controls Dock & Media Dock (Hidden per user request for pure cinematic presentation) */
.tcs-intro-footer,
.tcs-dock-bar,
.tcs-subtitles-display {
  display: none !important;
}

.tcs-ctrl-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: all 0.22s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tcs-ctrl-icon-btn:hover {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
}

.tcs-ctrl-icon-btn.active {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

.tcs-timecode {
  font-size: 0.84rem;
  font-weight: 700;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tcs-timeline-container {
  flex: 1;
  cursor: pointer;
  padding: 8px 0;
  position: relative;
}

.tcs-timeline-rail {
  height: 5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  position: relative;
  overflow: visible;
  transition: height 0.18s ease;
}

.tcs-timeline-container:hover .tcs-timeline-rail {
  height: 7px;
}

.tcs-timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: var(--brand-sky-blue);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(7, 155, 226, 0.8);
}

.tcs-timeline-pin {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tcs-timeline-container:hover .tcs-timeline-pin {
  opacity: 1;
}

/* Numbered Scene Jump Stepper (TCS Style) */
.tcs-scene-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tcs-scene-stepper .scene-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.22s ease;
  width: auto;
  height: auto;
}

.tcs-scene-stepper .scene-dot:hover {
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  transform: none;
}

.tcs-scene-stepper .scene-dot.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
  transform: none;
}

.tcs-scene-stepper .step-num {
  font-weight: 800;
  font-size: 0.78rem;
}

.tcs-scene-stepper .step-lbl {
  font-size: 0.74rem;
  font-weight: 600;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .tcs-intro-header {
    padding: 18px 28px;
  }
  .tcs-intro-stage {
    padding: 10px 28px;
  }
  .tcs-dock-bar {
    padding: 12px 28px;
  }
  .tcs-scene-stepper .step-lbl {
    display: none;
  }
}

@media (max-width: 960px) {
  .tcs-scene-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .tcs-campus-showcase {
    max-height: 220px;
  }
  .tcs-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .tcs-metrics-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .tcs-intro-header {
    padding: 12px 16px;
  }
  .tcs-brand-sub,
  .tcs-center-badge {
    display: none;
  }
  .tcs-brand-title {
    font-size: 0.88rem;
  }
  .tcs-enter-btn {
    padding: 8px 16px;
    font-size: 0.78rem;
  }
  .tcs-intro-stage {
    padding: 8px 16px;
  }
  .tcs-hero-title {
    font-size: 1.75rem;
  }
  .tcs-hero-desc {
    font-size: 0.88rem;
  }
  .tcs-chips-row {
    gap: 8px;
  }
  .tcs-chip {
    padding: 6px 12px;
    font-size: 0.78rem;
  }
  .tcs-split-heading {
    font-size: 1.45rem;
  }
  .tcs-split-desc {
    font-size: 0.85rem;
  }
  .tcs-services-grid {
    grid-template-columns: 1fr;
    max-height: 280px;
    overflow-y: auto;
    gap: 10px;
  }
  .tcs-svc-card {
    padding: 14px;
  }
  .tcs-pillar-num {
    font-size: 1.6rem;
  }
  .tcs-scene-stepper {
    display: none;
  }
  .tcs-dock-bar {
    padding: 10px 16px;
    gap: 12px;
  }
  .tcs-subtitles-display {
    font-size: 0.78rem;
    padding: 6px 14px;
  }
}



/* ==========================================================================
   ENGINEERING TENETS & ARCHITECTURAL STANDARDS GRID
   ========================================================================== */
.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  margin-top: 40px;
  margin-bottom: 20px;
}

.pillar-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 32px 28px !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

.pillar-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-sky-blue);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.pillar-item:nth-child(2)::before {
  background: var(--brand-teal);
}

.pillar-item:nth-child(3)::before {
  background: var(--brand-magenta);
}

.pillar-item:nth-child(4)::before {
  background: var(--brand-orange);
}

.pillar-item:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.75), 0 0 25px rgba(56, 189, 248, 0.15) !important;
}

.pillar-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.55rem !important;
  margin-bottom: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.3s ease !important;
}

.pillar-item:hover .pillar-icon {
  transform: scale(1.08) !important;
}

.pillar-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.pillar-text strong {
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

.pillar-text span {
  color: #94a3b8 !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   SOUND TOGGLE BUTTON (HIDDEN AS REQUESTED)
   ========================================================================== */
.header-sound-btn, #headerSoundToggleBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   PAGE TRANSITION LOADER (EXACT MATCH TO USER SPECIFICATION)
   ========================================================================== */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(2, 6, 23, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 99999999;
  display: none !important;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-transition-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

.page-transition-overlay.fade-out {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.page-loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.page-loader-svg {
  width: 250px;
  height: 250px;
  display: block;
}

.loader-dots-ring {
  transform-origin: 150px 150px;
  animation: spinLoaderDots 1.35s linear infinite;
}

@keyframes spinLoaderDots {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader-center-text {
  fill: #00b4ff;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 5px;
  filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.75));
}


/* ==========================================================================
   EXECUTIVE WHITE THEME & BLACK TYPOGRAPHY DESIGN SYSTEM
   Professional High-Contrast Corporate Architecture
   Background: Pure Crisp White (#ffffff) & Executive Subtle Slate (#f8fafc)
   Typography: Deep Slate Black (#0f172a, #1e293b, #334155)
   Brand Accents: Technology Blue (#0864C5), Teal (#00A884), Vibrant Orange (#FF7808)
   ========================================================================== */

/* -- GLOBAL BODY & ROOT ENFORCEMENT ------------------------------ */
body {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1e293b !important;
}

/* -- SUPPRESS AMBIENT DARK GLOWS & OVERLAYS ---------------------- */
.ambient-glow,
.intro-cinema-glow-cyan,
.intro-cinema-glow-purple,
.intro-cyber-grid-overlay,
.intro-scanline-fx,
.cinema-logo-glow-halo {
  display: none !important;
}

.motion-overlay-sapphire {
  background: rgba(255, 255, 255, 0.92) !important;
}

.section-motion-bg {
  opacity: 0.12 !important;
}

.who-we-are-motion-bg,
#about .section-motion-bg,
.who-we-are-main-section .section-motion-bg,
.how-we-work-motion-bg,
.services-hero-motion-bg,
.services-page-hero .section-motion-bg,
.tech-bubble-motion-bg,
#tech .section-motion-bg,
.tech-bubble-section .section-motion-bg,
.projects-gold-motion-bg,
#projects .section-motion-bg,
.projects-gold-section .section-motion-bg,
.testimonials-ribbon-motion-bg,
#testimonials .section-motion-bg,
.testimonials-ribbon-section .section-motion-bg,
.contact-glass-motion-bg,
#contact .section-motion-bg,
.contact-glass-section .section-motion-bg,
.contact-page-hero .section-motion-bg {
  opacity: 1 !important;
}

/* -- TYPOGRAPHY HEADINGS & HIGHLIGHTS ---------------------------- */
h1, h2, h3, h4, h5, h6,
.section-title,
.service-title,
.why-title,
.project-title,
.stat-number,
.testimonial-author-name {
  color: #0f172a !important;
}

p,
.content-text,
.section-subtitle,
.service-desc,
.why-card p,
.testimonial-quote,
.project-desc,
.about-desc,
.tech-card p {
  color: #334155 !important;
}

.hero-subtitle {
  color: #475569 !important;
}

/* -- TEXT GRADIENTS (Corporate Deep Blue Highlight) --------------- */
.text-gradient,
#about .text-gradient,
#services .text-gradient,
#tech .text-gradient,
#projects .text-gradient,
#why-us .text-gradient,
#testimonials .text-gradient,
#contact .text-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #0864C5 55%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* -- HERO SECTION TYPOGRAPHY (Brilliant White & Crystal Contrast) - */
.hero-title,
.hero-title-line,
.hero-title-sub {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6) !important;
}

.hero-dynamic-text,
#heroDynamicText,
.hero-title .text-gradient.hero-dynamic-text,
.hero-highlight-wrap .text-gradient {
  color: #38bdf8 !important;
  background: linear-gradient(135deg, #ffffff 0%, #67e8f9 25%, #38bdf8 60%, #00d2ff 85%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.75)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)) !important;
  font-weight: 800 !important;
  display: inline-block !important;
}

.hero-typing-cursor {
  background-color: #38bdf8 !important;
  box-shadow: 0 0 10px #38bdf8, 0 0 20px #00d2ff, 0 0 35px rgba(56, 189, 248, 0.95) !important;
}

.hero-description {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
}

.hero-stats-row .stat-number {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.hero-stats-row .stat-plus {
  color: #38bdf8 !important;
}

.hero-stats-row .stat-label {
  color: rgba(255, 255, 255, 0.8) !important;
}

.cinema-title-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: none !important;
  display: inline;
}

/* -- SECTION ALTERNATION (Crisp White & Soft Slate Cadence) ------- */
#hero         { background: #0b051c !important; }
#about        { background: transparent !important; }
#tech         { background: #ffffff !important; }
#why-us       { background: #f8fafc !important; }
#services     { background: transparent !important; }
#projects     { background: #f8fafc !important; }
#testimonials { background: #ffffff !important; }
#contact      { background: #f8fafc !important; }
.section      { background-color: transparent; }

/* -- SECTION HEADER ACCENT DIVIDER -------------------------------- */
.section-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #0864C5, #00A884) !important;
  border-radius: 9999px;
  margin: 18px auto 0;
  box-shadow: none !important;
}

/* -- CLIENT MARQUEE STRIP (User Screenshot Component) ------------- */
.marquee-container,
.marquee-purple,
.marquee-amber,
.marquee-violet,
.marquee-emerald,
.marquee-cyan,
.marquee-magenta,
.marquee-blue,
.marquee-teal {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.marquee-item {
  color: #0f172a !important;
  font-weight: 700 !important;
  opacity: 0.95 !important;
}

.marquee-item:hover {
  color: #0864C5 !important;
}

/* -- NAVIGATION HEADER (Translucent White Floating Dock) ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #cbd5e1 !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.09),
    0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.brand-name {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.brand-sub {
  color: #0864C5 !important;
}

.nav-status-pill {
  background: rgba(22, 163, 74, 0.1) !important;
  border: 1px solid #16a34a !important;
  color: #16a34a !important;
  box-shadow: none !important;
}

.status-dot-pulse {
  background: #16a34a !important;
  box-shadow: 0 0 6px #16a34a !important;
}

.nav-links {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.nav-link {
  color: #334155 !important;
}

.nav-link:hover {
  color: #0864C5 !important;
  background: rgba(8, 100, 197, 0.08) !important;
}

.nav-link.active {
  background: rgba(8, 100, 197, 0.12) !important;
  color: #0864C5 !important;
  box-shadow: inset 0 0 0 1px rgba(8, 100, 197, 0.3) !important;
  font-weight: 700 !important;
}

.nav-caret {
  color: #64748b !important;
}

.nav-item-dropdown:hover .nav-caret {
  color: #0864C5 !important;
}

.nav-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12) !important;
}

.dropdown-item {
  color: #0f172a !important;
}

.dropdown-item:hover {
  background: #f8fafc !important;
  color: #0864C5 !important;
}

.dropdown-text strong {
  color: #0f172a !important;
}

.dropdown-text span {
  color: #64748b !important;
}

.header-wa-chip {
  background: rgba(37, 211, 102, 0.12) !important;
  border: 1px solid rgba(37, 211, 102, 0.38) !important;
  color: #16a34a !important;
}

.header-wa-chip:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

.header-consult-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.35) !important;
}

.header-consult-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #c2410c 100%) !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.45) !important;
}

/* -- MOBILE DRAWER NAVIGATION ------------------------------------- */
.mobile-drawer {
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

.drawer-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

.drawer-link {
  color: #1e293b !important;
}

.drawer-link:hover, .drawer-link.active {
  color: #0864C5 !important;
}

.drawer-sublink {
  color: #475569 !important;
}

.drawer-sublink:hover {
  color: #0864C5 !important;
}

.drawer-submenu {
  border-left-color: #cbd5e1 !important;
}

.drawer-close-btn,
.mobile-toggle-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* -- BUTTONS ------------------------------------------------------ */
.btn-primary {
  background: linear-gradient(135deg, #0864C5 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(8, 100, 197, 0.3) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0756aa 0%, #0369a1 100%) !important;
  box-shadow: 0 8px 24px rgba(8, 100, 197, 0.4) !important;
}

.btn-secondary {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.btn-consult-action {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.35) !important;
}

/* -- CARDS (Refined Light Soft Pastel Tint with Crisp Border & Luminous Shadows) */
.service-card .face.front,
.service-card .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #edf4fc 45%, #e1edfc 100%) !important;
  border: 1.5px solid #cce0f5 !important;
  box-shadow: 0 10px 30px -4px rgba(8, 100, 197, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  color: #1e293b !important;
}

.service-card:hover .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #e4f0fe 40%, #d4e7fc 100%) !important;
  border-color: #0864C5 !important;
  box-shadow: 0 20px 42px -6px rgba(8, 100, 197, 0.24), 0 4px 14px rgba(8, 100, 197, 0.1) !important;
}

.glass-card,
.why-card,
.testimonial-card,
.tech-item-card,
.protocol-card,
.about-hero-lead-card,
.lux-contact-card,
.lux-nda-box,
.lux-proposal-panel,
.mosaic-item-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
  color: #1e293b !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-card:hover,
.why-card:hover,
.testimonial-card:hover,
.protocol-card:hover,
.lux-contact-card:hover {
  border-color: #0864C5 !important;
  box-shadow: 0 14px 36px rgba(8, 100, 197, 0.12) !important;
  transform: translateY(-4px) !important;
}

.tech-item-card:hover {
  background: #ffffff !important;
  border-color: #0864C5 !important;
  box-shadow: 0 14px 36px rgba(8, 100, 197, 0.15) !important;
}

.projects-mosaic-wrapper {
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
}

.tcs-svc-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
  color: #1e293b !important;
}

.tcs-svc-card:hover {
  border-color: #0864C5 !important;
  box-shadow: 0 14px 32px rgba(8, 100, 197, 0.14) !important;
}

.tcs-highlight-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

/* -- SUBPAGE HERO (Consistent Corporate Architecture Template) ----- */
.subpage-hero {
  position: relative !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.subpage-hero-bg,
.subpage-hero .section-motion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 0 !important;
  opacity: 1 !important;
}

.subpage-bg-img,
.subpage-hero .section-motion-bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  opacity: 0.38 !important;
  filter: saturate(1.1) contrast(1.05) !important;
  pointer-events: none !important;
}

.subpage-hero-overlay,
.subpage-hero .who-we-are-video-overlay,
.subpage-hero .how-we-work-video-overlay,
.subpage-hero .contact-glass-ambient-veil,
.subpage-hero .motion-overlay-purple {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(248, 250, 252, 0.95) 0%, rgba(248, 250, 252, 0.85) 45%, rgba(248, 250, 252, 0.5) 75%, rgba(248, 250, 252, 0.2) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.subpage-hero > .container,
.subpage-hero > .container-fluid {
  position: relative !important;
  z-index: 2 !important;
}

.subpage-hero .text-gradient,
.subpage-hero h1 .text-gradient,
.subpage-hero h2 .text-gradient {
  background: linear-gradient(135deg, #0864C5 0%, #0284c7 40%, #00A884 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 800 !important;
  display: inline-block !important;
}

.subpage-hero .hero-title,
.subpage-hero .section-title,
.subpage-hero h1,
.subpage-hero h2 {
  color: #0f172a !important;
}

.subpage-hero p,
.subpage-hero .section-subtitle,
.breadcrumb,
.breadcrumbs {
  color: #475569 !important;
}

.breadcrumbs a {
  color: #0864C5 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.breadcrumbs a:hover {
  color: #0284c7 !important;
  text-decoration: underline !important;
}

.breadcrumbs .separator {
  color: #94a3b8 !important;
  opacity: 0.85 !important;
}

.breadcrumbs .current {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* -- BADGE TAGS & ACCENTS ------------------------------------------ */
.badge-tag {
  background: rgba(8, 100, 197, 0.1) !important;
  border: 1px solid rgba(8, 100, 197, 0.3) !important;
  color: #0864C5 !important;
  box-shadow: none !important;
}

.hero-section .badge-tag,
.hero .badge-tag,
.hero-grid .badge-tag {
  background: rgba(8, 100, 197, 0.32) !important;
  border: 1.5px solid #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

.hero-section .badge-tag span,
.hero .badge-tag span,
.hero-grid .badge-tag span {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

.hero-section .badge-pulse-dot,
.hero .badge-pulse-dot,
.hero-grid .badge-pulse-dot {
  background-color: #34d399 !important;
  box-shadow: 0 0 10px #34d399 !important;
}

.why-number {
  background: linear-gradient(135deg, #0864C5 0%, #00A884 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
}

.step-badge {
  background: linear-gradient(135deg, #0864C5, #00A884) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(8, 100, 197, 0.35) !important;
}

/* -- COMPREHENSIVE LIGHT THEME CARDS & TYPOGRAPHY ENFORCEMENT ------ */
.process-step-card,
.pillar-item,
.pod-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  color: #1e293b !important;
  border-radius: 16px !important;
  padding: 32px 26px !important;
  transition: all 0.3s ease !important;
}

.process-step-card:hover,
.pillar-item:hover {
  border-color: #0864C5 !important;
  box-shadow: 0 14px 36px rgba(8, 100, 197, 0.12) !important;
  transform: translateY(-4px) !important;
}

.step-title,
.why-title,
.service-title,
.pillar-text strong,
.tech-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.step-desc,
.why-desc,
.service-desc,
.pillar-text span,
.tech-category,
.about-lead,
.service-feature-item {
  color: #334155 !important;
}

.service-feature-item strong {
  color: #0f172a !important;
}

.contact-section-wrapper {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.contact-section-wrapper h2,
.contact-section-wrapper h3,
.contact-section-wrapper strong,
#contact h2,
#contact h3,
#contact strong {
  color: #0f172a !important;
}

.contact-section-wrapper p,
#contact p {
  color: #334155 !important;
}

#modalProjectClient,
#modalProjectTimeline {
  color: #0f172a !important;
}

#modalProjectResults {
  color: #1e293b !important;
}

.lux-card-value {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.lux-card-sub {
  color: #64748b !important;
}

.lux-card-label {
  color: #0864C5 !important;
}

/* -- MODALS -------------------------------------------------------- */
.modal-content,
.project-modal-content,
.consult-modal-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2) !important;
  color: #1e293b !important;
}

.modal-content h2,
.modal-content h3,
.project-modal-content h2,
.consult-modal-card h2 {
  color: #0f172a !important;
}

/* -- FORMS & INPUTS ------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #0864C5 !important;
  box-shadow: 0 0 0 3px rgba(8, 100, 197, 0.15) !important;
  outline: none !important;
}

label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

::placeholder {
  color: #94a3b8 !important;
}

/* -- COURSES DIRECTORY & CERTIFICATES ----------------------------- */
.courses-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
  position: relative;
  z-index: 2;
}

.course-card-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.course-card-item:hover {
  transform: translateY(-7px) scale(1.015);
  border-color: #0864C5 !important;
  box-shadow: 0 16px 36px rgba(8, 100, 197, 0.15) !important;
}

.course-card-thumb {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f1f5f9 !important;
}

.course-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card-item:hover .course-card-thumb img {
  transform: scale(1.08);
}

.course-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.5) 100%) !important;
  pointer-events: none;
}

.course-level-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  z-index: 2;
  backdrop-filter: blur(8px);
}

.course-card-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.course-duration {
  font-size: 0.82rem;
  color: #64748b !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.rating-num {
  font-size: 0.8rem;
  color: #475569 !important;
  font-weight: 600;
}

.course-title {
  color: #0f172a !important;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
  transition: color 0.25s ease;
}

.course-card-item:hover .course-title {
  color: #0864C5 !important;
}

.course-excerpt {
  color: #475569 !important;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.course-pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0 !important;
  margin-bottom: 16px;
}

.course-current-price {
  font-size: 1.35rem;
  font-weight: 800;
  color: #00A884 !important;
}

.course-orig-price {
  font-size: 0.95rem;
  color: #94a3b8 !important;
  text-decoration: line-through;
}

.course-discount-tag {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.course-filter-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.course-filter-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

.course-filter-btn.active {
  background: #0864C5 !important;
  border-color: #0864C5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(8, 100, 197, 0.35) !important;
}

.course-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: rgba(255, 120, 8, 0.1) !important;
  border: 1px solid #FF7808 !important;
  color: #FF7808 !important;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.course-admin-pill:hover {
  background: #FF7808 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(255, 120, 8, 0.45) !important;
  transform: translateY(-2px);
}

/* Course Modal Overlay Backdrop & Dialog */
.course-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.course-modal-backdrop.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.course-modal-dialog {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  max-width: 680px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28) !important;
  color: #1e293b !important;
  position: relative !important;
  padding: 32px 34px !important;
  transform: scale(0.92) translateY(15px) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.course-modal-backdrop.active .course-modal-dialog {
  transform: scale(1) translateY(0) !important;
}

.course-modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.course-modal-close:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) !important;
}

.course-modal-header {
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 18px !important;
  margin-bottom: 22px !important;
}

.course-duration-pill, .course-rating-pill {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.modal-syllabus-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.modal-syllabus-list li {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.2s ease !important;
}

.modal-syllabus-list li:hover {
  background: #f1f5f9 !important;
  border-color: #0864C5 !important;
  color: #0f172a !important;
}

.syllabus-num {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  background: rgba(8, 100, 197, 0.12) !important;
  color: #0864C5 !important;
  flex-shrink: 0 !important;
}

/* -- ACADEMY ADMIN PORTAL STYLING (courses-admin.html) ------------ */
.admin-nav {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

.admin-nav a span {
  color: #0f172a !important;
}

.admin-stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}

.admin-stat-val {
  color: #0f172a !important;
}

.admin-stat-label {
  color: #475569 !important;
}

.admin-tabs-bar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}

.admin-tabs-heading {
  color: #0f172a !important;
}

.admin-tab-btn {
  color: #475569 !important;
  background: transparent !important;
}

.admin-tab-btn:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

.admin-tab-btn.active {
  background: #0864C5 !important;
  color: #ffffff !important;
  border-color: #0864C5 !important;
}

.admin-controls-header {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

.admin-search-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.admin-table-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

table.admin-table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

table.admin-table tbody td {
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

table.admin-table tbody tr:hover {
  background: #f8fafc !important;
}

.auth-card,
.admin-modal-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

.auth-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* -- SIMPLIFIED MODERN EXECUTIVE FOOTER ---------------------------- */
.site-footer {
  position: relative !important;
  overflow: hidden !important;
  background: #f0f7f4 !important;
  border-top: 1px solid #d1e5dd !important;
  color: #334155 !important;
  padding: 0 0 24px !important;
  z-index: 10 !important;
}

.footer-bg-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 0 !important;
}

.footer-bg-img {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  min-width: 1200px !important;
  max-width: 2560px !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
  filter: saturate(1.1) contrast(1.05) !important;
}

.footer-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(240, 247, 244, 0.88) 0%, rgba(240, 247, 244, 0.62) 40%, rgba(235, 250, 245, 0.35) 80%, rgba(158, 199, 159, 0.22) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.site-footer > .container {
  position: relative !important;
  z-index: 2 !important;
}

.footer-trust-strip {
  display: none !important;
}

.footer-main-grid {
  display: grid !important;
  grid-template-columns: 1.8fr 1.1fr 1.1fr 1.5fr !important;
  gap: 48px !important;
  padding: 56px 0 36px !important;
  align-items: start !important;
}

.footer-brand-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.footer-brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.brand-name {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.brand-sub {
  font-size: 0.76rem !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.footer-brand-desc {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 !important;
  max-width: 320px !important;
}

.footer-entity-meta {
  display: none !important;
}

.footer-social-strip {
  display: flex !important;
  gap: 10px !important;
  margin-top: 6px !important;
}

.footer-social-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.footer-social-icon:hover {
  background: #0864C5 !important;
  border-color: #0864C5 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(8, 100, 197, 0.25) !important;
}

.footer-social-icon.whatsapp-accent {
  color: #25D366 !important;
  border-color: rgba(37, 211, 102, 0.4) !important;
  background: rgba(37, 211, 102, 0.08) !important;
}

.footer-social-icon.whatsapp-accent:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #ffffff !important;
}

.footer-links-col {
  display: flex !important;
  flex-direction: column !important;
}

.footer-heading {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  margin-bottom: 18px !important;
  position: relative !important;
  display: inline-block !important;
}

.footer-heading::after {
  content: '' !important;
  display: block !important;
  width: 22px !important;
  height: 2.5px !important;
  background: #0864C5 !important;
  margin-top: 6px !important;
  border-radius: 2px !important;
}

.footer-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer-links-list li {
  margin: 0 !important;
}

.footer-links-list a {
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
  color: #475569 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  white-space: normal !important;
}

.footer-links-list a:hover {
  color: #0864C5 !important;
  transform: translateX(3px) !important;
}

.footer-links-list a i {
  color: #0864C5 !important;
  font-size: 0.72rem !important;
  flex-shrink: 0 !important;
}

.footer-dispatch-box {
  display: none !important;
}

.footer-hq-col {
  display: flex !important;
  flex-direction: column !important;
}

.footer-hq-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
}

.hq-card-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 0.88rem !important;
  color: #334155 !important;
  line-height: 1.5 !important;
}

.hq-card-item i {
  color: #0864C5 !important;
  font-size: 1rem !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.hq-card-item a {
  color: #0864C5 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.hq-card-item a:hover {
  text-decoration: underline !important;
}

.hq-status-pill {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #059669 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
}

.status-pulse-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
}

.footer-legal-bar {
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 24px !important;
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.copyright-text {
  font-size: 0.85rem !important;
  color: #64748b !important;
  margin: 0 !important;
}

.copyright-text strong {
  color: #0f172a !important;
}

.legal-links {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.legal-links a {
  font-size: 0.84rem !important;
  color: #64748b !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.legal-links a:hover {
  color: #0864C5 !important;
}

@media (max-width: 1024px) {
  .footer-main-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
  }
}

@media (max-width: 640px) {
  .footer-main-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 36px 0 24px !important;
  }
  .footer-legal-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

.footer-legal-bar,
.footer-bottom {
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

.copyright-text {
  color: #64748b !important;
}

.copyright-text strong {
  color: #0f172a !important;
}

.legal-cin, .legal-msme {
  color: #0864C5 !important;
}

.legal-links a {
  color: #64748b !important;
}

.legal-links a:hover {
  color: #0864C5 !important;
}

.legal-compliance-badge {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0864C5 !important;
}

.legal-compliance-badge i {
  color: #00A884 !important;
}

/* -- PRE-FOOTER TRUST & COMPLIANCE STRIP --------------------------- */
.footer-trust-strip {
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.trust-strip-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.trust-strip-item:hover {
  background: #ffffff !important;
  border-color: #0864C5 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(8, 100, 197, 0.12) !important;
}

.trust-icon-box {
  background: rgba(8, 100, 197, 0.08) !important;
  border: 1px solid rgba(8, 100, 197, 0.22) !important;
  color: #0864C5 !important;
}

.trust-content strong {
  color: #0f172a !important;
}

.trust-content span {
  color: #64748b !important;
}

/* -- FILTER BUTTONS & PILLS (PROJECTS & SERVICES) ----------------- */
.filter-btn,
.services-filter-nav .filter-btn,
.projects-filter-nav .filter-btn,
#services .filter-btn,
#projects .filter-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.filter-btn:hover,
.services-filter-nav .filter-btn:not(.active):hover,
.projects-filter-nav .filter-btn:not(.active):hover,
#services .filter-btn:hover,
#projects .filter-btn:hover {
  background: #f8fafc !important;
  border-color: #0864C5 !important;
  color: #0864C5 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(8, 100, 197, 0.12) !important;
}

.filter-btn.active,
.services-filter-nav .filter-btn.active,
.projects-filter-nav .filter-btn.active,
#services .filter-btn.active,
#projects .filter-btn.active {
  background: #0864C5 !important;
  border-color: #0864C5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(8, 100, 197, 0.35) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}

/* -- ABOUT SECTION & CORPORATE STORY / PILLARS ------------------- */
.about-hero-lead-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

.about-hero-lead-card::before {
  background: #0864C5 !important;
}

.lead-quote-icon {
  color: #0864C5 !important;
}

.lead-quote-text {
  color: #1e293b !important;
}

.lead-meta-row {
  border-top: 1px solid #e2e8f0 !important;
}

.lead-meta-item {
  color: #475569 !important;
}

.lead-meta-item i {
  color: #0864C5 !important;
}

.about-narrative-column {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.06) !important;
}

.about-tabs-nav {
  border-bottom: 1px solid #e2e8f0 !important;
}

.about-tab-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

.about-tab-btn:hover {
  background: rgba(8, 100, 197, 0.08) !important;
  border-color: #0864C5 !important;
  color: #0864C5 !important;
}

.about-tab-btn.active {
  background: #0864C5 !important;
  border-color: #0864C5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(8, 100, 197, 0.35) !important;
}

.about-tab-btn .tab-num {
  background: rgba(0, 0, 0, 0.08) !important;
  color: inherit !important;
}

.about-tab-btn.active .tab-num {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.panel-tag {
  background: rgba(8, 100, 197, 0.08) !important;
  border: 1px solid rgba(8, 100, 197, 0.25) !important;
  color: #0864C5 !important;
}

.panel-title {
  color: #0f172a !important;
}

.panel-lead {
  color: #1e293b !important;
}

.panel-desc {
  color: #475569 !important;
}

.takeaway-pill {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

.takeaway-pill i {
  color: #00A884 !important;
}

.about-actions-row {
  border-top: 1px solid #e2e8f0 !important;
}

.about-toggle-all-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

.about-toggle-all-btn:hover {
  background: #e2e8f0 !important;
  border-color: #0864C5 !important;
  color: #0864C5 !important;
}

.about-all-pillars-bento .bento-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

.about-all-pillars-bento .bento-card h4 {
  color: #0f172a !important;
}

.about-all-pillars-bento .bento-card p {
  color: #475569 !important;
}

.about-all-pillars-bento .bento-badge {
  background: rgba(8, 100, 197, 0.08) !important;
  color: #0864C5 !important;
  border: 1px solid rgba(8, 100, 197, 0.2) !important;
}

.about-visual-column .about-image-card {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}

.about-visual-column .image-floating-chip {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.about-visual-column .about-experience-badge {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

.about-visual-column .exp-years {
  color: #0864C5 !important;
}

.about-visual-column .exp-text {
  color: #1e293b !important;
}

.about-visual-column .exp-text strong {
  color: #0f172a !important;
}

.about-campus-highlights .highlight-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.about-campus-highlights .highlight-box:hover {
  background: #f8fafc !important;
  border-color: #0864C5 !important;
  box-shadow: 0 8px 24px rgba(8, 100, 197, 0.12) !important;
}

.about-campus-highlights .highlight-icon {
  background: rgba(8, 100, 197, 0.08) !important;
  border: 1px solid rgba(8, 100, 197, 0.2) !important;
  color: #0864C5 !important;
}

.about-campus-highlights .highlight-info strong {
  color: #0f172a !important;
}

.about-campus-highlights .highlight-info span {
  color: #64748b !important;
}

/* -- SERVICES GRID & 12 3D FLIP CARDS ----------------------------- */
.services-grid {
  perspective: 1200px !important;
}

/* 3D Left-to-Right Turning Motion Card Architecture */
.service-card.card,
.service-card {
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
  border-radius: var(--radius-lg) !important;
  background: transparent !important;
  border: none !important;
}

/* Elevate card cleanly on hover */
.service-card:hover {
  transform: translateY(-8px) !important;
}

.service-card .face {
  border-radius: var(--radius-lg) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  transition: transform 0.65s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.35s ease, box-shadow 0.35s ease !important;
}

.service-card .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #edf4fc 45%, #e1edfc 100%) !important;
  border: 1.5px solid #cce0f5 !important;
  box-shadow: 0 10px 30px -4px rgba(8, 100, 197, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: rotateY(0deg) !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 38px 26px !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
}

.service-card:hover .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #e4f0fe 40%, #d4e7fc 100%) !important;
  border-color: #0864C5 !important;
  box-shadow: 0 20px 42px -6px rgba(8, 100, 197, 0.24), 0 4px 14px rgba(8, 100, 197, 0.1) !important;
}

.service-card .face.back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  background: linear-gradient(165deg, #ffffff 0%, #edf4fc 45%, #e1edfc 100%) !important;
  border: 1.5px solid #0864C5 !important;
  box-shadow: 0 16px 40px rgba(8, 100, 197, 0.18) !important;
  color: #1e293b !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: rotateY(180deg) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 28px 24px !important;
  z-index: 1 !important;
}

/* Authentic Left-to-Right Turning Motion:
   Hover or Click spins the front face horizontally to the left (0deg -> -180deg)
   and brings the back face into view from the right (180deg -> 0deg) */
.service-card:hover .face.front,
.service-card.is-active .face.front,
.service-card.is-flipped .face.front {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: rotateY(-180deg) !important;
}

.service-card:hover .face.back,
.service-card.is-active .face.back,
.service-card.is-flipped .face.back {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  transform: rotateY(0deg) !important;
  z-index: 3 !important;
}

.service-back-title {
  color: #0f172a !important;
}

.service-card .face.back .service-desc {
  color: #334155 !important;
}

.service-feature-item {
  color: #334155 !important;
}

.service-feature-item i {
  color: #059669 !important;
}

/* ==========================================================================
   ORGANIC ASYMMETRICAL CARD SHAPING SYSTEM (Exact Match to User Reference)
   Diagonal rounded geometry: top-left 12px, top-right 32px, bottom-right 12px, bottom-left 32px
   ========================================================================== */
.service-card,
.service-card .face,
.service-card .face.front,
.service-card .face.back,
.services-grid .service-card,
.services-grid .glass-card,
.glass-card,
.service-card:not(:has(.face)),
.bento-card,
.pillar-luxury-card,
.process-step-box,
.why-card,
.tcs-svc-card,
.protocol-card,
.lux-contact-card,
.testimonial-card {
  border-radius: 12px 32px !important;
}

.service-icon-box,
.dropdown-icon-box,
.pillar-card-icon,
.pillar-icon {
  border-radius: 10px 22px !important;
}

.btn-read-more,
.btn-flip-back,
.btn-consult-action {
  border-radius: 8px 18px !important;
}

/* Service Card & Glass Card Typography Contrast */
.service-front-title,
.service-back-title,
.glass-card h3,
.services-grid .glass-card h3,
.bento-card h4,
.pillar-luxury-card h4 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700 !important;
}

.service-front-desc,
.service-desc,
.glass-card p,
.services-grid .glass-card p,
.bento-card p,
.pillar-luxury-card p {
  color: #334155 !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.service-features-list .service-feature-item,
.glass-card ul li,
.services-grid .glass-card ul li {
  color: #1e293b !important;
  font-weight: 500 !important;
}

/* Dark Section Title & Heading Visibility Guarantee */
section[style*="#06162d"] .section-title,
section[style*="#06162d"] .section-title span,
section[style*="#06162d"] h1,
section[style*="#06162d"] h2,
section[style*="#06162d"] h3,
section[style*="#061224"] .section-title,
section[style*="#061224"] .section-title span,
section[style*="#061224"] h1,
section[style*="#061224"] h2,
section[style*="#061224"] h3,
.dark-section .section-title,
.dark-section .section-title span,
.hero-section .section-title,
.hero-section .section-title span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

section[style*="#06162d"] .text-gradient,
section[style*="#061224"] .text-gradient,
.dark-section .text-gradient {
  background: linear-gradient(135deg, #38bdf8 0%, #67e8f9 50%, #34d399 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   12 DISTINCT PASTEL CARD THEMES (Each with its Own Color in Same Soft Shade)
   ========================================================================== */

/* 1. Technology & Software Development (Mint / Emerald) */
.services-grid > .service-card:nth-child(1) .face.front,
.services-grid > .glass-card:nth-child(1),
.service-card-tech .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 45%, #dcfce7 100%) !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 10px 30px -4px rgba(16, 185, 129, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(1):hover .face.front,
.services-grid > .glass-card:nth-child(1):hover,
.service-card-tech:hover .face.front {
  border-color: #10b981 !important;
  box-shadow: 0 20px 42px -6px rgba(16, 185, 129, 0.25) !important;
}
.services-grid > .service-card:nth-child(1) .face.back,
.service-card-tech .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 45%, #dcfce7 100%) !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.18) !important;
}
.services-grid > .service-card:nth-child(1) .service-icon-box,
.services-grid > .glass-card:nth-child(1) .service-icon-box,
.service-card-tech .service-icon-box {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #059669 !important;
}
.services-grid > .service-card:nth-child(1) .btn-read-more,
.service-card-tech .btn-read-more,
.services-grid > .service-card:nth-child(1) .btn-consult-action,
.service-card-tech .btn-consult-action {
  background: #059669 !important;
  border: 1.5px solid #059669 !important;
  color: #ffffff !important;
}

/* 2. Artificial Intelligence & Machine Learning (Cyan / Deep Teal) */
.services-grid > .service-card:nth-child(2) .face.front,
.services-grid > .glass-card:nth-child(2),
.service-card-ai .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #ecfeff 45%, #cffafe 100%) !important;
  border: 1.5px solid #67e8f9 !important;
  box-shadow: 0 10px 30px -4px rgba(6, 182, 212, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(2):hover .face.front,
.services-grid > .glass-card:nth-child(2):hover,
.service-card-ai:hover .face.front {
  border-color: #06b6d4 !important;
  box-shadow: 0 20px 42px -6px rgba(6, 182, 212, 0.25) !important;
}
.services-grid > .service-card:nth-child(2) .face.back,
.service-card-ai .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #ecfeff 45%, #cffafe 100%) !important;
  border: 1.5px solid #0891b2 !important;
  box-shadow: 0 16px 40px rgba(6, 182, 212, 0.18) !important;
}
.services-grid > .service-card:nth-child(2) .service-icon-box,
.services-grid > .glass-card:nth-child(2) .service-icon-box,
.service-card-ai .service-icon-box {
  background: rgba(6, 182, 212, 0.16) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  color: #0891b2 !important;
}
.services-grid > .service-card:nth-child(2) .btn-read-more,
.service-card-ai .btn-read-more,
.services-grid > .service-card:nth-child(2) .btn-consult-action,
.service-card-ai .btn-consult-action {
  background: #0891b2 !important;
  border: 1.5px solid #0891b2 !important;
  color: #ffffff !important;
}

/* 3. Cloud Migration & DevOps (Sea Green / Mint) */
.services-grid > .service-card:nth-child(3) .face.front,
.services-grid > .glass-card:nth-child(3),
.service-card-cloud .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 45%, #ccfbf1 100%) !important;
  border: 1.5px solid #5eead4 !important;
  box-shadow: 0 10px 30px -4px rgba(20, 184, 166, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(3):hover .face.front,
.services-grid > .glass-card:nth-child(3):hover,
.service-card-cloud:hover .face.front {
  border-color: #14b8a6 !important;
  box-shadow: 0 20px 42px -6px rgba(20, 184, 166, 0.25) !important;
}
.services-grid > .service-card:nth-child(3) .face.back,
.service-card-cloud .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 45%, #ccfbf1 100%) !important;
  border: 1.5px solid #0d9488 !important;
  box-shadow: 0 16px 40px rgba(20, 184, 166, 0.18) !important;
}
.services-grid > .service-card:nth-child(3) .service-icon-box,
.services-grid > .glass-card:nth-child(3) .service-icon-box,
.service-card-cloud .service-icon-box {
  background: rgba(20, 184, 166, 0.16) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  color: #0d9488 !important;
}
.services-grid > .service-card:nth-child(3) .btn-read-more,
.service-card-cloud .btn-read-more,
.services-grid > .service-card:nth-child(3) .btn-consult-action,
.service-card-cloud .btn-consult-action {
  background: #0d9488 !important;
  border: 1.5px solid #0d9488 !important;
  color: #ffffff !important;
}

/* 4. Data Analytics & Business Intelligence (Sky Blue) */
.services-grid > .service-card:nth-child(4) .face.front,
.services-grid > .glass-card:nth-child(4),
.service-card-data .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #f0f9ff 45%, #e0f2fe 100%) !important;
  border: 1.5px solid #7dd3fc !important;
  box-shadow: 0 10px 30px -4px rgba(56, 189, 248, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(4):hover .face.front,
.services-grid > .glass-card:nth-child(4):hover,
.service-card-data:hover .face.front {
  border-color: #0284c7 !important;
  box-shadow: 0 20px 42px -6px rgba(56, 189, 248, 0.25) !important;
}
.services-grid > .service-card:nth-child(4) .face.back,
.service-card-data .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #f0f9ff 45%, #e0f2fe 100%) !important;
  border: 1.5px solid #0284c7 !important;
  box-shadow: 0 16px 40px rgba(56, 189, 248, 0.18) !important;
}
.services-grid > .service-card:nth-child(4) .service-icon-box,
.services-grid > .glass-card:nth-child(4) .service-icon-box,
.service-card-data .service-icon-box {
  background: rgba(56, 189, 248, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #0284c7 !important;
}
.services-grid > .service-card:nth-child(4) .btn-read-more,
.service-card-data .btn-read-more,
.services-grid > .service-card:nth-child(4) .btn-consult-action,
.service-card-data .btn-consult-action {
  background: #0284c7 !important;
  border: 1.5px solid #0284c7 !important;
  color: #ffffff !important;
}

/* 5. Cybersecurity Solutions & Governance (Purple / Violet) */
.services-grid > .service-card:nth-child(5) .face.front,
.services-grid > .glass-card:nth-child(5),
.service-card-cyber .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #faf5ff 45%, #f3e8ff 100%) !important;
  border: 1.5px solid #c084fc !important;
  box-shadow: 0 10px 30px -4px rgba(168, 85, 247, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(5):hover .face.front,
.services-grid > .glass-card:nth-child(5):hover,
.service-card-cyber:hover .face.front {
  border-color: #9333ea !important;
  box-shadow: 0 20px 42px -6px rgba(168, 85, 247, 0.25) !important;
}
.services-grid > .service-card:nth-child(5) .face.back,
.service-card-cyber .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #faf5ff 45%, #f3e8ff 100%) !important;
  border: 1.5px solid #9333ea !important;
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.18) !important;
}
.services-grid > .service-card:nth-child(5) .service-icon-box,
.services-grid > .glass-card:nth-child(5) .service-icon-box,
.service-card-cyber .service-icon-box {
  background: rgba(168, 85, 247, 0.16) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #7c3aed !important;
}
.services-grid > .service-card:nth-child(5) .btn-read-more,
.service-card-cyber .btn-read-more,
.services-grid > .service-card:nth-child(5) .btn-consult-action,
.service-card-cyber .btn-consult-action {
  background: #7c3aed !important;
  border: 1.5px solid #7c3aed !important;
  color: #ffffff !important;
}

/* 6. E-Commerce & Retail Systems (Rose / Coral) */
.services-grid > .service-card:nth-child(6) .face.front,
.services-grid > .glass-card:nth-child(6),
.service-card-ecom .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #fff1f2 45%, #ffe4e6 100%) !important;
  border: 1.5px solid #fda4af !important;
  box-shadow: 0 10px 30px -4px rgba(244, 63, 94, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(6):hover .face.front,
.services-grid > .glass-card:nth-child(6):hover,
.service-card-ecom:hover .face.front {
  border-color: #e11d48 !important;
  box-shadow: 0 20px 42px -6px rgba(244, 63, 94, 0.25) !important;
}
.services-grid > .service-card:nth-child(6) .face.back,
.service-card-ecom .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #fff1f2 45%, #ffe4e6 100%) !important;
  border: 1.5px solid #e11d48 !important;
  box-shadow: 0 16px 40px rgba(244, 63, 94, 0.18) !important;
}
.services-grid > .service-card:nth-child(6) .service-icon-box,
.services-grid > .glass-card:nth-child(6) .service-icon-box,
.service-card-ecom .service-icon-box {
  background: rgba(244, 63, 94, 0.16) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  color: #e11d48 !important;
}
.services-grid > .service-card:nth-child(6) .btn-read-more,
.service-card-ecom .btn-read-more,
.services-grid > .service-card:nth-child(6) .btn-consult-action,
.service-card-ecom .btn-consult-action {
  background: #e11d48 !important;
  border: 1.5px solid #e11d48 !important;
  color: #ffffff !important;
}

/* 7. UI/UX Design & User Experience (Pink / Magenta) */
.services-grid > .service-card:nth-child(7) .face.front,
.services-grid > .glass-card:nth-child(7),
.service-card-uiux .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #fdf2f8 45%, #fce7f3 100%) !important;
  border: 1.5px solid #f472b6 !important;
  box-shadow: 0 10px 30px -4px rgba(236, 72, 153, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(7):hover .face.front,
.services-grid > .glass-card:nth-child(7):hover,
.service-card-uiux:hover .face.front {
  border-color: #db2777 !important;
  box-shadow: 0 20px 42px -6px rgba(236, 72, 153, 0.25) !important;
}
.services-grid > .service-card:nth-child(7) .face.back,
.service-card-uiux .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #fdf2f8 45%, #fce7f3 100%) !important;
  border: 1.5px solid #db2777 !important;
  box-shadow: 0 16px 40px rgba(236, 72, 153, 0.18) !important;
}
.services-grid > .service-card:nth-child(7) .service-icon-box,
.services-grid > .glass-card:nth-child(7) .service-icon-box,
.service-card-uiux .service-icon-box {
  background: rgba(236, 72, 153, 0.16) !important;
  border-color: rgba(236, 72, 153, 0.4) !important;
  color: #db2777 !important;
}
.services-grid > .service-card:nth-child(7) .btn-read-more,
.service-card-uiux .btn-read-more,
.services-grid > .service-card:nth-child(7) .btn-consult-action,
.service-card-uiux .btn-consult-action {
  background: #db2777 !important;
  border: 1.5px solid #db2777 !important;
  color: #ffffff !important;
}

/* 8. Digital Transformation Consulting (Turquoise / Sea Green) */
.services-grid > .service-card:nth-child(8) .face.front,
.services-grid > .glass-card:nth-child(8),
.service-card-digital .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 45%, #ccfbf1 100%) !important;
  border: 1.5px solid #2dd4bf !important;
  box-shadow: 0 10px 30px -4px rgba(45, 212, 191, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(8):hover .face.front,
.services-grid > .glass-card:nth-child(8):hover,
.service-card-digital:hover .face.front {
  border-color: #0f766e !important;
  box-shadow: 0 20px 42px -6px rgba(45, 212, 191, 0.25) !important;
}
.services-grid > .service-card:nth-child(8) .face.back,
.service-card-digital .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 45%, #ccfbf1 100%) !important;
  border: 1.5px solid #0f766e !important;
  box-shadow: 0 16px 40px rgba(45, 212, 191, 0.18) !important;
}
.services-grid > .service-card:nth-child(8) .service-icon-box,
.services-grid > .glass-card:nth-child(8) .service-icon-box,
.service-card-digital .service-icon-box {
  background: rgba(45, 212, 191, 0.16) !important;
  border-color: rgba(45, 212, 191, 0.4) !important;
  color: #0d9488 !important;
}
.services-grid > .service-card:nth-child(8) .btn-read-more,
.service-card-digital .btn-read-more,
.services-grid > .service-card:nth-child(8) .btn-consult-action,
.service-card-digital .btn-consult-action {
  background: #0d9488 !important;
  border: 1.5px solid #0d9488 !important;
  color: #ffffff !important;
}

/* 9. Marketing & Brand Acceleration (Amber / Gold) */
.services-grid > .service-card:nth-child(9) .face.front,
.services-grid > .glass-card:nth-child(9),
.service-card-marketing .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #fffbeb 45%, #fef3c7 100%) !important;
  border: 1.5px solid #fcd34d !important;
  box-shadow: 0 10px 30px -4px rgba(245, 158, 11, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(9):hover .face.front,
.services-grid > .glass-card:nth-child(9):hover,
.service-card-marketing:hover .face.front {
  border-color: #d97706 !important;
  box-shadow: 0 20px 42px -6px rgba(245, 158, 11, 0.25) !important;
}
.services-grid > .service-card:nth-child(9) .face.back,
.service-card-marketing .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #fffbeb 45%, #fef3c7 100%) !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.18) !important;
}
.services-grid > .service-card:nth-child(9) .service-icon-box,
.services-grid > .glass-card:nth-child(9) .service-icon-box,
.service-card-marketing .service-icon-box {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #d97706 !important;
}
.services-grid > .service-card:nth-child(9) .btn-read-more,
.service-card-marketing .btn-read-more,
.services-grid > .service-card:nth-child(9) .btn-consult-action,
.service-card-marketing .btn-consult-action {
  background: #d97706 !important;
  border: 1.5px solid #d97706 !important;
  color: #ffffff !important;
}

/* 10. Consulting & Business Development (Royal Tech Blue) */
.services-grid > .service-card:nth-child(10) .face.front,
.services-grid > .glass-card:nth-child(10),
.service-card-consulting .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #eff6ff 45%, #dbeafe 100%) !important;
  border: 1.5px solid #93c5fd !important;
  box-shadow: 0 10px 30px -4px rgba(8, 100, 197, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(10):hover .face.front,
.services-grid > .glass-card:nth-child(10):hover,
.service-card-consulting:hover .face.front {
  border-color: #0864C5 !important;
  box-shadow: 0 20px 42px -6px rgba(8, 100, 197, 0.25) !important;
}
.services-grid > .service-card:nth-child(10) .face.back,
.service-card-consulting .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #eff6ff 45%, #dbeafe 100%) !important;
  border: 1.5px solid #0864C5 !important;
  box-shadow: 0 16px 40px rgba(8, 100, 197, 0.18) !important;
}
.services-grid > .service-card:nth-child(10) .service-icon-box,
.services-grid > .glass-card:nth-child(10) .service-icon-box,
.service-card-consulting .service-icon-box {
  background: rgba(8, 100, 197, 0.16) !important;
  border-color: rgba(8, 100, 197, 0.4) !important;
  color: #0864C5 !important;
}
.services-grid > .service-card:nth-child(10) .btn-read-more,
.service-card-consulting .btn-read-more,
.services-grid > .service-card:nth-child(10) .btn-consult-action,
.service-card-consulting .btn-consult-action {
  background: #0864C5 !important;
  border: 1.5px solid #0864C5 !important;
  color: #ffffff !important;
}

/* 11. Health & Wellness Solutions (Mint Emerald) */
.services-grid > .service-card:nth-child(11) .face.front,
.services-grid > .glass-card:nth-child(11),
.service-card-health .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 45%, #dcfce7 100%) !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 10px 30px -4px rgba(16, 185, 129, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(11):hover .face.front,
.services-grid > .glass-card:nth-child(11):hover,
.service-card-health:hover .face.front {
  border-color: #10b981 !important;
  box-shadow: 0 20px 42px -6px rgba(16, 185, 129, 0.25) !important;
}
.services-grid > .service-card:nth-child(11) .face.back,
.service-card-health .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 45%, #dcfce7 100%) !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.18) !important;
}
.services-grid > .service-card:nth-child(11) .service-icon-box,
.services-grid > .glass-card:nth-child(11) .service-icon-box,
.service-card-health .service-icon-box {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #059669 !important;
}
.services-grid > .service-card:nth-child(11) .btn-read-more,
.service-card-health .btn-read-more,
.services-grid > .service-card:nth-child(11) .btn-consult-action,
.service-card-health .btn-consult-action {
  background: #059669 !important;
  border: 1.5px solid #059669 !important;
  color: #ffffff !important;
}

/* 12. Legal & Compliance Technology (Warm Ochre / Gold) */
.services-grid > .service-card:nth-child(12) .face.front,
.services-grid > .glass-card:nth-child(12),
.service-card-legal .face.front {
  background: linear-gradient(165deg, #ffffff 0%, #fefce8 45%, #fef9c3 100%) !important;
  border: 1.5px solid #fde047 !important;
  box-shadow: 0 10px 30px -4px rgba(202, 138, 4, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.services-grid > .service-card:nth-child(12):hover .face.front,
.services-grid > .glass-card:nth-child(12):hover,
.service-card-legal:hover .face.front {
  border-color: #ca8a04 !important;
  box-shadow: 0 20px 42px -6px rgba(202, 138, 4, 0.25) !important;
}
.services-grid > .service-card:nth-child(12) .face.back,
.service-card-legal .face.back {
  background: linear-gradient(165deg, #ffffff 0%, #fefce8 45%, #fef9c3 100%) !important;
  border: 1.5px solid #ca8a04 !important;
  box-shadow: 0 16px 40px rgba(202, 138, 4, 0.18) !important;
}
.services-grid > .service-card:nth-child(12) .service-icon-box,
.services-grid > .glass-card:nth-child(12) .service-icon-box,
.service-card-legal .service-icon-box {
  background: rgba(202, 138, 4, 0.16) !important;
  border-color: rgba(202, 138, 4, 0.4) !important;
  color: #ca8a04 !important;
}
.services-grid > .service-card:nth-child(12) .btn-read-more,
.service-card-legal .btn-read-more,
.services-grid > .service-card:nth-child(12) .btn-consult-action,
.service-card-legal .btn-consult-action {
  background: #ca8a04 !important;
  border: 1.5px solid #ca8a04 !important;
  color: #ffffff !important;
}

.service-tech-tags .tech-tag {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.service-back-actions .btn-flip-back {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

.service-back-actions .btn-flip-back:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.services-accessibility-bar {
  color: #475569 !important;
}

.motion-toggle-pill {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

.motion-toggle-pill:hover {
  background: #f8fafc !important;
  border-color: #0864C5 !important;
  box-shadow: 0 4px 16px rgba(8, 100, 197, 0.15) !important;
  color: #0864C5 !important;
}

.motion-toggle-pill span,
.toggle-label-text,
.toggle-label-text span {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.motion-toggle-pill:hover span,
.motion-toggle-pill:hover .toggle-label-text,
.motion-toggle-pill:hover .toggle-label-text span {
  color: #0864C5 !important;
}

.motion-toggle-pill i,
.toggle-label-text i {
  color: #0864C5 !important;
}

.toggle-switch-track {
  background: #cbd5e1 !important;
}

.animation-toggle-input:checked + .toggle-switch-track {
  background: #0864C5 !important;
}

/* -- PROJECTS MOSAIC GRID ----------------------------------------- */
.mosaic-tile-text {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
}

.mosaic-title {
  color: #0f172a !important;
}

.mosaic-desc {
  color: #475569 !important;
}

.mosaic-meta-info {
  border-top: 1px solid #e2e8f0 !important;
}

.mosaic-metric-item strong {
  color: #0864C5 !important;
}

.mosaic-metric-item span {
  color: #64748b !important;
}

.mosaic-stack-tags .stack-tag {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.mosaic-action-row {
  border-top: 1px solid #e2e8f0 !important;
}

.btn-mosaic-explore {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0864C5 !important;
}

.btn-mosaic-explore:hover {
  background: #0864C5 !important;
  border-color: #0864C5 !important;
  color: #ffffff !important;
}

/* -- CAMPUS MAP & CONTACT SECTION --------------------------------- */
.campus-map-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07) !important;
}

.campus-map-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.campus-map-header h3 {
  color: #0f172a !important;
}

.campus-badge {
  background: rgba(8, 100, 197, 0.1) !important;
  color: #0864C5 !important;
  border: 1px solid rgba(8, 100, 197, 0.25) !important;
}

.hero-stat-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.hero-stat-chip:hover {
  border-color: #0864C5 !important;
  color: #0864C5 !important;
}

.hero-stat-chip strong {
  color: #0864C5 !important;
}

.global-pods-row {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.global-pod-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.global-pod-item:hover {
  background: #ffffff !important;
  border-color: #0864C5 !important;
  box-shadow: 0 8px 24px rgba(8, 100, 197, 0.12) !important;
}

.pod-info strong {
  color: #0f172a !important;
}

.pod-info > span {
  color: #475569 !important;
}

.pod-clock {
  color: #0864C5 !important;
}

.pod-clock-val {
  color: #0f172a !important;
}

.map-floating-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14) !important;
}

.map-floating-card h4 {
  color: #0f172a !important;
}

.map-floating-card p {
  color: #475569 !important;
}

.floating-action-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.floating-action-btn:hover {
  background: #f1f5f9 !important;
  border-color: #0864C5 !important;
  color: #0864C5 !important;
}

.floating-action-btn.primary {
  background: #0864C5 !important;
  border-color: #0864C5 !important;
  color: #ffffff !important;
}

.floating-badge {
  background: rgba(8, 100, 197, 0.1) !important;
  color: #0864C5 !important;
  border: 1px solid rgba(8, 100, 197, 0.25) !important;
}

/* -- PROTOCOL & FAQ SECTIONS -------------------------------------- */
.protocol-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

.protocol-card:hover {
  border-color: #0864C5 !important;
  box-shadow: 0 14px 32px rgba(8, 100, 197, 0.14) !important;
}

.protocol-step-num {
  color: #0864C5 !important;
  -webkit-text-fill-color: #0864C5 !important;
}

.protocol-title {
  color: #0f172a !important;
}

.protocol-desc {
  color: #475569 !important;
}

.protocol-time-tag {
  color: #0864C5 !important;
}

.faq-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.faq-card:hover {
  border-color: #0864C5 !important;
  box-shadow: 0 8px 24px rgba(8, 100, 197, 0.12) !important;
}

.faq-card.open {
  background: #ffffff !important;
  border-color: #0864C5 !important;
}

.faq-trigger {
  color: #0f172a !important;
}

.faq-answer p {
  color: #475569 !important;
}

/* -- BACK TO TOP BUTTON ------------------------------------------- */
.back-to-top {
  background: #ffffff !important;
  color: #0864C5 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
}

.back-to-top:hover {
  background: #0864C5 !important;
  color: #ffffff !important;
  border-color: #0864C5 !important;
}

/* ==========================================================================
   ENHANCED COLOR & CONTRAST OVERHAUL (v6.4)
   Fixing 4 user-highlighted sections:
   1. 4 Core Engineering Pod Pillars (.pillar-luxury-card)
   2. Technical Consultation & Estimate Modal (.modal-dialog)
   3. Call To Action Blue Banner (.cta-banner-wrapper)
   4. Social Channels Row (.social-btn)
   ========================================================================== */

/* 1. 4 CORE ENGINEERING POD PILLARS (Screenshot 1) */
.about-bottom-pillars .pillar-luxury-card,
.pillar-luxury-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  color: #1e293b !important;
}

.pillar-luxury-card:hover {
  background: #ffffff !important;
  border-color: #0864C5 !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 32px rgba(8, 100, 197, 0.14) !important;
}

.pillar-card-content h4 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.pillar-card-content p {
  color: #475569 !important;
  line-height: 1.6 !important;
}

.pillar-meta-badge {
  background: rgba(8, 100, 197, 0.08) !important;
  border: 1px solid rgba(8, 100, 197, 0.25) !important;
  color: #0864C5 !important;
  font-weight: 700 !important;
}

/* 2. TECHNICAL CONSULTATION & ESTIMATE MODAL (Screenshot 2) */
.modal-overlay {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-dialog,
.modal-content,
.project-modal-content,
.consult-modal-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25) !important;
  color: #1e293b !important;
}

.modal-header {
  border-bottom: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  padding: 22px 28px !important;
}

.modal-title,
.modal-header h3,
.modal-header h2 {
  color: #0f172a !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
}

.modal-close-btn {
  color: #64748b !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  transition: all 0.2s ease !important;
}

.modal-close-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

.modal-body {
  background: #ffffff !important;
  color: #334155 !important;
  padding: 28px !important;
}

.modal-body p {
  color: #475569 !important;
}

.calc-option-btn {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  color: #1e293b !important;
  transition: all 0.2s ease !important;
}

.calc-option-btn strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.calc-option-btn span {
  color: #64748b !important;
}

.calc-option-btn i {
  color: #0864C5 !important;
}

.calc-option-btn:hover {
  background: #f1f5f9 !important;
  border-color: #0864C5 !important;
  transform: translateY(-1px) !important;
}

.calc-option-btn.selected {
  background: rgba(8, 100, 197, 0.08) !important;
  border-color: #0864C5 !important;
  box-shadow: 0 0 0 2px rgba(8, 100, 197, 0.25) !important;
}

.calc-option-btn.selected strong {
  color: #0864C5 !important;
}

.form-label,
label.form-label {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.form-input,
.modal-body input,
.modal-body textarea,
.modal-body select {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 0.92rem !important;
}

.form-input:focus,
.modal-body input:focus,
.modal-body textarea:focus {
  border-color: #0864C5 !important;
  box-shadow: 0 0 0 3px rgba(8, 100, 197, 0.15) !important;
  outline: none !important;
}

.form-input::placeholder,
.modal-body input::placeholder,
.modal-body textarea::placeholder {
  color: #94a3b8 !important;
}

/* 3. CTA BLUE BANNER (Screenshot 3) */
.cta-banner-wrapper {
  background: linear-gradient(135deg, #0864C5 0%, #034c9c 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 50px rgba(8, 100, 197, 0.3) !important;
}

.cta-banner-text h2,
.cta-banner-wrapper h2,
.cta-section h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  font-weight: 800 !important;
}

.cta-banner-text p,
.cta-banner-wrapper p,
.cta-section p {
  color: #f1f5f9 !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.cta-banner-content .btn,
.cta-banner-wrapper .btn {
  background: #ffffff !important;
  color: #0864C5 !important;
  border: 1.5px solid #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
}

.cta-banner-content .btn:hover,
.cta-banner-wrapper .btn:hover {
  background: #f8fafc !important;
  color: #034c9c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.cta-banner-content .btn i,
.cta-banner-wrapper .btn i {
  color: #0864C5 !important;
}

/* 4. CONNECT ON SOCIAL MEDIA (Screenshot 4) */
.social-links-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.social-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0864C5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.social-btn:hover {
  background: #0864C5 !important;
  border-color: #0864C5 !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(8, 100, 197, 0.3) !important;
}

.social-btn:hover i {
  color: #ffffff !important;
}

/* NDA Security Trust Box */
.lux-nda-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lux-nda-box strong,
.lux-nda-box b {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.lux-nda-box p {
  color: #475569 !important;
}

/* Fast-Track WhatsApp VIP Banner */
.contact-quick-wa-banner .wa-banner-title,
h4.wa-banner-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.contact-quick-wa-banner .wa-banner-sub,
p.wa-banner-sub {
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
}

.contact-quick-wa-banner .wa-banner-sub strong,
p.wa-banner-sub strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Proposal form inputs */
.lux-proposal-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.06) !important;
}

.lux-proposal-panel h3 {
  color: #0f172a !important;
}

.lux-input-field {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.lux-input-field:focus {
  border-color: #0864C5 !important;
  box-shadow: 0 0 0 3px rgba(8, 100, 197, 0.15) !important;
}

.lux-input-wrap i.input-icon {
  color: #0864C5 !important;
}

/* ==========================================================================
   HERO 2-COLUMN GRID & SEAMLESS BACKGROUND AI VIDEO INTEGRATION
   Fixes the animated video into the hero background on the right side
   ========================================================================== */
.hero-grid-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 48px;
  align-items: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .hero-grid .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .hero-grid .badge-tag {
    margin: 0 0 22px 0;
  }

  .hero-grid .hero-title {
    text-align: left;
    margin: 0 0 22px 0;
    padding: 0;
    max-width: 100%;
  }

  .hero-grid .hero-description {
    text-align: left;
    margin: 0 0 34px 0;
    max-width: 640px;
  }

  .hero-grid .hero-actions {
    justify-content: flex-start;
    margin: 0 0 42px 0;
  }

  .hero-grid .hero-stats-row {
    margin: 0;
    padding: 26px 0 0;
    width: 100%;
    max-width: 680px;
  }
}

/* Hero Globe Skyline Background */
.hero-globe-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

/* Seamless Right-Side Background AI Video Visual */
.hero-visual-column {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: none;
  user-select: none;
}

.hero-bg-visual-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bg-visual-glow {
  display: none !important;
}

/* 3D Robot Mascot with Wiggle Animation */
.hero-robot-wiggle {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 20px 35px rgba(8, 100, 197, 0.45)) drop-shadow(0 8px 18px rgba(168, 85, 247, 0.35));
  animation: robotWiggleMotion 3.6s ease-in-out infinite;
  transform-origin: center bottom;
  pointer-events: none;
  user-select: none;
}

@keyframes robotWiggleMotion {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  12% {
    transform: translateY(-8px) rotate(-7deg);
  }
  24% {
    transform: translateY(-14px) rotate(6deg);
  }
  36% {
    transform: translateY(-9px) rotate(-5deg);
  }
  48% {
    transform: translateY(-3px) rotate(4deg);
  }
  60% {
    transform: translateY(-7px) rotate(-3deg);
  }
  72% {
    transform: translateY(-2px) rotate(2deg);
  }
  84% {
    transform: translateY(-5px) rotate(-1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.hero-bg-integrated-image,
.hero-bg-integrated-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 12px 28px rgba(7, 155, 226, 0.25));
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none;
  user-select: none;
}

@keyframes heroBotFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Tablet & Mobile Breakpoints */
@media (max-width: 1023px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }

  .hero-grid .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-grid .badge-tag {
    margin: 0 auto 20px;
  }

  .hero-grid .hero-title {
    text-align: center;
    margin: 0 auto 20px;
  }

  .hero-grid .hero-description {
    text-align: center;
    margin: 0 auto 28px;
  }

  .hero-grid .hero-actions {
    justify-content: center;
    margin: 0 auto 36px;
  }

  .hero-grid .hero-stats-row {
    margin: 0 auto;
    max-width: 520px;
  }

  .hero-visual-column {
    margin: 0 auto;
    max-width: 340px;
  }

  .hero-robot-wiggle,
  .hero-bg-integrated-image,
  .hero-bg-integrated-video {
    max-height: 400px;
  }
}

@media (max-width: 640px) {
  .hero-visual-column {
    max-width: 280px;
  }

  .hero-robot-wiggle,
  .hero-bg-integrated-image,
  .hero-bg-integrated-video {
    max-height: 320px;
  }
}

/* ==========================================================================
   SECTION MASCOT RUNNERS & DIVIDERS REMOVED
   Completely removes bottom runners, lines, and empty spacing across all pages
   ========================================================================== */
.section-mascot-runner-wrap,
.mascot-runner-track-line,
.mascot-runner-item {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   SCROLL-DRIVEN SECTION ENTRANCE ANIMATIONS
   Smooth fluid scroll reveal for all sections and cards (Apple / Stripe / Linear style)
   ========================================================================== */

/* Main Section Entrance */
.scroll-reveal-section {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Section Header Entrance */
.scroll-reveal-header {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.08s, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
  will-change: opacity, transform;
}

.is-revealed .scroll-reveal-header,
.scroll-reveal-header.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Staggered Grid & Card Items */
.scroll-reveal-item {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.is-revealed .scroll-reveal-item,
.scroll-reveal-item.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}


/* ==========================================================================
   ROTATE EFFECT PRESET (THE SAISHNAA ADVANTAGE & WHY-CARDS)
   Revolving circular arrow orbit badge, scroll-driven unwind rotation,
   interactive 3D tilt, and 360-degree rotation spin on click
   ========================================================================== */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  perspective: 1200px;
}

.why-card {
  position: relative;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
  color: #1e293b !important;
  transition: transform 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.4s ease, border-color 0.4s ease !important;
  transform-origin: center center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top header in card: number + rotating orbit badge */
.why-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.why-card .why-number {
  font-size: 2.3rem;
  font-weight: 900;
  font-family: var(--font-display);
  background: linear-gradient(135deg, #0864C5 0%, #00A884 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1;
  margin-bottom: 0;
}

/* Revolving Rotate Orbit Badge matching Rotate icon preset (media_1790314551233.png) */
.why-rotate-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 100, 197, 0.08);
  border: 1.5px dashed #0864C5;
  color: #0864C5;
  font-size: 1.1rem;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: rotateBadgeOrbit 12s linear infinite;
  flex-shrink: 0;
}

.why-rotate-badge i {
  display: inline-block;
  transition: transform 0.4s ease;
}

.why-card:hover .why-rotate-badge {
  background: linear-gradient(135deg, #0864C5, #00A884);
  color: #ffffff;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 18px rgba(8, 100, 197, 0.4);
  animation: rotateBadgeFast 1.2s linear infinite;
  transform: scale(1.12);
}

.why-card:hover .why-rotate-badge i {
  transform: scale(1.15);
}

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

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

/* Rotate Effect Tag / Pill */
.why-rotate-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0864C5;
  background: rgba(8, 100, 197, 0.07);
  padding: 5px 12px;
  border-radius: 20px;
  margin-top: 18px;
  width: fit-content;
  transition: all 0.35s ease;
}

.why-card:hover .why-rotate-tag {
  background: rgba(0, 168, 132, 0.12);
  color: #00A884;
  transform: translateX(4px);
}

/* Rotate Scroll-Entrance Animation */
.why-card.rotate-reveal-item {
  opacity: 0;
  transform: rotate(var(--rot-angle, -10deg)) translateY(40px) scale(0.92);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
              transform 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.2) var(--reveal-delay, 0s),
              box-shadow 0.4s ease, border-color 0.4s ease !important;
  will-change: opacity, transform;
}

/* Dynamic alternating rotation angles for the 4 advantage cards */
.why-card:nth-child(1) { --rot-angle: -11deg; --hover-angle: -2.8deg; }
.why-card:nth-child(2) { --rot-angle: 9deg;   --hover-angle: 2.8deg; }
.why-card:nth-child(3) { --rot-angle: -8deg;  --hover-angle: -2.8deg; }
.why-card:nth-child(4) { --rot-angle: 11deg;  --hover-angle: 2.8deg; }

/* Fully revealed on scroll */
.is-revealed .why-card.rotate-reveal-item,
.why-card.rotate-reveal-item.is-revealed {
  opacity: 1 !important;
  transform: rotate(0deg) translateY(0) scale(1) !important;
}

/* 3D Rotate Hover Tilt */
.why-card:hover,
.why-card.rotate-reveal-item.is-revealed:hover {
  transform: translateY(-8px) rotate(var(--hover-angle, 2.5deg)) scale(1.025) !important;
  box-shadow: 0 20px 42px rgba(8, 100, 197, 0.16), 0 0 20px rgba(0, 168, 132, 0.12) !important;
  border-color: #0864C5 !important;
}

/* 360-Degree Click Spin */
.why-card.card-spinning {
  animation: cardFullRotate 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes cardFullRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.92);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Responsive Grid adjustment for mobile screens */
@media (max-width: 992px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .why-us-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Reduced motion accessibility */
.reduce-motion .scroll-reveal-section,
.reduce-motion .scroll-reveal-header,
.reduce-motion .scroll-reveal-item,
.reduce-motion .why-card.rotate-reveal-item {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.reduce-motion .why-rotate-badge,
.reduce-motion .why-card.card-spinning {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-section,
  .scroll-reveal-header,
  .scroll-reveal-item,
  .why-card.rotate-reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .why-rotate-badge,
  .why-card.card-spinning {
    animation: none !important;
  }
}

/* ==========================================================================
   1. BULLETPROOF SITE-HEADER & BRAND LOGO CONSTRAINTS (media_1790315846885.png)
   Guarantees the logo and navbar capsule remain perfectly sized and aligned
   ========================================================================== */
.site-header {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 1440px !important;
  height: 74px !important;
  max-height: 74px !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  display: block !important;
  padding: 0 !important;
}

.site-header.scrolled {
  top: 8px !important;
  height: 66px !important;
  max-height: 66px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12) !important;
}

.site-header .header-inner {
  width: 100% !important;
  height: 100% !important;
  padding: 0 20px 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.site-header .brand-identity-pod {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.site-header .brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.site-header .brand-logo-wrap {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.site-header .brand-logo-img,
.site-header .brand-emblem-img {
  width: auto !important;
  height: 38px !important;
  max-width: 40px !important;
  max-height: 38px !important;
  object-fit: contain !important;
  display: block !important;
}

.site-header .brand-name {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
}

.site-header .brand-sub {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #0864C5 !important;
}

.site-header .nav-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(22, 163, 74, 0.1) !important;
  border: 1px solid #16a34a !important;
  color: #16a34a !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}

.site-header .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
}

.site-header .nav-link {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: #0864C5 !important;
  background: rgba(8, 100, 197, 0.1) !important;
}

.site-header .nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  width: 320px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
  padding: 10px !important;
  display: none !important;
  list-style: none !important;
  z-index: 1050 !important;
}

.site-header .nav-item-dropdown:hover .nav-dropdown-menu {
  display: block !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* ==========================================================================
   2. 3D CHROME ROBOT COVERING RIGHT SIDE EMPTY SPACE (media_1790315186239.png)
   ========================================================================== */
.hero-visual-column {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  max-width: 600px !important;
  margin-left: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-bg-visual-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-robot-glow-backdrop {
  position: absolute !important;
  width: 420px !important;
  height: 420px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(8, 100, 197, 0.28) 0%, rgba(168, 85, 247, 0.18) 50%, transparent 72%) !important;
  filter: blur(36px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: robotGlowPulse 4s ease-in-out infinite alternate !important;
}

.hero-robot-space-img {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 440px !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 35px rgba(8, 100, 197, 0.35)) drop-shadow(0 6px 18px rgba(168, 85, 247, 0.25)) !important;
  animation: heroRobotFloat 4.8s ease-in-out infinite alternate !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* ==========================================================================
   GLOBAL HQ CARD: SINGLE-LINE EMAIL ADDRESS (media_1790316344409.png)
   ========================================================================== */
.footer-main-grid {
  grid-template-columns: 1.25fr 0.9fr 0.9fr 1.65fr !important;
  gap: 32px !important;
}

.footer-hq-col {
  min-width: 320px !important;
}

.footer-hq-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.hq-card-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.hq-card-item a,
.hq-email-link {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-size: 0.88rem !important;
  color: #0864C5 !important;
  text-decoration: none !important;
  display: inline-block !important;
  letter-spacing: -0.01em !important;
}

.hq-card-item a:hover,
.hq-email-link:hover {
  text-decoration: underline !important;
  color: #00A884 !important;
}

@keyframes heroRobotFloat {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-16px) rotate(1.2deg) scale(1.02);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}

@keyframes robotGlowPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* ==========================================================================
   3. BREATHE ANIMATION EFFECT FOR TESTIMONIALS (media_1790315057456.png)
   ========================================================================== */
#testimonials,
#testimonialsContent {
  position: relative !important;
  overflow: hidden !important;
}

#testimonials .section-breathe-bg-system,
#testimonialsContent .section-breathe-bg-system,
.subpage-hero .section-breathe-bg-system {
  position: absolute !important;
  inset: -12% !important;
  width: 124% !important;
  height: 124% !important;
  pointer-events: none !important;
  animation: sectionBreathe 6.5s ease-in-out infinite alternate !important;
  transform-origin: center center !important;
  will-change: transform, opacity, filter !important;
}

@keyframes sectionBreathe {
  0% {
    transform: scale(0.95) translateY(0);
    filter: brightness(0.95) saturate(1.05);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.08) translateY(-8px);
    filter: brightness(1.22) saturate(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(0.95) translateY(0);
    filter: brightness(0.95) saturate(1.05);
    opacity: 0.8;
  }
}

.breathe-ambient-glow {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(55px) !important;
  pointer-events: none !important;
  animation: breatheOrbPulse 7s ease-in-out infinite alternate !important;
}

.breathe-glow-1 {
  width: 520px !important;
  height: 520px !important;
  top: 5% !important;
  left: 5% !important;
  background: radial-gradient(circle, rgba(8, 100, 197, 0.28) 0%, rgba(8, 100, 197, 0) 70%) !important;
}

.breathe-glow-2 {
  width: 480px !important;
  height: 480px !important;
  bottom: 5% !important;
  right: 8% !important;
  background: radial-gradient(circle, rgba(0, 168, 132, 0.25) 0%, rgba(0, 168, 132, 0) 70%) !important;
  animation-delay: -3.2s !important;
}

.breathe-glow-3 {
  width: 360px !important;
  height: 360px !important;
  top: 40% !important;
  left: 45% !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0) 70%) !important;
  animation-delay: -1.6s !important;
}

@keyframes breatheOrbPulse {
  0% {
    transform: scale(0.88);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
  100% {
    transform: scale(0.88);
    opacity: 0.6;
  }
}

/* ==========================================================================
   4. FULL ANIMATIONS & EFFECTS IN MOBILE VIEW
   Guaranteeing robot, scroll reveals, rotate, and breathe effects run on mobile
   ========================================================================== */
@media (max-width: 992px) {
  .site-header {
    height: 64px !important;
    max-height: 64px !important;
    border-radius: 16px !important;
  }

  .site-header .nav-menu {
    display: none !important;
  }

  .site-header .mobile-toggle-btn {
    display: flex !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    text-align: center !important;
  }

  .hero-content {
    margin: 0 auto !important;
    max-width: 640px !important;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .hero-visual-column {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 420px !important;
    margin: 32px auto 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .hero-robot-space-img {
    max-height: 380px !important;
    animation: heroRobotFloat 5s ease-in-out infinite alternate !important;
  }

  .hero-robot-glow-backdrop {
    width: 360px !important;
    height: 360px !important;
  }
}

@media (max-width: 640px) {
  .site-header {
    top: 8px !important;
    width: calc(100% - 16px) !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 0 6px !important;
  }

  .site-header .nav-status-pill {
    display: none !important;
  }

  .hero-visual-column {
    display: flex !important;
    max-width: 320px !important;
    margin: 24px auto 0 !important;
  }

  .hero-robot-space-img {
    max-height: 300px !important;
    animation: heroRobotFloat 5s ease-in-out infinite alternate !important;
  }

  /* Full mobile animation smoothness */
  .scroll-reveal-section,
  .scroll-reveal-item,
  .rotate-reveal-item,
  #testimonials .section-breathe-bg-system {
    will-change: opacity, transform !important;
  }
}

/* ==========================================================================
   SERVICES SECTION: CLEAN NORMAL ENTERPRISE STYLING & HEADING ROBOT FLAIR
   ========================================================================== */

#services {
  position: relative !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

#services .section-title {
  color: #0f172a !important;
}

#services .section-subtitle {
  color: #64748b !important;
}

#services .container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1440px !important;
  width: 95% !important;
}

/* Heading Area: Text Centered, Robot Positioned on the Right Side of Heading */
.services-heading-header {
  position: relative !important;
  text-align: center !important;
  margin: 0 auto 28px auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(140px, 16vw, 190px) !important;
  gap: clamp(12px, 2vw, 28px) !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1280px !important;
  padding: 8px 12px !important;
}

.services-heading-text-group {
  text-align: center !important;
  grid-column: 1 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
}

.services-heading-text-group .badge-tag {
  display: inline-flex !important;
  margin: 0 auto 12px auto !important;
}

.services-heading-text-group .section-title {
  text-align: center !important;
  margin: 0 auto 14px auto !important;
}

.services-heading-text-group .section-subtitle {
  text-align: center !important;
  margin: 0 auto !important;
}

/* Keep the artwork in its own grid column so it cannot cover the heading. */
.services-heading-robot-flair {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: min(100%, 175px) !important;
  max-width: 175px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.services-heading-robot-img {
  width: 100% !important;
  max-width: 175px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  animation: headerRobotTurnLeftRight 8s ease-in-out infinite !important;
  filter: drop-shadow(0 15px 30px rgba(0, 240, 255, 0.45)) drop-shadow(0 0 25px rgba(236, 72, 153, 0.35)) !important;
  transform-origin: center center !important;
  transition: transform 0.4s ease, filter 0.4s ease !important;
}

.services-heading-robot-img:hover {
  filter: drop-shadow(0 20px 40px rgba(0, 240, 255, 0.65)) drop-shadow(0 0 35px rgba(236, 72, 153, 0.55)) !important;
}

/* Left-to-Right Turning Motion */
@keyframes headerRobotTurnLeftRight {
  0% {
    transform: perspective(800px) rotateY(-18deg) translateY(0px) rotateZ(-1deg);
  }
  25% {
    transform: perspective(800px) rotateY(-5deg) translateY(-8px) rotateZ(0deg);
  }
  50% {
    transform: perspective(800px) rotateY(16deg) translateY(-14px) rotateZ(1deg);
  }
  75% {
    transform: perspective(800px) rotateY(3deg) translateY(-6px) rotateZ(0deg);
  }
  100% {
    transform: perspective(800px) rotateY(-18deg) translateY(0px) rotateZ(-1deg);
  }
}

.heading-robot-neon-aura {
  position: absolute !important;
  width: 180px !important;
  height: 180px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.3) 0%, rgba(217, 70, 239, 0.2) 50%, transparent 70%) !important;
  border-radius: 50% !important;
  filter: blur(20px) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  animation: headerAuraPulse 5s ease-in-out infinite alternate !important;
}

@keyframes headerAuraPulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Services Grid: Centered 3-Column Enterprise Grid */
#services .services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  perspective: 1400px !important;
  width: 100% !important;
  margin: 24px auto 0 auto !important;
}

/* Responsive Views */
@media (max-width: 1100px) and (min-width: 900px) {
  .services-heading-robot-flair {
    width: 150px !important;
    right: -10px !important;
  }
  .services-heading-robot-img {
    max-width: 150px !important;
  }
  #services .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 899px) {
  .services-heading-header {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto !important;
    gap: 4px !important;
  }

  .services-heading-robot-flair {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 10px auto 0 !important;
    width: min(155px, 42vw) !important;
  }

  .services-heading-robot-img {
    max-width: 155px !important;
    margin: 0 auto !important;
  }

  #services .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }
}

@media (max-width: 680px) {
  #services .services-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .services-heading-robot-flair {
    width: min(135px, 38vw) !important;
    margin: 8px auto 0 !important;
  }

  .services-heading-robot-img {
    max-width: 135px !important;
  }
}

/* Reduced Motion Override */
.reduce-motion .services-moving-bg-img,
.reduce-motion .services-heading-robot-img {
  animation: none !important;
  transform: none !important;
}

.reduce-motion .heading-robot-neon-aura {
  animation: none !important;
}

/* ==========================================================================
   TECH STACK SECTION: 3D GLASS CRYSTAL SPHERE MOTION BACKGROUND
   ========================================================================== */
#tech.tech-bubble-section,
.tech-bubble-section {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
  min-height: 580px !important;
}

.tech-bubble-motion-bg,
#tech .tech-bubble-motion-bg,
#tech .section-motion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  display: block !important;
}

.tech-bubble-section .tech-bubble-video,
.tech-bubble-motion-bg .tech-bubble-video,
#tech .motion-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  opacity: 1 !important;
  filter: saturate(1.1) contrast(1.05) brightness(1.0) !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
}

.tech-bubble-section .tech-bubble-poster,
.tech-bubble-motion-bg .tech-bubble-poster,
#tech .motion-img-pan {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 106% !important;
  min-height: 106% !important;
  width: 106% !important;
  height: 106% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  opacity: 1 !important;
  filter: saturate(1.1) contrast(1.05) brightness(1.0) !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  animation: techBubblePosterFloat 18s ease-in-out infinite alternate !important;
}

@keyframes techBubblePosterFloat {
  0% {
    transform: translate(-50%, -50%) scale(1) translateY(-14px);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03) translateY(8px);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) translateY(-14px);
  }
}

/* Soft subtle ambient veil to ensure text & tech cards contrast */
.tech-bubble-ambient-veil {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 900px 320px at 50% 30%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#tech .container {
  position: relative !important;
  z-index: 3 !important;
}

#tech .section-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(255, 255, 255, 0.85) !important;
}

#tech .section-title .text-gradient {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) !important;
}

#tech .section-subtitle {
  color: #1e293b !important;
  font-weight: 500 !important;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.95), 0 1px 6px rgba(255, 255, 255, 0.85) !important;
}

#tech .badge-tag {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(2, 132, 199, 0.45) !important;
  color: #0284c7 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15) !important;
  backdrop-filter: blur(8px) !important;
}

/* Tech Item Cards floating glass aesthetic */
#tech .tech-item-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#tech .tech-item-card:hover {
  background: #ffffff !important;
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 16px 36px rgba(2, 132, 199, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
}

.reduce-motion .tech-bubble-poster {
  animation: none !important;
  transform: translate(-50%, -50%) !important;
}

/* ==========================================================================
   SERVICES SUBPAGE HERO: ROBOT HAND & CITY SPHERE VISUAL
   ========================================================================== */
.services-page-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  padding: calc(var(--header-height, 80px) + 50px) 0 65px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.services-page-hero .section-title {
  color: #0f172a !important;
}

.services-page-hero .section-subtitle {
  color: #475569 !important;
  font-size: 1.12rem !important;
  line-height: 1.65 !important;
}

.services-hero-split-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  align-items: center !important;
  gap: 36px !important;
  position: relative !important;
  z-index: 3 !important;
}

.services-hero-text {
  text-align: center !important;
}

.services-hero-split-grid > .breadcrumbs {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: 100% !important;
  margin: 0 0 -18px !important;
}

.services-hero-text .section-subtitle {
  margin: 0 0 28px 0 !important;
  max-width: 620px !important;
}

.services-hero-cta {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.services-hero-visual-pane {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.services-visual-glow {
  position: absolute !important;
  width: 380px !important;
  height: 380px !important;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, rgba(16, 185, 129, 0.18) 45%, transparent 72%) !important;
  filter: blur(32px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  animation: visualGlowPulse 4s ease-in-out infinite alternate !important;
}

.services-robot-sphere-float {
  max-width: 100% !important;
  width: 440px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 32px rgba(8, 100, 197, 0.22)) !important;
  animation: servicesSphereFloat 6s ease-in-out infinite alternate !important;
}

@keyframes servicesSphereFloat {
  0% { transform: translateY(-10px) rotate(-1deg); }
  50% { transform: translateY(10px) rotate(1deg); }
  100% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes visualGlowPulse {
  0% { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 991px) {
  .services-hero-split-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .services-hero-text {
    text-align: center !important;
  }
  .services-hero-text .section-subtitle {
    margin: 0 auto 28px auto !important;
  }
  .services-hero-cta {
    justify-content: center !important;
  }
  .services-robot-sphere-float {
    width: 320px !important;
    margin: 0 auto !important;
  }
}

/* ==========================================================================
   PROJECTS SECTION: 3D GOLD & DARK GLASS CUBES MOTION BACKGROUND
   ========================================================================== */
#projects.projects-gold-section,
.projects-gold-section {
  position: relative !important;
  overflow: hidden !important;
  background: #0b0c10 !important;
}

.projects-gold-motion-bg,
#projects .projects-gold-motion-bg,
#projects .section-motion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  display: block !important;
}

.projects-gold-section .projects-gold-video,
.projects-gold-motion-bg .projects-gold-video,
#projects .motion-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.88 !important;
  filter: contrast(1.1) brightness(1.05) !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
}

.projects-gold-section .projects-gold-poster,
.projects-gold-motion-bg .projects-gold-poster,
#projects .motion-img-pan {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 106% !important;
  min-height: 106% !important;
  width: 106% !important;
  height: 106% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.88 !important;
  filter: contrast(1.1) brightness(1.05) !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  animation: projectsGoldPosterFloat 22s ease-in-out infinite alternate !important;
}

@keyframes projectsGoldPosterFloat {
  0% {
    transform: translate(-50%, -50%) scale(1) translateY(-20px);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04) translateY(12px);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) translateY(-20px);
  }
}

.projects-gold-ambient-veil {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 50% 15%, rgba(11, 12, 16, 0.45) 0%, rgba(11, 12, 16, 0.72) 70%, rgba(11, 12, 16, 0.88) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#projects .container {
  position: relative !important;
  z-index: 3 !important;
}

#projects .section-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.9) !important;
}

#projects .section-title .text-gradient,
#projects .section-title .case-studies-white,
.case-studies-white {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.6), 0 2px 10px rgba(0, 0, 0, 0.9) !important;
  filter: none !important;
}

#projects .section-subtitle {
  color: #e2e8f0 !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) !important;
}

#projects .badge-tag {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
  backdrop-filter: blur(8px) !important;
}

#projects .filter-btn {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
}

#projects .filter-btn:hover,
#projects .filter-btn.active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.35) !important;
}

#projects .projects-mosaic-wrapper {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4) !important;
  border-radius: 24px !important;
  padding: 16px !important;
}

.reduce-motion .projects-gold-poster,
.reduce-motion .services-robot-sphere-float,
.reduce-motion .testimonials-ribbon-poster,
.reduce-motion .contact-glass-poster {
  animation: none !important;
  transform: none !important;
}

/* ==========================================================================
   TESTIMONIALS SECTION: FLUID 3D LAVENDER GLASS RIBBON VIDEO MOTION SYSTEM
   ========================================================================== */
#testimonials.testimonials-ribbon-section,
.testimonials-ribbon-section {
  position: relative !important;
  overflow: hidden !important;
  background: #f1f3f9 !important;
}

.testimonials-ribbon-motion-bg,
#testimonials .testimonials-ribbon-motion-bg,
#testimonials .section-motion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  display: block !important;
}

.testimonials-ribbon-section .testimonials-ribbon-video,
.testimonials-ribbon-motion-bg .testimonials-ribbon-video,
#testimonials .motion-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.94 !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
}

.testimonials-ribbon-section .testimonials-ribbon-poster,
.testimonials-ribbon-motion-bg .testimonials-ribbon-poster,
#testimonials .motion-img-pan {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 104% !important;
  min-height: 104% !important;
  width: 104% !important;
  height: 104% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.9 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  animation: ribbonPosterFloat 20s ease-in-out infinite alternate !important;
}

@keyframes ribbonPosterFloat {
  0% {
    transform: translate(-50%, -50%) scale(1) translateY(-14px);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03) translateY(10px);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) translateY(-14px);
  }
}

.testimonials-ribbon-ambient-veil {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 50% 25%, rgba(248, 250, 252, 0.35) 0%, rgba(241, 245, 249, 0.6) 60%, rgba(226, 232, 240, 0.75) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#testimonials .container {
  position: relative !important;
  z-index: 3 !important;
}

#testimonials .section-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.9) !important;
}

#testimonials .section-title .text-gradient {
  background: linear-gradient(100deg, #0078ff 0%, #00a9ef 46%, #00bfa5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 10px rgba(0, 137, 255, 0.24)) !important;
}

#testimonials .section-subtitle {
  color: #475569 !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9) !important;
}

#testimonials .badge-tag {
  background: rgba(99, 102, 241, 0.12) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #4f46e5 !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12) !important;
  backdrop-filter: blur(8px) !important;
}

#testimonials .testimonial-card {
  min-width: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

#testimonials.testimonials-ribbon-section .testimonials-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

#testimonials.testimonials-ribbon-section .testimonial-card {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 28px !important;
  overflow: hidden !important;
  border-color: rgba(8, 100, 197, 0.16) !important;
}

#testimonials.testimonials-ribbon-section .testimonial-card:first-child {
  grid-row: 1 / 3 !important;
  padding: 38px 34px !important;
  border-top: 4px solid #0785d8 !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 247, 255, 0.96)) !important;
}

#testimonials.testimonials-ribbon-section .testimonial-card:first-child::before {
  content: "“" !important;
  position: absolute !important;
  top: 12px !important;
  right: 24px !important;
  color: rgba(8, 100, 197, 0.12) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 8rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

#testimonials.testimonials-ribbon-section .testimonial-card:first-child .testimonial-quote {
  position: relative !important;
  z-index: 1 !important;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
}

#testimonials.testimonials-ribbon-section .testimonial-card:not(:first-child) {
  display: flex !important;
  justify-content: space-between !important;
  padding: 24px 28px !important;
}

#testimonials.testimonials-ribbon-section .testimonial-author-row {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

#testimonials.testimonials-ribbon-section .author-info {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#testimonials .testimonial-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 22px 46px rgba(99, 102, 241, 0.16), 0 6px 14px rgba(15, 23, 42, 0.06) !important;
}

#testimonials .testimonial-card:nth-child(3) {
  border-color: rgba(8, 100, 197, 0.45) !important;
  box-shadow: 0 14px 34px rgba(8, 100, 197, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

#testimonials .testimonial-quote {
  color: #334155 !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

#testimonials .testimonial-stars {
  color: #f59e0b !important;
}

#testimonials .author-info strong {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  display: block !important;
}

#testimonials .author-info span {
  color: #64748b !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  display: block !important;
}

@media (max-width: 820px) {
  #testimonials.testimonials-ribbon-section .testimonials-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }

  #testimonials.testimonials-ribbon-section .testimonial-card:first-child {
    grid-row: auto !important;
  }
}

/* ==========================================================================
   CONTACT SECTION & HERO: 3D COLORFUL TRANSLUCENT GLASS CAPSULES VIDEO MOTION
   ========================================================================== */
#contact.contact-glass-section,
.contact-glass-section,
.contact-page-hero {
  position: relative !important;
  overflow: hidden !important;
  background: #fbf9f5 !important;
}

.contact-glass-motion-bg,
#contact .contact-glass-motion-bg,
#contact .section-motion-bg,
.contact-page-hero .section-motion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  display: block !important;
}

.contact-glass-section .contact-glass-video,
.contact-glass-motion-bg .contact-glass-video,
#contact .motion-video,
.contact-page-hero .motion-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.94 !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
}

.contact-glass-section .contact-glass-poster,
.contact-glass-motion-bg .contact-glass-poster,
#contact .motion-img-pan,
.contact-page-hero .motion-img-pan {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 104% !important;
  min-height: 104% !important;
  width: 104% !important;
  height: 104% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.9 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  animation: contactGlassPosterFloat 22s ease-in-out infinite alternate !important;
}

@keyframes contactGlassPosterFloat {
  0% {
    transform: translate(-50%, -50%) scale(1) translateY(-12px);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03) translateY(12px);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) translateY(-12px);
  }
}

.contact-glass-ambient-veil {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 253, 248, 0.42) 0%, rgba(251, 249, 245, 0.65) 60%, rgba(246, 242, 235, 0.8) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#contact .container,
.contact-page-hero .container {
  position: relative !important;
  z-index: 3 !important;
}

#contact .section-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.9) !important;
}

#contact .section-subtitle {
  color: #475569 !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9) !important;
}

#contact .badge-tag {
  background: rgba(234, 88, 12, 0.12) !important;
  border: 1px solid rgba(234, 88, 12, 0.35) !important;
  color: #c2410c !important;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.1) !important;
  backdrop-filter: blur(8px) !important;
}

/* Frosted glass contact cards and proposal panel for crisp readability */
#contact .lux-contact-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

#contact .lux-contact-card:hover {
  background: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 40px rgba(234, 88, 12, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

#contact .lux-proposal-panel {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

#contact .contact-map-card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06) !important;
}





/* ==========================================================================
   INDIVIDUAL SECTION BACKGROUND SYSTEM
   Allows every section on every page to showcase a unique high-res background image
   ========================================================================== */

.section-with-bg {
  position: relative !important;
  overflow: hidden !important;
}

.section-with-bg > .container {
  position: relative !important;
  z-index: 2 !important;
}

.section-custom-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.section-custom-bg .section-bg-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.65 !important;
  filter: contrast(1.15) saturate(1.25) !important;
  transform: scale(1.01);
  transition: transform 0.6s ease;
}

.section-custom-bg .section-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(248, 250, 252, 0.58) 100%) !important;
  pointer-events: none !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
}

.section-custom-bg.bg-soft-blue .section-bg-overlay {
  background: linear-gradient(180deg, rgba(240, 246, 255, 0.46) 0%, rgba(248, 250, 252, 0.58) 100%) !important;
}

.section-custom-bg.bg-soft-teal .section-bg-overlay {
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.46) 0%, rgba(248, 250, 252, 0.58) 100%) !important;
}

.section-custom-bg.bg-soft-slate .section-bg-overlay {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.48) 0%, rgba(241, 245, 249, 0.60) 100%) !important;
}


/* ==========================================================================
   3D STACKED DISCS INFOGRAPHIC SYSTEM (Inspired by Abstract Business Infographics)
   ========================================================================== */

.infographic-3d-section-wrapper {
  position: relative;
  width: 100%;
}

.infographic-3d-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 50px;
  margin-top: 35px;
}

@media (max-width: 991px) {
  .infographic-3d-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── LEFT: PHASE DETAIL CARDS ── */
.phase-details-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.phase-detail-card {
  position: relative;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 22px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.phase-detail-card::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid #ffffff;
  transition: all 0.35s ease;
  box-shadow: 0 0 0 2px #e2e8f0;
}

@media (max-width: 991px) {
  .phase-detail-card::after {
    display: none;
  }
}

.phase-card-pill {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.35s ease;
}

.phase-card-content {
  flex: 1;
}

.phase-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: #0f172a;
  transition: color 0.3s ease;
}

.phase-card-desc {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 10px 0;
}

.phase-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phase-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #334155;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

/* Card Active Theming */
.phase-detail-card[data-phase="1"] .phase-card-pill { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.phase-detail-card[data-phase="2"] .phase-card-pill { background: linear-gradient(135deg, #38bdf8, #0864C5); }
.phase-detail-card[data-phase="3"] .phase-card-pill { background: linear-gradient(135deg, #fb7185, #be123c); }
.phase-detail-card[data-phase="4"] .phase-card-pill { background: linear-gradient(135deg, #2dd4bf, #0f766e); }
.phase-detail-card[data-phase="5"] .phase-card-pill { background: linear-gradient(135deg, #fbbf24, #b45309); }

.phase-detail-card[data-phase="1"].is-active,
.phase-detail-card[data-phase="1"]:hover {
  border-color: #8b5cf6;
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.18);
  transform: translateX(8px);
}
.phase-detail-card[data-phase="1"].is-active .phase-card-title { color: #6d28d9; }
.phase-detail-card[data-phase="1"].is-active::after { background: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35), 0 0 14px #8b5cf6; }
.phase-detail-card[data-phase="1"].is-active .phase-tag { background: rgba(139, 92, 246, 0.12); color: #6d28d9; }

.phase-detail-card[data-phase="2"].is-active,
.phase-detail-card[data-phase="2"]:hover {
  border-color: #0864C5;
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  box-shadow: 0 12px 30px rgba(8, 100, 197, 0.18);
  transform: translateX(8px);
}
.phase-detail-card[data-phase="2"].is-active .phase-card-title { color: #0864C5; }
.phase-detail-card[data-phase="2"].is-active::after { background: #0864C5; box-shadow: 0 0 0 3px rgba(8, 100, 197, 0.35), 0 0 14px #0864C5; }
.phase-detail-card[data-phase="2"].is-active .phase-tag { background: rgba(8, 100, 197, 0.12); color: #0864C5; }

.phase-detail-card[data-phase="3"].is-active,
.phase-detail-card[data-phase="3"]:hover {
  border-color: #e11d48;
  background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
  box-shadow: 0 12px 30px rgba(225, 29, 72, 0.18);
  transform: translateX(8px);
}
.phase-detail-card[data-phase="3"].is-active .phase-card-title { color: #be123c; }
.phase-detail-card[data-phase="3"].is-active::after { background: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.35), 0 0 14px #e11d48; }
.phase-detail-card[data-phase="3"].is-active .phase-tag { background: rgba(225, 29, 72, 0.12); color: #be123c; }

.phase-detail-card[data-phase="4"].is-active,
.phase-detail-card[data-phase="4"]:hover {
  border-color: #0d9488;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
  box-shadow: 0 12px 30px rgba(13, 148, 136, 0.18);
  transform: translateX(8px);
}
.phase-detail-card[data-phase="4"].is-active .phase-card-title { color: #0f766e; }
.phase-detail-card[data-phase="4"].is-active::after { background: #0d9488; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.35), 0 0 14px #0d9488; }
.phase-detail-card[data-phase="4"].is-active .phase-tag { background: rgba(13, 148, 136, 0.12); color: #0f766e; }

.phase-detail-card[data-phase="5"].is-active,
.phase-detail-card[data-phase="5"]:hover {
  border-color: #d97706;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.18);
  transform: translateX(8px);
}
.phase-detail-card[data-phase="5"].is-active .phase-card-title { color: #b45309; }
.phase-detail-card[data-phase="5"].is-active::after { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35), 0 0 14px #d97706; }
.phase-detail-card[data-phase="5"].is-active .phase-tag { background: rgba(217, 119, 6, 0.12); color: #b45309; }

/* ── RIGHT: 3D ISOMETRIC STACKED DISCS ── */
.stacked-discs-stage {
  perspective: 1000px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  min-height: 520px;
}

.disc-stack-wrapper {
  position: relative;
  width: 320px;
  height: 480px;
}

/* Individual 3D Disc */
.disc-3d-item {
  position: absolute;
  width: 290px;
  height: 100px;
  left: 15px;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.45s ease;
  transform-style: preserve-3d;
  user-select: none;
}

.disc-3d-item[data-phase="1"] { top: 10px; z-index: 5; }
.disc-3d-item[data-phase="2"] { top: 95px; z-index: 4; }
.disc-3d-item[data-phase="3"] { top: 180px; z-index: 3; }
.disc-3d-item[data-phase="4"] { top: 265px; z-index: 2; }
.disc-3d-item[data-phase="5"] { top: 350px; z-index: 1; }

.disc-cylinder {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(56deg) rotateZ(-24deg);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.45s ease;
}

/* Side Bevel (Extruded Cylinder Wall) */
.disc-bevel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 55%, #64748b 100%);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.35),
              0 32px 50px rgba(15, 23, 42, 0.22),
              inset 0 -6px 10px rgba(0, 0, 0, 0.3);
  transform: translateZ(-26px);
}

.disc-rim-label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #475569;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Top Colored Face with Number */
.disc-top-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #ffffff;
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.7),
              inset 0 -8px 16px rgba(0, 0, 0, 0.4),
              0 6px 16px rgba(0, 0, 0, 0.15);
  transform: translateZ(0px);
  transition: box-shadow 0.35s ease;
}

.disc-number {
  font-size: 3.2rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  line-height: 1;
}

/* Colored Themes */
.disc-3d-item[data-phase="1"] .disc-top-face {
  background: radial-gradient(circle at 35% 30%, #c084fc 0%, #7e22ce 65%, #4c1d95 100%);
}
.disc-3d-item[data-phase="2"] .disc-top-face {
  background: radial-gradient(circle at 35% 30%, #38bdf8 0%, #0864C5 65%, #0c4a6e 100%);
}
.disc-3d-item[data-phase="3"] .disc-top-face {
  background: radial-gradient(circle at 35% 30%, #fb7185 0%, #e11d48 65%, #881337 100%);
}
.disc-3d-item[data-phase="4"] .disc-top-face {
  background: radial-gradient(circle at 35% 30%, #2dd4bf 0%, #0d9488 65%, #134e4a 100%);
}
.disc-3d-item[data-phase="5"] .disc-top-face {
  background: radial-gradient(circle at 35% 30%, #fbbf24 0%, #d97706 65%, #78350f 100%);
}

/* Interactive Pop-Out State */
.disc-3d-item:hover,
.disc-3d-item.is-active {
  z-index: 10 !important;
}

.disc-3d-item:hover .disc-cylinder,
.disc-3d-item.is-active .disc-cylinder {
  transform: rotateX(52deg) rotateZ(-24deg) translateX(-48px) translateY(-18px) scale(1.15);
  filter: drop-shadow(0 28px 40px rgba(15, 23, 42, 0.38));
}

.disc-3d-item[data-phase="1"].is-active .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.9), 0 0 35px rgba(168, 85, 247, 0.7);
}
.disc-3d-item[data-phase="2"].is-active .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.9), 0 0 35px rgba(8, 100, 197, 0.7);
}
.disc-3d-item[data-phase="3"].is-active .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.9), 0 0 35px rgba(225, 29, 72, 0.7);
}
.disc-3d-item[data-phase="4"].is-active .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.9), 0 0 35px rgba(13, 148, 136, 0.7);
}
.disc-3d-item[data-phase="5"].is-active .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.9), 0 0 35px rgba(217, 119, 6, 0.7);
}


/* ==========================================================================
   REFINED 3D STACKED DISCS & VIVID BACKGROUND IMAGE SYSTEM
   ========================================================================== */

/* Vivid Section Backgrounds - Crystal Clear */
.section-custom-bg .section-bg-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.78 !important;
  filter: contrast(1.18) saturate(1.3) brightness(1.02) !important;
  transform: scale(1.01);
  transition: transform 0.6s ease;
}

.section-custom-bg .section-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(248, 250, 252, 0.48) 100%) !important;
  pointer-events: none !important;
  backdrop-filter: blur(0.5px) !important;
  -webkit-backdrop-filter: blur(0.5px) !important;
}

.section-custom-bg.bg-soft-blue .section-bg-overlay {
  background: linear-gradient(180deg, rgba(240, 246, 255, 0.36) 0%, rgba(248, 250, 252, 0.48) 100%) !important;
}

.section-custom-bg.bg-soft-teal .section-bg-overlay {
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.36) 0%, rgba(248, 250, 252, 0.48) 100%) !important;
}

.section-custom-bg.bg-soft-slate .section-bg-overlay {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.38) 0%, rgba(241, 245, 249, 0.50) 100%) !important;
}

/* ── STAGGERED 3D DISCS CASCADE (Matching reference image) ── */
.disc-stack-wrapper {
  position: relative;
  width: 340px;
  height: 500px;
}

/* Staggered alternating alignment like a real coin stack */
.disc-3d-item[data-phase="1"] { top: 8px; left: 35px; z-index: 5; }
.disc-3d-item[data-phase="2"] { top: 96px; left: -15px; z-index: 4; }
.disc-3d-item[data-phase="3"] { top: 184px; left: 25px; z-index: 3; }
.disc-3d-item[data-phase="4"] { top: 272px; left: -20px; z-index: 2; }
.disc-3d-item[data-phase="5"] { top: 360px; left: 20px; z-index: 1; }

/* The 3D cylinder puck */
.disc-3d-item .disc-cylinder {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(54deg) rotateZ(-22deg);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease;
}

/* Thick Beveled Rim */
.disc-3d-item .disc-bevel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 40%, #94a3b8 85%, #64748b 100%);
  box-shadow: 0 20px 35px rgba(15, 23, 42, 0.4),
              0 38px 60px rgba(15, 23, 42, 0.25),
              inset 0 -8px 12px rgba(0, 0, 0, 0.35);
  transform: translateZ(-30px);
}

.disc-3d-item .disc-rim-label {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #334155;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

.disc-3d-item .disc-number {
  font-size: 3.4rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  line-height: 1;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transform: rotateZ(22deg) scaleY(1.35);
}

/* OUTWARD POP-OUT ANIMATION on Hover and Click */
.disc-3d-item.is-active,
.disc-3d-item:hover {
  z-index: 20 !important;
}

.disc-3d-item.is-active .disc-cylinder,
.disc-3d-item:hover .disc-cylinder {
  transform: rotateX(50deg) rotateZ(-20deg) translateX(46px) translateY(-24px) scale(1.2) !important;
  filter: drop-shadow(0 32px 50px rgba(15, 23, 42, 0.45)) !important;
}

/* Distinct glowing auras when popped out */
.disc-3d-item[data-phase="1"].is-active .disc-top-face,
.disc-3d-item[data-phase="1"]:hover .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.95), 0 0 45px rgba(168, 85, 247, 0.85) !important;
}

.disc-3d-item[data-phase="2"].is-active .disc-top-face,
.disc-3d-item[data-phase="2"]:hover .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.95), 0 0 45px rgba(8, 100, 197, 0.85) !important;
}

.disc-3d-item[data-phase="3"].is-active .disc-top-face,
.disc-3d-item[data-phase="3"]:hover .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.95), 0 0 45px rgba(225, 29, 72, 0.85) !important;
}

.disc-3d-item[data-phase="4"].is-active .disc-top-face,
.disc-3d-item[data-phase="4"]:hover .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.95), 0 0 45px rgba(13, 148, 136, 0.85) !important;
}

.disc-3d-item[data-phase="5"].is-active .disc-top-face,
.disc-3d-item[data-phase="5"]:hover .disc-top-face {
  box-shadow: inset 0 3px 12px rgba(255, 255, 255, 0.95), 0 0 45px rgba(217, 119, 6, 0.85) !important;
}

/* Subtle Stage Ambient Halo */
.stacked-discs-stage::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(8, 100, 197, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}



/* ==========================================================================
   GLOBAL SERIF TYPOGRAPHY SYSTEM (Times New Roman, Georgia, Merriweather, Playfair)
   ========================================================================== */

/* 1. Global Typography Assignment to Classical Serif */
html,
body,
button,
input,
optgroup,
select,
textarea,
h1, h2, h3, h4, h5, h6,
p,
a,
li,
label,
blockquote,
figcaption,
strong,
b,
em,
th,
td,
span:not(.fa):not([class*="fa-"]):not(.badge-pulse-dot):not(.hero-typing-cursor):not(.status-dot-pulse),
.section-title,
.section-subtitle,
.hero-title,
.hero-description,
.nav-link,
.btn,
.badge-tag,
.service-front-title,
.service-front-desc,
.service-back-title,
.service-desc,
.why-title,
.why-desc,
.project-title,
.project-desc,
.testimonial-body-text,
.testimonial-quote,
.testimonial-author-name,
.about-lead,
.process-step-card,
.phase-card-title,
.phase-card-desc,
.phase-tag,
.tech-name,
.tech-category,
.footer-col,
.footer-desc,
.nav-item,
.drawer-link {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Headings with high-impact Serif */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title,
.service-front-title,
.why-title,
.project-title,
.hero-dynamic-text {
  font-family: 'Playfair Display', 'Georgia', 'Times New Roman', 'Merriweather', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* 2. PROTECT ALL FONT AWESOME ICONS, GLYPHS & LOGOS */
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
.fa-solid,
.fa-regular,
.fa-light,
.fa-brands,
.fa-duotone,
.fa-thin,
i[class*="fa-"],
span[class*="fa-"],
[data-icon],
.fa-stack,
.fa-stack i,
.btn-icon,
.nav-caret,
.fa-chevron-down,
.fa-chevron-right,
.fa-chevron-left,
.fa-arrow-right,
.fa-arrow-left,
.fa-arrow-down,
.fa-arrow-up,
.status-dot-pulse,
.badge-pulse-dot,
.hero-typing-cursor,
i.fa-solid,
i.fa-regular,
i.fa-brands {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome' !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.fa-brands,
i.fa-brands,
span.fa-brands,
i[class*="fa-brands"],
.fab {
  font-family: 'Font Awesome 6 Brands' !important;
  font-weight: 400 !important;
}

.fa-solid,
i.fa-solid,
.fas {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}

.fa-regular,
i.fa-regular,
.far {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 400 !important;
}

/* 3. Code elements keep monospace */
code, kbd, samp, pre {
  font-family: Consolas, 'Courier New', monospace !important;
}


/* ==========================================================================
   HEADER CAPSULE CONTAINMENT & OVERFLOW FIX
   Ensures 'Schedule Consultation' button and all nav elements stay 100% inside
   the rounded floating pill without clipping, wrapping, or overflowing.
   ========================================================================== */

.site-header {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 1400px !important;
  height: 72px !important;
  max-height: 72px !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08) !important;
  box-sizing: border-box !important;
}

.site-header .header-inner {
  width: 100% !important;
  height: 100% !important;
  padding: 0 24px 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

/* Brand pod */
.site-header .brand-identity-pod {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.site-header .brand-name {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
}

.site-header .brand-sub {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: #0864C5 !important;
}

.site-header .nav-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(22, 163, 74, 0.1) !important;
  border: 1px solid #16a34a !important;
  color: #16a34a !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Nav Menu & Links */
.site-header .nav-menu {
  flex-shrink: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-header .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  flex-wrap: nowrap !important;
}

.site-header .nav-link {
  font-size: 0.81rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  padding: 5px 9px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: #0864C5 !important;
  background: rgba(8, 100, 197, 0.1) !important;
}

/* Right Actions Pod */
.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

.site-header .header-wa-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(37, 211, 102, 0.12) !important;
  border: 1px solid rgba(37, 211, 102, 0.38) !important;
  border-radius: 9999px !important;
  color: #16a34a !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Solid Schedule Consultation Button - Cleanly Contained */
.site-header .header-consult-btn {
  padding: 8px 16px !important;
  border-radius: 9999px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  background: var(--brand-tech-blue, #0864C5) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 14px rgba(8, 100, 197, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.site-header .header-consult-btn:hover {
  background: #064ea2 !important;
  box-shadow: 0 6px 20px rgba(8, 100, 197, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* Adaptive scaling for medium/narrow desktop screens */
@media (max-width: 1366px) {
  .site-header {
    width: calc(100% - 24px) !important;
  }
  .site-header .header-inner {
    padding: 0 20px 0 18px !important;
    gap: 6px !important;
  }
  .site-header .nav-link {
    font-size: 0.78rem !important;
    padding: 4px 7px !important;
  }
  .site-header .brand-name {
    font-size: 1.1rem !important;
  }
  .site-header .header-wa-chip {
    padding: 5px 10px !important;
    font-size: 0.74rem !important;
  }
  .site-header .header-consult-btn {
    padding: 7px 13px !important;
    font-size: 0.78rem !important;
  }
}

@media (max-width: 1200px) {
  .site-header .nav-status-pill {
    display: none !important;
  }
  .site-header .nav-link {
    font-size: 0.75rem !important;
    padding: 4px 6px !important;
  }
  .site-header .header-wa-chip .wa-chip-text {
    display: none !important;
  }
  .site-header .header-wa-chip {
    padding: 6px 10px !important;
  }
}

@media (max-width: 1080px) {
  .site-header .nav-menu {
    display: none !important;
  }
  .site-header .mobile-toggle-btn {
    display: flex !important;
  }
}

/* ==========================================================================
   MOBILE & TABLET FLOATING HEADER (100% Contained & Non-Overflowing)
   ========================================================================== */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .site-header {
    position: fixed !important;
    height: 56px !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border-radius: 9999px !important;
    z-index: 1000 !important;
  }
  .site-header .header-inner {
    padding: 0 !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
  }
  .site-header .nav-menu {
    display: none !important;
  }
  .site-header .nav-status-pill {
    display: none !important;
  }
  .site-header .brand-identity-pod {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .site-header .brand-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .site-header .brand-logo-wrap {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-shrink: 0 !important;
  }
  .site-header .brand-logo-img {
    height: 28px !important;
    width: auto !important;
  }
  .site-header .brand-name {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  .site-header .brand-sub {
    font-size: 0.48rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .site-header .header-consult-btn {
    display: none !important;
  }
  .site-header .header-actions {
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  .site-header .header-wa-chip .wa-chip-text {
    display: none !important;
  }
  .site-header .header-wa-chip {
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(37, 211, 102, 0.15) !important;
    color: #16a34a !important;
    border: 1px solid rgba(37, 211, 102, 0.4) !important;
    flex-shrink: 0 !important;
    font-size: 1.1rem !important;
  }
  .site-header .mobile-toggle-btn {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #cbd5e1 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .site-header {
    height: 52px !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    padding: 0 10px !important;
  }
  .site-header .brand-name {
    font-size: 0.88rem !important;
  }
  .site-header .brand-sub {
    font-size: 0.44rem !important;
  }
  .site-header .brand-logo-wrap {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  .site-header .brand-logo-img {
    height: 24px !important;
  }
}

/* ==========================================================================
   GLOBAL MOBILE PERFECTION & ZERO OVERFLOW SYSTEM
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .hero-section {
    padding: 90px 0 60px !important;
    min-height: auto !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center !important;
  }

  .hero-grid .hero-content {
    align-items: center !important;
    text-align: center !important;
  }

  .hero-title {
    font-size: clamp(1.7rem, 6.8vw, 2.25rem) !important;
    line-height: 1.22 !important;
    text-align: center !important;
    margin: 0 auto 18px !important;
  }

  .hero-description {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    text-align: center !important;
    margin: 0 auto 24px !important;
    max-width: 100% !important;
  }

  .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 auto 28px !important;
  }

  .hero-stats-row,
  .hero-grid .hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 18px !important;
    padding: 20px 0 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
  }

  .hero-stat-item {
    text-align: center !important;
  }

  .stat-number {
    font-size: 1.55rem !important;
  }

  .stat-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
  }

  .hero-visual-column {
    max-width: 280px !important;
    margin: 10px auto 0 !important;
  }

  /* Subpages & Cards Mobile Padding */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .services-grid .service-card {
    padding: 24px 20px !important;
  }

  .about-grid,
  .about-showcase-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .lux-proposal-panel {
    padding: 28px 20px !important;
  }

  .global-pods-row {
    grid-template-columns: 1fr !important;
    padding: 16px 20px !important;
  }

  .map-floating-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    max-width: 100% !important;
    margin: 16px !important;
  }

  .campus-map-header {
    padding: 18px 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}



/* Site-wide font matching the geometric sans-serif reference. */
html,
body,
body :not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(code):not(pre):not(kbd):not(samp),
body :not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(code):not(pre):not(kbd):not(samp)::before,
body :not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(code):not(pre):not(kbd):not(samp)::after {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}


/* ==========================================================================
   ULTRA-CRISP CONTRAST, BACKGROUNDS & TYPOGRAPHY SYSTEM
   ========================================================================== */

/* Section Custom Backgrounds: Subtle Architectural Watermark */
.section-custom-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.section-custom-bg .section-bg-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0.12 !important;
  filter: contrast(1.1) saturate(1.15) brightness(1.04) !important;
  pointer-events: none !important;
}

.section-custom-bg .section-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.97) 100%) !important;
  pointer-events: none !important;
}

.section-custom-bg.bg-soft-blue .section-bg-overlay {
  background: linear-gradient(180deg, rgba(240, 246, 255, 0.92) 0%, rgba(248, 250, 252, 0.96) 100%) !important;
}

.section-custom-bg.bg-soft-teal .section-bg-overlay {
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.92) 0%, rgba(248, 250, 252, 0.96) 100%) !important;
}

.section-custom-bg.bg-soft-slate .section-bg-overlay {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(241, 245, 249, 0.96) 100%) !important;
}

/* Crystal-Clear Section Headers */
.section-header {
  position: relative !important;
  z-index: 4 !important;
  max-width: 860px !important;
  margin: 0 auto 48px auto !important;
  padding: 0 16px !important;
  text-align: center !important;
}

.section-header .section-title {
  color: #0f172a !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 14px 0 16px 0 !important;
}

.section-header .section-subtitle {
  color: #334155 !important;
  font-size: 1.08rem !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  text-shadow: none !important;
}

/* Non-Flipping Service Cards & Culture Cards (who-we-are.html, etc.) */
.services-grid .service-card:not(:has(.face)),
.service-card:not(:has(.face)) {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 34px 28px !important;
  box-shadow: 0 10px 30px -4px rgba(8, 100, 197, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  min-height: auto !important;
  transform: none !important;
  perspective: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.services-grid .service-card:not(:has(.face)):hover,
.service-card:not(:has(.face)):hover {
  transform: translateY(-6px) !important;
  border-color: #0864C5 !important;
  box-shadow: 0 20px 40px -8px rgba(8, 100, 197, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.service-card .service-title {
  color: #0f172a !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin: 18px 0 12px 0 !important;
  line-height: 1.35 !important;
}

.service-card .service-desc {
  color: #334155 !important;
  font-size: 0.95rem !important;
  line-height: 1.68 !important;
  margin: 0 !important;
}

/* Culture & Engineering Pods Section High-Contrast Styling */
.about-grid {
  position: relative !important;
  z-index: 2 !important;
}

.about-lead {
  color: #1e293b !important;
  font-size: 1.08rem !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
}

.service-features-list .service-feature-item {
  color: #334155 !important;
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.service-features-list .service-feature-item strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.service-features-list .service-feature-item i {
  color: #0864C5 !important;
  margin-top: 4px !important;
  font-size: 1rem !important;
}

/* Global Pods Row Luxury Card */
.global-pods-row {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 12px 36px -6px rgba(8, 100, 197, 0.08) !important;
  border-radius: 18px !important;
}

.global-pod-item h4 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.global-pod-item p {
  color: #475569 !important;
}

/* ==========================================================================
   MOBILE VIEWPORT ULTRA-REFINEMENT (ALL SECTIONS & SCREENS <= 768px / 375px)
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .site-header {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    height: 54px !important;
    padding: 0 12px !important;
    border-radius: 9999px !important;
  }

  .site-header .nav-cta-btn {
    display: none !important;
  }

  .site-header .brand-name {
    font-size: 0.92rem !important;
    white-space: nowrap !important;
  }

  .site-header .brand-sub {
    font-size: 0.44rem !important;
    white-space: nowrap !important;
  }

  .site-header .brand-logo-wrap {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .site-header .header-actions .header-icon-btn,
  .site-header .header-actions .mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .section {
    padding: 60px 0 !important;
  }

  .section-header {
    margin-bottom: 36px !important;
    padding: 0 8px !important;
  }

  .section-header .section-title {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
  }

  .section-header .section-subtitle {
    font-size: 0.95rem !important;
  }

  .hero-section {
    padding: 85px 0 50px !important;
    min-height: auto !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .hero-grid .hero-content {
    align-items: center !important;
    text-align: center !important;
  }

  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.2rem) !important;
    line-height: 1.22 !important;
    text-align: center !important;
  }

  .hero-description {
    font-size: 0.95rem !important;
    text-align: center !important;
    margin: 0 auto 20px !important;
  }

  .hero-actions {
    justify-content: center !important;
    gap: 10px !important;
  }

  .hero-stats-row,
  .hero-grid .hero-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 16px !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .hero-visual-column {
    max-width: 260px !important;
    margin: 10px auto 0 !important;
  }

  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .services-grid .service-card:not(:has(.face)),
  .service-card:not(:has(.face)) {
    padding: 24px 20px !important;
  }

  .about-grid,
  .about-showcase-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .lux-proposal-panel {
    padding: 24px 18px !important;
  }

  .global-pods-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  .campus-map-header {
    padding: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .map-floating-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    max-width: 100% !important;
    margin: 12px !important;
  }

  #campusMap, .campus-map-interactive {
    height: 340px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 480px) {
  .site-header {
    height: 50px !important;
    padding: 0 10px !important;
  }

  .site-header .brand-name {
    font-size: 0.86rem !important;
  }

  .site-header .brand-logo-wrap {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }
}

/* Keep the hero's rotating Digital Excellence headline solid white. */
#heroDynamicText {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* Mobile Drawer Zero Overflow & High Contrast Styling */
.mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 320px !important;
  height: 100vh !important;
  transform: translateX(100%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25) !important;
  padding: 24px 20px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

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

.drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

.drawer-close-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.drawer-close-btn:hover {
  background: #e2e8f0 !important;
  color: #ef4444 !important;
}

.drawer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.drawer-link {
  color: #0f172a !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 4px !important;
  transition: color 0.2s ease !important;
}

.drawer-link:hover,
.drawer-link.active {
  color: #0864C5 !important;
}

.drawer-item-dropdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.drawer-submenu {
  display: none !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-left: 14px !important;
  margin-top: 4px !important;
  border-left: 2.5px solid #0864C5 !important;
}

.drawer-item-dropdown.active .drawer-submenu {
  display: flex !important;
}

.drawer-sublink {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  transition: color 0.2s ease !important;
}

.drawer-sublink:hover,
.drawer-sublink.active {
  color: #0864C5 !important;
}

.drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.drawer-backdrop.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* Marquee & Footer Mobile Zero-Overflow Containment */
.marquee-container,
.marquee-section,
.partners-marquee,
.client-marquee,
.marquee-wrapper {
  overflow: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
}

.footer-bg-img,
.site-footer img {
  max-width: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

.footer-grid,
.footer-links-col {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Simple, responsive contact layout shared by the Contact and Home pages. */
.simple-contact-hero {
  padding: 72px 0 56px;
  text-align: center;
  background: #f5f8fc;
}
.simple-contact-hero .container { max-width: 820px; }
.simple-contact-eyebrow {
  margin: 0 0 12px;
  color: #0864c5;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.simple-contact-hero h1,
.simple-contact-info h2,
.simple-contact-form-card h2 {
  margin: 0 0 12px;
  color: #10233f;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
}
.simple-contact-hero p:last-child,
.simple-contact-info > p:not(.simple-contact-eyebrow),
.simple-contact-form-card > p {
  color: #526176;
  margin: 0;
}
.simple-contact-section { padding: 64px 0 80px; background: #fff; }
.simple-contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 6vw, 76px);
  align-items: start;
  max-width: 1050px;
}
.simple-contact-info { padding-top: 12px; }
.simple-contact-links { display: grid; gap: 12px; margin: 28px 0 22px; }
.simple-contact-links a {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  color: #10233f;
  text-decoration: none;
  background: #f5f8fc;
  border: 1px solid #e4eaf2;
  border-radius: 10px;
}
.simple-contact-links a:hover { border-color: #86b9ef; }
.simple-contact-links span { color: #64748b; font-size: .82rem; }
.simple-contact-links strong { font-size: .96rem; font-weight: 600; }
.simple-contact-whatsapp {
  display: inline-flex;
  padding: 11px 16px;
  border-radius: 8px;
  background: #e9f8ef;
  color: #14733b;
  font-weight: 600;
  text-decoration: none;
}
.simple-contact-form-card {
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid #e3e9f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(22, 44, 77, .08);
}
.simple-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.simple-contact-form .form-group { margin: 0; }
.simple-contact-form .form-label { margin-bottom: 7px; }
.simple-contact-form .lux-input-field { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #ccd6e3; border-radius: 8px; background: #fff; color: #10233f; font: inherit; }
.simple-contact-form textarea.lux-input-field { min-height: 128px; resize: vertical; }
.simple-contact-form .lux-input-field:focus { outline: 3px solid rgba(8,100,197,.14); border-color: #0864c5; }
.simple-contact-message-field { grid-column: 1 / -1; }
.simple-contact-submit { width: 100%; justify-content: center; margin-top: 18px; }
.simple-contact-form-card .form-feedback { display: none; }
@media (max-width: 760px) {
  .simple-contact-hero { padding: 52px 0 40px; }
  .simple-contact-section { padding: 42px 0 56px; }
  .simple-contact-grid { grid-template-columns: 1fr; gap: 30px; }
}


/* Absolute Viewport & Background Containment */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
}

.section,
.section-with-bg,
.section-custom-bg,
.section-motion-bg,
.section-breathe-bg-system {
  overflow: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.section-custom-bg .section-bg-image,
.section-motion-bg .section-bg-image {
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.site-footer {
  overflow: hidden !important;
  position: relative !important;
  max-width: 100vw !important;
  width: 100% !important;
}

.site-footer .footer-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important;
}

.table-responsive,
table {
  max-width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.tech-marquee-track,
.tech-item-card,
.phase-detail-card,
.disc-cylinder,
.disc-bevel,
.disc-top-face {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


@media (max-width: 768px) {
  .site-footer {
    padding: 48px 0 24px !important;
    overflow: hidden !important;
  }
  
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .footer-links-col,
  .footer-brand-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .comparison-table-wrap,
  .table-responsive,
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .phase-detail-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .disc-cylinder-wrapper,
  .disc-cylinder,
  .disc-bevel,
  .disc-top-face {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Keep the footer brand mark at its natural proportions; only the footer background should fill the footer. */
.site-footer .footer-brand-logo > .brand-logo-img {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 48px !important;
  max-width: none !important;
  object-fit: contain !important;
  position: static !important;
}



/* ==========================================================================
   GLOBAL BRAND TYPOGRAPHY: UBUNTU (INFOSYS-GRADE MODERN HUMANIST FONT)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
  --font-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  --font-heading: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  --font-body: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

body, html, 
h1, h2, h3, h4, h5, h6, 
p, span, a, button, input, textarea, select, label, 
li, ul, ol, strong, b, em, small, blockquote, div {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* STRICT FONT AWESOME ICON PROTECTION (Must override general font-family) */
.fa, .fas, .fa-solid, .fab, .fa-brands, .far, .fa-regular, .fa-light, .fa-thin, .fa-duotone,
i[class*="fa-"], span[class*="fa-"], [class^="fa-"], [class*=" fa-"] {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome' !important;
}

.fa-brands, .fab {
  font-family: 'Font Awesome 6 Brands' !important;
  font-weight: 400 !important;
}

.fa-solid, .fas {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}

.fa-regular, .far {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 400 !important;
}

/* MODERN TECHNOLOGIES & EXECUTIVE HEADINGS BLACK FONT COLOR */
.modern-technologies-black,
span.text-black-title,
.text-modern-black {
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 800 !important;
}


/* ==========================================================================
   MOBILE HERO & HEADER COMPACT SYSTEM (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .site-header {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: 52px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 9999px !important;
    z-index: 1000 !important;
    transform: none !important;
  }

  .site-header .brand-sub {
    display: none !important;
  }

  .site-header .brand-name {
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
  }

  .site-header .brand-logo-wrap {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .site-header .brand-logo-img {
    height: 22px !important;
  }

  .hero-section {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    overflow: hidden !important;
  }

  .hero-container,
  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  .hero-title {
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    margin: 0 auto 16px auto !important;
    text-align: center !important;
  }

  .hero-description {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    text-align: center !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto 24px auto !important;
    gap: 10px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    font-size: 0.92rem !important;
  }

  .hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  .hero-stat-item {
    text-align: center !important;
  }
}



/* ==========================================================================
   PAGE TRANSITION LOADER REMOVED (INSTANT NATIVE NAVIGATION)
   ========================================================================== */
.page-transition-overlay,
.page-loader-box,
.page-loader-svg {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ==========================================================================
   FRONT PAGE (INDEX) CLEAN HIGH-TECH HERO BACKGROUND (NO DISRUPTIVE PHOTOS)
   ========================================================================== */
.hero-section,
.hero-carousel-section {
  position: relative !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 78% 38%, rgba(8, 100, 197, 0.22) 0%, transparent 55%),
              radial-gradient(circle at 20% 65%, rgba(0, 168, 132, 0.14) 0%, transparent 55%),
              #061224 !important;
}

.hero-motion-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
}

.hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(6, 18, 36, 0.6) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ==========================================================================
   FULL VIEW FOOTER BACKGROUND IMAGE (GLOBAL ARCHITECTURAL LANDMARKS)
   ========================================================================== */
.site-footer {
  position: relative !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  padding: 0 0 32px 0 !important;
}

.footer-bg-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.site-footer .footer-bg-img {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  opacity: 0.95 !important;
  filter: contrast(1.08) saturate(1.2) brightness(1.02) !important;
  pointer-events: none !important;
}

.footer-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(248, 250, 252, 0.25) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.footer-trust-strip {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(241, 245, 249, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
}

.footer-main-grid {
  position: relative !important;
  z-index: 2 !important;
}

.footer-legal-bar {
  position: relative !important;
  z-index: 2 !important;
  border-top: 1px solid rgba(203, 213, 225, 0.7) !important;
}



/* ==========================================================================
   FULL VIEW FOOTER BACKGROUND SYSTEM
   ========================================================================== */
.site-footer {
  position: relative !important;
  background-color: #f8fafc !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  padding: 0 !important;
}

.footer-bg-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.site-footer .footer-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: left center !important;
  opacity: 0.92 !important;
  filter: contrast(1.05) saturate(1.15) brightness(1.02) !important;
  pointer-events: none !important;
}

.footer-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0.78) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.footer-trust-strip {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(241, 245, 249, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
}

.footer-main-grid {
  position: relative !important;
  z-index: 2 !important;
  padding: 60px 0 40px !important;
}

.footer-legal-bar {
  position: relative !important;
  z-index: 2 !important;
  padding: 24px 0 32px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}



/* ==========================================================================
   ATTRACTIVE SOLID COLOR NAVIGATION DOCK (HEADER MENU CAPSULE)
   ========================================================================== */
.site-header .nav-links {
  background: #092244 !important; /* Attractive Solid Executive Sapphire */
  border: 1.5px solid #0f3669 !important;
  border-radius: 9999px !important;
  padding: 4px 8px !important;
  gap: 2px !important;
  box-shadow: 0 4px 16px rgba(9, 34, 68, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.site-header .nav-link {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  transition: all 0.22s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.18) !important;
}

.site-header .nav-caret {
  color: #94a3b8 !important;
  font-size: 0.7rem !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.site-header .nav-link:hover .nav-caret {
  color: #38bdf8 !important;
}

/* Dropdown Menu Styling */
.site-header .nav-dropdown-menu {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px -6px rgba(9, 34, 68, 0.18), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  padding: 8px !important;
}

.site-header .dropdown-item {
  color: #0f172a !important;
  border-radius: 10px !important;
  transition: background 0.18s ease !important;
}

.site-header .dropdown-item:hover {
  background: #f1f5f9 !important;
}

.site-header .dropdown-text strong {
  color: #0f172a !important;
}

.site-header .dropdown-text span {
  color: #64748b !important;
}

/* ==========================================================================
   HEADER CAPSULE — BALANCED EXECUTIVE NAVIGATION DOCK
   Eliminates excess empty space on right; aligns brand to left and
   solid sapphire navigation dock to right with perfectly balanced margins.
   ========================================================================== */
.site-header {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 1260px !important;
  height: 68px !important;
  max-height: 68px !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
  box-sizing: border-box !important;
}

.site-header .header-inner {
  width: 100% !important;
  height: 100% !important;
  padding: 0 8px 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.site-header .brand-identity-pod {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.site-header .nav-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.site-header .header-actions {
  display: none !important;
}

@media (max-width: 1024px) {
  .site-header {
    height: 62px !important;
    max-height: 62px !important;
    max-width: calc(100% - 20px) !important;
    top: 10px !important;
  }
  .site-header .header-inner {
    padding: 0 12px 0 16px !important;
  }
  .site-header .nav-menu {
    display: none !important;
  }
  .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
  }
  .site-header .mobile-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: #092244 !important;
    color: #ffffff !important;
    border: 1px solid #0f3669 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 1.15rem !important;
    transition: all 0.2s ease !important;
  }
  .site-header .mobile-toggle-btn:hover {
    background: #0864C5 !important;
    transform: scale(1.05) !important;
  }
}

/* ==========================================================================
   CONTACT PAGE ENHANCED STYLING & RICH CORPORATE BACKGROUND
   ========================================================================== */
.contact-page-content {
  position: relative !important;
  background: #ffffff !important;
  padding: 60px 0 80px !important;
  z-index: 2 !important;
}

.contact-channels-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 48px !important;
}

.contact-channel-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

.contact-channel-card:hover {
  transform: translateY(-4px) !important;
  border-color: #0864C5 !important;
  box-shadow: 0 12px 28px rgba(8, 100, 197, 0.12) !important;
  background: #ffffff !important;
}

.contact-channel-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
}

.contact-channel-title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #64748b !important;
}

.contact-channel-val {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
}

.contact-channel-sub {
  font-size: 0.82rem !important;
  color: #475569 !important;
}

.contact-split-showcase {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 36px !important;
  align-items: start !important;
}

.contact-map-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

.contact-map-frame {
  height: 320px !important;
  width: 100% !important;
  position: relative !important;
}

.contact-building-pod {
  padding: 20px 24px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

.contact-form-card-lux {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 992px) {
  .contact-channels-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .contact-split-showcase {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .contact-form-card-lux {
    padding: 24px 20px !important;
  }
}

/* ==========================================================================
   WEBROO-INSPIRED NEXT-GEN ANIMATION & INTERACTION ENGINE
   ========================================================================== */

/* 1. CUSTOM DUAL CURSOR (WEBROO SIGNATURE) */
.custom-cursor__cursor {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0864C5;
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              opacity 0.2s ease;
  box-shadow: 0 0 10px rgba(8, 100, 197, 0.8);
}

.custom-cursor__cursor-two {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(8, 100, 197, 0.6);
  position: fixed;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease,
              transform 0.15s ease-out;
  background: rgba(8, 100, 197, 0.04);
  backdrop-filter: blur(1px);
}

/* Hover active state for custom cursor */
.custom-cursor-hover .custom-cursor__cursor {
  width: 14px;
  height: 14px;
  background-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.9);
}

.custom-cursor-hover .custom-cursor__cursor-two {
  width: 54px;
  height: 54px;
  border-color: rgba(56, 189, 248, 0.85);
  background: rgba(56, 189, 248, 0.12);
  transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width: 992px), (pointer: coarse) {
  .custom-cursor__cursor,
  .custom-cursor__cursor-two {
    display: none !important;
  }
}

/* 2. IMAGE ANIMATIONS & HOVER SHIMMER LIGHT-SWEEP (WEBROO REFERENCE) */
.img-hover-box,
.service-card,
.project-card,
.mosaic-tile,
.why-card,
.about-image-card,
.contact-map-card,
.course-card-item,
.bento-card {
  position: relative;
  overflow: hidden;
}

/* Shimmer Light-Sweep pseudo element on image containers */
.img-hover-box::after,
.service-card::after,
.project-card::after,
.mosaic-tile::after,
.about-image-card::after,
.course-card-item::after,
.bento-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.06) 75%,
    transparent 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 3;
  transition: none;
}

.img-hover-box:hover::after,
.service-card:hover::after,
.project-card:hover::after,
.mosaic-tile:hover::after,
.about-image-card:hover::after,
.course-card-item:hover::after,
.bento-card:hover::after {
  left: 180%;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth Image Scale on Hover */
.service-card img,
.project-card img,
.mosaic-img,
.course-card-item img,
.about-image-card img,
.img-hover-box img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
}

.service-card:hover img,
.project-card:hover img,
.mosaic-tile:hover .mosaic-img,
.course-card-item:hover img,
.about-image-card:hover img,
.img-hover-box:hover img {
  transform: scale(1.06) !important;
  filter: saturate(1.12) contrast(1.04) !important;
}

/* 3. FLOAT & BOB ANIMATIONS (WEBROO REFERENCE) */
@keyframes floatBobY {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes floatBobX {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 14px rgba(8, 100, 197, 0.35);
  }
  50% {
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.7);
  }
}

.float-bob-y {
  animation: floatBobY 4s ease-in-out infinite !important;
}

.float-bob-x {
  animation: floatBobX 4.5s ease-in-out infinite !important;
}

.rotate-me {
  animation: rotateme 20s linear infinite !important;
}

.pulse-glow {
  animation: pulseGlow 3s infinite ease-in-out !important;
}

/* 4. PAGE & SECTION SCROLL REVEAL (Always Visible & Animated) */
.scroll-reveal-section,
.scroll-reveal-item,
.scroll-reveal-left,
.scroll-reveal-right {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* 5. INTERACTIVE 3D PERSPECTIVE CARD HOVER (WEBROO REFERENCE) */
.card-3d-tilt {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out !important;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d-tilt:hover {
  transform: translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) !important;
  box-shadow: 0 20px 40px rgba(8, 100, 197, 0.14) !important;
}

/* 6. ICON BOX HOVER BOUNCE & ROTATION */
.service-card .service-icon,
.service-icon-box,
.dropdown-icon-box,
.contact-channel-icon,
.feature-icon-box {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.service-card:hover .service-icon,
.service-card:hover .service-icon-box,
.contact-channel-card:hover .contact-channel-icon,
.feature-card:hover .feature-icon-box {
  transform: scale(1.15) rotate(6deg) !important;
  box-shadow: 0 8px 24px rgba(8, 100, 197, 0.25) !important;
}

/* 7. SLIDING TEXT MARQUEE SPEED & SEAMLESS FLUIDITY */
.marquee-container {
  overflow: hidden;
  user-select: none;
  display: flex;
  position: relative;
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 32px;
  animation: marqueeContinuous 26s linear infinite !important;
  will-change: transform;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

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

/* 8. INTERACTIVE FAQ ACCORDION (WEBROO REFERENCE) */
.faq-accordion-container {
  max-width: 880px;
  margin: 0 auto;
}

.faq-accordion-item {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.faq-accordion-item:hover {
  border-color: #0864C5;
  box-shadow: 0 8px 24px rgba(8, 100, 197, 0.08);
}

.faq-accordion-item.active {
  border-color: #0864C5;
  box-shadow: 0 10px 30px rgba(8, 100, 197, 0.12);
}

.faq-accordion-header {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  transition: color 0.2s ease;
}

.faq-accordion-header:hover {
  color: #0864C5;
}

.faq-icon-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0864C5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
}

.faq-accordion-item.active .faq-icon-indicator {
  transform: rotate(180deg);
  background: #0864C5;
  color: #ffffff;
}

.faq-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  padding: 0 24px;
}

.faq-accordion-item.active .faq-accordion-body {
  max-height: 400px;
  padding: 0 24px 22px;
}

.faq-accordion-body p {
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 9. PROCESS 4-STEP FLOW (WEBROO REFERENCE) */
.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 40px;
}

.process-step-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 32px 24px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.process-step-box:hover {
  transform: translateY(-8px);
  border-color: #0864C5;
  box-shadow: 0 16px 36px rgba(8, 100, 197, 0.12);
}

.process-step-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: rgba(8, 100, 197, 0.18);
  position: absolute;
  top: 18px;
  right: 22px;
  line-height: 1;
  transition: color 0.3s ease;
}

.process-step-box:hover .process-step-num {
  color: #0864C5;
}

.process-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(8, 100, 197, 0.1);
  color: #0864C5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.process-step-box:hover .process-step-icon {
  transform: scale(1.1) rotate(6deg);
  background: #0864C5;
  color: #ffffff;
}

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

@media (max-width: 640px) {
  .process-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HERO CAROUSEL SLIDER ENGINE (Panoramic Banners & Custom Dots)
   ========================================================================== */
.hero-carousel-section {
  position: relative;
  width: 100%;
  min-height: 800px;
  background: #061224;
  overflow: hidden;
  z-index: 1;
}

.hero-slider-container {
  position: relative;
  width: 100%;
  min-height: 800px;
  height: 100%;
  overflow: hidden;
}

.hero-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hero-slide {
  min-width: 100%;
  width: 100%;
  min-height: 800px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start !important;
  box-sizing: border-box;
  padding-top: 155px !important;
  padding-bottom: 60px !important;
}

.hero-grid-container {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: 8px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
  width: 100%;
}

.hero-content {
  position: relative;
  z-index: 5;
  text-align: left;
}

.hero-content .badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 100, 197, 0.2);
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  box-shadow: 0 0 16px rgba(8, 100, 197, 0.3);
}

.hero-content .badge-pulse-dot {
  width: 8px;
  height: 8px;
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 8px #34d399;
}

.hero-title {
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 20px 0;
  line-height: 1.18;
  color: #ffffff;
  text-align: left;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero-title-line {
  display: block;
}

.hero-title-sub {
  color: #e2e8f0;
  font-weight: 700;
  margin-top: 2px;
}

.hero-description {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #cbd5e1;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 0 32px 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Panoramic Banner Slide Styling */
.banner-slide {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 130px 0 70px;
  background: #04142e;
}

.banner-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.banner-slide-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.banner-card-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(8, 100, 197, 0.25);
  background: #020d1c;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.banner-card-frame:hover {
  transform: translateY(-4px);
  border-color: #38bdf8;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 45px rgba(56, 189, 248, 0.35);
}

.banner-panoramic-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 18px;
}

/* Keep image-led cards inside their grid columns at every viewport width. */
.service-card,
.testimonial-card,
.project-card,
.course-card,
.why-card,
.bento-card,
.banner-card-frame {
  box-sizing: border-box;
  min-width: 0;
}

.service-card .face,
.service-card .service-front-content,
.service-card .service-back-details,
.testimonial-card > *,
.project-card > *,
.course-card > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.service-card .face.front,
.service-card .face.back {
  box-sizing: border-box !important;
  width: 100% !important;
}

.service-card .face.back {
  inset: 0 !important;
}

.service-card img,
.testimonial-card img,
.project-card img,
.course-card img,
.why-card img,
.bento-card img,
.banner-card-frame img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 680px) {
  #services .services-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .testimonials-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  }

  .service-card .face.front,
  .service-card .face.back {
    padding: 28px 20px !important;
  }

  .service-back-actions {
    flex-wrap: wrap;
  }
}

/* Cyan Glow Action Button */
.btn-cyan-glow {
  background: linear-gradient(135deg, #0284c7 0%, #00A884 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 9999px !important;
  box-shadow: 0 6px 24px rgba(2, 132, 199, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.btn-cyan-glow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(2, 132, 199, 0.7) !important;
}

/* Slider Navigation Arrows */
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(9, 34, 68, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 20;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.hero-slider-arrow:hover {
  background: #0864C5;
  border-color: #38bdf8;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 30px rgba(8, 100, 197, 0.6);
}

.hero-slider-arrow.prev {
  left: 20px;
}

.hero-slider-arrow.next {
  right: 20px;
}

/* Slider Pagination Dots (Matching Uploaded Image 5) */
.hero-slider-pagination {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20;
  background: rgba(6, 23, 48, 0.75);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.slider-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.slider-dot.active {
  width: 32px;
  border-radius: 20px;
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   COMPREHENSIVE MOBILE VIEW PERFECTION (All Screens < 992px and < 640px)
   ========================================================================== */
@media (max-width: 992px) {
  .hero-carousel-section,
  .hero-slider-container,
  .hero-slide {
    min-height: auto !important;
    align-items: flex-start !important;
    padding-top: 130px !important;
    padding-bottom: 50px !important;
  }
  .banner-slide {
    padding: 120px 0 56px !important;
  }
  .hero-slider-arrow {
    display: none !important;
  }
  .hero-slider-pagination {
    bottom: 14px;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 32px;
    padding-top: 10px;
  }
  .hero-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .hero-title {
    text-align: center;
    font-size: clamp(2rem, 5vw, 2.8rem);
  }
  .hero-description {
    text-align: center;
    margin: 0 auto 28px;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-visual-column {
    display: flex;
    justify-content: center;
  }
  .hero-robot-space-img {
    max-height: 280px;
    width: auto;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }
  .container {
    padding: 0 14px !important;
  }
  .site-header {
    height: 60px !important;
    max-height: 60px !important;
    top: 8px !important;
    width: calc(100% - 16px) !important;
  }
  .site-header .brand-name {
    font-size: 1rem !important;
  }
  .site-header .brand-sub {
    font-size: 0.58rem !important;
  }
  .hero-carousel-section,
  .hero-slider-container,
  .hero-slide {
    padding-top: 120px !important;
    padding-bottom: 40px !important;
    align-items: flex-start !important;
  }
  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.3rem) !important;
    line-height: 1.25 !important;
  }
  .hero-description {
    font-size: 0.95rem !important;
    text-align: center !important;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .banner-slide {
    padding: 84px 0 44px;
  }
  .banner-card-frame {
    border-radius: 12px;
  }
  .banner-panoramic-img {
    border-radius: 10px;
  }
  .section {
    padding: 60px 0 !important;
  }
  .section-title {
    font-size: clamp(1.6rem, 6vw, 2.1rem) !important;
  }
  .section-subtitle {
    font-size: 0.95rem !important;
  }
  .whatsapp-chat-widget {
    bottom: 16px !important;
    left: 16px !important;
  }
  .whatsapp-chat-card {
    width: calc(100vw - 32px) !important;
    left: 0 !important;
    bottom: 74px !important;
  }
  .back-to-top {
    bottom: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }
}




/* First-visit introduction: show the complete video on every screen size. */
.first-visit-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background: #000;
}
.first-visit-intro__video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.first-visit-intro__controls {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.first-visit-intro__controls button {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font: inherit;
  cursor: pointer;
  min-height: 44px;
}
.first-visit-intro__controls button[hidden] { display: none; }
.first-visit-intro__controls button:hover { background: #193e6b; }
.first-visit-intro__controls button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.section .flagship-blueprint-description {
  color: #e2e8f0 !important;
}

.flagship-blueprints-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 30px 0 40px !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(8, 100, 197, 0.13), transparent 48%),
    linear-gradient(180deg, #06162d 0%, #071a33 100%) !important;
}

.flagship-blueprints-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 8% 22%, rgba(0, 132, 255, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 70%, rgba(0, 191, 165, 0.12) 0 1px, transparent 2px);
  background-size: 100% 100% !important;
}

.flagship-blueprints-container {
  position: relative !important;
  z-index: 1 !important;
  width: min(1010px, calc(100% - 32px)) !important;
  max-width: 1010px !important;
  padding: 0 !important;
}

.flagship-blueprints-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
}

.flagship-blueprints-header::after {
  content: "" !important;
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  margin: 16px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #078bdb, #00bfa5) !important;
}

.flagship-blueprints-badge {
  display: inline-flex !important;
  margin: 0 auto 18px !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  background: rgba(8, 100, 197, 0.12) !important;
  color: #38bdf8 !important;
}

.flagship-blueprints-title {
  margin: 0 auto 12px !important;
  color: #f8fafc !important;
  font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.flagship-blueprints-title .text-gradient {
  background: linear-gradient(100deg, #38bdf8, #34d399) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.flagship-blueprints-section .flagship-blueprint-description {
  max-width: 600px !important;
  margin: 0 auto !important;
  color: #dbe6f3 !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

.flagship-blueprints-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 18px !important;
  width: min(1010px, 100%) !important;
  margin: 0 auto !important;
}

.blueprint-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(105, 164, 207, 0.24) !important;
  border-radius: 18px !important;
  background: linear-gradient(155deg, rgba(14, 35, 58, 0.98), rgba(5, 18, 34, 0.98)) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.blueprint-card:hover {
  border-color: rgba(56, 189, 248, 0.68) !important;
  box-shadow: 0 22px 44px rgba(0, 119, 190, 0.2) !important;
  transform: translateY(-4px) !important;
}

.blueprint-card-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  height: 190px !important;
  overflow: hidden !important;
  background: #0b2038 !important;
}

.blueprint-card-visual::after {
  position: absolute !important;
  inset: 35% 0 0 !important;
  content: "" !important;
  background: linear-gradient(180deg, transparent, rgba(5, 18, 34, 0.58)) !important;
  pointer-events: none !important;
}

.blueprint-card-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.45s ease !important;
}

.blueprint-card:hover .blueprint-card-image {
  transform: scale(1.045) !important;
}

.blueprint-card--software .blueprint-card-image {
  object-position: center 42% !important;
}

.blueprint-card--products .blueprint-card-image {
  object-position: center 53% !important;
}

.blueprint-card--ai .blueprint-card-visual {
  background:
    radial-gradient(ellipse at 54% 58%, rgba(92, 79, 231, 0.45), transparent 58%),
    linear-gradient(135deg, #10274b, #101633 70%, #092d42) !important;
}

.blueprint-card--ai .blueprint-card-image {
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 22px rgba(79, 132, 255, 0.24)) !important;
}

.blueprint-card-index,
.blueprint-card-icon {
  position: absolute !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  background: rgba(5, 18, 34, 0.58) !important;
  backdrop-filter: blur(10px) !important;
}

.blueprint-card-index {
  top: 14px !important;
  left: 14px !important;
  width: 38px !important;
  height: 30px !important;
  border-radius: 9px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.blueprint-card-icon {
  right: 14px !important;
  bottom: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  color: #7dd3fc !important;
}

.blueprint-card-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 20px 19px 19px !important;
}

.blueprint-card-eyebrow {
  margin: 0 0 9px !important;
  color: #67d6ed !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

.blueprint-card-content h3 {
  margin: 0 0 10px !important;
  color: #f8fafc !important;
  font-size: clamp(1.08rem, 1.3vw, 1.25rem) !important;
  line-height: 1.3 !important;
}

.blueprint-card-content > p:not(.blueprint-card-eyebrow) {
  margin: 0 0 16px !important;
  color: #c5d4e4 !important;
  font-size: 0.89rem !important;
  line-height: 1.6 !important;
}

.blueprint-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 0 0 19px !important;
}

.blueprint-card-tags span {
  padding: 5px 8px !important;
  border: 1px solid rgba(125, 170, 205, 0.23) !important;
  border-radius: 999px !important;
  color: #d5e5f3 !important;
  background: rgba(255, 255, 255, 0.045) !important;
  font-size: 0.67rem !important;
  line-height: 1.25 !important;
}

.blueprint-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: auto !important;
  color: #7dd3fc !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.blueprint-card-link:hover,
.blueprint-card-link:focus-visible {
  color: #a5f3fc !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

@media (max-width: 900px) {
  .flagship-blueprints-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(680px, 100%) !important;
  }

  .blueprint-card-visual {
    height: 205px !important;
  }
}

@media (max-width: 640px) {
  .flagship-blueprints-section {
    padding: 34px 0 36px !important;
  }

  .flagship-blueprints-container {
    width: calc(100% - 28px) !important;
  }

  .flagship-blueprints-header {
    margin-bottom: 26px !important;
  }

  .flagship-blueprints-badge {
    margin-bottom: 14px !important;
  }

  .flagship-blueprints-section .flagship-blueprint-description {
    font-size: 0.9rem !important;
  }

  .flagship-blueprints-gallery {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: min(430px, 100%) !important;
  }

  .blueprint-card {
    border-radius: 15px !important;
  }

  .blueprint-card-visual {
    height: clamp(175px, 52vw, 220px) !important;
  }

  .blueprint-card-content {
    padding: 18px !important;
  }

  .blueprint-card-content h3 {
    font-size: 1.18rem !important;
  }
}