/* ===============================
   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;
}

/* ===============================
   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;
}

.hero_filters_left,
.hero_filters_right {
  display: flex;
  align-items: center;
  justify-content: center;

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

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

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

  cursor: pointer;
  transition: background-color 0.1s ease;
}

.hero_filter_text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1D;
  transition: color 0.1s ease;
}

.hero_filters_left:hover,
.hero_filters_right:hover {
  background: #262626;
}

.hero_filters_left:hover .hero_filter_text,
.hero_filters_right:hover .hero_filter_text {
  color: #ffffff;
}

/* только правый фильтр меняет цвет точки */
.hero_filters_right img {
  transition: filter .15s ease;
}

.hero_filters_right:hover img {
  filter: invert(86%) sepia(28%) saturate(698%) hue-rotate(36deg) brightness(98%) contrast(92%);
}


/* SVG PRELOAD FIX */
body::after {
  content: url("assets/icons/01-hero/SVG/Ellipse green.svg");
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* MOBILE INSTANT TOUCH */
@media (hover: none) and (pointer: coarse) {
  .hero_filters_left,
  .hero_filters_right,
  .hero_filter_text {
    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;
  height: 44px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 35px;
  background: #F9F7F7;
  transition: background-color 0.3s ease;
}

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

.hero-t__filter-text {
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1D;
}

.hero-t__filter:hover {
  background: #262626;
  cursor: pointer;
}

.hero-t__filter:hover .hero-t__filter-text {
  color: #fff;
}

.hero-t__filter--right:hover img {
  content: url("assets/icons/01-hero/SVG/Ellipse green.svg");
}

/* ========== TITLE ========== */

.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;
  
}


/* ===============================
   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);
  }
}




















/* 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;
}


/* ============================================================
   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;

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

.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 (manual control) ===== */
.about-image {
  width: 300px;
  height: 284px;

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

.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;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

.about-text {
  font-family: "Poppins";
  font-size: 14px;
  font-weight: 400;
  color: #313131;
  line-height: 1.6;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

.about-subtitle {
  font-family: "Open Sans";
  font-weight: 600;
  color: #313131;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

/* ===== 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;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s ease, transform .45s ease;
}

/* ===== 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;
}

/* ===== ACTIVE / VISIBLE STATES ===== */
.about-section.is-active .about-label {
  opacity: 1;
  transform: translateX(0);
}

.about-section.is-active .about-image {
  opacity: 1;
  transform: translateX(0);
  transition-delay: .15s;
}

.about-section.is-active .about-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s;
}

.about-section.is-active .about-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .45s;
}

.about-section.is-active .about-subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .6s;
}

.about-section.is-active .about-item {
  opacity: 1;
  transform: translateY(0);
}

.about-section.is-active .about-item:nth-child(1) { transition-delay: .75s; }
.about-section.is-active .about-item:nth-child(2) { transition-delay: .85s; }
.about-section.is-active .about-item:nth-child(3) { transition-delay: .95s; }
.about-section.is-active .about-item:nth-child(4) { transition-delay: 1.05s; }

.about-title.is-visible,
.about-text.is-visible,
.about-subtitle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 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; }
}

/* END ABOUT / O NAS */


/* 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;
}
}
/* ===============================
   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 (оставлен как в tablet) */
.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: 22-px;
}

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

/* 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-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;
}
}








/* ===============================
   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;
}

/* ===============================
   SECTION: Cennik (MOBILE)
   =============================== */

.cennik {
  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;
}

.cennik .container {
  width: 300px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* =============================
   CENNIK PILL
   ============================= */

.cennik-section-pill-wrapper {
  display: flex;
  justify-content: center;
}

.cennik-section-pill-cennik {
  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;
}

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

.cennik-section-pill-cennik {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.cennik-section-pill-cennik.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* =============================
   PRICING CATEGORIES
   ============================= */

.pricing-categories--tablet {
  display: flex;
  justify-content: center;
  padding-top: 26px;
  color: #ffffff;
}

.pricing-categories__list {
  display: flex;
  gap: 22px;
}

.pricing-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;
}

.pricing-category::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.pricing-category.is-active[data-category="internet"]::after {
  background-color: #28E1E7;
}

.pricing-category.is-active[data-category="it"]::after {
  background-color: #ACE238;
}

.pricing-category.is-active[data-category="monitoring"]::after {
  background-color: #ffffff;
}

/* =============================
   CENNIK TITLE
   ============================= */

.cennik-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.cennik-title_text {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.3;
  text-align: center;
}

.cennik-title-ikon {
  width: 26px;
  height: 26px;
}

/* =============================
   CENNIK INTERNET ONLY
   ============================= */

.cennik-internet-full {
  display: none;
}

.cennik-internet-full.is-active {
  display: block;
}

/* =============================
   INTERNET TYPE SWITCHER
   ============================= */

.cennik-internet-type-title {
    color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

/* =============================
   INTERNET TYPE SWITCHER
   ============================= */

/* =============================
   INTERNET TYPE SWITCHER
   ============================= */

.cennik-internet-type-switcher {
  width: 300px;
  margin: 10px auto 0;
margin-bottom: 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);
}


/* кнопки */
.cennik-internet-type-switcher button {
  background: #1E1E1E;
  border: none;

  padding: 10px 6px;

  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}

/* внутренние разделители */
.cennik-internet-type-switcher button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* активная кнопка */
.cennik-internet-type-switcher button.is-active {
  background: #28E1E7;
  color: #ffffff;
}



/* =============================
   INTERNET SECTION TITLES
   ============================= */

.internet-price-title_wrap {
  width: 300px;
  
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.internet-price-title {
  margin: 0;
}

.internet-price-title_wrap img {
  width: 30px;
  height: 30px;
}

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

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

.subhero-cennik[data-internet-type] {
  display: none;
}

.subhero-cennik[data-internet-type].is-active {
  display: block;
}

.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;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.subhero-cennik__icon-one {
  width: 16px;
  height: 16px;
  display: block;
}

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

/* ===============================
   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;
}

/* ===============================
   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;
}

/* ===============================
   INTERNET TYPE BLOCKS VISIBILITY
   =============================== */

.subhero-cennik[data-internet-type] {
  display: none;
}

.subhero-cennik.is-active {
  display: block;
}

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

.subhero-cennik .cennik-card {
  margin-bottom: 16px;
}

.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;
}

.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;
}

