/* ==========================================================================
   Virtually Rory - polish.css v3
   Premium gloss. Loads AFTER style.css to override safely.

   v3 changes:
   - Removed handwritten nav underline (section 5) - was causing alignment
     issues with the new dropdown buttons. Navbar glass effect retained.

   Remove the <link> tag in header.php to disable.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────
   1. CARDS — PROPERLY LIFTED
   Bigger, more brand-tinted shadows. Real lift on hover.
   ────────────────────────────────────────────────────────────────── */

.card,
.service-card,
.testimonial-card,
.pricing-card,
.feature-card,
.review-card {
    box-shadow:
        0 1px 2px rgba(26, 24, 20, 0.05),
        0 8px 20px rgba(26, 24, 20, 0.06),
        0 24px 48px -8px rgba(44, 79, 122, 0.18);
    transition:
        box-shadow .35s cubic-bezier(.2, .8, .2, 1),
        transform .35s cubic-bezier(.2, .8, .2, 1);
    position: relative;
}

.card:hover,
.service-card:hover,
.testimonial-card:hover,
.pricing-card:hover,
.feature-card:hover,
.review-card:hover {
    box-shadow:
        0 2px 4px rgba(26, 24, 20, 0.06),
        0 12px 28px rgba(26, 24, 20, 0.08),
        0 40px 64px -12px rgba(44, 79, 122, 0.32);
    transform: translateY(-6px);
}

.pricing-card.featured,
.pricing-card.popular,
.card.featured {
    box-shadow:
        0 2px 4px rgba(26, 24, 20, 0.06),
        0 16px 32px rgba(26, 24, 20, 0.08),
        0 48px 80px -16px rgba(44, 79, 122, 0.36);
}

/* ──────────────────────────────────────────────────────────────────
   2. CARDS — GLASS HIGHLIGHT + BRAND TOP BORDER ON HOVER
   ────────────────────────────────────────────────────────────────── */

.card,
.service-card,
.testimonial-card,
.pricing-card,
.feature-card,
.review-card {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 1),
            rgba(251, 249, 245, 0.6)
        );
}

.card::before,
.service-card::before,
.testimonial-card::before,
.pricing-card::before,
.feature-card::before,
.review-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1);
    pointer-events: none;
    z-index: 1;
}

.card::after,
.service-card::after,
.testimonial-card::after,
.pricing-card::after,
.feature-card::after,
.review-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 2;
}

.card:hover::after,
.service-card:hover::after,
.testimonial-card:hover::after,
.pricing-card:hover::after,
.feature-card:hover::after,
.review-card:hover::after {
    opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────
   3. HERO — VISIBLE BRAND GLOW + AMBIENT MOVEMENT
   ────────────────────────────────────────────────────────────────── */

.hero,
.page-hero,
section.hero,
.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero::before,
.page-hero::before,
section.hero::before,
.hero-section::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 70%;
    height: 90%;
    background: radial-gradient(
        ellipse at center,
        rgba(91, 127, 181, 0.35),
        rgba(91, 127, 181, 0.12) 40%,
        transparent 70%
    );
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
    animation: vr-pulse-1 8s ease-in-out infinite;
}

.hero::after,
.page-hero::after,
section.hero::after,
.hero-section::after {
    content: "";
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 60%;
    height: 70%;
    background: radial-gradient(
        ellipse at center,
        rgba(44, 79, 122, 0.22),
        rgba(44, 79, 122, 0.08) 40%,
        transparent 70%
    );
    filter: blur(70px);
    z-index: -1;
    pointer-events: none;
    animation: vr-pulse-2 10s ease-in-out infinite;
}

@keyframes vr-pulse-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50%      { transform: translate(20px, -10px) scale(1.1); opacity: 0.8; }
}
@keyframes vr-pulse-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50%      { transform: translate(-20px, 10px) scale(1.05); opacity: 0.85; }
}

/* ──────────────────────────────────────────────────────────────────
   4. PRIMARY CTAs — RICH GRADIENT WITH SHIMMER SWEEP ON HOVER
   ────────────────────────────────────────────────────────────────── */

.btn-primary,
.cta-primary,
.btn-cta,
button.primary,
a.btn-primary,
a.cta-primary,
.nav-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1814 0%, #2a2620 50%, #1a1814 100%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 0% !important;
    border: 1.5px solid transparent !important;
    color: #fff !important;
    transition:
        background-position .6s ease,
        transform .2s cubic-bezier(.2, .8, .2, 1),
        box-shadow .3s ease !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 4px rgba(26, 24, 20, 0.15),
        0 8px 20px rgba(44, 79, 122, 0.25) !important;
}

.btn-primary::before,
.cta-primary::before,
.btn-cta::before,
.nav-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(91, 127, 181, 0.4),
        transparent
    );
    transition: left .6s ease;
    pointer-events: none;
}

