/* --- LOCAL FONTS (Archivo) --- */
@font-face { 
    font-family: 'Archivo'; 
    src: url('../assets/fonts/Archivo-Regular.woff2') format('woff2'); 
    font-weight: 400; font-style: normal; font-display: swap; 
}
@font-face { 
    font-family: 'Archivo'; 
    src: url('../assets/fonts/Archivo-Medium.woff2') format('woff2'); 
    font-weight: 500; font-style: normal; font-display: swap; 
}
@font-face { 
    font-family: 'Archivo'; 
    src: url('../assets/fonts/Archivo-SemiBold.woff2') format('woff2'); 
    font-weight: 600; font-style: normal; font-display: swap; 
}
@font-face { 
    font-family: 'Archivo'; 
    src: url('../assets/fonts/Archivo-Bold.woff2') format('woff2'); 
    font-weight: 700; font-style: normal; font-display: swap; 
}
@font-face { 
    font-family: 'Archivo'; 
    src: url('../assets/fonts/Archivo-ExtraBold.woff2') format('woff2'); 
    font-weight: 800; font-style: normal; font-display: swap; 
}

:root {
    --brand-navy: #0D1436; 
    --brand-lilac: #B6BDDF; 
    --brand-volt: #FCED1E; 
    --brand-grey: #E2E4E3; 
    --brand-white: #FFFFFF; 
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Archivo', Arial, sans-serif; }

html, body {
    background-color: var(--brand-navy); color: var(--brand-white);
    line-height: 1.6; overflow-x: hidden; width: 100%; -webkit-font-smoothing: antialiased;
}

/* Fluid Image Reset: Keeps images responsive alongside HTML width/height attributes */
img {
    max-width: 100%;
    height: auto;
}

*:focus-visible { outline: 2px solid var(--brand-volt); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* --- SIDEBAR MENU --- */
.menu-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.menu-sidebar { position: fixed; top: 0; right: 0; width: 100%; max-width: 450px; height: 100vh; background: rgba(13, 20, 54, 0.98); border-left: 1px solid rgba(255, 255, 255, 0.05); z-index: 10000; display: flex; flex-direction: column; justify-content: center; padding: 4rem; transform: translateX(100%); transition: transform 0.4s ease; }
.menu-close-btn { position: absolute; top: 2.5rem; right: 5%; background: none; border: none; cursor: pointer; width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.menu-close-btn span { display: block; width: 30px; height: 2px; background-color: var(--brand-white); position: absolute; }
.menu-close-btn span:nth-child(1) { transform: rotate(45deg); }
.menu-close-btn span:nth-child(2) { transform: rotate(-45deg); }
.menu-sidebar nav { display: flex; flex-direction: column; gap: 2rem; }
.menu-link { color: var(--brand-white); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; text-decoration: none; letter-spacing: -0.5px; transition: color 0.3s ease, transform 0.3s ease; display: inline-block; }
.menu-link:hover { color: var(--brand-volt); transform: translateX(10px); }

/* --- THE HEADER --- */
.site-header { position: absolute; top: 0; left: 0; width: 100%; padding: 2.5rem 5%; display: flex; justify-content: space-between; align-items: center; z-index: 999; }
.brand-logo { display: flex; align-items: center; z-index: 51; text-decoration: none; }
.logo-elongated { display: block; height: 35px; width: auto; }
.logo-wrapped { display: none; height: 40px; width: auto; }
.menu-open-btn { background: rgba(13, 20, 54, 0.4); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; padding: 0.6rem 1.2rem; cursor: pointer; display: flex; align-items: center; gap: 12px; z-index: 51; transition: background 0.3s ease, border-color 0.3s ease; }
.menu-open-btn:hover { background: rgba(13, 20, 54, 0.8); border-color: rgba(255, 255, 255, 0.4); }
.quick-links-text { color: var(--brand-white); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.5px; text-transform: uppercase; }
.hamburger-lines { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hamburger-lines span { display: block; height: 2px; background-color: var(--brand-white); transition: width 0.3s ease; }
.hamburger-lines span:nth-child(1) { width: 24px; }
.hamburger-lines span:nth-child(2) { width: 14px; }
.menu-open-btn:hover .hamburger-lines span:nth-child(2) { width: 24px; }
@media (max-width: 768px) { .logo-elongated { display: none; } .logo-wrapped { display: block; } .quick-links-text { display: none; } .menu-open-btn { padding: 0.8rem; } }

/* --- THE CINEMATIC STAGE --- */
.stage-wrapper { position: relative; background-color: var(--brand-navy); height: 350vh; }
.pinned-cinematic { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1; background-color: var(--brand-navy); }
.layer-astronaut { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; z-index: 1; }
.cinematic-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(13, 20, 54, 0.85); z-index: 2; }
.stage-bottom-fade { position: absolute; bottom: 0; left: 0; width: 100%; height: 20vh; background: linear-gradient(to bottom, transparent 0%, var(--brand-navy) 100%); z-index: 10; pointer-events: none; }

/* --- FOUC FIX --- */
#header-logo, 
#text-scene-1, 
#text-scene-2 { 
    opacity: 0; 
}

/* --- SCROLLING TEXT --- */
.story-content { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10; pointer-events: none; display: grid; place-items: center; }
.cinematic-text { grid-area: 1 / 1; width: 90%; max-width: 900px; text-align: center; text-shadow: 0 4px 20px rgba(0,0,0,0.7); }
.cinematic-text h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; color: var(--brand-white); line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -1px; }
.cinematic-logo { width: 90%; max-width: 600px; height: auto; margin-bottom: 2rem; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5)); }
.accent { color: var(--brand-volt); }
.story-content p { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 300; color: rgba(255, 255, 255, 0.95); margin-bottom: 1.5rem; max-width: 700px; margin-left: auto; margin-right: auto; }
.scroll-indicator { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.8; }
.mouse { width: 30px; height: 50px; border: 2px solid var(--brand-lilac); border-radius: 20px; position: relative; }
.mouse::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background-color: var(--brand-volt); border-radius: 4px; animation: scrollWheel 2s infinite; }
.scroll-text { font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; color: var(--brand-white); text-transform: uppercase; margin-top: 5px; opacity: 0.8; }
@keyframes scrollWheel { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, 15px); opacity: 0; } }