.cennik-card__value--term {
  display: block;
  text-align: right;
}

.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 {
  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;
}

/* ============================================================
   HERO CAROUSEL — TOUCH FIX (ALLOW VERTICAL SCROLL)
   BEM ориентир: #video_mask-section .cards-row
============================================================ */

#video_mask-section .cards-row {
  touch-action: pan-y;
}


/* ===============================
   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;
}

/* ============================= */
/* IT TITLE (MOBILE 300px)       */
/* ============================= */

.it-price-table {
  width: 300px;
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}

.it-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 16px;
}

.it-title-text {
  max-width: 300px;
  margin: 0 auto;

  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;
}

/* ============================= */
/* IT TABLE (MOBILE 300px)       */
/* ============================= */

.it-price-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;
  color: #212121;

  align-items: center;
  box-sizing: border-box;
}

.it-price-header-right {
  text-align: center;
}

/* Rows */
.it-price-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;
}

.it-price-row-last {
  border-radius: 0 0 16px 16px;
}

/* Content */
.it-price-content {
  display: flex;
  align-items: center;
  gap: 22px;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.it-price-content img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Price */
.it-price-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;
}

/* Promo */
.it-price-promo {
  font-weight: 700;
}

/* =============================
   MONITORING — MOBILE (300px)
============================= */

.monitoring-price-table {
  width: 300px;
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}

/* TITLE */
.monitoring-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 16px;
}

.monitoring-title-text {
  max-width: 300px;
  margin: 0 auto;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  word-wrap: break-word;
  hyphens: auto;
}

/* GRID */
.monitoring-price-header,
.monitoring-price-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 82px;
}

/* HEADER */
.monitoring-price-header {
  height: 48px;
  padding: 0 14px;
  background: #ffffff;
  color: #111111;
  font-size: 11px;
  font-weight: 600;
  align-items: center;
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;

  /* ВОТ ЭТО СКЛЕИВАЕТ header С ТАБЛИЦЕЙ */
  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);

  /* Линия между header и первой строкой */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.monitoring-price-header-right {
  text-align: center;
}

/* ROW */
.monitoring-price-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;
}

/* чтобы не было “двойной” линии сразу после header */
.monitoring-price-header + .monitoring-price-row {
  border-top: 0;
}

.monitoring-price-row-last {
  border-radius: 0 0 16px 16px;
}

/* ICON + TEXT */
.monitoring-price-content {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  align-items: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

.monitoring-price-content img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

/* TYPE / FUNCTION */
.monitoring-price-type {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
}

/* PRICE */
.monitoring-price-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;
}

/* PROMO */
.monitoring-price-promo {
  font-weight: 700;
}



/* ======================================================
   CENNIK — TABLET: CATEGORIES + TABLE SWITCHING
====================================================== */


.cennik-internet-full,
.it-price-table,
.monitoring-price-table {
  display: none;
}

.cennik-internet-full.is-active,
.it-price-table.is-active,
.monitoring-price-table.is-active {
  display: block;
}
/* ---------- Optional smooth appearance ---------- */

.cennik-internet-full,
.it-price-table,
.monitoring-price-table {
  animation: cennikFade 0.35s ease;
}

@keyframes cennikFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ===============================
   SUBHERO — NORMAL FLOW FIX
   =============================== */

#subhero-section {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ===============================
   FIXED HEADER (ALWAYS)
=============================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateY(0);
  transition: transform 0.35s ease;
}

/* hide on scroll down */
.header--hidden {
  transform: translateY(-120%);
}

/* blur only on scroll up */
.header--blur .header__bg {
  opacity: 1;
}

/* ===============================
   HEADER SPACER (CRITICAL)
=============================== */

.header-spacer {
  height: 64px; /* высота хедера */
  width: 100%;
}

/* ===============================
   FULLSCREEN NAV FIX
=============================== */

.fullscreen-nav {
  pointer-events: none;
  opacity: 0;
}

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

/* ===============================
   SAFE CONTENT FLOW
=============================== */

section {
  position: relative;
  z-index: 1;
}

/* hero может быть сложным, но не влияет ниже */
.hero-section,
.video_mask-section {
  position: relative;
  z-index: 2;
}

