/* ============================================ */
/* RESPONSIVE DESIGN (Media Queries) */
/* ============================================ */

/* --- Tablet Devices (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }

    .hero-grid,
    .tech-grid {
        gap: 40px;
    }

    .philosophy-visual {
        transform: scale(0.78);
        transform-origin: top left;
    }

    h1 {
        font-size: clamp(35px, 6vw, 55px);
    }

    .tech-content h2 {
        font-size: 40px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cards per row on tablet */
    }

    /* Nav switches to the hamburger drawer starting here - with 4 links plus
       the Get in Touch button, the full desktop nav no longer fits between
       this width and 768px (it has no flex-wrap, so it would overflow/squash). */
    header {
        padding: 15px 0;
    }

    .nav-links {
        position: fixed;
        top: var(--header-height, 76px);
        right: 0;
        width: min(300px, 80vw);
        height: calc(100vh - var(--header-height, 76px));
        background: rgba(4, 4, 4, 0.97);
        backdrop-filter: blur(20px);
        border-left: 1px solid var(--glass-bg);
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 30px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
    }

    [data-theme="light"] .nav-links {
        background: rgba(255, 255, 255, 0.97);
        border-left: 1px solid var(--glass-bg);
    }

    .nav-links.open {
        transform: translateX(0);
        display: flex;
    }

    .nav-links a {
        margin: 0;
        padding: 12px 0;
        width: 100%;
        font-size: 16px;
        border-bottom: 1px solid var(--glass-bg);
    }

    .nav-cta-mobile {
        display: block;
        text-align: center;
        margin-top: 15px;
    }

    .desktop-cta {
        display: none;
    }

    .hamburger-btn {
        display: flex;
    }
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .fintech-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }

    .fintech-badges {
        justify-content: center;
    }

    .staff-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }

    .staff-content p {
        margin: 0 auto 35px;
    }

    .staff-visual {
        justify-content: center;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .why-left {
        position: relative;
        top: 0;
        text-align: center;
    }

    .why-left p {
        margin: 0 auto;
    }

    .tech-core-wrapper {
        width: 100%;
    }

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

    .solution-item {
        border-right: 1px solid var(--btn-outline);
        border-bottom: 1px solid var(--btn-outline);
    }

    .solution-item:nth-child(2n) {
        border-right: none;
    }

    .solution-item:nth-child(3),
    .solution-item:nth-child(4) {
        border-bottom: none;
    }
}

