/* ===============================
   RESET / BASE / TYPOGRAPHY
   =============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #fff;
  color: #1D1D1D;
}

p, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-style: normal;
  font-weight: 400;
  color: #1A1A1A;
}
/* ===============================
   TYPOGRAPHY – MOBILE (320px)
   =============================== */

h1 {
  font-size: 30px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h4 strong {
  font-weight: 600;
}

h5 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

h6 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-transform: capitalize;
}
@media screen and (min-width: 1200px) {

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    line-height: normal;
    font-style: normal;
    font-weight: 400;
    color: #1A1A1A;
  }

  h1 {
    font-size: 50px;
  }

  h2 {
    font-size: 45px;
  }

  h3 {
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
  }

  h4 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
  }

  h4 strong {
    font-weight: 600;
  }

  h5 {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
  }

  h6 {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-transform: capitalize;
  }

}
@media screen and (min-width: 1200px) {
  .desktop-sub-hero-header {
    position: relative;
    z-index: 3;
  }

  .desktop-sub-hero-text {
    position: relative;
    z-index: 3;
  }

  .desktop-sub-hero-header-text {
    margin: 0;
    padding: 0;
    font-size: 45px;
    line-height: normal;
    font-style: normal;
    font-weight: 400;
    color: #1A1A1A;
  }

  .desktop-sub-hero-subtitle {
    margin: 0;
    padding: 0;
    line-height: normal;
    font-style: normal;
    font-weight: 400;
    color: #1A1A1A;
  }

  .desktop-sub-hero-subtitle-text {
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-height: normal;
    font-style: normal;
    font-weight: 600;
    text-transform: capitalize;
    color: #1A1A1A;
  }
}
/* ===============================
   BASE TEXT
   =============================== */

body {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
html {
  overflow-y: scroll;
}
/* ===============================
   CONTAINER
=============================== */
.container {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  position: relative;
}
.hero {
  width: 100%;
  background-color: #ffffff;
  padding: 0;
  margin: 30px 0 30px;
  height: auto;

  position: relative;
  z-index: 0;
  overflow: hidden;
}
body.lang-pl .lang-ua { display: none; }
body.lang-ua .lang-pl { display: none; }
/* ===============================
   HEADER
=============================== */

/* =========================================================
   HEADER REVEAL BUTTON — MOBILE
========================================================= */
.header-reveal {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 150;
  pointer-events: auto;

  width: 36px;
  height: 36px;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.2);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  line-height: 1;
  color: #212121;

  opacity: 0;
  transform: translateY(-6px);

  transition: opacity .25s ease, transform .25s ease;
}

.header-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   HEADER — BASE
========================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  display: flex;
  justify-content: center;
}

.header__bg {
  position: absolute;
  inset: 0;
  background: #ffffff;
  transition: background-color .3s ease;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

/* LOGO */
.header__logo {
  width: 110px;
  height: auto;
}

.logo-dark { display: none; }
.header--dark .logo-light { display: none; }
.header--dark .logo-dark  { display: block; }

/* CENTER WRAP */
.header_btn_wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* LANGUAGE */
.header_tumpler {
  display: flex;
  align-items: center;
  gap: 6px;

  background: transparent;
  border: none;
  cursor: pointer;
}

.header_tumpler_text,
.header_tumpler_text_dekor {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #0e0e0e;
}

.header_tumpler_text_dekor.active-lang {
  text-decoration: underline;
  text-decoration-color: #28e1e7;
}

/* KONTAKTY — hidden in Phase A */
.kontakt-wrapper {
  display: none;
}

/* BURGER — mobile base */
.hero_burger-btn {
  width: 44px;
  height: 44px;

  background: #212121;
  border-radius: 8px;
  border: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;
}

.hero_burger-btn span {
  width: 22px;
  height: 2px;
  background: #ffffff;
}



/* =========================================================
   DARK MODE — HEADER
========================================================= */
.header--dark .header__bg { background: #0e0e0e; }

.header--dark .header_tumpler_text,
.header--dark .header_tumpler_text_dekor { color: #ffffff; }

.header--dark .hero_burger-btn { background: #ffffff; }
.header--dark .hero_burger-btn span { background: #0e0e0e; }

/* =========================================================
   HEADER STATES
========================================================= */
.header--hidden {
  transform: translateY(-100%);
}

.header--ghost {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   HEADER SPACER — MOBILE
========================================================= */
.header-spacer {
  height: 56px;
}

/* ===============================
   FULLSCREEN NAV — BASE
=============================== */
.fullscreen-nav {
  position: fixed;
  inset: 0;
  z-index: 95;

  background: #0e0e0e;

  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;

  overflow: hidden;
}

.fullscreen-nav--visible {
  opacity: 1;
  pointer-events: auto;
}

/* =============================
   NAV SECTION PILL + NAV (CLEAN)
   Mobile-first, min-width ladder only
============================= */

/* NAV SECTION PILL (BASE 320) */
.nav-section-pill-wrapper {
  display: flex;
  justify-content: center;
}

.nav-section-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 50px;
  padding: 0 28px;

  margin-top: 10px;
  margin-bottom: 20px;

  border-radius: 48px;
  background: #262626;
  color: #ffffff;

  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.nav-section-text {
  display: flex;
  align-items: center;
}

.nav-section-label-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ACE238;
}

/* NAV CONTACTS */
.nav-contacts { margin-bottom: 24px; }

.nav-contacts__title {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 0 4px 8px;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
}

.nav-contacts__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* CONTACT ITEM */
.nav-contact {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px;
  border-radius: 12px;

  background: #161616;
  border: 1px solid #262626;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;

  text-decoration: none;
}

/* PRIMARY CONTACT (CALL) */
.nav-contact--primary {
  background: linear-gradient(90deg, #28e1e7, #1fc6cc);
  border: none;

  font-weight: 600;
  color: #ffffff;
}

.nav-contact--primary span { color: #ffffff; }
.nav-contact--primary img { filter: brightness(0); }

/* CONTACT ICONS */
.nav-contact img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* FULLSCREEN NAV INNER (SCROLL AREA) */
.fullscreen-nav__inner {
  position: absolute;
  inset: 0;

  width: 100%;
  max-width: 300px;
  margin: 0 auto;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  padding: 80px 0 28px;

  scrollbar-width: none;
  -ms-overflow-style: none;

  overflow-x: hidden;
  touch-action: pan-y;
}

.fullscreen-nav__inner::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* NAV LIST */
.fullscreen-nav__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px;
  border-radius: 10px;

  background: #161616;
  border: 1px solid #262626;

  text-decoration: none;
  transition: background-color .2s ease;
}

.nav-item__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-item__text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #f5f5f5;
}

/* hover */
.nav-item:hover {
  background: #ace238;
  border-color: #ace238;
}

.nav-item:hover .nav-item__text,
.nav-item:hover img {
  color: #111;
  filter: brightness(0);
}

.nav-contact:hover {
  background: #ace238;
  border-color: #ace238;
}
#platnosci {
  scroll-margin-top: 90px;
}

.nav-contact:hover span { color: #111; }
.nav-contact:hover img { filter: brightness(0); }

/* LANG VISIBILITY */
body.lang-pl .lang-ua { display: none; }
body.lang-ua .lang-pl { display: none; }

/* OVERFLOW SAFETY */
html, body { overflow-x: hidden; }
.fullscreen-nav { overflow-x: hidden; }
body.menu-open { overflow: hidden; }

/* =========================================================
   PHASE A — mobile scale ladder
========================================================= */
@media (min-width: 360px) {
  .container { max-width: 340px; }
  .fullscreen-nav__inner { max-width: 340px; }

  .header__logo { width: 116px; }

  .header_tumpler_text,
  .header_tumpler_text_dekor { font-size: 15px; }

  .hero_burger-btn { width: 48px; height: 48px; border-radius: 9px; gap: 7px; }
  .hero_burger-btn span { width: 24px; height: 2px; }

  .nav-section-pill { height: 54px; padding: 0 32px; font-size: 21px; }
  .nav-section-label-icon { width: 13px; height: 13px; }

  .nav-contact { padding: 15px; border-radius: 13px; font-size: 17px; }
  .nav-contact img { width: 24px; height: 24px; }

  .nav-item { padding: 13px; border-radius: 11px; }
  .nav-item__left { gap: 11px; }
  .nav-item__text { font-size: 17px; }
}

@media (min-width: 390px) {
  .container { max-width: 370px; }
  .fullscreen-nav__inner { max-width: 370px; }

  .header__logo { width: 122px; }

  .header_tumpler_text,
  .header_tumpler_text_dekor { font-size: 16px; }

  .hero_burger-btn { width: 50px; height: 50px; border-radius: 10px; gap: 7px; }
  .hero_burger-btn span { width: 25px; height: 2px; }

  .nav-section-pill { height: 56px; padding: 0 34px; font-size: 22px; }
  .nav-section-label-icon { width: 14px; height: 14px; }

  .nav-contact { padding: 16px; border-radius: 14px; font-size: 18px; }
  .nav-contact img { width: 25px; height: 25px; }

  .nav-item { padding: 14px; border-radius: 12px; }
  .nav-item__left { gap: 12px; }
  .nav-item__text { font-size: 18px; }
}

@media (min-width: 412px) {
  .container { max-width: 392px; }
  .fullscreen-nav__inner { max-width: 392px; }

  .header__logo { width: 128px; }

  .hero_burger-btn { width: 52px; height: 52px; border-radius: 10px; gap: 8px; }
  .hero_burger-btn span { width: 26px; height: 2px; }

  .nav-section-pill { height: 58px; padding: 0 36px; font-size: 23px; }

  .nav-contact { padding: 17px; border-radius: 14px; font-size: 18px; }
  .nav-contact img { width: 26px; height: 26px; }

  .nav-item { padding: 15px; border-radius: 12px; }
  .nav-item__text { font-size: 18px; }
}

@media (min-width: 428px) {
  .container { max-width: 408px; }
  .fullscreen-nav__inner { max-width: 408px; }

  .header__logo { width: 132px; }

  .hero_burger-btn { width: 54px; height: 54px; border-radius: 11px; gap: 8px; }
  .hero_burger-btn span { width: 27px; height: 2px; }

  .nav-section-pill { height: 60px; padding: 0 38px; font-size: 24px; }

  .nav-contact { padding: 18px; border-radius: 15px; font-size: 19px; }
  .nav-contact img { width: 26px; height: 26px; }

  .nav-item { padding: 16px; border-radius: 13px; }
  .nav-item__left { gap: 12px; }
  .nav-item__text { font-size: 19px; }
}

@media (min-width: 480px) {
  .container { max-width: 460px; }
  .fullscreen-nav__inner { max-width: 460px; }

  .header__inner { padding: 14px 0; }
  .header__logo { width: 148px; }

  .header_tumpler_text,
  .header_tumpler_text_dekor { font-size: 17px; }

  .hero_burger-btn { width: 58px; height: 58px; border-radius: 12px; gap: 9px; }
  .hero_burger-btn span { width: 29px; height: 2px; }

  .nav-section-pill {
    height: 64px;
    padding: 0 42px;
    font-size: 26px;
    margin-top: 12px;
    margin-bottom: 22px;
  }

  .nav-section-label-icon { width: 15px; height: 15px; }

  .nav-contacts { margin-bottom: 28px; }

  .nav-contact { padding: 20px; border-radius: 16px; font-size: 20px; }
  .nav-contact img { width: 28px; height: 28px; }

  .fullscreen-nav__inner { padding: 86px 0 30px; }

  .fullscreen-nav__list { gap: 10px; }
  .nav-item { padding: 18px; border-radius: 14px; }
  .nav-item__left { gap: 14px; }
  .nav-item__text { font-size: 20px; }
}

@media (min-width: 540px) {
  .container { max-width: 520px; }
  .fullscreen-nav__inner { max-width: 520px; }

  .header__inner { padding: 15px 0; }
  .header__logo { width: 160px; }

  .header_tumpler_text,
  .header_tumpler_text_dekor { font-size: 18px; }

  .hero_burger-btn { width: 62px; height: 62px; border-radius: 13px; gap: 10px; }
  .hero_burger-btn span { width: 31px; height: 2px; }

  .nav-section-pill {
    height: 68px;
    padding: 0 46px;
    font-size: 28px;
    margin-top: 14px;
    margin-bottom: 24px;
  }

  .nav-section-label-icon { width: 16px; height: 16px; }

  .nav-contact { padding: 22px; border-radius: 18px; font-size: 21px; }
  .nav-contact img { width: 30px; height: 30px; }

  .fullscreen-nav__inner { padding: 92px 0 32px; }

  .nav-item { padding: 20px; border-radius: 15px; }
  .nav-item__left { gap: 15px; }
  .nav-item__text { font-size: 21px; }
}

@media (min-width: 600px) {
  .container { max-width: 580px; }
  .fullscreen-nav__inner { max-width: 580px; }

  .header__inner { padding: 16px 0; }
  .header__logo { width: 172px; }

  .header_tumpler_text,
  .header_tumpler_text_dekor { font-size: 19px; }

  .hero_burger-btn { width: 66px; height: 66px; border-radius: 14px; gap: 10px; }
  .hero_burger-btn span { width: 33px; height: 2px; }

  .nav-section-pill {
    height: 72px;
    padding: 0 50px;
    font-size: 30px;
    margin-top: 16px;
    margin-bottom: 26px;
  }

  .nav-section-label-icon { width: 17px; height: 17px; }

  .nav-contacts { margin-bottom: 32px; }

  .nav-contact { padding: 24px; border-radius: 20px; font-size: 22px; }
  .nav-contact img { width: 32px; height: 32px; }

  .fullscreen-nav__inner { padding: 98px 0 34px; }

  .fullscreen-nav__list { gap: 12px; }
  .nav-item { padding: 22px; border-radius: 16px; }
  .nav-item__left { gap: 16px; }
  .nav-item__text { font-size: 22px; }
}

/* =========================================================
   639px — final mobile
========================================================= */
@media (min-width: 639px) {
  .container { max-width: 639px; }
  .fullscreen-nav__inner { max-width: 639px; }

  .header__inner { padding: 18px 0; }
  .header__logo { width: 184px; }

  .header_tumpler_text,
  .header_tumpler_text_dekor { font-size: 20px; }

  .hero_burger-btn { width: 62px; height: 56px; border-radius: 8px; gap: 6px; }
  .hero_burger-btn span { width: 24px; height: 1.5px; }

  .nav-section-pill {
    height: 76px;
    padding: 0 54px;
    font-size: 32px;
    margin-top: 18px;
    margin-bottom: 28px;
  }

  .nav-section-label-icon { width: 18px; height: 18px; }

  .nav-contacts { margin-bottom: 36px; }

  .nav-contact { padding: 26px; border-radius: 22px; font-size: 23px; }
  .nav-contact img { width: 34px; height: 34px; }

  .fullscreen-nav__inner { padding: 104px 0 36px; }

  .nav-item { padding: 24px; border-radius: 18px; }
  .nav-item__left { gap: 18px; }
  .nav-item__text { font-size: 23px; }
}

/* =========================================================
   640px — transition layer (leave as-is from your baseline)
========================================================= */
@media (min-width: 640px) {
  .container { max-width: 640px; }
  .fullscreen-nav__inner { max-width: 640px; padding: 96px 0 40px; }

  .header__inner { padding: 16px 0; }

  .header__logo {
    width: 137px;
    height: 45px;
    object-fit: contain;
  }

  .header_btn_wrap { gap: 30px; }

  .header_tumpler_text,
  .header_tumpler_text_dekor { font-size: 18px; }

  .header-spacer { height: 64px; }

  .kontakt-wrapper {
    display: flex;
    position: relative;

    width: 130px;
    height: 56px;

    align-items: center;
    justify-content: center;

    background: #28e1e7;
    border-radius: 8px;

    cursor: pointer;
    overflow: hidden;
  }

  .kontakt-text {
    font-family: "Poppins", sans-serif;
    color: #ffffff;
    z-index: 2;
    transition: opacity .2s ease;
  }

  .kontakt-icons {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: rgba(40, 225, 231, .55);
    opacity: 0;
    transition: opacity .25s ease;
  }

  .kontakt-wrapper.open .kontakt-text { opacity: 0; }
  .kontakt-wrapper.open .kontakt-icons { opacity: 1; }

  .kontakt-icons img { width: 22px; height: 22px; display: block; }

  .hero_burger-btn {
    width: 62px;
    height: 56px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 6px;

    background: #212121;
    border-radius: 8px;
    border: none;
    cursor: pointer;

    transition: background-color .3s ease;
  }

  .hero_burger-btn span {
    width: 24px;
    height: 1.5px;
    background: #ffffff;
  }

  .header--dark .hero_burger-btn { background: #ffffff; }
  .header--dark .hero_burger-btn span { background: #0e0e0e; }

  .fullscreen-nav__list { gap: 12px; }

  .nav-item { padding: 20px; border-radius: 16px; }
  .nav-item__left { gap: 14px; }
  .nav-item__text { font-size: 21px; }

  .nav-contact { padding: 22px; border-radius: 18px; font-size: 21px; }
  .nav-contact img { width: 30px; height: 30px; }
}




/* =============================
   NAV SECTION PILL — compact version (320 → 639)
============================= */

/* BASE 320 */
.nav-section-pill {
  height: 40px;
  padding: 0 18px;
  margin-top: 8px;
  margin-bottom: 16px;

  border-radius: 40px;

  font-size: 16px;
  line-height: 1;
}

.nav-section-label-icon {
  width: 9px;
  height: 9px;
}

/* 360 */
@media (min-width: 360px) {
  .nav-section-pill {
    height: 42px;
    padding: 0 20px;
    font-size: 17px;
  }

  .nav-section-label-icon {
    width: 10px;
    height: 10px;
  }
}

/* 390 */
@media (min-width: 390px) {
  .nav-section-pill {
    height: 44px;
    padding: 0 22px;
    font-size: 17px;
  }
}

/* 412 */
@media (min-width: 412px) {
  .nav-section-pill {
    height: 46px;
    padding: 0 24px;
    font-size: 18px;
  }
}

/* 428 */
@media (min-width: 428px) {
  .nav-section-pill {
    height: 48px;
    padding: 0 26px;
    font-size: 18px;
  }
}

/* 480 */
@media (min-width: 480px) {
  .nav-section-pill {
    height: 50px;
    padding: 0 28px;
    font-size: 19px;
  }

  .nav-section-label-icon {
    width: 11px;
    height: 11px;
  }
}

/* 540 */
@media (min-width: 540px) {
  .nav-section-pill {
    height: 52px;
    padding: 0 30px;
    font-size: 19px;
  }
}

/* 600 */
@media (min-width: 600px) {
  .nav-section-pill {
    height: 54px;
    padding: 0 32px;
    font-size: 20px;
  }
}

/* 639 — final mobile */
@media (min-width: 639px) {
  .nav-section-pill {
    height: 56px;
    padding: 0 34px;
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 20px;
  }

  .nav-section-label-icon {
    width: 12px;
    height: 12px;
  }
}

/* =========================
   HERO (320–639) + 640 TRANSITION
   Section: .hero-left.hero-section#hero
========================= */

/* HERO WRAP */
.hero-left {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* FILTERS */

.filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

/* FILTER */
.hero_filter {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 44px;

  padding: 10px 18px;
  gap: 10px;

  border-radius: 35px;
  background: #F9F7F7;

  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* TEXT */
.hero_filter_text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1D;
  text-align: center;
  transition: color 0.15s ease;
}

/* DOT */
.hero_filter_dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1D1D1D;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

/* ===== DEFAULT STATE ===== */

/* левый активен ТОЛЬКО точкой */
.hero_filters_left .hero_filter_dot {
  background: #ACE238;
}

/* ===== ACTIVE (клик) ===== */

.hero_filter.is-active {
  background: #262626;
}

.hero_filter.is-active .hero_filter_text {
  color: #ffffff;
}

.hero_filter.is-active .hero_filter_dot {
  background: #ACE238;
}

/* MOBILE TOUCH FIX */
@media (hover: none) and (pointer: coarse) {
  .hero_filter,
  .hero_filter_text,
  .hero_filter_dot {
    transition: none;
  }
}




/* TITLE */
.hero-title_text {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  line-height: 1.2;
  margin-top: 18px;

  word-break: keep-all;
  word-spacing: -0.22em;

  transform: translateZ(0);
  will-change: transform;
}

.hero-title_text span {
  word-spacing: normal;
}

.hero-title_text_dekor {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #28E1E7;
  text-decoration-thickness: 3px;
}

/* MAP */
.clients-badge {
  width: 100%;
  margin-top: 10px;
}

.clients-badge a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: 100%;
  gap: 12px;

  text-decoration: none;
}

.map-text {
  flex: 1;
  min-width: 0;
}

.Mapa_text {
  margin: 0;
  line-height: 1.45;
  text-decoration: underline;
}

.map-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.map-icon img {
  width: 48px;
  height: 48px;
  transition: transform 0.8s ease;
}

.map-icon img.is-rotating {
  transform: rotate(360deg);
}

/* IMAGES */
.hero-img-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;

  width: 100%;
  max-width: 100%;

  margin-top: 10px;
}

.hero-img-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}

.hero-IT_img {
  width: 126px;
  height: 150px;
}

.hero-monitoring_img {
  width: 150px;
  height: 103px;
}

.hero-IT_img img,
.hero-monitoring_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* JOIN BOX */
.client-card {
  width: 100%;
  max-width: 100%;
  height: 115px;

  background: #1D1D1D;
  border-radius: 16px;
  padding: 12px 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 55px;
}

.green-box {
  width: 88px;
  height: 67px;
  background: #ACE238;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.join-now {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  color: #1D1D1D;
  text-align: center;
  line-height: 1.1;
}

/* USERS COUNT */
.users-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.users-count-number {
  display: flex;
  align-items: baseline;
}

.counter-value,
.counter-plus {
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ACE238;
  line-height: 1;
}

.counter-plus {
  margin-left: 2px;
}

.users-count_text {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
}

/* KONSULTACJA — MOBILE */
.Konsultacja--mobile {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  margin-top: 20px;
}

.consult-link {
  display: block;
  width: 100%;
}

.consult-btn-wrapper {
  width: 100%;
}

.consult-btn {
  display: none;
  width: 100%;
  height: auto;
}

.lang-pl .consult-btn_pl_black,
.lang-ua .consult-btn_ua_black {
  display: block;
}

#consultBtn:hover .consult-btn_pl_black,
#consultBtn:hover .consult-btn_ua_black {
  display: none;
}

#consultBtn:hover .consult-btn_pl_green,
#consultBtn:hover .consult-btn_ua_green {
  display: block;
}

#consultBtn.active .consult-btn_pl_black,
#consultBtn.active .consult-btn_ua_black {
  display: none;
}

#consultBtn.active .consult-btn_pl_green,
#consultBtn.active .consult-btn_ua_green {
  display: block;
}

/* =========================
   SCALE LADDER (min-width)
========================= */

@media (min-width: 360px) {
  .filters { gap: 11px; margin-top: 28px; }

  .hero_filters_left,
  .hero_filters_right { height: 46px; padding: 11px 20px; border-radius: 37px; }

  .hero-title_text { font-size: 31px; margin-top: 20px; }

  .clients-badge { margin-top: 11px; }
  .map-icon { width: 58px; height: 58px; }
  .map-icon img { width: 50px; height: 50px; }

  .hero-img-wrap { gap: 24px; margin-top: 11px; }
  .hero-IT_img { width: 138px; height: 165px; }
  .hero-monitoring_img { width: 165px; height: 114px; }
  .hero-IT_img img,
  .hero-monitoring_img img { border-radius: 17px; }

  .client-card { height: 122px; border-radius: 17px; padding: 13px 18px; gap: 60px; }
  .green-box { width: 96px; height: 72px; border-radius: 13px; }
  .join-now { font-size: 15px; }
  .counter-value,
  .counter-plus { font-size: 26px; }

  .Konsultacja--mobile { margin-top: 22px; }
}

@media (min-width: 390px) {
  .filters { gap: 12px; margin-top: 30px; }

  .hero_filters_left,
  .hero_filters_right { height: 48px; padding: 12px 22px; border-radius: 39px; }

  .hero_filter_text { font-size: 15px; }

  .hero-title_text { font-size: 32px; margin-top: 22px; }

  .clients-badge { margin-top: 12px; }
  .map-icon { width: 60px; height: 60px; }
  .map-icon img { width: 52px; height: 52px; }

  .hero-img-wrap { gap: 26px; margin-top: 12px; }
  .hero-IT_img { width: 148px; height: 176px; }
  .hero-monitoring_img { width: 176px; height: 122px; }

  .client-card { height: 130px; padding: 14px 20px; gap: 66px; }
  .green-box { width: 104px; height: 78px; }
  .join-now { font-size: 16px; }
  .counter-value,
  .counter-plus { font-size: 28px; }

  .Konsultacja--mobile { margin-top: 24px; }
}

@media (min-width: 412px) {
  .filters { gap: 13px; margin-top: 32px; }

  .hero_filters_left,
  .hero_filters_right { height: 49px; padding: 12px 23px; border-radius: 41px; }

  .hero-title_text { font-size: 33px; margin-top: 23px; }

  .map-icon { width: 62px; height: 62px; }
  .map-icon img { width: 54px; height: 54px; }

  .hero-img-wrap { gap: 28px; }
  .hero-IT_img { width: 155px; height: 184px; }
  .hero-monitoring_img { width: 184px; height: 127px; }

  .client-card { height: 136px; gap: 70px; }
  .green-box { width: 108px; height: 82px; }
  .counter-value,
  .counter-plus { font-size: 29px; }
}

@media (min-width: 428px) {
  .filters { gap: 14px; margin-top: 34px; }

  .hero_filters_left,
  .hero_filters_right { height: 50px; padding: 13px 24px; border-radius: 43px; }

  .hero-title_text { font-size: 33px; margin-top: 24px; }

  .clients-badge { margin-top: 13px; }
  .map-icon { width: 64px; height: 64px; }
  .map-icon img { width: 56px; height: 56px; }

  .hero-img-wrap { gap: 30px; }
  .hero-IT_img { width: 160px; height: 190px; }
  .hero-monitoring_img { width: 190px; height: 131px; }

  .client-card { height: 140px; padding: 15px 22px; gap: 74px; }
  .green-box { width: 112px; height: 86px; }
  .counter-value,
  .counter-plus { font-size: 30px; }
}

@media (min-width: 480px) {
  .filters { gap: 16px; margin-top: 38px; }

  .hero_filters_left,
  .hero_filters_right { height: 54px; padding: 14px 28px; border-radius: 48px; }

  .hero-title_text { font-size: 34px; margin-top: 26px; }
  .hero-title_text_dekor { text-decoration-thickness: 4px; }

  .clients-badge { margin-top: 15px; }
  .map-icon { width: 68px; height: 68px; }
  .map-icon img { width: 60px; height: 60px; }

  .hero-img-wrap { gap: 34px; margin-top: 14px; }
  .hero-IT_img { width: 180px; height: 214px; }
  .hero-monitoring_img { width: 214px; height: 148px; }
  .hero-IT_img img,
  .hero-monitoring_img img { border-radius: 19px; }

  .client-card { height: 150px; border-radius: 19px; padding: 16px 26px; gap: 86px; }
  .green-box { width: 128px; height: 98px; border-radius: 15px; }
  .join-now { font-size: 18px; }
  .counter-value,
  .counter-plus { font-size: 32px; }
  .users-count_text { font-size: 13px; }

  .Konsultacja--mobile { margin-top: 28px; }
}

@media (min-width: 540px) {
  .filters { gap: 18px; margin-top: 44px; }

  .hero_filters_left,
  .hero_filters_right { height: 58px; padding: 16px 32px; border-radius: 52px; }

  .hero_filter_text { font-size: 16px; }

  .hero-title_text { font-size: 34px; margin-top: 28px; }

  .map-icon { width: 72px; height: 72px; }
  .map-icon img { width: 64px; height: 64px; }

  .hero-img-wrap { gap: 38px; }
  .hero-IT_img { width: 198px; height: 236px; }
  .hero-monitoring_img { width: 236px; height: 163px; }
  .hero-IT_img img,
  .hero-monitoring_img img { border-radius: 20px; }

  .client-card { height: 160px; border-radius: 20px; padding: 18px 30px; gap: 98px; }
  .green-box { width: 140px; height: 108px; border-radius: 16px; }
  .join-now { font-size: 19px; }
  .counter-value,
  .counter-plus { font-size: 34px; }

  .Konsultacja--mobile { margin-top: 32px; }
}

@media (min-width: 600px) {
  .filters { gap: 20px; margin-top: 48px; }

  .hero_filters_left,
  .hero_filters_right { height: 60px; padding: 18px 36px; border-radius: 56px; }

  .hero-title_text { font-size: 35px; margin-top: 30px; }
  .hero-title_text_dekor { text-decoration-thickness: 4px; }

  .clients-badge { margin-top: 18px; }
  .map-icon { width: 74px; height: 74px; }
  .map-icon img { width: 66px; height: 66px; }

  .hero-img-wrap { gap: 42px; margin-top: 16px; }
  .hero-IT_img { width: 214px; height: 256px; }
  .hero-monitoring_img { width: 256px; height: 177px; }

  .client-card { height: 168px; border-radius: 22px; padding: 20px 34px; gap: 108px; }
  .green-box { width: 150px; height: 116px; border-radius: 18px; }
  .join-now { font-size: 20px; }
  .counter-value,
  .counter-plus { font-size: 36px; }

  .Konsultacja--mobile { margin-top: 36px; }
}

@media (min-width: 639px) {
  .filters { gap: 22px; margin-top: 52px; }

  .hero_filters_left,
  .hero_filters_right { height: 62px; padding: 20px 40px; border-radius: 60px; }

  .hero-title_text { font-size: 35px; margin-top: 32px; }
  .hero-title_text_dekor { text-decoration-thickness: 4px; }

  .clients-badge { margin-top: 20px; }
  .map-icon { width: 76px; height: 76px; }
  .map-icon img { width: 68px; height: 68px; }

  .hero-img-wrap { gap: 46px; margin-top: 18px; }
  .hero-IT_img { width: 228px; height: 272px; }
  .hero-monitoring_img { width: 272px; height: 188px; }

  .client-card { height: 176px; border-radius: 24px; padding: 22px 38px; gap: 116px; }
  .green-box { width: 160px; height: 124px; border-radius: 20px; }
  .join-now { font-size: 21px; }
  .counter-value,
  .counter-plus { font-size: 38px; }

  .Konsultacja--mobile { margin-top: 40px; }
}

/* =========================
   640 TRANSITION (not tablet)
========================= */
@media (min-width: 640px) {
  .hero-left { gap: 22px; }
  .hero-title_text { font-size: 35px; }
}






/* ======================================
   HERO-T (TABLET BASE BLOCK)
====================================== */

.hero-t {
  margin: 0 auto;
  max-width: 720px; /* контейнер 768 с воздухом */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
/* ========== FILTERS ========== */

.hero-t__filters {
  display: flex;
  gap: 20px;
  margin-top: 45px;
}

.hero-t__filter {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 10px 18px;
  gap: 10px;

  border-radius: 35px;
  background: #F9F7F7;

  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hero-t__filter--left { width: 224px; }
.hero-t__filter--right { max-width: 220px; }

/* TEXT */
.hero-t__filter-text {
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1D;
  transition: color 0.15s ease;
}

/* DOT */
.hero-t__filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1D1D1D;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

/* ===== DEFAULT ===== */
.hero-t__filter--left .hero-t__filter-dot {
  background: #ACE238;
}

/* ===== ACTIVE ===== */
.hero-t__filter.is-active {
  background: #262626;
}

.hero-t__filter.is-active .hero-t__filter-text {
  color: #ffffff;
}

.hero-t__filter.is-active .hero-t__filter-dot {
  background: #ACE238;
}

.hero-t__title {
  display: block;
  padding-top: 20px;
  margin-bottom: 50px;
  font-size: 35px;
  line-height: 1.2;
  word-break: keep-all;
  word-spacing: -0.22em;
  transform: translateZ(0);
  will-change: transform;
}

.hero-t__title span {
  word-spacing: normal;
}

.hero-t__title-dekor {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #28E1E7;
  text-decoration-thickness: 3px;
  position: relative;
  z-index: 1;
}

/* ======================================
   CTA + MAP (TABLET ISOLATED)
====================================== */

.Konsultacja-tablet {
  position: relative;
  width: fit-content;
  height: fit-content;
}

.consult-btn-tablet {
  display: none;
}

.lang-pl .consult-btn_pl_black-tablet,
.lang-ua .consult-btn_ua_black-tablet {
  display: inline-block;
}

#consultBtn-tablet:hover .consult-btn_pl_black-tablet,
#consultBtn-tablet:hover .consult-btn_ua_black-tablet {
  display: none;
}

#consultBtn-tablet:hover .consult-btn_pl_green-tablet,
#consultBtn-tablet:hover .consult-btn_ua_green-tablet {
  display: inline-block;
}

#consultBtn-tablet.active .consult-btn_pl_black-tablet,
#consultBtn-tablet.active .consult-btn_ua_black-tablet {
  display: none;
}

#consultBtn-tablet.active .consult-btn_pl_green-tablet,
#consultBtn-tablet.active .consult-btn_ua_green-tablet {
  display: inline-block;
}

.Konsultacja_maps_wrap-tablet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}

.clients-badge-tablet {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clients-badge-tablet img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  transform-origin: center;
}

@keyframes spinZoom-tablet {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

.clients-badge-tablet:hover img {
  animation: spinZoom-tablet 0.6s ease;
}

.clients-badge-tablet a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  max-width: 260px;
}

.Mapa_text-tablet {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  word-break: break-word;
  max-width: 160px;
}

/* ======================================
   HERO MEDIA (TABLET)
====================================== */

.hero-img-wrap-tablet {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 50px;
}

.hero-right-column-tablet {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.hero-IT_img-tablet {
  width: 165px;
  height: 200px;
}

.hero-monitoring_img-tablet {
  width: 208px;
  height: 150px;
}

.hero-IT_img-tablet img,
.hero-monitoring_img-tablet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* ========== JOIN BOX ========== */

.client-card-tablet {
  width: 227px;
  height: 115px;
  background: #1D1D1D;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 16px;
}

.green-box-tablet {
  width: 78px;
  height: 67px;
  background: #ACE238;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
    flex-shrink: 0;
}

.join-now-tablet {
 color: #1D1D1D;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;

  line-height: 1;
  text-decoration: underline;
  padding: 5px;
}

.users-count-tablet {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.users-count_text_600-tablet {
  font-family: "Open Sans", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #ACE238;

  line-height: 1;
  text-transform: capitalize;

  text-align: center;
  transition: transform 0.3s ease-in-out;
}

.users-count_text-tablet {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #FFF;
  text-align: center;
  text-transform: capitalize;
}

/* ========== ANIMATION (TABLET — VISIBLE) ========== */

.hero-IT_img-tablet,
.hero-monitoring_img-tablet,
.client-card-tablet {
  transform: none;
  transition: none;
}

.hero-IT_img-tablet.active,
.hero-monitoring_img-tablet.active,
.client-card-tablet.active {
  transform: none;
}


/* ======================================
   HERO VERSION SWITCH
   Mobile only: <768
   Tablet+Desktop: >=768
====================================== */

#hero-tablet { display: none; }

@media (min-width: 768px) {
  #hero { display: none; }
  #hero-tablet { display: block; }
}
/* ======================================
   HERO CASCADE TIMELINE (TOP → DOWN, LEFT → RIGHT) — SMOOTH + FASTER BOTTOM
   Behavior:
   1) All elements appear smoothly
   2) Left starts first, right follows (left → right)
   3) Timeline goes from top to bottom
   4) Bottom (images + join/counter) animates a bit faster to feel snappier
   Works for: #hero + #hero-tablet with .in-view (IntersectionObserver)
====================================== */

/* ---------- BASE (any observed item) ---------- */
#hero .animate-left,
#hero .cascade-left,
#hero .cascade-right,
#hero .cascade-up-img,
#hero-tablet .animate-left,
#hero-tablet .cascade-left,
#hero-tablet .cascade-right,
#hero-tablet .cascade-up-img {
  opacity: 0;
  transform: translateX(-24px);
  will-change: opacity, transform;

  transition-property: opacity, transform;
  transition-duration: 0.55s, 0.70s;
  transition-timing-function: ease-out, cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: 0s, 0s;
}

/* direction defaults */
#hero .cascade-right,
#hero-tablet .cascade-right {
  transform: translateX(24px);
}

#hero .cascade-up-img,
#hero-tablet .cascade-up-img {
  transform: translateY(18px);
}

/* in-view state */
#hero .in-view,
#hero-tablet .in-view {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* ---------- TIMELINE (TOP → DOWN, LEFT → RIGHT) ---------- */
/* Step 1: Filter LEFT */
#hero .hero_filters_left,
#hero-tablet .hero-t__filter--left {
  transition-delay: 0.00s, 0.00s;
}

/* Step 2: Filter RIGHT */
#hero .hero_filters_right,
#hero-tablet .hero-t__filter--right {
  transition-delay: 0.10s, 0.10s;
}

/* Step 3: Title */
#hero .hero-title_text,
#hero-tablet .hero-t__title {
  transition-delay: 0.20s, 0.20s;
}

/* Step 4: Map + CTA block */
#hero .clients-badge,
#hero-tablet .Konsultacja_maps_wrap-tablet {
  transition-delay: 0.30s, 0.30s;
}

/* Step 5: Images (left then right) — slightly earlier */
#hero .hero-IT_img,
#hero-tablet .hero-IT_img-tablet {
  transition-delay: 0.36s, 0.36s;
}

#hero .hero-monitoring_img,
#hero-tablet .hero-monitoring_img-tablet {
  transition-delay: 0.44s, 0.44s;
}

/* Join box (last) — earlier */
#hero .client-card,
#hero-tablet .client-card-tablet {
  transition-delay: 0.52s, 0.52s;
}

/* ---------- FASTER BOTTOM FEEL (images + join/counter) ---------- */
#hero .hero-IT_img,
#hero .hero-monitoring_img,
#hero .client-card,
#hero-tablet .hero-IT_img-tablet,
#hero-tablet .hero-monitoring_img-tablet,
#hero-tablet .client-card-tablet {
  transition-duration: 0.38s, 0.52s;
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #hero .animate-left,
  #hero .cascade-left,
  #hero .cascade-right,
  #hero .cascade-up-img,
  #hero-tablet .animate-left,
  #hero-tablet .cascade-left,
  #hero-tablet .cascade-right,
  #hero-tablet .cascade-up-img {
    transition: none;
    transform: none;
    opacity: 1;
  }
}



/* ======================================
   HERO VISIBILITY SWITCH ONLY
   Mobile <768: show #hero, hide #hero-tablet
   Tablet+Desktop >=768: hide #hero, show #hero-tablet
   No layout side-effects
====================================== */

#hero-tablet {
  display: none;
}

@media (min-width: 768px) {
  #hero {
    display: none;
  }

  /* ВАЖНО: flex, потому что внутри tablet-hero у тебя flex-архитектура */
  #hero-tablet {
    display: flex;
  }
}

/* ======================================
   HERO TABLET – CTA + MAP FIX
====================================== */
@media (min-width: 768px) {

  .Konsultacja_maps_wrap-tablet {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* вместо space-between */
    gap: 200px; /* контролируем расстояние вручную */
  }

}


/* ============================================================
   VIDEO MASK — MOBILE FINAL (320–639)
   Чистый блок без дублей и мусора
   Куда вставлять:
   1) Удали все старые/дублирующиеся куски Video Mask (mobile)
   2) Вставь этот блок единым куском
============================================================ */