@media (min-width: 360px) {
.cennik {
border-radius: 0 0 38px 38px;
padding-bottom: 56px;
}

.cennik .container {
width: 340px;
}

.cennik-section-pill-cennik {
gap: 16px;
padding: 0 24px;
height: 48px;
margin-top: 98px;
font-size: 17px;
}

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

.pricing-categories--tablet {
padding-top: 28px;
}

.pricing-categories__list {
gap: 24px;
}

.pricing-category {
font-size: 19px;
}

.cennik-title-wrap {
gap: 16px;
padding-top: 16px;
padding-bottom: 16px;
}

.cennik-title_text {
font-size: 15px;
}

.cennik-internet-type-title {
font-size: 17px;
}

.cennik-internet-type-switcher {
width: 340px;
margin: 12px auto 0;
margin-bottom: 16px;
border-radius: 13px;
}

.cennik-internet-type-switcher button {
padding: 11px 7px;
font-size: 13px;
}

.subhero-cennik {
width: 340px;
}

.subhero-cennik__tariff-row {
width: 340px;
margin-bottom: 12px;
}

.subhero-cennik__text {
margin-left: 12px;
font-size: 15px;
}

.subhero-cennik__icon-one {
width: 18px;
height: 18px;
}

.subhero-cennik__icon-two {
width: 26px;
height: 26px;
}

.cennik-card {
width: 340px;
border-radius: 18px;
}

.cennik-card__top {
height: 78px;
column-gap: 106px;
padding-left: 20px;
padding-right: 20px;
padding-top: 16px;
}

.cennik-card__badge {
font-size: 17px;
}

.cennik-card__title {
font-size: 17px;
}

.cennik-card__row {
min-height: 86px;
padding-top: 22px;
padding-bottom: 22px;
padding-left: 20px;
padding-right: 20px;
}

.cennik-card__label {
font-size: 17px;
}

.cennik-card__value {
font-size: 17px;
}

.cennik-card__value--price {
gap: 7px;
}

.promo {
padding: 11px 16px;
border-radius: 18px;
}

.it-price-table {
width: 340px;
}

.it-title-text {
max-width: 340px;
font-size: 19px;
}

.it-price-header {
grid-template-columns: 1fr 110px;
height: 52px;
padding: 0 16px;
font-size: 14px;
border-radius: 18px 18px 0 0;
}

.it-price-row {
grid-template-columns: 1fr 110px;
min-height: 94px;
padding: 14px 16px;
}

.it-price-content {
gap: 24px;
font-size: 14px;
}

.it-price-content img {
width: 24px;
height: 24px;
}

.it-price-value {
font-size: 14px;
padding-left: 10px;
}

.it-price-row-last {
border-radius: 0 0 18px 18px;
}

.monitoring-price-table {
width: 340px;
}

.monitoring-title-text {
max-width: 340px;
font-size: 19px;
}

.monitoring-price-header,
.monitoring-price-row {
grid-template-columns: 1.3fr 1fr 92px;
}

.monitoring-price-header {
height: 52px;
padding: 0 16px;
font-size: 12px;
border-radius: 18px 18px 0 0;
}

.monitoring-price-row {
min-height: 94px;
padding: 14px 16px;
}

.monitoring-price-content {
grid-template-columns: 24px 1fr;
column-gap: 12px;
font-size: 12px;
}

.monitoring-price-content img {
width: 24px;
height: 24px;
}

.monitoring-price-type {
font-size: 12px;
}

.monitoring-price-value {
font-size: 12px;
padding-left: 8px;
}

.monitoring-price-row-last {
border-radius: 0 0 18px 18px;
}
}

@media (min-width: 390px) {
.cennik {
border-radius: 0 0 40px 40px;
padding-bottom: 62px;
}

.cennik .container {
width: 370px;
}

.cennik-section-pill-cennik {
gap: 18px;
padding: 0 26px;
height: 52px;
margin-top: 106px;
font-size: 18px;
}

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

.pricing-categories--tablet {
padding-top: 30px;
}

.pricing-categories__list {
gap: 26px;
}

.pricing-category {
font-size: 20px;
}

.cennik-title_text {
font-size: 16px;
}

.cennik-internet-type-title {
font-size: 18px;
}

.cennik-internet-type-switcher {
width: 370px;
margin: 12px auto 0;
margin-bottom: 18px;
border-radius: 14px;
}

.cennik-internet-type-switcher button {
padding: 12px 8px;
font-size: 14px;
}

.subhero-cennik {
width: 370px;
}

.subhero-cennik__tariff-row {
width: 370px;
margin-bottom: 12px;
}

.subhero-cennik__text {
margin-left: 12px;
font-size: 16px;
}

.subhero-cennik__icon-one {
width: 18px;
height: 18px;
}

.subhero-cennik__icon-two {
width: 28px;
height: 28px;
}

.cennik-card {
width: 370px;
border-radius: 20px;
}

.cennik-card__top {
height: 84px;
column-gap: 118px;
padding-left: 22px;
padding-right: 22px;
padding-top: 18px;
}

.cennik-card__badge {
font-size: 18px;
}

.cennik-card__title {
font-size: 18px;
}

.cennik-card__row {
min-height: 92px;
padding-top: 24px;
padding-bottom: 24px;
padding-left: 22px;
padding-right: 22px;
}

.cennik-card__label {
font-size: 18px;
}

.cennik-card__value {
font-size: 18px;
}

.promo {
padding: 12px 18px;
border-radius: 20px;
}

.it-price-table {
width: 370px;
}

.it-title-text {
max-width: 370px;
font-size: 20px;
}

.it-price-header {
grid-template-columns: 1fr 120px;
height: 54px;
padding: 0 18px;
font-size: 15px;
border-radius: 20px 20px 0 0;
}

.it-price-row {
grid-template-columns: 1fr 120px;
min-height: 98px;
padding: 16px 18px;
}

.it-price-content {
gap: 26px;
font-size: 15px;
}

.it-price-content img {
width: 26px;
height: 26px;
}

.it-price-value {
font-size: 15px;
padding-left: 10px;
}

.it-price-row-last {
border-radius: 0 0 20px 20px;
}

.monitoring-price-table {
width: 370px;
}

.monitoring-title-text {
max-width: 370px;
font-size: 20px;
}

.monitoring-price-header,
.monitoring-price-row {
grid-template-columns: 1.3fr 1fr 100px;
}

.monitoring-price-header {
height: 54px;
padding: 0 18px;
font-size: 13px;
border-radius: 20px 20px 0 0;
}

.monitoring-price-row {
min-height: 98px;
padding: 16px 18px;
}

.monitoring-price-content {
grid-template-columns: 26px 1fr;
column-gap: 12px;
font-size: 13px;
}

.monitoring-price-content img {
width: 26px;
height: 26px;
}

.monitoring-price-type {
font-size: 13px;
}

.monitoring-price-value {
font-size: 13px;
padding-left: 8px;
}

.monitoring-price-row-last {
border-radius: 0 0 20px 20px;
}
}

