/* Base shape styles — common to all decorative elements */
.ug-shape {
  position: absolute;
  pointer-events: none;
  user-select: none;
}



/* A1. Large background circle ring — top right */
.ug-shape-hero-ring {
  position: absolute;
  top: -160px;
  right: -130px;
  width: 520px;
  height: 520px;
  border: 2px solid var(--accent-navy-light);
  background: conic-gradient(from 0deg, var(--accent-navy-light) 0deg, var(--primary-light) 90deg, var(--accent-purple) 180deg, var(--accent-navy) 270deg);
  opacity: 0.15;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-hero-ring::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  border: 2px solid var(--primary-light);
  opacity: 0.7;
  border-radius: 50%;
}

/* A2. Soft blob — bottom left */
.ug-shape-blob-left {
  position: absolute;
  bottom: -80px;
  left: -100px;
  width: 280px;
  height: 240px;
  background: linear-gradient(135deg, var(--accent-navy-light) 0%, var(--accent-purple) 50%, var(--primary-light) 100%);
  opacity: 0.18;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* A3. Small accent dot cluster — top left */
.ug-shape-dot-grid-hero {
  position: absolute;
  top: 40px;
  left: 30px;
  width: 160px;
  height: 160px;
  background-image: radial-gradient(circle, var(--accent-navy-light) 2px, transparent 2px);
  background-size: 18px 18px;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}



/* B1. Diagonal section cut — applied via clip-path on parent */
.ug-section-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.ug-shape-wave-divider {
  width: 100%;
  height: 60px;
  display: block;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
}



.ug-shape-section-tint {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 110%;
  height: 90%;
  background: linear-gradient(to bottom right, var(--accent-navy), var(--accent-purple));
  opacity: 0.12;
  border-radius: 40px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-plus-accent {
  position: absolute;
  width: 15px;
  height: 15px;
  color: var(--accent-navy-light);
  opacity: 0.5;
  font-size: 20px;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  text-shadow: 1px 1px 2px var(--primary-light);
}

.ug-shape-plus-accent.rotate-45 {
  transform: rotate(45deg);
}

.ug-shape-corner-triangle {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-top: 80px solid var(--primary-light);
  opacity: 0.3;
  filter: drop-shadow(-2px 2px 4px var(--accent-navy-light));
  z-index: 0;
  pointer-events: none;
  user-select: none;
}



/* D1. Large soft circle — background right */
.ug-shape-pricing-circle {
  position: absolute;
  right: -200px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at 30% 30%, var(--accent-purple), var(--accent-navy-light));
  opacity: 0.15;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-line-accent {
  position: absolute;
  top: -20px;
  left: 0;
  width: 120px;
  height: 3px;
  background: linear-gradient(to right, var(--accent-navy-light), var(--primary-light));
  opacity: 0.7;
  box-shadow: 0 0 8px var(--accent-purple);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}



.ug-shape-quote-mark {
  position: absolute;
  top: -40px;
  right: -20px;
  font-size: 280px;
  font-family: Georgia, serif;
  line-height: 1;
  color: rgba(10, 31, 94, 0.05);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-weight: normal;
}

.ug-shape-vertical-line {
  position: absolute;
  left: -40px;
  top: 0;
  width: 2px;
  height: 80px;
  background: linear-gradient(to bottom, var(--accent-purple), var(--accent-navy-light));
  opacity: 0.7;
  box-shadow: 2px 0 6px var(--primary-light);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}



.ug-shape-footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  clip-path: polygon(0 60px, 100% 40px, 100% 0, 0 0);
  background: inherit;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-dot-grid-footer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}



/* G1. Large ring accent — right side */
.ug-shape-careers-ring {
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  border: 2px solid var(--accent-navy-light);
  background: conic-gradient(from 45deg, var(--accent-navy) 0deg, var(--accent-purple) 90deg, var(--primary-light) 180deg, var(--accent-navy-light) 270deg);
  opacity: 0.12;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-diagonal-lines {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-diagonal-line {
  position: absolute;
  width: 80px;
  height: 1px;
  background: rgba(155, 143, 181, 0.25);
  transform: rotate(45deg);
  transform-origin: left center;
}

.ug-shape-diagonal-line:nth-child(1) { top: 10px; right: 0; }
.ug-shape-diagonal-line:nth-child(2) { top: 34px; right: 0; }
.ug-shape-diagonal-line:nth-child(3) { top: 58px; right: 0; }



/* H1. Global circles — representing worldwide network */
.ug-shape-globe-ring-large {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 2.5px solid;
  border-image: linear-gradient(to bottom right, var(--accent-navy-light), var(--primary-light)) 1;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  box-shadow: inset 0 0 20px var(--accent-purple), 0 0 15px var(--accent-navy-light);
}

.ug-shape-globe-ring-large::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border: 1.5px solid var(--primary-light);
  border-radius: 50%;
  opacity: 0.8;
}

.ug-shape-globe-ring-large::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border: 1px solid var(--accent-navy-light);
  opacity: 0.6;
  border-radius: 50%;
}

.ug-shape-location-pin {
  position: absolute;
  width: 40px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-navy-light), var(--accent-purple));
  opacity: 0.35;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px var(--accent-navy);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-location-pin::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--primary-light);
  opacity: 0.8;
  border-radius: 50%;
}