/* =========================
   01) SECTION + INNER (LAYOUT)
========================= */
#video_mask-section.video_mask-section {
  padding-top: 20px;
  margin-bottom: 50px;
}

#video_mask-section .video_mask-inner {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 656px;
  margin: 0 auto;
}

/* =========================
   02) BASE LAYERS (VIDEO + OVERLAY) + CLIP
========================= */
#video_mask-section .video-mask,
#video_mask-section .video_mask-content {
  position: absolute;
  inset: 0;
  clip-path: url(#video-clip-300);
}

#video_mask-section .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   03) POINTER EVENTS SAFETY
========================= */
#video_mask-section .video_mask-content {
  pointer-events: auto;
}

#video_mask-section .contact-sticker-wrap {
  pointer-events: none;
}

#video_mask-section .cards-row,
#video_mask-section .promo-tablet,
#video_mask-section .contact-sticker,
#video_mask-section .promo-sticker {
  pointer-events: auto;
}

/* =========================
   04) STICKERS (TOP ROW)
========================= */
#video_mask-section .contact-sticker-wrap {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 22;
}

#video_mask-section .contact-sticker {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 18px;
  min-width: 210px;
  height: 48px;

  background: #fff;
  border-radius: 35px;
  box-shadow: 0 4px 4px rgba(40, 225, 231, 0.34);
}

#video_mask-section .notification-bell {
  width: 26px;
  height: 26px;
}

#video_mask-section .notification-bell_text {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: #313131;
}

/* promo-sticker (по умолчанию скрыт) */
#video_mask-section .promo-sticker {
  display: none;
  margin-right: 80px;

  align-items: center;
  gap: 10px;

  padding: 0 18px;
  min-width: 200px;
  height: 48px;

  background: #39E4F0;
  border-radius: 35px;
}

#video_mask-section .promo-sticker.is-visible {
  display: flex;
}

#video_mask-section .promo-sticker_icon {
  width: 18px;
  height: 18px;
}

#video_mask-section .promo-sticker_text {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  color: #fff;
}

/* =========================
   05) CARDS ROW (CENTER) + TOUCH SWIPE
========================= */
#video_mask-section .cards-row {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin-top: 55px;

  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;

  height: 340px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  overflow: visible;
  z-index: 15;

  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* анти-выделение/anti-drag при свайпе */
#video_mask-section .cards-row,
#video_mask-section .cards-row * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#video_mask-section .service-card {
  width: 150px;
  height: 320px;
  flex-shrink: 0;

  transform: scale(0.9);
  opacity: 0.85;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

#video_mask-section .service-card.is-center {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}

#video_mask-section .service-card__inner {
  width: 100%;
  height: 100%;

  background: #fff;
  border-radius: 20px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  padding-bottom: 10px;
}

#video_mask-section .service-card__img {
  width: 150px;
  height: 210px;
  object-fit: cover;
  border-radius: 14px;
}

#video_mask-section .service-card__title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

#video_mask-section .service-card__text {
  font-family: Poppins, sans-serif;
  font-size: 11px;
  text-align: center;
  max-width: 140px;
}

#video_mask-section .service-card__btn {
  width: 135px;
  height: 30px;

  background: #262626;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-size: 13px;
  color: #fff;
  text-decoration: none;
}

/* idle lift */
#video_mask-section .cards-row.is-idle .service-card__inner {
  animation: idleLift 3s ease-in-out infinite;
}

#video_mask-section .cards-row.is-idle .service-card:nth-child(2) .service-card__inner {
  animation-delay: 0.2s;
}

#video_mask-section .cards-row.is-idle .service-card:nth-child(3) .service-card__inner {
  animation-delay: 0.4s;
}

@keyframes idleLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* =========================
   06) PROMO BLOCK (BOTTOM) + FAILSAFE ANIM MODE
========================= */
#video_mask-section .promo-tablet {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin-bottom: 5px;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;

  z-index: 20;

  transform: translateX(0);
  transition: opacity 0.5s ease-out;
  opacity: 1;
}

#video_mask-section .promo-tablet__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#video_mask-section .promo-tablet__title {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;

  transform: translateX(-32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#video_mask-section .promo-tablet__subtitle {
  color: #8E8C8C;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.3;

  transform: translateX(-32px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

#video_mask-section .promo-tablet__discount {
  color: #B3FA46;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;

  transform: translateX(-32px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

#video_mask-section .promo-tablet__btn {
  width: 56px;
  height: 56px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: #F9F7F7;
  border-radius: 8px;
  border: none;
  cursor: pointer;

  align-self: flex-end;
  margin-left: auto;
  margin-right: 20px;

  opacity: 1;
  transform: translateX(0);

  position: relative;
  z-index: 25;

  animation: promoPulseTablet 2.6s ease-in-out infinite;
}

/* JS-only режим: сначала скрыть, потом показать через .promo-anim */
#video_mask-section .promo-tablet[data-anim="true"] {
  opacity: 0;
}

#video_mask-section .promo-tablet[data-anim="true"] .promo-tablet__title,
#video_mask-section .promo-tablet[data-anim="true"] .promo-tablet__subtitle,
#video_mask-section .promo-tablet[data-anim="true"] .promo-tablet__discount {
  opacity: 0;
}

#video_mask-section .promo-tablet[data-anim="true"] .promo-tablet__btn {
  opacity: 0;
  transform: translateX(32px);
}

#video_mask-section .promo-tablet[data-anim="true"].promo-anim {
  opacity: 1;
}

#video_mask-section .promo-tablet[data-anim="true"].promo-anim .promo-tablet__title {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.1s;
}

#video_mask-section .promo-tablet[data-anim="true"].promo-anim .promo-tablet__subtitle {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.25s;
}

#video_mask-section .promo-tablet[data-anim="true"].promo-anim .promo-tablet__discount {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.4s;
}

#video_mask-section .promo-tablet[data-anim="true"].promo-anim .promo-tablet__btn {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.55s;
}

/* =========================
   07) UNIFIED ANIMATIONS (PROJECT PATTERN)
   Bell pulse, promo pulse, tap pop
========================= */
#video_mask-section .notification-bell.pulse {
  animation: bell-pulse 1.6s ease-in-out infinite;
}

@keyframes bell-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@keyframes promoPulseTablet {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(40, 225, 231, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(40, 225, 231, 0.4);
  }
}

/* tap pop (JS добавляет .is-tap-pop и .is-tapping) */
#video_mask-section .is-tap-pop {
  transform: translateZ(0);
  will-change: transform;
}

#video_mask-section .is-tap-pop.is-tapping {
  animation: tapPop 0.14s ease-out;
}

@keyframes tapPop {
  0% { transform: scale(1); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* =========================
   08) RESPONSIVE WIDTH LADDER (CLIP SYNC)
========================= */
@media (min-width: 360px) {
  #video_mask-section .video_mask-inner { max-width: 340px; }
  #video_mask-section .video-mask,
  #video_mask-section .video_mask-content { clip-path: url(#video-clip-340); }
}

@media (min-width: 390px) {
  #video_mask-section .video_mask-inner { max-width: 370px; }
  #video_mask-section .video-mask,
  #video_mask-section .video_mask-content { clip-path: url(#video-clip-370); }
}

@media (min-width: 412px) {
  #video_mask-section .video_mask-inner { max-width: 392px; }
  #video_mask-section .video-mask,
  #video_mask-section .video_mask-content { clip-path: url(#video-clip-392); }
}

@media (min-width: 428px) {
  #video_mask-section .video_mask-inner { max-width: 408px; }
  #video_mask-section .video-mask,
  #video_mask-section .video_mask-content { clip-path: url(#video-clip-408); }
}

@media (min-width: 480px) { #video_mask-section .video_mask-inner { max-width: 460px; } }
@media (min-width: 540px) { #video_mask-section .video_mask-inner { max-width: 520px; } }
@media (min-width: 600px) { #video_mask-section .video_mask-inner { max-width: 580px; } }
@media (min-width: 639px) { #video_mask-section .video_mask-inner { max-width: 639px; } }








/* ============================================================
   VIDEO MASK — TABLET ONLY (>=768)
   Clean + isolated
   Все ключевые классы с суффиксом -tablet
   Контейнер: #video_mask-section-tablet
============================================================ */

/* =========================
   01) SECTION / WRAP
========================= */
#video_mask-section-tablet.video_mask-section-tablet {
  padding-top: 20px;
  margin-bottom: 50px;
}

#video_mask-section-tablet .video_mask-inner-tablet {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* если у тебя видео-маска как отдельный svg-элемент */
#video_mask-section-tablet .video-mask-svg-tablet {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
   02) OVERLAY LAYER
   Всё поверх видео
========================= */
#video_mask-section-tablet .video_mask-content-tablet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* точечно включаем клики только на интерактиве */
#video_mask-section-tablet .contact-sticker-wrap-tablet,
#video_mask-section-tablet .cards-wrapper-tablet,
#video_mask-section-tablet .promo-tablet-tablet,
#video_mask-section-tablet .promo-sticker-tablet,
#video_mask-section-tablet .contact-sticker-tablet {
  pointer-events: auto;
}

/* =========================
   03) STICKERS ROW (TOP)
========================= */
#video_mask-section-tablet .contact-sticker-wrap-tablet {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 22;
}

/* контактный стикер */
#video_mask-section-tablet .contact-sticker-tablet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 18px;
  min-width: 210px;
  height: 48px;

  background: #fff;
  border-radius: 35px;
  box-shadow: 0 4px 4px rgba(40, 225, 231, 0.34);
}

#video_mask-section-tablet .notification-bell-tablet {
  width: 26px;
  height: 26px;
}

/* pulse на колокольчике */
#video_mask-section-tablet .notification-bell-tablet.pulse {
  animation: bell-pulse-tablet 1.6s ease-in-out infinite;
}

@keyframes bell-pulse-tablet {
  0% { transform: scale(1); }
  50% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

#video_mask-section-tablet .notification-bell_text-tablet {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: #313131;
  line-height: 1;
}

/* промо-стикер (по умолчанию hidden, появляется через .is-visible) */
#video_mask-section-tablet .promo-sticker-tablet {
  display: none;
  margin-right: 80px;

  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 18px;
  min-width: 200px;
  height: 48px;

  background: #39E4F0;
  border-radius: 35px;

  z-index: 20;
}

#video_mask-section-tablet .promo-sticker-tablet.is-visible {
  display: flex;
}

#video_mask-section-tablet .promo-sticker_icon-tablet {
  width: 18px;
  height: 18px;
}

#video_mask-section-tablet .promo-sticker_text-tablet {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
}

/* =========================
   04) CARDS WRAPPER
========================= */
#video_mask-section-tablet .cards-wrapper-tablet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =========================
   05) FAN (DEFAULT)
========================= */
#video_mask-section-tablet .cards-row_service_fan-tablet {
  position: absolute;
  top: 45px;
  left: calc(50% - 42px);
  transform: translateX(-50%);

  display: flex;
  flex-direction: row;
  gap: 0;

  z-index: 15;
  opacity: 1;

  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
}

#video_mask-section-tablet .cards-row_service_fan-tablet.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: none;
}

#video_mask-section-tablet .service-card_fan-tablet {
  width: 190px;
  height: 370px;

  background-color: #fff;
  border-radius: 24px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  padding-bottom: 12px;
  position: relative;
}

#video_mask-section-tablet .service-card__img_fan-tablet {
  width: 192px;
  height: 264px;
  border-radius: 16px;
  object-fit: cover;
}

#video_mask-section-tablet .service-card__title_fan-tablet {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

#video_mask-section-tablet .service-card__text_fan-tablet {
  font-size: 12px;
  color: #1d1d1d;
  text-align: center;
  font-family: Poppins, sans-serif;
  max-width: 180px;
  text-transform: capitalize;
}

#video_mask-section-tablet .service-card__btn_fan-tablet {
  display: flex;
  width: 150px;
  height: 32px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #262626;
  text-decoration: none;
}

#video_mask-section-tablet .service-card__btn-text_fan-tablet {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

#video_mask-section-tablet .service-card__btn-arrow_fan-tablet {
  width: 10px;
  height: 10px;
}

/* позиционирование FAN-обёрток */
#video_mask-section-tablet .card-wrapper_internet_fan-tablet {
  position: relative;
  z-index: 16;
  transform: rotate(0deg) translate(40px, 0px);
  animation: bounceInternetTablet 3s ease-in-out infinite;
}

#video_mask-section-tablet .card-wrapper_monitoring_fan-tablet {
  position: relative;
  z-index: 15;
  transform: rotate(-10deg) translate(0px, 40px);
  animation: bounceMonitoringTablet 3s ease-in-out infinite;
  animation-delay: 0.8s;
}

#video_mask-section-tablet .card-wrapper_it_fan-tablet {
  position: relative;
  z-index: 14;
  transform: rotate(-25deg) translate(-40px, 160px);
  animation: bounceItTablet 3s ease-in-out infinite;
  animation-delay: 1.4s;
}

@keyframes bounceInternetTablet {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes bounceMonitoringTablet {
  0%, 100% { transform: rotate(-10deg) translate(40px, 40px); }
  50% { transform: rotate(-10deg) translate(40px, 20px); }
}

@keyframes bounceItTablet {
  0%, 100% { transform: rotate(-25deg) translate(60px, 160px); }
  50% { transform: rotate(-25deg) translate(60px, 140px); }
}

/* =========================
   06) ROW (AFTER FAN CLICK)
========================= */
#video_mask-section-tablet .cards-row_service-tablet {
  position: absolute;
  top: 156px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  display: flex;
  gap: 8px;

  z-index: 18;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#video_mask-section-tablet .cards-row_service-tablet.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* карточки 3-в-ряд */
#video_mask-section-tablet .service-card-tablet {
  width: 170px;
  height: 330px;

  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;

  padding-bottom: 15px;
}

#video_mask-section-tablet .service-card__img-tablet {
  width: 170px;
  height: 198px;
  object-fit: cover;
  border-radius: 13px;
  margin-bottom: 5px;
}

#video_mask-section-tablet .service-card__title-tablet {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  margin: 8px 0 6px;
  padding: 0 18px;

  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#video_mask-section-tablet .service-card__text-tablet {
  font-size: 12px;
  color: #1d1d1d;
  font-family: Poppins, sans-serif;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 5px;
  padding: 0 32px;
}

#video_mask-section-tablet .service-card__btn-tablet {
  display: flex;
  width: 150px;
  height: 36px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: #262626;
  text-decoration: none;
  margin-top: auto;
  padding: 0 14px;
}

#video_mask-section-tablet .service-card__btn-text-tablet {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

#video_mask-section-tablet .service-card__btn-arrow-tablet {
  width: 10px;
  height: 10px;
}

/* hover/active state (как у тебя) */
#video_mask-section-tablet .service-card-tablet,
#video_mask-section-tablet .service-card_fan-tablet {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#video_mask-section-tablet .service-card-tablet.active,
#video_mask-section-tablet .service-card_fan-tablet.active {
  transform: translateY(-6px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

/* подсветка кнопки */
#video_mask-section-tablet .service-card__btn-tablet.btn-active,
#video_mask-section-tablet .service-card__btn_fan-tablet.btn-active {
  background: #39E4F0;
  transition: background 0.3s ease;
}

/* =========================
   07) PROMO (BOTTOM)
========================= */
#video_mask-section-tablet .promo-tablet-tablet {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;

  z-index: 20;
  pointer-events: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.5s ease-out;
}

#video_mask-section-tablet .promo-tablet__text-tablet {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#video_mask-section-tablet .promo-tablet__title-tablet {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;

  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#video_mask-section-tablet .promo-tablet__subtitle-tablet {
  color: #8e8c8c;
  font-family: "Poppins", sans-serif;
  font-size: 12px;

  transform: translateX(-40px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

#video_mask-section-tablet .promo-tablet__discount-tablet {
  color: #B3FA46;
  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  font-weight: 600;

  transform: translateX(-40px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

/* кнопка */
#video_mask-section-tablet .promo-tablet__btn-tablet {
  width: 56px;
  height: 56px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-right: 30px;
  margin-bottom: 4px;

  background: #F9F7F7;
  border-radius: 8px;
  border: none;
  cursor: pointer;

  align-self: flex-end;

  animation: promoPulseTablet 2.6s ease-in-out infinite;

  opacity: 0;
  transform: translateX(40px);
}

/* pulse как у тебя */
@keyframes promoPulseTablet {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(40, 225, 231, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(40, 225, 231, 0.4);
  }
}

/* =========================
   08) PROMO CASCADE (promo-anim)
========================= */
#video_mask-section-tablet .promo-tablet-tablet.promo-anim {
  opacity: 1;
  transform: translateX(0);
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim .promo-tablet__title-tablet {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.1s;
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim .promo-tablet__subtitle-tablet {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.25s;
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim .promo-tablet__discount-tablet {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.4s;
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim .promo-tablet__btn-tablet {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.55s;
}


/* =========================
   VIDEO MASK LAYERS FIX (MOBILE)
   Цель: видео НЕ ловит клики, оверлей выше, интерактив кликается
========================= */

#video_mask-section .video_mask-inner {
  position: relative;
  height: 656px; /* важно, иначе absolute-слои могут схлопнуться */
}

/* ВИДЕО-СЛОЙ */
#video_mask-section .video-mask {
  position: absolute;
  inset: 0;
  z-index: 1;

  /* маска как у тебя в CSS */
  clip-path: url(#video-clip-300);

  /* ключ: видео-слой не должен съедать клики */
  pointer-events: none;
}

#video_mask-section .video-mask * {
  pointer-events: none;
}

#video_mask-section .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ОВЕРЛЕЙ С КАРТОЧКАМИ */
#video_mask-section .video_mask-content {
  position: absolute;
  inset: 0;
  z-index: 5;

  /* по умолчанию можно none, но интерактиву дадим auto ниже */
  pointer-events: none;

  /* если ты тоже клипаешь контент — оставь, если нет — убери */
  clip-path: url(#video-clip-300);
}

/* Разрешаем клики только интерактивным элементам */
#video_mask-section .contact-sticker,
#video_mask-section .promo-sticker,
#video_mask-section .cards-row_service_fan,
#video_mask-section .cards-row_service,
#video_mask-section .promo-tablet,
#video_mask-section .promo-tablet__btn {
  pointer-events: auto;
}

/* Важно: wrapper со стикерами должен быть выше */
#video_mask-section .contact-sticker-wrap { z-index: 22; }
#video_mask-section .cards-wrapper { z-index: 15; }
#video_mask-section .promo-tablet { z-index: 20; }

/* И твоя лесенка clip-path (если используешь) */
@media (min-width: 360px) {
  #video_mask-section .video-mask,
  #video_mask-section .video_mask-content { clip-path: url(#video-clip-340); }
}
@media (min-width: 390px) {
  #video_mask-section .video-mask,
  #video_mask-section .video_mask-content { clip-path: url(#video-clip-370); }
}
@media (min-width: 412px) {
  #video_mask-section .video-mask,
  #video_mask-section .video_mask-content { clip-path: url(#video-clip-392); }
}
@media (min-width: 428px) {
  #video_mask-section .video-mask,
  #video_mask-section .video_mask-content { clip-path: url(#video-clip-408); }
}



/* ============================================================
   VIDEO MASK VISIBILITY SWITCH
   Mobile <768  показываем mobile, прячем tablet
   Tablet >=768 показываем tablet, прячем mobile
   ============================================================ */

/* базово: mobile виден, tablet скрыт */
#video_mask-section { display: block; }
#video_mask-section-tablet { display: none; }

/* tablet и выше */
@media (min-width: 768px) {
  #video_mask-section { display: none; }
  #video_mask-section-tablet { display: block; }
}

/* ==========================================================
   VIDEO MASK VERSION VISIBILITY
   Mobile <768: mobile visible, tablet hidden
   Tablet >=768: tablet visible, mobile hidden
========================================================== */

#video_mask-section { display: block; }
#video_mask-section-tablet { display: none; }

@media (min-width: 768px) {
  #video_mask-section { display: none; }
  #video_mask-section-tablet { display: block; }
}

/* ==========================================================
   MOBILE PROMO TEXT SAFETY (ANTI-DRIFT)
========================================================== */
#video_mask-section .promo-tablet__title { white-space: normal; }
#video_mask-section .promo-tablet__subtitle,
#video_mask-section .promo-tablet__discount { max-width: 240px; }



/* ==========================================================
   SUBHERO VISIBILITY CONTROLLER (NO INLINE DISPLAY)
   Вставь в style.css ближе к правилам сабхиро/hero
========================================================== */

body.subhero-open .hero-section {
  display: none !important;
}

body.subhero-open #subhero-section {
  display: flex !important;
}





/* =========================================
   SUBHERO SECTION (MOBILE / 300px CONTAINER)
========================================= */



/* hidden by default */
.subhero-section {
  display: none;
  flex-direction: column;
}

/* hero + video */
.hero-section {
  display: block;
}

/* main wrapper */
.sub_hero-tablet {
  position: relative;
  width: 100%;
  padding-bottom: 40px;
  overflow: hidden;
}

/* =========================================
   VIDEO + OVERLAY
========================================= */

.sub_hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.sub_hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2;
}

/* =========================================
   CONTAINER (300px)
========================================= */

.sub_hero-container.container {
  width: 300px;
  max-width: 300px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 3;
}

.sub_hero-content {
  display: flex;
  flex-direction: column;
}

/* =========================================
   TEXT
========================================= */

.sub_hero-header_text {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;

  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sub_hero-subtitle {
  color: #8e8c8c;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  padding-top: 10px;
  padding-bottom: 10px;

  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.sub_hero-subtitle_text {
  color: #b3fa46;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
font-size: 16px;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
padding-bottom: 10px; 
 white-space: nowrap;
}

.sub_hero-animate .sub_hero-header_text,
.sub_hero-animate .sub_hero-subtitle,
.sub_hero-animate .sub_hero-subtitle_text {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================
   SUBHERO HEADER (LOCAL)
========================================= */

.subhero-header {
  position: relative;
  width: 100%;
  z-index: 5;

  display: flex;
  justify-content: center;

  padding-bottom: 24px;
  background: transparent;
}

.subhero-header__inner {
  position: relative;
  width: 300px;
  max-width: 300px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  padding-top: 12px;
}

.subhero-header__logo {
  max-width: 92px;
  height: auto;
  display: block;
}

.subhero-header .logo-light {
  display: none;
}

.subhero-header .logo-dark {
  display: block;
}

.subhero-header__btn-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* language */
.subhero-header__lang {
  display: flex;
  align-items: center;
  gap: 6px;

  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* базовый стиль текста языка */
.subhero-header__lang-text,
.subhero-header [data-lang-control] {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #ffffff;
}

/* активный язык — синее подчёркивание */
.subhero-header [data-lang-control].active-lang {
  text-decoration: underline;
  text-decoration-color: #28e1e7;
  text-underline-offset: 3px;
}


/* burger */
.subhero_burger-btn {
  width: 44px;
  height: 40px;

  border-radius: 8px;
  background: #ffffff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;

  border: none;
  cursor: pointer;
  padding: 0;
}

.subhero_burger-btn span {
  width: 18px;
  height: 1.5px;
  background: #0e0e0e;
}





.internet-price-title_wrap {
  display: flex;
  align-items: center;
  gap: 20px;
 margin-bottom: 15px;
 margin-top: 10px;
  }

.internet-price-title {
  color: #FFF;
  font-family: "Open Sans";
  font-size: 24px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  
}


/* ===============================
   SUBHERO CENNIK – MOBILE (300px)
   KABEL: TEXT ROW + CARDS
   =============================== */

.subhero-cennik {
  width: 300px;
  box-sizing: border-box;
}

/* row above each card (static, no JS) */
.cennik-tariff-row {
  width: 300px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 10px;
}

.cennik-tariff-row__icon-left,
.cennik-tariff-row__icon-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cennik-tariff-row__text {
  flex: 1;
  text-align: left;
  color: #ffffff;
  margin-left: 10px;
}

/* spacing between card blocks */
.subhero-cennik .cennik-card {
  margin-bottom: 16px;
}

/* ===============================
   CENNIK CARD – MOBILE (300px)
   ROW LINES LIKE .internet-price-row
   =============================== */

.cennik-card {
  width: 300px;
  background: #1E1E1E;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  color: #FFF;
}

/* шапка: height 70px */
.cennik-card__top {
  height: 70px;
  background: #28E1E7;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 93px;

  padding-left: 18px;
  padding-right: 18px;
  padding-top: 15px;

  align-items: start;
}

.cennik-card__badge {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.cennik-card__top-right {
  text-align: right;
}

.cennik-card__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-block;
}

/* тело карточки */
.cennik-card__body {
  padding: 0;
  box-sizing: border-box;
}

/* каждая строка = одинаковая высота, равномерно */
.cennik-card__row {
  background: #1E1E1E;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  min-height: 78px;

  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 18px;
  padding-right: 18px;

  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  box-sizing: border-box;
}

.cennik-card__row:last-child {
  border-bottom: 0;
}

.cennik-card__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.cennik-card__value {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: right;
  justify-self: end;
}

.cennik-card__row--strong .cennik-card__label {
  font-weight: 700;
}

/* Okres umowy: 24 miesiące / 24 місяці в 1 строку */
.cennik-card__value--term {
  display: block;
  text-align: right;
}

.value-top,
.value-bottom {
  display: block;
}

/* ===============================
   PRICE TEXT (FROM TABLET)
   =============================== */

.old-price {
  text-decoration: line-through;
  color: #B4AAAA;
  opacity: 0.4;
  font-weight: 600;
}

.new-price {
  color: #FFF;
  font-weight: 700;
}

.cennik-card__value--price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ===============================
   PROMO PILL (FROM TABLET)
   =============================== */

.promo {
  padding: 10px 14px;
  border: 2px solid #28E1E7;
  border-radius: 16px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cennik-card__value--promo {
  display: flex;
  justify-content: flex-end;
}

.cennik-icon-one {
  width: 5px;
  height: 10px;
  display: block;
}

.cennik-icon-two {
  width: 18px;
  height: 18px;
  display: block;
}




#video_mask-section-tablet.video_mask-section-tablet {
  padding-top: 20px;
  margin-bottom: 50px;
}

#video_mask-section-tablet .video_mask-inner-tablet {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

#video_mask-section-tablet .video-mask-svg-tablet {
  display: block;
  width: 100%;
  height: auto;
}

/* Всё поверх видео */
#video_mask-section-tablet .video_mask-content-tablet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =========================
   STICKERS WRAP
========================= */
#video_mask-section-tablet .contact-sticker-wrap-tablet {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 22;
}

/* BEL STICKER */
#video_mask-section-tablet .contact-sticker-tablet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 18px;
  min-width: 210px;
  height: 48px;

  background: #fff;
  border-radius: 35px;
  box-shadow: 0 4px 4px rgba(40, 225, 231, 0.34);

  pointer-events: auto;
}

#video_mask-section-tablet .notification-bell-tablet {
  width: 26px;
  height: 26px;
}

#video_mask-section-tablet .notification-bell-tablet.pulse {
  animation: bell-pulse-tablet 1.6s ease-in-out infinite;
}

@keyframes bell-pulse-tablet {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

#video_mask-section-tablet .notification-bell_text-tablet {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: #313131;
  line-height: 1;
}

/* PROMO STICKER */
#video_mask-section-tablet .promo-sticker-tablet {
  display: none;
  margin-right: 80px;

  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 18px;
  min-width: 200px;
  height: 48px;

  background: #39E4F0;
  border-radius: 35px;

  pointer-events: auto;
  z-index: 20;
}

#video_mask-section-tablet .promo-sticker-tablet.is-visible {
  display: flex;
}

#video_mask-section-tablet .promo-sticker_icon-tablet {
  width: 18px;
  height: 18px;
}

#video_mask-section-tablet .promo-sticker_text-tablet {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #FFF;
}

/* локальный promoPulse, чтобы не конфликтовал глобально */
@keyframes promoPulse-tablet {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(57, 228, 240, 0.0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(57, 228, 240, 0.45);
  }
}

/* =========================
   CARDS WRAPPER
========================= */
#video_mask-section-tablet .cards-wrapper-tablet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* FAN */
#video_mask-section-tablet .cards-row_service_fan-tablet {
  position: absolute;
  top: 45px;
  left: calc(50% - 42px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 0;
  z-index: 15;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
}

#video_mask-section-tablet .cards-row_service_fan-tablet.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: none;
}

#video_mask-section-tablet .service-card_fan-tablet {
  width: 190px;
  height: 370px;
  background-color: #FFF;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  position: relative;
}

#video_mask-section-tablet .service-card__img_fan-tablet {
  width: 192px;
  height: 264px;
  border-radius: 16px;
  object-fit: cover;
}

#video_mask-section-tablet .service-card__title_fan-tablet {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

#video_mask-section-tablet .service-card__text_fan-tablet {
  font-size: 12px;
  color: #1D1D1D;
  text-align: center;
  font-family: Poppins, sans-serif;
  max-width: 180px;
  text-transform: capitalize;
}

#video_mask-section-tablet .service-card__btn_fan-tablet {
  display: flex;
  width: 150px;
  height: 32px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #262626;
  text-decoration: none;
}

#video_mask-section-tablet .service-card__btn-text_fan-tablet {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #FFF;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

#video_mask-section-tablet .service-card__btn-arrow_fan-tablet {
  width: 10px;
  height: 10px;
}

/* FAN позиционирование и анимации (локальные имена) */
#video_mask-section-tablet .card-wrapper_internet_fan-tablet {
  position: relative;
  z-index: 16;
  transform: rotate(0deg) translate(40px, 0px);
  animation: bounceInternetTablet-vm 3s ease-in-out infinite;
}

#video_mask-section-tablet .card-wrapper_monitoring_fan-tablet {
  position: relative;
  z-index: 15;
  transform: rotate(-10deg) translate(0px, 40px);
  animation: bounceMonitoringTablet-vm 3s ease-in-out infinite;
  animation-delay: 0.8s;
}

#video_mask-section-tablet .card-wrapper_it_fan-tablet {
  position: relative;
  z-index: 14;
  transform: rotate(-25deg) translate(-40px, 160px);
  animation: bounceItTablet-vm 3s ease-in-out infinite;
  animation-delay: 1.4s;
}

@keyframes bounceInternetTablet-vm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes bounceMonitoringTablet-vm {
  0%, 100% { transform: rotate(-10deg) translate(40px, 40px); }
  50%      { transform: rotate(-10deg) translate(40px, 20px); }
}

@keyframes bounceItTablet-vm {
  0%, 100% { transform: rotate(-25deg) translate(60px, 160px); }
  50%      { transform: rotate(-25deg) translate(60px, 140px); }
}

/* 3 В РЯД */
#video_mask-section-tablet .cards-row_service-tablet {
  top: 156px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  gap: 8px;
  z-index: 18;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  position: absolute;
}

#video_mask-section-tablet .cards-row_service-tablet.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

#video_mask-section-tablet .service-card-tablet {
  width: 170px;
  height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFF;
  border-radius: 16px;
  overflow: hidden;
  padding-bottom: 15px;
}

#video_mask-section-tablet .service-card__img-tablet {
  width: 170px;
  height: 198px;
  object-fit: cover;
  border-radius: 13px;
  margin-bottom: 5px;
}

#video_mask-section-tablet .service-card__title-tablet {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  margin: 8px 0 6px;
  padding: 0 18px;

  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#video_mask-section-tablet .service-card__text-tablet {
  font-size: 12px;
  color: #1D1D1D;
  font-family: Poppins, sans-serif;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 5px;
  padding: 0 32px;
}

#video_mask-section-tablet .service-card__btn-tablet {
  display: flex;
  width: 150px;
  height: 36px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: #262626;
  text-decoration: none;
  margin-top: auto;
  padding: 0 14px;
}

#video_mask-section-tablet .service-card__btn-text-tablet {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #FFF;
  display: flex;
  align-items: center;
  gap: 6px;
}

#video_mask-section-tablet .service-card__btn-arrow-tablet {
  width: 10px;
  height: 10px;
}

#video_mask-section-tablet .service-card-tablet,
#video_mask-section-tablet .service-card_fan-tablet {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#video_mask-section-tablet .service-card-tablet.active,
#video_mask-section-tablet .service-card_fan-tablet.active {
  transform: translateY(-6px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.22);
}

/* promoPulseTablet локализуем */
@keyframes promoPulseTablet-vm {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(40, 225, 231, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(40, 225, 231, 0.4);
  }
}

#video_mask-section-tablet .service-card__btn-tablet.btn-active,
#video_mask-section-tablet .service-card__btn_fan-tablet.btn-active {
  background: #39E4F0;
  transition: background 0.3s ease;
}

/* =========================
   PROMO
========================= */
#video_mask-section-tablet .promo-tablet-tablet {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;

  pointer-events: auto;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.5s ease-out;
}

#video_mask-section-tablet .promo-tablet__text-tablet {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#video_mask-section-tablet .promo-tablet__title-tablet {
  color: #FFF;
  font-family: "Open Sans", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;

  transform: translateX(-40px);
  transition: opacity .6s ease, transform .6s ease;
}

#video_mask-section-tablet .promo-tablet__subtitle-tablet {
  color: #8e8c8c;
  font-family: "Poppins", sans-serif;
  font-size: 12px;

  transform: translateX(-40px);
  transition: opacity .6s ease .1s, transform .6s ease .1s;
}

#video_mask-section-tablet .promo-tablet__discount-tablet {
  color: #B3FA46;
  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  font-weight: 600;
  transform: translateX(-40px);
  transition: opacity .6s ease .2s, transform .6s ease .2s;
}

#video_mask-section-tablet .promo-tablet__btn-tablet {
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
  background: #F9F7F7;
  border-radius: 8px;
  border: none;
  cursor: pointer;

  align-self: flex-end;
  margin-bottom: 4px;

  animation: promoPulseTablet-vm 2.6s ease-in-out infinite;

  opacity: 0;
  transform: translateX(40px);
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim {
  opacity: 1;
  transform: translateX(0);
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim .promo-tablet__title-tablet {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.1s;
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim .promo-tablet__subtitle-tablet {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.25s;
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim .promo-tablet__discount-tablet {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.4s;
}

#video_mask-section-tablet .promo-tablet-tablet.promo-anim .promo-tablet__btn-tablet {
  opacity: 1;
  transform: translateX(0);
  transition: 0.5s ease-out 0.55s;
}

/* =========================
   VIDEO MASK — TABLET SIBLING
   Desktop расширяет только через media queries
========================= */

#video_mask-section-tablet .video_mask-inner {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 716px;
  margin: 0 auto;
}

/* BASE LAYERS */
#video_mask-section-tablet .video-mask,
#video_mask-section-tablet .video_mask-content {
  position: absolute;
  inset: 0;
}

/* CLIP BOTH: video + overlay */
#video_mask-section-tablet .video-mask {
  clip-path: url(#video-clip-tablet);
}

#video_mask-section-tablet .video_mask-content {
  clip-path: url(#video-clip-tablet);
}

/* VIDEO FIT */
#video_mask-section-tablet .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   DESKTOP ONLY VIA MEDIA QUERIES
   (расширяй tablet, не трогая mobile)
========================= */

@media (min-width: 1024px) {
  #video_mask-section-tablet .video_mask-inner {
    max-width: 820px; /* пример: ставь свою desktop ширину */
  }
}












/* ============================================================
   TAP POP (button press)
   Use for promo-tablet__btn and stickers
============================================================ */
.tap-pop {
  animation: tapPop 170ms ease-out;
}

@keyframes tapPop {
  0% { transform: scale(1); }
  55% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* ===============================
   SUBHERO CENNIK – MOBILE (300px)
   =============================== */

.subhero-cennik {
  width: 300px;
  box-sizing: border-box;
}

/* ===============================
   SUBHERO CENNIK – TARIFF ROW
   =============================== */

.subhero-cennik__tariff-row {
  width: 300px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 10px;
}

.subhero-cennik__icon-left,
.subhero-cennik__icon-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.subhero-cennik__text {
  flex: 1;
  text-align: left;
  color: #ffffff;
  margin-left: 10px;
}


/* SUBHERO CENNIK – ICON ONE (OPEN) */
.subhero-cennik__icon-one {
  width: 16px;
  height: 16px;
  display: block;
}

.subhero-cennik__icon-two {
  width: 24px;
  height: 24px;
  display: block;
}

/* spacing between card blocks */
.subhero-cennik .cennik-card {
  margin-bottom: 16px;
}

/* ===============================
   SUBHERO CENNIK – TOGGLE LOGIC
   =============================== */

/* по умолчанию карточка ЗАКРЫТА */
.subhero-cennik__tariff-row + .cennik-card {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

/* при открытии */
.subhero-cennik__tariff-row.is-open + .cennik-card {
  max-height: 1200px; /* с запасом */
  opacity: 1;
}
.subhero-cennik__tariff-row.is-open .subhero-cennik__icon-two {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}



/* =========================================
   SUBHERO BUTTONS (2 SVG buttons) — 300x56
   цель:
   1) блок кнопки строго 300x56
   2) img занимает всю область (без обрезки)
   3) расстояние между кнопками 10px
   4) black/green переключение остаётся
========================================= */

.sub_hero-btn-footer {
  width: 300px;
  margin: 0 auto;
  padding-top: 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.subhero-btn {
  width: 300px;
  height: 56px;
}

.subhero-btn .consult-link {
  display: block;
  width: 300px;
  height: 56px;
}

.subhero-btn .consult-btn-wrapper {
  width: 300px;
  height: 56px;
}

.subhero-btn .consult-btn {
  display: none;
  width: 300px;
  height: 56px;
  object-fit: contain;
  display: none;
}

/* чтобы img не давал "подстрочный" зазор */
.subhero-btn .consult-btn {
  display: none;
  display: block;
  line-height: 0;
}

.subhero-btn .consult-btn {
  display: none;
}

/* язык: показываем black */
body.lang-pl .lang-pl .consult-btn_pl_black { display: block; }
body.lang-ua .lang-ua .consult-btn_ua_black { display: block; }

/* hover: green */
.subhero-btn .consult-link:hover .consult-btn_pl_black,
.subhero-btn .consult-link:hover .consult-btn_ua_black {
  display: none;
}

body.lang-pl .subhero-btn .consult-link:hover .consult-btn_pl_green { display: block; }
body.lang-ua .subhero-btn .consult-link:hover .consult-btn_ua_green { display: block; }


/* =========================================
   BACK BUTTON
========================================= */

.back-to-hero {
  position: relative;
  width: 300px;
  height: 52px;

  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

.back-to-ikon {
  width: 30px;
  height: 30px;
}

.promo-exit_text {
  color: #212121;
  font-family: Poppins, sans-serif;
  font-weight: 500;
}

.back-to-hero:hover {
  transform: translateY(-1px);
  transition: 0.2s ease;
}

.back-to-ikon,
.promo-exit_text {
  animation: pulseTablet 2.2s ease-in-out infinite;
}

@keyframes pulseTablet {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}



@media (min-width: 360px) {
  .sub_hero-container.container,
  .subhero-header__inner,
  .subhero-cennik,
  .subhero-cennik__tariff-row,
  .cennik-card,
  .sub_hero-btn-footer,
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 340px !important;
    max-width: 340px !important;
  }

  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn {
    height: 64px !important;
  }

  .back-to-hero {
    height: 58px !important;
  }
}

@media (min-width: 390px) {
  .sub_hero-container.container,
  .subhero-header__inner,
  .subhero-cennik,
  .subhero-cennik__tariff-row,
  .cennik-card,
  .sub_hero-btn-footer,
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 370px !important;
    max-width: 370px !important;
  }

  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn {
    height: 70px !important;
  }

  .back-to-hero {
    height: 62px !important;
  }
}

@media (min-width: 412px) {
  .sub_hero-container.container,
  .subhero-header__inner,
  .subhero-cennik,
  .subhero-cennik__tariff-row,
  .cennik-card,
  .sub_hero-btn-footer,
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 392px !important;
    max-width: 392px !important;
  }

  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn {
    height: 74px !important;
  }

  .back-to-hero {
    height: 64px !important;
  }
}

@media (min-width: 428px) {
  .sub_hero-container.container,
  .subhero-header__inner,
  .subhero-cennik,
  .subhero-cennik__tariff-row,
  .cennik-card,
  .sub_hero-btn-footer,
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 408px !important;
    max-width: 408px !important;
  }

  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn {
    height: 76px !important;
  }

  .back-to-hero {
    height: 66px !important;
  }
}

