/* ==========================================================================
   Shared Design Tokens and Global Classes - Sarvani DigiSearch
   ========================================================================== */

/* Glassmorphic Surfaces */
.glass-card, 
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 236, 239, 0.5);
    box-shadow: 0px 10px 30px rgba(26, 43, 76, 0.05);
}

/* Material Symbols Integration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* --- Gradients --- */

/* Home Page Gradient Text (Blue to Pink) */
.spectrum-gradient-text {
    background: linear-gradient(90deg, #0059bb, #0070ea, #d762e8, #f9abff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* IT Solutions Page Gradient Text (Blue to Purple to Orange) */
.spectrum-gradient-text-it {
    background: linear-gradient(90deg, #0059bb, #d762e8, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Digital Marketing Page Gradient Text (Blue to Purple) */
.vibrant-gradient-text {
    background: linear-gradient(135deg, #0059bb, #d762e8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Backgrounds --- */

/* Home Page Mesh Background */
.mesh-gradient-bg {
    background-color: #f8f9fa;
    background-image: 
        radial-gradient(at 0% 0%, rgba(0, 89, 187, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(215, 98, 232, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 112, 234, 0.05) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(249, 171, 255, 0.05) 0px, transparent 50%);
}

/* Digital Marketing Page Mesh Background */
.mesh-bg {
    background-color: #f8f9fa;
    background-image: 
        radial-gradient(at 0% 0%, rgba(0, 89, 187, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(215, 98, 232, 0.05) 0px, transparent 50%);
}

/* --- Buttons --- */

/* Home & IT Solutions CTA (Blue to Purple Gradient Button) */
.spectrum-button,
.primary-btn-gradient {
    background: linear-gradient(135deg, #0059bb 0%, #d762e8 100%);
    transition: all 0.3s ease;
}

.spectrum-button:hover,
.primary-btn-gradient:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 20px rgba(0, 89, 187, 0.4);
    transform: translateY(-2px);
}

/* Digital Marketing CTA (Blue Gradient Button) */
.vibrant-gradient-bg {
    background: linear-gradient(135deg, #0059bb, #0070ea);
    transition: all 0.3s ease;
}

.vibrant-gradient-bg:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 20px rgba(0, 89, 187, 0.4);
    transform: translateY(-2px);
}

/* --- Layouts & Grids --- */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 24px;
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Animations & Effects --- */

.spectrum-glow {
    filter: drop-shadow(0 0 8px rgba(0, 89, 187, 0.3));
}

.pulse-soft {
    animation: pulse-soft 3s infinite ease-in-out;
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.pulse-glow {
    animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}