/* RU homepage only. Same full-width composition as ecangtong.cn, using the
   existing Russian artwork. No changes to other pages, scripts or tariffs. */
html[lang="ru"] .ru-scene-page .hero {
  --scene-art: url("assets/hero-warehouse-map-wide-ru-20260914.webp");
  isolation: isolate;
  min-height: 1028px !important;
  background: #061323;
  padding: 0;
}
html[lang="ru"] .ru-scene-page .hero > .hero-bg {
  position: absolute;
  inset: 128px 0 auto;
  width: 100%;
  height: 900px;
  margin: 0;
  background: var(--scene-art) 62% 35% / cover no-repeat !important;
  filter: none;
  opacity: 1;
  z-index: 0;
}
html[lang="ru"] .ru-scene-page .hero > .hero-bg::before { display: none !important; }
html[lang="ru"] .ru-scene-page .hero > .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(3,10,20,.78),rgba(3,10,20,.52) 22%,transparent 49%,rgba(3,10,20,.08)),
    linear-gradient(0deg,#061323cc,transparent 19%,transparent 86%,#06132338);
  pointer-events: none;
}
/* The artwork already contains the exact neon map. Do not overlay the old map. */
html[lang="ru"] .ru-scene-page .hero > .hero-map,
html[lang="ru"] .ru-scene-page .hero > .warehouse-labels,
html[lang="ru"] .ru-scene-page .hero > .truck-brand-mark { display: none !important; }
html[lang="ru"] .ru-scene-page .hero > .hero-grid {
  display: grid;
  position: relative;
  z-index: 1;
  width: calc(100% - 96px);
  max-width: 2100px;
  min-height: 1028px;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr) 420px;
  gap: 24px;
  margin: 0 auto;
  padding: 184px 0 50px;
  align-items: start;
}
html[lang="ru"] .ru-scene-page .hero-grid > .hero-copy {
  grid-column: 1;
  min-width: 0;
  max-width: 510px;
  margin-left: clamp(0px,calc((100vw - 1600px) * .4),128px);
  padding: 0;
  text-shadow: 0 2px 18px #0009;
}
html[lang="ru"] .ru-scene-page .hero-copy h1 { font-size: 44px; line-height: 1.13; margin-bottom: 24px; }
html[lang="ru"] .ru-scene-page .hero-copy .lead { max-width: none; font-size: 18px; line-height: 1.55; margin-bottom: 28px; }
html[lang="ru"] .ru-scene-page .hero-copy .city-pills { flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
html[lang="ru"] .ru-scene-page .hero-copy .city-pills a { padding: 11px 12px; min-height: 44px; font-size: 14px; }
html[lang="ru"] .ru-scene-page .hero-copy .hero-benefits { gap: 14px; margin-top: 24px; }
html[lang="ru"] .ru-scene-page .hero-copy .hero-benefits > div { min-width: 0; padding-right: 8px; }
html[lang="ru"] .ru-scene-page .hero-grid > .hero-calc { grid-column: 3; width: 420px; max-width: 100%; margin: 0; }
html[lang="ru"] .ru-scene-page .hero-calc .calc-top h2 { font-size: 25px; }
html[lang="ru"] .ru-scene-page .hero-calc .calc-tabs button { min-width: 0; overflow-wrap: normal; font-size: 10px; }
@media (min-width: 1600px) {
  html[lang="ru"] .ru-scene-page .hero-calc .calc-result { grid-template-columns: minmax(0,1fr); gap: 12px; }
  html[lang="ru"] .ru-scene-page .hero-calc .calc-result strong { white-space: nowrap; }
  html[lang="ru"] .ru-scene-page .hero-calc .calc-result .btn { width: 100%; }
}

/* A full-size calculator is more usable below the scene on laptops/tablets.
   Its anchor, fields and all five tabs are preserved. */
@media (min-width: 1181px) and (max-width: 1599px) {
  html[lang="ru"] .ru-scene-page .hero { min-height: 0 !important; }
  html[lang="ru"] .ru-scene-page .hero > .hero-bg { top: 128px; height: 780px; background-position: 62% 35% !important; }
  html[lang="ru"] .ru-scene-page .hero > .hero-grid {
    width: calc(100% - 64px);
    min-height: 0;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(724px, auto) auto;
    padding: 184px 0 32px;
    gap: 24px;
  }
  html[lang="ru"] .ru-scene-page .hero-grid > .hero-copy { max-width: min(34vw,450px); }
  html[lang="ru"] .ru-scene-page .hero-copy h1 { font-size: clamp(30px,2.6vw,40px); }
  html[lang="ru"] .ru-scene-page .hero-copy .lead { font-size: 16px; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-benefits { grid-template-columns: 1fr; gap: 12px; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-benefits > div { border-left: 0; display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; min-height: 0; padding: 0; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-benefit-icon { position: static; grid-column: 1; grid-row: 1 / 3; margin: 0; width: 26px; height: 26px; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-benefits strong { grid-column: 2; grid-row: 1; margin: 0; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-benefits span:not(.hero-benefit-icon) { grid-column: 2; grid-row: 2; }
  html[lang="ru"] .ru-scene-page .hero-grid > .hero-calc { grid-column: 1; grid-row: 2; width: min(100%,760px); justify-self: center; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-actions { display: flex; gap: 8px; margin: 20px 0; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-actions a { font-size: 13px; padding: 10px 12px; min-height: 44px; }
}

/* Mobile keeps the compact, separate scene: no controls can cover the gates. */
@media (max-width: 1180px) {
  html[lang="ru"] .ru-scene-page .hero { display: grid; grid-template-columns: 14px minmax(0,1fr) 14px; row-gap: 10px; padding: 112px 0 22px; min-height: 0 !important; }
  html[lang="ru"] .ru-scene-page .hero > .hero-grid,
  html[lang="ru"] .ru-scene-page .hero > .hero-grid > .hero-copy { display: contents !important; }
  html[lang="ru"] .ru-scene-page .hero-copy h1 { grid-column: 2; grid-row: 1; font-size: clamp(28px,7vw,40px); line-height: 1.13; margin: 0; }
  html[lang="ru"] .ru-scene-page .hero-copy .lead { grid-column: 2; grid-row: 2; max-width: none; font-size: 15px; line-height: 1.45; margin: 0; }
  html[lang="ru"] .ru-scene-page .hero > .hero-bg {
    position: relative; inset: auto; grid-column: 1/-1; grid-row: 3;
    width: 100%; height: clamp(200px,56.28vw,560px); margin: 2px 0 4px;
    background: var(--scene-art) center 35% / cover no-repeat !important;
  }
  html[lang="ru"] .ru-scene-page .hero > .hero-bg::after { background: linear-gradient(180deg,#061323 0,transparent 9%,transparent 91%,#061323 100%); }
  html[lang="ru"] .ru-scene-page .hero-copy .city-pills { grid-column: 2; grid-row: 4; margin: 0; gap: 6px; }
  html[lang="ru"] .ru-scene-page .hero-copy .city-pills a { min-height: 44px; font-size: 12px; padding: 8px; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-actions { grid-column: 2; grid-row: 5; display: flex; margin: 0; }
  html[lang="ru"] .ru-scene-page .hero-copy .hero-benefits { grid-column: 2; grid-row: 6; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 4px 0 0; gap: 10px; max-width: none; }
  html[lang="ru"] .ru-scene-page .hero-grid > .hero-calc { grid-column: 2; grid-row: 7; width: min(100%,760px); justify-self: center; margin: 0; }
  html[lang="ru"] .ru-scene-page .hero-calc .calc-top h2 { font-size: 23px; }
}
@media (max-width: 760px) {
  html[lang="ru"] .ru-scene-page .hero { padding-top: 96px; }
  html[lang="ru"] .ru-scene-page .hero-calc .calc-tabs button { font-size: 12px; }
}

/* Shared refinements: keep city buttons in normal flow, with a real gap to icons. */
html[lang="ru"] .ru-scene-page .hero-copy .city-pills { transform: none; }
html[lang="ru"] .ru-scene-page .hero > .hero-bg::after { display: block !important; }
html[lang="ru"] .ru-scene-page .hero-grid > .hero-calc { min-width: 0; }
html[lang="ru"] .ru-scene-page .hero-calc .calc-tabs svg { flex: 0 0 auto; overflow: hidden; }
@media (max-width: 1180px) {
  html[lang="ru"] .ru-scene-page .hero-calc .calc-tabs {
    display: flex;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
  }
  html[lang="ru"] .ru-scene-page .hero-calc .calc-tabs button {
    flex: 0 0 116px;
    min-width: 116px;
  }
}

@media (min-width: 1181px) {
  html[lang="ru"] .ru-scene-page .hero > .hero-bg,
  html[lang="ru"] .ru-scene-page .corporate-hero::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 28px, rgba(0,0,0,.55) 78px, #000 150px, #000 calc(100% - 260px), rgba(0,0,0,.8) calc(100% - 190px), rgba(0,0,0,.36) calc(100% - 95px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.12) 28px, rgba(0,0,0,.55) 78px, #000 150px, #000 calc(100% - 260px), rgba(0,0,0,.8) calc(100% - 190px), rgba(0,0,0,.36) calc(100% - 95px), transparent 100%);
  }
}

/* Informational pages retain their own links instead of adding a calculator. */
html[lang="ru"] .ru-scene-page .corporate-main { padding-top: 0; }
html[lang="ru"] .ru-scene-page .corporate-hero {
  position: relative;
  display: block;
  isolation: isolate;
  min-height: 1028px;
  background: #061323;
}
html[lang="ru"] .ru-scene-page .corporate-hero::before {
  content: "";
  position: absolute;
  inset: 128px 0 auto;
  width: 100%;
  height: 900px;
  background:
    linear-gradient(90deg,rgba(3,10,20,.78),rgba(3,10,20,.52) 22%,transparent 49%,rgba(3,10,20,.08)),
    linear-gradient(0deg,#061323cc,transparent 19%,transparent 86%,#06132338),
    url("/assets/hero-warehouse-map-wide-ru-20260914.webp") 62% 35% / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
html[lang="ru"] .ru-scene-page .corporate-hero::after { display: none; }
html[lang="ru"] .ru-scene-page .corporate-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(100% - 96px);
  max-width: 2100px;
  min-height: 1028px;
  margin: 0 auto;
  padding: 184px 0 50px;
  text-shadow: 0 2px 18px #0009;
}
html[lang="ru"] .ru-scene-page .corporate-hero-inner > * {
  width: 510px;
  max-width: 100%;
  min-width: 0;
  margin-left: clamp(0px,calc((100vw - 1600px) * .4),128px);
}
html[lang="ru"] .ru-scene-page .corporate-hero h1 { font-size: 44px; line-height: 1.13; }
html[lang="ru"] .ru-scene-page .corporate-hero-lead { font-size: 18px; line-height: 1.55; }
html[lang="ru"] .ru-scene-page .hero-contact-line { gap: 12px 20px; }

@media (min-width: 1181px) and (max-width: 1599px) {
  html[lang="ru"] .ru-scene-page .corporate-hero { min-height: 908px; }
  html[lang="ru"] .ru-scene-page .corporate-hero::before { height: 780px; }
  html[lang="ru"] .ru-scene-page .corporate-hero-inner { min-height: 908px; width: calc(100% - 64px); }
  html[lang="ru"] .ru-scene-page .corporate-hero-inner > * { max-width: min(34vw,450px); }
  html[lang="ru"] .ru-scene-page .corporate-hero h1 { font-size: clamp(30px,2.6vw,40px); }
  html[lang="ru"] .ru-scene-page .corporate-hero-lead { font-size: 16px; }
}

@media (max-width: 1180px) {
  html[lang="ru"] .ru-scene-page .corporate-hero { min-height: 0; }
  html[lang="ru"] .ru-scene-page .corporate-hero::before { display: none; }
  html[lang="ru"] .ru-scene-page .corporate-hero-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px;
    width: calc(100% - 28px);
    min-height: 0;
    padding: 112px 0 22px;
  }
  html[lang="ru"] .ru-scene-page .corporate-hero-inner > * { width: auto; max-width: none; margin: 0; }
  html[lang="ru"] .ru-scene-page .corporate-kicker { grid-row: 1; }
  html[lang="ru"] .ru-scene-page .corporate-hero h1 { grid-row: 2; font-size: clamp(28px,7vw,40px); line-height: 1.13; }
  html[lang="ru"] .ru-scene-page .corporate-hero-lead { grid-row: 3; font-size: 15px; line-height: 1.45; }
  html[lang="ru"] .ru-scene-page .corporate-hero-inner::after {
    content: "";
    display: block;
    grid-column: 1;
    grid-row: 4;
    height: clamp(200px,56.28vw,560px);
    margin: 2px -14px 4px;
    background: linear-gradient(180deg,#061323 0,transparent 9%,transparent 91%,#061323 100%),
      url("/assets/hero-warehouse-map-wide-ru-20260914.webp") center 35% / cover no-repeat;
    pointer-events: none;
  }
  html[lang="ru"] .ru-scene-page .corporate-hero-inner > .hero-contact-line { grid-row: 5; margin: 0; }
}
@media (max-width: 760px) {
  html[lang="ru"] .ru-scene-page .corporate-hero-inner { padding-top: 96px; }
}