/* =========================================================
   AccessFast — Modern UI  |  Light Theme  |  Mobile-First
   Fonts: Syne (headings) + Plus Jakarta Sans (body)
   ========================================================= */

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

/* ===== Design Tokens ===== */
:root {
  --af-bg:           #f8fafd;
  --af-bg-2:         #eef3f9;
  --af-card:         #ffffff;
  --af-border:       rgba(17, 65, 108, 0.09);
  --af-border-hover: rgba(17, 65, 108, 0.22);
  --af-shadow-sm:    0 2px 14px rgba(17, 65, 108, 0.07);
  --af-shadow-md:    0 6px 32px rgba(17, 65, 108, 0.12);
  --af-shadow-hover: 0 12px 48px rgba(17, 65, 108, 0.16);
  --af-text:         #0f2d4a;
  --af-text-muted:   #6b7c93;
  --af-navy:         #11416c;
  --af-orange:       #ed8429;
  --af-radius:       16px;
  --af-radius-sm:    10px;

  /* Keep existing Bootstrap/theme vars */
  --primary-color:     #11416c;
  --secondary-color:   #ed8429;
  --primary-color-rgb: 17, 65, 108;
}

/* ===== Base ===== */
html, body {
  background-color: var(--af-bg) !important;
  color: var(--af-text) !important;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Syne', sans-serif !important;
  color: var(--af-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
}

p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--af-text-muted) !important;
  line-height: 1.75;
}

a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--af-navy);
  transition: color 0.2s ease;
}

a:hover { color: var(--af-orange) !important; }

li {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--af-text-muted) !important;
}

b, strong {
  color: var(--af-text) !important;
  font-weight: 600 !important;
}

/* ===== Scroll Progress Bar ===== */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--af-navy), var(--af-orange));
  z-index: 99999;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #eef3f9; }
::-webkit-scrollbar-thumb { background: rgba(17, 65, 108, 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(17, 65, 108, 0.38); }

/* ===== Navigation ===== */
#nav-scroll {
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  background: rgba(248, 250, 253, 0.75) !important;
  border-bottom: 1px solid rgba(17, 65, 108, 0.08) !important;
  transition: all 0.3s ease !important;
}

.navbar-light.bg-transparent.nav-fixed {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid rgba(17, 65, 108, 0.12) !important;
  box-shadow: 0 4px 24px rgba(17, 65, 108, 0.07) !important;
}

/* Brand */
.navbar-brand {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.03em !important;
  color: var(--af-navy) !important;
}

.fixed-top > .container > .navbar-brand,
.fixed-top.nav-fixed > .container > .navbar-brand {
  color: var(--af-navy) !important;
}

/* Nav links */
.nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #4a6070 !important;
  transition: color 0.2s ease !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.nav-link:hover { color: var(--af-navy) !important; }

.fixed-top > .container > .navbar-collapse > .navbar-nav > .nav-item > .nav-link:not([class^="active"]),
.fixed-top.nav-fixed > .container > .navbar-collapse > .navbar-nav > .nav-item > .nav-link:not([class^="active"]) {
  color: #4a6070 !important;
}

/* Hamburger menu button — large touch target */
.navbar-toggler {
  border-color: rgba(17, 65, 108, 0.2) !important;
  padding: 10px 12px !important;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px !important;
}

.icon-bar { background-color: var(--af-navy) !important; }

/* Mobile collapsed menu */
@media (max-width: 991px) {
  .navbar-brand,
  .fixed-top > .container > .navbar-brand {
    color: var(--af-navy) !important;
  }

  .nav-link,
  .fixed-top > .container > .navbar-collapse > .navbar-nav > .nav-item > .nav-link:not([class^="active"]) {
    color: var(--af-navy) !important;
    padding: 14px 10px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(17, 65, 108, 0.06);
  }

  /* Full-width CTA on mobile */
  .navbar-button .btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }

  #main-menu.show,
  #main-menu.collapsing {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    padding: 8px 12px 16px;
    border-radius: 14px;
    margin-top: 8px;
    border: 1px solid rgba(17, 65, 108, 0.1);
    box-shadow: 0 8px 32px rgba(17, 65, 108, 0.12);
  }

  .navbar-button {
    padding-top: 12px !important;
    border-top: 1px solid rgba(17, 65, 108, 0.08);
    width: 100%;
  }

  .navbar-button li { width: 100%; }
}

/* Dropdown */
.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(17, 65, 108, 0.1) !important;
  border-radius: var(--af-radius-sm) !important;
  box-shadow: var(--af-shadow-md) !important;
}

