:root{
	--main-1: #0aa3a3;
	--accent: #ff6b6b;
	--bg: #0f1720;
	--card: #0d1114;
	--muted: #9aa7a7;
	--glass: rgba(255,255,255,0.03);
	--radius: 12px;
	--max-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;
	color:#e6f6f6;
	background:linear-gradient(180deg,#071117 0%, #071a1a 60%);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-behavior:smooth;
}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.nav{backdrop-filter: blur(6px);position:sticky;top:0;z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.brand{font-weight:700;color:var(--main-1);text-decoration:none;font-size:1.1rem}
.nav-links{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;padding:.4rem .6rem;border-radius:8px}
.nav-links a:hover{background:var(--glass);color:#fff}
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:1.2rem}

.hero{padding:2rem 0;overflow:hidden}
.hero-inner{display:flex;gap:2rem;align-items:center;justify-content:space-between}
.hero-copy{flex:1}
.hero-copy h1{font-size:2rem;margin:0 0 .6rem;color:var(--accent);text-shadow:0 2px 12px rgba(0,0,0,0.6)}
.hero-copy p{color:var(--muted);line-height:1.6}
.hero-media{width:40%;display:flex;justify-content:center}
.hero-media img{width:100%;max-width:360px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.6);transform:translateY(0);transition:transform .6s ease}
.hero-media img:hover{transform:translateY(-6px)}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;text-decoration:none;border:1px solid transparent}
.btn.primary{background:var(--main-1);color:#071117;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

.intro, .products-preview, .news{padding:2rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:1rem;border-radius:var(--radius);box-shadow:0 6px 24px rgba(0,0,0,0.6)}
.card img{width:100%;border-radius:10px;height:140px;object-fit:cover;margin-bottom:.6rem}
.card h3{margin:.2rem 0}
.more{text-align:center;margin-top:1rem}
.news-list{list-style:none;padding:0;margin:0}
.news-list li{padding:.6rem 0;border-bottom:1px dashed rgba(255,255,255,0.03)}
.news-list a{color:var(--main-1);text-decoration:none}

.site-footer{padding:1.6rem 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);margin-top:2rem}

/* Products page */
.page-header{padding:1rem 0}
.filters{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.filters input, .filters select{padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted)}
.products-grid .product{padding:1rem;background:var(--card);border-radius:12px;transition:transform .25s, box-shadow .25s}
.products-grid .product:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.6)}
.product img{width:100%;height:140px;object-fit:cover;border-radius:10px;margin-bottom:.6rem}
.product h4{margin:.2rem 0}

.about .team{display:flex;gap:1rem;flex-wrap:wrap}
.member{background:var(--glass);padding:1rem;border-radius:12px;width:220px;text-align:center}
.member img{width:100%;height:120px;object-fit:cover;border-radius:8px;margin-bottom:.5rem}

.contact{display:grid;grid-template-columns:1fr 320px;gap:2rem}
.contact-form label{display:block;margin-bottom:.8rem;color:var(--muted)}
.contact-form input, .contact-form textarea{width:100%;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted)}
.contact-form textarea{min-height:120px;resize:vertical}
.office{background:var(--glass);padding:1rem;border-radius:12px}
.note{font-size:.85rem;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
	.hero-inner{flex-direction:column-reverse}
	.hero-media{width:100%}
	.nav-links{display:none}
	.nav-toggle{display:block}
	.contact{grid-template-columns:1fr}
}

/* Smooth reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}