/* ============================================================
   GROWUILD — PREMIUM LAYER (approved subset)
   1) Shadow system   2) Shimmer headline   3) Liquid-glass utility
   4) Mobile perf     5) Magnetic CTA hint  6) Reveal stagger
   ============================================================ */

:root {
    --accent-gold: #E8CF86;
    --accent-gold-deep: #C4A35A;
    --accent-gold-bright: #FFF3C4;

    /* Soft, diffuse — wide blur + low alpha, no visible edge line */
    --shadow-sm: 0 8px 24px -8px rgba(0,0,0,0.05), 0 2px 6px -2px rgba(0,0,0,0.03);
    --shadow-md: 0 16px 40px -12px rgba(0,0,0,0.06), 0 4px 12px -4px rgba(0,0,0,0.04);
    --shadow-lg: 0 28px 60px -16px rgba(0,0,0,0.08), 0 8px 20px -6px rgba(0,0,0,0.05);
    --shadow-xl: 0 48px 90px -24px rgba(0,0,0,0.10), 0 16px 32px -10px rgba(0,0,0,0.06);

    --ease-lux: cubic-bezier(0.25, 0.8, 0.25, 1);
}
body.dark-mode {
    --shadow-sm: 0 8px 24px -8px rgba(0,0,0,0.35), 0 2px 6px -2px rgba(0,0,0,0.25);
    --shadow-md: 0 16px 40px -12px rgba(0,0,0,0.40), 0 4px 12px -4px rgba(0,0,0,0.30);
    --shadow-lg: 0 28px 60px -16px rgba(0,0,0,0.45), 0 8px 20px -6px rgba(0,0,0,0.35);
    --shadow-xl: 0 48px 90px -24px rgba(0,0,0,0.55), 0 16px 32px -10px rgba(0,0,0,0.40);
}

/* ----- 1) Unified premium shadows on cards + hover lift ----- */
.package-card,
.addon-card,
.project-card,
.review-card-new,
#bundleCards > div,
.blog-post-card {
    box-shadow: var(--shadow-md);
    transition: transform 0.35s var(--ease-lux), box-shadow 0.35s var(--ease-lux);
}
.package-card:hover,
.addon-card:hover,
.project-card:hover,
.review-card-new:hover,
#bundleCards > div:hover,
.blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ----- 1b) Global shadow normalizer — soften the visible "edge line"
   on every common shadowed container site-wide. Uses !important so it
   beats inline styles. Colored-glow CTAs are excluded by selector. ----- */
[class*="card"]:not(body):not(html),
.modal-box,
.glass-card,
.service-preview,
.feature-card,
.stats-card,
.process-card,
.team-card,
.testimonial,
.faq-item,
.pricing-card,
.library-item,
.blog-meta-card,
.author-box,
.toc-box,
article.post,
.post-card,
.related-post,
.footer-stamp-area {
    box-shadow: var(--shadow-md) !important;
}
[class*="card"]:not(body):not(html):hover,
.service-preview:hover,
.feature-card:hover,
.stats-card:hover,
.pricing-card:hover,
.library-item:hover,
.post-card:hover,
.related-post:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* ----- 1b) Outline removal — user-flagged surfaces -----
   The normalizer above adds a soft drop shadow which, on dark backgrounds,
   reads as an unwanted rectangular outline around these specific surfaces.
   We explicitly zero out shadow on them (both resting + hover) and restore
   the lift purely via transform on hover for cards.
   Targets: FAQ bubbles, stamp area in sitemap, all 3 package/addon/care
   cards, and "What Our Clients Say" review cards. */
.faq-item,
.faq-question,
.footer-stamp-area,
.package-card,
.addon-card,
.review-card-new {
    box-shadow: none !important;
}
.package-card:hover,
.addon-card:hover,
.review-card-new:hover,
.faq-item:hover,
.faq-question:hover,
.footer-stamp-area:hover {
    box-shadow: none !important;
}

