:root{
	--bg:#f7fbfb;
	--card:#ffffff;
	--text:#0f1720;
	--muted:#6b7280;
	--primary:#2aa198;
	--accent:#ff6b6b;
	--radius:10px;
	--max-width:1200px;
	--shadow: 0 6px 18px rgba(20,20,20,0.08);
}
*{box-sizing:border-box}
html{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background:var(--bg); color:var(--text); scroll-behavior:smooth;}
body{margin:0; line-height:1.5; font-size:16px;}
.container{max-width:var(--max-width); margin:0 auto; padding:1.25rem;}
.site-header{background:linear-gradient(90deg,var(--primary), #3ec6b7); color:white; position:sticky; top:0; z-index:40; box-shadow:var(--shadow);}
.header-inner{display:flex; align-items:center; gap:1rem; justify-content:space-between;}
.brand{font-weight:700; font-size:1.25rem; color:white; text-decoration:none; padding:.75rem 0;}
.main-nav a{color:rgba(255,255,255,0.95); margin:0 .5rem; text-decoration:none;}
.cta{background:rgba(255,255,255,0.12); padding:.5rem .75rem; border-radius:8px; color:white; text-decoration:none;}
.hero{padding:3rem 0; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);}
.hero-inner{display:flex; gap:2rem; align-items:center;}
.hero-text{flex:1}
.hero-text h1{font-size:2rem; margin:0 0 .5rem; color:var(--text);}
.hero-text p{color:var(--muted); margin:0 0 1rem;}
.hero-ctas .btn{margin-right:.5rem;}
.hero-image img{width:320px; max-width:40vw; border-radius:12px; box-shadow:var(--shadow);}
.intro, .news, .products-highlight, .team, .timeline, .mission{margin:2rem 0; background:transparent}
.grid{display:grid; gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transform:translateY(10px); opacity:0; transition:all .6s ease;}
.card.visible{transform:none; opacity:1;}
.card img{width:100%; height:160px; object-fit:cover; border-radius:8px; display:block; margin-bottom:.75rem;}
.card h3{margin:.25rem 0;}
.product .price{display:block; margin-top:1rem; font-weight:700; color:var(--accent)}
.btn{display:inline-block; padding:.5rem .75rem; border-radius:8px; text-decoration:none; color:var(--text); border:1px solid rgba(0,0,0,0.06); background:transparent}
.btn.primary{background:var(--primary); color:white; border:none}
.btn.ghost{background:transparent; border:1px solid rgba(0,0,0,0.06)}
.btn.small{padding:.35rem .5rem; font-size:.9rem}
.site-footer{padding:1.5rem 0; background:transparent; color:var(--muted)}
.header-inner .main-nav{display:flex; align-items:center}
.filters{display:flex; gap:.5rem; margin-top:1rem; align-items:center}
.filters select, .filters input{padding:.5rem .6rem; border-radius:8px; border:1px solid #e6eef0;}
.contact-grid{align-items:start}
.contact-form input, .contact-form textarea{width:100%; padding:.6rem; margin-top:.25rem; border-radius:8px; border:1px solid #e6eef0}
.contact-info a{color:var(--primary); text-decoration:none}
.footer-inner{display:flex; justify-content:space-between; align-items:center}
.tags{font-size:.85rem; color:var(--muted); margin-top:.5rem;}
.news-item{padding:.75rem 0; border-bottom:1px dashed #ecf6f5}
.hero-text .btn{border-radius:12px}
.team-member img{height:160px}
.timeline-item{margin:1rem 0; padding:.75rem; background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent); border-radius:8px}
.form-status{margin-top:.75rem; color:var(--primary)}

/* responsive */
@media (max-width:900px){
	.grid-3{grid-template-columns:repeat(2,1fr)}
	.hero-inner{flex-direction:column-reverse}
	.hero-image img{max-width:90%}
}
@media (max-width:600px){
	.grid-3, .grid-2{grid-template-columns:1fr}
	.header-inner{flex-direction:column; align-items:flex-start; gap:.5rem}
	.main-nav a{display:inline-block; margin:.25rem 0}
}

/* accessibility focus */
.btn:focus, .main-nav a:focus, input:focus, select:focus, textarea:focus{outline:3px solid rgba(42,161,152,0.15); outline-offset:2px}

/* small helpers */
.muted{color:var(--muted)}