:root {
  --bg: #f7f9fb;
  --deep: #07263b;
  /* deep blue */
  --text: #07263b;
  --muted: #617d93;
  --accent: #0066ff;
  /* CTA */
  --accent-2: #ffd166;
  --glass: rgba(255, 255, 255, 0.6);
  --surface: #ffffff;
  --surface-2: #f8fbff;
}

* {
  box-sizing: border-box
}


/* Prevent horizontal scroll on desktop */
@media(min-width:601px){
html,body{overflow-x:hidden!important;max-width:100vw}

/* Force no horizontal overflow on major layout containers */
body{overflow-y:0;-webkit-overflow-scrolling:touch}
main, header, footer, .container, .hero, .hero-bg, #mobileNav {max-width:100vw;overflow-x:hidden}

/* Ensure container padding never causes overflow */
.container{box-sizing:border-box;padding-left:20px;padding-right:20px}

/* Prevent oversized replaced elements from causing horizontal overflow */
img,svg,canvas,video{max-width:100%;height:10px;display:block}

/* Center most page content for consistent UI/UX */
body,html{text-align:center}
.container, .hero-content, .about .container, .services .container, .testimonials .container, .team .container, .clients .container, .contact .container {align-items:center;text-align:center; align-self: center; align-content: center;}

/* Ensure pseudo decorations don't cause page overflow */
.hero, .about {overflow:hidden} 
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: var(--deep);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px
}

/* Center everything horizontally and text-align center by default */
/* This is a broad change per user request to centralize all content */
body,
html {
  text-align: center
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center
}

.hero-content,
.about .container,
.services .container,
.team .container,
.testimonials .container,
.clients .container,
.contact .container {
  align-items: center;
  text-align: center
}

.service-grid,
.testimonials .testi-grid,
.about .pillars,
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.service.card,
.testimonials .card,
.about .pillars .card,
.team-card {
  margin: 12px auto
}

.card {
  max-width: 380px
}

.hero h1 {
  margin-left: 0;
  margin-right: 0
}

.nav a {
  display: inline-block
}

.footer-grid {
  justify-content: center
}

/* Restore header layout so navbar is not centered */
.header .container,
.header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between
}

.header .container {
  padding: 0 20px
}

/* Hero: improve contrast in light mode for title and subtitles */
html:not(.dark-theme) .hero h1 {
  color: var(--deep);
  font-weight: 800;
  text-shadow: 0 6px 18px rgba(7, 38, 59, 0.08)
}

html:not(.dark-theme) .hero .lead,
html:not(.dark-theme) .hero .lead-2 {
  color: rgba(7, 38, 59, 0.9)
}

/* Buttons in light mode: stronger contrast between primary and ghost */
html:not(.dark-theme) .btn-ghost {
  color: var(--deep);
  border-color: rgba(3, 59, 99, 0.12);
  background: transparent
}

html:not(.dark-theme) .btn-primary {
  box-shadow: 0 12px 32px rgba(0, 87, 217, 0.14)
}

/* About: ensure card titles and text are visible in light mode */
html:not(.dark-theme) .about .pillars .card {
  color: var(--deep);
  background: rgba(7, 16, 34, 0.02);
  border: 1px solid rgba(3, 59, 99, 0.04)
}

html:not(.dark-theme) .about .pillars .card h3 {
  color: var(--deep)
}

/* Contact form: dark theme label contrast and input backgrounds */
.dark-theme .contact-form label {
  color: #eaf3ff
}

.dark-theme .contact-form input,
.dark-theme .contact-form textarea {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-color: rgba(255, 255, 255, 0.06);
  color: #fff
}

.dark-theme .contact-form {
  background: linear-gradient(180deg, rgba(7, 16, 34, 0.6), rgba(7, 16, 34, 0.5));
  box-shadow: none
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
  border-bottom: 1px solid rgba(0, 0, 0, 0.04)
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px
}

.brand {
  font-weight: 700;
  color: var(--deep)
}

.brand span {
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px
}

.nav a {
  margin: 0 10px;
  color: var(--muted);
  text-decoration: none
}

