/* ============================================
 * Innovative Tax Consultants Private Limited — bundled stylesheet
 * SOURCE MODULES in src/css/.  DO NOT EDIT this file directly.
 * Run: npm run build:css
 * ============================================ */
/* ============================================
   Innovative Tax Consultants Private Limited — Trust & Authority
   Palette: Navy (#0F172A) + Sky Blue CTA (#0369A1)
   ============================================ */

:root {
  --navy-900: #0F172A;
  --navy-800: #1E293B;
  --navy-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --sky-800:   #075985;
  --sky-700:   #0369A1;
  --sky-600:   #0284C7;
  --sky-500:   #0EA5E9;
  --sky-300:   #7DD3FC;
  --sky-100:   #E0F2FE;
  --sky-50:    #F0F9FF;
  --accent:    var(--sky-700);
  --accent-rgb: 3, 105, 161;
}

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

body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background: #ffffff;
  color: var(--navy-900);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* Soft cross-mode transition for surfaces & text — keep short so it doesn't drag */
header,
section,
footer,
.stat-card,
.service-card,
.feature-card,
.testimonial-card,
.faq-item,
.mission-card,
.quick-link-card,
.info-card,
.contact-wrapper,
.form-group input,
.form-group select,
.form-group textarea,
.business-hours,
.important-note {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s, visibility 0.5s;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--sky-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader p {
  color: var(--sky-300);
  margin-top: 20px;
}

.loader.hide {
  opacity: 0;
  visibility: hidden;
}

/* Sections are visible by default; .visible class only adds a soft fade-in
   when JS opts in. This guarantees content is readable without JS. */
section {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ============================================
   FLOATING PILL NAVBAR
   ============================================ */

.floating-nav {
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  pointer-events: none;
  transition: top 0.3s ease;
}

.floating-nav.scrolled {
  top: 0.5rem;
}

.nav-shell {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  padding: 0.55rem 0.65rem 0.55rem 1.1rem;
  background: rgba(15, 23, 42, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(2, 6, 18, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  gap: 0.75rem;
}

.floating-nav.scrolled .nav-shell {
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 8px 24px rgba(2, 6, 18, 0.3);
}

/* Light mode pill: lighter glass */
body:not(.dark-mode) .nav-shell {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body:not(.dark-mode) .floating-nav.scrolled .nav-shell {
  background: rgba(255, 255, 255, 0.92);
}

/* --- Brand --- */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.25rem 0.5rem;
  border-radius: 100px;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s ease;
}

.nav-brand-logo {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav-brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 1rem;
  letter-spacing: -0.015em;
}

.nav-brand-text strong {
  background: linear-gradient(135deg, var(--sky-300), var(--sky-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.nav-brand-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: liveDotPulse 2s infinite;
  margin-left: 4px;
}

body:not(.dark-mode) .nav-brand {
  color: var(--navy-900);
}

/* nav-brand-logo: original colors in both modes (no filter) */

/* --- Nav links --- */
.nav-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

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

.nav-link.active,
.nav-link[aria-expanded="true"] {
  background: rgba(125, 211, 252, 0.15);
  color: var(--sky-300);
}

.nav-link .fa-chevron-down {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}

.dropdown:hover .nav-link .fa-chevron-down,
.nav-link[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

body:not(.dark-mode) .nav-link {
  color: var(--navy-700);
}

body:not(.dark-mode) .nav-link:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--navy-900);
}

body:not(.dark-mode) .nav-link.active,
body:not(.dark-mode) .nav-link[aria-expanded="true"] {
  background: var(--sky-100);
  color: var(--sky-800);
}

/* --- Nav actions (theme toggle + CTA + hamburger) --- */
.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.55rem 1.05rem;
  background: var(--sky-700);
  color: #ffffff !important;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-cta i {
  font-size: 0.85rem;
}

.nav-cta:hover {
  background: var(--sky-600);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
}

/* Theme toggle adapts to floating-nav: smaller, square-ish radius */
.floating-nav .theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

body:not(.dark-mode) .floating-nav .theme-toggle {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--sky-700);
}

body:not(.dark-mode) .floating-nav .theme-toggle:hover {
  background: rgba(15, 23, 42, 0.1);
  border-color: var(--sky-700);
  color: var(--sky-800);
  box-shadow: 0 0 0 4px rgba(3, 105, 161, 0.1);
}

/* --- Hamburger (mobile only) --- */
.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

body:not(.dark-mode) .nav-toggle {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.12);
}

body:not(.dark-mode) .nav-toggle span {
  background: var(--navy-900);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.theme-toggle {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sky-300);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--sky-300);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.12);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle[aria-pressed="true"] {
  background: rgba(252, 211, 77, 0.15);
  border-color: rgba(252, 211, 77, 0.45);
  color: #fcd34d;
}

.theme-toggle[aria-pressed="true"]:hover {
  background: rgba(252, 211, 77, 0.25);
  border-color: #fcd34d;
  color: #fef3c7;
  box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.15);
}

.theme-toggle-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

.theme-toggle:hover .theme-toggle-icon {
  transform: rotate(20deg);
}

.theme-toggle[aria-pressed="true"] .theme-toggle-icon {
  transform: rotate(360deg);
}

/* DROPDOWN MENU — adapted for floating pill */
.dropdown,
.nav-item.dropdown {
  position: relative;
  display: inline-block;
}

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

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(15, 23, 42, 0.97);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  min-width: 240px;
  border-radius: 14px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1001;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.65rem 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 10px;
  margin: 1px 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dropdown-menu a i {
  width: 18px;
  color: var(--sky-300);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dropdown-menu a:hover {
  background: rgba(125, 211, 252, 0.12);
  color: #ffffff;
  transform: translateX(3px);
}

body:not(.dark-mode) .dropdown-menu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

body:not(.dark-mode) .dropdown-menu a {
  color: var(--navy-700);
}

body:not(.dark-mode) .dropdown-menu a:hover {
  background: var(--sky-50);
  color: var(--sky-800);
}

body:not(.dark-mode) .dropdown-menu a i {
  color: var(--sky-700);
}

/* --- Mobile slide-down menu --- */
.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 1rem;
  right: 1rem;
  background: rgba(15, 23, 42, 0.97);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mobile-menu-link,
.mobile-menu-group > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-menu-link:hover,
.mobile-menu-group > a:hover {
  background: rgba(125, 211, 252, 0.12);
  color: var(--sky-300);
}

.mobile-menu-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0.4rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu-group-label {
  padding: 0.4rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sky-300);
}

.mobile-menu-group > a i {
  width: 20px;
  color: var(--sky-300);
  font-size: 0.9rem;
}

.mobile-menu-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.9rem 1.2rem;
  margin-top: 0.5rem;
  background: var(--sky-700);
  color: #ffffff !important;
  border-radius: 100px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mobile-menu-cta:hover {
  background: var(--sky-600);
  transform: translateY(-2px);
}

body:not(.dark-mode) .mobile-menu {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

body:not(.dark-mode) .mobile-menu-link,
body:not(.dark-mode) .mobile-menu-group > a {
  color: var(--navy-700);
}

body:not(.dark-mode) .mobile-menu-link:hover,
body:not(.dark-mode) .mobile-menu-group > a:hover {
  background: var(--sky-50);
  color: var(--sky-800);
}

body:not(.dark-mode) .mobile-menu-group {
  border-color: rgba(15, 23, 42, 0.08);
}

body:not(.dark-mode) .mobile-menu-group > a i {
  color: var(--sky-700);
}

/* --- Floating nav: responsive collapse --- */
@media (max-width: 992px) {
  .nav-cta-label {
    display: none;
  }
  .nav-cta {
    padding: 0.55rem 0.75rem;
  }
}

@media (max-width: 880px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-shell {
    padding-left: 0.85rem;
  }
}

@media (max-width: 480px) {
  .nav-brand-text {
    display: none;
  }
  .floating-nav {
    padding: 0 0.5rem;
  }
  .nav-shell {
    padding: 0.4rem 0.4rem 0.4rem 0.65rem;
    border-radius: 60px;
  }
  .nav-cta {
    padding: 0.5rem 0.75rem;
  }
}

/* ============================================
   HERO — Split layout with Compliance Dashboard
   ============================================ */

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 7rem 6% 5rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-900) 0%, #0c1a35 50%, var(--navy-800) 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(2, 132, 199, 0.22), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(14, 165, 233, 0.16), transparent 55%);
  pointer-events: none;
  animation: heroDrift 28s ease-in-out infinite;
  z-index: 0;
}

@keyframes heroDrift {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.9; }
  50%      { transform: scale(1.08) translate(1.5%, -1%); opacity: 1; }
}

.hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.hero-content > * {
  animation: heroFadeUp 0.7s ease-out both;
}
.hero-text   { animation-delay: 0.05s; }
.hero-visual { animation-delay: 0.25s; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-text {
  text-align: left;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 0.9rem;
  background: rgba(var(--accent-rgb), 0.18);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 100px;
  color: var(--sky-300);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--sky-300);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.2);
  animation: eyebrowPulse 2s ease-in-out infinite;
}

@keyframes eyebrowPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(125, 211, 252, 0); }
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 1.25rem 0;
}

.hero-title .accent {
  background: linear-gradient(135deg, var(--sky-300) 0%, var(--sky-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--slate-300);
  max-width: 540px;
  margin: 0 0 2rem 0;
  line-height: 1.55;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
}

.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  color: var(--slate-300);
  font-size: 0.92rem;
  font-weight: 500;
}

.hero-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-trust-strip i {
  color: var(--sky-300);
  font-size: 0.9rem;
}

/* ============================================
   COMPLIANCE DASHBOARD CARD (hero visual)
   ============================================ */

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

.compliance-card {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
  z-index: 2;
}

.compliance-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 1rem;
}

.compliance-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.compliance-subtitle {
  color: var(--slate-500);
  font-size: 0.75rem;
  margin-top: 2px;
}

.compliance-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4ade80;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: liveDotPulse 1.8s infinite;
}

@keyframes liveDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.compliance-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.compliance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  gap: 1rem;
}

.compliance-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateX(3px);
}

.compliance-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #e2e8f0;
  font-size: 0.92rem;
  font-weight: 600;
}

.compliance-label > i {
  color: var(--sky-300);
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
}

.compliance-label .meta {
  color: var(--slate-500);
  font-size: 0.72rem;
  font-weight: 400;
  margin-top: 1px;
}

.compliance-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.32rem 0.7rem;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.compliance-pill i {
  font-size: 0.68rem;
}