/* --- UI COMPONENTS --- */
.container { max-width: 1400px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 2; }
.pill-badge { display: inline-block; padding: 0.4rem 1.2rem; border: 1px solid var(--brand-volt); border-radius: 30px; color: var(--brand-volt); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }
.pill-badge.dark { border-color: var(--brand-navy); color: var(--brand-navy); }
.btn { background-color: var(--brand-volt); color: var(--brand-navy); padding: 1.2rem 3.5rem; border-radius: 40px; text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; display: inline-block; font-size: 1.1rem; margin-top: 1rem; cursor: pointer; border: none;}
.btn:hover { background-color: var(--brand-white); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* --- STATS SECTION --- */
.stats-section { padding: 4rem 0 6rem; position: relative; z-index: 5; background-color: var(--brand-navy); }
.stats-banner { display: flex; flex-direction: column; gap: 4rem; max-width: 1300px; margin: 0 auto; justify-content: space-between; align-items: flex-start; padding: 0 5%; }
@media (min-width: 900px) { .stats-banner { flex-direction: row; align-items: center; } }
.stats-text { max-width: 500px; }
.stats-text h2 { font-size: clamp(2rem, 3vw, 2.5rem); color: var(--brand-white); margin-bottom: 0.5rem; line-height: 1.2; }
.stats-text p { font-size: 1.15rem; color: var(--brand-lilac); font-weight: 300; }
.stats-group { display: flex; gap: 4rem; flex-wrap: wrap; }
.stat-item { display: flex; flex-direction: column; }
.stat-item .num { font-size: 4.5rem; font-weight: 800; color: var(--brand-volt); line-height: 1; letter-spacing: -2px; }
.stat-item p { font-size: 1.05rem; color: var(--brand-white); margin-top: 0.5rem; font-weight: 500; max-width: 180px; line-height: 1.3;}

/* --- SECTION 1: FLOATING "ABOUT" LAYOUT --- */
.why-flex-section {
    background-color: var(--brand-lilac); 
    padding: 10rem 0 12rem;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* Redesigned to act as a responsive layout anchor for the inline SVG watermark */
.bg-mega-text {
    position: absolute; 
    top: auto; 
    bottom: 5%; /* Pinned to the bottom behind the spaceman on mobile */
    left: 50%; 
    transform: translateX(-50%); /* Only translate X since it's pinned to the bottom */
    width: 100%;
    max-width: 1400px;
    aspect-ratio: 900 / 220; /* CRITICAL: Prevents height collapse in Safari/Chrome */
    pointer-events: none; 
    z-index: 1; /* Sits above the lilac background but under the cards */
    padding: 0 5%;
}
.bg-mega-text svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* MOBILE DEFAULT ORDER (Spaceman Last) */
.why-grid { display: flex; flex-direction: column; gap: 2rem; position: relative; z-index: 2; }
.box-main { order: 1; }
.card-chem { order: 2; }
.card-pod { order: 3; }
.card-clim { order: 4; }
.lottie-box { order: 5; margin: 2rem auto 0; width: 100%; max-width: 320px; } /* Moved to order 5 */

.float-card {
    background: var(--brand-white); border-radius: 16px; padding: 3rem 2rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.03);
    border-top: 5px solid var(--brand-volt); 
    transition: transform 0.4s ease; width: 100%;
}
.float-card:hover { transform: translateY(-5px); box-shadow: 0 30px 50px rgba(0,0,0,0.1); }
.float-card h3 { font-size: 1.5rem; color: var(--brand-navy); margin-bottom: 1rem; font-weight: 800;}
.float-card p { font-size: 1rem; color: #555; }

.central-box {
    background: var(--brand-white); border-radius: 20px; padding: 4rem 3rem;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1); text-align: left;
}
.central-box h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); color: var(--brand-navy); line-height: 1.1; margin-bottom: 2rem; letter-spacing: -1px; }
.central-box hr { border: none; border-top: 1px dashed rgba(13, 20, 54, 0.2); margin: 2rem 0; }
.central-box p { font-size: 1.1rem; color: #444; margin-bottom: 1.5rem; }

/* DESKTOP LAYOUT (Reverts to Grid & Centers Mega Text) */
@media (min-width: 1024px) {
    .bg-mega-text { 
        top: 50%; 
        bottom: auto; 
        transform: translate(-50%, -50%); 
        width: 160vw;        
        max-width: none;     
        padding: 0;
    }
    .why-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-auto-rows: auto; gap: 2rem; align-items: center; }
    .box-main { grid-column: 2; grid-row: 1 / span 2; order: unset; }
    .card-chem { grid-column: 1; grid-row: 1; transform: translateY(-40px); order: unset; }
    .lottie-box { grid-column: 1; grid-row: 2; order: unset; margin: 0 auto;}
    .card-pod { grid-column: 3; grid-row: 1; transform: translateY(20px); order: unset; }
    .card-clim { grid-column: 3; grid-row: 2; transform: translateY(60px); order: unset; }
}