.hamburger {
  display: none !important;
  border: 0;
  background: transparent;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--deep);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s
}

.hamburger.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
  opacity: 0
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg)
}

/* Ensure desktop nav visible and mobile nav hidden by default */
.nav {
  display: flex;
  align-items: center
}

.mobile-nav {
  display: none
}

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 0
}

.btn {
  position: relative;
  overflow: hidden
}

.btn:focus {
  outline: none
}

/* Button ripple effect and emphasis */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0.7;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.32)
}

.btn.ripple-animate .ripple {
  animation: ripple 600ms ease-out
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.7
  }

  to {
    transform: scale(8);
    opacity: 0
  }
}

/* Button glow on hover to emphasize clicks */
.btn-primary:hover {
  box-shadow: 0 14px 36px rgba(0, 102, 255, 0.18), 0 0 24px rgba(0, 102, 255, 0.06)
}

.btn-ghost:hover {
  box-shadow: 0 12px 28px rgba(3, 59, 99, 0.06)
}

/* Theme toggle icon styling */
.icon {
  display: inline-block;
  vertical-align: middle
}

.icon-moon {
  display: none
}

.icon-sun {
  display: inline-block
}

.btn-ghost.inverse .icon {
  filter: invert(1)
}

html.dark-theme .icon-moon {
  display: inline-block
}

html.dark-theme .icon-sun {
  display: none
}

/* Ensure theme toggle icons are visible and sized consistently */
#themeToggle {display:inline-flex;align-items:center;justify-content:center;gap:6px}
#themeToggle .icon {width:18px;height:18px;color:inherit}
.icon svg {width:100%;height:100%;display:block}
.icon-moon {display:none}
.icon-sun {display:inline-block}
html.dark-theme .icon-moon {display:inline-block}
html.dark-theme .icon-sun {display:none}

/* Ensure toggle has explicit color in both themes */
#themeToggle {color:var(--deep);background:transparent;border:0;padding:6px;border-radius:8px}
html.dark-theme #themeToggle {color:#fff}

/* Dark-theme: make the theme toggle (moon) higher contrast and more prominent */
html.dark-theme #themeToggle {
  background: linear-gradient(90deg, var(--accent), #0057d9);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 26px rgba(0, 87, 217, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08)
}

html.dark-theme #themeToggle .icon {
  color: #fff;
  filter: drop-shadow(0 6px 18px rgba(0, 87, 217, 0.18))
}

html.dark-theme #themeToggle:hover {
  transform: translateY(-2px)
}

.btn-primary {
  background: linear-gradient(90deg, var(--accent), #0057d9);
  color: #fff;
  box-shadow: 0 8px 22px rgba(3, 59, 99, 0.12);
  transition: transform .18s ease, box-shadow .18s
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 87, 217, 0.18)
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(3, 59, 99, 0.06);
  color: var(--deep)
}

.btn-ghost.inverse {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff
}

.dark-theme {
  --bg: #071022;
  --deep: #eaf3ff;
  --muted: #b7cbe6;
  --accent: #0090ff;
  --accent-2: #ffd166
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px
}

.main {
  padding-top: 80px
}

/* Loading */
.loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  z-index: 60;
  backdrop-filter: blur(4px);
  transition: opacity .25s ease
}

.loading.hidden {
  opacity: 0;
  pointer-events: none
}

.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 5px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite
}

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

/* Hero */
.hero {
  position: relative;
  padding: 120px 0 80px;
  overflow: hidden
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  background: linear-gradient(180deg, rgba(7, 16, 34, 0.35), rgba(7, 16, 34, 0.2)), url('baixo-angulo-de-arranha-ceus.jpg') center/cover no-repeat
}

.hero-content {
  position: relative;
  z-index: 10;
  padding: 40px 20px
}

.hero h1 {
  font-size: 36px;
  margin: 0 0 8px;
  color: var(--deep)
}

.lead {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 8px
}

.lead-2 {
  color: var(--muted);
  margin-bottom: 18px
}

.hero-cta .btn {
  margin-right: 10px
}

.hero-bg {
  transition: opacity .35s ease
}

