:root{
  --navy:#07152c;
  --navy2:#10294d;
  --orange:#f28c1b;
  --red:#ed1c24;
  --yellow:#f4c400;
  --blue:#0072bc;
  --brown:#8b5a2b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;color:var(--navy);background:#fff;line-height:1.6}
.topbar{
  min-height:120px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 4%;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  position:sticky;
  top:0;
  z-index:10;
  gap:20px;
}
.logo{
  width:320px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}
nav a{color:var(--navy);text-decoration:none;margin:0 18px;font-weight:700;text-transform:uppercase;font-size:14px}
nav a.active{color:var(--orange);border-bottom:3px solid var(--orange);padding-bottom:10px}
.top-btn,.btn{background:var(--orange);color:#fff;text-decoration:none;text-transform:uppercase;font-weight:700;padding:14px 28px;display:inline-block}
.hero{min-height:580px;background:linear-gradient(90deg,var(--navy) 0%,var(--navy2) 45%,rgba(7,21,44,.2) 70%);display:grid;grid-template-columns:45% 55%;overflow:hidden}
.hero-text{color:#fff;padding:80px 7%}
.hero-text h1{font-size:48px;line-height:1.15;text-transform:uppercase;margin-bottom:22px}
.hero-text span{color:var(--orange)}
.line{width:85px;height:4px;background:var(--orange);margin:22px 0}
.hero-text p{font-size:19px;margin-bottom:30px;color:#e8edf5;max-width:560px}
.hero-image{background:url('hero.jpg') center/cover no-repeat}
.categories{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:16px;background:#fff}
.category-card{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.10);overflow:hidden}
.category-card img{width:100%;height:260px;object-fit:cover;display:block}
.category-card .content{padding:28px}
.category-card h3{text-transform:uppercase;font-size:22px;margin-bottom:16px;display:inline-block;padding-bottom:8px}
.industrial h3{border-bottom:5px solid var(--orange)}
.automotive h3{border-bottom:5px solid var(--red)}
.wood h3{border-bottom:5px solid var(--yellow)}
.protective h3{border-bottom:5px solid var(--blue)}
.accessories h3{border-bottom:5px solid var(--brown)}
.section{padding:80px 8%;font-size:18px}
.section h2{font-size:38px;text-transform:uppercase;margin-bottom:18px}
.dark{background:var(--navy);color:#fff}
.contact{background:#f5f7fa}
footer{background:var(--navy);color:#fff;text-align:center;padding:22px}
@media(max-width:1200px){
  .categories{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px){
  .topbar{height:auto;flex-direction:column;gap:16px}
  nav a{display:inline-block;margin:8px}
  .hero{grid-template-columns:1fr}
  .hero-image{min-height:320px}
  .categories{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .categories{grid-template-columns:1fr}
  .hero-text h1{font-size:34px}
  .logo{width:260px}
}