/* HELM RESPONSIVE OVERRIDES */

/* TABLET & SMALLER DESKTOP (Max Width 1024px) */
@media screen and (max-width: 1024px) {
    .hero-content h1 {
        font-size: 4rem;
    }

    .layout-grid {
        gap: 60px;
    }

    .col-text,
    .layout-reverse .col-text {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .col-ui,
    .layout-reverse .col-ui {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

/* MOBILE LANDSCAPE & TABLET PORTRAIT (Max Width 768px) */
@media screen and (max-width: 768px) {

    /* --- GLOBAL LAYOUT --- */
    /* --- GLOBAL LAYOUT --- */
    .master-view {
        overflow-x: hidden;
        /* Prevent horizontal scroll from overflowing content */
        width: 100vw;
    }

    body {
        overflow-x: hidden;
        width: 100vw;
    }

    /* Stack the columns vertically */
    .layout-grid {
        display: flex;
        flex-direction: column;
        gap: 60px;
        opacity: 1 !important;
        /* Force visibility content-wise if JS transition fails */
        filter: blur(0) !important;
        transform: scale(1) !important;
        margin-top: 60px;
        /* Spacing from top */
        width: 100%;
    }

    /* Ensure all sections can shrink */
    .section,
    .section-auto {
        min-width: 0;
        width: 100%;
    }

    /* For sections where we want text first */
    .layout-reverse {
        flex-direction: column;
    }

    /* Reset paddings for stacked layout */
    .col-text,
    .col-ui,
    .layout-reverse .col-text,
    .layout-reverse .col-ui {
        width: 100%;
        padding: 0 32px;
        /* Increased padding kept */
        text-align: left;
        align-items: flex-start;
        justify-content: center;
        box-sizing: border-box;
        direction: ltr;
        margin-left: 0;
    }

    .col-text {
        margin-bottom: 20px;
    }

    /* --- HERO --- */
    /* --- HERO --- */
    .hero-content {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding: 120px 24px 60px;
        /* Space for nav */
        margin-top: 0;
    }

    .hero-content p,
    .col-text p {
        font-size: 1rem !important;
        /* Smaller text for mobile */
        line-height: 1.5;
    }

    h1 {
        font-size: 3rem;
        /* Smaller hero text */
    }

    h2 {
        font-size: 2rem;
    }

    .hero-slogan {
        font-size: 1.1rem;
    }

    #sec0 {
        height: auto;
        min-height: 80vh;
        display: flex;
        align-items: flex-start;
    }

    /* --- COMMAND BAR --- */
    .command-bar {
        padding: 0 20px;
        /* Reduce padding */
    }

    .cmd-title {
        display: none;
        /* Hide title on small screens if needed, or keep short */
    }

    /* --- COMPONENT ADJUSTMENTS --- */

    /* Glass Modules / Video Cards - Make full width */
    /* --- VIDEO / GRAPHIC CONTAINERS --- */
    .col-ui video,
    .col-ui img,
    .clean-video {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: 8px;
    }

    /* Glass Modules / Video Cards - Make full width but constrain visual size */
    .clean-video-card,
    .glass-module {
        width: 70% !important;
        /* Visual constraint */
        max-width: 70% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        margin: 0 auto !important;
        margin-inline-start: auto !important;
        margin-right: auto !important;
        display: block;
    }

    /* Video adjustment */
    .clean-video {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Chaos Grid */
    .chaos-grid {
        width: 100%;
        gap: 16px;
        /* Ensure gap isn't breaking it */
    }

    .chaos-card {
        width: 100% !important;
        box-sizing: border-box;
        /* Ensure padding is included in width */
        max-width: 100%;
        margin: 0 !important;
    }

    /* Leverage Section (The stacked animation one) */
    /* Leverage Section (The stacked animation one) */
    .lev-container {
        width: 100% !important;
        max-width: 100%;
        height: auto;
        min-height: 400px;
        margin: 0 auto !important;
        transform: scale(0.9);
        /* Slightly larger than before, but safe */
        transform-origin: center top;
        left: auto;
        right: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding-top: 20px;
        position: relative;
    }

    /* Center the animation engine between cards */
    .stack-engine {
        position: relative !important;
        order: 3;
        /* Move to bottom */
        height: 220px !important;
        /* Increased height */
        width: 100% !important;
        margin: 10px auto 0 !important;
        /* Reduced margin */
        transform: scale(1.1) !important;
        /* Increased prominence */
        top: auto;
        left: auto;
        z-index: 10;
        pointer-events: none;
    }

    /* Reset internal cards to center on mobile but KEEP VERTICAL SPREAD */
    .stack-engine .stack-card,
    .stack-engine .stack-line {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Manually spread them out so they don't collapse */
    .stack-engine .sc-1 {
        top: 10% !important;
    }

    .stack-engine .sc-2 {
        top: 30% !important;
    }

    .stack-engine .sc-3 {
        top: 50% !important;
    }

    .stack-engine .sc-4 {
        top: 70% !important;
    }

    .stack-engine .sc-5 {
        top: 90% !important;
    }

    .stack-engine .stack-line {
        height: 100% !important;
        top: 0 !important;
    }

    /* Ensure images in leverage don't overflow */
    .lev-card {
        position: relative !important;
        max-width: 80%;
        margin: 0 auto !important;
        /* Reset margins, let gap handle it */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }

    /* Card 1: Trigger (Smaller & Centered) */
    .lev-card.lev-1 {
        order: 1;
        width: 220px !important;
        /* Made bigger per request */
        margin-bottom: 30px !important;
        transform: scale(1) !important;
    }

    /* Card 2: Highlight (Larger & Centered) */
    .lev-card.lev-2 {
        order: 2;
        margin-bottom: 50px !important;
        /* Space for animation */
        transform: scale(1.1) !important;
        /* Highlight */
        z-index: 5;
    }

    /* Fusion / Voice Section */
    .fusion-container {
        transform: scale(0.85);
        /* Increased from 0.7 */
        transform-origin: center top;
        /* Center it */
        width: 100%;
        /* Constrain width */
        margin: 0 auto;
    }

    /* Reduce 'Files Organize' graphic to match 'AI Voice' size */
    .magnetic-container {
        transform: scale(0.85);
        /* Increased from 0.7 for better visibility */
        transform-origin: center top;
        width: 100%;
        margin: 0 auto;
        margin-bottom: -40px;
    }

    /* Architecture / Stack Section */
    /* --- ARCHITECTURE VISUAL (Refactored Stack) --- */
    /* Architecture / Stack Section */
    /* --- ARCHITECTURE VISUAL (Refactored Stack) --- */
    /* --- ARCHITECTURE VISUAL (Refactored Stack for Mobile) --- */
    .open-arch-grid {
        display: none !important;
    }

    .arch-visual {
        transform: none;
        margin: 0 auto !important;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        /* 2 Columns */
        gap: 16px;
        padding: 0 0 20px 0;
        left: auto;
        box-sizing: border-box;
    }

    /* HUB: Span Full Width */
    .node-hub {
        grid-column: 1 / -1;
        width: 100% !important;
        justify-content: center;
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

    /* Grouping Visual Order: Inputs First, then Outputs? 
       Actually HTML structure is flat. We used absolute on desktop. 
       On Grid, they flow in DOM order:
       Hub -> Chat -> Make -> Apify -> Drive -> Scripts -> IG -> TikTok -> LinkedIn -> YT
       This flows perfectly: Hub at top, then inputs, then outputs.
    */

    /* Normalize nodes to be card-like */
    .arch-node {
        position: relative;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        height: auto;
        min-height: 110px;
        /* Uniform height */
        padding: 20px 12px;
        background: rgba(30, 30, 35, 0.6);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        margin: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Icon Resizing */
    .node-circle {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .node-circle svg {
        width: 100% !important;
        height: 100% !important;
        opacity: 0.9;
    }

    /* Text Resizing */
    .arch-node span {
        font-size: 0.8rem;
        color: #e4e4e7;
        opacity: 0.8;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
    }

    /* Hide cables */
    .arch-cables {
        display: none;
    }

    /* Reset Position Classes */
    .node-in-chatgpt,
    .node-in-make,
    .node-in-apify,
    .node-in-drive,
    .node-in-scripts,
    .node-hub,
    .node-out-ig,
    .node-out-tiktok,
    .node-out-linkedin,
    .node-out-youtube {
        top: auto;
        left: auto;
    }

    .arch-legend {
        position: relative;
        width: 100%;
        padding: 20px;
        top: 0;
        right: 0;
        transform: none;
    }

    /* --- RAIL & NAVIGATION VISUALS --- */

    /* Constraint SVG container to ensure it doesn't push width */
    #camera-gimbal {
        width: 100vw !important;
        overflow: hidden;
    }

    /* Hide the complex rail on mobile as it's designed for split view */
    .spine-layer {
        opacity: 0.15;
        /* Make very subtle background element or hide */
        width: 100vw;
        max-width: 100vw;
    }

    /* Hide the floating payload on mobile or dock it */
    #payload {
        display: none !important;
    }

    #payload i {
        font-size: 20px;
    }

    /* Ghost Labels - Hide on mobile */
    /* Ghost Labels - Hide on mobile */
    .ghost-labels-container {
        display: none;
    }

    /* --- FINAL PADDING & BOX FIXES --- */
    /* Enforce balanced padding on key sections */
    #sec7,
    #sec8,
    #sec9,
    #sec10 {
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* NEUTRALIZE INLINE PADDING ON INTERNAL CONTAINERS */
    #sec7>div,
    #sec8>div,
    #sec9>div,
    #sec10>div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Constrain Beta Boxes (Transparency & List) */
    /* They sit inside the parent with 24px padding, so full width is fine here */
    #sec10 div[style*="border:"],
    #sec10 ul {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* SMALL MOBILE (Max Width 400px) */
@media screen and (max-width: 400px) {
    h1 {
        font-size: 2.5rem;
    }

    .hero-tagline {
        font-size: 0.7rem;
    }

    .cmd-link {
        padding: 6px 12px;
        font-size: 0.7rem;
    }
}