/* =========================================================
   Rangli — section scrolling
   1. Переменные и база
   2. Каркас ленты (A: вертикальный переход)
   3. Горизонтальная группа (B)
   4. Появление контента (C)
   5. Хедер (D)
   6. Футер-шторка (E)
   7. Оффканвас-меню (F)
   8. Прелоадер (G)
   9. Фоны, типографика, кнопки, адаптив
   10. prefers-reduced-motion
   ========================================================= */

/* ---------- 1. Переменные и база ---------- */
:root{
  --fp_vh: 100vh;                 /* высота секции */
  --tf_section_duration: 1s;      /* длительность перехода между секциями */
  --tf_anim_dur: 1s;              /* длительность keyframes-анимаций контента */
  --tf_ss_offset: 0px;            /* компенсация фиксированных панелей */
  /* Фирменная палитра RANGLI BO'YOQ (из логотипа и этикетки) */
  --accent: #3d78c6;              /* синий из логотипа (красный по просьбе убран) */
  --accent-soft: rgba(61,120,198,.9);
  --accent-deep: #2f5fa0;         /* наведение на кнопках */
  --brand-red: #e0342a;           /* остаётся только в градиенте логотипа */
  --brand-orange: #f0921f;
  --brand-purple: #8c62a8;
  --brand-blue: #3d78c6;
  --brand-green: #4a9a45;
  --navy: #10283f;                /* тёмно-синий с банки */
  --navy-deep: #08151f;
  --light: #ececee;               /* фон логотипной заставки */
  --ink: #f7f7f7;
  --ink-dark: #16202b;
  --preloader-bg: #000;           /* в тон интро-ролика — переход без вспышки */
  --header-h: 76px;
  --sidemenu-w: 300px;
  --font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@supports (height:100dvh){ :root{ --fp_vh: 100dvh; } }

*,*::before,*::after{ box-sizing:border-box; }

html:has(.full-section-scrolling){ height:100%; overflow:hidden; }
html{ -webkit-text-size-adjust:100%; }

body.full-section-scrolling{
  height:100%;
  overflow:auto;
  overflow-y:hidden !important;
  scroll-behavior:auto;
  margin:0;
  overscroll-behavior:none;
  background:#101014;
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:rgba(255,255,255,.12); padding:.1em .35em; border-radius:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; left:8px; top:-100px; z-index:1000;
  background:#fff; color:#111; padding:10px 16px; border-radius:4px;
  transition:top .2s ease-in-out;
}
.skip-link:focus{ top:8px; }

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.fp-section-container:focus,
.fp-section-container:focus-visible{ outline:none; }

/* ---------- 2. Каркас ленты (A) ---------- */
.fp-track{
  position:relative;
  width:100%;
  height:var(--fp_vh);
  transform:translateY(0);
  transition:transform var(--tf_section_duration) ease;
  will-change:auto;
}
.fp-track.is-moving{ will-change:transform; }

.fp-section-container{
  position:relative;
  width:100%;
  height:var(--fp_vh);
  overflow:hidden;
  touch-action:none;
  display:flex;
  align-items:center;
  justify-content:center;
  content-visibility:auto;
  contain-intrinsic-height:100dvh;
}
.fp-section-container[data-done="1"]{
  content-visibility:visible;
  contain-intrinsic-height:auto;
}

/* Режим кроссфейда */
body.fp-effect-fade .fp-track{
  transition:none;
  transform:none !important;
  height:var(--fp_vh);
}
body.fp-effect-fade .fp-section-container{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--tf_section_duration,1.2s) ease;
  z-index:1;
}
body.fp-effect-fade .fp-section-container.active{
  opacity:1;
  pointer-events:auto;
  z-index:2;
}

/* Контентная строка секции */
.row_inner{
  position:relative;
  z-index:3;
  width:min(1160px, 90%);
  max-width:96%;
  height:calc(100% - var(--tf_ss_offset,0px));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:0;
  text-align:left;
}

/* ---------- 3. Горизонтальная группа (B) ---------- */
.fp-section-container-horizontal{
  display:block;
  padding:0;
}
.fp-section-container-inner{
  display:flex;
  width:100%;
  height:100%;
  transform:translateX(0);
  transition:transform var(--tf_section_duration) ease;
}
.fp-section-container-inner.is-moving{ will-change:transform; }

.fp-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Стрелки */
.fp-controlArrow{
  position:absolute;
  top:50%;
  z-index:20;
  width:48px; height:48px;
  margin-top:-24px;
  padding:0;
  border:0;
  cursor:pointer;
  background:rgba(0,0,0,.1);
  transition:background-color .3s ease-in-out, opacity .3s ease-in-out, visibility .3s;
}
.fp-controlArrow:hover{ background:rgba(0,0,0,.3); }
.fp-controlArrow::before{
  content:"";
  position:absolute;
  top:18px;
  width:12px; height:12px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
}
.fp-next{ right:24px; }
.fp-prev{ left:24px; }
.fp-next::before{ left:15px; transform:rotate(45deg); }
.fp-prev::before{ left:15px; transform:rotate(-135deg); }
.fp-controlArrow:hover::before{ animation:fp-arr .7s linear infinite; }
@keyframes fp-arr{
  0%{ left:15px } 50%{ left:10px } 100%{ left:15px }
}
.fp-controlArrow[disabled]{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* Точки-пагинация слайдов */
.fp-slidesNav{
  position:absolute;
  left:50%;
  bottom:56px;              /* выше плавающей кнопки футера */
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  margin:0; padding:0;
  list-style:none;
}
.fp-slidesNav li{
  width:14px; height:13px;
  margin:7px;
  display:flex; align-items:center; justify-content:center;
}
.fp-slidesNav button{
  display:block;
  width:6px; height:6px;
  padding:0;
  background:transparent;
  border:2px solid rgba(123,123,123,.77);
  border-radius:50%;
  cursor:pointer;
  transition:width .3s, height .3s, border-color .3s, color .3s ease-in-out;
}
.fp-slidesNav button:hover{ border-color:#fff; }
.fp-slidesNav li.active button{
  width:10px; height:10px;
  border-color:var(--accent-soft);
}

/* ---------- Глобальные точки навигации ---------- */
#fp-nav-wrap{
  position:fixed;
  inset:50% 5px auto auto;
  transform:translateY(-50%);
  z-index:60;
}
#fp-nav{ margin:0; padding:0; list-style:none; }
#fp-nav li{ width:14px; height:13px; margin:7px; display:flex; align-items:center; justify-content:center; }
#fp-nav button{
  display:block;
  width:6px; height:6px;
  padding:0;
  background:transparent;
  border:2px solid rgba(255,255,255,.6);
  border-radius:50%;
  cursor:pointer;
  transition:width .3s, height .3s, border-color .3s, background-color .3s;
}
#fp-nav button:hover{ border-color:#fff; background:rgba(255,255,255,.4); }
#fp-nav li.active button{
  width:10px; height:10px;
  border-color:var(--accent-soft);
}

/* ---------- 4. Появление контента (C) ---------- */
.wow{ visibility:hidden; animation-fill-mode:both; }
.animated{
  animation-duration:var(--tf_anim_dur, 1s);
  animation-fill-mode:both;
  animation-timing-function:ease;
}
.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY{ animation-duration:.75s; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeInLeft{
  from{ opacity:0; transform:translate3d(-100%,0,0) }
  to{ opacity:1; transform:translateZ(0) }
}
@keyframes fadeInRight{
  from{ opacity:0; transform:translate3d(100%,0,0) }
  to{ opacity:1; transform:translateZ(0) }
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translate3d(0,100%,0) }
  to{ opacity:1; transform:translateZ(0) }
}
@keyframes fadeInDown{
  from{ opacity:0; transform:translate3d(0,-100%,0) }
  to{ opacity:1; transform:translateZ(0) }
}
@keyframes fadeInUpBig{
  from{ opacity:0; transform:translate3d(0,2000px,0) }
  to{ opacity:1; transform:translateZ(0) }
}
@keyframes zoomIn{
  from{ opacity:0; transform:scale3d(.3,.3,.3) }
  50%{ opacity:1 }
  to{ opacity:1; transform:translateZ(0) }
}
@keyframes flipInX{
  from{ opacity:0; transform:perspective(400px) rotate3d(1,0,0,90deg); animation-timing-function:ease-in }
  40%{ transform:perspective(400px) rotate3d(1,0,0,-20deg); animation-timing-function:ease-in }
  60%{ opacity:1; transform:perspective(400px) rotate3d(1,0,0,10deg) }
  80%{ transform:perspective(400px) rotate3d(1,0,0,-5deg) }
  to{ opacity:1; transform:perspective(400px) }
}
@keyframes bounceIn{
  from,20%,40%,60%,80%,to{ animation-timing-function:cubic-bezier(.215,.61,.355,1) }
  0%{ opacity:0; transform:scale3d(.3,.3,.3) }
  20%{ transform:scale3d(1.1,1.1,1.1) }
  40%{ transform:scale3d(.9,.9,.9) }
  60%{ opacity:1; transform:scale3d(1.03,1.03,1.03) }
  80%{ transform:scale3d(.97,.97,.97) }
  to{ opacity:1; transform:scaleX(1) }
}
.fadeIn{ animation-name:fadeIn }
.fadeInLeft{ animation-name:fadeInLeft }
.fadeInRight{ animation-name:fadeInRight }
.fadeInUp{ animation-name:fadeInUp }
.fadeInDown{ animation-name:fadeInDown }
.fadeInUpBig{ animation-name:fadeInUpBig }
.zoomIn{ animation-name:zoomIn }
.flipInX{ animation-name:flipInX; backface-visibility:visible !important }
.bounceIn{ animation-name:bounceIn }

