/* ========== HERO ========== */
.hero {
  display: grid;
  grid-template-columns: minmax(45.4rem, 5fr) minmax(0, 7fr);
  gap: var(--gap);
  background: transparent;
  overflow: visible;
}

.hero[data-hero-anim] {
  --animate-duration: 0.7s;
}

.hero[data-hero-anim] [data-hero-step]:not(.is-hero-visible),
.hero[data-hero-anim] [data-hero-docs]:not(.is-hero-visible) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero[data-hero-anim] [data-hero-step].is-hero-visible,
.hero[data-hero-anim] [data-hero-docs].is-hero-visible {
  visibility: visible;
  pointer-events: auto;
}

.hero__cover {
  background: var(--bg-main);
  border-radius: var(--radius-l);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 79.9rem;
}

.hero__nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hero__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero__menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  padding: var(--space-4);
  gap: 0;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  font-synthesis: none;
  color: #3b3b3c;
  transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}

.hero__menu a:hover,
.hero__menu a:focus-visible {
  color: var(--text-primary);
  gap: 1rem;
}

.hero__menu a.is-active {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  gap: 1rem;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-primary);
}

.hero__subtitle {
  font-size: var(--fs-text-l);
  line-height: var(--lh-text-l);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-primary);
}

.hero__cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

.hero__contacts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 1.8rem;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.hero__link:hover,
.hero__link:focus-visible {
  color: #d5b02a;
  border-bottom-color: #d5b02a;
}

.hero__link-icon {
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  flex-shrink: 0;
}

.hero__link-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__block {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.hero__video {
  position: relative;
  height: auto;
  min-height: 60rem;
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--bg-dark);
}

.hero__video-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--bg-dark);
  transition:
    opacity var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.hero__video.is-loaded .hero__video-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero__video-spinner {
  box-sizing: border-box;
  width: 4rem;
  height: 4rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hero-video-spin 0.75s linear infinite;
}

@keyframes hero-video-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero__video-img {
  width: 100%;
  height: 100%;
  min-height: 60rem;
  object-fit: cover;
  display: block;
}

video.hero__video-img {
  pointer-events: none;
}

.hero__badge {
  position: absolute;
  left: var(--space-32);
  bottom: var(--space-32);
  max-width: 28rem;
  padding: var(--space-16);
  background: rgba(28, 35, 36, 0.88);
  backdrop-filter: blur(0.8rem);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero__badge-top {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.hero__badge-logo {
  width: 2.8rem;
  height: 2.8rem;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.hero__badge-logo img {
  height: 100.03%;
  width: 397.73%;
  max-width: none;
  position: absolute;
  left: 0;
  top: -0.01%;
}

.footer__brand .logo__mark img {
  height: 100.03%;
  width: 397.73%;
  max-width: none;
  position: absolute;
  left: 0;
  top: -0.01%;
}

.hero__badge-name {
  font-size: var(--fs-text-m);
  line-height: var(--lh-text-m);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-white);
}

.hero__badge-text {
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.hero__chips {
  display: flex;
  gap: var(--gap);
  height: 21rem;
}

.chip {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-m);
  padding: var(--space-16);
  display: flex;
  gap: var(--space-12);
  overflow: hidden;
  cursor: pointer;
  transform-origin: center center;
  transition: transform var(--dur) var(--ease-out);
}

.chip:hover,
.chip:focus-visible {
  transform: scale(1.04);
}

.chip:active {
  transform: scale(1.02);
}

.chip--dark {
  background: var(--bg-dark);
}

.chip--light {
  background: var(--bg-main);
  border: 1px solid var(--stroke-light);
  gap: var(--space-8);
}

.chip__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.chip__title {
  font-size: var(--fs-text-m);
  line-height: var(--lh-text-m);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
}

.chip--dark .chip__title {
  color: var(--text-white);
}

.chip--light .chip__title {
  color: var(--text-primary);
}

.chip__text {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-tertiary);
}

.chip__media {
  width: 11.4rem;
  height: 17.8rem;
  border-radius: var(--radius-m);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--stroke-secondary);
}

.chip--light .chip__media {
  border: none;
}

.chip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.hero__doc {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--space-16);
  background: var(--bg-brand);
  border-radius: var(--radius-m);
  backdrop-filter: blur(1rem);
}

.hero__doc-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  width: 0.8rem;
}

