/* Floating Icons */
    .floating-icons {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        z-index: -1;
        pointer-events: none;
    }
    .floating-icons span {
        position: absolute;
        display: block;
        color: rgba(59, 130, 246, 0.12);
        animation: float 20s linear infinite;
        bottom: -150px;
        will-change: transform, opacity;
    }
    .floating-icons span svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .floating-icons span:nth-child(1) { left: 10%; animation-duration: 25s; animation-delay: -5s; width: 40px; height: 40px; }
    .floating-icons span:nth-child(2) { left: 80%; animation-duration: 30s; animation-delay: -18s; width: 60px; height: 60px;}
    .floating-icons span:nth-child(3) { left: 5%; animation-duration: 18s; animation-delay: -2s; width: 35px; height: 35px;}
    .floating-icons span:nth-child(4) { left: 90%; animation-duration: 22s; animation-delay: -15s; width: 50px; height: 50px;}
    .floating-icons span:nth-child(5) { left: 50%; animation-duration: 28s; animation-delay: -10s; width: 45px; height: 45px;}
    .floating-icons span:nth-child(6) { left: 20%; animation-duration: 35s; animation-delay: -25s; width: 30px; height: 30px;}
    .floating-icons span:nth-child(7) { left: 35%; animation-duration: 19s; animation-delay: -8s; width: 55px; height: 55px;}
    .floating-icons span:nth-child(8) { left: 65%; animation-duration: 26s; animation-delay: -12s; width: 40px; height: 40px;}
    .floating-icons span:nth-child(9) { left: 75%; animation-duration: 32s; animation-delay: -20s; width: 35px; height: 35px;}
    .floating-icons span:nth-child(10) { left: 15%; animation-duration: 21s; animation-delay: 0s; width: 45px; height: 45px;}
    .floating-icons span:nth-child(11) { left: 25%; animation-duration: 29s; animation-delay: -14s; width: 60px; height: 60px;}
    .floating-icons span:nth-child(12) { left: 85%; animation-duration: 24s; animation-delay: -28s; width: 40px; height: 40px;}

    /* Hero Button Enhancement */
    .cta-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-size: 200% 200%;
        animation: gradient-flow 6s ease infinite;
    }

    .glow-on-hover {
        transition: all 0.3s ease;
    }
    .glow-on-hover:hover {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.6), 0 0 60px rgba(118, 75, 162, 0.4);
    }

    /* Modern Feature Cards with Vibrant Colors */
    .feature-card {
        position: relative;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.8) 100%);
        backdrop-filter: blur(20px);
        overflow: hidden;
    }

    .feature-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(var(--glow-color), 0.15) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .feature-card:hover::before {
        opacity: 1;
    }

    .feature-card:hover {
        transform: translateY(-12px) scale(1.03);
        border-color: rgba(var(--glow-color), 0.5);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--glow-color), 0.3);
    }

    .feature-card-1 { --glow-color: 59, 130, 246; }
    .feature-card-2 { --glow-color: 139, 92, 246; }
    .feature-card-3 { --glow-color: 236, 72, 153; }
    .feature-card-4 { --glow-color: 34, 197, 94; }

    /* Animated Icon Containers */
    .icon-wrapper {
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .icon-wrapper::before {
        content: '';
        position: absolute;
        inset: -5px;
        border-radius: 50%;
        background: linear-gradient(45deg, rgba(var(--glow-color), 0.3), transparent);
        opacity: 0;
        animation: rotate 3s linear infinite;
        animation-play-state: paused;
    }

    .feature-card:hover .icon-wrapper::before {
        opacity: 1;
        animation-play-state: running;
    }

    .feature-card:hover .icon-wrapper {
        transform: scale(1.15) rotate(5deg);
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* Timeline with Modern Design */
    .timeline-step {
        position: relative;
        transition: all 0.4s ease;
    }

    .timeline-step::before {
        content: '';
        position: absolute;
        left: 1.25rem;
        top: 3rem;
        bottom: -2rem;
        width: 2px;
        background: linear-gradient(180deg, #3b82f6, #8b5cf6, #ec4899);
    }

    .timeline-step:last-child::before {
        display: none;
    }

    .step-number {
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    }

    .timeline-step:hover .step-number {
        transform: scale(1.3) rotate(360deg);
        box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6);
        background: linear-gradient(135deg, #8b5cf6, #ec4899);
    }

    .step-content {
        opacity: 0.9;
        transition: all 0.3s ease;
    }

    .timeline-step:hover .step-content {
        opacity: 1;
        transform: translateX(10px);
    }

    /* Website Type Cards - Premium Design */
    .website-card {
        position: relative;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.8) 100%);
        backdrop-filter: blur(20px);
        overflow: hidden;
    }

    .website-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(var(--card-color), 0.1) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

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

    .website-card:hover {
        transform: translateY(-15px) scale(1.05);
        border-color: rgba(var(--card-color), 0.5);
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(var(--card-color), 0.4);
    }

    .website-card-1 { --card-color: 99, 102, 241; }
    .website-card-2 { --card-color: 168, 85, 247; }
    .website-card-3 { --card-color: 236, 72, 153; }
    .website-card-4 { --card-color: 245, 158, 11; }

    .website-icon {
        position: relative;
        transition: all 0.4s ease;
    }

    .website-card:hover .website-icon {
        transform: scale(1.2) rotateY(180deg);
        filter: drop-shadow(0 0 20px rgba(var(--card-color), 0.6));
    }

    /* CTA Section with Animated Background */
    .cta-section-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        background-size: 200% 200%;
        animation: gradient-flow 10s ease infinite;
        position: relative;
        overflow: hidden;
    }

    .cta-section-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: 
            radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        animation: float-circles 15s ease-in-out infinite;
    }

    @keyframes float-circles {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(30px, -30px); }
    }

    /* Keyframe Animations */
    @keyframes float {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(-150vh) rotate(720deg); opacity: 0; }
    }

    @keyframes gradient-flow {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .fade-in-up { 
        opacity: 0; 
    }

    .is-visible {
        animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* Section Headers */
    .section-header {
        position: relative;
        display: inline-block;
    }

    .section-header::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
        border-radius: 2px;
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
    }

    /* Mouse tracking effect */
    .feature-card {
        cursor: pointer;
    }