/* styles.css */
/* AVK Systems — первый экран.
   Идея: техника как экспонат. Холодная светлая стена, скаллоп света над блоком,
   мягкая тень монтажа, под ним — объекты, для которых система производится. */

@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  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;
}

:root {
  --ink: #0c1838;
  --blue: #1f3c88;
  --orange: #fd5b03;
  --steel: #4f5b74;
  --wall-top: #ccd4de;
  --wall-mid: #dce2e9;
  --wall-low: #f4f6f9;
  --line: rgba(12, 24, 56, 0.14);
  --grid-line: rgba(31, 60, 136, 0.07);

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 88px;
  --uses-height: 180px;
  --uses-half: 90px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --temperature-roll-duration: 1.2s;
  --temperature-roll-ease: cubic-bezier(0.45, 0, 0.55, 1);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Jost", "Futura PT", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--wall-low);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid rgba(31, 60, 136, 0.42);
  outline-offset: 3px;
  border-radius: 6px;
}

[tabindex="-1"]:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Стена ---------- */

.first-screen {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--wall-top) 0%, var(--wall-mid) 38%, #e9edf1 68%, var(--wall-low) 100%);
}

/* Боковая виньетка — стена «уходит» в тень по краям */
.first-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 80% at 50% 38%, rgba(200, 209, 221, 0) 46%, rgba(184, 195, 210, 0.72) 100%);
}

/* Фактура окрашенной стены */
.first-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.09 0 0 0 0 0.2 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Сигнатура: скаллоп света от потолочного светильника над блоком */
.wall-light {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(1180px, 124vw);
  height: min(96vh, 900px);
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0) 94%);
  -webkit-mask-image: radial-gradient(30% 93% at 50% 100%, #000 74%, transparent 100%);
  mask-image: radial-gradient(30% 93% at 50% 100%, #000 74%, transparent 100%);
  animation: light-on 1.8s ease 0.05s both;
}

/* Мягкий рассеянный ореол вокруг пятна */
.wall-light::after {
  content: "";
  position: absolute;
  inset: -10% -20% 0;
  background: radial-gradient(34% 44% at 50% 28%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  -webkit-mask-image: none;
  mask-image: none;
}

/* Инженерная карта воздушных потоков: только верхняя зона, ниже растворяется */
.hero-air-grid {
  position: absolute;
  z-index: 2;
  top: var(--header-h);
  left: 50%;
  width: min(1720px, 118vw);
  height: clamp(260px, 37vh, 420px);
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  opacity: 0.82;
}

.hero-air-grid img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  animation: grid-in 1.8s var(--ease-out) 0.1s both;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 20;
}

.header-row {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  justify-self: start;
  display: inline-flex;
}

.brand img {
  width: 132px;
  height: auto;
}

.nav {
  display: flex;
  gap: clamp(12px, 1.45vw, 24px);
}

.nav a {
  position: relative;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding-block: 6px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.header-cta {
  justify-self: end;
}

.mobile-header-cta {
  display: none;
}

.menu-toggle {
  display: none;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle-bars,
.menu-toggle-bars::before {
  display: block;
  width: 16px;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  transition: transform 0.3s var(--ease-out);
}

.menu-toggle-bars {
  position: relative;
  transform: translateY(-3px);
}

.menu-toggle-bars::before {
  content: "";
  position: absolute;
  top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars {
  transform: translateY(0) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before {
  top: 0;
  transform: rotate(-90deg);
}

.mobile-nav {
  position: absolute;
  top: calc(var(--header-h) - 8px);
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  gap: 4px;
  max-height: calc(100dvh - var(--header-h) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(12, 24, 56, 0.35);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav a:not(.btn) {
  padding: 14px 12px;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.mobile-nav .btn {
  margin-top: 10px;
  justify-content: center;
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.btn-ghost {
  padding: 0 22px;
  border: 1px solid rgba(12, 24, 56, 0.22);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn-primary {
  padding: 6px 6px 6px 28px;
  min-height: 60px;
  font-size: 16px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 18px 36px -18px rgba(12, 24, 56, 0.55);
}

.btn-primary:hover {
  background: var(--blue);
}

.btn-chip {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  transition: transform 0.45s var(--ease-out);
}

.btn-primary:hover .btn-chip {
  transform: translateX(3px);
}

.action-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quiz-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 52px;
  padding: 6px 7px 6px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 16px 30px -20px rgba(12, 24, 56, 0.72);
  font: 600 14px/1.35 'Jost', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background-color .28s var(--ease-out), border-color .28s var(--ease-out), transform .28s var(--ease-out);
}

.quiz-cta:hover {
  border-color: var(--blue);
  background: var(--blue);
  transform: translateY(-1px);
}

.quiz-cta__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
}

.quiz-cta__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-quiet:has(.action-arrow),
.text-action:has(.action-arrow) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mobile-nav .btn-primary {
  padding: 0 24px;
  box-shadow: none;
}

.link-quiet {
  font-size: 15px;
  font-weight: 450;
  text-decoration: none;
  padding-block: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.45s var(--ease-out), color 0.3s;
}

.link-quiet:hover {
  color: var(--blue);
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: clamp(6px, 2.4vh, 34px);
}

/* Продукт смонтирован на стене по центральной оси */
.hero-unit {
  --unit-w: clamp(340px, min(58vw, 68vh), 740px);
  position: relative;
  z-index: 3;
  width: var(--unit-w);
  display: grid;
  grid-template-rows: auto 36px;
  perspective: 1200px;
  flex-shrink: 0;
}

/* Тихая орбита продукции: фокусный аппарат впереди, соседние уходят в глубину */
.product-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1798 / 882;
  transform-style: preserve-3d;
  animation: stage-in 1.4s var(--ease-out) 0.15s both;
}

.product-slide {
  --product-width: 100%;
  position: absolute;
  inset: -2% 0 0;
  margin: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(0, -8%, -260px) scale(0.52);
  transform-origin: 50% 54%;
  filter: blur(5px);
  pointer-events: none;
  transition:
    transform 1.15s var(--ease-out),
    opacity 0.85s ease,
    filter 0.95s ease;
  will-change: transform, opacity, filter;
}

.product-slide picture {
  display: contents;
}

.product-slide img {
  width: var(--product-width);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 26px rgba(16, 28, 60, 0.2)) drop-shadow(0 4px 5px rgba(16, 28, 60, 0.1));
}

.product-slide--wall {
  --product-width: 90%;
}

.product-slide--outdoor {
  --product-width: 72%;
}

.product-slide--outdoor img {
  mix-blend-mode: multiply;
}

.product-slide--two {
  --product-width: 88%;
}

.product-slide--three {
  --product-width: 82%;
}

.product-slide.is-active {
  z-index: 4;
  opacity: 1;
  transform: translate3d(0, 0, 90px) scale(1);
  filter: blur(0);
}

.product-slide.is-next {
  z-index: 2;
  opacity: 0;
  transform: translate3d(64%, 2%, -220px) rotateY(-16deg) scale(0.34);
  filter: blur(1.5px);
}

.product-slide.is-prev {
  z-index: 1;
  opacity: 0;
  transform: translate3d(-64%, 2%, -240px) rotateY(16deg) scale(0.32);
  filter: blur(2px);
}

.product-slide.is-far {
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, -9%, -280px) scale(0.5);
}

.product-controls {
  position: relative;
  z-index: 8;
  justify-self: center;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}

.product-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.product-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(31, 60, 136, 0.32);
  transition: width 0.45s var(--ease-out), background-color 0.35s ease;
}

.product-dot.is-active::before {
  width: 18px;
  border-radius: 999px;
  background: var(--orange);
}

/* Парные параметры микроклимата: слева постоянная влажность, справа —
   синхронная с оборудованием вертикальная лента температуры. */
.environment-facts {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 50%;
  width: min(1240px, calc(100vw - 64px));
  height: calc(100% - 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
  pointer-events: none;
}

.environment-fact {
  position: relative;
  width: 190px;
  min-height: 120px;
  color: var(--blue);
}

.environment-fact--humidity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  text-align: right;
}

.environment-fact--temperature {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  overflow: hidden;
}

.environment-scale-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.environment-scale {
  width: 28px;
  height: 120px;
  overflow: visible;
  color: rgba(31, 60, 136, 0.4);
}

.environment-scale use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.temperature-scale__viewport {
  display: block;
  width: 28px;
  height: 120px;
  overflow: hidden;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.temperature-scale__track {
  display: block;
  width: 28px;
  height: 360px;
  transform: translateY(-120px);
  will-change: transform;
}

.temperature-scale__track.is-shifting {
  animation: temperature-scale-roll var(--temperature-roll-duration) var(--temperature-roll-ease) both;
}

.environment-fact__copy {
  min-width: 0;
}

.environment-fact__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  color: var(--blue);
}

.environment-fact__weather {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  margin-bottom: 7px;
}

.environment-fact__weather svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.environment-fact__weather svg:first-child {
  color: var(--orange);
}

.environment-fact__weather i {
  width: 18px;
  height: 1px;
  background: rgba(31, 60, 136, 0.3);
}

.environment-fact__eyebrow {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.environment-fact__value {
  display: block;
  margin-top: 3px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.environment-fact__note {
  display: block;
  max-width: 15em;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.25;
  color: var(--steel);
}

.environment-fact__disclaimer {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  line-height: 1.2;
  color: rgba(79, 91, 116, 0.72);
}

.temperature-fact__viewport {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.temperature-fact__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(-100%);
  filter: blur(2px);
  transition:
    transform var(--temperature-roll-duration) var(--temperature-roll-ease),
    opacity 0.65s ease,
    filter 0.8s ease;
  will-change: transform, opacity, filter;
}

.temperature-fact__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.temperature-fact__slide.is-prev {
  transform: translateY(100%);
}

/* Контактная тень на стене под блоком */
.unit-shadow {
  position: absolute;
  z-index: -1;
  left: 12%;
  right: 6%;
  bottom: 18px;
  height: 32%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 32, 66, 0.2), rgba(20, 32, 66, 0));
  filter: blur(10px);
  animation: fade-in 1.6s ease 0.6s both;
}

/* Текст */
.hero-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--gutter);
  margin-top: clamp(28px, 4.4vh, 56px);
  flex-shrink: 0;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  animation: rise 1s var(--ease-out) 0.4s both;
}

.kicker-mark {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.hero-title {
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  font-size: clamp(40px, min(6.4vw, 10.4vh), 100px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-weight: 500;
  text-wrap: balance;
  animation: rise 1.1s var(--ease-out) 0.5s both;
}

.title-light {
  font-weight: 300;
  color: var(--blue);
}

.hero-lead {
  max-width: 40em;
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--steel);
  text-wrap: balance;
  animation: rise 1.1s var(--ease-out) 0.6s both;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: clamp(20px, 3.2vh, 34px);
  animation: rise 1.1s var(--ease-out) 0.7s both;
}

/* Назначение: единая лента-триптих, раскрывается по наведению */
.uses-bridge {
  display: contents;
}

.uses {
  position: relative;
  z-index: 4;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--container) - 2 * var(--gutter));
  margin: clamp(24px, 4vh, 48px) 0 clamp(20px, 3vh, 32px);
  display: flex;
  gap: 3px;
  height: var(--uses-height);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 32px -28px rgba(12, 24, 56, 0.24);
  animation: rise 1.2s var(--ease-out) 0.85s both;
  flex-shrink: 0;
}

.use {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
  cursor: default;
  transition: flex-grow 0.8s var(--ease-out);
}

.use img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  filter: saturate(0.86) contrast(1.03);
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out), filter 0.8s ease;
}

