* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.6;

    color: #000;
    scroll-behavior: smooth;
    background-color: rgba(238, 252, 255, 1);
}

body {
    margin: 0;
    padding: 0;
}

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

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


/* === Construction Hero === */
:root{
  --ch-bg:#ffffff;
  --ch-ink:#0590fa;
  --ch-accent:#fa9e00;       /* оранжевый акцент */
  --ch-muted:#6b7280;
  --ch-surface:#02289c;
  --ch-chip:#eef3f2;
  --ch-radius:18px;
  --ch-shadow:0 10px 30px rgba(0,0,0,.08);
--side-padding: 5vw;

  /* Настройки разделителя (можно менять под макет) */
  --ch-divider-color: var(--ch-accent);
  --ch-divider-width: 2px;        /* толщина линии */
  --ch-divider-height: 80px;      /* длина линии (высота) */
}

.row>* {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.site-header {

    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eefcff;

}


.logo-img {
    max-height: 50px;
}

.main-nav .nav-link {
    font-family: "Montserrat", sans-serif;
    margin-left: 30px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    transition: color .2s ease-in-out;
}

.main-nav .nav-link:hover {
     color: var(--ch-accent);
}

.burger-btn {
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu .nav-link {
    font-weight: 500;
    color: #000;
    text-decoration: none;
    font-size: 1rem;
}

.mobile-menu .nav-link:hover {
    text-decoration: underline;
}


/* ========== Dropdown (Языковой переключатель) ========== */

/* Родитель дропдауна */
.dropdown {
    position: relative;
    margin-left: 30px;
}

/* Иконка-флаг */
.lang-flag-icon {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Кнопка переключения языка */
.lang-switcher .btn {
    width: 38px;
    height: 40px;
    padding: 0;
    border: none;
    background-color: transparent;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.lang-switcher .btn:hover {

    transform: scale(1.05);
}

/* Выпадающее меню */
.lang-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    z-index: 1000;
    min-width: 120px;
    padding: 8px;
    list-style: none; /* Убираем маркеры списка */
    padding-left: 0;
    background-color: transparent;
    border: none;
}

/* Показывать при открытии */
.dropdown.show .lang-dropdown-menu {
    display: block;
}

/* Элемент внутри меню */
.lang-dropdown-menu .dropdown-item {
    display: flex;
    justify-content: center;
    border: none;
    align-items: center;
    padding: 6px 5px;
    background-color: #ffffff;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.lang-dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa;
}

.lang-flag-icon:hover {
    transform: scale(1.05);
}







/* === Offcanvas burger (right overlay) === */
.advanced-burger{
  position: relative;
  width: 5vw;
  border: 0; border-radius: 12px;

  display: grid; place-items: center;
  transition: transform .15s ease, filter .2s ease, background .2s ease;
}
.advanced-burger:active{ transform: scale(.98); }
.advanced-burger .ab-bar{
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--ch-ink);
  display: block; position: relative;
  transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.advanced-burger .ab-bar:nth-child(1){ top: -6px; }
.advanced-burger .ab-bar:nth-child(2){ }
.advanced-burger .ab-bar:nth-child(3){ bottom: -6px; }

/* Состояние: открыт — превращаемся в крестик */
.advanced-burger.is-open .ab-bar:nth-child(1){
  top: 0; transform: rotate(45deg);
}
.advanced-burger.is-open .ab-bar:nth-child(2){
  opacity: 0; transform: translateX(8px);
}
.advanced-burger.is-open .ab-bar:nth-child(3){
  bottom: 0; transform: rotate(-45deg);
}

/* Корень и фон */
.offcanvas-root{
  position: fixed; inset: 0; z-index: 1200;
}
.offcanvas-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .25s ease;
}

/* Панель */
.offcanvas-panel{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(92vw, 520px);
  background: color-mix(in oklab, var(--ch-surface) 96%, #000 4%);
  color: var(--ch-ink);
  transform: translateX(100%);
  box-shadow: -20px 0 60px rgba(0,0,0,.25);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  padding: clamp(14px,2.5vw,22px);
}

/* Видимое состояние (модификатор вешается на root) */
.offcanvas-root.is-open .offcanvas-backdrop{ opacity: 1; }
.offcanvas-root.is-open .offcanvas-panel{ transform: translateX(0); }

/* Кнопка закрытия */
.offcanvas-close{
  justify-self: end;
  width: 40px; height: 40px; border-radius: 999px; border: 0;
  background: color-mix(in oklab, var(--ch-ink) 20%, transparent 80%);
  color: #fff; display: grid; place-items: center;
  transition: transform .12s ease, filter .2s ease;
}
.offcanvas-close:hover{ transform: translateY(-1px); }

/* Навигация */
.offcanvas-nav{
  display: flex; flex-direction: column; gap: 12px;
  padding: 6px 4px 14px;
}
.off-link{
  display: block;
  padding: 14px 16px;
  text-decoration: none; border-radius: 14px;
  font-weight: 700; letter-spacing: .02em;
  color: var(--ch-ink);
  background: #fff;
  border: 2px solid rgba(250,158,0,.22);
  transition: border-color .2s ease, transform .15s ease;
}
.off-link:hover{ border-color: var(--ch-accent); transform: translateY(-1px); }

/* Аккордеон */
.off-accordion summary{ list-style: none; cursor: pointer; }
.off-accordion summary::-webkit-details-marker{ display:none; }
.off-accordion[open] > summary{ border-color: var(--ch-accent); }
.off-sub{ padding: 8px 10px 6px 10px; display: grid; gap: 8px; }
.off-sublink{
  display: block; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,1);
  text-decoration: none; color: var(--ch-ink); font-weight: 600;
  border: 1px solid rgba(0,0,0,.06);
}

/* Языки */
.off-lang{ margin-top: 6px; }
.off-lang-label{ display:block; font-weight:700; margin-bottom: 8px; color: #ffffff; }
.off-lang-row{ display:flex; gap: 8px; flex-wrap: wrap; }
.off-lang-btn{
  width: 42px; height: 42px; border-radius: 999px; border: 0;
  background: #fff; display:grid; place-items:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
.off-lang-btn img{ width: 26px; height: 26px; border-radius: 50%; display:block; }

/* CTA */
.off-cta{ padding-top: 8px; }
.off-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width: 100%;
  padding: 12px 20px; border-radius: 999px;
  background: var(--ch-accent); color:#fff; font-weight:700; text-decoration:none;
  box-shadow: 0 10px 24px rgba(250,158,0,.25);
  transition: transform .15s ease, filter .2s ease;
}
.off-btn:hover{ transform: translateY(-1px); }

/* Блокируем прокрутку подложки, когда меню открыто */
html.offcanvas-lock, body.offcanvas-lock{ overflow: hidden; }

/* Доступность: без анимаций */
@media (prefers-reduced-motion: reduce){
  .offcanvas-backdrop, .offcanvas-panel,
  .advanced-burger .ab-bar{ transition: none !important; }
}










/* ===== Newsletter ===== */
.newsletter{
  position: relative;
  background: var(--ch-bg);
  padding: clamp(40px,6vw,110px) 0;
  overflow: hidden;
}

.nl-shell{
  width: 100%;
  padding: 0 var(--side-padding);
  margin-inline: auto;
  text-align: center;
}

.nl-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--ch-muted); font-size:.95rem; margin-bottom:10px; position:relative;
}
.nl-eyebrow::before{
  content:""; width:24px; height:2px; border-radius:2px; background: var(--ch-accent);
}

.nl-title{
  font-family:"Montserrat",sans-serif; font-weight:700; margin:0 0 18px;
  color: var(--ch-accent ); font-size: clamp(28px,3vw,42px); line-height:1.15;
}
.nl-title .accent{ color: var(--ch-ink); display:block; }

/* form */
.nl-form{ max-width: 820px; margin: 0 auto; }
.nl-inputwrap{
  display:flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid rgba(2,40,156,.08);
  border-radius: 999px;
  padding: 8px;
  box-shadow: var(--ch-shadow);
}
.nl-ico{
  width: 42px; height: 42px; border-radius:50%;
  display:grid; place-items:center;
  color: var(--ch-surface);
  background: rgba(2,40,156,.06);
  flex: 0 0 42px;
}
.nl-form input[type="email"]{
  flex:1 1 auto; min-width: 0;
  border: none; outline: none;
  padding: 12px 12px;
  background: transparent;
  font: inherit; color: #111827;
}
.nl-form input[type="email"]::placeholder{ color:#9ca3af; }

.nl-btn{
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 0; border-radius: 999px;
  font-weight: 800; cursor: pointer;
  background: var(--ch-accent); color:#fff;
  box-shadow: 0 10px 24px rgba(250,158,0,.25);
  transition: transform .15s ease, filter .2s ease;
}
.nl-btn:hover{ transform: translateY(-1px); filter: brightness(.95); }

.nl-error{ display:block; margin-top:8px; color:#c62828; }

/* messages */
.nl-messages{ max-width:820px; margin: 0 auto 10px; }
.nl-msg{ padding:10px 14px; border-radius:12px; }
.nl-msg.success{ background:#ecfdf5; color:#065f46; }
.nl-msg.error{   background:#fef2f2; color:#991b1b; }

/* decor */
.nl-decor{ position:absolute; pointer-events:none; user-select:none; opacity:.95; }
.nl-decor--left{ left: 0; top: 0; height: 140px; transform: translateY(-10%); }
.nl-decor--right{ right: 0; bottom: -8px; height: clamp(120px, 20vw, 180px); }

/* responsive */
@media (max-width: 640px){
  .nl-inputwrap{ padding: 6px; }
  .nl-ico{ display:none; }
  .nl-btn{ padding: 12px 16px; }
  .nl-decor--left{ height: 90px; }
  .nl-decor--right{ height: 120px; }
}



/* ===== Custom Team Dropdown ===== */
.nav-dropdown { position: relative; }
.team-trigger { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; padding: 0; }
.team-trigger:focus-visible { outline: 2px solid #fa9e00; outline-offset: 2px; border-radius: 6px; }

.team-menu{
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%) translateY(-6px);
  min-width: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  padding: 12px;
  border: 1px solid rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1000;
}
.team-menu::before{
  content:"";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.06);
  border-top: 1px solid rgba(0,0,0,.06);
  z-index: -1;
}

/* Open state */
.team-dropdown.is-open .team-menu{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Items */
.team-item{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
  background: #fafafa;
  border: 2px solid rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  color: inherit;
}
.team-item:hover,
.team-item:focus-visible{
  background: #eefcff;
  border-color: rgba(250,158,0,.5);
  box-shadow: 0 10px 24px rgba(250,158,0,.15);
  transform: translateY(-1px);
  outline: none;
}
.team-ico{
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--ch-accent); color: #fff;
}
.team-ico i{ font-size: 20px; line-height: 1; }
.team-text strong{ display:block; font-weight: 600; color: #000; font-size: .98rem; }
.team-text em{ display:block; font-style: normal; color: #5b618a; font-size: .85rem; }

/* Mobile behavior: full-width dropdown */
@media (max-width: 768px){
  .team-menu{
    left: 0; right: 0; transform: none;
    width: min(92vw, 560px);
    margin-inline: auto;
    grid-template-columns: 1fr;
  }
  .team-menu::before{ left: 24px; transform: rotate(45deg); }
}




/* ===== chevron rotate (desktop + mobile) ===== */

/* общие переходы */
.nav-dropdown .fa-chevron-down,
.off-accordion .off-acc-chevron {
  transition: transform .25s ease;
  will-change: transform;
}

/* ДЕСКТОП: вращение, когда меню открыто.
   is-open ставится вашим скриптом; дополнительно
   поддерживаем aria-expanded=true на кнопке. */
.nav-dropdown.is-open .fa-chevron-down,
.nav-dropdown .team-trigger[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* МОБАЙЛ (details): когда открыт, вращаем */
.off-accordion[open] .off-acc-chevron {
  transform: rotate(180deg);
}

/* по желанию — лёгкое выравнивание стрелок */
.team-trigger .fa-chevron-down {
  margin-left: .2rem;
  font-size: .9em;
}
.off-acc-chevron {
  margin-left: .2rem;
  font-size: .9em;
}





/* ===== Footer (screenshot-style) ===== */
.site-footer.v2{
  position: relative;
  background: var(--ch-surface); /* темно-синій */
  color:#fff;
  padding-top: clamp(24px,3.8vw,36px);
  padding-bottom: 0; /* оранжевая полоса сама имеет отступы */
  overflow:hidden;
}


.site-footer.v2::before{ top:0; }
.site-footer.v2::after{ bottom:64px; } /* прямо над оранжевой полосой */

/* шапка футера с заголовком и компактной кнопкой */
.ft-top{ padding:0 var(--side-padding); margin-inline:auto; }
.ft-title{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 clamp(18px,3vw,26px);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;
  font-size: clamp(22px,2.4vw,34px);
}
.ft-title-light{ color:#fff; }
.ft-title-accent{ color: var(--ch-accent); }

.ft-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:999px; text-decoration:none;
  background: var(--ch-accent); color:#fff; font-weight:600; font-size:.95rem;
  box-shadow: 0 10px 24px rgba(250,158,0,.25);
  transition: transform .15s ease, filter .2s ease;
}
.ft-cta:hover{ transform: translateY(-1px); filter: brightness(.96); }

/* сетка: Бренд — по центру Навигация — Контакты справа */
.ft-grid{
  padding:0 var(--side-padding); margin-inline:auto;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;   /* три равные колонки */
  gap: 40px;
  align-items:start;
}

/* базово: весь контент колонок — выравнивание влево */
.ft-col{
  min-width:0;
  justify-self: start;
  text-align: left;
}

/* ЛЕВО: бренд */
.ft-brand .ft-logo{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:#fff; font-weight:800;
    background-color: #ffffff;
    border-radius: var(--ch-radius);
    padding: 20px 15px;
    border: 1px solid var(--ch-accent);
    box-shadow: 0 8px 18px rgba(250,158,0,.48);
    position: relative;
    margin-bottom: 40px;
}

.ft-logo::before{
  content:""; position:absolute; inset:auto 0 0 0; height:22px;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 12px, transparent 12px 24px);
  opacity:.25;
}

.ft-brand .ft-logo img{ width:180px; height:auto; object-fit:contain; }
.ft-brand .ft-desc{ margin:.25rem 0 1rem; opacity:.9; max-width:34ch; }

/* соцсети */
.ft-socials{ list-style:none; padding:0; margin:0; display:flex; gap:10px; }
.ft-socials a{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  text-decoration:none; background:#fff; color: var(--ch-accent);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}

.ft-socials a i {
    font-size: 20px;
}

.ft-socials a:hover{ transform: translateY(-1px); background: var(--ch-accent); color:#fff; }

/* заголовки колонок */
.ft-h3{ margin:.2rem 0 .6rem; font-weight:600; color:#fff; font-size:1.05rem; }

/* ЦЕНТР: навигация — строго по центру футера */
.ft-nav{
  width: max-content;      /* ширина по содержимому */
  justify-self: center;    /* центр колонки */
}
.ft-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.ft-links a{
  color:#fff; text-decoration:none; opacity:.9;
  transition: opacity .2s ease, color .2s ease;
}
.ft-links a:hover{ color: var(--ch-accent); opacity:1; }

/* ПРАВО: контакты — прижаты к правому краю */
.ft-contacts{
  width: max-content;
  justify-self: end;       /* правая кромка контейнера */
}
.ft-contacts-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ft-contacts-list li{ display:flex; align-items:flex-start; gap:10px; }
.ft-contacts-list i{ color: var(--ch-accent);}
.ft-contacts-list a{ color:#fff; text-decoration:none; opacity:.9; }
.ft-contacts-list a:hover{ color: var(--ch-accent); opacity:1; }

/* нижняя оранжевая полоса */
.ft-bottombar{
  margin-top: clamp(18px,3vw,28px);
  background: var(--ch-accent);
  color:#fff;
  padding: 12px var(--side-padding);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.ft-bottombar p{ margin:0; font-weight:600; }
.ft-legal{ list-style:none; padding:0; margin:0; display:flex; gap:16px; }
.ft-legal a{ color:#fff; text-decoration:none; font-weight:600; opacity:.95; font-size: 14px;}
.ft-legal a:hover{ opacity:1; text-decoration:underline; }

/* адаптив */
@media (max-width: 991px){
  .ft-grid{ grid-template-columns: 1fr 1fr; }
  .ft-nav{ justify-self: start; }        /* в 2-колоночном режиме — обычное выравнивание */
  .ft-contacts{ justify-self: start; }   /* переносим вниз и выравниваем влево */
  .ft-col.ft-contacts{ order:3; grid-column:1 / -1; }
}
@media (max-width: 640px){
  .ft-title{ flex-direction:column; align-items:flex-start; gap:10px; }
  .ft-grid{ grid-template-columns: 1fr; }
  .ft-bottombar{ flex-direction:column; align-items:flex-start; }
}










/* ===== Scroll-to-top button ===== */
.scrolltop{
  position: fixed;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  z-index: 9999;

  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ch-accent);
  color: #fff;
  cursor: pointer;

  box-shadow: 0 12px 28px rgba(250,158,0,.28);
  transition: opacity .25s ease, transform .25s ease, filter .2s ease;

  /* скрыто по умолчанию */
  opacity: 0;
  transform: translateY(10px) scale(.92);
  pointer-events: none;
}

/* видимая стадия */
.scrolltop.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ховер/фокус */
.scrolltop:hover{ filter: brightness(.95); transform: translateY(-1px); }
.scrolltop:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(250,158,0,.22), 0 12px 28px rgba(250,158,0,.28);
}

/* легкое пульс-кільце, как в других елементах сайту */
.scrolltop .ring{
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75);
  animation: stPulse 1.6s ease-out infinite;
  pointer-events: none;
}


/* уважение к reduce motion */
@media (prefers-reduced-motion: reduce){
  .scrolltop{ transition: none; }
  .scrolltop .ring{ animation: none; display: none; }
}