/* ==========================================================================
 * Landing Mobile — Layout & Hero
 * Struktur layout dasar dan hero section untuk mobile app-like landing page.
 * Hanya aktif di layar ≤ 1024px.
 *
 * @package CredibleCompany
 * ========================================================================== */

@media (max-width: 1024px) {

    /* ----------------------------------------------------------------------
     * 1. Layout Dasar (App Wrapper)
     * ---------------------------------------------------------------------- */
    .app-landing-wrapper {
        background-color: #f8fafc;
        padding-bottom: 80px;
        overflow-x: hidden;
    }

    /* Override padding bawaan hero dan memadatkannya */
    .hero {
        padding: 40px 20px 30px;
        background: var(--brand-white);
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
    }

    .hero-content h1 {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: 12px;
        order: 2;
        text-align: center;
        color: #0f172a;
    }

    .hero-content p {
        font-size: 0.95rem;
        color: #334155;
        margin-bottom: 24px;
        order: 3;
        text-align: center;
        font-weight: 500;
    }

    .hero-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        order: 2;
        align-items: center;
        width: 100%;
    }

    .hero-buttons {
        order: 4;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-stats {
        order: 5;
        width: 100%;
    }

    /* ----------------------------------------------------------------------
     * 2. Sections Umum
     * ---------------------------------------------------------------------- */
    .app-landing-wrapper section.site-section {
        background: transparent;
        padding: 0 20px 24px;
    }

    .app-landing-wrapper .section-header {
        text-align: center;
        margin-bottom: 24px;
    }

    .app-landing-wrapper .section-title-premium {
        font-size: 1.35rem;
        margin-bottom: 8px;
        color: #0f172a;
    }

    .app-landing-wrapper .section-header p {
        font-size: 0.9rem;
        color: #334155;
        margin: 0 auto;
        max-width: 90%;
    }

    /* ----------------------------------------------------------------------
     * 3. Hero Visual (Mobile)
     * ---------------------------------------------------------------------- */
    .app-landing-wrapper .hero-visual {
        margin-top: 0;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
        overflow: visible;
        order: 1;
    }

    .app-landing-wrapper .hero-visual-inner {
        width: 100%;
        max-width: 320px;
        aspect-ratio: 1;
        position: relative;
    }

    .app-landing-wrapper .hero-visual .floating-shape {
        display: block !important;
        transform: scale(0.6);
    }

    .app-landing-wrapper .shape-rocket {
        top: -10px;
        left: -10px;
    }

    .app-landing-wrapper .shape-trophy {
        bottom: -10px;
        right: -10px;
    }

    .app-landing-wrapper .shape-purple-circle {
        top: 20%;
        right: -5%;
        width: 40px;
        height: 40px;
    }

    .app-landing-wrapper .shape-red-circle {
        bottom: 30%;
        left: -5%;
        width: 25px;
        height: 25px;
    }

    .app-landing-wrapper .hero-main-img {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
        border-radius: 0;
        margin-top: 0;
        z-index: 2;
    }

    .app-landing-wrapper .hero-bg-circle {
        position: absolute;
        top: 15%;
        left: 10%;
        width: 80%;
        height: 80%;
        border-radius: 50%;
        z-index: 1;
    }

    /* ----------------------------------------------------------------------
     * 4. Hero Buttons & Stats
     * ---------------------------------------------------------------------- */
    .app-landing-wrapper .btn,
    .app-landing-wrapper .button {
        width: 100%;
        text-align: center;
        border-radius: 50px;
        display: block;
        padding: 14px 20px;
        box-sizing: border-box;
    }

    .app-landing-wrapper .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin-bottom: 24px;
    }

    .app-landing-wrapper .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        background: #f8fafc;
        padding: 16px;
        border-radius: 16px;
        margin-top: 10px;
    }

    .app-landing-wrapper .hero-stat-item {
        text-align: center;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .app-landing-wrapper .stat-number {
        font-size: 1.25rem;
        color: var(--brand-red);
        margin-bottom: 4px;
    }

    .app-landing-wrapper .hero-stat-item .stat-label {
        font-size: 0.7rem;
        line-height: 1.2;
    }
}