/* =========================================================
   Инвестиционный портал Республики Крым
   Дизайн-система (цвета/шрифты/отступы — из макета Figma)
   ========================================================= */

@import url('../assets/fonts/inter-local.css');

:root{
  --red:        #CD1F26;   /* базовый акцентный красный (кнопки, бейджи) */
  --red-hover:  #FF3B43;   /* цвет наведения по ТЗ */
  --navy:       #144069;   /* тёмно-синий фон блока "Инвестиционные предложения" */
  --blue:       #1666B0;   /* синие плашки/навигатор/CTA */
  --blue-dark:  #123A5E;
  --bg-light:   #F8FAFC;
  --white:      #FFFFFF;
  --text-dark:  #1E293B;
  --text-body:  #333333;
  --text-muted: #64748B;
  --border:     #E2E8F0;
  --stat-blue:  #4A90D2;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 20px;

  --page-pad: 60px;
  --content-max: 1800px;

  --header-h: 70px;
}

@media (max-width: 1023px){
  :root{ --page-pad: 24px; }
}
@media (max-width: 599px), (min-width: 600px) and (max-width: 767px) and (min-height: 600px){
  :root{ --page-pad: 16px; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

/* ---------- Видимый фокус с клавиатуры ---------- */
:focus{ outline:none; }
:focus-visible{
  outline: 2px solid #1666B0;
  outline-offset: 2px;
  border-radius: 4px;
}
.hero :focus-visible,
.page-banner :focus-visible{
  outline-color: #fff;
}

.container{
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

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

/* =========================== HEADER =========================== */
.site-header{
  position: fixed;
  top: 20px;
  left: 0; right: 0;
  z-index: 500;
  display:flex;
  justify-content:center;
  pointer-events:none;
  transition: top .3s ease;
}
.site-header__inner{
  pointer-events:auto;
  width: min(1800px, calc(100% - 2 * var(--page-pad)));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.nav-pill{
  position: relative;
  isolation: isolate;
  background: rgba(169,169,169,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.1);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-l);
  height: var(--header-h);
  display:flex;
  align-items:center;
  gap: 40px;
  padding: 10px 24px;
}
/* Размытие пилюли живёт на псевдоэлементе, а не на самой пилюле:
   элемент с backdrop-filter становится «backdrop root», и вложенный
   в него выпадающий список размывал бы не страницу, а пустое нутро
   пилюли — из-за этого у дропдауна не было размытия. */
.nav-pill::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  backdrop-filter: blur(14px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.1);
  z-index:-1;
  pointer-events:none;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.brand img{ width:44px; height:50px; }
.brand__text{
  font-size:14px;
  line-height:1.4;
  text-transform:uppercase;
  color:#fff;
  font-weight:400;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:20px;
}
.main-nav__item{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.main-nav__link{
  font-size:16px;
  color:#fff;
  white-space:nowrap;
  cursor:pointer;
  transition: color .2s;
  background:none;
  border:none;
  padding:0;
}
.main-nav__item:hover .main-nav__link{ text-decoration: underline; }
.main-nav__item .chev{
  width:8px;height:5px;
  transition: transform .2s;
}
.main-nav__item.open .chev,
.main-nav__item:hover .chev{ transform: rotate(180deg); }

/* Выпадающий список — как в макете «при наведении» (node 1:11340):
   стеклянная плашка 360px строго ПОД пилюлей меню, не наезжая на неё.
   Отсчёт от вертикального центра пункта (= центр пилюли высотой 70):
   50% + 35px до низа пилюли + 8px зазор. */
.main-nav__dropdown{
  position:absolute;
  top: calc(50% + var(--header-h) / 2 + 14px);
  left:0;
  width: 360px;
  background: rgba(169,169,169,0.55);
  border-radius: 8px;
  opacity:0;
  visibility:hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 50;
}
/* Размытие включается только у раскрытого списка.
   Закрытый список невидим, но пока на нём висел backdrop-filter, он
   оставался «backdrop root» внутри пилюли, у которой размытие своё.
   Chromium растягивает область размытия родителя на такого потомка и
   пересобирает её на каждом кадре прокрутки — под пилюлей периодически
   пробегала светлая полоса. Та же причина описана выше у мостика между
   пунктом и списком. */
.main-nav__item:hover .main-nav__dropdown,
.main-nav__item.open .main-nav__dropdown{
  backdrop-filter: blur(14px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.1);
}
/* скругления у крайних пунктов (overflow:hidden нельзя — обрежет мостик) */
.main-nav__dropdown a:first-child{ border-radius:8px 8px 0 0; }
.main-nav__dropdown a:last-child{ border-radius:0 0 8px 8px; }
/* Невидимый мостик между пунктом и плашкой: курсор не теряет ховер,
   пока едет от пункта меню вниз к списку.
   ВАЖНО: мостик живёт на пункте (.main-nav__item), а не на плашке.
   У плашки backdrop-filter, и в Chromium область размытия растягивается
   на выступающих потомков — мостик-псевдоэлемент плашки проявлялся
   светлой полосой между меню и списком. Появляется только при наведении,
   чтобы полоса под пилюлей не открывала меню сама по себе. */
.main-nav__item:hover::after,
.main-nav__item.open::after{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:360px;
  height:calc(var(--header-h) / 2 + 14px);
}
.main-nav__item:hover .main-nav__dropdown,
.main-nav__item.open .main-nav__dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.main-nav__dropdown a{
  display:block;
  padding: 14px;
  color:#fff;
  font-family:'Inter',Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.4;
  white-space:normal;
  transition: background .2s;
}
.main-nav__dropdown a:hover{ background: rgba(255,255,255,0.39); }

/* =========================== МОБИЛЬНОЕ МЕНЮ (ГАМБУРГЕР) ===========================
   Общая логика для страниц без .page-banner (главная): открытие/закрытие, drill-down,
   анимация «шторка». Страницы с .page-banner используют свою версию этих правил
   в news.css (там же — другой фон панели); здесь фон панели не меняется —
   те же значения, что и у самой пилюли (.nav-pill) в закрытом состоянии. */
.main-nav__list{ display:contents; }
.mobile-menu-header, .mobile-menu-contact, .main-nav__dropdown-back{ display:none; }

.mobile-menu-toggle{
  display:none;
  background:none; border:none; padding:0; cursor:pointer;
  width:22px; height:16px; flex-shrink:0;
  align-items:center; justify-content:center;
}
.mobile-menu-toggle img{ width:22px; height:16px; display:block; }

@media (max-width: 1024px){
  .site-header .nav-pill .brand__text{ font-size:12px; }
  .mobile-menu-toggle{ display:flex; }
  .site-header .nav-pill{ gap:20px; }

  .site-header .nav-pill .main-nav{
    display:none;
    position:absolute; top:calc(100% + 12px); left:24px;
    flex-wrap:wrap;
    width:max-content; max-width:calc(100vw - 48px);
    background: rgba(169,169,169,0.55);
    backdrop-filter: blur(14px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.1);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius:20px;
    padding:16px 24px;
    gap:16px 24px;
    z-index:50;
  }
  .site-header .nav-pill.mobile-nav-open .main-nav{ display:flex; }
}

/* 1025–1439: полная десктопная навигация физически не помещается в строку.
   Оставляем компактную шапку с бургером до ширины, на которой все пункты,
   телефон и иконки уже входят без обрезания. Диапазон изолирован: макеты
   1024 и 1440+ не меняются. */
@media (min-width: 1025px) and (max-width: 1439px){
  .site-header .brand__text{ font-size:12px; }
  .site-header .mobile-menu-toggle{ display:flex; }
  .site-header .nav-pill{ gap:20px; flex:0 1 auto; min-width:0; }
  .site-header .brand{ min-width:0; }
  .site-header .header-side{ flex:0 0 auto; padding:10px 0; gap:20px; }
  .site-header .header-icons{ gap:20px; }

  .site-header .nav-pill .main-nav{
    display:none;
    position:absolute;
    top:calc(100% + 12px);
    left:24px;
    flex-wrap:wrap;
    width:max-content;
    max-width:calc(100vw - 48px);
    background:rgba(169,169,169,.55);
    backdrop-filter:blur(14px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.1);
    border:1px solid rgba(255,255,255,.5);
    border-radius:20px;
    padding:16px 24px;
    gap:16px 24px;
    z-index:50;
  }
  .site-header .nav-pill.mobile-nav-open .main-nav{ display:flex; }
}

@media (max-width: 700px){
  /* Справа скрываем телефон/язык/иконки — иначе не помещаются рядом с растянутой на всю ширину плашкой */
  .site-header .header-side{ display:none; }
}

@media (max-width: 599px), (min-width: 600px) and (max-width: 767px) and (min-height: 600px){
  .site-header{ top:14px; }
  .site-header__inner{ width: calc(100% - 28px); }
  /* Плашка — единый блок: строка «бургер + лого» остаётся на месте, а список
     раскрывается и сворачивается внутри неё. Панель в потоке (не fixed):
     backdrop-filter на .nav-pill делает её containing block для fixed-потомков,
     из-за чего панель прыгала вбок и меняла ширину в момент закрытия. */
  .site-header .nav-pill{
    width:100%;
    flex-wrap:wrap;
    align-items:center;
    height:auto;
    min-height:70px;
    /* 9px, а не 10px: строка = лого 50 + 2*9 + 2 рамки = ровно 70px */
    padding:9px 24px;
    row-gap:0;
    /* Рамка сплошная белая, как на внутренних страницах (там её задаёт
       .page-banner .nav-pill). Фон при этом не меняем — на главной он свой. */
    border-color:#fff;
  }

  /* Бургер превращается в крестик, оставаясь ровно на своём месте */
  .site-header .nav-pill .mobile-menu-toggle{ position:relative; }
  .site-header .nav-pill.mobile-nav-open .mobile-menu-toggle img{ opacity:0; }
  .site-header .nav-pill.mobile-nav-open .mobile-menu-toggle::before,
  .site-header .nav-pill.mobile-nav-open .mobile-menu-toggle::after{
    content:'';
    position:absolute; left:50%; top:50%;
    width:20px; height:2px;
    background:#fff; border-radius:2px;
  }
  .site-header .nav-pill.mobile-nav-open .mobile-menu-toggle::before{
    transform: translate(-50%,-50%) rotate(45deg);
  }
  .site-header .nav-pill.mobile-nav-open .mobile-menu-toggle::after{
    transform: translate(-50%,-50%) rotate(-45deg);
  }

  .site-header .nav-pill .main-nav{
    display:flex;
    position:static;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    flex-basis:100%;
    width:100%;
    max-width:none;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
    border:none;
    border-radius:0;
    gap:20px;
    padding:0;
    overflow:hidden;
    max-height:0;
    opacity:0;
    margin-top:0;
    clip-path:none;
    pointer-events:none;
    transition: max-height .35s ease-in, opacity .2s ease-in, margin-top .35s ease-in;
  }
  .site-header .nav-pill.mobile-nav-open .main-nav{
    max-height:520px;
    opacity:1;
    margin-top:14px;
    pointer-events:auto;
    transition: max-height .45s cubic-bezier(0.16,1,0.3,1),
                opacity .3s ease-out .05s,
                margin-top .45s cubic-bezier(0.16,1,0.3,1);
  }
  .site-header .nav-pill .main-nav .main-nav__item{
    width:100%;
    justify-content:space-between;
  }
  .site-header .nav-pill .main-nav .main-nav__item .chev{
    transform: rotate(-90deg);
  }

  /* Дублирующая шапка панели не нужна — крестик и лого плашки остаются на месте */
  .mobile-menu-header{ display:none; }
  .mobile-menu-close{
    background:none; border:none; padding:0; cursor:pointer;
    width:22px; height:22px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .mobile-menu-close svg{ width:16px; height:16px; }
  .mobile-menu-brand{ min-width:0; }
  .mobile-menu-brand .brand__text{ font-size:12px; }

  .main-nav__list{
    display:flex; flex-direction:column; width:100%;
    gap:20px;
    border-top:1px solid #ddd;
    padding-top:24px;
  }
  .site-header .nav-pill .main-nav.has-open-submenu .main-nav__list{
    border-top:none;
    padding-top:0;
  }

  .mobile-menu-contact{
    display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%;
    margin-top:20px;
  }
  .mobile-menu-phone{ font-size:16px; color:#fff; }
  /* Переключатель языка — тот же компонент .lang-switch, что в шапке.
     Его список раскрывается В ПОТОКЕ: панель имеет overflow:hidden, и
     абсолютный выпадающий список был бы срезан. */
  .mobile-menu-lang{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
  .site-header .nav-pill .main-nav .lang-switch__list{
    position:static; transform:none; display:none;
    min-width:0; margin-top:23px;
    /* в потоке кнопка уже стоит выше — рамка и большой верхний отступ не нужны */
    padding:0; border:none; border-radius:0; background:none;
  }
  .site-header .nav-pill .main-nav .lang-switch.open .lang-switch__list{
    display:flex; opacity:1; visibility:visible; transform:none;
  }
  .mobile-menu-icons{ display:flex; align-items:center; gap:24px; }
  .mobile-menu-icons .icon-btn{ display:flex; color:#fff; }

  /* Подменю — drill-down внутри той же панели */
  .site-header .nav-pill .main-nav .main-nav__dropdown{
    display:none;
    position:static;
    opacity:1; visibility:visible; transform:none;
    width:100%; max-width:none;
    background:none;
    border-radius:0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:none;
    flex-direction:column;
    gap:20px;
    border-top:1px solid #fff;
    padding-top:24px;
  }
  .site-header .nav-pill .main-nav .main-nav__item.open .main-nav__dropdown{
    display:flex;
  }
  .site-header .nav-pill .main-nav .main-nav__item.open .main-nav__link,
  .site-header .nav-pill .main-nav .main-nav__item.open > .chev{
    display:none;
  }
  .site-header .nav-pill .main-nav.has-open-submenu .main-nav__list .main-nav__item:not(.open){
    display:none;
  }
  .site-header .nav-pill .main-nav.has-open-submenu .mobile-menu-contact{
    display:none;
  }

  .main-nav__dropdown-back{
    display:flex; align-items:center; gap:10px; width:100%;
    background:none; border:none; padding:0; cursor:pointer;
  }
  .site-header .nav-pill .main-nav .main-nav__dropdown-back .chev-left{
    transform: rotate(90deg);
  }
  .main-nav__dropdown-back span{ font-size:16px; color:#fff; }

  .main-nav__dropdown-links{
    display:flex; flex-direction:column; width:100%;
    border-top:1px solid #fff;
  }
  .main-nav__dropdown a{ padding:14px; }
}

.header-side{
  background: transparent;
  backdrop-filter: none;
  border: none;
  height: var(--header-h);
  display:flex;
  align-items:center;
  gap:30px;
  padding: 10px 24px;
  white-space:nowrap;
}
.header-phone{ font-size:16px; color:#fff; transition:color .2s; }
/* По макету ховера: телефон краснеет и подчёркивается */
.header-phone:hover{ color:var(--red-hover); text-decoration:underline; cursor:pointer; }
.lang-switch{ position:relative; z-index:40; }
.lang-switch__btn{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:0;                        /* иначе браузерные 1px 6px раздвигают строку */
  background:none; border:none; color:#fff; font-size:16px; line-height:1.4;
}
.lang-switch__btn img.chev{ width:8px;height:5px; flex-shrink:0; transition: transform .2s; }
.lang-switch.open .chev,
.lang-switch:hover .chev{ transform: rotate(180deg); }
.flag-ru{
  width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;
  display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.4);
}
.flag-ru span{ flex:1; }
.flag-ru span:nth-child(1){ background:#fff; }
.flag-ru span:nth-child(2){ background:#0039A6; }
.flag-ru span:nth-child(3){ background:#D52B1E; }
/* Юнион Джек на градиентах — как и триколор, рисуется средствами CSS, без SVG.
   Слои идут сверху вниз: красный прямой крест → белый прямой крест →
   красные диагонали → белые диагонали → синий фон. */
.flag-gb{
  width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;
  position:relative; border:1px solid rgba(255,255,255,.4);
  background-color:#00247d;
  background-image:
    linear-gradient(#cf142b,#cf142b),
    linear-gradient(#cf142b,#cf142b),
    linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff),
    linear-gradient(45deg,  transparent 46.5%, #cf142b 46.5%, #cf142b 53.5%, transparent 53.5%),
    linear-gradient(-45deg, transparent 46.5%, #cf142b 46.5%, #cf142b 53.5%, transparent 53.5%),
    linear-gradient(45deg,  transparent 42%, #fff 42%, #fff 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #fff 42%, #fff 58%, transparent 58%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:
    100% 22%,  /* красная горизонталь */
    22% 100%,  /* красная вертикаль */
    100% 40%,  /* белая горизонталь */
    40% 100%,  /* белая вертикаль */
    100% 100%, 100% 100%,
    100% 100%, 100% 100%;
}
/* Раскрытое меню языка (макет node 1:48176): не отдельная плашка под кнопкой,
   а один контейнер 30px радиуса, внутри которого первой строкой стоит сама
   кнопка. Поэтому список позиционируем от кнопки со сдвигом на её паддинги
   (24 по бокам, 23 сверху) и кладём под кнопку по z-index. */
.lang-switch__list{
  position:absolute;
  top:-24px;                        /* 23 паддинг + 1 рамка */
  left:-25px;                       /* 24 паддинг + 1 рамка */
  z-index:1;
  min-width:calc(100% + 50px);
  display:flex; flex-direction:column; gap:23px;
  padding:70px 24px 23px;           /* 23 + 24 (строка кнопки) + 23 зазор */
  border:1px solid #fff;
  border-radius:30px;
  background:rgba(169,169,169,.4);
  opacity:0; visibility:hidden;
  transition: opacity .2s, visibility .2s;
}
.lang-switch.open .lang-switch__list,
.lang-switch:hover .lang-switch__list{ opacity:1; visibility:visible; }
.lang-switch__list button{
  display:flex; align-items:center; gap:10px;
  padding:0; background:none; border:none; width:100%;
  color:var(--red); font-size:16px; line-height:1.4; white-space:nowrap;
}
.lang-switch__list button:hover{ color: var(--red-hover); }
/* Текущий язык уже показан в самой кнопке — в списке остаются только другие */
.lang-switch__list button.is-current{ display:none; }

.header-icons{ display:flex; align-items:center; gap:30px; }
.icon-btn{
  background:none; border:none; padding:0; line-height:0;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn img{ display:none; }
.icon-btn svg.ico{
  display:block;
  color:#FFFFFF;
  transition: color .2s;
}
/* Точные размеры из макета Figma (node 15:20010) */
.icon-btn.is-eye svg.ico{ width:29px; height:18px; }
.icon-btn.is-search svg.ico{ width:22px; height:22px; }
.icon-btn.is-user svg.ico{ width:20px; height:24px; }
/* Иконки «Личный кабинет», «Поиск», «Версия для слабовидящих» при наведении меняют цвет на #FF3B43 */
.icon-btn:hover svg.ico{ color:#FF3B43; }

/* =========================== RIGHT ICON RAIL =========================== */
.side-rail{
  position: fixed;
  right: 0;
  /* y=406 по макету «Главная 1» (node 1:23879, Frame 135) */
  top: 406px;
  z-index: 400;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  /* всё по node 1:23879: 10/14 паддинги, шаг 20, фон 40% чёрного,
     размытие 12,5 и скругление 10px только у левых углов */
  gap:20px;
  padding:14px 10px;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  border-radius: 10px 0 0 10px;
  /* overflow:hidden убран: он срезал всплывающие подписи слева от панели */
}
.side-rail a{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
/* Иконки вставлены инлайном: в файлах заливка задана как fill="currentColor",
   а через url() (фоном или маской) SVG грузится отдельным документом, где
   currentColor не к чему привязать — фигуры выходили пустыми. Инлайн решает:
   цвет берётся из color самого элемента. */
.rail-ic{
  display:block;
  width:24px; height:24px;
  color:#D7DFE9;
  transition: color .2s;
}
/* Красным отмечен только активный раздел — фирменный #CD1F26.
   Наведение даёт более светлый оттенок и гаснет, когда курсор уходит. */
.side-rail a.active .rail-ic{ color: var(--red); }
.side-rail a:hover .rail-ic{ color: var(--red-hover); }
/* Подпись-плашка слева от иконки (node I1:23880;2067:16528):
   заливка #475569, радиус 2, паддинг 7, текст 12/20 */
.side-rail a .tip{
  position:absolute; right:34px; top:50%; transform:translateY(-50%);
  background:#475569;
  color:#fff; font-size:12px; line-height:20px; white-space:nowrap;
  padding:7px; border-radius:2px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.side-rail a:hover .tip{ opacity:1; }

/* Панель занимает 406+264=670px сверху. На низком окне это уводит её за край,
   поэтому там возвращаем центрирование по высоте. */
@media (max-height: 700px){
  .side-rail{ top:50%; transform:translateY(-50%); }
}

@media (max-width: 1023px){
  .side-rail{ display:none; }
}

/* =========================== ОБЩИЕ ЭЛЕМЕНТЫ =========================== */
.section{ position:relative; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--red);
  color:#fff;
  border:1px solid var(--red);
  border-radius: var(--radius-s);
  padding:14px 24px;
  font-size:14px; font-weight:500;
  white-space:nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-arrow{ width:10px;height:10px; transition: filter .2s; }
/* Ховер по макету «при наведении»: инверсия — белый фон, красные текст/стрелка */
.btn:hover{ background:#fff; color: var(--red); }
.btn:hover .btn-arrow{
  filter: brightness(0) saturate(100%) invert(16%) sepia(85%) saturate(5300%) hue-rotate(352deg) brightness(93%) contrast(96%);
}

/* =========================== FOOTER =========================== */
.site-footer{
  background:#fff;
  border-top:1px solid var(--border);
  padding: 25px var(--page-pad) 24px;
}
.site-footer__inner{
  max-width: var(--content-max);
  margin:0 auto;
  display:flex; align-items:center; flex-wrap:wrap; gap:32px; justify-content:space-between;
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
/* 48×55 — высота строки подвала 55px, вместе с 41/40 даёт 136px (Figma node 15:23999) */
.footer-brand img{ width:48px;height:55px; }
.footer-brand__text{ font-size:10px; color:var(--text-body); line-height:1.6; }
.footer-contact{ display:flex; flex-direction:column; gap:4px; }
.footer-item{ display:flex; align-items:center; gap:8px; font-size:10px; color:var(--text-body); }
.footer-item img{ width:14px;height:14px; }
.footer-social{ display:flex; align-items:center; gap:8px; }
.footer-social a{ transition: opacity .2s, filter .2s; }
.footer-social a:hover img{ filter: brightness(0) saturate(100%) invert(24%) sepia(84%) saturate(3000%) hue-rotate(345deg) brightness(97%) contrast(93%); }
.footer-social img{ height:12px; width:auto; display:block; }
.footer-legal{ display:flex; align-items:flex-start; gap:48px; }
.footer-links{ display:flex; flex-direction:column; gap:0; }
.footer-link{ font-size:10px; color:var(--text-body); transition:color .2s; }
.footer-link:hover{ color: var(--red-hover); }
.footer-dev{ font-size:10px; color:var(--text-body); display:flex; flex-direction:column; }
.footer-dev a{ color: var(--red); transition:color .2s; }
.footer-dev a:hover{ color: var(--red-hover); }
.footer-row2, .footer-contact-group{ display:contents; }

@media (max-width: 900px){
  .site-footer__inner{ flex-direction:column; align-items:flex-start; }
}

/* ---- Свыше 1443px: подвал точно по макету (Figma node 15:18613, "9. Footer") ---- */
@media (min-width: 1444px){
  .site-footer{ padding: 41px var(--page-pad) 40px; }
  .footer-brand__text{ font-size:12px; line-height:16px; }
  .footer-item{ font-size:12px; line-height:20px; }
  .footer-link{ font-size:12px; line-height:20px; }
  .footer-dev{ font-size:12px; line-height:16px; display:block; }
  /* Разворачиваем вложенные группы в один горизонтальный ряд, как в макете:
     логотип | телефон | email | соцсети | Карта сайта | Политика | Создание сайта */
  .footer-row2, .footer-contact-group, .footer-contact, .footer-legal, .footer-links{ display:contents; }
}

/* ---- 1430–1443px: подвал точно по макету (Figma node 15:23999, "9. Footer") ----
   Отличие от версии ≥1444px — «Создание сайта» / «Новые технологии» идут в два ряда
   по правому краю, без дефиса-разделителя. */
@media (min-width: 1430px) and (max-width: 1443px){
  .site-footer{ padding: 41px var(--page-pad) 40px; }
  .footer-brand__text{ font-size:12px; line-height:16px; }
  .footer-item{ font-size:12px; line-height:20px; }
  .footer-link{ font-size:12px; line-height:20px; }
  .footer-row2, .footer-contact-group, .footer-contact, .footer-legal, .footer-links{ display:contents; }

  .footer-dev{ font-size:12px; line-height:16px; text-align:right; }
  .footer-dev__sep{ display:none; }
  .footer-dev a{ display:block; }
}

/* ---- 600–1024px (планшет): подвал точно по макету (Figma node 15:19023 / 15:16677, "9. Footer") ----
   Телефон+email и «Карта сайта»/«Политика» остаются сгруппированными в столбик (как в базовых
   стилях), а не разворачиваются в общую строку. «Создание сайта» — два ряда без дефиса, по левому краю. */
@media (min-width: 768px) and (max-width: 1024px), (min-width: 600px) and (max-width: 767px) and (max-height: 599px){
  .site-footer{ padding: 25px 60px 24px; }
  .site-footer__inner{ flex-direction:row; flex-wrap:nowrap; gap:16px; }
  .footer-legal{ display:contents; }
  .footer-dev__sep{ display:none; }
  .footer-contact{ gap:0; }
  .footer-item{ line-height:20px; }
  /* Лого 38×43 — строка подвала 43px, вместе с 25/24 даёт 92px (Figma node 15:19023) */
  .footer-brand img{ width:38px;height:43px; }
  /* 3 строки по 14px = 42px, чтобы текст не перерастал логотип и не тянул строку до 48px */
  .footer-brand__text{ line-height:14px; }
}

/* ≤599px: размер логотипа в подвале оставляем прежним */
@media (max-width: 599px), (min-width: 600px) and (max-width: 767px) and (min-height: 600px){
  .footer-brand img{ width:44px;height:50px; }
}

/* 1025–1600px: в макете «1440» подвал — одна строка высотой 55px. Сумма элементов
   (~1128px) с зазором 32px требует 1320px, а реальная ширина при полосе прокрутки —
   1305px, из-за чего «Создание сайта» переносилось на второй ряд. Уменьшаем зазор. */
@media (min-width: 1025px) and (max-width: 1600px){
  .site-footer__inner{ gap:24px; }
}

/* =========================== MODAL =========================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,15,25,.72);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{
  background:#fff; border-radius: var(--radius-m); padding:32px;
  max-width:480px; width:100%; color:var(--text-dark);
  transform: scale(.95); transition: transform .25s;
  max-height:80vh; overflow:auto;
}
.modal-overlay.open .modal{ transform:scale(1); }
.modal h3{ font-size:22px; margin-bottom:20px; }
.modal-close{
  position:absolute; top:24px; right:24px;
  width:36px;height:36px; border-radius:50%; background:rgba(255,255,255,.15);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; border:none;
}
.modal-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-size:14px; }
.modal-row .dot{ width:10px;height:10px;border-radius:3px; margin-right:10px; display:inline-block; vertical-align:middle; }
.modal .btn{ width:100%; justify-content:center; margin-top:20px; }

/* lightbox (registry gallery) */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:1000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:8px; }
.lightbox-close{
  position:absolute; top:24px; right:24px; width:44px;height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; border:none; font-size:22px;
}

/* =========================== SCROLL PROGRESS / UTIL =========================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

@media (max-width: 640px){
  .section__title{ font-size:30px; }
  .header-phone{ display:none; }
}

/* =========================================================
   Тема шапки: над светлыми экранами текст и иконки тёмные
   (макет «при наведении»: на «Инвестируйте…» шапка серая с тёмным текстом).
   Класс on-light вешает js по положению скролла.
   ========================================================= */
.site-header .brand__text,
.site-header .main-nav__link,
.site-header .header-phone,
.site-header .lang-switch__btn,
.site-header .icon-btn svg.ico{ transition: color .3s ease; }
.site-header .nav-pill,
.site-header .header-phone-pill{ transition: background .3s ease, border-color .3s ease; }

.site-header.on-light .brand__text,
.site-header.on-light .main-nav__link,
.site-header.on-light .header-phone,
.site-header.on-light .lang-switch__btn{ color:#333; }
.site-header.on-light .icon-btn svg.ico{ color:#333; }
.site-header.on-light .main-nav__item .chev,
.site-header.on-light .lang-switch__btn img.chev,
.site-header.on-light .mobile-menu-toggle img{ filter:brightness(0) opacity(.75); }
.site-header.on-light .main-nav__dropdown{ background:rgba(255,255,255,.85); }
/* размытие — только у раскрытого, см. .main-nav__dropdown выше */
.site-header.on-light .main-nav__item:hover .main-nav__dropdown,
.site-header.on-light .main-nav__item.open .main-nav__dropdown{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.site-header.on-light .main-nav__dropdown a{ color:#333; }
.site-header.on-light .main-nav__dropdown a:hover{ background:rgba(0,0,0,.07); }
.site-header.on-light .lang-switch__list{ background:rgba(255,255,255,.85); border-color:#d5d5d5; }
/* ховеры остаются красными */
.site-header.on-light .header-phone:hover{ color:var(--red-hover); }
.site-header.on-light .icon-btn:hover svg.ico{ color:#FF3B43; }

/* ============================================================
   Ховеры по ТЗ (рис. 1.4): пункт второго уровня в выпадающем меню
   краснеет (#FF3B43), ссылка на разработчика в подвале подчёркивается,
   плашка правого бокового меню — как в макете (node 1:16159):
   #475569, паддинг 7, радиус 2, стрелка-указатель 5x9, 10px до иконки
   ============================================================ */
.main-nav__dropdown a{ transition: background .2s, color .2s; }
.main-nav__dropdown a:hover{ color: var(--red-hover); }
.footer-dev a:hover{ text-decoration: underline; }

.side-rail a .tip{
  /* 24 иконка + 10 зазор + 5 стрелка = 39px от правого края ссылки */
  right:39px;
}
.side-rail a .tip::after{
  content:'';
  position:absolute;
  left:100%; top:50%;
  width:5px; height:9px;
  transform:translateY(-50%);
  background:#475569;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}