.use::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 16, 38, 0.92) 0%, rgba(8, 16, 38, 0.6) 38%, rgba(8, 16, 38, 0) 82%);
}

.use-caption {
  position: absolute;
  z-index: 1;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(16px, 1.8vw, 22px);
  display: grid;
  gap: 2px;
}

.use-title {
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.use-text {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.use-preview-copy { display: none; }

/* Активный кадр чистый, его подпись занимает соседнюю карточку. */
@media (min-width: 1024px) {
  .uses-preview-focus .uses { --uses-title-size: clamp(11px, 1.08vw, 15px); }
  .uses-preview-focus .uses.is-previewing .use { flex-grow: 0.95; }
  .uses-preview-focus .uses.is-previewing .use.is-preview-active { flex-grow: 1.8; }
  .uses-preview-focus .uses.is-previewing .use.is-preview-neighbor {
    flex-grow: 1.3;
    background: linear-gradient(125deg, #304d82 0%, #1d3565 52%, #101e3f 100%);
    background-size: 190% 190%;
    animation: usePanelDrift 9s ease-in-out infinite alternate;
  }

  .uses-preview-focus .use-caption {
    left: clamp(8px, 1vw, 14px);
    right: clamp(8px, 1vw, 14px);
    bottom: 18px;
  }

  .uses-preview-focus .use-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--uses-title-size);
    font-weight: 600;
    line-height: 1.25;
  }

  .uses-preview-focus .uses:not(.is-previewing) .use-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(12px, 0.95vw, 13px);
  }

  .uses-preview-focus .use.is-preview-active img {
    filter: saturate(1) contrast(1.03);
    transform: scale(1.035);
  }

  .uses-preview-focus .use.is-preview-active::after,
  .uses-preview-focus .use.is-preview-active .use-caption,
  .uses-preview-focus .use.is-preview-neighbor::after,
  .uses-preview-focus .use.is-preview-neighbor .use-caption,
  .uses-preview-focus .use.is-preview-neighbor img { opacity: 0; }

  .uses-preview-focus .uses.is-previewing .use-text { display: none; }
  .uses-preview-focus .use.is-preview-active .use-caption,
  .uses-preview-focus .use.is-preview-neighbor .use-caption { transition: none; }

  .uses-preview-focus .use img,
  .uses-preview-focus .use::after,
  .uses-preview-focus .use-caption { transition: opacity 0.32s ease, transform 1.2s var(--ease-out), filter 0.8s ease; }

  .uses-preview-focus .use.is-preview-neighbor .use-preview-copy {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding: 18px clamp(10px, 1.2vw, 16px);
    color: #fff;
    pointer-events: none;
  }

  .uses-preview-focus .use-preview-icon {
    position: absolute;
    top: 16px;
    left: clamp(10px, 1.2vw, 16px);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.9);
  }

  .uses-preview-focus .use-preview-icon svg { width: 22px; height: 22px; }

  .uses-preview-focus .use-preview-copy__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--uses-title-size);
    font-weight: 600;
    line-height: 1.25;
  }

  .uses-preview-focus .use-preview-copy__text {
    white-space: normal;
    font-size: clamp(12px, 0.95vw, 13px);
    line-height: 1.28;
    color: rgba(255, 255, 255, 0.84);
  }

  @keyframes usePanelDrift {
    from { background-position: 0% 25%; }
    to { background-position: 100% 75%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .uses-preview-focus .uses.is-previewing .use.is-preview-neighbor { animation: none; }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .uses-preview-focus .use.is-preview-neighbor .use-preview-copy { padding-block: 12px; gap: 3px; }
  .uses-preview-focus .use-preview-icon { top: 10px; width: 28px; height: 28px; }
  .uses-preview-focus .use-preview-icon svg { width: 18px; height: 18px; }
  .uses-preview-focus .use-preview-copy__text { line-height: 1.2; }
}

@media (min-width: 1024px) and (max-height: 680px) {
  .uses-preview-focus .use.is-preview-neighbor .use-preview-copy { padding-block: 6px; gap: 2px; }
  .uses-preview-focus .use-preview-icon { display: none; }
  .uses-preview-focus .use-preview-copy__text { line-height: 1.14; }
}

@media (min-width: 1024px) and (hover: hover) {
  .uses:hover .use {
    flex-grow: 0.85;
  }

  .uses .use:hover {
    flex-grow: 1.45;
  }

  .use:hover img {
    transform: scale(1.06);
    filter: saturate(1) contrast(1.03);
  }
}

.use:focus-visible {
  outline-offset: -4px;
  border-radius: 0;
}

/* Планшет и десктоп: свободная высота равномерно расходится между тремя уровнями */
@media (min-width: 761px) {
  .first-screen {
    min-height: calc(100svh - var(--uses-half) - 28px);
  }

  .hero {
    padding-top: clamp(4px, 1.5vh, 20px);
    padding-bottom: calc(var(--uses-half) + 28px);
    justify-content: space-between;
  }

  .hero-unit {
    translate: 0 20px;
  }

  .hero-copy {
    margin-top: 0;
  }

  .uses {
    left: 50%;
    margin-block: 0;
    margin-inline: 0;
    translate: -50% -50%;
    margin-bottom: calc(0px - var(--uses-height));
  }
}

/* Десктоп: компактный масштаб без потери вертикального ритма */
@media (min-width: 981px) {

  .hero-unit {
    --unit-w: clamp(360px, min(52vw, 60vh), 680px);
  }

  .hero-title {
    font-size: clamp(40px, min(5.7vw, 8.6vh), 86px);
  }

  .hero-lead {
    margin-top: clamp(12px, 1.6vh, 18px);
  }

  .hero-actions {
    margin-top: clamp(18px, 2.2vh, 26px);
  }

}

/* Средняя высота десктопа: сохраняем карточки 180 px, уплотняем только экспонат. */
@media (min-width: 981px) and (max-height: 950px) {
  .hero {
    gap: 12px;
    padding-top: 8px;
  }

  .hero-unit {
    --unit-w: clamp(360px, min(52vw, 58vh), 640px);
    translate: 0 10px;
  }
}

/* Низкие ноутбучные экраны: заранее уплотняем композицию,
   чтобы переходная лента целиком оставалась в первом viewport. */
@media (min-width: 761px) and (max-height: 820px) {
  :root {
    --header-h: 76px;
    --uses-height: 150px;
    --uses-half: 75px;
  }

  .brand img {
    width: 120px;
  }

  .hero {
    padding-top: 6px;
    padding-bottom: 101px;
  }

  .hero-unit {
    --unit-w: clamp(330px, min(48vw, 50vh), 560px);
    grid-template-rows: auto 32px;
    translate: 0 12px;
  }

  .hero-copy {
    margin-top: 0;
  }

  .hero-title {
    font-size: clamp(38px, min(5.4vw, 7.8vh), 78px);
  }

  .hero-lead {
    margin-top: 8px;
  }

  .hero-actions {
    margin-top: 12px;
  }

  .btn-primary {
    min-height: 52px;
  }

  .btn-chip {
    width: 40px;
    height: 40px;
  }

}

/* Очень низкая альбомная высота: масштабируем, но никогда не схлопываем слои */
@media (min-width: 761px) and (max-height: 680px) {
  :root {
    --header-h: 64px;
    --uses-height: 110px;
    --uses-half: 55px;
  }

  .brand img {
    width: 106px;
  }

  .hero {
    gap: 12px;
    padding-top: 6px;
    padding-bottom: 79px;
  }

  .hero-unit {
    --unit-w: clamp(280px, min(46vw, 46vh), 480px);
    grid-template-rows: auto 30px;
    translate: 0 8px;
  }

  .kicker {
    font-size: 11px;
  }

  .hero-title {
    font-size: clamp(32px, min(4.8vw, 6.5vh), 58px);
  }

  .hero-lead {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.35;
  }

  .hero-actions {
    margin-top: 8px;
  }

  .btn-primary {
    min-height: 48px;
    font-size: 15px;
  }

  .btn-chip {
    width: 36px;
    height: 36px;
  }

}

/* ---------- Анимации ---------- */

@keyframes stage-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes light-on {
  0% { opacity: 0; }
  35% { opacity: 0.55; }
  45% { opacity: 0.35; }
  100% { opacity: 1; }
}

@keyframes grid-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes temperature-scale-roll {
  0% {
    transform: translateY(-120px);
  }
  76% {
    transform: translateY(3px);
  }
  90% {
    transform: translateY(-1.5px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes temperature-scale-roll-tablet {
  0% {
    transform: translateY(-108px);
  }
  76% {
    transform: translateY(2.5px);
  }
  90% {
    transform: translateY(-1.25px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes temperature-scale-roll-mobile {
  0% {
    transform: translateY(-68px);
  }
  76% {
    transform: translateY(2px);
  }
  90% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ---------- Адаптив ---------- */

@media (1024px <= width < 1200px) {
  .header-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .brand img { width: 110px; }
  .nav { justify-content: center; gap: clamp(7px, 0.9vw, 11px); }
  .nav a { font-size: 12px; white-space: nowrap; }
  .header-cta { padding-inline: 14px; font-size: 13px; }
}

@media (width < 1024px) {
  .nav { display: none; }

  .header-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
  }

  .menu-toggle {
    display: block;
  }
}

@media (max-width: 980px) {

  .product-slide.is-next,
  .product-slide.is-prev {
    opacity: 0;
  }

  .environment-facts {
    width: calc(100vw - 32px);
  }

  .environment-fact {
    width: 144px;
    min-height: 112px;
  }

  .environment-fact--humidity {
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 8px;
  }

  .environment-fact--temperature {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
  }

  .environment-scale,
  .temperature-scale__viewport {
    width: 22px;
    height: 108px;
  }

  .temperature-scale__track {
    width: 22px;
    height: 324px;
    transform: translateY(-108px);
  }

  .temperature-scale__track.is-shifting {
    animation-name: temperature-scale-roll-tablet;
  }

  .temperature-fact__viewport {
    height: 112px;
  }

  .environment-fact__value {
    font-size: 18px;
  }

  .environment-fact__note {
    font-size: 10px;
  }

  .environment-fact__note,
  .environment-fact__disclaimer {
    display: none;
  }
}

/* Планшет: карточки читаются в прокручиваемой ленте, с явной навигацией. */
@media (761px <= width < 1024px) {
  .mobile-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }

  .mobile-nav a:not(.btn) {
    padding-block: 12px;
    font-size: 15px;
  }

  .mobile-nav .btn { grid-column: 1 / -1; }

  .uses-bridge {
    position: relative;
    display: block;
    height: calc(var(--uses-half) + 68px);
  }

  .uses {
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--container) - 2 * var(--gutter));
    margin: 0;
    margin-bottom: 0;
    gap: 12px;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .uses::-webkit-scrollbar { display: none; }

  .use {
    flex: 0 0 calc((100% - 12px) / 1.7);
    border-radius: 18px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .uses-bridge > .mobile-rail-nav:not([hidden]) {
    position: absolute;
    top: calc(var(--uses-half) + 12px);
    left: 50%;
    width: min(400px, calc(100% - 2 * var(--gutter)));
    margin: 0;
    translate: -50% 0;
  }
}

@media (width < 761px) {
  :root {
    --header-h: 72px;
  }

  html,
  body {
    overflow-x: clip;
  }

  html {
    scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 16px);
  }

  section[id] {
    scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top) + 16px);
  }

  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 90;
    padding-top: env(safe-area-inset-top);
    border-bottom: 1px solid rgba(31, 60, 136, .1);
    background: #eff4f9;
    box-shadow: 0 12px 30px -24px rgba(8, 24, 58, .65);
  }

  .header-row {
    grid-template-columns: minmax(88px, 1fr) auto auto;
    gap: 8px;
  }

  .header-cta { display: none; }

  .mobile-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .mobile-nav {
    top: calc(var(--header-h) + env(safe-area-inset-top) - 8px);
  }

  /* Mobile first paint must not wait for decorative entrance delays. Product
     switching and the live temperature scale keep their own animations. */
  .wall-light,
  .hero-air-grid img,
  .product-stage,
  .unit-shadow,
  .kicker,
  .hero-title,
  .hero-lead,
  .hero-actions,
  .uses {
    animation: none;
  }

  .first-screen {
    z-index: 50;
    min-height: 0;
    overflow: visible;
    padding-top: calc(var(--header-h) + env(safe-area-inset-top));
  }

  /* Header lives inside the first-screen stacking context. Raise that whole
     context while its menu is open so the overlap rail can never cover it. */
  .first-screen.is-mobile-nav-open {
    z-index: 80;
  }

  body.is-mobile-nav-open {
    overflow: hidden;
  }

  .brand img {
    width: 100px;
  }

  .wall-light {
    width: 190vw;
    height: 640px;
  }

  .hero-air-grid {
    width: 180vw;
    height: 260px;
    opacity: 0.64;
  }

  .hero {
    padding-top: 14px;
    /* Верхняя половина ленты + видимый отступ после обеих кнопок. */
    padding-bottom: calc(var(--uses-half) + 32px);
  }

  .hero-unit {
    --unit-w: min(86vw, 440px);
    grid-template-rows: auto 36px auto;
    perspective: none;
  }

  .product-stage {
    transform-style: flat;
  }

  .product-slide,
  .product-slide.is-next,
  .product-slide.is-prev,
  .product-slide.is-far {
    inset: 0;
    transform: translateY(-3%) scale(0.96);
    filter: none;
  }

  .product-slide.is-active {
    transform: none;
    filter: none;
  }

  /* На мобильных тяжёлая drop-shadow вместе с 3D-слоем обрезалась по
     нижней границе сцены и давала горизонтальный шов только у высоких
     изображений. Мягкую контактную тень уже рисует .unit-shadow. */
  .product-slide img {
    filter: none;
  }

  .product-controls {
    grid-row: 2;
  }

  .environment-facts {
    position: relative;
    top: auto;
    left: auto;
    grid-row: 3;
    justify-self: center;
    width: min(480px, calc(100vw - 32px));
    height: 76px;
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    transform: none;
  }

  .environment-fact {
    width: auto;
    min-height: 76px;
  }

  .environment-fact--humidity {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 8px;
  }

  .environment-fact--temperature {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
  }

  .environment-scale,
  .temperature-scale__viewport {
    width: 20px;
    height: 68px;
  }

  .temperature-scale__track {
    width: 20px;
    height: 204px;
    transform: translateY(-68px);
  }

  .temperature-scale__track.is-shifting {
    animation-name: temperature-scale-roll-mobile;
  }

  .environment-fact__icon {
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
  }

  .environment-fact__weather {
    height: 18px;
    margin-bottom: 2px;
  }

  .environment-fact__weather svg {
    width: 16px;
    height: 16px;
  }

  .environment-fact__weather i {
    width: 10px;
  }

  .environment-fact__eyebrow {
    font-size: 8px;
  }

  .environment-fact__value {
    font-size: 17px;
  }

  .environment-fact__note {
    display: none;
  }

  .environment-fact__disclaimer {
    display: none;
  }

  .temperature-fact__viewport {
    height: 76px;
  }

  /* Shared rows for both readouts, even when a temperature label wraps. */
  .environment-fact__copy {
    display: grid;
    grid-template-rows: 22px 20px 22px;
    row-gap: 3px;
    width: 100%;
  }

  .environment-fact__icon,
  .environment-fact__weather {
    grid-row: 1;
    align-self: center;
    height: 22px;
    margin: 0;
  }

  .environment-fact__icon {
    justify-self: end;
    width: 22px;
    display: block;
  }

  .environment-fact__weather svg {
    width: 20px;
    height: 20px;
  }

  .environment-fact__eyebrow {
    grid-row: 2;
    align-self: end;
    margin: 0;
  }

  .environment-fact__value {
    grid-row: 3;
    align-self: start;
    margin: 0;
    line-height: 22px;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
    margin-top: 30px;
  }

  .kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .hero-title {
    font-size: clamp(38px, 11.4vw, 56px);
    line-height: 1;
  }

  .title-strong,
  .title-light {
    display: block;
  }

  .hero-actions {
    flex-direction: column;
    align-self: stretch;
    gap: 16px;
  }

  .btn-primary {
    justify-content: space-between;
    width: 100%;
  }

  .hero-actions .btn-primary {
    white-space: normal;
    text-align: left;
  }

  .hero-actions .btn-chip {
    flex-shrink: 0;
  }

  .uses-bridge {
    position: relative;
    /* Лента перекрывает нижнюю границу hero; её верхняя половина не должна
       уходить под stacking context первого экрана (z-index: 50). */
    z-index: 60;
    display: block;
    height: 0;
  }

  .uses {
    left: auto;
    width: 100%;
    max-width: none;
    height: var(--uses-height);
    margin: 0;
    translate: 0 -50%;
    padding: 0 var(--gutter);
    display: flex;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    gap: 12px;
    scrollbar-width: none;
  }

  .uses-bridge > .mobile-rail-nav:not([hidden]) {
    position: absolute;
    top: calc(var(--uses-half) + 12px);
    right: var(--gutter);
    left: var(--gutter);
    width: auto;
    margin: 0;
  }

  .uses::-webkit-scrollbar {
    display: none;
  }

  .use {
    /* С учётом отступов и gap следующая карточка начинается на 80% экрана. */
    flex: 0 0 calc(80% + var(--gutter) * 0.6 - 12px);
    height: 100%;
    border-radius: 18px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .use-caption {
    bottom: 16px;
    left: 18px;
    right: 18px;
  }

  .use-title {
    font-size: 18px;
  }

  .use-text {
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 360px) {
  .hero-actions .btn-primary {
    min-height: 56px;
    gap: 8px;
    padding-left: 18px;
    font-size: 13.5px;
  }

  .hero-actions .btn-chip {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* blocks/mobile-rail/rail.css */
/* Общее управление мобильными лентами: стрелки, позиция, свайп. */
.mobile-rail-nav {
  display: none;
}

@media (width < 1024px) {
  .mobile-rail-nav:not([hidden]) {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
  }

  .mobile-rail-nav__button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--blue);
    cursor: pointer;
  }

  .mobile-rail-nav__button:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .mobile-rail-nav__button:not(:disabled):active {
    background: #e7edf5;
  }

  .mobile-rail-nav__segments {
    display: flex;
    gap: 6px;
  }

  .mobile-rail-nav__segment {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(31, 60, 136, 0.16);
  }

  .mobile-rail-nav__segment.is-active {
    background: var(--orange);
  }
}

/* blocks/screen-02/series.css */
/* SCREEN 02 — продуктовая линейка AVK.
   Стили изолированы корневым классом .series-section, чтобы блок можно было
   переносить по странице без влияния на первый экран и будущие модули. */

.series-section {
  --section-number: "02";
  position: relative;
  isolation: isolate;
  scroll-margin-top: 24px;
  overflow: hidden;
  padding: clamp(76px, 8vw, 118px) 0 clamp(72px, 8vw, 112px);
  background: #f8fafc;
}

.series-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 50% 0 / 96px 96px,
    linear-gradient(var(--grid-line) 1px, transparent 1px) 50% 0 / 96px 96px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 46%);
  mask-image: linear-gradient(to bottom, #000 0, transparent 46%);
}

.series-section__heading,
.series-section__intro {
  position: relative;
  isolation: isolate;
}

/* The number belongs to the copy, not the full section (including its bridge). */
.series-section__heading::after,
.series-section__intro::after {
  content: var(--section-number);
  position: absolute;
  z-index: -1;
  top: 44px;
  right: 0;
  font-size: clamp(150px, 18vw, 290px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.08em;
  color: rgba(31, 60, 136, 0.035);
  pointer-events: none;
}

.series-section__heading::after {
  display: none;
}

.series-section__inner {
  position: relative;
}

.series-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.72fr);
  align-items: start;
  gap: clamp(36px, 7vw, 92px);
  margin-bottom: clamp(38px, 5vw, 62px);
}

.series-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.series-section__eyebrow span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 26px;
  border: 1px solid rgba(31, 60, 136, 0.22);
  border-radius: 999px;
  color: var(--orange);
  letter-spacing: 0.08em;
}

.series-section__heading h2 {
  max-width: 13em;
  margin: 0;
  font-size: clamp(40px, 5.2vw, 70px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.series-section__heading em {
  display: block;
  margin-top: 0.08em;
  font-weight: 300;
  font-style: normal;
  color: var(--blue);
}

.series-section__intro {
  padding-top: 44px;
}

.series-section__intro p {
  max-width: 36em;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--steel);
}

.series-section__intro span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
}

.series-section__intro span::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--orange);
}

