/* Layout Grid & Structures */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

/* Header */
.site-header {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
    padding: var(--spacing-4) 0;
    transition: background-color 0.3s ease;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.logo img {
    height: 28px;
    width: auto;
    display: block;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: var(--spacing-8);
}

.main-nav a {
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-gradient-primary);
    transition: width 0.3s ease;
}

.main-nav a:hover::after, .main-nav a.active::after {
    width: 100%;
}

/* Hide mobile-specific nav items on desktop */
.mobile-only-nav-item {
    display: none;
}

@media (max-width: 768px) {
    /* ... existing styles ... */
    
    /* Keep header inner flat, not stacked */
    .header-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 60px; /* Enforce height */
        padding: 0 var(--spacing-4); /* Restore horizontal padding */
    }
    
    .site-header {
        padding: var(--spacing-2) 0; /* Reduce header padding on mobile for 'corner' feel */
    }

    .logo {
        margin-right: auto; /* Push everything else to right if needed, but space-between handles it */
        flex-shrink: 0;
    }

    /* Hide desktop CTA button */
    .header-inner .btn,
    .header-inner .btn-gradient {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important; /* Use flex to center icon */
        align-items: center;
        justify-content: center;
        margin-left: 0 !important; /* Reset margin, let flex spread handle it */
        font-size: 2rem; 
        width: 48px; /* Touch target size */
        height: 48px;
        padding: 0;
    }

    /* Hide CTA on mobile if desired, or keep it. 
       Usually hamburger replaces the nav list. 
       We'll style the nav as an overlay. */
    
    .main-nav {
        position: fixed; /* Fallback */
        /* If header has backdrop-filter, this behaves as absolute relative to header. 
           Since header is sticky top:0, this covers the screen effectively starting from top. */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        
        /* SOLID background for readability, no glass/transparency issues */
        background-color: #ffffff !important; 
        background: #ffffff !important;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Start from top to avoid cutting off content on small screens */
        justify-content: flex-start;
        padding-top: 6rem; /* Space for the X button */
        padding-bottom: 2rem;
        
        transform: translateX(100%); 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1500; /* High z-index, but below toggle (2000) */
        overflow-y: auto; /* Scrollable if content too tall */
    }

    /* Active state to slide in */
    .main-nav.active {
        transform: translateX(0);
    }

    /* Stack links vertically */
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-8);
        width: 100%;
    }
    
    .mobile-only-nav-item {
        display: block !important;
        width: 100%;
        max-width: 200px; /* Limit width of button */
    }

    .main-nav li {
        width: 100%;
        text-align: center;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Stagger animation for links when menu is open */
    .main-nav.active li {
        opacity: 1;
        transform: translateY(0);
        /* Delays can be added via nth-child in refined CSS or JS, 
           simple transition here for now */
    }

    /* Large touch targets and font */
    .main-nav a {
        display: block;
        font-size: 1.5rem;
        padding: var(--spacing-2) 0;
    }
}

/* Sections */
.section {
    padding: var(--spacing-16) 0;
    position: relative;
}

/* Parallax Section & Window */
.parallax-section, .parallax-window {
    background-image: var(--bg-image-code);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    position: relative;
    /* Create a stacking context for the overlay */
    isolation: isolate;
}

.parallax-window {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16) 0;
}

/* Dark Overlay for Parallax - High Contrast */
.parallax-section::before, .parallax-window::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Deepened for text pop */
    z-index: -1;
}

/* Section Separators */
.section-separator {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
}

/* More consistent Angled/Slanted Look */
.section-separator-top {
    top: 0;
    transform: translateY(-99%);
}

.section-separator-bottom {
    bottom: 0;
    transform: translateY(99%);
}

.separator-angle {
    fill: var(--color-bg);
    height: 5vw;
    width: 100%;
}

/* Skewed Section Dividers */
.clip-diagonal-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    /* Ensure content doesn't get clipped undesirably */
    padding-bottom: calc(var(--spacing-16) + 5vw); 
}

.clip-diagonal-top {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    /* Ensure content doesn't get clipped */
    padding-top: calc(var(--spacing-16) + 5vw);
    margin-top: -5vw; /* Pull up to overlap if needed, or use normally */
}

/* Inverse Variants for Variety */
.clip-diagonal-bottom-inverse {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    padding-bottom: calc(var(--spacing-16) + 5vw);
}

.clip-diagonal-top-inverse {
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    padding-top: calc(var(--spacing-16) + 5vw);
    margin-top: -5vw;
}

.section-hero {
    padding-top: calc(var(--spacing-16) + 4rem); /* Increased for sticky header clearance */
    padding-bottom: var(--spacing-24);
    position: relative;
    overflow: hidden;
}

/* Split Screen Hero */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.hero-content {
    z-index: 10;
}

.hero-image {
    position: relative;
    height: 100%;
    min-height: 500px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating / Overlap Logic */
.section-overlap {
    margin-top: -5rem; /* Negative margin to pull up */
    padding-top: calc(5rem + var(--spacing-4)); /* Add padding to push content down inside the overlap */
    z-index: 20;
    position: relative;
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-8);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-6);
    grid-auto-flow: dense;
}

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

.span-row-2 {
    grid-row: span 2;
}

@media (max-width: 768px) {
    .h1 { font-size: 2.5rem; }
    .hero-split { grid-template-columns: 1fr; }
    .hero-image { min-height: 300px; margin-top: var(--spacing-8); }
    .section-overlap { margin-top: 0; } /* Disable overlap on mobile */

    /* Reset diagonal clips on mobile to prevent content cutting on tall stacked sections */
    .clip-diagonal-bottom,
    .clip-diagonal-top,
    .clip-diagonal-bottom-inverse,
    .clip-diagonal-top-inverse {
        clip-path: none;
        padding-bottom: var(--spacing-16);
        padding-top: var(--spacing-16);
        margin-top: 0;
    }
    
    /* Bento Grid Mobile Constraint */
    .span-2 {
        grid-column: auto;
    }
    .span-row-2 {
        grid-row: auto;
    }
}

/* Footer */
.site-footer {
    background-color: #1A202C;
    background-image: linear-gradient(135deg, #1A202C 0%, #0F172A 100%);
    color: var(--color-text-light);
    padding: var(--spacing-20) 0 var(--spacing-8);
    margin-top: var(--spacing-16);
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-12);
}

.site-footer h3 {
    font-family: var(--font-main);
    color: var(--color-accent); /* Tech accent color */
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    position: relative;
    display: inline-block;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer li {
    margin-bottom: var(--spacing-2);
}

.site-footer a {
    color: #94A3B8; /* Slate-400 */
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    display: inline-block;
    position: relative;
}

.site-footer a:hover {
    color: white;
    transform: translateX(4px); /* Subtle slide hover effect */
}

/* Copyright Section targeting the specific structure in html */
.site-footer > .container:last-child {
    margin-top: 0 !important; /* Override inline style */
    border-top: 1px solid rgba(255,255,255,0.1) !important; /* Enforce style */
    padding-top: var(--spacing-8) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: #64748B; /* Slate-500 */
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    /* Footer Mobile Adjustments */
    .site-footer {
        clip-path: none; /* Remove diagonal top on mobile to save space */
        padding-top: var(--spacing-12);
        margin-top: var(--spacing-12);
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
        text-align: left;
    }
    
    .site-footer > .container:last-child {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }
}