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

  /* ── Scroll Reveal ── */
  .scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  .scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
  .scroll-reveal:nth-child(3) { transition-delay: 0.2s; }
  .scroll-reveal:nth-child(4) { transition-delay: 0.3s; }
  .scroll-reveal:nth-child(5) { transition-delay: 0.35s; }
  .scroll-reveal:nth-child(6) { transition-delay: 0.4s; }

  /* ── Navbar ── */
  #navbar {
    transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  }
  #navbar.scrolled {
    background: rgba(253, 248, 240, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(123, 74, 140, 0.08);
  }

  /* ── Hero Gradient ── */
  .hero-gradient {
    background: linear-gradient(135deg, #7B4A8C 0%, #5e3a6b 35%, #4a2f55 60%, #3a2642 100%);
  }

  /* ── Hero Animations ── */
  @keyframes float1 {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(-8deg) translateY(-14px); }
  }
  @keyframes float2 {
    0%, 100% { transform: rotate(5deg) translateY(0); }
    50% { transform: rotate(5deg) translateY(-10px); }
  }
  @keyframes float3 {
    0%, 100% { transform: rotate(12deg) translateY(0); }
    50% { transform: rotate(12deg) translateY(-12px); }
  }
  @keyframes float4 {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-8px); }
  }
  .hero-float-1 { animation: float1 6s ease-in-out infinite; }
  .hero-float-2 { animation: float2 5s ease-in-out infinite 0.5s; }
  .hero-float-3 { animation: float3 7s ease-in-out infinite 1s; }
  .hero-float-4 { animation: float4 5.5s ease-in-out infinite 0.3s; }

  @keyframes heroTitle {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .hero-title { animation: heroTitle 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.2s; opacity: 0; }
  .hero-sub { animation: heroTitle 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.45s; opacity: 0; }
  .hero-badge { animation: heroTitle 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.1s; opacity: 0; }
  .hero-cta { animation: heroTitle 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.65s; opacity: 0; }
  .hero-scroll { animation: heroFade 1s ease forwards; animation-delay: 1.2s; opacity: 0; }

  /* ── Service Cards ── */
  .service-card {
    border: 1px solid rgba(123, 74, 140, 0.06);
  }
  .service-card:hover {
    border-color: rgba(123, 74, 140, 0.15);
  }

  /* ── Gallery ── */
  .gallery-item {
    cursor: pointer;
  }
  .gallery-item:hover img {
    transform: scale(1.05);
  }

  /* ── Mobile Menu ── */
  #mobileMenu.open {
    opacity: 1;
    pointer-events: auto;
  }
  #mobileMenu.closed {
    opacity: 0;
    pointer-events: none;
  }
  .menu-line.active:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  .menu-line.active:nth-child(2) {
    opacity: 0;
  }
  .menu-line.active:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
    width: 5rem;
  }

  /* ── Mobile Links ── */
  .mobile-link {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  #mobileMenu.open .mobile-link {
    opacity: 1;
    transform: translateY(0);
  }
  #mobileMenu.open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
  #mobileMenu.open .mobile-link:nth-child(2) { transition-delay: 0.1s; }
  #mobileMenu.open .mobile-link:nth-child(3) { transition-delay: 0.15s; }
  #mobileMenu.open .mobile-link:nth-child(4) { transition-delay: 0.2s; }

  /* ── Focus Styles ── */
  input:focus, select:focus, textarea:focus {
    outline: none;
  }

  /* ── Selection ── */
  ::selection {
    background: rgba(123, 74, 140, 0.15);
    color: #3a2642;
  }
</style>