@media (min-width: 480px) {
  .sub_hero-container.container,
  .subhero-header__inner,
  .subhero-cennik,
  .subhero-cennik__tariff-row,
  .cennik-card,
  .sub_hero-btn-footer,
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 440px !important;
    max-width: 440px !important;
  }

  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn {
    height: 82px !important;
  }

  .back-to-hero {
    height: 70px !important;
  }
}

@media (min-width: 540px) {
  .sub_hero-container.container,
  .subhero-header__inner,
  .subhero-cennik,
  .subhero-cennik__tariff-row,
  .cennik-card,
  .sub_hero-btn-footer,
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 500px !important;
    max-width: 500px !important;
  }

  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn {
    height: 92px !important;
  }

  .back-to-hero {
    height: 78px !important;
  }
}

@media (min-width: 600px) {
  .sub_hero-container.container,
  .subhero-header__inner,
  .subhero-cennik,
  .subhero-cennik__tariff-row,
  .cennik-card,
  .sub_hero-btn-footer,
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 560px !important;
    max-width: 560px !important;
  }

  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn {
    height: 104px !important;
  }

  .back-to-hero {
    height: 88px !important;
  }
}

@media (min-width: 639px) {
  .sub_hero-container.container,
  .subhero-header__inner,
  .subhero-cennik,
  .subhero-cennik__tariff-row,
  .cennik-card,
  .sub_hero-btn-footer,
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 600px !important;
    max-width: 600px !important;
  }

  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn {
    height: 112px !important;
  }

  .back-to-hero {
    height: 94px !important;
  }
}
@media (min-width: 360px) {
  .internet-price-title_wrap {
    width: 340px;
    justify-content: center;
  }
}

@media (min-width: 390px) {
  .internet-price-title_wrap {
    width: 370px;
    justify-content: center;
  }
}

@media (min-width: 412px) {
  .internet-price-title_wrap {
    width: 392px;
    justify-content: center;
  }
}

@media (min-width: 428px) {
  .internet-price-title_wrap {
    width: 408px;
    justify-content: center;
  }
}

@media (min-width: 480px) {
  .internet-price-title_wrap {
    width: 440px;
    justify-content: center;
  }
}

@media (min-width: 540px) {
  .internet-price-title_wrap {
    width: 500px;
    justify-content: center;
  }
}

@media (min-width: 600px) {
  .internet-price-title_wrap {
    width: 560px;
    justify-content: center;
  }
}

@media (min-width: 639px) {
  .internet-price-title_wrap {
    width: 600px;
    justify-content: center;
  }
}
@media (min-width: 360px) {

.sub_hero-header_text {
  font-size: 22px;
}

.sub_hero-subtitle {
  font-size: 13px;
}

.sub_hero-subtitle_text {
  font-size: 17px;
}

.internet-price-title {
  font-size: 26px;
}

.cennik-card__badge,
.cennik-card__label,
.cennik-card__value,
.cennik-card__title {
  font-size: 17px;
}

}

@media (min-width: 390px) {

.sub_hero-header_text {
  font-size: 24px;
}

.sub_hero-subtitle {
  font-size: 14px;
}

.sub_hero-subtitle_text {
  font-size: 18px;
}

.internet-price-title {
  font-size: 28px;
}

.cennik-card__badge,
.cennik-card__label,
.cennik-card__value,
.cennik-card__title {
  font-size: 18px;
}

}

@media (min-width: 412px) {

.sub_hero-header_text {
  font-size: 26px;
}

.sub_hero-subtitle {
  font-size: 15px;
}

.sub_hero-subtitle_text {
  font-size: 19px;
}

.internet-price-title {
  font-size: 30px;
}

.cennik-card__badge,
.cennik-card__label,
.cennik-card__value,
.cennik-card__title {
  font-size: 19px;
}

}

@media (min-width: 428px) {

.sub_hero-header_text {
  font-size: 28px;
}

.sub_hero-subtitle {
  font-size: 16px;
}

.sub_hero-subtitle_text {
  font-size: 20px;
}

.internet-price-title {
  font-size: 32px;
}

.cennik-card__badge,
.cennik-card__label,
.cennik-card__value,
.cennik-card__title {
  font-size: 20px;
}

}

@media (min-width: 480px) {

.sub_hero-header_text {
  font-size: 30px;
}

.sub_hero-subtitle {
  font-size: 17px;
}

.sub_hero-subtitle_text {
  font-size: 21px;
}

.internet-price-title {
  font-size: 34px;
}

.cennik-card__badge,
.cennik-card__label,
.cennik-card__value,
.cennik-card__title {
  font-size: 21px;
}

}

@media (min-width: 540px) {

.sub_hero-header_text {
  font-size: 32px;
}

.sub_hero-subtitle {
  font-size: 18px;
}

.sub_hero-subtitle_text {
  font-size: 22px;
}

.internet-price-title {
  font-size: 36px;
}

.cennik-card__badge,
.cennik-card__label,
.cennik-card__value,
.cennik-card__title {
  font-size: 22px;
}

}

@media (min-width: 600px) {

.sub_hero-header_text {
  font-size: 34px;
}

.sub_hero-subtitle {
  font-size: 19px;
}

.sub_hero-subtitle_text {
  font-size: 23px;
}

.internet-price-title {
  font-size: 38px;
}

.cennik-card__badge,
.cennik-card__label,
.cennik-card__value,
.cennik-card__title {
  font-size: 23px;
}

}

@media (min-width: 639px) {

.sub_hero-header_text {
  font-size: 36px;
}

.sub_hero-subtitle {
  font-size: 20px;
}

.sub_hero-subtitle_text {
  font-size: 24px;
}

.internet-price-title {
  font-size: 40px;
}

.cennik-card__badge,
.cennik-card__label,
.cennik-card__value,
.cennik-card__title {
  font-size: 24px;
}

}

@media (min-width: 360px) {
  .subhero-cennik__text {
    font-size: 17px;
  }
}

@media (min-width: 390px) {
  .subhero-cennik__text {
    font-size: 18px;
  }
}

@media (min-width: 412px) {
  .subhero-cennik__text {
    font-size: 19px;
  }
}

@media (min-width: 428px) {
  .subhero-cennik__text {
    font-size: 20px;
  }
}

@media (min-width: 480px) {
  .subhero-cennik__text {
    font-size: 21px;
  }
}

@media (min-width: 540px) {
  .subhero-cennik__text {
    font-size: 22px;
  }
}

@media (min-width: 600px) {
  .subhero-cennik__text {
    font-size: 23px;
  }
}

@media (min-width: 639px) {
  .subhero-cennik__text {
    font-size: 24px;
  }
}



@media (min-width: 360px) {
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
  }
}

@media (min-width: 390px) {
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
  }
}

@media (min-width: 412px) {
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
  }
}

@media (min-width: 428px) {
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
  }
}

@media (min-width: 480px) {
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
  }
}

@media (min-width: 540px) {
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
  }
}

@media (min-width: 600px) {
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
  }
}

@media (min-width: 639px) {
  .subhero-btn,
  .subhero-btn .consult-link,
  .subhero-btn .consult-btn-wrapper,
  .subhero-btn .consult-btn,
  .back-to-hero {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
  }
}

@media (min-width: 360px) {
  .subhero-cennik__text {
    font-size: 18px;
  }
}

@media (min-width: 390px) {
  .subhero-cennik__text {
    font-size: 19px;
  }
}

@media (min-width: 412px) {
  .subhero-cennik__text {
    font-size: 20px;
  }
}

@media (min-width: 428px) {
  .subhero-cennik__text {
    font-size: 21px;
  }
}

@media (min-width: 480px) {
  .subhero-cennik__text {
    font-size: 22px;
  }
}

@media (min-width: 540px) {
  .subhero-cennik__text {
    font-size: 23px;
  }
}

@media (min-width: 600px) {
  .subhero-cennik__text {
    font-size: 24px;
  }
}

@media (min-width: 639px) {
  .subhero-cennik__text {
    font-size: 25px;
  }
}

/* =========================================
   SUBHERO MOBILE / TABLET SWITCH
========================================= */

.subhero-tablet {
  display: none;
}

.internet-kablowy-full,
.internet-5g-full {
  display: none;
}

/* =========================================
   TABLET SUBHERO TABLE LAYOUT 768+
========================================= */

@media (min-width: 768px) {
  .subhero-mobile {
    display: none;
  }

  .subhero-tablet {
    display: block;
  }

  .subhero-tablet .internet-kablowy-full,
  .subhero-tablet .internet-5g-full {
    display: block;
  }

  .sub_hero-container.container {
    width: 100%;
    max-width: 640px !important;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 3;
  }

  .sub_hero-content {
    display: flex;
    flex-direction: column;
  }

  .subhero-tablet .sub_hero-subtitle {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .subhero-tablet .sub_hero-subtitle_text {
    white-space: nowrap;
  }

  /* =========================================
     LEFT TITLES
  ========================================= */

  .subhero-tablet .internet-price-title_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
  }

  .subhero-tablet .internet-section-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }

  .subhero-tablet .internet-price-title {
    color: #FFF;
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
    text-align: left;
  }

  /* =========================================
     TABLES
  ========================================= */

  .subhero-tablet .internet-price-header,
  .subhero-tablet .internet-price-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 0 10px;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #FFF;
  }

  .subhero-tablet .internet-price-header {
    background: #28E1E7;
    height: 50px;
    border-radius: 16px 16px 0 0;
    font-weight: 600;
  }

  .subhero-tablet .internet-price-header > div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .subhero-tablet .internet-price-header > div:nth-child(1) {
    justify-content: flex-start;
    padding-left: 8px;
  }

  .subhero-tablet .internet-price-row {
    background: #1E1E1E;
    min-height: 100px;
    border-left: 1px solid rgba(255,255,255,0.12);
    border-right: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  .subhero-tablet .internet-price-row:last-child {
    border-radius: 0 0 16px 16px;
  }

  .subhero-tablet .internet-price-row > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8px;
    align-items: center;
    text-align: center;
  }

  .subhero-tablet .internet-price-row > div:nth-child(1) {
    align-items: flex-start;
    text-align: left;
  }

  .subhero-tablet .old-price {
    text-decoration: line-through;
    color: #B4AAAA;
    opacity: 0.4;
    font-weight: 600;
  }

  .subhero-tablet .new-price {
    color: #FFF;
    font-weight: 700;
  }

  .subhero-tablet .promo {
    padding: 10px 14px;
    border: 2px solid #28E1E7;
    border-radius: 16px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* =========================================
     BUTTONS LAYOUT
  ========================================= */

  .sub_hero-btn-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding-top: 20px;
  }

  .sub_hero-btn-footer_inner {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
  }

  .sub_hero-btn-footer_inner .Konsultacja {
    flex: 1 1 0;
    width: calc((100% - 16px) / 2);
  }

  .sub_hero-btn-footer_inner .subhero-btn {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .sub_hero-btn-footer_inner .consult-link {
    display: block;
    width: 100%;
    height: auto;
  }

  .sub_hero-btn-footer_inner .consult-btn-wrapper {
    width: 100%;
    height: auto;
  }

  .sub_hero-btn-footer_inner .consult-btn {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* =========================================
     BACK BUTTON
  ========================================= */

  .sub_hero-btn-footer .back-to-hero {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 56px;
    align-self: center;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
  }

  .sub_hero-btn-footer .back-to-ikon {
    width: 36px;
    height: 36px;
  }

  .sub_hero-btn-footer .promo-exit_text {
    color: #212121;
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 500;
  }
}
/* =========================================
   SUBHERO SUBTITLE MOBILE
========================================= */

.sub_hero-subtitle {
  color: #8e8c8c;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .6s ease .1s, transform .6s ease .1s;
}


/* =========================================
   SUBHERO SUBTITLE TABLET 768+
========================================= */

@media (min-width: 768px) {

  .sub_hero-subtitle {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;

    /* убираем mobile анимацию */
    opacity: 1;
    transform: none;
    transition: none;
  }

}
@media (min-width:768px){

.sub_hero-subtitle{
white-space: nowrap;
}

}

/* =========================================
   SUBHERO MOBILE FIXES
   1) titles left
   2) footer buttons gap 20
========================================= */

@media (max-width: 767px) {
  /* TITLES — LEFT ON MOBILE */
  .internet-price-title_wrap {
    justify-content: flex-start !important;
    text-align: left;
  }

  .internet-section-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }

  .internet-price-title {
    text-align: left;
    margin: 0;
  }

  /* FOOTER BUTTONS — MOBILE COLUMN + GAP 20 */
  .sub_hero-btn-footer {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px !important;
    padding-top: 18px;
  }

  .sub_hero-btn-footer_inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px !important;
  }

  .sub_hero-btn-footer_inner .Konsultacja,
  .sub_hero-btn-footer_inner .subhero-btn {
    width: 100%;
  }
}


/* =========================================================
   SUBHERO TABLE CASCADE
   tablet / desktop only
========================================================= */
@media (min-width: 768px) {
  .subhero-tablet .internet-price-header,
  .subhero-tablet .internet-price-row {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(5px);
    will-change: opacity, transform, filter;
  }

  .subhero-tablet .internet-price-header.is-cascade-in,
  .subhero-tablet .internet-price-row.is-cascade-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
      opacity 0.7s cubic-bezier(.22,.61,.36,1),
      transform 0.7s cubic-bezier(.22,.61,.36,1),
      filter 0.7s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--cascade-delay, 0ms);
  }
}







.desktop-hero,
.desktop-hero * {
  box-sizing: border-box;
}

.desktop-hero {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #fff;
  color: #1D1D1D;
}

.desktop-hero p,
.desktop-hero ul,
.desktop-hero li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-hero a {
  text-decoration: none;
  color: inherit;
}

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

.desktop-hero h1,
.desktop-hero h2,
.desktop-hero h3,
.desktop-hero h4,
.desktop-hero h5,
.desktop-hero h6 {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-style: normal;
  font-weight: 400;
  color: #1A1A1A;
}

.desktop-hero h1 { font-size: 50px; }
.desktop-hero h2 { font-size: 45px; }
.desktop-hero h3 {
  font-size: 30px;
  font-weight: 600;
  text-transform: capitalize;
}
.desktop-hero h4 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
}
.desktop-hero h4 strong { font-weight: 600; }
.desktop-hero h5 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}
.desktop-hero h6 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  text-transform: capitalize;
}

/* ===============================
   CONTAINER
   =============================== */
.desktop-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

/* ===============================
   HERO SECTION
   =============================== */
