.technologies-section {
            padding: 80px 0;
            background: var(--bg);
            position: relative;
            overflow: hidden;
        }

        .technologies-section .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-header h2 {
            font-size: clamp(2rem, 4vw, 2.5rem);
            color: var(--primary);
            margin-bottom: 16px;
            font-weight: 700;
        }

        .section-header p {
            font-size: 1.125rem;
            color: var(--muted);
            max-width: 600px;
            margin: 0 auto;
        }

        .tech-categories {
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .tech-category {
            margin-bottom: 40px;
        }

        .category-header {
            margin-bottom: 30px;
            text-align: center;
        }

        .category-header h3 {
            font-size: 1.5rem;
            color: var(--primary);
            font-weight: 600;
            display: inline-block;
            padding: 8px 24px;
            background: rgba(99, 197, 224, 0.1);
            border-radius: 30px;
            border: 2px solid var(--accent-1);
        }

        .tech-scroll-container {
            position: relative;
            overflow: hidden;
            padding: 20px 0;
        }

        .tech-scroll-wrapper {
            display: flex;
            gap: 20px;
            animation: scroll 40s linear infinite;
        }

        .tech-scroll-wrapper:hover {
            animation-play-state: paused;
        }

        .tech-item {
            flex: 0 0 auto;
            width: 120px;
            height: 120px;
            background: white;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-shadow: 0 4px 20px var(--card-shadow);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        [data-theme="dark"] .tech-item {
            background: #1e293b;
        }

        .tech-item:hover {
            transform: translateY(-5px);
            border-color: var(--accent-1);
            box-shadow: 0 8px 30px rgba(99, 197, 224, 0.2);
        }

        .tech-icon {
            font-size: 2rem;
            margin-bottom: 12px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tech-name {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--primary);
            text-align: center;
            line-height: 1.2;
        }

        /* Technology-specific colors */
        .tech-react { color: #61DAFB; }
        .tech-vue { color: #4FC08D; }
        .tech-angular { color: #DD0031; }
        .tech-next { color: #000000; }
        [data-theme="dark"] .tech-next { color: #ffffff; }
        .tech-typescript { color: #3178C6; }
        .tech-tailwind { color: #06B6D4; }
        .tech-node { color: #339933; }
        .tech-python { color: #3776AB; }
        .tech-django { color: #092E20; }
        .tech-laravel { color: #FF2D20; }
        .tech-express { color: #000000; }
        [data-theme="dark"] .tech-express { color: #ffffff; }
        .tech-fastapi { color: #009688; }
        .tech-postgresql { color: #336791; }
        .tech-mongodb { color: #47A248; }
        .tech-mysql { color: #4479A1; }
        .tech-redis { color: #DC382D; }
        .tech-elasticsearch { color: #005571; }
        .tech-aws { color: #FF9900; }
        .tech-docker { color: #2496ED; }
        .tech-kubernetes { color: #326CE5; }
        .tech-jenkins { color: #D24939; }
        .tech-terraform { color: #7B42BC; }
        .tech-gitlab { color: #FC6D26; }
        .tech-react-native { color: #61DAFB; }
        .tech-flutter { color: #02569B; }
        .tech-swift { color: #FA7343; }
        .tech-kotlin { color: #7F52FF; }
        .tech-pwa { color: #5A0FC8; }
        .tech-tensorflow { color: #FF6F00; }
        .tech-pytorch { color: #EE4C2C; }
        .tech-scikit { color: #F7931E; }
        .tech-spark { color: #E25A1C; }
        .tech-powerbi { color: #F2C811; }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-120px * 6 - 20px * 6));
            }
        }

        /* Gradient overlays for scroll effect */
        .tech-scroll-container::before,
        .tech-scroll-container::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px;
            z-index: 2;
            pointer-events: none;
        }

        .tech-scroll-container::before {
            left: 0;
            background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
        }

        .tech-scroll-container::after {
            right: 0;
            background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .technologies-section {
                padding: 60px 0;
            }

            .tech-categories {
                gap: 40px;
            }

            .tech-item {
                width: 100px;
                height: 100px;
            }

            .tech-icon {
                font-size: 1.75rem;
            }

            .tech-name {
                font-size: 0.8rem;
            }

            @keyframes scroll {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(calc(-100px * 4 - 20px * 4));
                }
            }
        }

        @media (max-width: 480px) {
            .technologies-section {
                padding: 40px 0;
            }

            .section-header {
                margin-bottom: 40px;
            }

            .tech-categories {
                gap: 30px;
            }

            .tech-item {
                width: 90px;
                height: 90px;
                padding: 15px;
            }

            .tech-icon {
                font-size: 1.5rem;
                margin-bottom: 8px;
            }

            .tech-name {
                font-size: 0.75rem;
            }

            .category-header h3 {
                font-size: 1.25rem;
                padding: 6px 20px;
            }

            @keyframes scroll {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(calc(-90px * 3 - 20px * 3));
                }
            }
        }