.dropdown-item {
  color: var(--af-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.875rem !important;
  padding: 10px 16px !important;
  min-height: 42px;
  display: flex;
  align-items: center;
}

.dropdown-item:hover {
  background: rgba(17, 65, 108, 0.05) !important;
  color: var(--af-navy) !important;
}

.lang-btn.active {
  background-color: rgba(17, 65, 108, 0.08) !important;
  color: var(--af-navy) !important;
}

/* ===== Loader ===== */
#loader-wrapper { background: var(--af-bg) !important; }
#loader { border-top-color: var(--af-navy) !important; }
.loader-section { background: var(--af-bg) !important; }

/* ===== Hero Header ===== */
header#home {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* Restore the jarallax background image at full opacity */
header#home .jarallax-img {
  opacity: 1 !important;
  filter: none !important;
}

/* Light overlay for readability — covers the image with a translucent white gradient */
header#home::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(248, 250, 253, 0.92) 0%, rgba(248, 250, 253, 0.80) 50%, rgba(248, 250, 253, 0.60) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Subtle dot grid on top of overlay */
header#home::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(17, 65, 108, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 2;
  pointer-events: none;
}

header#home .container { position: relative; z-index: 3; }

/* Hero badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: rgba(17, 65, 108, 0.06);
  border: 1px solid rgba(17, 65, 108, 0.13);
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--af-navy);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  user-select: none;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--af-orange);
  flex-shrink: 0;
  animation: badge-pulse 2.2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* Hero title */
.header-content .page-title {
  font-family: 'Syne', sans-serif !important;
  font-size: clamp(2rem, 5.5vw, 4.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.07 !important;
  letter-spacing: -0.04em !important;
  color: var(--af-text) !important;
}

/* Gradient text */
.text-highlight {
  background: linear-gradient(135deg, var(--af-navy) 0%, var(--af-orange) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Hero subtitle */
.header-text {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.05rem !important;
  color: var(--af-text-muted) !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  max-width: 520px;
}

/* Tech stack tags */
.hero-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.hero-tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(17, 65, 108, 0.13);
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--af-text-muted);
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  text-decoration: none !important;
  box-shadow: 0 1px 4px rgba(17, 65, 108, 0.05);
  user-select: none;
}

.hero-tech-tag:hover {
  border-color: rgba(17, 65, 108, 0.28);
  color: var(--af-navy);
  background: rgba(17, 65, 108, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 65, 108, 0.1);
}

.hero-tech-tag i {
  color: var(--af-navy);
  opacity: 0.65;
  font-size: 0.85rem;
}

/* Hero scroll indicator — hidden on mobile */
.hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  opacity: 0.38;
  animation: hero-bounce 2.5s ease-in-out infinite;
}

.hero-scroll-hint__line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(17, 65, 108, 0.5), transparent);
}

.hero-scroll-hint__label {
  font-size: 0.65rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--af-text-muted) !important;
  font-weight: 700 !important;
  writing-mode: vertical-rl;
  margin-bottom: 0;
}

@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ===== Sections ===== */
section.lg {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.section-bg-grey { background: var(--af-bg-2) !important; }

/* Section eyebrow label */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--af-orange);
  margin-bottom: 16px;
}

.section-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--af-orange);
  flex-shrink: 0;
  border-radius: 2px;
}

.section-title {
  font-family: 'Syne', sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--af-text) !important;
  margin-bottom: 16px !important;
}

