:root{
  --navy:#1b3a63;
  --navy-dark:#122844;
  --orange:#f47b3e;
  --orange-dark:#e0632a;
  --gray:#5c6672;
  --light:#f7f8fa;
  --border:#e7e9ee;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',Arial,sans-serif;
  background:var(--light);
  color:#1c1f26;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* Header */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--navy);
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo-wrap{display:flex;align-items:center;gap:10px;}
.logo-mark{width:34px;height:34px;flex-shrink:0;}
.brand-name{color:#fff;font-size:18px;font-weight:700;letter-spacing:.3px;}
.brand-name span{color:var(--orange);}
header .tagline{color:#cfd9e8;font-size:12px;display:none;}
@media(min-width:640px){header .tagline{display:block;}}

/* Hero */
.hero{
  background:var(--navy);
  background-image:linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff;
  padding:48px 24px 56px;
  text-align:center;
}
.hero h1{
  font-size:clamp(24px,4vw,34px);
  font-weight:700;
  margin-bottom:12px;
}
.hero p{
  color:#cfd9e8;
  font-size:15px;
  max-width:560px;
  margin:0 auto 20px;
}
.hero-tags{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.hero-tag{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
  font-size:12.5px;
  padding:6px 14px;
  border-radius:999px;
}

/* Catalog */
.catalog{
  max-width:1180px;
  margin:0 auto;
  padding:40px 24px 60px;
}
.catalog h2{
  text-align:center;
  font-size:22px;
  color:var(--navy);
  margin-bottom:8px;
}
.catalog .sub{
  text-align:center;
  color:var(--gray);
  font-size:13.5px;
  margin-bottom:32px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:22px;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(27,58,99,0.12);
}
.card-photo{
  position:relative;
  aspect-ratio:1/1;
  background:#f1f2f5;
}
.card-photo img{width:100%;height:100%;object-fit:cover;}
.badge{
  position:absolute;
  top:10px;
  left:10px;
  background:var(--orange-dark);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
}
.card-body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.card-body h3{
  font-size:15px;
  color:var(--navy);
  font-weight:700;
}
.card-body .desc{
  font-size:12.5px;
  color:var(--gray);
  flex:1;
}
.price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-top:6px;
}
.price{
  font-size:19px;
  font-weight:700;
  color:var(--orange-dark);
}
.cta-btn{
  display:block;
  text-align:center;
  margin-top:10px;
  background:var(--orange);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:10px 12px;
  border-radius:8px;
}
.cta-btn:hover{background:var(--orange-dark);}

/* Footer */
footer{
  background:var(--navy-dark);
  color:#cfd9e8;
  text-align:center;
  padding:26px 20px;
  font-size:12.5px;
}
footer .foot-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
footer .foot-logo svg{width:22px;height:22px;}
footer .foot-brand{color:#fff;font-weight:700;}
footer .foot-brand span{color:var(--orange);}