:root{--bg:#0A0F1D;--bg-2:#0D1528;--card:#0F1B33;--muted:#C6C9CC;--txt:#F5F7FA;--acc:#0332AC;--acc-2:#0B49F1;--maxw:1200px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);color:var(--txt);font-family:Mulish,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;line-height:1.6}
a{color:#c7d2fe;text-decoration:none}.container{max-width:var(--maxw);margin-inline:auto;padding:0 16px}
header{position:sticky;top:0;z-index:40;background:rgba(11,18,32,.9);border-bottom:1px solid rgba(148,163,184,.2)}
.topbar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand img{height:40px;width:auto;margin:8px;display:block}
nav ul{display:flex;gap:18px;list-style:none;padding:0;margin:0}nav a{opacity:.9;font-weight:600}nav a:hover{opacity:1}
.act{display:flex;gap:10px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.25);background:#0b1220}
.hero{position:relative;padding:56px 0 28px}.hero h1{font-weight:800;font-size:clamp(26px,3.2vw,44px);line-height:1.12;margin:0 0 10px}.hero p{color:var(--muted);margin:0 0 22px}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.card{background:rgba(17,24,39,.6);border:1px solid rgba(148,163,184,.15);border-radius:16px}
.search{padding:16px}.search label{display:block;font-size:13px;color:#cbd5e1;margin-bottom:6px}
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.row-2{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-top:10px}.row-3{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.field{display:flex;gap:8px;align-items:center;background:#0b1220;border:1px solid rgba(148,163,184,.25);border-radius:12px;padding:8px 10px}.field input,.field select{width:100%;background:transparent;border:none;color:var(--txt);font-size:15px;outline:none}
.section{padding:30px 0}.section h2{font-weight:800;font-size:clamp(20px,2.3vw,34px);margin:0 0 14px}
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.cat{position:relative;overflow:hidden;border-radius:14px;background:#0b1220;border:1px solid rgba(148,163,184,.15)}.cat img{width:100%;height:130px;object-fit:cover;display:block}.cat span{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.5);padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.15)}
.brands{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.brands img{width:100%;height:48px;object-fit:contain;filter:grayscale(1);opacity:.85;transform:scale(1);transition:filter .25s ease,opacity .25s ease,transform .25s ease;will-change:transform,filter,opacity}
.brands img:hover,.brands img:focus-visible{filter:grayscale(0);opacity:1;transform:translateY(-2px) scale(1.08)}
@media (prefers-reduced-motion:reduce){.brands img{transition:none}.brands img:hover,.brands img:focus-visible{transform:none}}
footer{border-top:1px solid rgba(148,163,184,.2);margin-top:24px}.legal{font-size:12px;color:#94a3b8;padding:12px 0}
@media (max-width:1024px){.hero-grid{grid-template-columns:1fr}.cats{grid-template-columns:repeat(3,1fr)}.brands{grid-template-columns:repeat(4,1fr)}}