.series-engineering-note {
  display: grid;
  grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1.58fr);
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin-bottom: 18px;
  padding: 22px clamp(22px, 3vw, 34px);
  border: 1px solid rgba(31, 60, 136, 0.14);
  border-radius: 22px;
  background: #edf3f9;
}

.series-engineering-note > span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.series-engineering-note h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.series-engineering-note p {
  max-width: 68em;
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
}

.series-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(12, 24, 56, 0.1);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.72);
}

.series-tab {
  position: relative;
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  color: var(--steel);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.series-tab span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(12, 24, 56, 0.14);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.series-tab strong {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.series-tab i {
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 2px;
  overflow: hidden;
  background: rgba(12, 24, 56, 0.08);
}

.series-tab i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: translateX(-102%);
  transition: transform 0.42s var(--ease-out);
}

.series-tab.is-active {
  color: var(--ink);
  background: #eef3f8;
}

.series-tab.is-active span {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.series-tab.is-active i::after {
  transform: translateX(0);
}

.series-showcase {
  position: relative;
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
  overflow: hidden;
  border: 1px solid rgba(12, 24, 56, 0.1);
  border-radius: 0 0 30px 30px;
  background: #fff;
  box-shadow: 0 30px 74px -52px rgba(12, 24, 56, 0.48);
}

.series-showcase[hidden] {
  display: none;
}

.series-showcase.is-entering {
  animation: series-panel-in 0.56s var(--ease-out) both;
}

.series-showcase__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(34px, 3.2vw, 46px);
}

.series-showcase__tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid rgba(31, 60, 136, 0.16);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  background: #f7f9fc;
}

