/* ==========================================================================
   TAXLENZ — FINAL FIX layer (loaded LAST): layout + mobile + performance
   ========================================================================== */

/* ---- 1. STOP OVERLAP: content-visibility mis-estimated section heights --- */
section, .card, .post-card, .info-card, .testimonial-card, .faq-item, img {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: auto !important;
}

/* ---- 2. PERFORMANCE: glass blur + animations RESTORED (desktop) ---------- */
/* Keep the iOS glass + mesh/aurora motion on desktop; trim only on mobile.   */

/* Hero compliance card kept opaque enough to not look faded, but glassy */
.hero-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface) 78%, transparent)) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border: 1px solid color-mix(in srgb, #fff 55%, transparent) !important;
    box-shadow: 0 24px 60px rgba(11,61,58,.16), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
[data-theme="dark"] .hero-card { border-color: rgba(150,200,185,.28) !important; }

/* Float chips: solid + readable (not washed out) */
.hero-float {
    background: var(--surface,#fff) !important;
    border: 1px solid var(--border,#C8E1D9) !important;
    box-shadow: 0 10px 26px rgba(11,61,58,.16) !important;
    color: var(--heading) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .hero-float { background:#1A3F39 !important; border-color:rgba(150,200,185,.32) !important; color:#EAF3F0 !important; box-shadow:0 10px 26px rgba(0,0,0,.45) !important; }

/* On phones only: drop blur (fps) and go solid so nothing looks washed out */
@media (max-width: 760px) {
    .card, .post-card, .info-card, .testimonial-card, .faq-item, .profile-card,
    .hero-card, .hero-stat, .hero-float {
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    }
    .card, .post-card, .info-card, .testimonial-card, .faq-item, .profile-card, .hero-card {
        background: var(--surface, #fff) !important;
        border: 1px solid var(--border, #C8E1D9) !important;
    }
    [data-theme="dark"] .card, [data-theme="dark"] .post-card, [data-theme="dark"] .info-card,
    [data-theme="dark"] .testimonial-card, [data-theme="dark"] .faq-item, [data-theme="dark"] .profile-card,
    [data-theme="dark"] .hero-card { background: #12332E !important; border-color: #2C5A52 !important; }
    /* Kill background animations on mobile for battery/perf */
    .aurora::before, .aurora::after, .mesh-bg::before, .mesh-bg::after,
    .mesh-orb, .morph, body::before { animation: none !important; }
}

/* ---- 3. CONSISTENT DESKTOP SPACING --------------------------------------- */
section { padding-block: clamp(3rem, 6vw, 5.5rem) !important; position: relative; }
.page-hero { padding-block: clamp(3rem, 6vw, 4.5rem) !important; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.split, .hero-grid { align-items: center; }

/* ==========================================================================
   4. MOBILE HEADER — clean, single row
   ========================================================================== */
@media (max-width: 900px) {
    .site-header, .site-footer, .cookie-banner, .main-nav, #bciModal .bci-card {
        backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
    }
    .site-header .header-inner {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        gap: .5rem !important; min-height: 58px !important; padding: .45rem 1rem !important;
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    }
    .site-header .brand { flex: 0 1 auto; margin-right: auto; min-width: 0; }
    .site-header .brand-logo-wide { height: 40px !important; max-width: 155px !important; }
    .site-header .header-actions { flex: 0 0 auto; display: flex !important; align-items: center; gap: .45rem !important; }
    .site-header .theme-toggle { width: 40px !important; height: 40px !important; flex: 0 0 auto; padding: 0 !important; }
    .nav-toggle {
        display: flex !important; flex-direction: column !important; justify-content: center !important;
        align-items: center !important; gap: 4px !important;
        width: 40px !important; height: 40px !important; padding: 0 !important;
        flex: 0 0 auto; border-radius: 10px !important;
    }
    .nav-toggle span { width: 20px !important; height: 2px !important; }
    /* prevent horizontal overflow WITHOUT breaking vertical scroll */
    html { overflow-x: clip; }
    body { overflow-x: clip; width: 100%; overscroll-behavior-y: auto !important; }

    .main-nav {
        position: fixed !important; top: 60px !important; left: 0 !important; right: 0 !important;
        display: flex !important; flex-direction: column !important; align-items: stretch !important;
        justify-content: flex-start !important; gap: .2rem !important;
        padding: 1rem 1.25rem 1.5rem !important;
        background: var(--bg-alt, #fff) !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
        transform: translateY(-130%); transition: transform .3s ease;
        max-height: calc(100dvh - 60px); overflow-y: auto; z-index: 999 !important;
    }
    [data-theme="dark"] .main-nav { background: #0B2522 !important; }
    .main-nav.open { transform: translateY(0); }
    .main-nav .nav-link { padding: .9rem 1rem !important; font-size: 1rem !important; border-radius: 10px !important; width: 100%; text-align: left; border-bottom: 1px solid var(--border); }
    .main-nav .nav-link::after { display: none !important; }
    .main-nav .nav-cta { display: inline-flex !important; width: 100% !important; justify-content: center !important; margin-top: .8rem !important; padding: .9rem 1.2rem !important; }
}

/* ==========================================================================
   5. MOBILE LAYOUT — generous spacing, single column, zero overlap
   ========================================================================== */
@media (max-width: 760px) {
    :root { --gap: 1.25rem; }
    .container { padding-inline: 1.15rem !important; }

    /* Vertical rhythm — the key fix for "too close / overlapping" */
    section { padding-block: 2.75rem !important; }
    .section-head { margin-bottom: 1.75rem !important; }
    h1 { font-size: clamp(1.8rem, 8vw, 2.2rem) !important; line-height: 1.2 !important; }
    h2 { font-size: clamp(1.4rem, 6vw, 1.75rem) !important; line-height: 1.25 !important; }
    h3 { font-size: 1.18rem !important; }
    p  { font-size: .95rem !important; line-height: 1.6 !important; }

    /* Everything stacks with real breathing room */
    .hero-grid, .split, .grid, .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important; gap: 1.25rem !important;
    }

    /* Hero — TEXT FIRST, then the visual card */
    .hero { padding-block: 2rem 2.5rem !important; }
    .hero-grid { gap: 1.75rem !important; }
    .hero-content, .hero-copy, .hero-grid > *:first-child { order: 1 !important; }
    .hero-visual { order: 2 !important; max-width: 100%; margin: .5rem auto 0 !important; }
    .hero h1 { margin-bottom: .8rem !important; }
    .hero-eyebrow, .pill-glow { margin-bottom: 1rem !important; }
    .hero-lead { margin-bottom: 1.4rem !important; }
    .hero-cta { flex-direction: column; align-items: stretch; gap: .7rem; margin-bottom: 1.4rem !important; }
    .hero-cta .btn { width: 100%; }
    .hero-trust { gap: 1rem 1.4rem; justify-content: flex-start; }
    .hero-card { padding: 1.3rem !important; border-radius: 18px !important; }
    .hero-stat-row { gap: .7rem !important; }
    .blob { display: none !important; }
    /* Float chips overflow the card on small screens → hide them */
    .hero-float { display: none !important; }
    .hero-morph, .grid-overlay { display: none !important; }

    /* Cards */
    .card { padding: 1.5rem !important; border-radius: 16px !important; }
    .card-icon { width: 48px !important; height: 48px !important; margin-bottom: .9rem !important; }

    /* Stats */
    .stats-band { padding-block: 2rem !important; }
    .stats-band .container { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
    .stat-item .num { font-size: 2rem !important; }

    /* CTA */
    .cta-band { padding: 2.25rem 1.35rem !important; border-radius: 18px !important; }
    .cta-band h2 { font-size: 1.5rem !important; }
    .cta-band .btn { width: 100%; }

    /* Testimonials / FAQ */
    .testimonial-card { padding: 1.5rem !important; }
    .faq-q { padding: 1rem 1.1rem !important; font-size: .95rem !important; }
    .faq-a-inner { padding: 0 1.1rem 1rem !important; }

    /* Forms */
    .form-row { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .field input, .field textarea, .field select { font-size: 16px !important; padding: .8rem .95rem !important; }
    .btn-lg { width: 100%; }

    /* Inner page hero + article */
    .page-hero { padding-block: 2.5rem !important; }
    .page-hero p { font-size: .96rem !important; }
    .article { padding-inline: 0 !important; }
    .article-cover { border-radius: 14px !important; margin-bottom: 1.5rem !important; }
    .article-content { font-size: 1rem !important; line-height: 1.75 !important; }
    .post-foot { flex-direction: column !important; gap: .7rem !important; align-items: stretch !important; }
    .post-foot .btn { width: 100%; justify-content: center; }

    /* Footer */
    .site-footer { padding-top: 2.5rem !important; margin-top: 2rem !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; text-align: center; padding-bottom: 2rem !important; }
    .footer-brand .brand, .footer-brand .social-row { justify-content: center !important; }
    .footer-brand .brand-logo-wide { margin-inline: auto !important; }
    .footer-tagline, .footer-about { margin-inline: auto; max-width: 42ch; }
    .footer-heading { text-align: center; }
    .footer-links { justify-items: center; }
    .footer-bottom-inner { flex-direction: column; gap: .6rem; text-align: center; }

    /* Profile */
    .profile-card { grid-template-columns: 1fr !important; text-align: center; gap: 1.25rem !important; }
    .founder-photo { max-width: 160px; margin-inline: auto; }
    .profile-social { justify-content: center; }

    /* Floating buttons — no overlap */
    .whatsapp-float { width: 50px !important; height: 50px !important; right: 1rem !important; bottom: 4.75rem !important; left: auto !important; }
    .back-to-top { width: 42px !important; height: 42px !important; right: 1rem !important; bottom: 1rem !important; }

    /* Cookie + modal */
    .cookie-banner { left: .75rem !important; right: .75rem !important; bottom: .75rem !important; padding: .9rem 1rem !important; }
    #bciModal .bci-card { padding: 1.4rem !important; max-height: 88vh !important; border-radius: 18px !important; }
    #bciModal .bci-actions { flex-direction: column-reverse !important; }
    #bciModal .bci-actions .btn { width: 100% !important; }

    /* Chips scroll horizontally */
    .chip-row { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .4rem; }
    .chip-row::-webkit-scrollbar { display: none; }
    .chip { flex: 0 0 auto; }

    /* Kill custom cursor + fx on mobile */
    .cur-ring, .cur-dot { display: none !important; }
    body { cursor: auto !important; }
}

@media (max-width: 400px) {
    .stats-band .container { grid-template-columns: 1fr 1fr !important; }
    .hero-stat-row { grid-template-columns: 1fr 1fr !important; }
    .site-header .brand-logo-wide { height: 34px !important; max-width: 130px !important; }
}

/* iOS safe area */
@supports (padding: max(0px)) {
    .whatsapp-float { right: max(1rem, env(safe-area-inset-right)) !important; }
    .back-to-top { right: max(1rem, env(safe-area-inset-right)) !important; bottom: max(1rem, env(safe-area-inset-bottom)) !important; }
    .cookie-banner { bottom: max(.75rem, env(safe-area-inset-bottom)) !important; }
}

/* Desktop cursor: slow spin to reduce paint */
@media (hover: hover) and (pointer: fine) { .cur-ring svg { animation-duration: 20s !important; } }

/* ---- 120Hz smoothness: keep animations on GPU compositor ------------------ */
.post-card,.info-card,.hero-float,.btn,.nav-link,.testimonial-card,
.whatsapp-float,.back-to-top,.chip{transform:translateZ(0);backface-visibility:hidden}
/* Restore 3D tilt (JS sets --rx/--ry) — don't flatten these with translateZ */
.tilt,[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important;transform-style:preserve-3d;will-change:transform}
.tilt-layer{transform:translateZ(40px)}
.tilt-layer-deep{transform:translateZ(70px)}
.mesh-bg,.mesh-bg::before,.mesh-bg::after,.blob{will-change:auto}
* { -webkit-tap-highlight-color: transparent; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeSpeed; }
@media (hover:hover){ a,button,.btn,.card,.nav-link{ transition-duration:.2s !important; } }

/* ---- Splash loader: keep logo inside the screen ------------------------- */
.splash-logo-wide, .splash-logo{ max-width:70vw !important; height:auto !important; width:auto !important; }
@media (max-width:760px){ .splash-logo-wide, .splash-logo{ max-width:62vw !important; max-height:120px !important; } }
/* Splash must never block scrolling once hidden */
.splash.hide{ display:none !important; }
/* Safety: FM must not leave content hidden if it fails on mobile */
@media (max-width:760px){ [style*="opacity: 0"].card, [style*="opacity:0"].card{ opacity:1 !important; filter:none !important; transform:none !important; } }

/* Remove custom cursor entirely (lag) */
.cur-ring,.cur-dot{display:none !important}
body,a,button,.btn,.card,.nav-link,*{cursor:auto !important}

/* Hero float chips ABOVE the card, not hidden behind */
.hero-stage,.hero-visual,.hero-card{overflow:visible !important}
.hero-float{z-index:9 !important;opacity:1 !important}
.hero-card{z-index:2 !important}

/* Chips sit in FRONT (3D z depth beats the card's translateZ) */
.hero-stage .hero-float{transform:translateZ(90px) !important}
.hero-stage .hero-card{transform:translateZ(20px) !important}

/* Remove screen loader entirely (logo never fit all devices) */
.splash{display:none !important}

/* Faster scroll-reveal (AOS fallback) — less delay */
[data-aos]{transition-duration:.45s !important;transition-delay:0s !important}

/* Smooth dark/light theme switch */
html,body,.site-header,.site-footer,.card,.post-card,.info-card,.testimonial-card,
.faq-item,.profile-card,.hero-card,.hero-stat,.hero-float,.main-nav,.btn,.nav-link,
.chip,.field input,.field textarea,.field select,.cta-band,.stats-band,.page-hero,
input,textarea,select,section{
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease !important;
}