/* =======================================================================
 GLOBAL HEADER / NAVIGATION (permanent fix)
======================================================================= */
/* ===== Default (mobile-first) ===== */
.container.nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    width: 100% !important;
    box-sizing: border-box;
}

.container.nav .brand img {
    width: auto;
    height: auto;
    max-width: 200px;
    display: block;
    margin: 0 auto;
}

.container.nav nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
}

/* ===== Tablets (≥600px – <1024px) ===== */
@media (min-width: 600px) and (max-width: 1023.98px) {
    .container.nav {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding-block: 18px !important;
        padding-inline: 28px !important;
    }

    .container.nav .brand img {
        max-width: 240px !important;
    }

    .container.nav nav {
        justify-content: center !important;
        width: auto !important;
        gap: 14px !important;
    }
}

/* ===== Desktop / iPad Pro (≥1024px): grid alignment fix ===== */
@media (min-width: 1024px) {
    .container.nav {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;

        /* logo | spacer | nav */
        align-items: center !important;
        column-gap: 20px !important;
        padding-block: 20px !important;
        padding-inline: 40px !important;
        text-align: left !important;
        width: 100% !important;
    }

    .container.nav .brand {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .container.nav nav {
        grid-column: 3 !important;
        justify-self: end !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 18px !important;
        width: auto !important;
    }

    .container.nav .brand img {
        max-width: 280px !important;
    }

    .container.nav nav .btn {
        font-size: 1.05rem !important;
        padding: 0.7rem 1.1rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

/* ===== Small phones (<600px) ===== */
@media (max-width: 599.98px) {
    .container.nav .brand img {
        max-width: 160px !important;
    }
}

/* =======================================================================
 HERO SECTION (Transparent + Responsive)
======================================================================= */
#home.container.hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(20px, 5vw, 48px) !important;
    padding-block: clamp(32px, 6vh, 64px) !important;
    padding-inline: clamp(16px, 5vw, 48px) !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    text-align: left !important;
}

#home.container.hero > div:first-child {
    text-align: left !important;
}

/* Transparent card */
#home .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 1000px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Image wrapper */
#home.container.hero .hero-illustration {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#home.container.hero .hero-illustration img.hero-img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Stack vertically on smaller screens */
@media (max-width: 1023.98px) {
    #home.container.hero {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding-block: clamp(24px, 5vh, 48px) !important;
        padding-inline: clamp(12px, 4vw, 32px) !important;
    }

    #home.container.hero > div:first-child {
        text-align: center !important;
    }

    #home.container.hero .actions {
        justify-content: center !important;
    }

    #home .card {
        max-width: 92% !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    #home .card {
        max-width: 95% !important;
    }
}

/* iPad Pro range (wider hero) */
@media (min-width: 1024px) and (max-width: 1366px) {
    #home.container.hero {
        max-width: 95vw !important;
    }

    #home .card {
        max-width: 95% !important;
    }
}

/* =======================================================================
 SOLUTIONS SECTION (Scaling Grid)
======================================================================= */
#solutions.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-inline: clamp(16px, 5vw, 48px) !important;
    padding-block: clamp(20px, 5vh, 44px) !important;
}

#solutions .features {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 20px !important;
}

#solutions .feature {
    background: var(--card, transparent) !important;
    border: 1px solid var(--border, transparent) !important;
    border-radius: 10px !important;
    padding: clamp(12px, 2vw, 18px) !important;
    text-align: left !important;
}

/* 2-column layout for tablets */
@media (min-width: 769px) and (max-width: 960px) {
    #solutions .features {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* 3-column layout for desktops */
@media (min-width: 961px) {
    #solutions .features {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
}

/* =======================================================
   UNIVERSAL FOOTER FIX (independent of .container)
   ======================================================= */
#site-footer {
    width: 100%;
    background: transparent;
    border-top: 1px solid var(--border, #1e2a46);
    color: var(--muted, #b9c6e4);
    padding: clamp(12px, 2.5vh, 20px) clamp(20px, 5vw, 60px);
    font-size: 0.95rem;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;

    /* keeps it out of container grid effects */
}

/* Core layout — flex row that never collapses */
#site-footer .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 12px;
}

/* Left side */
#site-footer .footer-left {
    flex: 1 1 auto;
    text-align: left;
    margin: 0;
    min-width: 0;
}

/* Right side — stays on the right */
#site-footer .footer-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
}

/* Links */
#site-footer .footer-right a {
    color: var(--brand, #6efacc);
    text-decoration: none;
    font-weight: 500;
}

#site-footer .footer-right a:hover {
    text-decoration: none;
    color: var(--brand, #6efacc);
}

/* Divider dot */
#site-footer .footer-right span[aria-hidden="true"] {
    opacity: 0.5;
}

/* Tablet & below — stack centered */
@media (max-width: 768px) {
    #site-footer .footer-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        text-align: center;
    }

    #site-footer .footer-left,
    #site-footer .footer-right {
        justify-content: center;
        text-align: center;
        width: 100%;
        white-space: normal;
    }
}