/* --- SECTION 2: BENTO CROP GRID --- */
.crop-benefits-section { background-color: var(--brand-white); padding: 8rem 0; z-index: 10; }
.crop-benefits-section .section-header { text-align: left; max-width: 800px; margin: 0 0 4rem 0; }
.crop-benefits-section .section-header h2 { color: var(--brand-navy); font-size: clamp(2.5rem, 4vw, 3.5rem); letter-spacing: -1px; line-height: 1.1; }

.bento-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; grid-auto-rows: 300px; }
@media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 350px; } }
@media (min-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 350px); }
    .bento-card-1 { grid-column: 1 / 3; grid-row: 1 / 3; } 
    .bento-card-2 { grid-column: 3 / 5; grid-row: 1 / 2; } 
    .bento-card-3 { grid-column: 3 / 4; grid-row: 2 / 3; } 
    .bento-card-4 { grid-column: 4 / 5; grid-row: 2 / 3; } 
}
.bento-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.08); background-color: var(--brand-grey); }
.bento-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.bento-card:hover img { transform: scale(1.05); }
.bento-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 4rem 2rem 2rem; background: linear-gradient(to top, rgba(13, 20, 54, 0.9) 0%, transparent 100%); color: var(--brand-white); display: flex; align-items: flex-end; }
.bento-overlay h3 { font-size: 1.5rem; font-weight: 700; }

/* --- SECTION 3: FOLIAR NUTRITION --- */
.foliar-section { background-color: var(--brand-navy); padding: 10rem 0; position: relative; }
.foliar-split { display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 1024px) { .foliar-split { grid-template-columns: 1.2fr 1fr; align-items: stretch; gap: 5rem;} }