.desktop-hero {
  width: 100%;
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  height: 960px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* === Decorative Image Overlay === */
.desktop-hero {
  position: relative;
  height: auto;
  overflow: hidden;
}

.desktop-video-mask-svg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* === HEADER === */
.desktop-header {
  padding-top: 54px;
  position: relative;
  z-index: 2;
}

/* Анимация появления хедера — Scale + Fade + Slide */
.animate-header {
  opacity: 0;
  transform: translateY(-20px) scale(0.98);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.in-view.animate-header {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Хедер поверх всего */
.desktop-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* === LOGO === */
.desktop-header__logo {
  display: flex;
  max-width: 150px;
  align-items: flex-start;
}

/* ==============================
   DESKTOP HEADER NAV
   ============================== */
.desktop-header-nav-desktop {
  display: flex;
  align-items: center;
  gap: 6px;

  height: 56px;
  padding: 4px;

  margin-left: 110px;

  border-radius: 16px;
  background: #F9F7F7;

  box-sizing: border-box;
}

/* ==============================
   NAV LINK
   ============================== */

.desktop-nav-link {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 48px;
  min-width: 90px;
  padding: 0 16px;

  border-radius: 10px;

  color: #1D1D1D;
  text-decoration: none;
  white-space: nowrap;

  transition: all 0.25s ease;
}

/* рамка */

.desktop-nav-link::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 10px;
  border: 1px solid rgba(29, 29, 29, 0.8);

  opacity: 0;

  transition: opacity 0.25s ease;
}

.desktop-nav-link:hover::before {
  opacity: 1;
}

/* ==============================
   TEXT
   ============================== */

.desktop-nav-link-text {
  color: #1D1D1D;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

/* ==============================
   HOME BUTTON
   ============================== */

.desktop-nav-link-home {
  width: 48px;
  min-width: 48px;
  padding: 0;
}

.desktop-nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-nav-icon-home {
  color: #1D1D1D;
}

/* ==============================
   ACTIVE HOME
   ============================== */

.desktop-nav-link-home::before {
  opacity: 1;
}

/* убираем активность домика при hover меню */

.desktop-header-nav-desktop:hover .desktop-nav-link-home::before {
  opacity: 0;
}

/* возвращаем если hover на домике */

.desktop-nav-link-home:hover::before {
  opacity: 1;
}


.desktop-header-btn-kontakty {
  display: flex;
  width: 130px;
  height: 56px;
  padding: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #28E1E7;
  border: none;
}

.desktop-header-btn-kontakty-text {
  color: #ffffff;
}

.desktop-header-btn-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-right: 20px;
}

.desktop-header-tumpler {
  display: flex;
  height: 56px;
  padding: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;.desktop-header-tumpler {
  display: flex;
  height: 56px;
  padding: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #FFF;
  background: rgba(40, 225, 231, 0.2);
}

/* фиксируем белый текст внутри переключателя */
.desktop-header-tumpler,
.desktop-header-tumpler * {
  color: #FFF;
}

.desktop-header-tumpler-text {
  color: #FFF;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.desktop-header-tumpler-text-dekor {
  color: #FFF;
  font-family: Poppins;
  font-size: 16.795px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}

.desktop-header-tumpler-text-dekor:link,
.desktop-header-tumpler-text-dekor:visited,
.desktop-header-tumpler-text-dekor:hover,
.desktop-header-tumpler-text-dekor:active {
  color: #FFF;
}

.desktop-header-tumpler-text-dekor.active-lang {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #28E1E7;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
  border-radius: 8px;
  border: 1px solid #FFF;
  background: rgba(40, 225, 231, 0.2);
}

.desktop-header-tumpler-text {
  color: #FFF;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.desktop-header-tumpler-text-dekor {
  color: #FFF;
  font-family: Poppins;
  font-size: 16.795px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}

.desktop-header-tumpler-text-dekor.active-lang {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #28E1E7;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.desktop-kontakt-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #37D0DA;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}

.desktop-kontakt-text {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  z-index: 2;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.desktop-kontakt-text.lang-pl,
.desktop-kontakt-text.lang-ua {
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.desktop-kontakt-icons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.desktop-kontakt-icons img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.desktop-kontakt-icons a:hover img {
  transform: scale(1.12);
}

.desktop-kontakt-wrapper:hover .desktop-kontakt-text {
  opacity: 0;
}

.desktop-kontakt-wrapper:hover .desktop-kontakt-icons {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Языковое отображение */
.lang-pl .lang-pl,
.lang-ua .lang-ua {
  display: inline;
}

.lang-pl .lang-ua,
.lang-ua .lang-pl {
  display: none;
}

/* Жёсткая фиксация для desktop-кнопки контактов */
.lang-pl .desktop-kontakt-text.lang-pl,
.lang-ua .desktop-kontakt-text.lang-ua {
  display: flex !important;
}

.lang-pl .desktop-kontakt-text.lang-ua,
.lang-ua .desktop-kontakt-text.lang-pl {
  display: none !important;
}

.desktop-hero-left {
  margin: 0 auto;
  display: block;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* ======================== */
/* Фильтры под заголовком   */
/* ======================== */

.desktop-filters {
  display: flex;
  gap: 20px;
  padding-top: 70px;
  margin-bottom: 15px;
}

/* FILTER */
.desktop-hero-filter {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 10px 18px;
  gap: 10px;

  border-radius: 35px;
  background: #F9F7F7;

  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.desktop-hero-filter--left { width: 224px; }
.desktop-hero-filter--right { max-width: 240px; }

/* TEXT */
.desktop-hero-filter-text {
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1D;
  margin: 0;
  transition: color 0.15s ease;
}

/* DOT */
.desktop-hero-filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1D1D1D;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

/* DEFAULT */
.desktop-hero-filter--left .desktop-hero-filter-dot {
  background: #ACE238;
}

/* ACTIVE */
.desktop-hero-filter.is-active {
  background: #262626;
}

.desktop-hero-filter.is-active .desktop-hero-filter-text {
  color: #ffffff;
}

.desktop-hero-filter.is-active .desktop-hero-filter-dot {
  background: #ACE238;
}

.desktop-hero-title-text {
  display: block;
  word-break: keep-all;
  padding-top: 20px;
  max-width: 590px;
  height: 189px;
  flex-shrink: 0;
  text-underline-position: from-font;
  transform: translateZ(0);
  will-change: transform;
  word-spacing: -0.22em;
}

.desktop-hero-title-text span {
  word-spacing: normal;
}

.desktop-hero-title-text-dekor {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #28E1E7;
  text-decoration-thickness: 6px;
  text-underline-offset: 3px;
  position: relative;
  z-index: 1;
}

.desktop-konsultacja {
  position: relative;
  width: fit-content;
  height: fit-content;
}

/* Скрываем все кнопки по умолчанию */
.desktop-consult-btn {
  display: none;
}

/* Показываем только чёрную по текущему языку */
.lang-pl .desktop-consult-btn-pl-black,
.lang-ua .desktop-consult-btn-ua-black {
  display: inline-block;
}

/* Зелёная показывается при ховере */
#desktop-consult-btn:hover .desktop-consult-btn-pl-black,
#desktop-consult-btn:hover .desktop-consult-btn-ua-black {
  display: none;
}

#desktop-consult-btn:hover .desktop-consult-btn-pl-green,
#desktop-consult-btn:hover .desktop-consult-btn-ua-green {
  display: inline-block;
}

/* При активации (после клика) — зелёная */
#desktop-consult-btn.active .desktop-consult-btn-pl-black,
#desktop-consult-btn.active .desktop-consult-btn-ua-black {
  display: none;
}

#desktop-consult-btn.active .desktop-consult-btn-pl-green,
#desktop-consult-btn.active .desktop-consult-btn-ua-green {
  display: inline-block;
}

.desktop-konsultacja-maps-wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 60px;
}

.desktop-clients-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

@keyframes desktop-spinZoom {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.15);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.desktop-clients-badge img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  transform-origin: center;
}

.desktop-clients-badge:hover img {
  animation: desktop-spinZoom 0.6s ease;
}

.desktop-clients-badge a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  max-width: 260px;
}

.desktop-mapa-text {
  line-height: 1.4;
  margin: 0;
  white-space: normal;
  word-break: break-word;
  max-width: 160px;
}

.desktop-hero-img-wrap {
  position: relative;
  display: flex;
  gap: 20px;
  margin-top: 97px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* Картинка IT (компьютер) */
.desktop-hero-it-img {
  width: 167px;
  height: 300px;
  flex-shrink: 0;
}

.desktop-hero-it-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Картинка Monitoring (камера) */
.desktop-hero-monitoring-img {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
}

.desktop-hero-monitoring-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Коробка кнопки */
.desktop-hero-join-box {
  background-color: #1D1D1D;
  border-radius: 20px;
  padding: 24px 16px;
  display: inline-block;
}

/* Внутри коробки */
.desktop-hero-join-box-inner {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* Кнопка */
.desktop-hero-join-top {
  border-radius: 12px;
  background: #ACE238;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #1D1D1D;
  text-align: center;
  text-decoration: none;
  display: flex;
  width: 78px;
  height: 67px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.desktop-hero-join-top .lang-pl,
.desktop-hero-join-top .lang-ua {
  position: absolute;
  transition: opacity 0.3s ease;
}

/* Статистика */
.desktop-hero-join-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #FFF;
  gap: 4px;
  width: 83px;
  flex-shrink: 0;
}

/* Число */
.desktop-hero-join-number-text {
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #B3FA46;
  line-height: normal;
  text-transform: capitalize;
}

/* Подпись под числом */
.desktop-hero-join-text-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.desktop-hero-join-text-btn span {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #FFF;
}

/* Колокольчик */
.desktop-contact-sticker {
  display: flex;
  width: 190px;
  height: 50px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 35px;
  background: #FFF;
  box-shadow: 0 4px 4px 0 rgba(40, 225, 231, 0.34);
  position: absolute;
  top: 130px;
  right: 20px;
  z-index: 99;
  pointer-events: none;
}

.desktop-notification-bell {
  width: 26px;
  height: 26px;
}

/* Анимация pulse */
.desktop-notification-bell.pulse {
  animation: desktop-bell-pulse 1.5s ease-in-out infinite;
}

@keyframes desktop-bell-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

.desktop-notification-bell-text {
  color: #313131;
  font-family: Poppins;
  font-size: 12px;
  text-transform: uppercase;
}

/* === 3 карточки в ряд === */
.desktop-cards-row-service {
  position: absolute;
  top: 190px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 9;
}

.desktop-service-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-bottom: 15px;
  background-color: #FFF;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.desktop-service-card__img {
  width: 200px;
  height: 300px;
  border-radius: 16px;
  object-fit: cover;
}

.desktop-service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  animation: desktop-card-bounce 0.4s ease;
}

.desktop-service-card__title {
  text-align: center;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 30px;
}

.desktop-service-card__text {
  max-width: 130px;
  text-align: center;
  font-size: 14px;
  color: #1D1D1D;
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}

.desktop-service-card__btn {
  display: flex;
  width: 178px;
  height: 36px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #262626;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.desktop-service-card__btn-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF;
  text-align: center;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: color 0.3s ease;
}

.desktop-service-card__btn-arrow {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.desktop-service-card__btn:hover {
  background-color: #28E1E7;
}

@keyframes desktop-card-bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(-10px); }
}

/* Контейнер для 3 карточек FAN */
.desktop-cards-row-service-fan {
  position: absolute;
  top: 160px;
  right: 100px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  z-index: 9;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.desktop-cards-row-service-fan.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Общий стиль карточки */
.desktop-service-card-fan {
  width: 240px;
  height: 460px;
  background-color: #FFF;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-bottom: 15px;
  position: relative;
  z-index: 10;
}

/* Картинка карточки */
.desktop-service-card__img-fan {
  width: 240px;
  height: 320px;
  border-radius: 16px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Заголовок */
.desktop-service-card__title-fan {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

/* Подзаголовок / описание */
.desktop-service-card__text-fan {
  font-size: 14px;
  color: #1D1D1D;
  text-align: center;
  font-family: Poppins;
  font-weight: 400;
  max-width: 220px;
  text-transform: capitalize;
}

/* Кнопка */
.desktop-service-card__btn-fan {
  display: flex;
  width: 178px;
  height: 36px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #262626;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

/* Кнопка — текст + стрелка */
.desktop-service-card__btn-text-fan {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 400;
  transition: color 0.3s ease;
}

/* Стрелка */
.desktop-service-card__btn-arrow-fan {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* --- Карточки FAN --- */

/* Internet */
.desktop-card-wrapper-internet-fan {
  position: relative;
  z-index: 12;
  animation: desktop-bounceInternet 3s ease-in-out infinite;
  animation-delay: 0s;
}

@keyframes desktop-bounceInternet {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Monitoring */
.desktop-card-wrapper-monitoring-fan {
  transform: rotate(-15deg) translate(120px, 70px);
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-bottom: 20px;
  animation: desktop-bounceMonitoring 3s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes desktop-bounceMonitoring {
  0%, 100% { transform: rotate(-15deg) translate(120px, 70px); }
  50% { transform: rotate(-15deg) translate(120px, 50px); }
}

/* IT */
.desktop-card-wrapper-it-fan {
  transform: rotate(-35deg) translate(160px, 250px);
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-bottom: 20px;
  animation: desktop-bounceIt 3s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes desktop-bounceIt {
  0%, 100% { transform: rotate(-35deg) translate(160px, 250px); }
  50% { transform: rotate(-35deg) translate(160px, 230px); }
}

.desktop-cards-row-service-fan {
  position: absolute;
  top: 160px;
  right: 100px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  z-index: 9;
  opacity: 0;
}

/* Анимирующий класс */
.desktop-cards-row-service-fan.animate-in {
  animation: desktop-slideInFan 1.2s ease-out forwards;
}

@keyframes desktop-slideInFan {
  0% {
    right: -500px;
    opacity: 0;
  }
  100% {
    right: 100px;
    opacity: 1;
  }
}

/* По умолчанию */
.desktop-cards-row-service-fan { display: flex; }
.desktop-cards-row-service { display: none; }

/* === АНИМАЦИЯ Hero текст СЛЕВА С ПОЯВЛЕНИЕМ === */
.animate-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* === ЗАДЕРЖКИ === */
.delay-1 {
  transition-delay: 0.2s;
}

.delay-2 {
  transition-delay: 0.4s;
}

.delay-3 {
  transition-delay: 0.6s;
}

.desktop-client-card-link {
  text-decoration: none;
}

.desktop-client-card {
  width: 203px;
  height: 115px;
  border-radius: 16px;
  background: #1D1D1D;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 12px;
  gap: 16px;
}

.desktop-green-box {
  display: flex;
  width: 78px;
  height: 67px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: #ACE238;
  flex-shrink: 0;
}

.desktop-join-now {
  color: #1D1D1D;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  text-decoration: underline;
  padding: 5px;
}

.desktop-users-count {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.desktop-users-count-text-600 {
  color: #ACE238;
  font-family: "Open Sans", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  text-align: left;
  transition: transform 0.3s ease-in-out;
}

.desktop-users-count-text {
  color: #FFF;
  text-align: left;
  font-family: Poppins;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}

/* 1. Контейнер блока акции */
.desktop-promo-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 50px;
  padding-bottom: 15px;
  max-width: 100%;
  z-index: 3;
  gap: 20px;
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. Класс при появлении на экране */
.desktop-promo-header.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* 3. Контейнер текста */
.desktop-promo-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
}

/* 4. Заголовок акции */
.desktop-promo-header-text {
  color: #FFF;
  font-family: "Open Sans", sans-serif;
  font-size: 45px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.2;
  text-align: left;
  max-width: 370px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out 0s, transform 0.6s ease-out 0s;
}

.desktop-promo-header.in-view .desktop-promo-header-text {
  opacity: 1;
  transform: translateX(0);
}

/* 5. Подзаголовок */
.desktop-promo-subtitle {
  color: #8e8c8c;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s;
}

.desktop-promo-header.in-view .desktop-promo-subtitle {
  opacity: 1;
  transform: translateX(0);
}

/* 6. Текст скидки */
.desktop-promo-subtitle-text {
  color: #B3FA46;
  font-family: "Open Sans";
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s;
}

.desktop-promo-header.in-view .desktop-promo-subtitle-text {
  opacity: 1;
  transform: translateX(0);
}

/* 7. (если используется) — Список преимуществ */
.desktop-promo-discount {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #B3FA46;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  font-weight: 600;
  text-transform: capitalize;
  justify-content: flex-end;
}

/* 8. Кнопка перехода (в сабхеро) */
.desktop-promo-header-btn {
  display: flex;
  width: 66px;
  height: 66px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: #F9F7F7;
  padding-left: 20px;
  cursor: pointer;
  animation: desktop-promoPulse 2.5s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 9. Анимация кнопки */
@keyframes desktop-promoPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(40, 225, 231, 0);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(40, 225, 231, 0.4);
  }
}

/* 10. Ховер на кнопку */
.desktop-promo-header-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(40, 225, 231, 0.5);
}
/* ===============================
   SECTION: sub_hero
   =============================== */

.desktop-sub-hero {
  position: relative;
  width: 100%;
  height: 1800px;
  overflow: hidden;
}

.desktop-sub-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

/* ===============================
   CONTAINER внутри sub_hero
   =============================== */

.desktop-sub-hero-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}


/* ===============================
   SECTION: sub_hero
   =============================== */

.desktop-sub-hero {
  position: relative;
  width: 100%;
  height: 1800px;
  overflow: hidden;
}

.desktop-sub-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

/* ===============================
   CONTAINER внутри sub_hero
   =============================== */

.desktop-sub-hero-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* ===============================
   SUBHERO HEADER
   =============================== */
/* === HEADER === */
.desktop-subhero-header {
  padding-top: 54px;
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}

/* Анимация появления хедера — Scale + Fade + Slide */
.animate-header {
  opacity: 0;
  transform: translateY(-20px) scale(0.98);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.in-view.animate-header {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Хедер поверх всего */
.desktop-subhero-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* === LOGO === */
.desktop-subhero-header__logo {
  display: flex;
  max-width: 150px;
  align-items: flex-start;
}

/* ==============================
   DESKTOP HEADER NAV
   ============================== */
.desktop-subhero-header-nav {
  display: flex;
  align-items: center;
  gap: 6px;

  height: 56px;
  padding: 4px;

  margin-left: 110px;

  border-radius: 16px;
  background: #F9F7F7;

  box-sizing: border-box;
}

/* ==============================
   NAV LINK
   ============================== */

.desktop-subhero-nav-link {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 48px;
  min-width: 90px;
  padding: 0 16px;

  border-radius: 10px;

  color: #1D1D1D;
  text-decoration: none;
  white-space: nowrap;

  transition: all 0.25s ease;
}

/* рамка */

.desktop-subhero-nav-link::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 10px;
  border: 1px solid rgba(29, 29, 29, 0.8);

  opacity: 0;

  transition: opacity 0.25s ease;
}

.desktop-subhero-nav-link:hover::before {
  opacity: 1;
}

/* ==============================
   TEXT
   ============================== */

.desktop-subhero-nav-link-text {
  color: #1D1D1D;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

/* ==============================
   HOME BUTTON
   ============================== */

.desktop-subhero-nav-link-home {
  width: 48px;
  min-width: 48px;
  padding: 0;
}

.desktop-subhero-nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-subhero-nav-icon-home {
  color: #1D1D1D;
}

/* ==============================
   ACTIVE HOME
   ============================== */

.desktop-subhero-nav-link-home::before {
  opacity: 1;
}

/* убираем активность домика при hover меню */

.desktop-subhero-header-nav:hover .desktop-subhero-nav-link-home::before {
  opacity: 0;
}

/* возвращаем если hover на домике */

.desktop-subhero-nav-link-home:hover::before {
  opacity: 1;
}

.desktop-subhero-header-btn-kontakty {
  display: flex;
  width: 130px;
  height: 56px;
  padding: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #28E1E7;
  border: none;
}

.desktop-subhero-header-btn-kontakty-text {
  color: #ffffff;
}

.desktop-subhero-header-btn-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  
}

.desktop-subhero-header-tumpler {
  display: flex;
  height: 56px;
  padding: 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #FFF;
  background: rgba(40, 225, 231, 0.2);
}

/* фиксируем белый текст внутри переключателя */
.desktop-subhero-header-tumpler,
.desktop-subhero-header-tumpler * {
  color: #FFF;
}

.desktop-subhero-header-tumpler-text {
  color: #FFF;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.desktop-subhero-header-tumpler-text-dekor {
  color: #FFF;
  font-family: Poppins;
  font-size: 16.795px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}

.desktop-subhero-header-tumpler-text-dekor:link,
.desktop-subhero-header-tumpler-text-dekor:visited,
.desktop-subhero-header-tumpler-text-dekor:hover,
.desktop-subhero-header-tumpler-text-dekor:active {
  color: #FFF;
}

.desktop-subhero-header-tumpler-text-dekor.active-lang {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: #28E1E7;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.desktop-subhero-kontakt-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #37D0DA;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}

.desktop-subhero-kontakt-text {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  z-index: 2;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.desktop-subhero-kontakt-text.lang-pl,
.desktop-subhero-kontakt-text.lang-ua {
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.desktop-subhero-kontakt-icons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.desktop-subhero-kontakt-icons img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.desktop-subhero-kontakt-icons a:hover img {
  transform: scale(1.12);
}

.desktop-subhero-kontakt-wrapper:hover .desktop-subhero-kontakt-text {
  opacity: 0;
}

.desktop-subhero-kontakt-wrapper:hover .desktop-subhero-kontakt-icons {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Языковое отображение */
.lang-pl .lang-pl,
.lang-ua .lang-ua {
  display: inline;
}

.lang-pl .lang-ua,
.lang-ua .lang-pl {
  display: none;
}

/* Жёсткая фиксация для desktop-кнопки контактов */
.lang-pl .desktop-subhero-kontakt-text.lang-pl,
.lang-ua .desktop-subhero-kontakt-text.lang-ua {
  display: flex !important;
}

.lang-pl .desktop-subhero-kontakt-text.lang-ua,
.lang-ua .desktop-subhero-kontakt-text.lang-pl {
  display: none !important;
}

.desktop-subhero-left {
  margin: 0 auto;
  display: block;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* ===============================
   SUBHERO TEXT BLOCK
   =============================== */

.desktop-sub-hero-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
}

@media screen and (min-width: 1200px) {
  .desktop-sub-hero-header-text,
  .desktop-sub-hero-header-text .lang-pl,
  .desktop-sub-hero-header-text .lang-ua {
    color: #FFFFFF;
  }

  .desktop-sub-hero-subtitle,
  .desktop-sub-hero-subtitle .lang-pl,
  .desktop-sub-hero-subtitle .lang-ua {
    color: #8E8C8C;
  }

  .desktop-sub-hero-subtitle-text,
  .desktop-sub-hero-subtitle-text .lang-pl,
  .desktop-sub-hero-subtitle-text .lang-ua,
  .desktop-sub-hero-subtitle-text strong,
  .desktop-sub-hero-subtitle-text .lang-pl strong,
  .desktop-sub-hero-subtitle-text .lang-ua strong {
    color: #B3FA46;
  }
}

/* ===============================
   SUBHERO TITLE
   =============================== */

.desktop-sub-hero-header-text {
  color: #FFF;
  font-family: "Open Sans", sans-serif;
  font-size: 45px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.2;
  text-align: left;
  max-width: 400px;
  white-space: nowrap;
  padding-top: 20px;
}

/* ===============================
   SUBHERO SUBTITLE
   =============================== */

.desktop-sub-hero-subtitle {
  color: #8e8c8c;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}

/* ===============================
   SUBHERO DISCOUNT TEXT
   =============================== */

.desktop-sub-hero-subtitle-text {
  color: #B3FA46;
  font-family: "Open Sans";
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  white-space: nowrap;
}
/*  <!-- Заголовки таблицы --> */
/* ===============================
   TABLE STYLES
   =============================== */

/* 🔹 Шапка таблицы */
.desktop-sub-hero-header-prace {
  display: inline-flex;
  height: 60px;
  padding: 2px 78px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  color: #fff;
  font-weight: 600;
  border-radius: 16px 16px 0 0;
  background: var(--Blue, #28E1E7);
}

/* 🔹 Общие стили ячеек */
.desktop-sub-hero-price-name,
.desktop-sub-hero-price-speed,
.desktop-sub-hero-price-duration,
.desktop-sub-hero-price-abonement,
.desktop-sub-hero-price-promo {
  color: #FFF;
  text-align: left;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  line-height: normal;
}

/* 🔹 Разница в жирности */
.desktop-sub-hero-price-name,
.desktop-sub-hero-price-speed,
.desktop-sub-hero-price-duration {
  font-weight: 400;
}

.desktop-sub-hero-price-abonement,
.desktop-sub-hero-price-promo {
  font-weight: 600;
}

/* ========== Титулка перед таблицей ========== */
@media screen and (min-width: 1200px) {
  .desktop-internet-price-title-wrap {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding-top: 30px;
  }

  .desktop-internet-price-title,
  .desktop-internet-price-title .lang-pl,
  .desktop-internet-price-title .lang-ua {
    color: #FFF;
    text-align: center;
    font-family: "Open Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
  }
}

/* ========== ОБЩИЕ СЕТКИ ========== */
.desktop-internet-price-header,
.desktop-internet-price-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  line-height: normal;
}

/* ========== ШАПКА ТАБЛИЦЫ ========== */
.desktop-internet-price-header {
  background-color: var(--Blue, #28E1E7);
  color: #FFF;
  font-weight: 600;
  height: 60px;
  border-radius: 16px 16px 0 0;
}

.desktop-internet-price-header > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  text-align: center;
}

/* ========== СТРОКИ ТАБЛИЦЫ ========== */
.desktop-internet-price-header,
.desktop-internet-price-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  line-height: normal;
}

/* ========== ШАПКА ТАБЛИЦЫ ========== */
.desktop-internet-price-header {
  background-color: var(--Blue, #28E1E7);
  color: #FFF;
  font-weight: 600;
  height: 60px;
  border-radius: 16px 16px 0 0;
}

.desktop-internet-price-header > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  text-align: center;
}

/* ========== СТРОКИ ТАБЛИЦЫ (в стиле IT) ========== */
.desktop-internet-price-row {
  background-color: #1E1E1E;
  color: #FFF;
  font-weight: 400;
  height: 100px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Колонка: Услуга (отступ 78px для шапки и строк) */
.desktop-internet-price-row > div:nth-child(1),
.desktop-internet-price-header > div:nth-child(1) {
  text-align: left;
  padding-left: 78px;
  justify-content: flex-start;
}

/* Колонки центр */
.desktop-internet-price-row > div:not(:first-child),
.desktop-internet-price-header > div:not(:first-child) {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Цены */
.desktop-old-price {
  text-decoration: line-through;
  color: #b4aaaa;
  opacity: 0.4;
  font-weight: 800;
  margin-right: 8px;
}

.desktop-new-price {
  color: #FFF;
  font-weight: 800;
}

/* Промо */
.desktop-promo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  border-radius: 16px;
  border: 1px solid #28E1E7;
  font-weight: 600;
  font-size: 16px;
  color: #FFF;
  text-align: center;
}

/* === Белая обводка последнего ряда как в IT === */
.desktop-internet-kablowy-full .desktop-internet-price-row:last-child,
.desktop-internet-5g-full .desktop-internet-price-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.desktop-sub-hero-btn-footer {
  padding-top: 60px;
  display: flex;
  gap: 60px;
  align-items: center;
}

.desktop-sub-hero-btn-footer .desktop-consult-link,
.desktop-sub-hero-btn-footer .desktop-back-to-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 200px;
  border-radius: 8px;
}

.desktop-sub-hero-btn-footer .desktop-consult-btn-wrapper img {
  height: 56px;
  object-fit: contain;
}

/* спецстили для кнопки возврата */
.desktop-back-to-hero {
  width: 244px;
  padding: 10px;
  gap: 10px;
  background: #fff;
  flex-shrink: 0;
  margin-left: 320px;
}

.desktop-back-to-hero img {
  width: 24px;
  height: 24px;
}

.desktop-back-to-hero .desktop-promo-exit-text {
  color: #212121;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.desktop-sub-hero-btn-footer-inner {
  display: flex;
  gap: 20px;
}

/* по умолчанию показываем только чёрный вариант */
.desktop-consult-btn-wrapper img.desktop-consult-btn-pl-green,
.desktop-consult-btn-wrapper img.desktop-consult-btn-ua-green {
  display: none;
}

/* при наведении скрываем чёрный и показываем зелёный */
.desktop-consult-link:hover .desktop-consult-btn-wrapper img.desktop-consult-btn-pl-black,
.desktop-consult-link:hover .desktop-consult-btn-wrapper img.desktop-consult-btn-ua-black {
  display: none;
}

.desktop-consult-link:hover .desktop-consult-btn-wrapper img.desktop-consult-btn-pl-green,
.desktop-consult-link:hover .desktop-consult-btn-wrapper img.desktop-consult-btn-ua-green {
  display: inline;
}

.desktop-back-to-hero {
  animation: desktop-backPulse 2.5s ease-in-out infinite;
  transition: transform 0.2s ease;
}

@keyframes desktop-backPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.desktop-back-to-hero:hover {
  transform: scale(1.1);
}

.desktop-hero-section {
  display: block;
}

.desktop-sub-hero {
  display: none;
}

/* Базово: sub_hero скрыт */
.desktop-sub-hero { display: none; }

/* Состояние на время перехода — обе секции как слои поверх верстки */
body.is-desktop-transitioning .desktop-hero-section,
body.is-desktop-transitioning .desktop-sub-hero {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Слои/порядок */
.desktop-hero-section { z-index: 2; }
.desktop-sub-hero { z-index: 1; }

/* Начальное положение sub_hero — справа, вне экрана */
.desktop-sub-hero.slide-enter {
  display: block;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 1.2s ease-in-out, opacity 0.8s ease-in-out;
}

/* sub_hero заезжает */
.desktop-sub-hero.slide-enter-active {
  transform: translateX(0);
  opacity: 1;
}

/* hero уезжает влево */
.desktop-hero-section.slide-out {
  transition: transform 1.2s ease-in-out, opacity 0.8s ease-in-out;
  transform: translateX(-100%);
  opacity: 0;
}

/* Обратное движение при возврате */
.desktop-hero-section.slide-in {
  transition: transform 1.0s ease-in-out, opacity 0.6s ease-in-out;
  transform: translateX(0);
  opacity: 1;
}

/* Лёгкое движение самого видео, чтобы добавить динамики */
.desktop-hero-video {
  transition: transform 1.2s ease-in-out;
}

.desktop-hero-section.slide-out .desktop-hero-video {
  transform: translateX(-20%);
}

/* === Плавный переход между секциями === */
.desktop-transition-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 999;
}

/* Активное состояние — лёгкое затемнение */
.desktop-transition-overlay.active {
  opacity: 0.5;
  pointer-events: auto;
}

/* === Анимация движения видео при переходе === */
.desktop-hero-video {
  transition: transform 1.2s ease, opacity 1s ease;
}

.desktop-hero-video.slide-left {
  transform: translateX(-5%);
  opacity: 0.8;
}



/* =====================================
   DESKTOP OFF (mobile + tablet active)
   ===================================== */
@media screen and (max-width: 1199px) {

  /* полностью отключаем desktop-версию */
  #desktop-hero,
  .desktop-hero,
  .desktop-container,
  .desktop-hero-section,
  .desktop-sub-hero {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

}


/* =====================================
   DESKTOP MODE (>=1200px)
   mobile + tablet отключены
   ===================================== */
@media screen and (min-width: 1200px) {

  body {
    overflow-x: hidden;
  }

  /* ===== HEADER mobile/tablet ===== */
  #header,
  #headerSpacer,
  #headerRevealBtn,
  #fullscreenNav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ===== HERO mobile ===== */
  main,
  main .hero-section,
  .Konsultacja--mobile {
    display: none !important;
  }

  /* ===== HERO tablet ===== */
  #hero-tablet,
  .hero-t.hero-section,
  #video_mask-section-tablet,
  .video_mask-section-tablet,
  .video_mask-section.hero-section.video_mask-section-tablet {
    display: none !important;
  }

  /* ===== SUBHERO tablet ===== */
  #subhero-section,
  .sub_hero-tablet.subhero-section,
  #subhero-section .subhero-mobile,
  #subhero-section .subhero-tablet {
    display: none !important;
  }

  /* ===== DESKTOP VERSION ===== */
  #desktop-hero,
  .desktop-hero {
    display: block;
    position: relative;
    z-index: 20;
  }

  .desktop-container {
    display: block;
  }

  .desktop-hero-section {
    display: block;
  }

  .desktop-sub-hero {
    display: none;
  }

}

/* =====================================
   МОИ ТЕКУЩИЕ ФИКСЫ — НЕ ТРОГАЕМ
   ===================================== */

.desktop-hero .desktop-promo-header-text {
  color: #FFFFFF;
}

.desktop-hero .desktop-promo-subtitle-text {
  color: #B3FA46;
}

.desktop-hero .desktop-users-count-text {
  color: #FFFFFF;
}

.desktop-hero .desktop-service-card__img {
  width: 200px;
  height: 240px;
  max-width: none;
  object-fit: cover;
}

.desktop-hero .desktop-service-card__img-fan {
  width: 240px;
  height: 320px;
  max-width: none;
  object-fit: cover;
}

.desktop-promo-header {
  position: relative;
  z-index: 15;
  opacity: 1;
  transform: translateX(0);
}

.desktop-promo-text {
  position: relative;
  z-index: 15;
}

.desktop-hero .desktop-promo-header-text {
  color: #FFFFFF;
  opacity: 1;
  transform: translateX(0);
}

.desktop-promo-subtitle {
  opacity: 1;
  transform: translateX(0);
}

.desktop-hero .desktop-promo-subtitle-text {
  color: #B3FA46;
  opacity: 1;
  transform: translateX(0);
}

.desktop-hero .desktop-users-count-text {
  color: #FFFFFF;
  opacity: 1;
}

.desktop-users-count-text-600 {
  opacity: 1;
}

.desktop-cards-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
}

.desktop-client-card-link {
  position: relative;
  z-index: 12;
}

.desktop-hero-it-img,
.desktop-hero-monitoring-img {
  position: relative;
  z-index: 11;
}

/* =====================================
   МОИ ПРАВКИ ДЛЯ ПРОСТОГО ПЕРЕКЛЮЧЕНИЯ
   hero <-> subhero через display
   ===================================== */

.desktop-hero-section {
  display: block;
  position: relative;
  z-index: 2;
}

.desktop-sub-hero {
  display: none;
  position: relative;
  z-index: 3;
}

/* Видео hero */
.desktop-hero-video {
  transition: transform 1.2s ease, opacity 1s ease;
}

.desktop-hero-video.slide-left {
  transform: translateX(-5%);
  opacity: 0.8;
}

/* Overlay */
.desktop-transition-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 999;
}

.desktop-transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}


/* =====================================
   EMERGENCY FIX: restore mobile/tablet scroll
   ===================================== */

@media (max-width: 1199px) {
  html,
  body {
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100% !important;
  }

  body.is-desktop-transitioning,
  body.subhero-open {
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100% !important;
  }

  .desktop-hero-section,
  .desktop-sub-hero {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .desktop-transition-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
  }

  .desktop-hero-video {
    transform: none !important;
    opacity: 1 !important;
  }

  main,
  .hero-section,
  .video_mask-section,
  #hero-tablet,
  .hero-t,
  .video_mask-section-tablet,
  #video_mask-section-tablet {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
}



/* =====================================
   DESKTOP TRANSITION + VISIBILITY
   ПОЛНАЯ ИЗОЛЯЦИЯ ТОЛЬКО ДЛЯ >=1200px
   ===================================== */

/* Базово вне desktop ничего не показываем и не трогаем */
#desktop-hero,
.desktop-hero,
.desktop-container,
.desktop-hero-section,
.desktop-sub-hero,
.desktop-transition-overlay {
  display: none;
}

/* =====================================
   DESKTOP OFF (mobile + tablet active)
   ===================================== */
@media screen and (max-width: 1199px) {
  #desktop-hero,
  .desktop-hero,
  .desktop-container,
  .desktop-hero-section,
  .desktop-sub-hero,
  .desktop-transition-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.is-desktop-transitioning,
  body.subhero-open {
    overflow: auto !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* =====================================
   DESKTOP MODE (>=1200px)
   ===================================== */
@media screen and (min-width: 1200px) {
  body {
    overflow-x: hidden;
  }

  /* ===== HEADER mobile/tablet ===== */
  #header,
  #headerSpacer,
  #headerRevealBtn,
  #fullscreenNav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ===== HERO mobile ===== */
  main,
  main .hero-section,
  .Konsultacja--mobile {
    display: none !important;
  }

  /* ===== HERO tablet ===== */
  #hero-tablet,
  .hero-t.hero-section,
  #video_mask-section-tablet,
  .video_mask-section-tablet,
  .video_mask-section.hero-section.video_mask-section-tablet {
    display: none !important;
  }

  /* ===== SUBHERO tablet ===== */
  #subhero-section,
  .sub_hero-tablet.subhero-section,
  #subhero-section .subhero-mobile,
  #subhero-section .subhero-tablet {
    display: none !important;
  }

  /* ===== DESKTOP VERSION ===== */
  #desktop-hero,
  .desktop-hero {
    display: block;
    position: relative;
    z-index: 20;
  }

  .desktop-container {
    display: block;
  }

  .desktop-hero-section {
    display: block;
    position: relative;
    z-index: 2;
  }

  .desktop-sub-hero {
    display: none;
    position: relative;
    z-index: 3;
    width: 100%;
    height: 1800px;
    overflow: hidden;
  }

  /* ===== СТАРЫЙ transition-сценарий — ТОЛЬКО desktop ===== */
  body.is-desktop-transitioning .desktop-hero-section,
  body.is-desktop-transitioning .desktop-sub-hero {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .desktop-sub-hero.slide-enter {
    display: block;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 1.2s ease-in-out, opacity 0.8s ease-in-out;
  }

  .desktop-sub-hero.slide-enter-active {
    transform: translateX(0);
    opacity: 1;
  }

  .desktop-hero-section.slide-out {
    transition: transform 1.2s ease-in-out, opacity 0.8s ease-in-out;
    transform: translateX(-100%);
    opacity: 0;
  }

  .desktop-hero-section.slide-in {
    transition: transform 1s ease-in-out, opacity 0.6s ease-in-out;
    transform: translateX(0);
    opacity: 1;
  }

  .desktop-hero-video {
    transition: transform 1.2s ease, opacity 1s ease;
  }

  .desktop-hero-section.slide-out .desktop-hero-video {
    transform: translateX(-20%);
  }

  .desktop-hero-video.slide-left {
    transform: translateX(-5%);
    opacity: 0.8;
  }

  .desktop-transition-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 999;
  }

  .desktop-transition-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
}

#desktop-subhero-end {
  width: 100%;
  height: 1px;
}
/* =========================================================
   DESKTOP SUBHERO TABLE CASCADE
   desktop only
========================================================= */
@media (min-width: 1200px) {
  .desktop-internet-price-header,
  .desktop-internet-price-row {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(5px);
    will-change: opacity, transform, filter;
  }

  .desktop-internet-price-header.is-cascade-in,
  .desktop-internet-price-row.is-cascade-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
      opacity 0.7s cubic-bezier(.22,.61,.36,1),
      transform 0.7s cubic-bezier(.22,.61,.36,1),
      filter 0.7s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--cascade-delay, 0ms);
  }

  #desktop-subhero-end {
    width: 100%;
    height: 1px;
  }
}


























/* Mobile CSS */
.marquee-section {
  position: relative;
  height: 80px;
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.marquee-section .container {
  width: 300px;
  margin: 0 auto;
}

.marquee-section::before,
.marquee-section::after {
  content: '';
  position: absolute;
  top: 0;
  width: 48px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-section::before {
  left: 0;
  background: linear-gradient(to right, #f6f6f6 0%, rgba(246,246,246,0) 100%);
}

.marquee-section::after {
  right: 0;
  background: linear-gradient(to left, #f6f6f6 0%, rgba(246,246,246,0) 100%);
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
  will-change: transform;
  align-items: baseline;
}

.marquee-flex-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  flex-shrink: 0;
  transition: opacity 0.5s ease-in-out;
}

.marquee-flex-box span {
  color: rgba(29, 29, 29, 0.75);
  text-align: center;
  font-family: 'Poppins', serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
  white-space: nowrap;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 0 6px rgba(255,255,255,0.25);
}

.marquee-flex-box img {
  height: 22px;
  opacity: 0.8;
  filter: brightness(0.85);
  transition: filter 0.3s ease;
}

.marquee-flex-box img:hover {
  filter: brightness(1);
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@media (min-width: 360px) {
  .marquee-section {
    height: 86px;
  }

  .marquee-section .container {
    width: 340px;
  }

  .marquee-flex-box {
    gap: 13px;
    padding: 0 15px;
  }

  .marquee-flex-box span {
    font-size: 17px;
  }

  .marquee-flex-box img {
    height: 24px;
  }

  .marquee-section::before,
  .marquee-section::after {
    width: 54px;
  }
}

@media (min-width: 390px) {
  .marquee-section {
    height: 90px;
  }

  .marquee-section .container {
    width: 370px;
  }

  .marquee-flex-box {
    gap: 14px;
    padding: 0 16px;
  }

  .marquee-flex-box span {
    font-size: 18px;
  }

  .marquee-flex-box img {
    height: 25px;
  }

  .marquee-section::before,
  .marquee-section::after {
    width: 58px;
  }
}

@media (min-width: 412px) {
  .marquee-section {
    height: 94px;
  }

  .marquee-section .container {
    width: 392px;
  }

  .marquee-flex-box {
    gap: 15px;
    padding: 0 17px;
  }

  .marquee-flex-box span {
    font-size: 19px;
  }

  .marquee-flex-box img {
    height: 26px;
  }

  .marquee-section::before,
  .marquee-section::after {
    width: 62px;
  }
}

@media (min-width: 428px) {
  .marquee-section {
    height: 98px;
  }

  .marquee-section .container {
    width: 408px;
  }

  .marquee-flex-box {
    gap: 16px;
    padding: 0 18px;
  }

  .marquee-flex-box span {
    font-size: 20px;
  }

  .marquee-flex-box img {
    height: 27px;
  }

  .marquee-section::before,
  .marquee-section::after {
    width: 66px;
  }
}

@media (min-width: 480px) {
  .marquee-section {
    height: 106px;
  }

  .marquee-section .container {
    width: 460px;
  }

  .marquee-flex-box {
    gap: 18px;
    padding: 0 20px;
  }

  .marquee-flex-box span {
    font-size: 22px;
  }

  .marquee-flex-box img {
    height: 30px;
  }

  .marquee-section::before,
  .marquee-section::after {
    width: 74px;
  }
}

@media (min-width: 540px) {
  .marquee-section {
    height: 112px;
  }

  .marquee-section .container {
    width: 520px;
  }

  .marquee-flex-box {
    gap: 20px;
    padding: 0 22px;
  }

  .marquee-flex-box span {
    font-size: 24px;
  }

  .marquee-flex-box img {
    height: 32px;
  }

  .marquee-section::before,
  .marquee-section::after {
    width: 82px;
  }
}

@media (min-width: 600px) {
  .marquee-section {
    height: 120px;
  }

  .marquee-section .container {
    width: 580px;
  }

  .marquee-flex-box {
    gap: 22px;
    padding: 0 24px;
  }

  .marquee-flex-box span {
    font-size: 26px;
  }

  .marquee-flex-box img {
    height: 34px;
  }

  .marquee-section::before,
  .marquee-section::after {
    width: 90px;
  }
}

@media (min-width: 639px) {
  .marquee-section {
    height: 128px;
  }

  .marquee-section .container {
    width: 639px;
  }

  .marquee-flex-box {
    gap: 24px;
    padding: 0 26px;
  }

  .marquee-flex-box span {
    font-size: 28px;
  }

  .marquee-flex-box img {
    height: 36px;
  }

  .marquee-section::before,
  .marquee-section::after {
    width: 96px;
  }
}

/* ===============================
   TYPOGRAPHY – MOBILE (320px)
   =============================== */

h1 {
  font-size: 30px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h4 strong {
  font-weight: 600;
}

h5 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

h6 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-transform: capitalize;
}

/* ===============================
   DESKTOP
   =============================== */

@media (min-width: 1200px) {
  .marquee-section {
    margin-top: 32px;
  }
}


/* ============================================================
   ABOUT / O NAS — MOBILE FIRST (320 → 639)
============================================================ */

.about-section {
  position: relative;
  background: #ffffff;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 40px 10px 40px;
  border-radius: 24px;
}

.about-section .container {
  width: 100%;
  margin: 0 auto;
}

/* ===== LABEL ===== */
.about-label {
  position: absolute;
  width: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  background: #212121;
  border-radius: 16px;
  z-index: 5;
}

.about-label .label-text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

.about-label .label-icon {
  width: 10px;
  height: 10px;
  background-color: #ace238;
  border-radius: 50%;
}

/* ===== WRAPPER ===== */
.about-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* ===== IMAGE ===== */
.about-image {
  width: 300px;
  height: 284px;
}

.about-image picture,
.about-image img {
  width: 100%;
  height: 100%;
  display: block;
}

.about-image img {
  object-fit: cover;
  border-radius: 20px;
}

/* ===== CONTENT ===== */
.about-content {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== TITLE / TEXT / SUBTITLE ===== */
.about-title {
  font-family: "Open Sans";
  font-weight: 400;
  color: #212121;
  line-height: 1.25;
}

.about-text {
  font-family: "Poppins";
  font-size: 14px;
  font-weight: 400;
  color: #313131;
  line-height: 1.6;
}

.about-subtitle {
  font-family: "Open Sans";
  font-weight: 600;
  color: #313131;
}

/* ===== ICON GRID ===== */
.about-icons {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 14px;
  width: 100%;
}

.about-icons .about-item:nth-child(2n) {
  margin-left: 0;
}

/* ===== ICON ITEM ===== */
.about-item {
  display: flex;
  align-items: center;
  gap: 85px;
  width: 100%;
  max-width: 300px;
}

/* ===== ICON BOX ===== */
.icon-box {
  width: 64px;
  height: 64px;
  padding: 16px;
  border-radius: 14px;
  background: #212121;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-box img {
  width: 28px;
  height: 28px;
}

/* ===== ICON TEXT ===== */
.icon-text h3 {
  font-family: "Open Sans";
  line-height: 1.1;
  color: #212121;
  margin-bottom: 4px;
}

.icon-text p {
  font-family: "Poppins";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: #313131;
  max-width: 140px;
  margin-top: 2px;
}

/* ===== SCALE (min-width only) ===== */
@media (min-width: 360px) {
  .about-section { max-width: 360px; padding: 44px 12px 44px; border-radius: 26px; }
  .about-label { width: 140px; padding: 12px 16px; border-radius: 18px; }
  .about-label .label-text { font-size: 17px; }
  .about-label .label-icon { width: 11px; height: 11px; }
  .about-wrapper { gap: 20px; }
  .about-image { width: 340px; height: 322px; }
  .about-content { max-width: 340px; gap: 18px; }
  .about-title { font-size: 26px; }
  .about-text { font-size: 15px; }
  .about-subtitle { font-size: 22px; }
  .about-icons { row-gap: 16px; }
  .about-item { gap: 92px; max-width: 340px; }
  .icon-box { width: 70px; height: 70px; padding: 18px; border-radius: 16px; }
  .icon-box img { width: 30px; height: 30px; }
  .icon-text h3 { font-size: 22px; }
  .icon-text p { font-size: 15px; max-width: 160px; }
}

@media (min-width: 390px) {
  .about-section { max-width: 390px; padding: 48px 14px 48px; border-radius: 28px; }
  .about-label { width: 152px; padding: 13px 18px; border-radius: 18px; }
  .about-label .label-text { font-size: 18px; }
  .about-label .label-icon { width: 12px; height: 12px; }
  .about-wrapper { gap: 22px; }
  .about-image { width: 370px; height: 350px; }
  .about-content { max-width: 370px; gap: 20px; }
  .about-title { font-size: 28px; }
  .about-text { font-size: 16px; }
  .about-subtitle { font-size: 24px; }
  .about-icons { row-gap: 18px; }
  .about-item { gap: 100px; max-width: 370px; }
  .icon-box { width: 74px; height: 74px; padding: 19px; border-radius: 17px; }
  .icon-box img { width: 32px; height: 32px; }
  .icon-text h3 { font-size: 24px; }
  .icon-text p { font-size: 16px; max-width: 170px; }
}

@media (min-width: 412px) {
  .about-section { max-width: 412px; padding: 52px 16px 52px; border-radius: 30px; }
  .about-label { width: 164px; padding: 14px 20px; border-radius: 20px; }
  .about-label .label-text { font-size: 19px; }
  .about-wrapper { gap: 24px; }
  .about-image { width: 392px; height: 371px; }
  .about-content { max-width: 392px; gap: 22px; }
  .about-title { font-size: 30px; }
  .about-text { font-size: 17px; }
  .about-subtitle { font-size: 26px; }
  .about-icons { row-gap: 20px; }
  .about-item { gap: 110px; max-width: 392px; }
  .icon-box { width: 80px; height: 80px; padding: 20px; border-radius: 18px; }
  .icon-box img { width: 34px; height: 34px; }
  .icon-text h3 { font-size: 26px; }
  .icon-text p { font-size: 17px; max-width: 180px; }
}

@media (min-width: 428px) {
  .about-section { max-width: 428px; padding: 56px 18px 56px; border-radius: 32px; }
  .about-label { width: 176px; padding: 15px 22px; border-radius: 20px; }
  .about-label .label-text { font-size: 20px; }
  .about-wrapper { gap: 26px; }
  .about-image { width: 408px; height: 386px; }
  .about-content { max-width: 408px; gap: 24px; }
  .about-title { font-size: 32px; }
  .about-text { font-size: 18px; }
  .about-subtitle { font-size: 28px; }
  .about-icons { row-gap: 22px; }
  .about-item { gap: 120px; max-width: 408px; }
  .icon-box { width: 86px; height: 86px; padding: 22px; border-radius: 20px; }
  .icon-box img { width: 36px; height: 36px; }
  .icon-text h3 { font-size: 28px; }
  .icon-text p { font-size: 18px; max-width: 190px; }
}

@media (min-width: 480px) {
  .about-section { max-width: 480px; padding: 64px 20px 64px; border-radius: 34px; }
  .about-label { width: 196px; padding: 16px 26px; border-radius: 22px; }
  .about-label .label-text { font-size: 22px; }
  .about-wrapper { gap: 28px; }
  .about-image { width: 460px; height: 435px; }
  .about-content { max-width: 460px; gap: 26px; }
  .about-title { font-size: 34px; }
  .about-text { font-size: 19px; }
  .about-subtitle { font-size: 30px; }
  .about-icons { row-gap: 24px; }
  .about-item { gap: 135px; max-width: 460px; }
  .icon-box { width: 94px; height: 94px; padding: 24px; border-radius: 22px; }
  .icon-box img { width: 40px; height: 40px; }
  .icon-text h3 { font-size: 30px; }
  .icon-text p { font-size: 19px; max-width: 210px; }
}

@media (min-width: 540px) {
  .about-section { max-width: 540px; padding: 72px 22px 72px; border-radius: 36px; }
  .about-label { width: 212px; padding: 18px 28px; border-radius: 24px; }
  .about-label .label-text { font-size: 24px; }
  .about-wrapper { gap: 30px; }
  .about-image { width: 520px; height: 492px; }
  .about-content { max-width: 520px; gap: 28px; }
  .about-title { font-size: 36px; }
  .about-text { font-size: 20px; }
  .about-subtitle { font-size: 32px; }
  .about-icons { row-gap: 26px; }
  .about-item { gap: 150px; max-width: 520px; }
  .icon-box { width: 102px; height: 102px; padding: 26px; border-radius: 24px; }
  .icon-box img { width: 44px; height: 44px; }
  .icon-text h3 { font-size: 32px; }
  .icon-text p { font-size: 20px; max-width: 230px; }
}

@media (min-width: 600px) {
  .about-section { max-width: 600px; padding: 80px 24px 80px; border-radius: 38px; }
  .about-label { width: 228px; padding: 20px 30px; border-radius: 26px; }
  .about-label .label-text { font-size: 26px; }
  .about-wrapper { gap: 32px; }
  .about-image { width: 580px; height: 549px; }
  .about-content { max-width: 580px; gap: 30px; }
  .about-title { font-size: 38px; }
  .about-text { font-size: 21px; }
  .about-subtitle { font-size: 34px; }
  .about-icons { row-gap: 28px; }
  .about-item { gap: 165px; max-width: 580px; }
  .icon-box { width: 110px; height: 110px; padding: 28px; border-radius: 26px; }
  .icon-box img { width: 48px; height: 48px; }
  .icon-text h3 { font-size: 34px; }
  .icon-text p { font-size: 21px; max-width: 250px; }
}

@media (min-width: 639px) {
  .about-section { max-width: 639px; padding: 88px 26px 88px; border-radius: 40px; }
  .about-label { width: 244px; padding: 22px 32px; border-radius: 28px; }
  .about-label .label-text { font-size: 28px; }
  .about-wrapper { gap: 34px; }
  .about-image { width: 639px; height: 605px; }
  .about-content { max-width: 639px; gap: 32px; }
  .about-title { font-size: 40px; }
  .about-text { font-size: 22px; }
  .about-subtitle { font-size: 36px; }
  .about-icons { row-gap: 30px; }
  .about-item { gap: 180px; max-width: 639px; }
  .icon-box { width: 118px; height: 118px; padding: 30px; border-radius: 28px; }
  .icon-box img { width: 52px; height: 52px; }
  .icon-text h3 { font-size: 36px; }
  .icon-text p { font-size: 22px; max-width: 270px; }
}

/* ============================================================
   TABLET — ABOUT (640 → 1199)
============================================================ */
@media (min-width: 640px) and (max-width: 1199px) {
  .about-section {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 88px 0 88px;
    border-radius: 40px;
  }

  .about-section .container {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .about-wrapper {
    gap: 32px;
    align-items: flex-start;
  }

  .about-image {
    width: 640px;
    height: 500px;
    margin: 0;
  }

  .about-image picture,
  .about-image img {
    width: 640px;
    height: 500px;
    display: block;
  }

  .about-image img {
    object-fit: cover;
  }

  .about-label {
    width: 150px;
    height: 50px;
    padding: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .about-label .label-text {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  .about-label .label-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .about-content {
    width: 100%;
    max-width: 640px;
    padding: 0;
    margin: 0;
    gap: 24px;
  }

  .about-title,
  .about-text,
  .about-subtitle,
  .about-icons {
    margin-left: 0;
    margin-right: 0;
  }

  .about-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 200px;
    row-gap: 20px;
    width: 100%;
  }

  .about-icons .about-item:nth-child(2n) {
    margin-left: auto;
  }

  .about-item {
    gap: 16px;
    width: 100%;
    max-width: 300px;
  }

  .icon-box {
    width: 84px;
    height: 84px;
    padding: 20px;
    border-radius: 14px;
  }

  .icon-box img {
    width: 36px;
    height: 36px;
  }

  .icon-text h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 4px;
  }

  .icon-text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    max-width: 140px;
    margin-top: 2px;
  }
}

/* ============================================================
   DESKTOP — ABOUT (1200+)
============================================================ */
@media (min-width: 1200px) {
  .about-section {
    max-width: 1180px;
    padding: 120px 0;
    border-radius: 30px;
  }

  .about-section .container {
    max-width: 1180px;
    margin: 0 auto;
  }

  .about-wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
  }

  .about-image {
    position: relative;
    width: 507px;
    height: 594px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
  }

  .about-image picture,
  .about-image img {
    width: 507px;
    height: 594px;
    display: block;
  }

  .about-image img {
    object-fit: cover;
    border-radius: 20px;
  }

  .about-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 145px;
    padding: 10px 14px;
    border-radius: 14px;
    margin-left: 5px;
    gap: 10px;
    z-index: 10;
  }

  .about-label .label-text {
    font-size: 18px;
  }

  .about-label .label-icon {
    width: 10px;
    height: 10px;
  }

  .about-content {
    max-width: 590px;
    min-height: 594px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
  }

  .about-title {
    font-size: 45px;
    line-height: normal;
    margin-top: -10px;
  }

  .about-text {
    font-size: 20px;
    line-height: 1.5;
  }

  .about-subtitle {
    font-size: 30px;
    margin-top: 40px;
  }

  .about-icons {
    display: grid;
    grid-template-columns: repeat(2, 219px);
    column-gap: 147px;
    row-gap: 12px;
    width: 590px;
    margin-top: auto;
  }

  .about-item {
    gap: 19px;
    align-items: center;
  }

  .icon-box {
    width: 84px;
    height: 84px;
    padding: 20px;
    border-radius: 14px;
  }

  .icon-box img {
    width: 36px;
    height: 36px;
  }

  .icon-text h3 {
    font-size: 30px;
    margin: 0;
  }

  .icon-text p {
    font-size: 20px;
    margin: 0;
    line-height: normal;
  }
}

/* ============================================================
   ABOUT — ANIMATION MOBILE / TABLET (ONLY < 1200)
============================================================ */
@media (max-width: 1199px) {
  .about-section.about-mobile-tablet-anim .about-label {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .about-section.about-mobile-tablet-anim .about-image {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.42s ease, transform 0.42s ease;
  }

  .about-section.about-mobile-tablet-anim .about-title,
  .about-section.about-mobile-tablet-anim .about-text,
  .about-section.about-mobile-tablet-anim .about-subtitle {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.38s ease, transform 0.38s ease;
  }

  .about-section.about-mobile-tablet-anim .about-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.32s ease, transform 0.32s ease;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-label {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-image {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.08s;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.16s;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.24s;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.40s;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.48s;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.56s;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-item:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.64s;
  }

  .about-section.about-mobile-tablet-anim:not(.is-active) .about-label,
  .about-section.about-mobile-tablet-anim:not(.is-active) .about-image,
  .about-section.about-mobile-tablet-anim:not(.is-active) .about-title,
  .about-section.about-mobile-tablet-anim:not(.is-active) .about-text,
  .about-section.about-mobile-tablet-anim:not(.is-active) .about-subtitle,
  .about-section.about-mobile-tablet-anim:not(.is-active) .about-item {
    transition-delay: 0s;
  }
}

/* ============================================================
   ABOUT — ANIMATION DESKTOP (ONLY 1200+)
============================================================ */
@media (min-width: 1200px) {
  .about-section.about-desktop-anim .about-label {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.32s ease, transform 0.32s ease;
  }

  .about-section.about-desktop-anim .about-image {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.38s ease, transform 0.38s ease;
  }

  .about-section.about-desktop-anim .about-title,
  .about-section.about-desktop-anim .about-text,
  .about-section.about-desktop-anim .about-subtitle,
  .about-section.about-desktop-anim .about-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.34s ease, transform 0.34s ease;
  }

  .about-section.about-desktop-anim.is-active .about-label {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .about-section.about-desktop-anim.is-active .about-image {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.08s;
  }

  .about-section.about-desktop-anim.is-active .about-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.14s;
  }

  .about-section.about-desktop-anim.is-active .about-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.20s;
  }

  .about-section.about-desktop-anim.is-active .about-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.26s;
  }

  .about-section.about-desktop-anim.is-active .about-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s;
  }

  .about-section.about-desktop-anim.is-active .about-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.38s;
  }

  .about-section.about-desktop-anim.is-active .about-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.44s;
  }

  .about-section.about-desktop-anim.is-active .about-item:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.50s;
  }

  .about-section.about-desktop-anim:not(.is-active) .about-label,
  .about-section.about-desktop-anim:not(.is-active) .about-image,
  .about-section.about-desktop-anim:not(.is-active) .about-title,
  .about-section.about-desktop-anim:not(.is-active) .about-text,
  .about-section.about-desktop-anim:not(.is-active) .about-subtitle,
  .about-section.about-desktop-anim:not(.is-active) .about-item {
    transition-delay: 0s;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .about-label,
  .about-image,
  .about-title,
  .about-text,
  .about-subtitle,
  .about-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ============================================================
   ABOUT — FIX GLOBAL HERO ANIMATION LEAK
   ЗАМЕНИ ЭТИМ ВЕСЬ ТЕКУЩИЙ БЛОК FIX В САМОМ НИЗУ STYLE.CSS
============================================================ */

/* about-content не должен скрываться глобальным animate-header */
.about-section .about-content.animate-header {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ============================================================
   ABOUT IMAGE — FORCE LOCAL ANIMATION CONTROL
   перебиваем глобальный .animate-left только внутри about-section
============================================================ */
@media (max-width: 1199px) {
  .about-section.about-mobile-tablet-anim .about-image.animate-left {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.42s ease, transform 0.42s ease;
  }

  .about-section.about-mobile-tablet-anim.is-active .about-image.animate-left {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.08s;
  }

  .about-section.about-mobile-tablet-anim:not(.is-active) .about-image.animate-left {
    transition-delay: 0s;
  }
}

@media (min-width: 1200px) {
  .about-section.about-desktop-anim .about-image.animate-left {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.38s ease, transform 0.38s ease;
  }

  .about-section.about-desktop-anim.is-active .about-image.animate-left {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.08s;
  }

  .about-section.about-desktop-anim:not(.is-active) .about-image.animate-left {
    transition-delay: 0s;
  }
}
/* Mobile CSS */
.dekor-section {
  position: relative;
  width: 300px;
  padding-top: 40px;
  background: #fff;
  overflow: hidden;
  margin: 0 auto;
}

.dekor-content {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

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


@media (min-width: 360px) {
.dekor-section {
width: 340px;
padding-top: 44px;
}
}

@media (min-width: 390px) {
.dekor-section {
width: 370px;
padding-top: 48px;
}
}

@media (min-width: 412px) {
.dekor-section {
width: 392px;
padding-top: 52px;
}
}

@media (min-width: 428px) {
.dekor-section {
width: 408px;
padding-top: 56px;
}
}

@media (min-width: 480px) {
.dekor-section {
width: 460px;
padding-top: 64px;
}
}

@media (min-width: 540px) {
.dekor-section {
width: 520px;
padding-top: 72px;
}
}

@media (min-width: 600px) {
.dekor-section {
width: 580px;
padding-top: 80px;
}
}

@media (min-width: 639px) {
.dekor-section {
width: 639px;
padding-top: 88px;
}
}

/* ===============================
   DEKOR SECTION — MOBILE BASE
   =============================== */
/* Mobile CSS */
.dekor-section {
  position: relative;
  width: 300px;
  padding-top: 40px;
  background: #fff;
  overflow: hidden;
  margin: 0 auto;
}

.dekor-content {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

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

@media (min-width: 360px) {
  .dekor-section {
    width: 340px;
    padding-top: 44px;
  }
}

@media (min-width: 390px) {
  .dekor-section {
    width: 370px;
    padding-top: 48px;
  }
}

@media (min-width: 412px) {
  .dekor-section {
    width: 392px;
    padding-top: 52px;
  }
}

@media (min-width: 428px) {
  .dekor-section {
    width: 408px;
    padding-top: 56px;
  }
}

@media (min-width: 480px) {
  .dekor-section {
    width: 460px;
    padding-top: 64px;
  }
}

@media (min-width: 540px) {
  .dekor-section {
    width: 520px;
    padding-top: 72px;
  }
}

@media (min-width: 600px) {
  .dekor-section {
    width: 580px;
    padding-top: 80px;
  }
}

@media (min-width: 639px) {
  .dekor-section {
    width: 639px;
    padding-top: 88px;
  }
}

/* Tablet CSS */
@media (min-width: 640px) {
  .dekor-section {
    position: relative;
    width: 740px;
    padding-top: 40px;
    background: #fff;
    overflow: hidden;
    margin: 0 auto;
  }

  .dekor-content {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
  }
}

/* Desktop CSS */
@media (min-width: 1024px) {
  .dekor-section {
    position: relative;
    width: 1400px;
    padding-top: 200px;
    background: #fff;
    overflow: hidden;
    margin: 0 auto;
  }

  .dekor-content {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
  }
}


/* ===============================
   TYPOGRAPHY – MOBILE (320px)
   =============================== */
/* ===============================
   USLUGI SECTION
   MOBILE BASE + TABLET + DESKTOP
   =============================== */

/* ===== TYPOGRAPHY INSIDE SECTION ===== */

.uslugi-section h1 {
  font-size: 30px;
  line-height: 1.2;
}

.uslugi-section h2 {
  font-size: 24px;
  line-height: 1.25;
}

.uslugi-section h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

.uslugi-section h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.uslugi-section h4 strong {
  font-weight: 600;
}

.uslugi-section h5 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.uslugi-section h6 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-transform: capitalize;
}

/* ===== BASE ===== */

.uslugi-section {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  z-index: 0;
  background: #1D1D1D;
}

.uslugi-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 640px;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.uslugi-container {
  position: relative;
  z-index: 1;
  width: 300px;
  margin: 0 auto;
  box-sizing: border-box;
}

.uslugi-section-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 40px;
}

.uslugi-section-pill-uslugi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: 46px;
  border-radius: 48px;
  background: #262626;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  white-space: nowrap;
  width: auto;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.uslugi-section-pill-uslugi.in-view {
  opacity: 1;
  transform: translateY(0);
}

.uslugi-section-label-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ACE238;
  flex-shrink: 0;
}

.uslugi-section-text {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.uslugi__title {
  max-width: 300px;
  color: #fff;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  margin-top: 26px;
}

.slugi-section-content-wrap {
  display: flex;
  margin-top: 18px;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.uslugi-section-content {
  position: relative;
  border-radius: 16px;
  width: 300px;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.015),
    rgba(255, 255, 255, 0.005)
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,.8,.24,1);
  will-change: opacity, transform;
}

.uslugi-section-content.in-view {
  opacity: 1;
  transform: translateY(0);
}

.uslugi-section-content-img {
  width: 100%;
  height: 140px;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
}

.uslugi-section-content-img--it-desktop {
  display: none;
}

.uslugi-section-content-img-ikon {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  z-index: 2;
  pointer-events: none;
}

.uslugi-section-content-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 16px;
  color: #fff;
}

.uslugi__heading {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  margin-bottom: 10px;
  color: #fff;
}

.uslugi__subtitle {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
  max-width: 100%;
}

.uslugi__list {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #fff;
}

.uslugi__list--grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  width: 100%;
  margin-bottom: 14px;
  align-self: center;
}

.uslugi__list li {
  text-align: left;
  white-space: normal;
}

.uslugi__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.uslugi__btn-icon-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
}

.uslugi__btn-ikon {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  transition: opacity 0.3s ease;
}

/* Base button colors */
#uslugi-btn-internet {
  background: #28E1E7;
  color: #ffffff;
}

#uslugi-btn-it {
  background: #ACE238;
  color: #212121;
}

