/* ===== BASE / RESET ===== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { min-height: 100vh; overflow-x: hidden; }
  a { text-decoration: none; color: inherit; }
  img { max-width: 100%; display: block; }
  button { cursor: pointer; border: none; background: none; font-family: inherit; }

  /* ===== NAVBAR ===== */
  .navbar { transition: box-shadow 0.3s ease; }
  .navbar.scrolled { box-shadow: 0 4px 20px rgba(5, 152, 105, 0.12); }

  /* ===== HERO DECORATIVE SHAPES ===== */
  .hero-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
  .hero-circle.c1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(110, 231, 183, 0.25) 0%, transparent 70%);
    top: -80px; left: -120px;
  }
  .hero-circle.c2 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(245, 224, 168, 0.4) 0%, transparent 70%);
    bottom: 10%; right: 5%;
  }
  .hero-triangle {
    position: absolute;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 80px 80px;
    border-color: transparent transparent rgba(5, 152, 105, 0.15) transparent;
    top: 18%; right: 8%;
    transform: rotate(25deg);
  }
  .hero-dots {
    position: absolute;
    bottom: 15%; left: 6%;
    display: grid;
    grid-template-columns: repeat(4, 8px);
    gap: 10px;
    opacity: 0.4;
  }
  .hero-dots span {
    width: 8px; height: 8px;
    background: #059669;
    border-radius: 50%;
  }

  /* ===== SERVICE CARDS ===== */
  .service-card {
    border: 1px solid rgba(5, 152, 105, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .service-card:hover {
    border-color: rgba(5, 152, 105, 0.3);
    box-shadow: 0 12px 40px rgba(5, 152, 105, 0.12);
  }

  /* ===== MOBILE MENU ===== */
  #mobileMenu {
    animation: slideDown 0.25s ease-out;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .mobile-link {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
  }
  .mobile-link:hover {
    background: rgba(5, 152, 105, 0.08);
  }

  /* ===== 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);
    }
    .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; }
  }

  /* ===== BACK TO TOP ===== */
  #backToTop.show {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 640px) {
    .hero-circle.c1 { width: 240px; height: 240px; }
    .hero-circle.c2 { width: 160px; height: 160px; }
    .hero-triangle { border-width: 0 0 50px 50px; top: 12%; right: 5%; }
  }