.hero__doc-dot {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  min-width: 0.8rem;
  min-height: 0.8rem;
  max-width: 0.8rem;
  max-height: 0.8rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
  flex: 0 0 0.8rem;
  line-height: 0;
  font-size: 0;
  color: transparent;
  overflow: visible;
  appearance: none;
  -webkit-appearance: none;
}

.hero__doc-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #f6f6f6;
  opacity: 0.9;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
}

.hero__doc-dot.is-active::after {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--buttons-main);
  opacity: 1;
}

.hero__doc-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 4rem;
  display: flex;
  align-items: center;
}

.hero__doc-slide {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.hero__doc-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.hero__doc-slide:not(.is-active) {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__doc-item {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--space-16);
  align-items: center;
}

.hero__doc-pdf {
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  border-radius: var(--radius-s);
  flex-shrink: 0;
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
}

.hero__doc-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__doc-title {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero__doc-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  letter-spacing: var(--ls);
}

.hero__doc-meta span:last-child,
.hero__doc-meta a:last-child {
  font-weight: var(--fw-bold);
}

/* ========== PRODUCTS ========== */
.products-pin {
  position: relative;
}

.products {
  display: grid;
  grid-template-columns: 67rem 1fr;
  gap: var(--gap);
  padding: var(--space-20);
  min-height: 92rem;
  align-items: start;
}

@media (min-width: 768px) {
  .products-pin .products {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
    align-items: stretch;
    overflow: hidden;
  }

  .products-pin .products__left {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    gap: clamp(1.6rem, 3vh, 6.4rem);
  }

  .products-pin .products__intro {
    flex-shrink: 0;
    padding-top: 9rem;
  }

  .products-pin .products__visual {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
  }

  .products-pin .products__visual img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

.products__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  position: relative;
}

.products__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.products__intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.products__visual {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 43.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.products__visual img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(43.2rem, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.products__visual img.is-shown {
  opacity: 1;
}

.products__cards {
  position: relative;
  min-height: 88rem;
  height: 100%;
  overflow: hidden;
  justify-self: end;
  width: 100%;
  max-width: 52.4rem;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 8%,
    #000 72%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 8%,
    #000 72%,
    transparent 100%
  );
}

.products__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-16);
  transition: transform var(--dur-slow) var(--ease-out);
}

.product-card {
  width: 41.5rem;
  max-width: 100%;
  height: 13.8rem;
  min-height: 13.8rem;
  padding: 1.5rem;
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-l);
  background: var(--bg-main);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: width var(--dur-slow) var(--ease-out),
    height var(--dur-slow) var(--ease-out),
    min-height var(--dur-slow) var(--ease-out),
    padding var(--dur-slow) var(--ease-out),
    gap var(--dur-slow) var(--ease-out);
}

.product-card.is-active {
  width: 52.4rem;
  height: 18.4rem;
  min-height: 18.4rem;
  padding: var(--space-20);
  gap: var(--space-20);
  z-index: 2;
}

.product-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.product-card__num {
  width: 2.7rem;
  height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  color: var(--text-white);
  font-size: 0.8rem;
  line-height: 1;
  font-weight: var(--fw-bold);
  box-sizing: border-box;
  transition: width var(--dur-slow) var(--ease-out),
    height var(--dur-slow) var(--ease-out),
    font-size var(--dur-slow) var(--ease-out),
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.product-card.is-active .product-card__num {
  width: 3.6rem;
  height: 3.6rem;
  font-size: var(--fs-desc);
}

.product-card.is-active:hover .product-card__num,
.product-card.is-active:focus-visible .product-card__num {
  background: transparent;
  border-color: var(--stroke-primary);
  color: var(--text-primary);
}

.product-card .round-btn {
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  transition: width var(--dur-slow) var(--ease-out),
    height var(--dur-slow) var(--ease-out),
    padding var(--dur-slow) var(--ease-out),
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.product-card.is-active .round-btn {
  width: 4rem;
  height: 4rem;
  padding: 1rem;
}

.product-card .round-btn svg {
  width: 1.2rem;
  height: 1.2rem;
  transition: width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
}

.product-card.is-active .round-btn svg {
  width: 1.6rem;
  height: 1.6rem;
}

.product-card__title {
  font-size: 2.1rem;
  line-height: 2.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  margin-bottom: 0.6rem;
  transition: font-size var(--dur-slow) var(--ease-out), line-height var(--dur-slow) var(--ease-out), margin var(--dur-slow) var(--ease-out);
}

.product-card.is-active .product-card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-bottom: var(--space-8);
}

.product-card__desc {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-primary);
  transition: font-size var(--dur-slow) var(--ease-out), line-height var(--dur-slow) var(--ease-out);
}


