html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #FFFFFF;
    }

    h1,
    h2,
    h3,
    .font-heading {
      font-family: 'Poppins', sans-serif;
    }

    .text-gradient {
      background: linear-gradient(90deg, #5B4FE5, #7C6CF6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* Navbar */
    .glass-nav {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .nav-link {
      position: relative;
      padding-bottom: 6px;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, #5B4FE5, #7C6CF6);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      transform: scaleX(1);
    }

    .nav-link.active {
      color: #5B4FE5;
    }

    #mobileMenu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    #mobileMenu.open {
      max-height: 420px;
    }

    /* Button ripple */
    .btn-ripple {
      position: relative;
      overflow: hidden;
    }

    .ripple-span {
      position: absolute;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.55);
      transform: scale(0);
      animation: ripple 0.6s ease-out;
      pointer-events: none;
    }

    @keyframes ripple {
      to {
        transform: scale(3);
        opacity: 0;
      }
    }

    /* Hero blobs */
    .hero-blur-shape {
      position: absolute;
      border-radius: 9999px;
      filter: blur(60px);
      opacity: 0.55;
    }

    .fade-up {
      opacity: 0;
      transform: translateY(24px);
      animation: fadeUp 0.8s ease forwards;
    }

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

    /* Performance optimization - reduce animation duration for faster feel */
    .fade-up {
      animation-duration: 0.5s;
    }

    /* Floating dots */
    .float-dot {
      position: absolute;
      border-radius: 9999px;
      background: #8B7EF5;
      animation: floatDot 4.5s ease-in-out infinite;
    }

    @keyframes floatDot {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-14px);
      }
    }

    /* Photo card — shows the full image, no cropping mask */
    .photo-frame {
      border-radius: 40px;
      overflow: hidden;
      background: #DED9FD;
    }

    /* Gentle floating animation - faster for snappier feel */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Optional: slightly stronger hover lift */
#parallaxCard:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
}

    /* Soft ambient glow behind the photo card, same hue as the photo's own background */
    .photo-glow {
      background: radial-gradient(circle at 50% 42%,
          rgba(222, 217, 253, 0.9) 0%,
          rgba(196, 187, 250, 0.55) 45%,
          rgba(196, 187, 250, 0.18) 68%,
          rgba(196, 187, 250, 0) 82%);
    }

    /* Dashed accent ring for a bit of polish behind the card */
    .accent-ring {
      border: 2px dashed rgba(124, 108, 246, 0.35);
      border-radius: 48px;
    }

    #parallaxCard {
      transition: transform 0.1s ease-out;
    }

    /* Scroll indicator */
    .mouse-scroll {
      width: 24px;
      height: 38px;
      border: 2px solid #94A3B8;
      border-radius: 9999px;
      position: relative;
    }

    .mouse-scroll::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      width: 4px;
      height: 8px;
      background: #94A3B8;
      border-radius: 9999px;
      transform: translateX(-50%);
      animation: scrollDot 1.6s ease-in-out infinite;
    }

    @keyframes scrollDot {
      0% {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      70% {
        opacity: 0;
        transform: translate(-50%, 10px);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, 0);
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .fade-up,
      .float-dot,
      .mouse-scroll::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }