/* ==========================================================================
   GREEN AUTO TRUCK — FINAL MAIN STYLESHEET — TABLET V3

   SECTION MAP
   01 — CORE / TOKENS / BASE
   02 — BUTTONS
   03 — HEADER — BASE / DESKTOP
   04 — HERO
   05 — CATALOG SEARCH / FILTER
   06 — TRUCK CARDS GRID
   07 — MODEL DETAIL PAGE
   08 — HOME — CATEGORIES / DIRECTIONS
   09 — CALCULATOR CTA
   10 — ARTICLE / CONTENT
   11 — LEAD FORM
   12 — FOOTER
   13 — HOME REUSABLE COMPONENTS
   14 — POPULAR DIRECTIONS / ПОСТАВКИ ИЗ АЗИИ
   15 — VIDEO MODAL
   16 — GLOBAL RESPONSIVE
   17 — VIDEO SWIPERS — VK / YOUTUBE
   18 — MOBILE MENU / CONTACT DRAWER
   19 — COOKIE NOTICE
   20 — REVIEWS SWIPER
   21 — ALL REVIEWS PAGE
   22 — BLOG / NEWS
   23 — ABOUT PAGE
   24 — REVIEW DETAIL
   25 — HOME HOW WE WORK SPACING
   26 — MOBILE CATALOG / MODEL FINAL
   27 — MOBILE MODEL LEAD / MOCKUP ORDER
   28 — DESIGNER MOBILE HOME / HEADER / FOOTER
   29 — HOME HERO MOBILE
   30 — HOME FINAL DESIGN ALIGNMENT
   31 — MOBILE MENU TOGGLER FIX
   32 — MOBILE HORIZONTAL OVERFLOW
   33 — VIDEO / HOME HERO MOBILE FIXES
   34 — CATEGORY HERO / MOBILE MENU CONTACT FIX
   35 — CONTACTS PAGE
   36 — LEAD POPUP MODAL
   37 — TABLET RESPONSIVE FINAL V3
   38 — REVIEWS SLIDER NAVIGATION FINAL
   39 — FOOTER SOCIAL ICONS FINAL

   Правило обновления:
   заменяйте код строго между
   "SECTION XX START" и "SECTION XX END".
   ========================================================================== */

/* ==========================================================================
   SECTION 01 START — CORE / TOKENS / BASE
   ========================================================================== */


:root {
  --bg-black: #0a0d0b;
  --bg-dark: #121512;
  --bg-card: #181c19;
  --bg-card-2: #1f2420;
  --green: #158a44;
  --green-light: #2ecc63;
  --green-deep: #062f11;
  --text-white: #ffffff;
  --text-muted: #a7afaa;
  --text-dim: #fff;
  --border: #262b27;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Black_0.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



/* Italic */

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Medium Italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Bold Italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'AA Stetica';
  src: url('./fonts/AA Stetica Light Italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-black);
  color: var(--text-white);
  font-family: 'AA Stetica', sans-serif;
  font-weight: 500;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'AA Stetica', sans-serif;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}

.container-xl {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 20px;
}

::selection {
  background: var(--green);
  color: #fff;
}

/* focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 2px;
}

/* ==========================================================================
   SECTION 01 END — CORE / TOKENS / BASE
   ========================================================================== */

/* ==========================================================================
   SECTION 02 START — BUTTONS
   ========================================================================== */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #00a83e 0%, #005f20 100%);
  background-size: 160% 100%;
  background-position: 0% 0%;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  padding: 14px 40px;
  border-radius: 12px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, background-position .5s ease;
  white-space: nowrap;
  font-family: 'AA Stetica', sans-serif;
}

.btn-brand2 {
  font-weight: 400;
  font-size: 20px;
  padding-top: 22px;
  padding-bottom: 22px;
  padding: 14px 50px;
}

.btn-brand:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0, 168, 62, .45);
  background-position: 100% 0%;
}

.btn-brand:active {
  transform: translateY(-1px) scale(1.01);
  transition-duration: .1s;
}

.btn-outline-light-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #3a413c;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 27px;
  border-radius: 10px;
  transition: .2s ease;
}

.btn-outline-light-custom:hover {
  border-color: var(--green-light);
  color: var(--green-light);
}

.btn-dark-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #343434;
  border: 1px solid #343434;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 10px;
  transition: .2s ease;
  text-decoration: none;
}

.btn-dark-pill:hover {
  border-color: #515151;
  color: #fff;
}

/* ==========================================================================
   SECTION 02 END — BUTTONS
   ========================================================================== */

/* ==========================================================================
   SECTION 03 START — HEADER — BASE / DESKTOP
   ========================================================================== */
.topbar {
  background: #000;
  padding: 22px 36px;
  border-bottom: 1px solid #14170f;
}

.topbar .container-xl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: 'AA Stetica', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
}

.brand-logo span {
  color: var(--green-light);
  font-size: 12px;
  letter-spacing: .25em;
  font-weight: 700;
  margin-top: 2px;
}

.brand-tagline {
  font-size: 12px;
  color: #fff;
  max-width: 280px;
  font-weight: 400;
  font-family: 'AA Stetica', sans-serif;

  text-transform: uppercase;

}

.topbar-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.topbar-mid .report-label {
  font-size: 11px;
  color: var(--text-dim);
}

.social-row {
  display: flex;
  gap: 40px;
  background: url(../img/bg_head.png);
  border-radius: 10px;
  padding: 12px 30px 12px 40px;
  background-size: cover;
  background-repeat: no-repeat;
}

.social-row a {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  transition: transform .25s ease;
}

.social-row a img {
  transition: opacity .25s ease;
}

.social-row a::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: var(--green-light);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.social-row a:nth-child(1)::after {
  -webkit-mask-image: url(../img/youtube.svg);
  mask-image: url(../img/youtube.svg);
}

.social-row a:nth-child(2)::after {
  -webkit-mask-image: url(../img/rutube.svg);
  mask-image: url(../img/rutube.svg);
}

.social-row a:nth-child(3)::after {
  -webkit-mask-image: url(../img/vk.svg);
  mask-image: url(../img/vk.svg);
}

.social-row a:nth-child(4)::after {
  -webkit-mask-image: url(../img/telegrm.svg);
  mask-image: url(../img/telegrm.svg);
}

.social-row a:hover {
  transform: translateY(-3px) scale(1.08);
}



.social-row a:hover::after {
  opacity: 1;
}

.topbar-phone {
  text-align: right;
}

.topbar-phone .phone-num {
  font-size: 20px;
  color: #fff;
  font-family: 'AA Stetica', sans-serif;
  font-weight: 500;
}

.topbar-phone .phone-sub {
  font-size: 12.5px;
  color: #fff;
  font-weight: 300;
}

.topbar-cta {
  margin-left: 6px;
}

/* Nav (merged into .hero on the homepage — transparent so the hero background shows through) */
.main-nav {
  background: url(../img/photo/ng_bot.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.main-nav .container-xl {
  display: flex;
  gap: 8px;
  padding-top: 19px;
  padding-bottom: 17px;
  flex-wrap: wrap;
}

.main-nav a {
  font-size: 14.5px;
  font-weight: 300;
  color: #fff;
  background: url(../img/bg_btns.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 11px 20px;
  border-radius: 9px;
  transition: .2s;
  font-family: 'AA Stetica', sans-serif;

}

.main-nav a.active {
  background: url(../img/photo/bg_menu.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

.main-nav a:not(.active):hover {
  background: url(../img/photo/bg_menu.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

.navbar-toggler-custom {
  display: none;
  position: relative;
  z-index: 201;
  background: transparent;
  border: 1px solid #2a302b;
  border-radius: 8px;
  width: 42px;
  height: 42px;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION 03 END — HEADER — BASE / DESKTOP
   ========================================================================== */

/* ==========================================================================
   SECTION 04 START — HERO
   ========================================================================== */

.hero {
  position: relative;
  background-image: url(../img/photo/toyota-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-bottom: 1px solid #10140f;
}

.hero-intro {
  padding-left: 40px;
}

/* --------------------------------------------------------------------------
   HERO backgrounds for internal category pages
   -------------------------------------------------------------------------- */

.hero-trucks {
  background-image: url(../img/photo/trucks-bg.png) !important;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.hero-commercial {
  background-image: url(../img/photo/coomercial-bg.png) !important;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.hero-special {
  background-image: url(../img/photo/special-bg.png) !important;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.hero-cars {
  background-image: url(../img/photo/auto-bg.png) !important;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   HOME HERO — static platform + animated truck layers

   hero-stage.jpg — empty platform/background
   hero-neon.png  — front neon/reflection layer

   The truck itself is NOT hardcoded here. main.phtml assigns the image from
   the UMI hero guide field `bg` as inline background-image on .hero-truck.
   -------------------------------------------------------------------------- */

.hero-home {
  background-image: url(../img/photo/hero-stage.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-stage,
.hero-stage>* {
  position: absolute;
  inset: 0;
  background-size: inherit;
  background-position: inherit;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero-truck {
  --shift: 1;
  opacity: 0;
  transform: translateX(calc(var(--shift) * 22%));
  transition:
    transform .9s cubic-bezier(.4, 0, .2, 1),
    opacity .9s ease;
  will-change: transform, opacity;
}

.hero-truck.is-active {
  opacity: 1;
  transform: none;
}

.hero-neon {
  background-image: url(../img/photo/hero-neon.png);
}

.hero-home>.container-xl {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-truck {
    transform: none;
    transition: opacity .4s ease;
  }
}

/* --------------------------------------------------------------------------
   HERO content
   -------------------------------------------------------------------------- */

.hero>.container-xl {
  padding-top: 30px;
  padding-bottom: 70px;
}

.hero-eyebrow {
  color: var(--green-light);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: 25px;
  line-height: 1.25;
  font-weight: 500;
  color: #fff;
  margin-bottom: 18px;
  max-width: 612px;
}

.hero h1 .accent {
  color: var(--green);
}

.hero-sub {
  color: var(--green);
  font-size: 17px;
  font-weight: 500;
  max-width: 520px;
  margin-bottom: 26px;
  line-height: 1.45;
}

.hero-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 580px;
  margin-bottom: 30px;
}

.feature-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(14, 25, 20, .45);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 14px 18px;
  backdrop-filter: blur(8px);
}

.feature-num {
  font-size: 100px;
  font-weight: 700;
  color: rgba(255, 255, 255, .08);
  line-height: 1;
  margin-right: 12px;
  user-select: none;
}

.feature-text {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  flex: 1;
}

.feature-icon {
  width: 79px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 12px;
}

.feature-icon img {
  width: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   HERO video slider
   -------------------------------------------------------------------------- */

.hero-media {
  position: relative;
  max-width: 320px;
  margin: 0 0 0 54px;
}

.hero-swiper {
  width: 100%;
}

.hero-swiper .swiper-slide {
  height: auto;
}

.hero-video-card {
  position: relative;
  z-index: 3;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  aspect-ratio: 291 / 515;
  width: 100%;
}

.hero-video-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-swiper .swiper-slide-active .hero-video-card img {
  animation: heroKenBurns 5s ease-out forwards;
}

@keyframes heroKenBurns {
  from {
    transform: scale(1.12);
  }

  to {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Shared play button
   -------------------------------------------------------------------------- */

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: transparent;
  color: #0c0f0d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: none;
  cursor: pointer;
  transition: .2s;
  background-image: url(../img/photo/play.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Trust-card promo strip: play button only appears on thumb hover */
.trust-card_section .play-btn {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.75);
  pointer-events: none;
}

.trust-card_section .video-thumb:hover .play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   HERO arrows
   -------------------------------------------------------------------------- */

.hero-slider-arrows {
  position: absolute;
  bottom: 24px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.hero-slider-arrows.left {
  right: calc(100% + 20px);
  left: auto;
}

.hero-slider-arrows.right {
  left: calc(100% + 20px);
  right: auto;
}

.arrow-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 13, 11, .7);
  border: 1px solid #2b322c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .2s;
}

.arrow-btn:hover {
  background: var(--green);
}

#heroPrev,
#heroNext {
  background: transparent;
  border: none;
  padding: 0;
}

#heroPrev img,
#heroNext img {
  width: 100%;
  height: 100%;
  display: block;
}

#heroPrev img {
  transform: rotate(180deg);
}

#heroPrev:hover,
#heroNext:hover {
  background: transparent;
  transform: scale(1.05);
}

#heroPrev.swiper-button-disabled,
#heroNext.swiper-button-disabled,
#heroPrev[disabled],
#heroNext[disabled] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
  transform: none;
}

/* ==========================================================================
   SECTION 04 END — HERO
   ========================================================================== */

/* ==========================================================================
   SECTION 05 START — CATALOG SEARCH / FILTER
   ========================================================================== */
.filter-section {
  background: #f2f3f1;
  padding: 36px 0 46px;
}

.search-box {
  background: #ebebeb;
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  border: none;
}

.search-box i {
  color: #555;
  font-size: 16px;
}

.search-box input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  font-family: inherit;
}

.search-box input::placeholder {
  color: #111;
  font-weight: 700;
}

.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ebebeb;
  border: none;
  color: #111;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .15s ease;
}

.filter-pill.is-active {
  background: #00a83e;
  color: #fff;
}

.filter-pill.is-active i {
  color: #fff;
}

.filter-pill i {
  font-size: 11px;
  color: #111;
  margin-left: 2px;
}

.filter-apply {
  background: #00a83e;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 10px;
  cursor: pointer;
  margin-left: 4px;
  transition: .15s ease;
}

.filter-apply:hover {
  background: #008f35;
}

.filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
  width: 220px;
  padding: 8px;
  z-index: 50;
  display: none;
}

.filter-dropdown.open {
  display: block;
}

.filter-dropdown .fd-close {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  color: #9aa09a;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
}

.filter-dropdown .fd-item {
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  color: #161816;
  cursor: pointer;
}

.filter-dropdown .fd-item:hover {
  background: #f3f4f2;
}

.filter-dropdown .fd-item.active {
  background: #eef1ee;
  color: #0f1210;
}

/* ==========================================================================
   SECTION 05 END — CATALOG SEARCH / FILTER
   ========================================================================== */

/* ==========================================================================
   SECTION 06 START — TRUCK CARDS GRID
   ========================================================================== */
.truck-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 30px;
}

.truck-card {
  position: relative;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  border: none;
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease;
}

.truck-card:hover {
  transform: translateY(-4px);
  text-decoration: none;
}

.truck-card .tc-img {
  aspect-ratio: 16/12;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #eceeec;
}

.truck-card .tc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.truck-card:hover .tc-img img {
  transform: scale(1.04);
}

.tc-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: #00a83e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  z-index: 2;
}

.tc-title {
  padding: 12px 2px 0;
  font-weight: 800;
  font-size: 18px;
  color: #000;
  line-height: 1.3;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

/* ==========================================================================
   SECTION 06 END — TRUCK CARDS GRID
   ========================================================================== */

/* ==========================================================================
   SECTION 07 START — MODEL DETAIL PAGE
   ========================================================================== */
.model-detail-section {
  background: #f7f9f7;
  padding: 50px 0 70px;
}

.model-gallery {
  position: relative;
}

.model-main-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16/11;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
}

.model-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: .2s ease;
  z-index: 5;
}

.gallery-nav-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

.gallery-nav-btn.prev {
  left: 16px;
}

.gallery-nav-btn.next {
  right: 16px;
}

.model-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.thumb-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/11;
  cursor: pointer;
  border: 2px solid transparent;
  transition: .2s ease;
  background: #fff;
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-item.active,
.thumb-item:hover {
  border-color: #00a83e;
}

.thumb-more {
  position: relative;
  background: #1f9d55;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  aspect-ratio: 16/11;
  cursor: pointer;
  text-decoration: none;
  padding: 8px;
  overflow: hidden;
}

.thumb-more img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.thumb-more span {
  position: relative;
  z-index: 2;
}

.model-info {
  padding-left: 28px;
  max-width: 540px;
}

@media (max-width: 991px) {
  .model-info {
    padding-left: 0;
    margin-top: 24px;
    max-width: 100%;
  }
}

.model-info h2 {
  font-size: 26px;
  font-weight: 800;
  color: #000;
  line-height: 1.3;
  margin-bottom: 12px;
}

.model-price {
  font-size: 16px;
  font-weight: 700;
  color: #00a83e;
  margin-bottom: 26px;
}

.model-specs {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 32px;
}

.spec-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: baseline;
  font-size: 15px;
  gap: 12px;
}

.spec-name {
  color: #707572;
  font-weight: 500;
}

.spec-val {
  color: #000;
  font-weight: 800;
  text-align: left;
}

/* ==========================================================================
   SECTION 07 END — MODEL DETAIL PAGE
   ========================================================================== */

/* ==========================================================================
   SECTION 08 START — HOME — CATEGORIES / DIRECTIONS
   ========================================================================== */
.section-dark {
  background: #000;
  padding: 60px !important;
}

.section-dark2 {
  padding: 0 !important;
}

.trust-card_section {
  background: #111416FF;
  padding-top: 115px !important;
  padding-bottom: 115px !important;
}

.services {
  background: url(../img/photo/services.png);
  background-repeat: no-repeat;
  background-size: 145%;
  background-position: center -260px;
  padding-top: 50px !important;
}

.services .section-title {
  margin-top: 0;
  margin-bottom: 50px;
  padding-left: 21px;
}

.services .container-xl:first-child {
  margin-bottom: 77px;
}

.section-reviews {
  background: #111416;
  padding: 60px 0 !important;
  padding-bottom: 100px !important;
}

.section-reviews .section-title {
  margin-top: 0;
  margin-bottom: 60px;
  padding-left: 35px;
}


.section-title {
  font-size: 26px;
  color: #fff;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 50px;
}

.section-title .line {
  width: 330px;
  max-width: 100%;
  height: 1px;
  background: #2d4d48;
  flex-shrink: 0;
}

.section-title .btn-dark-pill {
  padding: 15px 55px;
  font-size: 14px;
  font-weight: 500;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cat-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1/1.15;
  height: 434px;
  width: 100%;
}

.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .85;
  top: -8px;
}

.cat-card .cat-label {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-size: 21px;
  color: #fff;
  z-index: 2;
  padding: 0 10px;
}

.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 30%, rgba(0, 0, 0, .15) 100%);
  z-index: 1;
}

/* ==========================================================================
   SECTION 08 END — HOME — CATEGORIES / DIRECTIONS
   ========================================================================== */

/* ==========================================================================
   SECTION 09 START — CALCULATOR CTA
   ========================================================================== */
.calc-band {
  background: #050705 url(../img/photo/calc-bg.png) no-repeat center center / cover;
  padding: 70px 0 0 0;
  position: relative;
  overflow: hidden;
}

.calc-text {
  padding-left: 95px;
  margin-top: 0;
}

.calc-band h2 {
  font-size: 45px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 28px;
  line-height: 1.2;
  max-width: 521px;
}

.calc-band p {
  color: var(--text-white);
  font-size: 18px;
  max-width: 521px;
  margin-bottom: 22px;
  line-height: 1.2;
  font-weight: 700;
}

.status-open {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin-bottom: 53px;
}

.status-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #099d2f;
}

.calc-figure {
  text-align: center;
}

.calc-figure img {
  max-width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   SECTION 09 END — CALCULATOR CTA
   ========================================================================== */

/* ==========================================================================
   SECTION 10 START — ARTICLE / CONTENT
   ========================================================================== */
.article-section {
  background: #171d20;
  padding: 60px 0;
}

.article-section h2 {
  font-size: 30px;
  color: #158a44;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.35;
}

.article-section h3 {
  font-size: 20px;
  color: #158a44;
  font-weight: 700;
  margin: 32px 0 14px;
}

.article-section h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin: 32px 0 14px;
}

.article-section p {
  color: #d1d7d3;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.how-we-work {
  padding-bottom: 80px !important;
}

.how-we-work .section-title {
  margin-top: 0;
  padding-left: 21px;
  margin-bottom: 60px;
}


.video-section .section-title {
  padding-left: 21px;
  margin-top: 30px;
  margin-bottom: 90px;
}

/* ==========================================================================
   SECTION 10 END — ARTICLE / CONTENT
   ========================================================================== */

/* ==========================================================================
   SECTION 11 START — LEAD FORM
   ========================================================================== */
