/* F-Site Mobile Native Styles */
@media (max-width: 768px) {

    /* Layout Reset */
    .main-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    /* Vertical Hierarchy Optimization: Headline -> Visual -> Metrics */
    .text-pane {
        width: 100%;
        height: auto;
        padding: 6rem 1.5rem 2rem 1.5rem;
        /* Top padding for Header */
        order: 1;
        /* Headline First */
    }

    .visual-pane {
        width: 100%;
        height: 55vh;
        /* Optimal Aspect Ratio */
        order: 2;
    }

    /* Typography Adjustments */
    .main-headline {
        font-size: 2.2rem;
        /* Scaled down */
        margin-bottom: 1rem;
    }

    .description-text {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /* Visual Pane Adjustments */
    .img-placeholder {
        background: linear-gradient(180deg, #1A3C34 0%, #0D1F1B 100%);
    }

    /* Metrics: Swipeable or Stacked Compact */
    .metrics-container-vertical {
        flex-direction: row;
        /* Horizontal Scroll */
        order: 3;
        overflow-x: auto;
        padding-bottom: 1rem;
        border-left: none;
        padding-left: 0;
        margin-top: 2rem;
        gap: 2rem;

        /* Hide Scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .metrics-container-vertical::-webkit-scrollbar {
        display: none;
    }

    .metric-item {
        min-width: 120px;
        padding-right: 1rem;
        border-right: 1px solid #ddd;
    }

    .metric-item:last-child {
        border-right: none;
    }

    /* Thumb Zone Action */
    .action-zone {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        z-index: 999;
        border-top: 1px solid #eee;
    }

    .cta-primary {
        width: 100%;
        padding: 1.2rem;
        font-size: 1.1rem;
        border-radius: 8px;
        /* Softer on mobile */
    }

    /* Mobile Header */
    .mobile-header {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        mix-blend-mode: normal;
        color: #1A3C34;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        height: 50px;
        /* Slimmer */
        padding: 0 1.2rem;
    }
}