<style>
    /* --- SHABANG 2.0: Ultra-Modern, Animated, and Vibrant About Page --- */
    
    /* Font and base */
    html, body {
      font-family: 'Inter', 'Montserrat', 'Fira Mono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      background: linear-gradient(135deg, #10151c 0%, #232323 60%, #0a0a0a 100%);
      min-height: 100vh;
      color: #fff;
      scroll-behavior: smooth;
      overflow-x: hidden;
    }
    
    /* Animated background overlay */
    body::before {
      content: "";
      position: fixed;
      z-index: -1;
      inset: 0;
      background: linear-gradient(120deg, #1e293b 0%, #232323 50%, #10151c 100%);
      animation: gradientMove 12s ease-in-out infinite alternate;
      opacity: 0.7;
    }
    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }
    
    /* Fade page transitions */
    .fade-page {
      opacity: 1;
      transition: opacity 0.35s cubic-bezier(.4,0,.2,1);
    }
    .fade-page.fade-out {
      opacity: 0;
    }
    
    /* NAVBAR */
    header {
      animation: fadeDown 1.2s cubic-bezier(.4,0,.2,1);
    }
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-32px);}
      to { opacity: 1; transform: none;}
    }
    .nav-link {
      position: relative;
      overflow: hidden;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: color 0.2s;
    }
    .nav-link .nav-underline {
      display: block;
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, #a78bfa 0%, #22d3ee 50%, #22c55e 100%);
      border-radius: 2px;
      box-shadow: 0 2px 8px #22d3ee55;
      transition: width 0.3s cubic-bezier(.4,0,.2,1), left 0.3s cubic-bezier(.4,0,.2,1);
    }
    .nav-link:hover .nav-underline,
    .nav-link:focus .nav-underline {
      width: 100%;
      left: 0;
    }
    .nav-link.border-b-2 {
      box-shadow: 0 2px 16px 0 #22d3ee55;
      color: #22d3ee !important;
    }
    
    /* Discord dropdown */
    #discordDropdown.dropdown-hidden {
      display: none;
    }
    #discordDropdown.dropdown-visible {
      display: block;
      animation: fadeInDropdown 0.3s;
    }
    @keyframes fadeInDropdown {
      from { opacity: 0; transform: translateY(-10px);}
      to { opacity: 1; transform: none;}
    }
    
    /* Main Title with Neon Glow and Sparkle */
    .main-title {
      font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
      font-size: 3rem;
      font-weight: 900;
      letter-spacing: -0.04em;
      /* Remove text-shadow and animation */
      text-shadow: none;
      animation: none;
      position: relative;
      display: inline-block;
    }
    
    /* Subtitle */
    .main-subtitle {
      font-family: 'Fira Mono', 'Montserrat', monospace, sans-serif;
      font-size: 1.3rem;
      letter-spacing: 0.04em;
      text-shadow: 0 2px 8px rgba(34,197,94,0.15);
      color: #a3e635;
      margin-bottom: 2rem;
    }
    
    /* Card grid with animated border and pop-in */
    .main-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2.5rem;
      margin: 3rem 0;
    }
    .main-grid > div {
      position: relative;
      z-index: 1;
      overflow: hidden;
      border-radius: 1.25rem;
      background: rgba(25, 25, 34, 0.85);
      border: 2px solid transparent;
      box-shadow: 0 8px 32px 0 rgba(34,197,94,0.10), 0 2px 8px rgba(0,0,0,0.25);
      animation: popIn 1s cubic-bezier(.4,0,.2,1) both;
      transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s;
    }
    .main-grid > div::before {
      content: "";
      position: absolute;
      inset: -3px;
      z-index: -1;
      border-radius: 1.25rem;
      /* Remove conic-gradient and animation */
      background: none;
      filter: none;
      opacity: 0;
      animation: none;
    }
    .main-grid > div:hover {
      transform: translateY(-10px) scale(1.035) rotate(-1deg);
      box-shadow: 0 16px 48px 0 rgba(34,197,94,0.18), 0 2px 12px 0 rgba(0,0,0,0.18);
      border-color: #22d3ee;
    }
    @keyframes popIn {
      0% { opacity: 0; transform: scale(0.95) translateY(32px);}
      100% { opacity: 1; transform: scale(1) translateY(0);}
    }
    
    /* Timeline dots and lines */
    .timeline-dot, .w-8.h-8.rounded-full {
      border: 3px solid transparent;
      background-clip: padding-box;
      box-shadow: none;
      animation: none;
    }
    .timeline-gradient {
      background: linear-gradient(180deg, #22d3ee 0%, #a78bfa 50%, #22c55e 100%);
      animation: gradientMove 4s linear infinite;
    }
    
    /* Section titles */
    .section-title {
      font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-shadow: 0 2px 8px rgba(34,197,94,0.10);
      font-size: 2rem;
      margin-bottom: 1.5rem;
      color: #a78bfa;
    }
    
    /* Buttons and links */
    a[class*="bg-gradient-to-r"], #backToTop {
      box-shadow: 0 4px 24px 0 #22d3ee55, 0 2px 8px #a78bfa33;
      border: none;
      font-weight: 700;
      letter-spacing: 0.03em;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    a[class*="bg-gradient-to-r"]:hover, #backToTop:hover {
      transform: scale(1.07) rotate(-2deg);
      box-shadow: 0 8px 32px 0 #a78bfa88, 0 2px 8px #22d3ee55;
    }
    
    /* Back to Top button */
    #backToTop {
      position: fixed;
      bottom: 32px;
      right: 32px;
      z-index: 50;
      background: linear-gradient(90deg, #22d3ee 0%, #a78bfa 100%);
      color: #fff;
      border-radius: 50%;
      width: 52px;
      height: 52px;
      box-shadow: 0 4px 24px 0 rgba(34,197,94,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s, transform 0.2s;
    }
    #backToTop.show {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* Footer: animated gradient bar and polish */
    footer {
      border-top: none;
      background: #18181b;
      box-shadow: 0 -8px 32px 0 rgba(34,197,94,0.10), 0 -2px 8px rgba(0,0,0,0.25);
      position: relative;
    }
    footer::before {
      display: none;
    }
    
    /* Fade-in for main content */
    main > section {
      animation: fadeInMain 1.2s cubic-bezier(.4,0,.2,1);
    }
    @keyframes fadeInMain {
      from { opacity: 0; transform: translateY(32px);}
      to { opacity: 1; transform: none;}
    }
    
    /* Accessibility focus */
    button:focus, a:focus, input:focus {
      outline: 2px solid #22d3ee;
      outline-offset: 2px;
    }
    button:focus-visible, a:focus-visible, input:focus-visible {
      outline: 3px solid #a78bfa;
      outline-offset: 2px;
    }
    
    /* Responsive tweaks */
    @media (max-width: 900px) {
      .main-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
      }
      main > section {
        padding: 0 0.5rem;
      }
    }
    @media (max-width: 640px) {
      .main-title { font-size: 2.2rem !important; }
      .main-subtitle { font-size: 1.1rem !important; }
      .main-grid { gap: 1.2rem !important; }
      .section-title { font-size: 1.5rem !important; }
      .w-8.h-8.rounded-full {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1.25rem !important;
      }
      header, nav, footer {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
      }
    }
    
    /* Mobile nav dropdown animation and visibility */
    #mobile-nav-dropdown.open {
      opacity: 1 !important;
      transform: scale(1) translateY(0);
      pointer-events: auto;
    }
    #mobile-nav-backdrop.open {
      opacity: 1 !important;
      pointer-events: auto;
    }
    
    /* Modal: Responsive for mobile */
    #workForModal .max-w-md {
      max-width: 95vw;
      width: 95vw;
      padding: 1.5rem 0.5rem;
    }
    @media (max-width: 640px) {
      #workForModal .max-w-md {
        max-width: 99vw;
        width: 99vw;
        padding: 1rem 0.25rem;
        min-height: 60vh;
        max-height: 90vh;
        overflow-y: auto;
      }
      #workForModal h3 {
        font-size: 1.2rem !important;
      }
      #workForModal ul li span {
        font-size: 0.95rem !important;
      }
      #closeWorkForModal {
        top: 0.5rem !important;
        right: 0.5rem !important;
        font-size: 2.2rem !important;
        padding: 0.25rem 0.5rem !important;
      }
    }
    
    /* Make modal close button easier to tap */
    #closeWorkForModal {
      min-width: 2.5rem;
      min-height: 2.5rem;
      font-size: 2rem;
      line-height: 2rem;
      padding: 0.25rem 0.75rem;
      border-radius: 0.75rem;
    }
    
    /* Grid: Reduce gap and padding on mobile */
    @media (max-width: 640px) {
      .main-grid {
        gap: 0.7rem !important;
        padding: 0 !important;
      }
      main > section {
        padding: 0 0.2rem !important;
      }
    }
    
    /* Navbar and footer: prevent squish */
    @media (max-width: 640px) {
      header, nav, footer {
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
      }
      footer .max-w-6xl {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: stretch !important;
      }
    }
    
    /* Modal: Make sure content is scrollable if needed */
    #workForModal .max-w-md {
      max-height: 90vh;
      overflow-y: auto;
    }
  </style>