/* ---------- 5. Хедер (D) ---------- */
#headerwrap{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  padding:14px 32px;
  color:#fff;
  background-color:transparent;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:background-color .3s ease-in-out, color .3s ease-in-out,
             box-shadow .3s ease-in-out, min-height .3s ease-in-out,
             left .3s ease-in-out, padding .3s ease-in-out;
}
#headerwrap::before{
  content:"";
  position:absolute; inset:0;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity .3s ease-in-out;
  pointer-events:none;
}
#headerwrap.is-solid{
  background-color:rgba(0,0,0,.8);
  min-height:64px;
  padding:8px 32px;
  box-shadow:0 1px 20px rgba(0,0,0,.35);
}
#headerwrap.is-solid::before{ opacity:1; }

body.revealing-header #headerwrap{
  transition:transform .5s ease-in-out, opacity .5s ease-in-out,
             background-color .3s ease-in-out, box-shadow .3s ease-in-out;
}
#headerwrap.header_hidden{ opacity:0; transform:translateY(-100%); }

.header-inner{
  position:relative; z-index:2;
  width:100%;
  display:flex; align-items:center; gap:24px;
}
.site-logo{
  display:flex; align-items:center; gap:11px;
  font-weight:700; font-size:20px; letter-spacing:.14em;
  white-space:nowrap;
}
.site-mark{                              /* фирменный знак со старого сайта */
  width:auto; height:32px; flex:none;
  transition:height .3s ease-in-out;
}
#headerwrap.is-solid .site-mark{ height:28px; }
.site-name span{ color:#fff; }

/* Хедер поверх светлой секции */
#headerwrap.on-light{ color:var(--ink-dark); }
#headerwrap.on-light.is-solid{
  background-color:rgba(255,255,255,.82);
  box-shadow:0 1px 20px rgba(16,40,63,.12);
}
#headerwrap.on-light .menu-icon-inner,
#headerwrap.on-light .menu-icon-inner::before,
#headerwrap.on-light .menu-icon-inner::after{ background:var(--ink-dark); }
#headerwrap.on-light .lang{ border-color:rgba(22,32,43,.28); }
#headerwrap.on-light .lang.active{ background:var(--ink-dark); color:#fff; border-color:var(--ink-dark); }
body.on-light #fp-nav button{ border-color:rgba(22,32,43,.45); }
body.on-light #fp-nav button:hover{ border-color:var(--ink-dark); background:rgba(22,32,43,.25); }
body.on-light #fp-nav li.active button{ border-color:var(--accent); }
body.on-light .back-top.back-top-float{ background-color:rgba(22,32,43,.14); color:var(--ink-dark); }

.main-nav{ margin-left:auto; }
.main-nav ul{ display:flex; gap:26px; margin:0; padding:0; list-style:none; }
.main-nav a{
  font-size:15px;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease-in-out, opacity .3s ease-in-out;
  opacity:.85;
}
.main-nav a:hover{ opacity:1; border-color:currentColor; }
.main-nav a.active{ opacity:1; border-color:var(--accent); }

.main-nav .nav-soon{ position:relative; opacity:.55; cursor:default; }
.main-nav .nav-soon:hover{ border-color:transparent; opacity:.55; }
.nav-soon span{
  margin-left:6px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 5px;
  border:1px solid currentColor; border-radius:2px;
  opacity:.8;
}

