/* ============================================================
   Fliker — вёрстка по макету Figma (Ocean / Fliker Website)
   Координаты элементов взяты из макета, ширина холста 1440px
   ============================================================ */
:root{
  --bg:#010414;
  --accent:#43BCC3;
  --lang-line:#454A55;
  --lang-open:#0E121F;
  --lang-active:#131C28;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}
body{
  background:var(--bg);
  font-family:Roboto,Arial,sans-serif;
  color:#EBEBEB;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}

.stage{background:var(--bg)}          /* масштаб под ширину экрана ставит js */
.wrap{width:1440px;margin:0 auto;position:relative}

/* мобильная версия — отдельная вёрстка из макета, холст 393px */
/* повышенная специфичность: общее правило .fx идёт ниже и иначе перебило бы ширину */
.wrap.wrap--mob{width:393px;margin:0}   /* без центрирования: масштаб идёт от левого края */
.fx.fx--mob{width:393px}
/* лента со скриншотами приложения: листается вбок внутри своего слоя,
   точки-индикаторы остаются в секции и не двигаются */
.scroll-track{
  position:absolute;left:0;top:0;right:0;bottom:0;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.scroll-track::-webkit-scrollbar{display:none}
/* кадр всегда останавливается по центру, а не между двумя */
.scroll-track{scroll-snap-type:x mandatory}
.scroll-track .shot{scroll-snap-align:center}
.scroll-pad{position:absolute;pointer-events:none}
/* точки-индикаторы карусели: остаются на месте при прокрутке */
.dot-nav{transition:background .25s;z-index:3;will-change:transform}
.dot-nav.on{box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.stage--mobile{display:none;margin-left:0}
/* мобильную вёрстку показываем только там, где она собрана;
   иначе остаётся десктопная, уменьшенная под ширину экрана */
@media (max-width:767px){
  body.has-mob .stage--desktop{display:none}
  body.has-mob .stage--mobile{display:block}
}

/* секция макета */
/* clip, а не hidden: блок с hidden браузер может прокрутить внутрь себя
   при переходе по якорю, и содержимое секции уезжает */
.fx{position:relative;width:1440px;overflow:hidden;overflow:clip}
/* абсолютный элемент по координатам Figma */
.a{position:absolute}
/* текстовый блок */
.t{word-wrap:break-word}

/* ---------- ссылки в шапке и футере ---------- */
.hit{position:absolute;display:block;cursor:pointer;z-index:60}

/* ---------- подсветка пунктов меню и футера ---------- */
.nav-t{transition:color .2s}
/* цвет подсветки ставит скрипт (он знает цвет продукта), поэтому здесь
   правила с !important быть не должно — оно перебивало бы его бирюзой */
.nav-t.on span{color:inherit}

/* ---------- карточки продуктов ---------- */
.card-hl,.btn-hl,.arrow-hl{transition:border-color .3s,box-shadow .3s,transform .3s,background .3s}
.arrow-hl{z-index:5}
.card-hl.on{transform:translateY(-4px)}
.card-hl[data-p="em"].on{border-color:#0079FF;box-shadow:0 18px 44px rgba(0,121,255,.18)}
.card-hl[data-p="ot"].on{border-color:#CF1D5E;box-shadow:0 18px 44px rgba(207,29,94,.18)}
.card-hl[data-p="aw"].on{border-color:#03C6F1;box-shadow:0 18px 44px rgba(3,198,241,.18)}
.btn-hl.on{background:#1B2735}
.arrow-hl.on{transform:translateX(5px)}

/* ---------- языковой переключатель ---------- */
.lang{position:absolute;left:1212px;top:25px;width:128px;z-index:40}
.lang__btn{
  width:128px;height:55px;border-radius:17px;border:1px solid var(--lang-line);
  background:transparent;color:#fff;font-family:Roboto,Arial,sans-serif;
  font-size:19px;font-weight:500;line-height:19px;
  display:flex;align-items:center;gap:8px;padding:0 16px;cursor:pointer;
  transition:border-color .2s
}
.lang__btn:hover{border-color:var(--accent)}
.lang__globe{width:21px;height:21px;flex:0 0 21px;stroke:#fff;fill:none;stroke-width:1.6}
.lang__chev{margin-left:auto;width:12px;height:7px;stroke:#fff;fill:none;stroke-width:2;transition:transform .25s}
.lang.open .lang__chev{transform:rotate(180deg)}
.lang__list{
  position:absolute;top:65px;left:0;width:128px;background:var(--lang-open);
  border:1px solid var(--lang-line);border-radius:17px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s
}
.lang.open .lang__list{opacity:1;visibility:visible;transform:none}
.lang__item{
  display:flex;align-items:center;width:100%;height:55px;padding:0 20px;
  font-family:Roboto,Arial,sans-serif;font-size:19px;font-weight:500;line-height:19px;color:#fff;
  background:none;border:0;border-bottom:1px solid var(--lang-line);
  cursor:pointer;text-align:left;transition:background .18s
}
.lang__item:last-child{border-bottom:0}
.lang__item:hover{background:var(--lang-active)}
.lang__item[aria-current="true"]{background:var(--lang-active)}
.lang__check{margin-left:auto;width:12px;height:11px;stroke:var(--accent);fill:none;stroke-width:2;opacity:0}
.lang__item[aria-current="true"] .lang__check{opacity:1}

/* ---------- подсветка стран на карте (единственное добавление к макету) ---------- */
.cy{cursor:pointer}
.cy:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.cy-pin,.cy-dot,.cy-line{transition:box-shadow .3s,opacity .3s}
/* мягкое свечение по форме метки: две тени с разным размытием дают плавное
   затухание без чёткого края. Саму плашку не осветляем — от этого раньше
   проступал светлый прямоугольник её фона.
   Тень, а не filter: filter выносит элемент в отдельный слой отрисовки,
   и на части машин метка на нём пропадала при наведении */
.cy-pin{border-radius:10px}
.cy-pin.on{box-shadow:0 0 12px 1px rgba(67,188,195,.45),
                      0 0 26px 2px rgba(67,188,195,.26)}
/* на телефоне метки стоят ближе к краю карточки, и она обрезает свечение —
   там оно короче, чтобы укладываться в поля */
.stage--mobile .cy-pin{border-radius:5px}
.stage--mobile .cy-pin.on{box-shadow:0 0 8px 1px rgba(67,188,195,.45),
                                     0 0 16px 1px rgba(67,188,195,.26)}
/* точку не увеличиваем: в макете линия ровно касается её сверху,
   а увеличенная точка наезжала на линию */
.cy-dot.on{box-shadow:0 0 14px 4px rgba(67,188,195,.7)}
.stage--mobile .cy-dot.on{box-shadow:0 0 9px 3px rgba(67,188,195,.7)}
.cy-line.on{box-shadow:0 0 8px 1px rgba(67,188,195,.65);opacity:1}
@media (prefers-reduced-motion:reduce){
  .cy-pin,.cy-dot,.cy-line,.lang__list,.lang__chev{transition:none}
}

/* ---------- кубики у логотипа партнёра: слетаются, потом мерцают ---------- */
.cube{opacity:0}
.cube.fly{
  animation:cube-fly .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i, 0) * .07s);
}
.cube.settled{
  opacity:1;
  animation:cube-pulse 4.6s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .42s);
  transform-origin:center;
}
@keyframes cube-fly{
  0%   { opacity:0; transform:translate(var(--dx,0), var(--dy,0)) scale(.35) rotate(var(--r,0)) }
  55%  { opacity:1 }
  100% { opacity:1; transform:none }
}
@keyframes cube-pulse{
  0%, 100% { opacity:.3;  transform:scale(.85) }
  45%      { opacity:1;   transform:scale(1.1)  }
  70%      { opacity:.6;  transform:scale(.97)  }
}
@media (prefers-reduced-motion:reduce){
  .cube, .cube.fly, .cube.settled{animation:none;opacity:1;transform:none}
}

/* ---------- мобильное меню: панель справа, как в макете ---------- */
.burger{background:none;border:0;cursor:pointer;padding:0}
.mm{position:fixed;inset:0;z-index:200;background:rgba(1,4,20,.55)}
.mm[hidden]{display:none}
.mm__panel{
  position:absolute;top:0;right:0;bottom:0;width:54%;min-width:200px;max-width:260px;
  background:#0C1322;padding:22px 18px;
  display:flex;flex-direction:column;
  font-family:Roboto,Arial,sans-serif;
  box-shadow:-18px 0 40px rgba(0,0,0,.45);
}
.mm__close{
  align-self:flex-end;width:30px;height:30px;background:none;border:0;cursor:pointer;padding:0;
}
.mm__close svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none}
.mm__nav{margin-top:22px;display:flex;flex-direction:column}
.mm__nav a{
  color:#EBEBEB;font-size:15px;line-height:1.2;text-decoration:none;
  padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.10);
}
.mm__nav a:first-child{border-top:1px solid rgba(255,255,255,.10)}
.mm__nav a:active{color:var(--accent)}
.mm__lang-box{margin-top:26px}
.mm__lang-btn{
  display:flex;align-items:center;gap:7px;width:100%;
  height:38px;padding:0 12px;border:1px solid var(--lang-line);border-radius:12px;
  background:transparent;color:#fff;font-family:inherit;font-size:14px;cursor:pointer;
}
.mm__globe{width:16px;height:16px;flex:0 0 16px;stroke:#fff;fill:none;stroke-width:1.6}
.mm__chev{margin-left:auto;width:10px;height:6px;stroke:#fff;fill:none;stroke-width:2;transition:transform .25s}
.mm__lang-box:not(.closed) .mm__chev{transform:rotate(180deg)}
.mm__langs{
  margin-top:10px;border:1px solid var(--lang-line);border-radius:12px;overflow:hidden;
  background:#0E1524;
}
.mm__lang-box.closed .mm__langs{display:none}
.mm__lang{
  display:flex;align-items:center;height:42px;padding:0 12px;
  color:#fff;font-size:14px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mm__lang:last-child{border-bottom:0}
.mm__check{margin-left:auto;width:12px;height:11px;stroke:var(--accent);fill:none;stroke-width:2;opacity:0}
.mm__lang[aria-current="true"] .mm__check{opacity:1}

/* ---------- закреплённая верхняя полоса ---------- */
/* шапка вынесена из первой секции: координаты внутри полосы те же, что
   в макете, поэтому логотип, разделы и переключатель языков стоят на своих
   местах, а сама полоса держится у верха окна при прокрутке */
.topbar{
  position:fixed;top:0;left:0;width:1440px;
  /* выше плашки чата: иначе список языков раскрывается под ней */
  transform-origin:top left;z-index:130
}
.topbar--mob{width:393px;display:none}
/* какая вёрстка показана, такая и полоса — правила те же, что у сцен */
@media (max-width:767px){
  body.has-mob .topbar--desk{display:none}
  body.has-mob .topbar--mob{display:block}
}