:root {
  --ink: #15262a;
  --muted: #5e6b6e;
  --paper: #ffffff;
  --soft: #edf1ef;
  --line: #ccd5d2;
  --brand: #b3262d;
  --brand-dark: #75171c;
  --accent: #d7a72d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #dfe5e3;
  color: var(--ink);
  font-family: Arial, "Helvetica Neue", sans-serif;
  letter-spacing: 0;
}

body { padding: 28px 0; }

.screen-tools {
  position: sticky;
  z-index: 20;
  top: 14px;
  width: min(210mm, calc(100% - 28px));
  margin: 0 auto 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.screen-tools a {
  padding: 11px 15px;
  border: 1px solid #b7c0bd;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgb(15 28 31 / 10%);
}

.screen-tools .primary { background: var(--brand); border-color: var(--brand); color: #fff; }

.catalog {
  width: 210mm;
  margin: auto;
  box-shadow: 0 8px 32px rgb(15 28 31 / 18%);
}

.page {
  position: relative;
  width: 210mm;
  height: 296.5mm;
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
  background: var(--paper);
}

.page + .page {
  break-before: page;
  page-break-before: always;
}

.page-number {
  position: absolute;
  right: 15mm;
  bottom: 9mm;
  font-size: 10px;
  font-weight: 700;
  color: #728083;
}

.page-brand {
  position: absolute;
  left: 15mm;
  bottom: 9mm;
  font-size: 9px;
  font-weight: 700;
  color: #728083;
  text-transform: uppercase;
}

.cover { background: #102326; color: #fff; }

.cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(10 28 31 / 94%) 0%, rgb(10 28 31 / 66%) 55%, rgb(10 28 31 / 20%) 100%);
}

.cover-content {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  max-width: 145mm;
  padding: 22mm 18mm 20mm;
  flex-direction: column;
  justify-content: space-between;
}

.cover-logo {
  width: 62mm;
  max-height: 25mm;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 18%));
}

.cover-kicker {
  margin: 0 0 5mm;
  color: #f2d170;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.cover h1 {
  margin: 0;
  max-width: 130mm;
  font-size: 35px;
  line-height: 1.06;
}

.cover-subtitle {
  margin: 7mm 0 0;
  max-width: 120mm;
  color: #e6eceb;
  font-size: 17px;
  line-height: 1.5;
}

.cover-meta {
  display: flex;
  gap: 10mm;
  color: #d7e0de;
  font-size: 11px;
}

.contents { padding: 20mm 18mm; }

.section-kicker {
  margin: 0 0 4mm;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.contents h2, .showcase h2, .contact h2 {
  margin: 0 0 8mm;
  font-size: 30px;
  line-height: 1.1;
}

.contents-intro {
  max-width: 155mm;
  margin: 0 0 11mm;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 11mm;
}

.toc-item {
  display: grid;
  grid-template-columns: 9mm 1fr 8mm;
  align-items: baseline;
  min-height: 14mm;
  padding: 3mm 0;
  border-bottom: 1px solid var(--line);
}

.toc-index { color: var(--brand); font-size: 11px; font-weight: 700; }
.toc-name { font-size: 13px; font-weight: 700; }
.toc-page { color: var(--muted); font-size: 11px; text-align: right; }

.contents-note {
  position: absolute;
  right: 18mm;
  bottom: 20mm;
  left: 18mm;
  padding: 6mm;
  border-left: 3px solid var(--accent);
  background: var(--soft);
  color: #425256;
  font-size: 11px;
  line-height: 1.55;
}

.editorial-page { padding: 18mm; }

.editorial-page h2 {
  max-width: 165mm;
  margin: 0 0 7mm;
  font-size: 31px;
  line-height: 1.1;
}

.editorial-lead {
  max-width: 165mm;
  margin: 0 0 10mm;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.editorial-image {
  width: 100%;
  height: 105mm;
  object-fit: cover;
  background: var(--soft);
}

.editorial-columns {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 11mm;
  margin-top: 10mm;
}

.editorial-columns h3 { margin: 0 0 3mm; font-size: 17px; }
.editorial-columns p { margin: 0; color: #405155; font-size: 12px; line-height: 1.6; }

.value-grid, .service-area-grid, .application-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5mm;
}

.value-item, .service-area-item, .application-item {
  padding: 6mm;
  border: 1px solid var(--line);
  background: #fff;
}

.value-item strong, .service-area-item strong, .application-item strong {
  display: block;
  margin-bottom: 2mm;
  color: var(--ink);
  font-size: 14px;
}

.value-item span, .service-area-item span, .application-item span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.value-index {
  display: block;
  margin-bottom: 5mm;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
}

.service-area-item img, .application-item img {
  display: block;
  width: calc(100% + 12mm);
  height: 55mm;
  margin: -6mm -6mm 5mm;
  object-fit: cover;
}

.application-grid { gap: 4mm; }
.application-item img { height: 44mm; }

.product-family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5mm;
}

.product-family-item {
  min-height: 55mm;
  padding: 5mm;
  border-top: 3px solid var(--brand);
  background: var(--soft);
}

.product-family-item strong { display: block; margin-bottom: 3mm; font-size: 13px; }
.product-family-item span { color: var(--muted); font-size: 10px; line-height: 1.45; }

.reference-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5mm;
}