.btn-primary:hover,
.cta-primary:hover,
.btn-cta:hover,
button.primary:hover,
a.btn-primary:hover,
a.cta-primary:hover,
.nav-cta:hover {
    background-position: 100% 100% !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 8px rgba(26, 24, 20, 0.18),
        0 16px 32px rgba(44, 79, 122, 0.4) !important;
}

.btn-primary:hover::before,
.cta-primary:hover::before,
.btn-cta:hover::before,
.nav-cta:hover::before {
    left: 100%;
}

.btn-primary:active,
.cta-primary:active,
.btn-cta:active,
.nav-cta:active {
    transform: translateY(0) !important;
}

/* ──────────────────────────────────────────────────────────────────
   5. NAVBAR — DEEPER GLASS WHEN SCROLLED
   (Handwritten underline removed in v3 to fix dropdown alignment)
   ────────────────────────────────────────────────────────────────── */

#navbar {
    transition: all .3s ease;
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1px 0 rgba(232, 229, 224, 0.6),
        0 8px 32px -8px rgba(26, 24, 20, 0.12) !important;
}

/* ──────────────────────────────────────────────────────────────────
   6. SHIMMER ACCENT — MORE PRESENT
   ────────────────────────────────────────────────────────────────── */

.hero-accent,
.shimmer-accent {
    display: inline-block;
    height: 4px;
    width: 100px;
    background: linear-gradient(
        90deg,
        var(--brand) 0%,
        #5b7fb5 25%,
        var(--blue-mist) 50%,
        #5b7fb5 75%,
        var(--brand) 100%
    );
    background-size: 200% 100%;
    animation: vr-shimmer 3s ease-in-out infinite;
    border-radius: 4px;
    margin: 0 0 24px;
    box-shadow: 0 2px 8px rgba(44, 79, 122, 0.3);
}

@keyframes vr-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ──────────────────────────────────────────────────────────────────
   7. WARM SECTIONS — RICHER GRADIENT
   ────────────────────────────────────────────────────────────────── */

.section-warm,
.bg-warm,
section.warm {
    background:
        radial-gradient(
            ellipse at top left,
            rgba(234, 240, 247, 0.6),
            transparent 50%
        ),
        radial-gradient(
            ellipse at bottom right,
            rgba(251, 249, 245, 1),
            transparent 50%
        ),
        var(--bg-warm) !important;
}

/* ──────────────────────────────────────────────────────────────────
   8. BODY LINKS — BRAND-COLOURED ANIMATED UNDERLINE
   ────────────────────────────────────────────────────────────────── */

main a:not(.btn):not(.btn-primary):not(.btn-brand):not(.cta-primary):not(.nav-cta):not(.no-underline):not(.logo-link):not(.btn-cta),
.prose a {
    background-image: linear-gradient(var(--brand), var(--brand));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .3s ease, color .2s ease;
    text-decoration: none;
    color: var(--brand);
    font-weight: 500;
}

main a:not(.btn):not(.btn-primary):not(.btn-brand):not(.cta-primary):not(.nav-cta):not(.no-underline):not(.logo-link):not(.btn-cta):hover,
.prose a:hover {
    background-size: 100% 2px;
}

/* ──────────────────────────────────────────────────────────────────
   9. FORM INPUTS — STRONG FOCUS GLOW
   ────────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--brand) !important;
    background: #fff;
    box-shadow:
        0 0 0 5px rgba(44, 79, 122, 0.18),
        inset 0 1px 2px rgba(26, 24, 20, 0.04),
        0 4px 16px rgba(44, 79, 122, 0.12) !important;
}

/* ──────────────────────────────────────────────────────────────────
   10. IMAGES — PROPER FRAMING + DOTTY GLOW
   ────────────────────────────────────────────────────────────────── */

.card img,
.testimonial-card img,
.feature-card img,
img.lifted {
    box-shadow:
        0 2px 4px rgba(26, 24, 20, 0.06),
        0 12px 32px -4px rgba(26, 24, 20, 0.12);
    border-radius: var(--r);
}

img.glow,
.about-photo img,
.profile-photo img,
.dotty-photo img {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px rgba(44, 79, 122, 0.15),
        0 8px 24px rgba(26, 24, 20, 0.12),
        0 24px 60px -8px rgba(44, 79, 122, 0.32);
    border-radius: var(--r-lg);
}

/* ──────────────────────────────────────────────────────────────────
   11. TESTIMONIAL — DECORATIVE QUOTE MARK ON ALL TESTIMONIAL CARDS
   Hidden automatically on the dedicated reviews page (where stacked
   testimonials make repeated quote marks feel noisy).
   ────────────────────────────────────────────────────────────────── */

.testimonial-card,
.review-card {
    overflow: hidden;
}

.testimonial-card > *,
.review-card > * {
    position: relative;
    z-index: 2;
}