.lead-band {
  background: radial-gradient(circle at 90% 10%, #0d381c 0%, #071c0e 45%, #050a06 100%);
  padding: 95px 0;
}

.lead-grid {
  display: grid;
  grid-template-columns: 1fr 463px;
  gap: 17px;
  align-items: stretch;
}

.lead-media {
  position: relative;
  min-height: 440px;
  background: #171d20;
  border-radius: 20px;
  overflow: hidden;
  background-image: url(/templates/gat/app/img/photo/lead-fleet.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.lead-media img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.lead-media-overlay {
  position: relative;
  z-index: 2;
  padding: 25px 60px;
  height: 100%;
}

.lead-media-overlay h3 {
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 16px;
}

.lead-media-overlay p {
  color: #d1d8d3;
  font-size: 18px;
  font-weight: 400;
  max-width: 588px;
  line-height: 1.3;
}

.lead-form-panel {
  width: 463px;
  background: #171d20;
  border-radius: 20px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lead-form-panel h3 {
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
}

.lead-form-panel h3 .num {
  color: var(--green);
}

.form-control-custom {
  width: 100%;
  background: #1c2225;
  border: 1px solid #293135;
  border-radius: 12px;
  padding: 14px 18px;
  color: #fff;
  font-size: 15px;
  margin-bottom: 14px;
  font-family: 'AA Stetica', sans-serif;
  transition: .2s ease;
}

.form-control-custom:focus {
  outline: none;
  border-color: var(--green);
  background: #1c2225;
  color: #fff;
}

.form-control-custom::placeholder {
  color: #7b888e;
}

textarea.form-control-custom {
  resize: none;
  min-height: 100px;
}

.lead-form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.consent-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: #ffffff;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.consent-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: #1c2225;
  border: 1px solid #2d3539;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  margin: 0;
  transition: .2s ease;
}

.consent-check input:checked {
  background: #1c2225;
  border-color: #3d474c;
}

.consent-check input:checked::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.lead-form-panel .btn-brand {
  background: linear-gradient(90deg, #00b040 0%, #007a2a 100%);
  border: none;
  border-radius: 12px;
  padding: 16px 36px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}

/* ==========================================================================
   SECTION 11 END — LEAD FORM
   ========================================================================== */

/* ==========================================================================
   SECTION 12 START — FOOTER
   ========================================================================== */
.site-footer {
  background: #111416;
  padding-top: 34px;
}

.footer-top-section {
  background: #171d20;
  padding-bottom: 30px;
  padding-top: 40px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  border-bottom: 1px solid #1a2226;
}

.footer-social {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #171d20;
  border: 1px solid transparent;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  transition: .2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.footer-social a i {
  font-size: 15px;
  color: #fff;
}

.footer-social a i.fa-telegram {
  color: var(--green);
}

.footer-social a img {
  height: 15px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-social a:hover {
  border-color: #3e4b52;
  background: #1c2327;
  color: #fff;
}

.footer-phone-block {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.footer-phone-block .phone-num {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.footer-phone-block .phone-sub {
  font-size: 13px;
  color: #a4afaa;
  margin-top: 4px;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 34px 0 26px;
}

.footer-cols h6 {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 14px;
}

.footer-cols li {
  margin-bottom: 10px;
}

.footer-cols a {
  color: #767c76;
  font-size: 13.5px;
  font-weight: 600;
}

.footer-cols a:hover {
  color: var(--green-light);
}

.footer-bottom {
  padding: 16px 0 26px;
  border-top: 1px solid #16190f00;
}

.footer-bottom a {
  color: #5c625c;
  font-size: 12.5px;
  text-decoration: underline;
}

/* ==========================================================================
   SECTION 12 END — FOOTER
   ========================================================================== */

/* ==========================================================================
   SECTION 13 START — HOME REUSABLE COMPONENTS
   ========================================================================== */

.advantages .section-title {
  margin-top: 0px;
  padding-left: 21px;
  margin-bottom: 45px;
}

.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.adv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
}

.adv-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.adv-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.adv-card h4 {
  font-size: 25px;
  color: #fff;
  margin-bottom: 8px;
}

.adv-card p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.pay-title {
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
  padding-left: 31px;
}

.pay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.pay-card {
  background: url(../img/photo/bg_u.png);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  padding: 45px 27px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 170px;
}

.pay-card h4 {
  color: var(--green-light);
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 12px;
}

.pay-card p {
  color: #ffffff;
  font-size: 16px;
  margin: 0;
  line-height: 1.45;
}

.steps-wrap {
  display: grid;
  grid-template-columns: .60fr 1.15fr;
  gap: 24px;
  align-items: start;
}

.steps-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 20px;
  width: 100%;
  aspect-ratio: 4/3;
  min-width: 0;
  opacity: 1;
  transition: opacity .3s ease;
  height: 100%;
}

.steps-media.is-changing {
  opacity: 0;
}

.steps-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.steps-media iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #111416;
  border-radius: 28px;
  padding: 22px 40px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.step-item:hover {
  border-color: var(--green-light);
  transform: translateX(4px);
}

.step-item:last-child {
  margin-bottom: 0;
}

.step-item.active {
  background: #1c2225;
  box-shadow: 0 8px 24px rgba(31, 174, 77, .18);
}

.step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.step-item h5 {
  color: #fff;
  font-size: 25px;
  margin-bottom: 12px;
  font-weight: 900;
}

.step-item p {
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.review-badges {
  display: flex;
  gap: 10px;
}

.review-badge {
  background: #343434;
  border-radius: 10px;
  padding: 12px 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .2s ease;
  text-decoration: none;
  border: 1px solid #343434;
}

.review-badge:hover {
  border-color: #515151;
}

.review-badge img {
  height: 20px;
  width: auto;
  object-fit: contain;
  display: block;
}

.review-card {
  background: #171d20;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 55px;
  align-items: center;
}

.review-card .review-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.review-card h5 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 22px;
}

.review-card .rv-meta {
  color: var(--green);
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 30px;
}

.review-card p {
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 12px;
  text-align: justify;
}

.review-card .review-more {
  color: #fff;
  background: #1c2225;
  border: 1px solid #23282b;
  border-radius: 10px;
  padding: 22px 75px;
  font-size: 20px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 14px;
  transition: .2s ease;
  text-decoration: none;
}

.review-card .review-more:hover {
  border-color: var(--green-light);
  color: #fff;
}

.review-video {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  /* min-height: 330px; */
  margin-bottom: 0;
}

.review-video img {
  width: auto;
  max-height: 100%;
  /* min-height: 330px; */
  /* object-fit: contain; */
  display: block;
  border-radius: 16px;
  margin: 0 auto;
}

.review-swiper {
  width: 100%;
}

.review-swiper .swiper-slide {
  width: calc(100% - 170px);
  height: auto;
  align-items: center;
}

@media (max-width: 768px) {
  .review-swiper .swiper-slide {
    width: 90%;
  }

  .lead-form-panel {
    width: 100%;
  }

  .lead-media-overlay h3 {
    font-size: 18px;
  }

  .section-dark {
    padding: 20px !important;
  }

  .cat-card img {
    object-fit: cover;
  }

  .services {
    background: #111416FF;
  }

  .cat-card {
    border-radius: 30px;
  }

  .btn-brand {
    font-size: 11px !important;
    padding: 9px 13px !important;
  }

  .country-content p {
    margin-bottom: 80px;
  }
}

.video-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #153954;
  border-radius: 12px;
  padding: 12px 35px;
}

.channel-badge.yt {
  background: #4a101d;
}

.channel-badge .channel-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

.channel-badge span {
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}

.channel-badge .sub {
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  margin-left: 52px;
}

.channel-badge.yt .sub {
  color: #fff;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

.video-thumb {
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  aspect-ratio: 16/10.5;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-thumb .play-btn {
  width: 60px;
  height: 60px;
  font-size: 16px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.75);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.video-thumb:hover .play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.trust-card_section .align-items-stretch {
  width: 1180px;
}

/* Swiper-based video rows (trust band + VK/YouTube) */
.trust-card {
  background: var(--bg-card);
  border-radius: 35px;
  border: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.trust-card-title {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 0;
  max-width: 210px;
}

.trust-card-icon {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 16px;
}

.trust-card-icon img {
  width: 68px;
  height: auto;
  object-fit: contain;
}

.trust-slider-wrap,
.video-slider-wrap {
  position: relative;
}

.video-slider-wrap {
  margin-bottom: 90px;
}

.trust-swiper {
  height: 250px;
}

.trust-swiper .swiper-slide {
  height: 250px;
  opacity: .5;
  transition: opacity .3s ease;
}

.trust-swiper .swiper-slide-active {
  opacity: 1;
}

.video-swiper .swiper-slide {
  height: auto;
}

.trust-swiper .video-thumb,
.video-swiper .video-thumb {
  height: 100%;
}

.trust-card_section .video-thumb {
  height: 250px;
  aspect-ratio: auto;
}

.trust-card_section .video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trust-next,
.video-slider-prev,
.video-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.video-slider-wrap .arrow-btn {
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}

.video-slider-wrap .arrow-btn:hover {
  opacity: 0.75;
}

.arrow-icon {
  width: 29px;
  height: 29px;
  display: block;
}

.arrow-icon-prev {
  transform: scaleX(-1);
}

.trust-next {
  right: -55px;
  width: 44px;
  height: 44px;
}

.trust-next img {
  width: 44px;
  height: 44px;
}

.video-slider-prev {
  left: 14px;
}

.video-slider-next {
  right: 14px;
}

.arrow-btn.swiper-button-disabled {
  opacity: .35;
  cursor: default;
}

.arrow-btn.swiper-button-disabled:hover {
  background: rgba(10, 13, 11, .7);
}

.news-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 18px;
}

.news-card {
  background: transparent;
  border: none;
  overflow: visible;
}

.news-card .n-img {
  height: 410px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.news-card .n-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card .n-body {
  padding: 14px 2px 0;
}

.news-card h6 {

  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 8px;
}

.news-card:hover h6 {
  color: var(--green);

}

.news-card .n-date {
  color: #141414;
  font-size: 19px;
}

.news-card.small h6 {
  color: #ffffff;
}

.news-card.small:hover h6 {
  color: var(--green);
}

.news-section {
  padding-top: 0 !important;
}

.news-section .section-title {
  margin-bottom: 90px;
  margin-top: 0px;
  padding-left: 21px;
}



/* ==========================================================================
   SECTION 13 END — HOME REUSABLE COMPONENTS
   ========================================================================== */

/* ==========================================================================
   SECTION 14 START — POPULAR DIRECTIONS / ПОСТАВКИ ИЗ АЗИИ
   ========================================================================== */


/* =========================================================
   GRID
   ========================================================= */

.country-grid {
  display: grid;

  grid-template-columns:
    repeat(3,
      minmax(0, 1fr));

  gap: 33px;
}


/* =========================================================
   CARD
   ========================================================= */

.country-card {
  position: relative;

  height: 440px;

  overflow: hidden;

  background: #0d1210;

  border: 1px solid #1c211c;

  border-radius: var(--radius-lg);
}


/* =========================================================
   IMAGE
   ========================================================= */

.country-card>img {
  position: absolute;

  inset: 0;

  z-index: 0;

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.country-card::after {
  content: \"\";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .65) 0%,
      rgba(0, 0, 0, .08) 38%,
      rgba(0, 0, 0, .12) 68%,
      rgba(0, 0, 0, .46) 100%);
}


/* =========================================================
   CONTENT
   ========================================================= */

.country-content {
  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  padding:
    25px 25px 40px;

  text-align: center;
}


/* =========================================================
   TITLE
   ========================================================= */

.country-content h4 {
  margin:
    0 0 6px;

  color: #fff;

  font-size: 35px;

  font-weight: 700;

  line-height: 1.2;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.country-content p {
  max-width: 290px;

  margin: 0 auto;

  color: #dfe3df;

  font-size: 18px;

  line-height: 1.45;

  text-align: center;
}


/* =========================================================
   BUTTON
   ========================================================= */

.country-content .btn-brand {
  width: 100%;

  margin-top: auto;
}


.country-content .btn-brand3 {
  padding:
    18px 10px;

  font-size: 14px;

  font-weight: 700;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .country-grid {
    grid-template-columns:
      1fr;

    gap: 30px;
  }


  /*
   * Карточка получает размер сама.
   * Контент внутри больше НЕ зависит
   * от height: 100%.
   */
  .country-card {
    width: 100%;

    height: auto;

    aspect-ratio:
      4 / 5;

    overflow: hidden;

    border-radius: 30px;
  }


  .country-card>img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
  }


  .country-card::after {
    background:
      linear-gradient(180deg,
        rgba(0, 0, 0, .68) 0%,
        rgba(0, 0, 0, .10) 32%,
        rgba(0, 0, 0, .10) 68%,
        rgba(0, 0, 0, .48) 100%);
  }


  /*
   * КЛЮЧЕВАЯ ПРАВКА ДЛЯ SAFARI:
   *
   * content растягивается через absolute + inset,
   * а не через height: 100%.
   */
  .country-content {
    position: absolute;

    inset: 0;

    width: auto;

    height: auto;

    padding:
      28px 16px 26px;

    align-items: center;

    justify-content: flex-start;
  }


  .country-content h4 {
    margin:
      0 0 10px;

    color: #fff;

    font-size: 24px;

    line-height: 1.2;
  }


  .country-content p {
    max-width: 290px;

    margin:
      0 auto;

    color: #fff;

    font-size: 14px;

    line-height: 1.45;

    text-align: center;
  }


  /*
   * Теперь auto-margin рассчитывается
   * относительно реальной высоты всей карточки
   * и одинаково работает в Safari/Chrome.
   */
  .country-content .btn-brand,
  .country-content .btn-brand3 {
    width: 100%;

    margin-top: auto;

    padding:
      13px 10px !important;

    flex-shrink: 0;

    font-size:
      11px !important;

    line-height: 1.2;
  }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

  .country-card {
    border-radius: 24px;
  }


  .country-content {
    padding:
      24px 14px 22px;
  }


  .country-content h4 {
    font-size: 23px;
  }


  .country-content p {
    max-width: 270px;

    font-size: 13px;
  }

}


/* ==========================================================================
   SECTION 14 END — POPULAR DIRECTIONS / ПОСТАВКИ ИЗ АЗИИ
   ========================================================================== */

/* ==========================================================================
   SECTION 15 START — VIDEO MODAL
   ========================================================================== */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 60px 20px 20px;

  opacity: 0;
  visibility: hidden;

  background: transparent;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}


.video-modal.open {
  opacity: 1;
  visibility: visible;
}


/* Затемнение */
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;

  background: rgba(5, 8, 6, .88);
}


/* Окно с видео */
.video-modal__box {
  position: relative;
  z-index: 1;

  width: min(920px, 92vw);

  aspect-ratio: 16 / 9;

  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);

  transform: scale(.9);

  transition:
    transform .35s cubic-bezier(.34, 1.56, .64, 1);
}


.video-modal.open .video-modal__box {
  transform: scale(1);
}


/* Контейнер player */
.video-modal__frame {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 14px;

  background: #000;
}


/* YouTube / VK / local video */
.video-modal__frame iframe,
.video-modal__frame video {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  border-radius: 14px;

  background: #000;
}


/* Local video */
.video-modal__frame video {
  position: relative;
  z-index: 1;

  object-fit: contain;

  pointer-events: auto;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.video-modal__close {
  position: absolute;

  top: -48px;
  right: 0;

  z-index: 2;

  width: 40px;
  height: 40px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: #fff;
  color: #0c0f0d;

  font-size: 26px;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 4px 20px rgba(0, 0, 0, .35);

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}


.video-modal__close:hover {
  background: var(--green-light);
  color: #fff;

  transform: scale(1.08);
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .video-modal {
    /*
         * Оставляем сверху место под крестик.
         * env() учитывает "чёлку" iPhone.
         */
    padding:
      calc(env(safe-area-inset-top, 0px) + 62px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  }


  .video-modal__box {
    width: 100%;

    /*
         * Видео остаётся нормального формата,
         * а не растягивается на весь экран.
         */
    aspect-ratio: 16 / 9;

    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);

    transform: none;
  }


  .video-modal.open .video-modal__box {
    transform: none;
  }


  /*
     * Крестик фиксируем относительно экрана,
     * поэтому он ВСЕГДА виден.
     */
  .video-modal__close {
    position: fixed;

    top: calc(env(safe-area-inset-top, 0px) + 12px);

    right: 12px;

    z-index: 3;

    width: 44px;
    height: 44px;

    font-size: 30px;
  }


  .video-modal__frame {
    border-radius: 12px;
  }


  .video-modal__frame iframe,
  .video-modal__frame video {
    border-radius: 12px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .video-modal {
    padding-left: 8px;
    padding-right: 8px;
  }


  .video-modal__box {
    width: 100%;
  }


  .video-modal__close {
    right: 10px;

    width: 42px;
    height: 42px;

    font-size: 28px;
  }

}


/* =========================================================
   MOBILE LANDSCAPE
   ========================================================= */

@media (max-height: 500px) and (orientation: landscape) {

  .video-modal {
    padding:
      10px 60px 10px 10px;
  }


  .video-modal__box {
    width: auto;

    height: calc(100dvh - 20px);

    max-width: calc(100vw - 80px);
    max-height: calc(100dvh - 20px);

    aspect-ratio: 16 / 9;
  }


  .video-modal__close {
    position: fixed;

    top: 10px;
    right: 10px;

    width: 42px;
    height: 42px;
  }

}


/* ==========================================================================
   SECTION 15 END — VIDEO MODAL
   ========================================================================== */

/* ==========================================================================
   SECTION 16 START — GLOBAL RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .truck-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .adv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pay-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .topbar {
    padding: 22px 0;
  }

  .topbar .container-xl {
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .topbar-phone {
    text-align: right;
  }

  .hero .row {
    flex-direction: column-reverse;
  }

  .hero-media {
    max-width: 300px;
    margin: 0 auto 24px;
  }

  .hero-trucks {
    background-position: 75% center !important;
  }

  .hero-trucks .row {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero-sub {
    font-size: 15px;
  }

  .steps-wrap {
    grid-template-columns: 1fr;
  }

  .steps-media {
    position: static;
    min-height: 260px;
  }

  .lead-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lead-media {
    min-height: 280px;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }

  .review-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px;
  }

  .review-swiper .swiper-slide {
    width: 90% !important;
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-card .n-img {
    height: 280px;
  }

  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-top {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .footer-social {
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-phone-block {
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .truck-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calc-band h2 {
    font-size: 29px;
  }

  .calc-band {
    padding: 40px 0;
  }

  .adv-icon img {
    width: 80px;
    height: 80px;
  }

  .adv-card h4 {
    font-size: 16px;
  }

  .adv-card p {
    font-size: 13px;
  }

  .step-item {
    flex-direction: column;
    align-items: baseline;
  }

  .step-item h5 {
    font-size: 20px;
  }

  .step-item p {
    font-size: 14px;
  }

  .review-card p {
    font-size: 13px;
  }

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

  .video-thumb .play-btn {
    width: 40px;
    height: 40px;
  }

  .channel-badge span {
    font-size: 12px;
  }

  .calc-text {
    margin-top: 30px;
    padding-left: 38px;

  }


  .lead-media-overlay p {
    color: #fff;
    font-size: 13px;
    max-width: 588px;
    line-height: 1.2;
  }

  .channel-badge .sub {
    font-size: 14px;
  }

  .lead-form-panel h3 {
    font-size: 20px;
  }

  .review-card .review-more {
    padding: 11px 28px;
  }

  .cat-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cat-card {
    height: 220px;
  }

  .cat-card .cat-label {
    font-size: 18px;
  }

  .adv-grid {
    grid-template-columns: 1fr;
  }

  .pay-grid {
    grid-template-columns: 1fr;
  }

  .pay-card {
    padding: 24px 20px;
    min-height: auto;
  }

  .pay-card h4 {
    font-size: 20px;
  }

  .pay-card p {
    font-size: 14.5px;
  }

  .btn-brand {
    font-size: 15px;
    padding: 14px 24px;
    white-space: normal;
    text-align: center;
  }

  .trust-card {
    height: auto;
    min-height: 0;
    padding: 18px;
    gap: 14px;
  }

  /* trust-card_section (promo strip) was locked to a fixed 1180px row
     width meant for desktop, which overflowed every mobile viewport
     and pushed the arrow/slider off-screen. Rebuild it responsively
     here without touching any of the desktop rules above. */
  .trust-card_section .align-items-stretch {
    width: 100%;
  }

  .trust-card_section .video-thumb,
  .trust-swiper,
  .trust-swiper .swiper-slide {
    height: 200px;
  }

  .trust-card_section .trust-next {
    right: 10px;
  }

  /* play button relied on :hover, which never fires on touch —
     making it permanently invisible and unclickable on mobile */
  .trust-card_section .play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  .feature-icon {
    width: 46px;
    height: 34px;
    margin-left: 8px;
  }

  .hero {
    background-position: right center;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 21px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .section-title .line {
    width: auto;
    max-width: 140px;
    flex-grow: 1;
    flex-shrink: 1;
  }

  .review-badges {
    flex-wrap: wrap;
    gap: 8px;
  }

  .channel-badge {
    padding: 8px 14px;
  }

  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 16px;
  }

  .calc-band .row {
    flex-direction: column-reverse;
  }

  .filter-row {
    gap: 8px;
  }

  .filter-pill {
    padding: 11px 14px;
    font-size: 13px;
  }

  .hero h1 {
    font-size: 24px;
  }

  .hero-features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .feature-card {
    padding: 12px 16px;
  }

  .feature-num {
    font-size: 46px;
  }

  .article-section h2 {
    font-size: 22px;
  }

  .article-section h3 {
    font-size: 18px;
  }

  .article-section p {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .truck-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }

  .lead-form-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .lead-form-bottom .btn-brand {
    width: 100%;
    text-align: center;
  }

  .lead-form-panel {
    padding: 24px 18px;
  }

  .lead-media-overlay {
    padding: 24px 18px 0;
  }

  .hero-video-card {
    border-radius: 16px;
  }

  .hero-slider-arrows.left {
    left: -12px;
  }

  .hero-slider-arrows.right {
    right: -12px;
  }

}

/* ==========================================================================
   SECTION 16 END — GLOBAL RESPONSIVE
   ========================================================================== */

/* ==========================================================================
   SECTION 17 START — VIDEO SWIPERS — VK / YOUTUBE
   ========================================================================== */

/*
 * Не даём wrapper растягиваться
 * по высоте родительского Swiper.
 */
.yt-swiper .swiper-wrapper,
.vk-swiper .swiper-wrapper {
  height: auto;
  align-items: stretch;
}


/*
 * Высота каждого слайда определяется
 * содержимым карточки.
 */
.yt-swiper .swiper-slide,
.vk-swiper .swiper-slide {
  height: auto;
}


/*
 * Сам Swiper также не имеет
 * принудительной высоты.
 */
.yt-swiper,
.vk-swiper,
.video-swiper {
  height: auto;
}


/*
 * Переопределяем старое:
 *
 * .video-swiper .video-thumb {
 *     height: 100%;
 * }
 *
 * Карточка получает нормальные
 * пропорции видео.
 */
.yt-swiper .video-thumb,
.vk-swiper .video-thumb {
  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  position: relative;
  overflow: hidden;

  border-radius: 35px;
}


/*
 * Poster полностью заполняет карточку,
 * но не искажается.
 */
.yt-swiper .video-thumb img,
.vk-swiper .video-thumb img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/*
 * Play остаётся по центру poster.
 */
.yt-swiper .video-thumb .play-btn,
.vk-swiper .video-thumb .play-btn {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .yt-swiper .video-thumb,
  .vk-swiper .video-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 20px;
  }

}

/* ==========================================================================
   SECTION 17 END — VIDEO SWIPERS — VK / YOUTUBE
   ========================================================================== */

/* ==========================================================================
   SECTION 18 START — MOBILE MENU / CONTACT DRAWER
   ========================================================================== */

/*
 * Desktop navigation.
 */
.desktop-nav-links {
  display: flex;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}


/*
 * Mobile contact drawer is hidden on desktop.
 */
.mobile-menu-contacts {
  display: none;
}


/* =========================================================
   MOBILE MENU — SCROLL LOCK
   ========================================================= */

html.mobile-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.mobile-menu-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

@media (max-width: 991px) {

  /*
   * Desktop navigation is not shown on mobile.
   */
  .main-nav {
    display: none;
  }

  .main-nav .desktop-nav-links {
    display: none;
  }


  /*
   * Open drawer always occupies the viewport.
   * Only this drawer scrolls; the page behind it is locked.
   */
  .main-nav.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10000;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    background: #0a0d0a;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    animation: mobileNavIn .3s ease;
  }


  @keyframes mobileNavIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


  /*
   * One stable position for BOTH hamburger and close icon.
   *
   * The button never changes from relative to fixed anymore,
   * so it cannot jump when the drawer closes.
   */
  .navbar-toggler-custom,
  body.mobile-menu-open .navbar-toggler-custom {
    display: flex;
    position: fixed;

    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: max(16px, env(safe-area-inset-right, 0px));
    left: auto;

    z-index: 10001;

    width: 46px;
    height: 46px;

    padding: 0;

    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    background: #181c19;

    border: 1px solid #2a302b;
    border-radius: 10px;

    color: #fff;

    font-size: 21px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .25);

    transition:
      background .2s ease,
      border-color .2s ease,
      color .2s ease,
      box-shadow .2s ease;
  }


  /*
   * Open state: only appearance changes.
   * Position remains exactly the same.
   */
  .navbar-toggler-custom.is-open,
  body.mobile-menu-open .navbar-toggler-custom {
    background: #181c19;
    border-color: var(--green-light);
    color: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .35);
  }


  .navbar-toggler-custom i {
    display: block;
    margin: 0;
    padding: 0;

    line-height: 1;

    pointer-events: none;
  }


  /*
   * Drawer inner container.
   */
  .main-nav.open .container-xl {
    display: block;

    width: 100%;
    min-height: 100%;

    padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
    padding-right: 20px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    padding-left: 20px;
  }


  /*
   * Contacts replace navigation on mobile.
   */
  .main-nav.open .mobile-menu-contacts {
    display: flex;

    width: 100%;
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 96px);

    flex-direction: column;

    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }


  /* =====================================================
     MOBILE MENU LOGO
     ===================================================== */

  .main-nav.open .mobile-menu-logo {
    display: inline-flex;
    align-self: flex-start;

    width: auto;

    padding: 0;
    margin: 0 0 42px;

    background: none;
    border: 0;
    border-radius: 0;
  }


  .main-nav.open .mobile-menu-logo:hover,
  .main-nav.open .mobile-menu-logo:active {
    background: none;
    border: 0;
    transform: none;
  }


  .mobile-menu-logo img {
    display: block;

    width: 180px;
    max-width: 55vw;
    height: auto;
  }


  /* =====================================================
     MOBILE MENU TITLE
     ===================================================== */

  .mobile-menu-title {
    margin-bottom: 18px;

    color: #fff;

    font-family: 'AA Stetica', sans-serif;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
  }


  /* =====================================================
     MOBILE CONTACT LINKS
     ===================================================== */

  .mobile-menu-social {
    display: flex;
    flex-direction: column;

    gap: 10px;

    width: 100%;
  }


  .main-nav.open .mobile-menu-social a {
    display: flex;

    width: 100%;

    align-items: center;

    gap: 15px;

    padding: 14px 16px;

    color: #fff;

    background: #181c19;

    border: 1px solid #262b27;
    border-radius: 14px;

    font-family: 'AA Stetica', sans-serif;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;

    text-decoration: none;

    transition:
      border-color .2s ease,
      background .2s ease;
  }


  .main-nav.open .mobile-menu-social a:hover,
  .main-nav.open .mobile-menu-social a:active {
    color: #fff;

    background: #1f2420;

    border-color: var(--green-light);

    transform: none;
  }


  .mobile-menu-social-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--green-light);

    font-size: 23px;
  }


  .mobile-menu-social-icon img {
    display: block;

    width: 25px;
    height: 25px;

    object-fit: contain;
  }


  /* =====================================================
     MOBILE PHONE
     ===================================================== */

  .mobile-menu-phone {
    margin-top: auto;

    padding-top: 32px;

    text-align: left;
  }


  .main-nav.open .mobile-menu-phone a {
    display: inline-block;

    padding: 0;

    color: #fff;

    background: none;

    border: 0;
    border-radius: 0;

    font-family: 'AA Stetica', sans-serif;

    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;
  }


  .main-nav.open .mobile-menu-phone a:hover,
  .main-nav.open .mobile-menu-phone a:active {
    color: var(--green-light);

    background: none;

    border: 0;

    transform: none;
  }


  .mobile-menu-phone span {
    display: block;

    margin-top: 7px;

    color: #a7afaa;

    font-size: 13px;
    font-weight: 400;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .navbar-toggler-custom,
  body.mobile-menu-open .navbar-toggler-custom {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: max(12px, env(safe-area-inset-right, 0px));

    width: 44px;
    height: 44px;
  }


  .main-nav.open .container-xl {
    padding-top: calc(env(safe-area-inset-top, 0px) + 70px);
    padding-right: 15px;
    padding-left: 15px;
  }


  .main-nav.open .mobile-menu-logo {
    margin-bottom: 32px;
  }


  .mobile-menu-logo img {
    width: 155px;
  }


  .mobile-menu-title {
    font-size: 20px;
  }


  .main-nav.open .mobile-menu-social a {
    gap: 12px;

    padding: 12px 14px;

    font-size: 14px;
  }


  .mobile-menu-social-icon {
    width: 30px;
    height: 30px;

    flex-basis: 30px;

    font-size: 21px;
  }


  .mobile-menu-social-icon img {
    width: 23px;
    height: 23px;
  }


  .main-nav.open .mobile-menu-phone a {
    font-size: 23px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .main-nav.open {
    animation: none;
  }

}

/* ==========================================================================
   SECTION 18 END — MOBILE MENU / CONTACT DRAWER
   ========================================================================== */

/* ==========================================================================
   SECTION 19 START — COOKIE NOTICE
   ========================================================================== */


/* --------------------------------------------------------------------------
   Cookie banner
   -------------------------------------------------------------------------- */

.cookie-notice {
  position: fixed;

  left: 50%;
  bottom: 18px;

  z-index: 9000;

  width: min(1180px,
      calc(100vw - 40px));

  transform: translateX(-50%);

  background: #171d20;

  border: 1px solid #2d3539;
  border-radius: 16px;

  box-shadow:
    0 12px 45px rgba(0, 0, 0, .45);

  font-family:
    'AA Stetica',
    sans-serif;
}


/* --------------------------------------------------------------------------
   Inner
   -------------------------------------------------------------------------- */

.cookie-notice__inner {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding: 18px 20px;
}


/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */

.cookie-notice__text {
  flex: 1;
}


.cookie-notice__text p {
  margin: 0;

  color: #fff;

  font-size: 14px;
  font-weight: 400;

  line-height: 1.5;
}


.cookie-notice__text a {
  color: var(--green-light);

  text-decoration: underline;

  text-underline-offset: 3px;

  transition:
    color .2s ease;
}


.cookie-notice__text a:hover {
  color: #fff;
}


/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.cookie-notice__actions {
  flex-shrink: 0;
}


.cookie-notice__accept {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 145px;

  padding: 13px 28px;

  border: 0;
  border-radius: 10px;

  background:
    linear-gradient(90deg,
      #00a83e 0%,
      #005f20 100%);

  color: #fff;

  font-family:
    'AA Stetica',
    sans-serif;

  font-size: 15px;
  font-weight: 500;

  line-height: 1;

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.cookie-notice__accept:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 8px 20px rgba(0, 168, 62, .30);
}


.cookie-notice__accept:active {
  transform:
    translateY(0);
}


.cookie-notice__accept:focus-visible {
  outline:
    2px solid var(--green-light);

  outline-offset: 3px;
}


/* ==========================================================================
   TABLET / MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .cookie-notice {
    bottom:
      calc(env(safe-area-inset-bottom,
          0px) + 10px);

    width:
      calc(100vw - 20px);

    border-radius: 14px;
  }


  .cookie-notice__inner {
    flex-direction: column;

    align-items: stretch;

    gap: 14px;

    padding: 16px;
  }


  .cookie-notice__text p {
    font-size: 12.5px;

    line-height: 1.45;
  }


  .cookie-notice__actions {
    width: 100%;
  }


  .cookie-notice__accept {
    width: 100%;

    min-width: 0;

    padding: 14px 20px;

    font-size: 14px;
  }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

  .cookie-notice {
    width:
      calc(100vw - 16px);
  }


  .cookie-notice__inner {
    padding: 14px;
  }


  .cookie-notice__text p {
    font-size: 12px;
  }

}


/* ==========================================================================
   SECTION 19 END — COOKIE NOTICE
   ========================================================================== */

.model-description__content.full {
  color: 000;
}

.model-description h3 {
  color: #158a44;
}

/* ==========================================================================
   SECTION 20 START — REVIEWS SWIPER
   ========================================================================== */


/* =========================================================
   SECTION
   ========================================================= */

/*
 * Высота секции определяется только её содержимым.
 *
 * Нижний отступ оставляем как в макете,
 * но убираем ощущение огромной пустой зоны.
 */
.section-reviews {
  min-height: 0 !important;

  padding-top: 60px !important;
  padding-bottom: 70px !important;
}


/*
 * На главной используется pt-0.
 */
.section-reviews.pt-0 {
  padding-top: 60px !important;
}


/* =========================================================
   SWIPER
   ========================================================= */

.review-swiper {
  position: relative;

  width: 100%;

  height: auto !important;

  min-height: 0;

  overflow: hidden;
}


/*
 * Для autoHeight Swiper сам записывает
 * inline-height обёртке.
 *
 * Не задаём ей собственную постоянную высоту.
 */
.review-swiper .swiper-wrapper {
  align-items: flex-start;

  min-height: 0;

  transition-property:
    transform,
    height;
}


/*
 * DESKTOP:
 *
 * один полный отзыв + часть следующего.
 */
.review-swiper .swiper-slide {
  width:
    calc(100% - 170px) !important;

  max-width:
    calc(100% - 170px);

  height: auto !important;

  min-height: 0;

  flex:
    0 0 calc(100% - 170px);

  align-self: flex-start;
}


/* =========================================================
   REVIEW CARD
   ========================================================= */

.review-swiper .review-card {
  width: 100%;

  height: auto !important;

  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, 1fr);

  gap: 55px;

  align-items: center;

  padding: 30px;

  background: #171d20;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-lg);

  box-sizing:
    border-box;
}


/* =========================================================
   REVIEW TEXT
   ========================================================= */

.review-swiper .review-body {
  display: flex;

  flex-direction: column;

  width: 100%;

  min-width: 0;

  height: auto !important;

  min-height: 0;
}


.review-swiper .review-card h5 {
  margin:
    0 0 22px;

  color: #fff;

  font-size: 20px;

  font-weight: 700;

  line-height: 1.3;
}


.review-swiper .review-card .rv-meta {

  margin-bottom: 30px;

  color:
    var(--green);

  font-size: 15px;

  font-weight: 400;
}


.review-swiper .review-anons {

  color: #fff;

  font-size: 18px;

  font-weight: 400;

  line-height: 1.2;

  text-align: justify;
}


.review-swiper .review-anons p {

  margin-top: 0;

  margin-bottom: 12px;

  color: inherit;

  font-size: inherit;

  font-weight: inherit;

  line-height: inherit;
}


/* =========================================================
   READ MORE
   ========================================================= */

.review-swiper .review-card .review-more {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  align-self: flex-start;

  margin-top: 14px;

  padding:
    22px 75px;

  color: #fff;

  background: #1c2225;

  border:
    1px solid #23282b;

  border-radius: 10px;

  font-size: 20px;

  font-weight: 400;

  text-decoration: none;

  transition: .2s ease;
}


.review-swiper .review-card .review-more:hover {

  color: #fff;

  border-color:
    var(--green-light);
}


/* =========================================================
   REVIEW VIDEO
   ========================================================= */

.review-swiper .review-video {

  position: relative;

  width: 100%;

  min-width: 0;

  aspect-ratio:
    16 / 9;

  overflow: hidden;

  margin: 0;

  border-radius: 16px;

  background: #0a0d0b;
}


.review-swiper .review-video img {

  position: absolute;

  inset: 0;

  display: block;

  width: 100%;

  height: 100%;

  max-width: none;

  max-height: none;

  margin: 0;

  object-fit: cover;

  object-position: center;

  border-radius: 0;
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

.review-swiper .review-video .play-btn {

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 2;

  transform:
    translate(-50%,
      -50%);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

  .review-swiper .swiper-slide {

    width:
      90% !important;

    max-width:
      90%;

    flex-basis:
      90%;
  }


  .review-swiper .review-card {

    grid-template-columns:
      1fr;

    gap: 24px;

    padding: 24px;

    align-items: start;
  }


  .review-swiper .review-video {

    width: 100%;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .section-reviews {
    padding-top:
      40px !important;

    padding-bottom:
      45px !important;
  }


  .section-reviews.pt-0 {
    padding-top:
      40px !important;
  }


  .review-swiper .swiper-slide {

    width:
      88% !important;

    max-width:
      88%;

    flex-basis:
      88%;
  }


  .review-swiper .review-card {

    gap: 20px;

    padding: 20px;

    border-radius: 18px;
  }


  .review-swiper .review-card h5 {

    margin-bottom: 14px;

    font-size: 18px;
  }


  .review-swiper .review-card .rv-meta {

    margin-bottom: 18px;

    font-size: 13px;
  }


  .review-swiper .review-anons {

    font-size: 14px;

    line-height: 1.35;
  }


  .review-swiper .review-card .review-more {

    width: 100%;

    margin-top: 12px;

    padding:
      14px 20px;

    font-size: 15px;
  }


  .review-swiper .review-video {

    border-radius: 14px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .review-swiper .swiper-slide {

    width:
      86% !important;

    max-width:
      86%;

    flex-basis:
      86%;
  }

}


/* ==========================================================================
   SECTION 20 END — REVIEWS SWIPER
   ========================================================================== */
/* ==========================================================================
   SECTION 21 START — ALL REVIEWS PAGE
   ========================================================================== */

.reviews-page {
  background: #111416;

  padding:
    60px 0 90px;
}


/* =========================================================
   HEADER
   ========================================================= */

.reviews-page-head {
  margin-bottom: 50px;
}


.reviews-page-title {
  margin-top: 0;
  margin-bottom: 0;

  padding-left: 0;
}


.reviews-page-title h1 {
  margin: 0;

  color: #fff;

  font-size: 32px;
  font-weight: 700;

  line-height: 1.2;
}


.reviews-page-title .line {
  flex: 1;

  max-width: 330px;
}


/* =========================================================
   LIST
   ========================================================= */

.reviews-page-list {
  display: flex;

  flex-direction: column;

  gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.reviews-page-card.review-card {
  width: 100%;

  height: auto;

  min-height: 0;


  display: grid;


  grid-template-columns:
    minmax(0,
      1.15fr) minmax(360px,
      1fr);


  gap: 55px;


  align-items: center;


  padding: 30px;


  background: #171d20;


  border:
    1px solid var(--border);


  border-radius:
    var(--radius-lg);
}


/* =========================================================
   TEXT
   ========================================================= */

.reviews-page-card .review-body {

  display: flex;

  flex-direction: column;

  min-width: 0;

  height: auto;
}


.reviews-page-card .review-body h2 {

  margin:
    0 0 22px;


  color: #fff;


  font-size: 20px;

  font-weight: 700;

  line-height: 1.3;
}


.reviews-page-card .rv-meta {

  margin-bottom: 30px;


  color:
    var(--green);


  font-size: 15px;

  font-weight: 400;
}


.reviews-page-card .review-anons {

  color: #fff;


  font-size: 18px;

  font-weight: 400;

  line-height: 1.35;
}


.reviews-page-card .review-anons p {

  margin:
    0 0 12px;


  color: inherit;

  font: inherit;

  line-height: inherit;
}


/* =========================================================
   READ MORE
   ========================================================= */

.reviews-page-card .review-more {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  align-self: flex-start;


  margin-top: 18px;


  padding:
    18px 54px;


  color: #fff;


  background: #1c2225;


  border:
    1px solid #23282b;


  border-radius: 10px;


  font-size: 18px;

  font-weight: 400;


  text-decoration: none;


  transition: .2s ease;
}


.reviews-page-card .review-more:hover {

  color: #fff;

  border-color:
    var(--green-light);
}


/* =========================================================
   VIDEO
   ========================================================= */

.reviews-page-card .review-video {

  position: relative;


  width: 100%;

  min-width: 0;


  aspect-ratio:
    16 / 9;


  overflow: hidden;


  margin: 0;


  background: #0a0d0b;


  border-radius: 16px;
}


.reviews-page-card .review-video img {

  position: absolute;

  inset: 0;


  display: block;


  width: 100%;

  height: 100%;


  max-width: none;

  max-height: none;


  margin: 0;


  object-fit: cover;

  object-position: center;
}


.reviews-page-card .review-video .play-btn {

  position: absolute;


  top: 50%;

  left: 50%;


  z-index: 2;


  transform:
    translate(-50%,
      -50%);
}


/* =========================================================
   LOAD MORE
   ========================================================= */

.reviews-page-load-wrap {

  display: flex;

  flex-direction: column;

  align-items: center;


  gap: 14px;


  margin-top: 38px;
}


.reviews-page-load-more {

  min-width: 260px;


  border: 0;


  cursor: pointer;
}


.reviews-page-load-more[hidden] {

  display:
    none !important;
}


.reviews-page-load-more.is-loading,
.reviews-page-load-more:disabled {

  opacity: .6;


  cursor: wait;


  pointer-events: none;
}


.reviews-page-status {

  min-height: 20px;


  color: #a7afaa;


  font-size: 14px;

  font-weight: 400;


  text-align: center;
}


.reviews-page-total {

  margin-top: 14px;


  color: #6f7973;


  font-size: 13px;

  font-weight: 400;


  text-align: center;
}


/* =========================================================
   EMPTY
   ========================================================= */

.reviews-page-empty {

  padding:
    40px 24px;


  color: #a7afaa;


  background: #171d20;


  border:
    1px solid var(--border);


  border-radius: 18px;


  font-size: 16px;


  text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

  .reviews-page-card.review-card {

    grid-template-columns:
      1fr;


    gap: 24px;


    padding: 24px;


    align-items: start;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .reviews-page {

    padding:
      40px 0 60px;
  }


  .reviews-page-head {

    margin-bottom: 30px;
  }


  .reviews-page-title {

    align-items: flex-start;
  }


  .reviews-page-title h1 {

    font-size: 25px;
  }


  .reviews-page-title .review-badges {

    width: 100%;
  }


  .reviews-page-card.review-card {

    gap: 20px;


    padding: 20px;


    border-radius: 18px;
  }


  .reviews-page-card .review-body h2 {

    margin-bottom: 14px;


    font-size: 18px;
  }


  .reviews-page-card .rv-meta {

    margin-bottom: 18px;


    font-size: 13px;
  }


  .reviews-page-card .review-anons {

    font-size: 14px;


    line-height: 1.45;
  }


  .reviews-page-card .review-more {

    width: 100%;


    padding:
      14px 20px;


    font-size: 15px;
  }


  .reviews-page-card .review-video {

    border-radius: 14px;
  }


  .reviews-page-load-more {

    width: 100%;

    min-width: 0;
  }

}


/* ==========================================================================
   SECTION 21 END — ALL REVIEWS PAGE
   ========================================================================== */

/* ==========================================================================
   SECTION 22 START — BLOG / NEWS
   ========================================================================== */


/* =========================================================
   BLOG PAGE
   ========================================================= */

.blog-page {
  position: relative;

  min-height: 600px;

  padding:
    65px 0 90px;

  background: #0d1112;
}


/* =========================================================
   BLOG HEADER
   ========================================================= */

.blog-page-head {
  margin-bottom: 42px;
}


.blog-page-head .section-title {
  display: flex;

  align-items: center;

  gap: 24px;

  margin: 0;

  padding: 0;
}


.blog-page-head .section-title h1 {
  margin: 0;

  color: #fff;

  font-size: 34px;

  font-weight: 800;

  line-height: 1.2;

  white-space: nowrap;
}


.blog-page-head .section-title .line {
  width: 330px;

  max-width: 100%;

  height: 1px;

  background: #2d4d48;

  flex-shrink: 0;
}


/* =========================================================
   BLOG GRID
   ========================================================= */

.blog-page .blog-grid {
  display: grid;

  grid-template-columns:
    repeat(3,
      minmax(0,
        1fr));

  gap:
    28px 24px;

  width: 100%;
}


/* =========================================================
   BLOG CARD
   ========================================================= */

.blog-page .blog-card {
  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  background: #171d20;

  border:
    1px solid #252c2e;

  border-radius: 20px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.blog-page .blog-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(0,
      168,
      62,
      .55);

  box-shadow:
    0 14px 34px rgba(0,
      0,
      0,
      .22);
}


/* =========================================================
   BLOG CARD IMAGE
   ========================================================= */

.blog-page .blog-card-image {
  position: relative;

  display: block;

  width: 100%;

  aspect-ratio:
    16 / 10;

  overflow: hidden;

  background: #111416;

  text-decoration: none;
}


.blog-page .blog-card-image img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform .4s ease;
}


.blog-page .blog-card:hover .blog-card-image img {

  transform:
    scale(1.04);
}


/* =========================================================
   BLOG CARD BODY
   ========================================================= */

.blog-page .blog-card-body {
  display: flex;

  flex-direction: column;

  flex: 1;

  padding:
    24px 25px 26px;
}


/* =========================================================
   BLOG CARD DATE
   ========================================================= */

.blog-page .blog-card-date {
  margin-bottom: 12px;

  color:
    var(--green);

  font-size: 14px;

  font-weight: 600;

  line-height: 1.3;
}


/* =========================================================
   BLOG CARD TITLE
   ========================================================= */

.blog-page .blog-card h2 {
  margin:
    0 0 14px;

  color: #fff;

  font-size: 21px;

  font-weight: 700;

  line-height: 1.3;
}


.blog-page .blog-card h2 a {
  color: #fff;

  text-decoration: none;

  transition:
    color .2s ease;
}


.blog-page .blog-card h2 a:hover {

  color:
    var(--green-light);
}


/* =========================================================
   BLOG CARD TEXT
   ========================================================= */

.blog-page .blog-card p {
  margin:
    0 0 22px;

  color: #c3cac6;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.55;
}


/* =========================================================
   BLOG CARD MORE
   ========================================================= */

.blog-page .blog-card-more {
  display: inline-flex;

  align-items: center;

  align-self: flex-start;

  margin-top: auto;

  color:
    var(--green);

  font-size: 15px;

  font-weight: 700;

  line-height: 1;

  text-decoration: none;

  transition:
    color .2s ease;
}


.blog-page .blog-card-more::after {
  content: "→";

  margin-left: 8px;

  transition:
    transform .2s ease;
}


.blog-page .blog-card-more:hover {

  color:
    var(--green-light);
}


.blog-page .blog-card-more:hover::after {

  transform:
    translateX(4px);
}


/* =========================================================
   BLOG EMPTY
   ========================================================= */

.blog-empty {
  width: 100%;

  padding:
    45px 30px;

  color: #a8b0ab;

  background: #171d20;

  border:
    1px solid #252c2e;

  border-radius: 20px;

  font-size: 16px;

  text-align: center;
}


/* =========================================================
   BLOG PAGINATION
   ========================================================= */

.blog-pagination {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 50px;
}


.blog-pagination a {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 44px;

  height: 44px;

  color: #fff;

  background: #171d20;

  border:
    1px solid #252c2e;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}


.blog-pagination a:hover {
  color: #fff;

  border-color:
    var(--green);
}


.blog-pagination a.active {
  color: #fff;

  background:
    var(--green);

  border-color:
    var(--green);
}


/* ==========================================================================
   ARTICLE DETAIL
   ========================================================================== */

.blog-article {
  position: relative;

  width: 100%;

  padding:
    55px 0 90px;

  background: #0d1112;

  color: #fff;
}


/* =========================================================
   ARTICLE HEADER
   ========================================================= */

.blog-article-header {
  width: 100%;

  margin:
    0 0 38px;
}


/* =========================================================
   ARTICLE BACK LINK
   ========================================================= */

.blog-back {
  display: inline-flex;

  align-items: center;

  margin-bottom: 26px;

  color: #c4cbc7;

  font-size: 15px;

  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}


.blog-back:hover {
  color:
    var(--green-light);

  transform:
    translateX(-3px);
}


/* =========================================================
   ARTICLE DATE
   ========================================================= */

.blog-article-date {
  margin-bottom: 13px;

  color:
    var(--green);

  font-size: 15px;

  font-weight: 600;

  line-height: 1.3;
}


/* =========================================================
   ARTICLE TITLE
   ========================================================= */

.blog-article h1 {
  width: 100%;

  margin:
    0 0 22px;

  color: #fff;

  font-size:
    clamp(34px,
      4vw,
      52px);

  font-weight: 800;

  line-height: 1.12;

  letter-spacing: -.02em;
}


/* =========================================================
   ARTICLE ANONS
   ========================================================= */

.blog-article-lead {
  width: 100%;

  margin-top: 20px;

  color: #c6cdc9;

  font-size: 19px;

  font-weight: 400;

  line-height: 1.6;
}


.blog-article-lead p {
  margin:
    0 0 14px;
}


.blog-article-lead p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   ARTICLE MAIN IMAGE
   ========================================================= */

.blog-article-image {
  position: relative;

  width: 100%;

  margin:
    0 0 40px;

  overflow: hidden;

  background: #171d20;

  border:
    1px solid #26312d;

  border-radius: 22px;

  aspect-ratio:
    16 / 8;
}


.blog-article-image img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.blog-article-content {
  width: 100%;

  margin: 0;

  padding:
    40px 45px;

  color: #e4e8e5;

  background: #171d20;

  border:
    1px solid #242d2a;

  border-radius: 22px;

  font-size: 17px;

  font-weight: 400;

  line-height: 1.7;

  box-sizing: border-box;
}


/* =========================================================
   ARTICLE PARAGRAPHS
   ========================================================= */

.blog-article-content p {
  margin:
    0 0 22px;

  color: inherit;

  font-size: inherit;

  line-height: inherit;
}


.blog-article-content p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   ARTICLE HEADINGS
   ========================================================= */

.blog-article-content h2 {
  margin:
    44px 0 20px;

  color:
    var(--green);

  font-size: 30px;

  font-weight: 800;

  line-height: 1.25;
}


.blog-article-content h2:first-child {
  margin-top: 0;
}


.blog-article-content h3 {
  margin:
    34px 0 16px;

  color:
    var(--green-light);

  font-size: 23px;

  font-weight: 700;

  line-height: 1.3;
}


.blog-article-content h4 {
  margin:
    28px 0 14px;

  color: #fff;

  font-size: 19px;

  font-weight: 700;

  line-height: 1.35;
}


/* =========================================================
   ARTICLE LISTS
   ========================================================= */

.blog-article-content ul,
.blog-article-content ol {

  margin:
    0 0 24px;

  padding-left: 24px;
}


.blog-article-content li {
  margin-bottom: 9px;
}


.blog-article-content li:last-child {
  margin-bottom: 0;
}


.blog-article-content li::marker {
  color:
    var(--green);
}


/* =========================================================
   ARTICLE LINKS
   ========================================================= */

.blog-article-content a {
  color:
    var(--green-light);

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


/* =========================================================
   ARTICLE INLINE IMAGES
   ========================================================= */

.blog-article-content img {
  display: block;

  max-width: 100%;

  height: auto;

  margin:
    30px auto;

  border-radius: 16px;
}


/* =========================================================
   ARTICLE BLOCKQUOTE
   ========================================================= */

.blog-article-content blockquote {
  margin:
    30px 0;

  padding:
    22px 26px;

  color: #fff;

  background: #111416;

  border-left:
    3px solid var(--green);

  border-radius:
    0 14px 14px 0;
}


.blog-article-content blockquote p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   ARTICLE TABLE
   ========================================================= */

.blog-article-content table {
  width: 100%;

  margin:
    28px 0;

  border-collapse:
    collapse;
}


.blog-article-content th,
.blog-article-content td {

  padding:
    13px 15px;

  border:
    1px solid #303a36;

  text-align: left;

  vertical-align: top;
}


.blog-article-content th {
  color: #fff;

  background: #111416;
}


/* =========================================================
   ARTICLE VIDEO / IFRAME
   ========================================================= */

.blog-article-content iframe {
  display: block;

  width: 100%;

  max-width: 100%;

  min-height: 500px;

  margin:
    30px 0;

  border: 0;

  border-radius: 16px;
}


/* =========================================================
   ARTICLE FOOTER
   ========================================================= */

.blog-article-footer {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  width: 100%;

  margin:
    32px 0 0;
}


.blog-article-footer .btn-dark-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    15px 40px;

  color: #fff;

  background: #343434;

  border:
    1px solid #343434;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition:
    border-color .2s ease,
    background .2s ease;
}


.blog-article-footer .btn-dark-pill:hover {

  color: #fff;

  background: #1c2225;

  border-color:
    var(--green);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1199px) {

  .blog-page .blog-grid {
    grid-template-columns:
      repeat(2,
        minmax(0,
          1fr));
  }

}


@media (max-width: 991px) {

  .blog-page {
    padding:
      50px 0 70px;
  }


  .blog-page-head .section-title h1 {

    font-size: 30px;
  }


  .blog-article {
    padding:
      45px 0 70px;
  }


  .blog-article h1 {
    font-size:
      clamp(32px,
        5vw,
        44px);
  }


  .blog-article-image {
    aspect-ratio:
      16 / 9;
  }


  .blog-article-content {
    padding:
      32px;
  }


  .blog-article-content iframe {
    min-height: 420px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .blog-page {
    padding:
      38px 0 55px;
  }


  .blog-page-head {
    margin-bottom: 28px;
  }


  .blog-page-head .section-title {

    gap: 16px;
  }


  .blog-page-head .section-title h1 {

    font-size: 26px;

    white-space: normal;
  }


  .blog-page-head .section-title .line {

    flex: 1;

    width: auto;
  }


  .blog-page .blog-grid {
    grid-template-columns:
      1fr;

    gap: 20px;
  }


  .blog-page .blog-card {
    border-radius: 18px;
  }


  .blog-page .blog-card-body {
    padding:
      20px;
  }


  .blog-page .blog-card h2 {
    font-size: 19px;
  }


  .blog-page .blog-card p {
    font-size: 14px;

    line-height: 1.5;
  }


  .blog-article {
    padding:
      35px 0 55px;
  }


  .blog-back {
    margin-bottom: 20px;

    font-size: 14px;
  }


  .blog-article-date {
    font-size: 14px;
  }


  .blog-article h1 {
    font-size: 30px;

    line-height: 1.16;
  }


  .blog-article-lead {
    font-size: 16px;

    line-height: 1.55;
  }


  .blog-article-image {
    margin-bottom: 25px;

    border-radius: 16px;

    aspect-ratio:
      4 / 3;
  }


  .blog-article-content {
    padding:
      24px 20px;

    border-radius: 18px;

    font-size: 15px;

    line-height: 1.65;
  }


  .blog-article-content h2 {
    margin-top: 34px;

    font-size: 24px;
  }


  .blog-article-content h3 {
    margin-top: 28px;

    font-size: 20px;
  }


  .blog-article-content iframe {
    min-height: 280px;
  }


  .blog-article-footer {
    margin-top: 24px;
  }


  .blog-article-footer .btn-dark-pill {

    width: 100%;
  }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

  .blog-page-head .section-title h1 {

    font-size: 24px;
  }


  .blog-page .blog-card-image {
    aspect-ratio:
      4 / 3;
  }


  .blog-article h1 {
    font-size: 27px;
  }


  .blog-article-content {
    padding:
      20px 17px;
  }


  .blog-article-content iframe {
    min-height: 220px;
  }

}


/* ==========================================================================
   SECTION 22 END — BLOG / NEWS
   ========================================================================== */

/* ==========================================================================
   SECTION 23 START — ABOUT PAGE
   ========================================================================== */


/* =========================================================
   HERO
   ========================================================= */

.about-hero {
  position: relative;

  padding:
    65px 0 75px;

  overflow: hidden;

  background:
    radial-gradient(circle at 88% 25%,
      rgba(0, 142, 58, .20) 0%,
      rgba(0, 142, 58, .05) 32%,
      transparent 58%),
    #0d1112;
}


.about-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) minmax(420px, .9fr);

  gap: 55px;

  align-items: center;
}


/* =========================================================
   HERO COPY
   ========================================================= */

.about-hero-copy {
  min-width: 0;
}


.about-kicker {
  margin-bottom: 16px;

  color:
    var(--green);

  font-size: 14px;

  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.about-hero h1 {
  max-width: 760px;

  margin:
    0 0 25px;

  color: #fff;

  font-size:
    clamp(38px,
      4vw,
      58px);

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -.02em;
}


.about-hero-content {
  max-width: 760px;

  color: #d2d9d5;

  font-size: 19px;

  line-height: 1.55;
}


.about-hero-content p {
  margin:
    0 0 16px;
}


.about-hero-content p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.about-hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}


.about-hero-actions .btn-dark-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    15px 34px;

  color: #fff;

  background: #343434;

  border:
    1px solid #343434;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition:
    border-color .2s ease,
    background .2s ease;
}


.about-hero-actions .btn-dark-pill:hover {

  color: #fff;

  background: #1c2225;

  border-color:
    var(--green);
}


/* =========================================================
   HERO MEDIA
   ========================================================= */

.about-hero-media {
  position: relative;

  min-width: 0;

  min-height: 430px;

  overflow: hidden;

  background: #171d20;

  border:
    1px solid #27302d;

  border-radius: 24px;
}


.about-hero-media::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(180deg,
      transparent 45%,
      rgba(5, 10, 6, .82) 100%);

  pointer-events: none;
}


.about-hero-media img {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;
}


.about-hero-media-caption {
  position: absolute;

  left: 28px;
  right: 28px;
  bottom: 26px;

  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 5px;
}


.about-hero-media-caption strong {
  color: #fff;

  font-size: 23px;

  font-weight: 800;
}


.about-hero-media-caption span {
  color: #c9d1cc;

  font-size: 15px;
}


/* =========================================================
   SHARED ABOUT SECTIONS
   ========================================================= */

.about-section {
  padding-top: 70px !important;

  padding-bottom: 75px !important;
}


.about-section.pt-0 {
  padding-top: 0 !important;
}


.about-section .section-title {

  margin-top: 0;

  margin-bottom: 45px;

  padding-left: 0;
}


/* =========================================================
   ADVANTAGES
   ========================================================= */

.about-section .adv-grid {

  margin-top: 0;
}


.about-section .adv-card {

  height: 100%;
}


/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.about-section .cat-card {

  text-decoration: none;
}


/* =========================================================
   COUNTRIES
   ========================================================= */

.about-section .country-grid {

  margin-top: 0;
}


/* =========================================================
   HOW WE WORK
   ========================================================= */

/* =========================================================
   HOW WE WORK — ABOUT PAGE
   ========================================================= */

/*
 * На странице "О нас" даём блоку
 * нормальный верхний воздух.
 *
 * !important нужен потому, что
 * сам виджет содержит Bootstrap-класс pt-0.
 */
.how-we-work-widget.about-how {
  padding-top: 75px !important;

  padding-bottom: 85px !important;
}


/*
 * Заголовок не создаёт дополнительный
 * внешний отступ сверху — весь отступ
 * задаётся самой секцией.
 */
.how-we-work-widget.about-how .section-title {

  margin-top: 0;

  margin-bottom: 55px;

  padding-left: 21px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

  .how-we-work-widget.about-how {
    padding-top: 60px !important;

    padding-bottom: 65px !important;
  }


  .how-we-work-widget.about-how .section-title {

    margin-bottom: 40px;

    padding-left: 0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .how-we-work-widget.about-how {
    padding-top: 45px !important;

    padding-bottom: 50px !important;
  }


  .how-we-work-widget.about-how .section-title {

    margin-bottom: 30px;
  }

}


/* =========================================================
   LEAD
   ========================================================= */

.about-lead {
  border-top:
    1px solid rgba(255,
      255,
      255,
      .04);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 991px) {

  .about-hero {
    padding:
      50px 0 60px;
  }


  .about-hero-grid {
    grid-template-columns:
      1fr;

    gap: 35px;
  }


  .about-hero-media {
    min-height: 360px;

    order: -1;
  }


  .about-hero h1 {
    font-size:
      clamp(34px,
        6vw,
        46px);
  }


  .about-hero-content {
    max-width: 100%;
  }


  .about-section {
    padding-top:
      55px !important;

    padding-bottom:
      60px !important;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .about-hero {
    padding:
      35px 0 45px;
  }


  .about-hero-grid {
    gap: 28px;
  }


  .about-hero-media {
    min-height: 280px;

    border-radius: 18px;
  }


  .about-hero-media-caption {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }


  .about-hero-media-caption strong {
    font-size: 19px;
  }


  .about-hero h1 {
    margin-bottom: 18px;

    font-size: 31px;
  }


  .about-hero-content {
    font-size: 16px;

    line-height: 1.55;
  }


  .about-hero-actions {
    flex-direction: column;

    align-items: stretch;

    margin-top: 26px;
  }


  .about-hero-actions .btn-brand,
  .about-hero-actions .btn-dark-pill {

    width: 100%;
  }


  .about-section {
    padding-top:
      42px !important;

    padding-bottom:
      48px !important;
  }


  .about-section .section-title,
  .about-how .section-title {

    margin-bottom: 30px;
  }


  .about-how {
    padding-bottom:
      55px !important;
  }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

  .about-hero-media {
    min-height: 240px;
  }


  .about-hero h1 {
    font-size: 28px;
  }

}


/* ==========================================================================
   SECTION 23 END — ABOUT PAGE
   ========================================================================== */
/* ==========================================================================
   HOW WE WORK
   ========================================================================== */

.how-we-work-widget {
  padding-bottom:
    80px !important;

  background: #000;
}


.how-we-work-widget .section-title {

  margin-top: 0;

  margin-bottom: 60px;

  padding-left: 21px;
}


/* =========================================================
   GRID
   ========================================================= */

.how-we-work-widget .steps-wrap {

  display: grid;

  grid-template-columns:
    minmax(0, .60fr) minmax(0, 1.15fr);

  gap: 24px;

  align-items: start;
}


/* =========================================================
   MEDIA
   ========================================================= */

.how-we-work-widget .steps-media {

  position: sticky;

  top: 20px;

  width: 100%;

  aspect-ratio:
    4 / 3;

  min-width: 0;

  overflow: hidden;

  background: #111416;

  border:
    1px solid #252c2e;

  border-radius:
    var(--radius-lg);
}


/* =========================================================
   POSTER
   ========================================================= */

.how-we-work-widget .steps-media-poster {

  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  opacity: 1;

  transition:
    opacity .35s ease;
}


/* =========================================================
   VIDEO
   ========================================================= */

.how-we-work-widget .steps-process-video {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  background: transparent;

  opacity: 0;

  transition:
    opacity .35s ease;
}


/*
 * Только после загрузки MP4
 * video становится видимым.
 */
.how-we-work-widget .steps-media.is-video-ready .steps-process-video {

  opacity: 1;
}


.how-we-work-widget .steps-media.is-video-ready .steps-media-poster {

  opacity: 0;
}


/* =========================================================
   LOADER
   ========================================================= */

.how-we-work-widget .steps-media-loader {

  position: absolute;

  right: 18px;
  bottom: 18px;

  z-index: 4;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  visibility: hidden;

  opacity: 0;

  pointer-events: none;

  background:
    rgba(8,
      11,
      10,
      .72);

  border:
    1px solid rgba(255,
      255,
      255,
      .10);

  border-radius: 50%;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}


.how-we-work-widget .steps-media-loader.is-visible {

  visibility: visible;

  opacity: 1;
}


.how-we-work-widget .steps-media-loader span {

  display: block;

  width: 21px;

  height: 21px;

  border:
    2px solid rgba(255,
      255,
      255,
      .18);

  border-top-color:
    var(--green-light);

  border-radius: 50%;

  animation:
    howWeWorkLoader .7s linear infinite;
}


@keyframes howWeWorkLoader {

  to {
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   STEPS LIST
   ========================================================= */

.how-we-work-widget .steps-list {

  min-width: 0;
}


/* =========================================================
   STEP
   ========================================================= */

.how-we-work-widget .step-item {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 14px;

  padding:
    22px 40px;

  cursor: pointer;

  background: #111416;

  border:
    1px solid transparent;

  border-radius: 28px;

  outline: none;

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}


.how-we-work-widget .step-item:last-child {

  margin-bottom: 0;
}


.how-we-work-widget .step-item:hover {

  border-color:
    var(--green-light);

  transform:
    translateX(4px);
}


.how-we-work-widget .step-item:focus-visible {

  border-color:
    var(--green-light);

  box-shadow:
    0 0 0 3px rgba(31,
      174,
      77,
      .14);
}


.how-we-work-widget .step-item.active {

  background: #1c2225;

  border-color:
    rgba(31,
      174,
      77,
      .38);

  box-shadow:
    0 8px 24px rgba(31,
      174,
      77,
      .13);
}


/* =========================================================
   ICON
   ========================================================= */

.how-we-work-widget .step-icon {

  display: flex;

  width: 48px;

  height: 48px;

  align-items: center;

  justify-content: center;

  flex:
    0 0 48px;
}


.how-we-work-widget .step-icon img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;
}


/* =========================================================
   CONTENT
   ========================================================= */

.how-we-work-widget .step-content {

  min-width: 0;
}


.how-we-work-widget .step-item h5 {

  margin:
    0 0 10px;

  color: #fff;

  font-size: 25px;

  font-weight: 900;

  line-height: 1.2;
}


.how-we-work-widget .step-item p {

  margin: 0;

  color: #fff;

  font-size: 16px;

  font-weight: 400;

  line-height: 1.5;
}


/* ==========================================================================
   MOBILE / TABLET

   ВАЖНО:
   VIDEO ПОЛНОСТЬЮ СКРЫТО.
   ОСТАЁТСЯ ТОЛЬКО steps-media.jpg.
   ========================================================================== */

@media (max-width: 991px) {

  .how-we-work-widget {
    padding-bottom:
      65px !important;
  }


  .how-we-work-widget .section-title {

    margin-bottom: 40px;

    padding-left: 0;
  }


  .how-we-work-widget .steps-wrap {

    grid-template-columns:
      1fr;

    gap: 25px;
  }


  .how-we-work-widget .steps-media {

    position: relative;

    top: auto;

    aspect-ratio:
      16 / 9;
  }


  /*
   * Видео на mobile вообще не показываем.
   */
  .how-we-work-widget .steps-process-video {

    display: none;
  }


  /*
   * Loader тоже не нужен,
   * потому что видео не загружается.
   */
  .how-we-work-widget .steps-media-loader {

    display: none;
  }


  /*
   * Картинка всегда видима.
   */
  .how-we-work-widget .steps-media-poster,
  .how-we-work-widget .steps-media.is-video-ready .steps-media-poster {

    opacity: 1;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .how-we-work-widget {
    padding-bottom:
      50px !important;
  }


  .how-we-work-widget .steps-media {

    border-radius: 20px;
  }


  .how-we-work-widget .step-item {

    align-items: flex-start;

    padding:
      20px;

    border-radius: 20px;
  }


  .how-we-work-widget .step-item:hover {

    transform: none;
  }


  .how-we-work-widget .step-icon {

    width: 42px;

    height: 42px;

    flex-basis: 42px;
  }


  .how-we-work-widget .step-item h5 {

    font-size: 20px;
  }


  .how-we-work-widget .step-item p {

    font-size: 14px;
  }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

  .how-we-work-widget .steps-media {

    aspect-ratio:
      4 / 3;
  }


  .how-we-work-widget .step-item {

    gap: 13px;

    padding:
      17px;
  }


  .how-we-work-widget .step-icon {

    width: 38px;

    height: 38px;

    flex-basis: 38px;
  }


  .how-we-work-widget .step-item h5 {

    font-size: 18px;
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .how-we-work-widget .steps-media-poster,
  .how-we-work-widget .steps-process-video,
  .how-we-work-widget .step-item {

    transition: none;
  }


  .how-we-work-widget .step-item:hover {

    transform: none;
  }


  .how-we-work-widget .steps-media-loader span {

    animation: none;
  }

}


/* ==========================================================================
   END — HOW WE WORK
   ========================================================================== */

/* ==========================================================================
   SECTION 24 START — REVIEW DETAIL
   ========================================================================== */


/* =========================================================
   PAGE
   ========================================================= */

.review-detail-section {
  position: relative;

  padding:
    60px 0 90px;

  background: #111416;
}


/* =========================================================
   BACK
   ========================================================= */

.review-detail-head {
  margin-bottom: 30px;
}


.review-detail-back {
  display: inline-flex;

  align-items: center;

  color: #c4cbc7;

  font-size: 15px;

  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}


.review-detail-back:hover {
  color:
    var(--green-light);

  transform:
    translateX(-3px);
}


/* =========================================================
   CARD
   ========================================================= */

.review-detail-card {
  width: 100%;

  align-items: start;
}


.review-detail-card--text-only {
  grid-template-columns:
    1fr;
}


/* =========================================================
   TITLE
   ========================================================= */

.review-detail-card h1 {
  margin:
    0 0 20px;

  color: #fff;

  font-size:
    clamp(28px,
      3vw,
      40px);

  font-weight: 800;

  line-height: 1.2;
}


/* =========================================================
   DATE
   ========================================================= */

.review-detail-card .rv-meta {

  margin-bottom: 28px;

  color:
    var(--green);

  font-size: 15px;

  font-weight: 500;
}


/* =========================================================
   CONTENT
   ========================================================= */

.review-detail-card .review-content {

  color: #fff;

  font-size: 18px;

  font-weight: 400;

  line-height: 1.65;
}


.review-detail-card .review-content p {

  margin:
    0 0 18px;

  color: inherit;

  font-size: inherit;

  line-height: inherit;

  text-align: left;
}


.review-detail-card .review-content p:last-child {

  margin-bottom: 0;
}


.review-detail-card .review-content h2 {

  margin:
    34px 0 16px;

  color:
    var(--green);

  font-size: 27px;

  font-weight: 700;
}


.review-detail-card .review-content h3 {

  margin:
    28px 0 14px;

  color:
    var(--green-light);

  font-size: 22px;

  font-weight: 700;
}


.review-detail-card .review-content ul,
.review-detail-card .review-content ol {

  margin:
    0 0 20px;

  padding-left: 24px;
}


.review-detail-card .review-content li {

  margin-bottom: 8px;
}


.review-detail-card .review-content li::marker {

  color:
    var(--green);
}


/* =========================================================
   MEDIA
   ========================================================= */

.review-detail-card .review-video {

  width: 100%;

  min-height: 300px;

  background: #0d1112;

  border-radius:
    var(--radius-md);
}


.review-detail-card .review-video img {

  display: block;

  width: 100%;

  height: auto;

  max-height: 650px;

  object-fit: contain;

  border-radius:
    var(--radius-md);
}


.review-video-placeholder {
  display: flex;

  width: 100%;

  min-height: 360px;

  align-items: center;

  justify-content: center;

  color: #8e9893;

  background: #0d1112;

  font-size: 17px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.review-detail-footer {
  display: flex;

  margin-top: 30px;
}


.review-detail-footer .btn-dark-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    15px 40px;

  color: #fff;

  background: #343434;

  border:
    1px solid #343434;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition:
    background .2s ease,
    border-color .2s ease;
}


.review-detail-footer .btn-dark-pill:hover {

  color: #fff;

  background: #1c2225;

  border-color:
    var(--green);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 991px) {

  .review-detail-section {
    padding:
      50px 0 70px;
  }


  .review-detail-card {
    grid-template-columns:
      1fr;

    gap: 30px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .review-detail-section {
    padding:
      35px 0 55px;
  }


  .review-detail-head {
    margin-bottom: 22px;
  }


  .review-detail-card {
    padding:
      22px 18px;

    border-radius: 20px;
  }


  .review-detail-card h1 {
    font-size: 27px;
  }


  .review-detail-card .review-content {

    font-size: 15px;

    line-height: 1.6;
  }


  .review-detail-card .review-video {

    min-height: 0;
  }


  .review-video-placeholder {
    min-height: 230px;
  }


  .review-detail-footer .btn-dark-pill {

    width: 100%;
  }

}


/* ==========================================================================
   SECTION 24 END — REVIEW DETAIL
   ========================================================================== */

/* ==========================================================================
   SECTION 25 START — HOME HOW WE WORK SPACING
   ========================================================================== */


/*
 * Отделяем блок "Как мы работаем"
 * от карточек способов оплаты.
 *
 * Используем margin, а не padding,
 * чтобы между чёрным блоком оплаты
 * и секцией How We Work
 * оставался визуальный чёрный воздух.
 */
.how-we-work-widget.home-how {
  margin-top: 75px;
  background: #000;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 991px) {

  .how-we-work-widget.home-how {
    margin-top: 55px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .how-we-work-widget.home-how {
    margin-top: 40px;
  }

}


/* ==========================================================================
   SECTION 25 END — HOME HOW WE WORK SPACING
   ========================================================================== */
/* ==========================================================================
   SECTION 26 START — MOBILE CATALOG / MODEL FINAL
   Финальные переопределения по мобильным макетам.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Elements that exist only for the responsive catalog UI
   -------------------------------------------------------------------------- */

.hero-mobile-media,
.catalog-mobile-filter-open,
.catalog-mobile-filter-head,
.model-mobile-head {
  display: none;
}

.hero-category-space {
  min-height: 480px;
}

html.catalog-filter-open,
body.catalog-filter-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}


/* --------------------------------------------------------------------------
   MODEL — shared desktop-safe additions
   -------------------------------------------------------------------------- */

.model-detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.model-how {
  background: #000 !important;
}


/* ==========================================================================
   PHONE
   ========================================================================== */

@media (max-width: 767px) {

  /* ========================================================================
     CATEGORY HERO
     ======================================================================== */

  .hero.hero-category {
    background-image: none !important;
    background-color: #000 !important;
    border-bottom: 0;
  }

  .hero.hero-category>.container-xl {
    padding-top: 18px;
    padding-bottom: 26px;
  }

  .hero.hero-category .row {
    display: block;
  }

  .hero.hero-category h1 {
    max-width: none;
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.26;
    font-weight: 700;
  }

  .hero.hero-category h1 .accent {
    color: var(--green-light);
  }

  .hero.hero-category .hero-sub {
    max-width: none;
    margin: 0 0 14px;
    color: var(--green-light);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
  }

  .hero.hero-category .hero-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    margin: 0 0 14px;
  }

  .hero.hero-category .feature-card {
    min-width: 0;
    min-height: 66px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(20, 28, 24, .92);
    border-color: rgba(255, 255, 255, .07);
    backdrop-filter: none;
  }

  .hero.hero-category .feature-card:nth-child(n+3) {
    display: none;
  }

  .hero.hero-category .feature-num {
    margin-right: 6px;
    font-size: 38px;
    color: rgba(255, 255, 255, .10);
  }

  .hero.hero-category .feature-text {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
  }

  .hero.hero-category .feature-icon {
    width: 30px;
    height: 30px;
    margin-left: 4px;
  }

  .hero-mobile-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: 12px;
    background-color: #101713;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  .hero.hero-category .hero-category-cta {
    display: flex;
    width: 100%;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
  }


  /* ========================================================================
     CATALOG SEARCH / FILTER
     ======================================================================== */

  .catalog-page-filter.filter-section {
    padding: 12px 0 24px;
    background: #fff;
  }

  .catalog-page-filter .catalog-search-box {
    min-height: 42px;
    margin: 0 0 10px;
    padding: 0 0 0 13px;
    gap: 8px;
    overflow: hidden;
    background: #f3f4f3;
    border: 1px solid #e5e7e5;
    border-radius: 11px;
  }

  .catalog-page-filter .catalog-search-box>i {
    flex: 0 0 auto;
    font-size: 13px;
    color: #8a8e8a;
  }

  .catalog-page-filter .catalog-search-box input {
    min-width: 0;
    padding: 10px 0;
    font-size: 12px;
    font-weight: 600;
  }

  .catalog-page-filter .catalog-search-box input::placeholder {
    color: #666b68;
    font-size: 12px;
    font-weight: 600;
  }

  .catalog-mobile-filter-open {
    display: inline-flex;
    min-height: 40px;
    margin-left: auto;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    color: #272b29;
    background: transparent;
    border: 0;
    border-left: 1px solid #dfe2df;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }

  .catalog-mobile-filter-open i {
    font-size: 11px;
  }

  .catalog-mobile-filter-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--green);
  }

  .catalog-page-filter .filter-row {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 62px 14px 24px;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    background: #fff;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    -webkit-overflow-scrolling: touch;
  }

  .catalog-page-filter .filter-row.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .catalog-mobile-filter-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 42px 1fr 62px;
    min-height: 52px;
    padding: 4px 8px;
    align-items: center;
    color: #111;
    background: #fff;
    border-bottom: 1px solid #eeeeee;
  }

  .catalog-mobile-filter-head strong {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
  }

  .catalog-mobile-filter-close,
  .catalog-mobile-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
  }

  .catalog-mobile-filter-close {
    width: 38px;
    height: 38px;
    color: #111;
    font-size: 22px;
  }

  .catalog-mobile-filter-reset {
    min-height: 38px;
    color: #9a9d9a;
    font-size: 10px;
    font-weight: 600;
  }

  .catalog-page-filter .filter-pill {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    color: #181a19;
    background: #f0f1f0;
    border: 0;
    border-radius: 10px;
    outline: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
  }

  .catalog-page-filter .filter-pill[name="brand"] {
    color: #fff;
    background: var(--green);
  }

  .catalog-page-filter .filter-apply {
    display: flex;
    width: 100%;
    min-height: 40px;
    margin: 2px 0 0;
    padding: 9px 16px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 11px;
  }

  .catalog-page-filter .catalog-desktop-filter-reset {
    display: none !important;
  }

  .catalog-page-filter .js-model-filter-status {
    display: none !important;
  }

  .catalog-page-filter.is-loading .truck-grid {
    opacity: .55;
    pointer-events: none;
  }


  /* ========================================================================
     CATALOG CARDS
     ======================================================================== */

  .catalog-page-filter .truck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
    margin-top: 8px;
  }

  .catalog-page-filter .truck-card {
    min-width: 0;
  }

  .catalog-page-filter .truck-card:hover {
    transform: none;
  }

  .catalog-page-filter .truck-card .tc-img {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: #edf0ed;
  }

  .catalog-page-filter .truck-card:hover .tc-img img {
    transform: none;
  }

  .catalog-page-filter .tc-badge {
    left: 5px;
    bottom: 5px;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 8px;
    line-height: 1;
  }

  .catalog-page-filter .tc-title {
    padding: 5px 1px 0;
    color: #111;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 700;
  }

  .catalog-page-filter .load-more-wrap {
    margin-top: 18px;
  }

  .catalog-page-filter .js-model-load-more {
    width: 100%;
  }


  /* ========================================================================
     OTHER CATEGORIES
     ======================================================================== */

  .catalog-other-categories.section-dark {
    padding: 30px 12px 38px !important;
    background: #000;
  }

  .catalog-other-categories .section-title {
    justify-content: center;
    margin: 0 0 18px;
    padding: 0;
    color: #fff;
    font-size: 16px;
    text-align: center;
  }

  .catalog-other-categories .section-title .line {
    display: none;
  }

  .catalog-other-categories .cat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .catalog-other-categories .cat-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1.08 / 1;
    border-radius: 14px;
  }

  .catalog-other-categories .cat-card img {
    top: 0;
    object-fit: cover;
    opacity: 1;
  }

  .catalog-other-categories .cat-card .cat-label {
    top: 17px;
    font-size: 17px;
    line-height: 1.2;
  }


  /* ========================================================================
     CATEGORY CALCULATOR
     ======================================================================== */

  .catalog-calc-band.calc-band,
  .model-calc-band.calc-band {
    padding: 34px 0 30px;
    background: #000;
  }

  .catalog-calc-band .row,
  .model-calc-band .row {
    flex-direction: column-reverse;
    gap: 12px !important;
  }

  .catalog-calc-band .calc-text,
  .model-calc-band .col-lg-6:first-child {
    margin-top: 0;
    padding-left: calc(var(--bs-gutter-x) * .5);
    text-align: center;
  }

  .catalog-calc-band h2,
  .model-calc-band h2 {
    max-width: 250px;
    margin: 0 auto 10px;
    font-size: 18px;
    line-height: 1.2;
  }

  .catalog-calc-band p,
  .model-calc-band p {
    max-width: 270px;
    margin: 0 auto 10px;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 600;
  }

  .catalog-calc-band .status-open,
  .model-calc-band .status-open {
    justify-content: center;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 10px;
  }

  .catalog-calc-band .status-dot,
  .model-calc-band .status-dot {
    width: 8px;
    height: 8px;
  }

  .catalog-calc-band .calc-figure img,
  .model-calc-band .calc-figure img {
    width: min(190px, 62vw);
  }

  .catalog-calc-band .btn-brand,
  .model-calc-band .btn-brand {
    width: min(270px, 100%);
    min-height: 40px;
    padding: 10px 18px;
    font-size: 12px;
  }


  /* ========================================================================
     CATEGORY LEAD
     ======================================================================== */

  .catalog-lead-band.lead-band {
    padding: 18px 0 24px;
    background: #000;
  }

  .catalog-lead-band .lead-grid {
    gap: 10px;
  }

  .catalog-lead-band .lead-media {
    min-height: 205px;
    border-radius: 12px;
  }

  .catalog-lead-band .lead-media-overlay {
    padding: 16px;
  }

  .catalog-lead-band .lead-media-overlay h3 {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.25;
  }

  .catalog-lead-band .lead-media-overlay p {
    max-width: 240px;
    font-size: 10px;
    line-height: 1.35;
  }

  .catalog-lead-band .lead-form-panel {
    padding: 18px 16px;
    border-radius: 12px;
  }

  .catalog-lead-band .lead-form-panel h3 {
    margin-bottom: 14px;
    font-size: 16px;
  }

  .catalog-lead-band .form-control-custom {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .catalog-lead-band textarea.form-control-custom {
    min-height: 90px;
  }

  .catalog-lead-band .lead-form-bottom {
    gap: 12px;
  }

  .catalog-lead-band .consent-check {
    font-size: 9px;
  }


  /* ========================================================================
     CATEGORY ARTICLE
     ======================================================================== */

  .catalog-article-section.article-section {
    padding: 0 12px 24px;
    background: #000;
  }

  .catalog-article-section>.container-xl {
    padding: 18px 16px;
    background: #171d20;
    border-radius: 12px;
  }

  .catalog-article-section h2 {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.3;
  }

  .catalog-article-section h3,
  .catalog-article-section h4 {
    margin: 20px 0 9px;
    font-size: 14px;
  }

  .catalog-article-section p,
  .catalog-article-section li {
    font-size: 11px;
    line-height: 1.45;
  }


  /* ========================================================================
     MODEL DETAIL — mobile order from the supplied mockup
     ======================================================================== */

  .model-detail-section {
    padding: 14px 0 30px;
    background: #fff;
  }

  .model-mobile-head {
    display: block;
    margin-bottom: 12px;
  }

  .model-mobile-head h1 {
    margin: 0 0 5px;
    color: #111;
    font-size: 18px;
    line-height: 1.28;
    font-weight: 700;
  }

  .model-mobile-head .model-price {
    margin-bottom: 0;
    font-size: 11px;
    line-height: 1.3;
  }

  .model-detail-row {
    gap: 0 !important;
  }

  .model-main-img {
    aspect-ratio: 4 / 3;
    border-radius: 11px;
    box-shadow: none;
  }

  .model-main-img img {
    object-fit: cover;
  }

  .model-detail-section .gallery-nav-btn {
    display: none;
  }

  .model-thumbs {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .model-thumbs::-webkit-scrollbar {
    display: none;
  }

  .model-thumbs .thumb-item {
    width: 56px;
    min-width: 56px;
    aspect-ratio: 1 / 1;
    border-width: 1px;
    border-radius: 7px;
  }

  .model-info {
    max-width: none;
    margin-top: 14px;
    padding-left: 0;
  }

  .model-specs {
    gap: 0;
    margin-bottom: 17px;
  }

  .model-specs .spec-row {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    min-height: 26px;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    font-size: 10px;
    border-bottom: 1px solid #eceeec;
  }

  .model-specs .spec-name {
    color: #767b77;
    font-size: 10px;
  }

  .model-specs .spec-val {
    color: #151715;
    font-size: 10px;
    font-weight: 700;
  }

  .model-detail-cta {
    width: 100%;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 12px;
  }

  .model-detail-section .row.mt-5 {
    margin-top: 24px !important;
  }

  .model-detail-section .model-description {
    padding: 16px;
    background: #f5f6f5;
    border-radius: 12px;
  }

  .model-detail-section .model-description h3 {
    margin-bottom: 10px;
    color: #111;
    font-size: 16px;
  }

  .model-detail-section .model-description__content,
  .model-detail-section .model-description__content p {
    color: #313531;
    font-size: 11px;
    line-height: 1.45;
  }


  /* ========================================================================
     MODEL REVIEWS
     ======================================================================== */

  .model-reviews-section.section-reviews,
  .model-reviews-section.section-reviews.pt-0 {
    padding-top: 30px !important;
    padding-bottom: 36px !important;
    background: #000;
  }

  .model-reviews-section .section-title {
    margin-bottom: 18px;
    color: #fff;
  }

  .model-reviews-section .review-swiper .swiper-slide {
    width: 86% !important;
    max-width: 86%;
    flex-basis: 86%;
  }

  .model-reviews-section .review-swiper .review-card {
    padding: 14px;
    gap: 12px;
    border-radius: 12px;
  }

  .model-reviews-section .review-swiper .review-card h5 {
    margin-bottom: 8px;
    font-size: 13px;
  }

  .model-reviews-section .review-swiper .review-card .rv-meta {
    margin-bottom: 10px;
    font-size: 9px;
  }

  .model-reviews-section .review-swiper .review-anons {
    font-size: 10px;
    line-height: 1.35;
  }

  .model-reviews-section .review-swiper .review-card .review-more {
    margin-top: 8px;
    padding: 10px 14px;
    font-size: 10px;
  }


  /* ========================================================================
     MODEL HOW WE WORK
     ======================================================================== */

  .how-we-work-widget.model-how {
    padding-top: 34px !important;
    padding-bottom: 38px !important;
    background: #000 !important;
  }

  .how-we-work-widget.model-how .section-title {
    margin-bottom: 24px;
  }


  /* ========================================================================
     MOBILE VIDEO SECTIONS AFTER MODEL
     ======================================================================== */

  .model-calc-band+.how-we-work-widget,
  .how-we-work-widget.model-how+.section-dark,
  .how-we-work-widget.model-how~.section-dark {
    background: #000;
  }

}


/* ==========================================================================
   VERY SMALL PHONE
   ========================================================================== */

@media (max-width: 390px) {

  .hero.hero-category h1 {
    font-size: 18px;
  }

  .hero.hero-category .feature-text {
    font-size: 9px;
  }

  .catalog-page-filter .truck-grid {
    gap: 8px 6px;
  }

  .catalog-page-filter .tc-title {
    font-size: 9px;
  }

  .catalog-other-categories .cat-card .cat-label {
    font-size: 16px;
  }

}

/* ==========================================================================
   SECTION 26 END — MOBILE CATALOG / MODEL FINAL
   ========================================================================== */

/* ==========================================================================
   SECTION 27 START — MOBILE MODEL LEAD / MOCKUP ORDER
   ========================================================================== */

@media (max-width: 767px) {

  /* В мобильном макете модели блок «Как мы работаем» отсутствует. */
  .how-we-work-widget.model-how {
    display: none !important;
  }

  .model-lead-band.lead-band {
    padding: 18px 0 24px;
    background: #000;
  }

  .model-lead-band .lead-grid {
    gap: 10px;
  }

  .model-lead-band .lead-media {
    min-height: 205px;
    border-radius: 12px;
  }

  .model-lead-band .lead-media-overlay {
    padding: 16px;
  }

  .model-lead-band .lead-media-overlay h3 {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.25;
  }

  .model-lead-band .lead-media-overlay p {
    max-width: 240px;
    font-size: 10px;
    line-height: 1.35;
  }

  .model-lead-band .lead-form-panel {
    padding: 18px 16px;
    border-radius: 12px;
  }

  .model-lead-band .lead-form-panel h3 {
    margin-bottom: 14px;
    font-size: 16px;
  }

  .model-lead-band .form-control-custom {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .model-lead-band textarea.form-control-custom {
    min-height: 90px;
  }

  .model-lead-band .lead-form-bottom {
    gap: 12px;
  }

  .model-lead-band .consent-check {
    font-size: 9px;
  }

}

/* ==========================================================================
   SECTION 27 END — MOBILE MODEL LEAD / MOCKUP ORDER
   ========================================================================== */

/* ==========================================================================
   SECTION 28 START — DESIGNER MOBILE HOME / HEADER / FOOTER FINAL
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared markup introduced by the final mobile layout
   -------------------------------------------------------------------------- */

.mobile-menu-panel {
  display: none;
}

.trust-mobile-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
  gap: 16px;
  align-items: stretch;
}

.trust-mobile-grid .trust-slider-wrap {
  min-width: 0;
}

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

.channel-group+.channel-group {
  margin-top: 48px;
}

.footer-contact-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 22px 24px;
  background: #171d20;
  border: 1px solid #242b2e;
  border-radius: 18px;
}

.footer-contact-brand .brand-logo {
  display: inline-flex;
}

.footer-contact-brand .brand-logo img {
  display: block;
  width: 175px;
  height: auto;
}

.footer-contact-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-contact-phone a {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
}

.footer-contact-phone span,
.footer-contact-address {
  color: #a4afaa;
  font-size: 13px;
}

.footer-contact-location strong {
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
}

.footer-contact-location i {
  margin-right: 8px;
  color: var(--green-light);
}

.footer-social-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.footer-social-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  color: #fff;
  background: #171d20;
  border: 1px solid #252c2f;
  border-radius: 12px;
  font-size: 12px;
  text-decoration: none;
}

.footer-social-item i {
  flex: 0 0 auto;
  font-size: 20px;
}

.footer-social-item img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.footer-social-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-social-item--telegram {
  border-color: #53646d;
  background: #34434b;
}


/* ==========================================================================
   MOBILE DRAWER — designer layout
   ========================================================================== */

@media (max-width: 991px) {

  .main-nav.open {
    background: #000;
  }

  .main-nav.open .container-xl {
    min-height: 100%;
    padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .main-nav.open .mobile-menu-panel {
    display: flex;
    width: 100%;
    min-height: calc(100dvh - 26px);
    flex-direction: column;
    padding: 26px 18px 28px;
    background: #171d20;
    border-radius: 0 0 24px 24px;
  }

  .mobile-menu-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 62px;
  }

  .main-nav.open .mobile-menu-logo {
    display: inline-flex;
    width: 116px;
    flex: 0 0 116px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .mobile-menu-logo img {
    width: 100%;
    max-width: none;
  }

  .mobile-menu-tagline {
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.18;
    text-transform: uppercase;
  }

  .navbar-toggler-custom,
  body.mobile-menu-open .navbar-toggler-custom {
    top: calc(env(safe-area-inset-top, 0px) + 24px);
    right: max(26px, env(safe-area-inset-right, 0px));
    width: 38px;
    height: 38px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--green-light);
    font-size: 34px;
  }

  .navbar-toggler-custom.is-open,
  body.mobile-menu-open .navbar-toggler-custom {
    background: transparent;
    border: 0;
    color: var(--green-light);
    box-shadow: none;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 24px;
  }

  .main-nav.open .mobile-menu-links a {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    padding: 11px 16px;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 20px;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.15;
    text-decoration: none;
  }

  .main-nav.open .mobile-menu-links a.active,
  .main-nav.open .mobile-menu-links a:hover,
  .main-nav.open .mobile-menu-links a:active {
    color: #fff;
    background: #1c2225;
    transform: none;
  }

  .mobile-menu-contact-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    padding: 20px 18px;
    background: #1c2225;
    border: 1px solid #222a2d;
    border-radius: 20px;
  }

  .mobile-menu-contact-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
  }

  .mobile-menu-contact-item strong,
  .mobile-menu-contact-item strong a {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
  }

  .mobile-menu-contact-item span {
    color: #fff;
    font-size: 10px;
    line-height: 1.25;
  }

  .mobile-menu-contact-item i {
    margin-right: 7px;
    color: var(--green-light);
  }

  .mobile-menu-social-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding: 16px 18px;
    background: #1c2225;
    border: 1px solid #222a2d;
    border-radius: 20px;
  }

  .main-nav.open .mobile-menu-social-icons a {
    display: flex;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .main-nav.open .mobile-menu-social-icons a:hover,
  .main-nav.open .mobile-menu-social-icons a:active {
    background: transparent;
    border: 0;
    transform: none;
  }

  .mobile-menu-social-icons img {
    display: block;
    width: 34px;
    max-width: 100%;
    height: 34px;
    object-fit: contain;
  }

}