@media (min-width: 412px) {
.cennik {
border-radius: 0 0 42px 42px;
padding-bottom: 68px;
}

.cennik .container {
width: 392px;
}

.cennik-section-pill-cennik {
gap: 18px;
padding: 0 28px;
height: 56px;
margin-top: 114px;
font-size: 19px;
}

.pricing-categories__list {
gap: 28px;
}

.pricing-category {
font-size: 21px;
}

.cennik-title-wrap {
gap: 18px;
padding-top: 18px;
padding-bottom: 18px;
}

.cennik-title_text {
font-size: 17px;
}

.cennik-internet-type-title {
font-size: 19px;
}

.cennik-internet-type-switcher {
width: 392px;
margin: 14px auto 0;
margin-bottom: 18px;
border-radius: 15px;
}

.cennik-internet-type-switcher button {
padding: 13px 8px;
font-size: 15px;
}

.subhero-cennik {
width: 392px;
}

.subhero-cennik__tariff-row {
width: 392px;
margin-bottom: 12px;
}

.subhero-cennik__text {
margin-left: 12px;
font-size: 17px;
}

.subhero-cennik__icon-one {
width: 19px;
height: 19px;
}

.subhero-cennik__icon-two {
width: 30px;
height: 30px;
}

.cennik-card {
width: 392px;
border-radius: 22px;
}

.cennik-card__top {
height: 90px;
column-gap: 126px;
padding-left: 24px;
padding-right: 24px;
padding-top: 20px;
}

.cennik-card__badge {
font-size: 19px;
}

.cennik-card__title {
font-size: 19px;
}

.cennik-card__row {
min-height: 98px;
padding-top: 26px;
padding-bottom: 26px;
padding-left: 24px;
padding-right: 24px;
}

.cennik-card__label {
font-size: 19px;
}

.cennik-card__value {
font-size: 19px;
}

.promo {
padding: 13px 20px;
border-radius: 22px;
}

.it-price-table {
width: 392px;
}

.it-title-text {
max-width: 392px;
font-size: 21px;
}

.it-price-header {
grid-template-columns: 1fr 128px;
height: 56px;
padding: 0 20px;
font-size: 16px;
border-radius: 22px 22px 0 0;
}

.it-price-row {
grid-template-columns: 1fr 128px;
min-height: 104px;
padding: 18px 20px;
}

.it-price-content {
gap: 28px;
font-size: 16px;
}

.it-price-content img {
width: 28px;
height: 28px;
}

.it-price-value {
font-size: 16px;
padding-left: 10px;
}

.it-price-row-last {
border-radius: 0 0 22px 22px;
}

.monitoring-price-table {
width: 392px;
}

.monitoring-title-text {
max-width: 392px;
font-size: 21px;
}

.monitoring-price-header,
.monitoring-price-row {
grid-template-columns: 1.3fr 1fr 110px;
}

.monitoring-price-header {
height: 56px;
padding: 0 20px;
font-size: 14px;
border-radius: 22px 22px 0 0;
}

.monitoring-price-row {
min-height: 104px;
padding: 18px 20px;
}

.monitoring-price-content {
grid-template-columns: 28px 1fr;
column-gap: 12px;
font-size: 14px;
}

.monitoring-price-content img {
width: 28px;
height: 28px;
}

.monitoring-price-type {
font-size: 14px;
}

.monitoring-price-value {
font-size: 14px;
padding-left: 8px;
}

.monitoring-price-row-last {
border-radius: 0 0 22px 22px;
}
}

@media (min-width: 428px) {
.cennik {
border-radius: 0 0 44px 44px;
padding-bottom: 74px;
}

.cennik .container {
width: 408px;
}

.cennik-section-pill-cennik {
gap: 20px;
padding: 0 30px;
height: 60px;
margin-top: 122px;
font-size: 20px;
}

.pricing-categories__list {
gap: 30px;
}

.pricing-category {
font-size: 22px;
}

.cennik-title_text {
font-size: 18px;
}

.cennik-internet-type-title {
font-size: 20px;
}

.cennik-internet-type-switcher {
width: 408px;
margin: 14px auto 0;
margin-bottom: 20px;
border-radius: 16px;
}

.cennik-internet-type-switcher button {
padding: 14px 9px;
font-size: 16px;
}

.subhero-cennik {
width: 408px;
}

.subhero-cennik__tariff-row {
width: 408px;
margin-bottom: 12px;
}

.subhero-cennik__text {
margin-left: 12px;
font-size: 18px;
}

.subhero-cennik__icon-one {
width: 20px;
height: 20px;
}

.subhero-cennik__icon-two {
width: 32px;
height: 32px;
}

.cennik-card {
width: 408px;
border-radius: 24px;
}

.cennik-card__top {
height: 96px;
column-gap: 132px;
padding-left: 26px;
padding-right: 26px;
padding-top: 22px;
}

.cennik-card__badge {
font-size: 20px;
}

.cennik-card__title {
font-size: 20px;
}

.cennik-card__row {
min-height: 104px;
padding-top: 28px;
padding-bottom: 28px;
padding-left: 26px;
padding-right: 26px;
}

.cennik-card__label {
font-size: 20px;
}

.cennik-card__value {
font-size: 20px;
}

.promo {
padding: 14px 22px;
border-radius: 24px;
}

.it-price-table {
width: 408px;
}

.it-title-text {
max-width: 408px;
font-size: 22px;
}

.it-price-header {
grid-template-columns: 1fr 136px;
height: 58px;
padding: 0 22px;
font-size: 17px;
border-radius: 24px 24px 0 0;
}

.it-price-row {
grid-template-columns: 1fr 136px;
min-height: 108px;
padding: 20px 22px;
}

.it-price-content {
gap: 30px;
font-size: 17px;
}

.it-price-content img {
width: 30px;
height: 30px;
}

.it-price-value {
font-size: 17px;
padding-left: 10px;
}

.it-price-row-last {
border-radius: 0 0 24px 24px;
}

.monitoring-price-table {
width: 408px;
}

.monitoring-title-text {
max-width: 408px;
font-size: 22px;
}

.monitoring-price-header,
.monitoring-price-row {
grid-template-columns: 1.3fr 1fr 118px;
}

.monitoring-price-header {
height: 58px;
padding: 0 22px;
font-size: 15px;
border-radius: 24px 24px 0 0;
}

.monitoring-price-row {
min-height: 108px;
padding: 20px 22px;
}

.monitoring-price-content {
grid-template-columns: 30px 1fr;
column-gap: 12px;
font-size: 15px;
}

.monitoring-price-content img {
width: 30px;
height: 30px;
}

.monitoring-price-type {
font-size: 15px;
}

.monitoring-price-value {
font-size: 15px;
padding-left: 8px;
}

.monitoring-price-row-last {
border-radius: 0 0 24px 24px;
}
}

