/* =========================================
   QUANT HILL MOBILE SYSTEM
   ========================================= */

@media screen and (max-width: 768px) {

    /* =========================
       GLOBAL
    ========================= */

    html,
    body {
        overflow-x: hidden !important;
        width: 100%;
    }

    * {
        max-width: 100%;
    }

    .container,
    .main-layout,
    .page-container,
    .about-layout,
    .portfolio-container,
    .intelligence-hub,
    .scale-hub {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* =========================
       HEADER
    ========================= */

    .top-hero-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
        padding: 12px !important;
    }

    .brand-slot,
    .logo-area,
    .top-right-action {
        justify-content: center !important;
    }

    .top-center-branding h1 {
        font-size: 1rem !important;
    }

    .top-center-branding p {
        font-size: 0.6rem !important;
    }

    .top-left-logo {
        width: auto !important;
    }

    /* =========================
       NAVIGATION
    ========================= */

    .main-nav {
        padding: 10px !important;
    }

    .nav-list {
        flex-direction: column !important;
        gap: 0 !important;
        align-items: center !important;
    }

    .nav-list li {
        width: 100%;
        text-align: center;
    }

    .nav-list > li > a {
        padding: 12px !important;
    }

    .dropdown {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    /* =========================
       HERO
    ========================= */

    .hero {
        padding: 20px 15px !important;
    }

    .hero-layout {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .hero-title {
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    .hero-description {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .hero-badge {
        font-size: 12px !important;
    }

    /* =========================
       HERO BUTTONS
    ========================= */

    .hero-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-base,
    .btn-primary,
    .btn-secondary {
        width: 100% !important;
        text-align: center !important;
    }

    /* =========================
       STATS
    ========================= */

    .stats-panel {
        flex-direction: column !important;
    }

    .stat-box {
        min-width: auto !important;
    }

    .stat-box h3 {
        font-size: 26px !important;
    }

    /* =========================
       DASHBOARD
    ========================= */

    .dashboard-panel {
        min-height: auto !important;
    }

    .floating-card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        animation: none !important;
        margin-bottom: 12px;
    }

    /* =========================
       SERVICE PAGES
    ========================= */

    .qh-services-wrapper,
    .qh-businesses-wrapper {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .qh-right-panel {
        height: auto !important;
    }

    #qhDataCanvas,
    #qhMarketingCanvas {
        height: 250px !important;
    }

    /* =========================
       MOSAIC
    ========================= */

    .services-mosaic {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .mosaic-card {
        padding: 20px !important;
    }

    .mosaic-card h4 {
        font-size: 1.3rem !important;
    }

    /* =========================
       ABOUT
    ========================= */

    .about-grid {
        grid-template-columns: 1fr !important;
    }

    /* =========================
       HUBS
    ========================= */

    .hub-grid,
    .scale-hub__grid,
    .data-grid {
        grid-template-columns: 1fr !important;
    }

    /* =========================
       CONTACT
    ========================= */

    .contact-layout,
    .contact-master-panel {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-card {
        flex-direction: row !important;
    }

    /* =========================
       CTA SECTION
    ========================= */

    .cta-newsletter-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px !important;
        margin-left: 0 !important;
    }

    .bottom-cta {
        transform: none !important;
        max-width: 100% !important;
    }

    .newsletter-panel-side {
        margin-left: 0 !important;
    }

    /* =========================
       KPI
    ========================= */

    .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    /* =========================
       LEGAL
    ========================= */

    .legal-container {
        width: 95% !important;
        padding: 20px !important;
    }

    /* =========================
       REPORTS
    ========================= */

    .hero1-content h2 {
        font-size: 1.8rem !important;
    }

    .hero1-content p {
        font-size: 1rem !important;
    }

    /* =========================
       PIPELINE
    ========================= */

    .pipeline-container {
        flex-direction: column !important;
    }

    .stage {
        min-width: auto !important;
    }

    /* =========================
       TABLES
    ========================= */

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* =========================
       IMAGES
    ========================= */

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* =========================
       SCROLL TOP
    ========================= */

    #scrollToTopBtn {
        bottom: 15px;
        right: 15px;
    }
}


/* ===================================
   MOBILE NAVIGATION
=================================== */


@media screen and (max-width:768px){

    .main-nav{
        display:block !important;
        padding:8px !important;
    }

    .nav-list{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:6px !important;
        padding:0 !important;
        margin:0 !important;
    }

    .nav-list li{
        width:auto !important;
        list-style:none;
    }

    .nav-list a{
        font-size:11px !important;
        padding:8px 10px !important;
        white-space:nowrap;
    }

    .dropdown{
        display:none !important;
    }
}

@media screen and (max-width:768px){

    .hero-left{
        text-align:center;
    }

    .hero-badge{
        font-size:12px;
        padding:10px 18px;
        display:inline-block;
        margin-bottom:15px;
    }

    .hero-title{
        font-size:42px !important;
        line-height:1.05 !important;
        margin-bottom:20px !important;
        word-break:break-word;
    }

    .typing-text{
        display:block;
        width:100%;
    }

    .hero-description{
        font-size:16px !important;
        line-height:1.8 !important;
        max-width:100%;
        margin:0 auto 25px;
    }

    .hero-actions{
        display:flex;
        flex-direction:column;
        gap:12px;
        width:100%;
    }

    .hero-actions a{
        width:100%;
        text-align:center;
    }
}