/* ==========================================================================
   HOME — MOBILE DESIGNER LAYOUT
   ========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     Common home section rhythm
     ------------------------------------------------------------------------ */

  .trust-card_section,
  .services,
  .calc-band,
  .advantages,
  .payment-section,
  .section-reviews,
  .video-section,
  .news-section {
    background-color: #000 !important;
  }

  .advantages .container-xl,
  .payment-section .container-xl,
  .section-reviews .container-xl,
  .video-section .container-xl,
  .news-section .container-xl,
  .trust-card_section .container-xl {
    padding-left: 16px;
    padding-right: 16px;
  }

  .advantages .section-title,
  .section-reviews .section-title,
  .video-section .section-title,
  .news-section .section-title {
    margin: 0 0 22px;
    padding-left: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
  }

  .advantages .section-title .line,
  .section-reviews .section-title .line,
  .video-section .section-title .line,
  .news-section .section-title .line {
    display: none;
  }


  /* ------------------------------------------------------------------------
     TRUST / FRAUD VIDEO
     ------------------------------------------------------------------------ */

  .trust-card_section {
    padding: 32px 0 42px !important;
  }

  .trust-mobile-grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.12fr);
    gap: 12px;
    align-items: stretch;
  }

  .trust-card_section .trust-card {
    min-height: 205px;
    height: 100%;
    padding: 20px 18px;
    background: #171d20;
    border-radius: 24px;
  }

  .trust-card_section .trust-card-title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.22;
  }

  .trust-card_section .trust-card-icon {
    display: flex;
    height: calc(100% - 60px);
    align-items: flex-end;
    justify-content: flex-end;
  }

  .trust-card_section .trust-card-icon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
  }

  .trust-card_section .trust-slider-wrap,
  .trust-card_section .trust-swiper,
  .trust-card_section .trust-swiper .swiper-wrapper,
  .trust-card_section .trust-swiper .swiper-slide,
  .trust-card_section .video-thumb {
    height: 205px;
  }

  .trust-card_section .trust-swiper {
    overflow: hidden;
  }

  .trust-card_section .video-thumb {
    border-radius: 24px;
  }

  .trust-card_section .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .trust-card_section .trust-next {
    display: none !important;
  }

  .trust-mobile-cta {
    display: block;
    width: 82%;
    margin: 24px auto 0;
  }

  .trust-mobile-cta .btn-brand {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
  }


  /* ------------------------------------------------------------------------
     POPULAR DIRECTIONS
     ------------------------------------------------------------------------ */

  .services {
    padding-top: 34px !important;
  }

  .services .section-title {
    padding-left: 0;
    font-size: 22px;
  }


  /* ------------------------------------------------------------------------
     CALCULATOR
     ------------------------------------------------------------------------ */

  .calc-band {
    padding: 28px 0 38px;
    background-position: center bottom;
  }

  .calc-band .row {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
  }

  .calc-band .row>.col-lg-6:last-child {
    order: 1;
  }

  .calc-band .calc-text {
    display: flex;
    order: 2;
    flex-direction: column;
    align-items: center;
    padding: 0 18px;
    text-align: center;
  }

  .calc-band .calc-figure img {
    display: block;
    width: min(78vw, 330px);
    max-width: 100%;
    margin: 0 auto;
  }

  .calc-band h2 {
    order: 1;
    max-width: 330px;
    margin: 4px auto 22px;
    font-size: 22px;
    line-height: 1.15;
  }

  .calc-band .status-open {
    order: 2;
    margin: 0 auto 28px;
    gap: 12px;
    font-size: 20px;
  }

  .calc-band .status-dot {
    width: 20px;
    height: 20px;
  }

  .calc-band p {
    order: 3;
    max-width: 320px;
    margin: 0 auto 26px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.28;
  }

  .calc-band .btn-brand {
    order: 4;
    width: min(88%, 360px);
    min-height: 55px;
    justify-content: center;
    margin: 0 auto;
    border-radius: 12px;
    font-size: 17px;
    text-transform: uppercase;
  }


  /* ------------------------------------------------------------------------
     ADVANTAGES — 2 x 2
     ------------------------------------------------------------------------ */

  .advantages.section-dark {
    padding: 38px 0 18px !important;
  }

  .advantages .adv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .advantages .adv-card {
    min-height: 330px;
    padding: 24px 16px 20px;
    border-radius: 24px;
  }

  .advantages .adv-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 24px;
  }

  .advantages .adv-card h4 {
    margin-bottom: 18px;
    font-size: 18px;
    line-height: 1.15;
  }

  .advantages .adv-card p {
    font-size: 12px;
    line-height: 1.35;
  }


  /* ------------------------------------------------------------------------
     PAYMENT — 2 x 2
     ------------------------------------------------------------------------ */

  .payment-section.section-dark,
  .payment-section.section-dark2 {
    padding: 12px 0 36px !important;
  }

  .payment-section .pay-title {
    display: none;
  }

  .payment-section .pay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
  }

  .payment-section .pay-card {
    min-height: 170px;
    padding: 28px 18px 22px;
    border-radius: 24px;
  }

  .payment-section .pay-card h4 {
    margin-bottom: 18px;
    font-size: 18px;
    line-height: 1.15;
  }

  .payment-section .pay-card p {
    font-size: 12px;
    line-height: 1.35;
  }


  /* ------------------------------------------------------------------------
     REVIEWS
     ------------------------------------------------------------------------ */

  .section-reviews,
  .section-reviews.pt-0 {
    padding: 40px 0 46px !important;
  }

  .section-reviews .section-title {
    display: block;
  }

  .section-reviews .review-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
  }

  .section-reviews .review-badge {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 8px 10px;
    border-radius: 11px;
    background: #424242;
  }

  .section-reviews .review-badge img {
    max-width: 90%;
    height: 18px;
  }

  .section-reviews .review-swiper {
    overflow: visible;
  }

  .section-reviews .review-swiper .swiper-slide {
    width: 88% !important;
    max-width: 88%;
    flex-basis: 88%;
  }

  .section-reviews .review-swiper .review-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 16px 16px;
    background: #171d20;
    border-radius: 24px;
  }

  .section-reviews .review-swiper .review-card h5 {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.18;
  }

  .section-reviews .review-swiper .review-card .rv-meta {
    margin-bottom: 14px;
    color: var(--green-light);
    font-size: 11px;
  }

  .section-reviews .review-swiper .review-anons {
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
  }

  .section-reviews .review-swiper .review-card .review-more {
    width: 100%;
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: 11px;
    font-size: 12px;
  }

  .section-reviews .review-swiper .review-video {
    aspect-ratio: 16 / 9;
    border-radius: 20px;
  }


  /* ------------------------------------------------------------------------
     VK + YOUTUBE
     ------------------------------------------------------------------------ */

  .video-section.section-dark,
  .video-section.section-dark.pt-0 {
    padding: 40px 0 48px !important;
  }

  .video-section-title {
    margin-bottom: 22px !important;
  }

  .channel-group+.channel-group {
    margin-top: 42px;
  }

  .video-section .channel-badge {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    width: 100%;
    min-height: 56px;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 8px 16px;
    background: #1d6282;
    border-radius: 12px;
  }

  .video-section .channel-badge.yt {
    background: #8f1728;
  }

  .video-section .channel-badge .channel-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
  }

  .video-section .channel-badge>span:not(.sub) {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
  }

  .video-section .channel-badge .sub {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
  }

  .video-section .video-slider-wrap {
    margin: 0;
  }

  .video-section .vk-swiper,
  .video-section .yt-swiper {
    overflow: visible;
  }

  .video-section .vk-swiper .swiper-slide,
  .video-section .yt-swiper .swiper-slide {
    width: 88% !important;
    max-width: 88%;
  }

  .video-section .vk-swiper .video-thumb,
  .video-section .yt-swiper .video-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 22px;
  }

  .video-section .video-slider-prev,
  .video-section .video-slider-next {
    display: none !important;
  }


  /* ------------------------------------------------------------------------
     NEWS — 1 large + 2 small
     ------------------------------------------------------------------------ */

  .news-section.section-dark,
  .news-section.section-dark.pt-0 {
    padding: 42px 0 48px !important;
  }

  .news-section .section-title .btn-dark-pill {
    display: none;
  }

  .news-section .news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }

  .news-section .news-card {
    min-width: 0;
  }

  .news-section .news-card:first-child {
    grid-column: 1 / -1;
  }

  .news-section .news-card .n-img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
  }

  .news-section .news-card:first-child .n-img {
    aspect-ratio: 16 / 10;
    border: 2px solid var(--green);
    border-radius: 20px;
  }

  .news-section .news-card .n-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .news-section .news-card .n-body {
    padding: 12px 2px 0;
  }

  .news-section .news-card h6 {
    margin-bottom: 7px;
    color: #fff;
    font-size: 12px;
    line-height: 1.22;
  }

  .news-section .news-card:first-child h6 {
    color: var(--green-light);
    font-size: 14px;
  }

  .news-section .news-card .n-date {
    color: #616866;
    font-size: 11px;
  }

  .news-section .news-card.small .n-date {
    display: none;
  }


  /* ------------------------------------------------------------------------
     FOOTER TOP CONTACT CARD
     ------------------------------------------------------------------------ */

  .footer-top-section {
    padding: 24px 0 12px;
    background: #000;
  }

  .footer-top-section .container-xl {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-contact-card {
    grid-template-columns: 1fr 1.18fr;
    gap: 18px 14px;
    padding: 22px 18px;
    background: #1c2225;
    border: 1px solid #242b2e;
    border-radius: 22px;
  }

  .footer-contact-brand .brand-logo img {
    width: 132px;
  }

  .footer-contact-phone a {
    font-size: 17px;
  }

  .footer-contact-phone span,
  .footer-contact-address {
    margin-top: 3px;
    color: #fff;
    font-size: 10px;
    line-height: 1.25;
  }

  .footer-contact-location strong {
    font-size: 14px;
    white-space: normal;
  }

  .footer-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
  }

  .footer-social-item {
    min-height: 64px;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #171d20;
    border-radius: 16px;
    font-size: 11px;
  }

  .footer-social-item--telegram {
    background: #34434b;
    border-color: #586a73;
  }

  .footer-social-item i {
    width: 30px;
    text-align: center;
    font-size: 27px;
  }

  .footer-social-item img {
    width: 30px;
    height: 30px;
  }


  /* ------------------------------------------------------------------------
     FOOTER NAVIGATION CARDS
     ------------------------------------------------------------------------ */

  .site-footer {
    padding: 12px 0 22px;
    background: #000;
  }

  .site-footer .container-xl {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
  }

  .footer-cols .footer-col {
    padding: 26px 24px;
    background: #171d20;
    border: 1px solid #21282b;
    border-radius: 22px;
  }

  .footer-cols .footer-col-useful,
  .footer-cols .footer-col-addresses {
    display: none;
  }

  .footer-cols h6 {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 1.2;
  }

  .footer-cols li {
    margin-bottom: 12px;
  }

  .footer-cols li:last-child {
    margin-bottom: 0;
  }

  .footer-cols a {
    color: #687074;
    font-size: 14px;
    font-weight: 600;
  }

  .footer-bottom {
    display: flex;
    justify-content: center;
    padding: 22px 0 0;
    border: 0;
    text-align: center;
  }

  .footer-bottom a:first-child {
    display: none;
  }

  .footer-bottom a {
    color: #435057;
    font-size: 12px;
  }

}


