/* =====================================================
   LOGUHE AGRO & AGRI LTD
   V5 — PREMIUM INTERNATIONAL EXPORT REDESIGN
   Mobile-first. Green & Gold. Glassmorphism.
===================================================== */

:root{

    --green:#0A6B3B;
    --green-dark:#063d22;
    --green-deep:#042818;
    --green-light:#12864a;
    --gold:#D4A017;
    --gold-light:#EFC55C;
    --gold-soft:#F7DFA0;

    --cream:#FAF7EF;
    --paper:#FFFDF8;
    --ink:#15201A;
    --gray:#5B6760;

    --shadow-sm:0 8px 24px rgba(6,32,20,.08);
    --shadow:0 20px 50px rgba(6,32,20,.14);
    --shadow-lg:0 30px 80px rgba(6,32,20,.22);

    --radius-sm:14px;
    --radius:22px;
    --radius-lg:32px;

    --ease:cubic-bezier(.22,1,.36,1);

    --glass-bg:rgba(255,255,255,.14);
    --glass-border:rgba(255,255,255,.28);
    --glass-bg-light:rgba(255,255,255,.6);
    --glass-border-light:rgba(255,255,255,.8);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Manrope',sans-serif;

    color:var(--ink);

    overflow-x:hidden;

    background:var(--cream);

    line-height:1.7;

    font-size:15px;

}

h1,h2,h3,h4,.font-display{

    font-family:'Fraunces',serif;

    font-weight:600;

    letter-spacing:-.01em;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    font-family:inherit;

}

.container{

    width:92%;

    max-width:1360px;

    margin:auto;

}

::selection{

    background:var(--gold);

    color:var(--green-deep);

}

/* ==========================
GRAIN OVERLAY
========================== */

.grain-overlay{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:9998;

    opacity:.035;

    mix-blend-mode:overlay;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}

/* ==========================
LOADER
========================== */

#loader{

    position:fixed;

    inset:0;

    background:var(--green-deep);

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:opacity .6s var(--ease), visibility .6s var(--ease);

}

.loader-inner{

    text-align:center;

}

.loader-inner img{

    width:100px;

    margin:0 auto 22px;

    animation:pulse 1.8s infinite;

}

.loader-bar{

    width:180px;

    height:3px;

    background:rgba(255,255,255,.15);

    border-radius:10px;

    overflow:hidden;

}

.loader-bar span{

    display:block;

    width:40%;

    height:100%;

    background:var(--gold);

    border-radius:10px;

    animation:loaderMove 1.2s infinite ease-in-out;

}

@keyframes loaderMove{

    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(350%); }

}

@keyframes pulse{

    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.06); }

}

