:root{
	--main-color: #7D3C98; /* random main color */
	--accent-color: #F4B400;
	--bg: #0f0f12;
	--muted: #9aa0a6;
	--surface: #111214;
	--max-width: 1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background:linear-gradient(180deg,#08080a 0%, #0f0f12 100%);
	color:#e6e7ea;
	line-height:1.5;
}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.12))}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0}
.logo{font-weight:700;color:var(--accent-color);text-decoration:none;font-size:1.2rem}
.nav a{color:var(--muted);text-decoration:none;margin:0 0.75rem;font-weight:600}
.nav a:hover{color:#fff}
.nav-toggle{display:none;background:none;border:0;color:var(--muted);font-size:1.25rem}
.hero{padding:3rem 0}
.hero-inner{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.hero-copy{flex:1;min-width:280px}
.hero-copy h1{font-size:clamp(1.6rem,2.7vw,2.6rem);margin:0 0 .5rem}
.lead{color:var(--muted);margin:0 0 1rem}
.cta-row .btn{margin-right:.6rem}
.hero-media img{width:320px;border-radius:8px;box-shadow:0 6px 30px rgba(125,60,152,0.15)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:10px;min-height:220px}
.card img{width:100%;height:120px;object-fit:cover;border-radius:6px}
.btn{display:inline-block;padding:.6rem 1rem;background:var(--main-color);color:#fff;border-radius:8px;text-decoration:none;font-weight:700}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}
.news{margin:2rem 0}
.news-item{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:1rem;border-radius:8px;margin-bottom:.8rem}
.product-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.25rem 0}
.product{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005));padding:1rem;border-radius:10px;text-align:center}
.product img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.tag{display:inline-block;margin-top:.6rem;padding:.25rem .5rem;background:rgba(0,0,0,0.35);border-radius:6px;color:var(--muted);font-size:.85rem}
.filters{margin-top:1rem}
.filter-btn{padding:.4rem .6rem;border-radius:6px;background:rgba(255,255,255,0.02);border:0;color:var(--muted);margin-right:.4rem;cursor:pointer}
.filter-btn.active{background:var(--main-color);color:#fff}
.about-page .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.team-member{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:1rem;border-radius:10px;text-align:center}
.team-member img{width:100%;height:160px;object-fit:cover;border-radius:8px}
.contact-form{max-width:640px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:1rem;border-radius:8px}
.contact-form label{display:block;margin-bottom:.6rem;color:var(--muted);font-weight:600}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem;padding:1.25rem 0}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.footer-grid h4{color:var(--muted);margin-bottom:.4rem}
.footer-bottom{padding-top:1rem;color:var(--muted);font-size:.9rem}
/* Responsive */
@media (max-width:900px){
	.nav{display:none}
	.nav-toggle{display:inline-block}
	.hero-media img{width:260px}
	.footer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
	.hero-inner{flex-direction:column-reverse}
	.hero-media img{width:100%}
	.header-inner{gap:.5rem}
}