/* ==========================================================================
   VERY SMALL MOBILE — final tuning
   ========================================================================== */

@media (max-width: 420px) {

  .main-nav.open .mobile-menu-panel {
    padding-right: 14px;
    padding-left: 14px;
  }

  .mobile-menu-brand {
    gap: 10px;
  }

  .main-nav.open .mobile-menu-logo {
    width: 105px;
    flex-basis: 105px;
  }

  .mobile-menu-tagline {
    font-size: 8px;
  }

  .main-nav.open .mobile-menu-links a {
    min-height: 50px;
    font-size: 19px;
  }

  .mobile-menu-contact-card {
    gap: 12px;
    padding: 18px 14px;
  }

  .mobile-menu-contact-item strong,
  .mobile-menu-contact-item strong a {
    font-size: 13px;
  }

  .mobile-menu-contact-item span {
    font-size: 9px;
  }

  .trust-card_section .trust-card,
  .trust-card_section .trust-slider-wrap,
  .trust-card_section .trust-swiper,
  .trust-card_section .trust-swiper .swiper-wrapper,
  .trust-card_section .trust-swiper .swiper-slide,
  .trust-card_section .video-thumb {
    height: 190px;
    min-height: 190px;
  }

  .trust-card_section .trust-card-title {
    font-size: 14px;
  }

  .advantages .adv-card {
    min-height: 305px;
    padding-right: 13px;
    padding-left: 13px;
  }

  .advantages .adv-card h4,
  .payment-section .pay-card h4 {
    font-size: 16px;
  }

  .advantages .adv-card p,
  .payment-section .pay-card p {
    font-size: 11px;
  }

  .footer-contact-card {
    grid-template-columns: .95fr 1.05fr;
  }

  .footer-contact-brand .brand-logo img {
    width: 116px;
  }

  .footer-contact-phone a {
    font-size: 15px;
  }

  .footer-social-item {
    padding-right: 12px;
    padding-left: 12px;
    font-size: 10px;
  }

}