#uslugi-btn-monitoring {
  background: #ffffff;
  color: #212121;
}

/* Base icon visibility */
#uslugi-btn-internet .ikon-white {
  opacity: 1;
}

#uslugi-btn-internet .ikon-black {
  opacity: 0;
}

#uslugi-btn-it .ikon-white,
#uslugi-btn-monitoring .ikon-white {
  opacity: 0;
}

#uslugi-btn-it .ikon-black,
#uslugi-btn-monitoring .ikon-black {
  opacity: 1;
}

.uslugi__btn.is-active {
  background: #ACE238;
  color: #212121;
}

.uslugi__btn.is-active .ikon-white {
  opacity: 0;
}

.uslugi__btn.is-active .ikon-black {
  opacity: 1;
}

/* ===== BLUR TEXT ===== */

.blur-text {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  overflow: hidden;
}

.blur-text .lang-pl,
.blur-text .lang-ua {
  display: block;
}

.blur-text .lang-pl span,
.blur-text .lang-ua span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(var(--start-y, 50px));
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
  will-change: opacity, filter, transform;
}

.blur-text.in-view .lang-pl span,
.blur-text.in-view .lang-ua span {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ===== MOBILE STEP UPS ===== */

@media (min-width: 360px) {
  .uslugi-container {
    width: 340px;
  }

  .uslugi-section-top {
    margin-top: 44px;
  }

  .uslugi-section-pill-uslugi {
    height: 50px;
    padding: 0 20px;
    font-size: 17px;
  }

  .uslugi-section-label-icon {
    width: 13px;
    height: 13px;
  }

  .uslugi__title {
    max-width: 340px;
    font-size: 34px;
    margin-top: 28px;
  }

  .slugi-section-content-wrap {
    margin-top: 20px;
    gap: 20px;
  }

  .uslugi-section-content {
    width: 340px;
    border-radius: 18px;
  }

  .uslugi-section-content-img {
    height: 158px;
    border-radius: 18px 18px 0 0;
  }

  .uslugi-section-content-img-ikon {
    top: 18px;
    left: 18px;
    width: 36px;
    height: 36px;
  }

  .uslugi-section-content-text {
    padding: 18px;
  }

  .uslugi__heading {
    font-size: 26px;
  }

  .uslugi__subtitle {
    font-size: 17px;
    margin-bottom: 14px;
  }

  .uslugi__list {
    font-size: 15px;
  }

  .uslugi__list--grid {
    row-gap: 9px;
    margin-bottom: 16px;
  }

  .uslugi__btn {
    font-size: 17px;
    padding: 11px 18px;
    border-radius: 9px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 390px) {
  .uslugi-container {
    width: 370px;
  }

  .uslugi-section-top {
    margin-top: 48px;
  }

  .uslugi-section-pill-uslugi {
    height: 54px;
    padding: 0 22px;
    font-size: 18px;
  }

  .uslugi__title {
    max-width: 370px;
    font-size: 36px;
    margin-top: 30px;
  }

  .slugi-section-content-wrap {
    margin-top: 22px;
    gap: 22px;
  }

  .uslugi-section-content {
    width: 370px;
    border-radius: 20px;
  }

  .uslugi-section-content-img {
    height: 172px;
  }

  .uslugi-section-content-img-ikon {
    width: 38px;
    height: 38px;
  }

  .uslugi-section-content-text {
    padding: 20px;
  }

  .uslugi__heading {
    font-size: 28px;
  }

  .uslugi__subtitle {
    font-size: 18px;
  }

  .uslugi__list {
    font-size: 16px;
  }

  .uslugi__btn {
    font-size: 18px;
    padding: 12px 20px;
    border-radius: 10px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 19px;
    height: 19px;
  }
}

@media (min-width: 412px) {
  .uslugi-container {
    width: 392px;
  }

  .uslugi-section-top {
    margin-top: 52px;
  }

  .uslugi-section-pill-uslugi {
    height: 58px;
    padding: 0 24px;
    font-size: 19px;
  }

  .uslugi__title {
    max-width: 392px;
    font-size: 38px;
    margin-top: 32px;
  }

  .slugi-section-content-wrap {
    margin-top: 24px;
    gap: 24px;
  }

  .uslugi-section-content {
    width: 392px;
    border-radius: 22px;
  }

  .uslugi-section-content-img {
    height: 182px;
  }

  .uslugi-section-content-img-ikon {
    width: 40px;
    height: 40px;
  }

  .uslugi-section-content-text {
    padding: 22px;
  }

  .uslugi__heading {
    font-size: 30px;
  }

  .uslugi__subtitle {
    font-size: 19px;
  }

  .uslugi__list {
    font-size: 17px;
  }

  .uslugi__btn {
    font-size: 19px;
    padding: 13px 22px;
    border-radius: 11px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 428px) {
  .uslugi-container {
    width: 408px;
  }

  .uslugi-section-top {
    margin-top: 56px;
  }

  .uslugi-section-pill-uslugi {
    height: 62px;
    padding: 0 26px;
    font-size: 20px;
  }

  .uslugi__title {
    max-width: 408px;
    font-size: 40px;
    margin-top: 34px;
  }

  .slugi-section-content-wrap {
    margin-top: 26px;
    gap: 26px;
  }

  .uslugi-section-content {
    width: 408px;
    border-radius: 24px;
  }

  .uslugi-section-content-img {
    height: 194px;
  }

  .uslugi-section-content-img-ikon {
    width: 42px;
    height: 42px;
  }

  .uslugi-section-content-text {
    padding: 24px;
  }

  .uslugi__heading {
    font-size: 32px;
  }

  .uslugi__subtitle {
    font-size: 20px;
  }

  .uslugi__list {
    font-size: 18px;
  }

  .uslugi__btn {
    font-size: 20px;
    padding: 14px 24px;
    border-radius: 12px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 480px) {
  .uslugi-container {
    width: 460px;
  }

  .uslugi-section-top {
    margin-top: 64px;
  }

  .uslugi-section-pill-uslugi {
    height: 68px;
    padding: 0 30px;
    font-size: 22px;
  }

  .uslugi-section-label-icon {
    width: 15px;
    height: 15px;
  }

  .uslugi__title {
    max-width: 460px;
    font-size: 44px;
    margin-top: 36px;
  }

  .slugi-section-content-wrap {
    margin-top: 28px;
    gap: 28px;
  }

  .uslugi-section-content {
    width: 460px;
    border-radius: 26px;
  }

  .uslugi-section-content-img {
    height: 214px;
  }

  .uslugi-section-content-img-ikon {
    width: 46px;
    height: 46px;
  }

  .uslugi-section-content-text {
    padding: 26px;
  }

  .uslugi__heading {
    font-size: 34px;
  }

  .uslugi__subtitle {
    font-size: 21px;
  }

  .uslugi__list {
    font-size: 19px;
  }

  .uslugi__btn {
    font-size: 21px;
    padding: 15px 26px;
    border-radius: 13px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 22px;
    height: 22px;
  }
}

@media (min-width: 540px) {
  .uslugi-container {
    width: 520px;
  }

  .uslugi-section-top {
    margin-top: 72px;
  }

  .uslugi-section-pill-uslugi {
    height: 74px;
    padding: 0 34px;
    font-size: 24px;
  }

  .uslugi-section-label-icon {
    width: 16px;
    height: 16px;
  }

  .uslugi__title {
    max-width: 520px;
    font-size: 48px;
    margin-top: 38px;
  }

  .slugi-section-content-wrap {
    margin-top: 30px;
    gap: 30px;
  }

  .uslugi-section-content {
    width: 520px;
    border-radius: 28px;
  }

  .uslugi-section-content-img {
    height: 240px;
  }

  .uslugi-section-content-img-ikon {
    width: 50px;
    height: 50px;
  }

  .uslugi-section-content-text {
    padding: 28px;
  }

  .uslugi__heading {
    font-size: 36px;
  }

  .uslugi__subtitle {
    font-size: 22px;
  }

  .uslugi__list {
    font-size: 20px;
  }

  .uslugi__btn {
    font-size: 22px;
    padding: 16px 28px;
    border-radius: 14px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 600px) {
  .uslugi-container {
    width: 580px;
  }

  .uslugi-section-top {
    margin-top: 80px;
  }

  .uslugi-section-pill-uslugi {
    height: 80px;
    padding: 0 38px;
    font-size: 26px;
  }

  .uslugi-section-label-icon {
    width: 17px;
    height: 17px;
  }

  .uslugi__title {
    max-width: 580px;
    font-size: 52px;
    margin-top: 40px;
  }

  .slugi-section-content-wrap {
    margin-top: 32px;
    gap: 32px;
  }

  .uslugi-section-content {
    width: 580px;
    border-radius: 30px;
  }

  .uslugi-section-content-img {
    height: 270px;
  }

  .uslugi-section-content-img-ikon {
    width: 54px;
    height: 54px;
  }

  .uslugi-section-content-text {
    padding: 30px;
  }

  .uslugi__heading {
    font-size: 38px;
  }

  .uslugi__subtitle {
    font-size: 23px;
  }

  .uslugi__list {
    font-size: 21px;
  }

  .uslugi__btn {
    font-size: 23px;
    padding: 18px 30px;
    border-radius: 15px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 26px;
    height: 26px;
  }
}

@media (min-width: 639px) {
  .uslugi-container {
    width: 639px;
  }

  .uslugi-section-top {
    margin-top: 88px;
  }

  .uslugi-section-pill-uslugi {
    height: 86px;
    padding: 0 42px;
    font-size: 28px;
  }

  .uslugi-section-label-icon {
    width: 18px;
    height: 18px;
  }

  .uslugi__title {
    max-width: 639px;
    font-size: 56px;
    margin-top: 44px;
  }

  .slugi-section-content-wrap {
    margin-top: 34px;
    gap: 34px;
  }

  .uslugi-section-content {
    width: 639px;
    border-radius: 32px;
  }

  .uslugi-section-content-img {
    height: 300px;
  }

  .uslugi-section-content-img-ikon {
    width: 58px;
    height: 58px;
  }

  .uslugi-section-content-text {
    padding: 32px;
  }

  .uslugi__heading {
    font-size: 40px;
  }

  .uslugi__subtitle {
    font-size: 24px;
  }

  .uslugi__list {
    font-size: 22px;
  }

  .uslugi__btn {
    font-size: 24px;
    padding: 20px 32px;
    border-radius: 16px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 28px;
    height: 28px;
  }
}

/* ===== TABLET ===== */

@media (min-width: 640px) {
  .uslugi-container {
    max-width: 640px;
    width: 100%;
  }

  .uslugi-section-top {
    margin-top: 50px;
  }

  .uslugi-section-pill-uslugi {
    gap: 20px;
    padding: 0 28px;
    height: 50px;
    font-size: 20px;
    width: 280px;
  }

  .uslugi-section-label-icon {
    width: 12px;
    height: 12px;
  }

  .uslugi__title {
    max-width: 600px;
    font-size: 36px;
    margin-top: 40px;
  }

  .slugi-section-content-wrap {
    margin-top: 20px;
    gap: 24px;
    flex-direction: column;
  }

  .uslugi-section-content {
    width: 640px;
    height: 430px;
    border-radius: 16px;
  }

  .uslugi-section-content-img {
    height: 180px;
    border-radius: 16px 16px 0 0;
  }

  .uslugi-section-content-img-ikon {
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
  }

  .uslugi-section-content-text {
    padding: 20px 24px;
  }

  .uslugi__heading {
    font-size: 36px;
  }

  .uslugi__subtitle {
    font-size: 18px;
    margin-bottom: 10px;
    max-width: 90%;
  }

  .uslugi__list {
    font-size: 16px;
  }

  .uslugi__list--grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 6px;
    width: 580px;
    margin-bottom: 20px;
  }

  .uslugi__list li {
    white-space: nowrap;
  }

  .uslugi__btn {
    width: 580px;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 8px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 16px;
    height: 16px;
  }
}

/* ===== DESKTOP ===== */

@media (min-width: 1024px) {
  .uslugi-bg {
    height: 1150px;
  }

  .uslugi-container {
    max-width: 1200px;
    width: 100%;
  }

  .uslugi-section-top {
    margin-top: 100px;
  }

  .uslugi-section-pill-uslugi {
    width: 280px;
    gap: 20px;
    padding: 0 28px;
    height: 50px;
    font-size: 20px;
  }

  .uslugi__title {
    max-width: 792px;
    font-size: 50px;
    margin-top: 50px;
  }

  .slugi-section-content-wrap {
    margin-top: 50px;
    gap: 24px;
    flex-direction: row;
  }

  .uslugi-section-content {
    width: 384px;
    height: 580px;
    border-radius: 16px;
  }

  .uslugi-section-content-img {
    height: 220px;
    border-radius: 16px 16px 0 0;
    transition: transform 0.4s ease;
    will-change: transform;
  }

  .uslugi-section-content-img-ikon {
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
  }

  .uslugi-section-content-text {
    padding: 20px 24px;
  }

  .uslugi__heading {
    font-size: 45px;
    margin-bottom: 10px;
  }

  .uslugi__subtitle {
    font-size: 18px;
    margin-bottom: 20px;
    max-width: 90%;
  }

  .uslugi__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    margin-bottom: 25px;
    font-size: 16px;
  }

  .uslugi__list--grid {
    display: block;
    width: auto;
    margin-bottom: 25px;
  }

  .uslugi__list li {
    white-space: normal;
  }

  .uslugi__btn {
    width: auto;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 8px;
  }

  .uslugi__btn-icon-wrapper {
    width: 16px;
    height: 16px;
  }

  .uslugi__btn-ikon {
    width: 16px;
    height: 16px;
  }

  .uslugi-section-content-img--it-mobile-tablet {
    display: none;
  }

  .uslugi-section-content-img--it-desktop {
    display: block;
  }
}

/* ===== DESKTOP HOVER ONLY ===== */

@media (min-width: 1024px) and (any-hover: hover) and (any-pointer: fine) {
  .uslugi-section-content.in-view:hover {
    transform: translateY(-4px) scale(1.015);
  }

  .uslugi-section-content.in-view:hover .uslugi-section-content-img {
    transform: scale(1.05);
  }

  .uslugi__btn:hover {
    background: #ACE238;
    color: #212121;
  }

  .uslugi__btn:hover .ikon-white {
    opacity: 0;
  }

  .uslugi__btn:hover .ikon-black {
    opacity: 1;
  }
}
/* ===============================
   TYPOGRAPHY – MOBILE (320px)
   =============================== */

h1 {
  font-size: 30px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h4 strong {
  font-weight: 600;
}

h5 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

h6 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-transform: capitalize;
}

/* ===== USLUGI — MOBILE (320px | container 300px) ===== */

.uslugi-section {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  z-index: 0;
  background: #1D1D1D;
}

/* Фон SVG */
.uslugi-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 640px;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

/* Контейнер */
.uslugi-container {
  position: relative;
  z-index: 1;
  width: 300px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Верхняя часть секции */
.uslugi-section-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 40px;
}

/* Плашка */
.uslugi-section-pill-uslugi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: 46px;
  border-radius: 48px;
  background: #262626;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  white-space: nowrap;
  width: auto;
}

.uslugi-section-label-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ACE238;
}

.uslugi-section-text {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

/* PILL ANIMATION */
.uslugi-section-pill-uslugi {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.uslugi-section-pill-uslugi.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Заголовок */
.uslugi__title {
  max-width: 300px;
  color: #fff;
  text-align: center;
  font-family: "Open Sans";
  font-weight: 400;
  margin-top: 26px;
}

/* Контент */
.slugi-section-content-wrap {
  display: flex;
  margin-top: 18px;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

/* Карточка */
.uslugi-section-content {
  position: relative;
  border-radius: 16px;
  width: 300px;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.015),
    rgba(255, 255, 255, 0.005)
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* Картинка */
.uslugi-section-content-img {
  width: 100%;
  height: 140px;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
}

.uslugi-section-content-img--it-desktop {
  display: none;
}

/* Иконка */
.uslugi-section-content-img-ikon {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  z-index: 2;
  pointer-events: none;
}

/* Контейнер текста */
.uslugi-section-content-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 16px;
  color: #fff;
}

/* Заголовок */
.uslugi__heading {
  font-family: "Open Sans";
  font-weight: 400;
  margin-bottom: 10px;
  color: #fff;
}

/* Подзаголовок */
.uslugi__subtitle {
  font-family: "Poppins";
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
  max-width: 100%;
}

/* Список */
.uslugi__list {
  font-family: "Poppins";
  font-size: 14px;
  color: #fff;
}

.uslugi__list--grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  width: 100%;
  margin-bottom: 14px;
  align-self: center;
}

.uslugi__list li {
  text-align: left;
  white-space: normal;
}

/* Кнопка */
.uslugi__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  font-family: "Poppins";
  font-size: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}

.uslugi__btn-icon-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
}

.uslugi__btn-ikon {
  width: 16px;
  height: 16px;
}

/* Цвета */
#uslugi-btn-internet {
  background: #28E1E7;
  color: #ffffff;
}

#uslugi-btn-it {
  background: #ACE238;
  color: #212121;
}

#uslugi-btn-monitoring {
  background: #ffffff;
  color: #212121;
}

.uslugi__btn:hover {
  background: #ACE238;
  color: #212121;
}

.uslugi__btn.is-active {
  background: #ACE238;
  color: #212121;
}

/* ===== BLUR TEXT ===== */
.blur-text {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  overflow: hidden;
}

.blur-text .lang-pl,
.blur-text .lang-ua {
  display: block;
}

.blur-text .lang-pl span,
.blur-text .lang-ua span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(var(--start-y, 50px));
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
  will-change: opacity, filter, transform;
}

.blur-text.in-view .lang-pl span,
.blur-text.in-view .lang-ua span {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ===== CARD ENTER ===== */
.uslugi-section-content {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,.8,.24,1);
  will-change: opacity, transform;
}

.uslugi-section-content.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (any-hover: hover) and (any-pointer: fine) {
  .uslugi-section-content {
    transition: transform 0.4s cubic-bezier(.2,.6,.2,1);
  }

  .uslugi-section-content.in-view:hover {
    transform: translateY(-4px) scale(1.015);
  }

  .uslugi-section-content.in-view:hover .uslugi-section-content-img {
    transform: scale(1.05);
  }
}

@media (min-width: 360px) {
  .uslugi-container {
    width: 340px;
  }

  .uslugi-section-top {
    margin-top: 44px;
  }

  .uslugi-section-pill-uslugi {
    height: 50px;
    padding: 0 20px;
    font-size: 17px;
  }

  .uslugi-section-label-icon {
    width: 13px;
    height: 13px;
  }

  .uslugi__title {
    max-width: 340px;
    font-size: 34px;
    margin-top: 28px;
  }

  .slugi-section-content-wrap {
    margin-top: 20px;
    gap: 20px;
  }

  .uslugi-section-content {
    width: 340px;
    border-radius: 18px;
  }

  .uslugi-section-content-img {
    height: 158px;
    border-radius: 18px 18px 0 0;
  }

  .uslugi-section-content-img-ikon {
    top: 18px;
    left: 18px;
    width: 36px;
    height: 36px;
  }

  .uslugi-section-content-text {
    padding: 18px;
  }

  .uslugi__heading {
    font-size: 26px;
  }

  .uslugi__subtitle {
    font-size: 17px;
    margin-bottom: 14px;
  }

  .uslugi__list {
    font-size: 15px;
  }

  .uslugi__list--grid {
    row-gap: 9px;
    margin-bottom: 16px;
  }

  .uslugi__btn {
    font-size: 17px;
    padding: 11px 18px;
    border-radius: 9px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 390px) {
  .uslugi-container {
    width: 370px;
  }

  .uslugi-section-top {
    margin-top: 48px;
  }

  .uslugi-section-pill-uslugi {
    height: 54px;
    padding: 0 22px;
    font-size: 18px;
  }

  .uslugi__title {
    max-width: 370px;
    font-size: 36px;
    margin-top: 30px;
  }

  .slugi-section-content-wrap {
    margin-top: 22px;
    gap: 22px;
  }

  .uslugi-section-content {
    width: 370px;
    border-radius: 20px;
  }

  .uslugi-section-content-img {
    height: 172px;
  }

  .uslugi-section-content-img-ikon {
    width: 38px;
    height: 38px;
  }

  .uslugi-section-content-text {
    padding: 20px;
  }

  .uslugi__heading {
    font-size: 28px;
  }

  .uslugi__subtitle {
    font-size: 18px;
  }

  .uslugi__list {
    font-size: 16px;
  }

  .uslugi__btn {
    font-size: 18px;
    padding: 12px 20px;
    border-radius: 10px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 19px;
    height: 19px;
  }
}

@media (min-width: 412px) {
  .uslugi-container {
    width: 392px;
  }

  .uslugi-section-top {
    margin-top: 52px;
  }

  .uslugi-section-pill-uslugi {
    height: 58px;
    padding: 0 24px;
    font-size: 19px;
  }

  .uslugi__title {
    max-width: 392px;
    font-size: 38px;
    margin-top: 32px;
  }

  .slugi-section-content-wrap {
    margin-top: 24px;
    gap: 24px;
  }

  .uslugi-section-content {
    width: 392px;
    border-radius: 22px;
  }

  .uslugi-section-content-img {
    height: 182px;
  }

  .uslugi-section-content-img-ikon {
    width: 40px;
    height: 40px;
  }

  .uslugi-section-content-text {
    padding: 22px;
  }

  .uslugi__heading {
    font-size: 30px;
  }

  .uslugi__subtitle {
    font-size: 19px;
  }

  .uslugi__list {
    font-size: 17px;
  }

  .uslugi__btn {
    font-size: 19px;
    padding: 13px 22px;
    border-radius: 11px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 428px) {
  .uslugi-container {
    width: 408px;
  }

  .uslugi-section-top {
    margin-top: 56px;
  }

  .uslugi-section-pill-uslugi {
    height: 62px;
    padding: 0 26px;
    font-size: 20px;
  }

  .uslugi__title {
    max-width: 408px;
    font-size: 40px;
    margin-top: 34px;
  }

  .slugi-section-content-wrap {
    margin-top: 26px;
    gap: 26px;
  }

  .uslugi-section-content {
    width: 408px;
    border-radius: 24px;
  }

  .uslugi-section-content-img {
    height: 194px;
  }

  .uslugi-section-content-img-ikon {
    width: 42px;
    height: 42px;
  }

  .uslugi-section-content-text {
    padding: 24px;
  }

  .uslugi__heading {
    font-size: 32px;
  }

  .uslugi__subtitle {
    font-size: 20px;
  }

  .uslugi__list {
    font-size: 18px;
  }

  .uslugi__btn {
    font-size: 20px;
    padding: 14px 24px;
    border-radius: 12px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 480px) {
  .uslugi-container {
    width: 460px;
  }

  .uslugi-section-top {
    margin-top: 64px;
  }

  .uslugi-section-pill-uslugi {
    height: 68px;
    padding: 0 30px;
    font-size: 22px;
  }

  .uslugi-section-label-icon {
    width: 15px;
    height: 15px;
  }

  .uslugi__title {
    max-width: 460px;
    font-size: 44px;
    margin-top: 36px;
  }

  .slugi-section-content-wrap {
    margin-top: 28px;
    gap: 28px;
  }

  .uslugi-section-content {
    width: 460px;
    border-radius: 26px;
  }

  .uslugi-section-content-img {
    height: 214px;
  }

  .uslugi-section-content-img-ikon {
    width: 46px;
    height: 46px;
  }

  .uslugi-section-content-text {
    padding: 26px;
  }

  .uslugi__heading {
    font-size: 34px;
  }

  .uslugi__subtitle {
    font-size: 21px;
  }

  .uslugi__list {
    font-size: 19px;
  }

  .uslugi__btn {
    font-size: 21px;
    padding: 15px 26px;
    border-radius: 13px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 22px;
    height: 22px;
  }
}

@media (min-width: 540px) {
  .uslugi-container {
    width: 520px;
  }

  .uslugi-section-top {
    margin-top: 72px;
  }

  .uslugi-section-pill-uslugi {
    height: 74px;
    padding: 0 34px;
    font-size: 24px;
  }

  .uslugi-section-label-icon {
    width: 16px;
    height: 16px;
  }

  .uslugi__title {
    max-width: 520px;
    font-size: 48px;
    margin-top: 38px;
  }

  .slugi-section-content-wrap {
    margin-top: 30px;
    gap: 30px;
  }

  .uslugi-section-content {
    width: 520px;
    border-radius: 28px;
  }

  .uslugi-section-content-img {
    height: 240px;
  }

  .uslugi-section-content-img-ikon {
    width: 50px;
    height: 50px;
  }

  .uslugi-section-content-text {
    padding: 28px;
  }

  .uslugi__heading {
    font-size: 36px;
  }

  .uslugi__subtitle {
    font-size: 22px;
  }

  .uslugi__list {
    font-size: 20px;
  }

  .uslugi__btn {
    font-size: 22px;
    padding: 16px 28px;
    border-radius: 14px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 600px) {
  .uslugi-container {
    width: 580px;
  }

  .uslugi-section-top {
    margin-top: 80px;
  }

  .uslugi-section-pill-uslugi {
    height: 80px;
    padding: 0 38px;
    font-size: 26px;
  }

  .uslugi-section-label-icon {
    width: 17px;
    height: 17px;
  }

  .uslugi__title {
    max-width: 580px;
    font-size: 52px;
    margin-top: 40px;
  }

  .slugi-section-content-wrap {
    margin-top: 32px;
    gap: 32px;
  }

  .uslugi-section-content {
    width: 580px;
    border-radius: 30px;
  }

  .uslugi-section-content-img {
    height: 270px;
  }

  .uslugi-section-content-img-ikon {
    width: 54px;
    height: 54px;
  }

  .uslugi-section-content-text {
    padding: 30px;
  }

  .uslugi__heading {
    font-size: 38px;
  }

  .uslugi__subtitle {
    font-size: 23px;
  }

  .uslugi__list {
    font-size: 21px;
  }

  .uslugi__btn {
    font-size: 23px;
    padding: 18px 30px;
    border-radius: 15px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 26px;
    height: 26px;
  }
}

@media (min-width: 639px) {
  .uslugi-container {
    width: 639px;
  }

  .uslugi-section-top {
    margin-top: 88px;
  }

  .uslugi-section-pill-uslugi {
    height: 86px;
    padding: 0 42px;
    font-size: 28px;
  }

  .uslugi-section-label-icon {
    width: 18px;
    height: 18px;
  }

  .uslugi__title {
    max-width: 639px;
    font-size: 56px;
    margin-top: 44px;
  }

  .slugi-section-content-wrap {
    margin-top: 34px;
    gap: 34px;
  }

  .uslugi-section-content {
    width: 639px;
    border-radius: 32px;
  }

  .uslugi-section-content-img {
    height: 300px;
  }

  .uslugi-section-content-img-ikon {
    width: 58px;
    height: 58px;
  }

  .uslugi-section-content-text {
    padding: 32px;
  }

  .uslugi__heading {
    font-size: 40px;
  }

  .uslugi__subtitle {
    font-size: 24px;
  }

  .uslugi__list {
    font-size: 22px;
  }

  .uslugi__btn {
    font-size: 24px;
    padding: 20px 32px;
    border-radius: 16px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 28px;
    height: 28px;
  }
}

/* ===== TABLET ===== */

@media (min-width: 640px) {
  .uslugi-container {
    max-width: 640px;
    width: 100%;
  }

  .uslugi-section-top {
    margin-top: 50px;
  }

  .uslugi-section-pill-uslugi {
    gap: 20px;
    padding: 0 28px;
    height: 50px;
    font-size: 20px;
    width: 280px;
  }

  .uslugi-section-label-icon {
    width: 12px;
    height: 12px;
  }

  .uslugi__title {
    max-width: 600px;
    font-size: 36px;
    margin-top: 40px;
  }

  .slugi-section-content-wrap {
    margin-top: 20px;
    gap: 24px;
    flex-direction: column;
  }

  .uslugi-section-content {
    width: 640px;
    height: 430px;
    border-radius: 16px;
  }

  .uslugi-section-content-img {
    height: 180px;
    border-radius: 16px 16px 0 0;
  }

  .uslugi-section-content-img-ikon {
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
  }

  .uslugi-section-content-text {
    padding: 20px 24px;
  }

  .uslugi__heading {
    font-size: 36px;
  }

  .uslugi__subtitle {
    font-size: 18px;
    margin-bottom: 10px;
    max-width: 90%;
  }

  .uslugi__list {
    font-size: 16px;
  }

  .uslugi__list--grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 6px;
    width: 580px;
    margin-bottom: 20px;
  }

  .uslugi__list li {
    white-space: nowrap;
  }

  .uslugi__btn {
    width: 580px;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 8px;
  }

  .uslugi__btn-icon-wrapper,
  .uslugi__btn-ikon {
    width: 16px;
    height: 16px;
  }
}

/* ===== DESKTOP ===== */

@media (min-width: 1024px) {
  .uslugi-bg {
    height: 1150px;
  }

  .uslugi-container {
    max-width: 1200px;
    width: 100%;
  }

  .uslugi-section-top {
    margin-top: 100px;
  }

  .uslugi-section-pill-uslugi {
    width: 280px;
    gap: 20px;
    padding: 0 28px;
    height: 50px;
    font-size: 20px;
  }

  .uslugi__title {
    max-width: 792px;
    font-size: 50px;
    margin-top: 50px;
  }

  .slugi-section-content-wrap {
    margin-top: 50px;
    gap: 24px;
    flex-direction: row;
  }

  .uslugi-section-content {
    width: 384px;
    height: 580px;
    border-radius: 16px;
  }

  .uslugi-section-content-img {
    height: 220px;
    border-radius: 16px 16px 0 0;
  }

  .uslugi-section-content-img-ikon {
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
  }

  .uslugi-section-content-text {
    padding: 20px 24px;
  }

  .uslugi__heading {
    font-size: 45px;
    margin-bottom: 10px;
  }

  .uslugi__subtitle {
    font-size: 18px;
    margin-bottom: 20px;
    max-width: 90%;
  }

  .uslugi__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    margin-bottom: 25px;
    font-size: 16px;
  }

  .uslugi__list--grid {
    display: block;
    width: auto;
    margin-bottom: 25px;
  }

  .uslugi__list li {
    white-space: normal;
  }

  .uslugi__btn {
    width: auto;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 8px;
  }

  .uslugi__btn-icon-wrapper {
    position: relative;
    width: 16px;
    height: 16px;
  }

  .uslugi__btn-ikon {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    transition: opacity 0.3s ease;
  }

  .ikon-white {
    opacity: 1;
  }

  .ikon-black {
    opacity: 0;
  }

  .uslugi-section-content-img--it-mobile-tablet {
    display: none;
  }

  .uslugi-section-content-img--it-desktop {
    display: block;
  }
}
.uslugi-section-content-img--monitoring-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .uslugi-section-content-img--monitoring-mobile-tablet {
    display: none;
  }

  .uslugi-section-content-img--monitoring-desktop {
    display: block;
  }
}
/* ===== USLUGI TITLE ===== */

/* MOBILE (base) */
.uslugi__title {
  max-width: 300px;
  color: #fff;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  margin-top: 26px;
}

/* TABLET */
@media (min-width: 640px) {
  .uslugi__title {
    max-width: 600px;
    font-size: 36px;
    margin-top: 40px;
  }
}

/* DESKTOP */
@media (min-width: 1024px) {
  .uslugi__title {
    max-width: 792px;
    font-size: 50px;
    margin-top: 50px;
  }
}

/* ===== USLUGI FIX OVERRIDE: TITLE ANIMATION SPEED ===== */

.uslugi__title.blur-text .lang-pl span,
.uslugi__title.blur-text .lang-ua span {
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}

/* ===== DESKTOP BUTTON FIX ===== */

@media (min-width: 1024px) {

  /* ВСЕ кнопки синие */
  #uslugi-btn-internet,
  #uslugi-btn-it,
  #uslugi-btn-monitoring {
    background: #28E1E7;
    color: #ffffff;
  }

  /* иконки */
  #uslugi-btn-internet .ikon-white,
  #uslugi-btn-it .ikon-white,
  #uslugi-btn-monitoring .ikon-white {
    opacity: 1;
  }

  #uslugi-btn-internet .ikon-black,
  #uslugi-btn-it .ikon-black,
  #uslugi-btn-monitoring .ikon-black {
    opacity: 0;
  }
}

/* ===== FIXED HOVER ===== */

@media (min-width: 1024px) and (any-hover: hover) and (any-pointer: fine) {

  #uslugi-btn-internet:hover,
  #uslugi-btn-it:hover,
  #uslugi-btn-monitoring:hover {
    background: #ACE238;
    color: #212121;
  }

  #uslugi-btn-internet:hover .ikon-white,
  #uslugi-btn-it:hover .ikon-white,
  #uslugi-btn-monitoring:hover .ikon-white {
    opacity: 0;
  }

  #uslugi-btn-internet:hover .ikon-black,
  #uslugi-btn-it:hover .ikon-black,
  #uslugi-btn-monitoring:hover .ikon-black {
    opacity: 1;
  }
}



/* ===============================
   MOBILE-PRICE-CENNIK
   =============================== */

.price-mobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #1d1d1d;
  border-radius: 0 0 35px 35px;
  overflow: hidden;
  position: relative;
  height: auto;
  padding-bottom: 50px;
}

.price-mobile__container {
  width: 300px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* PILL */
.price-mobile__pill-wrap {
  display: flex;
  justify-content: center;
}

.price-mobile__pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  height: 44px;
  width: auto;
  margin-top: 90px;
  border-radius: 48px;
  background: #262626;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.price-mobile__pill.in-view {
  opacity: 1;
  transform: translateY(0);
}

.price-mobile__pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ace238;
}

/* CATEGORIES */
.price-mobile__categories {
  display: flex;
  justify-content: center;
  padding-top: 26px;
  color: #ffffff;
}

.price-mobile__categories-list {
  display: flex;
  gap: 22px;
}

.price-mobile__category {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
}

.price-mobile__category::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.price-mobile__category.is-active[data-price-category="internet"]::after {
  background-color: #28e1e7;
}

.price-mobile__category.is-active[data-price-category="it"]::after {
  background-color: #ace238;
}

.price-mobile__category.is-active[data-price-category="monitoring"]::after {
  background-color: #ffffff;
}

/* TITLE */
.price-mobile__heading {
  padding-top: 14px;
  padding-bottom: 14px;
}

.price-mobile__title {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.3;
  text-align: center;
}

/* PANELS */
.price-mobile__panel {
  display: none;
  animation: priceMobileFade 0.35s ease;
}

.price-mobile__panel.is-active {
  display: block;
}