.ug-shape-network-node {
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--accent-navy-light), var(--primary-light));
  opacity: 0.5;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 0 0 8px var(--accent-purple), 0 0 12px var(--accent-navy-light);
}

/* H4. Connection line — path between locations */
.ug-shape-connection-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(to right, var(--accent-navy), var(--accent-purple), var(--primary-light));
  opacity: 0.35;
  box-shadow: 0 0 6px var(--accent-navy-light);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* H5. Africa accent shape — simplified continent silhouette */
.ug-shape-africa-accent {
  position: absolute;
  width: 180px;
  height: 200px;
  background: radial-gradient(ellipse 60% 50% at 40% 45%, var(--accent-navy-light) 0%, var(--accent-purple) 50%, transparent 70%);
  opacity: 0.25;
  border-radius: 40% 50% 45% 55%;
  transform: rotate(-15deg);
  box-shadow: inset -5px -5px 15px var(--primary-light);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* H6. Global flow arrows — indicating movement/connection */
.ug-shape-flow-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 0 solid transparent;
  border-top: 12px solid var(--accent-navy-light);
  opacity: 0.5;
  filter: drop-shadow(1px 1px 2px var(--accent-purple));
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* H7. Connecting people circles — representing workforce */
.ug-shape-people-circle {
  position: absolute;
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, var(--primary-light), var(--accent-purple));
  opacity: 0.35;
  border: 2.5px solid var(--accent-navy-light);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 2px 8px var(--accent-navy);
}

.ug-shape-people-circle::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--accent-navy-light);
  opacity: 0.8;
  border-radius: 50%;
}

.ug-shape-world-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(0deg, transparent 24%, var(--accent-navy) 25%, var(--accent-navy) 26%, transparent 27%, transparent 74%, var(--accent-navy) 75%, var(--accent-navy) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, var(--accent-navy) 25%, var(--accent-navy) 26%, transparent 27%, transparent 74%, var(--accent-navy) 75%, var(--accent-navy) 76%, transparent 77%, transparent);
  background-size: 80px 80px;
  opacity: 0.18;
  filter: drop-shadow(0 0 4px var(--accent-purple));
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-rwanda-marker {
  position: absolute;
  width: 50px;
  height: 60px;
  background: linear-gradient(to bottom, var(--accent-navy-light), var(--primary-light));
  opacity: 0.28;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2.5px solid var(--accent-navy);
  box-shadow: 0 3px 10px var(--accent-purple);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ug-shape-rwanda-marker::before {
  content: 'RW';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-navy);
  opacity: 0.7;
  text-align: center;
  text-shadow: 1px 1px 2px var(--primary-light);
}