@media (min-width: 480px) {
.cennik {
border-radius: 0 0 46px 46px;
padding-bottom: 86px;
}

.cennik .container {
width: 460px;
}

.cennik-section-pill-cennik {
gap: 22px;
padding: 0 34px;
height: 66px;
margin-top: 136px;
font-size: 22px;
}

.cennik-section-label-icon {
width: 13px;
height: 13px;
}

.pricing-categories--tablet {
padding-top: 34px;
}

.pricing-categories__list {
gap: 34px;
}

.pricing-category {
font-size: 24px;
}

.cennik-title-wrap {
gap: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

.cennik-title_text {
font-size: 20px;
}

.cennik-internet-type-title {
font-size: 22px;
}

.cennik-internet-type-switcher {
width: 460px;
margin: 16px auto 0;
margin-bottom: 22px;
border-radius: 18px;
}

.cennik-internet-type-switcher button {
padding: 16px 10px;
font-size: 18px;
}

.subhero-cennik {
width: 460px;
}

.subhero-cennik__tariff-row {
width: 460px;
margin-bottom: 14px;
}

.subhero-cennik__text {
margin-left: 14px;
font-size: 20px;
}

.subhero-cennik__icon-one {
width: 22px;
height: 22px;
}

.subhero-cennik__icon-two {
width: 36px;
height: 36px;
}

.cennik-card {
width: 460px;
border-radius: 26px;
}

.cennik-card__top {
height: 108px;
column-gap: 150px;
padding-left: 30px;
padding-right: 30px;
padding-top: 24px;
}

.cennik-card__badge {
font-size: 22px;
}

.cennik-card__title {
font-size: 22px;
}

.cennik-card__row {
min-height: 118px;
padding-top: 32px;
padding-bottom: 32px;
padding-left: 30px;
padding-right: 30px;
}

.cennik-card__label {
font-size: 22px;
}

.cennik-card__value {
font-size: 22px;
}

.promo {
padding: 16px 26px;
border-radius: 26px;
}

.it-price-table {
width: 460px;
}

.it-title-text {
max-width: 460px;
font-size: 24px;
}

.it-price-header {
grid-template-columns: 1fr 154px;
height: 62px;
padding: 0 26px;
font-size: 18px;
border-radius: 26px 26px 0 0;
}

.it-price-row {
grid-template-columns: 1fr 154px;
min-height: 118px;
padding: 22px 26px;
}

.it-price-content {
gap: 34px;
font-size: 18px;
}

.it-price-content img {
width: 32px;
height: 32px;
}

.it-price-value {
font-size: 18px;
padding-left: 12px;
}

.it-price-row-last {
border-radius: 0 0 26px 26px;
}

.monitoring-price-table {
width: 460px;
}

.monitoring-title-text {
max-width: 460px;
font-size: 24px;
}

.monitoring-price-header,
.monitoring-price-row {
grid-template-columns: 1.3fr 1fr 132px;
}

.monitoring-price-header {
height: 62px;
padding: 0 26px;
font-size: 16px;
border-radius: 26px 26px 0 0;
}

.monitoring-price-row {
min-height: 118px;
padding: 22px 26px;
}

.monitoring-price-content {
grid-template-columns: 32px 1fr;
column-gap: 14px;
font-size: 16px;
}

.monitoring-price-content img {
width: 32px;
height: 32px;
}

.monitoring-price-type {
font-size: 16px;
}

.monitoring-price-value {
font-size: 16px;
padding-left: 10px;
}

.monitoring-price-row-last {
border-radius: 0 0 26px 26px;
}
}

@media (min-width: 540px) {
.cennik {
border-radius: 0 0 48px 48px;
padding-bottom: 98px;
}

.cennik .container {
width: 520px;
}

.cennik-section-pill-cennik {
gap: 24px;
padding: 0 38px;
height: 72px;
margin-top: 152px;
font-size: 24px;
}

.cennik-section-label-icon {
width: 14px;
height: 14px;
}

.pricing-categories--tablet {
padding-top: 38px;
}

.pricing-categories__list {
gap: 38px;
}

.pricing-category {
font-size: 26px;
}

.cennik-title-wrap {
gap: 22px;
padding-top: 22px;
padding-bottom: 22px;
}

.cennik-title_text {
font-size: 22px;
}

.cennik-internet-type-title {
font-size: 24px;
}

.cennik-internet-type-switcher {
width: 520px;
margin: 18px auto 0;
margin-bottom: 24px;
border-radius: 20px;
}

.cennik-internet-type-switcher button {
padding: 18px 12px;
font-size: 20px;
}

.subhero-cennik {
width: 520px;
}

.subhero-cennik__tariff-row {
width: 520px;
margin-bottom: 14px;
}

.subhero-cennik__text {
margin-left: 14px;
font-size: 22px;
}

.subhero-cennik__icon-one {
width: 24px;
height: 24px;
}

.subhero-cennik__icon-two {
width: 40px;
height: 40px;
}

.cennik-card {
width: 520px;
border-radius: 28px;
}

.cennik-card__top {
height: 120px;
column-gap: 168px;
padding-left: 34px;
padding-right: 34px;
padding-top: 26px;
}

.cennik-card__badge {
font-size: 24px;
}

.cennik-card__title {
font-size: 24px;
}

.cennik-card__row {
min-height: 132px;
padding-top: 36px;
padding-bottom: 36px;
padding-left: 34px;
padding-right: 34px;
}

.cennik-card__label {
font-size: 24px;
}

.cennik-card__value {
font-size: 24px;
}

.promo {
padding: 18px 30px;
border-radius: 28px;
}

.it-price-table {
width: 520px;
}

.it-title-text {
max-width: 520px;
font-size: 26px;
}

.it-price-header {
grid-template-columns: 1fr 172px;
height: 66px;
padding: 0 30px;
font-size: 19px;
border-radius: 28px 28px 0 0;
}

.it-price-row {
grid-template-columns: 1fr 172px;
min-height: 128px;
padding: 24px 30px;
}

.it-price-content {
gap: 38px;
font-size: 19px;
}

.it-price-content img {
width: 34px;
height: 34px;
}

.it-price-value {
font-size: 19px;
padding-left: 12px;
}

.it-price-row-last {
border-radius: 0 0 28px 28px;
}

.monitoring-price-table {
width: 520px;
}

.monitoring-title-text {
max-width: 520px;
font-size: 26px;
}

.monitoring-price-header,
.monitoring-price-row {
grid-template-columns: 1.3fr 1fr 150px;
}

.monitoring-price-header {
height: 66px;
padding: 0 30px;
font-size: 18px;
border-radius: 28px 28px 0 0;
}

.monitoring-price-row {
min-height: 128px;
padding: 24px 30px;
}

.monitoring-price-content {
grid-template-columns: 34px 1fr;
column-gap: 14px;
font-size: 18px;
}

.monitoring-price-content img {
width: 34px;
height: 34px;
}

.monitoring-price-type {
font-size: 18px;
}

.monitoring-price-value {
font-size: 18px;
padding-left: 10px;
}

.monitoring-price-row-last {
border-radius: 0 0 28px 28px;
}
}

@media (min-width: 600px) {
.cennik {
border-radius: 0 0 50px 50px;
padding-bottom: 110px;
}

.cennik .container {
width: 580px;
}

.cennik-section-pill-cennik {
gap: 26px;
padding: 0 42px;
height: 78px;
margin-top: 168px;
font-size: 26px;
}

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

.pricing-categories--tablet {
padding-top: 42px;
}

.pricing-categories__list {
gap: 42px;
}

.pricing-category {
font-size: 28px;
}

.cennik-title-wrap {
gap: 24px;
padding-top: 24px;
padding-bottom: 24px;
}

.cennik-title_text {
font-size: 24px;
}

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

.cennik-internet-type-switcher {
width: 580px;
margin: 20px auto 0;
margin-bottom: 26px;
border-radius: 22px;
}

.cennik-internet-type-switcher button {
padding: 20px 14px;
font-size: 22px;
}

.subhero-cennik {
width: 580px;
}

.subhero-cennik__tariff-row {
width: 580px;
margin-bottom: 16px;
}

.subhero-cennik__text {
margin-left: 16px;
font-size: 24px;
}

.subhero-cennik__icon-one {
width: 26px;
height: 26px;
}

.subhero-cennik__icon-two {
width: 44px;
height: 44px;
}

.cennik-card {
width: 580px;
border-radius: 30px;
}

.cennik-card__top {
height: 134px;
column-gap: 188px;
padding-left: 38px;
padding-right: 38px;
padding-top: 28px;
}

.cennik-card__badge {
font-size: 26px;
}

.cennik-card__title {
font-size: 26px;
}

.cennik-card__row {
min-height: 148px;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 38px;
padding-right: 38px;
}

.cennik-card__label {
font-size: 26px;
}

.cennik-card__value {
font-size: 26px;
}

.promo {
padding: 20px 34px;
border-radius: 30px;
}

.it-price-table {
width: 580px;
}

.it-title-text {
max-width: 580px;
font-size: 28px;
}

.it-price-header {
grid-template-columns: 1fr 190px;
height: 70px;
padding: 0 34px;
font-size: 20px;
border-radius: 30px 30px 0 0;
}

.it-price-row {
grid-template-columns: 1fr 190px;
min-height: 140px;
padding: 26px 34px;
}

.it-price-content {
gap: 42px;
font-size: 20px;
}

.it-price-content img {
width: 36px;
height: 36px;
}

.it-price-value {
font-size: 20px;
padding-left: 14px;
}

.it-price-row-last {
border-radius: 0 0 30px 30px;
}

.monitoring-price-table {
width: 580px;
}

.monitoring-title-text {
max-width: 580px;
font-size: 28px;
}

.monitoring-price-header,
.monitoring-price-row {
grid-template-columns: 1.3fr 1fr 168px;
}

.monitoring-price-header {
height: 70px;
padding: 0 34px;
font-size: 19px;
border-radius: 30px 30px 0 0;
}

.monitoring-price-row {
min-height: 140px;
padding: 26px 34px;
}

.monitoring-price-content {
grid-template-columns: 36px 1fr;
column-gap: 16px;
font-size: 19px;
}

.monitoring-price-content img {
width: 36px;
height: 36px;
}

.monitoring-price-type {
font-size: 19px;
}

.monitoring-price-value {
font-size: 19px;
padding-left: 12px;
}

.monitoring-price-row-last {
border-radius: 0 0 30px 30px;
}
}

@media (min-width: 639px) {
.cennik {
border-radius: 0 0 52px 52px;
padding-bottom: 122px;
}

.cennik .container {
width: 639px;
}

.cennik-section-pill-cennik {
gap: 28px;
padding: 0 46px;
height: 84px;
margin-top: 184px;
font-size: 28px;
}

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

.pricing-categories--tablet {
padding-top: 46px;
}

.pricing-categories__list {
gap: 46px;
}

.pricing-category {
font-size: 30px;
}

.cennik-title-wrap {
gap: 26px;
padding-top: 26px;
padding-bottom: 26px;
}

.cennik-title_text {
font-size: 26px;
}

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

.cennik-internet-type-switcher {
width: 639px;
margin: 22px auto 0;
margin-bottom: 28px;
border-radius: 24px;
}

.cennik-internet-type-switcher button {
padding: 22px 16px;
font-size: 24px;
}

.subhero-cennik {
width: 639px;
}

.subhero-cennik__tariff-row {
width: 639px;
margin-bottom: 18px;
}

.subhero-cennik__text {
margin-left: 18px;
font-size: 26px;
}

.subhero-cennik__icon-one {
width: 28px;
height: 28px;
}

.subhero-cennik__icon-two {
width: 48px;
height: 48px;
}

.cennik-card {
width: 639px;
border-radius: 32px;
}

.cennik-card__top {
height: 148px;
column-gap: 206px;
padding-left: 42px;
padding-right: 42px;
padding-top: 30px;
}

.cennik-card__badge {
font-size: 28px;
}

.cennik-card__title {
font-size: 28px;
}

.cennik-card__row {
min-height: 162px;
padding-top: 44px;
padding-bottom: 44px;
padding-left: 42px;
padding-right: 42px;
}

.cennik-card__label {
font-size: 28px;
}

.cennik-card__value {
font-size: 28px;
}

.promo {
padding: 22px 38px;
border-radius: 32px;
}

.it-price-table {
width: 639px;
}

.it-title-text {
max-width: 639px;
font-size: 30px;
}

.it-price-header {
grid-template-columns: 1fr 208px;
height: 74px;
padding: 0 38px;
font-size: 21px;
border-radius: 32px 32px 0 0;
}

.it-price-row {
grid-template-columns: 1fr 208px;
min-height: 152px;
padding: 28px 38px;
}

.it-price-content {
gap: 46px;
font-size: 21px;
}

.it-price-content img {
width: 38px;
height: 38px;
}

.it-price-value {
font-size: 21px;
padding-left: 14px;
}

.it-price-row-last {
border-radius: 0 0 32px 32px;
}

.monitoring-price-table {
width: 639px;
}

.monitoring-title-text {
max-width: 639px;
font-size: 30px;
}

.monitoring-price-header,
.monitoring-price-row {
grid-template-columns: 1.3fr 1fr 186px;
}

.monitoring-price-header {
height: 74px;
padding: 0 38px;
font-size: 20px;
border-radius: 32px 32px 0 0;
}

.monitoring-price-row {
min-height: 152px;
padding: 28px 38px;
}

.monitoring-price-content {
grid-template-columns: 38px 1fr;
column-gap: 16px;
font-size: 20px;
}

.monitoring-price-content img {
width: 38px;
height: 38px;
}

.monitoring-price-type {
font-size: 20px;
}

.monitoring-price-value {
font-size: 20px;
padding-left: 12px;
}

.monitoring-price-row-last {
border-radius: 0 0 32px 32px;
}
}




/* ===============================
   TYPOGRAPHY – MOBILE (320px)
=============================== */

.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: 600;
  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 (320 / container 300)
=============================== */

.Services {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.Services .container {
  width: 300px;
  max-width: 300px;
}

/* =============================
   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;

  padding: 0 16px;
  height: 40px;
  width: auto;
  margin-top: 70px;

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

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  white-space: nowrap;
}

.services-section-pill__text {
  display: flex;
  align-items: center;
}

.services-section-pill__icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ACE238;
}

/* animation сохранена 1 в 1 */
.services-section-pill--services {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.services-section-pill--services.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ======================================================
   SERVICE BREADCRUMBS — MOBILE
====================================================== */

.service-breadcrumbs-tablet__row {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service-breadcrumbs-tablet__row.is-active {
  display: flex;
}

/* mobile fit */
.service-breadcrumbs-tablet__row.is-active {
  flex-direction: column;
  align-items: stretch;
}

.service-breadcrumbs-tablet__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.service-breadcrumbs-tablet__nav a,
.service-breadcrumbs-tablet__nav span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #313131;
  text-decoration: none;
}

.service-breadcrumbs-tablet__nav img {
  width: 16px;
  height: 16px;
}

.service-breadcrumbs-tablet__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 46px;
  width: 100%;
  max-width: 300px;
  padding: 12px 14px;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;

  background-color: #28E1E7;
  color: #ffffff;

  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.service-breadcrumbs-tablet__back img {
  width: 18px;
  height: 18px;
}

/* =============================
   SERVICE CATEGORIES — MOBILE
============================= */

.service-categories-tablet {
  display: flex;
  justify-content: center;
  padding-top: 22px;
}

.service-categories-tablet__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: 18px;
  font-weight: 400;
  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-tablet .cennik-title-wrap {
  color: #212121;
}

.service-title-tablet .cennik-title_text {
  color: #212121;
}

.service-title-tablet .cennik-title-ikon {
  filter: none;
  width: 28px;
  height: 28px;
}

/* ======================================================
   SERVICE FILTERS — MOBILE
====================================================== */

.service-filters {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.service-filters__item {
  padding: 10px 12px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid #212121;

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

  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;
}

/* pulse анимация 1 в 1 */
@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 {
  height: auto !important;
  overflow: visible !important;
}

/* карточка под container 300 */
.service-card-level2 {
  width: 300px;
  background: #262626;
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-sizing: border-box;
  margin-top: 18px;

  display: flex;
  flex-direction: column;
}

/* 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-radius: 999px;
  border: 1px solid #ffffff;
  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 (h2 типографика уже применена сверху) */
.service-card-level2__title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
}

.service-card-level2__subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  max-width: 268px;
  margin: 12px 0 18px;
  position: relative;
  color: #ffffff;
  line-height: 1.6;
}

.service-card-level2__subtitle::after {
  content: "";
  display: block;
  height: 1px;
  background: #ffffff;
  opacity: 0.2;
  margin-top: 16px;
}

/* SECTIONS */
.service-card-level2__section {
  width: 100%;
  max-width: 268px;
  margin-bottom: 18px;
}

.service-card-level2__section-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
  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;

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;

  margin-bottom: 8px;
  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;

  max-width: 268px;
  margin-bottom: 18px;
  margin-right: 0;

  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;
}

.service-card-level2__forwho p span {
  white-space: normal;
}

.service-card-level2__forwho p {
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

/* ACTIONS */
.service-card-level2__actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 268px;
}

.service-card-level2__consult {
  display: flex;
  align-items: center;
}

.service-card-level2__consult img {
  height: 46px;
}

.service-card-level2__cennik {
  height: 46px;
  width: 120px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  box-sizing: border-box;

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

  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;

  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
}

.service-card-level2__cennik.is-active {
  background-color: #ffffff;
  color: #212121;
  border: 1px solid #212121;
}

.service-card-level2 + .service-card-level2 {
  margin-top: 18px;
}


/* ===============================
   SERVICE CARD ACTIONS — MOBILE FIX
=============================== */

.service-card-level2__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: 268px;
}