.reference-logo-item {
  display: flex;
  height: 39mm;
  align-items: center;
  justify-content: center;
  padding: 5mm;
  border: 1px solid var(--line);
  background: #fff;
}

.reference-logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

.product-page { padding: 15mm; }

.product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5mm;
  border-bottom: 1px solid var(--line);
}

.product-num { color: var(--brand); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.product-category { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }

.product-layout {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  height: 244mm;
  gap: 12mm;
  padding-top: 10mm;
}

.product-copy { display: flex; flex-direction: column; }

.product-copy h2 {
  margin: 0 0 6mm;
  font-size: 29px;
  line-height: 1.08;
}

.product-lead {
  margin: 0;
  color: #34464a;
  font-size: 14px;
  line-height: 1.55;
}

.feature-list {
  margin: 10mm 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  margin: 0;
  padding: 4mm 0 4mm 7mm;
  border-top: 1px solid var(--line);
  color: #304145;
  font-size: 12px;
  line-height: 1.45;
}

.feature-list li::before {
  content: "";
  position: absolute;
  top: 6mm;
  left: 0;
  width: 3mm;
  height: 3mm;
  background: var(--accent);
}

.usage {
  margin-top: auto;
  padding: 6mm;
  background: var(--ink);
  color: #fff;
}

.usage strong { display: block; margin-bottom: 2mm; color: #f2d170; font-size: 10px; text-transform: uppercase; }
.usage span { font-size: 12px; line-height: 1.45; }

.product-visual {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.product-image-wrap {
  display: flex;
  height: 174mm;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f1f3f2;
}

.product-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

.product-image-wrap.contain img { padding: 5mm; object-fit: contain; }

.visual-caption {
  margin: 3mm 0 0;
  color: #687679;
  font-size: 9px;
  line-height: 1.4;
}

.specs {
  display: grid;
  margin-top: 6mm;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.spec {
  min-height: 18mm;
  padding: 4mm;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.spec strong { display: block; margin-bottom: 1.5mm; color: var(--brand); font-size: 9px; text-transform: uppercase; }
.spec span { font-size: 10px; line-height: 1.35; }

.showcase { padding: 18mm; }

.showcase-intro {
  margin: -3mm 0 9mm;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
}

.showcase-item {
  overflow: hidden;
  border: 1px solid var(--line);
}

.showcase-item img {
  display: block;
  width: 100%;
  height: 37mm;
  object-fit: cover;
  background: var(--soft);
}

.showcase-item strong {
  display: flex;
  min-height: 11mm;
  align-items: center;
  padding: 3mm;
  font-size: 10px;
  line-height: 1.25;
}

.contact {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 22mm 18mm 18mm;
  background: #102326;
  color: #fff;
}

.contact h2 { max-width: 150mm; font-size: 36px; }
.contact-lead { max-width: 145mm; color: #d7e0de; font-size: 16px; line-height: 1.6; }

.contact-grid {
  display: grid;
  margin-top: 18mm;
  grid-template-columns: 1fr 1fr;
  gap: 7mm;
}

.contact-item { padding: 6mm 0; border-top: 1px solid #496064; }
.contact-item strong { display: block; margin-bottom: 2mm; color: #f2d170; font-size: 10px; text-transform: uppercase; }
.contact-item span, .contact-item a { color: #fff; font-size: 13px; line-height: 1.5; text-decoration: none; }
.contact-footer { display: flex; align-items: end; justify-content: space-between; color: #aebcba; font-size: 10px; }
.contact-footer img { width: 55mm; max-height: 22mm; object-fit: contain; object-position: right center; }

@media (max-width: 850px) {
  body { padding: 0; }
  .catalog { width: 100%; box-shadow: none; }
  .page { width: 100%; height: auto; min-height: 141.4vw; }
  .screen-tools { position: relative; top: 0; width: 100%; margin: 0; padding: 10px; background: #dfe5e3; }
}

@page { size: A4; margin: 0; }

@media print {
  html, body { background: #fff; }
  body { padding: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .screen-tools { display: none; }
  .catalog { margin: 0; box-shadow: none; }
}