/* ===== BASE ===== */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; }
  img { max-width: 100%; height: auto; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; margin: 0; padding: 0; }

  /* ===== NAVBAR ===== */
  #navbar {
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  }
  #navbar.scrolled {
    background: rgba(253, 252, 250, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(10, 38, 24, 0.08);
  }
  #navbar.scrolled .font-display { color: #0f3621 !important; }
  #navbar.scrolled .nav-link { color: #1a5c3a !important; }
  #navbar.scrolled .nav-link:hover { background: #d0e5d8 !important; color: #0f3621 !important; }

  /* ===== FLOATING CARDS ===== */
  @keyframes float1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(1deg); }
  }
  @keyframes float2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-1deg); }
  }
  @keyframes float3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(0.5deg); }
  }
  @keyframes float4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(-0.5deg); }
  }
  .floating-card-1 { animation: float1 5s ease-in-out infinite; }
  .floating-card-2 { animation: float2 6s ease-in-out infinite 0.5s; }
  .floating-card-3 { animation: float3 4.5s ease-in-out infinite 1s; }
  .floating-card-4 { animation: float4 5.5s ease-in-out infinite 0.3s; }

  /* ===== REVEAL ANIMATIONS (below-fold only, progressive enhancement) ===== */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal:nth-child(2) { transition-delay: 0.1s; }
    .reveal:nth-child(3) { transition-delay: 0.2s; }
    .reveal:nth-child(4) { transition-delay: 0.3s; }
  }
  /* When JS is disabled or reduced motion is preferred, content stays visible */
  @media not all and (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 1; transform: none; }
  }
  html.no-js .reveal,
  .js .reveal { /* JS-enabled: animation handled by script */ }
  html.no-js .reveal { opacity: 1; transform: none; }

  /* ===== 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:hover { background: #eaf3ed !important; color: #0f3621 !important; }

  /* ===== SCROLLBAR ===== */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #faf6ee; }
  ::-webkit-scrollbar-thumb { background: #a5ccb0; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #72af82; }

  /* ===== SELECTION ===== */
  ::selection { background: #d0e5d8; color: #0f3621; }