/* ==========================================================================
   SECTION 28 END — DESIGNER MOBILE HOME / HEADER / FOOTER FINAL
   ========================================================================== */

/* Mobile touch devices must always show video play controls. */
@media (max-width: 767px) {

  .video-section .video-thumb .play-btn,
  .section-reviews .review-video .play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }
}

/* ==========================================================================
   SECTION 29 START — HOME HERO MOBILE — DESIGNER FINAL V2
   Главная: отдельный мобильный poster + горизонтальная лента преимуществ.
   ========================================================================== */

/*
 * Mobile-only media is hidden on desktop.
 */
.hero-mobile-media {
  display: none;
}


@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     HERO SHELL
     ------------------------------------------------------------------------ */

  .hero.hero-home {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: clip;
    background: #000 !important;
    border-bottom: 0;
  }


  /*
   * Desktop decorative stage is not used on mobile.
   */
  .hero.hero-home>.hero-stage {
    display: none !important;
  }


  .hero.hero-home>.container-xl {
    width: 100%;
    max-width: 100%;
    padding-top: 22px;
    padding-bottom: 30px;
    overflow: visible;
  }


  .hero.hero-home .row {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }


  .hero.hero-home .hero-intro {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
  }


  /* ------------------------------------------------------------------------
     TITLE / SUBTITLE
     ------------------------------------------------------------------------ */

  .hero.hero-home h1 {
    max-width: 100%;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(20px, 5.5vw, 24px);
    font-weight: 700;
    line-height: 1.20;
    letter-spacing: -.015em;
  }


  .hero.hero-home h1 .accent {
    color: var(--green-light);
  }


  .hero.hero-home .hero-sub {
    max-width: 350px;
    margin: 0 0 20px;
    color: var(--green-light);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
  }


  /* ------------------------------------------------------------------------
     BENEFITS — HORIZONTAL SWIPE
     The next card remains partially visible as a swipe hint.
     ------------------------------------------------------------------------ */

  .hero.hero-home .hero-features {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0 64px 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }


  .hero.hero-home .hero-features::-webkit-scrollbar {
    display: none;
  }


  .hero.hero-home .feature-card {
    flex: 0 0 min(72vw, 285px);
    width: min(72vw, 285px);
    min-width: min(72vw, 285px);
    min-height: 80px;
    scroll-snap-align: start;
    padding: 10px 12px;
    background: rgba(21, 29, 25, .92);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    backdrop-filter: none;
  }


  .hero.hero-home .feature-num {
    margin-right: 5px;
    color: rgba(255, 255, 255, .08);
    font-size: 46px;
    line-height: 1;
  }


  .hero.hero-home .feature-text {
    min-width: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.18;
  }


  .hero.hero-home .feature-icon {
    width: 46px;
    height: 46px;
    margin-left: 8px;
  }


  /* ------------------------------------------------------------------------
     MOBILE VIDEO REVIEW
     Uses `mobile_poster`; main.phtml falls back to regular `poster`.
     ------------------------------------------------------------------------ */

  .hero.hero-home .hero-mobile-media {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 16px;
    overflow: hidden;
    border-radius: 22px;
  }


  .hero.hero-home .hero-mobile-swiper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: inherit;
  }


  .hero.hero-home .hero-mobile-swiper .swiper-wrapper,
  .hero.hero-home .hero-mobile-swiper .swiper-slide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }


  .hero.hero-home .hero-mobile-video-card {
    position: relative;
    width: 100%;
    aspect-ratio: .92 / 1;
    overflow: hidden;
    cursor: pointer;
    background:
      radial-gradient(circle at 42% 34%,
        rgba(17, 118, 94, .32),
        transparent 48%),
      #06100d;
    border: 1px solid rgba(46, 204, 99, .24);
    border-radius: 22px;
  }


  .hero.hero-home .hero-mobile-video-card>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }


  .hero.hero-home .hero-mobile-video-label {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }


  .hero.hero-home .hero-mobile-video-play {
    position: relative;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    background: #fff;
    border-radius: 50%;
  }


  .hero.hero-home .hero-mobile-video-play>span {
    display: block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #111416;
  }


  .hero.hero-home .hero-mobile-video-hit {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
  }


  /*
   * Desktop hero-media must not create a hidden off-screen width.
   * It is removed from mobile layout completely.
   */
  .hero.hero-home .hero-media {
    display: none !important;
  }


  /* ------------------------------------------------------------------------
     CTA
     ------------------------------------------------------------------------ */

  .hero.hero-home .btn-brand2 {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
  }

}