.series-showcase__copy h3 {
  margin: 18px 0 0;
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.series-showcase__copy > p {
  max-width: 36em;
  margin: 17px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--steel);
}

.series-showcase__copy ul {
  width: 100%;
  margin: 20px 0 0;
  padding: 18px 0 0;
  display: grid;
  gap: 9px;
  list-style: none;
  border-top: 1px solid rgba(12, 24, 56, 0.1);
}

.series-showcase__copy li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.35;
  color: #34405b;
}

.series-showcase__copy li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--orange);
  border-radius: 50%;
}

.series-showcase__note {
  max-width: 38em;
  margin-top: 12px;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(79, 91, 116, 0.78);
}

.series-showcase__cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex: 0 0 auto;
  margin-top: 30px;
  padding: 13px 17px 13px 22px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 16px 28px -20px rgba(12, 24, 56, 0.72);
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s ease;
}

.series-showcase__cta span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
}

.series-showcase__media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: linear-gradient(145deg, #f8fafc 0%, #e6ecf3 100%);
  border-left: 1px solid rgba(12, 24, 56, 0.08);
}

.series-showcase__media::before,
.series-showcase__media::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.series-showcase__media::before {
  width: min(68%, 420px);
  height: auto;
  aspect-ratio: 1;
  top: 50%;
  left: 55%;
  border: 1px solid rgba(31, 60, 136, 0.1);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  background-image:
    linear-gradient(90deg, rgba(31, 60, 136, 0.17) 1px, transparent 1px),
    linear-gradient(rgba(31, 60, 136, 0.17) 1px, transparent 1px);
  background-position: center;
  background-size: 34px 34px;
  box-shadow:
    0 0 0 56px rgba(31, 60, 136, 0.026),
    0 0 0 112px rgba(31, 60, 136, 0.018);
  transform: translate(-50%, -50%);
}

.series-showcase__media::after {
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(90deg, rgba(31, 60, 136, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(31, 60, 136, 0.12) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(135deg, transparent 12%, #000 56%, transparent 92%);
  mask-image: linear-gradient(135deg, transparent 12%, #000 56%, transparent 92%);
}

.series-showcase__number {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(31, 60, 136, 0.58);
}

.series-product {
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

.series-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 22px rgba(19, 34, 70, 0.19));
}

.series-product figcaption {
  position: absolute;
  z-index: 3;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(31, 60, 136, 0.15);
  border-left: 2px solid var(--orange);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px -18px rgba(12, 24, 56, 0.8);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}

.series-product--indoor {
  top: 68px;
  right: 8%;
  width: 62%;
  height: 36%;
}

.series-product--indoor figcaption {
  right: 5%;
  bottom: -2px;
}

.series-product--wall {
  top: 64px;
  width: 64%;
}

.series-product--two {
  top: 72px;
  width: 62%;
  height: 36%;
}

.series-product--three {
  top: 72px;
  width: 60%;
  height: 36%;
}

.series-product--outdoor {
  bottom: 28px;
  left: 7%;
  width: 45%;
  height: 45%;
}

.series-product--outdoor img {
  mix-blend-mode: multiply;
}

.series-product--outdoor-ipro {
  width: 48%;
  height: 48%;
}

.series-product--outdoor-ipro img {
  mix-blend-mode: normal;
}

.series-product--outdoor figcaption {
  left: 8%;
  bottom: 2px;
}

.series-product--display {
  z-index: 3;
  right: auto;
  bottom: 24%;
  left: 62%;
  width: 18%;
  height: 21%;
  display: grid;
  place-items: center;
}

.series-product--display img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 12px rgba(12, 24, 56, 0.2));
}

.series-product--display figcaption {
  right: 50%;
  bottom: -4px;
  transform: translateX(50%);
}

.series-product--monitoring {
  z-index: 3;
  right: auto;
  bottom: 6%;
  left: 62%;
  width: 16%;
  height: 15%;
}

.series-product--monitoring img {
  filter: drop-shadow(0 12px 16px rgba(12, 24, 56, 0.18));
}

.series-product--monitoring figcaption {
  right: 50%;
  bottom: -4px;
  transform: translateX(50%);
}

.series-config {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 64px);
  margin-top: 18px;
  padding: clamp(28px, 3.5vw, 42px);
  border: 1px solid rgba(12, 24, 56, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
}

.series-config__copy {
  align-self: center;
}

.series-config__copy > span {
  display: block;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.series-config__copy h3 {
  max-width: 16em;
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.series-config__copy p {
  max-width: 39em;
  margin: 15px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
}

.series-config__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.series-config__carousel {
  min-width: 0;
}

.config-card {
  min-width: 0;
  margin: 0;
  padding: 12px 12px 15px;
  border: 1px solid rgba(12, 24, 56, 0.1);
  border-radius: 16px;
  background: #fff;
}

.config-card > div {
  height: 102px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: #eef2f7;
}

.config-card img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(12, 24, 56, 0.16));
}

.config-card h4 {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.config-card p {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--steel);
}

@media (hover: hover) {
  .series-tab:hover {
    color: var(--ink);
    background: rgba(246, 249, 253, 0.82);
  }

  .series-tab:hover span {
    border-color: rgba(31, 60, 136, 0.42);
  }

  .series-showcase__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px -20px rgba(12, 24, 56, 0.78);
  }
}

.series-section.is-observed [data-series-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.series-section.is-observed [data-series-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.8s var(--ease-out);
}

.series-section.is-observed .series-tabs.is-visible {
  transition-delay: 0.08s;
}

.series-section.is-observed .series-panels.is-visible {
  transition-delay: 0.14s;
}

.series-section.is-observed .series-config.is-visible {
  transition-delay: 0.18s;
}

@keyframes series-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .series-section__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .series-section__heading h2 {
    max-width: 15em;
  }

  .series-section__intro::after {
    display: none;
  }

  .series-section__heading::after {
    display: block;
    top: 26px;
    font-size: clamp(140px, 34vw, 190px);
  }

  .series-section__intro {
    max-width: 620px;
    padding-top: 0;
  }

  .series-tabs {
    padding-inline: 0;
  }

  .series-tab {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    min-height: 70px;
    padding-inline: 10px;
  }

  .series-tab span {
    width: 30px;
    height: 30px;
  }

  .series-showcase {
    grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr);
    min-height: 470px;
  }

  .series-showcase__copy {
    padding: 36px 30px;
  }

  .series-showcase__copy h3 {
    font-size: 40px;
  }

  .series-config {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .series-section {
    padding: 64px 0 72px;
  }

  .series-section__head {
    margin-bottom: 32px;
  }

  .series-section__heading h2 {
    font-size: clamp(36px, 11vw, 52px);
  }

  .series-section__intro p {
    font-size: 15px;
  }

  .series-engineering-note {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px;
    border-radius: 18px;
  }

  .series-engineering-note h3 {
    font-size: 23px;
  }

  .series-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border-bottom: 1px solid rgba(12, 24, 56, 0.1);
    border-radius: 18px 18px 0 0;
  }

  .series-tab {
    min-height: 56px;
    padding-inline: 12px;
    border-radius: 0;
  }

  .series-tab strong {
    font-size: 13px;
  }

  .series-tab i {
    right: 8px;
    left: 8px;
  }

  .series-showcase {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 0 0 22px 22px;
  }

  .series-showcase__copy {
    min-height: 448px;
    padding: 30px 24px;
  }

  .series-showcase__copy h3 {
    margin-top: 18px;
    font-size: 38px;
  }

  .series-showcase__copy > p {
    margin-top: 16px;
    font-size: 15px;
  }

  .series-showcase__copy ul {
    margin-top: 20px;
    padding-top: 18px;
  }

  .series-showcase__cta {
    width: 100%;
    justify-content: space-between;
    margin-top: 28px;
  }

  .series-showcase__media {
    min-height: 330px;
    border-top: 1px solid rgba(12, 24, 56, 0.08);
    border-left: 0;
  }

  .series-product--indoor {
    top: 42px;
    right: 5%;
    width: 64%;
    height: 37%;
  }

  .series-product--outdoor {
    bottom: 20px;
    left: 5%;
    width: 46%;
    height: 46%;
  }

  .series-product--display {
    right: auto;
    bottom: 44px;
    left: 58%;
    width: 17%;
    height: 20%;
  }

  .series-product--monitoring {
    right: 3%;
    bottom: 44px;
    left: auto;
    width: 18%;
    height: 17%;
  }

  .series-config {
    padding: 26px 20px;
  }

  .series-config__grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(224px, 82%);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    padding-bottom: 8px;
  }

  .config-card {
    scroll-snap-align: start;
  }
}

