:root{
  --navy:#0B2B49;
  --orange:#DD7618;
  --slate:#647485;
  --bg:#ffffff;
  --border:#e6e9ee;
  --muted:#f6f8fb;
  --shadow: 0 10px 30px rgba(11,43,73,.10);
  --radius: 16px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--navy); background:var(--bg);}
a{color:inherit;text-decoration:none}
p{color: #1f2d3a; line-height:1.6}
small{color:rgba(11,43,73,.75)}
img{max-width:100%;display:block}

.container{max-width:var(--max); margin:0 auto; padding:0 20px;}
.section{padding:48px 0;}
.section.tight{padding:28px 0;}
.kicker{color:var(--orange); letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-size:.82rem;}
.h1{font-size:clamp(2rem, 4vw, 3.1rem); margin:12px 0 10px;}
.h2{font-size:clamp(1.4rem, 2.6vw, 2.0rem); margin:0 0 10px;}
.lead{font-size:1.1rem; color: rgba(11,43,73,.88); max-width: 62ch;}
.badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:.9rem; color:rgba(11,43,73,.85)}
.badge .dot{width:8px;height:8px;border-radius:50%; background:var(--orange);}

header.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:170px; height:auto;}
.navlinks{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.navlinks a{
  padding:10px 12px; border-radius:12px;
  color: rgba(11,43,73,.90);
}
.navlinks a:hover{background:var(--muted)}
.navlinks a.active{background:rgba(221,118,24,.12); color:var(--navy);}

.nav-cta{display:flex; gap:10px; align-items:center}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 14px;
  padding:11px 14px;
  font-weight:700;
  border:1px solid var(--border);
  background:#fff;
  color:var(--navy);
  cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.button:hover{background:var(--muted); border-color:#dfe4ea}
.button.primary{background:var(--navy); color:#fff; border-color: var(--navy);}
.button.primary:hover{background:#09233b}
.button.accent{background:var(--orange); color:#fff; border-color: var(--orange);}
.button.accent:hover{filter:brightness(.95)}
.button:active{transform: translateY(1px)}
.button.link{border-color:transparent;background:transparent;padding:10px 6px;font-weight:700;color:var(--navy)}
.button.link:hover{background:rgba(221,118,24,.12)}
.button:disabled{opacity:.55; cursor:not-allowed}

.hero{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:28px;
  align-items:center;
}
.hero-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding:18px;
}
.hero-card .logo-wrap{
  background: var(--muted);
  border:1px dashed #dfe4ea;
  border-radius: 14px;
  padding:14px;
}
.hero-card .logo-wrap img{width:100%; max-width:420px; margin:0 auto;}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:18px;
}
.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: 0 8px 20px rgba(11,43,73,.08);
  overflow:hidden;
}
.card .media{aspect-ratio: 16/10; background:var(--muted); overflow:hidden}
.card .media img{width:100%; height:100%; object-fit:cover}
.card .content{padding:14px 14px 16px;}
.card .title{font-weight:800; font-size:1.05rem; margin:0 0 6px;}
.card .meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.meta-pill{font-size:.9rem; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:rgba(11,43,73,.85); background:#fff}
.meta-pill strong{color:var(--navy)}
.price{font-weight:900; color:var(--navy)}
.subtle{color:rgba(11,43,73,.75)}
.hr{height:1px; background:var(--border); margin:18px 0;}

.rotator{
  position:relative;
  min-height: 370px;
}
.rotator .card{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform: translateY(12px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
}
.rotator .card.active{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0) scale(1);
}
.rotator-controls{
  display:flex; gap:10px; align-items:center; justify-content:flex-start;
  margin-top:12px;
}
.dots{display:flex; gap:8px; align-items:center;}
.dotbtn{
  width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(11,43,73,.25);
  background:#fff; cursor:pointer;
}
.dotbtn.active{background:var(--orange); border-color: var(--orange);}

.footer{
  border-top:1px solid var(--border);
  background: #fff;
  padding:28px 0;
}
.footer .cols{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:18px;
}
.footer a{color:rgba(11,43,73,.85)}
.footer a:hover{color:var(--navy); text-decoration:underline}
.note{font-size:.9rem; color:rgba(11,43,73,.7)}

.form-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.field{display:flex; flex-direction:column; gap:6px; min-width: 180px;}
label{font-weight:700; font-size:.92rem; color:rgba(11,43,73,.88)}
input, select, textarea{
  border:1px solid var(--border);
  border-radius: 14px;
  padding:12px 12px;
  font-size:1rem;
  outline:none;
  background:#fff;
}
input:focus, select:focus, textarea:focus{border-color: rgba(221,118,24,.55); box-shadow: 0 0 0 4px rgba(221,118,24,.12);}
textarea{min-height:120px; resize:vertical}

.list{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:18px;
}
.list .card{grid-column: span 6;}
@media (max-width: 900px){
  .hero{grid-template-columns: 1fr; }
  .footer .cols{grid-template-columns:1fr}
  .list .card{grid-column: span 12;}
  .brand img{width:150px;}
}

.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:10px;
}
.gallery .gimg{grid-column: span 4; border-radius: 14px; overflow:hidden; border:1px solid var(--border); background:var(--muted)}
.gallery .gimg img{width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3;}
@media (max-width: 900px){
  .gallery .gimg{grid-column: span 6;}
}
@media (max-width: 560px){
  .gallery .gimg{grid-column: span 12;}
}

.callout{
  background: rgba(221,118,24,.10);
  border: 1px solid rgba(221,118,24,.25);
  border-radius: var(--radius);
  padding:16px;
}