.compliance-pill.ok {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.compliance-pill.warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.compliance-pill.pending {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.compliance-card-footer {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.next-due-label {
  color: var(--slate-500);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.next-due-value {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 2px;
}

.savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4ade80;
  font-size: 0.85rem;
  font-weight: 500;
}

.savings strong {
  color: #ffffff;
  font-weight: 700;
}

/* Floating accent cards */
.float-card {
  position: absolute;
  background: rgba(15, 23, 42, 0.7);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1.25;
  z-index: 3;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  animation: floatGentle 6s ease-in-out infinite;
}

.float-card i {
  color: var(--sky-300);
  font-size: 1.15rem;
}

.float-card strong {
  color: #ffffff;
  font-weight: 700;
}

.float-card-1 {
  top: 8%;
  right: -4%;
  animation-delay: 0s;
}

.float-card-2 {
  bottom: 8%;
  left: -6%;
  animation-delay: 3s;
}

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

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.95rem 2rem;
  background: var(--sky-600);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  background: var(--sky-700);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.95rem 2rem;
  background: transparent;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.btn-secondary:hover {
  border-color: var(--sky-300);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

/* ============================================
   MID-PAGE CTA BANNER
   ============================================ */

.cta-banner {
  padding: 4rem 6%;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--sky-800) 50%, var(--navy-900) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 50%, rgba(14, 165, 233, 0.28), transparent 50%),
    radial-gradient(circle at 100% 50%, rgba(2, 132, 199, 0.28), transparent 50%);
  pointer-events: none;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.cta-banner-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.cta-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: var(--sky-300);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.cta-banner-eyebrow i {
  font-size: 0.75rem;
  color: #fcd34d;
}

.cta-banner h2 {
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 0.85rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.cta-banner p {
  color: var(--slate-300);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.cta-banner-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-banner .btn-secondary {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

/* ============================================
   DOT PATTERN BACKGROUNDS (subtle visual rhythm)
   ============================================ */

.about-section,
.testimonials,
.quick-links {
  position: relative;
}

.about-section::before,
.testimonials::before,
.quick-links::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(3, 105, 161, 0.07) 1px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.about-section > *,
.testimonials > *,
.quick-links > * {
  position: relative;
  z-index: 1;
}

body.dark-mode .about-section::before,
body.dark-mode .testimonials::before,
body.dark-mode .quick-links::before {
  background-image: radial-gradient(circle, rgba(125, 211, 252, 0.06) 1px, transparent 1.5px);
}

/* ============================================
   STATS
   ============================================ */

.stats-section {
  padding: 3rem 6%;
  background: linear-gradient(135deg, #ffffff 0%, var(--slate-50) 100%);
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  text-align: center;
  padding: 2rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--slate-200);
  cursor: default;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  border-color: var(--sky-300);
}

.stat-card i {
  font-size: 2.5rem;
  color: var(--sky-700);
  margin-bottom: 0.75rem;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--navy-900);
  display: inline-block;
  line-height: 1.1;
}

.stat-label {
  color: var(--slate-500);
  font-weight: 500;
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-title {
  text-align: center;
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
  width: 100%;
}

.section-title span {
  color: var(--sky-700);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--sky-600);
  border-radius: 3px;
}

.section-subtitle {
  text-align: center;
  color: var(--slate-500);
  margin: 1.25rem auto 0;
  max-width: 700px;
  font-size: 1.05rem;
}

/* ============================================
   SERVICES
   ============================================ */

.services-section {
  padding: 3rem 6%;
  background: #ffffff;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
}

.service-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--slate-200);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
  height: fit-content;
  cursor: pointer;
  /* Land below the floating nav (~72px high + 16px margin) when scrolled
     into view via the Services dropdown. */
  scroll-margin-top: 96px;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  border-color: var(--sky-300);
}

.service-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  background: #ffffff;
  transition: background-color 0.2s ease;
  border: 0;
  border-bottom: 1px solid var(--slate-100);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

.service-card-header:hover {
  background: var(--sky-50);
}

.service-card-icon {
  width: 44px;
  height: 44px;
  background: var(--sky-50);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-card-icon i {
  font-size: 1.25rem;
  color: var(--sky-700);
}

.service-card-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-900);
  flex: 1;
  margin: 0;
  letter-spacing: -0.01em;
}

.service-card-arrow {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sky-700);
  transition: transform 0.2s ease;
}

.service-card-arrow i {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.service-card.active .service-card-arrow i {
  transform: rotate(180deg);
}

.service-card .service-card-content {
  display: none;
  background: var(--slate-50);
}

.service-card.active .service-card-content {
  display: block;
}

.service-card-content ul {
  list-style: none;
  padding: 1rem;
  margin: 0;
}

.service-card-content li {
  padding: 0.55rem 0;
  color: var(--navy-700);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--slate-200);
  transition: color 0.2s ease;
}

.service-card-content li:last-child {
  border-bottom: none;
}

.service-card-content li:hover {
  color: var(--sky-700);
}

.service-card-content li i {
  color: var(--sky-700);
  width: 18px;
  font-size: 0.8rem;
}

/* ============================================
   WHY CHOOSE US
   ============================================ */

.why-choose-us {
  padding: 3rem 6%;
  background: var(--slate-50);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--sky-300);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.feature-icon {
  width: 64px;
  height: 64px;
  background: var(--sky-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.feature-icon i {
  font-size: 1.75rem;
  color: var(--sky-700);
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--navy-900);
  font-weight: 700;
}

.feature-card p {
  color: var(--slate-500);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ============================================
   TESTIMONIALS
   ============================================ */

.testimonials {
  padding: 3rem 6%;
  background: #ffffff;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-card {
  background: #ffffff;
  padding: 1.75rem;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  border: 1px solid var(--slate-200);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  border-color: var(--sky-300);
}

.quote-icon i {
  font-size: 2rem;
  color: var(--sky-300);
  margin-bottom: 0.75rem;
}

.testimonial-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--navy-700);
  margin-bottom: 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.author-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-initials {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sky-100);
  color: var(--sky-800);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.testimonial-author h4 {
  font-size: 1rem;
  margin-bottom: 0.15rem;
  color: var(--navy-900);
  font-weight: 600;
}

.testimonial-author .role {
  font-size: 0.8rem;
  color: var(--slate-500);
}

.rating {
  margin-top: 0.25rem;
}

.rating i {
  font-size: 0.75rem;
  color: #f59e0b;
  margin-right: 2px;
}

/* ============================================
   FAQ
   ============================================ */

.faq-section {
  padding: 3rem 6%;
  background: var(--slate-50);
}

.faq-grid {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 0.85rem;
  border: 1px solid var(--slate-200);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item:hover {
  border-color: var(--sky-300);
}

.faq-question {
  padding: 1.1rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy-900);
  font-size: 1rem;
  transition: background-color 0.2s ease;
  /* button reset */
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.faq-question:hover {
  background: var(--sky-50);
}

.faq-question i {
  color: var(--sky-700);
  transition: transform 0.2s ease;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.4rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: var(--slate-600);
  font-size: 0.95rem;
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  padding: 0 1.4rem 1.1rem 1.4rem;
  max-height: 300px;
}

/* ============================================
   QUICK LINKS
   ============================================ */

.quick-links {
  padding: 3rem 6%;
  background: #ffffff;
}

.quick-links-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

.quick-link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--slate-200);
  position: relative;
  overflow: hidden;
}

.quick-link-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--sky-600);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.2s ease;
}

.quick-link-card:hover::before {
  transform: scaleY(1);
}

.quick-link-card:hover {
  transform: translateX(4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: var(--sky-300);
}

.quick-link-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--sky-50);
  transition: background-color 0.2s ease;
}

.quick-link-icon i {
  font-size: 1.15rem;
  color: var(--sky-700);
  transition: color 0.2s ease;
}

.quick-link-card:hover .quick-link-icon {
  background: var(--sky-700);
}

.quick-link-card:hover .quick-link-icon i {
  color: #ffffff;
}

.quick-link-content {
  flex: 1;
}

.quick-link-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 0.2rem;
}

.quick-link-content p {
  font-size: 0.85rem;
  color: var(--slate-500);
  margin: 0;
}

.quick-link-card > i {
  color: var(--slate-300);
  font-size: 0.9rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.quick-link-card:hover > i {
  color: var(--sky-700);
  transform: translateX(3px);
}

/* ============================================
   CONTACT
   ============================================ */

.contact {
  padding: 3rem 6%;
  background: var(--slate-50);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.business-hours {
  background: var(--sky-50);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  color: var(--navy-900);
}

.business-hours i {
  color: var(--sky-700);
  margin-right: 6px;
}

.business-hours .live-clock {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 4px 0;
}

.business-hours small {
  color: var(--slate-500);
  font-size: 0.8rem;
}

.info-card {
  padding: 1rem 1.1rem;
  background: var(--slate-50);
  border-radius: 12px;
  border: 1px solid var(--slate-200);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.info-card:hover {
  background: var(--sky-50);
  border-color: var(--sky-300);
}

.info-card i {
  font-size: 1.25rem;
  color: var(--sky-700);
  margin-bottom: 0.5rem;
}

.info-card h4 {
  font-size: 1rem;
  color: var(--navy-900);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.info-card p {
  font-size: 0.9rem;
  color: var(--slate-600);
  line-height: 1.5;
}

/* Separate multiple addresses within one card (e.g. two branch offices). */
.info-card > p + p {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.form-group {
  position: relative;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 0.9rem 0.85rem 2.5rem;
  border: 1.5px solid var(--slate-200);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #ffffff;
  color: var(--navy-900);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--sky-600);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.form-group > i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sky-700);
  font-size: 0.95rem;
  pointer-events: none;
}

/* Textarea icon sits at the top, not centered */
.form-group textarea ~ i {
  top: 1.05rem;
  transform: none;
}

/* Slightly tighter padding so the icon visually clears the text */
.form-group input,
.form-group select,
.form-group textarea {
  padding-left: 2.65rem;
}

/* Bold the field prompt words (placeholders + service dropdown) */
.form-group input::placeholder,
.form-group textarea::placeholder {
  font-weight: 700;
}
.form-group select {
  font-weight: 700;
}

.form-group select {
  /* Hide the native dropdown chevron so the left icon stays in lockstep */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

body.dark-mode .form-group select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237DD3FC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

button[type="submit"] {
  padding: 0.95rem;
  background: var(--sky-700);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

button[type="submit"]:hover {
  background: var(--sky-800);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.3);
}

button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.important-note {
  background: var(--sky-50);
  border-left: 4px solid var(--sky-600);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  color: var(--navy-700);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.important-note i {
  color: var(--sky-700);
  font-size: 1rem;
  margin-top: 2px;
}

/* ============================================
   OUR OFFICES / LOCATIONS
   ============================================ */
.locations {
  padding: 4rem 6%;
  background: linear-gradient(180deg, var(--slate-50) 0%, #ffffff 60%);
}

/* No underline under the "Our Presence" section title */
.locations .section-title::after {
  display: none;
}

/* Three category boxes (Registered / Branch / Collaborator) stacked
   vertically, each full width and centered. */
.locations-grid {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 1080px;
  margin: 0 auto;
}

/* Animated gradient border angle (same technique as the compliance calendar) */
@property --officeAngle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Stylish office category card */
.locations-grid .info-card {
  text-align: center;
  background: #ffffff;
  border: none;
  border-radius: 18px;
  padding: 2.1rem 2.4rem 2.3rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Spinning conic-gradient border — matches the calendar card border */
.locations-grid .info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(from var(--officeAngle), #22d3ee, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #22d3ee);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: officeSpin 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes officeSpin {
  to {
    --officeAngle: 360deg;
  }
}

.locations-grid .info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .locations-grid .info-card::before {
    animation: none;
  }
}

/* Circular gradient icon badge */
.locations-grid .info-card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky-500), var(--sky-700));
  color: #ffffff;
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 8px 18px rgba(2, 132, 199, 0.30);
}

.locations-grid .info-card h4 {
  display: table;
  margin: 0 auto 0.2rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Accent underline spanning the full width of each office heading */
.locations-grid .info-card h4::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  margin: 0.55rem 0 0;
  background: var(--sky-500);
  border-radius: 3px;
}


.locations-grid .info-card > p {
  max-width: 520px;
  margin: 1rem auto 0;
  color: var(--slate-600);
}

/* Multiple addresses inside one box sit side by side in equal columns
   with a divider line between each; heading stays centered above. */
.branch-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  text-align: left;
  margin-top: 1.5rem;
  align-items: stretch;
}

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

/* Each address is its own tile card */
.branch-split > * {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.4rem 1.35rem;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--slate-600);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

/* "Get Directions" CTA link at the bottom of each address tile */
.office-cta {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sky-700);
  text-decoration: none;
  transition: color 0.2s ease;
}

.office-cta i {
  transition: transform 0.2s ease;
}

.office-cta:hover {
  color: var(--sky-800);
}

.office-cta:hover i {
  transform: translateX(3px);
}

/* Registered Office card centres its CTA below the address */
.locations-grid .info-card > p .office-cta {
  display: flex;
  justify-content: center;
  margin: 0.9rem auto 0;
  padding-top: 0;
}

.branch-split > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09);
  border-color: var(--sky-300);
  background: #ffffff;
}

/* Circular map-pin badge leading each address tile */
.branch-split > p::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sky-100);
  color: var(--sky-700);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Lead line (firm / person name) emphasised */
.branch-split > p strong {
  display: block;
  color: var(--navy-900);
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 0.15rem;
}



/* Contact + directions cell inside the Registered Office box */
.branch-cta-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.branch-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--sky-600);
  color: #ffffff;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.branch-cta:hover {
  background: var(--sky-700);
  transform: translateY(-1px);
}

.branch-hours {
  font-size: 0.8rem;
  color: var(--slate-500);
}

.branch-hours i {
  margin-right: 4px;
}