/* ==========================
HEADER
========================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(250,247,239,.85);

    backdrop-filter:blur(16px) saturate(140%);

    -webkit-backdrop-filter:blur(16px) saturate(140%);

    box-shadow:0 1px 0 rgba(10,107,59,.08);

    transition:background .4s var(--ease), box-shadow .4s var(--ease);

}

.nav-container{

    min-height:78px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

}

.logo-box{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo{

    width:48px;

}

.logo-text h2{

    color:var(--green);

    font-size:1.05rem;

    line-height:1.1;

}

.logo-text span{

    color:var(--gold);

    font-weight:700;

    font-size:.62rem;

    letter-spacing:.14em;

}

nav ul{

    display:flex;

    gap:28px;

}

nav a{

    color:var(--ink);

    font-weight:600;

    font-size:.85rem;

    position:relative;

    transition:color .3s;

    padding-bottom:4px;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--gold);

    transition:width .35s var(--ease);

}

nav a:hover,
nav a.active-link{

    color:var(--green);

}

nav a:hover::after,
nav a.active-link::after{

    width:100%;

}

.nav-buttons{

    display:flex;

    align-items:center;

    gap:12px;

}

.lang-switch{

    display:flex;

    border:1px solid rgba(10,107,59,.25);

    border-radius:50px;

    padding:3px;

    gap:2px;

}

.lang-btn{

    border:none;

    background:none;

    padding:6px 12px;

    border-radius:50px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.05em;

    color:var(--gray);

    cursor:pointer;

    transition:.3s;

}

.lang-btn.is-active{

    background:var(--green);

    color:var(--paper);

}

.quote-btn{

    background:linear-gradient(135deg,var(--gold),#c08a12);

    color:var(--green-deep);

    padding:12px 22px;

    border-radius:50px;

    font-weight:700;

    font-size:.82rem;

    box-shadow:0 8px 20px rgba(212,160,23,.35);

    transition:transform .35s var(--ease), box-shadow .35s var(--ease);

    white-space:nowrap;

}

.quote-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 26px rgba(212,160,23,.45);

}

#menu-toggle{

    display:flex;

    border:none;

    background:none;

    font-size:1.3rem;

    cursor:pointer;

    color:var(--green);

}

/* ==========================
HERO
========================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    text-align:left;

    color:var(--paper);

    overflow:hidden;

    padding-top:78px;

}

.hero-media{

    position:absolute;

    inset:0;

    z-index:0;

}

.hero-img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.04);

    animation:heroZoom 18s var(--ease) infinite alternate;

}

@keyframes heroZoom{

    0%{ transform:scale(1.04); }
    100%{ transform:scale(1.14); }

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(120deg, rgba(4,40,24,.92) 0%, rgba(4,40,24,.75) 38%, rgba(10,107,59,.45) 68%, rgba(212,160,23,.28) 100%);

}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

    background-size:48px 48px;

    opacity:.4;

}

.hero-content{

    position:relative;

    z-index:1;

    max-width:760px;

    padding:60px 0 90px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:9px 18px;

    border-radius:50px;

    background:var(--glass-bg);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    margin-bottom:22px;

    font-size:.72rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-weight:600;

}

.badge-dot{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--gold);

    box-shadow:0 0 0 0 rgba(212,160,23,.7);

    animation:dotPing 2s infinite;

}

@keyframes dotPing{

    0%{ box-shadow:0 0 0 0 rgba(212,160,23,.6); }
    70%{ box-shadow:0 0 0 8px rgba(212,160,23,0); }
    100%{ box-shadow:0 0 0 0 rgba(212,160,23,0); }

}

.hero h1{

    font-size:clamp(2.4rem,7vw,4.4rem);

    line-height:1.08;

    margin-bottom:24px;

    font-weight:600;

}

.hero h1 em{

    font-style:italic;

    color:var(--gold-light);

    font-weight:500;

}

.hero p{

    font-size:1.08rem;

    max-width:560px;

    margin-bottom:38px;

    color:rgba(250,247,239,.86);

}

.hero-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:44px;

}

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 28px;

    border-radius:50px;

    font-weight:700;

    font-size:.88rem;

    transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease);

    cursor:pointer;

    border:none;

}

.btn-primary{

    background:linear-gradient(135deg,var(--gold-light),var(--gold));

    color:var(--green-deep);

    box-shadow:0 14px 30px rgba(212,160,23,.35);

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-60%;

    width:40%;

    height:100%;

    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);

    transform:skewX(-20deg);

    transition:left .7s var(--ease);

}

.btn-primary:hover::before{

    left:130%;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 36px rgba(212,160,23,.45);

}

.btn-secondary{

    background:var(--glass-bg);

    border:1px solid var(--glass-border);

    color:var(--paper);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.24);

    transform:translateY(-3px);

}

.btn-secondary i{

    color:#25D366;

    font-size:1.1rem;

}

.btn-outline{

    border:1.5px solid var(--green);

    color:var(--green);

    background:transparent;

}

.btn-outline:hover{

    background:var(--green);

    color:var(--paper);

    transform:translateY(-3px);

}

.btn-ghost{

    border:1.5px solid rgba(255,255,255,.5);

    color:var(--paper);

    background:transparent;

}

.btn-ghost:hover{

    background:rgba(255,255,255,.14);

    transform:translateY(-3px);

}

.hero-chips{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.hero-chip{

    display:flex;

    flex-direction:column;

    padding:14px 20px;

    border-radius:16px;

    background:var(--glass-bg);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    min-width:130px;

}

.hero-chip strong{

    font-family:'Fraunces',serif;

    font-size:1.5rem;

    color:var(--gold-light);

}

.hero-chip span{

    font-size:.68rem;

    letter-spacing:.03em;

    color:rgba(250,247,239,.78);

}

.hero-scroll{

    position:absolute;

    bottom:28px;

    left:50%;

    transform:translateX(-50%);

    z-index:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:rgba(250,247,239,.7);

    font-size:.65rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.scroll-line{

    width:1px;

    height:36px;

    background:linear-gradient(to bottom, var(--gold-light), transparent);

    position:relative;

    overflow:hidden;

}

.scroll-line::after{

    content:"";

    position:absolute;

    top:-100%;

    left:0;

    width:100%;

    height:100%;

    background:var(--gold-light);

    animation:scrollLine 2.2s infinite;

}

@keyframes scrollLine{

    0%{ top:-100%; }
    100%{ top:100%; }

}

/* ==========================
MARQUEE
========================== */

