:root{
  --bg:#FFFFFF; --bg-alt:#F4F6F9; --panel:#FFFFFF; --line:#E2E7EE; --line-2:#EDF1F6;
  --ink:#0E1319; --ink-dim:#4E5A6A; --ink-mute:#7B8694;
  --blue:#1A5FD0; --blue-dark:#12459A; --blue-soft:#EAF1FD;
  --radius:12px; --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.18; letter-spacing:-.015em; font-weight:800}
h1{font-size:clamp(28px,3.4vw,46px); max-width:22ch}
h2{font-size:clamp(23px,2.3vw,34px)}
h3{font-size:18px}
p{margin:0}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; gap:26px; min-height:76px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand-mark{width:34px; height:34px}
.brand-text{display:flex; flex-direction:column; line-height:1.12}
.brand-text b{font-size:19px}
.brand-text i{font-style:normal; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute)}
.nav{display:flex; gap:22px; font-size:14.5px; color:var(--ink-dim)}
.nav a{padding:4px 0; border-bottom:1px solid transparent}
.nav a:hover{color:var(--blue); border-color:var(--blue)}
.header-actions{display:flex; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 18px; border-radius:9px; font-weight:700; font-size:14px;
  border:1px solid transparent; transition:background .18s, border-color .18s, transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--blue); color:#fff}
.btn-solid:hover{background:var(--blue-dark)}
.btn-line{border-color:var(--line); color:var(--ink); background:#fff}
.btn-line:hover{border-color:#C9D3E0; background:#FAFBFD}

/* hero */
.hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,#FBFCFE,#fff)}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,58px); align-items:center; padding:clamp(38px,5vw,72px) 24px}
.kicker{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:800; margin-bottom:14px}
.lead{margin-top:16px; color:var(--ink-dim); font-size:clamp(15px,1.2vw,17.5px); max-width:52ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.hero-facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:34px 0 0; padding-top:22px; border-top:1px solid var(--line)}
.hero-facts dt{font-size:clamp(16px,1.5vw,21px); font-weight:800; letter-spacing:-.02em; white-space:nowrap}
.hero-facts dd{margin:2px 0 0; font-size:12.5px; color:var(--ink-mute)}
.hero-figure{margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.hero-figure img{aspect-ratio:16/10; object-fit:cover}
.hero-figure figcaption{padding:12px 16px; font-size:12.5px; color:var(--ink-mute); border-top:1px solid var(--line-2)}

/* sections */
.section{padding:clamp(44px,5vw,78px) 0}
.section-alt{background:var(--bg-alt); border-block:1px solid var(--line)}
.section-head{max-width:74ch; margin-bottom:32px}
.section-sub{margin-top:12px; color:var(--ink-dim)}

/* catalog */
.catalog{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px}
.item{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .2s, border-color .2s}
.item:hover{border-color:#C9D6E8; box-shadow:0 10px 26px rgba(16,35,64,.07)}
.item-media{background:#F7F9FC; border-bottom:1px solid var(--line-2)}
.item-media img{aspect-ratio:4/3; object-fit:cover}
.item-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px}
.item-tag{margin:0; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); font-weight:800}
.item-body p{color:var(--ink-dim); font-size:14.5px}
.params{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line-2); display:grid; gap:7px; font-size:13.5px}
.params div{display:flex; justify-content:space-between; gap:14px}
.params dt{color:var(--ink-mute)}
.params dd{margin:0; font-weight:600; text-align:right}

/* table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:620px}
thead th{background:#F8FAFD; text-align:left; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); padding:14px 18px; border-bottom:1px solid var(--line)}
tbody td{padding:14px 18px; border-bottom:1px solid var(--line-2); color:var(--ink-dim)}
tbody td:first-child{color:var(--ink); font-weight:600}
tbody tr:last-child td{border-bottom:none}
.table-note{margin-top:12px; font-size:13px; color:var(--ink-mute)}

/* production */
.production{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:center}
.checks{list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:11px}
.checks li{position:relative; padding-left:30px; font-size:15px; color:var(--ink-dim)}
.checks li::before{
  content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--blue-soft); box-shadow:inset 0 0 0 1px #C7DAF7;
}
.checks li::after{content:""; position:absolute; left:5px; top:10px; width:6px; height:3px; border-left:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue); transform:rotate(-45deg)}
.production-figure{margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.production-figure img{aspect-ratio:1/1; object-fit:cover}
.production-figure figcaption{padding:12px 16px; font-size:12.5px; color:var(--ink-mute); border-top:1px solid var(--line-2)}

/* docs */
.docs{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.doc{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.doc h3{margin-bottom:8px; font-size:17px}
.doc p{color:var(--ink-dim); font-size:14.5px}

/* contacts */
.contacts{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:start}
.contact-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px}
.contact-list li{display:grid; gap:2px}
.contact-list span{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute)}
.contact-list a{font-weight:600; border-bottom:1px solid var(--line); padding-bottom:2px}
.contact-list a:hover{color:var(--blue); border-color:var(--blue)}
.contact-form{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:0 12px 30px rgba(16,35,64,.05)}
.contact-form h3{margin-bottom:18px}
label{display:block; margin-bottom:13px; font-size:13px; color:var(--ink-dim)}
input,textarea{
  width:100%; margin-top:6px; padding:11px 13px; border-radius:8px;
  border:1px solid #D8E0EA; background:#fff; color:var(--ink); font:inherit; font-size:14.5px;
}
input:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,95,208,.12)}
textarea{resize:vertical}
.form-note{margin-top:11px; font-size:12.5px; color:var(--ink-mute)}

/* footer */
.site-footer{background:#0E1319; color:#B9C2CE; padding:40px 0; font-size:13.5px}
.footer-inner{display:grid; grid-template-columns:1.3fr 1fr .8fr; gap:26px}
.footer-inner b{color:#fff; font-size:15px; display:block; margin-bottom:6px}
.footer-inner p{margin:5px 0}
.footer-inner a{display:block; margin-bottom:5px}
.footer-inner a:hover{color:#fff}

/* responsive */
@media (max-width:1000px){
  .nav{display:none}
  .hero-inner,.production,.contacts{grid-template-columns:1fr}
  .production-figure{order:-1}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .header-inner{min-height:64px; gap:10px}
  .brand-mark{width:28px; height:28px}
  .brand-text b{font-size:16.5px}
  .brand-text i{display:none}
  .btn-line{padding:9px 12px; font-size:12.5px}
  .btn-solid{padding:10px 14px; font-size:13px}
  .hero-facts{grid-template-columns:1fr 1fr; gap:12px}
  .contact-form{padding:20px}
  .footer-inner{grid-template-columns:1fr}
  .item-media img{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; scroll-behavior:auto!important}
}