@charset "UTF-8";
/* ============================================================
   НексГард Спектра — лендінг
   Геометрія (координати, кеглі, інтерліньяж) — у geom.css,
   він генерується з дампу Figma скриптом gen_geom.py.
   Тут: шрифти, фони, кольори, стани, анімації.
   ============================================================ */

/* ---------- шрифт ------------------------------------------------
   У макеті Google Sans. Це власний шрифт Google, вбудовувати у
   веб-сторінку не дозволено ліцензією, тому self-hosted замінник —
   Manrope (SIL OFL 1.1). Оригінальне сімейство лишається першим у
   стеку: якщо на машині користувача Google Sans встановлений,
   візьметься саме він.
   ----------------------------------------------------------------- */
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/manrope-cyrillic-400-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/manrope-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/manrope-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/manrope-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/manrope-cyrillic-700-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/manrope-cyrillic-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/manrope-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/manrope-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- токени ---------------------------------------------- */
:root{
  /* 1 одиниця = 1 px макета. Сторінка масштабується пропорційно 1:1. */
  --u:calc(100vw / 390);          /* фолбек для браузерів без container queries */
  --white:#fff;
  --btn-hover-text:#242d65;       /* колір тексту кнопки у стані hover, з фрейму «Кнопки статус» */
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:900px){ :root{ --u:calc(100vw / 1280) } }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--white);
  font-family:"Google Sans",Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;overflow-x:hidden}
img{border:0}

.page{position:relative;width:100%;container-type:inline-size;--u:calc(100cqw / 390)}
@media (min-width:900px){ .page{ --u:calc(100cqw / 1280) } }

/* ---------- блоки ----------------------------------------------- */
.b{position:relative;width:100%;overflow:hidden;
  background-repeat:no-repeat;background-position:center top}
.b1{background-image:url(img/bg1m.jpg);background-image:image-set(url(img/bg1m.webp) type("image/webp"),url(img/bg1m.jpg) type("image/jpeg"));background-size:100% calc(298 * var(--u))}
.b2{background-image:url(img/bg2m.jpg);background-image:image-set(url(img/bg2m.webp) type("image/webp"),url(img/bg2m.jpg) type("image/jpeg"));background-size:100% calc(901 * var(--u));background-position:center calc(-.44 * var(--u))}
.b3{background-image:url(img/bg3m.jpg);background-image:image-set(url(img/bg3m.webp) type("image/webp"),url(img/bg3m.jpg) type("image/jpeg"));background-size:100% calc(622 * var(--u));background-position:center calc(-.44 * var(--u))}
.b4{background-image:none}
.b5{background-image:url(img/bg5m.jpg);background-image:image-set(url(img/bg5m.webp) type("image/webp"),url(img/bg5m.jpg) type("image/jpeg"));background-size:100% calc(298 * var(--u));background-position:center calc(-.49 * var(--u))}
@media (min-width:900px){
  .b1{background-image:url(img/bg1d.jpg);background-image:image-set(url(img/bg1d.webp) type("image/webp"),url(img/bg1d.jpg) type("image/jpeg"));background-size:100% calc(804 * var(--u));background-position:center calc(-.437 * var(--u))}
  .b2{background-image:url(img/bg2d.jpg);background-image:image-set(url(img/bg2d.webp) type("image/webp"),url(img/bg2d.jpg) type("image/jpeg"));background-size:100% calc(779 * var(--u));background-position:center calc(-.066 * var(--u))}
  .b3{background-image:url(img/bg3d.jpg);background-image:image-set(url(img/bg3d.webp) type("image/webp"),url(img/bg3d.jpg) type("image/jpeg"));background-size:100% calc(816 * var(--u));background-position:center calc(.2 * var(--u))}
  .b4{background-image:url(img/bg4d.jpg);background-image:image-set(url(img/bg4d.webp) type("image/webp"),url(img/bg4d.jpg) type("image/jpeg"));background-size:100% calc(452 * var(--u));background-position:center calc(-1.002 * var(--u))}
  .b5{background-image:url(img/bg5d.jpg);background-image:image-set(url(img/bg5d.webp) type("image/webp"),url(img/bg5d.jpg) type("image/jpeg"));background-size:100% calc(123 * var(--u));background-position:center calc(-.635 * var(--u))}
}

/* ---------- текст ----------------------------------------------- */
.tx{position:absolute;margin:0;color:var(--white);font-weight:400}
.tx b,.tx strong{font-weight:700}
.b1-title,.b5-title{text-transform:uppercase;font-weight:700}
.b1-title .l1,.b1-title .l2,.b5-title .l1,.b5-title .l2{display:block}
/* мішані кеглі в заголовках — з макета, перебивають згенерований базовий кегль */
.b1-title .l2{font-size:calc(17.68 * var(--u));line-height:calc(20.8 * var(--u))}
.b5-title .l1{font-size:calc(27.413 * var(--u));line-height:calc(34.77 * var(--u))}
.b5-title .l2{font-size:calc(20.707 * var(--u));line-height:calc(26.267 * var(--u))}
@media (min-width:900px){
  .b1-title .l2{font-size:calc(45.957 * var(--u));line-height:calc(58.298 * var(--u))}
}
.pest{position:absolute;text-transform:uppercase;font-weight:700;color:var(--white)}
.pest>.rv{display:inline-block;transform-origin:50% 50%}
.pname{display:block}

