/* Prominent Background Textures and Patterns */

/* Dense dotted pattern base - Much more visible */
body {
  position: relative;
  background-color: #FFFFFF;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle, rgba(11, 61, 145, 0.12) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(75, 85, 99, 0.08) 1px, transparent 1px),
    radial-gradient(circle, rgba(37, 99, 235, 0.06) 2px, transparent 2px);
  background-size: 30px 30px, 45px 45px, 60px 60px;
  background-position: 0 0, 15px 15px, 30px 30px;
  pointer-events: none;
  z-index: 0;
}

/* Main content positioning */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Large circular dot patterns - Very visible */
.section:nth-child(2) {
  position: relative;
  overflow: hidden;
}

.section:nth-child(2)::before {
  content: '';
  position: absolute;
  top: -100px;
  right: 5%;
  width: 350px;
  height: 350px;
  background-image:
    radial-gradient(circle, rgba(37, 99, 235, 0.18) 3px, transparent 3px);
  background-size: 20px 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.section:nth-child(2)::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: 3%;
  width: 280px;
  height: 280px;
  background-image:
    radial-gradient(circle, rgba(75, 85, 99, 0.15) 2.5px, transparent 2.5px);
  background-size: 18px 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Services section - Multiple large patterns */
#services {
  position: relative;
  overflow: hidden;
}

#services::before {
  content: '';
  position: absolute;
  top: 10%;
  right: 8%;
  width: 400px;
  height: 400px;
  background-image:
    radial-gradient(circle, rgba(11, 61, 145, 0.16) 3px, transparent 3px),
    radial-gradient(circle, rgba(37, 99, 235, 0.12) 2px, transparent 2px);
  background-size: 25px 25px, 18px 18px;
  background-position: 0 0, 12px 12px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

#services::after {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: 380px;
  height: 380px;
  background-image:
    radial-gradient(circle, rgba(75, 85, 99, 0.14) 3px, transparent 3px);
  background-size: 22px 22px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Arrow patterns - Much larger and more visible */
.section:nth-child(4) {
  position: relative;
  overflow: hidden;
}

.section:nth-child(4)::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 2%;
  width: 250px;
  height: 250px;
  background-image:
    radial-gradient(circle, rgba(11, 61, 145, 0.16) 3px, transparent 3px);
  background-size: 18px 18px;
  clip-path: polygon(0% 40%, 60% 40%, 60% 0%, 100% 50%, 60% 100%, 60% 60%, 0% 60%);
  pointer-events: none;
  z-index: 0;
  transform: rotate(45deg);
}

.section:nth-child(4)::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 220px;
  height: 220px;
  background-image:
    radial-gradient(circle, rgba(37, 99, 235, 0.15) 2.5px, transparent 2.5px);
  background-size: 16px 16px;
  clip-path: polygon(0% 40%, 60% 40%, 60% 0%, 100% 50%, 60% 100%, 60% 60%, 0% 60%);
  pointer-events: none;
  z-index: 0;
  transform: rotate(-90deg);
}

/* Leadership section - Multiple patterns */
.section.section-alt:nth-of-type(4) {
  position: relative;
  overflow: hidden;
}