/* ----- 2) Shimmer headline ----- */
.lux-shimmer {
    background: linear-gradient(
        90deg,
        var(--primary, #4CAF50) 0%,
        var(--accent-gold, #E8CF86) 25%,
        var(--accent-gold-bright, #FFF3C4) 50%,
        var(--accent-gold, #E8CF86) 75%,
        var(--primary, #4CAF50) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: lux-sheen 4.5s linear infinite;
    filter: drop-shadow(0 1px 3px rgba(76,175,80,0.18));
}
@keyframes lux-sheen {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ----- 3) Liquid-glass card utility (available for future use) ----- */
.lux-glass {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.70) 0%, rgba(245,250,245,0.55) 100%);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 22px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.lux-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(76,175,80,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(232,207,134,0.08) 0%, transparent 55%);
    pointer-events: none;
}
.lux-glass > * { position: relative; z-index: 1; }
body.dark-mode .lux-glass {
    background: linear-gradient(135deg, rgba(20,22,20,0.72) 0%, rgba(25,32,26,0.55) 100%);
    border: 1px solid rgba(255,255,255,0.08);
}
body.dark-mode .lux-glass::before {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(76,175,80,0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(232,207,134,0.10) 0%, transparent 55%);
}

/* ----- 4) Mobile perf ----- */
a, button, .btn { -webkit-tap-highlight-color: transparent; }
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px; }  /* prevent iOS zoom */
    a, button, .btn { touch-action: manipulation; } /* kill 300ms tap delay */
    .wa-mobile-bar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
section, .site-footer, .blog-post-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
}

/* ----- 5) Magnetic CTA — companion smoothness for JS ----- */
.lux-magnetic {
    transition: transform 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux);
    will-change: transform;
}

/* ----- 5b) Stamp area — tight playground + one-time hint pill -----
   User re-reported empty space was still too big, so we aggressively
   collapse both the stamp min-height and the #final-cta bottom padding,
   and pull the stamp area up into the CTA on every breakpoint. */
.footer-stamp-area {
    min-height: 160px !important;
    margin-top: -32px !important;   /* overlap into #final-cta */
    margin-bottom: 12px !important;
}
@media (max-width: 768px) {
    .footer-stamp-area {
        min-height: 140px !important;
        margin-top: -40px !important;
        margin-bottom: 8px !important;
    }
}
/* Pre-stamp section (#final-cta) — collapse bottom padding hard so the
   stamp sits flush against the CTA. */
#final-cta { padding-bottom: 12px !important; }
@media (max-width: 768px) {
    #final-cta { padding-bottom: 8px !important; }
}

/* Persistent "Tap Anywhere Below" hint — floats ABOVE the stamp playground
   (the empty area) instead of sitting inside it, so it reads as a label
   pointing down at the interactive space. */
.stamp-hint {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--gray, #8a8a8a);
    background: var(--light, #f5f5f5);
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid var(--card-border, rgba(0,0,0,0.08));
    white-space: nowrap;
    opacity: 0;
    z-index: 3;
    transition: opacity 0.5s var(--ease-lux, ease), transform 0.5s var(--ease-lux, ease);
    animation: stampHintNudge 2.4s ease-in-out infinite;
}
.stamp-hint.is-visible { opacity: 1; }
.stamp-hint.is-dismissed {
    opacity: 0 !important;
    transform: translateX(-50%) scale(0.9) !important;
    transition: opacity 0.35s ease, transform 0.35s ease;
    animation: none !important;
}
.stamp-hint svg {
    width: 14px;
    height: 14px;
    opacity: 0.85;
}
body.dark-mode .stamp-hint {
    background: rgba(30, 34, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(240, 240, 240, 0.75);
}
/* Gentle downward nudge toward the playground below — reinforces the
   "below" directive in the label. */
@keyframes stampHintNudge {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(4px); }
}

/* Persistent variant — sits ABOVE the stamp playground (not centered on it)
   so the label is always present as an ongoing invitation without covering
   stamps the user has already dropped. */
.stamp-hint.stamp-hint--persistent {
    top: 14px;
    left: 50%;
    transform: translate(-50%, 0);
    animation: stampHintNudgeTop 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}
.stamp-hint.stamp-hint--persistent.is-visible {
    opacity: 1;
}
@keyframes stampHintNudgeTop {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 4px); }
}
@media (max-width: 768px) {
    .stamp-hint.stamp-hint--persistent { top: 10px; font-size: 0.74rem; padding: 5px 13px; }
}

/* ----- 6) Reveal stagger (one-shot) ----- */
.lux-reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-lux), transform 0.6s var(--ease-lux);
}
.lux-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.lux-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.05s; }
.lux-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.10s; }
.lux-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.15s; }
.lux-reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ----- Reduced-motion respect ----- */
@media (prefers-reduced-motion: reduce) {
    .lux-shimmer { animation: none; }
    .lux-reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ----- 7) Theme transition — visible wipe sweep, content stays legible -----
   The wipe animation is RESTORED but its opacity is capped so it reads as a
   tonal sweep across the page instead of an opaque curtain. Content beneath
   remains fully visible and clickable (pointer-events already none on the
   wipe element). A smooth CSS transition on the body's background / text
   colour handles the underlying theme swap. */
.theme-wipe {
    opacity: 0.55 !important;
    mix-blend-mode: multiply;
}
body.dark-mode .theme-wipe {
    mix-blend-mode: screen;
}
html, body {
    transition:
        background-color 0.45s var(--ease-lux),
        background 0.45s var(--ease-lux),
        color 0.45s var(--ease-lux);
}
/* Cards / sections whose backgrounds are driven by CSS vars should also
   fade smoothly. Safe property list — won't fight hover transforms. */
section, nav, .site-footer, .mobile-menu,
.package-card, .addon-card, .project-card, .review-card-new,
.blog-post-card, .modal-box, .glass-card, .service-preview,
.feature-card, .pricing-card, .library-item, .post-card, .related-post,
.footer-stamp-area, .project-preview-wrapper {
    transition:
        background-color 0.45s var(--ease-lux),
        background 0.45s var(--ease-lux),
        color 0.45s var(--ease-lux),
        border-color 0.45s var(--ease-lux),
        box-shadow 0.35s var(--ease-lux),
        transform 0.35s var(--ease-lux);
}

/* ----- 8) Project preview skeleton — instant visual while microlink loads -----
   Shows branded gradient + site name immediately so the card never looks
   empty. The real screenshot img fades in on top once decoded. */
.project-preview-wrapper {
    background: linear-gradient(135deg, var(--primary, #4CAF50) 0%, var(--secondary, #00BCD4) 100%);
    position: relative;
}
.project-preview-wrapper::before {
    content: attr(data-title);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #fff;
    font-family: 'Outfit', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
    z-index: 0;
    pointer-events: none;
}
.project-preview-wrapper img {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s var(--ease-lux);
}
.project-preview-wrapper img.is-loaded,
.project-preview-wrapper img[complete] {
    opacity: 1;
}

/* ============================================================
   9) Motion polish — buttons, reveals, modals, page transition
   ------------------------------------------------------------
   Sitewide micro-interaction upgrade. Uses CSS variables so any
   rule that already references --ease-lux / --ease-spring keeps
   working; new rules here add the spring feel + softer reveals.
   ============================================================ */
:root {
    --ease-lux: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 9a) Button micro-interactions --- */
.btn, button.btn, a.btn {
    transition:
        transform 0.28s var(--ease-spring),
        box-shadow 0.3s var(--ease-soft),
        background-color 0.3s var(--ease-soft),
        color 0.3s var(--ease-soft),
        border-color 0.3s var(--ease-soft),
        filter 0.3s var(--ease-soft);
    will-change: transform;
}
.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}
.btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.12s;
    filter: brightness(0.98);
}
.btn:focus-visible {
    outline: 2px solid var(--primary, #4CAF50);
    outline-offset: 3px;
}
/* Don't let the motion polish fight the care-package carousel arrow chrome */
.carousel-arrow { transition: transform 0.25s var(--ease-spring), opacity 0.25s ease, background 0.25s ease; }
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.94); }