.testimonial-card::after,
.review-card::after {
    content: "\201C";
    position: absolute;
    top: -10px;
    right: 16px;
    font-family: var(--display);
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}

/* Hide quote marks on reviews/testimonials pages.
   Pure CSS detection using :has() — when the reviews nav link
   has the .active class, we know we're on the reviews page,
   so we hide the decorative quote marks site-wide.
   Also catches manual body classes if you add them later. */
html:has(.nav-links > a.active[href*="reviews"]) .testimonial-card::after,
html:has(.nav-links > a.active[href*="reviews"]) .review-card::after,
html:has(.nav-links > a.active[href*="testimonials"]) .testimonial-card::after,
html:has(.nav-links > a.active[href*="testimonials"]) .review-card::after,
body.page-reviews .testimonial-card::after,
body.page-reviews .review-card::after,
body.reviews .testimonial-card::after,
body.reviews .review-card::after,
body.testimonials .testimonial-card::after,
body.testimonials .review-card::after,
.reviews-grid .testimonial-card::after,
.reviews-grid .review-card::after,
.reviews-list .testimonial-card::after,
.reviews-list .review-card::after,
.reviews-page .testimonial-card::after,
.reviews-page .review-card::after,
.testimonials-page .testimonial-card::after,
.testimonials-page .review-card::after {
    display: none;
}

/* ──────────────────────────────────────────────────────────────────
   12. FAQ ACCORDION — left alone, original styling preserved
   ────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────
   13. SECTION HEADINGS — SUBTLE GRADIENT TEXT
   Applied ONLY to headings on light backgrounds. Dark sections,
   hero sections, and any heading inside a dark block keep their
   original colour (usually white).
   ────────────────────────────────────────────────────────────────── */

section:not(.dark):not(.bg-dark):not(.bg-brand):not(.cta-section):not([class*="dark"]):not([class*="navy"]) > .wrap > h2,
section:not(.dark):not(.bg-dark):not(.bg-brand):not(.cta-section):not([class*="dark"]):not([class*="navy"]) > h2,
.section-title:not(.light) {
    background: linear-gradient(135deg, var(--ink) 0%, #2a2620 50%, var(--brand) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Belt-and-braces: any heading in a dark section gets warm off-white.
   Matches the --bg-warm cream tone for a cohesive feel. */
section.dark h2,
section.bg-dark h2,
section.bg-brand h2,
section.cta-section h2,
[class*="dark"] h2,
[class*="navy"] h2,
section[style*="background"] h2,
.contact-block h2,
.cta-block h2 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fbf9f5 !important;
    color: #fbf9f5 !important;
}

@supports not (-webkit-background-clip: text) {
    section h2,
    .section-title {
        color: var(--ink);
        -webkit-text-fill-color: initial;
    }
}

/* ──────────────────────────────────────────────────────────────────
   14. FOOTER — SUBTLE GLOW EDGE
   ────────────────────────────────────────────────────────────────── */

footer {
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--brand),
        transparent
    );
    opacity: 0.4;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────
   15. WHATSAPP FLOAT — PULSING GLOW
   ────────────────────────────────────────────────────────────────── */

.wa-float,
.whatsapp-float {
    animation: vr-wa-pulse 3s ease-in-out infinite;
    box-shadow:
        0 4px 12px rgba(37, 211, 102, 0.4),
        0 8px 32px rgba(37, 211, 102, 0.25) !important;
}

@keyframes vr-wa-pulse {
    0%, 100% {
        box-shadow:
            0 4px 12px rgba(37, 211, 102, 0.4),
            0 8px 32px rgba(37, 211, 102, 0.25),
            0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    50% {
        box-shadow:
            0 4px 12px rgba(37, 211, 102, 0.5),
            0 8px 32px rgba(37, 211, 102, 0.35),
            0 0 0 12px rgba(37, 211, 102, 0);
    }
}

/* ──────────────────────────────────────────────────────────────────
   17. HANDWRITTEN ACCENTS (Caveat font)
   Drop these classes in anywhere you want a personal touch.
   Caveat is already loaded by header.php so no extra weight.

   USAGE:
     <span class="hand">most folks pick this one</span>
     <p class="hand-eyebrow">here's the thing</p>
     <span class="hand-note">P.S. — Dotty says hi.</span>
     <span class="hand-arrow-right">start here</span>
     <span class="hand-arrow-left">my favourite</span>
     <span class="hand-arrow-down">click here</span>
     <span class="hand-tilt">cheeky aside</span>
   ────────────────────────────────────────────────────────────────── */

/* Base handwriting class — apply to any element you want set in Caveat */
.hand {
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: 1.35em;
    line-height: 1.2;
    color: var(--brand);
    letter-spacing: 0;
}

/* Eyebrow — small intro text above a heading */
.hand-eyebrow {
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--brand);
    display: inline-block;
    margin-bottom: 8px;
    transform: rotate(-1deg);
}

