@font-face {
  font-family: Inter;
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  src: url("fonts/inter-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Inter;
  src: url("fonts/inter-cyrillic-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
  color-scheme: light;
  --ink: #0d0d0d;
  --muted: #524c47;
  --paper: #fff;
  --warm: #f6f3f0;
  --edge: #e3dcd6;
  --brown: #382c25;
  --orange: #f9700c;
  --gutter: clamp(18px, 4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 18px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 1rem/1.55 Inter, system-ui, sans-serif;
}
h1, h2, h3, p, dd { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; }
button { font: inherit; }
[hidden] { display: none !important; }
:where(a, button):focus-visible { outline: 2px solid #994400; outline-offset: 4px; }

.skip {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  transform: translateY(calc(-100% - 20px));
  padding: 12px 16px;
  border-radius: 7px;
  color: #fff;
  background: var(--ink);
}
.skip:focus { transform: none; }
.shell { width: min(calc(100% - 2 * var(--gutter)), 1300px); margin-inline: auto; }

.site-header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px var(--gutter);
  background: #fff;
}
.brand { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; text-decoration: none; }
.brand img { width: 35px; height: auto; flex: none; }
.brand span { font-size: clamp(15px, 4.1vw, 23px); font-weight: 740; letter-spacing: -.045em; line-height: 1; }
.header-nav { display: none; }
.languages {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}
.languages :is(a, span) { display: grid; place-items: center; width: 44px; height: 44px; }
.languages a { color: #524942; text-decoration: none; }
.languages a:hover { text-decoration: underline; }
.languages [aria-current] { border-radius: 20px; background: var(--warm); color: var(--ink); }

.content-section { padding-block: clamp(56px, 8vw, 122px); }
.section-intro { max-width: 700px; }
.section-intro h2, .document h1 {
  font-size: clamp(31px, 5.3vw, 65px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.section-intro p { color: var(--muted); font-size: clamp(16px, 1.7vw, 20px); margin-top: 15px; }
.products { display: grid; gap: 12px; margin-top: 30px; }
.product {
  padding: clamp(21px, 3.4vw, 43px);
  border: 1px solid var(--edge);
  border-radius: clamp(16px, 2.4vw, 28px);
  background: var(--warm);
}
.product h3 { font-size: clamp(23px, 2.4vw, 36px); font-weight: 750; line-height: 1.12; letter-spacing: -.045em; }
.product-lead { margin-top: 8px; font-weight: 680; }
.product p:last-child { margin-top: 12px; color: var(--muted); }
.contacts { background: var(--warm); padding-block: clamp(52px, 7.5vw, 115px); }
.contact-layout { display: grid; gap: 28px; }
.details { display: grid; gap: 0; margin: 0; }
.details > div { padding-block: 12px; border-bottom: 1px solid #d9d0c8; }
.details dt { color: var(--muted); font-size: .875rem; }
.details dd { margin-top: 3px; font-weight: 650; overflow-wrap: anywhere; }
.placeholder { padding: .12em .36em; border-radius: 3px; color: #692c09; background: #ffe5cb; }

.site-footer { border-top: 1px solid var(--edge); padding-block: 26px; }
.footer-layout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px 24px; justify-content: space-between; }
.footer-brand { font-weight: 750; text-decoration: none; }
.site-footer nav { display: flex; flex-wrap: wrap; column-gap: 23px; color: var(--muted); font-size: .875rem; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }

.document { max-width: 760px; padding-block: clamp(38px, 7.6vw, 96px); }
.document h1 { margin-block: 15px 20px; font-size: clamp(28px, 5.4vw, 56px); }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); }
.draft { display: inline-block; border-radius: 7px; background: #ffe5cb; color: #692c09; padding: 8px 12px; font-weight: 700; }
.document section { margin-top: 28px; }
.document h2 { font-size: 1.24rem; letter-spacing: -.02em; }
.document :is(section p, section + p) { margin-top: 8px; color: var(--muted); }
.document section + p { margin-top: 24px; }
.document-contacts .details { margin-top: 10px; }

@media (min-width: 650px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .details > div { display: grid; grid-template-columns: minmax(135px, .85fr) minmax(0, 1.4fr); gap: 14px; align-items: baseline; }
}
@media (min-width: 960px) {
  .site-header { min-height: clamp(64px, 3.95vw, 78px); gap: clamp(16px, 3vw, 49px); padding: 0 clamp(25px, 3.1vw, 60px); }
  .brand { gap: clamp(8px, .66vw, 13px); flex: none; }
  .brand img { width: clamp(36px, 2.87vw, 56px); }
  .brand span { font-size: clamp(21px, 1.735vw, 33px); }
  .header-nav { display: flex; gap: clamp(16px, 3.4vw, 67px); margin-left: auto; white-space: nowrap; }
  .header-nav a { display: grid; align-items: center; min-height: 44px; text-decoration: none; font-weight: 540; font-size: clamp(13px, 1.077vw, 21px); }
  .header-nav a:hover { text-decoration: underline; }
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); }
}