@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
            box-sizing: border-box;
        }
        
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .hero-gradient {
            background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 50%, transparent 70%);
            transition: all 0.3s ease;
        }
        
        .card-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(50px);
        }
        
        .card-hover.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .card-hover:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        /* Project Cards Animation */
        .modern-project-card.animate-in {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        
        .modern-project-card:nth-child(1) {
            transition-delay: 0.1s !important;
        }
        
        .modern-project-card:nth-child(2) {
            transition-delay: 0.3s !important;
        }
        
        .modern-project-card:nth-child(3) {
            transition-delay: 0.5s !important;
        }

        /* 3D Card Container Styles */
        .card-3d-container {
            perspective: 1000px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: auto;
        }

        .card-3d {
            position: relative;
            transition: all 0.2s ease-linear;
            transform-style: preserve-3d;
            cursor: pointer;
            width: 100%;
            max-width: 100%;
        }

        .card-3d-body {
            height: auto;
            min-height: 24rem;
            width: 100%;
            transform-style: preserve-3d;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-3d-body > * {
            transform-style: preserve-3d;
        }

        .card-3d-item {
            width: 100%;
            transition: all 0.2s ease-linear;
        }

        /* Modern Project Cards */
        .modern-project-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(30px);
        }

        .modern-project-card.stagger-1 {
            animation: fade-in-up 0.6s ease-out 0.1s forwards;
        }

        .modern-project-card.stagger-2 {
            animation: fade-in-up 0.6s ease-out 0.2s forwards;
        }

        .modern-project-card.stagger-3 {
            animation: fade-in-up 0.6s ease-out 0.3s forwards;
        }

        .project-card-inner {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 24px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            min-height: 420px;
        }

        .modern-project-card:hover .project-card-inner {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.08);
        }

        .project-image-container {
            position: relative;
            margin-bottom: 24px;
        }

        .project-image {
            width: 100%;
            height: 200px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .project-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
        }

        .modern-project-card:hover .project-overlay {
            background: rgba(0, 0, 0, 0.4);
        }

        .project-icon {
            width: 48px;
            height: 48px;
            color: white;
            opacity: 0.9;
            transition: all 0.4s ease;
        }

        .modern-project-card:hover .project-icon {
            transform: scale(1.1);
            opacity: 1;
        }

        .project-status {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            padding: 6px 12px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 500;
            color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .status-live {
            background: #10b981;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
        }

        .status-development {
            background: #f59e0b;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
        }

        .project-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .project-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .project-title {
            font-size: 24px;
            font-weight: 700;
            color: white;
            line-height: 1.3;
            flex: 1;
            margin-right: 12px;
        }

        .project-description {
            color: #d1d5db;
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: auto;
        }

        .project-tag {
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .project-button-container {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .project-read-more-btn {
            width: 100%;
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            padding: 12px 20px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .project-read-more-btn:hover {
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-1px);
        }

        .project-read-more-btn:active {
            transform: translateY(0);
        }

        .project-read-more-btn svg {
            width: 16px;
            height: 16px;
            transition: transform 0.3s ease;
        }

        .project-read-more-btn:hover svg {
            transform: translateX(2px);
        }

        .tag-design {
            background: rgba(99, 102, 241, 0.1);
            color: #6366f1;
        }

        .tag-web {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .tag-ai {
            background: rgba(139, 92, 246, 0.1);
            color: #8b5cf6;
        }

        .tag-fullstack {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }

        .tag-webapp {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .tag-database {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .tag-automation {
            background: rgba(236, 72, 153, 0.1);
            color: #ec4899;
        }

        /* Modern Modal Styles */
        #projectModal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            z-index: 50;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        .modal-container {
            background: #1f2937;
            border-radius: 24px;
            max-width: 1024px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            transform: scale(0.95);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        #projectModal.show {
            opacity: 1 !important;
            visibility: visible !important;
        }

        #projectModal.show .modal-container {
            transform: scale(1) !important;
        }

        .modal-header {
            background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 32px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .modal-header-content {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .modal-project-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
        }

        .modal-title-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .modal-title {
            font-size: 32px;
            font-weight: 800;
            color: white;
            margin: 0;
            line-height: 1.2;
        }

        .modal-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #d1d5db;
        }

        .modal-close {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #d1d5db;
            backdrop-filter: blur(10px);
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            transform: scale(1.05);
        }

        .modal-body {
            padding: 32px;
            max-height: calc(90vh - 200px);
            overflow-y: auto;
        }

        .modal-content-container {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        /* Modal Carousel Styles */
        .modal-carousel {
            margin-bottom: 32px;
        }
        
        .carousel-container {
            position: relative;
            max-width: 100%;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .carousel-images {
            display: flex;
            transition: transform 0.5s ease, height 0.4s ease;
            min-height: 300px;
            max-height: 500px;
            height: auto;
        }
        
        .carousel-image {
            min-width: 100%;
            width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: contain;
            object-position: center;
            display: block;
            background: rgba(0, 0, 0, 0.1);
        }
        
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .carousel-btn:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: translateY(-50%) scale(1.1);
        }
        
        .carousel-prev {
            left: 16px;
        }
        
        .carousel-next {
            right: 16px;
        }
        
        .carousel-btn svg {
            width: 24px;
            height: 24px;
        }
        
        .carousel-indicators {
            position: absolute;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 10;
        }
        
        .carousel-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .carousel-indicator.active {
            background: white;
            transform: scale(1.2);
        }
        
        .carousel-indicator:hover {
            background: rgba(255, 255, 255, 0.7);
        }

        /* Responsive Carousel */
        @media (max-width: 768px) {
            .carousel-images {
                min-height: 200px;
                max-height: 350px;
            }
            
            .carousel-image {
                max-height: 350px;
            }
            
            .carousel-btn {
                width: 40px;
                height: 40px;
            }
            
            .carousel-btn svg {
                width: 20px;
                height: 20px;
            }
            
            .carousel-prev {
                left: 8px;
            }
            
            .carousel-next {
                right: 8px;
            }
            
            .carousel-indicators {
                bottom: 8px;
            }
            
            .carousel-indicator {
                width: 10px;
                height: 10px;
            }
        }

        .modal-section {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .modal-section-title {
            font-size: 20px;
            font-weight: 600;
            color: white;
            margin-bottom: 8px;
        }

        .modal-section-content {
            color: #d1d5db;
            line-height: 1.6;
            font-size: 16px;
        }

        .modal-tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .modal-tech-item {
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            color: #e5e7eb;
            backdrop-filter: blur(10px);
        }

        .modal-buttons {
            display: flex;
            gap: 16px;
            margin-top: 24px;
        }

        .modal-button {
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .modal-button-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
        }

        .modal-button-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
        }

        .modal-button-secondary {
            background: transparent;
            color: #d1d5db;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .modal-button-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
            color: white;
        }

        /* Responsive Styles for Modern Project Cards */
        @media (max-width: 768px) {
            .project-card-inner {
                padding: 20px;
                min-height: 380px;
            }
            
            .project-image {
                height: 160px;
            }
            
            .project-title {
                font-size: 20px;
            }
            
            .project-description {
                font-size: 14px;
            }
            
            .project-tag {
                font-size: 11px;
                padding: 4px 8px;
            }
            
            .project-button-container {
                margin-top: 16px;
                padding-top: 12px;
            }
            
            .project-read-more-btn {
                padding: 10px 16px;
                font-size: 13px;
            }
            
            /* Modal Responsive Styles */
            .modal-header {
                padding: 24px 20px;
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            
            .modal-header-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            
            .modal-project-icon {
                width: 48px;
                height: 48px;
            }
            
            .modal-title {
                font-size: 24px;
            }
            
            .modal-body {
                padding: 20px;
            }
            
            .modal-buttons {
                flex-direction: column;
                gap: 12px;
            }
            
            .modal-button {
                justify-content: center;
                width: 100%;
            }
            
            .modal-tech-stack {
                gap: 8px;
            }
            
            .modal-tech-item {
                font-size: 12px;
                padding: 6px 12px;
            }
        }

        /* Animation for project cards appearing */
        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Embed Background Styles */
        .embed-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            overflow: hidden;
            border-radius: 1rem;
        }

        .embed-background iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1.2);
            width: 120%;
            height: 120%;
            border: none;
            opacity: 0.3;
            pointer-events: none;
        }
        
        .text-glow {
            text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
        }
        
        .scroll-indicator {
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 53%, 80%, 100% {
                transform: translate3d(0,0,0);
            }
            40%, 43% {
                transform: translate3d(0,-10px,0);
            }
            70% {
                transform: translate3d(0,-5px,0);
            }
            90% {
                transform: translate3d(0,-2px,0);
            }
        }
        
        .parallax {
            transform-style: preserve-3d;
        }
        
        .tech-badge {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }
        
        body {
            overflow-x: hidden;
        }
        
        .smooth-scroll {
            scroll-behavior: smooth;
        }
        
        /* Fade in animations */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease-out;
        }
        
        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .fade-in-left {
            opacity: 0;
            transform: translateX(-30px);
            transition: all 0.6s ease-out;
        }
        
        .fade-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .fade-in-right {
            opacity: 0;
            transform: translateX(30px);
            transition: all 0.6s ease-out;
        }
        
        .fade-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .scale-in {
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.6s ease-out;
        }
        
        .scale-in.visible {
            opacity: 1;
            transform: scale(1);
        }
        
        /* Tech stack logos */
        .tech-logo {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            font-size: 28px;
        }
        
        .tech-logo:hover {
            transform: translateY(-8px) scale(1.1);
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        /* Staggered animations */
        .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; }
        .stagger-6 { animation-delay: 0.6s; }
        
        .scroll-hint {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 40;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 12px 24px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
            opacity: 0;
            transform: translateX(-50%) translateY(50px);
            animation: slide-up-reveal 0.8s ease-out 2.5s forwards, pulse 2s infinite 3.3s;
        }
        
        .scroll-hint:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateX(-50%) translateY(-2px);
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 0.8;
            }
            50% {
                opacity: 1;
            }
        }
        
        /* Social Icons */
        .social-icons {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 40;
            display: flex;
            gap: 16px;
            flex-direction: column;
        }

        .social-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
            cursor: pointer;
            opacity: 0;
            transform: translateY(100px) scale(0.8);
            animation: slide-up-social 0.8s ease-out forwards;
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

        .social-icon:hover {
            width: auto;
            min-width: 50px;
            padding-right: 16px;
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        }

        .social-icon-content {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            position: relative;
            padding-left: 12px;
        }

        .social-icon-name {
            margin-left: 12px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .social-icon:hover .social-icon-name {
            opacity: 1;
            transform: translateX(0);
        }

        .social-icon img,
        .social-icon svg {
            width: 24px;
            height: 24px;
            filter: brightness(0) invert(1);
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        .social-icon:hover img,
        .social-icon:hover svg {
            filter: brightness(0) invert(1);
            opacity: 1;
            transform: scale(1.1);
        }

        /* Staggered animation delays for social icons appearing from bottom to top */
        .social-icon:nth-child(1) { animation-delay: 3.5s; } /* Email - top */
        .social-icon:nth-child(2) { animation-delay: 3.3s; } /* YouTube */
        .social-icon:nth-child(3) { animation-delay: 3.1s; } /* Instagram */
        .social-icon:nth-child(4) { animation-delay: 2.9s; } /* X */
        .social-icon:nth-child(5) { animation-delay: 2.7s; } /* GitHub - bottom */

        @keyframes slide-up-social {
            0% {
                opacity: 0;
                transform: translateY(100px) scale(0.8) rotate(180deg);
            }
            60% {
                opacity: 0.8;
                transform: translateY(-10px) scale(1.1) rotate(-10deg);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1) rotate(0deg);
            }
        }

        /* Hero Animations */
        .glitch-text {
            position: relative;
            opacity: 0;
            animation: glitch-reveal 3s ease-out forwards;
        }
        
        .glitch-char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px) rotateX(90deg);
            animation: char-reveal 0.8s ease-out forwards;
        }
        
        .hero-subtitle {
            opacity: 0;
            transform: translateY(30px);
            animation: fade-up-reveal 1s ease-out 2s forwards;
        }

        @keyframes glitch-reveal {
            0% {
                opacity: 0;
                transform: scale(1);
                filter: blur(20px);
            }
            20% {
                opacity: 0.3;
                transform: scale(1);
                filter: blur(10px);
            }
            40% {
                opacity: 0.7;
                transform: scale(1);
                filter: blur(5px);
            }
            60% {
                opacity: 0.9;
                transform: scale(1);
                filter: blur(2px);
            }
            80% {
                opacity: 1;
                transform: scale(1);
                filter: blur(1px);
            }
            100% {
                opacity: 1;
                transform: scale(1);
                filter: blur(0);
            }
        }
        
        @keyframes char-reveal {
            0% {
                opacity: 0;
                transform: translateY(30px) rotateX(90deg);
                filter: brightness(2) blur(10px);
            }
            50% {
                opacity: 0.7;
                transform: translateY(0) rotateX(0deg);
                filter: brightness(1.2) blur(2px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) rotateX(0deg);
                filter: brightness(1) blur(0);
            }
        }
        
        @keyframes fade-up-reveal {
            0% {
                opacity: 0;
                transform: translateY(30px);
                filter: blur(5px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }
        
        @keyframes slide-in-left {
            0% {
                opacity: 0;
                transform: translateX(-100px) scale(0.5) rotate(-180deg);
            }
            60% {
                opacity: 0.8;
                transform: translateX(10px) scale(1.2) rotate(10deg);
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1) rotate(0deg);
            }
        }
        
        @keyframes slide-up-reveal {
            0% {
                opacity: 0;
                transform: translateX(-50%) translateY(50px);
            }
            100% {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }
        
        /* Background Boxes Effect */
        .background-boxes {
            position: absolute;
            top: -60%;
            left: -60%;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(auto-fit, 4rem);
            grid-template-rows: repeat(auto-fit, 2rem);
            width: 320%;
            height: 320%;
            transform: translate(-25%, -25%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0);
            pointer-events: auto;
            overflow: hidden;
            gap: 0;
        }
        
        .boxes-row {
            display: contents;
        }
        
        .boxes-cell {
            position: relative;
            height: 2rem;
            width: 4rem;
            border-top: 1px solid rgb(51 65 85);
            border-right: 1px solid rgb(51 65 85);
            border-left: 1px solid rgb(51 65 85);
            border-bottom: 1px solid rgb(51 65 85);
            background-color: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .boxes-cell:hover {
            transition-duration: 0ms !important;
        }
        
        .boxes-cell.active {
            transition-duration: 0ms !important;
        }
        
        .boxes-plus {
            pointer-events: none;
            position: absolute;
            top: -14px;
            left: -22px;
            height: 1.5rem;
            width: 2.5rem;
            stroke: rgb(51 65 85);
            stroke-width: 1px;
            fill: none;
        }
        
        .boxes-mask {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: rgb(15 23 42);
            z-index: 20;
            mask-image: radial-gradient(transparent, white);
            pointer-events: none;
        }
        
        /* Background Boxes Effect for Tech Section */
        .background-boxes-tech {
            position: absolute;
            top: -60%;
            left: -60%;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(auto-fit, 4rem);
            grid-template-rows: repeat(auto-fit, 2rem);
            width: 320%;
            height: 320%;
            transform: translate(-25%, -25%) skewX(-45deg) skewY(10deg) scale(0.675) rotate(0deg) translateZ(0);
            pointer-events: none;
            overflow: hidden;
            gap: 0;
        }
        
        .boxes-grid-tech {
            display: contents;
        }
        
        .boxes-row-tech {
            display: contents;
        }
        
        .boxes-cell-tech {
            position: relative;
            height: 2rem;
            width: 4rem;
            border-top: 1px solid rgb(51 65 85);
            border-right: 1px solid rgb(51 65 85);
            border-left: 1px solid rgb(51 65 85);
            border-bottom: 1px solid rgb(51 65 85);
            background-color: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            pointer-events: none;
        }
        
        .boxes-cell-tech:hover {
            transition-duration: 0ms !important;
        }
        
        .boxes-cell-tech.active {
            transition-duration: 0ms !important;
        }
        
        .boxes-plus-tech {
            pointer-events: none;
            position: absolute;
            top: -14px;
            left: -22px;
            height: 1.5rem;
            width: 2.5rem;
            stroke: rgb(51 65 85);
            stroke-width: 1px;
            fill: none;
        }
        
        .boxes-mask-tech {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: rgb(15 23 42);
            z-index: 20;
            mask-image: radial-gradient(ellipse 80% 60% at center, transparent, white);
            pointer-events: none;
        }
        
        /* Tech Stack Styles */
        .tech-category {
            margin-bottom: 32px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease-out;
        }
        
        .tech-category.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .tech-category-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .tech-category-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .tech-category-icon i {
            color: white;
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        .tech-category:hover .tech-category-icon {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .tech-category:hover .tech-category-icon i {
            opacity: 1;
            transform: scale(1.1);
        }
        
        .category-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: white;
            opacity: 0.9;
            transition: all 0.3s ease;
        }

        .tech-category:hover .category-title {
            opacity: 1;
            transform: translateX(2px);
        }
        
        .tech-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-left: 48px;
        }
        
        .tech-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 12px;
            transition: all 0.25s ease;
            opacity: 0;
            transform: translateY(15px);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .tech-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .tech-item:hover {
            transform: translateY(-4px) scale(1.03);
            transition: all 0.25s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
            position: relative;
        }
        
        /* Schimmer-Effekt für Hover */
        .tech-item:hover::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: translateX(-100%) rotate(45deg);
            animation: shimmer 0.6s ease-out;
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }
        
        .tech-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all 0.25s ease;
            flex-shrink: 0;
        }
        
        .tech-item:hover .tech-icon {
            transform: rotate(12deg) scale(1.2);
            transition: all 0.25s ease;
        }
        
        /* Individual Technology Colors */
        /* Core Languages */
        .tech-python { background: rgba(55, 118, 171, 0.15); }
        .tech-python:hover { background: rgba(55, 118, 171, 0.25); }
        
        .tech-javascript { background: rgba(247, 223, 30, 0.15); }
        .tech-javascript:hover { background: rgba(247, 223, 30, 0.25); }
        
        .tech-typescript { background: rgba(49, 120, 198, 0.15); }
        .tech-typescript:hover { background: rgba(49, 120, 198, 0.25); }
        
        .tech-cpp { background: rgba(0, 89, 156, 0.15); }
        .tech-cpp:hover { background: rgba(0, 89, 156, 0.25); }
        
        .tech-html { background: rgba(227, 79, 38, 0.15); }
        .tech-html:hover { background: rgba(227, 79, 38, 0.25); }
        
        .tech-css { background: rgba(21, 114, 182, 0.15); }
        .tech-css:hover { background: rgba(21, 114, 182, 0.25); }
        
        /* Frontend & Styling */
        .tech-tailwind { background: rgba(6, 182, 212, 0.15); }
        .tech-tailwind:hover { background: rgba(6, 182, 212, 0.25); }
        
        .tech-bootstrap { background: rgba(139, 92, 246, 0.15); }
        .tech-bootstrap:hover { background: rgba(139, 92, 246, 0.25); }
        
        .tech-react { background: rgba(96, 165, 250, 0.15); }
        .tech-react:hover { background: rgba(96, 165, 250, 0.25); }
        
        .tech-alpine { background: rgba(139, 195, 74, 0.15); }
        .tech-alpine:hover { background: rgba(139, 195, 74, 0.25); }
        
        /* Backend & Frameworks */
        .tech-nodejs { background: rgba(51, 153, 51, 0.15); }
        .tech-nodejs:hover { background: rgba(51, 153, 51, 0.25); }
        
        .tech-django { background: rgba(9, 46, 32, 0.15); }
        .tech-django:hover { background: rgba(9, 46, 32, 0.25); }
        
        .tech-fastapi { background: rgba(0, 150, 136, 0.15); }
        .tech-fastapi:hover { background: rgba(0, 150, 136, 0.25); }
        
        .tech-discordjs { background: rgba(114, 137, 218, 0.15); }
        .tech-discordjs:hover { background: rgba(114, 137, 218, 0.25); }
        
        .tech-discordpy { background: rgba(114, 137, 218, 0.15); }
        .tech-discordpy:hover { background: rgba(114, 137, 218, 0.25); }
        
        .tech-nginx { background: rgba(0, 150, 57, 0.15); }
        .tech-nginx:hover { background: rgba(0, 150, 57, 0.25); }
        
        .tech-gunicorn { background: rgba(73, 152, 72, 0.15); }
        .tech-gunicorn:hover { background: rgba(73, 152, 72, 0.25); }
        
        /* Databases & Storage */
        .tech-postgresql { background: rgba(51, 103, 145, 0.15); }
        .tech-postgresql:hover { background: rgba(51, 103, 145, 0.25); }
        
        .tech-mysql { background: rgba(0, 117, 143, 0.15); }
        .tech-mysql:hover { background: rgba(0, 117, 143, 0.25); }
        
        .tech-mongodb { background: rgba(71, 162, 72, 0.15); }
        .tech-mongodb:hover { background: rgba(71, 162, 72, 0.25); }
        
        .tech-redis { background: rgba(220, 56, 45, 0.15); }
        .tech-redis:hover { background: rgba(220, 56, 45, 0.25); }
        
        /* DevOps & Deployment */
        .tech-git { background: rgba(240, 80, 50, 0.15); }
        .tech-git:hover { background: rgba(240, 80, 50, 0.25); }
        
        .tech-github { background: rgba(255, 255, 255, 0.15); }
        .tech-github:hover { background: rgba(255, 255, 255, 0.25); }
        
        .tech-docker { background: rgba(36, 150, 237, 0.15); }
        .tech-docker:hover { background: rgba(36, 150, 237, 0.25); }
        
        .tech-linux { background: rgba(252, 198, 36, 0.15); }
        .tech-linux:hover { background: rgba(252, 198, 36, 0.25); }
        
        .tech-vercel { background: rgba(255, 255, 255, 0.15); }
        .tech-vercel:hover { background: rgba(255, 255, 255, 0.25); }
        
        .tech-netlify { background: rgba(0, 199, 183, 0.15); }
        .tech-netlify:hover { background: rgba(0, 199, 183, 0.25); }
        
        .tech-cloudflare { background: rgba(244, 129, 32, 0.15); }
        .tech-cloudflare:hover { background: rgba(244, 129, 32, 0.25); }
        
        .tech-npm { background: rgba(203, 56, 55, 0.15); }
        .tech-npm:hover { background: rgba(203, 56, 55, 0.25); }
        
        .tech-pnpm { background: rgba(246, 146, 32, 0.15); }
        .tech-pnpm:hover { background: rgba(246, 146, 32, 0.25); }
        
        /* APIs & Services */
        .tech-stripe { background: rgba(99, 91, 255, 0.15); }
        .tech-stripe:hover { background: rgba(99, 91, 255, 0.25); }
        
        .tech-openai { background: rgba(0, 162, 255, 0.15); }
        .tech-openai:hover { background: rgba(0, 162, 255, 0.25); }
        
        /* Responsive */
        @media (max-width: 768px) {
            .tech-grid {
                margin-left: 0;
                margin-top: 12px;
                justify-content: center;
                gap: 8px;
            }
            
            .tech-item {
                font-size: 0.85rem;
                padding: 6px 12px;
                flex-shrink: 0;
            }
            
            .tech-category-header {
                flex-direction: column;
                align-items: flex-start;
                text-align: center;
            }
            
            .tech-category {
                margin-bottom: 24px;
            }
        }
        
        /* Mouse Light Circle Effect */
        .mouse-light-circle {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, rgba(59, 130, 246, 0.03) 40%, transparent 70%);
            pointer-events: none;
            z-index: 5;
            transition: background 0.5s ease;
            transform: translate(-50%, -50%);
            opacity: 0;
        }
        
        .tech-section:hover .mouse-light-circle {
            opacity: 1;
        }
        
        /* Animated Background Grid */
        .animated-grid {
            background-image: 
                linear-gradient(90deg, rgba(0,0,0,0.4) 1px, transparent 1px),
                linear-gradient(0deg, rgba(0,0,0,0.4) 1px, transparent 1px);
            background-size: 30px 30px;
            mask: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), black 200px, transparent 280px);
            -webkit-mask: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), black 200px, transparent 280px);
            animation: gridMoveDiagonal 20s linear infinite;
        }
        
        @keyframes gridMoveDiagonal {
            0% { transform: translate(0, 0); }
            100% { transform: translate(30px, 30px); }
        }
        
        /* Typewriter Effect Styles */
        .typewriter-container {
            display: inline-block;
            position: relative;
        }
        
        .typewriter-text {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            border-right: 2px solid rgba(102, 126, 234, 0.8);
            animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
            color: #9ca3af;
        }
        
        .typewriter-cursor {
            display: inline-block;
            background-color: rgba(102, 126, 234, 0.8);
            width: 2px;
            height: 1em;
            animation: blink-caret 1s step-end infinite;
            margin-left: 1px;
        }
        
        @keyframes blink-caret {
            from, to { opacity: 1; }
            50% { opacity: 0; }
        }
        
        /* Evervault Card Styles */
        .evervault-card {
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            padding: 2px;
            background: transparent;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 30rem;
        }
        
        .evervault-card-inner {
            border-radius: 20px;
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .evervault-pattern {
            pointer-events: none;
        }
        
        .evervault-base {
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background: linear-gradient(transparent, transparent);
            mask-image: linear-gradient(white, transparent);
            -webkit-mask-image: linear-gradient(white, transparent);
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .evervault-card-inner:hover .evervault-base {
            opacity: 0.5;
        }
        
        .evervault-gradient {
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
            opacity: 1;
            backdrop-filter: blur(20px);
            transition: opacity 0.5s ease;
        }
        
        .evervault-text-overlay {
            position: absolute;
            inset: 0;
            border-radius: 16px;
            opacity: 1;
            mix-blend-mode: overlay;
            transition: opacity 0.5s ease;
        }
        
        .evervault-random-text {
            position: absolute;
            inset: 0;
            font-family: 'Courier New', monospace;
            font-size: 10px;
            font-weight: bold;
            color: white;
            white-space: pre-wrap;
            word-break: break-all;
            transition: opacity 0.5s ease;
            line-height: 1.2;
            padding: 4px;
            overflow: hidden;
        }
        
        .evervault-center {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .evervault-logo-container {
            position: relative;
            height: 176px;
            width: 176px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        
        .evervault-logo {
            position: relative;
            z-index: 20;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .evervault-corner-icon {
            position: absolute;
            width: 24px;
            height: 24px;
            stroke: currentColor;
            stroke-width: 1.5;
            fill: none;
        }
        
        .evervault-corner-icon.top-left {
            top: -12px;
            left: -12px;
        }
        
        .evervault-corner-icon.top-right {
            top: -12px;
            right: -12px;
        }
        
        .evervault-corner-icon.bottom-left {
            bottom: -12px;
            left: -12px;
        }
        
        .evervault-corner-icon.bottom-right {
            bottom: -12px;
            right: -12px;
        }
        
        /* Rotating Border Button Styles */
        .rotating-border-button {
            position: relative;
            height: 64px;
            width: 160px;
            overflow: hidden;
            background: transparent;
            padding: 1px;
            border-radius: 28px;
            margin-top: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .rotating-border-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        .rotating-border-track {
            position: absolute;
            inset: 0;
            border-radius: 26px;
        }
        
        .rotating-border-svg {
            position: absolute;
            height: 100%;
            width: 100%;
        }
        
        .rotating-border-rect {
            fill: none;
            width: 100%;
            height: 100%;
            rx: 30%;
            ry: 30%;
        }
        
        .rotating-border-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: radial-gradient(circle, #0ea5e9 40%, transparent 60%);
            opacity: 0.8;
            position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        
        .rotating-border-content {
            position: relative;
            display: flex;
            height: 100%;
            width: 100%;
            align-items: center;
            justify-content: center;
            border: 1px solid #334155;
            background: rgba(15, 23, 42, 0.8);
            color: white;
            font-size: 14px;
            font-weight: 500;
            border-radius: 26px;
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
        }
        
        .rotating-border-button:hover .rotating-border-content {
            background: rgba(15, 23, 42, 0.9);
            border-color: #475569;
            transform: scale(1.02);
        }
        
        /* Floating Dock Styles */
        .floating-dock {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            display: flex;
            align-items: flex-end;
            gap: 16px; /* Erhöht von 8px auf 16px */
            padding: 12px 20px; /* Erhöht padding */
            background: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(75, 85, 99, 0.3);
            border-radius: 24px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            pointer-events: none;
        }
        
        .dock-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background: rgba(75, 85, 99, 0.5);
            border: 1px solid rgba(156, 163, 175, 0.2);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: bottom;
            text-decoration: none;
            color: white;
        }
        
        .dock-item:hover {
            background: rgba(102, 126, 234, 0.3);
            border-color: rgba(102, 126, 234, 0.5);
            transform: translateY(-8px) scale(1.1);
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.2);
        }
        
        .dock-item.active {
            background: rgba(102, 126, 234, 0.4);
            border-color: rgba(102, 126, 234, 0.6);
            transform: translateY(-4px) scale(1.05);
        }
        
        .dock-item svg {
            width: 24px;
            height: 24px;
            transition: all 0.3s ease;
        }
        
        .dock-item img {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        
        .dock-item:hover svg,
        .dock-item:hover img {
            transform: scale(1.1);
        }
        
        /* Separator for dock items */
        .dock-separator {
            width: 1px;
            height: 32px;
            background: rgba(75, 85, 99, 0.5);
            margin: 0 8px;
        }
        
        /* Tooltip */
        .dock-tooltip {
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(17, 24, 39, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(75, 85, 99, 0.3);
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 500;
            color: white;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            z-index: 101;
        }
        
        .dock-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: rgba(17, 24, 39, 0.9);
        }
        
        .dock-item:hover .dock-tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(-4px);
        }
        
        /* Mobile Dock */
        .floating-dock-mobile {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100;
            display: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            pointer-events: none;
        }
        
        .dock-mobile-toggle {
            width: 56px;
            height: 56px;
            border-radius: 28px;
            background: rgba(17, 24, 39, 0.9);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(75, 85, 99, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        .dock-mobile-toggle:hover {
            background: rgba(102, 126, 234, 0.3);
            border-color: rgba(102, 126, 234, 0.5);
            transform: scale(1.05);
        }
        
        .dock-mobile-toggle svg {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }
        
        .dock-mobile-toggle.open svg {
            transform: rotate(45deg);
        }
        
        .dock-mobile-menu {
            position: absolute;
            bottom: 70px;
            right: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
            transition: all 0.3s ease;
        }
        
        .dock-mobile-menu.open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }
        
        .dock-mobile-item {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background: rgba(17, 24, 39, 0.9);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(75, 85, 99, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            color: white;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            transform: scale(0.8) rotate(10deg);
            opacity: 0;
        }
        
        .dock-mobile-menu.open .dock-mobile-item {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
        
        .dock-mobile-item:hover {
            background: rgba(102, 126, 234, 0.3);
            border-color: rgba(102, 126, 234, 0.5);
            transform: scale(1.05);
        }
        
        .dock-mobile-item svg,
        .dock-mobile-item img {
            width: 20px;
            height: 20px;
        }
        
        /* Animation delays for mobile items */
        .dock-mobile-item:nth-child(1) { transition-delay: 0.1s; }
        .dock-mobile-item:nth-child(2) { transition-delay: 0.15s; }
        .dock-mobile-item:nth-child(3) { transition-delay: 0.2s; }
        .dock-mobile-item:nth-child(4) { transition-delay: 0.25s; }
        .dock-mobile-item:nth-child(5) { transition-delay: 0.3s; }
        
        /* Social Icons - wieder zurück links unten */
        .social-icons {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 40;
            display: flex;
            gap: 16px;
            flex-direction: column;
        }
        
        .social-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
            cursor: pointer;
            opacity: 0;
            transform: translateX(-100px);
            animation: slide-in-left 0.8s ease-out forwards;
            position: relative;
            overflow: hidden;
        }
        
        .social-icon:hover {
            width: auto;
            min-width: 40px;
            padding-right: 16px;
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }
        
        .social-icon-content {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            position: relative;
            padding-left: 10px;
        }
        
        .social-icon-name {
            margin-left: 12px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .social-icon:hover .social-icon-name {
            opacity: 1;
            transform: translateX(0);
        }
        
        .social-icon:nth-child(1) { animation-delay: 2.5s; }
        .social-icon:nth-child(2) { animation-delay: 2.7s; }
        .social-icon:nth-child(3) { animation-delay: 2.9s; }
        .social-icon:nth-child(4) { animation-delay: 3.1s; }
        .social-icon:nth-child(5) { animation-delay: 3.3s; }
        
        .social-icon img,
        .social-icon svg {
            width: 20px;
            height: 20px;
            color: white;
            fill: white;
            stroke: white;
            transition: all 0.3s ease;
        }
        
        .social-icon:hover img,
        .social-icon:hover svg {
            transform: scale(1.1);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .floating-dock {
                display: none;
            }
            
            .floating-dock-mobile {
                display: block;
            }
            
            .tech-grid {
                margin-left: 0;
                margin-top: 16px;
                justify-content: center;
                gap: 8px;
            }
            
            .tech-item {
                font-size: 0.85rem;
                padding: 6px 12px;
                flex-shrink: 0;
            }
            
            .tech-category-header {
                flex-direction: column;
                align-items: flex-start;
                text-align: center;
            }
            
            .evervault-card {
                height: 24rem;
            }
            
            .evervault-logo-container {
                height: 140px;
                width: 140px;
            }
            
            .evervault-logo {
                width: 110px;
                height: 110px;
            }
            
            .social-icons {
                left: 20px;
                bottom: 20px;
            }
            
            .social-icon {
                width: 40px;
                height: 40px;
            }
        }
        
        /* Additional mobile optimizations */
        @media (max-width: 480px) {
            .tech-grid {
                gap: 6px;
            }
            
            .tech-item {
                font-size: 0.8rem;
                padding: 5px 10px;
            }
            
            .tech-category-icon {
                width: 32px;
                height: 32px;
                font-size: 16px;
            }
            
            .category-title {
                font-size: 1.25rem;
            }
            
            .max-w-7xl {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }
        
        /* Ensure no horizontal overflow */
        .max-w-7xl {
            max-width: min(80rem, calc(100vw - 2rem));
        }
        
        /* Loading Screen Styles */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(15 23 42);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .loading-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .loading-text {
            font-family: 'Inter', sans-serif;
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: 800;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            letter-spacing: 0.1em;
            margin-bottom: 2rem;
            animation: fadeInUp 1s ease-out;
        }
        
        .loading-dots {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }
        
        .loading-dot {
            width: 12px;
            height: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            animation: dotPulse 1.5s infinite ease-in-out;
        }
        
        .loading-dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .loading-dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes dotPulse {
            0%, 80%, 100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
            40% {
                transform: scale(1.2);
                opacity: 1;
            }
        }
        
        /* Hide body content while loading */
        body.loading {
            overflow: hidden;
        }
        
        .main-content {
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .main-content.loaded {
            opacity: 1;
        }
        
        /* Globe Canvas Styles */
        #globe-canvas {
            background: transparent;
            border-radius: 1rem;
            cursor: pointer;
            display: block;
            pointer-events: auto;
        }
        
        #globe-canvas:active {
            cursor: grabbing;
        }
        
        /* Globe container responsive adjustments */
        @media (max-width: 1024px) {
            #globe-canvas {
                max-height: 300px;
            }
        }
        
        /* Globe background blur effect */
        .globe-background {
            filter: blur(1px);
            opacity: 0.8;
            pointer-events: auto;
        }
        
        /* Globe loading indicator */
        .globe-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #667eea;
            font-size: 0.9rem;
        }

        /* Footer Scrolling Text Animation */
        .footer-scroll-text {
            animation: scrollTextSimple 26s linear infinite;
        }

        @keyframes scrollTextSimple {
            0% {
                transform: translateX(75%) translateY(20%);
            }
            100% {
                transform: translateX(-75%) translateY(20%);
            }
        }

        /* Hero Section Mouse Tracking Enhancement */
        #home {
            /* Normal cursor for the hero section */
            cursor: default;
        }

        #hero-content {
            /* Let mouse events pass through to the iframe behind */
            pointer-events: none;
            cursor: default;
        }

        #hero-content h1,
        #hero-content p {
            /* Text elements let mouse events pass through but remain selectable */
            user-select: text;
            pointer-events: none;
            cursor: text;
            position: relative;
        }

        /* Only when text is being selected, enable pointer events temporarily */
        #hero-content h1:hover,
        #hero-content p:hover {
            pointer-events: auto;
        }

        /* Social Icons and other interactive elements keep their pointer events */
        .social-icons,
        .scroll-hint,
        .social-icon {
            pointer-events: auto;
            cursor: pointer;
        }