/* Pull quote — for the standout testimonial line on a page */
.hand-quote {
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.3;
    color: var(--ink);
    display: block;
    max-width: 32ch;
}

@media (min-width: 720px) {
    .hand-quote { font-size: 2.5rem; }
}

/* Sign-off note — for "P.S." moments at the end of a section */
.hand-note {
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--ink-2);
    display: inline-block;
    transform: rotate(-1.5deg);
}

/* Caption — for image captions, especially Dotty's role */
.hand-caption {
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--ink-2);
    display: block;
    margin-top: 6px;
}

/* Slightly tilted aside — for asides and asides only */
.hand-tilt {
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: 1.3em;
    line-height: 1.2;
    color: var(--brand);
    display: inline-block;
    transform: rotate(-2deg);
}

/* ──────────────────────────────────────────────────────────────────
   18. HAND-DRAWN ARROWS
   Hand-drawn SVG arrows in Caveat-friendly style. Pair them with
   a .hand label to point at something on the page.

   USAGE:
     <span class="hand-arrow-right">start here</span>
     <span class="hand-arrow-left">most popular</span>
     <span class="hand-arrow-down">go on then</span>
   ────────────────────────────────────────────────────────────────── */

.hand-arrow-right,
.hand-arrow-left,
.hand-arrow-down {
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Right-pointing arrow — appears after the text */
.hand-arrow-right::after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 24'><path d='M2,14 C12,6 25,4 38,12 M30,7 L38,12 L34,18' stroke='%232C4F7A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(2deg);
}

/* Left-pointing arrow — appears before the text */
.hand-arrow-left::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 24'><path d='M48,14 C38,6 25,4 12,12 M20,7 L12,12 L16,18' stroke='%232C4F7A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-2deg);
}

/* Down-pointing arrow — sits below the text */
.hand-arrow-down {
    flex-direction: column;
    align-items: flex-start;
}
.hand-arrow-down::after {
    content: "";
    display: block;
    width: 30px;
    height: 50px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 50'><path d='M14,2 C8,12 6,25 14,38 M8,30 L14,38 L20,32' stroke='%232C4F7A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-3deg);
    margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────────────
   19. SCATTERED HANDWRITTEN PLACEMENT — automatic
   These rules add Caveat moments to specific spots automatically.
   Comment out any you don't want.
   ────────────────────────────────────────────────────────────────── */

/* Pricing card "popular" / "featured" badge gets handwriting feel */
.pricing-card.featured .badge,
.pricing-card.popular .badge,
.pricing-card .featured-label,
.pricing-card .popular-label {
    font-family: "Caveat", cursive !important;
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transform: rotate(-3deg);
}

/* ──────────────────────────────────────────────────────────────────
   AUTOMATIC HANDWRITING — sensible defaults
   These rules apply Caveat to specific structural spots without
   needing any markup changes. If any of these turn out to be
   unwanted, just delete that block.
   ────────────────────────────────────────────────────────────────── */

/* Eyebrow text — a paragraph or span sitting directly before a heading */
section p.eyebrow,
section .eyebrow,
section p.kicker,
section .kicker,
section p.tagline,
.section-eyebrow,
.section-kicker {
    font-family: "Caveat", cursive !important;
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    color: var(--brand) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 8px !important;
    display: inline-block;
}

/* Image captions inside figure tags */
figure figcaption,
figure small,
.image-caption,
.photo-caption {
    font-family: "Caveat", cursive !important;
    font-weight: 500 !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    color: var(--ink-2) !important;
    letter-spacing: 0 !important;
    margin-top: 8px !important;
}

/* Testimonial author attribution
   Targets the last paragraph or .author/.attribution inside a card */
.testimonial-card .author,
.testimonial-card .attribution,
.testimonial-card cite,
.review-card .author,
.review-card .attribution,
.review-card cite,
.testimonial .author,
.review .author {
    font-family: "Caveat", cursive !important;
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    font-style: normal !important;
}

/* Footer "made with love" signoffs — if you have one */
footer .signoff,
footer .made-with,
footer .with-love,
.footer-signoff {
    font-family: "Caveat", cursive !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    color: var(--ink-3) !important;
    letter-spacing: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────
   20. REDUCED MOTION RESPECT
   ────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hero-accent, .shimmer-accent,
    .hero::before, .hero::after,
    .page-hero::before, .page-hero::after,
    section.hero::before, section.hero::after,
    .wa-float, .whatsapp-float {
        animation: none !important;
    }
    .card:hover, .service-card:hover, .testimonial-card:hover,
    .pricing-card:hover, .feature-card:hover,
    .btn-primary:hover, .cta-primary:hover, .nav-cta:hover {
        transform: none !important;
    }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
    }
}