/* ========== APPLICATIONS ========== */
.applications {
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.applications__intro {
  max-width: 67rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.applications__btn--mobile {
  display: none;
}

.applications__intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.applications__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-12);
}

.app-card {
  position: relative;
  height: 48.8rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-32) var(--space-20);
  background: var(--bg-dark);
  border: 1px solid var(--stroke-light);
  transition: background var(--dur) var(--ease-out);
}

.app-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  transition: opacity var(--dur) var(--ease-out);
}

.app-card__bg--base {
  filter: grayscale(1) sepia(1) saturate(8) hue-rotate(6deg) brightness(1.05);
  mix-blend-mode: screen;
  opacity: 0.92;
}

.app-card__bg--hover {
  filter: none;
  mix-blend-mode: normal;
  opacity: 0;
}

.app-card__title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-text-l);
  line-height: var(--lh-text-l);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-white);
  transition: color var(--dur) var(--ease-out);
}

.app-card:hover,
.app-card:focus-visible {
  background: var(--bg-base);
}

.app-card:hover .app-card__bg--base,
.app-card:focus-visible .app-card__bg--base {
  opacity: 0;
}

.app-card:hover .app-card__bg--hover,
.app-card:focus-visible .app-card__bg--hover {
  opacity: 1;
}

.app-card:hover .app-card__title,
.app-card:focus-visible .app-card__title {
  color: var(--text-primary);
}

/* ========== STATS ========== */
.stats {
  background: var(--bg-brand);
  padding: var(--space-48);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
}

.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.35) 0.1rem,
    transparent 0.1rem
  );
  background-size: 1rem 1rem;
  pointer-events: none;
  opacity: 0.5;
}

.stats__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.stats .section-label {
  color: var(--text-primary);
}

.stats__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

.stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.stats__value {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
}

.stats__text {
  font-size: var(--fs-text-l);
  line-height: var(--lh-text-l);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
}

/* ========== GEOGRAPHY ========== */
.geography {
  padding: var(--space-20);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--gap);
  min-height: 90.2rem;
  /* карта уходит за правый край экрана */
  overflow: visible;
}

.section.geography {
  overflow: visible;
}

.geography__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  min-width: 0;
  z-index: 1;
}

.geography__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.geography__intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.geo-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.geo-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 6rem;
  padding: var(--space-12);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-m);
  background: var(--bg-main);
  cursor: pointer;
  transition: border-color var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
  text-align: left;
  width: 100%;
}

.geo-item__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.geo-item__details{
  display: none;
}

.geo-item:hover,
.geo-item:focus-visible {
  border-color: var(--stroke-secondary);
}

.geo-item.is-active {
  border-color: var(--stroke-primary);
}

.geo-item__main {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-width: 0;
}

.geo-item__icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  background: transparent;
}

.geo-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.geo-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.geo-item__title {
  display: block;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-primary);
}

.geo-item__addr {
  display: block;
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geo-item__tag {
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: var(--buttons-main);
  color: var(--text-white);
  white-space: nowrap;
  flex-shrink: 0;
}

.geo-item__tag--plant {
  background: var(--bg-brand);
  color: var(--text-primary);
}

.geography__map {
  position: relative;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  min-height: 70rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  /* вылет за правый padding страницы и за край viewport */
  margin-right: calc(-1 * var(--page-pad));
  z-index: 0;
}

.geography__map-canvas {
  position: relative;
  width: calc(100% + var(--page-pad) + 28vw);
  max-width: none;
  flex-shrink: 0;
  aspect-ratio: 1252 / 676;
}

@media (min-width: 1101px) {
  .geography__map-canvas {
    margin-left: 2rem;
  }
}

.geography__map-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.geography__map-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.geography__map-art > svg.geography__map-svg {
  pointer-events: auto;
}

.map-region {
  transition: fill var(--dur-slow) var(--ease-out), stroke var(--dur-slow) var(--ease-out);
  pointer-events: auto;
  cursor: pointer;
}

.map-region.is-active {
  fill: #2f3839 !important;
  stroke: #2f3839 !important;
}

.map-pin {
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: none;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
  transition: transform var(--dur-slow) var(--ease-out);
}

.map-pin.is-active {
  transform: translate(-50%, -50%) scale(1.08);
}

.map-pin img {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
}

.map-chip-stack {
  position: absolute;
  left: 2.36%;
  top: 52.4%;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: var(--space-8);
  z-index: 3;
  /* якорь — низ стека: первый чип на месте, следующие выше */
  transform: translateY(-100%);
  transition: left var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out);
}

