/*
Theme Name: EcoPortal Premium
Author: Marcin
Version: 1.0
*/

:root{
 --green:#4ea63b;
 --light:#f5f7f2;
 --dark:#163d1f;
 --text:#1f1f1f;
}

*{box-sizing:border-box;}

body{
 margin:0;
 background:var(--light);
 color:var(--text);
 font-family:Arial,sans-serif;
}

header{
 position:sticky;
 top:0;
 z-index:99;
 background:rgba(255,255,255,0.94);
 backdrop-filter:blur(12px);
 border-bottom:1px solid #ececec;
}

.nav{
 max-width:1300px;
 margin:auto;
 padding:20px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.logo{
 font-size:36px;
 font-weight:700;
 color:var(--green);
}

.menu{
 display:flex;
 gap:26px;
}

.menu a{
 text-decoration:none;
 color:#333;
 font-weight:600;
}

.hero{
 max-width:1300px;
 margin:auto;
 padding:90px 24px;
 display:grid;
 grid-template-columns:1.1fr 1fr;
 gap:60px;
 align-items:center;
}

.hero h1{
 font-size:78px;
 line-height:1.04;
 margin-bottom:24px;
}

.green{color:var(--green);}

.hero p{
 font-size:22px;
 color:#666;
}

.buttons{
 display:flex;
 gap:18px;
 margin-top:32px;
}

.btn{
 padding:16px 28px;
 border-radius:18px;
 text-decoration:none;
 font-weight:bold;
}

.primary{
 background:var(--green);
 color:white;
}

.secondary{
 background:white;
 border:1px solid #ddd;
 color:#222;
}

.hero-image img{
 width:100%;
 border-radius:36px;
 box-shadow:0 20px 60px rgba(0,0,0,.15);
}

.section{
 max-width:1300px;
 margin:auto;
 padding:20px 24px 80px;
}

.section h2{
 font-size:44px;
 margin-bottom:40px;
}

.grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:28px;
}

.card{
 background:white;
 border-radius:30px;
 overflow:hidden;
 box-shadow:0 8px 30px rgba(0,0,0,.06);
}

.card img{
 width:100%;
 height:240px;
 object-fit:cover;
}

.card-content{
 padding:26px;
}

.card h3{
 margin-top:0;
 font-size:28px;
}

.stats{
 margin-top:60px;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:24px;
}

.stat{
 background:var(--dark);
 color:white;
 padding:36px;
 border-radius:28px;
 text-align:center;
}

.stat strong{
 display:block;
 font-size:54px;
 margin-bottom:12px;
}

footer{
 background:#102914;
 color:white;
 margin-top:80px;
}

.footer-inner{
 max-width:1300px;
 margin:auto;
 padding:60px 24px;
 display:flex;
 justify-content:space-between;
}

@media(max-width:900px){

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

.hero h1{
 font-size:52px;
}

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

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

.menu{
 display:none;
}

}