@media (max-width: 390px) {

  .hero.hero-home h1 {
    font-size: 20px;
  }


  .hero.hero-home .hero-sub {
    font-size: 12px;
  }


  .hero.hero-home .feature-card {
    flex-basis: 76vw;
    width: 76vw;
    min-width: 76vw;
  }


  .hero.hero-home .hero-mobile-video-label {
    top: 20px;
    left: 20px;
    font-size: 19px;
  }


  .hero.hero-home .hero-mobile-video-play {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

}

/* ==========================================================================
   SECTION 29 END — HOME HERO MOBILE — DESIGNER FINAL V2
   ========================================================================== */


/* ==========================================================================
   SECTION 30 START — HOME FINAL DESIGN ALIGNMENT
   Desktop PNG + mobile PDF refinements.
   ========================================================================== */


/* --------------------------------------------------------------------------
   POPULAR DIRECTIONS — shared gradient atmosphere
   -------------------------------------------------------------------------- */

.services {
  position: relative;
  background:
    radial-gradient(ellipse at 48% 28%,
      rgba(15, 93, 73, .42) 0%,
      rgba(7, 44, 36, .25) 30%,
      rgba(0, 0, 0, 0) 62%),
    #000 !important;
}


/* --------------------------------------------------------------------------
   VK / YOUTUBE — desktop vertical rhythm
   Mobile rules from SECTION 28 remain unchanged.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .video-section .video-section-title {
    margin-bottom: 72px !important;
  }


  .video-section .channel-badge {
    margin-bottom: 28px;
  }


  .video-section .channel-group+.channel-group {
    margin-top: 82px;
  }


  .video-section .video-slider-wrap {
    margin-bottom: 0;
  }

}


/* --------------------------------------------------------------------------
   FOOTER — desktop one row
   -------------------------------------------------------------------------- */

.footer-contact-desktop {
  display: grid;
  grid-template-columns:
    175px minmax(0, 1fr) 195px;
  gap: 24px;
  align-items: center;
}


.footer-contact-mobile {
  display: none;
}


.footer-desktop-logo {
  display: block;
  width: 165px;
}


.footer-desktop-logo img {
  display: block;
  width: 100%;
  height: auto;
}


.footer-contact-desktop .footer-social-grid--desktop {

  display: grid;

  grid-template-columns:
    repeat(6,
      minmax(0,
        1fr));

  gap: 8px;

  margin: 0;
}


.footer-contact-desktop .footer-social-item {

  min-height: 46px;

  padding:
    9px 10px;

  background: #171d20;

  border:
    1px solid #252c2f;

  border-radius: 10px;

  font-size: 11px;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.footer-desktop-phone {
  text-align: right;
}


.footer-desktop-phone a {
  display: block;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}


.footer-desktop-phone span {
  display: block;
  margin-top: 5px;
  color: #a4afaa;
  font-size: 12px;
  white-space: nowrap;
}


/*
 * Designer highlight is HOVER state, not a permanent Telegram state.
 */
.footer-social-item {
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


@media (hover: hover) and (pointer: fine) {

  .footer-social-item:hover {
    color: #fff;
    background: #34434b;
    border-color: #586a73;
    transform: translateY(-1px);
  }

}


/* ==========================================================================
   MOBILE HOME
   ========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     POPULAR DIRECTIONS — larger cards + full section gradient
     ------------------------------------------------------------------------ */

  .services.section-dark,
  .services.section-dark.pt-0 {
    padding: 46px 0 52px !important;

    background:
      radial-gradient(ellipse at 50% 18%,
        rgba(15, 112, 88, .56) 0%,
        rgba(8, 65, 52, .38) 26%,
        rgba(2, 28, 23, .18) 52%,
        rgba(0, 0, 0, 0) 76%),
      linear-gradient(180deg,
        #000 0%,
        #03120f 20%,
        #000 100%) !important;
  }


  .services .container-xl {
    padding-left: 16px;
    padding-right: 16px;
  }


  .services .section-title {
    margin: 0 0 28px;
    padding-left: 0;
  }


  .services .section-title .line {
    display: none;
  }


  .services .cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }


  .services .cat-card {
    width: 100%;
    height: auto;
    aspect-ratio: .90 / 1;
    overflow: hidden;
    border-radius: 28px;
  }


  .services .cat-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  .services .cat-card .cat-label {
    top: 30px;
    right: 20px;
    left: 20px;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
  }


  .services .container-xl+.container-xl {
    margin-top: 46px;
  }


  /* ------------------------------------------------------------------------
     CALCULATOR — one continuous gradient across the whole section
     ------------------------------------------------------------------------ */

  .calc-band {
    padding: 28px 0 54px !important;

    background:
      radial-gradient(ellipse at 50% 48%,
        rgba(10, 104, 83, .62) 0%,
        rgba(6, 72, 58, .44) 25%,
        rgba(3, 43, 35, .28) 47%,
        rgba(0, 0, 0, 0) 74%),
      linear-gradient(180deg,
        #000 0%,
        #020a08 18%,
        #041b16 54%,
        #000 100%) !important;
  }


  .calc-band::before,
  .calc-band::after {
    display: none !important;
  }


  .calc-band .container-xl {
    position: relative;
    z-index: 1;
  }


  .calc-band .calc-figure {
    background: transparent !important;
  }


  .calc-band .calc-figure img {
    width: min(82vw, 355px);
    max-width: 100%;
    margin: 0 auto;
  }


  .calc-band h2 {
    margin-top: 14px;
  }


  /* ------------------------------------------------------------------------
     ADVANTAGES — horizontal swipe row
     ------------------------------------------------------------------------ */

  .advantages.section-dark {
    padding: 38px 0 24px !important;

    background:
      radial-gradient(ellipse at 48% 0%,
        rgba(8, 71, 57, .34) 0%,
        rgba(3, 37, 30, .20) 30%,
        rgba(0, 0, 0, 0) 64%),
      #000 !important;
  }


  .advantages .container-xl {
    overflow: visible;
  }


  .advantages .adv-grid {
    display: flex;
    width: 100%;
    gap: 14px;
    margin: 0;
    padding: 0 64px 6px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }


  .advantages .adv-grid::-webkit-scrollbar {
    display: none;
  }


  .advantages .adv-card {
    flex: 0 0 min(78vw, 310px);
    width: min(78vw, 310px);
    min-width: min(78vw, 310px);
    min-height: 340px;
    scroll-snap-align: start;
    padding: 26px 22px 24px;
    border-radius: 26px;
  }


  .advantages .adv-icon img {
    width: 92px;
    height: 92px;
  }


  .advantages .adv-card h4 {
    font-size: 21px;
    line-height: 1.18;
  }


  .advantages .adv-card p {
    font-size: 14px;
    line-height: 1.32;
  }


  /* ------------------------------------------------------------------------
     PAYMENT — separate horizontal swipe row
     ------------------------------------------------------------------------ */

  .payment-section.section-dark2 {
    padding: 12px 0 42px !important;
    background: #000 !important;
  }


  .payment-section .pay-grid {
    display: flex;
    width: 100%;
    gap: 14px;
    margin: 0;
    padding: 0 64px 6px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }


  .payment-section .pay-grid::-webkit-scrollbar {
    display: none;
  }


  .payment-section .pay-card {
    flex: 0 0 min(78vw, 310px);
    width: min(78vw, 310px);
    min-width: min(78vw, 310px);
    min-height: 190px;
    scroll-snap-align: start;
    padding: 30px 24px 24px;
    border-radius: 26px;
  }


  .payment-section .pay-card h4 {
    font-size: 21px;
    line-height: 1.18;
  }


  .payment-section .pay-card p {
    font-size: 14px;
    line-height: 1.3;
  }


  /* ------------------------------------------------------------------------
     FOOTER TOP
     Desktop row is replaced with the designer mobile card.
     ------------------------------------------------------------------------ */

  .footer-contact-desktop {
    display: none !important;
  }


  .footer-contact-mobile {
    display: block;
  }


  /*
   * No social button is permanently highlighted on touch devices.
   */
  .footer-contact-mobile .footer-social-item,
  .footer-contact-mobile .footer-social-item:hover {
    background: #171d20;
    border-color: #252c2f;
    transform: none;
  }

}


/* --------------------------------------------------------------------------
   TABLET / MOBILE FOOTER SWITCH
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {

  .footer-contact-desktop {
    display: none !important;
  }


  .footer-contact-mobile {
    display: block;
  }

}


/* ==========================================================================
   SECTION 30 END — HOME FINAL DESIGN ALIGNMENT
   ========================================================================== */


/* ==========================================================================
   SECTION 31 START — MOBILE MENU TOGGLER FIX
   ========================================================================== */

.nav-toggle-icon {
  position: relative;
  display: flex;
  width: 28px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.nav-toggle-icon>span {
  display: block;
  width: 100%;
  height: 3px;
  flex: 0 0 3px;
  background: var(--green-light, #00c853);
  border-radius: 999px;
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease;
}

@media (max-width: 991px) {

  .navbar-toggler-custom,
  body.mobile-menu-open .navbar-toggler-custom {
    display: flex !important;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 24px);
    right: max(22px, env(safe-area-inset-right, 0px));
    z-index: 10001;
    width: 42px;
    height: 42px;
    padding: 7px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .navbar-toggler-custom.is-open .nav-toggle-icon>span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
  }

  .navbar-toggler-custom.is-open .nav-toggle-icon>span:nth-child(2) {
    opacity: 0;
  }

  .navbar-toggler-custom.is-open .nav-toggle-icon>span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
  }
}

/* ==========================================================================
   SECTION 31 END — MOBILE MENU TOGGLER FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 32 START — MOBILE HORIZONTAL OVERFLOW CONTAINMENT
   Исправляет горизонтальный сдвиг всей страницы, сохраняя свайпы карточек.
   ========================================================================== */

@media (max-width: 767px) {

  /*
   * Эти секции содержат Swiper с overflow: visible, чтобы дизайнерски
   * показывать часть следующей карточки. Ограничиваем только внешнюю
   * область секции шириной viewport — внутренний свайп продолжает работать.
   */
  .section-reviews,
  .video-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .section-reviews>.container-xl,
  .video-section>.container-xl {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .section-reviews .review-swiper,
  .video-section .vk-swiper,
  .video-section .yt-swiper,
  .section-reviews .review-swiper .swiper-wrapper,
  .video-section .vk-swiper .swiper-wrapper,
  .video-section .yt-swiper .swiper-wrapper {
    min-width: 0;
    max-width: 100%;
  }

  /*
   * Не даём декоративным/свайповым секциям главной расширять документ.
   * Их собственные overflow-x:auto остаются рабочими.
   */
  .hero.hero-home,
  .trust-card_section,
  .services,
  .calc-band,
  .advantages,
  .payment-section,
  .news-section,
  .footer-top-section,
  .footer {
    max-width: 100%;
  }

}

/* ==========================================================================
   SECTION 32 END — MOBILE HORIZONTAL OVERFLOW CONTAINMENT
   ========================================================================== */

/* ==========================================================================
   SECTION 33 START — VIDEO MODAL RESPONSIVE FINAL
   Вписывает локальные MP4 / iframe в реальный viewport телефона.
   ========================================================================== */

.video-modal {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding:
    max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow: hidden;
}

.video-modal__box {
  display: flex;
  width: min(1100px, calc(100vw - 40px));
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 40px);
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
}

.video-modal__frame {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 40px);
  align-items: center;
  justify-content: center;
}

.video-modal__frame:has(iframe) {
  aspect-ratio: 16 / 9;
}

.video-modal__frame iframe {
  width: 100%;
  height: 100%;
}

.video-modal__frame:has(video) {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 40px);
  aspect-ratio: auto;
}

.video-modal__frame video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 40px);
  object-fit: contain;
}

.video-modal__close {
  top: 10px;
  right: 10px;
}

@media (max-width: 767px) {
  .video-modal {
    padding:
      max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .video-modal__box {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .video-modal__frame,
  .video-modal__frame:has(video),
  .video-modal__frame video {
    max-height: calc(100dvh - 20px);
  }

  .video-modal__frame:has(iframe) {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .video-modal__close {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    font-size: 25px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .video-modal {
    padding: 8px;
  }

  .video-modal__box {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .video-modal__frame,
  .video-modal__frame:has(video),
  .video-modal__frame video {
    max-height: calc(100dvh - 16px);
  }
}

/* ==========================================================================
   SECTION 33 END — VIDEO MODAL RESPONSIVE FINAL
   ========================================================================== */

/* ==========================================================================
   SECTION 33 START — HOME HERO MOBILE POSTER RATIO FIX
   mobile_poster files are prepared as 307 × 334.
   This override prevents the generic category HERO 16:10 rule from cropping
   the homepage mobile video poster.
   ========================================================================== */

@media (max-width: 767px) {

  .hero.hero-home .hero-mobile-media {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    overflow: hidden;
    background: transparent;
  }

  .hero.hero-home .hero-mobile-swiper {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .hero.hero-home .hero-mobile-swiper .swiper-wrapper,
  .hero.hero-home .hero-mobile-swiper .swiper-slide {
    height: auto;
  }

  .hero.hero-home .hero-mobile-video-card {
    width: 100%;
    height: auto;
    aspect-ratio: 307 / 334;
    overflow: hidden;
    background: #06100d;
    border-radius: 22px;
  }

  .hero.hero-home .hero-mobile-video-card>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

}

/* ==========================================================================
   SECTION 33 END — HOME HERO MOBILE POSTER RATIO FIX
   ========================================================================== */

/* ==========================================================================
   SECTION 34 START — CATEGORY HERO MOBILE FINAL
   Type 121: hero_mobile_bg + swipeable category HERO benefits.
   ========================================================================== */

@media (max-width: 767px) {

  /* Keep any wide child inside the category HERO from widening the document. */
  .hero.hero-category {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .hero.hero-category>.container-xl,
  .hero.hero-category .row,
  .hero.hero-category .col-lg-6 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* ------------------------------------------------------------------------
     BENEFITS — all cards remain available, next card is partially visible.
     ------------------------------------------------------------------------ */
  .hero.hero-category .hero-features {
    display: flex;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0 60px 4px 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hero.hero-category .hero-features::-webkit-scrollbar {
    display: none;
  }

  .hero.hero-category .feature-card,
  .hero.hero-category .feature-card:nth-child(n+3) {
    display: flex;
    flex: 0 0 min(72vw, 285px);
    width: min(72vw, 285px);
    min-width: min(72vw, 285px);
    min-height: 76px;
    scroll-snap-align: start;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(20, 28, 24, .92);
    border: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: none;
  }

  .hero.hero-category .feature-num {
    margin-right: 6px;
    font-size: 44px;
    line-height: 1;
    color: rgba(255, 255, 255, .09);
  }

  .hero.hero-category .feature-text {
    min-width: 0;
    font-size: 11px;
    line-height: 1.18;
    font-weight: 600;
  }

  .hero.hero-category .feature-icon {
    width: 42px;
    height: 42px;
    margin-left: 8px;
    flex: 0 0 42px;
  }

  /* ------------------------------------------------------------------------
     MOBILE HERO IMAGE
     razdel.phtml supplies hero_mobile_bg, with hero_bg as fallback.
     No fixed aspect ratio: the dedicated mobile asset controls composition.
     ------------------------------------------------------------------------ */
  .hero.hero-category .hero-mobile-media {
    display: block;
    width: 100%;
    max-width: 100%;
    height: clamp(220px, 72vw, 360px);
    aspect-ratio: auto;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: 14px;
    background-color: #0b100e;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  .hero.hero-category .hero-category-cta {
    width: 100%;
  }
}

/* ========================================================================== 
   SECTION 34 END — CATEGORY HERO MOBILE FINAL
   ========================================================================== */

/* ==========================================================================
   SECTION 34 START — MOBILE MENU CONTACT CARD FIX
   Убираем вложенную «кнопку» у телефона внутри контактной карточки
   ========================================================================== */

@media (max-width: 991px) {

  .main-nav.open .mobile-menu-contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 18px;
    align-items: center;

    width: 100%;

    margin-top: 24px;
    padding: 20px 18px;

    background: #1c2225;
    border: 1px solid #222a2d;
    border-radius: 20px;
  }

  .main-nav.open .mobile-menu-contact-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
  }

  .main-nav.open .mobile-menu-contact-item strong {
    display: block;
    margin: 0;
    padding: 0;

    color: #fff;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /*
   * ВАЖНО:
   * телефон внутри общей карточки — обычная текстовая ссылка,
   * а не отдельная кнопка/плашка.
   */
  .main-nav.open .mobile-menu-contact-item strong>a,
  .main-nav.open .mobile-menu-contact-item strong>a:link,
  .main-nav.open .mobile-menu-contact-item strong>a:visited,
  .main-nav.open .mobile-menu-contact-item strong>a:hover,
  .main-nav.open .mobile-menu-contact-item strong>a:active,
  .main-nav.open .mobile-menu-contact-item strong>a:focus {
    display: inline;

    width: auto;
    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    color: #fff;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font: inherit;
    line-height: inherit;

    text-decoration: none;

    transform: none !important;

    -webkit-tap-highlight-color: transparent;
  }

  .main-nav.open .mobile-menu-contact-item span {
    display: block;

    margin: 0;
    padding: 0;

    color: #fff;

    font-size: 10px;
    line-height: 1.25;
  }

  .main-nav.open .mobile-menu-contact-item i {
    margin-right: 7px;
    color: var(--green-light);
  }

}


@media (max-width: 420px) {

  .main-nav.open .mobile-menu-contact-card {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    gap: 12px;
    padding: 18px 14px;
  }

  .main-nav.open .mobile-menu-contact-item strong {
    font-size: 13px;
  }

  .main-nav.open .mobile-menu-contact-item span {
    font-size: 9px;
  }

}

/* ==========================================================================
   SECTION 34 END — MOBILE MENU CONTACT CARD FIX
   ========================================================================== */
/* ==========================================================================
   SECTION 35 START — CONTACTS PAGE
   ========================================================================== */

.contacts-page {
  position: relative;
  overflow: hidden;
  padding: 72px 0 90px;
  background:
    radial-gradient(circle at 88% 8%, rgba(14, 92, 42, .24) 0, rgba(14, 92, 42, 0) 36%),
    linear-gradient(180deg, #07100b 0%, #0a0d0b 42%, #0d1112 100%);
}

.contacts-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1100px, 90vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(46, 204, 99, .45), transparent);
}

.contacts-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 260px;
  margin-bottom: 28px;
  padding: 44px 48px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 45%, rgba(31, 174, 77, .20), transparent 34%),
    #111416;
  border: 1px solid #252c2e;
  border-radius: 30px;
}

.contacts-hero::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(46, 204, 99, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 48px rgba(46, 204, 99, .025),
    0 0 0 96px rgba(46, 204, 99, .018);
  pointer-events: none;
}

.contacts-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.contacts-kicker,
.contacts-card__label {
  display: block;
  margin-bottom: 10px;
  color: var(--green-light);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contacts-hero h1 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
}

.contacts-hero p {
  max-width: 720px;
  margin: 0;
  color: #d1d8d3;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
}

.contacts-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.contacts-hero__actions .btn-brand,
.contacts-hero__actions .btn-outline-light-custom {
  min-height: 50px;
  gap: 9px;
}

.contacts-hero__mark {
  position: relative;
  z-index: 2;
  display: flex;
  width: 150px;
  height: 150px;
  align-items: center;
  justify-content: center;
  flex: 0 0 150px;
  color: var(--green-light);
  background: rgba(31, 174, 77, .08);
  border: 1px solid rgba(46, 204, 99, .18);
  border-radius: 50%;
  font-size: 64px;
  box-shadow: inset 0 0 45px rgba(31, 174, 77, .08);
}

.contacts-layout {
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr);
  gap: 22px;
  align-items: stretch;
}

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

.contacts-card {
  display: flex;
  min-width: 0;
  min-height: 190px;
  gap: 18px;
  padding: 24px;
  background: #151a1c;
  border: 1px solid #252c2e;
  border-radius: 22px;
}

.contacts-card--address,
.contacts-card--socials {
  grid-column: 1 / -1;
}

.contacts-card--address {
  min-height: 225px;
}

.contacts-card__icon {
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  color: var(--green-light);
  background: rgba(31, 174, 77, .10);
  border: 1px solid rgba(46, 204, 99, .18);
  border-radius: 14px;
  font-size: 19px;
}

.contacts-card__body {
  min-width: 0;
}

.contacts-card h2,
.contacts-map h2,
.contacts-bottom-cta h2 {
  margin: 0;
  color: #fff;
  font-weight: 800;
}

.contacts-card h2 {
  margin-bottom: 9px;
  font-size: 23px;
}

.contacts-card address {
  margin: 0 0 18px;
  color: #d1d8d3;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
}

.contacts-card__value {
  display: inline-block;
  max-width: 100%;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contacts-card__value--email {
  font-size: 15px;
}

.contacts-card__note {
  display: block;
  margin-top: 7px;
  color: #929c97;
  font-size: 12px;
  font-weight: 400;
}

.contacts-card__link,
.contacts-map__external {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-light);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.contacts-card__link:hover,
.contacts-map__external:hover {
  color: #fff;
}

.contacts-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 5px;
}

.contacts-socials a {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  background: #1c2225;
  border: 1px solid #293135;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.contacts-socials a:hover {
  color: #fff;
  background: #20282b;
  border-color: rgba(46, 204, 99, .50);
  transform: translateY(-2px);
}

.contacts-socials i {
  color: var(--green-light);
  font-size: 21px;
}

.contacts-map {
  min-width: 0;
  overflow: hidden;
  background: #151a1c;
  border: 1px solid #252c2e;
  border-radius: 28px;
}

.contacts-map__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 20px;
}

.contacts-map h2 {
  font-size: 25px;
}

.contacts-map__frame {
  position: relative;
  width: calc(100% - 28px);
  height: 480px;
  margin: 0 14px;
  overflow: hidden;
  background: #0e1211;
  border: 1px solid #293135;
  border-radius: 20px;
}

.contacts-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.contacts-map__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 24px 24px;
}

.contacts-map__address {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 11px;
  color: #d1d8d3;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.contacts-map__address i {
  margin-top: 2px;
  color: var(--green-light);
}

.contacts-map__route {
  flex: 0 0 auto;
  white-space: nowrap;
}

.contacts-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 22px;
  padding: 30px 34px;
  background:
    radial-gradient(circle at 92% 20%, rgba(31, 174, 77, .19), transparent 34%),
    #111416;
  border: 1px solid #252c2e;
  border-radius: 24px;
}

.contacts-bottom-cta h2 {
  margin-bottom: 8px;
  font-size: 27px;
}

.contacts-bottom-cta p {
  margin: 0;
  color: #aeb8b3;
  font-size: 15px;
  font-weight: 400;
}

.contacts-bottom-cta .btn-brand {
  flex: 0 0 auto;
}

@media (max-width: 1199px) {
  .contacts-layout {
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  }

  .contacts-info {
    grid-template-columns: 1fr;
  }

  .contacts-card--address,
  .contacts-card--socials {
    grid-column: auto;
  }

  .contacts-map__frame {
    height: 520px;
  }
}

@media (max-width: 991px) {
  .contacts-page {
    padding: 48px 0 65px;
  }

  .contacts-hero {
    min-height: 0;
    padding: 34px 30px;
    border-radius: 24px;
  }

  .contacts-hero__mark {
    width: 110px;
    height: 110px;
    flex-basis: 110px;
    font-size: 48px;
  }

  .contacts-layout {
    grid-template-columns: 1fr;
  }

  .contacts-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contacts-card--address,
  .contacts-card--socials {
    grid-column: 1 / -1;
  }

  .contacts-map__frame {
    height: 430px;
  }
}

