/* BOXMAR Desktop — Animations & Transitions */

/* ============================================
   ENHANCED MICRO-INTERACTIONS
   Smooth, GPU-composited hover effects
   ============================================ */

/* Service cards hover lift */
.svc-card,
.bento-card,
.feature-card,
.info-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-card:hover,
.bento-card:hover,
.feature-card:hover,
.info-card:hover {
    transform: translateY(-6px);
}

/* Button hover refinement */
.btn {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0px) scale(0.98);
    transition-duration: 0.1s;
}

/* Footer link hover */
.footer a {
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer a:hover {
    transform: translateX(3px);
}

/* Chatbot spring open animation */
.chatbox {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.3s ease;
}


/* ============================================
   PHONE UX/UI OVERHAUL — ≤576px
   Further refinements for small screens.
   ============================================ */


/* ============================================
   FLAGSHIP PHONE — CLEAN & SPACIOUS
   iPhone 16 Pro Max (430px) / S25 Ultra (412px)
   Design principle: BREATHE. Less is more.
   ============================================ */

/* ══════════════════════════════════════
   PHONE ≤576px — even more breathing room
   ══════════════════════════════════════ */