:root{
	--bg:#0f0f12;
	--card:#111217;
	--text:#e9eef8;
	--muted:#9aa3b2;
	--accent:#6d60ff; /* will be adjusted by JS to a random primary color */
	--accent-2:#00d4ff;
	--radius:12px;
	--glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: radial-gradient(1200px 600px at 10% 10%, rgba(109,96,255,0.06), transparent),
	            linear-gradient(180deg, rgba(0,0,0,0.6), rgba(5,5,8,0.9));
	color:var(--text);
	margin:0;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:800;font-size:1.2rem;color:var(--accent);text-decoration:none}
.nav{display:flex;gap:18px}
.nav a{color:var(--text);text-decoration:none;opacity:0.95}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:1.4rem}
.hero{padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}
.hero-text h1{font-size:2rem;margin:0 0 12px}
.lead{color:var(--muted);margin-bottom:12px}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:8px 12px;margin-left:8px;border-radius:8px}
.hero-media img{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.card h3{margin:6px 0}
.card-btn{display:inline-block;margin-top:8px;color:var(--accent);text-decoration:none}
.products-preview h2,.news h2,.team h2{margin-top:0}
.news-item{background:var(--glass);padding:12px;border-radius:10px;margin-bottom:12px}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0;margin-top:40px}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:18px}
.footer-nav a{color:var(--muted);text-decoration:none;margin-right:12px}
.products-header{display:flex;flex-direction:column;gap:12px;padding:18px 0}
.controls{display:flex;gap:12px;align-items:center}
.controls input[type="search"]{flex:1;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.filters{display:flex;gap:8px}
.filter-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:8px;color:var(--text)}
.filter-btn.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.product-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:12px}
.product-card{background:var(--card);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column}
.product-card img{width:100%;height:160px;object-fit:cover;border-radius:8px}
.product-card h4{margin:10px 0 6px}
.contact-main{padding:18px 0}
.contact-form{display:grid;gap:10px;max-width:700px}
.contact-form label{display:block;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.form-note{color:var(--muted);font-size:0.9rem}
.timeline{display:grid;gap:12px;padding:12px 0}
.timeline-item{background:var(--glass);padding:12px;border-radius:10px}
.team .card img{height:140px}

/* responsive */
@media (max-width:880px){
	.hero-grid{grid-template-columns:1fr;gap:18px}
	.nav{display:none}
	.nav-toggle{display:block}
	.footer-grid{flex-direction:column;align-items:flex-start}
}

/* subtle entrance animations */
.card, .news-item, .product-card{opacity:0;transform:translateY(8px);animation:fadeUp .6s ease forwards}
.card:nth-child(1){animation-delay:0.05s}
.card:nth-child(2){animation-delay:0.12s}
.card:nth-child(3){animation-delay:0.18s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* accessibility */
button:focus, a:focus, input:focus, textarea:focus{outline:3px solid rgba(109,96,255,0.18);outline-offset:3px}