@media (max-width: 767px) {
  .contacts-page {
    padding: 30px 0 48px;
  }

  .contacts-page .container-xl {
    padding-right: 14px;
    padding-left: 14px;
  }

  .contacts-hero {
    display: block;
    margin-bottom: 16px;
    padding: 28px 20px;
    border-radius: 22px;
  }

  .contacts-hero h1 {
    font-size: 38px;
  }

  .contacts-hero p {
    font-size: 15px;
    line-height: 1.5;
  }

  .contacts-hero__mark {
    display: none;
  }

  .contacts-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  .contacts-hero__actions .btn-brand,
  .contacts-hero__actions .btn-outline-light-custom {
    width: 100%;
  }

  .contacts-info {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contacts-card,
  .contacts-card--address {
    grid-column: auto;
    min-height: 0;
    padding: 20px 18px;
    border-radius: 20px;
  }

  .contacts-card--socials {
    grid-column: auto;
  }

  .contacts-socials {
    grid-template-columns: 1fr 1fr;
  }

  .contacts-map {
    border-radius: 22px;
  }

  .contacts-map__head {
    padding: 20px 18px 16px;
  }

  .contacts-map h2 {
    font-size: 21px;
  }

  .contacts-map__frame {
    width: calc(100% - 20px);
    height: 360px;
    margin: 0 10px;
    border-radius: 16px;
  }

  .contacts-map__footer {
    display: block;
    padding: 18px;
  }

  .contacts-map__route {
    width: 100%;
    margin-top: 18px;
  }

  .contacts-bottom-cta {
    display: block;
    margin-top: 16px;
    padding: 24px 20px;
    border-radius: 20px;
  }

  .contacts-bottom-cta h2 {
    font-size: 23px;
  }

  .contacts-bottom-cta .btn-brand {
    width: 100%;
    margin-top: 20px;
  }
}

@media (max-width: 420px) {
  .contacts-card {
    gap: 13px;
  }

  .contacts-card__icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .contacts-socials {
    grid-template-columns: 1fr;
  }

  .contacts-map__frame {
    height: 320px;
  }
}

/* ==========================================================================
   SECTION 35 END — CONTACTS PAGE
   ========================================================================== */
/* ==========================================================================
   SECTION 36 START — LEAD POPUP MODAL
   ========================================================================== */


/* =========================================================
   PAGE LOCK
   ========================================================= */

html.lead-popup-open {
  overflow: hidden;
  overscroll-behavior: none;
}


body.lead-popup-open {
  position: fixed;

  left: 0;
  right: 0;

  width: 100%;

  overflow: hidden;

  overscroll-behavior: none;
}


/* =========================================================
   MODAL
   ========================================================= */

.lead-popup {
  position: fixed;

  inset: 0;

  z-index: 21000;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  padding:
    30px 20px;

  visibility: hidden;

  opacity: 0;

  pointer-events: none;

  overflow-x: hidden;
  overflow-y: auto;

  background: transparent;

  transition:
    opacity .25s ease,
    visibility .25s ease;

  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   OPEN
   ========================================================= */

.lead-popup.open {
  visibility: visible;

  opacity: 1;

  pointer-events: auto;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.lead-popup__backdrop {
  position: fixed;

  inset: 0;

  z-index: 0;

  background:
    rgba(4, 8, 6, .88);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


/* =========================================================
   DIALOG
   ========================================================= */

.lead-popup__dialog {
  position: relative;

  z-index: 1;

  width:
    min(620px, 100%);

  margin: auto;

  padding:
    34px;

  overflow: hidden;

  background:
    #171d20;

  border:
    1px solid #293135;

  border-radius:
    24px;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, .55);

  transform:
    translateY(18px) scale(.97);

  opacity: 0;

  transition:
    transform .3s cubic-bezier(.34, 1.56, .64, 1),
    opacity .25s ease;
}


.lead-popup.open .lead-popup__dialog {
  transform:
    translateY(0) scale(1);

  opacity: 1;
}


/* =========================================================
   CLOSE
   ========================================================= */

.lead-popup__close {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 3;

  display: flex;

  width: 42px;
  height: 42px;

  align-items: center;
  justify-content: center;

  padding: 0;

  color: #fff;

  background:
    #1c2225;

  border:
    1px solid #30383c;

  border-radius:
    50%;

  font-family:
    Arial,
    sans-serif;

  font-size: 29px;
  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}


.lead-popup__close:hover {
  color: #fff;

  background:
    var(--green);

  border-color:
    var(--green);

  transform:
    rotate(90deg);
}


/* =========================================================
   HEAD
   ========================================================= */

.lead-popup__head {
  padding-right:
    45px;

  margin-bottom:
    28px;
}


.lead-popup__head h2 {
  margin:
    0 0 13px;

  color: #fff;

  font-size: 30px;
  font-weight: 800;

  line-height: 1.15;

  letter-spacing:
    -.02em;
}


.lead-popup__head p {
  max-width:
    520px;

  margin: 0;

  color:
    #bec7c2;

  font-size: 16px;
  font-weight: 400;

  line-height: 1.5;
}


/* =========================================================
   FORM PANEL
   ========================================================= */

.lead-popup__form-panel {
  width: 100%;

  padding:
    26px;

  background:
    #111416;

  border:
    1px solid #252c2e;

  border-radius:
    18px;
}


.lead-popup__form-panel h3 {
  margin:
    0 0 22px;

  color: #fff;

  font-size: 23px;
  font-weight: 700;

  line-height: 1.25;

  text-align: center;
}


.lead-popup__form-panel h3 .num {
  color:
    var(--green);
}


/* =========================================================
   FORM
   ========================================================= */

.lead-popup__form-panel form {
  width: 100%;
}


.lead-popup__form-panel .form-control-custom {
  width: 100%;

  margin-bottom:
    13px;

  padding:
    14px 17px;

  color: #fff;

  background:
    #1c2225;

  border:
    1px solid #293135;

  border-radius:
    11px;

  font-family:
    'AA Stetica',
    sans-serif;

  font-size:
    15px;

  transition:
    border-color .2s ease,
    background .2s ease;
}


.lead-popup__form-panel .form-control-custom:focus {
  outline: none;

  color: #fff;

  background:
    #1c2225;

  border-color:
    var(--green);
}


.lead-popup__form-panel .form-control-custom::placeholder {
  color:
    #7b888e;
}


.lead-popup__form-panel textarea.form-control-custom {
  min-height:
    110px;

  resize:
    vertical;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.lead-popup__form-panel .lead-form-bottom {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-top:
    16px;
}


/* =========================================================
   CONSENT
   ========================================================= */

.lead-popup__form-panel .consent-check {
  display: flex;

  align-items: center;

  gap:
    11px;

  margin: 0;

  color: #fff;

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.35;

  cursor:
    pointer;

  user-select:
    none;
}


.lead-popup__form-panel .consent-check input {
  flex:
    0 0 24px;

  display:
    grid;

  width:
    24px;

  height:
    24px;

  place-content:
    center;

  margin:
    0;

  appearance:
    none;

  -webkit-appearance:
    none;

  background:
    #1c2225;

  border:
    1px solid #354045;

  border-radius:
    6px;

  cursor:
    pointer;
}


.lead-popup__form-panel .consent-check input:checked::before {
  content: "";

  width:
    12px;

  height:
    7px;

  border-left:
    2px solid #fff;

  border-bottom:
    2px solid #fff;

  transform:
    rotate(-45deg) translate(1px, -1px);
}


/* =========================================================
   SUBMIT
   ========================================================= */

.lead-popup__form-panel .btn-brand {
  flex-shrink: 0;

  min-width:
    190px;

  border:
    0;

  cursor:
    pointer;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 767px) {

  .lead-popup {
    align-items:
      flex-start;

    padding:
      calc(env(safe-area-inset-top, 0px) + 18px) 12px calc(env(safe-area-inset-bottom, 0px) + 18px);
  }


  .lead-popup__dialog {
    width: 100%;

    margin:
      auto 0;

    padding:
      26px 18px 20px;

    border-radius:
      20px;
  }


  .lead-popup__close {
    top:
      12px;

    right:
      12px;

    width:
      40px;

    height:
      40px;

    font-size:
      27px;
  }


  .lead-popup__head {
    padding-right:
      40px;

    margin-bottom:
      22px;
  }


  .lead-popup__head h2 {
    font-size:
      24px;
  }


  .lead-popup__head p {
    font-size:
      14px;

    line-height:
      1.45;
  }


  .lead-popup__form-panel {
    padding:
      20px 16px;

    border-radius:
      16px;
  }


  .lead-popup__form-panel h3 {
    margin-bottom:
      18px;

    font-size:
      20px;
  }


  .lead-popup__form-panel .lead-form-bottom {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      16px;
  }


  .lead-popup__form-panel .btn-brand {
    width:
      100%;

    min-width:
      0;
  }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

  .lead-popup {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .lead-popup__dialog {
    padding:
      23px 14px 16px;

    border-radius:
      17px;
  }


  .lead-popup__head h2 {
    font-size:
      21px;
  }


  .lead-popup__head p {
    font-size:
      13px;
  }


  .lead-popup__form-panel {
    padding:
      17px 13px;
  }


  .lead-popup__form-panel h3 {
    font-size:
      18px;
  }


  .lead-popup__form-panel textarea.form-control-custom {
    min-height:
      90px;
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .lead-popup,
  .lead-popup__dialog,
  .lead-popup__close {
    transition:
      none;
  }

}


/* ==========================================================================
   SECTION 36 END — LEAD POPUP MODAL
   ========================================================================== */
/* ==========================================================================
   SECTION 37 START — TABLET RESPONSIVE FINAL V3
   iPad / Android tablets / 768–1199px

   768–991px  = compact mobile-like layout
   992–1199px = compact desktop layout
   ========================================================================== */


/* ==========================================================================
   TABLET — ALL
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  html,
  body,
  .wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container-xl {
    width: 100%;
    max-width: 100%;
    padding-right: 24px;
    padding-left: 24px;
  }

  img {
    max-width: 100%;
  }

  .section-dark,
  .section-dark2 {
    max-width: 100%;
  }

  .section-dark {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .section-title {
    gap: 14px;
    font-size: 24px;
  }

  .section-title .line {
    width: auto;
    max-width: 240px;
    flex: 1 1 160px;
  }


  /* =========================================================
     HEADER / SAFARI SVG PROTECTION
     ========================================================= */

  .topbar {
    padding: 16px 0;
  }

  .topbar .container-xl {
    gap: 14px;
  }

  .brand-block {
    min-width: 0;
  }

  .brand-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 145px;
  }

  .social-row {
    min-width: 0;
    overflow: hidden;
  }

  .social-row a {
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    overflow: hidden;
  }

  .social-row a>img {
    display: block;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* VK Video SVG contains larger internal canvas. */
  .social-row a:nth-child(3)>img {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    transform: scale(1.08) !important;
  }


  /* =========================================================
     POPULAR DIRECTIONS / CATEGORY CARDS
     ========================================================= */

  .services {
    overflow-x: hidden;
    background-size: cover;
    background-position: center top;
  }

  .services .container-xl:first-child {
    margin-bottom: 48px;
  }

  .cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
  }

  .cat-card {
    width: 100%;
    height: auto !important;
    min-width: 0;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 24px;
  }

  .cat-card img {
    position: absolute;
    inset: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  .cat-card .cat-label {
    top: 22px;
    padding: 0 18px;
    font-size: clamp(20px, 2.3vw, 27px);
    line-height: 1.22;
  }


  /* =========================================================
     ADVANTAGES / PAYMENT
     ========================================================= */

  .adv-grid,
  .pay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .adv-card,
  .pay-card {
    min-width: 0;
  }

  .adv-card {
    height: 100%;
    padding: 24px 20px;
  }

  .adv-icon {
    width: 82px;
    height: 82px;
    margin-bottom: 15px;
  }

  .adv-card h4 {
    font-size: 21px;
  }

  .adv-card p {
    font-size: 15px;
    line-height: 1.45;
  }

  .pay-card {
    min-height: 160px;
    padding: 30px 24px;
  }

  .pay-card h4 {
    font-size: 22px;
  }

  .pay-card p {
    font-size: 15px;
  }


  /* =========================================================
     COUNTRIES — SAFARI SAFE
     ========================================================= */

  .country-grid {
    display: grid;
    gap: 20px;
    width: 100%;
  }

  .country-card {
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto !important;
    overflow: hidden;
    border-radius: 24px;
  }

  .country-card>img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover !important;
    object-position: center !important;
  }

  .country-content {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 26px;
  }

  .country-content h4 {
    margin: 0 0 8px;
    font-size: 27px;
    line-height: 1.2;
  }

  .country-content p {
    max-width: 310px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.4;
  }

  .country-content .btn-brand,
  .country-content .btn-brand3 {
    width: 100%;
    max-width: 100%;
    margin-top: auto;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .country-content .btn-brand3 {
    padding: 13px 10px !important;
    font-size: 12px !important;
  }


  /* =========================================================
     TRUST / VIDEO STRIP
     ========================================================= */

  .trust-card_section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
    overflow-x: hidden;
  }

  .trust-card_section .align-items-stretch {
    width: 100% !important;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .trust-slider-wrap,
  .video-slider-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .trust-card,
  .trust-swiper,
  .trust-swiper .swiper-slide,
  .trust-card_section .video-thumb {
    height: 220px;
    min-height: 220px;
  }

  .trust-card {
    padding: 20px;
    border-radius: 26px;
  }

  .trust-next {
    right: 8px;
  }

  .video-slider-wrap {
    margin-bottom: 58px;
  }


  /* =========================================================
     VK / YOUTUBE
     ========================================================= */

  .video-row-head {
    gap: 15px;
    margin-bottom: 24px;
  }

  .channel-badge {
    padding: 10px 20px;
  }

  .channel-badge span {
    font-size: 17px;
  }

  .channel-badge .sub {
    margin-left: 16px;
    font-size: 16px;
  }

  .yt-swiper .video-thumb,
  .vk-swiper .video-thumb {
    border-radius: 24px;
  }


  /* =========================================================
     CALCULATOR
     ========================================================= */

  .calc-band {
    padding-top: 52px;
  }

  .calc-text {
    padding-left: 30px;
  }

  .calc-band h2 {
    max-width: 100%;
    font-size: clamp(31px, 4vw, 42px);
  }

  .calc-band p {
    max-width: 100%;
    font-size: 17px;
  }


  /* =========================================================
     LEAD FORM — NO HORIZONTAL OVERFLOW
     ========================================================= */

  .lead-band {
    padding: 62px 0;
  }

  .lead-grid {
    width: 100%;
    min-width: 0;
  }

  .lead-media,
  .lead-form-panel {
    min-width: 0;
    max-width: 100%;
  }

  .lead-form-panel {
    width: 100%;
    box-sizing: border-box;
  }

  .lead-form-panel form {
    width: 100%;
    max-width: 100%;
  }

  .lead-media-overlay {
    padding: 28px 34px;
  }

  .form-control-custom {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .lead-form-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
  }

  .lead-form-bottom .consent-check {
    width: 100%;
    min-width: 0;
  }

  .lead-form-bottom .btn-brand,
  .lead-form-panel .btn-brand {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-right: 18px;
    padding-left: 18px;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
  }


  /* =========================================================
     NEWS / REVIEWS / CONTENT
     ========================================================= */

  .news-card,
  .review-card,
  .blog-page .blog-card,
  .blog-article-content {
    min-width: 0;
  }

  .news-card .n-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

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

  .article-section {
    overflow-x: hidden;
  }

  .article-section p {
    font-size: 17px;
    line-height: 1.55;
  }


  /* =========================================================
     HOW WE WORK
     ========================================================= */

  .how-we-work-widget .steps-wrap,
  .how-we-work-widget .steps-list {
    min-width: 0;
  }

  .how-we-work-widget .step-item {
    min-width: 0;
    padding: 20px 24px;
  }

  .how-we-work-widget .step-item h5 {
    font-size: 22px;
  }


  /* =========================================================
     FOOTER / CONTACTS
     ========================================================= */

  .footer-top,
  .footer-social {
    min-width: 0;
  }

  .footer-cols {
    gap: 28px 20px;
  }

  .contacts-page {
    overflow-x: hidden;
  }

  .contacts-layout,
  .contacts-info,
  .contacts-map,
  .contacts-map__frame {
    min-width: 0;
    max-width: 100%;
  }

}


/* ==========================================================================
   TABLET PORTRAIT
   768px ... 991px
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {

  /* =========================================================
     HEADER
     Bootstrap md/sm visibility conflicts with mobile menu here.
     ========================================================= */

  .topbar {
    min-height: 86px;
    padding: 14px 0;
  }

  .topbar .container-xl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: nowrap;
  }

  .topbar .topbar-mid,
  .topbar .topbar-mid.d-md-flex {
    display: none !important;
  }

  .topbar .topbar-phone,
  .topbar .topbar-phone.d-sm-block {
    display: none !important;
  }

  .topbar .topbar-cta,
  .topbar .topbar-cta.d-md-inline-flex {
    display: none !important;
  }

  .topbar .container-xl>.d-flex {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 0 !important;
  }

  .brand-block {
    display: flex;
    width: auto;
    max-width: calc(100% - 68px);
    min-width: 0;
    align-items: center;
    gap: 14px;
  }

  .brand-logo {
    flex: 0 0 auto;
  }

  .brand-logo img {
    max-width: 135px;
  }

  /* Supports either class if the short mobile tagline is present in header.phtml. */
  .brand-tagline-mobile,
  .brand-mobile-tagline {
    display: block !important;
    max-width: 230px;
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
  }

  /* Closed hamburger sits inside the header on portrait tablets. */
  .navbar-toggler-custom {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: flex !important;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin: 0;
  }

  /* Open state remains fixed above the drawer. */
  body.mobile-menu-open .navbar-toggler-custom,
  .navbar-toggler-custom.is-open {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 24px) !important;
    right: max(24px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    z-index: 10001;
  }


  /* =========================================================
     HOME HERO — USE MOBILE MEDIA ON PORTRAIT TABLET
     ========================================================= */

  .hero.hero-home {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: #000 !important;
  }

  .hero.hero-home>.hero-stage {
    display: none !important;
  }

  .hero.hero-home>.container-xl {
    width: 100%;
    max-width: 100%;
    padding-top: 30px;
    padding-bottom: 44px;
  }

  .hero.hero-home .row {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .hero.hero-home .hero-intro {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
  }

  .hero.hero-home h1 {
    max-width: 720px;
    margin: 0 0 14px;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.2;
  }

  .hero.hero-home .hero-sub {
    max-width: 600px;
    margin-bottom: 22px;
    font-size: 15px;
  }

  .hero.hero-home .hero-features {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 12px;
    margin: 0 0 22px;
    padding: 0 80px 5px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hero.hero-home .hero-features::-webkit-scrollbar {
    display: none;
  }

  .hero.hero-home .feature-card {
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
    min-height: 100px;
    padding: 14px 16px;
    scroll-snap-align: start;
    border-radius: 16px;
  }

  .hero.hero-home .feature-num {
    font-size: 58px;
  }

  .hero.hero-home .feature-text {
    font-size: 14px;
    line-height: 1.25;
  }

  .hero.hero-home .feature-icon {
    width: 58px;
    height: 58px;
  }

  .hero.hero-home .hero-mobile-media {
    display: block !important;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto 22px;
    overflow: hidden;
    border-radius: 22px;
    background: transparent;
  }

  .hero.hero-home .hero-mobile-swiper,
  .hero.hero-home .hero-mobile-swiper .swiper-wrapper,
  .hero.hero-home .hero-mobile-swiper .swiper-slide {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
  }

  .hero.hero-home .hero-mobile-video-card {
    width: 100%;
    height: auto;
    aspect-ratio: 307 / 334;
    overflow: hidden;
    border-radius: 22px;
    background: #06100d;
  }

  .hero.hero-home .hero-mobile-video-card>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .hero.hero-home .hero-media {
    display: none !important;
  }

  .hero.hero-home .btn-brand2 {
    display: flex;
    width: 100%;
    max-width: 420px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 13px 20px;
    font-size: 14px;
    text-align: center;
  }


  /* =========================================================
     CATALOG / COUNTRIES
     ========================================================= */

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

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

  .country-card {
    aspect-ratio: 5 / 4;
  }

  .country-grid .country-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 20px) / 2);
  }


  /* =========================================================
     LEAD / NEWS / VIDEO / FOOTER / CONTACTS
     ========================================================= */

  .lead-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .lead-media {
    min-height: 350px;
  }

  .lead-form-panel {
    width: 100% !important;
    padding: 26px;
  }

  .lead-form-panel h3 {
    font-size: 23px;
  }

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

  .news-grid .news-card:first-child {
    grid-column: 1 / -1;
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contacts-hero {
    gap: 24px;
  }

  .contacts-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-reviews .review-swiper .swiper-slide {
    width: 90% !important;
    max-width: 90%;
    flex-basis: 90%;
  }

}


/* ==========================================================================
   TABLET LANDSCAPE
   992px ... 1199px
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

  /* =========================================================
     HEADER — COMPACT DESKTOP
     ========================================================= */

  .topbar {
    padding: 14px 0;
  }

  .topbar .container-xl {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .brand-logo img {
    max-width: 130px;
  }

  .brand-tagline {
    max-width: 190px;
    font-size: 9px;
    line-height: 1.3;
  }

  .topbar-mid {
    flex: 0 1 auto;
    min-width: 0;
  }

  .topbar-mid .report-label {
    font-size: 9px;
  }

  .social-row {
    gap: 16px;
    padding: 9px 14px;
  }

  .topbar .container-xl>.d-flex {
    flex: 0 0 auto;
    gap: 16px !important;
  }

  .topbar-phone .phone-num {
    font-size: 17px;
    white-space: nowrap;
  }

  .topbar-phone .phone-sub {
    font-size: 10px;
    white-space: nowrap;
  }

  .topbar-cta {
    margin-left: 0;
    padding: 11px 18px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  .main-nav .container-xl {
    gap: 5px;
    padding-top: 13px;
    padding-bottom: 13px;
    flex-wrap: nowrap;
  }

  .main-nav a {
    padding: 9px 10px;
    font-size: 11.5px;
    white-space: nowrap;
  }


  /* =========================================================
     HOME HERO — COMPACT DESKTOP
     ========================================================= */

  .hero.hero-home>.container-xl {
    padding-top: 34px;
    padding-bottom: 48px;
  }

  .hero.hero-home .row {
    align-items: center !important;
  }

  .hero.hero-home .hero-intro {
    padding-left: 10px;
  }

  .hero.hero-home h1 {
    max-width: 530px;
    font-size: 29px;
    line-height: 1.22;
  }

  .hero.hero-home .hero-sub {
    font-size: 14px;
  }

  .hero.hero-home .hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 100%;
  }

  .hero.hero-home .feature-card {
    min-width: 0;
    min-height: 96px;
    padding: 12px 13px;
  }

  .hero.hero-home .feature-num {
    font-size: 56px;
  }

  .hero.hero-home .feature-text {
    font-size: 13px;
  }

  .hero.hero-home .feature-icon {
    width: 54px;
    height: 54px;
  }

  .hero.hero-home .hero-media {
    width: 100%;
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
  }

  .hero.hero-home .hero-swiper,
  .hero.hero-home .hero-video-card {
    width: 100%;
    max-width: 300px;
  }

  .hero.hero-home .hero-video-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-slider-arrows.left {
    left: -8px;
    right: auto;
  }

  .hero-slider-arrows.right {
    right: -8px;
    left: auto;
  }


  /* =========================================================
     COUNTRIES / CATALOG
     ========================================================= */

  .country-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .country-card {
    height: 330px !important;
    aspect-ratio: auto;
  }

  .country-grid .country-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }

  .country-content h4 {
    font-size: 24px;
  }

  .country-content p {
    font-size: 13px;
  }

  .truck-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }


  /* =========================================================
     HOW WE WORK
     ========================================================= */

  .how-we-work-widget .steps-wrap {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: 20px;
  }

  .how-we-work-widget .step-item {
    padding: 18px 22px;
  }

  .how-we-work-widget .step-item h5 {
    font-size: 20px;
  }

  .how-we-work-widget .step-item p {
    font-size: 14px;
  }


  /* =========================================================
     LEAD — FLEXIBLE TWO COLUMNS
     ========================================================= */

  .lead-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .8fr);
    gap: 20px;
  }

  .lead-media {
    min-height: 410px;
  }

  .lead-media-overlay {
    padding: 28px 32px;
  }

  .lead-form-panel {
    width: 100%;
    padding: 22px 20px;
  }

  .lead-form-panel h3 {
    margin-bottom: 18px;
    font-size: 21px;
  }

  .form-control-custom {
    padding: 12px 14px;
    font-size: 14px;
  }

  textarea.form-control-custom {
    min-height: 92px;
  }

  .consent-check {
    font-size: 12px;
  }

  .lead-form-panel .btn-brand {
    padding: 14px 18px;
    font-size: 15px;
  }

}


/* ==========================================================================
   TOUCH TABLETS
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) and (hover: none) and (pointer: coarse) {

  .trust-card_section .play-btn,
  .video-section .video-thumb .play-btn,
  .section-reviews .review-video .play-btn,
  .yt-swiper .video-thumb .play-btn,
  .vk-swiper .video-thumb .play-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

}


/* ==========================================================================
   SECTION 37 END — TABLET RESPONSIVE FINAL V3
   ========================================================================== */
/* ==========================================================================
   SECTION 38 START — REVIEWS SLIDER NAVIGATION FINAL V2
   Стрелки под слайдером, в стиле блока "Помогаем не попасть на обман"
   ========================================================================== */


/* =========================================================
   REVIEWS SECTION
   ========================================================= */

.section-reviews,
.section-reviews.pt-0 {
  position: relative;

  width: 100%;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;

  padding-top: 60px !important;
  padding-bottom: 45px !important;

  overflow: hidden;
}


/* =========================================================
   TITLE
   ========================================================= */

.section-reviews .section-title {
  margin-top: 0;
  margin-bottom: 45px;
}


/* =========================================================
   SLIDER WRAPPER
   Место под стрелки резервируется внутри wrapper,
   поэтому кнопки не перекрывают карточку и текст.
   ========================================================= */

.review-slider-wrap {
  position: relative;

  width: 100%;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;

  padding:
    0 0 62px !important;
}


/* =========================================================
   SWIPER
   ========================================================= */

.review-slider-wrap .review-swiper {
  position: relative;

  width: 100%;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;
}


.review-slider-wrap .review-swiper .swiper-wrapper {
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: flex-start;
}


.review-slider-wrap .review-swiper .swiper-slide {
  height: auto !important;
  min-height: 0 !important;

  margin-bottom: 0 !important;

  align-self: flex-start;
}


.review-slider-wrap .review-card {
  height: auto !important;
  min-height: 0 !important;

  margin-bottom: 0 !important;
}


/* ==========================================================================
   NAVIGATION
   Кнопки расположены ПОД слайдами.
   Внешний вид — тот же готовый slider-next.svg,
   без дополнительного круга/фона.
   ========================================================================== */

.review-slider-wrap .review-slider-prev,
.review-slider-wrap .review-slider-next {
  position: absolute;

  top: auto !important;
  bottom: 0;

  z-index: 20;

  display: flex;

  width: 44px;
  height: 44px;

  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  cursor: pointer;

  opacity: 1;

  transform: none !important;

  transition:
    opacity .2s ease,
    translate .2s ease;
}


/*
 * Две кнопки центрируются как единая группа:
 *
 * [ prev ] 16px [ next ]
 */
.review-slider-wrap .review-slider-prev {
  left:
    calc(50% - 52px);

  right: auto;
}


.review-slider-wrap .review-slider-next {
  left:
    calc(50% + 8px);

  right: auto;
}


/* =========================================================
   SVG
   ========================================================= */

.review-slider-wrap .review-slider-prev img,
.review-slider-wrap .review-slider-next img {
  display: block;

  width: 44px;
  height: 44px;

  max-width: none;

  object-fit: contain;

  pointer-events: none;
}


.review-slider-wrap .review-slider-prev img {
  transform:
    scaleX(-1);
}


.review-slider-wrap .review-slider-next img {
  transform: none;
}


/* =========================================================
   HOVER
   ========================================================= */

.review-slider-wrap .review-slider-prev:hover,
.review-slider-wrap .review-slider-next:hover {
  opacity: .75;
}


.review-slider-wrap .review-slider-prev:hover {
  translate:
    -2px 0;
}


.review-slider-wrap .review-slider-next:hover {
  translate:
    2px 0;
}


/* =========================================================
   DISABLED
   ========================================================= */