@media (max-width: 768px) {
  .branch-split,
  .branch-card--3 .branch-split {
    grid-template-columns: 1fr;
  }
}

.map-section {
  padding: 0 6% 3rem;
}

.map-container {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--slate-200);
}

/* ============================================
   LIGHT-MODE TESTIMONIALS FEATURED CARD
   Default is dark gradient. In light mode, flip to a
   sky-tinted gradient with navy text.
   ============================================ */

body:not(.dark-mode) .testimonial-card.featured {
  background: linear-gradient(135deg, #ffffff 0%, var(--sky-50) 55%, #dbeafe 100%);
  color: var(--navy-900);
  border: 1px solid var(--slate-200);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

body:not(.dark-mode) .testimonial-card.featured::before {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.15), transparent 65%);
}

body:not(.dark-mode) .testimonial-card.featured:hover {
  border-color: var(--sky-300);
  box-shadow: 0 18px 40px rgba(14, 165, 233, 0.22);
}

body:not(.dark-mode) .testimonial-card.featured .quote-icon i {
  color: var(--sky-700);
  opacity: 0.4;
}

body:not(.dark-mode) .testimonial-card.featured p {
  color: var(--navy-700);
}

body:not(.dark-mode) .testimonial-card.featured .testimonial-author h4 {
  color: var(--navy-900);
}

body:not(.dark-mode) .testimonial-card.featured .testimonial-author .role {
  color: var(--slate-500);
}

body:not(.dark-mode) .testimonial-card.featured .author-initials {
  background: rgba(3, 105, 161, 0.12);
  color: var(--sky-800);
}

/* Smooth toggle */
.testimonial-card.featured,
.testimonial-card.featured::before,
.testimonial-card.featured p,
.testimonial-card.featured h4,
.testimonial-card.featured .role,
.testimonial-card.featured .author-initials {
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ============================================
   LIGHT-MODE CTA BANNER
   Default is dark gradient. In light mode, flip to a
   sky-tinted gradient with navy text.
   ============================================ */

body:not(.dark-mode) .cta-banner {
  background: linear-gradient(135deg, #ffffff 0%, var(--sky-50) 45%, #dbeafe 100%);
}

body:not(.dark-mode) .cta-banner-glow {
  background:
    radial-gradient(circle at 0% 50%, rgba(14, 165, 233, 0.22), transparent 50%),
    radial-gradient(circle at 100% 50%, rgba(125, 211, 252, 0.3), transparent 50%);
}

body:not(.dark-mode) .cta-banner::before {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
}

body:not(.dark-mode) .cta-banner-eyebrow {
  background: rgba(3, 105, 161, 0.1);
  border-color: rgba(3, 105, 161, 0.22);
  color: var(--sky-800);
}

body:not(.dark-mode) .cta-banner-eyebrow i {
  color: #d97706;
}

body:not(.dark-mode) .cta-banner h2 {
  color: var(--navy-900);
}

body:not(.dark-mode) .cta-banner p {
  color: var(--slate-600);
}

body:not(.dark-mode) .cta-banner .btn-secondary {
  border-color: rgba(15, 23, 42, 0.18);
  color: var(--navy-900);
}

body:not(.dark-mode) .cta-banner .btn-secondary:hover {
  border-color: var(--sky-700);
  background: rgba(15, 23, 42, 0.04);
  color: var(--sky-700);
}

/* Smooth toggle */
.cta-banner,
.cta-banner-glow,
.cta-banner-eyebrow,
.cta-banner h2,
.cta-banner p,
.cta-banner .btn-secondary {
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* ============================================
   LIGHT-MODE FOOTER (all 5 sub-sections)
   Default footer is all-dark. These overrides flip newsletter,
   4-col main, trust strip, signature (doodles + skyline + mark),
   and the legal bottom row to a light treatment.
   ============================================ */

/* --- Newsletter strip --- */
body:not(.dark-mode) .footer-newsletter {
  background: linear-gradient(135deg, #ffffff 0%, var(--sky-50) 50%, #dbeafe 100%);
}

body:not(.dark-mode) .footer-newsletter::before {
  background:
    radial-gradient(circle at 15% 50%, rgba(14, 165, 233, 0.18), transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(125, 211, 252, 0.25), transparent 50%);
}

body:not(.dark-mode) .footer-newsletter::after {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

body:not(.dark-mode) .footer-newsletter-eyebrow {
  background: rgba(3, 105, 161, 0.1);
  border-color: rgba(3, 105, 161, 0.22);
  color: var(--sky-800);
}

body:not(.dark-mode) .footer-newsletter-text h3 {
  color: var(--navy-900);
}

body:not(.dark-mode) .footer-newsletter-text p {
  color: var(--slate-600);
}

body:not(.dark-mode) .footer-newsletter-form input[type="email"] {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.15);
  color: var(--navy-900);
}

body:not(.dark-mode) .footer-newsletter-form input[type="email"]::placeholder {
  color: #94a3b8;
}

body:not(.dark-mode) .footer-newsletter-form input[type="email"]:focus {
  background: #ffffff;
  border-color: var(--sky-700);
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.15);
}

body:not(.dark-mode) .newsletter-input-wrap i {
  color: var(--sky-700);
}

body:not(.dark-mode) .footer-newsletter-fineprint {
  color: var(--slate-500);
}

body:not(.dark-mode) .footer-newsletter-fineprint i {
  color: var(--sky-700);
}

/* --- Main footer container + 4-col content --- */
body:not(.dark-mode) footer {
  background: #ffffff;
  color: var(--navy-900);
}

body:not(.dark-mode) .footer-content {
  border-bottom-color: var(--slate-200);
}

body:not(.dark-mode) .footer-section h3 {
  color: var(--navy-900);
}

body:not(.dark-mode) .footer-section p {
  color: var(--slate-600);
}

body:not(.dark-mode) .footer-section h4 {
  color: var(--sky-800);
}

body:not(.dark-mode) .footer-section h4::after {
  background: var(--sky-600);
}

body:not(.dark-mode) .footer-section a {
  color: var(--navy-700);
}

body:not(.dark-mode) .footer-section a:hover {
  color: var(--sky-700);
}

body:not(.dark-mode) .footer-section a i {
  color: var(--sky-700);
}

/* footer logo: original colors in both modes (no filter) */

body:not(.dark-mode) .footer-link-strong {
  color: var(--navy-900) !important;
}

body:not(.dark-mode) .footer-contact-row {
  color: var(--navy-700) !important;
}

body:not(.dark-mode) .footer-contact-row i {
  color: var(--sky-700);
}

body:not(.dark-mode) .footer-contact-static:hover {
  color: var(--navy-700) !important;
}

/* --- Office status pill (closed state needs better contrast) --- */
body:not(.dark-mode) .footer-status[data-status="closed"] {
  background: rgba(100, 116, 139, 0.1);
  border-color: rgba(100, 116, 139, 0.3);
  color: var(--slate-600);
}

body:not(.dark-mode) .footer-status[data-status="open"] {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #15803d;
}

/* --- Social links --- */
body:not(.dark-mode) .footer-social-link {
  background: var(--slate-100);
  border-color: var(--slate-200);
  color: var(--sky-700) !important;
}

body:not(.dark-mode) .footer-social-link:hover {
  background: var(--sky-700);
  border-color: var(--sky-700);
  color: #ffffff !important;
}

/* --- Trust strip --- */
body:not(.dark-mode) .footer-trust {
  background: var(--slate-50);
  border-bottom-color: var(--slate-200);
  color: var(--slate-600);
}

body:not(.dark-mode) .footer-trust i {
  color: var(--sky-700);
}

/* --- Signature section (doodles + skyline + mark) --- */
body:not(.dark-mode) .footer-signature {
  background: #ffffff;
}

body:not(.dark-mode) .footer-signature::before {
  background:
    radial-gradient(ellipse at center 30%, rgba(14, 165, 233, 0.12), transparent 60%),
    radial-gradient(ellipse at center 100%, rgba(15, 23, 42, 0.03), transparent 70%);
}

body:not(.dark-mode) .doodle {
  color: var(--navy-900);
  opacity: 0.05;
}

body:not(.dark-mode) .footer-signature:hover .doodle {
  opacity: 0.09;
}

body:not(.dark-mode) .footer-signature-skyline {
  color: var(--navy-900);
  opacity: 0.1;
}

body:not(.dark-mode) .footer-mark {
  color: var(--navy-900);
  text-shadow: 0 4px 30px rgba(14, 165, 233, 0.18);
}

body:not(.dark-mode) .footer-tagline {
  color: var(--navy-700);
}

body:not(.dark-mode) .footer-tagline strong {
  color: var(--navy-900);
}

/* --- Footer bottom (legal row) --- */
body:not(.dark-mode) .footer-bottom {
  background: var(--slate-50);
  color: var(--slate-600);
  border-top: 1px solid var(--slate-200);
}

body:not(.dark-mode) .footer-bottom-left p {
  color: var(--navy-700);
}

body:not(.dark-mode) .footer-legal a {
  color: var(--navy-700);
}

body:not(.dark-mode) .footer-legal a:hover {
  color: var(--sky-700);
}

body:not(.dark-mode) .footer-legal-sep {
  color: #cbd5e1;
}

body:not(.dark-mode) .footer-bottom-right {
  color: var(--slate-600);
}

body:not(.dark-mode) .footer-bottom-right i {
  color: var(--sky-700);
}

/* --- Smooth toggle transitions for footer surfaces --- */
.footer-newsletter,
.footer-newsletter-text h3,
.footer-newsletter-text p,
.footer-newsletter-form input[type="email"],
.footer-content,
.footer-section h3,
.footer-section p,
.footer-section h4,
.footer-section a,
.footer-trust,
.footer-signature,
.footer-mark,
.footer-tagline,
.footer-bottom,
.footer-bottom-left p,
.footer-legal a,
.doodle,
.footer-signature-skyline,
.footer-social-link {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, opacity 0.35s ease;
}

/* ============================================
   LIGHT-MODE WHY CHOOSE US FEATURED CARD
   Default is dark gradient (kept for dark mode).
   In light mode, flip to a sky-tinted gradient.
   ============================================ */

body:not(.dark-mode) .feature-card.feature-featured {
  background: linear-gradient(135deg, #ffffff 0%, var(--sky-50) 50%, #dbeafe 100%);
  color: var(--navy-900);
  border: 1px solid var(--slate-200);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

body:not(.dark-mode) .feature-card.feature-featured::before {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.18), transparent 65%);
}

body:not(.dark-mode) .feature-card.feature-featured:hover {
  border-color: var(--sky-300);
  box-shadow: 0 18px 40px rgba(14, 165, 233, 0.25);
}

body:not(.dark-mode) .feature-card.feature-featured .feature-icon {
  background: rgba(3, 105, 161, 0.1);
}

body:not(.dark-mode) .feature-card.feature-featured .feature-icon i {
  color: var(--sky-700);
}

body:not(.dark-mode) .feature-card.feature-featured h3 {
  color: var(--navy-900);
}

body:not(.dark-mode) .feature-card.feature-featured p {
  color: var(--slate-600);
}

body:not(.dark-mode) .feature-featured-list li {
  color: var(--navy-700);
}

body:not(.dark-mode) .feature-featured-list li i {
  color: var(--sky-700);
}

/* Smooth toggle */
.feature-card.feature-featured,
.feature-card.feature-featured::before,
.feature-card.feature-featured .feature-icon,
.feature-card.feature-featured h3,
.feature-card.feature-featured p,
.feature-featured-list li {
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ============================================
   LIGHT-MODE ABOUT STORY CARD
   Default story card is dark gradient (kept for dark mode).
   In light mode, flip to a white→sky-tint gradient.
   ============================================ */

body:not(.dark-mode) .about-story-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--sky-50) 60%, #dbeafe 100%);
  border: 1px solid var(--slate-200);
  color: var(--navy-900);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

body:not(.dark-mode) .about-story-card::before {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.15), transparent 70%);
}

body:not(.dark-mode) .about-story-eyebrow {
  background: rgba(3, 105, 161, 0.1);
  border-color: rgba(3, 105, 161, 0.22);
  color: var(--sky-800);
}

body:not(.dark-mode) .about-story-card h3 {
  color: var(--navy-900);
}

body:not(.dark-mode) .about-story-card p {
  color: var(--slate-600);
}

body:not(.dark-mode) .about-story-card strong {
  color: var(--navy-900);
}

body:not(.dark-mode) .about-story-stats {
  border-top-color: rgba(15, 23, 42, 0.1);
}

body:not(.dark-mode) .about-stat-mini-value {
  color: var(--sky-700);
}

body:not(.dark-mode) .about-stat-mini-label {
  color: var(--slate-500);
}

/* Smooth the toggle between modes */
.about-story-card,
.about-story-card::before,
.about-story-eyebrow,
.about-story-card h3,
.about-story-card p,
.about-story-stats {
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ============================================
   LIGHT-MODE HERO — make the hero respect the theme
   Default hero CSS is dark (sky/navy gradient). These rules
   only apply when light mode is active.
   ============================================ */

body:not(.dark-mode) .hero {
  background: linear-gradient(135deg, #ffffff 0%, #eff7ff 45%, #dbeafe 100%);
}

body:not(.dark-mode) .hero::before {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(125, 211, 252, 0.45), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(59, 130, 246, 0.25), transparent 55%);
}

body:not(.dark-mode) .hero-grid-pattern {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
}

body:not(.dark-mode) .hero-eyebrow {
  background: rgba(3, 105, 161, 0.08);
  border-color: rgba(3, 105, 161, 0.22);
  color: var(--sky-800);
}

body:not(.dark-mode) .hero-eyebrow-dot {
  background: var(--sky-700);
  box-shadow: 0 0 0 4px rgba(3, 105, 161, 0.15);
}

body:not(.dark-mode) .hero-title {
  color: var(--navy-900);
}

body:not(.dark-mode) .hero-title .accent {
  background: linear-gradient(135deg, var(--sky-700) 0%, var(--sky-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body:not(.dark-mode) .hero-subtitle {
  color: var(--slate-600);
}

body:not(.dark-mode) .hero-trust-strip {
  color: var(--slate-600);
}

body:not(.dark-mode) .hero-trust-strip i {
  color: var(--sky-700);
}

body:not(.dark-mode) .hero .btn-secondary {
  color: var(--navy-900);
  border-color: rgba(15, 23, 42, 0.18);
}

body:not(.dark-mode) .hero .btn-secondary:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--sky-700);
  color: var(--sky-700);
}

/* --- Compliance dashboard card in light mode --- */
body:not(.dark-mode) .compliance-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

body:not(.dark-mode) .compliance-card-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

body:not(.dark-mode) .compliance-title {
  color: var(--navy-900);
}

body:not(.dark-mode) .compliance-subtitle {
  color: var(--slate-500);
}

body:not(.dark-mode) .compliance-row {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
}

body:not(.dark-mode) .compliance-row:hover {
  background: rgba(125, 211, 252, 0.08);
  border-color: rgba(3, 105, 161, 0.25);
}

body:not(.dark-mode) .compliance-label {
  color: var(--navy-900);
}

body:not(.dark-mode) .compliance-label > i {
  color: var(--sky-700);
}

body:not(.dark-mode) .compliance-label .meta {
  color: var(--slate-500);
}

body:not(.dark-mode) .compliance-card-footer {
  border-top-color: rgba(15, 23, 42, 0.08);
}

body:not(.dark-mode) .next-due-label {
  color: var(--slate-500);
}

body:not(.dark-mode) .next-due-value {
  color: var(--navy-900);
}

body:not(.dark-mode) .savings {
  color: #16a34a;
}

body:not(.dark-mode) .savings strong {
  color: var(--navy-900);
}

/* Compliance pills (ok / warn / pending) — slightly toned for light bg */
body:not(.dark-mode) .compliance-pill.ok {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.35);
}

body:not(.dark-mode) .compliance-pill.warn {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.4);
}

body:not(.dark-mode) .compliance-pill.pending {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.35);
}

