/* Mobile Optimization - Design Master Style */
@media (max-width: 992px) {
    /* --- Global Resets & Typography --- */
    body {
        font-size: 15px; /* Slightly smaller base */
        -webkit-text-size-adjust: 100%;
    }
    
    .container, .container.fix-layout {
        padding-left: 16px !important; /* Tighter container */
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Tighter Section Padding */
    section, .section {
        padding: 40px 0 !important;
    }

    h1, .hero-title {
        font-size: 28px !important; /* More compact titles */
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
    }

    h2, .section-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
    }

    p, .hero-desc, .section-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    /* --- Navbar Improvements --- */
    .navbar .container {
        display: flex !important; 
        padding: 0 12px !important;
        height: 60px !important; /* Fixed compact height */
    }
    
    .logo img {
        height: 28px !important;
    }

    /* --- Hero Section --- */
    .hero-tech-tcm {
        padding: 80px 0 20px 0 !important; /* Tighter top/bottom */
        min-height: auto !important;
        height: auto !important;
    }

    .hero-layout {
        display: flex !important;
        flex-direction: column;
        gap: 20px !important; /* Reduced gap */
        text-align: center;
    }

    .hero-layout .hero-text {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-layout .hero-visual-stack {
        order: 2;
        width: 100%;
        height: 300px; /* Limit height */
        margin-top: 20px;
        display: none !important; /* Hide complex 3D stack on mobile if it breaks */
    }

    .btn-group {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
        text-align: center;
    }

    /* --- Bento Grids (Single Column Default) --- */
    .bento-grid, 
    .hub-bento-grid, 
    .visual-grid, 
    .pain-grid,
    .info-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 12px !important;
    }

    /* Core Values - 2 Column Layout */
    .core-bento-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .core-bento-grid .bento-item {
        padding: 16px !important;
        min-height: 180px; /* Ensure uniform height */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Core Item Typography */
    .core-bento-grid .bento-item h3 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
    }

    .core-bento-grid .bento-item p {
        font-size: 11px !important;
        line-height: 1.4 !important;
        color: #666 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limit text lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Icon Box Scaling */
    .core-bento-grid .icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important; /* Icon size */
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }

    /* Special Handling for AI Card Tags */
    .core-bento-grid .item-ai .ai-tag-cloud {
        padding-top: 12px !important;
        gap: 4px !important;
    }
    .core-bento-grid .item-ai .ai-tag-cloud span {
        font-size: 9px !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }

    /* Hide decorative visual flow on mobile to save space */
    .core-bento-grid .visual-flow {
        display: none !important;
    }

    /* AI Visuals - 2 Column Layout */
    .section-ai-visuals .bento-grid-layout {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 Columns */
        gap: 10px !important;
    }

    .section-ai-visuals .bento-card {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important; /* Compact padding */
        min-height: 140px; /* Ensure visual fits */
    }

    .section-ai-visuals .card-content h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .section-ai-visuals .card-content p {
        font-size: 11px !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limit text lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 8px !important;
    }

    .section-ai-visuals .card-visual {
        margin-top: auto;
        transform: scale(0.8); /* Scale down visuals */
        transform-origin: center bottom;
        height: 80px; /* Limit visual height */
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    /* Reset Spans */
    .bento-item, 
    .item-management, 
    .item-ai, 
    .card-policy, 
    .card-news, 
    .card-know,
    .visual-card {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
    }

    /* Adjust Card Padding */
    .bento-item, .visual-card {
        padding: 16px !important; /* Tighter padding */
    }

    /* Compact Buttons */
    .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
        height: auto !important;
    }

    /* --- Section Specifics --- */
    
    /* Flagship Section */
    .section-solution-flagship .header-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 16px;
    }
    
    .stat-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .stat-box h3 { font-size: 20px !important; margin-bottom: 2px !important; }
    .stat-box p { font-size: 12px !important; margin: 0 !important; }
    
    .stat-line { display: none !important; }

    /* Policy Section */
    .section-policy-official {
        padding: 30px 0 !important;
    }
    
    .official-slider-wrapper {
        overflow-x: auto;
        padding-bottom: 10px; /* Reduced scrollbar space */
        /* Enable horizontal scroll */
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        scroll-snap-type: x mandatory;
    }
    
    .official-track {
        display: flex !important;
        gap: 12px;
        width: max-content; /* Ensure it scrolls */
    }
    
    .red-head-card {
        width: 80vw !important; /* Show more of next card */
        flex-shrink: 0;
        scroll-snap-align: center;
        padding: 16px !important;
    }
    
    .official-btn { display: none !important; } /* Hide arrows on mobile */

    /* Data Base Section */
    .data-layout {
        flex-direction: column !important;
    }
    
    .data-stream-window {
        display: none !important; /* Hide complex animation */
    }
    
    .big-stats-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 cols */
    }

    /* AI Visuals Section */
    .ui-chat, .ui-scan, .ui-match, .ui-phone, .ui-growth, .ui-paper {
        transform: scale(0.9); /* Scale down visuals slightly */
        transform-origin: center;
    }

    /* --- Visual Adjustments --- */
    .ui-abstract img {
        width: 100% !important;
        height: auto !important;
    }

    /* Footer */
    footer .container {
        flex-direction: column;
        text-align: center;
        gap: 20px !important; /* Tighter footer */
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    .footer-left, .footer-right {
        width: 100%;
        align-items: center;
    }

    /* --- Navbar Mobile Menu Enhancements --- */
    .mobile-menu {
        background: rgba(255, 255, 255, 0.98) !important; /* More opaque for readability */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(0,0,0,0.05) !important;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.1) !important;
        padding-bottom: 16px;
    }

    .mobile-links a {
        padding: 12px 16px !important; /* More compact menu items */
        border-bottom: 1px dashed rgba(0,0,0,0.05);
        font-weight: 500;
        font-size: 15px !important;
    }

    .mobile-links a:last-child {
        border-bottom: none;
    }

    .mobile-btn {
        padding: 12px !important;
        font-size: 15px !important;
        margin: 10px 16px !important; /* Add margin to button */
        width: calc(100% - 32px) !important;
    }

    /* --- Section 5: Modes Visual (Bento Grid Refactor) --- */
    .section-modes-visual .visual-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Common Card Styles in Mobile */
    .section-modes-visual .visual-card {
        padding: 12px !important;
        min-height: auto !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Typography Scaling */
    .section-modes-visual .visual-card h3 {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        font-weight: 800 !important;
    }
    .section-modes-visual .visual-card .badge-role {
        font-size: 9px !important;
        padding: 2px 6px !important;
        margin-bottom: 6px !important;
    }
    .section-modes-visual .visual-card p {
        font-size: 11px !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px !important;
        min-height: 0 !important;
        color: #666 !important;
    }
    
    /* Tags Row */
    .section-modes-visual .tags-row {
        gap: 4px !important;
        margin-top: auto !important; /* Push to bottom if space allows */
    }
    .section-modes-visual .tags-row span {
        font-size: 9px !important;
        padding: 1px 5px !important;
        height: auto !important;
        line-height: 1.4 !important;
    }

    /* Cards 1 & 2 (Vertical, Small) */
    .section-modes-visual .visual-card:not(:nth-child(3)) {
        grid-column: span 1 !important;
    }
    .section-modes-visual .visual-card:not(:nth-child(3)) .graphic-area {
        height: 70px !important;
        margin-top: 8px !important;
        transform: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .section-modes-visual .visual-card:not(:nth-child(3)) .graphic-stage {
        transform: scale(0.55) !important;
        transform-origin: center center !important;
    }

    /* Card 3 (Horizontal, Full Width) */
    .section-modes-visual .visual-grid .visual-card:nth-child(3) {
        grid-column: span 2 !important;
        flex-direction: row !important;
        align-items: center !important;
        padding-right: 0 !important; /* Graphic needs space */
    }
    .section-modes-visual .visual-grid .visual-card:nth-child(3) .card-text-area {
        width: 60% !important;
        margin-bottom: 0 !important;
        padding-right: 8px !important;
    }
    .section-modes-visual .visual-grid .visual-card:nth-child(3) .graphic-area {
        width: 40% !important;
        height: 90px !important;
        margin-top: 0 !important;
        transform: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .section-modes-visual .visual-grid .visual-card:nth-child(3) .graphic-stage {
        transform: scale(0.65) !important;
        transform-origin: center center !important;
    }

    /* Alias Bar Compact */
    .section-modes-visual .alias-bar {
        margin-top: 16px !important;
        padding-top: 16px !important;
        text-align: left !important;
    }
    .section-modes-visual .alias-title {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    .section-modes-visual .alias-pills {
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    .section-modes-visual .alias-pill {
        font-size: 10px !important;
        padding: 3px 10px !important;
    }

} /* End of Media Query */

/* Extra Small Screens */
@media (max-width: 480px) {
    h1, .hero-title { font-size: 24px !important; } /* Even smaller on tiny screens */
    .big-stats-grid { grid-template-columns: 1fr !important; }
}