/* Лента заходит на этот блок на половину своей высоты. Отступ нужен после
   фактического края карточек, включая узкие планшеты 761–820 px. */
@media (min-width: 761px) {
  .uses-bridge + .series-section {
    padding-top: max(clamp(76px, 8vw, 118px), calc(var(--uses-half) + 44px));
  }
}

@media (max-width: 760px) {
  .series-product__option-suffix {
    display: none;
  }

  /* Нижняя половина ленты, стрелки под ней и отступ до заголовка. */
  .uses-bridge + .series-section {
    padding-top: calc(var(--uses-half) + 12px + 44px + 32px);
  }
}

@media (max-width: 420px) {
  .series-section__eyebrow {
    font-size: 10px;
  }

  .series-tab {
    grid-template-columns: 27px minmax(0, 1fr);
    min-height: 54px;
  }

  .series-tab span {
    width: 27px;
    height: 27px;
  }

  .series-showcase__copy {
    min-height: 470px;
    padding: 26px 20px;
  }

  .series-showcase__copy h3 {
    font-size: 34px;
  }

  .series-showcase__media {
    min-height: 286px;
  }

  .series-product figcaption {
    font-size: 8px;
  }
}

/* Мобильная карточка решения: короткая лента преимуществ, комплект, CTA.
   Высоту задаёт содержимое, а не сумма фиксированных текстового и фото-блоков. */