/* --- 9b) Card lift (applies to all main card classes, no shadow) --- */
.package-card, .addon-card, .project-card, .library-card, .review-card-new {
    transition:
        transform 0.45s var(--ease-spring),
        border-color 0.3s var(--ease-soft),
        background-color 0.3s var(--ease-soft);
}
.package-card:hover, .addon-card:hover, .library-card:hover, .review-card-new:hover {
    transform: translateY(-4px);
}
.package-card:active, .addon-card:active, .library-card:active, .review-card-new:active {
    transform: translateY(-1px) scale(0.995);
    transition-duration: 0.12s;
}

/* --- 9c) Scroll reveals — softer, slightly springier --- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.75s var(--ease-soft),
        transform 0.75s var(--ease-spring);
    will-change: opacity, transform;
}
.reveal.is-visible,
.reveal[inview="true"] {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-visible, .reveal[inview="true"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --- 9d) Modal / popup entrance --- */
.modal, .modal-box, .popup, .gu-modal, dialog[open] {
    animation: guPopIn 0.45s var(--ease-spring) both;
}
@keyframes guPopIn {
    0%   { opacity: 0; transform: translateY(16px) scale(0.96); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-backdrop, .popup-backdrop, .gu-modal-backdrop {
    animation: guFadeIn 0.35s var(--ease-soft) both;
}
@keyframes guFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- 9f) Tactile feedback for links inside cards --- */
a.project-card, a.library-card, a.package-card, a.addon-card {
    -webkit-tap-highlight-color: transparent;
}

/* --- 9g) Reduced motion across the board --- */
@media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover, .btn:active,
    .package-card, .addon-card, .project-card, .library-card, .review-card-new,
    .carousel-arrow,
    .modal, .modal-box, .popup, .gu-modal, dialog[open],
    .modal-backdrop, .popup-backdrop, .gu-modal-backdrop {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   10) GROWUILD HYBRID WORDMARK — user-picked direction
   ------------------------------------------------------------
   Two sizes:
     .gu-mark       → nav / small inline use (simpler — no sprout, no swoosh)
     .gu-mark-hero  → preloader / page-transition / hero (full fx)
   Base: Bagel Fat One (chubby). Letters wobble, snap flat on hover.
   "i" dot replaced by a leaf. Hero variant adds sprout over "G" and
   a gold hand-drawn swoosh underline. Green→gold gradient fill.
   ============================================================ */
/* NOTE: Bagel Fat One is loaded via <link rel="stylesheet"> in each page
   <head>. The previous @import here was silently dropped by every browser
   because @import MUST precede all rules per CSS spec, and there are 487
   rules above this line. Keeping it out on purpose. */

.gu-mark, .gu-mark-hero {
    font-family: 'Bagel Fat One', 'Onest', 'Outfit', sans-serif;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1;
    position: relative;
    display: inline-flex;
    isolation: isolate;
    color: transparent;
}
.gu-mark .l,
.gu-mark-hero .l {
    display: inline-block;
    background: linear-gradient(170deg, #2E7D32 0%, #7CB342 55%, #E8CF86 115%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform-origin: center 82%;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
/* Wobble offsets — same pattern for both sizes */
.gu-mark .l:nth-child(2),
.gu-mark-hero .l:nth-child(2) { transform: rotate(-3deg); }
.gu-mark .l:nth-child(3),
.gu-mark-hero .l:nth-child(3) { transform: rotate(2deg); }
.gu-mark .l:nth-child(4),
.gu-mark-hero .l:nth-child(4) { transform: rotate(-1.5deg); }
.gu-mark .l:nth-child(5),
.gu-mark-hero .l:nth-child(5) { transform: rotate(2.2deg); }
.gu-mark .l:nth-child(6),
.gu-mark-hero .l:nth-child(6) { transform: rotate(-1deg); }
.gu-mark .l:nth-child(7),
.gu-mark-hero .l:nth-child(7) { transform: rotate(-2deg); }
.gu-mark .l:nth-child(8),
.gu-mark-hero .l:nth-child(8) { transform: rotate(2.5deg); }
.gu-mark .l:nth-child(9),
.gu-mark-hero .l:nth-child(9) { transform: rotate(-1.8deg); }
.gu-mark:hover .l,
.gu-mark-hero:hover .l { transform: rotate(0deg); }

/* Leaf tittle replacing the "i" dot */
.gu-mark .i-slot,
.gu-mark-hero .i-slot {
    position: relative;
    color: transparent;
}
.gu-mark .i-slot > .leaf-dot,
.gu-mark-hero .i-slot > .leaf-dot {
    position: absolute;
    top: -0.05em;
    left: 50%;
    width: 0.48em;
    height: 0.48em;
    transform: translateX(-50%) rotate(-20deg);
    color: #7CB342;
    filter: drop-shadow(0 2px 6px rgba(124,179,66,0.35));
    animation: guLeafBreathe 3.2s ease-in-out infinite;
}
.gu-mark .i-slot > .leaf-dot svg,
.gu-mark-hero .i-slot > .leaf-dot svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}
@keyframes guLeafBreathe {
    0%, 100% { transform: translateX(-50%) rotate(-20deg) scale(1); }
    50%      { transform: translateX(-50%) rotate(-8deg) scale(1.08); }
}

/* Nav size — premium hero-style at compact scale */
.gu-mark {
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    padding: 0.22em 0.08em 0.18em;
}

/* Hero variant — preloader / page-transition / oversized treatments */
.gu-mark-hero {
    font-size: clamp(2.8rem, 9vw, 5.8rem);
    padding: 0.15em 0.08em 0.28em;
}
/* Sprout growing out of the "G" — shared across nav + hero */
.gu-mark .sprout-H,
.gu-mark-hero .sprout-H {
    position: absolute;
    top: -0.38em;
    left: 0;
    width: 0.58em;
    height: 0.58em;
    color: #7CB342;
    transform-origin: bottom center;
    animation: guSprout 3.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(124,179,66,0.3));
    z-index: 2;
}
.gu-mark .sprout-H svg,
.gu-mark-hero .sprout-H svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}
/* Nav sprout: slightly smaller/tighter */
.gu-mark .sprout-H {
    top: -0.32em;
    width: 0.5em;
    height: 0.5em;
}
@keyframes guSprout {
    0%, 100% { transform: rotate(-14deg) scale(1); }
    50%      { transform: rotate(-4deg)  scale(1.08); }
}
/* Gold hand-drawn swoosh underline — shared across nav + hero */
.gu-mark .swoosh-H,
.gu-mark-hero .swoosh-H {
    position: absolute;
    left: 6%;
    right: 4%;
    bottom: 0.02em;
    height: 0.22em;
    color: #E8CF86;
    opacity: 0.95;
    filter: drop-shadow(0 2px 8px rgba(232,207,134,0.35));
    z-index: -1;
    pointer-events: none;
}
.gu-mark .swoosh-H svg,
.gu-mark-hero .swoosh-H svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}
/* BULLETPROOF: the sprout/leaf/swoosh wrappers are absolutely positioned
   with em-based width/height. On some mobile builds the parent .gu-mark's
   clamp() font-size resolves BEFORE the em calc, and if it's briefly 0
   or huge, the wrappers misbehave. Pin absolute max dimensions. */
