/* CSS for index_solutions_newww.html */

.hero-section { position: relative; overflow: hidden; }
        .hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .18; pointer-events: none; }
        .hero-blob-1 { width: 500px; height: 500px; background: #046bfc; top: -120px; left: -100px; }
        .hero-blob-2 { width: 400px; height: 400px; background: #ff9900; bottom: -80px; right: -60px; }
        .hero-blob-3 { width: 300px; height: 300px; background: #046bfc; top: 40%; left: 60%; }
        .hero-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(4,107,252,.06) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }

        .solution-card {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            padding: 2rem;
            transition: all .3s ease;
            position: relative;
            overflow: hidden;
        }
        .solution-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            border-radius: 1rem 1rem 0 0;
            transition: height .3s ease;
        }
        .solution-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(4,27,61,.1);
            border-color: transparent;
        }
        .solution-card:hover::before { height: 6px; }
        .card-resellers::before  { background: linear-gradient(135deg, #046bfc, #38bdf8); }
        .card-brands::before     { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
        .card-agencies::before   { background: linear-gradient(135deg, #059669, #34d399); }

        .tool-pill {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .35rem .85rem;
            background: #f1f5f9;
            border-radius: 9999px;
            font-size: .8rem;
            color: #334155;
            transition: all .2s ease;
        }
        .tool-pill:hover { background: #e0e7ff; color: #046bfc; }

        .feature-icon-box {
            width: 48px; height: 48px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 12px;
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .solution-card { padding: 1.5rem; }
        }