/* main: #8fddc3
small: #d5ede5 */

        @font-face {
          font-family: 'acorn';
          src: url(acorn.woff);
        }

        /* Preloader */
        /* ===== ULTIMATE PRELOADER DESIGN ===== */
        .preloader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 999999;
          transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
          overflow: hidden;
          cursor: wait;
        }

        /* Simple animated background for desktop */
        @media (min-width: 769px) {
          .preloader::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
              radial-gradient(ellipse 800px 400px at 30% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
              radial-gradient(ellipse 600px 300px at 70% 70%, rgba(16, 185, 129, 0.12) 0%, transparent 55%),
              radial-gradient(ellipse 400px 200px at 50% 20%, rgba(255, 107, 157, 0.1) 0%, transparent 50%);
            animation: simpleNebula 15s ease-in-out infinite;
            filter: blur(1px);
          }
        }

        .preloader.fade-out {
          opacity: 0;
          visibility: hidden;
          transform: scale(1.1);
        }

        .preloader-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 30px;
          position: relative;
          z-index: 10;
          transform: scale(0.9);
          animation: simpleContentEntry 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Simple energy field for desktop only */
        @media (min-width: 769px) {
          .preloader-content::before {
            content: '';
            position: absolute;
            top: -100px;
            left: -100px;
            width: 200px;
            height: 200px;
            background:
              conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.3), transparent, rgba(16, 185, 129, 0.2), transparent, rgba(255, 107, 157, 0.15), transparent),
              radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            animation: simpleEnergyField 10s linear infinite;
            z-index: -1;
            filter: blur(2px);
          }
        }

        /* Simple elegant preloader */
        .preloader-loader {
          position: relative;
          width: 120px;
          height: 120px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* Simple spinning ring */
        .loader-ring {
          position: absolute;
          width: 100%;
          height: 100%;
          border: 3px solid transparent;
          border-top: 3px solid #8fddc3;
          border-radius: 50%;
          animation: simpleSpin 1.5s linear infinite;
        }

        .loader-ring:nth-child(2) {
          width: 80%;
          height: 80%;
          border-top-color: #d5ede5;
          animation-duration: 1.2s;
          animation-direction: reverse;
        }

        .loader-ring:nth-child(3) {
          width: 60%;
          height: 60%;
          border-top-color: #59d4ff;
          animation-duration: 0.9s;
        }

        /* Simple pulse dot in center */
        .loader-core {
          width: 20px;
          height: 20px;
          background: linear-gradient(135deg, #8fddc3, #d5ede5);
          border-radius: 50%;
          animation: simplePulse 2s ease-in-out infinite;
          box-shadow: 0 0 20px rgba(143, 221, 195, 0.6);
        }

        /* Simple floating elements for desktop only */
        @media (min-width: 769px) {
          .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }

          .shape {
            position: absolute;
            opacity: 0.4;
            animation: simpleFloat 6s ease-in-out infinite;
          }

          .shape-1 {
            top: 20%;
            left: 10%;
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.15));
            border-radius: 50%;
            animation-delay: 0s;
          }

          .shape-2 {
            top: 60%;
            right: 15%;
            width: 25px;
            height: 25px;
            background: linear-gradient(135deg, rgba(255, 107, 157, 0.25), rgba(139, 92, 246, 0.2));
            border-radius: 50%;
            animation-delay: 2s;
          }

          .shape-3 {
            bottom: 30%;
            left: 20%;
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.15));
            border-radius: 50%;
            animation-delay: 4s;
          }
        }



        .preloader-text {
          color: #8fddc3;
          font-family: 'acorn', sans-serif;
          font-size: 2rem;
          font-weight: 700;
          letter-spacing: 0.2em;
          text-shadow: 0 0 30px rgba(143, 221, 195, 0.8);
          animation: simpleTextGlow 3s ease-in-out infinite;
          position: relative;
          text-transform: uppercase;
        }

        /* Neon text effect */
        .preloader-text::before {
          content: attr(data-text);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
          background-size: 200% 100%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: ultimateNeonShimmer 3s linear infinite;
          z-index: 1;
        }

        /* Animated dots after text */
        .preloader-text::after {
          content: '...';
          position: absolute;
          right: -40px;
          top: 0;
          color: #8fddc3;
          -webkit-text-fill-color: #8fddc3;
          animation: preloaderDots 1.5s ease-in-out infinite;
          font-size: 1.5rem;
        }

        .preloader-text::before {
          content: attr(data-text);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: preloaderShimmer 3s ease-in-out infinite;
          z-index: 1;
        }

        .preloader-text::after {
          content: '';
          position: absolute;
          top: -5px;
          left: -10px;
          right: -10px;
          bottom: -5px;
          background: radial-gradient(ellipse, rgba(143, 221, 195, 0.1) 0%, transparent 70%);
          border-radius: 20px;
          animation: preloaderTextHalo 4s ease-in-out infinite;
          z-index: -1;
        }

        /* ===== ULTIMATE LOADER ===== */
        .ultimate-loader {
          position: relative;
          width: 120px;
          height: 120px;
          margin-top: 40px;
        }

        .loader-ring {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 3px solid transparent;
          border-radius: 50%;
          animation: loaderRingRotate 2s linear infinite;
        }

        .loader-ring:nth-child(1) {
          border-top-color: rgba(59, 130, 246, 0.8);
          animation-duration: 1.5s;
          animation-direction: normal;
        }

        .loader-ring:nth-child(2) {
          border-right-color: rgba(16, 185, 129, 0.8);
          animation-duration: 2s;
          animation-direction: reverse;
        }

        .loader-ring:nth-child(3) {
          border-bottom-color: rgba(255, 107, 157, 0.8);
          animation-duration: 2.5s;
          animation-direction: normal;
        }

        .loader-core {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 30px;
          height: 30px;
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(16, 185, 129, 0.9), rgba(255, 107, 157, 0.9));
          border-radius: 50%;
          transform: translate(-50%, -50%);
          animation: loaderCorePulse 1s ease-in-out infinite;
          box-shadow:
            0 0 20px rgba(59, 130, 246, 0.8),
            0 0 40px rgba(16, 185, 129, 0.6),
            0 0 60px rgba(255, 107, 157, 0.4);
        }

        .loader-particles {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        .loader-particles .particle {
          position: absolute;
          width: 4px;
          height: 4px;
          background: linear-gradient(135deg, #3b82f6, #10b981, #ff6b9d);
          border-radius: 50%;
          animation: particleOrbit 3s linear infinite;
        }

        .loader-particles .particle:nth-child(1) {
          top: 0;
          left: 50%;
          animation-delay: 0s;
          animation-duration: 2s;
        }

        .loader-particles .particle:nth-child(2) {
          top: 25%;
          right: 0;
          animation-delay: 0.25s;
          animation-duration: 2.5s;
        }

        .loader-particles .particle:nth-child(3) {
          bottom: 25%;
          right: 0;
          animation-delay: 0.5s;
          animation-duration: 2.2s;
        }

        .loader-particles .particle:nth-child(4) {
          bottom: 0;
          left: 50%;
          animation-delay: 0.75s;
          animation-duration: 2.8s;
        }

        .loader-particles .particle:nth-child(5) {
          bottom: 25%;
          left: 0;
          animation-delay: 1s;
          animation-duration: 2.3s;
        }

        .loader-particles .particle:nth-child(6) {
          top: 25%;
          left: 0;
          animation-delay: 1.25s;
          animation-duration: 2.6s;
        }

        .loader-particles .particle:nth-child(7) {
          top: 50%;
          right: 0;
          animation-delay: 1.5s;
          animation-duration: 2.1s;
        }

        .loader-particles .particle:nth-child(8) {
          top: 50%;
          left: 0;
          animation-delay: 1.75s;
          animation-duration: 2.4s;
        }

        @keyframes pulse {

          0%,
          100% {
            opacity: 1;
            transform: scale(1);
          }

          50% {
            opacity: 0.7;
            transform: scale(1.05);
          }
        }

        @keyframes ultimateProgressFill {
          0% {
            width: 0%;
          }

          10% {
            width: 15%;
          }

          25% {
            width: 35%;
          }

          40% {
            width: 55%;
          }

          60% {
            width: 75%;
          }

          80% {
            width: 90%;
          }

          95% {
            width: 98%;
          }

          100% {
            width: 100%;
          }
        }

        @keyframes ultimateProgressShimmer {
          0% {
            transform: translateX(-100%);
          }

          100% {
            transform: translateX(100%);
          }
        }

        @keyframes ultimateProgressPulse {

          0%,
          100% {
            opacity: 0.8;
            transform: translate(-50%, -50%) scale(1);
          }

          50% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.2);
          }
        }

        @keyframes preloaderPulse {

          0%,
          100% {
            opacity: 0.3;
            transform: scale(1);
          }

          50% {
            opacity: 0.6;
            transform: scale(1.1);
          }
        }

        @keyframes preloaderRotate {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes preloaderFloat {

          0%,
          100% {
            transform: translateY(0px) scale(1);
          }

          50% {
            transform: translateY(-10px) scale(1.02);
          }
        }

        @keyframes preloaderRing {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes preloaderTextGlow {

          0%,
          100% {
            text-shadow: 0 0 20px rgba(143, 221, 195, 0.6);
            transform: scale(1);
          }

          50% {
            text-shadow: 0 0 30px rgba(143, 221, 195, 0.8), 0 0 40px rgba(143, 221, 195, 0.4);
            transform: scale(1.05);
          }
        }

        @keyframes preloaderShimmer {
          0% {
            transform: translateX(-100%);
          }

          100% {
            transform: translateX(100%);
          }
        }

        @keyframes progressShimmer {
          0% {
            transform: translateX(-100%);
          }

          100% {
            transform: translateX(100%);
          }
        }

        @keyframes preloaderAmbient {

          0%,
          100% {
            opacity: 0.4;
            transform: scale(1) rotate(0deg);
          }

          33% {
            opacity: 0.7;
            transform: scale(1.1) rotate(120deg);
          }

          66% {
            opacity: 0.5;
            transform: scale(0.9) rotate(240deg);
          }
        }

        @keyframes preloaderRotation {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes preloaderContentEntry {
          0% {
            transform: scale(0.5) translateY(50px);
            opacity: 0;
          }

          50% {
            transform: scale(1.05) translateY(-10px);
            opacity: 0.8;
          }

          100% {
            transform: scale(1) translateY(0);
            opacity: 1;
          }
        }

        @keyframes preloaderGlow {

          0%,
          100% {
            filter:
              drop-shadow(0 0 30px rgba(143, 221, 195, 0.7)) saturate(1.2) brightness(1.1);
          }

          50% {
            filter:
              drop-shadow(0 0 50px rgba(143, 221, 195, 0.9)) saturate(1.4) brightness(1.3);
          }
        }

        @keyframes preloaderOrbit {
          0% {
            transform: rotate(0deg) scale(1);
          }

          50% {
            transform: rotate(180deg) scale(1.1);
          }

          100% {
            transform: rotate(360deg) scale(1);
          }
        }

        @keyframes preloaderTextGradient {

          0%,
          100% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }
        }

        @keyframes preloaderTextHalo {

          0%,
          100% {
            opacity: 0.3;
            transform: scale(1);
          }

          50% {
            opacity: 0.6;
            transform: scale(1.1);
          }
        }

        @keyframes preloaderProgressGlow {

          0%,
          100% {
            opacity: 0.5;
            transform: scale(1);
          }

          50% {
            opacity: 0.8;
            transform: scale(1.02);
          }
        }

        @keyframes progressPulse {

          0%,
          100% {
            opacity: 0.8;
            transform: translate(-50%, -50%) scale(1);
          }

          50% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.5);
          }
        }

        /* New advanced animations */
        @keyframes preloaderStars {
          0% {
            transform: translateY(0) rotate(0deg);
          }

          100% {
            transform: translateY(-100px) rotate(360deg);
          }
        }

        @keyframes preloaderOrbFloat {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.3;
          }

          25% {
            transform: translate(20px, -30px) scale(1.1);
            opacity: 0.6;
          }

          50% {
            transform: translate(-15px, -20px) scale(0.9);
            opacity: 0.4;
          }

          75% {
            transform: translate(25px, 10px) scale(1.05);
            opacity: 0.7;
          }
        }

        @keyframes preloaderDots {

          0%,
          20% {
            opacity: 0;
            transform: translateY(0);
          }

          40% {
            opacity: 1;
            transform: translateY(-5px);
          }

          60% {
            opacity: 0.7;
            transform: translateY(0);
          }

          80%,
          100% {
            opacity: 0;
            transform: translateY(0);
          }
        }

        @keyframes preloaderProgressParticles {
          0% {
            transform: translateX(-100%);
          }

          100% {
            transform: translateX(100%);
          }
        }

        @keyframes preloaderRing {
          0% {
            transform: rotate(0deg) scale(1);
            opacity: 0.8;
          }

          50% {
            transform: rotate(180deg) scale(1.1);
            opacity: 1;
          }

          100% {
            transform: rotate(360deg) scale(1);
            opacity: 0.8;
          }
        }

        @keyframes preloaderOrbit {
          0% {
            transform: rotate(0deg) scale(1);
            opacity: 0.4;
          }

          50% {
            transform: rotate(180deg) scale(1.2);
            opacity: 0.7;
          }

          100% {
            transform: rotate(360deg) scale(1);
            opacity: 0.4;
          }
        }

        /* Reset and Base Styles */
        * {
          box-sizing: border-box;
        }

        html,
        body {
          overflow-x: hidden !important;
          width: 100vw;
          max-width: 100vw;
        }

        body {
          margin: 0;
          font-family: 'Poppins', sans-serif;
          line-height: 1.6;
          overflow-x: hidden;
          transition: all 0.3s ease;
          max-width: 100vw;
        }

        /* Hide main content until preloader is done */
        body:not(.page-loaded) .tunnel-wrapper,
        body:not(.page-loaded) header,
        body:not(.page-loaded) section,
        body:not(.page-loaded) footer {
          opacity: 0;
          visibility: hidden;
        }

        body.page-loaded .tunnel-wrapper,
        body.page-loaded header,
        body.page-loaded section,
        body.page-loaded footer {
          opacity: 1;
          visibility: visible;
          transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        body::selection {
          background: #8fddc3;
          color: #302b63;
        }



        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
          max-width: 100vw;
          box-sizing: border-box;
        }

        /* Scroll Progress Bar */
        .scroll-progress {
          position: fixed;
          top: 0;
          left: 0;
          width: 0%;
          height: 3px;
          background: linear-gradient(90deg, #8fddc3, #d5ede5);
          z-index: 9999;
          transition: width 0.1s ease;
        }

        /* Particle Effects */
        .particle-container {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1;
          opacity: 0;
          transition: opacity 1s ease;
        }

        body.page-loaded .particle-container {
          opacity: 1;
        }

        .particle {
          position: absolute;
          width: 4px;
          height: 4px;
          background: rgba(143, 221, 195, 0.6);
          border-radius: 50%;
          animation: none;
          opacity: 0;
        }

        body.page-loaded .particle {
          animation: float 20s linear;
        }

        @keyframes float {
          0% {
            transform: translateY(100vh) rotate(0deg);
            opacity: 0;
          }

          5% {
            opacity: 0.8;
          }

          15% {
            opacity: 1;
          }

          85% {
            opacity: 1;
          }

          95% {
            opacity: 0.6;
          }

          100% {
            transform: translateY(-100px) rotate(360deg);
            opacity: 0;
          }
        }



        /* Notifications */
        .notification {
          position: fixed;
          top: 20px;
          right: 20px;
          padding: 15px 25px;
          background: rgba(143, 221, 195, 0.95);
          color: #302b63;
          border-radius: 10px;
          box-shadow: 0 10px 30px rgba(143, 221, 195, 0.3);
          transform: translateX(400px);
          transition: transform 0.3s ease;
          z-index: 10000;
          backdrop-filter: blur(10px);
          border: 1px solid rgba(143, 221, 195, 0.3);
        }

        .notification.show {
          transform: translateX(0);
        }

        .notification-success {
          background: rgba(143, 221, 195, 0.95);
          color: #302b63;
        }

        .notification-error {
          background: rgba(255, 107, 107, 0.95);
          color: white;
        }

        /* Tunnel Background */
        .tunnel-wrapper {
          position: fixed;
          width: 100%;
          height: 100vh;
          overflow: hidden;
          z-index: -1;
          opacity: 0;
          transition: opacity 1s ease;
          inset: 0;
        }

        body.page-loaded .tunnel-wrapper {
          opacity: 1;
        }

        .tunnel {
          position: absolute;
          width: 200vmax;
          height: 200vmax;
          border-radius: 50%;
          background: repeating-radial-gradient(circle, #302b63 0px, #252054 40px, #2a2a4a 80px);
          animation: none;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        body.page-loaded .tunnel {
          animation: spinTunnel 10s linear infinite;
        }

        /* Navigation */
        header {
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 1000;
          background: rgba(48, 43, 99, 0.1);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(143, 221, 195, 0.2);
          transition: all 0.3s ease;
          opacity: 0;
          transform: translateY(-20px);
        }

        body.page-loaded header {
          opacity: 1;
          transform: translateY(0);
        }

        header.scrolled {
          background: rgba(48, 43, 99, 0.95);
          backdrop-filter: blur(20px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem 1.5rem;
          max-width: 1200px;
          margin: 0 auto;
        }

        .nav-brand {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          transition: transform 0.3s ease;
        }

        /* Hover effects only on devices that support hover */
        @media (hover: hover) {
          .nav-brand:hover {
            transform: scale(1.05);
          }
        }

        .nav-logo {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          transition: transform 0.3s ease;
        }

        @media (hover: hover) {
          .nav-brand:hover .nav-logo {
            transform: rotate(360deg);
          }
        }

        .nav-name {
          font-family: 'acorn', sans-serif;
          font-size: 1.5rem;
          color: #8fddc3;
          font-weight: 700;
        }

        .nav-links {
          display: flex;
          gap: 2rem;
          align-items: center;
        }

        .nav-link {
          color: #8fddc3;
          text-decoration: none;
          font-weight: 500;
          position: relative;
          transition: color 0.3s ease;
        }

        /* Hover effects only on devices that support hover */
        @media (hover: hover) {
          .nav-link:hover {
            color: #d5ede5;
          }
        }


        .nav-link::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 0;
          height: 2px;
          background: #8fddc3;
          transition: width 0.3s ease;
        }

        @media (hover: hover) {
          .nav-link:hover::after {
            width: 100%;
          }
        }

        .nav-toggle {
          display: none;
          flex-direction: column;
          gap: 4px;
        }

        .nav-toggle span {
          width: 25px;
          height: 3px;
          background: #8fddc3;
          transition: all 0.3s ease;
        }

        @media (hover: hover) {
          .nav-toggle:hover span {
            background: #d5ede5;
          }
        }

        .nav-toggle.active span:nth-child(1) {
          transform: rotate(45deg) translate(5px, 5px);
        }

        .nav-toggle.active span:nth-child(2) {
          opacity: 0;
        }

        .nav-toggle.active span:nth-child(3) {
          transform: rotate(-45deg) translate(7px, -6px);
        }

        /* Hero Section */
        .hero {
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          padding: 2rem 1rem;
          overflow: hidden;
        }

        .hero-content {
          text-align: center;
          max-width: 90vw;
          width: 100%;
          opacity: 1;
          transform: translateY(0);
          transition: all 0.8s ease;
          position: relative;
          z-index: 1;
          padding: 0 1rem;
        }

        body.page-loaded .hero-content {
          opacity: 1;
          transform: translateY(0);
        }

        /* Smooth loading animations */
        .hero-content>* {
          opacity: 0;
          transform: translateY(30px);
          transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.page-loaded .hero-content>* {
          opacity: 1;
          transform: translateY(0);
        }

        /* Navigation animation */
        header {
          opacity: 0;
          transform: translateY(-20px);
          transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.page-loaded header {
          opacity: 1;
          transform: translateY(0);
        }

        /* Section animations */
        section {
          opacity: 0;
          transform: translateY(50px);
          transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
        }

        /* Gradient border for sections */
        section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg,
              transparent 0%,
              rgba(143, 221, 195, 0.3) 25%,
              rgba(213, 237, 229, 0.5) 50%,
              rgba(255, 107, 157, 0.3) 75%,
              transparent 100%);
          z-index: 1;
        }

        body.page-loaded section {
          opacity: 1;
          transform: translateY(0);
        }

        /* Star animations */
        .star1,
        .star2 {
          opacity: 0;
          transform: scale(0.8) rotate(180deg);
          transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.page-loaded .star1,
        body.page-loaded .star2 {
          opacity: 1;
          transform: scale(1) rotate(0deg);
        }

        /* Button animations */
        .btn {
          opacity: 0;
          transform: scale(0.8) translateY(20px);
          transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        body.page-loaded .btn {
          opacity: 1;
          transform: scale(1) translateY(0);
        }

        /* Project card animations */
        .project-card {
          opacity: 0;
          transform: translateY(40px) scale(0.95);
          transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.page-loaded .project-card {
          opacity: 1;
          transform: translateY(0) scale(1);
        }

        /* Skill bar animations */
        .skill-progress {
          transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Stat animations */
        .stat {
          opacity: 0;
          transform: scale(0.8);
          transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.page-loaded .stat {
          opacity: 1;
          transform: scale(1);
        }

        /* Contact item animations */
        .contact-item {
          opacity: 0;
          transform: translateX(-30px);
          transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.page-loaded .contact-item {
          opacity: 1;
          transform: translateX(0);
        }

        /* Footer animation */
        footer {
          opacity: 0;
          transform: translateY(30px);
          transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.page-loaded footer {
          opacity: 1;
          transform: translateY(0);
        }

        /* Scroll indicator animation */
        .scroll-indicator {
          opacity: 0;
          transform: translateY(20px);
          transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.page-loaded .scroll-indicator {
          opacity: 1;
          transform: translateY(0);
        }

        /* Smooth hover animations */
        .nav-link {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .project-card {
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .skill-item {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .contact-item {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Smooth scroll behavior */
        html {
          scroll-behavior: smooth;
        }

        /* Loading state animations */
        .loading-fade-in {
          animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Staggered animation delays */
        .stagger-1 {
          animation-delay: 0.1s;
        }

        .stagger-2 {
          animation-delay: 0.2s;
        }

        .stagger-3 {
          animation-delay: 0.3s;
        }

        .stagger-4 {
          animation-delay: 0.4s;
        }

        .stagger-5 {
          animation-delay: 0.5s;
        }

        /* Hero heading styles */
        .hero h1.hi {
          color: #8fddc3;
          font-size: clamp(4rem, 10vw, 8rem);
          letter-spacing: -0.01em;
          font-family: 'acorn', sans-serif;
          font-weight: 700;
          display: block;
          margin: 5rem 0 0.5rem 0;
          --animate-duration: 3s;
          text-shadow: 0 0 15px rgba(143, 221, 195, 0.4);
          line-height: 1;
          white-space: nowrap;
          transform: translateX(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        .hero h2.a {
          color: #8fddc3;
          font-size: clamp(3.5rem, 9vw, 7rem);
          letter-spacing: -0.02em;
          font-family: 'acorn', sans-serif;
          font-weight: 700;
          display: block;
          margin: 0 0 2rem 0;
          --animate-duration: 3s;
          text-shadow: 0 0 15px rgba(143, 221, 195, 0.4);
          line-height: 1;
          white-space: nowrap;
          transform: translateX(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        /* Legacy span styles for backward compatibility */
        .hi {
          color: #8fddc3;
          font-size: clamp(4rem, 10vw, 8rem);
          letter-spacing: -0.01em;
          font-family: 'acorn', sans-serif;
          font-weight: 700;
          display: block;
          margin: 0 0 0.5rem 0;
          --animate-duration: 3s;
          text-shadow: 0 0 30px rgba(143, 221, 195, 0.3);
          line-height: 1;
          white-space: nowrap;
        }

        .a {
          color: #8fddc3;
          font-size: clamp(3.5rem, 9vw, 7rem);
          letter-spacing: -0.02em;
          font-family: 'acorn', sans-serif;
          font-weight: 700;
          display: block;
          margin: 0 0 2rem 0;
          --animate-duration: 3s;
          text-shadow: 0 0 30px rgba(143, 221, 195, 0.3);
          line-height: 1.2;
          white-space: normal;
          word-wrap: break-word;
          overflow-wrap: break-word;
          hyphens: auto;
        }

        /* Typing text specific styles for better responsiveness */
        .typing-text {
          display: inline-block;
          min-width: 0;
          word-break: break-word;
          overflow-wrap: break-word;
        }

        .hero-subtitle {
          font-size: clamp(1rem, 2.5vw, 1.5rem);
          color: #d5ede5;
          margin-bottom: 2rem;
          font-weight: 300;
          --animate-duration: 2s;
          opacity: 0.9;
          max-width: 600px;
          margin-left: auto;
          margin-right: auto;
          line-height: 1.4;
          text-shadow: 0 0 10px rgba(213, 237, 229, 0.3);
        }

        .hero-buttons {
          display: flex;
          gap: 1rem;
          justify-content: center;
          flex-wrap: wrap;
          margin-top: 2rem;
        }

        .btn {
          padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
          font-family: 'Poppins', sans-serif;
          font-size: clamp(0.875rem, 2vw, 1rem);
          font-weight: 600;
          border: none;
          border-radius: 50px;
          transition: all 0.3s ease;
          text-decoration: none;
          display: inline-block;
          letter-spacing: 1px;
          position: relative;
          overflow: hidden;
          white-space: nowrap;
        }

        .btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: left 0.5s ease;
        }

        @media (hover: hover) {
          .btn:hover::before {
            left: 100%;
          }
        }

        .btn-primary {
          background: linear-gradient(135deg, #8fddc3 0%, #d5ede5 100%);
          color: #302b63;
          box-shadow: 0 8px 32px rgba(143, 221, 195, 0.3);
          text-align: center;
        }

        @media (hover: hover) {
          .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(143, 221, 195, 0.4);
          }
        }

        .btn-secondary {
          background: transparent;
          color: #8fddc3;
          border: 2px solid #8fddc3;
        }

        @media (hover: hover) {
          .btn-secondary:hover {
            background: #8fddc3;
            color: #302b63;
            transform: translateY(-3px);
          }
        }

        .star1,
        .star2 {
          height: clamp(2.5rem, 5vw, 3.5rem);
          width: clamp(2.5rem, 5vw, 3.5rem);
          --animate-duration: 2s;
          animation: none;
          filter: drop-shadow(0 0 10px rgba(143, 221, 195, 0.5));
          position: absolute;
          z-index: 2;
          opacity: 0;
          transform: scale(0.5);
          transition: opacity 0.8s ease, transform 0.8s ease;
        }

        body.page-loaded .star1,
        body.page-loaded .star2 {
          opacity: 1;
          transform: scale(1);
        }

        body.page-loaded .star1 {
          animation: twinkle 3s ease-in-out infinite;
        }

        body.page-loaded .star2 {
          animation: twinkle 3s ease-in-out infinite 1.5s;
        }

        .star1 {
          top: 20%;
          left: 5%;
        }

        .star2 {
          top: 80%;
          right: 8%;
        }

        .scroll-indicator {
          position: absolute;
          bottom: 2rem;
          left: 50%;
          transform: translateX(-50%);
          animation: none;
          z-index: 3;
          opacity: 0;
          transition: opacity 0.8s ease;
        }

        body.page-loaded .scroll-indicator {
          opacity: 1;
          animation: bounce 2s infinite;
        }

        .scroll-arrow {
          width: clamp(1rem, 2vw, 1.5rem);
          height: clamp(1rem, 2vw, 1.5rem);
          border-right: 2px solid #8fddc3;
          border-bottom: 2px solid #8fddc3;
          transform: rotate(45deg);
          transition: all 0.3s ease;
        }

        @media (hover: hover) {
          .scroll-indicator:hover .scroll-arrow {
            border-color: #d5ede5;
            transform: rotate(45deg) scale(1.2);
          }
        }

        /* Section Styles */
        section {
          padding: 100px 0;
          position: relative;
          opacity: 0;
          transform: translateY(50px);
          transition: all 0.8s ease;
        }

        body.page-loaded section {
          opacity: 1;
          transform: translateY(0);
        }

        section.animate__fadeIn {
          opacity: 1;
          transform: translateY(0);
        }

        .section-title {
          color: #8fddc3;
          font-size: 80px;
          font-family: 'acorn', sans-serif;
          text-align: center;
          margin-bottom: 60px;
          font-weight: 700;
          text-shadow: 0 0 30px rgba(143, 221, 195, 0.3);
          transform: translateY(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        /* About Section */
        .about-content {
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: 60px;
          align-items: center;
        }

        .about-text {
          color: #d5ede5;
          transform: translateX(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        .about-image {
          display: flex;
          justify-content: center;
          transform: translateX(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        .desc {
          font-size: 24px;
          color: #d5ede5;
          margin-bottom: 30px;
          font-weight: 400;
          line-height: 1.8;
          --animate-duration: 2s;
          transform: translateX(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        .about-desc {
          font-size: 18px;
          color: #d5ede5;
          margin-bottom: 40px;
          line-height: 1.8;
          transform: translateX(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        .about-stats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
        }

        .stat {
          text-align: center;
          padding: 20px;
          background: rgba(143, 221, 195, 0.1);
          border-radius: 15px;
          border: 1px solid rgba(143, 221, 195, 0.2);
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
        }

        @media (hover: hover) {
          .stat:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(143, 221, 195, 0.2);
            border-color: rgba(143, 221, 195, 0.4);
          }
        }

        .stat-number {
          display: block;
          font-size: 36px;
          font-weight: 700;
          color: #8fddc3;
          font-family: 'acorn', sans-serif;
        }

        .stat-label {
          font-size: 14px;
          color: #d5ede5;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .about-image {
          display: flex;
          justify-content: center;
        }

        .image-placeholder {
          width: 300px;
          height: 300px;
          border-radius: 50%;
          background: linear-gradient(135deg, rgba(143, 221, 195, 0.2), rgba(213, 237, 229, 0.1));
          border: 3px solid rgba(143, 221, 195, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
        }

        .image-placeholder::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(45deg, transparent, rgba(143, 221, 195, 0.1), transparent);
          transform: rotate(45deg);
          animation: none;
        }

        body.page-loaded .image-placeholder::before {
          animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
          0% {
            transform: translateX(-100%) translateY(-100%) rotate(45deg);
          }

          100% {
            transform: translateX(100%) translateY(100%) rotate(45deg);
          }
        }

        @media (hover: hover) {
          .image-placeholder:hover {
            transform: scale(1.05);
            box-shadow: 0 20px 40px rgba(143, 221, 195, 0.3);
          }
        }

        .image-placeholder i {
          font-size: 80px;
          color: #8fddc3;
          z-index: 1;
        }

        /* Skills Section */
        .skills-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
          gap: 60px;
          transform: translateY(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        .skill-category h3 {
          color: #8fddc3;
          font-size: 28px;
          margin-bottom: 30px;
          font-family: 'acorn', sans-serif;
          text-shadow: 0 0 20px rgba(143, 221, 195, 0.3);
          transform: translateY(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        .skill-items {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .skill-item {
          background: rgba(143, 221, 195, 0.1);
          padding: 20px;
          border-radius: 10px;
          border: 1px solid rgba(143, 221, 195, 0.2);
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
        }

        @media (hover: hover) {
          .skill-item:hover {
            transform: translateX(10px);
            background: rgba(143, 221, 195, 0.2);
            border-color: rgba(143, 221, 195, 0.4);
          }
        }

        .skill-name {
          display: block;
          color: #d5ede5;
          font-weight: 600;
          margin-bottom: 10px;
        }

        .skill-bar {
          height: 8px;
          background: rgba(213, 237, 229, 0.2);
          border-radius: 4px;
          overflow: hidden;
          position: relative;
        }

        .skill-progress {
          height: 100%;
          background: linear-gradient(90deg, #8fddc3, #d5ede5);
          border-radius: 4px;
          transition: width 2s ease;
          position: relative;
        }

        .skill-progress.animate-progress {
          animation: progressGlow 2s ease;
        }

        @keyframes progressGlow {
          0% {
            box-shadow: 0 0 5px rgba(143, 221, 195, 0.5);
          }

          50% {
            box-shadow: 0 0 20px rgba(143, 221, 195, 0.8);
          }

          100% {
            box-shadow: 0 0 5px rgba(143, 221, 195, 0.5);
          }
        }

        /* Projects Section */
        .projects-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: 40px;
          transform: translateY(0);
          transition: transform 0.1s ease;
          will-change: transform;
        }

        .project-card {
          background: rgba(143, 221, 195, 0.1);
          border-radius: 20px;
          overflow: hidden;
          border: 1px solid rgba(143, 221, 195, 0.2);
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
          position: relative;
          transform: translateX(0);
          transition: transform 0.1s ease, all 0.3s ease;
          will-change: transform;
        }

        /* Gradient border effect for project cards */
        .project-card::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 20px;
          padding: 2px;
          background: linear-gradient(135deg,
              rgba(143, 221, 195, 0.6) 0%,
              rgba(213, 237, 229, 0.4) 25%,
              rgba(255, 107, 157, 0.3) 50%,
              rgba(139, 92, 246, 0.4) 75%,
              rgba(143, 221, 195, 0.6) 100%);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          opacity: 0;
          transition: opacity 0.3s ease;
          z-index: 0;
        }

        .project-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, rgba(143, 221, 195, 0.1), rgba(213, 237, 229, 0.1));
          opacity: 0;
          transition: opacity 0.3s ease;
          z-index: 1;
        }

        @media (hover: hover) {
          .project-card:hover::before {
            opacity: 1;
          }

          .project-card:hover::after {
            opacity: 1;
          }

          .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(143, 221, 195, 0.3);
          }
        }



        .project-content {
          padding: 30px;
          position: relative;
          z-index: 2;
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .project-content h3 {
          color: #8fddc3;
          font-size: 24px;
          margin-bottom: 15px;
          font-family: 'acorn', sans-serif;
        }

        .project-content p {
          color: #d5ede5;
          margin-bottom: 20px;
          line-height: 1.6;
          flex-grow: 1;
        }

        .project-tech {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          margin-bottom: 20px;
        }

        .tech-tag {
          padding: 4px 12px;
          background: rgba(143, 221, 195, 0.2);
          color: #8fddc3;
          border-radius: 15px;
          font-size: 12px;
          font-weight: 500;
          transition: all 0.3s ease;
        }

        @media (hover: hover) {
          .tech-tag:hover {
            background: rgba(143, 221, 195, 0.4);
            transform: scale(1.05);
          }
        }

        .project-button {
          margin-top: auto;
          display: flex;
          justify-content: flex-start;
        }

        .project-btn {
          padding: 0.75rem 1.5rem;
          padding-top: 0.75rem !important;
          font-size: 0.9rem;
          font-weight: 600;
          text-decoration: none;
          border-radius: 25px;
          transition: all 0.3s ease;
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: linear-gradient(135deg, #8fddc3 0%, #d5ede5 100%);
          color: #302b63;
          border: 2px solid #8fddc3;
          box-shadow: 0 4px 15px rgba(143, 221, 195, 0.3);
        }

        .project-btn::before {
          content: '🌐';
          font-size: 1rem;
        }

        @media (hover: hover) {
          .project-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(143, 221, 195, 0.4);
            background: linear-gradient(135deg, #d5ede5 0%, #8fddc3 100%);
          }
        }

        @media (hover: none) {
          .project-btn:active {
            transform: translateY(1px);
            box-shadow: 0 2px 10px rgba(143, 221, 195, 0.3);
          }
        }

        /* Locked Project Card Styles */
        .project-card-locked {
          background: rgba(128, 128, 128, 0.1) !important;
          border-color: rgba(128, 128, 128, 0.3) !important;
          opacity: 0.8;
          cursor: not-allowed !important;
        }

        .project-card-locked::before {
          background: linear-gradient(45deg, rgba(128, 128, 128, 0.1), rgba(192, 192, 192, 0.1)) !important;
        }

        .project-card-locked .project-content h3 {
          color: #a0a0a0 !important;
        }

        .project-card-locked .project-content p {
          color: #b0b0b0 !important;
        }

        .tech-tag-locked {
          background: rgba(128, 128, 128, 0.3) !important;
          color: #a0a0a0 !important;
          border: 1px solid rgba(128, 128, 128, 0.4) !important;
        }

        .btn-locked {
          background: linear-gradient(135deg, #808080 0%, #a0a0a0 100%) !important;
          color: #ffffff !important;
          border: 2px solid #808080 !important;
          box-shadow: 0 4px 15px rgba(128, 128, 128, 0.3) !important;
          cursor: not-allowed !important;
          pointer-events: none !important;
        }

        .btn-locked::before {
          content: '🔒' !important;
        }

        @media (hover: hover) {
          .project-card-locked:hover {
            transform: none !important;
            box-shadow: 0 10px 30px rgba(128, 128, 128, 0.2) !important;
          }

          .btn-locked:hover {
            transform: none !important;
            box-shadow: 0 4px 15px rgba(128, 128, 128, 0.3) !important;
          }
        }

        /* Contact Section */
        .contact-content {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 60px;
          max-width: 100%;
          overflow: hidden;
        }

        .contact-info {
          display: flex;
          flex-direction: column;
          gap: 30px;
          min-width: 0;
        }

        .contact-item {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 20px;
          background: rgba(143, 221, 195, 0.1);
          border-radius: 15px;
          border: 1px solid rgba(143, 221, 195, 0.2);
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
          min-width: 0;
          flex-wrap: wrap;
          position: relative;
          overflow: hidden;
        }

        /* Gradient border for contact items */
        .contact-item::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 15px;
          padding: 1px;
          background: linear-gradient(135deg,
              rgba(143, 221, 195, 0.4) 0%,
              rgba(213, 237, 229, 0.3) 50%,
              rgba(143, 221, 195, 0.4) 100%);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          opacity: 0;
          transition: opacity 0.3s ease;
          z-index: 0;
        }

        @media (hover: hover) {
          .contact-item:hover {
            transform: translateX(10px);
            background: rgba(143, 221, 195, 0.2);
            border-color: rgba(143, 221, 195, 0.4);
          }

          .contact-item:hover::after {
            opacity: 1;
          }
        }

        .contact-item i {
          font-size: 24px;
          color: #8fddc3;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(143, 221, 195, 0.2);
          border-radius: 50%;
          transition: all 0.3s ease;
        }

        @media (hover: hover) {
          .contact-item:hover i {
            background: #8fddc3;
            color: #302b63;
            transform: scale(1.1);
          }
        }

        .contact-item h4 {
          color: #8fddc3;
          font-size: 18px;
          margin-bottom: 5px;
          word-wrap: break-word;
        }

        .contact-item p {
          color: #d5ede5;
          font-size: 16px;
          word-wrap: break-word;
          overflow-wrap: break-word;
          hyphens: auto;
          max-width: 100%;
          overflow: hidden;
        }

        .contact-item p[onclick] {
          cursor: pointer;
        }

        .contact-form {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .form-group {
          position: relative;
        }

        .form-group input,
        .form-group textarea {
          width: 100%;
          padding: 15px 20px;
          background: rgba(143, 221, 195, 0.1);
          border: 1px solid rgba(143, 221, 195, 0.3);
          border-radius: 10px;
          color: #d5ede5;
          font-family: 'Poppins', sans-serif;
          font-size: 16px;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
          cursor: text;
        }

        .form-group input:focus,
        .form-group textarea:focus {
          outline: none;
          border-color: #8fddc3;
          box-shadow: 0 0 20px rgba(143, 221, 195, 0.2);
          transform: translateY(-2px);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
          color: rgba(213, 237, 229, 0.6);
        }

        /* Footer */
        .footer {
          background: rgba(48, 43, 99, 0.3);
          border-top: 1px solid rgba(143, 221, 195, 0.2);
          padding: 40px 0 20px;
          backdrop-filter: blur(10px);
        }

        .footer-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30px;
        }

        .footer-brand {
          display: flex;
          align-items: center;
          gap: 10px;
          transition: transform 0.3s ease;
        }

        @media (hover: hover) {
          .footer-brand:hover {
            transform: scale(1.05);
          }
        }

        .footer-logo {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          transition: transform 0.3s ease;
        }

        @media (hover: hover) {
          .footer-brand:hover .footer-logo {
            transform: rotate(360deg);
          }
        }

        .footer-brand span {
          font-family: 'acorn', sans-serif;
          font-size: 20px;
          color: #8fddc3;
          font-weight: 700;
        }

        .social-links {
          display: flex;
          gap: 20px;
        }

        .social-link {
          width: 50px;
          height: 50px;
          background: rgba(143, 221, 195, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #8fddc3;
          text-decoration: none;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
          border: 1px solid rgba(143, 221, 195, 0.3);
        }

        @media (hover: hover) {
          .social-link:hover {
            background: #8fddc3;
            color: #302b63;
            transform: scale(1.1);
          }
        }

        .social-link-discord .discord-username {
          display: none;
          position: absolute;
          left: 50%;
          bottom: 120%;
          transform: translateX(-50%);
          background: rgba(48, 43, 99, 0.95);
          color: #8fddc3;
          padding: 8px 16px;
          border-radius: 8px;
          font-size: 1rem;
          white-space: nowrap;
          box-shadow: 0 4px 16px rgba(48, 43, 99, 0.2);
          z-index: 10;
          border: 1px solid rgba(143, 221, 195, 0.3);
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.2s;
        }

        .social-link-discord .discord-username::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border-width: 7px 7px 0 7px;
          border-style: solid;
          border-color: rgba(48, 43, 99, 0.95) transparent transparent transparent;
          filter: drop-shadow(0 2px 2px rgba(48, 43, 99, 0.2));
        }

        .social-link-discord {
          position: relative;
        }

        @media (hover: none) {
          .social-link-discord .discord-username {
            display: block;
            opacity: 1;
          }
        }

        @media (hover: hover) {
          .social-link-discord:hover .discord-username {
            display: block;
            opacity: 1;
          }
        }

        .footer-bottom {
          text-align: center;
          padding-top: 20px;
          border-top: 1px solid rgba(143, 221, 195, 0.2);
        }

        .footer-bottom p {
          color: #d5ede5;
          font-size: 14px;
        }

        /* Enhanced Animations */
        @keyframes spinTunnel {
          0% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
          }

          50% {
            transform: translate(-50%, -50%) rotate(360deg) scale(1.2);
          }

          100% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
          }
        }

        @keyframes twinkle {

          0%,
          100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
          }

          50% {
            opacity: 0.7;
            transform: scale(1.1) rotate(180deg);
          }
        }

        @keyframes bounce {

          0%,
          20%,
          50%,
          80%,
          100% {
            transform: translateX(-50%) translateY(0);
          }

          40% {
            transform: translateX(-50%) translateY(-10px);
          }

          60% {
            transform: translateX(-50%) translateY(-5px);
          }
        }

        /* Staggered Animation Classes */
        .animate-stagger {
          opacity: 0;
          transform: translateY(30px);
          transition: all 0.6s ease;
        }

        .animate-stagger.animate__fadeInUp {
          opacity: 1;
          transform: translateY(0);
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
          .section-title {
            font-size: clamp(3rem, 8vw, 5rem);
          }

          .about-content {
            grid-template-columns: 1fr;
            gap: 2.5rem;
          }

          .contact-content {
            grid-template-columns: 1fr;
            gap: 2.5rem;
            padding: 0 1rem;
          }

          .star1 {
            top: 15%;
            left: 3%;
          }

          .star2 {
            top: 20%;
            right: 5%;
          }


        }

        @media (max-width: 768px) {
          .nav-links {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(48, 43, 99, 0.98);
            backdrop-filter: blur(20px);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            gap: 2rem;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            z-index: 1000;
          }

          .nav-links.active {
            transform: translateX(0);
          }

          .nav-toggle {
            display: flex;
          }

          .nav-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
          }

          .nav-toggle.active span:nth-child(2) {
            opacity: 0;
          }

          .nav-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
          }

          .nav-link {
            font-size: 1.3rem;
            padding: 2rem 0;
          }

          .hero {
            padding: 1rem 0.5rem;
          }

          .hero-content {
            max-width: 95vw;
            padding: 0 0.5rem;
          }

          .hero-subtitle {
            max-width: 90vw;
          }

          /* Responsive typing text for tablets */
          .a {
            font-size: clamp(2.5rem, 7vw, 5rem);
            line-height: 1.3;
          }

          .typing-text {
            word-break: break-word;
            overflow-wrap: break-word;
          }

          .section-title {
            font-size: clamp(2.5rem, 8vw, 3.5rem);
            margin-bottom: 2.5rem;
          }

          .skill-category h3 {
            font-size: clamp(1.75rem, 5vw, 2.25rem);
            margin-bottom: 1.5rem;
          }

          .about-stats {
            grid-template-columns: 1fr;
          }

          .skills-grid {
            grid-template-columns: 1fr;
          }

          .projects-grid {
            grid-template-columns: 1fr;
          }

          .hero-buttons {
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
          }

          .footer-content {
            flex-direction: column;
            gap: 1.25rem;
          }

          .star1 {
            top: 10%;
            left: 2%;
          }

          .star2 {
            top: 10%;
            right: 3%;
          }



          .contact-item {
            flex-direction: column;
            text-align: center;
            gap: 15px;
            padding: 15px;
          }

          .contact-item i {
            width: 40px;
            height: 40px;
            font-size: 20px;
          }
        }

        @media (max-width: 480px) {
          .container {
            padding: 0 0.75rem;
          }

          .nav {
            padding: 0.75rem 1rem;
          }

          .nav-name {
            font-size: 1.25rem;
          }

          .nav-logo {
            width: 2rem;
            height: 2rem;
          }

          .hero {
            padding: 0.5rem;
          }

          .hero-content {
            max-width: 100vw;
            padding: 0 0.25rem;
          }

          .hero-subtitle {
            max-width: 95vw;
            font-size: clamp(0.875rem, 3vw, 1rem);
          }

          /* Responsive typing text for mobile */
          .a {
            font-size: clamp(2rem, 6vw, 4rem);
            line-height: 1.4;
            margin: 0 0 1.5rem 0;
          }

          .typing-text {
            word-break: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
          }

          .section-title {
            font-size: clamp(2rem, 7vw, 2.5rem);
            margin-bottom: 2rem;
          }

          .skill-category h3 {
            font-size: clamp(1.5rem, 4.5vw, 2rem);
            margin-bottom: 1.25rem;
          }

          .desc {
            font-size: clamp(0.875rem, 3vw, 1rem);
          }

          .about-desc {
            font-size: clamp(0.75rem, 2.5vw, 0.875rem);
          }

          .btn {
            padding: clamp(0.5rem, 3vw, 0.75rem) clamp(1rem, 5vw, 1.5rem);
            font-size: clamp(0.75rem, 3vw, 0.875rem);
          }

          .star1,
          .star2 {
            height: clamp(2rem, 6vw, 2.5rem);
            width: clamp(2rem, 6vw, 2.5rem);
          }

          .star1 {
            visibility: hidden;
          }

          .star2 {
            opacity: 1;
            visibility: hidden;
          }

          .contact-content {
            gap: 1.5rem;
            padding: 0 0.5rem;
          }

          .contact-item {
            padding: 12px;
            gap: 12px;
          }

          .contact-item h4 {
            font-size: 16px;
          }

          .contact-item p {
            font-size: 14px;
          }

          .form-group input,
          .form-group textarea {
            padding: 12px 16px;
            font-size: 14px;
          }

          .contact-form {
            gap: 15px;
          }

          .contact-form .btn {
            width: 100%;
            text-align: center;
          }
        }



        @media (max-width: 450px) {

          body {
            overflow-x: hidden !important;
            overflow-y: auto !important;
            min-height: 100vh !important;
            background: transparent !important;
          }
        }

        html {
          scroll-behavior: smooth;
        }

        html,
        body {
          overflow-x: hidden !important;
          width: 100vw;
          max-width: 100vw;
        }

        body {
          max-width: 100vw;
        }

        .container {
          max-width: 100vw;
          box-sizing: border-box;
        }

        /* Prevent any element from exceeding viewport width */
        * {
          box-sizing: border-box;
        }

        .btn:focus,
        .nav-link:focus,
        input:focus,
        textarea:focus {
          outline: 2px solid #8fddc3;
          outline-offset: 2px;
          box-shadow: 0 0 0 2px #302b63;
        }

        /* Preloader Responsive */
        @media (max-width: 768px) {
          .preloader-loader {
            width: 80px;
            height: 80px;
          }

          .ultimate-loader {
            width: 60px;
            height: 60px;
            margin-top: 15px;
          }

          .preloader-text {
            font-size: 1.5rem;
            letter-spacing: 0.1em;
          }

          .preloader-content {
            gap: 20px;
          }
        }

        @media (max-width: 480px) {
          .preloader-loader {
            width: 60px;
            height: 60px;
          }

          .ultimate-loader {
            width: 50px;
            height: 50px;
            margin-top: 10px;
          }

          .preloader-text {
            font-size: 1.2rem;
            letter-spacing: 0.05em;
          }

          .preloader-content {
            gap: 15px;
          }
        }

        @media (max-width: 1024px) {

          .about-text,
          .about-image,
          .skills-grid,
          .projects-grid,
          .project-card,
          .contact-info,
          .contact-form,
          .section-title,
          .desc,
          .about-desc,
          .stat,
          .skill-category h3,
          .project-content,
          .project-button,
          .stat-number,
          .stat-label,
          .image-placeholder,
          .footer-brand,
          .footer-logo,
          .social-link,
          .star1,
          .star2,
          .scroll-indicator,
          .scroll-arrow,
          .hero h1.hi,
          .hero h2.a,
          .hero-content,
          section,
          .container {
            transform: none !important;
          }
        }

        /* Beautiful Custom Cursor */
        .custom-cursor {
          position: fixed;
          width: 16px;
          height: 16px;
          background: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #8b5cf6 100%);
          border: 2px solid rgba(255, 255, 255, 0.9);
          border-radius: 50%;
          pointer-events: none;
          z-index: 99999;
          transform: translate(-50%, -50%);
          opacity: 0;
          transition: all 0.1s ease-out;
          box-shadow:
            0 0 20px rgba(255, 107, 157, 0.6),
            0 0 40px rgba(139, 92, 246, 0.3),
            inset 0 0 20px rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(4px);
          will-change: transform;
        }

        .custom-cursor::before {
          content: '';
          position: absolute;
          top: -4px;
          left: -4px;
          right: -4px;
          bottom: -4px;
          border: 1px solid rgba(255, 107, 157, 0.3);
          border-radius: 50%;
          animation: cursorPulse 1.5s ease-in-out infinite;
        }

        .custom-cursor::after {
          content: '';
          position: absolute;
          top: -6px;
          left: -6px;
          right: -6px;
          bottom: -6px;
          border: 1px solid rgba(139, 92, 246, 0.15);
          border-radius: 50%;
          animation: cursorOrbit 2s linear infinite;
        }

        .custom-cursor.hover {
          width: 32px;
          height: 32px;
          background: linear-gradient(135deg, rgba(255, 107, 157, 0.9) 0%, rgba(196, 69, 105, 0.8) 50%, rgba(139, 92, 246, 0.8) 100%);
          border-width: 3px;
          border-color: rgba(255, 255, 255, 1);
          box-shadow:
            0 0 30px rgba(255, 107, 157, 0.8),
            0 0 60px rgba(139, 92, 246, 0.4),
            inset 0 0 30px rgba(255, 255, 255, 0.3);
          transform: translate(-50%, -50%) scale(1.1);
          transition: all 0.15s ease-out;
        }

        .custom-cursor.visible {
          opacity: 1;
        }

        /* Cursor animations */
        @keyframes cursorPulse {

          0%,
          100% {
            transform: scale(1);
            opacity: 0.3;
          }

          50% {
            transform: scale(1.1);
            opacity: 0.6;
          }
        }

        @keyframes cursorOrbit {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        /* Hide cursor on touch devices */
        @media (hover: none) and (pointer: coarse) {
          .custom-cursor {
            display: none !important;
          }
        }

        /* Hide default cursor when custom cursor is active */
        body.custom-cursor-active {
          cursor: none;
        }

        body.custom-cursor-active * {
          cursor: none;
        }

        /* Advanced cosmic animations */
        @keyframes cosmicNebula {

          0%,
          100% {
            transform: scale(1) rotate(0deg);
            opacity: 0.8;
          }

          25% {
            transform: scale(1.1) rotate(90deg);
            opacity: 1;
          }

          50% {
            transform: scale(0.9) rotate(180deg);
            opacity: 0.6;
          }

          75% {
            transform: scale(1.05) rotate(270deg);
            opacity: 0.9;
          }
        }

        @keyframes starfield {
          0% {
            transform: translateY(0) rotate(0deg);
          }

          100% {
            transform: translateY(-100px) rotate(360deg);
          }
        }

        @keyframes energyField {
          0% {
            transform: rotate(0deg) scale(1);
            opacity: 0.6;
          }

          50% {
            transform: rotate(180deg) scale(1.1);
            opacity: 1;
          }

          100% {
            transform: rotate(360deg) scale(1);
            opacity: 0.6;
          }
        }

        @keyframes holographicRing {
          0% {
            transform: rotate(0deg) scale(1);
            opacity: 0.8;
          }

          25% {
            transform: rotate(90deg) scale(1.05);
            opacity: 1;
          }

          50% {
            transform: rotate(180deg) scale(1);
            opacity: 0.7;
          }

          75% {
            transform: rotate(270deg) scale(1.1);
            opacity: 0.9;
          }

          100% {
            transform: rotate(360deg) scale(1);
            opacity: 0.8;
          }
        }

        @keyframes holographicOrbit {
          0% {
            transform: rotate(0deg) scale(1);
            opacity: 0.5;
          }

          33% {
            transform: rotate(120deg) scale(1.15);
            opacity: 0.8;
          }

          66% {
            transform: rotate(240deg) scale(0.9);
            opacity: 0.6;
          }

          100% {
            transform: rotate(360deg) scale(1);
            opacity: 0.5;
          }
        }

        @keyframes ultimateNeonShimmer {
          0% {
            background-position: -200% 0;
          }

          100% {
            background-position: 200% 0;
          }
        }

        @keyframes progressGlow {

          0%,
          100% {
            opacity: 0.3;
            transform: scale(1);
          }

          50% {
            opacity: 0.7;
            transform: scale(1.02);
          }
        }

        /* Cosmic particles */
        .cosmic-particle {
          position: absolute;
          border-radius: 50%;
          pointer-events: none;
          z-index: 3;
          opacity: 0.6;
        }

        .particle-1 {
          top: 10%;
          left: 15%;
          width: 3px;
          height: 3px;
          background: rgba(143, 221, 195, 0.9);
          animation: cosmicFloat1 18s ease-in-out infinite;
        }

        .particle-2 {
          top: 20%;
          right: 20%;
          width: 2px;
          height: 2px;
          background: rgba(213, 237, 229, 0.8);
          animation: cosmicFloat2 22s ease-in-out infinite;
        }

        .particle-3 {
          bottom: 25%;
          left: 30%;
          width: 4px;
          height: 4px;
          background: rgba(143, 221, 195, 0.7);
          animation: cosmicFloat3 16s ease-in-out infinite;
        }

        .particle-4 {
          bottom: 15%;
          right: 35%;
          width: 2px;
          height: 2px;
          background: rgba(213, 237, 229, 0.9);
          animation: cosmicFloat4 20s ease-in-out infinite;
        }

        .particle-5 {
          top: 45%;
          left: 5%;
          width: 3px;
          height: 3px;
          background: rgba(143, 221, 195, 0.8);
          animation: cosmicFloat5 24s ease-in-out infinite;
        }

        .particle-6 {
          top: 35%;
          right: 10%;
          width: 2px;
          height: 2px;
          background: rgba(213, 237, 229, 0.7);
          animation: cosmicFloat6 19s ease-in-out infinite;
        }

        .particle-7 {
          bottom: 40%;
          left: 25%;
          width: 3px;
          height: 3px;
          background: rgba(143, 221, 195, 0.6);
          animation: cosmicFloat7 21s ease-in-out infinite;
        }

        .particle-8 {
          bottom: 30%;
          right: 15%;
          width: 2px;
          height: 2px;
          background: rgba(213, 237, 229, 0.8);
          animation: cosmicFloat8 17s ease-in-out infinite;
        }

        @keyframes cosmicFloat1 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
          }

          25% {
            transform: translate(40px, -30px) scale(1.5);
            opacity: 1;
          }

          50% {
            transform: translate(-20px, 20px) scale(0.8);
            opacity: 0.4;
          }

          75% {
            transform: translate(30px, 10px) scale(1.2);
            opacity: 0.8;
          }
        }

        @keyframes cosmicFloat2 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
          }

          33% {
            transform: translate(-35px, -25px) scale(1.3);
            opacity: 1;
          }

          66% {
            transform: translate(25px, -15px) scale(0.7);
            opacity: 0.3;
          }
        }

        @keyframes cosmicFloat3 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
          }

          25% {
            transform: translate(50px, 25px) scale(1.4);
            opacity: 1;
          }

          50% {
            transform: translate(-30px, -20px) scale(0.9);
            opacity: 0.5;
          }

          75% {
            transform: translate(20px, 35px) scale(1.1);
            opacity: 0.8;
          }
        }

        @keyframes cosmicFloat4 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
          }

          50% {
            transform: translate(-40px, -30px) scale(1.6);
            opacity: 1;
          }
        }

        @keyframes cosmicFloat5 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
          }

          25% {
            transform: translate(30px, -20px) scale(1.2);
            opacity: 0.9;
          }

          50% {
            transform: translate(-15px, 25px) scale(0.8);
            opacity: 0.4;
          }

          75% {
            transform: translate(35px, 15px) scale(1.3);
            opacity: 0.7;
          }
        }

        @keyframes cosmicFloat6 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
          }

          33% {
            transform: translate(-25px, -35px) scale(1.4);
            opacity: 1;
          }

          66% {
            transform: translate(20px, -10px) scale(0.6);
            opacity: 0.3;
          }
        }

        @keyframes cosmicFloat7 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
          }

          25% {
            transform: translate(45px, 20px) scale(1.3);
            opacity: 0.9;
          }

          50% {
            transform: translate(-25px, -15px) scale(0.9);
            opacity: 0.5;
          }

          75% {
            transform: translate(15px, 30px) scale(1.2);
            opacity: 0.8;
          }
        }

        @keyframes cosmicFloat8 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
          }

          50% {
            transform: translate(-35px, -25px) scale(1.5);
            opacity: 1;
          }
        }

        /* Custom Scrollbar Styles */
        ::-webkit-scrollbar {
          width: 12px;
        }

        ::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.05);
          border-radius: 10px;
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(16, 185, 129, 0.8) 100%);
          border-radius: 10px;
          border: 2px solid transparent;
          background-clip: content-box;
          transition: all 0.3s ease;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(16, 185, 129, 1) 100%);
          box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
        }

        ::-webkit-scrollbar-thumb:active {
          background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(16, 185, 129, 1) 100%);
          box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
        }

        ::-webkit-scrollbar-corner {
          background: transparent;
        }

        /* Firefox Scrollbar */
        * {
          scrollbar-width: thin;
          scrollbar-color: rgba(59, 130, 246, 0.8) rgba(255, 255, 255, 0.05);
        }

        /* Custom scrollbar for specific elements */
        .projects-grid::-webkit-scrollbar,
        .skills-grid::-webkit-scrollbar {
          height: 8px;
        }

        .projects-grid::-webkit-scrollbar-track,
        .skills-grid::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.03);
          border-radius: 5px;
        }

        .projects-grid::-webkit-scrollbar-thumb,
        .skills-grid::-webkit-scrollbar-thumb {
          background: linear-gradient(90deg, rgba(59, 130, 246, 0.6) 0%, rgba(16, 185, 129, 0.6) 100%);
          border-radius: 5px;
        }

        .projects-grid::-webkit-scrollbar-thumb:hover,
        .skills-grid::-webkit-scrollbar-thumb:hover {
          background: linear-gradient(90deg, rgba(59, 130, 246, 0.8) 0%, rgba(16, 185, 129, 0.8) 100%);
        }

        /* ===== ULTIMATE PRELOADER ANIMATIONS ===== */
        @keyframes ultimateNebula {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.8;
          }

          25% {
            transform: translate(-20px, -15px) scale(1.1);
            opacity: 1;
          }

          50% {
            transform: translate(15px, -25px) scale(0.9);
            opacity: 0.6;
          }

          75% {
            transform: translate(-10px, 20px) scale(1.05);
            opacity: 0.9;
          }
        }

        @keyframes ultimateStarfield {
          0% {
            transform: translateY(0);
          }

          100% {
            transform: translateY(-100px);
          }
        }

        @keyframes ultimateEnergyField {
          0% {
            transform: rotate(0deg) scale(1);
            opacity: 0.8;
          }

          33% {
            transform: rotate(120deg) scale(1.2);
            opacity: 1;
          }

          66% {
            transform: rotate(240deg) scale(0.8);
            opacity: 0.6;
          }

          100% {
            transform: rotate(360deg) scale(1);
            opacity: 0.8;
          }
        }

        @keyframes ultimateHolographicRing {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes ultimateHolographicOrbit {
          0% {
            transform: rotate(0deg) scale(1);
          }

          50% {
            transform: rotate(180deg) scale(1.1);
          }

          100% {
            transform: rotate(360deg) scale(1);
          }
        }

        @keyframes ultimateRotate {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes ultimateFloat {

          0%,
          100% {
            transform: translateY(0px);
          }

          50% {
            transform: translateY(-20px);
          }
        }

        @keyframes ultimateGlow {

          0%,
          100% {
            filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.8)) saturate(1.3) brightness(1.2);
          }

          50% {
            filter: drop-shadow(0 0 60px rgba(16, 185, 129, 0.9)) saturate(1.5) brightness(1.4);
          }
        }

        @keyframes ultimateTextGlow {

          0%,
          100% {
            text-shadow:
              0 0 50px rgba(59, 130, 246, 0.9),
              0 0 100px rgba(16, 185, 129, 0.7),
              0 0 150px rgba(255, 107, 157, 0.4),
              0 0 200px rgba(139, 92, 246, 0.3);
          }

          50% {
            text-shadow:
              0 0 70px rgba(59, 130, 246, 1),
              0 0 140px rgba(16, 185, 129, 0.9),
              0 0 210px rgba(255, 107, 157, 0.6),
              0 0 280px rgba(139, 92, 246, 0.5);
          }
        }

        @keyframes ultimateTextGradient {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }
        }

        @keyframes ultimateContentEntry {
          0% {
            transform: scale(0.9) translateY(50px);
            opacity: 0;
          }

          50% {
            transform: scale(1.05) translateY(-10px);
            opacity: 0.8;
          }

          100% {
            transform: scale(1) translateY(0);
            opacity: 1;
          }
        }

        /* ===== ULTIMATE LOADER ANIMATIONS ===== */
        @keyframes loaderRingRotate {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes loaderCorePulse {

          0%,
          100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.9;
          }

          50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 1;
          }
        }

        @keyframes particleOrbit {
          0% {
            transform: rotate(0deg) translateX(60px) rotate(0deg);
            opacity: 0;
          }

          25% {
            opacity: 1;
          }

          75% {
            opacity: 1;
          }

          100% {
            transform: rotate(360deg) translateX(60px) rotate(-360deg);
            opacity: 0;
          }
        }

        /* Mind-blowing preloader animations */
        @keyframes hexagonRotate {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes hexagonPulse {

          0%,
          100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
          }

          50% {
            transform: translate(-50%, -50%) scale(1.1);
            opacity: 0.8;
          }
        }

        @keyframes hexagonPulseOut {

          0%,
          100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.3;
          }

          50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0.6;
          }
        }

        @keyframes orbitRotate {
          0% {
            transform: translate(-50%, -50%) rotate(0deg);
          }

          100% {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }

        @keyframes dotPulse {

          0%,
          100% {
            transform: scale(1);
            opacity: 0.8;
          }

          50% {
            transform: scale(1.5);
            opacity: 1;
          }
        }

        @keyframes shapeFloat {

          0%,
          100% {
            transform: translate(0, 0) rotate(0deg) scale(1);
            opacity: 0.6;
          }

          25% {
            transform: translate(30px, -20px) rotate(90deg) scale(1.1);
            opacity: 0.8;
          }

          50% {
            transform: translate(-15px, 25px) rotate(180deg) scale(0.9);
            opacity: 0.4;
          }

          75% {
            transform: translate(20px, 15px) rotate(270deg) scale(1.05);
            opacity: 0.7;
          }
        }

        @keyframes energyFieldPulse {

          0%,
          100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.3;
          }

          50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0.6;
          }
        }

        @keyframes ringRotate {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        /* Simple animations for mobile-optimized preloader */
        @keyframes simpleSpin {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }

        @keyframes simplePulse {

          0%,
          100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
          }

          50% {
            transform: translate(-50%, -50%) scale(1.1);
            opacity: 0.8;
          }
        }

        @keyframes simpleTextGlow {

          0%,
          100% {
            text-shadow: 0 0 30px rgba(143, 221, 195, 0.8);
          }

          50% {
            text-shadow: 0 0 50px rgba(143, 221, 195, 1), 0 0 70px rgba(143, 221, 195, 0.6);
          }
        }

        @keyframes simpleContentEntry {
          0% {
            opacity: 0;
            transform: scale(0.8) translateY(30px);
          }

          100% {
            opacity: 1;
            transform: scale(1) translateY(0);
          }
        }

        @keyframes simpleNebula {

          0%,
          100% {
            opacity: 0.3;
            transform: scale(1);
          }

          50% {
            opacity: 0.5;
            transform: scale(1.05);
          }
        }

        @keyframes simpleEnergyField {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes simpleFloat {

          0%,
          100% {
            transform: translateY(0px) rotate(0deg);
            opacity: 0.4;
          }

          50% {
            transform: translateY(-20px) rotate(180deg);
            opacity: 0.6;
          }
        }

        /* Hero text glow animations */
        @keyframes heroTextGlow {

          0%,
          100% {
            text-shadow:
              0 0 20px rgba(143, 221, 195, 0.8),
              0 0 40px rgba(143, 221, 195, 0.6),
              0 0 60px rgba(143, 221, 195, 0.4),
              0 0 80px rgba(143, 221, 195, 0.3),
              0 0 100px rgba(143, 221, 195, 0.2),
              0 0 120px rgba(143, 221, 195, 0.1);
          }

          50% {
            text-shadow:
              0 0 30px rgba(143, 221, 195, 1),
              0 0 60px rgba(143, 221, 195, 0.8),
              0 0 90px rgba(143, 221, 195, 0.6),
              0 0 120px rgba(143, 221, 195, 0.4),
              0 0 150px rgba(143, 221, 195, 0.3),
              0 0 180px rgba(143, 221, 195, 0.2);
          }
        }

        @keyframes heroSubtitleGlow {

          0%,
          100% {
            text-shadow:
              0 0 15px rgba(213, 237, 229, 0.6),
              0 0 30px rgba(213, 237, 229, 0.4),
              0 0 45px rgba(213, 237, 229, 0.2);
          }

          50% {
            text-shadow:
              0 0 25px rgba(213, 237, 229, 0.8),
              0 0 50px rgba(213, 237, 229, 0.6),
              0 0 75px rgba(213, 237, 229, 0.4);
          }
        }