:root{
  --navy:#102a43;
  --blue:#1677b8;
  --cyan:#eaf7fb;
  --teal:#1b8a89;
  --green:#2b7a56;
  --ink:#243b53;
  --muted:#627d98;
  --line:#d9e2ec;
  --paper:#ffffff;
  --soft:#f7fafc;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.62;
}
a{color:inherit}
.topbar{
  background:var(--navy);
  color:#fff;
}
.topbar .inner{
  max-width:var(--max);
  margin:auto;
  padding:8px 24px;
  font-size:13px;
}
.site-header{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.header-inner{
  max-width:var(--max);
  margin:auto;
  min-height:88px;
  padding:15px 24px;
  display:grid;
  grid-template-columns:280px 1fr auto;
  gap:24px;
  align-items:center;
}
.brand{
  text-decoration:none;
  font-size:24px;
  font-weight:800;
  line-height:1.05;
  color:var(--navy);
}
.brand span{
  display:block;
  margin-top:6px;
  color:var(--teal);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.nav{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}
.nav a:hover{color:var(--blue)}
.menu-btn{
  display:none;
  border:0;
  background:transparent;
  font-size:25px;
}
.hero{
  background:linear-gradient(180deg,#f0fbff,#e9f7fa);
  border-bottom:1px solid #d6ebf0;
}
.hero-inner{
  max-width:var(--max);
  margin:auto;
  padding:52px 24px 46px;
}
.kicker{
  color:var(--teal);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.1px;
  margin-bottom:12px;
}
.hero h1{
  margin:0;
  max-width:900px;
  color:var(--navy);
  font-size:clamp(38px,6vw,64px);
  line-height:1.05;
}
.hero p{
  max-width:820px;
  margin:16px 0 0;
  color:#486581;
  font-size:18px;
}
.content{
  max-width:var(--max);
  margin:auto;
  padding:46px 24px 72px;
}
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:34px;
  align-items:start;
}
.article{
  min-width:0;
}
.article h2{
  margin:34px 0 12px;
  color:var(--navy);
  font-size:28px;
}
.article h3,.article h5{
  margin:26px 0 8px;
  color:var(--navy);
}
.article p{margin:0 0 18px}
.article ul{padding-left:22px}
.article li{margin:7px 0}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0 32px;
}
.photo-note{
  border:1px solid var(--line);
  background:var(--soft);
  min-height:150px;
  padding:18px;
  display:flex;
  align-items:flex-end;
  color:var(--muted);
  font-size:13px;
}
.panorama{
  border:1px solid var(--line);
  background:var(--soft);
  padding:24px;
  margin:18px 0;
}
.side-card{
  border:1px solid var(--line);
  background:#fff;
  padding:22px;
  margin-bottom:18px;
}
.side-card h2{
  margin:0 0 13px;
  color:var(--navy);
  font-size:21px;
}
.side-card ul{
  margin:0;
  padding-left:20px;
}
.side-card li{margin:8px 0}
.product-empty{
  max-width:780px;
  border:1px solid var(--line);
  background:var(--soft);
  padding:28px;
}
.product-empty p{
  margin:0;
  color:var(--muted);
}
.site-footer{
  background:var(--navy);
  color:#eaf2f8;
}
.footer-inner{
  max-width:var(--max);
  margin:auto;
  padding:40px 24px 28px;
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr;
  gap:26px;
}
.footer-inner h3{
  margin:0 0 12px;
  color:#fff;
  font-size:18px;
}
.footer-inner p,.footer-inner li{
  font-size:14px;
}
.footer-inner ul{
  margin:0;
  padding-left:18px;
}
.footer-bottom{
  max-width:var(--max);
  margin:auto;
  border-top:1px solid rgba(255,255,255,.12);
  padding:17px 24px 24px;
  color:#bcccdc;
  font-size:12px;
}
@media(max-width:900px){
  .header-inner{grid-template-columns:1fr auto}
  .menu-btn{display:block}
  .nav{
    display:none;
    grid-column:1/-1;
    justify-content:flex-start;
    flex-direction:column;
    gap:0;
  }
  .nav.open{display:flex}
  .nav a{padding:8px 0}
  .layout{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}
@media(max-width:620px){
  .header-inner,.hero-inner,.content,.footer-inner,.footer-bottom{padding-left:18px;padding-right:18px}
  .hero h1{font-size:40px}
  .hero-inner{padding-top:39px;padding-bottom:36px}
}