/* Переключатель языка */
.lang-switch{ display:flex; gap:6px; }
.lang{
  min-width:38px; padding:5px 8px;
  font:inherit; font-size:13px; font-weight:600; letter-spacing:.06em;
  color:inherit; background:transparent; cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  border-radius:2px;
  transition:background-color .3s linear, color .3s linear, border-color .3s linear, opacity .3s linear;
}
.lang:hover{ border-color:currentColor; }
.lang.active{ background:#fff; color:var(--ink-dark); border-color:#fff; }
.lang:not(.active)[title]{ opacity:.6; }

/* Бургер — только там, где скрыто основное меню (см. медиазапрос ≤900px) */
.menu-icon{
  display:none;
  width:34px; height:34px;
  border:0; background:transparent; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.menu-icon-inner,
.menu-icon-inner::before,
.menu-icon-inner::after{
  display:block; width:24px; height:2px; background:#fff;
}
.menu-icon-inner{ position:relative; }
.menu-icon-inner::before,
.menu-icon-inner::after{
  content:""; position:absolute; left:0;
  transition:transform .7s;
}
.menu-icon-inner::before{ top:-7px; }
.menu-icon-inner::after{ top:7px; }
.menu-icon[aria-expanded="true"] .menu-icon-inner::before{ transform:translateY(7px) rotate(45deg); }
.menu-icon[aria-expanded="true"] .menu-icon-inner::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 6. Футер-шторка (E) ---------- */
#footerwrap{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:70;
  transform:translateY(100%);
  background:#17171c;
  border-top:1px solid rgba(255,255,255,.12);
  padding:44px 32px 32px;
}
body.ready-view #footerwrap{ transition:transform .3s ease-in-out; }
#footerwrap.expanded{ transform:translateY(0); }

.footer-inner{
  width:min(1160px,90%); margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px;
}
.footer-col h3{ margin:0 0 12px; font-size:18px; }
.footer-col p{ margin:0 0 10px; font-size:15px; color:rgba(255,255,255,.72); }
.footer-col ul{ margin:0; padding:0; list-style:none; font-size:15px; }
.footer-col li{ margin-bottom:8px; }
.footer-col a{ color:rgba(255,255,255,.78); transition:color .3s linear; }
.footer-col a:hover{ color:#fff; }
.copy{ margin-top:16px; font-size:13px; color:rgba(255,255,255,.5); }

.back-top.back-top-float{
  position:fixed;
  left:50%; bottom:0;
  z-index:75;
  width:60px; height:35px;
  transform:translate(-50%,0);
  border:0; padding:0; cursor:pointer;
  background-color:rgba(255,255,255,.14);
  color:#fff;
  border-radius:12px 12px 0 0;
  transition:border-radius .7s ease-in-out, transform .7s ease-in-out,
             color .7s ease-in-out, opacity .7s ease-in-out,
             background-color .7s ease-in-out, visibility .7s ease-in-out;
}
.back-top.back-top-float::before{
  content:"\25B2";
  position:absolute; top:0; left:0; right:0;
  line-height:35px; font-size:13px;
}
.back-top.back-top-float:hover{ background-color:rgba(255,255,255,.28); }
.back-top.back-top-float:hover::before{
  animation:back-top-arrow-up .25s linear .2s infinite alternate;
}
@keyframes back-top-arrow-up{
  0%{ top:0 } 100%{ top:-5px }
}
.back-top.back-top-float.expanded{
  transform:translate(-50%,100%);
  border-radius:0 0 12px 12px;
  background-color:var(--accent);
}
.back-top.back-top-float.expanded::before{ content:"\2715"; animation:none; }

/* ---------- 7. Оффканвас-меню (F) ---------- */
.body-overlay{
  position:fixed; inset:0; z-index:85;
  background:rgba(207,207,207,.7);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  opacity:0;
  transition:opacity .2s ease-in-out;
}
.body-overlay.visible{ opacity:1; }

#mobile-menu.sidemenu{
  position:fixed;
  top:0; bottom:0;
  right:calc(-1 * var(--sidemenu-w));
  width:var(--sidemenu-w);
  z-index:90;
  padding:80px 28px 32px;
  background:#141419;
  box-shadow:none;
  overflow-y:auto;
  transition:left .2s ease-in-out, right .2s ease-in-out, top .2s, bottom .2s,
             width .2s, transform .2s, box-shadow .2s;
}
#mobile-menu.sidemenu.open{
  right:0;
  box-shadow:-10px 0 40px rgba(0,0,0,.45);
}
#menu-icon-close{
  position:absolute; top:24px; right:24px;
  width:32px; height:32px;
  background:transparent; cursor:pointer; padding:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  transition:border .3s ease-in-out, transform .3s ease-in-out;
}
#menu-icon-close::before,
#menu-icon-close::after{
  content:""; position:absolute; left:8px; top:14px;
  width:14px; height:2px; background:#fff;
}
#menu-icon-close::before{ transform:rotate(45deg); }
#menu-icon-close::after{ transform:rotate(-45deg); }
#menu-icon-close:hover{ border-color:#fff; transform:rotate(90deg); }