/* --- Floating accent cards in light mode --- */
body:not(.dark-mode) .float-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.08);
  color: var(--navy-900);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}

body:not(.dark-mode) .float-card i {
  color: var(--sky-700);
}

body:not(.dark-mode) .float-card strong {
  color: var(--navy-900);
}

/* Smooth hero transition when toggling modes */
.hero,
.hero::before,
.hero-grid-pattern,
.compliance-card,
.compliance-row,
.float-card,
.hero-eyebrow,
.hero-title,
.hero-subtitle,
.hero-trust-strip {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ============================================
   GLOBAL HOVER POLISH (4 layers)
   1) Animated underline on text links
   2) Stronger card-accent on hover
   3) Sky tint on icon + heading on hover
   4) Cursor spotlight follower
   ============================================ */

/* ----- 1) Animated underline on text-style links ----- */
.footer-section a,
.footer-legal a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-position: 0 100%;
  transition: color 0.25s ease, background-size 0.3s ease, transform 0.25s ease;
}

.footer-section a:hover,
.footer-legal a:hover {
  background-size: 100% 1.5px;
}

/* Drop the old translateX nudge so the underline can shine on its own */
.footer-section a:hover,
.footer-legal a:hover {
  transform: none;
}

.footer-section .footer-contact-row {
  background-image: none; /* the contact rows are icon-led, don't underline */
}

.footer-social-link {
  background-image: none; /* social icon tiles, don't underline */
}

