* {
        font-family: "Inter", sans-serif;
      }
      html {
        scroll-behavior: smooth;
      }
      .gradient-text {
        background: linear-gradient(135deg, #f59e0b, #f97316);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .scroll-reveal {
        opacity: 1;
        transform: translateY(0);
      }

      .social-icon {
        transition: all 0.3s ease;
      }

      .social-icon:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(245, 158, 11, 0.3);
      }

      .contact-info-item {
        transition: all 0.3s ease;
      }

      .contact-info-item:hover {
        transform: translateX(10px);
      }

      .gradient-text {
        background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .hero-bg {
        background: linear-gradient(
          135deg,
          #0f172a 0%,
          #1e293b 50%,
          #334155 100%
        );
      }

      .card-glow {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05),
          0 10px 25px -5px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
      }

      .card-glow:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.1),
          0 20px 40px -10px rgba(245, 158, 11, 0.1);
          scale: 1.03;
      }

      .scroll-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
      }

      .floating {
        animation: float 6s ease-in-out infinite;
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-20px);
        }
      }

      .nav-blur {
        backdrop-filter: blur(20px);
        background: rgba(15, 23, 42, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .skill-bar {
        position: relative;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        height: 8px;
        overflow: hidden;
      }

      .skill-progress {
        height: 100%;
        background: linear-gradient(90deg, #f59e0b, #f97316);
        border-radius: 10px;
        transition: width 2s ease-in-out;
      }