@media (max-width: 1024px) {
  .ug-shape-globe-ring-large {
    width: 210px;
    height: 210px;
  }

  .ug-shape-globe-ring-large::before {
    width: 154px;
    height: 154px;
  }

  .ug-shape-globe-ring-large::after {
    width: 98px;
    height: 98px;
  }

  .ug-shape-africa-accent {
    width: 126px;
    height: 140px;
  }

  .ug-shape-connection-line,
  .ug-shape-flow-arrow {
    opacity: 0.7;
  }
}

@media (max-width: 768px) {
  .ug-shape-globe-ring-large,
  .ug-shape-africa-accent,
  .ug-shape-world-grid {
    display: none;
  }

  .ug-shape-location-pin,
  .ug-shape-network-node,
  .ug-shape-people-circle,
  .ug-shape-rwanda-marker {
    opacity: 0.5;
    transform: scale(0.8);
  }

  .ug-shape-connection-line,
  .ug-shape-flow-arrow {
    opacity: 0.3;
  }
}

@media (max-width: 480px) {
  .ug-shape-globe-ring-large,
  .ug-shape-location-pin,
  .ug-shape-network-node,
  .ug-shape-connection-line,
  .ug-shape-africa-accent,
  .ug-shape-flow-arrow,
  .ug-shape-people-circle,
  .ug-shape-world-grid,
  .ug-shape-rwanda-marker {
    display: none;
  }
}
  /* Scale all shapes to 70% of desktop size */
  .ug-shape-hero-ring {
    width: 364px;
    height: 364px;
    top: -112px;
    right: -91px;
  }

  .ug-shape-hero-ring::before {
    width: 266px;
    height: 266px;
  }

  .ug-shape-blob-left {
    width: 196px;
    height: 168px;
    bottom: -56px;
    left: -70px;
  }

  .ug-shape-dot-grid-hero {
    width: 112px;
    height: 112px;
    background-size: 12.6px 12.6px;
  }

  .ug-shape-section-tint {
    opacity: 0.7;
  }

  .ug-shape-pricing-circle {
    width: 280px;
    height: 280px;
    right: -140px;
  }

  .ug-shape-quote-mark {
    font-size: 196px;
  }

  .ug-shape-careers-ring {
    width: 252px;
    height: 252px;
    right: -70px;
  }

  .ug-shape-corner-triangle {
    border-left-width: 56px;
    border-top-width: 56px;
  }
}

@media (max-width: 768px) {
  /* Hide large decorative shapes on tablet */
  .ug-shape-hero-ring,
  .ug-shape-section-tint,
  .ug-shape-diagonal-lines,
  .ug-shape-corner-triangle {
    display: none;
  }

  /* Scale remaining shapes to 50% */
  .ug-shape-blob-left {
    width: 140px;
    height: 120px;
    bottom: -40px;
    left: -50px;
  }

  .ug-shape-dot-grid-hero {
    width: 80px;
    height: 80px;
    background-size: 9px 9px;
    opacity: 0.7;
  }

  .ug-shape-pricing-circle {
    width: 200px;
    height: 200px;
    right: -100px;
    opacity: 0.5;
  }

  .ug-shape-quote-mark {
    font-size: 140px;
    opacity: 0.7;
  }

  .ug-shape-careers-ring {
    width: 180px;
    height: 180px;
    right: -50px;
  }

  .ug-shape-plus-accent {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Hide ALL decorative shapes on mobile */
  .ug-shape-hero-ring,
  .ug-shape-blob-left,
  .ug-shape-dot-grid-hero,
  .ug-shape-pricing-circle,
  .ug-shape-quote-mark,
  .ug-shape-vertical-line,
  .ug-shape-careers-ring,
  .ug-shape-plus-accent,
  .ug-shape-section-tint,
  .ug-shape-diagonal-lines,
  .ug-shape-line-accent {
    display: none;
  }

  /* Keep only footer dot grid */
  .ug-shape-dot-grid-footer {
    opacity: 0.5;
  }
}