::-webkit-scrollbar {
            width: 6px;
        }

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

        ::-webkit-scrollbar-thumb {
            background: #10B981;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #059669;
        }

        .gradient-text {
            background: linear-gradient(135deg, #10B981, #34D399, #6EE7B7, #10B981);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shimmer 3s linear infinite;
        }

        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        html:not(.dark) .glass {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        .gradient-border {
            position: relative;
            background: linear-gradient(135deg, #10B981, #059669, #34D399);
            padding: 2px;
            border-radius: 1.5rem;
        }

        .gradient-border-inner {
            border-radius: calc(1.5rem - 2px);
        }

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

        .card-glow:hover {
            box-shadow: 0 0 40px rgba(16, 185, 129, 0.12), 0 0 80px rgba(16, 185, 129, 0.06);
            transform: translateY(-4px);
        }

        .progress-fill {
            transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .circular-progress {
            transform: rotate(-90deg);
        }

        .circular-progress circle {
            transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-ripple {
            position: relative;
            overflow: hidden;
        }

        .btn-ripple::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10);
            opacity: 0;
            transition: transform 0.5s, opacity 0.5s;
        }

        .btn-ripple:active::after {
            transform: scale(0);
            opacity: 0.3;
            transition: 0s;
        }

        .hero-gradient {
            background:
                radial-gradient(ellipse at 15% 50%, rgba(16, 185, 129, 0.12) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 20%, rgba(5, 150, 105, 0.08) 0%, transparent 55%),
                radial-gradient(ellipse at 50% 80%, rgba(52, 211, 153, 0.06) 0%, transparent 50%);
        }

        .grid-pattern {
            background-image:
                linear-gradient(rgba(16, 185, 129, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(16, 185, 129, 0.02) 1px, transparent 1px);
            background-size: 80px 80px;
        }

        .testimonial-track {
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hero-image-container {
            perspective: 1200px;
            transform-style: preserve-3d;
        }

        .hero-image-wrapper {
            transform-style: preserve-3d;
            will-change: transform;
        }

        /* Animated border for hero */
        .animated-border {
            position: relative;
        }

        .animated-border::before {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 2rem;
            background: conic-gradient(from 0deg, #10B981, #34D399, #059669, #6EE7B7, #10B981);
            animation: borderSpin 4s linear infinite;
            z-index: -1;
        }

        .animated-border::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 2rem;
            background: conic-gradient(from 0deg, #10B981, #34D399, #059669, #6EE7B7, #10B981);
            animation: borderSpin 4s linear infinite;
            filter: blur(15px);
            opacity: 0.5;
            z-index: -2;
        }

        .typing-cursor::after {
            content: '|';
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        .popular-badge {
            background: linear-gradient(135deg, #10B981, #059669);
        }

        * {
            transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease;
        }

        .noise::before {
            content: '';
            position: fixed;
            inset: 0;
            opacity: 0.015;
            pointer-events: none;
            z-index: 9999;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .marquee {
            animation: marquee 30s linear infinite;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

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