/* =========================================================
   RESPONSIVE SYSTEM
   ========================================================= */

@media (max-width: 1100px) {

    .container {
        width: min(100% - 32px, var(--container));
    }

    .section {
        padding: 85px 0;
    }
}


@media (max-width: 768px) {

    html {
        font-size: 15px;
    }

    .container {
        width: min(100% - 28px, var(--container));
    }

    .section {
        padding: 70px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 2.15rem;
    }

    .section-description {
        font-size: 0.95rem;
    }

    .btn {
        min-height: 48px;
        padding: 0 19px;
    }
}


@media (max-width: 480px) {

    .container {
        width: calc(100% - 24px);
    }

    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 1.9rem;
    }

    .btn {
        width: 100%;
    }
}

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

@media (max-width: 1100px) {

    .desktop-navigation {
        display: none;
    }

    .header-actions {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }

    .header-container {
        min-height: 70px;
    }

    .site-header.scrolled .header-container {
        min-height: 64px;
    }
}


@media (max-width: 480px) {

    .header-container {
        width: calc(100% - 24px);
    }

    .brand-name {
        font-size: 0.94rem;
    }

    .brand-logo img {
        width: 38px;
        height: 38px;
    }

    .mobile-navigation-inner {
        width: 92%;
        padding: 18px;
    }

    .mobile-actions {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 1100px) {

    .hero-container {
        grid-template-columns: 1fr;

        gap: 55px;

        padding-top: 75px;
        padding-bottom: 85px;
    }


    .hero-content {
        max-width: 800px;
    }


    .hero-market-dashboard {
        max-width: 680px;

        margin-inline: auto;
    }


    .introduction-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

}


@media (max-width: 768px) {

    .hero-section {
        min-height: auto;
    }


    .hero-container {
        width: min(100% - 28px, 700px);

        gap: 45px;

        padding-top: 60px;
        padding-bottom: 75px;
    }


    .hero-title {
        font-size: clamp(2.65rem,
                10vw,
                4rem);

        line-height: 1.02;
    }


    .hero-description {
        font-size: 0.92rem;

        line-height: 1.75;
    }


    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .hero-trust {
        flex-wrap: wrap;

        gap: 10px;
    }


    .hero-trust-divider {
        display: none;
    }


    .hero-market-dashboard {
        padding: 16px;

        border-radius: 19px;
    }


    .hero-market-cards {
        grid-template-columns: 1fr;
    }


    .hero-scroll-indicator {
        display: none;
    }


    .introduction-text {
        padding-top: 0;
    }

}


@media (max-width: 480px) {

    .hero-container {
        width: calc(100% - 24px);

        padding-top: 48px;
        padding-bottom: 65px;
    }


    .hero-eyebrow {
        font-size: 0.62rem;
    }


    .hero-title {
        font-size: 2.55rem;

        letter-spacing: -0.045em;
    }


    .hero-description {
        font-size: 0.88rem;
    }


    .market-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .market-status {
        align-self: flex-start;
    }


    .market-chart-area {
        padding: 12px;
    }


    .fake-chart {
        height: 120px;
    }


    .ticker-item {
        padding-inline: 20px;
    }


    .introduction-grid {
        gap: 15px;
    }

}

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

@media (max-width: 1100px) {

    .header-container {
        width: min(100% - 32px, 1400px);
        gap: 15px;
    }

    .main-navigation {
        gap: 0;
    }

    .nav-link {
        padding: 0 10px;
        font-size: 13px;
    }

    .header-actions {
        gap: 6px;
    }

    .header-login {
        padding: 0 10px;
    }

    .header-open-account {
        padding: 0 13px;
    }
}


@media (max-width: 900px) {

    .main-navigation,
    .header-actions {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .site-brand-text {
        font-size: 18px;
    }
}


@media (max-width: 480px) {

    .site-header {
        height: 70px;
    }

    .header-container {
        width: calc(100% - 24px);
    }

    .site-brand img {
        width: 38px;
        height: 38px;
    }

    .site-brand-text {
        font-size: 16px;
    }

    .mobile-navigation {
        top: 70px;
        height: calc(100vh - 70px);
    }
}