.marquee-strip{

    background:var(--green-deep);

    overflow:hidden;

    padding:16px 0;

    border-bottom:1px solid rgba(212,160,23,.25);

}

.marquee-track{

    display:flex;

    gap:56px;

    white-space:nowrap;

    animation:marquee 24s linear infinite;

    width:max-content;

}

.marquee-track span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--gold-soft);

    font-weight:700;

    font-size:.85rem;

    letter-spacing:.06em;

    text-transform:uppercase;

}

.marquee-track i{

    color:var(--gold);

}

@keyframes marquee{

    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }

}

/* ==========================
SECTION TITLE
========================== */

.section-title{

    text-align:center;

    margin-bottom:56px;

}

.section-title h5{

    color:var(--gold);

    margin-bottom:12px;

    letter-spacing:.18em;

    font-weight:800;

    font-size:.75rem;

    text-transform:uppercase;

}

.section-title h2{

    font-size:clamp(1.9rem,4vw,2.8rem);

    color:var(--green);

}

.section-sub{

    max-width:600px;

    margin:16px auto 0;

    color:var(--gray);

    font-family:'Manrope',sans-serif;

}

.export .section-title h2,
.contact .section-title h2{

    color:var(--paper);

}

/* ==========================
GLASSMORPHISM UTILITIES
========================== */

.glass-card{

    background:var(--glass-bg-light);

    border:1px solid var(--glass-border-light);

    backdrop-filter:blur(18px) saturate(160%);

    -webkit-backdrop-filter:blur(18px) saturate(160%);

    box-shadow:var(--shadow-sm);

}

.glass-card-dark{

    background:rgba(255,255,255,.07);

    border:1px solid rgba(255,255,255,.16);

    backdrop-filter:blur(16px) saturate(160%);

    -webkit-backdrop-filter:blur(16px) saturate(160%);

}

.glass-chip{

    background:var(--glass-bg-light);

    border:1px solid var(--glass-border-light);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}

/* ==========================
STATS
========================== */

.stats{

    padding:70px 0;

    background:var(--cream);

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.stat-card{

    padding:28px 18px;

    border-radius:var(--radius);

    text-align:center;

    transition:transform .5s var(--ease);

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card h2{

    color:var(--green);

    font-size:2.2rem;

}

.stat-card p{

    color:var(--gray);

    font-size:.78rem;

    letter-spacing:.03em;

    margin-top:6px;

}

/* ==========================
ABOUT
========================== */

.about{

    padding:80px 0;

    background:var(--paper);

}

.about-grid{

    display:grid;

    gap:40px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    height:320px;

    object-fit:cover;

}

.about-image-tag{

    position:absolute;

    bottom:-18px;

    right:18px;

    background:var(--green);

    color:var(--paper);

    padding:16px 22px;

    border-radius:var(--radius-sm);

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

    line-height:1.2;

    border:1px solid rgba(212,160,23,.4);

}

.about-image-tag strong{

    font-family:'Fraunces',serif;

    color:var(--gold-light);

    font-size:1.1rem;

}

.about-image-tag span{

    font-size:.68rem;

    letter-spacing:.05em;

    color:rgba(250,247,239,.8);

}

.about-content h5{

    color:var(--gold);

    margin-bottom:14px;

    letter-spacing:.18em;

    font-weight:800;

    font-size:.75rem;

}

.about-content h2{

    color:var(--green);

    font-size:clamp(1.7rem,4vw,2.6rem);

    margin-bottom:22px;

    line-height:1.22;

}

.about-content p{

    margin-bottom:18px;

    color:var(--gray);

}

.about-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

    margin-top:26px;

}

.feature{

    padding:16px;

    border-radius:var(--radius-sm);

    font-weight:700;

    font-size:.82rem;

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--ink);

    transition:transform .4s var(--ease);

}

.feature:hover{

    transform:translateY(-4px);

}

.feature i{

    color:var(--gold);

    font-size:1rem;

}