/* --- Mobile Devices (max-width: 768px) --- */
@media (max-width: 768px) {
    /* Only the icon fits comfortably alongside the hamburger + toggle here */
    .logo-full {
        display: none;
    }

    .logo-icon {
        display: flex;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        /* stack into a single column */
        text-align: center;
        padding-top: 10px;
    }

    .hero-visual {
        justify-content: center;
        margin-top: 30px;
    }

    #exploding-logo {
        max-width: 350px;
        /* smaller logo on mobile */
    }

    .hero-text h1 {
        font-size: 40px;
    }

    .hero-text p {
        margin: 20px auto;
    }

    .tech-grid {
        grid-template-columns: 1fr;
        /* stack into a single column too */
        text-align: center;
        gap: 32px;
        /* .tech-forward is a fixed height:100vh flex container, so this
           grid gets stretched to fill it - without this, the two stacked
           rows (content + visual) get spread apart to fill that full
           height instead of sitting together at the top, which is what
           was creating the large empty gap between them. */
        align-content: start;
    }

    .philosophy-content {
        order: 1;
    }

    .tech-content h2 {
        font-size: 26px;
        margin: 10px 0 12px;
    }

    .tech-content p {
        font-size: 15px;
        margin-bottom: 14px;
    }

    .philosophy-checklist {
        margin: 4px 0 18px;
    }

    .philosophy-checklist li {
        text-align: left;
        font-size: 14px;
        margin-bottom: 9px;
    }

    .philosophy-rocket {
        display: none;
        /* decorative only - not needed once cards stack full-width */
    }

    .philosophy-visual {
        order: 2;
        height: auto;
        transform: none;
    }

    .philosophy-chip-stack {
        position: static;
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .philosophy-chip {
        position: static;
        width: 100%;
        animation: none;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    .philosophy-chip-inner {
        padding: 18px;
        text-align: left;
        background: var(--glass-bg);
        border-color: var(--btn-outline);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }

    .philosophy-chip-icon {
        width: 38px;
        height: 38px;
        margin: 0;
        flex-shrink: 0;
    }

    .philosophy-chip-icon svg {
        width: 18px;
        height: 18px;
    }

    .philosophy-chip p {
        display: block;
        font-size: 13px !important;
    }

    .philosophy-chip h4 {
        font-size: 14px;
        color: var(--text-main);
        margin-bottom: 4px;
    }

    /* .tech-forward is a fixed height:100vh section on desktop (needed for
       the pinned hero-to-here scroll effect), but on mobile the content
       should just size itself naturally - nothing else here depends on a
       minimum screen height (the next section's -100vh overlap trick, a
       desktop-only cinematic effect, is cancelled below to match), and
       enforcing one was the direct cause of a large empty gap below
       shorter-than-100vh content on taller phones. */
    .tech-forward {
        height: auto;
    }

    .services-section {
        margin-top: 0;
    }

    /* The -14vh upward bleed is a nice subtle touch on desktop, but on
       mobile - where the previous section's content now sits without a
       big empty gap below it - that same bleed collides straight into
       it. */
    .marquee-wrapper {
        top: 0;
    }

    /* Custom cursor + spotlight are desktop-mouse-hover effects - on touch
       devices there's no persistent cursor to follow, so without this
       they can appear "stuck" wherever the screen was last tapped,
       floating fixed on top of whatever content is scrolled underneath. */
    .cursor-dot,
    .cursor-outline,
    .mouse-spotlight {
        display: none;
    }

    .services-grid {
        grid-template-columns: 1fr;
        /* one card per row on mobile */
    }

    .services-header {
        text-align: center;
    }

    .marquee-content span {
        font-size: 15vw;
        /* slightly larger marquee text on mobile */
    }

    .service-card {
        min-height: 250px;
        padding: 30px;
    }

    .fintech-visual {
        grid-template-columns: 1fr;
    }

    .staff-visual {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-card {
        width: 100%;
        max-width: none;
        min-height: auto;
        margin-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 16px;
    }

    .staff-card.active {
        min-height: auto;
        margin-bottom: 16px;
    }

    .staff-card.active::after {
        display: none;
    }

    .c1,
    .c3 {
        margin-bottom: 0px;
    }

    .c2,
    .c4 {
        margin-top: 0px;
    }

    .f-card-content {
        align-items: center;
    }

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

    .solutions-panel {
        grid-template-columns: 1fr;
    }

    .solution-item {
        border-right: none !important;
        border-bottom: 1px solid var(--btn-outline);
    }

    .solution-item:last-child {
        border-bottom: none;
    }

    .flow-item {
        margin-bottom: 80px;
    }

    .flow-line-track {
        left: 20px;
    }

    .flow-dot {
        left: 20px;
    }

    .flow-content {
        width: 85%;
        margin-left: 50px !important;
        margin-right: 0 !important;
        text-align: left;
    }

    /* Contact ("Get in Touch") section - the grid never collapsed to a
       single column, so the form overlapped the text and overflowed
       off-screen on narrow devices. */
    .final-cta-section {
        padding: 80px 0;
    }

    .cta-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-form-wrapper {
        padding: 30px;
    }
    .footer-container{
        padding: 30px 30px;
    }
}

/* --- Small Phones (max-width: 480px) --- */
@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 32px;
    }

    .btn-red {
        width: 100%;
        padding: 15px 0;
    }

    /* button fills the full width */

    .nav-logo {
        font-size: 16px;
    }

    .theme-toggle {
        width: 48px;
        height: 26px;
    }

    .toggle-thumb {
        width: 18px;
        height: 18px;
    }

    [data-theme="light"] .toggle-thumb {
        transform: translateX(22px);
    }

    .hamburger-btn {
        width: 35px;
        height: 35px;
    }

    
}