/* ── Base ── */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { overflow-x: hidden; }

  /* ── Selection ── */
  ::selection { background: rgba(192, 88, 74, 0.3); color: #f6f6f7; }

  /* ── Scrollbar ── */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: #1e1e23; }
  ::-webkit-scrollbar-thumb { background: #34343b; border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: #c0584a; }

  /* ── Reveal Animations (progressive enhancement) ── */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Fallback: always visible if JS disabled */
  .reveal { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(24px); }
  }

  /* ── Navbar ── */
  #navbar {
    background: transparent;
  }
  #navbar.scrolled {
    background: rgba(19, 19, 23, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(52, 52, 59, 0.5);
  }
  #navbar.scrolled .nav-link { color: #c3c3cc; }
  #navbar.scrolled .menu-line { background: #c3c3cc; }

  /* ── Mobile Menu ── */
  #mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
  }
  #mobile-menu.closed {
    opacity: 0;
    pointer-events: none;
  }

  /* ── Menu Button Animation ── */
  #menu-btn.active .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(3px, 3px);
  }
  #menu-btn.active .menu-line:nth-child(2) {
    opacity: 0;
  }
  #menu-btn.active .menu-line:nth-child(3) {
    width: 24px;
    transform: rotate(-45deg) translate(3px, -3px);
  }

  /* ── Service Cards ── */
  .service-card {
    transition: background 0.3s ease;
  }
  .service-card:hover {
    background: rgba(42, 42, 48, 0.5);
  }

  /* ── Form Inputs ── */
  input:focus, select:focus, textarea:focus {
    border-color: #c0584a !important;
  }

  /* ── Smooth anchor offset ── */
  section[id] {
    scroll-margin-top: 80px;
  }

  /* ── Gallery hover overlay ── */
  .group:hover img {
    transform: scale(1.05);
  }
  .group img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* ── About accent shapes ── */
  .aspect-\[4\/5\] {
    position: relative;
  }

  /* ── Mobile link transitions ── */
  .mobile-link {
    transition: opacity 0.3s ease;
  }
  #mobile-menu.open .mobile-link {
    opacity: 1;
  }
  #mobile-menu.closed .mobile-link {
    opacity: 0;
  }