.foliar-left-col { display: flex; flex-direction: column; gap: 3rem; height: 100%; }
.foliar-text h2 { font-size: clamp(2.5rem, 4.5vw, 3.5rem); color: var(--brand-volt); margin-bottom: 1.5rem; line-height: 1.1; }
.foliar-text p { font-size: 1.15rem; color: var(--brand-lilac); }
.foliar-image-wrapper { flex-grow: 1; border-radius: 20px; overflow: hidden; min-height: 400px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.foliar-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.foliar-cards-grid { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.dark-glass-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.05); border-left: 3px solid var(--brand-volt); padding: 2.5rem 2rem; border-radius: 12px; backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; flex: 1; transition: transform 0.3s ease, background 0.3s ease; }
.dark-glass-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.06); }
.dark-glass-card h3 { font-size: 1.3rem; color: var(--brand-white); margin-bottom: 0.5rem; }
.dark-glass-card p { font-size: 1.05rem; color: var(--brand-lilac); margin-bottom: 0; }

/* --- SECTION 4: PARALLAX MEGA TYPOGRAPHY --- */
.mega-text-section { background-color: var(--brand-white); padding: 12rem 5%; text-align: center; }
.mega-text-wrapper { max-width: 1400px; margin: 0 auto; }
.mega-text-line { overflow: hidden; line-height: 1.1; padding-bottom: 10px; }
/* Changed parallax clip source image to high-efficiency AVIF formatting */
.mega-line { font-size: clamp(3.3rem, 10vw, 11rem); font-weight: 800; text-transform: uppercase; letter-spacing: -2px; margin: 0; line-height: 0.95; background-image: url('../img/maize-field.avif'); background-size: cover; background-position: center; background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mega-quote-author { margin-top: 4rem; font-size: 1.25rem; color: var(--brand-navy); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; opacity: 0; max-width: 600px; margin-left: auto; margin-right: auto; }

/* --- SECTION 5/6: COMBINED AIVA CTA HERO --- */
.cta-hero { position: relative; padding: 12rem 5%; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.cta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cta-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(13, 20, 54, 0.85); z-index: 2; }
.cta-content { position: relative; z-index: 3; max-width: 900px; margin: 0 auto; }
.cta-content h2 { font-size: clamp(2.5rem, 5vw, 4rem); color: var(--brand-white); margin-bottom: 1.5rem; line-height: 1.1; }
.cta-content p { font-size: 1.25rem; color: var(--brand-lilac); margin-bottom: 2rem;}

/* --- FOOTER --- */
.site-footer { padding: 5rem 5%; background-color: var(--brand-navy); text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-logo { 
    height: 40px; 
    width: auto; /* Fixes the horizontal stretching */
    margin-bottom: 2rem; 
    opacity: 1; 
}
.footer-credits { color: var(--brand-lilac); font-size: 0.95rem; line-height: 1.8; font-weight: 300; }
.footer-credits strong { color: var(--brand-white); font-weight: 700; font-size: 1.1rem; display: inline-block; margin-bottom: 0.5rem; }

/* --- STICKY FLOATING WIDGETS --- */
.fixed-menu-pill {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(50px);
    opacity: 0; pointer-events: none; z-index: 998; background: var(--brand-navy); color: var(--brand-white);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 40px; padding: 0.8rem 1.5rem;
    display: flex; align-items: center; gap: 12px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
}
.fixed-menu-pill.visible { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.fixed-menu-pill:hover { background: var(--brand-volt); color: var(--brand-navy); border-color: var(--brand-volt);}
.fixed-menu-pill .hamburger-lines span { background-color: var(--brand-white); transition: background-color 0.3s ease; }
.fixed-menu-pill:hover .hamburger-lines span { background-color: var(--brand-navy); }

.fixed-back-to-top {
    position: fixed; bottom: 2rem; right: 2rem; transform: translateY(50px);
    opacity: 0; pointer-events: none; z-index: 998; background: var(--brand-navy);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center; color: var(--brand-white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
}
.fixed-back-to-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.fixed-back-to-top:hover { background: var(--brand-volt); color: var(--brand-navy); border-color: var(--brand-volt); }

@media (max-width: 768px) {
    .fixed-menu-pill { 
        left: auto; right: 1.5rem; bottom: 5.5rem; 
        transform: translateY(50px); width: 50px; height: 50px; padding: 0; border-radius: 50%; justify-content: center;
    }
    .fixed-menu-pill.visible { transform: translateY(0); }
    .fixed-menu-pill span.text-label { display: none; }
    .fixed-menu-pill .hamburger-lines { align-items: center; }
    
    .fixed-back-to-top { bottom: 1.5rem; right: 1.5rem; width: 50px; height: 50px; }
}

/* Animation Utility */
.scroll-fade { opacity: 0; transform: translateY(40px); }

/* footer link */
.footer-link {
    color: var(--brand-white);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--brand-volt);
}