.map-chip {
  position: relative;
  left: auto;
  top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background: var(--bg-main);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-m);
  min-width: 19.9rem;
  max-width: 28rem;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: 0 0.4rem 0.8rem rgba(12, 12, 13, 0.05), 0 1.6rem 3.2rem rgba(12, 12, 13, 0.1);
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform var(--dur) var(--ease-out);
}

.map-chip:hover,
.map-chip:focus-visible {
  transform: scale(1.04);
}

.map-chip.is-expanded,
.map-chip.is-expanded:hover,
.map-chip.is-expanded:focus-visible {
  border-color: transparent;
  transform: none;
}

.map-chip__icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
}

.map-chip__body {
  min-width: 0;
}

.map-chip__title {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--text-primary);
}

.map-chip__addr,
.map-chip__line {
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  color: var(--text-secondary);
  margin: 0.4rem 0 0;
}

.map-chip__line--title {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--text-primary);
}

.map-chip__line--title + .map-chip__line {
  margin-top: 0.4rem;
}

/* ========== BLOG ========== */
.blog {
  padding: var(--space-20);
  display: grid;
  grid-template-columns: 55.2rem 1fr;
  gap: var(--gap);
  align-items: start;
}

.blog__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  max-width: 55.2rem;
  padding-right: var(--space-32);
}

.blog__intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.blog__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.blog__cards > .news-card {
  border-bottom: 1px solid var(--stroke-light);
  padding-bottom: var(--space-16);
}

.news-card {
  display: grid;
  grid-template-columns: 19.2rem minmax(0, 1fr);
  gap: var(--space-20);
  align-items: start;
  min-height: 20.8rem;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-sizing: border-box;
  transition: height var(--dur-fast) var(--ease-out), min-height var(--dur-fast) var(--ease-out);
}

.news-card--compact {
  height: 10.8rem;
  min-height: 10.8rem;
}

.news-card--compact:hover,
.news-card--compact:focus-visible {
  height: 20.8rem;
  min-height: 20.8rem;
}

.news-card__media {
  position: relative;
  width: 19.2rem;
  height: 19.2rem;
  flex-shrink: 0;
  background: var(--bg-dark);
  overflow: hidden;
  border-radius: var(--radius-m);
  transition: height var(--dur-fast) var(--ease-out);
}

.news-card--compact .news-card__media {
  height: 9.2rem;
}

.news-card--compact:hover .news-card__media,
.news-card--compact:focus-visible .news-card__media {
  height: 19.2rem;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__date {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  background: rgb(255 255 255 / 24%);
  border: 1px solid #c5c5c54a;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  border-radius: var(--radius-s);
  padding: var(--space-8);
  text-align: center;
  min-width: 6rem;
  transition: background var(--dur-fast) var(--ease-out);
}


.news-card__day {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  display: block;
  color: var(--text-white);
}

.news-card__month {
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-white);
}

.news-card__body {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
}

.news-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  flex-shrink: 0;
}

.news-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-xxl);
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  background: var(--bg-dark);
  color: var(--text-white);
  white-space: nowrap;
}

.news-card__title {
  flex-shrink: 0;
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-primary);
}

.news-card__excerpt {
  font-size: var(--fs-text-m);
  line-height: var(--lh-text-m);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card--compact .news-card__excerpt {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition: max-height var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.news-card--compact:hover .news-card__excerpt,
.news-card--compact:focus-visible .news-card__excerpt {
  max-height: 8.8rem;
  opacity: 1;
}

/* ========== CONTACT ========== */
.contact {
  padding: var(--space-20);
  display: grid;
  grid-template-columns: 55.2rem minmax(0, 1fr);
  gap: var(--gap);
  min-height: 53.2rem;
  align-items: start;
}

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

.contact__visual {
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--bg-dark);
  width: 100%;
  max-width: 53.2rem;
  height: 49.2rem;
  min-height: 49.2rem;
  position: relative;
}

.contact__form {
  background: var(--bg-main);
  border-radius: 0;
  padding: 0 0 0 var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  min-height: 49.2rem;
}

.contact__form-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.contact__form-label {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-tertiary);
}

.contact__form-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-primary);
}

.contact__form-desc {
  font-size: var(--fs-text-l);
  line-height: var(--lh-text-l);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-secondary);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-primary);
}