.section.section-alt:nth-of-type(4)::before {
  content: '';
  position: absolute;
  top: 8%;
  right: 6%;
  width: 320px;
  height: 320px;
  background-image:
    radial-gradient(circle, rgba(11, 61, 145, 0.14) 3px, transparent 3px);
  background-size: 20px 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.section.section-alt:nth-of-type(4)::after {
  content: '';
  position: absolute;
  bottom: 12%;
  left: 4%;
  width: 280px;
  height: 280px;
  background-image:
    radial-gradient(circle, rgba(75, 85, 99, 0.16) 2.5px, transparent 2.5px);
  background-size: 19px 19px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Approach section - Large arrow */
.section:has(.approach-grid) {
  position: relative;
  overflow: hidden;
}

.section:has(.approach-grid)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -50px;
  width: 300px;
  height: 300px;
  background-image:
    radial-gradient(circle, rgba(37, 99, 235, 0.18) 3px, transparent 3px);
  background-size: 20px 20px;
  clip-path: polygon(0% 40%, 60% 40%, 60% 0%, 100% 50%, 60% 100%, 60% 60%, 0% 60%);
  pointer-events: none;
  z-index: 0;
  transform: translateY(-50%);
}

.section:has(.approach-grid)::after {
  content: '';
  position: absolute;
  top: 20%;
  right: -30px;
  width: 260px;
  height: 260px;
  background-image:
    radial-gradient(circle, rgba(11, 61, 145, 0.16) 2.5px, transparent 2.5px);
  background-size: 18px 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Why Work section - Large circles */
.section:nth-last-of-type(2) {
  position: relative;
  overflow: hidden;
}

.section:nth-last-of-type(2)::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 3%;
  width: 350px;
  height: 350px;
  background-image:
    radial-gradient(circle, rgba(75, 85, 99, 0.17) 3px, transparent 3px);
  background-size: 21px 21px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.section:nth-last-of-type(2)::after {
  content: '';
  position: absolute;
  bottom: 8%;
  right: 6%;
  width: 320px;
  height: 320px;
  background-image:
    radial-gradient(circle, rgba(37, 99, 235, 0.15) 2.5px, transparent 2.5px);
  background-size: 19px 19px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Additional decorative patterns */
.two-column-content {
  position: relative;
}

.two-column-content::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 8%;
  width: 180px;
  height: 180px;
  background-image:
    radial-gradient(circle, rgba(11, 61, 145, 0.14) 2.5px, transparent 2.5px);
  background-size: 16px 16px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.two-column-content::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 6%;
  width: 160px;
  height: 160px;
  background-image:
    radial-gradient(circle, rgba(37, 99, 235, 0.13) 2px, transparent 2px);
  background-size: 14px 14px;
  clip-path: polygon(0% 40%, 60% 40%, 60% 0%, 100% 50%, 60% 100%, 60% 60%, 0% 60%);
  transform: rotate(180deg);
  pointer-events: none;
  z-index: 0;
}

/* Grid patterns around cards */
.grid {
  position: relative;
  z-index: 1;
}

.grid::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -40px;
  width: 200px;
  height: 200px;
  background-image:
    radial-gradient(circle, rgba(75, 85, 99, 0.13) 2px, transparent 2px);
  background-size: 17px 17px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.grid::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  background-image:
    radial-gradient(circle, rgba(11, 61, 145, 0.14) 2.5px, transparent 2.5px);
  background-size: 16px 16px;
  clip-path: polygon(0% 40%, 60% 40%, 60% 0%, 100% 50%, 60% 100%, 60% 60%, 0% 60%);
  transform: rotate(135deg);
  pointer-events: none;
  z-index: -1;
}

/* Footer patterns - White dots on dark background */
.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 8%;
  width: 280px;
  height: 280px;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 2.5px, transparent 2.5px);
  background-size: 20px 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.site-footer::after {
  content: '';
  position: absolute;
  bottom: 15%;
  right: 10%;
  width: 240px;
  height: 240px;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: 18px 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Additional corner patterns */
.container {
  position: relative;
}

.section:nth-of-type(3) .container::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -20px;
  width: 200px;
  height: 200px;
  background-image:
    radial-gradient(circle, rgba(37, 99, 235, 0.16) 3px, transparent 3px);
  background-size: 20px 20px;
  clip-path: polygon(0% 40%, 60% 40%, 60% 0%, 100% 50%, 60% 100%, 60% 60%, 0% 60%);
  transform: rotate(90deg);
  pointer-events: none;
  z-index: 0;
}

.section:nth-of-type(5) .container::after {
  content: '';
  position: absolute;
  bottom: -70px;
  left: -30px;
  width: 220px;
  height: 220px;
  background-image:
    radial-gradient(circle, rgba(11, 61, 145, 0.15) 3px, transparent 3px);
  background-size: 19px 19px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Animated floating dots */
@keyframes float-dots {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(8deg);
  }
}

.section:nth-child(2)::before {
  animation: float-dots 8s ease-in-out infinite;
}

#services::before {
  animation: float-dots 10s ease-in-out infinite;
}

/* Ensure content stays above patterns */
.section > .container > * {
  position: relative;
  z-index: 1;
}

/* Responsive: Keep patterns visible on mobile */
@media (max-width: 768px) {
  .section:nth-child(odd)::after,
  .section:nth-child(even)::after,
  #services::before,
  #services::after {
    width: 180px;
    height: 180px;
  }

  body::before {
    background-size: 25px 25px, 35px 35px, 50px 50px;
  }
}