/* Animated subtle shapes */
.hero::before {
  content: '';
  position: absolute;
  right: -8vw;
  top: -8vw;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle at 20% 20%, rgba(0, 119, 204, 0.06), transparent 30%), radial-gradient(circle at 80% 80%, rgba(0, 119, 204, 0.03), transparent 30%);
  filter: blur(40px);
  transform: translateZ(0);
  animation: float 12s linear infinite
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0)
  }

  50% {
    transform: translateY(12px) rotate(10deg)
  }

  100% {
    transform: translateY(0) rotate(0)
  }
}

/* Sections */
.section-filled {
  position: relative;
  padding: 56px 0
}

section {
  padding: 56px 0
}

/* About section visual fill */
.about {
  background: #0b1630;
  color: #fff;
  overflow: hidden
}

.about .container {
  position: relative
}

.about .pillars .card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: #fff
}

.about h2,
.about p {
  color: #f3f6fb
}

.about::before {
  /* removed yellow radial to avoid unwanted glow */
  content: '';
  position: absolute;
  right: -6vw;
  top: -6vw;
  width: 70vw;
  height: 70vw;
  background: none;
  filter: none;
  pointer-events: none;
}

/* Clients section */
.clients {
  background: transparent
}

.clients h2 {
  color: var(--deep)
}

.clients-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0
}

.client-logo {
  min-width: 100px;
  padding: 10px 0px;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(3, 59, 99, 0.06);
  color: var(--muted);
  font-weight: 600
}

/* Testimonials visual fill */
.testimonials {
  background: linear-gradient(180deg, #0b1630 0%, #091226 100%);
  color: #fff
}

.testimonials .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  color: #fff
}

/* Light-mode overrides for testimonials when not dark-theme */
.testimonials:not(.dark-theme) {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  color: var(--deep)
}

.testimonials:not(.dark-theme) .card {
  background: rgba(7, 16, 34, 0.02);
  color: var(--deep);
  border: 1px solid rgba(3, 59, 99, 0.04)
}

.testimonials h2 {
  color: #ffdca3
}

.testimonials::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  height: 80px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.02), transparent 30%);
  pointer-events: none
}

/* Decorative footer fill */
.footer-rich {
  background: linear-gradient(180deg, #071022 0%, #081428 60%);
  color: #cfe7ff
}

.footer-rich p,
.footer-rich a {
  color: #cfe7ff
}

/* Light-theme: make footer readable and professional */
html:not(.dark-theme) .footer-rich {
  background: var(--surface-2);
  color: var(--deep);
}

html:not(.dark-theme) .footer-rich p,
html:not(.dark-theme) .footer-rich a {
  color: var(--deep);
}

/* Social emoji links styling */
.footer-rich .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 20px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
}

.footer-rich .social a:hover {transform: translateY(-3px)}

.footer-grid .col {
  min-height: 80px
}

.about .pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px
}

.card {
  background: white;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(3, 59, 99, 0.04);
  transition: transform .22s ease, box-shadow .22s
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(3, 59, 99, 0.06)
}

.services .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  justify-items: center;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.services .service-grid .service.card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

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

.contact .contact-form {
  background: white;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(3, 59, 99, 0.04)
}

.contact-form .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px
}

.contact-form label {
  display: block;
  font-size: 14px;
  color: var(--deep)
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #e6eef6;
  border-radius: 8px;
  margin-top: 6px
}

.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px
}

.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #25D366;
  color: #fff;
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.18);
  text-decoration: none;
  font-size: 20px
}

/* CTA strip between sections */
.cta-strip {
  background: linear-gradient(90deg, rgba(0, 119, 204, 0.04), rgba(0, 119, 204, 0.02));
  padding: 18px 0;
  margin-top: 6px;
  margin-bottom: 6px
}

.cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.cta-strip-text {
  color: var(--deep);
  font-weight: 600
}

.cta-strip-actions .btn {
  margin-left: 8px
}

/* Mobile nav (hidden by default) */
.mobile-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  padding: 12px 20px;
  box-shadow: 0 8px 24px rgba(3, 59, 99, 0.06);
  z-index: 50
}