/* ==========================
WHY US
========================== */

.why-us{

    padding:80px 0;

    background:var(--cream);

}

.why-grid{

    display:grid;

    gap:20px;

}

.why-card{

    padding:34px 26px;

    border-radius:var(--radius);

    text-align:center;

    transition:transform .5s var(--ease), box-shadow .5s var(--ease);

}

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.why-icon{

    width:64px;

    height:64px;

    margin:0 auto 20px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--green),var(--green-dark));

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    color:var(--gold-light);

    box-shadow:0 10px 22px rgba(10,107,59,.28);

}

.why-card h3{

    color:var(--green);

    margin-bottom:12px;

    font-size:1.1rem;

}

.why-card p{

    color:var(--gray);

    font-size:.88rem;

}

/* ==========================
PRODUCTS
========================== */

.products{

    padding:80px 0;

    background:var(--paper);

}

.products-grid{

    display:grid;

    gap:22px;

}

.product-card{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius);

    height:300px;

    cursor:pointer;

    box-shadow:var(--shadow-sm);

}

.product-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform 1s var(--ease), filter .6s;

    filter:saturate(1.02);

}

.product-card:hover img{

    transform:scale(1.1);

}

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top, rgba(4,40,24,.92) 0%, rgba(4,40,24,.15) 55%, transparent 80%);

    z-index:1;

}

.product-overlay{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    padding:26px;

    color:var(--paper);

    z-index:2;

}

.product-num{

    display:inline-block;

    font-family:'Fraunces',serif;

    color:var(--gold-light);

    font-size:.85rem;

    margin-bottom:8px;

    letter-spacing:.1em;

}

.product-overlay h3{

    font-size:1.3rem;

    margin-bottom:4px;

}

.product-overlay p{

    font-size:.74rem;

    color:var(--gold-soft);

    letter-spacing:.03em;

    opacity:0;

    max-height:0;

    transition:opacity .4s, max-height .4s;

}

.product-card:hover .product-overlay p{

    opacity:1;

    max-height:20px;

}

.products-cta{

    margin-top:50px;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

.products-cta p{

    color:var(--gray);

    font-weight:600;

}

/* ==========================
PROCESSUS
========================== */

.process{

    padding:80px 0;

    background:var(--cream);

}

.timeline{

    display:grid;

    gap:20px;

}

.timeline-item{

    position:relative;

    text-align:center;

    padding:36px 24px;

    border-radius:var(--radius);

    transition:transform .5s var(--ease), box-shadow .5s var(--ease);

}

.timeline-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.timeline-step{

    position:absolute;

    top:16px;

    right:20px;

    font-family:'Fraunces',serif;

    font-size:.75rem;

    color:var(--gold);

    font-weight:700;

    letter-spacing:.05em;

}

.timeline-icon{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--gold-light),var(--gold));

    color:var(--green-deep);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.7rem;

    box-shadow:0 10px 22px rgba(212,160,23,.32);

}

.timeline-item h3{

    color:var(--green);

    margin-bottom:10px;

    font-size:1.05rem;

}

.timeline-item p{

    color:var(--gray);

    font-size:.86rem;

}

/* ==========================
EXPORT
========================== */

.export{

    position:relative;

    padding:80px 0;

    color:var(--paper);

    overflow:hidden;

}

.export-bg{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 15% 20%, rgba(212,160,23,.28), transparent 45%),
    linear-gradient(150deg, var(--green-deep), var(--green-dark) 55%, var(--green));

    z-index:0;

}

.export .container{

    position:relative;

    z-index:1;

}

.export-grid{

    display:grid;

    gap:22px;

}

.export-card{

    padding:38px 30px;

    border-radius:var(--radius);

    text-align:center;

    transition:transform .5s var(--ease);

}

.export-card:hover{

    transform:translateY(-8px);

}

.export-card i{

    font-size:2.4rem;

    margin-bottom:18px;

    color:var(--gold-light);

}

.export-card h3{

    margin-bottom:12px;

    font-size:1.2rem;

}

.export-card p{

    font-size:.88rem;

    color:rgba(250,247,239,.8);

}

/* ==========================
VALEURS
========================== */

.values{

    padding:80px 0;

    background:var(--paper);

}

.values-grid{

    display:grid;

    gap:20px;

}

