/* ===== CSS Custom Properties ===== */
  :root {
    --cream: #F6F0E6;
    --cream-light: #FAF7F0;
    --cream-dark: #EDE4D0;
    --emerald: #1A5C3A;
    --emerald-light: #2A7A52;
    --emerald-dark: #0F3D25;
    --emerald-muted: #3A7D5C;
    --gold: #C9A96E;
    --gold-light: #D4BA85;
    --charcoal: #2C2C2C;
    --charcoal-light: #4A4A4A;
  }

  /* ===== Base Styles ===== */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }

  body {
    overflow-x: hidden;
  }

  /* ===== Navigation ===== */
  .nav-link {
    color: var(--charcoal);
  }

  #navbar.scrolled .nav-link {
    color: var(--emerald-dark);
  }

  #navbar.scrolled .logo-text {
    color: var(--emerald-dark);
  }

  /* ===== Hero Animations ===== */
  .hero-tag {
    animation: slideUp 0.8s ease forwards;
  }

  .hero-title {
    animation: slideUp 0.8s 0.2s ease forwards;
    opacity: 0;
    transform: translateY(30px);
  }

  .hero-subtitle {
    animation: slideUp 0.8s 0.4s ease forwards;
    opacity: 0;
    transform: translateY(30px);
  }

  .hero-cta {
    animation: slideUp 0.8s 0.5s ease forwards;
    opacity: 0;
    transform: translateY(30px);
  }

  .hero-stats {
    animation: slideUp 0.8s 0.6s ease forwards;
    opacity: 0;
    transform: translateY(30px);
  }

  @keyframes slideUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ===== Floating Card Animation ===== */
  .floating-card {
    animation: float 4s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  /* ===== Section Animations (below fold only) ===== */
  .section-tag {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .section-title {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
  }

  .service-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  /* ===== Mobile Menu ===== */
  .mobile-link {
    color: var(--emerald-dark);
    transition: opacity 0.3s ease;
  }

  /* ===== Service Cards ===== */
  .service-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(26, 92, 58, 0.1);
  }

  /* ===== Clip Diagonal ===== */
  .clip-diagonal {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 0% 100%);
  }

  /* ===== Responsive ===== */
  @media (max-width: 768px) {
    html {
      scroll-padding-top: 60px;
    }

    .hero-title {
      font-size: 3.5rem;
    }

    .floating-card {
      position: relative;
      bottom: auto;
      left: auto;
      margin-top: 1rem;
      max-width: 100%;
    }
  }

  @media (max-width: 480px) {
    .hero-title {
      font-size: 2.8rem;
    }
  }