/* ----- 2) Stronger card-accent on hover (clearly visible sky ring) ----- */
.stat-card,
.service-card,
.feature-card:not(.feature-featured),
.testimonial-card:not(.featured),
.faq-item,
.mission-card,
.quick-link-card,
.info-card {
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.stat-card:hover,
.service-card:hover,
.feature-card:not(.feature-featured):hover,
.testimonial-card:not(.featured):hover,
.faq-item:hover,
.mission-card:hover,
.quick-link-card:hover,
.info-card:hover {
  border-color: var(--sky-500);
  box-shadow:
    0 16px 36px rgba(14, 165, 233, 0.18),
    0 0 0 4px rgba(14, 165, 233, 0.08);
}

body.dark-mode .stat-card:hover,
body.dark-mode .service-card:hover,
body.dark-mode .feature-card:not(.feature-featured):hover,
body.dark-mode .testimonial-card:not(.featured):hover,
body.dark-mode .faq-item:hover,
body.dark-mode .mission-card:hover,
body.dark-mode .quick-link-card:hover,
body.dark-mode .info-card:hover {
  border-color: var(--sky-400, #38BDF8);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.55),
    0 0 0 4px rgba(14, 165, 233, 0.18);
}

/* ----- 3) Sky tint on heading + icon when card hovered ----- */
/* Headings transition smoothly */
.stat-card .stat-number,
.feature-card:not(.feature-featured) h3,
.testimonial-card:not(.featured) .testimonial-author h4,
.mission-card h4,
.quick-link-content h3,
.info-card h4,
.service-card-header h3,
.faq-question-text {
  transition: color 0.25s ease;
}

/* Icons transition smoothly (excluding service cards — color-coded identity)
   and quick-link icons (already invert on hover) */
.stat-card > i,
.feature-card:not(.feature-featured) .feature-icon i,
.mission-card > i,
.info-card > i {
  transition: color 0.25s ease, transform 0.25s ease;
}

/* Sky tint targets */
.stat-card:hover .stat-number,
.feature-card:not(.feature-featured):hover h3,
.testimonial-card:not(.featured):hover .testimonial-author h4,
.mission-card:hover h4,
.quick-link-card:hover .quick-link-content h3,
.info-card:hover h4,
.service-card:hover .service-card-header h3,
.faq-question:hover .faq-question-text {
  color: var(--sky-700);
}

body.dark-mode .stat-card:hover .stat-number,
body.dark-mode .feature-card:not(.feature-featured):hover h3,
body.dark-mode .testimonial-card:not(.featured):hover .testimonial-author h4,
body.dark-mode .mission-card:hover h4,
body.dark-mode .quick-link-card:hover .quick-link-content h3,
body.dark-mode .info-card:hover h4,
body.dark-mode .service-card:hover .service-card-header h3,
body.dark-mode .faq-question:hover .faq-question-text {
  color: var(--sky-300);
}

/* Icons (only for cards that don't have color-coded icons) */
.stat-card:hover > i,
.feature-card:not(.feature-featured):hover .feature-icon i,
.mission-card:hover > i,
.info-card:hover > i {
  color: var(--sky-600);
}

body.dark-mode .stat-card:hover > i,
body.dark-mode .feature-card:not(.feature-featured):hover .feature-icon i,
body.dark-mode .mission-card:hover > i,
body.dark-mode .info-card:hover > i {
  color: var(--sky-300);
}

@media (prefers-reduced-motion: reduce) {
  .footer-section a,
  .footer-legal a {
    background-image: none;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s;
  }
  .footer-section a:hover,
  .footer-legal a:hover {
    text-decoration-color: currentColor;
  }
}

/* ============================================
   ADAPTIVE NAV — subtle "lift off the hero"
   Now that the hero itself respects light/dark mode, the nav
   pill no longer needs to fully invert. It just lifts slightly
   while over the hero for a more glass-on-glass feel.
   ============================================ */

/* Smooth the morph between on-hero and past-hero */
.floating-nav .nav-shell,
.floating-nav .nav-brand,
.floating-nav .nav-link,
.floating-nav .theme-toggle,
.floating-nav .nav-toggle,
.floating-nav .nav-toggle span {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              filter 0.3s ease;
}

/* While over hero — subtle pill with tight shadow (no horizontal halo on dark bg) */
.floating-nav.on-hero .nav-shell {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}

body.dark-mode .floating-nav.on-hero .nav-shell {
  background: rgba(30, 41, 59, 0.78);
  border-color: rgba(125, 211, 252, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

body.dark-mode .floating-nav.on-hero.scrolled .nav-shell {
  background: rgba(30, 41, 59, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

/* ============================================
   DARK / LIGHT MODE POLISH — UI/UX Pro Max
   Adds: section alternation in dark, deeper card shadows,
   nav-pill contrast, focus rings, hero→body soft fade.
   ============================================ */

/* --- Section alternation restored in dark mode --- */
body.dark-mode .stats-section,
body.dark-mode .why-choose-us,
body.dark-mode .faq-section,
body.dark-mode .quick-links {
  background: #0b1a30;
}

body.dark-mode .stats-section .stat-card,
body.dark-mode .why-choose-us .feature-card:not(.feature-featured),
body.dark-mode .faq-section .faq-item,
body.dark-mode .quick-links .quick-link-card {
  background: #182a48;
  border-color: rgba(125, 211, 252, 0.08);
}

body.dark-mode .stats-section .stat-card:hover,
body.dark-mode .why-choose-us .feature-card:not(.feature-featured):hover,
body.dark-mode .faq-section .faq-item:hover,
body.dark-mode .quick-links .quick-link-card:hover {
  border-color: rgba(125, 211, 252, 0.35);
}

/* --- Stronger shadows in dark mode (light shadows vanish on navy) --- */
body.dark-mode .stat-card,
body.dark-mode .service-card,
body.dark-mode .feature-card:not(.feature-featured),
body.dark-mode .testimonial-card:not(.featured),
body.dark-mode .faq-item,
body.dark-mode .mission-card,
body.dark-mode .quick-link-card,
body.dark-mode .info-card,
body.dark-mode .contact-wrapper {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.dark-mode .stat-card:hover,
body.dark-mode .service-card:hover,
body.dark-mode .feature-card:not(.feature-featured):hover,
body.dark-mode .testimonial-card:not(.featured):hover,
body.dark-mode .faq-item:hover,
body.dark-mode .mission-card:hover,
body.dark-mode .quick-link-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

/* --- Floating nav pill: distinct over dark body, no horizontal halo --- */
body.dark-mode .nav-shell {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(125, 211, 252, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark-mode .floating-nav.scrolled .nav-shell {
  background: rgba(30, 41, 59, 0.96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

body.dark-mode .nav-link:hover {
  background: rgba(125, 211, 252, 0.1);
  color: #ffffff;
}

body.dark-mode .nav-link.active,
body.dark-mode .nav-link[aria-expanded="true"] {
  background: rgba(125, 211, 252, 0.18);
  color: var(--sky-300);
}

/* --- Light-mode hero→content soft fade (echo navy in first section) --- */
body:not(.dark-mode) .stats-section {
  background: linear-gradient(180deg, #eff7ff 0%, #ffffff 35%, var(--slate-50) 100%);
}

/* --- Light-mode card border visibility per UI/UX Pro Max rule --- */
.stat-card,
.service-card,
.feature-card:not(.feature-featured),
.testimonial-card:not(.featured),
.faq-item,
.mission-card,
.quick-link-card {
  border-width: 1px;
  border-style: solid;
  /* uses --slate-200 default in light, navy-700 in dark already set elsewhere */
}

/* --- Focus rings adapt --- */
body.dark-mode :focus-visible {
  outline-color: var(--sky-300);
}

/* --- Toggle button: clearer affordance per mode --- */
.floating-nav .theme-toggle:hover {
  background: rgba(125, 211, 252, 0.18);
  border-color: var(--sky-300);
  color: var(--sky-300);
}

body:not(.dark-mode) .floating-nav .theme-toggle {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.15);
  color: var(--sky-700);
}

body:not(.dark-mode) .floating-nav .theme-toggle:hover {
  background: var(--sky-50);
  border-color: var(--sky-700);
  color: var(--sky-800);
  box-shadow: 0 0 0 4px rgba(3, 105, 161, 0.12);
}

/* When pressed (= dark mode active), keep the amber sun glow visible */
.floating-nav .theme-toggle[aria-pressed="true"] {
  background: rgba(252, 211, 77, 0.18);
  border-color: rgba(252, 211, 77, 0.5);
  color: #fcd34d;
}

/* --- Dropdown items: clearer hover delineation in both modes --- */
body.dark-mode .dropdown-menu {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(125, 211, 252, 0.15);
}

/* --- Compliance row hover in always-dark hero --- */
.compliance-row:focus-within {
  outline: 2px solid var(--sky-300);
  outline-offset: 2px;
}

/* --- Mobile menu border accent in dark mode --- */
body.dark-mode .mobile-menu {
  border-color: rgba(125, 211, 252, 0.15);
}

/* --- Improve text contrast on muted footer text --- */
.footer-legal a,
.footer-bottom p {
  color: var(--slate-300);
}

body:not(.dark-mode) footer .footer-newsletter-form input[type="email"] {
  /* newsletter strip is always dark — keep light text */
  color: #ffffff;
}

/* --- Ensure the trust strip pills read cleanly in both modes --- */
body.dark-mode .footer-trust {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   FOOTER — Newsletter / 4-col / Trust / Signature
   ============================================ */

footer {
  background: var(--navy-900);
  color: #ffffff;
  border-top: 3px solid var(--sky-700);
  position: relative;
  overflow: hidden;
}

/* --- Newsletter strip --- */
.footer-newsletter {
  position: relative;
  padding: 3rem 6%;
  background: linear-gradient(135deg, #0a1a36 0%, var(--sky-800) 55%, #0a1a36 100%);
  overflow: hidden;
}

.footer-newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(14, 165, 233, 0.32), transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(2, 132, 199, 0.28), transparent 50%);
  pointer-events: none;
}

.footer-newsletter::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  pointer-events: none;
}

.footer-newsletter-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.footer-newsletter-text {
  max-width: 540px;
}

.footer-newsletter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.35rem 0.85rem;
  background: rgba(125, 211, 252, 0.15);
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 100px;
  color: var(--sky-300);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-newsletter-text h3 {
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.footer-newsletter-text p {
  color: var(--slate-300);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

.footer-newsletter-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.newsletter-input-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.newsletter-input-wrap i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sky-300);
  font-size: 0.95rem;
  pointer-events: none;
}

.footer-newsletter-form input[type="email"] {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.footer-newsletter-form input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--sky-300);
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.2);
}

.footer-newsletter-form .btn-primary {
  white-space: nowrap;
}

.footer-newsletter-fineprint {
  position: relative;
  z-index: 1;
  margin: 1.25rem 0 0 0;
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.8rem;
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-newsletter-fineprint i {
  font-size: 0.7rem;
  color: var(--sky-300);
}

/* --- 4-col main footer --- */
.footer-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3.5rem 6% 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
  max-width: 360px;
}

.footer-section h3 {
  font-size: 1.25rem;
  margin: 0.5rem 0 0.6rem;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.footer-section p {
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--slate-300);
}

.footer-section h4 {
  margin-bottom: 1.1rem;
  color: var(--sky-300);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  display: inline-block;
}

.footer-section h4::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--sky-500);
  border-radius: 2px;
}

.footer-section a {
  display: block;
  color: var(--slate-300);
  text-decoration: none;
  margin-bottom: 0.65rem;
  font-size: 0.92rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-section a:hover {
  color: var(--sky-300);
  transform: translateX(3px);
}

.footer-section a i {
  width: 16px;
  margin-right: 6px;
  color: var(--sky-300);
  font-size: 0.85rem;
}

.footer-link-strong {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-top: 0.3rem !important;
}

.footer-link-strong i {
  font-size: 0.75rem !important;
}

.footer-section .logo-img {
  height: 48px;
  width: auto;
  margin-bottom: 0.75rem;
}

.footer-contact-row {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  color: var(--slate-300) !important;
  margin-bottom: 0.7rem !important;
  font-size: 0.92rem;
}

.footer-contact-row i {
  color: var(--sky-300);
  font-size: 0.95rem;
  width: 18px;
  flex-shrink: 0;
}

.footer-contact-static {
  cursor: default;
}

.footer-contact-static:hover {
  color: var(--slate-300) !important;
  transform: none !important;
}

/* --- Open Now status pill --- */
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  border: 1px solid;
}

.footer-status[data-status="open"] {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.footer-status[data-status="closed"] {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--slate-300);
}

.footer-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: liveDotPulse 1.8s infinite;
}

.footer-status[data-status="closed"] .footer-status-dot {
  animation: none;
}

/* --- Social icon row --- */
.footer-social {
  display: flex;
  gap: 0.65rem;
}

.footer-social-link {
  width: 38px !important;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--slate-300) !important;
  margin: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}

.footer-social-link i {
  font-size: 1rem !important;
  margin: 0 !important;
  color: inherit;
  width: auto !important;
}

/* Social icons use their own logo images on a transparent box */
.footer-social-link[aria-label="WhatsApp"],
.footer-social-link[aria-label="Instagram"],
.footer-social-link[aria-label="Email"] {
  background: transparent !important;
  border-color: transparent !important;
  padding: 0 !important;
}
.footer-social-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.footer-social-link:hover {
  background: var(--sky-700);
  border-color: var(--sky-300);
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* --- Trust strip --- */
.footer-trust {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  padding: 1.25rem 6%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--slate-300);
  font-size: 0.85rem;
  font-weight: 500;
}

.footer-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-trust i {
  color: var(--sky-300);
  font-size: 0.85rem;
}

/* --- SIGNATURE section (doodle-backdrop wordmark) --- */
.footer-signature {
  position: relative;
  padding: 4.5rem 6% 3rem;
  background: #050b18;
  overflow: hidden;
  isolation: isolate;
}

.footer-signature::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center 30%, rgba(2, 132, 199, 0.18), transparent 60%),
    radial-gradient(ellipse at center 100%, rgba(15, 23, 42, 0.6), transparent 70%);
  pointer-events: none;
}

.footer-signature-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.doodle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(var(--s, 1));
  font-size: 2.4rem;
  color: #ffffff;
  opacity: 0.07;
  transition: opacity 0.4s ease;
}

.footer-signature:hover .doodle {
  opacity: 0.11;
}

.footer-signature-skyline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 110%);
  height: auto;
  color: #ffffff;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

.footer-signature-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.footer-mark {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 1.2rem;
  text-shadow: 0 4px 30px rgba(2, 132, 199, 0.3);
}

.footer-tagline {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-tagline strong {
  color: #ffffff;
  font-weight: 700;
}

.footer-tagline-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #ef4444;
  border-radius: 6px;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
  animation: heartBeat 1.6s ease-in-out infinite;
}

.footer-tagline-heart i {
  font-size: 0.85rem;
}

@keyframes heartBeat {
  0%, 50%, 100% { transform: scale(1); }
  20%, 70% { transform: scale(1.18); }
}

/* --- Footer bottom (legal) --- */
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 6%;
  background: #02060f;
  font-size: 0.82rem;
  color: var(--slate-500);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom-left p {
  color: var(--slate-300);
}

.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-legal a {
  color: var(--slate-300);
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 0.82rem;
}

.footer-legal a:hover {
  color: var(--sky-300);
}

.footer-legal-sep {
  color: var(--slate-500);
}

.footer-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-bottom-right i {
  color: var(--sky-300);
}

/* --- Back to top FAB --- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sky-700);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0.25s;
  z-index: 999;
}

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

.back-to-top:hover {
  background: var(--sky-800);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(2, 132, 199, 0.55);
}

.back-to-top:active {
  transform: translateY(0);
}

/* --- Footer responsive --- */
@media (max-width: 992px) {
  .footer-newsletter-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-newsletter-text {
    max-width: none;
  }
  .footer-newsletter-eyebrow,
  .footer-newsletter-fineprint {
    justify-content: center;
  }
  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2.5rem 5% 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .footer-newsletter {
    padding: 2.5rem 5%;
  }
  .footer-newsletter-text h3 {
    font-size: 1.4rem;
  }
  .footer-newsletter-form {
    flex-direction: column;
  }
  .footer-newsletter-form .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .footer-content {
    grid-template-columns: 1fr;
    padding: 2rem 5% 1.5rem;
  }
  .footer-trust {
    padding: 1rem 5%;
    font-size: 0.78rem;
    gap: 0.4rem 1rem;
  }
  .footer-signature {
    padding: 3.5rem 5% 2.5rem;
  }
  .doodle {
    font-size: 1.7rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem 5%;
  }
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 576px) {
  .footer-mark {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }
}

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--sky-500);
  z-index: 1001;
  transition: width 0.1s ease;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.success-toast,
.error-toast,
.highlight-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 0.85rem 1.4rem;
  border-radius: 10px;
  font-weight: 600;
  z-index: 1000;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideInToast 0.3s ease;
}

.success-toast {
  background: #10b981;
  color: white;
}

.error-toast {
  background: #ef4444;
  color: white;
  top: 90px;
  bottom: auto;
}

.highlight-toast {
  background: var(--sky-700);
  color: white;
  top: 90px;
  bottom: auto;
}

@keyframes slideInToast {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================
   SUCCESS CONFIRMATION MODAL (enquiry submitted)
   ============================================ */
.success-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeInOverlay 0.2s ease;
}

.success-modal {
  background: #ffffff;
  color: #0f172a;
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  animation: popInModal 0.25s ease;
}

.success-modal-icon {
  font-size: 3.25rem;
  color: #10b981;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.success-modal h3 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  color: #0f172a;
}

.success-modal p {
  margin: 0 0 0.75rem;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
}

.success-modal-ref {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  word-break: break-all;
}