.value-card{

    text-align:center;

    padding:34px 24px;

    border-radius:var(--radius);

    transition:transform .5s var(--ease);

}

.value-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.value-card i{

    font-size:2.2rem;

    color:var(--gold);

    margin-bottom:18px;

}

.value-card h3{

    color:var(--green);

    margin-bottom:10px;

    font-size:1.05rem;

}

.value-card p{

    color:var(--gray);

    font-size:.86rem;

}

/* ==========================
CAPACITÉ
========================== */

.capacity{

    padding:80px 0;

    background:var(--cream);

}

.capacity-box{

    background:linear-gradient(135deg,var(--paper),#fff);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    padding:44px 30px;

    display:grid;

    gap:36px;

    align-items:center;

    border:1px solid rgba(212,160,23,.2);

}

.capacity-left h5{

    color:var(--gold);

    margin-bottom:12px;

    letter-spacing:.18em;

    font-weight:800;

    font-size:.75rem;

}

.capacity-left h2{

    color:var(--green);

    font-size:clamp(1.7rem,4vw,2.5rem);

    margin-bottom:18px;

}

.capacity-left p{

    color:var(--gray);

    margin-bottom:26px;

}

.capacity-right{

    text-align:center;

}

.capacity-ring{

    width:200px;

    height:200px;

    margin:auto;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:conic-gradient(from -90deg, var(--gold) 0deg 288deg, rgba(212,160,23,.15) 288deg 360deg);

    position:relative;

}

.capacity-ring::before{

    content:"";

    position:absolute;

    inset:10px;

    border-radius:50%;

    background:var(--paper);

}

.capacity-number{

    position:relative;

    z-index:1;

    font-size:2.8rem;

    font-weight:700;

    color:var(--green);

    font-family:'Fraunces',serif;

}

.capacity-number span{

    color:var(--gold);

}

.capacity-text{

    position:relative;

    z-index:1;

    color:var(--gray);

    font-weight:700;

    font-size:.72rem;

    letter-spacing:.05em;

    text-transform:uppercase;

}

/* ==========================
CTA BANNER
========================== */

.cta-banner{

    padding:80px 0;

    background:linear-gradient(135deg,var(--green),var(--green-dark));

    position:relative;

    overflow:hidden;

}

.cta-banner::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:radial-gradient(circle, rgba(212,160,23,.22), transparent 70%);

    top:-300px;

    right:-200px;

}

.cta-banner-inner{

    position:relative;

    z-index:1;

    text-align:center;

    color:var(--paper);

}

.cta-banner h2{

    font-size:clamp(1.8rem,4.5vw,2.7rem);

    margin-bottom:16px;

}

.cta-banner p{

    max-width:560px;

    margin:0 auto 34px;

    color:rgba(250,247,239,.82);

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

}

.cta-buttons .btn-primary i{

    color:#0a6b3b;

}

/* ==========================
GALERIE
========================== */

.gallery{

    padding:80px 0;

    background:var(--cream);

}

.gallery-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:16px;

}

.gallery-grid img{

    width:100%;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    transition:transform .5s var(--ease), box-shadow .5s var(--ease);

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.02);

    box-shadow:var(--shadow);

}

/* ==========================
STANDARDS
========================== */

.partners{

    padding:80px 0;

    background:var(--paper);

}

.partners-grid{

    display:grid;

    gap:18px;

}

.partner-card{

    padding:30px 20px;

    border-radius:var(--radius);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    text-align:center;

    font-weight:700;

    color:var(--green);

    font-size:.85rem;

    transition:transform .4s var(--ease);

}

.partner-card:hover{

    transform:translateY(-6px);

}

.partner-card i{

    font-size:1.8rem;

    color:var(--gold);

}

/* ==========================
TEMOIGNAGES
========================== */

.testimonials{

    padding:80px 0;

    background:var(--cream);

}

.testimonial-slider{

    display:grid;

    gap:20px;

}

.testimonial-card{

    padding:34px 28px;

    border-radius:var(--radius);

    position:relative;

}

.stars{

    color:var(--gold);

    font-size:1.15rem;

    margin-bottom:18px;

    letter-spacing:2px;

}

.testimonial-card p{

    color:var(--ink);

    margin-bottom:20px;

    font-style:italic;

    font-size:.92rem;

}

.testimonial-card h4{

    color:var(--green);

    font-size:1rem;

    margin-bottom:2px;

}

