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

/* === GEOMETRIC SHAPES === */
.geo-shape { position: absolute; pointer-events: none; }

.geo-circle-1 {
  width: 500px; height: 500px;
  background: rgba(212, 160, 23, 0.06);
  border-radius: 50%;
  top: -100px; left: -150px;
}
.geo-circle-2 {
  width: 300px; height: 300px;
  background: rgba(13, 27, 42, 0.04);
  border-radius: 50%;
  bottom: 100px; right: 5%;
}
.geo-circle-3 {
  width: 600px; height: 600px;
  background: rgba(212, 160, 23, 0.05);
  border-radius: 50%;
  bottom: -200px; right: -100px;
}
.geo-square-1 {
  width: 120px; height: 120px;
  background: rgba(212, 160, 23, 0.08);
  top: 20%; right: 8%;
  transform: rotate(15deg);
}
.geo-square-2 {
  width: 200px; height: 200px;
  background: rgba(212, 160, 23, 0.04);
  top: 10%; left: 5%;
  transform: rotate(-10deg);
}
.geo-triangle {
  width: 0; height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 140px solid rgba(212, 160, 23, 0.07);
  top: 30%; right: 3%;
  transform: rotate(20deg);
}
.geo-dots {
  width: 120px; height: 120px;
  background-image: radial-gradient(circle, rgba(13,27,42,0.12) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  bottom: 15%; left: 5%;
}

/* === DIAGONAL CLIP === */
.clip-diagonal {
  clip-path: polygon(30% 0%, 100% 0, 100% 100%, 0% 100%);
}

/* === NAVBAR === */
#navbar {
  background: rgba(250, 248, 240, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(13, 27, 42, 0.06);
}
#navbar.scrolled {
  box-shadow: 0 4px 30px rgba(13, 27, 42, 0.08);
}

/* === MOBILE MENU === */
.menu-line { transition: all 0.3s ease; }
#menuBtn.active .menu-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#menuBtn.active .menu-line:nth-child(2) { opacity: 0; }
#menuBtn.active .menu-line:nth-child(3) { width: 24px; transform: rotate(-45deg) translate(5px, -5px); }
#mobileMenu.open { opacity: 1; pointer-events: all; }
.mobile-link { transition: all 0.2s ease; }

/* === SERVICE CARDS === */
.service-card { cursor: default; }

/* === SCROLL ANIMATIONS === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* === HERO IMAGE ANIMATION === */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floating { animation: float 4s ease-in-out infinite; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .clip-diagonal { clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%); }
}

/* === FOCUS STYLES === */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #d4a017;
  outline-offset: 2px;
}