:root {
  --ink: #172c3e;
  --blue: #164c78;
  --blue-deep: #123958;
  --line: #dae1e8;
  --muted: #697b89;
  --paper: #fff;
  --light: #f1f5f7;
  --accent: #83badb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font: 15px/1.55 Arial, Helvetica, sans-serif; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { width: min(1220px, calc(100% - 84px)); margin-inline: auto; }

.demo-banner { background: #edf3f6; color: #4c6576; text-align: center; padding: 8px 15px; font-size: 12px; line-height: 1.45; letter-spacing: .01em; }
.site-header { background: #fff; border-bottom: 1px solid #dce5eb; }
.header-inner { min-height: 89px; display: flex; gap: 34px; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand-mark { font-size: 39px; letter-spacing: -.095em; font-weight: 900; line-height: 1; color: #155381; position: relative; padding-right: 5px; }
.brand-stripe { display: block; width: 77px; height: 4px; background: #e3a82a; position: absolute; bottom: -8px; left: 0; }
.brand-sub { border-left: 1px solid #bbc9d2; padding-left: 14px; font-size: 10px; line-height: 1.4; font-weight: 700; letter-spacing: .04em; color: #3e5364; }
.nav { display: flex; gap: 35px; align-items: center; margin-left: auto; color: #34495b; font-size: 14px; }
.nav a:hover, .header-phone:hover { color: #1477b5; }
.header-phones { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.header-phone { color: #123d5c; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.header-phone:first-child { font-size: 15px; }

.hero { background: linear-gradient(111deg, #173e61 0%, #102c47 67%, #0d253c 100%); color: #fff; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .72fr); min-height: 452px; }
.hero-main { min-width: 0; padding: 65px 40px 69px 0; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { font-size: 11px; letter-spacing: .17em; font-weight: 700; color: #9cbcd2; }
.dot { display: inline-block; background: #e0b043; width: 7px; height: 7px; margin-right: 10px; }
.hero h1 { width: 100%; min-width: 0; max-width: 780px; font-size: clamp(44px, 4.4vw, 66px); line-height: 1.04; letter-spacing: -.055em; margin: 25px 0 24px; font-weight: 750; }
.hero h1 span { color: #a9c9dc; }
.hero-copy { max-width: 540px; font-size: 16px; line-height: 1.7; color: #d1dfeb; margin: 0; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; flex-wrap: wrap; }
.primary-link { display: flex; gap: 40px; justify-content: space-between; align-items: center; background: #fff; color: #183b58; padding: 15px 20px; font-weight: 700; min-width: 220px; }
.primary-link:hover { background: #e2f0f7; }
.simple-link { border-bottom: 1px solid #87a5bc; padding-bottom: 4px; font-weight: 600; }
.simple-link span { padding-left: 13px; }
.hero-aside { border-left: 1px solid #42637e; padding: 70px 0 48px 35px; display: flex; flex-direction: column; }
.aside-head { font-size: 10px; letter-spacing: .16em; color: #86a7c1; margin-bottom: 25px; }
.aside-line { display: flex; align-items: baseline; gap: 23px; border-top: 1px solid #42637e; padding: 15px 0; }
.aside-line span { font-size: 11px; color: #8fb0c7; }
.aside-line strong { font-weight: 500; font-size: 18px; }
.aside-footer { margin-top: auto; padding-top: 24px; color: #8fb0c7; font-size: 12px; }

.catalog-section { padding-top: 80px; padding-bottom: 52px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 31px; }
.eyebrow-dark { color: #47718f; }
.section-heading h2 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.1; margin: 11px 0 0; letter-spacing: -.055em; }
.catalog-meta { color: #7c8b97; font-size: 12px; padding-bottom: 8px; }
.meta-separator { padding: 0 10px; color: #b7c5ce; }
.price-controls { display: flex; gap: 18px; justify-content: space-between; align-items: center; border-top: 1px solid #cbd6de; border-bottom: 1px solid #cbd6de; padding: 12px 0; }
.filters { display: flex; gap: 5px; flex-wrap: wrap; }
.filter { border: 0; background: transparent; color: #627684; padding: 10px 14px; cursor: pointer; font-size: 13px; }
.filter:hover { background: #eef3f6; }
.filter.active { background: #173e61; color: #fff; }
.search-wrap { display: flex; align-items: center; border: 1px solid #d8e1e8; padding: 0 12px; gap: 8px; min-width: 270px; color: #738794; }
.search-wrap input { outline: none; border: 0; min-height: 40px; width: 100%; font-size: 13px; color: #183b58; background: transparent; }
.price-message { padding: 40px 18px; text-align: center; color: #647b8b; }
.price-message:empty { display: none; }
.price-message.error { color: #aa3d27; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 755px; }
.price-table thead { background: #f1f5f7; }
.price-table th { font-size: 11px; color: #587182; letter-spacing: .06em; text-transform: uppercase; padding: 16px 14px; font-weight: 700; white-space: nowrap; }
.price-table th:first-child, .price-table td:first-child { padding-left: 20px; }
.price-table td { padding: 14px; border-bottom: 1px solid #e4e9ed; vertical-align: middle; font-size: 13px; }
.price-table .num { text-align: right; }
.price-table td.num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #264d6a; }
.price-table .muted-price { font-weight: 400; color: #87949c; font-size: 12px; }
.price-table .group-row td { background: #e8eef2; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #365c74; padding: 12px 20px; text-transform: uppercase; }
.price-table tbody tr:not(.group-row):hover { background: #f8fbfd; }
.product-name { font-weight: 700; }
.product-note { font-size: 11px; color: #8796a1; margin-top: 4px; }
.price-bottom { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-top: 23px; }
.price-bottom p { font-size: 12px; color: #718391; max-width: 640px; margin: 0; }
.download-link { font-size: 13px; font-weight: 700; color: #164c78; border-bottom: 1px solid #164c78; white-space: nowrap; padding-bottom: 5px; }
.download-link span { margin-left: 15px; }

.contact-section { background: #173e61; color: #fff; padding: 66px 0 75px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-grid h2 { margin: 16px 0 0; font-size: clamp(40px, 4vw, 62px); line-height: 1.04; letter-spacing: -.045em; }
.contact-details { width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding-top: 9px; }
.contact-label { font-size: 10px; letter-spacing: .16em; color: #a8bfce; font-weight: 700; margin-top: 16px; }
.contact-details > .contact-label:first-child { margin-top: 0; }
.contact-primary { color: inherit; font-size: 29px; font-weight: 700; margin: 7px 0 13px; white-space: nowrap; }
.contact-person { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.contact-person a { font-size: 18px; font-weight: 700; margin: 0; white-space: nowrap; }
.contact-person span { font-size: 14px; color: #b8cbd7; }
.contact-secondary { display: flex; flex-wrap: wrap; gap: 18px 44px; margin-top: 10px; }
.contact-secondary .contact-label { display: block; margin-top: 16px; }
.contact-secondary p { font-size: 15px; margin: 6px 0 0; color: #d7e3ea; }
.contact-email { display: inline-block; font-size: 15px; font-weight: 500; margin: 6px 0 0; color: #d7e3ea; border-bottom: 1px solid #718da1; overflow-wrap: anywhere; }

.site-footer { background: #0f2d47; color: #99afbf; }
.footer-inner { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
.footer-inner a { color: #d2e3ed; }

@media (max-width: 900px) {
  .shell { width: min(calc(100% - 42px), 1220px); }
  .nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-aside { display: none; }
  .hero-main { padding: 62px 0; }
  .price-controls { flex-wrap: wrap; }
  .search-wrap { width: 100%; }
  .contact-grid { gap: 20px; }
}

@media (max-width: 600px) {
  .shell { width: calc(100% - 34px); }
  .header-inner { min-height: 88px; gap: 12px; }
  .brand-mark { font-size: 33px; }
  .brand-stripe { width: 65px; }
  .brand-sub { display: none; }
  .header-phones { gap: 1px; }
  .header-phone, .header-phone:first-child { font-size: 13px; line-height: 1.3; }
  .hero-main { padding: 51px 0 57px; }
  .hero h1 { font-size: clamp(32px, 9vw, 38px); letter-spacing: -.06em; overflow-wrap: anywhere; word-break: normal; }
  .hero-copy { font-size: 14px; }
  .hero-actions { gap: 24px; }
  .catalog-section { padding: 56px 0 42px; }
  .section-heading { display: block; }
  .catalog-meta { margin-top: 15px; }
  .filter { padding: 9px 10px; font-size: 12px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-section { padding: 57px 0; }
  .contact-primary { font-size: 23px; }
  .contact-person a { font-size: 18px; }
  .contact-secondary { gap: 14px 32px; }
  .price-bottom { align-items: flex-start; flex-direction: column; }
  .footer-inner { flex-wrap: wrap; padding: 15px 0; }
  .footer-inner span:nth-child(2) { display: none; }
}