.testi-role{

    color:var(--gray);

    font-size:.76rem;

    letter-spacing:.03em;

}

/* ==========================
CONTACT
========================== */

.contact{

    padding:80px 0;

    background:linear-gradient(160deg,var(--green-deep),var(--green-dark) 60%,var(--green));

    position:relative;

}

.contact-wrapper{

    display:grid;

    gap:26px;

}

.contact-info{

    display:grid;

    gap:16px;

}

.info-card{

    padding:26px;

    border-radius:var(--radius);

    color:var(--paper);

}

.info-card i{

    font-size:1.6rem;

    color:var(--gold-light);

    margin-bottom:12px;

}

.info-card h3{

    margin-bottom:6px;

    font-size:1rem;

}

.info-card p{

    color:rgba(250,247,239,.82);

    font-size:.88rem;

}

.info-card p + p{

    margin-top:4px;

}

.whatsapp-inline{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:#25D366;

    color:#fff;

    padding:16px;

    border-radius:var(--radius-sm);

    font-weight:700;

    font-size:.86rem;

    transition:transform .4s var(--ease);

}

.whatsapp-inline:hover{

    transform:translateY(-4px);

}

.whatsapp-inline i{

    font-size:1.3rem;

}

.contact-form-box{

    padding:30px;

    border-radius:var(--radius-lg);

}

.contact-form-box form{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.form-row{

    display:grid;

    gap:14px;

}

.contact-form-box input,
.contact-form-box textarea,
.contact-form-box select{

    padding:15px 16px;

    border:1px solid rgba(255,255,255,.35);

    border-radius:12px;

    font-family:inherit;

    font-size:.9rem;

    background:rgba(255,255,255,.9);

    color:var(--ink);

    transition:border-color .3s, box-shadow .3s;

}

.contact-form-box select{

    color:var(--gray);

}

.contact-form-box input:focus,
.contact-form-box textarea:focus,
.contact-form-box select:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(212,160,23,.18);

}

.contact-form-box button{

    background:linear-gradient(135deg,var(--gold-light),var(--gold));

    color:var(--green-deep);

    border:none;

    padding:17px;

    border-radius:12px;

    font-weight:800;

    font-size:.9rem;

    cursor:pointer;

    transition:transform .35s var(--ease), box-shadow .35s var(--ease);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.contact-form-box button:hover{

    transform:translateY(-2px);

    box-shadow:0 14px 28px rgba(212,160,23,.35);

}

/* ==========================
GOOGLE MAPS
========================== */

.map-section{

    height:360px;

    filter:saturate(.9);

}

.map-section iframe{

    width:100%;

    height:100%;

    border:none;

    display:block;

}

/* ==========================
WHATSAPP FLOAT
========================== */

.whatsapp-btn{

    position:fixed;

    right:20px;

    bottom:20px;

    width:60px;

    height:60px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:1.7rem;

    z-index:9997;

    box-shadow:0 12px 28px rgba(0,0,0,.25);

    transition:transform .35s var(--ease);

}

.whatsapp-btn:hover{

    transform:scale(1.1);

}

.whatsapp-ping{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid #25D366;

    animation:ping 2s infinite;

}

@keyframes ping{

    0%{ transform:scale(1); opacity:.7; }
    100%{ transform:scale(1.7); opacity:0; }

}

/* ==========================
BACK TO TOP
========================== */

.back-to-top{

    position:fixed;

    right:20px;

    bottom:90px;

    width:44px;

    height:44px;

    border-radius:50%;

    background:var(--green);

    color:var(--gold-light);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:9997;

    opacity:0;

    transform:translateY(15px);

    transition:opacity .4s, transform .4s;

    box-shadow:var(--shadow-sm);

}

.back-to-top.show-top{

    opacity:1;

    transform:translateY(0);

}

/* ==========================
LIGHTBOX
========================== */

#lightbox{

    position:fixed;

    inset:0;

    background:rgba(4,40,24,.92);

    z-index:99998;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:opacity .4s, visibility .4s;

    padding:24px;

}

#lightbox.active{

    opacity:1;

    visibility:visible;

}

#lightbox img{

    max-width:90vw;

    max-height:85vh;

    width:auto;

    border-radius:var(--radius-sm);

    box-shadow:var(--shadow-lg);

}

/* ==========================
FOOTER
========================== */

.footer{

    background:var(--green-deep);

    color:var(--paper);

    padding-top:60px;

}

