body {
      margin: 0;
      min-height: 100vh;
      font-family: 'Fira Mono', monospace;
      background: linear-gradient(120deg, #1a0536 0%, #3a0ca3 40%, #72026c 70%, #0a2647 100%);
      color: #fff;
      overflow-x: hidden;
      position: relative;
    }
    .gradient-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .gradient-sphere {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
    }
    .sphere-1 {
      width: 40vw;
      height: 40vw;
      background: linear-gradient(40deg, rgba(255, 0, 128, 0.8), rgba(255, 102, 0, 0.4));
      top: -10%;
      left: -10%;
      animation: float-1 15s ease-in-out infinite alternate;
    }
    .sphere-2 {
      width: 45vw;
      height: 45vw;
      background: linear-gradient(240deg, rgba(72, 0, 255, 0.8), rgba(0, 183, 255, 0.4));
      bottom: -20%;
      right: -10%;
      animation: float-2 18s ease-in-out infinite alternate;
    }
    .sphere-3 {
      width: 30vw;
      height: 30vw;
      background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3));
      top: 60%;
      left: 20%;
      animation: float-3 20s ease-in-out infinite alternate;
    }
    @keyframes float-1 {
      0% { transform: translate(0, 0) scale(1);}
      100% { transform: translate(10%, 10%) scale(1.1);}
    }
    @keyframes float-2 {
      0% { transform: translate(0, 0) scale(1);}
      100% { transform: translate(-10%, -5%) scale(1.15);}
    }
    @keyframes float-3 {
      0% { transform: translate(0, 0) scale(1); opacity: 0.3;}
      100% { transform: translate(-5%, 10%) scale(1.05); opacity: 0.6;}
    }
    .noise-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      opacity: 0.05;
      z-index: 2;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    }
    .grid-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      z-index: 1;
    }
    .glow {
      position: absolute;
      width: 40vw;
      height: 40vh;
      background: radial-gradient(circle, rgba(72, 0, 255, 0.15), transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      animation: pulse 8s infinite alternate;
      filter: blur(30px);
    }
    @keyframes pulse {
      0% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9);}
      100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1);}
    }
    .particles-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 3;
      pointer-events: none;
    }
    .particle {
      position: absolute;
      background: white;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }
    nav {
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 20;
      padding: 2.5em 0 1em 0;
      background: none;
    }
    .navbar-gradient {
      display: flex;
      gap: 2.5em;
    }
    .navbar-gradient a {
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      font-size: 1.13em;
      letter-spacing: 1px;
      position: relative;
      opacity: 0.92;
      transition: 
        color 0.22s cubic-bezier(.4,0,.2,1), 
        opacity 0.2s, 
        text-shadow 0.3s cubic-bezier(.4,0,.2,1);
      padding: 0.32em 1.1em;
      border-radius: 10px;
      background: none;
      box-shadow: none;
      outline: none;
      display: inline-flex;
      align-items: center;
      gap: 0.22em;
    }
    .nav-hash {
      color: #ffd86b;
      transition: color 0.22s cubic-bezier(.4,0,.2,1);
      font-weight: 900;
    }
    .navbar-gradient a:hover,
    .navbar-gradient a:focus {
      color: #ffd86b;
      opacity: 1;
      text-shadow:
        0 0 10px #ffd86b,
        0 0 20px #ffd86b99;
    }
    .navbar-gradient a:hover .nav-hash,
    .navbar-gradient a:focus .nav-hash {
      color: #fff;
      text-shadow:
        0 0 10px #fff,
        0 0 20px #ffd86b99;
    }
    @media (max-width: 600px) {
      nav { padding: 1.1em 0 0.7em 0; }
      .navbar-gradient { gap: 1.2em; }
    }
    .slash {
      display: none;
    }
    .center-content {
      position: relative;
      z-index: 10;
      min-height: 70vh;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 2em 2em 2em 7vw;
      max-width: 700px;
    }
    .hello {
      font-size: 2.3em;
      font-weight: 700;
      margin-bottom: 0.3em;
      min-height: 2.7em;
      color: #ffd86b;
      letter-spacing: 0.5px;
    }
    .desc {
      font-size: 1.15em;
      margin-top: 0.3em;
      margin-bottom: 1.5em;
      opacity: 0.93;
      line-height: 1.7;
      max-width: 500px;
    }
    .status {
      font-size: 1em;
      margin-top: 1.5em;
      padding: 0.7em 1.2em;
      background: rgba(255,255,255,0.08);
      border-radius: 8px;
      color: #ffd86b;
      display: inline-block;
      font-weight: 500;
      letter-spacing: 0.5px;
    }
    .links {
      margin-top: 2em;
      display: flex;
      gap: 1em;
      flex-wrap: wrap;
    }
    .links a {
      color: #ffd86b;
      background: rgba(255,255,255,0.07);
      padding: 0.5em 1.2em;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: background 0.2s, color 0.2s, transform 0.2s;
      border: 1px solid transparent;
    }
    .links a:hover {
      background: #ffd86b;
      color: #2a5298;
      transform: translateY(-2px);
    }
    /* Resume button specific styling */
    .resume-btn {
      background: linear-gradient(135deg, #ffd86b, #ffb347) !important;
      color: #2a5298 !important;
      border: 1px solid #ffd86b !important;
      box-shadow: 0 4px 15px rgba(255, 216, 107, 0.3);
      position: relative;
      overflow: hidden;
    }
    .resume-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s;
    }
    .resume-btn:hover::before {
      left: 100%;
    }
    .resume-btn:hover {
      background: linear-gradient(135deg, #ffb347, #ffd86b) !important;
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(255, 216, 107, 0.4);
    }
    @media (max-width: 600px) {
      .center-content { padding: 2em 1em 2em 1em; }
      .hello { font-size: 1.3em; }
      .desc { font-size: 1em; }
      .links { flex-direction: column; align-items: flex-start; }
    }
    nav {
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}

nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-40px);
}