:root{
  --primary:#003087;
  --gray:#a7a9ac;
  --dark:#0a0a0a;
  --light:#f7f7f8;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Vazirmatn',sans-serif;
  color:var(--dark);
  background:var(--light);
  line-height:1.8;
}

.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* Header */
#header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(0,10,40,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:.3s;
  padding:14px 0;
}
#header.scrolled{
  background:rgba(255,255,255,.85);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  padding:8px 0;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo img{height:38px;}
.logo span{color:#fff;font-weight:700;font-size:18px; display: none;}
#header.scrolled .logo span{color:var(--primary);}

nav ul{display:flex;gap:30px;list-style:none;}
nav a{color:#fff;text-decoration:none;font-weight:500;transition:.2s;}
#header.scrolled nav a{color:var(--dark);}
nav a:hover{color:var(--gray);}

.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.menu-toggle span{width:26px;height:2px;background:#fff;}
#header.scrolled .menu-toggle span{background:var(--dark);}

/* Hero */
.hero{
  position:relative;height:100vh;display:flex;align-items:center;
  overflow:hidden;
}
.hero-video{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.hero-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.7));z-index:1;
}
.hero-content{position:relative;z-index:2;color:#fff;text-align:center;margin:0 auto;}
.hero-content h1{font-size:42px;font-weight:900;margin-bottom:16px;}
.hero-content p{font-size:18px;margin-bottom:30px;color:var(--gray);}

.btn-primary{
  display:inline-block;background:var(--primary);color:#fff;
  padding:12px 32px;border:none;border-radius:6px;
  font-family:inherit;font-size:16px;cursor:pointer;
  text-decoration:none;transition:.2s;
}
.btn-primary:hover{background:#001d5c;}

/* Products */
.products{padding:100px 0 60px;}
.section-title{
  text-align:center;font-size:30px;font-weight:700;margin-bottom:40px;color:var(--primary);
}
.filter-bar{
  display:flex;justify-content:center;gap:12px;margin-bottom:40px;flex-wrap:wrap;
}
.filter-btn{
  padding:8px 20px;border:1px solid var(--gray);background:#fff;
  border-radius:30px;cursor:pointer;font-family:inherit;transition:.2s;
}
.filter-btn.active,.filter-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}

.product-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;
}
.card{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);transition:.3s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.1);}
.card-img{
  width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--gray);
}
.card-body{padding:16px;}
.card-body h3{font-size:16px;margin-bottom:6px;}
.card-body .code{font-size:13px;color:#888;}

/* About */
.about{padding:80px 0;background:#fff;text-align:center;}
.about p{max-width:700px;margin:0 auto;font-size:17px;color:#444;}

/* Contact */
.contact{padding:80px 0;}
#contactForm{max-width:500px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
#contactForm input,#contactForm textarea{
  padding:12px;border:1px solid #ddd;border-radius:6px;font-family:inherit;font-size:15px;
}

footer{
  background:var(--primary);color:#fff;text-align:center;padding:20px 0;
}

/* Responsive */
@media(max-width:768px){
  .menu-toggle{display:flex;}
  nav ul{
    position:fixed;top:0;right:-100%;width:70%;height:100vh;
    background:var(--primary);flex-direction:column;padding:100px 30px;
    transition:.3s;z-index:99;
  }
  nav ul.open{right:0;}
  .hero-content h1{font-size:28px;}
}