/* ============================================================
   SMARTPUNKT — MODERN REFRESH LAYER (bold & vibrant)
   Loaded LAST. The hero (.sp-hero*) is intentionally untouched.
   One cohesive system: brand gradient, vibrant depth, rounded shapes.
   ============================================================ */

:root {
    --sp-grad: linear-gradient(135deg, #2563eb 0%, #7c3aed 58%, #9333ea 100%);
    --sp-grad-hover: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 58%, #7e22ce 100%);
    --sp-glow: 0 14px 30px -10px rgba(79, 70, 229, 0.45);
    --sp-glow-hover: 0 20px 42px -12px rgba(79, 70, 229, 0.58);
    --sp-icon-glow: 0 10px 22px -10px rgba(79, 70, 229, 0.5);
    --sp-card-shadow: 0 16px 40px -24px rgba(15, 23, 42, 0.32);
}

/* ---------------- Buttons: signature brand gradient ---------------- */
.btn-primary:not(.btn-green),
.gallery-cta-btn,
.store-btn-primary,
.ka-banner-btn {
    background: var(--sp-grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: var(--sp-glow) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
.btn-primary:not(.btn-green):hover,
.gallery-cta-btn:hover,
.store-btn-primary:hover,
.ka-banner-btn:hover {
    background: var(--sp-grad-hover) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--sp-glow-hover) !important;
}

/* ---------------- Gradient icon tiles on every card ---------------- */
.service-icon,
.city-card-icon,
.mini-card-icon,
.step-icon,
.about-feature-icon,
.contact-card-icon,
.value-icon {
    background: var(--sp-grad) !important;
    color: #fff !important;
    box-shadow: var(--sp-icon-glow) !important;
}
.city-card-icon i,
.mini-card-icon i,
.step-icon i,
.about-feature-icon i { color: #fff !important; }

/* ---------------- Cards: unified rounding + soft vibrant depth ------ */
.service-card,
.city-card,
.store-card,
.testimonial-card,
.step-card,
.mini-card {
    border-radius: 20px !important;
}
.city-card:hover,
.store-card:hover,
.testimonial-card:hover {
    box-shadow: var(--sp-card-shadow) !important;
}