/* переноси рядків: brd — тільки десктоп, brm — тільки мобайл */
.brd{display:none}
@media (min-width:900px){ .brd{display:inline} .brm{display:none} }
/* видимість елементів, яких немає в іншій розкладці — правила навмисно
   в кінці файлу й з підвищеною специфічністю, щоб не програти .btn/.tx */

/* ---------- упаковки в першому блоці ----------------------------
   Стек — один суцільний об'єкт: без ховера, без окремих станів.
   П'ять картинок лишаються окремими вузлами тільки тому, що так вони
   складені в макеті (свої координати й порядок перекриття).
   ----------------------------------------------------------------- */
.b1-packs{position:absolute;overflow:hidden;
  filter:drop-shadow(0 calc(4.051 * var(--u)) calc(4.861 * var(--u)) rgba(0,0,0,.25))}
.sp{position:absolute}
.sp img,.sp picture{display:block;width:100%;height:100%}
.sp img{object-fit:cover}
.sp1{z-index:5}.sp2{z-index:4}.sp3{z-index:1}.sp4{z-index:3}.sp5{z-index:2}
@media (min-width:900px){ .sp1{z-index:5}.sp2{z-index:4}.sp3{z-index:3}.sp4{z-index:2}.sp5{z-index:1} }

/* ---------- кнопки --------------------------------------------- */
/* Стани з фрейму «Кнопки статус»: default — прозора з білою обводкою,
   hover — біла заливка, текст #242D65. */
.btn{position:absolute;display:block;text-decoration:none;
  border-style:solid;border-color:var(--white);background-color:transparent;
  transition:background-color .25s ease,transform .55s var(--ease),opacity .55s ease}
.btn>span{position:absolute;display:block;color:var(--white);transition:color .25s ease}
.btn:hover,.btn:focus-visible{background-color:var(--white)}
.btn:hover>span,.btn:focus-visible>span{color:var(--btn-hover-text)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:calc(3 * var(--u))}
/* У мобільній розкладці кнопка 28,9 px висотою — для пальця мало.
   Розширюємо область натискання до 44 px, не змінюючи вигляду. */
.btn::after{content:'';position:absolute;left:0;right:0;top:50%;
  height:max(100%,44px);transform:translateY(-50%)}

/* ---------- упаковки з посиланнями (блок 3) --------------------- */
.p{position:absolute;display:block;text-decoration:none;color:var(--white)}
.pimg{position:absolute;display:block;overflow:hidden;
  transform:scale(1);transition:transform .35s var(--ease)}
.pimg picture{display:block}
.pimg img{position:absolute;display:block;
  filter:drop-shadow(0 calc(2.56 * var(--u)) calc(3.08 * var(--u)) rgba(0,0,0,.25))}
@media (min-width:900px){
  .pimg img{filter:drop-shadow(0 calc(5.063 * var(--u)) calc(6.076 * var(--u)) rgba(0,0,0,.25))}
}
.p:hover .pimg,.p:focus-visible .pimg{transform:scale(1.05)}
.p:focus-visible{outline:2px solid #fff;outline-offset:calc(2 * var(--u))}

/* ---------- відео ---------------------------------------------- */
.b4-video{position:absolute;overflow:hidden;background:#000}
.b4-video iframe{display:block;width:100%;height:100%;border:0}

/* ---------- юридичний текст ------------------------------------- */
/* Кегль, інтерліньяж і вирівнювання — рівно з макета, по кожній
   розкладці окремо (див. geom.css). Тут нічого не змінюється. */
.b5-legal{font-weight:400}

/* ---------- поява при скролі ------------------------------------
   Композиція трансформів через змінні: --ty відповідає за появу,
   --sc за зум по ховеру, тому вони не перебивають одна одну.
   ----------------------------------------------------------------- */
.rv{--ty:0px;--sc:1}
.js .rv{--ty:calc(18 * var(--u));opacity:0;
  transform:translateY(var(--ty)) scale(var(--sc));
  transition:opacity .6s ease,transform .6s var(--ease)}
.js .rv.in{--ty:0px;opacity:1}
.pest:hover>.rv,.pest:focus-within>.rv{--sc:1.07}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .pimg,.btn,.pest>.rv{transition:none}
  .p:hover .pimg{transform:none}
  .pest:hover>.rv{--sc:1}
}

/* ---------- елементи, яких немає в іншій розкладці ----------------
   «кнопка 2», повтор заголовка й підзаголовка є тільки в мобільному
   макеті. Правила стоять останніми і мають підвищену специфічність:
   інакше display з .btn / .tx перебиває їх — і на десктопі лишається
   невидима, але клікабельна кнопка.
   ----------------------------------------------------------------- */
.page .m-only{display:block}
@media (min-width:900px){ .page .m-only{display:none} }