/* Global resets and variables */
:root{
	--accent:#0a7fb3;
	--muted:#667085;
	--bg:#fcfcfd;
	--card:#ffffff;
	--radius:12px;
	--container-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	margin:0;
	background:linear-gradient(180deg,#fbfdff 0%, #f6f9fb 100%);
	color:#0f1724;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-behavior:smooth;
}
.container{max-width:var(--container-width);margin:0 auto;padding:1rem}
.site-header{background:transparent;position:sticky;top:0;z-index:40;padding:0.5rem 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem}
.nav-links{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav-links a{color:inherit;text-decoration:none;padding:0.35rem 0.6rem;border-radius:8px}
.nav-links a:hover{background:rgba(10,127,179,0.08)}
.nav-toggle{display:none;border:0;background:transparent;font-size:1.2rem}

.hero{padding:3rem 0;background:linear-gradient(90deg,rgba(10,127,179,0.06),transparent)}
.hero-inner{display:grid;grid-template-columns:1fr 380px;gap:1.5rem;align-items:center}
.hero h1{margin:0;font-size:2.2rem;letter-spacing:-0.02em}
.lead{color:var(--muted);margin-top:0.5rem}
.seo-tie{font-size:0.85rem;color:#8a94a6;margin-top:0.6rem}
.hero-image img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,36,0.06)}
.btn{display:inline-block;background:var(--accent);color:white;padding:0.7rem 1rem;border-radius:10px;text-decoration:none;margin-top:1rem}

.card-section{padding:2.2rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,36,0.04);min-height:200px;display:flex;flex-direction:column}
.card img{width:100%;height:120px;object-fit:cover;border-radius:8px}
.news-section{padding:1.6rem 0}
.news-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.news-list li{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 4px 12px rgba(11,20,30,0.03)}

.product-hero{padding:2rem 0}
.filters{display:flex;gap:0.5rem;margin-top:0.8rem}
.filters button{border:0;background:#eef6fb;padding:0.5rem 0.8rem;border-radius:8px;cursor:pointer}
.filters button.active{background:var(--accent);color:#fff}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;padding:1rem 0}
.product-item{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(12,20,28,0.04);transition:transform .28s ease,box-shadow .28s ease;overflow:hidden}
.product-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(12,20,28,0.08)}
.product-item img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.tag{display:inline-block;margin-top:0.75rem;background:#f1f7fb;color:var(--accent);padding:0.32rem 0.5rem;border-radius:8px;font-size:0.8rem}

.about-main{padding:2rem 0}
.timeline ol{padding-left:1rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.team-grid img{width:100%;height:160px;object-fit:cover;border-radius:10px}

.contact-main{padding:2rem 0;display:grid;gap:1.5rem}
.contact-form{display:grid;gap:0.6rem;max-width:680px}
.contact-form label{display:flex;flex-direction:column;font-weight:600}
.contact-form input,.contact-form textarea{padding:0.6rem;border-radius:8px;border:1px solid #e5e7eb}
.form-status{color:var(--muted);margin-top:0.5rem}

.site-footer{padding:1.2rem 0;color:var(--muted);font-size:0.9rem}
.small{font-size:0.8rem}

/* Responsive */
@media (max-width:900px){
	.hero-inner{grid-template-columns:1fr}
	.nav-links{display:none}
	.nav-toggle{display:block}
}

/* Smooth reveal animations */
.reveal{opacity:0;transform:translateY(18px);transition:all .6s cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1;transform:none}