@keyframes priceMobileFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* INTERNET SWITCHER */
.price-mobile__internet-type-title {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.price-mobile__internet-switcher {
  width: 300px;
  margin: 10px auto 15px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #1e1e1e;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.price-mobile__internet-switch-btn {
  background: #1e1e1e;
  border: none;
  padding: 10px 6px;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.price-mobile__internet-switch-btn + .price-mobile__internet-switch-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.price-mobile__internet-switch-btn.is-active {
  background: #28e1e7;
  color: #ffffff;
}

/* INTERNET GROUPS */
.price-mobile__internet-group {
  display: none;
  width: 300px;
  box-sizing: border-box;
}

.price-mobile__internet-group.is-active {
  display: block;
}

.price-mobile__tariff-row {
  width: 300px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  cursor: pointer;
}

.price-mobile__tariff-icon-left,
.price-mobile__tariff-icon-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.price-mobile__tariff-text {
  flex: 1;
  text-align: left;
  color: #ffffff;
  margin-left: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.price-mobile__tariff-icon-one {
  width: 16px;
  height: 16px;
  display: block;
}

.price-mobile__tariff-icon-two {
  width: 24px;
  height: 24px;
  display: block;
  transition: transform 0.3s ease;
}

.price-mobile__tariff-row + .price-mobile-card {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.price-mobile__tariff-row.is-open + .price-mobile-card {
  max-height: 1200px;
  opacity: 1;
}

.price-mobile__tariff-row.is-open .price-mobile__tariff-icon-two {
  transform: rotate(180deg);
}

/* INTERNET CARD */
.price-mobile__internet-group .price-mobile-card {
  margin-bottom: 16px;
}

.price-mobile-card {
  width: 300px;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  color: #fff;
}

.price-mobile-card__top {
  height: 70px;
  background: #28e1e7;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 93px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 15px;
  align-items: start;
}

.price-mobile-card__badge {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.price-mobile-card__top-right {
  text-align: right;
}

.price-mobile-card__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-block;
}

.price-mobile-card__body {
  padding: 0;
  box-sizing: border-box;
}

.price-mobile-card__row {
  background: #1e1e1e;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 78px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 18px;
  padding-right: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.price-mobile-card__row:last-child {
  border-bottom: 0;
}

.price-mobile-card__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.price-mobile-card__value {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: right;
  justify-self: end;
}

.price-mobile-card__row--strong .price-mobile-card__label {
  font-weight: 700;
}

.price-mobile-card__value--term {
  display: block;
  text-align: right;
}

.price-mobile-card__old-price {
  text-decoration: line-through;
  color: #b4aaaa;
  opacity: 0.4;
  font-weight: 600;
}

.price-mobile-card__new-price {
  color: #fff;
  font-weight: 700;
}

.price-mobile-card__value--price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.price-mobile-card__promo {
  padding: 10px 14px;
  border: 2px solid #28e1e7;
  border-radius: 16px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.price-mobile-card__value--promo {
  display: flex;
  justify-content: flex-end;
}

/* IT */
.price-mobile-it,
.price-mobile-it * {
  color: #ffffff !important;
}

.price-mobile-it__title {
  width: 300px;
  max-width: 300px;
  margin: 0 auto 16px;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  word-wrap: break-word;
  hyphens: auto;
}

.price-mobile-it__header,
.price-mobile-it__header * {
  color: #212121 !important;
}

.price-mobile-it__header {
  display: grid;
  grid-template-columns: 1fr 96px;
  height: 48px;
  background: #ace238;
  border-radius: 16px 16px 0 0;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  align-items: center;
  box-sizing: border-box;
}

.price-mobile-it__header-right {
  text-align: center;
}

.price-mobile-it__row {
  display: grid;
  grid-template-columns: 1fr 96px;
  min-height: 86px;
  padding: 12px 14px;
  background: #1e1e1e;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.price-mobile-it__row--last {
  border-radius: 0 0 16px 16px;
}

.price-mobile-it__content {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.price-mobile-it__content img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.price-mobile-it__value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding-left: 8px;
  box-sizing: border-box;
}

.price-mobile-it__value--promo {
  font-weight: 700;
}

/* MONITORING */
.price-mobile-monitoring,
.price-mobile-monitoring * {
  color: #ffffff !important;
}

.price-mobile-monitoring__title {
  width: 300px;
  max-width: 300px;
  margin: 0 auto 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  text-align: center;
  word-wrap: break-word;
  hyphens: auto;
}

.price-mobile-monitoring__header,
.price-mobile-monitoring__header * {
  color: #111111 !important;
}

.price-mobile-monitoring__header,
.price-mobile-monitoring__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 82px;
}

.price-mobile-monitoring__header {
  height: 48px;
  padding: 0 14px;
  background: #ffffff;
  font-size: 11px;
  font-weight: 600;
  align-items: center;
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-mobile-monitoring__header-right {
  text-align: center;
}

.price-mobile-monitoring__row {
  min-height: 86px;
  padding: 12px 14px;
  background: #1e1e1e;
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.price-mobile-monitoring__row--last {
  border-radius: 0 0 16px 16px;
}

.price-mobile-monitoring__content {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  align-items: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

.price-mobile-monitoring__content img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

.price-mobile-monitoring__type {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

.price-mobile-monitoring__value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding-left: 6px;
  box-sizing: border-box;
}

.price-mobile-monitoring__value--promo {
  font-weight: 700;
}

/* RESPONSIVE */
@media (min-width: 360px) {
  .price-mobile {
    border-radius: 0 0 38px 38px;
    padding-bottom: 56px;
  }

  .price-mobile__container,
  .price-mobile__internet-switcher,
  .price-mobile__internet-group,
  .price-mobile__tariff-row,
  .price-mobile-card,
  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    width: 340px;
    max-width: 340px;
  }

  .price-mobile__pill {
    gap: 16px;
    padding: 0 24px;
    height: 48px;
    margin-top: 98px;
    font-size: 17px;
  }

  .price-mobile__pill-dot {
    width: 11px;
    height: 11px;
  }

  .price-mobile__categories {
    padding-top: 28px;
  }

  .price-mobile__categories-list {
    gap: 24px;
  }

  .price-mobile__category {
    font-size: 19px;
  }

  .price-mobile__heading {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .price-mobile__title {
    font-size: 15px;
  }

  .price-mobile__internet-type-title {
    font-size: 17px;
  }

  .price-mobile__internet-switcher {
    margin: 12px auto 16px;
    border-radius: 13px;
  }

  .price-mobile__internet-switch-btn {
    padding: 11px 7px;
    font-size: 13px;
  }

  .price-mobile__tariff-row {
    margin-bottom: 12px;
  }

  .price-mobile__tariff-text {
    margin-left: 12px;
    font-size: 15px;
  }

  .price-mobile__tariff-icon-one {
    width: 18px;
    height: 18px;
  }

  .price-mobile__tariff-icon-two {
    width: 26px;
    height: 26px;
  }

  .price-mobile-card {
    border-radius: 18px;
  }

  .price-mobile-card__top {
    height: 78px;
    column-gap: 106px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 16px;
  }

  .price-mobile-card__badge,
  .price-mobile-card__title,
  .price-mobile-card__label,
  .price-mobile-card__value {
    font-size: 17px;
  }

  .price-mobile-card__row {
    min-height: 86px;
    padding: 22px 20px;
  }

  .price-mobile-card__value--price {
    gap: 7px;
  }

  .price-mobile-card__promo {
    padding: 11px 16px;
    border-radius: 18px;
  }

  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    font-size: 19px;
  }

  .price-mobile-it__header {
    grid-template-columns: 1fr 110px;
    height: 52px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 18px 18px 0 0;
  }

  .price-mobile-it__row {
    grid-template-columns: 1fr 110px;
    min-height: 94px;
    padding: 14px 16px;
  }

  .price-mobile-it__content {
    gap: 24px;
    font-size: 14px;
  }

  .price-mobile-it__content img {
    width: 24px;
    height: 24px;
  }

  .price-mobile-it__value {
    font-size: 14px;
    padding-left: 10px;
  }

  .price-mobile-it__row--last {
    border-radius: 0 0 18px 18px;
  }

  .price-mobile-monitoring__header,
  .price-mobile-monitoring__row {
    grid-template-columns: 1.3fr 1fr 92px;
  }

  .price-mobile-monitoring__header {
    height: 52px;
    padding: 0 16px;
    font-size: 12px;
    border-radius: 18px 18px 0 0;
  }

  .price-mobile-monitoring__row {
    min-height: 94px;
    padding: 14px 16px;
  }

  .price-mobile-monitoring__content {
    grid-template-columns: 24px 1fr;
    column-gap: 12px;
    font-size: 12px;
  }

  .price-mobile-monitoring__content img {
    width: 24px;
    height: 24px;
  }

  .price-mobile-monitoring__type {
    font-size: 12px;
  }

  .price-mobile-monitoring__value {
    font-size: 12px;
    padding-left: 8px;
  }

  .price-mobile-monitoring__row--last {
    border-radius: 0 0 18px 18px;
  }
}

@media (min-width: 390px) {
  .price-mobile {
    border-radius: 0 0 40px 40px;
    padding-bottom: 62px;
  }

  .price-mobile__container,
  .price-mobile__internet-switcher,
  .price-mobile__internet-group,
  .price-mobile__tariff-row,
  .price-mobile-card,
  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    width: 370px;
    max-width: 370px;
  }

  .price-mobile__pill {
    gap: 18px;
    padding: 0 26px;
    height: 52px;
    margin-top: 106px;
    font-size: 18px;
  }

  .price-mobile__pill-dot {
    width: 12px;
    height: 12px;
  }

  .price-mobile__categories {
    padding-top: 30px;
  }

  .price-mobile__categories-list {
    gap: 26px;
  }

  .price-mobile__category {
    font-size: 20px;
  }

  .price-mobile__title {
    font-size: 16px;
  }

  .price-mobile__internet-type-title {
    font-size: 18px;
  }

  .price-mobile__internet-switcher {
    margin: 12px auto 18px;
    border-radius: 14px;
  }

  .price-mobile__internet-switch-btn {
    padding: 12px 8px;
    font-size: 14px;
  }

  .price-mobile__tariff-text {
    font-size: 16px;
  }

  .price-mobile__tariff-icon-two {
    width: 28px;
    height: 28px;
  }

  .price-mobile-card {
    border-radius: 20px;
  }

  .price-mobile-card__top {
    height: 84px;
    column-gap: 118px;
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 18px;
  }

  .price-mobile-card__badge,
  .price-mobile-card__title,
  .price-mobile-card__label,
  .price-mobile-card__value {
    font-size: 18px;
  }

  .price-mobile-card__row {
    min-height: 92px;
    padding: 24px 22px;
  }

  .price-mobile-card__promo {
    padding: 12px 18px;
    border-radius: 20px;
  }

  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    font-size: 20px;
  }

  .price-mobile-it__header {
    grid-template-columns: 1fr 120px;
    height: 54px;
    padding: 0 18px;
    font-size: 15px;
    border-radius: 20px 20px 0 0;
  }

  .price-mobile-it__row {
    grid-template-columns: 1fr 120px;
    min-height: 98px;
    padding: 16px 18px;
  }

  .price-mobile-it__content {
    gap: 26px;
    font-size: 15px;
  }

  .price-mobile-it__content img {
    width: 26px;
    height: 26px;
  }

  .price-mobile-it__value {
    font-size: 15px;
  }

  .price-mobile-it__row--last {
    border-radius: 0 0 20px 20px;
  }

  .price-mobile-monitoring__header,
  .price-mobile-monitoring__row {
    grid-template-columns: 1.3fr 1fr 100px;
  }

  .price-mobile-monitoring__header {
    height: 54px;
    padding: 0 18px;
    font-size: 13px;
    border-radius: 20px 20px 0 0;
  }

  .price-mobile-monitoring__row {
    min-height: 98px;
    padding: 16px 18px;
  }

  .price-mobile-monitoring__content {
    grid-template-columns: 26px 1fr;
    font-size: 13px;
  }

  .price-mobile-monitoring__content img {
    width: 26px;
    height: 26px;
  }

  .price-mobile-monitoring__type,
  .price-mobile-monitoring__value {
    font-size: 13px;
  }

  .price-mobile-monitoring__row--last {
    border-radius: 0 0 20px 20px;
  }
}

@media (min-width: 412px) {
  .price-mobile {
    border-radius: 0 0 42px 42px;
    padding-bottom: 68px;
  }

  .price-mobile__container,
  .price-mobile__internet-switcher,
  .price-mobile__internet-group,
  .price-mobile__tariff-row,
  .price-mobile-card,
  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    width: 392px;
    max-width: 392px;
  }

  .price-mobile__pill {
    gap: 18px;
    padding: 0 28px;
    height: 56px;
    margin-top: 114px;
    font-size: 19px;
  }

  .price-mobile__categories-list {
    gap: 28px;
  }

  .price-mobile__category {
    font-size: 21px;
  }

  .price-mobile__heading {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .price-mobile__title {
    font-size: 17px;
  }

  .price-mobile__internet-type-title {
    font-size: 19px;
  }

  .price-mobile__internet-switcher {
    margin: 14px auto 18px;
    border-radius: 15px;
  }

  .price-mobile__internet-switch-btn {
    padding: 13px 8px;
    font-size: 15px;
  }

  .price-mobile__tariff-text {
    font-size: 17px;
  }

  .price-mobile__tariff-icon-one {
    width: 19px;
    height: 19px;
  }

  .price-mobile__tariff-icon-two {
    width: 30px;
    height: 30px;
  }

  .price-mobile-card {
    border-radius: 22px;
  }

  .price-mobile-card__top {
    height: 90px;
    column-gap: 126px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 20px;
  }

  .price-mobile-card__badge,
  .price-mobile-card__title,
  .price-mobile-card__label,
  .price-mobile-card__value {
    font-size: 19px;
  }

  .price-mobile-card__row {
    min-height: 98px;
    padding: 26px 24px;
  }

  .price-mobile-card__promo {
    padding: 13px 20px;
    border-radius: 22px;
  }

  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    font-size: 21px;
  }

  .price-mobile-it__header {
    grid-template-columns: 1fr 128px;
    height: 56px;
    padding: 0 20px;
    font-size: 16px;
    border-radius: 22px 22px 0 0;
  }

  .price-mobile-it__row {
    grid-template-columns: 1fr 128px;
    min-height: 104px;
    padding: 18px 20px;
  }

  .price-mobile-it__content {
    gap: 28px;
    font-size: 16px;
  }

  .price-mobile-it__content img {
    width: 28px;
    height: 28px;
  }

  .price-mobile-it__value {
    font-size: 16px;
  }

  .price-mobile-it__row--last {
    border-radius: 0 0 22px 22px;
  }

  .price-mobile-monitoring__header,
  .price-mobile-monitoring__row {
    grid-template-columns: 1.3fr 1fr 110px;
  }

  .price-mobile-monitoring__header {
    height: 56px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 22px 22px 0 0;
  }

  .price-mobile-monitoring__row {
    min-height: 104px;
    padding: 18px 20px;
  }

  .price-mobile-monitoring__content {
    grid-template-columns: 28px 1fr;
    font-size: 14px;
  }

  .price-mobile-monitoring__content img {
    width: 28px;
    height: 28px;
  }

  .price-mobile-monitoring__type,
  .price-mobile-monitoring__value {
    font-size: 14px;
  }

  .price-mobile-monitoring__row--last {
    border-radius: 0 0 22px 22px;
  }
}

@media (min-width: 428px) {
  .price-mobile {
    border-radius: 0 0 44px 44px;
    padding-bottom: 74px;
  }

  .price-mobile__container,
  .price-mobile__internet-switcher,
  .price-mobile__internet-group,
  .price-mobile__tariff-row,
  .price-mobile-card,
  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    width: 408px;
    max-width: 408px;
  }

  .price-mobile__pill {
    gap: 20px;
    padding: 0 30px;
    height: 60px;
    margin-top: 122px;
    font-size: 20px;
  }

  .price-mobile__categories-list {
    gap: 30px;
  }

  .price-mobile__category {
    font-size: 22px;
  }

  .price-mobile__title {
    font-size: 18px;
  }

  .price-mobile__internet-type-title {
    font-size: 20px;
  }

  .price-mobile__internet-switcher {
    margin: 14px auto 20px;
    border-radius: 16px;
  }

  .price-mobile__internet-switch-btn {
    padding: 14px 9px;
    font-size: 16px;
  }

  .price-mobile__tariff-text {
    font-size: 18px;
  }

  .price-mobile__tariff-icon-one {
    width: 20px;
    height: 20px;
  }

  .price-mobile__tariff-icon-two {
    width: 32px;
    height: 32px;
  }

  .price-mobile-card {
    border-radius: 24px;
  }

  .price-mobile-card__top {
    height: 96px;
    column-gap: 132px;
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 22px;
  }

  .price-mobile-card__badge,
  .price-mobile-card__title,
  .price-mobile-card__label,
  .price-mobile-card__value {
    font-size: 20px;
  }

  .price-mobile-card__row {
    min-height: 104px;
    padding: 28px 26px;
  }

  .price-mobile-card__promo {
    padding: 14px 22px;
    border-radius: 24px;
  }

  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    font-size: 22px;
  }

  .price-mobile-it__header {
    grid-template-columns: 1fr 136px;
    height: 58px;
    padding: 0 22px;
    font-size: 17px;
    border-radius: 24px 24px 0 0;
  }

  .price-mobile-it__row {
    grid-template-columns: 1fr 136px;
    min-height: 108px;
    padding: 20px 22px;
  }

  .price-mobile-it__content {
    gap: 30px;
    font-size: 17px;
  }

  .price-mobile-it__content img {
    width: 30px;
    height: 30px;
  }

  .price-mobile-it__value {
    font-size: 17px;
  }

  .price-mobile-it__row--last {
    border-radius: 0 0 24px 24px;
  }

  .price-mobile-monitoring__header,
  .price-mobile-monitoring__row {
    grid-template-columns: 1.3fr 1fr 118px;
  }

  .price-mobile-monitoring__header {
    height: 58px;
    padding: 0 22px;
    font-size: 15px;
    border-radius: 24px 24px 0 0;
  }

  .price-mobile-monitoring__row {
    min-height: 108px;
    padding: 20px 22px;
  }

  .price-mobile-monitoring__content {
    grid-template-columns: 30px 1fr;
    font-size: 15px;
  }

  .price-mobile-monitoring__content img {
    width: 30px;
    height: 30px;
  }

  .price-mobile-monitoring__type,
  .price-mobile-monitoring__value {
    font-size: 15px;
  }

  .price-mobile-monitoring__row--last {
    border-radius: 0 0 24px 24px;
  }
}

@media (min-width: 480px) {
  .price-mobile {
    border-radius: 0 0 46px 46px;
    padding-bottom: 86px;
  }

  .price-mobile__container,
  .price-mobile__internet-switcher,
  .price-mobile__internet-group,
  .price-mobile__tariff-row,
  .price-mobile-card,
  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    width: 460px;
    max-width: 460px;
  }

  .price-mobile__pill {
    gap: 22px;
    padding: 0 34px;
    height: 66px;
    margin-top: 136px;
    font-size: 22px;
  }

  .price-mobile__pill-dot {
    width: 13px;
    height: 13px;
  }

  .price-mobile__categories {
    padding-top: 34px;
  }

  .price-mobile__categories-list {
    gap: 34px;
  }

  .price-mobile__category {
    font-size: 24px;
  }

  .price-mobile__heading {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .price-mobile__title {
    font-size: 20px;
  }

  .price-mobile__internet-type-title {
    font-size: 22px;
  }

  .price-mobile__internet-switcher {
    margin: 16px auto 22px;
    border-radius: 18px;
  }

  .price-mobile__internet-switch-btn {
    padding: 16px 10px;
    font-size: 18px;
  }

  .price-mobile__tariff-row {
    margin-bottom: 14px;
  }

  .price-mobile__tariff-text {
    margin-left: 14px;
    font-size: 20px;
  }

  .price-mobile__tariff-icon-one {
    width: 22px;
    height: 22px;
  }

  .price-mobile__tariff-icon-two {
    width: 36px;
    height: 36px;
  }

  .price-mobile-card {
    border-radius: 26px;
  }

  .price-mobile-card__top {
    height: 108px;
    column-gap: 150px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 24px;
  }

  .price-mobile-card__badge,
  .price-mobile-card__title,
  .price-mobile-card__label,
  .price-mobile-card__value {
    font-size: 22px;
  }

  .price-mobile-card__row {
    min-height: 118px;
    padding: 32px 30px;
  }

  .price-mobile-card__promo {
    padding: 16px 26px;
    border-radius: 26px;
  }

  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    font-size: 24px;
  }

  .price-mobile-it__header {
    grid-template-columns: 1fr 154px;
    height: 62px;
    padding: 0 26px;
    font-size: 18px;
    border-radius: 26px 26px 0 0;
  }

  .price-mobile-it__row {
    grid-template-columns: 1fr 154px;
    min-height: 118px;
    padding: 22px 26px;
  }

  .price-mobile-it__content {
    gap: 34px;
    font-size: 18px;
  }

  .price-mobile-it__content img {
    width: 32px;
    height: 32px;
  }

  .price-mobile-it__value {
    font-size: 18px;
    padding-left: 12px;
  }

  .price-mobile-it__row--last {
    border-radius: 0 0 26px 26px;
  }

  .price-mobile-monitoring__header,
  .price-mobile-monitoring__row {
    grid-template-columns: 1.3fr 1fr 132px;
  }

  .price-mobile-monitoring__header {
    height: 62px;
    padding: 0 26px;
    font-size: 16px;
    border-radius: 26px 26px 0 0;
  }

  .price-mobile-monitoring__row {
    min-height: 118px;
    padding: 22px 26px;
  }

  .price-mobile-monitoring__content {
    grid-template-columns: 32px 1fr;
    column-gap: 14px;
    font-size: 16px;
  }

  .price-mobile-monitoring__content img {
    width: 32px;
    height: 32px;
  }

  .price-mobile-monitoring__type,
  .price-mobile-monitoring__value {
    font-size: 16px;
  }

  .price-mobile-monitoring__value {
    padding-left: 10px;
  }

  .price-mobile-monitoring__row--last {
    border-radius: 0 0 26px 26px;
  }
}

@media (min-width: 540px) {
  .price-mobile {
    border-radius: 0 0 48px 48px;
    padding-bottom: 98px;
  }

  .price-mobile__container,
  .price-mobile__internet-switcher,
  .price-mobile__internet-group,
  .price-mobile__tariff-row,
  .price-mobile-card,
  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    width: 520px;
    max-width: 520px;
  }

  .price-mobile__pill {
    gap: 24px;
    padding: 0 38px;
    height: 72px;
    margin-top: 152px;
    font-size: 24px;
  }

  .price-mobile__pill-dot {
    width: 14px;
    height: 14px;
  }

  .price-mobile__categories {
    padding-top: 38px;
  }

  .price-mobile__categories-list {
    gap: 38px;
  }

  .price-mobile__category {
    font-size: 26px;
  }

  .price-mobile__heading {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .price-mobile__title {
    font-size: 22px;
  }

  .price-mobile__internet-type-title {
    font-size: 24px;
  }

  .price-mobile__internet-switcher {
    margin: 18px auto 24px;
    border-radius: 20px;
  }

  .price-mobile__internet-switch-btn {
    padding: 18px 12px;
    font-size: 20px;
  }

  .price-mobile__tariff-text {
    font-size: 22px;
  }

  .price-mobile__tariff-icon-one {
    width: 24px;
    height: 24px;
  }

  .price-mobile__tariff-icon-two {
    width: 40px;
    height: 40px;
  }

  .price-mobile-card {
    border-radius: 28px;
  }

  .price-mobile-card__top {
    height: 120px;
    column-gap: 168px;
    padding-left: 34px;
    padding-right: 34px;
    padding-top: 26px;
  }

  .price-mobile-card__badge,
  .price-mobile-card__title,
  .price-mobile-card__label,
  .price-mobile-card__value {
    font-size: 24px;
  }

  .price-mobile-card__row {
    min-height: 132px;
    padding: 36px 34px;
  }

  .price-mobile-card__promo {
    padding: 18px 30px;
    border-radius: 28px;
  }

  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    font-size: 26px;
  }

  .price-mobile-it__header {
    grid-template-columns: 1fr 172px;
    height: 66px;
    padding: 0 30px;
    font-size: 19px;
    border-radius: 28px 28px 0 0;
  }

  .price-mobile-it__row {
    grid-template-columns: 1fr 172px;
    min-height: 128px;
    padding: 24px 30px;
  }

  .price-mobile-it__content {
    gap: 38px;
    font-size: 19px;
  }

  .price-mobile-it__content img {
    width: 34px;
    height: 34px;
  }

  .price-mobile-it__value {
    font-size: 19px;
  }

  .price-mobile-it__row--last {
    border-radius: 0 0 28px 28px;
  }

  .price-mobile-monitoring__header,
  .price-mobile-monitoring__row {
    grid-template-columns: 1.3fr 1fr 150px;
  }

  .price-mobile-monitoring__header {
    height: 66px;
    padding: 0 30px;
    font-size: 18px;
    border-radius: 28px 28px 0 0;
  }

  .price-mobile-monitoring__row {
    min-height: 128px;
    padding: 24px 30px;
  }

  .price-mobile-monitoring__content {
    grid-template-columns: 34px 1fr;
    font-size: 18px;
  }

  .price-mobile-monitoring__content img {
    width: 34px;
    height: 34px;
  }

  .price-mobile-monitoring__type,
  .price-mobile-monitoring__value {
    font-size: 18px;
  }

  .price-mobile-monitoring__row--last {
    border-radius: 0 0 28px 28px;
  }
}

@media (min-width: 600px) {
  .price-mobile {
    border-radius: 0 0 50px 50px;
    padding-bottom: 110px;
  }

  .price-mobile__container,
  .price-mobile__internet-switcher,
  .price-mobile__internet-group,
  .price-mobile__tariff-row,
  .price-mobile-card,
  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    width: 580px;
    max-width: 580px;
  }

  .price-mobile__pill {
    gap: 26px;
    padding: 0 42px;
    height: 78px;
    margin-top: 168px;
    font-size: 26px;
  }

  .price-mobile__pill-dot {
    width: 15px;
    height: 15px;
  }

  .price-mobile__categories {
    padding-top: 42px;
  }

  .price-mobile__categories-list {
    gap: 42px;
  }

  .price-mobile__category {
    font-size: 28px;
  }

  .price-mobile__heading {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .price-mobile__title {
    font-size: 24px;
  }

  .price-mobile__internet-type-title {
    font-size: 26px;
  }

  .price-mobile__internet-switcher {
    margin: 20px auto 26px;
    border-radius: 22px;
  }

  .price-mobile__internet-switch-btn {
    padding: 20px 14px;
    font-size: 22px;
  }

  .price-mobile__tariff-text {
    margin-left: 16px;
    font-size: 24px;
  }

  .price-mobile__tariff-icon-one {
    width: 26px;
    height: 26px;
  }

  .price-mobile__tariff-icon-two {
    width: 44px;
    height: 44px;
  }

  .price-mobile-card {
    border-radius: 30px;
  }

  .price-mobile-card__top {
    height: 134px;
    column-gap: 188px;
    padding-left: 38px;
    padding-right: 38px;
    padding-top: 28px;
  }

  .price-mobile-card__badge,
  .price-mobile-card__title,
  .price-mobile-card__label,
  .price-mobile-card__value {
    font-size: 26px;
  }

  .price-mobile-card__row {
    min-height: 148px;
    padding: 40px 38px;
  }

  .price-mobile-card__promo {
    padding: 20px 34px;
    border-radius: 30px;
  }

  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    font-size: 28px;
  }

  .price-mobile-it__header {
    grid-template-columns: 1fr 190px;
    height: 70px;
    padding: 0 34px;
    font-size: 20px;
    border-radius: 30px 30px 0 0;
  }

  .price-mobile-it__row {
    grid-template-columns: 1fr 190px;
    min-height: 140px;
    padding: 26px 34px;
  }

  .price-mobile-it__content {
    gap: 42px;
    font-size: 20px;
  }

  .price-mobile-it__content img {
    width: 36px;
    height: 36px;
  }

  .price-mobile-it__value {
    font-size: 20px;
    padding-left: 14px;
  }

  .price-mobile-it__row--last {
    border-radius: 0 0 30px 30px;
  }

  .price-mobile-monitoring__header,
  .price-mobile-monitoring__row {
    grid-template-columns: 1.3fr 1fr 168px;
  }

  .price-mobile-monitoring__header {
    height: 70px;
    padding: 0 34px;
    font-size: 19px;
    border-radius: 30px 30px 0 0;
  }

  .price-mobile-monitoring__row {
    min-height: 140px;
    padding: 26px 34px;
  }

  .price-mobile-monitoring__content {
    grid-template-columns: 36px 1fr;
    font-size: 19px;
  }

  .price-mobile-monitoring__content img {
    width: 36px;
    height: 36px;
  }

  .price-mobile-monitoring__type,
  .price-mobile-monitoring__value {
    font-size: 19px;
  }

  .price-mobile-monitoring__value {
    padding-left: 12px;
  }

  .price-mobile-monitoring__row--last {
    border-radius: 0 0 30px 30px;
  }
}

@media (min-width: 639px) {
  .price-mobile {
    border-radius: 0 0 52px 52px;
    padding-bottom: 122px;
  }

  .price-mobile__container,
  .price-mobile__internet-switcher,
  .price-mobile__internet-group,
  .price-mobile__tariff-row,
  .price-mobile-card,
  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    width: 639px;
    max-width: 639px;
  }

  .price-mobile__pill {
    gap: 28px;
    padding: 0 46px;
    height: 84px;
    margin-top: 184px;
    font-size: 28px;
  }

  .price-mobile__pill-dot {
    width: 16px;
    height: 16px;
  }

  .price-mobile__categories {
    padding-top: 46px;
  }

  .price-mobile__categories-list {
    gap: 46px;
  }

  .price-mobile__category {
    font-size: 30px;
  }

  .price-mobile__heading {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .price-mobile__title {
    font-size: 26px;
  }

  .price-mobile__internet-type-title {
    font-size: 28px;
  }

  .price-mobile__internet-switcher {
    margin: 22px auto 28px;
    border-radius: 24px;
  }

  .price-mobile__internet-switch-btn {
    padding: 22px 16px;
    font-size: 24px;
  }

  .price-mobile__tariff-row {
    margin-bottom: 18px;
  }

  .price-mobile__tariff-text {
    margin-left: 18px;
    font-size: 26px;
  }

  .price-mobile__tariff-icon-one {
    width: 28px;
    height: 28px;
  }

  .price-mobile__tariff-icon-two {
    width: 48px;
    height: 48px;
  }

  .price-mobile-card {
    border-radius: 32px;
  }

  .price-mobile-card__top {
    height: 148px;
    column-gap: 206px;
    padding-left: 42px;
    padding-right: 42px;
    padding-top: 30px;
  }

  .price-mobile-card__badge,
  .price-mobile-card__title,
  .price-mobile-card__label,
  .price-mobile-card__value {
    font-size: 28px;
  }

  .price-mobile-card__row {
    min-height: 162px;
    padding: 44px 42px;
  }

  .price-mobile-card__promo {
    padding: 22px 38px;
    border-radius: 32px;
  }

  .price-mobile-it__title,
  .price-mobile-monitoring__title {
    font-size: 30px;
  }

  .price-mobile-it__header {
    grid-template-columns: 1fr 208px;
    height: 74px;
    padding: 0 38px;
    font-size: 21px;
    border-radius: 32px 32px 0 0;
  }

  .price-mobile-it__row {
    grid-template-columns: 1fr 208px;
    min-height: 152px;
    padding: 28px 38px;
  }

  .price-mobile-it__content {
    gap: 46px;
    font-size: 21px;
  }

  .price-mobile-it__content img {
    width: 38px;
    height: 38px;
  }

  .price-mobile-it__value {
    font-size: 21px;
  }

  .price-mobile-it__row--last {
    border-radius: 0 0 32px 32px;
  }

  .price-mobile-monitoring__header,
  .price-mobile-monitoring__row {
    grid-template-columns: 1.3fr 1fr 186px;
  }

  .price-mobile-monitoring__header {
    height: 74px;
    padding: 0 38px;
    font-size: 20px;
    border-radius: 32px 32px 0 0;
  }

  .price-mobile-monitoring__row {
    min-height: 152px;
    padding: 28px 38px;
  }

  .price-mobile-monitoring__content {
    grid-template-columns: 38px 1fr;
    font-size: 20px;
  }

  .price-mobile-monitoring__content img {
    width: 38px;
    height: 38px;
  }

  .price-mobile-monitoring__type,
  .price-mobile-monitoring__value {
    font-size: 20px;
  }

  .price-mobile-monitoring__row--last {
    border-radius: 0 0 32px 32px;
  }
}
/* ===============================
   FINAL FIX — IT + MONITORING TEXT
   =============================== */

/* IT таблица */
.price-mobile-it__content,
.price-mobile-it__content *,
.price-mobile-it__value,
.price-mobile-it__value *,
.price-mobile-it__row,
.price-mobile-it__row * {
  color: #ffffff !important;
}

/* Monitoring таблица */
.price-mobile-monitoring__content,
.price-mobile-monitoring__content *,
.price-mobile-monitoring__value,
.price-mobile-monitoring__value *,
.price-mobile-monitoring__type,
.price-mobile-monitoring__type *,
.price-mobile-monitoring__row,
.price-mobile-monitoring__row * {
  color: #ffffff !important;
}




/* ===============================
   TABLET-PRICE-CENNIK
   =============================== */

.price-tablet {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #1d1d1d;
  border-radius: 0 0 52px 52px;
  overflow: hidden;
  position: relative;
  height: auto;
  padding-bottom: 122px;
}

.price-tablet__container {
  width: 639px;
  max-width: 639px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* VISIBILITY */
@media (min-width: 640px) and (max-width: 1199px) {
  .price-mobile {
    display: none !important;
  }

  .price-tablet {
    display: flex;
  }

  .price-desktop {
    display: none !important;
  }
}

/* 1. ОТКЛЮЧАЕМ SCROLL ANCHORING */
.price-mobile {
  overflow-anchor: none;
}

/* 2. ПАНЕЛИ НЕ ЛОМАЮТ LAYOUT */
.price-mobile__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.price-mobile__panel.is-active {
  position: relative;

  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* 3. КОНТЕЙНЕР ФИКСИРУЕТ ВЫСОТУ */
.price-mobile__container {
  position: relative;
}

/* 4. СТАБИЛИЗАЦИЯ АККОРДЕОНА */
.price-mobile__internet-group {
  contain: layout;
}








/* PILL */
.price-tablet__pill-wrap {
  display: flex;
  justify-content: center;
}

.price-tablet__pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  height: 50px;
  width: auto;
  margin-top: 100px;
  border-radius: 48px;
  background: #262626;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.price-tablet__pill.in-view {
  opacity: 1;
  transform: translateY(0);
}

.price-tablet__pill-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ace238;
}

/* CATEGORIES */
.price-tablet__categories {
  display: flex;
  justify-content: center;
  padding-top: 40px;
  color: #ffffff;
}

.price-tablet__categories-list {
  display: flex;
  gap: 50px;
}

.price-tablet__category {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}

.price-tablet__category::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 4px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.price-tablet__category.is-active[data-price-category="internet"]::after {
  background-color: #28e1e7;
}

.price-tablet__category.is-active[data-price-category="it"]::after {
  background-color: #ace238;
}

.price-tablet__category.is-active[data-price-category="monitoring"]::after {
  background-color: #ffffff;
}

/* TITLE */
.price-tablet__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.price-tablet__title {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.3;
  text-align: center;
}

.price-tablet__title-icon {
  width: 38px;
  height: 38px;
  display: block;
  flex-shrink: 0;
}

/* PANELS */
.price-tablet__panel {
  display: none;
  animation: priceTabletFade 0.35s ease;
}

.price-tablet__panel.is-active {
  display: block;
}

@keyframes priceTabletFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* INTERNET */
.price-tablet__internet-section {
  margin-bottom: 25px;
}

.price-tablet__internet-section:last-child {
  margin-bottom: 0;
}

.price-tablet__internet-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.price-tablet__internet-section-title {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
}