.overlay-menu{ margin:0; padding:0; list-style:none; }
.overlay-menu > li{ border-bottom:1px solid rgba(255,255,255,.08); }
.overlay-menu a,
.overlay-menu .sub-toggle{
  display:block; width:100%;
  padding:14px 0;
  font:inherit; font-size:17px; text-align:left;
  color:#fff; background:transparent; border:0; cursor:pointer;
  transition:color .3s linear;
}
.overlay-menu a:hover,
.overlay-menu .sub-toggle:hover{ color:var(--accent); }
.sub-menu{
  margin:0 0 10px; padding:0 0 0 14px;
  list-style:none;
  display:none;
}
.sub-toggle[aria-expanded="true"] + .sub-menu{
  display:block;
  animation:overlay-menu__fade-in-animation .3s ease both;
}
.sub-menu a{ padding:8px 0; font-size:15px; color:rgba(255,255,255,.75); }
@keyframes overlay-menu__fade-in-animation{
  0%{ opacity:0; transform:translateY(.5em) }
  100%{ opacity:1; transform:none }
}
.sidemenu-lang{ display:flex; gap:8px; margin-top:26px; }
.sidemenu-note{
  margin-top:22px; font-size:13px; line-height:1.7;
  color:rgba(255,255,255,.45);
}
.overlay-menu .nav-soon{ opacity:.5; cursor:default; }
.overlay-menu .nav-soon:hover{ color:#fff; }

/* ---------- 8. Прелоадер (G) ---------- */
/* Фон и полоса гаснут одной анимацией — иначе полоса на полсекунды
   зависает поверх уже запущенного интро-ролика */
.section_loader{
  position:fixed; inset:0; z-index:201;
  display:flex; align-items:center; justify-content:center;
  background:var(--preloader-bg);
  animation:fadeInLoading .5s ease-in-out forwards;
  transition:opacity .5s;
}
body.ready-view .section_loader{ opacity:0; pointer-events:none; }
.section_loader[hidden]{ display:none; }

@keyframes fadeInLoading{
  0%{ opacity:0 } 50%{ opacity:.5 } 100%{ opacity:1 }
}

/* Полоса загрузки: кисть едет слева направо и закрашивает её фирменными цветами.
   Прогресс задаёт app.js через переменную --p (0–100%). */
.loader-box{ --p:0%; display:flex; flex-direction:column; align-items:center; }
.loader-track{
  position:relative;
  width:320px; max-width:70vw; height:18px;
  border-radius:9px;
  background:rgba(255,255,255,.16);
}
.loader-fill{
  width:var(--p); height:100%;
  border-radius:9px;
  background-image:linear-gradient(90deg,
    var(--brand-green) 0%, var(--brand-blue) 26%, var(--brand-purple) 50%,
    var(--brand-red) 74%, var(--brand-orange) 100%);
  background-size:320px 100%;              /* градиент не сжимается по мере заливки */
  background-repeat:no-repeat;
  transition:width .25s linear;
}
.loader-brush{
  position:absolute; left:var(--p); bottom:-10px;   /* ворс погружён в полосу */
  line-height:0;
  transition:left .25s linear;
}
.loader-brush img{
  display:block;
  height:122px; width:auto;
  max-width:none;                          /* иначе базовое max-width:100% сжимает кисть у края полосы */
  transform:scaleX(-1);                    /* отражение по горизонтали: ворс слева */
  margin-left:-24px;                       /* кончик ворса — ровно на кромке заливки */
  filter:drop-shadow(0 10px 16px rgba(16,40,63,.22));
}
.loader-percent{
  margin-top:18px;
  font-size:14px; font-weight:600;
  letter-spacing:.18em;
  font-variant-numeric:tabular-nums;       /* цифры не «прыгают» по ширине */
  color:rgba(255,255,255,.6);
}
/* на узких экранах ручка кисти не должна вылезать за край */
@media (max-width:560px){
  .loader-track{ width:240px; max-width:60vw; height:14px; border-radius:7px; }
  .loader-fill{ border-radius:7px; background-size:240px 100%; }
  .loader-brush{ bottom:-8px; }
  .loader-brush img{ height:88px; margin-left:-17px; }
  .loader-percent{ margin-top:14px; font-size:13px; }
}
@media (max-width:430px){
  .loader-track{ width:200px; max-width:54vw; height:13px; border-radius:7px; }
  .loader-fill{ background-size:200px 100%; }
  .loader-brush{ bottom:-7px; }
  .loader-brush img{ height:76px; margin-left:-15px; }
}

/* ---------- 9. Фоны секций ---------- */
.bg-logo,.bg-about,.bg-products,.bg-kraski,.bg-nitro,.bg-why,.bg-contacts{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:scroll;
}

/* 1. Заставка с логотипом — светлая, в тон исходного ролика */
.bg-logo{
  background-color:#050a1c;
  background-image:url("../assets/img/bg-hero.webp");
  background-size:cover;
  background-position:center;
}
@media (max-aspect-ratio: 3/4){
  /* на вертикальном экране кадрируем тот же фон так, чтобы мазок остался слева */
  .bg-logo{ background-position:26% center; }
}

/* 2–7. Подложки экранов: широкие для десктопа, вертикальные кропы для мобильных */
.bg-about{    background-image:url("../assets/img/bg-2.webp"); }
.bg-products{ background-image:url("../assets/img/bg-3.webp"); }
.bg-kraski{   background-image:url("../assets/img/bg-4.webp"); }
.bg-nitro{    background-image:url("../assets/img/bg-5.webp"); background-position:center right; }
.bg-why{      background-image:url("../assets/img/bg-6.webp"); }
.bg-contacts{ background-image:url("../assets/img/bg-7.webp"); background-position:32% center; }
.bg-about,.bg-products,.bg-kraski,.bg-nitro,.bg-why,.bg-contacts{ background-color:var(--navy-deep); }

@media (max-aspect-ratio: 3/4){
  .bg-about{    background-image:url("../assets/img/bg-2-m.webp"); }
  .bg-products{ background-image:url("../assets/img/bg-3-m.webp"); }
  .bg-kraski{   background-image:url("../assets/img/bg-4-m.webp"); }
  .bg-nitro{    background-image:url("../assets/img/bg-5-m.webp"); background-position:center; }
  .bg-why{      background-image:url("../assets/img/bg-6-m.webp"); }
  .bg-contacts{ background-image:url("../assets/img/bg-7-m.webp"); }
}

/* Затемняющий слой, чтобы белый текст читался поверх светлых фотографий */
.photo-cover{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.photo-cover::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,16,26,.82) 0%, rgba(6,16,26,.66) 40%,
                             rgba(6,16,26,.26) 70%, rgba(6,16,26,0) 100%);
}
.photo-cover.right::before{
  background:linear-gradient(260deg, rgba(6,16,26,.82) 0%, rgba(6,16,26,.66) 40%,
                             rgba(6,16,26,.26) 70%, rgba(6,16,26,0) 100%);
}
/* На контактах банка стоит по центру и попадает под текст — здесь чуть плотнее */
.bg-contacts .photo-cover.right::before{
  background:linear-gradient(260deg, rgba(6,16,26,.88) 0%, rgba(6,16,26,.76) 46%,
                             rgba(6,16,26,.42) 74%, rgba(6,16,26,.1) 100%);
}
/* На вертикальных экранах текст идёт во всю ширину — затемняем сверху вниз и мягче */
@media (max-aspect-ratio: 3/4){
  .photo-cover::before,
  .photo-cover.right::before,
  .bg-contacts .photo-cover.right::before{
    background:linear-gradient(180deg, rgba(6,16,26,.76) 0%, rgba(6,16,26,.58) 42%,
                               rgba(6,16,26,.3) 74%, rgba(6,16,26,.16) 100%);
  }
}