@media (max-width: 760px) {
  .series-showcase {
    padding: 20px 16px 18px;
    align-items: start;
    row-gap: 0;
  }

  .series-showcase__copy {
    display: contents;
  }

  .series-showcase__copy > * {
    min-width: 0;
    position: relative;
    z-index: 2;
  }

  .series-showcase__tag {
    order: 1;
    justify-self: start;
    font-size: 9px;
    line-height: 1.3;
  }

  .series-showcase__copy h3 {
    order: 2;
    margin: 12px 0 0;
    font-size: clamp(30px, 8.5vw, 36px);
  }

  .series-showcase__copy > p {
    order: 3;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.45;
  }

  .series-showcase__copy ul {
    order: 4;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    width: 100%;
    margin: 14px 0 0;
    padding: 10px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .series-showcase__copy ul::-webkit-scrollbar,
  .series-config__grid::-webkit-scrollbar {
    display: none;
  }

  .series-showcase__copy li {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px 8px 4px 22px;
    font-size: 14px;
    line-height: 1.35;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .series-showcase__copy li::before {
    top: 50%;
    transform: translateY(-50%);
  }

  .series-showcase__copy > .mobile-rail-nav {
    order: 5;
    margin-top: 4px;
  }

  .series-showcase__media {
    order: 6;
    width: 100%;
    height: 250px;
    min-height: 0;
    margin-top: 12px;
    border: 0;
    border-radius: 16px;
  }

  .series-showcase__number {
    top: 12px;
    right: 12px;
    font-size: 9px;
  }

  .series-showcase .series-product--indoor {
    top: 22px;
    right: 5%;
    width: 62%;
    height: 43%;
  }

  .series-showcase .series-product--outdoor {
    bottom: 18px;
    left: 4%;
    width: 49%;
    height: 50%;
  }

  .series-showcase .series-product--outdoor-ipro {
    width: 49%;
    height: 52%;
  }

  .series-showcase .series-product--display {
    right: auto;
    bottom: 28px;
    left: 55%;
    width: 17%;
    height: 28%;
  }

  .series-showcase .series-product--display img {
    width: 100%;
    height: 100%;
  }

  .series-showcase .series-product--monitoring {
    right: 1%;
    bottom: 28px;
    left: auto;
    width: 22%;
    height: 22%;
  }

  .series-showcase .series-product figcaption {
    min-height: 20px;
    padding: 5px 6px;
    font-size: 7px;
    letter-spacing: 0.06em;
  }

  .series-showcase__note {
    order: 7;
    margin-top: 10px;
  }

  .series-showcase__cta {
    order: 8;
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    padding: 10px 14px 10px 20px;
  }

  .series-config__grid {
    /* Clip at the panel's inner border, not the viewport. Cancel only its
       20px padding; text and arrows keep their original inset. */
    --rail-inset: 20px;
    width: calc(100% + 2 * var(--rail-inset));
    margin-inline: calc(-1 * var(--rail-inset));
    padding: 0 var(--rail-inset);
    grid-auto-columns: calc(80% + var(--rail-inset) * 0.6 - 12px);
    gap: 12px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rail-inset);
  }

  .series-config__grid .config-card {
    scroll-snap-stop: always;
  }

  .series-config__copy p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .series-section *,
  .series-section *::before,
  .series-section *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* blocks/content-sections.css */
/* Shared vocabulary for the NEW content modules only. Existing screens untouched. */
.avk-section { position: relative; isolation: isolate; overflow: clip; padding: clamp(64px, 7vw, 96px) 0; scroll-margin-top: 24px; }
.avk-section__head { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(320px,.72fr); align-items: start; gap: clamp(36px, 7vw, 92px); margin-bottom: 40px; min-height: 216px; }
.avk-section__heading, .avk-section__intro { position: relative; isolation: isolate; }
.avk-section__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.avk-section__eyebrow > span { display: grid; place-items: center; flex: 0 0 38px; height: 26px; border: 1px solid rgba(31,60,136,.22); border-radius: 999px; color: var(--orange); letter-spacing: .08em; }
.avk-section__heading h2 { max-width: 13em; margin: 0; font-size: clamp(40px, 4.6vw, 62px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.avk-section__heading h2 em { display: block; margin-top: .08em; color: var(--blue); font-style: normal; font-weight: 300; }
.avk-section__intro { padding-top: 46px; }
.avk-section__intro p { margin: 0; max-width: 36em; color: var(--steel); font-size: 17px; line-height: 1.55; }
.avk-section__intro p + p { margin-top: 16px; }
.avk-section__head::after { content: var(--section-number); position: absolute; z-index: -1; top: 46px; right: 0; color: rgba(31,60,136,.04); font-size: 200px; line-height: .85; font-weight: 300; letter-spacing: -.08em; pointer-events: none; }
.avk-section__intro::after, .avk-section__heading::after { content: none; }
.avk-section::before { content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none; background: linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 50% 0 / 96px 96px, linear-gradient(var(--grid-line) 1px,transparent 1px) 50% 0 / 96px 96px; mask-image: linear-gradient(#000,transparent 460px); }
.avk-section__heading, .avk-section__intro { isolation: auto; }
.avk-section__carousel { min-width: 0; }
@media (max-width: 980px) {
  .avk-section__head { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .avk-section__intro { max-width: 640px; padding-top: 0; }
  .avk-section__intro::after { display: none; }
  .avk-section__head::after { content: none; }
  .avk-section__heading { isolation: isolate; }
  .avk-section__heading::after { content: var(--section-number); display: block; position: absolute; z-index: -1; top: 28px; right: 0; color: rgba(31,60,136,.04); font-weight: 300; letter-spacing: -.08em; line-height: .85; font-size: clamp(140px,34vw,190px); pointer-events: none; }
}
@media (max-width: 760px) {
  .avk-section { padding-block: 56px; }
  .avk-section__head { margin-bottom: 28px; }
  .avk-section__eyebrow { font-size: 10px; letter-spacing: .13em; }
  .avk-section__heading h2 { font-size: clamp(34px, 9.5vw, 48px); max-width: 15em; }
  .avk-section__intro p { font-size: 15px; }
  /* No panel beneath these rails: next card peeks to the viewport edge. */
  .avk-section .avk-section__rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(80% + var(--gutter) * .6 - 12px); gap: 12px; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .avk-section__rail::-webkit-scrollbar { display: none; }
  .avk-section__rail > * { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* blocks/screen-03/storage.css */
/* SCREEN 03: local rules; mobile rails reuse blocks/mobile-rail. */
.storage-section { background: #fff; }
.storage-conditions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.storage-condition { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: #fafbfd; }
.storage-condition--equipment { background: #f0f4f9; }
.storage-condition__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; color: var(--blue); }
.storage-condition__icon { flex: 0 0 44px; }
.storage-condition__top > span { font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.storage-condition h3 { margin: 0; font-size: clamp(22px, 2vw, 27px); font-weight: 500; line-height: 1.18; letter-spacing: -.025em; }
.storage-condition p { margin: 16px 0 28px; font-size: 15px; line-height: 1.55; color: var(--steel); }
.storage-condition__baseline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--steel); }
.storage-condition__baseline span:first-child { font-weight: 600; color: var(--blue); }
.storage-section__note { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 28px; }
.storage-section__note-mark { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; font-size: 13px; color: var(--blue); }
.storage-section__note p { margin: 0; max-width: 64em; color: var(--steel); font-size: 13px; line-height: 1.5; }
.storage-section__note a { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 13px; color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.storage-section__note a span { color: var(--orange); font-size: 20px; }
@media (max-width: 1080px) {
  .storage-condition { padding: 24px 20px; }
  .storage-condition__top { flex-wrap: wrap; margin-bottom: 24px; }
  .storage-section__note { grid-template-columns: 24px minmax(0, 1fr); }
  .storage-section__note a { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  .storage-condition { padding: 24px; }
  .storage-condition__top { flex-wrap: nowrap; }
  .storage-condition h3 { font-size: 24px; }
  .storage-condition p { font-size: 15px; }
  .storage-section__note { margin-top: 24px; align-items: start; gap: 12px; }
}

/* blocks/screen-04/development.css */
/* SCREEN 04: the owner's exploded illustration belongs to engineering, not hero. */
.development-section { background: #f3f6fa; }
.development-section__engineering { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.development-assembly { min-width: 0; margin: 0; }
.development-assembly__visual { position: relative; isolation: isolate; overflow: hidden; padding: 52px 12px 16px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.development-assembly__label { position: absolute; top: 22px; left: 24px; font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--blue); text-transform: uppercase; }
.development-assembly img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent); mask-composite: intersect; }
.development-assembly figcaption { max-width: 36em; margin: 12px auto 0; text-align: center; font-size: 12px; color: var(--steel); }
.development-assembly figcaption a { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 44px; margin: 4px auto 0; color: var(--blue); text-underline-offset: 4px; }
.development-assembly figcaption a span { color: var(--orange); }
.development-key-points { display: grid; gap: 16px; }
.development-key-point { position: relative; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.78); }
.development-key-point__eyebrow { display: block; margin-bottom: 16px; color: var(--blue); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.development-key-point h3 { position: relative; z-index: 1; margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }
.development-key-point h3 em { font-style: normal; color: var(--blue); font-weight: 350; }
.development-key-point p { position: relative; z-index: 1; max-width: 36em; margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--steel); }
.development-key-point__signal { position: absolute; top: 46px; right: 22px; display: flex; align-items: end; gap: 4px; height: 50px; color: rgba(31,60,136,.12); }
.development-key-point__signal i { width: 3px; height: 100%; background: currentColor; border-radius: 2px; }
.development-key-point__signal i:nth-child(2) { height: 88%; }.development-key-point__signal i:nth-child(3) { height: 72%; }.development-key-point__signal i:nth-child(4) { height: 60%; }.development-key-point__signal i:nth-child(5) { height: 48%; }.development-key-point__signal i:nth-child(n+6) { height: 40%; }
.development-key-point__signal span { align-self: start; font-size: 13px; margin-left: 4px; }
.development-key-point__pair { position: absolute; top: 56px; right: 24px; font-size: 46px; font-weight: 300; color: rgba(31,60,136,.085); line-height: 1; }
.development-key-point__pair i { font-size: 26px; font-style: normal; }
.development-section__carousel { margin-top: 32px; }
.development-benefits { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.development-benefit { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.7); }
.development-benefit > span { display: block; margin-bottom: 20px; color: var(--blue); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.development-benefit h3 { margin: 0; font-size: 23px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.development-benefit p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--steel); }
.development-section__footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
.development-section__footer p { margin: 0; font-size: 12px; color: var(--steel); }
.development-section__footer a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; }
.development-section__footer a span { color: var(--orange); }
@media (max-width: 1080px) {
  .development-benefit { padding: 24px 20px; }
  .development-section__engineering { gap: 24px; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
  .development-key-point__signal, .development-key-point__pair { display: none; }
}
@media (max-width: 980px) {
  .development-section__engineering { grid-template-columns: 1fr; gap: 28px; }
  .development-assembly { width: min(100%, 680px); margin-inline: auto; }
  .development-key-points { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .development-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .development-section__engineering { gap: 24px; }
  .development-assembly__visual { padding: 44px 4px 8px; }
  .development-assembly__label { top: 18px; left: 20px; font-size: 9px; }
  .development-assembly figcaption { font-size: 11px; }
  .development-key-points { grid-template-columns: 1fr; }
  .development-key-point { padding: 24px; }
  .development-key-point h3 { font-size: 29px; }
  .development-key-point p { font-size: 15px; }
  .development-benefit { padding: 24px; }
  .development-benefit p { font-size: 15px; }
  .development-section__footer { align-items: start; flex-direction: column; gap: 8px; }
}

/* blocks/section-alignment.css */
/* One number anchor and one grid rhythm across all content screens. */
@media (min-width: 981px) {
  .series-section__head { position: relative; isolation: isolate; min-height: 216px; }
  .series-section__heading, .series-section__intro { isolation: auto; }
  .series-section__intro::after { content: none; }
  .series-section__head::after { content: var(--section-number); position: absolute; z-index: -1; top: 46px; right: 0; font: 300 200px/.85 'Jost',sans-serif; letter-spacing: -.08em; color: rgba(31,60,136,.04); pointer-events: none; }
}

/* blocks/screen-05/production.css */
.production-section{background:#fff}.production-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.production-photo{margin:0;min-width:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#f8fafc}.production-photo>img{width:100%;height:260px;object-fit:cover;object-position:center 40%}.production-photo figcaption{padding:24px 20px}.production-photo figcaption>span{color:var(--blue);font-size:10px;font-weight:600;letter-spacing:.1em}.production-photo h3{font-size:24px;font-weight:500;line-height:1.15;margin:14px 0 12px;letter-spacing:-.025em}.production-photo p{color:var(--steel);font-size:14px;margin:0;line-height:1.55}.section-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px}.section-bottom p{color:var(--steel);font-size:12px;margin:0}.text-action{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0;background:none;border:0;color:var(--blue);font:500 14px/1.4 'Jost',sans-serif;text-decoration:none;cursor:pointer}.text-action>.action-arrow{width:18px;height:18px;color:var(--orange)}.text-action:disabled{opacity:.4;cursor:default}.small-label{display:block;font-size:11px;font-weight:600;letter-spacing:.13em;color:var(--blue);text-transform:uppercase}.text-action:hover{text-decoration:underline;text-underline-offset:5px}@media(max-width:980px){.production-photos{grid-template-columns:repeat(2,minmax(0,1fr))}.production-photo>img{height:280px}}@media(max-width:760px){.production-photo>img{height:250px}.section-bottom{align-items:start;flex-direction:column;gap:12px}.section-bottom .quiz-cta{width:100%}}

/* blocks/screen-06/applications.css */
.applications-section { background: #f3f6fa; }
.applications-section .avk-section__head { margin-bottom: 32px; }
.application-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  padding: 4px;
  border-radius: 16px;
  background: #f3f6fa;
}
.application-tabs[hidden] { display: none; }
.application-pager, .application-pager[hidden], .application-tab__icon { display: none; }
.application-tab { grid-column: span 2; }
.application-tab:nth-child(n + 4) { grid-column: span 3; }
.application-tab {
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 12px 8px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.application-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.application-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: calc(50% - 9px);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
.application-tab:focus-visible { outline: 2px solid rgba(31,60,136,.42); outline-offset: 2px; }
@media (hover: hover) {
  .application-tab:not([aria-selected="true"]):hover { background: #edf1f8; }
}
/* The non-JS fallback keeps every scenario in the document flow. */
.application-list { display: grid; gap: 24px; }
.application-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  scroll-margin-top: 104px;
}
.application-detail__media { position: relative; overflow: hidden; min-height: 360px; }
.application-detail__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.application-detail__copy { min-width: 0; padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; align-items: start; }
.application-detail h3 { font-size: clamp(30px, 2.8vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; margin: 18px 0; }
.application-detail p { margin: 0; font-size: 17px; color: var(--steel); line-height: 1.5; }
.application-detail p.application-detail__note { font-size: 14px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.application-detail .text-action { margin-top: auto; padding-top: 24px; min-height: 44px; }
.application-detail .quiz-cta { align-self: flex-start; margin-top: 24px; }
/* The frame owns the surface. Photos, tabs and text all belong to this grid. */
.application-switcher.is-tabbed {
  --application-inset: clamp(24px, 2.6vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  scroll-margin-top: 104px;
}
.application-gallery { grid-column: 1; grid-row: 1 / 3; display: grid; min-width: 0; min-height: 400px; overflow: hidden; }
.application-gallery .application-detail__media { grid-area: 1 / 1; min-height: 0; visibility: hidden; }
.application-gallery .application-detail__media.is-current { visibility: visible; }
.application-switcher.is-tabbed .application-tabs { grid-column: 2; grid-row: 1; margin: var(--application-inset) var(--application-inset) 24px; }
/* The tallest copy reserves space, so changing tabs never moves the card below. */
.application-switcher.is-tabbed .application-list { grid-column: 2; grid-row: 2; min-width: 0; gap: 0; padding: 0 var(--application-inset) var(--application-inset); }
.application-switcher.is-tabbed .application-detail { grid-area: 1 / 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; overflow: visible; border: 0; border-radius: 0; visibility: hidden; pointer-events: none; }
.application-switcher.is-tabbed .application-detail__copy { padding: 0; }
.application-switcher.is-tabbed .application-detail__copy > .small-label { display: none; }
.application-switcher.is-tabbed .application-detail h3 { margin-top: 0; }
.application-switcher.is-tabbed .application-detail.is-current { visibility: visible; pointer-events: auto; }
.application-detail__media.is-entering img { animation: application-photo-in .45s cubic-bezier(.22, 1, .36, 1) both; }
.application-detail.is-entering .application-detail__copy { animation: application-copy-in .32s ease-out both; }
@keyframes application-photo-in {
  from { opacity: .2; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes application-copy-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .applications-section .avk-section__head { margin-bottom: 24px; }
  .application-tabs {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 20px 8px;
    border-radius: 0;
    background: transparent;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .application-tabs::-webkit-scrollbar { display: none; }
  .application-tab,
  .application-tab:nth-child(n + 4) {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f3f6fa;
    font-size: 14px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .application-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
  .application-tab[aria-selected="true"]::after { display: none; }
  .application-detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: 210px 1fr; }
  .application-detail, .application-switcher.is-tabbed { border-radius: 24px; }
  .application-switcher.is-tabbed { --application-inset: 24px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 210px auto minmax(0, 1fr); }
  .application-gallery { grid-column: 1; grid-row: 1; min-height: 0; }
  .application-switcher.is-tabbed .application-tabs { grid-column: 1; grid-row: 2; margin: 16px 0 18px; }
  .application-switcher.is-tabbed .application-list { grid-column: 1; grid-row: 3; }
  .application-detail__media { min-height: 0; }
  .application-detail__copy { padding: 24px; }
  .application-detail h3 { font-size: clamp(28px, 6vw, 34px); margin: 14px 0; }
  .application-detail p { font-size: 15px; }
  .application-detail .text-action { width: 100%; font-size: 14px; gap: 12px; }
  .application-detail .quiz-cta { width: 100%; }
}
@media (max-width: 600px) {
  .application-switcher.is-tabbed { grid-template-rows: 210px auto auto minmax(0, 1fr); }
  .application-switcher.is-tabbed .application-pager:not([hidden]) {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    justify-self: center;
    width: min(380px, calc(100% - 2 * var(--application-inset)));
    min-width: 0;
    margin-top: 18px;
  }
  .application-pager__current { min-width: 0; }
  .application-pager__count { display: block; margin-bottom: 3px; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .13em; }
  .application-pager__current strong { display: block; color: var(--ink); font-size: clamp(16px, 4.4vw, 19px); font-weight: 600; line-height: 1.2; }
  .application-pager__arrows { display: flex; flex: 0 0 auto; gap: 6px; }
  .application-pager__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
  }
  .application-pager__arrow svg { width: 20px; height: 20px; }
  .application-pager__arrow:disabled { color: #9ca9bf; background: #f6f8fb; cursor: default; }
  .application-pager__arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .application-switcher.is-tabbed .application-tabs {
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    justify-self: center;
    width: min(380px, calc(100% - 2 * var(--application-inset)));
    max-width: none;
    margin: 12px 0 22px;
    padding: 2px;
    overflow: visible;
    border-radius: 16px;
    background: #f0f3f8;
    scroll-snap-type: none;
  }
  .application-tab, .application-tab:nth-child(n + 4) {
    display: grid;
    place-items: center;
    grid-column: auto;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    scroll-snap-align: none;
  }
  .application-tab__label { display: none; }
  .application-tab__icon { display: block; width: 23px; height: 23px; }
  .application-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
  .application-switcher.is-tabbed .application-list { grid-row: 4; }
}
@media (max-width: 600px) and (hover: hover) {
  .application-tab:not([aria-selected="true"]):hover, .application-pager__arrow:not(:disabled):hover { background: #e4eaf4; }
}
@media (max-width: 359px) {
  .application-detail { grid-template-rows: 190px 1fr; }
  .application-detail__copy { padding: 20px; }
  .application-switcher.is-tabbed { --application-inset: 16px; grid-template-rows: 190px auto auto minmax(0, 1fr); }
  .application-switcher.is-tabbed .application-tabs { gap: 2px; margin-inline: 0; padding: 0; }
  .application-tab { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .application-tab { transition: none; }
  .application-detail__media.is-entering img,
  .application-detail.is-entering .application-detail__copy { animation: none; }
}

/* blocks/screen-07/selection.css */
.selection-section {
  background: #fff;
}

.selection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.selection-card {
  display: flex;
  flex-direction: column;
  align-items: start;
  min-width: 0;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #f8fafc;
}

.series-tag {
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--blue);
}

.selection-card h3 {
  margin: 24px 0 16px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.selection-card p {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--steel);
}

.selection-card > div {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--steel);
}

.selection-card .text-action {
  margin-top: 20px;
}

.selection-card .quiz-cta {
  align-self: flex-start;
  margin-top: 20px;
}

.selection-note {
  display: flex;
  align-items: start;
  gap: 24px;
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: 20px;
  background: #edf2f8;
}

.selection-note > span {
  font-size: 32px;
  color: var(--orange);
}

.selection-note p {
  margin: 0;
  font-size: 15px;
  color: var(--steel);
}

.selection-note strong {
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 600px) {
  .selection-grid {
    grid-template-columns: 1fr;
  }

  .selection-card {
    padding: 24px;
  }

  .selection-card h3 {
    margin-top: 20px;
  }

  .selection-card p {
    margin-bottom: 20px;
  }

  .selection-note {
    gap: 16px;
    padding: 24px;
  }
}

/* blocks/screen-08/request.css */
.request-section { background: #eef2f7; }
.request-quiz-layout { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1fr); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: #fff; }
.request-quiz-intro { padding: clamp(28px,3.5vw,44px); background: #f5f7fb; border-right: 1px solid var(--line); }
.request-quiz-intro h3 { font-size: clamp(28px,3vw,38px); line-height: 1.15; font-weight: 500; letter-spacing: -.03em; margin: 24px 0 20px; }
.request-quiz-intro p { font-size: 16px; color: var(--steel); line-height: 1.55; }
.request-quiz-intro ul { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 16px; font-size: 15px; }
.request-quiz-intro li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 12px; border: 2px solid var(--orange); border-radius: 50%; }
.request-quiz-intro .request-quiz-intro__note { font-size: 13px; }
[data-avk-quiz-inline] { min-width: 0; }
[data-avk-quiz-inline] > .avk-quiz { height: 100%; }
.avk-quiz { display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-width: 0; margin: 0; color: var(--ink); background: #fff; font-family: 'Jost',sans-serif; }
.avk-quiz__head { padding: 32px 32px 20px; }
.avk-quiz__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: var(--blue); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.avk-quiz__progress { display: flex; gap: 6px; margin-top: 16px; }
.avk-quiz__progress span { height: 3px; flex: 1; border-radius: 3px; background: #e5e9f1; }
.avk-quiz__progress span.is-done { background: var(--orange); }
.avk-quiz h3 { margin: 22px 0 12px; font-size: clamp(25px,2.4vw,32px); line-height: 1.15; font-weight: 500; letter-spacing: -.025em; }
.avk-quiz__copy { margin: 0; color: var(--steel); font-size: 14px; line-height: 1.5; }
.avk-quiz__body { padding: 4px 32px 20px; min-width: 0; }
.avk-quiz__options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.avk-quiz__option { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfd; font: 400 15px/1.35 'Jost',sans-serif; color: var(--ink); text-align: left; cursor: pointer; }
.avk-quiz__option::before { content: ''; flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid #a8b2ca; border-radius: 50%; }
.avk-quiz__option:last-child:nth-child(odd) { grid-column: 1/-1; }
.avk-quiz__option[aria-pressed=true] { background: #eef2fa; border-color: var(--blue); }
.avk-quiz__option[aria-pressed=true]::before { border: 5px solid var(--blue); }
@media(hover:hover) { .avk-quiz__option:hover { border-color: var(--blue); background: #f0f3f9; } }
.avk-quiz__contact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.avk-quiz__field { display: grid; align-content: start; gap: 7px; min-width: 0; font-size: 13px; }
.avk-quiz__field input,.avk-quiz__field select { width: 100%; min-width: 0; height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fafbfd; font: 400 16px/1.3 'Jost',sans-serif; }
.avk-quiz__field input[aria-invalid=true] { border-color: #af331a; }
.avk-quiz__field small { color: #af331a; font-size: 12px; }
.avk-quiz__field small:empty { display: none; }
.avk-quiz__consent { grid-column: 1/-1; display: flex; align-items: start; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--steel); }
.avk-quiz__consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.avk-quiz__consent a { color: var(--blue); text-underline-offset: 3px; }
.avk-quiz__offer { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.avk-quiz__next-step { grid-column: 1/-1; margin: 0; padding: 12px 16px; border-radius: 12px; color: #fff; background: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.35; text-wrap: balance; }
.avk-quiz__fact { display: grid; align-content: start; gap: 3px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f4f7fc; color: var(--steel); font-size: 12px; line-height: 1.4; }
.avk-quiz__fact b { color: var(--ink); font-size: 13px; font-weight: 500; text-wrap: balance; }
.avk-quiz__methods { grid-column: 1/-1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; min-width: 0; margin: 0; padding: 0; border: 0; }
.avk-quiz__methods legend { float: left; margin: 0; padding: 0; color: var(--ink); font-size: 14px; }
.avk-quiz__method-list { display: flex; gap: 28px; }
.avk-quiz__method { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.avk-quiz__phone-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.avk-quiz__messengers { display: grid; grid-auto-flow: column; gap: 2px; margin-right: -3px; }
.avk-quiz__method-button { display: grid; place-items: center; width: 40px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.avk-quiz__method-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.avk-quiz__method-icon { display: block; width: 34px; height: 34px; filter: grayscale(1) opacity(.45); transition: filter .18s ease; }
.avk-quiz__method-button[aria-pressed=true] .avk-quiz__method-icon { filter: none; }
@media (hover:hover) { .avk-quiz__method-button:hover .avk-quiz__method-icon { filter: grayscale(1) opacity(.7); } .avk-quiz__method-button[aria-pressed=true]:hover .avk-quiz__method-icon { filter: none; } }
@media (prefers-reduced-motion: reduce) { .avk-quiz__method-icon { transition: none; } }
.avk-quiz__field input::placeholder { color: #7d8799; }
.avk-quiz.is-contact-step h3, .avk-quiz.is-contact-step .avk-quiz__copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avk-quiz__method input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.avk-quiz__methods-error { flex-basis: 100%; color: #af331a; font-size: 12px; }
.avk-quiz__methods-error:empty { display: none; }
.avk-quiz__preview { grid-column: 1/-1; margin: 0; padding: 12px 14px; border: 1px solid #f5cfbc; border-radius: 10px; background: #fffaf6; color: #77533c; font-size: 12px; line-height: 1.5; }
.avk-quiz__footer { padding: 16px 32px 28px; border-top: 1px solid var(--line); background: #fff; }
.avk-quiz__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.avk-quiz__next,.avk-quiz__back { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 12px 22px; font: 500 15px/1.3 'Jost',sans-serif; cursor: pointer; }
.avk-quiz__next { margin-left: auto; background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.avk-quiz__arrow { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.avk-quiz__next .avk-quiz__arrow { color: #ff8038; }
.avk-quiz__next:disabled { opacity: .4; cursor: default; }
.avk-quiz__back { border: 1px solid var(--line); color: var(--blue); background: #fff; }
.avk-quiz__status { margin: 0 0 12px; color: #963b23; font-size: 13px; line-height: 1.4; }
.avk-quiz__status:empty { display: none; }
.avk-quiz [hidden] { display: none!important; }
.avk-quiz.is-success { display: block; min-height: 0; }
.avk-quiz__success { padding: clamp(40px,7vw,72px) clamp(24px,7vw,64px); text-align: center; }
.avk-quiz__success-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 50%; color: #fff; background: var(--blue); font-size: 27px; line-height: 1; }
.avk-quiz__success h3 { margin: 0; font-size: clamp(28px,4vw,38px); line-height: 1.12; font-weight: 500; letter-spacing: -.03em; }
.avk-quiz__success > p { max-width: 32em; margin: 14px auto 0; color: var(--steel); font-size: 16px; line-height: 1.55; }
.avk-quiz__success .avk-quiz__success-countdown { margin-top: 20px; font-size: 13px; }
.avk-quiz__success-close { min-width: 160px; min-height: 48px; margin-top: 22px; padding: 12px 24px; border: 1px solid var(--ink); border-radius: 999px; color: #fff; background: var(--ink); font: 500 15px/1.3 'Jost',sans-serif; cursor: pointer; }
.avk-quiz__success-close:hover { background: var(--blue); border-color: var(--blue); }
.avk-quiz__success-close:active { transform: translateY(1px); }
.avk-quiz :focus-visible { outline: 2px solid rgba(31,60,136,.42); outline-offset: 3px; }
.avk-quiz [tabindex="-1"]:focus { outline: none; }
.avk-quiz-dialog { width: min(720px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; color: var(--ink); background: #fff; box-shadow: 0 24px 90px rgba(12,24,56,.18); }
.avk-quiz-dialog::backdrop { background: rgba(12,24,56,.45); backdrop-filter: blur(5px); }
.avk-quiz-dialog .avk-quiz { max-height: calc(100dvh - 34px); }
.avk-quiz-dialog .avk-quiz__head { padding-right: 68px; }
.avk-quiz-dialog .avk-quiz__body { overflow-y: auto; overscroll-behavior: contain; }
.avk-quiz-dialog__close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--blue); cursor: pointer; }
.avk-quiz-dialog__close svg { width: 20px; height: 20px; }
body.has-quiz-modal { overflow: hidden; }
@media(max-width:980px) { .request-quiz-layout { grid-template-columns: 1fr; } .request-quiz-intro { display: none; } }
@media(max-width:680px) {
  .avk-quiz__head { padding: 24px 20px 16px; }
  .avk-quiz__body { min-height: 0; padding: 0 20px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .avk-quiz__footer { padding: 14px 20px max(28px,calc(18px + env(safe-area-inset-bottom))); }
  .avk-quiz__options,.avk-quiz__contact { grid-template-columns: 1fr; }
  .avk-quiz__option { min-height: 56px; padding: 13px 14px; font-size: 14px; }
  .avk-quiz__actions { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; }
  .avk-quiz__next,.avk-quiz__back { min-height: 52px; padding: 13px 18px; font-size: 14px; touch-action: manipulation; }
  .avk-quiz__next { width: 100%; }
  .avk-quiz__back[hidden] + .avk-quiz__next { grid-column: 1/-1; }
  .avk-quiz-dialog { inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; overflow: hidden; }
  .avk-quiz-dialog [data-quiz-dialog-mount] { height: 100%; min-height: 0; }
  .avk-quiz-dialog .avk-quiz { height: 100%; min-height: 0; max-height: none; padding-top: env(safe-area-inset-top); overflow: hidden; }
  .avk-quiz-dialog .avk-quiz__head { padding-right: 72px; }
  .avk-quiz-dialog__close { top: max(12px,env(safe-area-inset-top)); right: 12px; }
  .avk-quiz h3 { font-size: 24px; }
  .avk-quiz__success { padding: max(72px,calc(48px + env(safe-area-inset-top))) 20px calc(40px + env(safe-area-inset-bottom)); }
  .avk-quiz__success > p { font-size: 15px; }
  .avk-quiz__success-close { width: 100%; }
}
@media(max-height:620px) { .avk-quiz-dialog .avk-quiz__head { padding-top: 18px; padding-bottom: 10px; } .avk-quiz-dialog h3 { margin-top: 10px; font-size: 22px; } .avk-quiz-dialog .avk-quiz__copy { display: none; } }
.avk-quiz__method:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 760px) {
  .avk-quiz__offer { grid-template-columns: 1fr; }
  .avk-quiz__methods { display: grid; gap: 0; }
  .avk-quiz__method-list { flex-wrap: nowrap; gap: 18px; }
  .avk-quiz__method-prefix { display: none; }
  .avk-quiz__fact { padding: 8px 12px; }
  .avk-quiz__next-step { padding: 10px 14px; font-size: 16px; }
  .avk-quiz__fact { font-size: 14px; }
  .avk-quiz__fact b { font-size: 15px; }
  .avk-quiz__field { font-size: 14px; }
  .avk-quiz__methods legend { font-size: 14px; }
  .avk-quiz__method { font-size: 15px; }
  .avk-quiz__consent { font-size: 13px; }
}

/* blocks/screen-09/faq.css */
.faq-section{background:white}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item summary{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:24px;padding:24px 0;cursor:pointer;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary>span{font-size:11px;color:var(--blue);letter-spacing:.08em}.faq-item h3{font-size:clamp(20px,2.2vw,27px);line-height:1.25;font-weight:500;letter-spacing:-.02em;margin:0}.faq-item summary i{position:relative;width:32px;height:32px;border:1px solid var(--line);border-radius:50%}.faq-item summary i::before,.faq-item summary i::after{content:'';position:absolute;width:12px;height:1px;background:var(--blue);top:15px;left:9px}.faq-item summary i::after{transform:rotate(90deg);transition:transform .2s}.faq-item[open] summary i::after{transform:rotate(0)}.faq-item[open] summary{color:var(--blue)}.faq-item>div{padding:0 56px 28px;max-width:850px}.faq-item p{margin:0;color:var(--steel);font-size:16px;line-height:1.65}@media(max-width:600px){.faq-item summary{grid-template-columns:22px 1fr 32px;gap:12px}.faq-item>div{padding:0 0 24px 34px}.faq-item p{font-size:15px}}

/* blocks/screen-10/contacts.css */
.contacts-section {
  background: #edf2f8;
}

.contacts-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 36px;
  background: #fff;
}

.contact-map {
  position: relative;
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
  background:
    linear-gradient(rgba(39, 69, 137, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 69, 137, .08) 1px, transparent 1px),
    #e7edf5;
  background-size: 48px 48px;
}

.contact-map::before {
  content: "Карта загружается…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--steel);
  font-size: 14px;
  letter-spacing: .04em;
}

.contact-map iframe {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-map__open {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: rgba(8, 24, 58, .92);
  box-shadow: 0 10px 28px rgba(8, 24, 58, .2);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.contact-map__open span {
  margin-left: 12px;
  color: var(--orange);
  font-size: 18px;
}

.contact-map__open:hover {
  background: var(--ink);
}

.contact-map__open:focus-visible {
  background: var(--ink);
  outline: 2px solid rgba(31, 60, 136, 0.42);
  outline-offset: 3px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(32px, 4vw, 56px);
}

.contact-card__lead {
  max-width: 32em;
}

.contact-card__lead h3 {
  margin: 14px 0;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.contact-card__lead p,
.contact-card__footer p {
  margin: 0;
  color: var(--steel);
  font-size: 15px;
  line-height: 1.65;
}

.contact-list {
  margin: clamp(28px, 4vw, 44px) 0 0;
}

.contact-list > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
  padding: 19px 0;
  border-top: 1px solid var(--line);
}

.contact-list dt {
  padding-top: 4px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.contact-list dd {
  min-width: 0;
  margin: 0;
}

.contact-list address,
.contact-list a {
  color: var(--ink);
  font-size: clamp(18px, 1.5vw, 23px);
  font-style: normal;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -.015em;
}

.contact-list dd a {
  display: block;
  width: fit-content;
  min-height: 36px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-list dd a:hover,
.contact-list dd a:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.contact-phone-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.contact-messengers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contact-list dd .contact-messenger {
  display: inline-grid;
  width: 40px;
  min-height: 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(31, 60, 136, .12);
  border-radius: 50%;
  box-shadow: 0 8px 20px -14px rgba(8, 24, 58, .6);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-list dd .contact-messenger--max {
  background: #fff;
  border-color: rgba(71, 26, 255, .22);
}

.contact-list dd .contact-messenger--telegram {
  background: #229ed9;
}

.contact-messenger svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.contact-messenger img {
  width: 28px;
  height: 28px;
}

.contact-list dd .contact-messenger:hover,
.contact-list dd .contact-messenger:focus-visible {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(8, 24, 58, .8);
}

.contact-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
  padding-top: 28px;
}

.contact-card__footer p {
  max-width: 24em;
  font-size: 13px;
}

.contact-card__footer .text-action {
  flex: 0 0 auto;
}

.avk-footer {
  padding: 40px 0 28px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.avk-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.avk-footer__brand img {
  width: 120px;
}

.avk-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.avk-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--steel);
  font-size: 14px;
  text-decoration: none;
}

.avk-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.avk-footer__bottom {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.avk-footer__bottom p {
  max-width: 36em;
  margin: 0;
  color: var(--steel);
  font-size: 12px;
}

.avk-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px 20px;
}

.avk-footer__legal a {
  min-height: 24px;
  color: var(--steel);
  font-size: 12px;
}

.avk-footer__legal button {
  min-height: 24px;
  padding: 0;
  border: 0;
  color: var(--steel);
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.cookie-notice {
  box-sizing: border-box;
  position: fixed;
  z-index: 90;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(490px, calc(100% - 24px));
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(38, 66, 143, .2);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 12px rgba(14, 29, 66, .1);
  pointer-events: none;
}

.cookie-notice[hidden],
body:has(.avk-quiz-dialog[open]) .cookie-notice,
.cookie-notice--quiz-near {
  display: none;
}

.cookie-notice__copy p {
  margin: 0;
  color: var(--steel);
  font-size: 11px;
  line-height: 1.3;
}

.cookie-notice__copy a {
  color: var(--blue);
  text-underline-offset: 3px;
  pointer-events: auto;
}

.cookie-notice__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.cookie-notice__actions button {
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 999px;
  font: 500 11px/1.2 'Jost', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.cookie-notice__primary {
  border: 1px solid var(--ink);
  color: #fff;
  background: var(--ink);
}

.cookie-notice__secondary {
  border: 1px solid var(--line);
  color: var(--blue);
  background: #fff;
}

.cookie-notice__actions button:focus-visible {
  outline: 2px solid rgba(31, 60, 136, 0.42);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  z-index: 99;
  top: -100px;
  left: 20px;
  padding: 12px 20px;
  background: #fff;
  color: var(--ink);
}

.skip-link:focus {
  top: 12px;
}

@media (max-width: 980px) {
  .contacts-panel {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
    min-height: 500px;
  }

  .contact-map {
    min-height: 500px;
  }

  .contact-card {
    padding: 32px;
  }

  .contact-list > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-card__footer,
  .avk-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .avk-footer__legal {
    justify-content: start;
  }
}

@media (max-width: 760px) {
  .cookie-notice {
    right: 6px;
    bottom: max(6px, env(safe-area-inset-bottom));
    width: calc(100% - 12px);
    gap: 7px;
    padding: 6px 8px;
  }

  .cookie-notice__copy p {
    font-size: 11px;
  }

  .contacts-panel {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .contact-map {
    min-height: 320px;
  }

  .contact-map__open {
    right: 16px;
    bottom: 16px;
    left: 16px;
    min-height: 50px;
  }

  .contact-card {
    padding: 28px 20px 24px;
  }

  .contact-card__lead h3 {
    font-size: 32px;
  }

  .contact-card__lead p,
  .contact-card__footer p {
    font-size: 16px;
  }

  .contact-list {
    margin-top: 28px;
  }

  .contact-list > div {
    padding: 18px 0;
  }

  .contact-list address,
  .contact-list a {
    font-size: 20px;
  }

  .contact-phone-line {
    justify-content: space-between;
  }

  .contact-list dd .contact-messenger {
    width: 44px;
    min-height: 44px;
  }

  .contact-card__footer {
    gap: 18px;
    padding-top: 22px;
  }

  .avk-footer__top {
    align-items: start;
    flex-direction: column;
  }

  .avk-footer nav {
    gap: 8px 20px;
  }
}