/* —— PWA / native shell —— */
    @media (max-width: 768px) {
        html {
            -webkit-text-size-adjust: 100%;
        }
        body.m-site,
        body.home-lead-page {
            padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
            -webkit-tap-highlight-color: transparent;
        }
        body.m-site main,
        body.home-lead-page main {
            padding-bottom: 0.5rem;
        }

        /* Compact sticky header */
        body.m-site nav.nav .nav-inner {
            padding: 0.5rem 0.85rem;
            min-height: 3rem;
        }
        body.m-site nav.nav .logo-img {
            height: 32px;
            max-width: 128px;
        }
        body.m-site nav.nav .logo {
            padding: 0.26rem 0.45rem;
        }
        body.m-site nav.nav .nav-links .btn {
            padding: 0.42rem 0.65rem;
            font-size: 0.76rem;
        }
        body.m-site nav.nav .btn-whatsapp {
            display: none;
        }
        body.m-site nav.nav .nav-links .btn-primary {
            display: none;
        }

        /* Bottom tab bar */
        .app-tabbar {
            display: flex;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 950;
            align-items: stretch;
            justify-content: space-around;
            gap: 0;
            padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0));
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(20px) saturate(1.3);
            -webkit-backdrop-filter: blur(20px) saturate(1.3);
            border-top: 1px solid rgba(148, 163, 184, 0.35);
            box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.1);
        }
        .app-tab {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.15rem;
            min-height: 3.25rem;
            min-width: 0;
            padding: 0.25rem 0.15rem;
            text-decoration: none;
            color: #64748b;
            border-radius: 0.65rem;
            transition: color 0.15s, background 0.15s;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .app-tab-icon,
        .app-tab-svg {
            width: 1.35rem;
            height: 1.35rem;
            flex-shrink: 0;
            opacity: 0.88;
        }
        .app-tab-label {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            line-height: 1.1;
            text-align: center;
        }
        .app-tab.is-active {
            color: #0f766e;
            background: rgba(13, 148, 136, 0.1);
        }
        .app-tab.is-active .app-tab-icon,
        .app-tab.is-active .app-tab-svg {
            opacity: 1;
        }
        .app-tab--accent.is-active,
        .app-tab--accent:active {
            color: #0f766e;
        }
        .app-tab--wa .app-tab-icon,
        .app-tab--wa .app-tab-svg {
            width: 1.25rem;
            height: 1.25rem;
        }
        .app-tab--wa.is-active,
        .app-tab--wa:active {
            color: #16a34a;
            background: rgba(34, 197, 94, 0.1);
        }
        .app-tab:active {
            background: rgba(148, 163, 184, 0.15);
        }

        /* Hide legacy homepage sticky bar — tab bar replaces it */
        body.home-lead-page .home-sticky-cta {
            display: none !important;
        }

        /* —— Homepage v3 app layout —— */
        body.home-lead-page .home-quick-nav {
            display: none;
        }
        body.home-lead-page .hero-v3-copy .hero-cta-row .btn-ghost {
            display: none;
        }
        body.home-lead-page .home-demo-sec {
            margin-top: -1.25rem;
            padding-inline: 0.85rem;
        }

        /* —— Inner page hero band —— */
        body.m-site .page-hero-band {
            padding-inline: 0.85rem;
            padding-bottom: 2rem;
        }
        body.m-site .page-hero--v2 {
            padding-top: 1.25rem;
        }
        body.m-site .page-hero--v2 h1 {
            font-size: clamp(1.5rem, 6.5vw, 2rem);
        }
        body.m-site .page-hero--v2 .hero-meta {
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 0.2rem;
        }
        body.m-site .page-hero--v2 .hero-meta::-webkit-scrollbar {
            display: none;
        }
        body.m-site .page-hero--v2 .hero-pill {
            flex-shrink: 0;
        }
        body.m-site .hero-cta .btn {
            min-height: 2.85rem;
            font-size: 0.95rem;
            border-radius: 0.85rem;
            touch-action: manipulation;
        }

        /* App-style cards */
        body.m-site .card,
        body.m-site .feature-card,
        body.m-site .module-card,
        body.m-site .biz-card,
        body.m-site .product-card,
        body.m-site .blog-card,
        body.m-site .project-card {
            border-radius: 1rem;
        }
        body.m-site .home-faq-item,
        body.m-site details.faq-item {
            border-radius: 1rem;
        }
        body.m-site .demo-wrap {
            border-radius: 1.15rem;
            padding: 1.25rem 1rem;
        }

        /* App-style section rhythm */
        body.m-site .home-sec,
        body.home-lead-page .home-sec {
            padding: 2rem 0.85rem;
        }
        body.m-site main .section {
            padding-left: 0.85rem;
            padding-right: 0.85rem;
        }
        /* Footer breathing room above tab bar */
        body.m-site .site-footer {
            padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
        }

        /* WhatsApp float hidden — tab bar has WhatsApp */
        .ab-whatsapp-float {
            display: none !important;
        }
    }

    @media (min-width: 769px) {
        .app-tabbar {
            display: none;
        }
    }

    @media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
        .app-tabbar {
            animation: appTabbarIn 0.35s ease-out;
        }
        @keyframes appTabbarIn {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    }