/* ---------- Светлая секция ---------- */
.fp-section-container.theme-light{ color:var(--ink-dark); }
.theme-light h1,.theme-light h2,.theme-light h3{ color:var(--ink-dark); }
.theme-light .lead{ color:rgba(22,32,43,.78); }
.theme-light .lead strong{ color:var(--ink-dark); }
.theme-light .btn{ border-color:rgba(22,32,43,.55); color:var(--ink-dark); }
.theme-light .btn:hover{
  background-color:var(--ink-dark); color:#fff; border-color:var(--ink-dark);
  box-shadow:0 6px 24px rgba(16,40,63,.22);
}
body.on-light .fp-controlArrow{ background:rgba(22,32,43,.08); }
body.on-light .fp-controlArrow:hover{ background:rgba(22,32,43,.18); }
body.on-light .fp-controlArrow::before{ border-color:var(--ink-dark); }
body.on-light .fp-slidesNav button{ border-color:rgba(22,32,43,.4); }
body.on-light .fp-slidesNav li.active button{ border-color:var(--accent); }

/* ---------- Типографика ---------- */
h1,h2,h3{ margin:0 0 18px; font-weight:700; color:#fff; }
/* оверлеи стали светлее — придерживаем контраст мягкой тенью */
.fp-section-container h1,
.fp-section-container h2,
.fp-section-container .lead,
.fp-section-container .eyebrow,
.fp-section-container .advantages li,
.fp-section-container .contact-list,
.fp-section-container .facts{ text-shadow:0 2px 16px rgba(3,10,18,.75); }
h1{ font-size:38.4px; line-height:46.08px; }
h2{ font-size:32px; line-height:41.6px; }
.lead{ margin:0 0 22px; max-width:52ch; font-size:18px; color:rgba(255,255,255,.86); }
.lead strong{ color:#fff; font-weight:600; }
p{ margin:0 0 18px; }

.eyebrow{
  margin:0 0 12px;
  font-size:18px; font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--accent);
}
.theme-light .eyebrow{ color:var(--accent); }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12.1px 24.2px;
  border:1px solid #f7f7f7;
  border-radius:0;
  color:#f7f7f7;
  font-size:15px; letter-spacing:.04em;
  transition:color .3s linear, background-color .3s linear, padding .3s linear,
             border .3s linear, box-shadow .3s linear;
}
.btn:hover{
  background-color:#f7f7f7;
  color:var(--ink-dark);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.btn-tg{
  background-color:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn-tg:hover{
  background-color:var(--accent-deep);
  border-color:var(--accent-deep);
  color:#fff;
}
.tg-icon{
  width:18px; height:18px; flex:none;
  background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.3-4.9 9-8.1c.4-.3-.1-.5-.6-.2L6.2 12.8 1.4 11.3c-1-.3-1-1 .2-1.5l19-7.3c.9-.3 1.6.2 1.3 1.8z'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.3-4.9 9-8.1c.4-.3-.1-.5-.6-.2L6.2 12.8 1.4 11.3c-1-.3-1-1 .2-1.5l19-7.3c.9-.3 1.6.2 1.3 1.8z'/%3E%3C/svg%3E");
}
.btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; }

/* ---------- Секция 1: интро-ролик ---------- */
.hero-intro{
  position:fixed; inset:0; z-index:100;   /* поверх хедера — интро на весь экран */
  display:flex; align-items:center; justify-content:center;
  background:#000;
  opacity:1;
  transition:opacity .9s ease;
}
.hero-intro[hidden]{ display:none; }
.hero-intro.is-fading{ opacity:0; pointer-events:none; }
/* Для портретных экранов подключён отдельный вертикальный ролик,
   поэтому кадр всегда заполняет экран целиком */
.hero-video{
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
}
.intro-skip{
  position:absolute; right:26px; bottom:26px;
  padding:8px 16px;
  font:inherit; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.72); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28); border-radius:2px;
  cursor:pointer;
  transition:color .3s linear, background-color .3s linear, border-color .3s linear;
}
.intro-skip:hover{ color:#fff; background:rgba(255,255,255,.16); border-color:#fff; }

/* ---------- Секция 1: логотип ---------- */
.row_center{ align-items:center; text-align:center; }
/* Знак — кадр из фирменного ролика, надпись набрана шрифтом (Montserrat 800
   повторяет начертание логотипа и не мылит на любых экранах) */
.hero-mark{
  width:min(240px,34vw); height:auto;
  margin-bottom:18px;
}
/* Кегль задан в тех же единицах, что и знак, — надпись всегда примерно
   в 1,7 раза шире знака, как в самом логотипе */
.hero-wordmark{
  margin:0 0 22px;
  /* скруглённый жирный гротеск — ближайший к Arial Rounded ExtraBold из логотипа */
  font-family:"M PLUS Rounded 1c", "Arial Rounded MT Bold", "Helvetica Rounded", var(--font);
  font-weight:800;
  font-size:min(50px, 7.1vw);
  line-height:1.05;
  letter-spacing:-.005em;
  white-space:nowrap;
  color:#fff;
  text-shadow:0 2px 24px rgba(3,10,18,.6);
}
.tagline{
  margin:0 0 32px;
  max-width:100%;
  font-size:min(20px, 3.4vw); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.scroll-hint{
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  transition:color .3s linear;
}
.scroll-hint:hover{ color:var(--accent); }
.scroll-hint::after{
  content:""; width:1px; height:34px;
  background:linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0));
  animation:scroll-hint 1.8s ease-in-out infinite;
}
@keyframes scroll-hint{
  0%,100%{ transform:scaleY(.4); transform-origin:top }
  50%{ transform:scaleY(1); transform-origin:top }
}

