/* Techspert IT — styles.css v2 */
/* Palette from logo: cool cyan accent on dark background */
:root{
  --bg:#060809;
  --panel:#071018;
  --accent:#59b2e6;
  --muted:#9fb7c7;
  --card:#0f1a24;
  --glass: rgba(255,255,255,0.03);
  --maxwidth:1200px;
  --radius:12px;
  --shadow: 0 8px 30px rgba(0,0,0,0.6);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{background:linear-gradient(180deg,#000 0%, #071018 70%); color:#e6f3fb; margin:0; -webkit-font-smoothing:antialiased;}
.container{max-width:var(--maxwidth); margin:0 auto; padding:20px;}
.site-header{background:transparent; position:sticky; top:0; z-index:50; padding:10px 0;}
.header-inner{display:flex; align-items:center; gap:20px; justify-content:space-between;}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;}
.logo{height:64px; width:auto; border-radius:8px; box-shadow:0 6px 30px rgba(0,0,0,0.6);}
.brand-text h1{margin:0; font-size:20px; letter-spacing:2px;}
.slogan{font-size:11px; color:var(--muted); margin-top:4px;}
.nav{display:flex; gap:14px; align-items:center;}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px;}
.nav a:hover{background:rgba(89,178,230,0.07); color:var(--accent);}
.menu-toggle{display:none; background:none; border:0; color:var(--muted); font-size:20px;}

.hero{padding:40px 0; background-image: radial-gradient(ellipse at center, rgba(89,178,230,0.05), transparent 30%);}
.hero-grid{display:grid; grid-template-columns:1fr 420px; gap:30px; align-items:center;}
.hero-content h2{font-size:34px; margin:0 0 10px 0; color:#dff6ff;}
.hero-content p{color:var(--muted); line-height:1.5;}
.hero-benefits{color:var(--muted); margin-top:12px;}
.btn{display:inline-block; background:linear-gradient(90deg,var(--accent), #3da0d9); color:#021; padding:10px 18px; border-radius:10px; text-decoration:none; font-weight:700; border:none; cursor:pointer;}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted);}

/* content sections */
.services, .about, .security{padding:30px 0;}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.card{background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.6);}
.about p{color:var(--muted); line-height:1.6;}
.callout{background:linear-gradient(90deg, rgba(89,178,230,0.04), transparent); padding:10px; border-radius:8px; margin-top:12px; color:var(--muted);}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;}
.contact-form label{display:block; margin-bottom:10px; 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:var(--glass); color:inherit;}
.form-note{font-size:12px; color:var(--muted); margin-top:8px;}

/* footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03); padding:18px 0; margin-top:30px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.footer-nav a{color:var(--muted); text-decoration:none; margin-left:10px; font-size:14px;}

/* store */
.store{padding:20px 0;}
.filter-bar{display:flex; gap:10px; margin:12px 0 18px 0; flex-wrap:wrap;}
.filter-btn{background:transparent; border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px; color:var(--muted); cursor:pointer; font-weight:700;}
.filter-btn.active{background:linear-gradient(90deg,var(--accent), #3da0d9); color:#021; box-shadow:0 8px 20px rgba(59,160,217,0.12);}

.products-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.product{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:14px; border-radius:12px; text-align:left; transition:transform .14s ease, box-shadow .14s ease;}
.product:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,0.6);}
.product .media{height:180px; border-radius:10px; overflow:hidden; margin-bottom:8px; background:#071018; display:flex; align-items:center; justify-content:center;}
.product img{width:100%; height:100%; object-fit:cover; display:block;}
.product h4{margin:6px 0;}
.muted{color:var(--muted); font-size:13px;}
.price{font-weight:900; font-size:18px; margin-top:6px;}

/* cart drawer */
.cart-drawer{position:fixed; right:20px; top:90px; width:360px; max-width:95%; background:var(--panel); padding:14px; border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,0.6); z-index:80;}
.cart-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.cart-items{max-height:420px; overflow:auto; margin-bottom:8px;}
.cart-item{display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; color:var(--muted);}
.hidden{display:none;}

/* responsive */
@media (max-width:1100px){ .products-grid{grid-template-columns:repeat(3,1fr);} .hero-grid{grid-template-columns:1fr;} }
@media (max-width:800px){ .products-grid{grid-template-columns:repeat(2,1fr);} .contact-grid{grid-template-columns:1fr;} .nav{display:none;} .menu-toggle{display:block;} }
@media (max-width:480px){ .products-grid{grid-template-columns:repeat(1,1fr);} .logo{height:54px;} .brand-text h1{font-size:16px;} }