.review-slider-wrap .review-slider-prev.swiper-button-disabled,
.review-slider-wrap .review-slider-next.swiper-button-disabled {
  opacity: .35;

  cursor: default;

  pointer-events: none;

  translate: 0 0;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  .section-reviews,
  .section-reviews.pt-0 {
    height: auto !important;
    min-height: 0 !important;

    padding-top: 50px !important;
    padding-bottom: 40px !important;
  }


  .section-reviews .section-title {
    margin-bottom: 35px;
  }


  .review-slider-wrap {
    padding-bottom:
      58px !important;
  }


  .review-slider-wrap .review-slider-prev,
  .review-slider-wrap .review-slider-next {
    width: 40px;
    height: 40px;
  }


  .review-slider-wrap .review-slider-prev img,
  .review-slider-wrap .review-slider-next img {
    width: 40px;
    height: 40px;
  }


  .review-slider-wrap .review-slider-prev {
    left:
      calc(50% - 48px);
  }


  .review-slider-wrap .review-slider-next {
    left:
      calc(50% + 8px);
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .section-reviews,
  .section-reviews.pt-0 {
    height: auto !important;
    min-height: 0 !important;

    padding-top: 40px !important;
    padding-bottom: 34px !important;
  }


  .section-reviews .section-title {
    margin-bottom: 25px;
  }


  .review-slider-wrap {
    height: auto !important;
    min-height: 0 !important;

    padding-bottom:
      52px !important;
  }


  .review-slider-wrap .review-swiper {
    height: auto !important;
    min-height: 0 !important;

    /*
     * На мобильном сохраняем визуальную подсказку
     * в виде части следующего отзыва.
     */
    overflow: visible;
  }


  .review-slider-wrap .review-slider-prev,
  .review-slider-wrap .review-slider-next {
    width: 36px;
    height: 36px;
  }


  .review-slider-wrap .review-slider-prev img,
  .review-slider-wrap .review-slider-next img {
    width: 36px;
    height: 36px;
  }


  .review-slider-wrap .review-slider-prev {
    left:
      calc(50% - 44px);
  }


  .review-slider-wrap .review-slider-next {
    left:
      calc(50% + 8px);
  }

}


/* ==========================================================================
   SECTION 38 END — REVIEWS SLIDER NAVIGATION FINAL V2
   ========================================================================== */

/* ==========================================================================
   SECTION 39 START — FOOTER SOCIAL ICONS FINAL
   White by default → GAT green on hover
   Unified visual icon size
   ========================================================================== */


/* =========================================================
   SOCIAL CARD
   ========================================================= */

.footer-social-item {
  color: #fff;

  transition:
    background .22s ease,
    border-color .22s ease,
    transform .22s ease;
}


/*
 * Не выделяем Telegram или какую-либо другую сеть
 * постоянным собственным цветом.
 */
.footer-social-item--telegram {
  color: #fff;

  background: #171d20;

  border-color: #252c2f;
}


/* =========================================================
   COMMON ICON FRAME

   У всех иконок один физический контейнер 24 × 24 px.
   Это убирает разницу размеров между Telegram,
   YouTube, RuTube, VK, WhatsApp и телефоном.
   ========================================================= */

.footer-social-icon,
.footer-social-fa {
  display: flex;

  width: 24px;
  min-width: 24px;
  max-width: 24px;

  height: 24px;
  min-height: 24px;
  max-height: 24px;

  flex:
    0 0 24px;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  color: #fff !important;

  line-height: 1;

  transition:
    color .22s ease,
    background-color .22s ease,
    transform .22s ease;
}


/* =========================================================
   SVG MASK ICONS

   SVG используется как маска, а реальный цвет
   задаётся через currentColor.

   Поэтому результат одинаков в:
   Chrome / Safari / Firefox / iOS Safari.
   ========================================================= */

.footer-social-icon {
  background-color:
    currentColor;

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;
}


/* Telegram */

.footer-social-icon--telegram {
  -webkit-mask-image:
    url("/templates/gat/app/img/social/footer-telegram.svg");

  mask-image:
    url("/templates/gat/app/img/social/footer-telegram.svg");
}


/* YouTube */

.footer-social-icon--youtube {
  -webkit-mask-image:
    url("/templates/gat/app/img/social/footer-youtube.svg");

  mask-image:
    url("/templates/gat/app/img/social/footer-youtube.svg");
}


/* RuTube */

.footer-social-icon--rutube {
  -webkit-mask-image:
    url("/templates/gat/app/img/social/footer-rutube.svg");

  mask-image:
    url("/templates/gat/app/img/social/footer-rutube.svg");
}


/* VK Video */

.footer-social-icon--vk {
  -webkit-mask-image:
    url("/templates/gat/app/img/social/footer-vk.svg");

  mask-image:
    url("/templates/gat/app/img/social/footer-vk.svg");
}


/* =========================================================
   FONT AWESOME ICONS
   WhatsApp + phone
   ========================================================= */

.footer-social-fa {
  font-size:
    21px !important;
}


/*
 * У WhatsApp круглая форма, поэтому ему нужен
 * на 1px больший glyph для одинаковой видимой высоты.
 */
.footer-social-fa--whatsapp {
  font-size:
    22px !important;
}


/*
 * Comment визуально более массивный,
 * поэтому оставляем немного меньше.
 */
.footer-social-fa--phone {
  font-size:
    20px !important;
}


/* =========================================================
   OLD IMG PROTECTION

   Если где-то ещё осталась старая footer-разметка с <img>,
   она тоже будет приведена к одному размеру.
   ========================================================= */

.footer-social-item>img {
  display: block;

  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  flex:
    0 0 24px;

  margin: 0;
  padding: 0;

  object-fit: contain;

  filter:
    brightness(0) invert(1);

  transition:
    filter .22s ease,
    transform .22s ease;
}


/* =========================================================
   TEXT
   ========================================================= */

.footer-social-item>span:not(.footer-social-icon) {
  min-width: 0;

  color: #fff;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* ==========================================================================
   DESKTOP HOVER
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

  /*
   * Карточка остаётся в общей тёмной стилистике.
   * Меняем только небольшой border accent.
   */
  .footer-social-item:hover {
    color: #fff;

    background: #171d20;

    border-color:
      rgba(46, 204, 99, .55);

    transform:
      translateY(-1px);
  }


  /*
   * ВСЕ иконки без исключения становятся
   * одним фирменным зелёным цветом.
   */
  .footer-social-item:hover .footer-social-icon,
  .footer-social-item:hover .footer-social-fa {
    color:
      var(--green-light) !important;

    transform:
      scale(1.06);
  }


  /*
   * Fallback для старого <img>.
   */
  .footer-social-item:hover>img {
    filter:
      brightness(0) saturate(100%) invert(72%) sepia(63%) saturate(610%) hue-rotate(84deg) brightness(91%) contrast(90%);

    transform:
      scale(1.06);
  }

}


/* ==========================================================================
   TOUCH DEVICES

   На touch нет постоянного hover-состояния.
   Иконки остаются белыми, карточки не прыгают.
   ========================================================================== */

@media (hover: none),
(pointer: coarse) {

  .footer-social-item,
  .footer-social-item:hover {
    color: #fff;

    background: #171d20;

    border-color: #252c2f;

    transform: none;
  }


  .footer-social-item .footer-social-icon,
  .footer-social-item:hover .footer-social-icon,
  .footer-social-item .footer-social-fa,
  .footer-social-item:hover .footer-social-fa {
    color: #fff !important;

    transform: none;
  }

}


/* ==========================================================================
   SECTION 39 END — FOOTER SOCIAL ICONS FINAL
   ========================================================================== */

/* ==========================================================================
   MOBILE MENU SOCIAL ICONS — FINAL
   ========================================================================== */


/* =========================================================
   SOCIAL PANEL
   ========================================================= */

.mobile-menu-social-icons {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;

  padding:
    16px 18px;

  background: #1c2225;

  border:
    1px solid #222a2d;

  border-radius: 20px;
}


/* =========================================================
   LINK
   ========================================================= */

.main-nav.open .mobile-menu-social-icons a {
  display: flex;

  width: 100%;
  height: 48px;

  align-items: center;
  justify-content: center;

  padding: 0;

  color: #fff;

  background: transparent;

  border: 0;
  border-radius: 12px;

  text-decoration: none;

  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}


/* =========================================================
   COMMON ICON

   Все четыре иконки имеют физически
   одинаковый контейнер 30 × 30 px.
   ========================================================= */

.mobile-menu-network-icon {
  display: block;

  width: 30px;
  min-width: 30px;
  max-width: 30px;

  height: 30px;
  min-height: 30px;
  max-height: 30px;

  flex:
    0 0 30px;

  color: #fff;

  background-color:
    currentColor;

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;

  transition:
    color .2s ease,
    transform .2s ease;
}


/* =========================================================
   YOUTUBE
   ========================================================= */

.mobile-menu-network-icon--youtube {
  -webkit-mask-image:
    url("/templates/gat/app/img/social/footer-youtube.svg");

  mask-image:
    url("/templates/gat/app/img/social/footer-youtube.svg");
}


/* =========================================================
   RUTUBE
   ========================================================= */

.mobile-menu-network-icon--rutube {
  -webkit-mask-image:
    url("/templates/gat/app/img/social/footer-rutube.svg");

  mask-image:
    url("/templates/gat/app/img/social/footer-rutube.svg");
}


/* =========================================================
   VK
   ========================================================= */

.mobile-menu-network-icon--vk {
  -webkit-mask-image:
    url("/templates/gat/app/img/social/footer-vk.svg");

  mask-image:
    url("/templates/gat/app/img/social/footer-vk.svg");
}


/* =========================================================
   TELEGRAM
   ========================================================= */

.mobile-menu-network-icon--telegram {
  -webkit-mask-image:
    url("/templates/gat/app/img/social/footer-telegram.svg");

  mask-image:
    url("/templates/gat/app/img/social/footer-telegram.svg");
}


/* ==========================================================================
   DESKTOP / MOUSE HOVER
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

  .main-nav.open .mobile-menu-social-icons a:hover {
    color:
      var(--green-light);

    background:
      rgba(46, 204, 99, .06);

    transform:
      translateY(-1px);
  }


  .main-nav.open .mobile-menu-social-icons a:hover .mobile-menu-network-icon {
    color:
      var(--green-light);

    transform:
      scale(1.06);
  }

}


/* ==========================================================================
   KEYBOARD
   ========================================================================== */

.main-nav.open .mobile-menu-social-icons a:focus-visible {
  color:
    var(--green-light);

  outline:
    1px solid rgba(46, 204, 99, .55);

  outline-offset:
    2px;
}


.main-nav.open .mobile-menu-social-icons a:focus-visible .mobile-menu-network-icon {
  color:
    var(--green-light);
}


/* ==========================================================================
   TOUCH

   На телефоне hover не должен залипать.
   ========================================================================== */

@media (hover: none),
(pointer: coarse) {

  .main-nav.open .mobile-menu-social-icons a,
  .main-nav.open .mobile-menu-social-icons a:hover {
    color: #fff;

    background: transparent;

    transform: none;
  }


  .main-nav.open .mobile-menu-social-icons a .mobile-menu-network-icon,
  .main-nav.open .mobile-menu-social-icons a:hover .mobile-menu-network-icon {
    color: #fff;

    transform: none;
  }


  /*
   * Короткий визуальный отклик при нажатии.
   */
  .main-nav.open .mobile-menu-social-icons a:active .mobile-menu-network-icon {
    color:
      var(--green-light);

    transform:
      scale(.94);
  }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

  .mobile-menu-social-icons {
    padding:
      14px 15px;
  }


  .main-nav.open .mobile-menu-social-icons a {
    height: 44px;
  }


  .mobile-menu-network-icon {
    width: 28px;
    min-width: 28px;
    max-width: 28px;

    height: 28px;
    min-height: 28px;
    max-height: 28px;

    flex-basis: 28px;
  }

}


/* ==========================================================================
   END — MOBILE MENU SOCIAL ICONS FINAL
   ========================================================================== */
/* ========================================================================== 
   SECTION 40 START — BLOG ARTICLE CONTENT SYSTEM FINAL V3
   WYSIWYG content + gallery + FAQ
   ========================================================================== */


/* ==========================================================================
   ARTICLE INTRO — TOC + COVER
   ========================================================================== */

.blog-article-intro-grid {
  display: grid;
  width: 100%;
  gap: 24px;
  align-items: start;
  margin: 0 0 34px;
}

.blog-article-intro-grid.has-toc.has-image {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.blog-article-intro-grid.has-toc:not(.has-image) {
  grid-template-columns: minmax(260px, 420px);
}

.blog-article-intro-grid.has-image:not(.has-toc) {
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
}

.blog-article-toc {
  position: sticky;
  top: 110px;
  max-height: min(72vh, 620px);
  overflow: auto;
  padding: 24px 22px;
  color: #cbd2ce;
  background: #171d20;
  border: 1px solid #242d2a;
  border-radius: 18px;
  scrollbar-width: thin;
  scrollbar-color: #34443d transparent;
}

.blog-article-toc h1,
.blog-article-toc h2,
.blog-article-toc h3,
.blog-article-toc h4,
.blog-article-toc h5,
.blog-article-toc h6 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.blog-article-toc ul,
.blog-article-toc ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-article-toc li {
  margin: 0;
  padding: 0;
}

.blog-article-toc a {
  display: block;
  padding: 4px 0 4px 13px;
  color: #aeb8b2;
  border-left: 2px solid #2b3531;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, padding-left .2s ease;
}

.blog-article-toc a:hover,
.blog-article-toc a:focus-visible {
  color: var(--green-light);
  border-left-color: var(--green-light);
  padding-left: 17px;
}

.blog-article-intro-grid .blog-article-image {
  width: 100%;
  max-height: 480px;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
}

.blog-article-intro-grid .blog-article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-article-content [id] {
  scroll-margin-top: 120px;
}



.blog-article-content,
.blog-article-extra {
  width: 100%;
  box-sizing: border-box;
  color: #e4e8e5;
  background: #171d20;
  border: 1px solid #242d2a;
  border-radius: 22px;
}

.blog-article-content {
  padding: 40px 45px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

.blog-article-extra {
  margin-top: 28px;
  padding: 34px 38px;
}

/* H1-H6 inside WYSIWYG */
.blog-article-content h1,
.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4,
.blog-article-content h5,
.blog-article-content h6,
.blog-article-extra h1,
.blog-article-extra h2,
.blog-article-extra h3,
.blog-article-extra h4,
.blog-article-extra h5,
.blog-article-extra h6 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.01em;
}

.blog-article-content h1,
.blog-article-extra h1 {
  margin: 0 0 24px;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.15;
}

.blog-article-content h2,
.blog-article-extra h2 {
  margin: 48px 0 20px;
  color: var(--green);
  font-size: clamp(27px, 2.4vw, 34px);
  line-height: 1.22;
}

.blog-article-content h3,
.blog-article-extra h3 {
  margin: 36px 0 16px;
  color: var(--green-light);
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.28;
}

.blog-article-content h4,
.blog-article-extra h4 {
  margin: 30px 0 14px;
  font-size: 20px;
  line-height: 1.35;
}

.blog-article-content h5,
.blog-article-extra h5 {
  margin: 26px 0 12px;
  font-size: 18px;
  line-height: 1.4;
}

.blog-article-content h6,
.blog-article-extra h6 {
  margin: 24px 0 10px;
  color: #c9d0cc;
  font-size: 16px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.blog-article-content> :first-child,
.blog-article-extra> :first-child {
  margin-top: 0;
}

/* Text */
.blog-article-content p,
.blog-article-extra p {
  margin: 0 0 22px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.blog-article-content p:last-child,
.blog-article-extra p:last-child {
  margin-bottom: 0;
}

.blog-article-content strong,
.blog-article-extra strong {
  color: #fff;
  font-weight: 800;
}

.blog-article-content small,
.blog-article-extra small {
  color: #8f9994;
  font-size: .86em;
}

/* Links */
.blog-article-content a,
.blog-article-extra a {
  color: var(--green-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.blog-article-content a:hover,
.blog-article-extra a:hover {
  color: #fff;
}

/* Lists */
.blog-article-content ul,
.blog-article-content ol,
.blog-article-extra ul,
.blog-article-extra ol {
  margin: 0 0 26px;
  padding-left: 28px;
}

.blog-article-content li,
.blog-article-extra li {
  margin-bottom: 9px;
  padding-left: 4px;
}

.blog-article-content li:last-child,
.blog-article-extra li:last-child {
  margin-bottom: 0;
}

.blog-article-content li::marker,
.blog-article-extra li::marker {
  color: var(--green-light);
  font-weight: 800;
}

/* Quote */
.blog-article-content blockquote,
.blog-article-extra blockquote {
  position: relative;
  margin: 34px 0;
  padding: 24px 28px 24px 30px;
  color: #eef2ef;
  background: linear-gradient(90deg, rgba(14, 114, 66, .14) 0%, rgba(17, 20, 22, .96) 48%, #111416 100%);
  border: 1px solid #28342f;
  border-left: 4px solid var(--green);
  border-radius: 0 16px 16px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
}

.blog-article-content blockquote p,
.blog-article-extra blockquote p {
  margin-bottom: 12px;
}

.blog-article-content blockquote p:last-child,
.blog-article-extra blockquote p:last-child {
  margin-bottom: 0;
}

/* Inline images */
.blog-article-content img,
.blog-article-extra img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 34px auto;
  border-radius: 18px;
}

/* Figure */
.blog-article-content figure,
.blog-article-extra figure {
  margin: 38px 0;
}

.blog-article-content figure img,
.blog-article-extra figure img {
  width: 100%;
  margin: 0;
}

.blog-article-content figcaption,
.blog-article-extra figcaption {
  margin-top: 10px;
  color: #8e9993;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

/* Tables: horizontal scroll without extra wrapper */
.blog-article-content table,
.blog-article-extra table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 32px 0;
  overflow-x: auto;
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid #303a36;
  border-radius: 16px;
  background: #121718;
  -webkit-overflow-scrolling: touch;
}

.blog-article-content table tbody,
.blog-article-content table thead,
.blog-article-content table tfoot,
.blog-article-extra table tbody,
.blog-article-extra table thead,
.blog-article-extra table tfoot {
  display: table;
  width: 100%;
  min-width: 650px;
  table-layout: auto;
  border-collapse: collapse;
}

.blog-article-content th,
.blog-article-content td,
.blog-article-extra th,
.blog-article-extra td {
  padding: 14px 16px;
  border-right: 1px solid #303a36;
  border-bottom: 1px solid #303a36;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.blog-article-content tr:last-child>*,
.blog-article-extra tr:last-child>* {
  border-bottom: 0;
}

.blog-article-content tr>*:last-child,
.blog-article-extra tr>*:last-child {
  border-right: 0;
}

.blog-article-content th,
.blog-article-extra th {
  color: #fff;
  background: #111416;
  font-weight: 800;
}

.blog-article-content td,
.blog-article-extra td {
  color: #d6dcd8;
}

/* Video embeds: YouTube / VK / RuTube */
.blog-article-content iframe,
.blog-article-extra iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  margin: 36px 0;
  background: #000;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}

.blog-article-content hr,
.blog-article-extra hr {
  height: 1px;
  margin: 42px 0;
  background: #2b3531;
  border: 0;
}

/* Gallery */
.blog-article-gallery-section>h2 {
  margin-bottom: 24px;
}

.article-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.article-gallery-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
  min-width: 0;
  overflow: hidden;
  background: #0d1112;
  border: 1px solid #29332f;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  text-decoration: none;
}

.article-gallery-item img {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform .3s ease, opacity .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .article-gallery-item:hover img {
    transform: scale(1.035);
    opacity: .88;
  }
}


/* ==========================================================================
   ARTICLE GALLERY LIGHTBOX
   ========================================================================== */

html.article-lightbox-open,
body.article-lightbox-open {
  overflow: hidden;
}

body.article-lightbox-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.article-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.article-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.article-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.article-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(1180px, calc(100vw - 56px));
  height: min(88vh, 820px);
  align-items: center;
  justify-content: center;
  padding: 28px 70px 44px;
  background: #0b0e0f;
  border: 1px solid #29332f;
  border-radius: 22px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .55);
}

.article-lightbox__figure {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.article-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(88vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.article-lightbox__caption {
  max-width: 900px;
  margin-top: 12px;
  color: #aab4ae;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.article-lightbox__close,
.article-lightbox__nav {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: rgba(23, 29, 32, .86);
  border: 1px solid #34413b;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.article-lightbox__close {
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.article-lightbox__nav {
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
}

.article-lightbox__nav--prev {
  left: 14px;
}

.article-lightbox__nav--next {
  right: 14px;
}

.article-lightbox__counter {
  position: absolute;
  left: 50%;
  bottom: 14px;
  color: #8e9993;
  font-size: 12px;
  font-weight: 700;
  transform: translateX(-50%);
}

@media (hover: hover) and (pointer: fine) {

  .article-lightbox__close:hover,
  .article-lightbox__nav:hover {
    color: var(--green-light);
    background: #171d20;
    border-color: var(--green-light);
  }

  .article-lightbox__close:hover {
    transform: scale(1.05);
  }

  .article-lightbox__nav:hover {
    transform: translateY(-50%) scale(1.05);
  }
}


/* FAQ */
.blog-article-faq-section>h2 {
  margin-bottom: 22px;
}

.article-faq-list {
  display: grid;
  gap: 10px;
}

.article-faq-item {
  overflow: hidden;
  background: #111617;
  border: 1px solid #29322f;
  border-radius: 14px;
}

.article-faq-item summary {
  position: relative;
  display: flex;
  min-height: 58px;
  align-items: center;
  padding: 15px 54px 15px 18px;
  color: #fff;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.35;
}

.article-faq-item summary::-webkit-details-marker {
  display: none;
}

.article-faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  color: var(--green-light);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform .2s ease;
}

.article-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.article-faq-answer {
  padding: 0 18px 18px;
  color: #cbd2ce;
  font-size: 15px;
  line-height: 1.6;
}

.article-faq-answer p {
  margin: 0 0 12px;
}

.article-faq-answer p:last-child {
  margin-bottom: 0;
}

/* Footer buttons */
.blog-article-footer {
  gap: 12px;
  flex-wrap: wrap;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .blog-article-intro-grid.has-toc.has-image {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    gap: 18px;
  }

  .blog-article-toc {
    top: 90px;
    padding: 20px 18px;
  }

  .blog-article-intro-grid .blog-article-image {
    max-height: 400px;
  }

  .blog-article-content {
    padding: 34px 32px;
    font-size: 16px;
  }

  .blog-article-extra {
    padding: 30px;
  }

  .article-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {

  .blog-article-intro-grid,
  .blog-article-intro-grid.has-toc.has-image,
  .blog-article-intro-grid.has-toc:not(.has-image),
  .blog-article-intro-grid.has-image:not(.has-toc) {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }

  .blog-article-toc {
    position: static;
    max-height: 320px;
    padding: 18px 16px;
    border-radius: 14px;
  }

  .blog-article-toc h1,
  .blog-article-toc h2,
  .blog-article-toc h3,
  .blog-article-toc h4,
  .blog-article-toc h5,
  .blog-article-toc h6 {
    font-size: 17px;
  }

  .blog-article-toc a {
    font-size: 12px;
  }

  .blog-article-intro-grid .blog-article-image {
    max-height: none;
    margin: 0;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }

  .article-lightbox {
    padding: 10px;
  }

  .article-lightbox__dialog {
    width: calc(100vw - 20px);
    height: min(88dvh, 760px);
    padding: 54px 12px 42px;
    border-radius: 16px;
  }

  .article-lightbox__image {
    max-height: calc(88dvh - 120px);
    border-radius: 9px;
  }

  .article-lightbox__close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    font-size: 27px;
  }

  .article-lightbox__nav {
    top: auto;
    bottom: 8px;
    width: 38px;
    height: 38px;
    font-size: 30px;
    transform: none;
  }

  .article-lightbox__nav--prev {
    left: 12px;
  }

  .article-lightbox__nav--next {
    right: 12px;
  }

  .article-lightbox__counter {
    bottom: 18px;
  }

  .blog-article {
    padding: 36px 0 60px;
  }

  .blog-article-header {
    margin-bottom: 26px;
  }

  .blog-article h1 {
    font-size: clamp(29px, 8vw, 38px);
    line-height: 1.14;
  }

  .blog-article-lead {
    font-size: 16px;
    line-height: 1.55;
  }

  .blog-article-content,
  .blog-article-extra {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .blog-article-content {
    font-size: 15px;
    line-height: 1.65;
  }

  .blog-article-content h2,
  .blog-article-extra h2 {
    margin: 38px 0 17px;
    font-size: 25px;
  }

  .blog-article-content h3,
  .blog-article-extra h3 {
    margin: 30px 0 14px;
    font-size: 21px;
  }

  .blog-article-content h4,
  .blog-article-extra h4 {
    font-size: 18px;
  }

  .blog-article-content h5,
  .blog-article-extra h5 {
    font-size: 17px;
  }

  .blog-article-content h6,
  .blog-article-extra h6 {
    font-size: 14px;
  }

  .blog-article-content img,
  .blog-article-extra img {
    margin: 26px auto;
    border-radius: 14px;
  }

  .blog-article-content blockquote,
  .blog-article-extra blockquote {
    margin: 28px 0;
    padding: 20px 18px;
    font-size: 16px;
  }

  .blog-article-content table,
  .blog-article-extra table {
    margin: 28px 0;
    border-radius: 12px;
  }

  .blog-article-content table tbody,
  .blog-article-content table thead,
  .blog-article-content table tfoot,
  .blog-article-extra table tbody,
  .blog-article-extra table thead,
  .blog-article-extra table tfoot {
    min-width: 620px;
  }

  .blog-article-content th,
  .blog-article-content td,
  .blog-article-extra th,
  .blog-article-extra td {
    padding: 12px 13px;
    font-size: 14px;
  }

  .blog-article-content iframe,
  .blog-article-extra iframe {
    margin: 28px 0;
    border-radius: 14px;
  }

  .article-gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .article-gallery-item {
    border-radius: 12px;
  }

  .article-faq-item summary {
    min-height: 54px;
    padding: 14px 48px 14px 15px;
    font-size: 14px;
  }

  .article-faq-answer {
    padding: 0 15px 16px;
    font-size: 14px;
  }

  .blog-article-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .blog-article-footer .btn-dark-pill,
  .blog-article-footer .btn-brand {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .article-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== 
   SECTION 40 END — BLOG ARTICLE CONTENT SYSTEM FINAL V3
   ========================================================================== */

/* ==========================================================================
   SECTION 41 START — BLOG ARTICLE MOBILE GALLERY SWIPE
   Mobile: one horizontal swipe row instead of a long vertical gallery.
   Desktop / tablet above 767px remain unchanged.
   ========================================================================== */

@media (max-width: 767px) {

  .blog-article-gallery-section {
    overflow: hidden;
  }

  .article-gallery-grid {
    display: grid;

    /* Override the old 2-column / 1-column mobile gallery. */
    grid-template-columns: none;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: 86%;

    gap: 10px;

    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0 0 4px;
    margin: 0;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .article-gallery-grid::-webkit-scrollbar {
    display: none;
  }

  .article-gallery-item {
    width: 100%;
    min-width: 0;

    border-radius: 12px;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .article-gallery-item img {
    width: 100%;
    height: 100%;
    margin: 0 !important;

    object-fit: cover;
    object-position: center;
  }

}


/*
 * Small mobile keeps the same horizontal carousel.
 * This rule intentionally overrides the old:
 *
 * @media (max-width: 480px) {
 *   .article-gallery-grid {
 *     grid-template-columns: 1fr;
 *   }
 * }
 */
@media (max-width: 480px) {

  .article-gallery-grid {
    grid-template-columns: none;
    grid-auto-columns: 88%;
    gap: 9px;
  }

}

/* ==========================================================================
   SECTION 41 END — BLOG ARTICLE MOBILE GALLERY SWIPE
   ========================================================================== */


/* ==========================================================================
   SECTION 42 START — ARTICLE TABLES RESPONSIVE FINAL
   - no vertical table scroll
   - ignore accidental fixed heights from WYSIWYG
   - compact mobile tables
   - fit into viewport whenever possible
   - horizontal scroll remains only as a fallback for genuinely wide content
   ========================================================================== */


/* =========================================================
   DESKTOP / GLOBAL
   ========================================================= */

.blog-article-content table,
.blog-article-extra table {
  width: 100% !important;
  max-width: 100% !important;

  /* UMI/WYSIWYG may write style="height: ...px" directly on <table>. */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 32px 0;

  /*
   * Keep horizontal scrolling available as a safety fallback,
   * but never make the table vertically scrollable.
   */
  overflow-x: auto;
  overflow-y: hidden;

  border-spacing: 0;
  border-collapse: separate;

  border: 1px solid #303a36;
  border-radius: 16px;

  background: #121718;

  -webkit-overflow-scrolling: touch;
}


/*
 * Any fixed height accidentally added by the visual editor to
 * table sections / rows / cells must not lock the table vertically.
 */
.blog-article-content table thead,
.blog-article-content table tbody,
.blog-article-content table tfoot,
.blog-article-content table tr,
.blog-article-content table th,
.blog-article-content table td,
.blog-article-extra table thead,
.blog-article-extra table tbody,
.blog-article-extra table tfoot,
.blog-article-extra table tr,
.blog-article-extra table th,
.blog-article-extra table td {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}


/* Desktop/tablet content can use its natural width. */
.blog-article-content table thead,
.blog-article-content table tbody,
.blog-article-content table tfoot,
.blog-article-extra table thead,
.blog-article-extra table tbody,
.blog-article-extra table tfoot {
  display: table;

  width: 100%;
  min-width: 0;

  table-layout: auto;
  border-collapse: collapse;
}


/* =========================================================
   MOBILE
   First try to fit the whole table into the viewport.
   ========================================================= */

@media (max-width: 767px) {

  .blog-article-content table,
  .blog-article-extra table {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 24px 0;

    /*
     * If every column can wrap, the table stays fully visible.
     * If some real unbreakable content is still wider than the screen,
     * horizontal scrolling remains available.
     */
    overflow-x: auto;
    overflow-y: hidden;

    border-radius: 11px;

    scrollbar-width: auto;
    scrollbar-color: #4b5a53 #171d20;

    -webkit-overflow-scrolling: touch;
  }


  /*
   * Remove the old forced 620/650px minimum width.
   * This is the key change that lets normal 2–4 column tables
   * fit on a phone without horizontal scrolling.
   */
  .blog-article-content table thead,
  .blog-article-content table tbody,
  .blog-article-content table tfoot,
  .blog-article-extra table thead,
  .blog-article-extra table tbody,
  .blog-article-extra table tfoot {
    display: table;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    table-layout: fixed;
    border-collapse: collapse;
  }


  .blog-article-content th,
  .blog-article-content td,
  .blog-article-extra th,
  .blog-article-extra td {
    width: auto;
    min-width: 0;

    padding: 8px 7px;

    font-size: 12px;
    line-height: 1.3;

    vertical-align: top;

    white-space: normal;

    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }


  /*
   * Make headings slightly denser than article body text,
   * but keep enough weight for readability.
   */
  .blog-article-content th,
  .blog-article-extra th {
    font-size: 11.5px;
    font-weight: 800;
  }


  /*
   * A clearly styled horizontal scrollbar appears only when
   * a table really cannot fit after wrapping.
   */
  .blog-article-content table::-webkit-scrollbar,
  .blog-article-extra table::-webkit-scrollbar {
    height: 8px;
  }

  .blog-article-content table::-webkit-scrollbar-track,
  .blog-article-extra table::-webkit-scrollbar-track {
    background: #171d20;
    border-radius: 999px;
  }

  .blog-article-content table::-webkit-scrollbar-thumb,
  .blog-article-extra table::-webkit-scrollbar-thumb {
    background: #4b5a53;
    border: 2px solid #171d20;
    border-radius: 999px;
  }

  .blog-article-content table::-webkit-scrollbar-thumb:hover,
  .blog-article-extra table::-webkit-scrollbar-thumb:hover {
    background: var(--green);
  }

}


/* =========================================================
   SMALL MOBILE
   Extra compaction for 480px and below.
   ========================================================= */

@media (max-width: 480px) {

  .blog-article-content table,
  .blog-article-extra table {
    margin: 21px 0;
    border-radius: 10px;
  }


  .blog-article-content th,
  .blog-article-content td,
  .blog-article-extra th,
  .blog-article-extra td {
    padding: 7px 5px;

    font-size: 11px;
    line-height: 1.25;
  }


  .blog-article-content th,
  .blog-article-extra th {
    font-size: 10.5px;
  }

}


/* ==========================================================================
   SECTION 42 END — ARTICLE TABLES RESPONSIVE FINAL
   ========================================================================== */