/* ========== HERO SECTION ========== */
    .service-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #1a1a2e 100%);
        position: relative;
        overflow: hidden;
        min-height: 380px;
    }
    .service-hero::before {
        content: ''; position: absolute; inset: 0;
        background:
            radial-gradient(ellipse at 15% 50%, rgba(235,0,139,0.25) 0%, transparent 55%),
            radial-gradient(ellipse at 85% 20%, rgba(255,200,45,0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 85%, rgba(100,120,255,0.12) 0%, transparent 45%);
        pointer-events: none;
    }
    .service-hero::after {
        content: ''; position: absolute; inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
        background-size: 36px 36px;
        pointer-events: none;
    }
    .hero-orb {
        position: absolute; border-radius: 50%;
        filter: blur(70px); pointer-events: none; opacity: 0.55;
        animation: orbFloat 9s ease-in-out infinite;
    }
    .hero-orb-1 { width:320px; height:320px; background: radial-gradient(circle, rgba(235,0,139,0.45), transparent); top:-80px; left:-100px; }
    .hero-orb-2 { width:280px; height:280px; background: radial-gradient(circle, rgba(255,200,45,0.35), transparent); bottom:-80px; right:-60px; animation-delay:-4.5s; }
    .hero-orb-3 { width:200px; height:200px; background: radial-gradient(circle, rgba(120,100,255,0.25), transparent); top:40%; left:45%; animation-delay:-2s; }
    
    @keyframes orbFloat {
        0%,100% { transform: translate(0,0) scale(1); }
        33% { transform: translate(18px,-14px) scale(1.06); }
        66% { transform: translate(-12px,10px) scale(0.94); }
    }

    .hero-wave {
        position: absolute; bottom:-2px; left:0; width:100%;
        line-height:0; z-index:10; pointer-events:none;
    }

    @keyframes fadeSlideUp {
        from { opacity:0; transform:translateY(30px); }
        to   { opacity:1; transform:translateY(0); }
    }
    .anim-up { animation: fadeSlideUp 0.6s ease both; }
    .anim-delay-1 { animation-delay:0.1s; }
    .anim-delay-2 { animation-delay:0.2s; }

    /* ========== CARD & TABLE EFFECT ========== */
    .service-card {
        position: relative;
        background: white;
        border-radius: 1.5rem;
        border: 1.5px solid #f0eef5;
        box-shadow: 0 6px 24px rgba(0,0,0,0.05);
        overflow: hidden;
        transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }
    .service-card:hover { 
        transform:translateY(-4px); 
        border-color:rgba(235,0,139,0.2); 
        box-shadow: 0 20px 45px rgba(235,0,139,0.1); 
    }

    .service-card-accent {
        height: 5px; width: 100%;
        background: linear-gradient(90deg, var(--spu-pink), var(--spu-yellow));
    }

    /* Custom Scrollbar */
    .custom-scrollbar::-webkit-scrollbar { height: 8px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #eb008b; }