/* ---------- Секция 2: цифры ---------- */
.facts{
  display:flex; flex-wrap:wrap; gap:38px;
  margin:14px 0 0; padding:0; list-style:none;
}
.facts li{ display:flex; flex-direction:column; }
.facts b{
  font-size:34px; line-height:1.1; font-weight:700;
  color:#fff;
}
.facts b{ color:var(--brand-green); }
.facts span{ font-size:14px; color:rgba(255,255,255,.65); margin-top:4px; }

/* ---------- Текст у правого края (там, где на фото объект слева) ---------- */
.row_right{ align-items:flex-end; text-align:right; }
.row_right .lead,
.row_right .advantages,
.row_right .contact-list,
.row_right .contact-actions{ margin-left:auto; }
.row_right .advantages{ justify-items:end; }
.row_right .advantages li{ padding-left:0; padding-right:34px; }
.row_right .advantages li::before{ left:auto; right:0; transform:rotate(-45deg); }
.row_right .contact-list li,
.row_right .facts li{ align-items:flex-end; }
.row_right .contact-actions{ justify-content:flex-end; }
.row_right{ padding-right:30px; }        /* текст не подходит вплотную к точкам #fp-nav */

/* ---------- Секция 4: преимущества ---------- */
.advantages{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 40px;
  margin:8px 0 0; padding:0; list-style:none;
  max-width:900px;
}
.advantages li{
  position:relative;
  padding-left:34px;
  font-size:17px;
  color:rgba(255,255,255,.9);
}
.advantages li::before{
  content:"";
  position:absolute; left:0; top:.35em;
  width:18px; height:10px;
  border-left:2px solid var(--brand-green);
  border-bottom:2px solid var(--brand-green);
  transform:rotate(-45deg);
}