/* ===== Cards / Promo Boxes ===== */
.promo-box {
  background: var(--af-card) !important;
  border: 1px solid var(--af-border) !important;
  border-radius: var(--af-radius) !important;
  box-shadow: var(--af-shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.promo-box:hover {
  border-color: var(--af-border-hover) !important;
  box-shadow: var(--af-shadow-hover) !important;
  transform: translateY(-5px) !important;
}

/* Transparent/borderless variants (about text, contact info) */
.promo-box.bg-transparent,
.promo-box.promo-left,
.promo-box.no-shadow.no-blur {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.promo-box.bg-transparent:hover,
.promo-box.promo-left:hover,
.promo-box.no-shadow.no-blur:hover {
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Icon container */
.promo-big {
  width: 60px !important;
  height: 60px !important;
  background: rgba(17, 65, 108, 0.07) !important;
  border: 1px solid rgba(17, 65, 108, 0.1) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 24px !important;
  transition: all 0.3s ease !important;
}

.promo-box:hover .promo-big {
  background: rgba(17, 65, 108, 0.12) !important;
  border-color: rgba(17, 65, 108, 0.2) !important;
  transform: scale(1.06) !important;
}

.promo-icon { color: var(--af-navy) !important; }

.box-title {
  font-family: 'Syne', sans-serif !important;
  color: var(--af-text) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

.box-description {
  color: var(--af-text-muted) !important;
  font-size: 0.875rem !important;
  line-height: 1.75 !important;
}

/* ===== About Section ===== */
#about img.rounded {
  border-radius: var(--af-radius) !important;
  /* box-shadow: var(--af-shadow-md); */
}

#about .section-eyebrow,
#about .promo-container h6 {
  color: var(--af-orange) !important;
}

/* Stat cards */
.stat-card {
  background: var(--af-card);
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius-sm);
  padding: 20px 14px;
  transition: all 0.3s ease;
  text-align: center;
  height: 100%;
  box-shadow: var(--af-shadow-sm);
}

.stat-card:hover {
  border-color: rgba(17, 65, 108, 0.22);
  box-shadow: var(--af-shadow-md);
  transform: translateY(-3px);
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(17, 65, 108, 0.07);
  border: 1px solid rgba(17, 65, 108, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--af-navy);
  font-size: 1rem;
}

.stat-number {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--af-text) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  display: block;
}

.stat-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--af-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: block;
  margin: 0;
}

/* ===== Services Section ===== */
#services .promo-box {
  padding: 34px 26px !important;
  height: auto !important;
  min-height: 260px;
}

/* ===== AI Section ===== */
#ia { position: relative; overflow: hidden; }

#ia::before {
  content: '';
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17, 65, 108, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

#ia .container { position: relative; z-index: 1; }

.brain-icon-glow {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

#ia .fal.fa-brain {
  font-size: 3.2rem !important;
  background: linear-gradient(135deg, var(--af-navy), var(--af-orange));
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: block !important;
  position: relative;
  z-index: 1;
}

.brain-icon-glow::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17, 65, 108, 0.08) 0%, transparent 65%);
  animation: brain-glow 4s ease-in-out infinite;
  z-index: 0;
}

@keyframes brain-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(1.2); }
}

/* Bottom accent line on hover */
#ia .promo-box { position: relative; overflow: hidden; }

#ia .promo-box::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(17, 65, 108, 0.25), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#ia .promo-box:hover::after { opacity: 1; }

/* ===== Clients Section ===== */
#clients .section-title { margin-bottom: 20px !important; }

