body {
      background: #fff;
    }
    .pastel-card {
      background: linear-gradient(120deg, #f0fdf4 0%, #d1fae5 100%);
    }
    .scrollup {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 50;
      background: #000000;
      color: #fff;
      border-radius: 9999px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      padding: 0.75rem 1rem;
      cursor: pointer;
      transition: background 0.85s, opacity 0.85s;
    }
    .scrollup:hover {
      background: #34d399;
      opacity: 1;
    }
    .video-bg {
      position: fixed;
      top: 0; left: 0; width: 100vw; height: 100vh;
      object-fit: cover;
      z-index: 0;
      opacity: 0.80;
      pointer-events: none;
    }
    .content-on-video {
      position: relative;
      z-index: 1;
    }
    .hero-section {
      /*
      background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
      */
      background-size: cover;
      background-position: center;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
    }
    .fade-in {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 1s ease, transform 1s ease;
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .slide-left {
      opacity: 0;
      transform: translateX(-100px);
      transition: opacity 1.2s ease, transform 1.2s ease;
    }
    .slide-left.visible {
      opacity: 1;
      transform: translateX(0);
    }
    .slide-right {
      opacity: 0;
      transform: translateX(100px);
      transition: opacity 1.2s ease, transform 1.2s ease;
    }
    .slide-right.visible {
      opacity: 1;
      transform: translateX(0);
    }
    .scale-in {
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 1s ease, transform 1s ease;
    }
    .scale-in.visible {
      opacity: 1;
      transform: scale(1);
    }

      .hero-section h1 {
      text-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 1px 0 #fff;
      animation: hero-pop 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both;
    }
    .hero-section h2, .hero-section p, .hero-section a {
      text-shadow: 0 2px 12px rgba(0,0,0,0.35);
      color: #fff !important;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
    }
    .hero-section h2 {
      font-weight: 700;
      letter-spacing: 1px;
    }
    .hero-section p {
      font-size: 1.5rem;
      font-weight: 500;
    }
    @keyframes hero-pop {
      0% {
        opacity: 0;
        transform: scale(0.85) translateY(40px);
      }
      80% {
        opacity: 1;
        transform: scale(1.05) translateY(-8px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

  @layer utilities {
    .animate-fade-in {
      animation: fade-in 0.8s ease-out forwards;
    }
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }