:root {
      --pink: #ff4b91;
      --yellow: #ffd900;
      --dark: #0f0f12;
      --mid: #16161b;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Outfit', sans-serif;
      background:black ;
      color: #e6e6e8;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* NAVBAR SCROLL */
    header.shrink {
      background: rgba(22,22,27,0.8);
      backdrop-filter: blur(12px);
      padding-top: .4rem;
      padding-bottom: .4rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    /* Buttons */
    .btn {
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(255,255,255,0.06);
    }
    .btn:active {
      transform: translateY(0);
      box-shadow: 0 0 0 rgba(0,0,0,0);
    }

    /* Elegant scroll animation */
    @keyframes fadeSlideIn {
      from {
        opacity: 0;
        transform: translateY(24px);
        filter: blur(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    [data-aos].aos-animate {
      animation: fadeSlideIn 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Card hover */
    .card {
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      background: var(--mid);
      border: 1px solid rgba(255,255,255,0.05);
    }
    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 24px rgba(0,0,0,0.3);
      border-color: rgba(255,255,255,0.08);
    }

    /* Image hover */
    .img-hover {
      transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .img-hover:hover { transform: scale(1.05); }