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

@media (max-width: 1200px) {

    :root {
        --container-padding: 25px;
        --section-padding: 110px;
    }

    .nav-links {
        gap: 18px;
        margin-right: 20px;
    }

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

    .hero-card {
        width: 90%;
    }

    .private-grid,
    .sustainability-grid {
        gap: 60px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    :root {
        --section-padding: 90px;
    }

    .navbar {
        min-height: 76px;
    }

    .nav-links {
        position: fixed;

        top: 76px;
        left: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 0;

        padding: 25px;

        background: rgba(7,17,15,.97);

        border-top: 1px solid rgba(255,255,255,.08);

        transform: translateY(-130%);
        opacity: 0;

        transition:
            transform var(--transition),
            opacity var(--transition);
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
    }

    .nav-links a {
        width: 100%;

        padding: 17px 0;

        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .nav-links a::after {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-actions .nav-login,
    .nav-actions .button {
        display: none;
    }

    .hero {
        min-height: auto;
        padding: 130px 0 100px;
    }

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

    .hero-copy {
        max-width: 750px;
    }

    .hero-visual {
        min-height: 500px;
    }

    .hero-card {
        max-width: 470px;
    }

    .section-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 55px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card-large {
        grid-column: auto;
    }

    .private-grid,
    .sustainability-grid {
        grid-template-columns: 1fr;
    }

    .private-visual {
        min-height: 550px;
    }

    .private-image-placeholder {
        min-height: 550px;
    }

    .private-copy {
        max-width: 700px;
    }

    .sustainability-metrics {
        max-width: 700px;
    }

    .numbers-header {
        display: block;
    }

    .numbers-header h2 {
        margin-top: 30px;
    }

    .numbers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .number-item:nth-child(2) {
        border-right: 0;
    }

    .number-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .footer-main {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-brand {
        grid-column: span 3;
    }

}


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

@media (max-width: 600px) {

    :root {
        --container-padding: 18px;
        --section-padding: 75px;
    }

    h1 {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

    h2 {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    h3 {
        font-size: 2.2rem;
    }

    .brand-text {
        display: none;
    }

    .hero {
        padding-top: 115px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-trust {
        gap: 12px;
        justify-content: space-between;

        margin-top: 50px;
    }

    .trust-divider {
        height: 30px;
    }

    .trust-item strong {
        font-size: 16px;
    }

    .trust-item span {
        font-size: 7px;
    }

    .hero-visual {
        min-height: 380px;
    }

    .hero-card {
        width: 92%;

        padding: 24px;

        border-radius: 18px;
    }

    .card-number {
        margin-top: 55px;

        font-size: 13px;
    }

    .card-bottom {
        left: 24px;
        right: 24px;
        bottom: 22px;
    }

    .banking-orbit {
        width: 380px;
        height: 380px;
    }

    .orbit-two {
        width: 470px;
        height: 470px;
    }

    .floating-stat-one {
        top: 10px;
        right: -5px;
    }

    .floating-stat-two {
        bottom: 15px;
        left: -5px;
    }

    .floating-stat {
        padding: 11px 13px;
    }

    .floating-stat strong {
        font-size: 9px;
    }

    .hero-scroll {
        display: none;
    }

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

        gap: 25px;
    }

    .intro-copy {
        padding-top: 0;
    }

    .service-card,
    .service-card-large {
        min-height: 480px;

        padding: 30px;
    }

    .service-content {
        margin-top: 60px;
    }

    .numbers-grid {
        grid-template-columns: 1fr;
    }

    .number-item {
        min-height: 200px;

        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .number-item:last-child {
        border-bottom: 0;
    }

    .private-visual,
    .private-image-placeholder {
        min-height: 420px;
    }

    .private-label {
        left: 25px;
        bottom: 25px;

        font-size: 4rem;
    }

    .sustainability-metrics {
        grid-template-columns: 1fr;
    }

    .impact-card {
        min-height: 260px;
    }

    .cta-panel {
        min-height: 520px;

        padding: 40px 25px;
    }

    .cta-orbit {
        width: 500px;
        height: 500px;

        right: -300px;
    }

    .footer-main {
        grid-template-columns: repeat(2, 1fr);

        gap: 45px 25px;

        padding-bottom: 60px;
    }

    .footer-brand {
        grid-column: span 2;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
    }

}