.price-tablet__internet-section-icon {
  display: block;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.price-tablet__internet-table {
  width: 100%;
  font-family: "Poppins", sans-serif;
  color: #ffffff;
}

.price-tablet__internet-header,
.price-tablet__internet-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  padding: 0;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.price-tablet__internet-header {
  background: #28e1e7;
  height: 50px;
  border-radius: 16px 16px 0 0;
  font-weight: 600;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-tablet__internet-row {
  min-height: 100px;
  background: #1e1e1e;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-tablet__internet-header > div,
.price-tablet__internet-row > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  align-items: center;
  text-align: center;
}

.price-tablet__internet-row--last-in-group {
  border-radius: 0 0 16px 16px;
  margin-bottom: 25px;
}

.price-tablet__internet-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.price-tablet__old-price {
  text-decoration: line-through;
  color: #b4aaaa;
  opacity: 0.4;
  font-weight: 600;
  line-height: 1.2;
}

.price-tablet__new-price {
  color: #ffffff;
  font-weight: 700;
  line-height: 1.2;
}

.price-tablet__promo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 2px solid #28e1e7;
  border-radius: 16px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}


/* 🔹 FIRST COLUMN — LEFT ALIGN */
.price-tablet__internet-header > div:first-child,
.price-tablet__internet-row > div:first-child {
  align-items: flex-start;
  text-align: left;
}

/* 🔹 RESET для остальных (чтобы не сломать) */
.price-tablet__internet-header > div:not(:first-child),
.price-tablet__internet-row > div:not(:first-child) {
  align-items: center;
  text-align: center;
}
/* 🔹 COLUMN 3 (TERM) — CENTER FIX */
.price-tablet__internet-header > div:nth-child(3),
.price-tablet__internet-row > div:nth-child(3) {
  align-items: center;
  text-align: center;
}




/* IT */
.price-tablet-it,
.price-tablet-it * {
  color: #ffffff !important;
}

.price-tablet-it__title {
  width: 520px;
  max-width: 520px;
  margin: 0 auto 20px;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  word-wrap: break-word;
  hyphens: auto;
}

.price-tablet-it__header,
.price-tablet-it__header * {
  color: #212121 !important;
}

.price-tablet-it__header {
  display: grid;
  grid-template-columns: 1fr 220px;
  height: 52px;
  background: #ace238;
  border-radius: 16px 16px 0 0;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
  box-sizing: border-box;
}

.price-tablet-it__header-right {
  text-align: center;
}

.price-tablet-it__row {
  display: grid;
  grid-template-columns: 1fr 220px;
  min-height: 100px;
  padding: 0 30px;
  background: #1e1e1e;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.price-tablet-it__row--last {
  border-radius: 0 0 16px 16px;
}

.price-tablet-it__content {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.price-tablet-it__content img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.price-tablet-it__value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.price-tablet-it__value--promo {
  font-weight: 700;
}

/* MONITORING */
.price-tablet-monitoring,
.price-tablet-monitoring * {
  color: #ffffff !important;
}

.price-tablet-monitoring__title {
  width: 520px;
  max-width: 520px;
  margin: 0 auto 24px;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  word-wrap: break-word;
  hyphens: auto;
}

.price-tablet-monitoring__header,
.price-tablet-monitoring__header * {
  color: #111111 !important;
}

.price-tablet-monitoring__header,
.price-tablet-monitoring__row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.4fr;
}

.price-tablet-monitoring__header {
  height: 52px;
  padding: 0 30px;
  background: #ffffff;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-tablet-monitoring__header-right {
  text-align: center;
}

.price-tablet-monitoring__row {
  min-height: 100px;
  padding: 0 30px;
  background: #1e1e1e;
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.price-tablet-monitoring__row--last {
  border-radius: 0 0 16px 16px;
}

.price-tablet-monitoring__content {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 18px;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.price-tablet-monitoring__content img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
}

.price-tablet-monitoring__type {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.price-tablet-monitoring__value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.price-tablet-monitoring__value--promo {
  font-weight: 700;
}

/* FINAL FIX — IT + MONITORING TEXT */
.price-tablet-it__content,
.price-tablet-it__content *,
.price-tablet-it__value,
.price-tablet-it__value *,
.price-tablet-it__row,
.price-tablet-it__row * {
  color: #ffffff !important;
}

.price-tablet-monitoring__content,
.price-tablet-monitoring__content *,
.price-tablet-monitoring__value,
.price-tablet-monitoring__value *,
.price-tablet-monitoring__type,
.price-tablet-monitoring__type *,
.price-tablet-monitoring__row,
.price-tablet-monitoring__row * {
  color: #ffffff !important;
}

/* ===============================
   FIX — TABLET ANIMATION
=============================== */

/* ПЛАШКА — без изменений логики, только гарантируем анимацию */
.price-tablet__pill {
  will-change: opacity, transform;
}

/* ПАНЕЛЬ — замедляем появление */
.price-tablet__panel.is-active {
  animation: priceTabletFade 0.6s ease;
}

/* ДЕЛАЕМ ДВИЖЕНИЕ ЧУТЬ БОЛЬШЕ (чтобы читалось на tablet) */
@keyframes priceTabletFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===============================
   DESKTOP-PRICE-CENNIK
   =============================== */

.price-desktop {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #1d1d1d;
  border-radius: 0 0 52px 52px;
  overflow: hidden;
  position: relative;
  height: auto;
  padding-bottom: 150px;
}

.price-desktop__container {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* VISIBILITY */
@media (min-width: 1200px) {
  .price-mobile {
    display: none !important;
  }

  .price-tablet {
    display: none !important;
  }

  .price-desktop {
    display: flex;
  }
}

/* PILL */
.price-desktop__pill-wrap {
  display: flex;
  justify-content: center;
}

.price-desktop__pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  height: 50px;
  width: auto;
  margin-top: 100px;
  border-radius: 48px;
  background: #262626;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.price-desktop__pill.in-view {
  opacity: 1;
  transform: translateY(0);
}

.price-desktop__pill-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ace238;
}

/* CATEGORIES */
.price-desktop__categories {
  display: flex;
  justify-content: center;
  padding-top: 50px;
  color: #ffffff;
}

.price-desktop__categories-list {
  display: flex;
  gap: 50px;
}

.price-desktop__category {
  position: relative;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 45px;
  font-weight: 400;
  text-transform: capitalize;
  color: #ffffff;
  cursor: pointer;
}

.price-desktop__category::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 4px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.price-desktop__category.is-active[data-price-category="internet"]::after {
  background-color: #28e1e7;
}

.price-desktop__category.is-active[data-price-category="it"]::after {
  background-color: #ace238;
}

.price-desktop__category.is-active[data-price-category="monitoring"]::after {
  background-color: #ffffff;
}

/* TITLE */
.price-desktop__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 40px;
  padding-bottom: 20px;
}

.price-desktop__title {
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
}

.price-desktop__title-icon {
  width: 38px;
  height: 38px;
  display: block;
  flex-shrink: 0;
}

/* PANELS */
.price-desktop__panel {
  display: none;
  animation: priceDesktopFade 0.35s ease;
}

.price-desktop__panel.is-active {
  display: block;
}

@keyframes priceDesktopFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* INTERNET */
.price-desktop__internet-section {
  margin-bottom: 25px;
}

.price-desktop__internet-section:last-child {
  margin-bottom: 0;
}

.price-desktop__internet-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.price-desktop__internet-section-title {
  margin: 0;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
}

.price-desktop__internet-section-icon {
  display: block;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.price-desktop__internet-table {
  width: 100%;
  font-family: "Poppins", sans-serif;
  color: #ffffff;
}

.price-desktop__internet-header,
.price-desktop__internet-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: normal;
  color: #ffffff;
}

.price-desktop__internet-header {
  background: #28e1e7;
  height: 50px;
  border-radius: 16px 16px 0 0;
  font-weight: 600;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-desktop__internet-row {
  min-height: 100px;
  background-color: #1e1e1e;
  font-weight: 400;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-desktop__internet-header > div,
.price-desktop__internet-row > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  text-align: center;
}

.price-desktop__internet-header > div {
  align-items: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.price-desktop__internet-row > div {
  align-items: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.price-desktop__internet-header > div:first-child,
.price-desktop__internet-row > div:first-child {
  align-items: flex-start;
  text-align: left;
}

.price-desktop__internet-header > div:not(:first-child),
.price-desktop__internet-row > div:not(:first-child) {
  align-items: center;
  text-align: center;
}

.price-desktop__internet-header > div:nth-child(3),
.price-desktop__internet-row > div:nth-child(3) {
  align-items: center;
  text-align: center;
}

.price-desktop__internet-row--last-in-group {
  border-radius: 0 0 16px 16px;
  margin-bottom: 25px;
}

.price-desktop__internet-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.price-desktop__old-price,
.price-desktop__new-price,
.price-desktop__promo {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-style: normal;
  line-height: normal;
}

.price-desktop__old-price {
  text-decoration: line-through;
  color: #b4aaaa;
  opacity: 0.4;
  font-weight: 600;
}

.price-desktop__new-price {
  color: #ffffff;
  font-weight: 600;
}

.price-desktop__promo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 2px solid #28e1e7;
  border-radius: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

/* IT */
.price-desktop-it,
.price-desktop-it * {
  color: #ffffff !important;
}

.price-desktop-it__title {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto 20px;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  text-transform: capitalize;
  word-wrap: break-word;
  hyphens: auto;
}

.price-desktop-it__header,
.price-desktop-it__header * {
  color: #212121 !important;
}

.price-desktop-it__header {
  display: grid;
  grid-template-columns: 1fr 220px;
  height: 52px;
  background: #ace238;
  border-radius: 16px 16px 0 0;
  padding: 0 30px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
  box-sizing: border-box;
}

.price-desktop-it__header h4 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.price-desktop-it__header-right {
  text-align: center;
}

.price-desktop-it__row {
  display: grid;
  grid-template-columns: 1fr 220px;
  min-height: 100px;
  padding: 0 30px;
  background: #1e1e1e;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.price-desktop-it__row--last {
  border-radius: 0 0 16px 16px;
}

.price-desktop-it__content {
  display: flex;
  align-items: center;
  gap: 25px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.price-desktop-it__content img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.price-desktop-it__value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.price-desktop-it__value--promo {
  font-weight: 700;
}

/* MONITORING */
.price-desktop-monitoring,
.price-desktop-monitoring * {
  color: #ffffff !important;
}

.price-desktop-monitoring__title {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto 24px;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  text-transform: capitalize;
  word-wrap: break-word;
  hyphens: auto;
}

.price-desktop-monitoring__header,
.price-desktop-monitoring__header * {
  color: #111111 !important;
}

.price-desktop-monitoring__header,
.price-desktop-monitoring__row {
  display: grid;
  grid-template-columns: 1fr 1fr 180px;
}

.price-desktop-monitoring__header {
  height: 52px;
  padding: 0 30px;
  background: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-desktop-monitoring__header h4 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.price-desktop-monitoring__header-right {
  text-align: center;
}

.price-desktop-monitoring__row {
  min-height: 100px;
  padding: 0 30px;
  background: #1e1e1e;
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.price-desktop-monitoring__row--last {
  border-radius: 0 0 16px 16px;
}

.price-desktop-monitoring__content {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 18px;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.price-desktop-monitoring__content img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
}

.price-desktop-monitoring__type {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.price-desktop-monitoring__value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.price-desktop-monitoring__value--promo {
  font-weight: 700;
}

/* FINAL FIX — IT + MONITORING TEXT */
.price-desktop-it__content,
.price-desktop-it__content *,
.price-desktop-it__value,
.price-desktop-it__value *,
.price-desktop-it__row,
.price-desktop-it__row * {
  color: #ffffff !important;
}

.price-desktop-monitoring__content,
.price-desktop-monitoring__content *,
.price-desktop-monitoring__value,
.price-desktop-monitoring__value *,
.price-desktop-monitoring__type,
.price-desktop-monitoring__type *,
.price-desktop-monitoring__row,
.price-desktop-monitoring__row * {
  color: #ffffff !important;
}

/* DESKTOP PRICE — CASCADE ANIMATION */
.price-desktop__internet-section-head,
.price-desktop__internet-header,
.price-desktop__internet-row,
.price-desktop-it__title,
.price-desktop-it__header,
.price-desktop-it__row,
.price-desktop-monitoring__title,
.price-desktop-monitoring__header,
.price-desktop-monitoring__row {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  transition-delay: var(--desktop-price-delay, 0ms);
  will-change: opacity, transform;
}

.price-desktop__internet-section-head.is-revealed,
.price-desktop__internet-header.is-revealed,
.price-desktop__internet-row.is-revealed,
.price-desktop-it__title.is-revealed,
.price-desktop-it__header.is-revealed,
.price-desktop-it__row.is-revealed,
.price-desktop-monitoring__title.is-revealed,
.price-desktop-monitoring__header.is-revealed,
.price-desktop-monitoring__row.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* DESKTOP PRICE — FIX VISIBILITY */
@media (min-width: 1200px) {
  .price-desktop__internet-section-head,
  .price-desktop__internet-header,
  .price-desktop__internet-row,
  .price-desktop-it__title,
  .price-desktop-it__header,
  .price-desktop-it__row,
  .price-desktop-monitoring__title,
  .price-desktop-monitoring__header,
  .price-desktop-monitoring__row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================
   SERVICES SECTION
   Mobile first
   Root: .services
========================================= */

/* ===============================
   TYPOGRAPHY – MOBILE
=============================== */

.services h1 {
  font-size: 30px;
  line-height: 1.2;
}

.services h2 {
  font-size: 24px;
  line-height: 1.25;
}

.services h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: capitalize;
}

.services h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.services h4 strong {
  font-weight: 600;
}

.services h5 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.services h6 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-transform: capitalize;
}

/* ===============================
   SERVICES — MOBILE BASE
=============================== */

.services {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-anchor: none;
}

.services .container {
  width: 100%;
  max-width: 300px;
}

/* =============================
   COMMON VISIBILITY
============================= */

.services [hidden] {
  display: none !important;
}

/* =============================
   SERVICES PILL
============================= */

.services-section-pill-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.services-section-pill--services {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;

  width: auto;
  height: 40px;
  padding: 0 16px;
  margin-top: 70px;

  border-radius: 48px;
  background: #262626;
  color: #ffffff;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

.services-section-pill--services.in-view {
  opacity: 1;
  transform: translateY(0);
}

.services-section-pill__text {
  display: flex;
  align-items: center;
}

.services-section-pill__icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ACE238;
}

/* =============================
   SERVICE BREADCRUMBS — MOBILE
============================= */

.service-breadcrumbs__row {
  display: none;
}

.service-breadcrumbs__row.is-active {
  display: block;
}

.service-breadcrumbs__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.service-breadcrumbs__nav a,
.service-breadcrumbs__nav span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #313131;
  text-decoration: none;
}

/* =============================
   SERVICE CATEGORIES — MOBILE
============================= */

.service-categories {
  display: flex;
  justify-content: center;
  padding-top: 22px;
}

.service-categories__list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.service-category {
  position: relative;
  background: none;
  border: none;
  padding: 0;

  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #212121;

  cursor: pointer;
}

.service-category::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.service-category.is-active[data-category="internet"]::after {
  background-color: #28E1E7;
}

.service-category.is-active[data-category="it"]::after {
  background-color: #ACE238;
}

.service-category.is-active[data-category="monitoring"]::after {
  background-color: #212121;
}

/* =============================
   SERVICE TITLE — MOBILE
============================= */

.service-title .cennik-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0;
  color: #212121;
}

.cennik-title_text {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  line-height: 1.3;
  text-align: center;
}

.service-title .cennik-title-ikon {
  width: 28px;
  height: 28px;
  filter: none;
}

/* ======================================================
   SERVICE FILTERS — MOBILE
====================================================== */

.service-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.service-filters__item {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 12px;
  border: 1px solid #212121;
  border-radius: 14px;
  background: transparent;

  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #212121;

  user-select: none;
}

.service-filters__item span {
  color: inherit;
}

.service-filters--internet .service-filters__item {
  cursor: pointer;
}

.service-filters__item--active {
  background: #212121;
  border-color: #212121;
  color: #ffffff;
}

.service-filters--static .service-filters__item {
  background: #212121;
  border-color: #212121;
  color: #ffffff;
  animation: none !important;
  transform: none !important;
  cursor: default;
}

@keyframes filterPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.service-filters--internet .service-filters__item {
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;

  animation-name: filterPulse;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.service-filters--internet .service-filters__item:not(.service-filters__item--active) {
  animation-play-state: running;
}

.service-filters--internet .service-filters__item--active {
  animation: none;
}

.service-filters--internet .service-filters__item:not(.service-filters__item--active):active {
  transform: scale(1.08);
}

.service-filters--internet .service-filters__item--active:active {
  transform: scale(1.04);
}

/* ============================================================
   SERVICE CARD LEVEL 2 — MOBILE
============================================================ */

.service-card-level2 {
  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 300px;
  height: auto;
  margin-top: 18px;
  padding: 18px 16px 16px;
  box-sizing: border-box;
  overflow: visible;

  background: #262626;
  border-radius: 18px;

  transition: opacity .25s ease, transform .25s ease;
}

.service-card-level2[hidden] {
  opacity: 0;
  transform: translateY(10px);
}

.service-card-level2 + .service-card-level2 {
  margin-top: 18px;
}

/* SWITCH */

.service-card-level2__switch {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.service-card-level2__switch-btn {
  padding: 8px 14px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;

  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.service-card-level2__switch-btn.is-active {
  background: #a4ff1c;
  color: #212121;
  border: none;
}

/* VARIANTS */

.service-card-level2__variant {
  display: none;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.service-card-level2__variant.is-active {
  display: flex;
}

/* TITLE / SUBTITLE */

.service-card-level2__title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
}

.service-card-level2__subtitle {
  position: relative;

  width: 100%;
  max-width: 268px;
  margin: 12px 0 18px;

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: #ffffff;
}

.service-card-level2__subtitle::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 16px;
  background: #ffffff;
  opacity: 0.2;
}

/* SECTIONS */

.service-card-level2__section {
  width: 100%;
  max-width: 268px;
  margin-bottom: 18px;
}

.service-card-level2__section-title {
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #ffffff;
}

/* LISTS */

.service-card-level2__list,
.service-card-level2__spec {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-card-level2__list li,
.service-card-level2__spec li {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-bottom: 8px;

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
}

.service-card-level2__list img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* FOR WHO */

.service-card-level2__forwho {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  width: 100%;
  max-width: 268px;
  margin-bottom: 18px;

  color: #ffffff;
}

.service-card-level2__forwho img {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.service-card-level2__forwho > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.service-card-level2__forwho strong {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.service-card-level2__forwho p {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

.service-card-level2__forwho p span {
  white-space: normal;
}

/* ACTIONS */

.service-card-level2__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;

  width: 100%;
  max-width: 268px;
  margin-top: auto;
}

.service-card-level2__cennik {
  order: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  height: 56px;
  box-sizing: border-box;

  border: 1px solid #ffffff;
  border-radius: 8px;
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.service-card-level2__cennik.is-active {
  background-color: #ffffff;
  color: #212121;
  border: 1px solid #212121;
}

.service-card-level2__consult {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card-level2__consult img {
  height: 56px;
}

/* ===============================
   SCROLL FIX
=============================== */

#serviceCategories {
  scroll-margin-top: 70px;
}

#cennik {
  scroll-margin-top: 100px;
}

/* ===============================
   360+
=============================== */

@media (min-width: 360px) {
  .services .container {
    max-width: 340px;
  }

  .services-section-pill--services {
    margin-top: 74px;
    height: 42px;
    padding: 0 18px;
    font-size: 17px;
  }

  .services-section-pill__icon {
    width: 11px;
    height: 11px;
  }

  .service-filters {
    gap: 11px;
  }

  .service-filters__item {
    padding: 10px 13px;
    font-size: 12px;
  }

  .service-card-level2 {
    max-width: 340px;
    padding: 19px 17px 17px;
    border-radius: 19px;
  }

  .service-card-level2__subtitle,
  .service-card-level2__section,
  .service-card-level2__actions,
  .service-card-level2__forwho {
    max-width: 304px;
  }

  .service-card-level2__switch-btn {
    padding: 8px 15px;
    font-size: 13px;
  }

  .service-card-level2__list img {
    width: 23px;
    height: 23px;
  }

  .service-card-level2__forwho img {
    width: 40px;
    height: 40px;
  }

  .cennik-title_text {
    font-size: 15px;
  }
}

/* ===============================
   390+
=============================== */

@media (min-width: 390px) {
  .services .container {
    max-width: 370px;
  }

  .services-section-pill--services {
    margin-top: 78px;
    height: 44px;
    font-size: 18px;
  }

  .service-card-level2 {
    max-width: 370px;
    padding: 20px 18px 18px;
    border-radius: 20px;
  }

  .service-card-level2__subtitle,
  .service-card-level2__section,
  .service-card-level2__actions,
  .service-card-level2__forwho {
    max-width: 330px;
  }
}

/* ===============================
   412+
=============================== */

@media (min-width: 412px) {
  .services .container {
    max-width: 392px;
  }

  .services-section-pill--services {
    margin-top: 82px;
    height: 46px;
    font-size: 19px;
  }

  .service-filters {
    gap: 12px;
  }

  .service-card-level2 {
    max-width: 392px;
    padding: 21px 19px 19px;
    border-radius: 21px;
  }

  .service-card-level2__subtitle,
  .service-card-level2__section,
  .service-card-level2__actions,
  .service-card-level2__forwho {
    max-width: 352px;
  }
}

/* ===============================
   428+
=============================== */

@media (min-width: 428px) {
  .services .container {
    max-width: 408px;
  }

  .services-section-pill--services {
    margin-top: 86px;
    height: 48px;
    font-size: 20px;
  }

  .service-card-level2 {
    max-width: 408px;
    padding: 22px 20px 20px;
    border-radius: 22px;
  }

  .service-card-level2__subtitle,
  .service-card-level2__section,
  .service-card-level2__actions,
  .service-card-level2__forwho {
    max-width: 368px;
  }
}

/* ===============================
   480+
=============================== */

@media (min-width: 480px) {
  .services .container {
    max-width: 460px;
  }

  .services-section-pill--services {
    margin-top: 92px;
    height: 52px;
    padding: 0 22px;
    font-size: 22px;
  }

  .services-section-pill__icon {
    width: 13px;
    height: 13px;
  }

  .service-categories-tablet__list {
    gap: 16px;
  }

  .service-filters {
    margin-top: 14px;
    gap: 13px;
  }

  .service-filters__item {
    padding: 11px 15px;
    font-size: 13px;
  }

  .service-card-level2 {
    max-width: 460px;
    padding: 24px 22px 22px;
    border-radius: 24px;
  }

  .service-card-level2__subtitle,
  .service-card-level2__section,
  .service-card-level2__actions,
  .service-card-level2__forwho {
    max-width: 416px;
  }

  .service-card-level2__switch {
    gap: 12px;
  }

  .service-card-level2__switch-btn {
    padding: 9px 16px;
    font-size: 14px;
  }

  .service-card-level2__list li,
  .service-card-level2__spec li {
    font-size: 15px;
  }

  .service-card-level2__cennik {
    height: 58px;
  }

  .service-card-level2__consult img {
    height: 58px;
  }
}

/* ===============================
   540+
=============================== */

@media (min-width: 540px) {
  .services .container {
    max-width: 520px;
  }

  .services-section-pill--services {
    margin-top: 98px;
    height: 56px;
    font-size: 24px;
  }

  .service-filters {
    gap: 14px;
  }

  .service-card-level2 {
    max-width: 520px;
    padding: 26px 24px 24px;
    border-radius: 26px;
  }

  .service-card-level2__subtitle,
  .service-card-level2__section,
  .service-card-level2__actions,
  .service-card-level2__forwho {
    max-width: 472px;
  }

  .service-card-level2__list img {
    width: 24px;
    height: 24px;
  }

  .service-card-level2__forwho img {
    width: 42px;
    height: 42px;
  }
}

/* ===============================
   600+
=============================== */

@media (min-width: 600px) {
  .services .container {
    max-width: 580px;
  }

  .service-category {
    font-size: 28px;
  }

  .service-breadcrumbs-tablet__row.is-active {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .service-breadcrumbs-tablet__nav {
    justify-content: flex-start;
    text-align: left;
  }

  .services-section-pill--services {
    margin-top: 104px;
    height: 60px;
    font-size: 26px;
  }

  .service-categories-tablet__list {
    gap: 18px;
  }

  .service-filters {
    margin-top: 16px;
    gap: 15px;
  }

  .service-card-level2 {
    max-width: 580px;
    padding: 28px 26px 26px;
    border-radius: 28px;
  }

  .service-card-level2__subtitle,
  .service-card-level2__section,
  .service-card-level2__actions,
  .service-card-level2__forwho {
    max-width: 528px;
  }

  .service-card-level2__actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .service-card-level2__cennik {
    order: 2;
    width: 180px;
    height: 60px;
  }

  .service-card-level2__consult {
    order: 1;
    justify-content: flex-start;
  }

  .service-card-level2__consult img {
    height: 60px;
  }
}

/* ===============================
   639+
=============================== */

@media (min-width: 639px) {
  .services .container {
    max-width: 639px;
  }

  .services-section-pill--services {
    margin-top: 110px;
    height: 64px;
    padding: 0 26px;
    font-size: 20px;
  }

  .services-section-pill__icon {
    width: 14px;
    height: 14px;
  }

  .service-filters {
    gap: 16px;
  }

  .service-filters__item {
    padding: 12px 16px;
    font-size: 14px;
  }

  .service-card-level2 {
    max-width: 639px;
    padding: 30px 28px 28px;
    border-radius: 30px;
  }

  .service-card-level2__subtitle,
  .service-card-level2__section,
  .service-card-level2__actions,
  .service-card-level2__forwho {
    max-width: 580px;
  }

  .service-card-level2__subtitle {
    font-size: 16px;
  }

  .service-card-level2__list li,
  .service-card-level2__spec li,
  .service-card-level2__forwho p {
    font-size: 16px;
  }

  .service-card-level2__cennik {
    width: 200px;
    height: 62px;
  }

  .service-card-level2__consult img {
    height: 62px;
  }
}

/* ===============================
   640+
=============================== */

@media (min-width: 640px) {
  #cennik {
    scroll-margin-top: 120px;
  }
}





























/* =========================================
   SERVICES DESKTOP SECTION
========================================= */

.services-desktop {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-anchor: none;
}

.services-desktop__container {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
}

/* =============================
   SERVICES DESKTOP PILL
============================= */

.services-desktop-section-pill-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.services-desktop-section-pill--services {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;

  width: auto;
  height: 64px;
  padding: 0 26px;
  margin-top: 110px;

  border-radius: 48px;
  background: #262626;
  color: #ffffff;

  font-family: "Poppins", sans-serif;
  font-size: 20px;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

.services-desktop-section-pill--services.in-view {
  opacity: 1;
  transform: translateY(0);
}

.services-desktop-section-pill__text {
  display: flex;
  align-items: center;
}

.services-desktop-section-pill__icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ACE238;
}

/* ==============================
   BREADCRUMBS — DESKTOP
============================== */

.services-desktop-breadcrumbs {
  margin-bottom: 24px;
}

.services-desktop-breadcrumbs__row {
  display: none;
}

.services-desktop-breadcrumbs__row.is-active {
  display: flex;
  justify-content: center;
}

.services-desktop-breadcrumbs__nav {
  display: flex;
  align-items: center;
  gap: 10px;

  font-family: "Poppins", sans-serif;
  font-size: 18px;
}

.services-desktop-breadcrumbs__nav a,
.services-desktop-breadcrumbs__nav span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #313131;
  text-decoration: none;
}

/* ==============================
   CATEGORIES — DESKTOP
============================== */

.services-desktop-categories {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.services-desktop-categories__list {
  display: flex;
  gap: 40px;
}

.services-desktop-category {
  position: relative;
  display: inline-block;
letter-spacing: 0.5px;
  font-family: "Open Sans", sans-serif;
  font-size: 38px; /* ↓ было 45 */
  font-weight: 400;
  text-transform: capitalize;

  background: none;
  border: none;
  cursor: pointer;
}

.services-desktop-category::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;

  width: 100%;
  height: 6px; /* ↑ было 5 → сделали чуть мощнее */
  background: transparent;
}

.services-desktop-category.is-active[data-category="internet"]::after {
  background: #28E1E7;
}

.services-desktop-category.is-active[data-category="it"]::after {
  background: #ACE238;
}

.services-desktop-category.is-active[data-category="monitoring"]::after {
  background: #212121;
}

/* ==============================
   TITLE — DESKTOP
============================== */

.services-desktop-title {
  margin-top: 36px; 
}

.services-desktop-title__wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.services-desktop-title__text {
  font-family: "Open Sans", sans-serif;
  font-size: 22px; /* ↑ было 18 */
  font-weight: 500;
}

.services-desktop-title__icon {
  width: 36px; 
  height: 36px;
}

/* ==============================
   FILTERS — DESKTOP
============================== */

.services-desktop-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 14px;
  margin-top: 24px;
}

.services-desktop-filters__item {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 14px 22px; /* ↓ чуть компактнее */
  border: 1px solid #212121;
  border-radius: 16px;
  background: transparent;

  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;

  cursor: pointer;
}

.services-desktop-filters__item.is-active {
  background: #212121;
  color: #fff;
}

/* static */

.services-desktop-filters--static .services-desktop-filters__item {
  background: #212121;
  color: #fff;
  cursor: default;
}

/* ==============================
   ANIMATION
============================== */

@keyframes desktopFilterPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.services-desktop-filters--internet .services-desktop-filters__item {
  animation: desktopFilterPulse 1.6s ease-in-out infinite;
  animation-play-state: paused;
}

.services-desktop-filters--internet .services-desktop-filters__item:not(.is-active) {
  animation-play-state: running;
}

.services-desktop [hidden] {
  display: none !important;
}

/* ======================================================
   SERVICES DESKTOP VISIBILITY
====================================================== */

.services-desktop {
  display: none;
}

/* ======================================================
   DESKTOP ≥ 1200px
====================================================== */

@media (min-width: 1200px) {

  /* HIDE MOBILE / TABLET VERSION */
  .services {
    display: none;
  }

  /* SHOW DESKTOP VERSION */
  .services-desktop {
    width: 100%;
    display: flex;
    justify-content: center;
  }

}







.services-desktop-cards {
  width: 100%;
padding-top: 30px;
  display: flex;
  flex-direction: column;
}

.services-desktop__pair {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
}

.service-card-desktop {
  width: 588px;
  min-height: 840px;

  background: #262626;
  border-radius: 16px;

  padding: 40px 38px 24px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card-desktop__title {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 600;
  color: #ffffff;

  text-align: center;
  text-transform: capitalize;

  margin-bottom: 20px;
}

.no-wrap {
  white-space: nowrap;
}

.service-card-desktop__subtitle {
  width: 100%;
  max-width: 526px;

  margin: 0 auto 24px;

  position: relative;
  padding-bottom: 20px;

  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #ffffff;

  text-align: center;
  line-height: 1.6;
}

.service-card-desktop__subtitle::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: #ffffff;
  opacity: 0.2;
}

.service-card-desktop__section {
  width: 100%;
  max-width: 512px;
}

.service-card-desktop__section-title {
  margin-bottom: 6px;

  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

.service-card-desktop__list {
  list-style: none;

  padding: 0;
  margin: 0 0 10px 0;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-card-desktop__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.service-card-desktop__list img {
  width: 26px;
  height: 26px;

  flex-shrink: 0;
  margin-top: 2px;
}

.service-card-desktop__list span {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #ffffff;

  line-height: 1.4;
}

.service-card-desktop__spec {
  list-style: none;

  padding: 0;
  margin: 0 0 10px 0;
}

.service-card-desktop__spec li {
  margin-bottom: 6px;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #ffffff;

  line-height: 1.4;
}

.service-card-desktop__forwho {
  width: 100%;
  max-width: 512px;

  margin-top: 20px;

  display: flex;
  gap: 34px;
  align-items: center;
}

.service-card-desktop__forwho img {
  width: 50px;
  height: 50px;

  flex-shrink: 0;
}

.service-card-desktop__forwho strong {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #ffffff;
}

.service-card-desktop__forwho p {
  margin: 6px 0;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.service-card-desktop__actions {
  margin-top: auto;
  padding-top: 24px;

  display: flex;
  gap: 90px;
  align-items: flex-end;
}

.service-card-desktop__consult img {
  display: block;
}
.service-card-desktop__cennik {
  width: 180px;
  height: 56px;

  border: 1px solid #ffffff;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #ffffff;

  text-decoration: none;

  transition: 0.3s;
}

.service-card-desktop__cennik img {
  width: 12px;
  height: 12px;

  transition: 0.3s;
}

.service-card-desktop__cennik:hover {
  background: #ffffff;
  color: #212121;

  border: 1px solid #212121;
}

.service-card-desktop__cennik:hover img {
  filter: brightness(0);
}























/* ===============================
   16. FAQ — MOBILE (320px)
   Container: 300px
   =============================== */

/* ===============================
   TYPOGRAPHY – MOBILE (320px)
   =============================== */

h1 {
  font-size: 30px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h4 strong {
  font-weight: 600;
}

h5 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

h6 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-transform: capitalize;
}

.FAQ {
  position: relative;
  width: 100%;
  margin-bottom: 50px;

  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.FAQ.visible {
  opacity: 1;
  transform: translateY(0);
}

.FAQ-text-title {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 40px;
}

.FAQ-text-title span {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 1.25;
}

.FAQ-text-category {
  position: relative;
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  color: #121212;
  text-align: center;
  margin: 40px auto 20px;
  left: 50%;
  transform: translateX(-50%);
}

.FAQ-text-category::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
}

.internet-color::after { background-color: #28E1E7; }
.it-color::after { background-color: #B1F844; }
.monitoring-color::after { background-color: #1A1A1A; }

.FAQ-item {
  position: relative;
  margin-top: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.FAQ-item:last-child {
  border-bottom: none;
}

.FAQ-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.FAQ-item.active::after {
  width: 100%;
}

.FAQ-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding-top: 10px;
}

.FAQ-question_text {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  color: #1A1A1A;

  padding-right: 44px;
  display: block;
  line-height: 1.35;
  word-break: break-word;
}

.FAQ-question_text span {
  text-transform: none;
}

.FAQ-icon {
  transition: transform 0.3s ease;
}

.FAQ-item.active .FAQ-icon {
  transform: rotate(180deg);
}

.FAQ-answer_text {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #1A1A1A;
  margin-top: 20px;
  line-height: 1.55;

  display: none;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  max-height: 0;
  overflow: hidden;
  transition: all 0.45s ease;
}

.FAQ-item.active .FAQ-answer_text {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
  max-height: 400px;
}

.wave {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
}

@keyframes waveUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



@media (min-width: 360px) {
h1 { font-size: 34px; }
h2 { font-size: 27px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }

.FAQ { margin-bottom: 56px; }
.FAQ-text-title { margin-top: 45px; }

.FAQ-text-category { margin: 45px auto 22px; }
.FAQ-text-category::after { bottom: -9px; height: 4px; border-radius: 4px; }

.FAQ-item { margin-top: 27px; padding-bottom: 22px; }
.FAQ-question { padding-top: 11px; }
.FAQ-question_text { padding-right: 50px; }

.FAQ-answer_text { font-size: 17px; margin-top: 22px; }
.FAQ-item.active .FAQ-answer_text { max-height: 450px; }
}

@media (min-width: 390px) {
h1 { font-size: 37px; }
h2 { font-size: 29px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 16px; }

.FAQ { margin-bottom: 61px; }
.FAQ-text-title { margin-top: 49px; }

.FAQ-text-category { margin: 49px auto 24px; }
.FAQ-text-category::after { bottom: -10px; height: 5px; border-radius: 5px; }

.FAQ-item { margin-top: 29px; padding-bottom: 24px; }
.FAQ-question { padding-top: 12px; }
.FAQ-question_text { padding-right: 54px; }

.FAQ-answer_text { font-size: 18px; margin-top: 24px; }
.FAQ-item.active .FAQ-answer_text { max-height: 488px; }
}

@media (min-width: 412px) {
h1 { font-size: 39px; }
h2 { font-size: 31px; }
h3 { font-size: 26px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 17px; }

.FAQ { margin-bottom: 64px; }
.FAQ-text-title { margin-top: 52px; }

.FAQ-text-category { margin: 52px auto 26px; }
.FAQ-text-category::after { bottom: -10px; height: 5px; border-radius: 5px; }

.FAQ-item { margin-top: 31px; padding-bottom: 26px; }
.FAQ-question { padding-top: 13px; }
.FAQ-question_text { padding-right: 57px; }

.FAQ-answer_text { font-size: 19px; margin-top: 26px; }
.FAQ-item.active .FAQ-answer_text { max-height: 515px; }
}

@media (min-width: 428px) {
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 27px; }
h4 { font-size: 21px; }
h5 { font-size: 19px; }
h6 { font-size: 17px; }

.FAQ { margin-bottom: 67px; }
.FAQ-text-title { margin-top: 54px; }

.FAQ-text-category { margin: 54px auto 27px; }
.FAQ-text-category::after { bottom: -11px; height: 5px; border-radius: 5px; }

.FAQ-item { margin-top: 32px; padding-bottom: 27px; }
.FAQ-question { padding-top: 13px; }
.FAQ-question_text { padding-right: 59px; }

.FAQ-answer_text { font-size: 20px; margin-top: 27px; }
.FAQ-item.active .FAQ-answer_text { max-height: 535px; }
}

@media (min-width: 480px) {
h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 21px; }
h6 { font-size: 20px; }

.FAQ { margin-bottom: 75px; }
.FAQ-text-title { margin-top: 60px; }

.FAQ-text-category { margin: 60px auto 30px; }
.FAQ-text-category::after { bottom: -12px; height: 6px; border-radius: 6px; }

.FAQ-item { margin-top: 36px; padding-bottom: 30px; }
.FAQ-question { padding-top: 15px; }
.FAQ-question_text { padding-right: 66px; }

.FAQ-answer_text { font-size: 22px; margin-top: 30px; }
.FAQ-item.active .FAQ-answer_text { max-height: 600px; }
}

@media (min-width: 540px) {
h1 { font-size: 51px; }
h2 { font-size: 41px; }
h3 { font-size: 34px; }
h4 { font-size: 27px; }
h5 { font-size: 24px; }
h6 { font-size: 22px; }

.FAQ { margin-bottom: 84px; }
.FAQ-text-title { margin-top: 68px; }

.FAQ-text-category { margin: 68px auto 34px; }
.FAQ-text-category::after { bottom: -14px; height: 7px; border-radius: 7px; }

.FAQ-item { margin-top: 41px; padding-bottom: 34px; }
.FAQ-question { padding-top: 17px; }
.FAQ-question_text { padding-right: 74px; }

.FAQ-answer_text { font-size: 25px; margin-top: 34px; }
.FAQ-item.active .FAQ-answer_text { max-height: 675px; }
}

@media (min-width: 600px) {
h1 { font-size: 56px; }
h2 { font-size: 45px; }
h3 { font-size: 38px; }
h4 { font-size: 30px; }
h5 { font-size: 26px; }
h6 { font-size: 24px; }

.FAQ { margin-bottom: 94px; }
.FAQ-text-title { margin-top: 75px; }

.FAQ-text-category { margin: 75px auto 38px; }
.FAQ-text-category::after { bottom: -15px; height: 8px; border-radius: 8px; }

.FAQ-item { margin-top: 45px; padding-bottom: 38px; }
.FAQ-question { padding-top: 19px; }
.FAQ-question_text { padding-right: 82px; }

.FAQ-answer_text { font-size: 28px; margin-top: 38px; }
.FAQ-item.active .FAQ-answer_text { max-height: 750px; }
}

@media (min-width: 639px) {
h1 { font-size: 60px; }
h2 { font-size: 48px; }
h3 { font-size: 40px; }
h4 { font-size: 32px; }
h5 { font-size: 28px; }
h6 { font-size: 26px; }

.FAQ { margin-bottom: 100px; }
.FAQ-text-title { margin-top: 80px; }

.FAQ-text-category { margin: 80px auto 40px; }
.FAQ-text-category::after { bottom: -16px; height: 8px; border-radius: 8px; }

.FAQ-item { margin-top: 48px; padding-bottom: 40px; }
.FAQ-question { padding-top: 20px; }
.FAQ-question_text { padding-right: 88px; }

.FAQ-answer_text { font-size: 30px; margin-top: 40px; }
.FAQ-item.active .FAQ-answer_text { max-height: 799px; }
}



/* ===============================
   17. REVIEWS — MOBILE (320px)
   Container: 300px
   =============================== */

/* ===============================
   TYPOGRAPHY – MOBILE (320px)
   =============================== */

h1 {
  font-size: 30px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h4 strong {
  font-weight: 600;
}

h5 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

h6 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-transform: capitalize;
}

.reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reviews-label {
  padding-top: 40px;
}

.reviews__title {
  text-align: center;
  display: flex;
  justify-content: center;
  font-weight: 600;
  color: #1D1D1D;
}

.reviews__subtitle {
  margin-top: 15px;
  padding-bottom: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  color: #3C3C3C;
  opacity: 1;
  font-size: 16px;
  line-height: 1.6;
}

/* ===== CARD (layout v3) ===== */

.reviews__card {
  position: relative;
  display: flex;
  flex-direction: column;   /* важно: верхняя строка + контент идут вертикально */
  align-items: stretch;
  width: 300px;
  height: 300px;
  border-radius: 24px;
  padding: 22px 20px;
  box-sizing: border-box;
  overflow: hidden;

  background: #1D1D1D;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.reviews__card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  z-index: 0;
}

.reviews__inner,
.reviews__avatar-wrapper {
  position: relative;
  z-index: 1;
}

/* TOP ROW: avatar left, decor right (same row, full width) */
.reviews__avatar-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin: 0;
  flex-shrink: 0;
}

.reviews__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.08);
}

.reviews__decor {
  width: 92px;
  height: auto;
  object-fit: contain;
  opacity: 0.8;
}

/* CONTENT COLUMN */
.reviews__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  width: 100%;
  min-width: 0;
  margin-top: 14px; /* отступ от верхней строки */
}

.reviews__content {
  display: flex;
  flex-direction: column;
  color: #E5E5E5;
  min-width: 0;
}

/* quote icon: above text, aligned right */
.reviews__quote-icon {
  width: 34px;
  height: 34px;
  opacity: 0.9;

  margin-left: auto;
  margin-bottom: 12px;
}

/* text: below quote icon */
.reviews__text {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.55;
  max-width: 100%;
  margin: 0;
}

/* author row */
.reviews__author {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 16px;
  gap: 12px;
}

.reviews__author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.reviews__author-name {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}

.reviews__author-role {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  margin: 0;
}

.reviews__verified {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.reviews__verified-icon {
  width: 20px;
  height: 20px;
}

.reviews__verified-text {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
}

/* ===== slider + navigation ===== */

.reviews__switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
  margin-bottom: 50px;
}

.reviews__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50px;
  background: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.reviews__arrow img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.reviews__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E3E3E3;
  transition: background 0.3s ease;
}

.dot.active {
  background: #262626;
}

.reviews__slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  min-height: 300px;
  z-index: 1;
}

.reviews__set {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.8s ease;
  pointer-events: none;
}

.reviews__set.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
  z-index: 2;
}

.reviews__set.prev {
  opacity: 0;
  transform: translateX(-100%);
  z-index: 1;
}

.fade-up {
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.reviews__title,
.reviews__subtitle {
  position: relative;
  z-index: 5;
}

/* === scroll fade === */

.fade-on-scroll {
  opacity: 0;
  transform: translateY(25px);
  filter: blur(6px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}

.fade-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.fade-on-scroll[data-delay="120"] {
  transition-delay: .12s;
}

.fade-on-scroll[data-delay="200"] {
  transition-delay: .20s;
}

.fade-on-scroll[data-delay="300"] {
  transition-delay: .30s;
}

@media (min-width: 360px) {
h1 { font-size: 34px; }
h2 { font-size: 27px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }

.reviews-label { padding-top: 45px; }
.reviews__subtitle { margin-top: 17px; padding-bottom: 45px; font-size: 18px; }

.reviews__card {
width: 338px;
height: 338px;
border-radius: 27px;
padding: 25px 23px;
}

.reviews__card::after {
border-radius: 26px;
inset: 1px;
}

.reviews__inner { margin-top: 16px; }

.reviews__avatar { width: 81px; height: 81px; }
.reviews__decor { width: 104px; }

.reviews__quote-icon { width: 38px; height: 38px; margin-bottom: 14px; }

.reviews__text { font-size: 16px; }

.reviews__author { margin-top: 18px; gap: 14px; }
.reviews__author-info { gap: 5px; }
.reviews__author-name { font-size: 16px; }
.reviews__author-role { font-size: 14px; }

.reviews__verified { gap: 7px; }
.reviews__verified-icon { width: 23px; height: 23px; }
.reviews__verified-text { font-size: 14px; }

.reviews__slider { max-width: 338px; min-height: 338px; }

.reviews__switcher { gap: 20px; margin-top: 36px; margin-bottom: 56px; }
.reviews__arrow { width: 54px; height: 54px; border-radius: 56px; }
.reviews__arrow img { width: 25px; height: 25px; }

.reviews__dots { gap: 9px; }
.dot { width: 11px; height: 11px; }

.fade-on-scroll { transform: translateY(28px); filter: blur(7px); }
}

@media (min-width: 390px) {
h1 { font-size: 37px; }
h2 { font-size: 29px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 16px; }

.reviews-label { padding-top: 49px; }
.reviews__subtitle { margin-top: 18px; padding-bottom: 49px; font-size: 20px; }

.reviews__card {
width: 366px;
height: 366px;
border-radius: 29px;
padding: 27px 24px;
}

.reviews__card::after {
border-radius: 28px;
inset: 1px;
}

.reviews__inner { margin-top: 17px; }

.reviews__avatar { width: 88px; height: 88px; }
.reviews__decor { width: 112px; }

.reviews__quote-icon { width: 42px; height: 42px; margin-bottom: 15px; }

.reviews__text { font-size: 17px; }

.reviews__author { margin-top: 20px; gap: 15px; }
.reviews__author-info { gap: 5px; }
.reviews__author-name { font-size: 17px; }
.reviews__author-role { font-size: 15px; }

.reviews__verified { gap: 7px; }
.reviews__verified-icon { width: 25px; height: 25px; }
.reviews__verified-text { font-size: 15px; }

.reviews__slider { max-width: 366px; min-height: 366px; }

.reviews__switcher { gap: 22px; margin-top: 39px; margin-bottom: 61px; }
.reviews__arrow { width: 58px; height: 58px; border-radius: 61px; }
.reviews__arrow img { width: 27px; height: 27px; }

.reviews__dots { gap: 10px; }
.dot { width: 12px; height: 12px; }

.fade-on-scroll { transform: translateY(30px); filter: blur(8px); }
}

@media (min-width: 412px) {
h1 { font-size: 39px; }
h2 { font-size: 31px; }
h3 { font-size: 26px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 17px; }

.reviews-label { padding-top: 52px; }
.reviews__subtitle { margin-top: 19px; padding-bottom: 52px; font-size: 21px; }

.reviews__card {
width: 386px;
height: 386px;
border-radius: 31px;
padding: 28px 26px;
}

.reviews__card::after {
border-radius: 30px;
inset: 1px;
}

.reviews__inner { margin-top: 18px; }

.reviews__avatar { width: 93px; height: 93px; }
.reviews__decor { width: 118px; }

.reviews__quote-icon { width: 44px; height: 44px; margin-bottom: 15px; }

.reviews__text { font-size: 18px; }

.reviews__author { margin-top: 21px; gap: 16px; }
.reviews__author-info { gap: 6px; }
.reviews__author-name { font-size: 18px; }
.reviews__author-role { font-size: 16px; }

.reviews__verified { gap: 8px; }
.reviews__verified-icon { width: 26px; height: 26px; }
.reviews__verified-text { font-size: 16px; }

.reviews__slider { max-width: 386px; min-height: 386px; }

.reviews__switcher { gap: 23px; margin-top: 41px; margin-bottom: 64px; }
.reviews__arrow { width: 61px; height: 61px; border-radius: 64px; }
.reviews__arrow img { width: 28px; height: 28px; }

.reviews__dots { gap: 11px; }
.dot { width: 13px; height: 13px; }

.fade-on-scroll { transform: translateY(32px); filter: blur(8px); }
}

@media (min-width: 428px) {
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 27px; }
h4 { font-size: 21px; }
h5 { font-size: 19px; }
h6 { font-size: 17px; }

.reviews-label { padding-top: 54px; }
.reviews__subtitle { margin-top: 20px; padding-bottom: 54px; font-size: 22px; }

.reviews__card {
width: 401px;
height: 401px;
border-radius: 32px;
padding: 29px 27px;
}

.reviews__card::after {
border-radius: 31px;
inset: 1px;
}

.reviews__inner { margin-top: 19px; }

.reviews__avatar { width: 97px; height: 97px; }
.reviews__decor { width: 123px; }

.reviews__quote-icon { width: 46px; height: 46px; margin-bottom: 16px; }

.reviews__text { font-size: 19px; }

.reviews__author { margin-top: 22px; gap: 17px; }
.reviews__author-info { gap: 6px; }
.reviews__author-name { font-size: 19px; }
.reviews__author-role { font-size: 16px; }

.reviews__verified { gap: 8px; }
.reviews__verified-icon { width: 27px; height: 27px; }
.reviews__verified-text { font-size: 16px; }

.reviews__slider { max-width: 401px; min-height: 401px; }

.reviews__switcher { gap: 24px; margin-top: 43px; margin-bottom: 67px; }
.reviews__arrow { width: 63px; height: 63px; border-radius: 67px; }
.reviews__arrow img { width: 29px; height: 29px; }

.reviews__dots { gap: 11px; }
.dot { width: 13px; height: 13px; }

.fade-on-scroll { transform: translateY(33px); filter: blur(9px); }
}

@media (min-width: 480px) {
h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 21px; }
h6 { font-size: 20px; }

.reviews-label { padding-top: 60px; }
.reviews__subtitle { margin-top: 22px; padding-bottom: 60px; font-size: 24px; }

.reviews__card {
width: 450px;
height: 450px;
border-radius: 36px;
padding: 33px 30px;
}

.reviews__card::after {
border-radius: 35px;
inset: 1px;
}

.reviews__inner { margin-top: 21px; }

.reviews__avatar { width: 108px; height: 108px; }
.reviews__decor { width: 138px; }

.reviews__quote-icon { width: 52px; height: 52px; margin-bottom: 18px; }

.reviews__text { font-size: 21px; }

.reviews__author { margin-top: 25px; gap: 19px; }
.reviews__author-info { gap: 7px; }
.reviews__author-name { font-size: 21px; }
.reviews__author-role { font-size: 18px; }

.reviews__verified { gap: 9px; }
.reviews__verified-icon { width: 30px; height: 30px; }
.reviews__verified-text { font-size: 18px; }

.reviews__slider { max-width: 450px; min-height: 450px; }

.reviews__switcher { gap: 27px; margin-top: 48px; margin-bottom: 75px; }
.reviews__arrow { width: 71px; height: 71px; border-radius: 75px; }
.reviews__arrow img { width: 33px; height: 33px; }

.reviews__dots { gap: 13px; }
.dot { width: 15px; height: 15px; }

.fade-on-scroll { transform: translateY(38px); filter: blur(10px); }
}

@media (min-width: 540px) {
h1 { font-size: 51px; }
h2 { font-size: 41px; }
h3 { font-size: 34px; }
h4 { font-size: 27px; }
h5 { font-size: 24px; }
h6 { font-size: 22px; }

.reviews-label { padding-top: 68px; }
.reviews__subtitle { margin-top: 25px; padding-bottom: 68px; font-size: 27px; }

.reviews__card {
width: 506px;
height: 506px;
border-radius: 41px;
padding: 37px 34px;
}

.reviews__card::after {
border-radius: 40px;
inset: 1px;
}

.reviews__inner { margin-top: 24px; }

.reviews__avatar { width: 121px; height: 121px; }
.reviews__decor { width: 155px; }

.reviews__quote-icon { width: 58px; height: 58px; margin-bottom: 20px; }

.reviews__text { font-size: 24px; }

.reviews__author { margin-top: 28px; gap: 21px; }
.reviews__author-info { gap: 8px; }
.reviews__author-name { font-size: 24px; }
.reviews__author-role { font-size: 20px; }

.reviews__verified { gap: 10px; }
.reviews__verified-icon { width: 34px; height: 34px; }
.reviews__verified-text { font-size: 20px; }

.reviews__slider { max-width: 506px; min-height: 506px; }

.reviews__switcher { gap: 30px; margin-top: 54px; margin-bottom: 84px; }
.reviews__arrow { width: 80px; height: 80px; border-radius: 84px; }
.reviews__arrow img { width: 37px; height: 37px; }

.reviews__dots { gap: 15px; }
.dot { width: 17px; height: 17px; }

.fade-on-scroll { transform: translateY(43px); filter: blur(11px); }
}

@media (min-width: 600px) {
h1 { font-size: 56px; }
h2 { font-size: 45px; }
h3 { font-size: 38px; }
h4 { font-size: 30px; }
h5 { font-size: 26px; }
h6 { font-size: 24px; }

.reviews-label { padding-top: 75px; }
.reviews__subtitle { margin-top: 28px; padding-bottom: 75px; font-size: 30px; }

.reviews__card {
width: 563px;
height: 563px;
border-radius: 45px;
padding: 41px 38px;
}

.reviews__card::after {
border-radius: 44px;
inset: 1px;
}

.reviews__inner { margin-top: 26px; }

.reviews__avatar { width: 135px; height: 135px; }
.reviews__decor { width: 173px; }

.reviews__quote-icon { width: 64px; height: 64px; margin-bottom: 22px; }

.reviews__text { font-size: 27px; }

.reviews__author { margin-top: 31px; gap: 23px; }
.reviews__author-info { gap: 9px; }
.reviews__author-name { font-size: 27px; }
.reviews__author-role { font-size: 22px; }

.reviews__verified { gap: 11px; }
.reviews__verified-icon { width: 38px; height: 38px; }
.reviews__verified-text { font-size: 22px; }

.reviews__slider { max-width: 563px; min-height: 563px; }

.reviews__switcher { gap: 33px; margin-top: 60px; margin-bottom: 94px; }
.reviews__arrow { width: 89px; height: 89px; border-radius: 94px; }
.reviews__arrow img { width: 41px; height: 41px; }

.reviews__dots { gap: 17px; }
.dot { width: 19px; height: 19px; }

.fade-on-scroll { transform: translateY(48px); filter: blur(12px); }
}

@media (min-width: 639px) {
h1 { font-size: 60px; }
h2 { font-size: 48px; }
h3 { font-size: 40px; }
h4 { font-size: 32px; }
h5 { font-size: 28px; }
h6 { font-size: 26px; }

.reviews-label { padding-top: 80px; }
.reviews__subtitle { margin-top: 30px; padding-bottom: 80px; font-size: 32px; }

.reviews__card {
width: 599px;
height: 599px;
border-radius: 48px;
padding: 44px 40px;
}

.reviews__card::after {
border-radius: 47px;
inset: 1px;
}

.reviews__inner { margin-top: 28px; }

.reviews__avatar { width: 144px; height: 144px; }
.reviews__decor { width: 184px; }

.reviews__quote-icon { width: 68px; height: 68px; margin-bottom: 24px; }

.reviews__text { font-size: 29px; }

.reviews__author { margin-top: 33px; gap: 25px; }
.reviews__author-info { gap: 10px; }
.reviews__author-name { font-size: 29px; }
.reviews__author-role { font-size: 24px; }

.reviews__verified { gap: 12px; }
.reviews__verified-icon { width: 40px; height: 40px; }
.reviews__verified-text { font-size: 24px; }

.reviews__slider { max-width: 599px; min-height: 599px; }

.reviews__switcher { gap: 36px; margin-top: 64px; margin-bottom: 100px; }
.reviews__arrow { width: 95px; height: 95px; border-radius: 100px; }
.reviews__arrow img { width: 44px; height: 44px; }

.reviews__dots { gap: 18px; }
.dot { width: 20px; height: 20px; }

.fade-on-scroll { transform: translateY(51px); filter: blur(13px); }
}
/* ======================================================
   18. FOOTER — MOBILE v1 (PORT FROM TABLET)
   Viewport 320px / Container 300px
   ====================================================== */

.footer {
  background: #1D1D1D;
  padding-bottom: 20px;
}

.footer-container {
  width: 300px;
  margin: 0 auto;
}

/* ===============================
   TYPOGRAPHY – MOBILE (320px)
   =============================== */

h1 {
  font-size: 30px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.25;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

h4 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h4 strong {
  font-weight: 600;
}

h5 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

h6 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-transform: capitalize;
}

/* TITLE */
.footer-title {
  text-align: center;
  margin: 36px 0;
  color: #fff;
}

/* MAP */
.footer-map-wrapper {
  width: 300px;
  height: 180px;
  margin: 0 auto 36px;
  border-radius: 12px;
  overflow: hidden;
}

.footer-map-wrapper a,
.map-img {
  width: 100%;
  height: 100%;
  display: block;
}


.map-img {
  object-fit: cover;
}

/* TYPO (existing classes, sizes adapted) */
.footer-section-title {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  align-items: center;
  display: flex;
}

.footer-text {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.9);
}

/* LOGO */
.footer-logo-line {
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer-logo {
  width: 96px;
  height: 33px;
}

.footer-logo-text {
  color: #fff;
}

/* CONTACTS */
.footer-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.footer-line--copy {
  justify-content: space-between;
  align-items: center;
}

.footer-line-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.footer-icon {
  width: 28px;
  height: 28px;
}

.footer-text {
  min-width: 0;
}

.footer-text .lang-pl,
.footer-text .lang-ua {
  display: inline;
}

/* COPY BUTTON */
.footer-copy-btn {
  height: 34px;
  padding: 7px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

.footer-copy-btn:hover {
  background-color: #ffffff;
  color: #1D1D1D;
  border-color: #ffffff;
  box-shadow: inset 0 0 0 1px #1D1D1D;
  transform: translateY(-1px);
}

.footer-copy-btn:active {
  transform: scale(0.98);
  color: #1D1D1D;
  background-color: #B1F844;
  border-color: #B1F844;
  box-shadow: inset 0 0 0 1px #1D1D1D;
}

.footer-copy-btn.copied {
  background: #B1F844;
  color: #1D1D1D;
  border-color: #B1F844;
  box-shadow: inset 0 0 0 1px #1D1D1D;
}

/* CTA + SOCIALS (mobile stacking, consultation below socials) */
.footer_wrap-socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 26px;
  gap: 18px;
}

.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.footer-social-icons {
  display: flex;
  gap: 12px;
}

.footer-social-icons img {
  width: 32px;
  height: 32px;
  opacity: 1;
  transform: none;
}

/* consult button wrapper stays as-is, just keeps inside 300 */
.consult-link {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

/* RIGHT PART */
.footer-right {
  padding-top: 24px;
}

.footer-right > .footer-section-title {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* Blocks with data + Kopiuj */
.footer-right-block {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 12px;
  gap: 12px;
}

.footer-right-info {
  min-width: 0;
}

/* Payment */
.footer-payment {
  margin-top: 30px;
  text-align: center;
}

.footer-payment .footer-section-title {
  display: flex;
  justify-content: center;
}

.footer-payment-logos {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.footer-payment-logos img {
  height: 26px;
}

/* Divider */
.footer-divider {
  width: 300px;
  height: 1px;
  margin: 36px auto;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

.footer-divider_down {
  width: 300px;
  height: 1px;
  margin: 36px auto 18px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

/* PILL */
.footer-pill-wrapper {
  display: flex;
  justify-content: center;
  margin: 28px 0 22px;
}

.footer-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 44px;
  padding: 0 18px;
  background: #262626;
  border-radius: 48px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #ffffff;
  white-space: nowrap;
}

.footer-pill__text {
  display: flex;
  align-items: center;
}

.footer-pill__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ACE238;
}

/* NAV LINKS (2 columns x 4) */
.footer-navigation__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 300px;
  margin: 0 auto 28px;
}

.footer-navigation__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 10px;
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  color: #f2f2f2;
  text-decoration: none;
  text-align: center;
  transition: transform 0.25s ease,
              background-color 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease;
}

.footer-navigation__btn:hover {
  transform: translateY(-2px);
  background-color: #ace238;
  border-color: #ace238;
  color: #0e0e0e;
}

/* LEGAL (stacked) */
.footer-legal {
  width: 300px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: "Poppins", sans-serif;
  text-align: center;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
  width: 300px;
}

.footer-legal-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-legal-center {
  max-width: 300px;
}

.footer-legal h6 {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.4);
}

/* LINKS */
.footer-legal a {
  color: #ace238;
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-legal a:hover {
  color: #ffffff;
}

/* AUTHOR */
.kontar-author_link {
  justify-content: center;
  display: flex;
}

.kontar-author {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  margin: 10px auto;
  font-family: "Poppins", sans-serif;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.kontar-author a {
  color: #ACE238;
  margin-left: 4px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.kontar-author a:hover {
  color: #fff;
}

/* ============================= */
/*     FOOTER APPEAR ANIMATION  */
/* ============================= */

.footer-animate {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  will-change: opacity, transform;
}

.footer-animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

.footer-animate.delay-1 { transition-delay: 0.1s; }
.footer-animate.delay-2 { transition-delay: 0.2s; }
.footer-animate.delay-3 { transition-delay: 0.3s; }
.footer-animate.delay-4 { transition-delay: 0.4s; }

/* PILL ANIMATION (single definition, no duplicates) */
.footer-pill {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  will-change: opacity, transform;
}

.footer-pill.in-view {
  opacity: 1;
  transform: translateY(0);
}

.footer-copy-btn.is-copied {
  background-color: #8FFF4D;
  color: #0E0E0E;
}

/* ======================================================
   18. FOOTER — MOBILE PATCH
   Copy buttons full width (EMAIL + BANK + NIP + REGON)
   ====================================================== */

/* EMAIL line: keep same behaviour */
.footer-line--copy {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.footer-line--copy .footer-line-left {
  width: 100%;
}

.footer-line--copy .footer-copy-btn {
  width: 100%;
  height: 40px;
}

/* RIGHT BLOCKS: same behaviour as email */
.footer-right-block {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.footer-right-block .footer-copy-btn {
  width: 100%;
  height: 40px;
}

/* ======================================================
   18. FOOTER — MOBILE PATCH (LOGO + TEXT POSITION)
   ====================================================== */

.footer-logo-line {
  align-items: flex-start;
}

.footer-logo-text {
  text-align: left;
}
@media (min-width: 360px) {
h1 { font-size: 34px; }
h2 { font-size: 27px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }

.footer { padding-bottom: 23px; }
.footer-container { width: 338px; }

.footer-title { margin: 41px 0; }

.footer-map-wrapper {
width: 338px;
height: 203px;
margin: 0 auto 41px;
border-radius: 14px;
}

.footer-section-title { font-size: 18px; }
.footer-text { font-size: 16px; }

.footer-logo-line { gap: 45px; }
.footer-logo { width: 108px; height: 37px; }

.footer-line { gap: 14px; margin-top: 16px; }
.footer-icon { width: 32px; height: 32px; }

.footer-copy-btn {
height: 38px;
padding: 8px 14px;
border-radius: 7px;
}

.footer_wrap-socials { margin-top: 29px; gap: 20px; }
.footer-socials { gap: 14px; }
.footer-social-icons { gap: 14px; }
.footer-social-icons img { width: 36px; height: 36px; }

.footer-right { padding-top: 27px; }
.footer-right-block { margin-top: 14px; gap: 14px; }

.footer-payment { margin-top: 34px; }
.footer-payment-logos { gap: 11px; margin-top: 16px; }
.footer-payment-logos img { height: 29px; }

.footer-divider {
width: 338px;
height: 1px;
margin: 41px auto;
border-radius: 2px;
}

.footer-divider_down {
width: 338px;
height: 1px;
margin: 41px auto 20px;
border-radius: 2px;
}

.footer-pill-wrapper { margin: 32px 0 25px; }
.footer-pill {
gap: 16px;
height: 50px;
padding: 0 20px;
border-radius: 54px;
font-size: 18px;
}
.footer-pill__dot { width: 11px; height: 11px; }

.footer-navigation__links {
width: 338px;
gap: 14px;
margin: 0 auto 32px;
}

.footer-navigation__btn {
padding: 14px 11px;
border-radius: 11px;
}

.footer-legal {
width: 338px;
margin: 0 auto 11px;
gap: 16px;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
width: 338px;
}

.footer-legal-center { max-width: 338px; }

.footer-legal h6 {
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.4px;
}

.kontar-author {
width: 338px;
margin: 11px auto;
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.4px;
}

.footer-animate { transform: translateY(27px); }

.footer-line--copy .footer-copy-btn { height: 45px; }
.footer-right-block .footer-copy-btn { height: 45px; }
}

@media (min-width: 390px) {
h1 { font-size: 37px; }
h2 { font-size: 29px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 17px; }
h6 { font-size: 16px; }

.footer { padding-bottom: 24px; }
.footer-container { width: 366px; }

.footer-title { margin: 44px 0; }

.footer-map-wrapper {
width: 366px;
height: 220px;
margin: 0 auto 44px;
border-radius: 15px;
}

.footer-section-title { font-size: 20px; }
.footer-text { font-size: 17px; }

.footer-logo-line { gap: 49px; }
.footer-logo { width: 117px; height: 40px; }

.footer-line { gap: 15px; margin-top: 17px; }
.footer-icon { width: 34px; height: 34px; }

.footer-copy-btn {
height: 41px;
padding: 9px 15px;
border-radius: 7px;
}

.footer_wrap-socials { margin-top: 32px; gap: 22px; }
.footer-socials { gap: 15px; }
.footer-social-icons { gap: 15px; }
.footer-social-icons img { width: 39px; height: 39px; }

.footer-right { padding-top: 29px; }
.footer-right-block { margin-top: 15px; gap: 15px; }

.footer-payment { margin-top: 37px; }
.footer-payment-logos { gap: 12px; margin-top: 17px; }
.footer-payment-logos img { height: 31px; }

.footer-divider {
width: 366px;
margin: 44px auto;
border-radius: 2px;
}

.footer-divider_down {
width: 366px;
margin: 44px auto 22px;
border-radius: 2px;
}

.footer-pill-wrapper { margin: 34px 0 27px; }
.footer-pill {
gap: 17px;
height: 54px;
padding: 0 22px;
border-radius: 58px;
font-size: 20px;
}
.footer-pill__dot { width: 12px; height: 12px; }

.footer-navigation__links {
width: 366px;
gap: 15px;
margin: 0 auto 34px;
}

.footer-navigation__btn {
padding: 15px 12px;
border-radius: 12px;
}

.footer-legal {
width: 366px;
margin: 0 auto 12px;
gap: 17px;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
width: 366px;
}

.footer-legal-center { max-width: 366px; }

.footer-legal h6 {
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.4px;
}

.kontar-author {
width: 366px;
margin: 12px auto;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.4px;
}

.footer-animate { transform: translateY(29px); }

.footer-line--copy .footer-copy-btn { height: 48px; }
.footer-right-block .footer-copy-btn { height: 48px; }
}

@media (min-width: 412px) {
h1 { font-size: 39px; }
h2 { font-size: 31px; }
h3 { font-size: 26px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 17px; }

.footer { padding-bottom: 26px; }
.footer-container { width: 386px; }

.footer-title { margin: 47px 0; }

.footer-map-wrapper {
width: 386px;
height: 232px;
margin: 0 auto 47px;
border-radius: 15px;
}

.footer-section-title { font-size: 21px; }
.footer-text { font-size: 18px; }

.footer-logo-line { gap: 52px; }
.footer-logo { width: 123px; height: 42px; }

.footer-line { gap: 16px; margin-top: 18px; }
.footer-icon { width: 36px; height: 36px; }

.footer-copy-btn {
height: 44px;
padding: 10px 16px;
border-radius: 8px;
}

.footer_wrap-socials { margin-top: 34px; gap: 23px; }
.footer-socials { gap: 16px; }
.footer-social-icons { gap: 16px; }
.footer-social-icons img { width: 41px; height: 41px; }

.footer-right { padding-top: 31px; }
.footer-right-block { margin-top: 16px; gap: 16px; }

.footer-payment { margin-top: 39px; }
.footer-payment-logos { gap: 13px; margin-top: 18px; }
.footer-payment-logos img { height: 32px; }

.footer-divider {
width: 386px;
margin: 47px auto;
border-radius: 2px;
}

.footer-divider_down {
width: 386px;
margin: 47px auto 23px;
border-radius: 2px;
}

.footer-pill-wrapper { margin: 36px 0 29px; }
.footer-pill {
gap: 18px;
height: 56px;
padding: 0 23px;
border-radius: 60px;
font-size: 21px;
}
.footer-pill__dot { width: 13px; height: 13px; }

.footer-navigation__links {
width: 386px;
gap: 16px;
margin: 0 auto 36px;
}

.footer-navigation__btn {
padding: 16px 13px;
border-radius: 13px;
}

.footer-legal {
width: 386px;
margin: 0 auto 13px;
gap: 18px;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
width: 386px;
}

.footer-legal-center { max-width: 386px; }

.footer-legal h6 {
font-size: 17px;
line-height: 1.6;
letter-spacing: 0.4px;
}

.kontar-author {
width: 386px;
margin: 13px auto;
font-size: 17px;
line-height: 1.6;
letter-spacing: 0.4px;
}

.footer-animate { transform: translateY(31px); }

.footer-line--copy .footer-copy-btn { height: 52px; }
.footer-right-block .footer-copy-btn { height: 52px; }
}

@media (min-width: 428px) {
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 27px; }
h4 { font-size: 21px; }
h5 { font-size: 19px; }
h6 { font-size: 17px; }

.footer { padding-bottom: 27px; }
.footer-container { width: 401px; }

.footer-title { margin: 49px 0; }

.footer-map-wrapper {
width: 401px;
height: 241px;
margin: 0 auto 49px;
border-radius: 16px;
}

.footer-section-title { font-size: 21px; }
.footer-text { font-size: 19px; }

.footer-logo-line { gap: 54px; }
.footer-logo { width: 128px; height: 44px; }

.footer-line { gap: 17px; margin-top: 19px; }
.footer-icon { width: 37px; height: 37px; }

.footer-copy-btn {
height: 46px;
padding: 10px 17px;
border-radius: 8px;
}

.footer_wrap-socials { margin-top: 35px; gap: 24px; }
.footer-socials { gap: 17px; }
.footer-social-icons { gap: 17px; }
.footer-social-icons img { width: 43px; height: 43px; }

.footer-right { padding-top: 32px; }
.footer-right-block { margin-top: 17px; gap: 17px; }

.footer-payment { margin-top: 41px; }
.footer-payment-logos { gap: 13px; margin-top: 19px; }
.footer-payment-logos img { height: 33px; }

.footer-divider {
width: 401px;
margin: 49px auto;
border-radius: 2px;
}

.footer-divider_down {
width: 401px;
margin: 49px auto 24px;
border-radius: 2px;
}

.footer-pill-wrapper { margin: 38px 0 30px; }
.footer-pill {
gap: 19px;
height: 58px;
padding: 0 24px;
border-radius: 62px;
font-size: 21px;
}
.footer-pill__dot { width: 13px; height: 13px; }

.footer-navigation__links {
width: 401px;
gap: 17px;
margin: 0 auto 38px;
}

.footer-navigation__btn {
padding: 17px 13px;
border-radius: 13px;
}

.footer-legal {
width: 401px;
margin: 0 auto 13px;
gap: 19px;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
width: 401px;
}

.footer-legal-center { max-width: 401px; }

.footer-legal h6 {
font-size: 17px;
line-height: 1.6;
letter-spacing: 0.4px;
}

.kontar-author {
width: 401px;
margin: 13px auto;
font-size: 17px;
line-height: 1.6;
letter-spacing: 0.4px;
}

.footer-animate { transform: translateY(32px); }

.footer-line--copy .footer-copy-btn { height: 54px; }
.footer-right-block .footer-copy-btn { height: 54px; }
}

@media (min-width: 480px) {
h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 21px; }
h6 { font-size: 20px; }

.footer { padding-bottom: 30px; }
.footer-container { width: 450px; }

.footer-title { margin: 55px 0; }

.footer-map-wrapper {
width: 450px;
height: 270px;
margin: 0 auto 55px;
border-radius: 18px;
}

.footer-section-title { font-size: 24px; }
.footer-text { font-size: 21px; }

.footer-logo-line { gap: 60px; }
.footer-logo { width: 144px; height: 50px; }

.footer-line { gap: 19px; margin-top: 21px; }
.footer-icon { width: 42px; height: 42px; }

.footer-copy-btn {
height: 52px;
padding: 12px 19px;
border-radius: 9px;
}

.footer_wrap-socials { margin-top: 39px; gap: 27px; }
.footer-socials { gap: 19px; }
.footer-social-icons { gap: 19px; }
.footer-social-icons img { width: 48px; height: 48px; }

.footer-right { padding-top: 36px; }
.footer-right-block { margin-top: 19px; gap: 19px; }

.footer-payment { margin-top: 45px; }
.footer-payment-logos { gap: 15px; margin-top: 21px; }
.footer-payment-logos img { height: 37px; }

.footer-divider {
width: 450px;
margin: 55px auto;
border-radius: 2px;
}

.footer-divider_down {
width: 450px;
margin: 55px auto 27px;
border-radius: 2px;
}

.footer-pill-wrapper { margin: 43px 0 34px; }
.footer-pill {
gap: 21px;
height: 65px;
padding: 0 27px;
border-radius: 69px;
font-size: 24px;
}
.footer-pill__dot { width: 15px; height: 15px; }

.footer-navigation__links {
width: 450px;
gap: 19px;
margin: 0 auto 43px;
}

.footer-navigation__btn {
padding: 19px 15px;
border-radius: 15px;
}

.footer-legal {
width: 450px;
margin: 0 auto 15px;
gap: 21px;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
width: 450px;
}

.footer-legal-center { max-width: 450px; }

.footer-legal h6 {
font-size: 20px;
line-height: 1.6;
letter-spacing: 0.5px;
}

.kontar-author {
width: 450px;
margin: 15px auto;
font-size: 20px;
line-height: 1.6;
letter-spacing: 0.5px;
}

.footer-animate { transform: translateY(36px); }

.footer-line--copy .footer-copy-btn { height: 60px; }
.footer-right-block .footer-copy-btn { height: 60px; }
}

@media (min-width: 540px) {
h1 { font-size: 51px; }
h2 { font-size: 41px; }
h3 { font-size: 34px; }
h4 { font-size: 27px; }
h5 { font-size: 24px; }
h6 { font-size: 22px; }

.footer { padding-bottom: 34px; }
.footer-container { width: 506px; }

.footer-title { margin: 62px 0; }

.footer-map-wrapper {
width: 506px;
height: 304px;
margin: 0 auto 62px;
border-radius: 20px;
}

.footer-section-title { font-size: 27px; }
.footer-text { font-size: 24px; }

.footer-logo-line { gap: 68px; }
.footer-logo { width: 162px; height: 56px; }

.footer-line { gap: 21px; margin-top: 24px; }
.footer-icon { width: 47px; height: 47px; }

.footer-copy-btn {
height: 58px;
padding: 14px 22px;
border-radius: 10px;
}

.footer_wrap-socials { margin-top: 44px; gap: 31px; }
.footer-socials { gap: 21px; }
.footer-social-icons { gap: 21px; }
.footer-social-icons img { width: 54px; height: 54px; }

.footer-right { padding-top: 40px; }
.footer-right-block { margin-top: 22px; gap: 22px; }

.footer-payment { margin-top: 51px; }
.footer-payment-logos { gap: 17px; margin-top: 24px; }
.footer-payment-logos img { height: 42px; }

.footer-divider {
width: 506px;
margin: 62px auto;
border-radius: 2px;
}

.footer-divider_down {
width: 506px;
margin: 62px auto 31px;
border-radius: 2px;
}

.footer-pill-wrapper { margin: 48px 0 38px; }
.footer-pill {
gap: 24px;
height: 73px;
padding: 0 30px;
border-radius: 78px;
font-size: 27px;
}
.footer-pill__dot { width: 17px; height: 17px; }

.footer-navigation__links {
width: 506px;
gap: 22px;
margin: 0 auto 48px;
}

.footer-navigation__btn {
padding: 22px 17px;
border-radius: 17px;
}

.footer-legal {
width: 506px;
margin: 0 auto 17px;
gap: 23px;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
width: 506px;
}

.footer-legal-center { max-width: 506px; }

.footer-legal h6 {
font-size: 22px;
line-height: 1.6;
letter-spacing: 0.6px;
}

.kontar-author {
width: 506px;
margin: 17px auto;
font-size: 22px;
line-height: 1.6;
letter-spacing: 0.6px;
}

.footer-animate { transform: translateY(40px); }

.footer-line--copy .footer-copy-btn { height: 68px; }
.footer-right-block .footer-copy-btn { height: 68px; }
}

@media (min-width: 600px) {
h1 { font-size: 56px; }
h2 { font-size: 45px; }
h3 { font-size: 38px; }
h4 { font-size: 30px; }
h5 { font-size: 26px; }
h6 { font-size: 24px; }

.footer { padding-bottom: 38px; }
.footer-container { width: 563px; }

.footer-title { margin: 69px 0; }

.footer-map-wrapper {
width: 563px;
height: 338px;
margin: 0 auto 69px;
border-radius: 23px;
}

.footer-section-title { font-size: 30px; }
.footer-text { font-size: 26px; }

.footer-logo-line { gap: 75px; }
.footer-logo { width: 180px; height: 62px; }

.footer-line { gap: 23px; margin-top: 26px; }
.footer-icon { width: 53px; height: 53px; }

.footer-copy-btn {
height: 65px;
padding: 15px 24px;
border-radius: 11px;
}

.footer_wrap-socials { margin-top: 49px; gap: 34px; }
.footer-socials { gap: 23px; }
.footer-social-icons { gap: 23px; }
.footer-social-icons img { width: 60px; height: 60px; }

.footer-right { padding-top: 45px; }
.footer-right-block { margin-top: 24px; gap: 24px; }

.footer-payment { margin-top: 56px; }
.footer-payment-logos { gap: 19px; margin-top: 26px; }
.footer-payment-logos img { height: 46px; }

.footer-divider {
width: 563px;
margin: 69px auto;
border-radius: 2px;
}

.footer-divider_down {
width: 563px;
margin: 69px auto 34px;
border-radius: 2px;
}

.footer-pill-wrapper { margin: 53px 0 42px; }
.footer-pill {
gap: 26px;
height: 81px;
padding: 0 34px;
border-radius: 86px;
font-size: 30px;
}
.footer-pill__dot { width: 19px; height: 19px; }

.footer-navigation__links {
width: 563px;
gap: 24px;
margin: 0 auto 53px;
}

.footer-navigation__btn {
padding: 24px 19px;
border-radius: 19px;
}

.footer-legal {
width: 563px;
margin: 0 auto 19px;
gap: 26px;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
width: 563px;
}

.footer-legal-center { max-width: 563px; }

.footer-legal h6 {
font-size: 24px;
line-height: 1.6;
letter-spacing: 0.6px;
}

.kontar-author {
width: 563px;
margin: 19px auto;
font-size: 24px;
line-height: 1.6;
letter-spacing: 0.6px;
}

.footer-animate { transform: translateY(45px); }

.footer-line--copy .footer-copy-btn { height: 75px; }
.footer-right-block .footer-copy-btn { height: 75px; }
}

@media (min-width: 639px) {
h1 { font-size: 60px; }
h2 { font-size: 48px; }
h3 { font-size: 40px; }
h4 { font-size: 32px; }
h5 { font-size: 28px; }
h6 { font-size: 26px; }

.footer { padding-bottom: 40px; }
.footer-container { width: 599px; }

.footer-title { margin: 74px 0; }

.footer-map-wrapper {
width: 599px;
height: 359px;
margin: 0 auto 74px;
border-radius: 24px;
}

.footer-section-title { font-size: 32px; }
.footer-text { font-size: 28px; }

.footer-logo-line { gap: 80px; }
.footer-logo { width: 192px; height: 66px; }

.footer-line { gap: 24px; margin-top: 28px; }
.footer-icon { width: 56px; height: 56px; }

.footer-copy-btn {
height: 69px;
padding: 16px 25px;
border-radius: 12px;
}

.footer_wrap-socials { margin-top: 52px; gap: 36px; }
.footer-socials { gap: 24px; }
.footer-social-icons { gap: 24px; }
.footer-social-icons img { width: 64px; height: 64px; }

.footer-right { padding-top: 48px; }
.footer-right-block { margin-top: 25px; gap: 25px; }

.footer-payment { margin-top: 60px; }
.footer-payment-logos { gap: 20px; margin-top: 28px; }
.footer-payment-logos img { height: 49px; }

.footer-divider {
width: 599px;
margin: 74px auto;
border-radius: 2px;
}

.footer-divider_down {
width: 599px;
margin: 74px auto 36px;
border-radius: 2px;
}

.footer-pill-wrapper { margin: 57px 0 45px; }
.footer-pill {
gap: 28px;
height: 86px;
padding: 0 36px;
border-radius: 92px;
font-size: 32px;
}
.footer-pill__dot { width: 20px; height: 20px; }

.footer-navigation__links {
width: 599px;
gap: 25px;
margin: 0 auto 57px;
}

.footer-navigation__btn {
padding: 26px 20px;
border-radius: 20px;
}

.footer-legal {
width: 599px;
margin: 0 auto 20px;
gap: 28px;
}

.footer-legal-left,
.footer-legal-center,
.footer-legal-right {
width: 599px;
}

.footer-legal-center { max-width: 599px; }

.footer-legal h6 {
font-size: 26px;
line-height: 1.6;
letter-spacing: 0.7px;
}

.kontar-author {
width: 599px;
margin: 20px auto;
font-size: 26px;
line-height: 1.6;
letter-spacing: 0.7px;
}

.footer-animate { transform: translateY(48px); }

.footer-line--copy .footer-copy-btn { height: 80px; }
.footer-right-block .footer-copy-btn { height: 80px; }
}




/* =========================================
   GLOBAL
========================================= */

.cookie {
 background-color: #121212;
  padding: 40px 0;
}

/* Скрытие языковых версий */
body.lang-pl .lang-ua { display: none; }
body.lang-ua .lang-pl { display: none; }

/* Белый текст для основных элементов в блоке cookies */
.cookie-title,
.cookie-sup_title,
.cookie-section-title,
.cookie-content_text,
.cookie-subtitle,
.cookie-text {
  color: #FFFFFF;
}

/* =========================================
   HEADER
========================================= */

.cookie-header {
  width: 100%;
}

.cookie-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cookie-logo {
  width: 128px;
  height: 60px;
}

.cookie-header__controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ======= КНОПКА ВОЗВРАТА ======= */

.cookie-back {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 15px auto;
  padding: 0 24px;
  height: 56px;

  background: #FFFFFF;
  color: #121212;

  border: none;
  border-radius: 8px;

  cursor: pointer;
  white-space: nowrap;

  font-size: 16px;
  font-weight: 600;
}

.cookie-back img {
  width: 20px;
  height: 20px;
}

.cookie-back_text {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #121212;
}

/* =========================================
   CONTENT HEADER
========================================= */

.cookie-content {
  margin-top: 50px;
  display: flex;
  gap: 20px;
}

.cookie-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cookie-content-wrap h4 {
  margin-top: 10px;
}

.cookie-sup_title {
  margin-top: 20px;
}

.cookie-content_text {
  margin-top: 10px;
}

.cookie-icon {
  width: 50px;
  height: 50px;
}

/* =========================================
   SECTIONS / TEXT
========================================= */

.cookie-section {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cookie-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.cookie-text {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

/* =========================================
   LISTS (для <ul class="cookie-list">)
========================================= */

.cookie-list {
  margin-top: 20px;
  margin-bottom: 10px;
  padding-left: 20px;
}

.cookie-list li {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #FFFFFF;

  list-style: disc;
  margin-bottom: 8px;
}