.mobile-nav a {
  display: block;
  padding: 8px 0;
  color: var(--deep);
  text-decoration: none
}

.mobile-nav.open {
  display: block
}

/* Dark-mode: ensure mobile nav is dark and high contrast */
.dark-theme .mobile-nav {
  background: linear-gradient(180deg, rgba(3, 10, 20, 0.95), rgba(3, 10, 20, 0.92));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5)
}

.dark-theme .mobile-nav a {
  color: var(--muted);
  opacity: 0.95
}

.dark-theme .mobile-nav a:hover {
  color: var(--deep);
  opacity: 1
}

.footer {
  padding: 24px 0;
  background: transparent;
  text-align: center;
  color: var(--muted)
}

/* Team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 12px
}

/* Team card richer layout */
.team-card{padding:18px;display:flex;flex-direction:column;gap:12px}
.team-card .card-top{display:flex;gap:12px;align-items:center}
.avatar-wrap{width:140px;height:140px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#f3f7ff)}
.avatar{width:120px;height:120px}
.meta .title{font-size:13px;color:var(--muted);margin-top:4px}
.meta .experience{font-size:12px;color:var(--muted);margin-top:6px}
.bio{color:var(--muted);font-size:14px}
.skills{list-style:none;padding:0;margin:8px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.skills li{background:rgba(3,59,99,0.06);padding:6px 10px;border-radius:8px;font-size:13px}
.team-actions{display:flex;gap:8px;margin-top:8px;justify-content:center}
.team-card--placeholder .avatar-placeholder{width:72px;height:72px;border-radius:12px;background:linear-gradient(90deg,#e6eefb,#fff7e6);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted)}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px
}

.team-card .avatar {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  object-fit: cover;
  margin-bottom: 12px
}

/* Panels layout - make each panel fill viewport height */
.team-panels{display:flex;flex-direction:column}
.team-panel{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.panel-inner{max-width:1100px;width:100%;display:flex;gap:40px;align-items:center}
.panel-media{flex:0 0 48%}
.panel-body{flex:1 1 52%;color:var(--muted)}
.panel-body h3{color:var(--deep);font-size:28px;margin-bottom:6px}
.panel-body .bio{font-size:18px;line-height:1.6;color:var(--muted)}
.panel-avatar{width:320px;height:320px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.panel-avatar .avatar{width:240px;height:240px;border-radius:16px}

@media(max-width:900px){
  .panel-inner{flex-direction:column;gap:24px}
  .panel-media,.panel-body{flex:1 1 100%}
  .panel-avatar{width:200px;height:200px}
  .panel-avatar .avatar{width:140px;height:140px}
  .team-panel{min-height:auto;padding:28px 12px}
}

/* Rich footer styles */
.footer-rich {
  background: linear-gradient(180deg, rgba(3, 59, 99, 0.05), rgba(0, 0, 0, 0.02));
  padding: 40px 0
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 18px;
  align-items: start;
  justify-items: center;
}

.footer-grid h4 {
  margin: 0 0 8px;
  color: var(--deep)
}

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

.footer-grid a {
  color: var(--accent)
}

.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding-top: 12px;
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px
}

/* Footer refactor helpers */
.footer-refactor .footer-brand {text-align:left}
.footer-refactor .footer-links, .footer-refactor .footer-services, .footer-refactor .footer-contact {text-align:left}
.footer-rich .social {margin-top:12px;display:flex;gap:12px}
.footer-rich .social .social-link {font-size:20px}

/* Dark-mode: ensure footer CTA has sufficient contrast */
html.dark-theme .footer-rich .btn-primary {
  background: linear-gradient(90deg, #1EA7FF, #0073E6) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Section CTA helper */
.section-cta {
  margin-top: 18px
}

.section-cta .btn {
  margin-right: 8px
}

/* Responsive */
@media(max-width:900px) {

  .about .pillars,
  .services .service-grid,
  .testimonials .testi-grid {
    grid-template-columns: repeat(2, 1fr)
  }

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

@media(max-width:600px) {
  .nav {
    display: none
  }

  .hero h1 {
    font-size: 28px
  }

  .hero-content {
    padding: 18px
  }

  .hero-quickcard {
    width: 100%
  }

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

  .team-grid {
    grid-template-columns: 1fr
  }

  .hamburger {
    display: flex !important
  }

  .header-inner {
    position: relative
  }

  .mobile-nav {
    display: none
  }

  .mobile-nav.open {
    display: block
  }
}

/* Simple on-scroll animation helpers */
[data-animate] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease
}

[data-animate].inview {
  opacity: 1;
  transform: none
}

/* Particles / floating dots background */
.bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5
}

.bg-dots canvas { 
  width: 100%;
  height: 100%;
  display: flex;
}

/* Tilt card effect */
.tilt {
  transform-style: preserve-3d;
  transition: transform .25s ease;
  will-change: transform
}

.tilt-inner {
  transform: translateZ(30px)
}

/* Animated gradient overlays */
.animated-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  background-size: 200% 200%;
  animation: gradShift 8s ease infinite
}

@keyframes gradShift {
  0% {
    background-position: 0% 50%
  }

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

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

/* Tighter spacing for specific adjacent sections to avoid giant gaps */
.clients {
  padding: 22px 0
}

.team {
  padding: 22px 0
}

.services {
  padding: 22px 0
}

.testimonials {
  padding: 22px 0
}

.contact {
  padding: 22px 0
}

/* Small helpers for adjacency */
.clients+.team {
  margin-top: 8px
}

.testimonials+.contact {
  margin-top: 0px
}

/* Dark theme overrides to ensure contrast */
.dark-theme .team,
.dark-theme .services {
  background: transparent;
  color: var(--deep)
}

.dark-theme .team h2,
.dark-theme .services h2,
.dark-theme .team p,
.dark-theme .services p {
  color: #f3f6fb
}

.dark-theme .team-card,
.dark-theme .service.card,
.dark-theme .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: #fff;
  box-shadow: none
}

.dark-theme .team::before {
  background: linear-gradient(180deg, rgba(7, 16, 34, 0.6), rgba(7, 16, 34, 0.6))
}

/* Ensure about switches with theme */
.dark-theme .about {
  background: #0b1630;
  color: #fff
}

.dark-theme .about h2,
.dark-theme .about p {
  color: #f3f6fb
}

.dark-theme .about .pillars .card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: #fff
}

/* Ensure buttons contrast in dark theme */
.dark-theme .btn-primary {
  box-shadow: 0 10px 30px rgba(0, 120, 255, 0.14)
}

.dark-theme .btn-ghost {
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--deep)
}

/* -----------------------
   Accessibility & layout tweaks requested
   - Light mode: invert order of About and Footer
   - Dark mode: invert contact form fields, add hero overlay, darken navbar
   ----------------------- */

/* Light-mode: present About with light background and show pillars before the text */
html:not(.dark-theme) .about {
  background: var(--surface);
  color: var(--deep)
}

html:not(.dark-theme) .about h2,
html:not(.dark-theme) .about p {
  color: var(--deep)
}

html:not(.dark-theme) .about .container {
  display: flex;
  flex-direction: column;
  gap: 18px
}

/* remove presentational reordering to keep DOM order consistent across themes */
html:not(.dark-theme) .about .pillars {
  order: initial
}

body .about .pillars {
  order: initial
}

/* Light-mode: reverse footer columns order for presentation */
html:not(.dark-theme) .footer-grid {
  display: flex;
  flex-direction: row-reverse;
  gap: 18px
}

/* Dark-mode: invert contact form layout/order while preserving two-column layout */
.dark-theme .contact-form .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  flex-direction: row-reverse
}

.dark-theme .contact-form .grid>label {
  flex: 1 1 48%
}

/* Dark-mode: add an opaque overlay on hero to improve text readability */
.dark-theme .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9;
  pointer-events: none
}

/* Dark-mode: darken navbar background and ensure link contrast */
.dark-theme .header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.6));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.dark-theme .nav a,
.dark-theme .brand,
.dark-theme .header .btn,
.dark-theme .mobile-nav a {
  color: var(--deep)
}