@import url('https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&family=Space+Grotesk:wght@400;500;600;700&display=swap');
    * { font-family: 'Inter', 'Space Grotesk', system-ui, sans-serif; }
    html { scroll-behavior: smooth; }

    /* subtle vertical line background + animation */
    body {
      background-color: #0c0a1a;
      position: relative;
    }
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background-image: repeating-linear-gradient(
        to right,
        transparent,
        transparent 49px,
        rgba(168, 85, 247, 0.08) 49px,
        rgba(168, 85, 247, 0.08) 50px
      );
      animation: softLineGlow 6s infinite alternate ease-in-out;
    }

    /* second softer line variant for depth */
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background-image: repeating-linear-gradient(
        to right,
        transparent,
        transparent 99px,
        rgba(217, 70, 239, 0.05) 99px,
        rgba(217, 70, 239, 0.05) 100px
      );
      animation: softLineGlowAlt 8s infinite alternate ease-in-out;
    }

    @keyframes softLineGlow {
      0% { opacity: 0.3; }
      50% { opacity: 0.7; }
      100% { opacity: 0.4; }
    }
    @keyframes softLineGlowAlt {
      0% { opacity: 0.2; }
      70% { opacity: 0.6; }
      100% { opacity: 0.3; }
    }

    /* existing animations */
    @keyframes fadeUp {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-up {
      animation: fadeUp 0.7s ease-out forwards;
    }

    @keyframes softPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.02); }
    }
    .pulse-subtle {
      animation: softPulse 4s infinite ease-in-out;
    }

    .card-hover {
      transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.4s, border-color 0.2s;
    }
    .card-hover:hover {
      transform: translateY(-8px) scale(1.01);
      border-color: #a78bfa;
      box-shadow: 0 30px 40px -20px rgba(139, 92, 246, 0.5);
    }

    .skill-tag {
      transition: all 0.2s;
    }
    .skill-tag:hover {
      background: #2e1a4a;
      color: #e9d5ff;
      border-color: #a78bfa;
    }

    .glow-input:focus {
      box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
      border-color: #c084fc;
    }

    /* keep content above lines */
    .relative-z {
      position: relative;
      z-index: 10;
    }

    .project-image-hero {
      width: 100%;
      /* aspect-ratio: 16/9; */
      border-radius: 2rem;
      background: linear-gradient(145deg, #2a2050, #1a1238);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 6rem;
      border: 1px solid #4f3f8a;
      margin-bottom: 2.5rem;
    }