/* CENNIK — first, full width */
.service-card-level2__cennik {
  order: 1;
  width: 100%;
  height: 56px;
}

/* CONSULT — second, centered */
.service-card-level2__consult {
  order: 2;
  justify-content: center;
}

.service-card-level2__consult img {
  height: 56px;
}


@media (min-width: 360px) {
  .Services .container {
    width: 340px;
    max-width: 340px;
  }

  .services-section-pill--services {
    margin-top: 74px;
    height: 42px;
    font-size: 17px;
    padding: 0 18px;
  }

  .services-section-pill__icon {
    width: 11px;
    height: 11px;
  }

  .service-category {
    font-size: 19px;
  }

  .service-filters {
    gap: 11px;
  }

  .service-filters__item {
    font-size: 12px;
    padding: 10px 13px;
  }

  .service-card-level2 {
    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 {
    font-size: 13px;
    padding: 8px 15px;
  }

  .service-card-level2__list img {
    width: 23px;
    height: 23px;
  }

  .service-card-level2__forwho img {
    width: 40px;
    height: 40px;
  }
}

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

  .services-section-pill--services {
    margin-top: 78px;
    height: 44px;
    font-size: 18px;
  }

  .service-category {
    font-size: 20px;
  }

  .service-card-level2 {
    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;
  }
}

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

  .services-section-pill--services {
    margin-top: 82px;
    height: 46px;
    font-size: 19px;
  }

  .service-filters {
    gap: 12px;
  }

  .service-card-level2 {
    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;
  }
}

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

  .services-section-pill--services {
    margin-top: 86px;
    height: 48px;
    font-size: 20px;
  }

  .service-category {
    font-size: 21px;
  }

  .service-card-level2 {
    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;
  }
}

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

  .services-section-pill--services {
    margin-top: 92px;
    height: 52px;
    font-size: 22px;
    padding: 0 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 {
    font-size: 13px;
    padding: 11px 15px;
  }

  .service-card-level2 {
    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 {
    font-size: 14px;
    padding: 9px 16px;
  }

  .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;
  }
}

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

  .services-section-pill--services {
    margin-top: 98px;
    height: 56px;
    font-size: 24px;
  }

  .service-category {
    font-size: 22px;
  }

  .service-filters {
    gap: 14px;
  }

  .service-card-level2 {
    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;
  }
}

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

  .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 {
    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 {
    width: 180px;
    height: 60px;
    order: 2;
  }

  .service-card-level2__consult {
    order: 1;
    justify-content: flex-start;
  }

  .service-card-level2__consult img {
    height: 60px;
  }
}

@media (min-width: 639px) {
  .Services .container {
    width: 639px;
    max-width: 639px;
  }

  .services-section-pill--services {
    margin-top: 110px;
    height: 64px;
    font-size: 28px;
    padding: 0 26px;
  }

  .services-section-pill__icon {
    width: 14px;
    height: 14px;
  }

  .service-category {
    font-size: 24px;
  }

  .service-filters {
    gap: 16px;
  }

  .service-filters__item {
    font-size: 14px;
    padding: 12px 16px;
  }

  .service-card-level2 {
    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;
  }
}

/* ===============================
   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;
}