html,
body {
    max-width: 100%;
    overflow-x: hidden;
    /* Use svh/lvh for more consistent mobile heights */
    min-height: -webkit-fill-available;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Prevent gray highlight on tap in mobile Safari */
    -webkit-tap-highlight-color: transparent;
}

.page {
    /* Use lvh to prevent jumping when address bar hides/shows */
    min-height: 100lvh;
}

button, a {
    /* Optimization for mobile touch targets */
    touch-action: manipulation;
}

.container,
.nav-inner,
.contact-layout,
.machine-layout,
.about-grid,
.coffee-layout,
.hero-grid {
    min-width: 0;
    width: 100%;
}

.hero-brand-logo {
    width: min(360px, 78vw);
    height: auto;
    margin-bottom: 26px;
}

.hero-brand-photo {
    width: min(540px, 86vw);
    border-radius: 22px;
    border: 1px solid #dbe3ef;
    box-shadow: 0 26px 54px rgba(15, 23, 42, 0.14);
    object-fit: cover;
}

#loader .ld-inner {
    width: min(460px, 86vw);
}

#loader .ld-logo {
    display: none;
}

#loader .ld-logo-img {
    display: block;
    width: min(260px, 70vw);
    margin: 0 auto 22px;
    height: auto;
}

#loader .ld-bar {
    width: min(260px, 76vw);
    height: 4px;
    border-radius: 999px;
}

#loader .ld-fill {
    background: linear-gradient(90deg, #2563eb, #22d3ee);
}

#floating-btns {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
}

.fb-tip {
    pointer-events: none;
}

#cookie-banner {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
}

footer {
    padding-top: 40px !important;
    padding-bottom: 14px !important;
}

.footer-grid {
    padding-bottom: 20px !important;
}

.footer-logo-wrap img {
    height: 48px !important;
}

@media (max-width: 768px) {
    html,
    body {
        font-size: 15px;
    }

    .container,
    .nav-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    #navbar {
        height: 70px;
    }

    #mobile-nav {
        top: 70px;
        padding: 16px;
    }

    .section {
        padding: 72px 0;
    }

    .hero-content {
        padding-top: 74px;
        padding-bottom: 16px;
    }

    .hero-brand-photo {
        width: 100%;
        margin-bottom: 22px;
    }

    #hero {
        min-height: auto;
        overflow: visible;
        padding-bottom: 28px;
    }

    .hero-grid {
        gap: 28px;
    }

    .hero-proof {
        grid-template-columns: 1fr;
        margin-bottom: 26px;
    }

    .hero-visual {
        min-height: auto;
        padding-top: 0;
    }

    .hero-showcase,
    .hero-main-photo-wrap {
        width: 100%;
        margin: 0;
    }

    .hero-mini-shot {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        margin-top: 16px;
    }

    .hero-card {
        position: relative;
        inset: auto;
        right: auto;
        top: auto;
        width: 100%;
        margin-top: 18px;
        padding: 28px 22px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 18px;
        padding-top: 24px;
        margin-top: 28px;
    }

    .hero-stat,
    .hero-stat:last-child,
    .hero-stat:not(:first-child) {
        border-right: 0;
        border-bottom: 1px solid var(--gray4);
        padding: 0 0 18px;
    }

    .hero-stat:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .gold-strip {
        overflow: clip;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .gold-strip {
        padding: 14px 0;
    }

    .strip-inner {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .contact-layout {
        padding: 38px 0;
        gap: 20px;
    }

    .form-box {
        padding: 18px 14px;
    }

    .calc-grid2,
    .form-grid2,
    .values-grid {
        grid-template-columns: 1fr !important;
    }

    #cookie-banner {
        padding: 12px;
        gap: 10px;
    }

    .ck-btns {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .ck-btns .ck-btn {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .strip-inner {
        grid-template-columns: 1fr;
    }

    .nav-logo img {
        height: 36px;
    }

    .fb {
        width: 46px;
        height: 46px;
    }

    .fb-tip {
        display: none;
    }
}

/* ReCAPTCHA Badge Position */
@media (min-width: 992px) {
    .grecaptcha-badge {
        left: 20px !important;
        right: auto !important;
    }
}

/* Force ReCAPTCHA Badge Visibility and Position */
body .grecaptcha-badge {
    visibility: visible !important;
    display: block !important;
}

@media (min-width: 992px) {
    body .grecaptcha-badge {
        left: 20px !important;
        right: auto !important;
    }
}