.success-modal-reflabel {
  margin: 1rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.success-modal-txnid {
  background: #f1f5f9;
  border: 1px dashed #0369a1;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0c4a6e;
  word-break: break-all;
}

.success-modal-close {
  margin-top: 0.75rem;
  background: #0369a1;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 2rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.success-modal-close:hover { background: #075985; }

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popInModal {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================
   INDUSTRIES DROPDOWN
   ============================================ */

.industries-dropdown {
  min-width: 260px;
}

.industries-dropdown-header {
  padding: 0.7rem 1.2rem;
  color: var(--sky-300);
  font-weight: 700;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.industry-highlight-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
  /* button reset (these are <button> elements now, not <a>) */
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.7rem 1.2rem;
}

/* Footer industry buttons styled like the column links above them */
.footer-industry-link {
  display: flex !important;
  align-items: center;
  gap: 0;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 0.65rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--slate-300);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-industry-link i {
  width: 16px;
  margin-right: 6px;
  color: var(--sky-300);
  font-size: 0.85rem;
}

.footer-industry-link:hover {
  color: var(--sky-300);
  transform: translateX(3px);
}

body:not(.dark-mode) .footer-industry-link {
  color: var(--navy-700);
}

body:not(.dark-mode) .footer-industry-link:hover {
  color: var(--sky-700);
}

body:not(.dark-mode) .footer-industry-link i {
  color: var(--sky-700);
}

.industry-highlight-link i {
  color: var(--sky-300);
  width: 20px;
  font-size: 0.95rem;
}

.industry-highlight-link:hover {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--sky-300);
  border-left-color: var(--sky-300);
  padding-left: 1.5rem;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

:focus-visible {
  outline: 3px solid var(--sky-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--sky-700);
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.dropdown-trigger:focus-visible {
  outline: 3px solid var(--sky-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   ABOUT
   ============================================ */

.about-section {
  padding: 3rem 6%;
  background: #ffffff;
}

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

.about-text {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.about-text p {
  color: var(--slate-600);
  margin-bottom: 1.1rem;
  line-height: 1.7;
  font-size: 1rem;
}

.about-text strong {
  color: var(--navy-900);
}

.about-mission {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.mission-card {
  flex: 1;
  min-width: 260px;
  max-width: 340px;
  background: #ffffff;
  padding: 1.75rem 1.5rem;
  border-radius: 14px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--slate-200);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.mission-card:hover {
  transform: translateY(-4px);
  border-color: var(--sky-300);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.mission-card i {
  font-size: 2rem;
  color: var(--sky-700);
  margin-bottom: 0.85rem;
}

.mission-card h4 {
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
  color: var(--navy-900);
  font-weight: 700;
}

.mission-card p {
  font-size: 0.95rem;
  color: var(--slate-500);
  line-height: 1.6;
}

.values-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
}

.value-badge {
  background: var(--sky-50);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sky-800);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.value-badge i {
  font-size: 0.75rem;
  color: var(--sky-700);
}

.value-badge:hover {
  background: var(--sky-100);
  transform: translateY(-1px);
}

/* ============================================
   SCROLLBAR
   ============================================ */

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--slate-100);
}

::-webkit-scrollbar-thumb {
  background: var(--sky-700);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sky-800);
}

/* ============================================
   DARK MODE
   ============================================ */

body.dark-mode {
  background: var(--navy-900);
  color: var(--slate-200);
}

/* Removed: body.dark-mode header { background: ... } — the floating nav is
   a full-width fixed container with padding; a background on it painted dark
   stripes either side of the pill. The .nav-shell carries the pill bg itself. */

body.dark-mode .stats-section,
body.dark-mode .services-section,
body.dark-mode .why-choose-us,
body.dark-mode .testimonials,
body.dark-mode .faq-section,
body.dark-mode .quick-links,
body.dark-mode .contact,
body.dark-mode .locations,
body.dark-mode .about-section {
  background: var(--navy-900);
}

body.dark-mode .stat-card,
body.dark-mode .service-card,
body.dark-mode .feature-card,
body.dark-mode .testimonial-card,
body.dark-mode .faq-item,
body.dark-mode .mission-card,
body.dark-mode .quick-link-card,
body.dark-mode .contact-wrapper,
body.dark-mode .info-card {
  background: var(--navy-800);
  border-color: var(--navy-700);
}

body.dark-mode .service-card-header {
  background: var(--navy-800);
  border-bottom-color: var(--navy-700);
}

body.dark-mode .service-card-content {
  background: var(--navy-900);
}

body.dark-mode .service-card-content li {
  color: var(--slate-300);
  border-bottom-color: var(--navy-700);
}

body.dark-mode .stat-number,
body.dark-mode .section-title,
body.dark-mode .feature-card h3,
body.dark-mode .mission-card h4,
body.dark-mode .testimonial-author h4,
body.dark-mode .faq-question,
body.dark-mode .service-card-header h3,
body.dark-mode .quick-link-content h3,
body.dark-mode .info-card h4 {
  color: var(--slate-200);
}

body.dark-mode .section-title span {
  color: var(--sky-300);
}

body.dark-mode .feature-card p,
body.dark-mode .testimonial-card p,
body.dark-mode .faq-answer,
body.dark-mode .mission-card p,
body.dark-mode .quick-link-content p,
body.dark-mode .info-card p,
body.dark-mode .stat-label,
body.dark-mode .about-text p,
body.dark-mode .section-subtitle {
  color: var(--slate-300);
}

body.dark-mode .branch-split > * {
  background: var(--navy-800);
  border-color: rgba(125, 211, 252, 0.18);
}

body.dark-mode .branch-split > p::before {
  background: rgba(125, 211, 252, 0.14);
  color: var(--sky-300);
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
  background: var(--navy-800);
  border-color: var(--navy-700);
  color: var(--slate-200);
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
  color: var(--slate-500);
}

body.dark-mode .business-hours,
body.dark-mode .important-note {
  background: var(--navy-800);
  color: var(--slate-200);
}

body.dark-mode .important-note {
  border-left-color: var(--sky-500);
}

body.dark-mode .service-card-icon,
body.dark-mode .feature-icon,
body.dark-mode .quick-link-icon {
  background: rgba(var(--accent-rgb), 0.15);
}

body.dark-mode footer {
  background: #050b18;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--navy-800);
}

/* Additional dark-mode coverage for elements that kept hard-coded light colors */
body.dark-mode .business-hours .live-clock {
  color: var(--sky-300);
}

body.dark-mode .business-hours small {
  color: var(--slate-300);
}

body.dark-mode .business-hours i {
  color: var(--sky-300);
}

body.dark-mode .business-hours {
  border: 1px solid var(--navy-700);
}

body.dark-mode .info-card i,
body.dark-mode .service-card-icon i,
body.dark-mode .feature-icon i,
body.dark-mode .quick-link-icon i,
body.dark-mode .mission-card i,
body.dark-mode .stat-card i {
  color: var(--sky-300);
}

body.dark-mode .section-title::after {
  background: var(--sky-300);
}

body.dark-mode .section-title span {
  color: var(--sky-300);
}

body.dark-mode .important-note i,
body.dark-mode .important-note strong {
  color: var(--sky-300);
}

body.dark-mode .form-group > i {
  color: var(--sky-300);
}

body.dark-mode .value-badge {
  background: rgba(125, 211, 252, 0.12);
  color: var(--sky-300);
}

body.dark-mode .value-badge i {
  color: var(--sky-300);
}

body.dark-mode .skip-to-content {
  background: var(--sky-700);
  color: #ffffff;
}

body.dark-mode .scroll-progress {
  background: var(--sky-300);
}

body.dark-mode .faq-question:hover {
  background: rgba(125, 211, 252, 0.06);
}

body.dark-mode .service-card-header:hover {
  background: rgba(125, 211, 252, 0.06);
}

body.dark-mode .info-card:hover {
  background: rgba(125, 211, 252, 0.06);
  border-color: rgba(125, 211, 252, 0.25);
}

body.dark-mode .info-card:hover i,
body.dark-mode .info-card:hover h4,
body.dark-mode .info-card:hover p {
  color: var(--slate-200);
}

body.dark-mode nav a:hover {
  color: var(--sky-300);
}

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

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

@media (max-width: 1024px) {
  .hero {
    padding: 6.5rem 6% 4rem;
  }
  .hero-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  .hero-text {
    text-align: center;
  }
  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons,
  .hero-trust-strip {
    justify-content: center;
  }
  .hero-visual {
    min-height: auto;
    margin-top: 0.5rem;
  }
  .float-card {
    display: none;
  }
}

@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-wrapper {
    grid-template-columns: 1fr;
    padding: 1.75rem;
  }
}

@media (max-width: 768px) {
  section {
    padding: 2.5rem 5%;
  }
  .hero {
    padding: 6rem 5% 3rem;
  }
  .cta-banner {
    padding: 3rem 5%;
  }
  .map-section {
    padding: 0 5% 2.5rem;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .section-title {
    font-size: 1.85rem;
  }
  .section-subtitle {
    font-size: 1rem;
  }
  /* floating-nav handles its own responsive */
  .hero-title {
    font-size: 2.4rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .hero-trust-strip {
    font-size: 0.88rem;
    gap: 0.4rem 1.25rem;
  }
  .compliance-card {
    padding: 1.2rem;
    max-width: 100%;
  }
  .compliance-label {
    font-size: 0.86rem;
  }
  .cta-banner h2 {
    font-size: 1.7rem;
  }
  .cta-banner p {
    font-size: 1rem;
  }
  .btn-primary,
  .btn-secondary {
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
  }
  .stats-container {
    grid-template-columns: 1fr;
  }
  .quick-links-grid,
  .features-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .about-mission {
    flex-direction: column;
    align-items: center;
  }
  .mission-card {
    max-width: 100%;
    width: 100%;
  }
  .success-toast,
  .error-toast,
  .highlight-toast {
    left: 20px;
    right: 20px;
    bottom: 20px;
    top: auto;
    border-radius: 10px;
  }
  footer {
    padding: 2.5rem 5% 1.5rem;
  }
}

@media (max-width: 576px) {
  section {
    padding: 2rem 4%;
  }
  .hero {
    padding: 5.5rem 4% 2.5rem;
  }
  .cta-banner {
    padding: 2.5rem 4%;
  }
  .map-section {
    padding: 0 4% 2rem;
  }
  .section-title {
    font-size: 1.6rem;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-eyebrow {
    font-size: 0.7rem;
    padding: 0.35rem 0.7rem;
  }
  .hero-buttons,
  .cta-banner-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .compliance-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .contact-wrapper {
    padding: 1.25rem;
  }
  .footer-content {
    text-align: center;
  }
  .footer-section h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================
   SECTION INNOVATIONS — Bentos, Badges, Featured
   ============================================ */

/* --- Shared badge primitives --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.22rem 0.6rem;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-popular {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}

.badge-new {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #14532d;
}

body.dark-mode .badge-popular {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
}

body.dark-mode .badge-new {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

/* --- ABOUT: bento --- */
.about-bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.about-story-card {
  background: linear-gradient(135deg, var(--navy-900) 0%, #0c1a35 100%);
  border-radius: 20px;
  padding: 2.25rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.about-story-card::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.25), transparent 70%);
  pointer-events: none;
}

.about-story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.35rem 0.85rem;
  background: rgba(125, 211, 252, 0.15);
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 100px;
  color: var(--sky-300);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  position: relative;
}

.about-story-card h3 {
  color: #ffffff;
  font-size: 1.6rem;
  margin-bottom: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
  line-height: 1.2;
}

.about-story-card p {
  color: var(--slate-300);
  margin-bottom: 1rem;
  font-size: 0.98rem;
  line-height: 1.65;
  position: relative;
}

.about-story-card strong {
  color: #ffffff;
}

.about-story-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

.about-stat-mini-value {
  color: var(--sky-300);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.about-stat-mini-label {
  color: var(--slate-300);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}

.about-team {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.about-team-eyebrow {
  display: inline-block;
  color: var(--sky-300);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.about-team-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.about-team-role {
  color: var(--slate-300);
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 2px;
}

body:not(.dark-mode) .about-team {
  border-top-color: rgba(15, 23, 42, 0.1);
}

body:not(.dark-mode) .about-team-eyebrow {
  color: var(--sky-700);
}

body:not(.dark-mode) .about-team-name {
  color: var(--slate-900, #0f172a);
}

body:not(.dark-mode) .about-team-role {
  color: var(--slate-500);
}

.about-mission-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-mission-stack .mission-card {
  flex: 1;
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 1.5rem 1.4rem;
  text-align: left;
}

.about-mission-stack .mission-card i {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}

.about-mission-stack .mission-card h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.about-mission-stack .mission-card p {
  font-size: 0.88rem;
  text-align: left;
}

.about-mission-stack .values-list {
  justify-content: flex-start;
}

/* --- STATS: accent bar + 4th card + trend chip --- */
.stats-container {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding-top: 2.2rem;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky-600), var(--sky-500), var(--sky-300));
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.22rem 0.6rem;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 0.6rem;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.stat-trend i {
  font-size: 0.62rem;
}

body.dark-mode .stat-trend {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}

/* --- SERVICES: badge + color-coded icon --- */
.service-card {
  position: relative;
}

.service-card-badge-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.service-card[data-color="blue"]   .service-card-icon { background: rgba(37, 99, 235, 0.1); }
.service-card[data-color="blue"]   .service-card-icon i { color: #2563eb; }
.service-card[data-color="green"]  .service-card-icon { background: rgba(22, 163, 74, 0.1); }
.service-card[data-color="green"]  .service-card-icon i { color: #16a34a; }
.service-card[data-color="purple"] .service-card-icon { background: rgba(147, 51, 234, 0.1); }
.service-card[data-color="purple"] .service-card-icon i { color: #9333ea; }
.service-card[data-color="orange"] .service-card-icon { background: rgba(234, 88, 12, 0.1); }
.service-card[data-color="orange"] .service-card-icon i { color: #ea580c; }
.service-card[data-color="pink"]   .service-card-icon { background: rgba(219, 39, 119, 0.1); }
.service-card[data-color="pink"]   .service-card-icon i { color: #db2777; }
.service-card[data-color="teal"]   .service-card-icon { background: rgba(13, 148, 136, 0.1); }
.service-card[data-color="teal"]   .service-card-icon i { color: #0d9488; }
.service-card[data-color="indigo"] .service-card-icon { background: rgba(79, 70, 229, 0.1); }
.service-card[data-color="indigo"] .service-card-icon i { color: #4f46e5; }

body.dark-mode .service-card[data-color="blue"]   .service-card-icon { background: rgba(37, 99, 235, 0.18); }
body.dark-mode .service-card[data-color="blue"]   .service-card-icon i { color: #60a5fa; }
body.dark-mode .service-card[data-color="green"]  .service-card-icon { background: rgba(22, 163, 74, 0.18); }
body.dark-mode .service-card[data-color="green"]  .service-card-icon i { color: #4ade80; }
body.dark-mode .service-card[data-color="purple"] .service-card-icon { background: rgba(147, 51, 234, 0.2); }
body.dark-mode .service-card[data-color="purple"] .service-card-icon i { color: #c084fc; }
body.dark-mode .service-card[data-color="orange"] .service-card-icon { background: rgba(234, 88, 12, 0.2); }
body.dark-mode .service-card[data-color="orange"] .service-card-icon i { color: #fb923c; }
body.dark-mode .service-card[data-color="pink"]   .service-card-icon { background: rgba(219, 39, 119, 0.2); }
body.dark-mode .service-card[data-color="pink"]   .service-card-icon i { color: #f472b6; }
body.dark-mode .service-card[data-color="teal"]   .service-card-icon { background: rgba(13, 148, 136, 0.2); }
body.dark-mode .service-card[data-color="teal"]   .service-card-icon i { color: #2dd4bf; }
body.dark-mode .service-card[data-color="indigo"] .service-card-icon { background: rgba(79, 70, 229, 0.2); }
body.dark-mode .service-card[data-color="indigo"] .service-card-icon i { color: #818cf8; }

/* --- WHY CHOOSE US: bento --- */
.features-bento {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card.feature-featured {
  grid-row: span 2;
  grid-column: 1;
  text-align: left;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--sky-800) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feature-card.feature-featured::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.35), transparent 65%);
  pointer-events: none;
}

.feature-card.feature-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(2, 132, 199, 0.3);
  border-color: var(--sky-300);
}

.feature-card.feature-featured .feature-icon {
  background: rgba(255, 255, 255, 0.1);
  margin: 0 0 1.5rem 0;
  width: 60px;
  height: 60px;
  position: relative;
}

.feature-card.feature-featured .feature-icon i {
  color: var(--sky-300);
  font-size: 1.8rem;
}

.feature-card.feature-featured h3 {
  color: #ffffff;
  font-size: 1.5rem;
  text-align: left;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  position: relative;
}

.feature-card.feature-featured p {
  color: var(--slate-300);
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  position: relative;
}

.feature-featured-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 0;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.feature-featured-list li {
  color: var(--slate-200);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-featured-list li i {
  color: var(--sky-300);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* --- TESTIMONIALS: rating header + featured --- */
.testimonials-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 2.5rem;
}

.testimonials-rating-value {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--sky-50), #ffffff);
  border: 1px solid #BAE6FD;
  border-radius: 100px;
  padding: 0.7rem 1.4rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.testimonials-rating-stars {
  color: #f59e0b;
  font-size: 1rem;
  display: inline-flex;
  gap: 2px;
}

.testimonials-rating-number {
  color: var(--navy-900);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.testimonials-rating-meta {
  color: var(--slate-500);
  font-size: 0.9rem;
}

body.dark-mode .testimonials-rating-value {
  background: rgba(125, 211, 252, 0.08);
  border-color: rgba(125, 211, 252, 0.25);
}

body.dark-mode .testimonials-rating-number {
  color: #ffffff;
}

body.dark-mode .testimonials-rating-meta {
  color: var(--slate-300);
}

.testimonial-card.featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.testimonial-card.featured::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.18), transparent 65%);
  pointer-events: none;
}

.testimonial-card.featured:hover {
  transform: translateY(-4px);
  border-color: var(--sky-300);
  box-shadow: 0 18px 40px rgba(2, 132, 199, 0.3);
}

.testimonial-card.featured .quote-icon i {
  font-size: 4rem;
  color: var(--sky-300);
  opacity: 0.5;
  margin: 0;
}

.testimonial-featured-content {
  position: relative;
}

.testimonial-card.featured p {
  color: #e2e8f0;
  font-size: 1.2rem;
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.testimonial-card.featured .testimonial-author h4 {
  color: #ffffff;
  font-size: 1.05rem;
}

.testimonial-card.featured .testimonial-author .role {
  color: var(--slate-300);
}

.testimonial-card.featured .author-initials {
  background: rgba(125, 211, 252, 0.18);
  color: var(--sky-300);
  width: 56px;
  height: 56px;
  font-size: 1.1rem;
}

.testimonial-card.featured .rating i {
  font-size: 0.9rem;
}

/* --- FAQ: category tags + bottom CTA --- */
.faq-question-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.faq-tag {
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  background: var(--sky-50);
  color: var(--sky-700);
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

body.dark-mode .faq-tag {
  background: rgba(125, 211, 252, 0.12);
  color: var(--sky-300);
}

.faq-question-text {
  flex: 1;
  min-width: 0;
}

.faq-cta {
  text-align: center;
  margin: 2.5rem auto 0;
  max-width: 640px;
  padding: 2rem;
  background: #ffffff;
  border: 1.5px dashed var(--sky-300);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.faq-cta-icon {
  width: 48px;
  height: 48px;
  background: var(--sky-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.faq-cta-icon i {
  color: var(--sky-700);
  font-size: 1.25rem;
}

.faq-cta h4 {
  color: var(--navy-900);
  font-size: 1.15rem;
  margin: 0;
  font-weight: 700;
}

.faq-cta p {
  color: var(--slate-500);
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
}

body.dark-mode .faq-cta {
  background: var(--navy-800);
  border-color: rgba(125, 211, 252, 0.4);
}

body.dark-mode .faq-cta h4 {
  color: #ffffff;
}

body.dark-mode .faq-cta-icon {
  background: rgba(125, 211, 252, 0.1);
}

body.dark-mode .faq-cta-icon i {
  color: var(--sky-300);
}

/* --- CONTACT: response pill + 3-step process --- */
.contact-response-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 0.9rem;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 100px;
  color: #16a34a;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 1rem;
}

.contact-response-pill i {
  font-size: 0.65rem;
  color: #22c55e;
  animation: liveDotPulse 1.8s infinite;
  border-radius: 50%;
}

body.dark-mode .contact-response-pill {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.contact-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0 auto 2.5rem;
  max-width: 900px;
  position: relative;
}

.contact-step {
  text-align: center;
  position: relative;
  padding: 0 0.5rem;
}

.contact-step-num {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky-700), var(--sky-600));
  color: #ffffff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.65rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.contact-step h4 {
  font-size: 1rem;
  color: var(--navy-900);
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.contact-step p {
  font-size: 0.85rem;
  color: var(--slate-500);
  line-height: 1.45;
  margin: 0;
}

.contact-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 2px;
  background: linear-gradient(90deg, var(--sky-300), rgba(125, 211, 252, 0.2));
  z-index: 1;
}

body.dark-mode .contact-step h4 {
  color: #ffffff;
}

body.dark-mode .contact-step p {
  color: var(--slate-300);
}

body.dark-mode .contact-step:not(:last-child)::after {
  background: linear-gradient(90deg, rgba(125, 211, 252, 0.5), rgba(125, 211, 252, 0.1));
}

/* Responsive collapses */
@media (max-width: 992px) {
  .about-bento {
    grid-template-columns: 1fr;
  }
  .features-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .feature-card.feature-featured {
    grid-row: auto;
    grid-column: span 2;
  }
  .testimonial-card.featured {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem;
  }
  .testimonial-card.featured .quote-icon {
    text-align: center;
  }
  .contact-process {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .contact-step:not(:last-child)::after {
    display: none;
  }
  .about-story-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .features-bento {
    grid-template-columns: 1fr;
  }
  .feature-card.feature-featured {
    grid-column: auto;
  }
  .about-story-card {
    padding: 1.75rem;
  }
  .about-story-card h3 {
    font-size: 1.35rem;
  }
  .testimonial-card.featured p {
    font-size: 1.05rem;
  }
  .about-story-stats {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
  }
  .about-stat-mini-value {
    font-size: 1.3rem;
  }
}

/* ============================================
   SCROLL-REVEAL ENTRANCES
   Hidden only when JS opts in via body.js-reveal,
   so no-JS users still see all content.
   ============================================ */

body.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

body.js-reveal .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Stagger children inside a row/grid */
body.js-reveal .reveal-group > .reveal:nth-child(2)  { transition-delay: 0.08s; }
body.js-reveal .reveal-group > .reveal:nth-child(3)  { transition-delay: 0.16s; }
body.js-reveal .reveal-group > .reveal:nth-child(4)  { transition-delay: 0.24s; }
body.js-reveal .reveal-group > .reveal:nth-child(5)  { transition-delay: 0.32s; }
body.js-reveal .reveal-group > .reveal:nth-child(6)  { transition-delay: 0.40s; }
body.js-reveal .reveal-group > .reveal:nth-child(7)  { transition-delay: 0.48s; }
body.js-reveal .reveal-group > .reveal:nth-child(n+8){ transition-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  body.js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-content > *,
  .hero::before {
    animation: none !important;
  }
}

/* ============================================
   HOVER MICRO-INTERACTIONS
   ============================================ */

.btn-primary i,
.btn-secondary i {
  transition: transform 0.2s ease;
}

.btn-primary:hover i,
.btn-secondary:hover i {
  transform: translateX(3px);
}

.service-card-icon,
.feature-icon,
.quick-link-icon,
.stat-card i {
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.service-card:hover .service-card-icon {
  transform: scale(1.08) rotate(-3deg);
}

.feature-card:hover .feature-icon {
  transform: scale(1.08);
}

.stat-card:hover i {
  transform: scale(1.1);
}

.mission-card i {
  transition: transform 0.25s ease;
}

.mission-card:hover i {
  transform: scale(1.1);
}

.testimonial-card .quote-icon i {
  transition: transform 0.25s ease, color 0.2s ease;
}

.testimonial-card:hover .quote-icon i {
  transform: rotate(-6deg);
  color: var(--sky-600);
}

.faq-question {
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.faq-question:hover {
  padding-left: 1.6rem;
}

.value-badge i {
  transition: transform 0.2s ease;
}

.value-badge:hover i {
  transform: scale(1.15);
}

.theme-toggle {
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s ease;
}

.theme-toggle:hover {
  transform: rotate(20deg);
}
/* ============================================================
 * 11 — 3D EFFECTS & ANIMATIONS
 * Adds depth/motion on top of the existing design:
 *   - body.fx-3d : added by effects-3d.js only when motion is allowed
 * Reveal animations already live in 10-innovations.css and are reused
 * as-is. prefers-reduced-motion is respected throughout.
 * ============================================================ */

:root { --fx3d-ease: cubic-bezier(.2, .8, .2, 1); }

/* ============================================================
 * 1. INTERACTIVE POINTER TILT (cards follow the cursor in 3D)
 * ============================================================ */
body.fx-3d .services-grid,
body.fx-3d .stats-container,
body.fx-3d .features-bento,
body.fx-3d .testimonials-grid,
body.fx-3d .quick-links-grid,
body.fx-3d .about-mission-stack,
body.fx-3d .locations-grid,
body.fx-3d .hero-visual {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

body.fx-3d .tilt-3d {
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .35s var(--fx3d-ease), box-shadow .35s ease;
  will-change: transform;
}
body.fx-3d .tilt-3d.is-tilting {
  transition: transform .08s linear, box-shadow .2s ease;
  box-shadow: 0 30px 55px rgba(2, 132, 199, .25);
}

/* Lift inner content toward the viewer for a parallax pop */
body.fx-3d .tilt-3d .service-card-icon,
body.fx-3d .tilt-3d .feature-icon,
body.fx-3d .tilt-3d .stat-card > i,
body.fx-3d .tilt-3d .mission-card > i,
body.fx-3d .tilt-3d .stat-number,
body.fx-3d .tilt-3d .quote-icon {
  transform: translateZ(45px);
  transition: transform .35s var(--fx3d-ease);
}
body.fx-3d .tilt-3d h3,
body.fx-3d .tilt-3d h4,
body.fx-3d .tilt-3d .stat-label { transform: translateZ(22px); }

/* Moving glare following the pointer */
body.fx-3d .tilt-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%);
  z-index: 4;
}
body.fx-3d .tilt-3d.is-tilting::after { opacity: 1; }

/* ============================================================
 * 2. ANIMATED 3D DROPDOWN MENUS (Services + Industries)
 * Enhances the existing open transition with a 3D flip + a
 * staggered cascade of the items.
 * ============================================================ */
body.fx-3d .dropdown-menu {
  transform-origin: top center;
  transform: translateX(-50%) translateY(-8px) perspective(900px) rotateX(-16deg);
}
body.fx-3d .dropdown:hover .dropdown-menu,
body.fx-3d .dropdown.active .dropdown-menu {
  transform: translateX(-50%) translateY(0) perspective(900px) rotateX(0);
}

/* each item drops in with depth */
body.fx-3d .dropdown-menu a,
body.fx-3d .dropdown-menu .industry-highlight-link {
  transform-origin: top center;
  opacity: 0;
  transform: translateY(-8px) rotateX(-35deg);
  transition: opacity .25s ease, transform .35s var(--fx3d-ease),
              background-color .2s ease, color .2s ease;
}
body.fx-3d .dropdown:hover .dropdown-menu a,
body.fx-3d .dropdown.active .dropdown-menu a,
body.fx-3d .dropdown:hover .dropdown-menu .industry-highlight-link,
body.fx-3d .dropdown.active .dropdown-menu .industry-highlight-link {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* staggered reveal of items */
body.fx-3d .dropdown-menu > *:nth-child(1) { transition-delay: .03s; }
body.fx-3d .dropdown-menu > *:nth-child(2) { transition-delay: .06s; }
body.fx-3d .dropdown-menu > *:nth-child(3) { transition-delay: .09s; }
body.fx-3d .dropdown-menu > *:nth-child(4) { transition-delay: .12s; }
body.fx-3d .dropdown-menu > *:nth-child(5) { transition-delay: .15s; }
body.fx-3d .dropdown-menu > *:nth-child(6) { transition-delay: .18s; }
body.fx-3d .dropdown-menu > *:nth-child(7) { transition-delay: .21s; }
body.fx-3d .dropdown-menu > *:nth-child(8) { transition-delay: .24s; }

/* keep the hover nudge once items are visible (beats the open rule) */
body.fx-3d .dropdown:hover .dropdown-menu a:hover,
body.fx-3d .dropdown.active .dropdown-menu a:hover {
  transform: translateX(4px) rotateX(0);
}

/* ============================================================
 * 3. HERO WIDGET + CALENDAR TILE DEPTH
 * (float-card already animates via floatGentle — left untouched)
 * ============================================================ */
body.fx-3d .hero-visual { transform-style: preserve-3d; }

body.fx-3d .cal-grid { perspective: 800px; }
body.fx-3d .cal-month { transform-style: preserve-3d; }
body.fx-3d .cal-month:not(.is-current):hover {
  transform: translateY(-4px) rotateX(12deg) translateZ(18px);
  box-shadow: 0 16px 26px rgba(0, 0, 0, .28);
}

/* ============================================================
 * 4. NEWSLETTER "DELIVERY PERSON" MASCOT
 * Sits as a full-width banner above the newsletter text + form.
 * ============================================================ */
.nl-mascot-scene {
  grid-column: 1 / -1;
  position: relative;
  width: 300px;
  height: 140px;
  margin: 0 auto 4px;
  perspective: 700px;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.nl-mascot-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 230px;
  height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 70%);
  filter: blur(1px);
}
.nl-walker { position: absolute; inset: 0; transform-style: preserve-3d; }

.nl-envelope {
  position: absolute;
  left: 18px;
  bottom: 16px;
  width: 92px;
  height: 64px;
  transform-origin: bottom right;
}
.nl-rope {
  position: absolute;
  left: 96px;
  bottom: 70px;
  width: 78px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .7));
  transform-origin: left center;
  transform: rotate(-18deg);
}
.nl-person { position: absolute; left: 150px; bottom: 8px; width: 120px; height: 132px; }
.nl-person svg { width: 100%; height: 100%; display: block; overflow: visible; }

.nl-leg, .nl-arm { transform-box: fill-box; transform-origin: top center; }

/* static / reduced-motion pose */
.nl-person-inner { transform: translateY(0); }
.nl-leg-front { transform: rotate(16deg); }
.nl-leg-back  { transform: rotate(-16deg); }
.nl-arm-front { transform: rotate(18deg); }

@media (prefers-reduced-motion: no-preference) {
  .nl-person-inner { animation: nl-bob .62s ease-in-out infinite; }
  .nl-leg-front    { animation: nl-leg-a .62s ease-in-out infinite; }
  .nl-leg-back     { animation: nl-leg-b .62s ease-in-out infinite; }
  .nl-arm-front    { animation: nl-arm .62s ease-in-out infinite; }
  .nl-envelope     { animation: nl-drag .62s ease-in-out infinite; }
  .nl-rope         { animation: nl-rope-sway .62s ease-in-out infinite; }
}

@keyframes nl-bob   { 0%,100% { transform: translateY(0) rotateZ(0); }   50% { transform: translateY(-5px) rotateZ(-1deg); } }
@keyframes nl-leg-a { 0%,100% { transform: rotate(22deg); }              50% { transform: rotate(-22deg); } }
@keyframes nl-leg-b { 0%,100% { transform: rotate(-22deg); }             50% { transform: rotate(22deg); } }
@keyframes nl-arm   { 0%,100% { transform: rotate(24deg); }              50% { transform: rotate(6deg); } }
@keyframes nl-drag  { 0%,100% { transform: translateY(0) rotate(-2deg);} 50% { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes nl-rope-sway { 0%,100% { transform: rotate(-18deg); }         50% { transform: rotate(-14deg); } }

/* "Sent!" celebration on subscribe */
.nl-mascot-scene.is-sent .nl-envelope { animation: nl-send 1.1s var(--fx3d-ease) forwards; }
.nl-mascot-scene.is-sent .nl-rope { opacity: 0; transition: opacity .2s; }
@keyframes nl-send {
  0%   { transform: translate(0, 0) rotate(-2deg) scale(1); opacity: 1; }
  35%  { transform: translate(40px, -30px) rotate(8deg) scale(1.05); opacity: 1; }
  100% { transform: translate(190px, -120px) rotate(28deg) scale(.35); opacity: 0; }
}

@media (max-width: 768px) {
  .footer-newsletter-content { grid-template-columns: 1fr; }
  .nl-mascot-scene { transform: scale(.85); margin-bottom: 0; }
}

/* ============================================================
 * 5. ANIMATED 3D HERO SCENE (floating finance objects)
 * Markup is injected by effects-3d.js (skipped under reduced
 * motion), so it degrades gracefully with no JS.
 * ============================================================ */
.fx-hero-scene {
  position: absolute;
  inset: 0;
  z-index: 1;                /* above hero bg, below .hero-content (z-index:2) */
  perspective: 900px;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: hidden;
}
.fx-hero-parallax {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
  will-change: transform;
}
.fx-obj {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: rgba(125, 211, 252, 0.30);
  font-size: var(--size, 2rem);
  transform: translateZ(var(--z, 0px));
  animation: fx-obj-float var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}
.fx-obj.alt { color: rgba(245, 158, 11, 0.26); }
.fx-obj.lite { color: rgba(255, 255, 255, 0.16); }

@keyframes fx-obj-float {
  0%   { transform: translateZ(var(--z)) translateY(0) rotate(0deg); }
  50%  { transform: translateZ(var(--z)) translateY(-26px) rotate(8deg); }
  100% { transform: translateZ(var(--z)) translateY(0) rotate(0deg); }
}

/* subtle mouse-parallax on the hero text + widget (JS sets the vars) */
body.fx-3d .hero-text,
body.fx-3d .hero-visual {
  transition: transform .25s ease-out;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0)
             rotateY(var(--pry, 0deg)) rotateX(var(--prx, 0deg));
  transform-style: preserve-3d;
}

/* ============================================================
 * 6. EXTRA-SECTION DEPTH
 * Give the remaining grids/cards a 3D context + lift so the
 * whole page reads three-dimensional.
 * ============================================================ */
body.fx-3d .about-bento,
body.fx-3d .faq-grid,
body.fx-3d .contact-wrapper {
  perspective: 1300px;
  perspective-origin: 50% 35%;
}
body.fx-3d .tilt-3d .info-card > i,
body.fx-3d .tilt-3d .faq-q i,
body.fx-3d .tilt-3d .about-story-card h3 { transform: translateZ(26px); }

/* CTA banner gets a gentle idle 3D tilt */
@media (prefers-reduced-motion: no-preference) {
  body.fx-3d .cta-banner > * { position: relative; z-index: 1; }
}

/* ============================================================
 * 7. ANIMATED CHARACTER MASCOTS (one friendly person per section)
 * Injected by effects-3d.js into each section's corner. Desktop
 * only, decorative, pointer-events:none.
 * ============================================================ */
.fx-mascot {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 124px;
  height: 150px;
  pointer-events: none;
  z-index: 1;
  --shirt: #0f4c5c;
  --blob: #7dd3fc;
}
.fx-mascot .m-blob {
  position: absolute;
  left: 8px;
  top: 18px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--blob);
  opacity: .22;
  filter: blur(2px);
  animation: fx-blob 6s ease-in-out infinite;
}
.fx-mascot .m-person {
  position: relative;
  width: 124px;
  height: 124px;
  display: block;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: fx-bob 3.1s ease-in-out infinite;
}
.fx-mascot .m-shirt { fill: var(--shirt); }
.fx-mascot .m-arm-wave {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: fx-wave 1.7s ease-in-out infinite;
}
.fx-mascot .m-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--shirt);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
  animation: fx-badge 2.6s ease-in-out infinite;
}

@keyframes fx-bob   { 0%,100% { transform: translateY(0); }            50% { transform: translateY(-7px); } }
@keyframes fx-wave  { 0%,100% { transform: rotate(10deg); }            50% { transform: rotate(-24deg); } }
@keyframes fx-badge { 0%,100% { transform: translateY(0) scale(1); }   50% { transform: translateY(-5px) scale(1.07); } }
@keyframes fx-blob  { 0%,100% { transform: scale(1); }                 50% { transform: scale(1.09); } }

/* keep section content above the mascot's corner */
.fx-has-mascot { position: relative; }

/* desktop-only — hide on tablet/mobile to avoid clutter */
@media (max-width: 992px) { .fx-mascot { display: none; } }

/* ============================================================
 * 8. REDUCED-MOTION SAFETY NET
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nl-person-inner, .nl-leg, .nl-arm, .nl-envelope, .nl-rope,
  .fx-obj, .m-person, .m-arm-wave, .m-badge, .m-blob { animation: none !important; }
  .fx-hero-scene { display: none !important; }
  body.fx-3d .hero-text,
  body.fx-3d .hero-visual { transform: none !important; }
  body.fx-3d .dropdown-menu,
  body.fx-3d .dropdown-menu a,
  body.fx-3d .dropdown-menu .industry-highlight-link {
    transform: none !important;
    opacity: 1 !important;
  }
}