/* ---------- Секция 5: контакты ---------- */
.contact-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
.contact-list{
  display:flex; flex-wrap:wrap; gap:14px 48px;
  margin:0; padding:0; list-style:none;
}
.contact-list li{ display:flex; flex-direction:column; }
.contact-list b{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:6px;
}
.contact-list span{ font-size:16px; color:rgba(255,255,255,.9); }
.contact-list a{ transition:color .3s linear; }
.contact-list a:hover{ color:var(--accent); }

/* ---------- Адаптив ---------- */
@media (max-width:1260px){
  .row_inner{ max-width:96%; }
}
@media (max-width:1024px){
}
@media (max-width:900px){
  .main-nav{ display:none; }
  .menu-icon{ display:flex; }            /* меню уезжает в бургер */
  .lang-switch{ margin-left:auto; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .bg-kraski{ background-position:72% center; }
}
@media (max-width:760px){
  /* отступ сверху — под фиксированный хедер, справа — под точки #fp-nav */
  .row_inner{ max-width:90%; padding:68px 26px 54px 0; }
  /* на узком экране весь текст выравнивается по левому краю */
  .row_right{ align-items:flex-start; text-align:left; padding-right:26px; }
  .row_right .lead,
  .row_right .advantages,
  .row_right .contact-list,
  .row_right .contact-actions{ margin-left:0; }
  .row_right .advantages{ justify-items:start; }
  .row_right .advantages li{ padding-left:34px; padding-right:0; }
  .row_right .advantages li::before{ left:0; right:auto; }
  .row_right .contact-list li,
  .row_right .facts li{ align-items:flex-start; }
  .row_right .contact-actions{ justify-content:flex-start; }
  h1{ font-size:30px; line-height:38px; }
  h2{ font-size:26px; line-height:34px; }
  .tagline{ font-size:min(15px, 3.4vw); letter-spacing:.12em; }
  .header-inner{ gap:12px; }
  .site-logo{ font-size:16px; letter-spacing:.08em; gap:8px; }
  .site-mark{ height:28px; }
  #headerwrap.is-solid .site-mark{ height:26px; }
  .advantages{ grid-template-columns:1fr; gap:10px; }
  .advantages li{ font-size:15px; }
  .facts{ gap:22px; }
  .facts b{ font-size:26px; }
  .contact-list{ gap:12px 28px; }
  .photo-cover::before{
    background:linear-gradient(180deg, rgba(8,21,31,.9) 0%, rgba(8,21,31,.75) 55%, rgba(8,21,31,.55) 100%);
  }
  .lead{ font-size:16px; }
  #headerwrap{ padding:12px 18px; }
  .footer-inner{ grid-template-columns:1fr; }
  #footerwrap{ padding:32px 18px 24px; max-height:80vh; overflow-y:auto; }
}
@media (max-width:360px){
  .site-name{ display:none; }             /* на самых узких экранах остаётся только знак */
}
@media (max-width:680px){
  .fp-controlArrow{
    width:36px; height:36px; margin-top:0;
    top:auto; inset-block:auto 14px;
  }
  .fp-controlArrow::before{ top:12px; }
  .fp-next{ right:14px; }
  .fp-prev{ left:14px; }
  .fp-slidesNav{ bottom:56px; }
}

/* ---------- 10. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  :root{ --tf_section_duration:.001s; --tf_anim_dur:.001s; }
  .fp-track,
  .fp-section-container-inner,
  #footerwrap,
  .back-top.back-top-float,
  #mobile-menu.sidemenu,
  .body-overlay,
  #headerwrap,
  #headerwrap::before,
  .header-search input{
    transition-duration:.001s !important;
  }
  .wow{ visibility:visible !important; }
  .animated{ animation:none !important; }
  .loader-brush,.loader-fill{ transition-duration:.001s !important; }
  .fp-controlArrow:hover::before,
  .back-top.back-top-float:hover::before{ animation:none !important; }
}