.footer-grid{

    display:grid;

    gap:40px;

    padding-bottom:40px;

}

.footer-logo{

    width:64px;

    margin-bottom:18px;

}

.footer-col h3{

    color:var(--paper);

    margin-bottom:16px;

    font-size:1.1rem;

}

.footer-col h4{

    margin-bottom:18px;

    color:var(--gold-light);

    font-size:.78rem;

    letter-spacing:.1em;

    text-transform:uppercase;

}

.footer-col p{

    color:rgba(250,247,239,.72);

    margin-bottom:12px;

    font-size:.88rem;

    display:flex;

    align-items:center;

    gap:8px;

}

.footer-col ul li{

    margin-bottom:12px;

    color:rgba(250,247,239,.72);

    font-size:.88rem;

}

.footer-col ul li a{

    color:rgba(250,247,239,.72);

    transition:.3s;

}

.footer-col ul li a:hover{

    color:var(--gold-light);

}

.footer hr{

    border:none;

    height:1px;

    background:rgba(255,255,255,.1);

}

.footer-bottom{

    text-align:center;

    padding:22px 0;

}

.footer-copy{

    color:rgba(250,247,239,.6);

    font-size:.8rem;

}

/* ==========================
SCROLL ANIMATIONS
========================== */

.fade-up{

    opacity:0;

    transform:translateY(36px);

    transition:opacity .8s var(--ease), transform .8s var(--ease);

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.hero .fade-up:nth-child(1){ transition-delay:.1s; }
.hero .fade-up:nth-child(2){ transition-delay:.22s; }
.hero .fade-up:nth-child(3){ transition-delay:.34s; }
.hero .fade-up:nth-child(4){ transition-delay:.46s; }
.hero .fade-up:nth-child(5){ transition-delay:.58s; }

/* ==========================
RESPONSIVE — MOBILE FIRST
   base styles above = mobile.
   progressively enhanced below.
========================== */

@media(min-width:640px){

    .stats-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .about-features,
    .form-row{

        grid-template-columns:repeat(2,1fr);

    }

    .why-grid,
    .values-grid,
    .partners-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-grid img:nth-child(1),
    .gallery-grid img:nth-child(4){

        grid-row:span 2;

        height:100%;

        object-fit:cover;

    }

}

@media(min-width:860px){

    nav{

        display:block;

    }

    #menu-toggle{

        display:none;

    }

    .nav-container{

        min-height:92px;

    }

    .logo{

        width:60px;

    }

    .logo-text h2{

        font-size:1.3rem;

    }

    .about-grid{

        grid-template-columns:1.05fr 1fr;

    }

    .about-image img{

        height:520px;

    }

    .capacity-box{

        grid-template-columns:1.6fr 1fr;

        padding:60px;

    }

    .contact-wrapper{

        grid-template-columns:1fr 1.1fr;

    }

    .why-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .values-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .export-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .timeline{

        grid-template-columns:repeat(3,1fr);

    }

    .products-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .testimonial-slider{

        grid-template-columns:repeat(3,1fr);

    }

    .products-cta{

        flex-direction:row;

        justify-content:space-between;

        text-align:left;

    }

}

@media(min-width:900px){

    nav{ display:block; }

}

/* base: hide desktop nav on small screens, show toggle */

@media(max-width:859px){

    nav{

        position:fixed;

        top:78px;

        left:0;

        width:100%;

        background:var(--paper);

        box-shadow:var(--shadow);

        max-height:0;

        overflow:hidden;

        transition:max-height .4s var(--ease);

    }

    nav ul{

        flex-direction:column;

        gap:0;

        padding:10px 0;

    }

    nav ul li{

        border-bottom:1px solid rgba(10,107,59,.08);

    }

    nav ul li a{

        display:block;

        padding:16px 24px;

    }

    nav.mobile-open{

        max-height:400px;

    }

    .quote-btn{

        display:none;

    }

}

@media(min-width:1100px){

    .products-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .stat-card h2{

        font-size:2.6rem;

    }

}

@media(max-width:480px){

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        justify-content:center;

    }

    .hero-chips{

        gap:10px;

    }

    .hero-chip{

        flex:1;

        min-width:0;

        padding:12px 10px;

        text-align:center;

        align-items:center;

    }

    .capacity-ring{

        width:170px;

        height:170px;

    }

}

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}