.field input,
.field textarea {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-s);
  padding: var(--space-12) var(--space-16);
  font-size: var(--fs-text-m);
  line-height: var(--lh-text-m);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--dur) var(--ease-out);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-tertiary);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--stroke-secondary);
}

.field.is-invalid input,
.field.is-invalid textarea,
.field input.is-invalid,
.field textarea.is-invalid {
  border-color: #c53030;
}

.field.is-invalid input:focus,
.field.is-invalid textarea:focus {
  border-color: #c53030;
}

.field__error {
  margin: 0;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: #c53030;
}

.field__error[hidden] {
  display: none;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  min-height: 32rem;
  text-align: center;
  width: 100%;
  flex: 1;
  margin: auto;
}

.form-success[hidden] {
  display: none;
}

.form-success__icon {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--bg-brand);
  border: 1px solid var(--buttons-main);
  color: var(--buttons-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
  flex-shrink: 0;
}

.form-success__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-primary);
}

.form-success__desc {
  margin: 0;
  font-size: var(--fs-text-l);
  line-height: var(--lh-text-l);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-secondary);
}

.form-success .btn {
  margin-top: var(--space-8);
}

.contact__form.is-success,
.vacancy-form.is-success {
  justify-content: center;
  align-items: center;
}

.contact__form.is-success .form-success,
.vacancy-form.is-success .form-success {
  min-height: 0;
}

.contact__form.is-success > :not(.form-success),
.modal__form.is-success > :not(.form-success),
.vacancy-form.is-success > :not(.form-success) {
  display: none;
}

.vacancy__apply:has(.vacancy-form.is-success) .vacancy__apply-head {
  display: none;
}

.vacancy__apply:has(.vacancy-form.is-success) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32rem;
}

.modal:has(.modal__form.is-success) .modal__top > div:first-child {
  display: none;
}

.modal:has(.modal__form.is-success) .modal__close {
  display: none;
}

.modal:has(.modal__form.is-success) .modal__top {
  display: none;
}

.modal:has(.modal__form.is-success) .modal__title,
.modal:has(.modal__form.is-success) .modal__desc {
  display: none;
}

.modal__form.is-success {
  justify-content: center;
  align-items: center;
  min-height: 28rem;
}

.field textarea {
  min-height: 8rem;
  height: 8rem;
  resize: vertical;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  margin-top: auto;
}

.form-legal,
.modal__legal.form-legal {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-primary);
  max-width: none;
  cursor: pointer;
}

.form-legal input[type="checkbox"],
.modal__legal input[type="checkbox"] {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--buttons-main);
  cursor: pointer;
}

.form-legal a,
.modal__legal a {
  color: var(--text-brand-heavy, #d5b02a);
  text-decoration: none;
}

.form-legal a:hover,
.modal__legal a:hover {
  text-decoration: underline;
}

.form-legal.is-invalid,
.modal__legal.is-invalid {
  color: #c53030;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  color: var(--text-secondary);
  max-width: 36rem;
}

.checkbox input {
  margin-top: 0.2rem;
  accent-color: var(--buttons-main);
}

.checkbox a {
  text-decoration: underline;
}

/* ========== FOOTER ========== */
.footer {
  background: var(--buttons-main);
  border-radius: var(--radius-l);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  color: var(--text-white);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-40);
}

.footer__brand {
  max-width: 25.9rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.footer__brand .logo__mark {
  width: 4rem;
  height: 4rem;
}

.footer__brand .logo__text {
  font-size: var(--fs-h4);
  line-height: var(--lh-h5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  color: var(--text-white);
}

.footer__about {
  font-size: var(--fs-text-m);
  line-height: var(--lh-text-m);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  color: var(--text-white);
}

.footer__cols {
  display: flex;
  flex: 1;
  max-width: 65.2rem;
  justify-content: space-between;
  gap: var(--space-20);
}

.footer__col-title {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  margin-bottom: var(--space-8);
  padding: var(--space-4) 1rem;
  color: var(--text-white);
}

.footer__col a,
.footer__col span {
  display: block;
  padding: var(--space-4) 1rem;
  font-size: var(--fs-text-m);
  line-height: var(--lh-text-m);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls);
  font-synthesis: none;
  color: var(--text-tertiary);
  transition: color var(--dur) var(--ease-out);
}

.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--text-brand);
  font-weight: var(--fw-regular);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  font-size: var(--fs-text-s);
  line-height: var(--lh-text-s);
  color: var(--text-secondary);
}

.footer__bottom a:hover,
.footer__bottom a:focus-visible {
  color: var(--text-brand);
}