.clients-marquee-wrapper {
  overflow: hidden;
  position: relative;
  padding: 24px 0;
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

.clients-marquee-track {
  display: flex;
  gap: 56px;
  align-items: center;
  width: max-content;
  animation: marquee 30s linear infinite;
  will-change: transform;
}

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

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

.client-logo-item {
  flex-shrink: 0;
  filter: grayscale(100%) opacity(0.45);
  transition: all 0.35s ease;
}

.client-logo-item:hover {
  filter: grayscale(0%) opacity(1);
}

.client-logo-item img {
  height: 80px;
  width: auto;
  object-fit: contain;
  max-width: 130px;
  display: block;
}

/* Hide legacy clients DOM if still present */
.clients-section .clients-container { display: none !important; }

/* ===== Contact Section ===== */
#contact h2 { font-size: clamp(1.7rem, 3vw, 2.4rem) !important; }

#contact .promo-box { padding: 36px !important; }

/* Icon box override */
.promo-icon-bg.bg-primary {
  background: rgba(17, 65, 108, 0.09) !important;
  border: 1px solid rgba(17, 65, 108, 0.14) !important;
  box-shadow: none !important;
}

.promo-icon-bg.bg-primary i { color: var(--af-navy) !important; }

/* Form inputs — min 48px for touch usability */
.form-control {
  background: #f8fafd !important;
  border: 1px solid rgba(17, 65, 108, 0.14) !important;
  border-radius: var(--af-radius-sm) !important;
  color: var(--af-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1rem !important;
  padding: 13px 16px !important;
  height: auto !important;
  min-height: 48px;
  transition: all 0.2s ease !important;
  -webkit-appearance: none;
}

.form-control::placeholder { color: rgba(107, 124, 147, 0.55) !important; }

.form-control:focus, .form-control:active {
  background: #ffffff !important;
  border-color: rgba(17, 65, 108, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(17, 65, 108, 0.07) !important;
  color: var(--af-text) !important;
  outline: none !important;
}

textarea.form-control { resize: vertical; min-height: 130px; }

.custom-select, select.custom-select {
  background: #f8fafd !important;
  border: 1px solid rgba(17, 65, 108, 0.14) !important;
  border-radius: var(--af-radius-sm) !important;
  color: var(--af-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1rem !important;
  padding: 13px 40px 13px 16px !important;
  height: auto !important;
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7c93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  cursor: pointer;
  width: 100%;
}

.custom-select:focus, select.custom-select:focus {
  background-color: #ffffff !important;
  border-color: rgba(17, 65, 108, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(17, 65, 108, 0.07) !important;
  outline: none !important;
}

.needs-validation .form-control:focus,
.needs-validation .form-control:active {
  border-color: rgba(17, 65, 108, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(17, 65, 108, 0.07) !important;
}

/* ===== Buttons ===== */
.btn-primary, .btn-primary:focus {
  background: var(--af-navy) !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  /* padding: 13px 26px !important; */
  color: #ffffff !important;
  min-height: 48px;
  letter-spacing: 0.02em;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(17, 65, 108, 0.22) !important;
}

.btn-primary:hover, .btn-primary:active {
  background: #0d3358 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(17, 65, 108, 0.3) !important;
  color: #ffffff !important;
}

/* ===== Text Utilities ===== */
.text-primary   { color: var(--af-navy) !important; }
.text-muted     { color: var(--af-text-muted) !important; }
.text-white     { color: #ffffff !important; }
.fw-light       { font-weight: 300 !important; }

/* ===== Back to Top Button ===== */
#back-top {
  background: var(--af-navy) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(17, 65, 108, 0.25) !important;
  transition: all 0.3s ease !important;
  min-width: 44px;
  min-height: 44px;
}

#back-top:hover {
  background: #0d3358 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(17, 65, 108, 0.3) !important;
}

/* ===== WhatsApp Button ===== */
.float-whatsapp .contact_icon {
  background: #25d366 !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35) !important;
  transition: all 0.3s ease !important;
}

.float-whatsapp .contact_icon:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.45) !important;
}

/* ===== Footer ===== */
footer.bg-light-grey-dark {
  background: #eef3f9 !important;
  border-top: 1px solid rgba(17, 65, 108, 0.09) !important;
  padding: 28px 0 !important;
}

footer p        { color: var(--af-text-muted) !important; font-size: 0.875rem !important; }
footer a        { color: var(--af-text-muted) !important; }
footer a:hover  { color: var(--af-navy) !important; }

/* ===== Mobile — 768px and below ===== */
@media (max-width: 768px) {
  section.lg {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .header-content .page-title {
    font-size: 2rem !important;
    letter-spacing: -0.025em !important;
  }

  .header-text { font-size: 0.95rem !important; }

  .hero-badge { font-size: 0.68rem; padding: 6px 12px; margin-bottom: 18px; }

  .hero-tech-tags { gap: 8px; margin-top: 24px; }
  .hero-tech-tag  { font-size: 0.73rem; padding: 6px 11px; }

  /* Hide scroll hint on mobile — not applicable */
  .hero-scroll-hint { display: none !important; }

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

  #services .promo-box {
    padding: 26px 20px !important;
    min-height: auto;
    margin-bottom: 16px;
  }

  .promo-big { width: 52px !important; height: 52px !important; }

  .stat-card { padding: 18px 10px; }
  .stat-number { font-size: 1.6rem !important; }

  #contact .promo-box { padding: 22px 18px !important; }

  .clients-marquee-track { gap: 40px; }
  .client-logo-item img  { height: 28px; max-width: 100px; }

  .clients-marquee-wrapper {
    mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  }

  /* Full-width buttons on mobile */
  .header-content .btn-primary { width: 100%; justify-content: center; }
}

/* ===== Small mobile — 480px and below ===== */
@media (max-width: 480px) {
  .header-content .page-title { font-size: 1.8rem !important; }

  /* Stack hero tags in two columns */
  .hero-tech-tags { gap: 7px; }
  .hero-tech-tag  { font-size: 0.7rem; padding: 5px 10px; }

  .hero-badge { font-size: 0.65rem; padding: 5px 10px; }

  /* Wider stat cards */
  #stats-section .col-6 { flex: 0 0 100%; max-width: 100%; }

  .section-eyebrow { font-size: 0.68rem; }
}

/* ===== Prefers reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .badge-pulse, .brain-glow, .hero-bounce, .marquee { animation: none !important; }
  .clients-marquee-track { animation: none !important; overflow-x: auto; }
  .promo-box:hover, .stat-card:hover, .btn-primary:hover { transform: none !important; }
}