/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ===== HEADER ===== */
#site-header {
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#site-header.scrolled {
  background: rgba(254, 253, 248, 0.97);
  box-shadow: 0 1px 12px rgba(5, 150, 105, 0.1);
}

/* ===== HERO GEOMETRIC SHAPES ===== */
.geo-shape {
  position: absolute;
  opacity: 0.12;
  pointer-events: none;
}
.shape-circle-1 {
  width: 320px; height: 320px;
  border-radius: 50%;
  background: #fbbf24;
  top: 5%; left: -80px;
}
.shape-circle-2 {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: #6ee7b7;
  top: 15%; right: 5%;
}
.shape-circle-3 {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: #fde68a;
  bottom: 25%; left: 15%;
}
.shape-square-1 {
  width: 140px; height: 140px;
  background: #34d399;
  top: 40%; right: -30px;
  transform: rotate(45deg);
}
.shape-square-2 {
  width: 80px; height: 80px;
  background: #fbbf24;
  bottom: 30%; left: 5%;
  transform: rotate(20deg);
}
.shape-triangle-1 {
  width: 0; height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 120px solid #a7f3d0;
  top: 60%; right: 15%;
}
.shape-diamond-1 {
  width: 90px; height: 90px;
  background: #fde68a;
  top: 20%; left: 25%;
  transform: rotate(45deg);
}
.shape-ring-1 {
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 20px solid #6ee7b7;
  bottom: 10%; right: 25%;
}

/* ===== SCROLL REVEAL (progressive enhancement) ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===== MOBILE MENU ===== */
#mobile-menu {
  animation: slideDown 0.25s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}