.gu-mark .sprout-H,
.gu-mark-hero .sprout-H,
.gu-mark .i-slot > .leaf-dot,
.gu-mark-hero .i-slot > .leaf-dot {
    max-width: 40px !important;
    max-height: 40px !important;
    overflow: hidden;
}
.gu-mark .swoosh-H,
.gu-mark-hero .swoosh-H {
    max-height: 12px !important;
    overflow: hidden;
}
/* Lock the footer brand logo img + gu-mark to sane sizes so neither the
   32/36px bitmap nor the wordmark ever explodes on mobile. */
.footer-brand-logo img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
    object-fit: contain !important;
}
/* Match the navbar wordmark exactly — same font-size clamp, and do NOT
   clip overflow here (the sprout sits above the baseline with negative
   top, so overflow:hidden was killing it in the footer). */
.footer-brand-logo .gu-mark {
    font-size: clamp(1.55rem, 2vw, 1.9rem) !important;
    flex: 0 1 auto !important;
    overflow: visible !important;
    max-width: none !important;
}
.gu-mark .swoosh-H {
    bottom: -0.04em;
    height: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
    .gu-mark .l, .gu-mark-hero .l,
    .gu-mark .i-slot > .leaf-dot, .gu-mark-hero .i-slot > .leaf-dot,
    .gu-mark-hero .sprout-H {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   11) PAGE TRANSITION OVERLAY — paint tidy
   ============================================================ */
#guOverlay { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#guOverlay svg { will-change: transform; }

/* ============================================================
   12) FLOATING PILL NAVBAR — sticky, frosted, theme-aware
   ------------------------------------------------------------
   Sits at the same top region as the baseline nav, but styled
   as a pill that floats inset from the edges. Default = translucent
   frosted glass; on scroll becomes more opaque. Auto-inverts for
   dark mode via CSS custom properties.
   ============================================================ */
:root {
    --nav-pill-bg:       rgba(255,255,255,0.55);
    --nav-pill-bg-solid: rgba(255,255,255,0.88);
    --nav-pill-border:   rgba(15, 23, 16, 0.08);
    --nav-pill-border-s: rgba(15, 23, 16, 0.12);
    --nav-pill-shadow:   0 12px 40px -12px rgba(15, 40, 20, 0.18),
                         0 2px 8px -2px rgba(15, 40, 20, 0.06);
    --nav-pill-shadow-s: 0 18px 54px -14px rgba(15, 40, 20, 0.28),
                         0 4px 12px -3px rgba(15, 40, 20, 0.10);
}
body.dark-mode {
    --nav-pill-bg:       rgba(22, 34, 26, 0.48);
    --nav-pill-bg-solid: rgba(22, 34, 26, 0.82);
    --nav-pill-border:   rgba(124, 179, 66, 0.14);
    --nav-pill-border-s: rgba(124, 179, 66, 0.22);
    --nav-pill-shadow:   0 14px 44px -12px rgba(0,0,0,0.55),
                         0 2px 8px -2px rgba(0,0,0,0.35);
    --nav-pill-shadow-s: 0 20px 58px -14px rgba(0,0,0,0.70),
                         0 4px 12px -3px rgba(0,0,0,0.45);
}

nav {
    position: fixed !important;
    top: 14px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    height: 66px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    background: var(--nav-pill-bg) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
    backdrop-filter: blur(18px) saturate(1.5) !important;
    border: 1px solid var(--nav-pill-border) !important;
    border-bottom: 1px solid var(--nav-pill-border) !important;
    border-radius: 999px !important;
    box-shadow: var(--nav-pill-shadow) !important;
    z-index: 20001;
    transition:
        top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        background 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
nav.scrolled {
    top: 10px !important;
    background: var(--nav-pill-bg-solid) !important;
    border-color: var(--nav-pill-border-s) !important;
    box-shadow: var(--nav-pill-shadow-s) !important;
}
nav > .container,
nav > .nav-content {
    padding-left: 10px;
    padding-right: 10px;
}

/* Mobile-menu now drops from the floating pill rather than from y=80 */
.mobile-menu {
    top: 92px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    border-radius: 22px !important;
    /* Opaque surface so page text behind doesn't show through */
    background: rgba(255,255,255,0.98) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    box-shadow: 0 22px 60px -18px rgba(15, 40, 20, 0.28),
                0 8px 20px -6px rgba(15, 40, 20, 0.10) !important;
    border: 1px solid rgba(15, 23, 16, 0.08) !important;
    overflow: hidden !important;
}
body.dark-mode .mobile-menu {
    background: rgba(22, 34, 26, 0.98) !important;
    border-color: rgba(124, 179, 66, 0.18) !important;
    box-shadow: 0 22px 60px -18px rgba(0,0,0,0.6),
                0 8px 20px -6px rgba(0,0,0,0.4) !important;
}
.mobile-menu.active {
    max-height: calc(100vh - 110px) !important;
}

@media (max-width: 768px) {
    nav {
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        height: 60px !important;
        padding: 0 8px !important;
    }
    nav.scrolled { top: 8px !important; }
    .mobile-menu {
        top: 78px !important;
        left: 10px !important;
        right: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav { transition: none !important; }
}

/* ============================================================
   13) CARD/BUBBLE CONTRAST — color-only (no outlines)
   ------------------------------------------------------------
   Bumps the card surface (--white) to a slightly lighter, more
   opaque tone than the page bg so card perimeters are visible
   purely by color difference. No borders added. Tokens only.
   ============================================================ */
:root {
    --white:      rgba(255, 253, 248, 0.96);
    --section-alt: rgba(249, 240, 228, 0.88);
}
body.dark-mode {
    --white:      rgba(34, 58, 41, 0.82);
    --section-alt: rgba(22, 40, 28, 0.72);
}

/* ============================================================
   14) PERFORMANCE — render/paint containment, GPU hints
   ------------------------------------------------------------
   No visual change. Lets the browser skip offscreen painting
   for heavy below-the-fold sections and use the compositor for
   frequently-moving elements. Safe across Chromium, Safari 18+,
   Firefox 125+ (progressive-enhanced where unsupported).
   ============================================================ */

/* Skip rendering work for long offscreen sections. Intrinsic-size
   keeps scrollbar + anchor jumps accurate until the section paints. */
section,
.review-section,
.footer-ticker,
.mega-footer,
.site-footer,
.packages-grid,
.addon-grid {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1200px;
}

/* Don't containment-skip the hero — it's above the fold and must paint. */
#home,
.hero,
nav,
.mobile-menu,
#growuild-preloader,
#guOverlay { content-visibility: visible !important; }

/* Layout/paint containment on cards — prevents sibling reflow on hover */
.addon-card,
.package-card,
.project-card,
.library-card,
.review-card-new {
    contain: layout paint;
}

/* Promote frequently-animated elements to their own layer */
.gu-mark .l,
.gu-mark-hero .l,
.btn,
.hamburger span,
.mobile-menu,
#scroll-progress,
.footer-ticker__track {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Lower image decode cost site-wide */
img { content-visibility: auto; }

/* ============================================================
   14) HAMBURGER + MENU MOTION — lusion.co-inspired
   ------------------------------------------------------------
   Smoother 3-line → X morph with spring easing. Drawer slides
   down + fades in with a scale cue. Links stagger-fade behind.
   ============================================================ */
.hamburger {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hamburger span {
    transition:
        top 0.45s cubic-bezier(0.68, -0.35, 0.27, 1.4),
        transform 0.55s cubic-bezier(0.68, -0.35, 0.27, 1.4),
        opacity 0.25s ease,
        background 0.35s ease !important;
    transform-origin: center center !important;
    will-change: transform, top, opacity;
}
/* Active state — smoother X */
.hamburger.active span:nth-child(1) {
    top: 11px !important;
    transform: rotate(45deg) !important;
}
.hamburger.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) translateX(8px) !important;
}
.hamburger.active span:nth-child(3) {
    top: 11px !important;
    transform: rotate(-45deg) !important;
}

/* Drawer enter/exit — replace max-height crunch with translate+fade */
.mobile-menu {
    max-height: none !important;
    height: auto !important;
    /* Collapsed state */
    transform: translateY(-14px) scale(0.985);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    padding: 0 !important;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.5s !important;
}
.mobile-menu.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    padding: 14px 0 !important;
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s !important;
}

/* Stagger-fade child links in the drawer */
.mobile-menu > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.active > * {
    opacity: 1;
    transform: translateY(0);
}
.mobile-menu.active > *:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.active > *:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu.active > *:nth-child(3) { transition-delay: 0.20s; }
.mobile-menu.active > *:nth-child(4) { transition-delay: 0.26s; }
.mobile-menu.active > *:nth-child(5) { transition-delay: 0.32s; }
.mobile-menu.active > *:nth-child(6) { transition-delay: 0.38s; }
.mobile-menu.active > *:nth-child(7) { transition-delay: 0.44s; }
.mobile-menu.active > *:nth-child(8) { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
    .hamburger span,
    .mobile-menu,
    .mobile-menu > * {
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================================
   14.5 — FOOTER CONTACT BLOCK (WhatsApp / Email pills)
   Centered in column, icon next to label, pill-shaped link
   beneath. Shared across all pages via premium.css.
   ========================================================= */
.footer-contact-item {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.footer-contact-head {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 6px;
    max-width: 100%;
}
/* HARD-PIN footer contact icons — some mobile browsers drop the 18px
   constraint when parent flex context is interrupted and the SVG balloons
   to fill the viewport. !important + explicit max-width is bulletproof. */
.footer-contact-head svg,
.footer-contact-head svg.wa-ico,
.footer-contact-head svg.em-ico {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    min-width: 0 !important;
    flex: 0 0 18px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
.footer-contact-head .wa-ico { color: #25D366; }
.footer-contact-head .em-ico { color: var(--primary, #2E7D32); }
body.dark-mode .footer-contact-head { color: #E9F5EC; }
body.dark-mode .footer-contact-head .em-ico { color: #7CB342; }
.footer-contact-link {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--primary, #2E7D32);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(76, 175, 80, 0.08);
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.25s ease,
        color 0.25s ease;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.footer-contact-link:hover {
    background: rgba(76, 175, 80, 0.18);
    transform: translateY(-1px);
    color: #2E7D32;
    text-decoration: none;
}
body.dark-mode .footer-contact-link {
    background: rgba(124, 179, 66, 0.14);
    color: #A7E0A8;
}
body.dark-mode .footer-contact-link:hover {
    background: rgba(124, 179, 66, 0.26);
    color: #D6EFDA;
}
/* Center the "Need Help?" column heading as well so the whole block reads
   as one cohesive unit. Scoped to footer-col that contains a contact item. */
.footer-col:has(.footer-contact-item) h4 {
    text-align: center;
}
@media (max-width: 480px) {
    .footer-contact-link { font-size: 0.82rem; padding: 3px 10px; }
}

/* =========================================================
   15 — PLAYFUL MICRO-INTERACTIONS ("144Hz" feel)
   Goal:
   (a) Kill the off-putting hard outlines on cards/bubbles.
       Contrast is achieved via --white token + a soft inner
       ring (box-shadow inset) that reads as depth, not border.
   (b) Spring-eased hover lifts, click press feedback, shimmer
       on buttons, and smoother scroll-reveal transforms.
   All transforms are compositor-friendly (translate/scale/
   rotate only) to keep paint cheap on mobile.
   ========================================================= */

:root {
    --spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-soft:   cubic-bezier(0.22, 1, 0.36, 1);
    --spring-pop:    cubic-bezier(0.68, -0.35, 0.27, 1.45);
    --ring-soft:     0 0 0 1px rgba(46, 125, 50, 0.06) inset;
    --ring-soft-dk:  0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    --lift-shadow:   0 24px 60px -20px rgba(20, 50, 30, 0.22),
                     0 8px 20px -8px rgba(20, 50, 30, 0.14);
}
body.dark-mode {
    --ring-soft: var(--ring-soft-dk);
    --lift-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55),
                   0 8px 20px -8px rgba(0, 0, 0, 0.35);
}

/* --- (a) Kill hard card borders globally -------------------
   Replace 1–2px hairlines with a soft inset ring so the card
   edge is felt, not seen. Keeps color contrast work intact. */
.sticky-card,
.addon-card,
.package-card,
.project-card,
.library-card,
.review-card-new,
.review-card,
.faq-item,
.faq-sidebar,
.contact-card,
.service-card,
.feature-card,
.pricing-card,
.stat-card,
.blog-card,
.post-card,
.info-card,
.team-card,
.bubble,
.modal-box,
.popup-box,
.card {
    border: 0 !important;
    box-shadow:
        var(--ring-soft),
        0 12px 40px -16px rgba(20, 50, 30, 0.10),
        0 2px 6px -2px rgba(20, 50, 30, 0.06);
    transition:
        transform 0.55s var(--spring),
        box-shadow 0.55s var(--spring-soft),
        background-color 0.4s ease;
    will-change: transform;
}
body.dark-mode .sticky-card,
body.dark-mode .addon-card,
body.dark-mode .package-card,
body.dark-mode .project-card,
body.dark-mode .library-card,
body.dark-mode .review-card-new,
body.dark-mode .review-card,
body.dark-mode .faq-item,
body.dark-mode .faq-sidebar,
body.dark-mode .contact-card,
body.dark-mode .service-card,
body.dark-mode .feature-card,
body.dark-mode .pricing-card,
body.dark-mode .stat-card,
body.dark-mode .blog-card,
body.dark-mode .post-card,
body.dark-mode .info-card,
body.dark-mode .team-card,
body.dark-mode .bubble,
body.dark-mode .modal-box,
body.dark-mode .popup-box,
body.dark-mode .card {
    box-shadow:
        var(--ring-soft-dk),
        0 12px 40px -16px rgba(0, 0, 0, 0.55),
        0 2px 6px -2px rgba(0, 0, 0, 0.35);
}

/* --- (b) Spring hover lift on cards ------------------------
   Exclude .sticky-card: it's position:sticky and translating
   it fights the scroll snap. Give it a gentle inner glow instead. */
.addon-card:hover,
.package-card:hover,
.project-card:hover,
.library-card:hover,
.review-card-new:hover,
.review-card:hover,
.contact-card:hover,
.service-card:hover,
.feature-card:hover,
.pricing-card:hover,
.blog-card:hover,
.post-card:hover,
.info-card:hover,
.team-card:hover,
.card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow:
        var(--ring-soft),
        var(--lift-shadow);
}
body.dark-mode .addon-card:hover,
body.dark-mode .package-card:hover,
body.dark-mode .project-card:hover,
body.dark-mode .library-card:hover,
body.dark-mode .review-card-new:hover,
body.dark-mode .review-card:hover,
body.dark-mode .contact-card:hover,
body.dark-mode .service-card:hover,
body.dark-mode .feature-card:hover,
body.dark-mode .pricing-card:hover,
body.dark-mode .blog-card:hover,
body.dark-mode .post-card:hover,
body.dark-mode .info-card:hover,
body.dark-mode .team-card:hover,
body.dark-mode .card:hover {
    box-shadow: var(--ring-soft-dk), var(--lift-shadow);
}

/* Sticky-card: no Y translate (would break sticky positioning),
   just a subtle scale + stronger shadow so hover still reads. */
.sticky-card:hover {
    transform: scale(1.006);
    box-shadow:
        var(--ring-soft),
        0 28px 96px -14px rgba(20, 50, 30, 0.12),
        0 4px 10px -4px rgba(20, 50, 30, 0.08);
}

/* --- (c) Press feedback --------------------------------- */
.addon-card:active,
.package-card:active,
.project-card:active,
.card:active,
button:active,
.btn:active,
.cta:active,
a.button:active,
.lux-magnetic:active {
    transform: translateY(-2px) scale(0.985);
    transition:
        transform 0.12s var(--spring-soft),
        box-shadow 0.12s var(--spring-soft);
}

/* --- (d) Button shine sweep on hover -------------------- */
button,
.btn,
.cta,
a.button {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.4s var(--spring),
        box-shadow 0.4s var(--spring-soft),
        background-color 0.3s ease,
        color 0.3s ease;
}
button::after,
.btn::after,
.cta::after,
a.button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0.7s var(--spring-soft);
}
button:hover::after,
.btn:hover::after,
.cta:hover::after,
a.button:hover::after {
    left: 140%;
}
button:hover,
.btn:hover,
.cta:hover,
a.button:hover {
    transform: translateY(-2px);
}

/* --- (e) Ripple (set by JS as --rx/--ry on click) ------- */
.gu-ripple {
    position: relative;
    overflow: hidden;
}
.gu-ripple::before {
    content: '';
    position: absolute;
    left: var(--rx, 50%);
    top: var(--ry, 50%);
    width: 6px;
    height: 6px;
    background: rgba(46, 125, 50, 0.35);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.gu-ripple.gu-ripple-play::before {
    animation: gu-ripple 0.65s var(--spring-soft);
}
@keyframes gu-ripple {
    0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.55; }
    100% { transform: translate(-50%, -50%) scale(60); opacity: 0;    }
}

/* --- (f) Card tilt prep (JS sets --rx/--ry in deg) ------ */
.gu-tilt {
    transform-style: preserve-3d;
    transition: transform 0.5s var(--spring-soft);
}
.gu-tilt.gu-tilt-live {
    transform:
        perspective(900px)
        rotateX(var(--tx, 0deg))
        rotateY(var(--ty, 0deg))
        translateY(-6px)
        scale(1.012);
    transition: transform 0.12s linear;
}

/* --- (g) Scroll-reveal: playful spring overshoot -------- */
.reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale,
.reveal-stagger, .lux-reveal, .lux-reveal-stagger {
    transition:
        opacity 0.85s var(--spring-soft),
        transform 0.95s var(--spring) !important;
}

/* --- (h) Pop-up / modal overshoot ----------------------- */
.modal,
.popup,
.modal-overlay {
    transition: opacity 0.35s var(--spring-soft);
}
.modal-box,
.popup-box {
    transform: translateY(14px) scale(0.94);
    opacity: 0;
    transition:
        transform 0.55s var(--spring-pop),
        opacity 0.4s var(--spring-soft);
}
.modal.active .modal-box,
.modal.open .modal-box,
.modal.is-open .modal-box,
.popup.active .popup-box,
.popup.open .popup-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* --- (i) Link underline sweep on nav / content links ---- */
.nav-links a,
.footer-links a,
a.text-link {
    position: relative;
}
.nav-links a::after,
.footer-links a::after,
a.text-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s var(--spring-soft);
    border-radius: 2px;
    opacity: 0.75;
}
.nav-links a:hover::after,
.footer-links a:hover::after,
a.text-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* --- (j) Icon wiggle on hover (playful accent) ---------- */
.sprout-H svg,
.leaf-dot svg,
.swoosh-H svg {
    transition: transform 0.6s var(--spring);
    transform-origin: center bottom;
}
.gu-mark:hover .sprout-H svg {
    transform: rotate(-6deg) translateY(-1px);
}
.gu-mark:hover .leaf-dot svg {
    transform: rotate(10deg) scale(1.08);
}
.gu-mark:hover .swoosh-H svg {
    transform: translateY(1px) scaleX(1.04);
}

/* --- (k) Honour reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sticky-card, .addon-card, .package-card, .project-card,
    .library-card, .review-card-new, .review-card, .contact-card,
    .service-card, .feature-card, .pricing-card, .blog-card,
    .post-card, .info-card, .team-card, .card, .bubble,
    button, .btn, .cta, a.button,
    .modal-box, .popup-box,
    .gu-tilt, .gu-ripple,
    .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale,
    .reveal-stagger, .lux-reveal, .lux-reveal-stagger {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    button::after, .btn::after, .cta::after, a.button::after {
        display: none !important;
    }
}

/* --- (l) Touch devices: no hover lift (avoids sticky-hover) */
@media (hover: none), (pointer: coarse) {
    .addon-card:hover, .package-card:hover, .project-card:hover,
    .library-card:hover, .review-card-new:hover, .review-card:hover,
    .contact-card:hover, .service-card:hover, .feature-card:hover,
    .pricing-card:hover, .blog-card:hover, .post-card:hover,
    .info-card:hover, .team-card:hover, .card:hover,
    .sticky-card:hover {
        transform: none;
    }
    /* On touch, trigger the playful lift on :active (tap) instead of :hover.
       Gives mobile users the same tactile response as desktop. */
    .addon-card:active, .package-card:active, .project-card:active,
    .library-card:active, .review-card-new:active, .review-card:active,
    .contact-card:active, .service-card:active, .feature-card:active,
    .pricing-card:active, .blog-card:active, .post-card:active,
    .info-card:active, .team-card:active, .card:active {
        transform: translateY(-3px) scale(0.985);
        transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

/* =========================================================
   16 — PRAND-STYLE PILL HAMBURGER
   Replaces the 3-bar hamburger with a rounded pill button
   that morphs "=" → "X" with spring easing. Works with the
   existing <div class="hamburger"><span><span><span></div>
   markup on all 31 pages — no HTML changes needed.
   The middle span is hidden; outer two become the bars.
   ========================================================= */
.hamburger {
    width: 46px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: var(--nav-pill-bg, rgba(255, 253, 248, 0.92)) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 6px 20px -8px rgba(20, 50, 30, 0.18) !important;
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    position: relative !important;
    transition:
        transform 0.35s var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
        background 0.3s ease,
        box-shadow 0.35s ease !important;
}
body.dark-mode .hamburger {
    background: rgba(22, 40, 28, 0.85) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 6px 20px -8px rgba(0, 0, 0, 0.45) !important;
}
.hamburger:hover {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 10px 28px -8px rgba(20, 50, 30, 0.25) !important;
    transform: translateY(-1px);
}
.hamburger:active {
    transform: scale(0.9) !important;
    transition: transform 0.12s ease !important;
}
/* Playful rotation when drawer is open — reinforces the "X" */
.hamburger.active {
    transform: rotate(0deg);
    background: var(--nav-pill-bg, rgba(255, 253, 248, 0.98)) !important;
}

/* Bars — centered in the 32px pill (center y = 16).
   Closed: two parallel 16px lines, 5px apart (top 13 + top 18).
   Active: bars shrink to 7px, shift +7.5px right, rotate ±45°
   → tiny X "wink" eye in the upper-right of the face.
   Combined with ::before (cool playful left eye) and ::after
   (smile), the pill morphs into a winking smiley 😉. */
.hamburger span {
    position: absolute !important;
    left: 50% !important;
    width: 16px !important;
    height: 2.2px !important;
    background: var(--dark, #1a1a1a) !important;
    border-radius: 99px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    transition:
        top 0.55s cubic-bezier(0.68, -0.2, 0.27, 1.35),
        width 0.55s cubic-bezier(0.68, -0.2, 0.27, 1.35),
        transform 0.55s cubic-bezier(0.68, -0.2, 0.27, 1.35),
        opacity 0.2s ease,
        background 0.3s ease !important;
}
.hamburger span:nth-child(1) { top: 13px !important; }
.hamburger span:nth-child(2) {
    top: 15px !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(0) !important;
}
.hamburger span:nth-child(3) { top: 18px !important; }

/* Active → tiny X wink eye, upper-right */
.hamburger.active span:nth-child(1) {
    top: 10px !important;
    width: 7px !important;
    transform: translate(calc(-50% + 7.5px), 0) rotate(45deg) !important;
}
.hamburger.active span:nth-child(3) {
    top: 10px !important;
    width: 7px !important;
    transform: translate(calc(-50% + 7.5px), 0) rotate(-45deg) !important;
}
body.dark-mode .hamburger span { background: #E9F5EC !important; }

/* ::before = LEFT eye — playful cartoon eye with pupil + highlight.
   Built from layered radial gradients:
     • outer dark iris (background color)
     • small white highlight top-left (30% 30%) — the "sparkle"
   ::after = SMILE — bottom arc of an ellipse via border-trick. */
.hamburger::before {
    content: '';
    position: absolute;
    top: 8.5px;
    left: calc(50% - 8px);
    width: 6px;
    height: 7px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 32% 30%,
            rgba(255, 253, 248, 0.95) 0 1px,
            transparent 1.3px
        ),
        var(--dark, #1a1a1a);
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition:
        opacity 0.25s ease 0.15s,
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
    pointer-events: none;
}
.hamburger::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 20px;
    height: 12px;
    border: 2.2px solid transparent;
    border-bottom-color: var(--dark, #1a1a1a);
    border-radius: 50%;
    box-sizing: border-box;
    transform: translateX(-50%) scaleY(0);
    transform-origin: center top;
    opacity: 0;
    transition:
        opacity 0.3s ease 0.22s,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s;
    pointer-events: none;
}
body.dark-mode .hamburger::before {
    background:
        radial-gradient(
            circle at 32% 30%,
            rgba(22, 40, 28, 0.9) 0 1px,
            transparent 1.3px
        ),
        #E9F5EC;
}
body.dark-mode .hamburger::after { border-bottom-color: #E9F5EC; }

.hamburger.active::before {
    opacity: 1;
    transform: scale(1);
    animation: gu-eye-wink 4s ease-in-out 1.2s infinite;
}
.hamburger.active::after {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
    animation: gu-smile-bob 4s ease-in-out 1.2s infinite;
}

/* Open eye blinks occasionally (squeeze vertically) */
@keyframes gu-eye-wink {
    0%, 88%, 100% { transform: scaleY(1); }
    92%           { transform: scaleY(0.1); }
    96%           { transform: scaleY(1); }
}
/* Smile gently bobs — soft breath to feel alive */
@keyframes gu-smile-bob {
    0%, 100% { transform: translateX(-50%) scaleY(1)    translateY(0); }
    50%      { transform: translateX(-50%) scaleY(1.05) translateY(0.5px); }
}

/* Tongue removed per user request — keep span:nth-child(2) hidden in active
   state (the base rule above already zeros its opacity/scale). */
.hamburger.active span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-50%) scale(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .hamburger.active::before,
    .hamburger.active::after { animation: none !important; }
}

/* Reduced motion: snap, no springs */
@media (prefers-reduced-motion: reduce) {
    .hamburger, .hamburger span {
        transition: none !important;
    }
}

/* =========================================================
   17 — MOBILE MOTION PARITY
   Desktop playful animations (hover lifts, magnetic CTAs,
   card tilt) either don't apply or feel wrong on touch.
   This section gives touch users an equivalent "playful"
   feel via tap feedback, spring-in reveals, and smoother
   scroll transitions.
   ========================================================= */
@media (hover: none), (pointer: coarse) {
    /* Buttons: stronger press response */
    button:active, .btn:active, .cta:active, a.button:active {
        transform: scale(0.96) translateY(1px) !important;
    }
    /* Links in nav/footer: subtle tap flash */
    .nav-links a:active, .footer-links a:active, .footer-contact-link:active {
        background: rgba(76, 175, 80, 0.18);
        transform: scale(0.98);
    }
    /* Scroll reveal: faster + more overshoot on mobile
       so it feels lively without holding up the feed */
    .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale,
    .reveal-stagger, .lux-reveal, .lux-reveal-stagger {
        transition:
            opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    /* Ensure mobile-menu items spring in playfully */
    .mobile-menu.active > * {
        transition:
            opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    /* Smooth momentum scroll on iOS */
    html, body {
        -webkit-overflow-scrolling: touch;
    }
}