/* ─── Base & Typography ─── */
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    overflow-x: hidden;
  }

  ::selection {
    background: #D698DB;
    color: #1E0A1E;
  }

  /* ─── Navbar ─── */
  #navbar {
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  }

  #navbar.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(79, 32, 79, 0.08);
  }

  #navbar.nav-scrolled .font-display {
    color: #321332 !important;
  }

  /* ─── Hero ─── */
  .hero-bg {
    will-change: transform;
  }

  .hero-img {
    transform: scale(1.05);
    transition: transform 8s ease-out;
  }

  .hero-loaded .hero-img {
    transform: scale(1);
  }

  .hero-overlay {
    background: linear-gradient(
      135deg,
      rgba(30, 10, 30, 0.82) 0%,
      rgba(79, 32, 79, 0.72) 50%,
      rgba(50, 19, 50, 0.85) 100%
    );
  }

  .hero-badge {
    animation: fadeInDown 0.8s ease-out both;
  }

  .hero-scroll-indicator {
    animation: bounce 2s ease-in-out infinite;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
    50% { transform: translate(-50%, 8px); opacity: 1; }
  }

  /* ─── Scroll Reveal ─── */
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(30px);
    }

    .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; }
  }

  /* ─── Service Cards ─── */
  .service-card {
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .service-card:hover {
    transform: translateY(-4px);
  }

  /* ─── Mobile Menu ─── */
  #mobile-menu {
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-link {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(109, 47, 109, 0.08);
  }

  .mobile-link:last-child {
    border-bottom: none;
  }

  .mobile-link:hover {
    color: #D4943A;
  }

  /* ─── Decorative Elements ─── */
  .hero-decor {
    animation: float 6s ease-in-out infinite;
  }

  .hero-decor-2 {
    animation-delay: -3s;
    animation-duration: 8s;
  }

  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.05); }
  }

  /* ─── Accessibility ─── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    html {
      scroll-behavior: auto;
    }
  }

  /* ─── Focus Styles ─── */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid #D4943A;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ─── Scrollbar ─── */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #F9F0FB;
  }
  ::-webkit-scrollbar-thumb {
    background: #D698DB;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #C06FC4;
  }