:root {
        --vh: 1vh;
      --white: #ffffff;
      --light: #f8f8f8;
      --gray: #e0e0e0;
      --dark: #111111;
      --bg: #000000;
      --glass: rgba(255, 255, 255, 0.08);
      --border: rgba(255, 255, 255, 0.15);
      --shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
      --transition: all 0.35s ease;
    }
#landing, .slide, .carousel-content { height: calc(var(--vh, 1vh) * 100); }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
    body { 
      font-family: 'Inter', sans-serif; 
      background: var(--bg); 
      color: var(--white); 
      min-height: 100vh; 
      position: relative;

    }
    /* === КАРУСЕЛЬ === */
    #landing {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: #000;
      z-index: 1;
    }

    .slide {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover !important;          /* ТОЛЬКО COVER */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transition: opacity 1.6s ease;
  z-index: 1;
}
    .slide.active { opacity: 1; z-index: 2; }
    .slide::before { 
      content: ''; position: absolute; inset: 0; 
      background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.65)); 
      z-index: 3; 
    }

    .carousel-content {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      pointer-events: none;
    }

    .carousel-container {
      position: relative;
      width: 100%;
      height: 100%;
      pointer-events: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }



    .carousel-arrow {
      position: absolute;
      width: 40px; height: 40px;
      background: rgba(255, 255, 255, 0.1);
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: var(--transition);
      backdrop-filter: blur(8px);
    }
    .carousel-arrow:hover { 
      background: rgba(255, 255, 255, 0.25); 
      border-color: var(--white);
      transform: scale(1.15);
    }
    .carousel-arrow i { font-size: 1.1rem; color: var(--white); }
    .carousel-arrow.prev { left: 20px; top: 50%; transform: translateY(-50%); }
    .carousel-arrow.next { right: 20px; top: 50%; transform: translateY(-50%); }

    .carousel-progress {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
      z-index: 10;
    }
    .progress-bar {
      width: 60px;
      height: 3px;
      background: rgba(255,255,255,0.3);
      border-radius: 2px;
      overflow: hidden;
      position: relative;
    }
    .progress-fill {
      height: 100%;
      background: var(--white);
      width: 0%;
      border-radius: 2px;
      transition: width 5s linear;
    }
    .progress-bar.active .progress-fill {
      width: 100%;
    }

    .slide-element {
      position: absolute;
      user-select: none;
      z-index: 5;
      transform-origin: top left;
    }
    .slide-element.text {
      color: #fff;
      font-weight: 600;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
      white-space: normal;
      line-height: 1.3;
      font-family: 'Inter', sans-serif;
    }
    .slide-element img {
      width: 100%; height: 100%; object-fit: contain; pointer-events: none;
    }

    /* === ОБРАТНАЯ СВЯЗЬ === */
    #contact {
      position: relative;
      min-height: 100vh;
      padding: 16vh 8%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3.5rem;
      background: var(--bg);
      z-index: 2;
      overflow: visible;
    }

    .contact-wrapper {
        display: grid;
        grid-template-columns: 
            minmax(300px, 420px)   /* левый */
            minmax(500px, 680px)   /* форма */
            minmax(300px, 420px);  /* правый */
        gap: 5rem;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 1600px;
        position: relative;
        padding: 0 2rem;
    }


    /* ЛЕВЫЙ ГРАФФИТИ */
    .form-wrapper {
    transform: translateX(180px) translateY(-40px) scale(1.05);
    z-index: 10;
    }

    /* ВЕРХНИЙ ГРАФФИТИ — самый левый, самый верхний */
    .graffiti-left-wrapper {
    transform: translateX(-320px) translateY(-280px) scale(1.05);
    z-index: 5;
    }

    /* НИЖНИЙ ГРАФФИТИ — правее и ниже, как вторая ступенька */
    .graffiti-right-wrapper {
    transform: translateX(-1120px) translateY(180px) scale(1.05);
    z-index: 5;
    }

    /* СТРЕЛКА — от НИЖНЕЙ СТУПЕНЬКИ (правого блока) к ФОРМЕ */

    #contact {
    position: relative; /* ← ОБЯЗАТЕЛЬНО */
    overflow: visible;
  }

    .graffiti-arrow {
    position: absolute;
    width: 96%;
    max-width: 1400px;
    height: 90vh;
    min-height: 560px;
    top: 92%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 6;
    pointer-events: none;
    opacity: 1 !important; /* ВИДНА СРАЗУ */
    }

    .graffiti-arrow::before {
        content: "";
        position: absolute;
        width: 86%;
        height: 260px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        border: 22px solid transparent;
        border-bottom: 22px solid #ffffff;
        border-radius: 0 0 66% 66%;
        box-shadow: 0 0 50px rgba(255,255,255,0.9);
        clip-path: polygon( 
            92% 0%,    /* старт — под правым блоком */
            100% 15%, 
            100% 100%, 
            75% 100%, 
            73% 70%, 
            20% 70%, 
            18% 100%, 
            0% 100%, 
            0% 15%, 
            8% 0%      /* конец — тычет в правый блок снизу вверх */
        );
        animation: drawArrow 4.2s ease-out 2.8s forwards;
    }

    .graffiti-arrow::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 46px solid #ffffff;
        border-top: 36px solid transparent;
        border-bottom: 36px solid transparent;
        right: 9.5%;
        top: 24%;
        transform: rotate(88deg);
        filter: drop-shadow(0 0 30px #ffffff);
        opacity: 0;
        animation: showTip 0.9s ease-out 6.2s forwards;
    }

    @keyframes drawArrow {
        0% {
            clip-path: polygon(92% 0%, 92% 0%, 92% 0%, 92% 0%, 92% 0%, 92% 0%, 92% 0%, 92% 0%, 92% 0%, 92% 0%);
        }
        100% {
            clip-path: polygon(92% 0%, 100% 15%, 100% 100%, 75% 100%, 73% 70%, 20% 70%, 18% 100%, 0% 100%, 0% 15%, 8% 0%);
        }
    }

    @keyframes showTip {
        to { opacity: 1; }
    }

    .contact-form {
    justify-self: center;
    }

    /* === ГРАФФИТИ ТЕКСТ — ВИДЕН! === */
    /* === ГРАФФИТИ ТЕКСТ — ИСПРАВЛЕНО === */
    .graffiti-text {
    font-family: 'Shadows Into Light', cursive;
    font-size: 2.6rem;
    color: #ffffff;
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.3),
        1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000;
    opacity: 1; /* УБРАЛИ opacity: 0 */
    position: relative;
    z-index: 5;
    line-height: 1.4;
    letter-spacing: 0.8px;
    white-space: pre-wrap;
    max-width: 420px;
    /* Анимация появления всего текста */
    animation: fadeInText 0.5s ease-out 0.3s forwards;
    }

    .graffiti-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: write-letter 0.6s ease-out forwards;
    }

    @keyframes fadeInText {
    to { opacity: 1; }
    }

    @keyframes write-letter {
    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--rot, 0deg)) translateX(var(--x, 0px)) translateY(var(--y, 0px));
    }
    }


    /* === ФОРМА === */
    .contact-form {
    background: rgba(255, 255, 255, 0.06); 
    padding: 3.4rem; 
    border-radius: 28px; 
    border: 1.5px solid rgba(255, 255, 255, 0.18); 
    backdrop-filter: blur(24px); 
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(255, 255, 255, 0.08) inset;
    display: grid; 
    gap: 1.8rem;
    max-width: 680px;
    width: 100%;
    position: relative;
    z-index: 10;
    transition: all 0.4s ease;
    overflow: hidden;
    }

    .contact-form::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    pointer-events: none;
    border-radius: 28px;
    z-index: -1;
    }

    .contact-form:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 35px 70px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(255, 255, 255, 0.12) inset;
    border-color: rgba(255, 255, 255, 0.3);
    }

    .contact-form input, 
    .contact-form textarea {
      padding: 1.2rem 1.6rem; 
      background: rgba(255,255,255,0.08); 
      border: 1px solid var(--border); 
      border-radius: 14px; 
      color: #fff; 
      font-size: 1rem; 
      transition: var(--transition);
    }

    .contact-form input:focus, 
    .contact-form textarea:focus {
      outline: none; 
      border-color: var(--white); 
      background: rgba(255,255,255,0.14);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }

    .contact-form textarea { 
      min-height: 150px; 
      resize: vertical; 
    }

    .contact-form button {
      padding: 1.2rem 2.8rem; 
      background: var(--white); 
      color: #000; 
      border: none; 
      border-radius: 14px; 
      font-weight: 600; 
      font-size: 1.1rem; 
      cursor: pointer; 
      transition: var(--transition); 
      justify-self: center;
    }

    .contact-form button:hover {
      transform: translateY(-2px); 
      box-shadow: 0 10px 30px rgba(255, 255, 255, 0.25);
    }

    /* === FAQ === */
    #faq {
      min-height: 100vh;
      padding: 16vh 8%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3.5rem;
      background: var(--bg);
      z-index: 2;
    }

    .section-title {
  font-size: clamp(2.8rem, 8vw, 5.5rem);     /* плавно от 45px до 88px */
  font-weight: 700;
  letter-spacing: 0.8px;
  text-align: center;
  color: var(--white);
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 5;

  /* Убираем жёсткие отрицательные margin — только умные отступы */
}

/* Динамический отступ сверху — чем шире экран, тем больше места */
#contact .section-title,
#faq .section-title {
  margin-top: clamp(6vh, 12vw, 16vh) !important;     /* от 6vh на мобилке до 16vh на десктопе */
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* Нижняя полоска под заголовком */
.section-title::after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  background: var(--white);
  margin: 1.8rem auto 0;
  border-radius: 2px;
  opacity: 0.8;
}

/* Светлая тема — чёрная полоска */
[data-theme="light"] .section-title {
  color: #111;
}
[data-theme="light"] .section-title::after {
  background: #111;
}

/* ================================================================= */
/* ДОПОЛНИТЕЛЬНО: УБИРАЕМ ВСЁ ЖЁСТКОЕ margin-top ИЗ СТАРЫХ МЕДИА!   */
/* ================================================================= */
.section-title,
#contact .section-title,
#faq .section-title {
  margin-top: unset !important;
}

    .faq-container { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 1.4rem; }
    .faq-item {
      background: rgba(255, 255, 255, 0.06); 
      padding: 2rem 2.4rem; border-radius: 18px; 
      border: 1px solid var(--border); 
      cursor: pointer; transition: var(--transition); 
      overflow: hidden; opacity: 0; transform: translateY(35px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.35);
    }
    .faq-item.visible { opacity: 1; transform: translateY(0); }
    .faq-item:hover { 
      transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.4); 
      box-shadow: 0 15px 35px rgba(255, 255, 255, 0.1); 
    }
    .faq-question {
      font-weight: 600; font-size: 1.4rem; color: #fff; 
      display: flex; justify-content: space-between; align-items: center; 
    }
    .faq-question::after { content: '+'; font-size: 1.6rem; color: var(--white); transition: transform 0.3s ease; }
    .faq-item.active .faq-question::after { content: '−'; transform: rotate(180deg); }
    .faq-answer {
      max-height: 0; overflow: hidden; color: #ddd; 
      line-height: 1.8; font-size: 1.05rem; margin-top: 0.8rem; 
      transition: max-height 0.5s ease, padding 0.5s ease;
    }
    .faq-item.active .faq-answer { max-height: 450px; padding-top: 1rem; }


        .faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 3rem auto;
    perspective: 1500px;
    }

    .faq-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 2.2rem;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    }

    .faq-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    }

    .faq-card:hover {
    transform: translateY(-12px) rotateX(8deg) rotateY(6deg);
    box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 40px rgba(255,255,255,0.15) inset;
    border-color: rgba(255,255,255,0.4);
    }


    .faq-card:hover::before { opacity: 1; }
    
    .faq-card .question {
    font-size: 1.35rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
    }

    .faq-card .question::after {
    content: '+';
    font-size: 2rem;
    font-weight: 300;
    transition: transform 0.4s ease;
    }

    .faq-card.active .question::after {
    content: '−';
    transform: rotate(180deg);
    }

    .faq-card .answer {
    max-height: 0;
    overflow: hidden;
    color: #ccc;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-top: 0;
    transition: all 0.6s ease;
    opacity: 0;
    }

    .faq-card.active .answer {
    max-height: 500px;
    margin-top: 1.2rem;
    opacity: 1;
    padding-top: 0.5rem;
    }

    /* Поиск */
    .faq-search {
    max-width: 600px;
    margin: 2rem auto;
    display: flex;
    background: rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    }

    .faq-search input {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    }

    .faq-search button {
    padding: 0 1.5rem;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    }

    #searchToggle {
    position: relative;
    z-index: 1002 !important; /* ещё выше, на всякий случай */
    pointer-events: auto !important;
}

  .simple-arrow-wrapper {
  position: absolute;
  top: 40%;
  right: 100px; /* регулируй расстояние от формы */
  transform: translateY(-50%) rotate(-190deg); /* вертикально + поворот */
  width: 420px;
  height: auto;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

  .simple-arrow-png {
  width: 100%;
  height: auto;
  filter: invert(1) drop-shadow(0 0 35px rgba(255,255,255,0.95));
  }

  /* Появление */
  .simple-arrow-wrapper.visible {
  opacity: 1;
  transform: translateY(-50%) rotate(-190deg) translateX(0);
  }

  /* Анимация появления */
  @keyframes fadeInArrow {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

/* Мобильная адаптация */
@media (max-width: 768px) {
  .simple-arrow-png {
    width: 80px;
    left: 50%;
    top: 75%; /* На мобилке — ниже, чтобы указывала на форму */
    transform: rotate(0deg);
  }
}

@keyframes drawArrow {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes showTip {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ====================== FAQ – ПОЛНАЯ ПОДДЕРЖКА СВЕТЛОЙ ТЕМЫ ====================== */
[data-theme="light"] #faq {
  background: #f5f5f5;
}

[data-theme="light"] .section-title {
  color: #111;
}
[data-theme="light"] .section-title::after {
  background: #111;
}

[data-theme="light"] .faq-search {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.15);
}
[data-theme="light"] .faq-search input {
  color: #111;
}
[data-theme="light"] .faq-search input::placeholder {
  color: rgba(0,0,0,0.5);
}
[data-theme="light"] .faq-search button {
  background: rgba(0,0,0,0.12);
  color: #111;
}



/* Вопрос */
[data-theme="light"] .faq-card .question {
  color: #111;
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
[data-theme="light"] .faq-card .question::after {
  color: #333;
}

/* Ответ */
[data-theme="light"] .faq-card .answer {
  color: #333;
}

/* Активное состояние (плюс → минус) */
[data-theme="light"] .faq-card.active .question::after {
  color: #000;
}

/* Анимация появления (чтобы не было резкого белого всплеска) */
[data-theme="light"] .faq-card {
  opacity: 0;
  animation: fadeInCardLight 0.8s ease-out forwards;
}
[data-theme="light"] .faq-card:nth-child(1) { animation-delay: 0.1s; }
[data-theme="light"] .faq-card:nth-child(2) { animation-delay: 0.2s; }
[data-theme="light"] .faq-card:nth-child(3) { animation-delay: 0.3s; }
[data-theme="light"] .faq-card:nth-child(4) { animation-delay: 0.4s; }
[data-theme="light"] .faq-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInCardLight {
  to { opacity: 1; transform: translateY(0); }
}

/* Если вдруг остались старые .faq-item (на всякий случай) */
[data-theme="light"] .faq-item {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #111 !important;
}
[data-theme="light"] .faq-item .faq-question { color: #111 !important; }
[data-theme="light"] .faq-item .faq-answer { color: #333 !important; }

/* ====================== ОБРАТНАЯ СВЯЗЬ — ФИКСЫ ДЛЯ СВЕТЛОЙ ТЕМЫ ====================== */

[data-theme="light"] .simple-arrow-wrapper {
  opacity: 1 !important;
}

[data-theme="light"] .simple-arrow-png {
  filter: invert(0) drop-shadow(0 0 35px rgba(0,0,0,0.7)) !important; /* чёрная стрелка + сильная тень */
}

/* Если хочешь ещё ярче — можно сделать чисто чёрную без инверта */
[data-theme="light"] .simple-arrow-png {
  filter: brightness(0) drop-shadow(0 0 40px rgba(0,0,0,0.8)) !important;
}

/* Кнопка "Отправить" в форме обратной связи */
[data-theme="light"] .contact-form button {
  background: #111 !important;
  color: #fff !important;
  border: 2px solid #111 !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25) !important;
}

[data-theme="light"] .contact-form button:hover {
  background: #000 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.35) !important;
}

/* Дополнительно: делаем поля ввода и текст в форме читаемыми */
[data-theme="light"] .contact-form {
  background: rgba(255,255,255,0.94) !important;
  border: 1.5px solid rgba(0,0,0,0.18) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea {
  background: rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
  color: #111 !important;
}

[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder {
  color: rgba(0,0,0,0.5) !important;
}

[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form textarea:focus {
  border-color: #000 !important;
  background: rgba(0,0,0,0.1) !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.15) !important;
}

/* Граффити-текст тоже делаем тёмным в светлой теме */
[data-theme="light"] .graffiti-text {
  color: #111 !important;
  text-shadow: 
    0 0 8px rgba(0,0,0,0.25),
    1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff !important;
}


/* Светлая тема — правильные 3D-карточки FAQ */
[data-theme="light"] .faq-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  
  /* ← ЭТО САМОЕ ГЛАВНОЕ — включаем 3D-пространство */
  transform: perspective(1500px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition: all 0.58s cubic-bezier(0.23, 1, 0.32, 1);
}

[data-theme="light"] .faq-card:hover {
  transform: perspective(1500px)
             translateY(-16px)
             rotateX(12deg)
             rotateY(10deg)
             translateZ(30px)
             scale(1.03);
  box-shadow: 0 45px 90px rgba(0, 0, 0, 0.28),
              0 20px 50px rgba(0, 0, 0, 0.22),
              0 0 60px rgba(0, 0, 0, 0.12) inset !important;
  border-color: rgba(0, 0, 0, 0.35) !important;
}


/* === МОДАЛЬНОЕ ОКНО ПО ЦЕНТРУ === */
.feedback-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.feedback-modal.show {
  opacity: 1;
  visibility: visible;
}

.feedback-modal-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 28px;
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 255, 255, 0.1) inset;
  transform: scale(0.8);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.feedback-modal.show .feedback-modal-content {
  transform: scale(1);
}

.feedback-modal-icon {
  font-size: 4.5rem;
  margin-bottom: 1rem;
}

.feedback-modal-icon i {
  color: #0f0;
}

.feedback-modal.error .feedback-modal-icon i {
  color: #ff5555;
}

.feedback-modal-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: #fff;
}

.feedback-modal-text {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* Светлая тема */
[data-theme="light"] .feedback-modal {
  background: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .feedback-modal-content {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(0, 0, 0, 0.05) inset;
}

[data-theme="light"] .feedback-modal-title,
[data-theme="light"] .feedback-modal-text {
  color: #111;
}

[data-theme="light"] .feedback-modal-icon i {
  color: #0b0;
}

[data-theme="light"] .feedback-modal.error .feedback-modal-icon i {
  color: #d33;
}

[data-theme="light"] .change-phone-btn {
  background: rgba(0,0,0,0.1) !important;
  color: #111 !important;
}
[data-theme="light"] .change-phone-btn:hover {
  background: rgba(0,0,0,0.2) !important;
}
.change-phone-btn:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: translateY(-50%) scale(1.05);
}




.slide-element {
  position: absolute;
  user-select: none;
}

.hotspot {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: background 0.3s;
  pointer-events: auto;

}

.hotspot:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* === ФИНАЛЬНЫЙ ФИКС КАРУСЕЛИ — 100% КАК В РЕДАКТОРЕ === */
#landing,
.carousel-content,
.carousel-container,
.carousel-inner {
  width: 100vw !important;
  height: 100vh !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.carousel-inner {
  inset: 0;
  position: absolute !important;

}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}



.carousel-inner {
  position: absolute;
  inset: 0;
  pointer-events: none; /* важно! */
  overflow: hidden;
}

.slide-element {
  transform-box: fill-box; /* для точного rotate */
}

.hotspot {
  /* border: 1px dashed rgba(255,255,255,0.15); */ /* можно включить для дебага */
}
.slide-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.slide-element {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  z-index: 20;
  cursor: pointer;
  border: 2px dashed rgba(255,255,255,0.3);
  border-radius: 12px;
  transition: all 0.3s;
}

.hotspot:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}

/* Если у тебя иконки в <i> или <img> — тоже перебиваем */


/* ===================================================== */
/* 1. КНОПКА «ПИСЬМО» — БЕЛАЯ С ЧЁРНОЙ ИКОНКОЙ ТОЛЬКО В СВЕТЛОЙ ТЕМЕ ДО СКРОЛЛА */
/* ===================================================== */
[data-theme="light"] header:not(.scrolled) .icon-btn[onclick="scrollToContact()"],
[data-theme="light"] header:not(.scrolled) .header-icons > .icon-btn:last-child {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(16px) !important;
  transition: all 0.38s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

[data-theme="light"] header:not(.scrolled) .icon-btn[onclick="scrollToContact()"] i,
[data-theme="light"] header:not(.scrolled) .header-icons > .icon-btn:last-child i {
  color: #000000 !important;
}

/* Ховер — ещё ярче */
[data-theme="light"] header:not(.scrolled) .icon-btn[onclick="scrollToContact()"]:hover,
[data-theme="light"] header:not(.scrolled) .header-icons > .icon-btn:last-child:hover {
  background: #ffffff !important;
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32) !important;
}

/* После скролла — возвращаем обычный стеклянный стиль (даже в светлой теме) */
[data-theme="light"] header.scrolled .icon-btn[onclick="scrollToContact()"],
[data-theme="light"] header.scrolled .header-icons > .icon-btn:last-child {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ ФОНА КАРУСЕЛИ — БЕЗ ЛЮБОГО ЗУМА */
/* ФИНАЛЬНЫЙ ФИКС — ФОН КАРУСЕЛИ БЕЗ ЗУМА НАВСЕГДА */
#landing .slide,
#landing .slide::before,
#landing .slide::after {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}

.carousel-content,
.carousel-inner,
#landing {
  transform: none !important;
  overflow: hidden !important;
}

/* ============================================================= */
/* АДАПТИВ 2025 — ОТ 320px (iPhone SE) ДО 4K — БЕЗ КОМПРОМИССОВ */
/* ============================================================= */

/* 1. БАЗОВЫЕ ПРАВИЛА ДЛЯ МОБИЛЬНЫХ (320–480px) */
@media (max-width: 480px) {
  html { font-size: 14px; }

  body { padding-bottom: 80px; } /* место под нижнюю мобильную панель */

  /* Карусель — стрелки и прогресс-бар */
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-arrow i { font-size: 1rem; }
  .carousel-arrow.prev  { left: 12px; }
  .carousel-arrow.next  { right: 12px; }

  .carousel-progress {
    bottom: 16px;
    gap: 8px;
  }
  .progress-bar { width: 40px; height: 2.5px; }

  /* Обратная связь — полный редизайн под мобильные */
  .contact-wrapper {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    padding: 0 1rem;
  }

  /* Убираем все граффити и стрелки — они не влезают */
  .graffiti-left-wrapper,
  .graffiti-right-wrapper,
  .form-wrapper,
  .graffiti-arrow,
  .simple-arrow-wrapper { display: none !important; }

  .contact-form {
    padding: 2rem 1.5rem;
    border-radius: 20px;
    max-width: 100%;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 1rem 1.2rem;
    font-size: 16px; /* iOS не будет зумить */
  }

  .section-title { font-size: 2.4rem; margin-top: -4rem; }

  /* FAQ */
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 0 1rem;
  }

  .faq-card {
    padding: 1.8rem;
    border-radius: 18px;
  }

  .faq-card .question { font-size: 1.25rem; }
}

/* 2. ПЛАНШЕТЫ 481–1024px (iPad, iPad Pro в портрете) */
@media (min-width: 481px) and (max-width: 1024px) {
  html { font-size: 15px; }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 0 2rem;
  }

  /* Граффити и стрелки — прячем, но не все */
  .graffiti-left-wrapper,
  .graffiti-right-wrapper,
  .graffiti-arrow { display: none !important; }

  .form-wrapper {
    transform: none !important;
  }

  .simple-arrow-wrapper {
    display: block;
    width: 260px;
    top: 50%;
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
  }

  .simple-arrow-png {
    filter: invert(1) drop-shadow(0 0 30px rgba(255,255,255,0.9));
  }

  .section-title { font-size: 3.2rem; }

  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
  }
}

/* 3. НОУТБУКИ 1025–1440px */
@media (min-width: 1025px) and (max-width: 1440px) {
  .contact-wrapper {
    grid-template-columns: minmax(280px, 380px) minmax(480px, 620px) minmax(280px, 380px);
    gap: 4rem;
  }

  /* Граффити чуть ближе */
  .graffiti-left-wrapper  { transform: translateX(-240px) translateY(-200px) scale(0.95); }
  .graffiti-right-wrapper { transform: translateX(-200px) translateY(140px) scale(5); }

  .form-wrapper { transform: translateX(120px) translateY(-30px) scale(1); }

  .simple-arrow-wrapper {
    width: 380px;
    right: 80px;
  }
}

/* 4. БОЛЬШИЕ ЭКРАНЫ 1441px+ (FullHD, 2K, 4K) */
@media (min-width: 1441px) {
  .contact-wrapper {
    max-width: 1800px;
    gap: 6rem;
  }

  .graffiti-left-wrapper  { transform: translateX(-360px) translateY(-320px) scale(1.1); }
  .graffiti-right-wrapper { transform: translateX(-1280px) translateY(200px) scale(1.1); }

  .simple-arrow-wrapper { width: 480px; right: 120px; }
}

/* 5. ВЕРТИКАЛЬНЫЕ ТЕЛЕФОНЫ С БОЛЬШИМ ЭКРАНОМ (iPhone 14 Pro Max, Samsung S23 Ultra) */
@media (max-width: 480px) and (min-height: 800px) {
  .contact-form { margin-top: 4rem; }
}

/* 6. ГОРИЗОНТАЛЬНЫЕ ПЛАНШЕТЫ ИЛИ НОУТБУКИ С МАЛЕНЬКОЙ ВЫСОТОЙ */
@media (max-height: 700px) and (orientation: landscape) {
  #contact, #faq { padding: 8vh 4%; }
  .section-title { font-size: 2.8rem; margin-top: -2rem; }
}

/* 7. ФИКС ДЛЯ iPhone SE 1-го поколения (320px) — ничего не должно ломаться */
@media (max-width: 340px) {
  .carousel-arrow { width: 32px; height: 32px; }
  .carousel-arrow.prev  { left: 8px; }
  .carousel-arrow.next { right: 8px; }
  .carousel-progress { bottom: 12px; }
  .progress-bar { width: 32px; }
}
@media (max-width: 2400px) {
  .graffiti-left-wrapper  { transform: translateX(80px) translateY(-240px) !important; }
  .graffiti-right-wrapper { transform: translateX(-1100px) translateY(160px) !important; }
}
@media (max-width: 2031px) {
  .graffiti-left-wrapper  { transform: translateX(-50px) translateY(-240px) !important; }
  .graffiti-right-wrapper { transform: translateX(-1100px) translateY(160px) !important; }
}
@media (max-width: 1700px) {
  .graffiti-left-wrapper  { transform: translateX(-100px) translateY(-240px) !important; }
  .graffiti-right-wrapper { transform: translateX(-900px) translateY(160px) !important; }
}
@media (max-width: 1560px) {
  .graffiti-left-wrapper  { transform: translateX(50px) translateY(-200px) !important; }
  .graffiti-right-wrapper { transform: translateX(-880px) translateY(140px) !important; }
}
@media (max-width: 1440px) {
  .graffiti-left-wrapper  { transform: translateX(70px) translateY(-160px) !important; }
  .graffiti-right-wrapper { transform: translateX(-760px) translateY(120px) !important; }
}
@media (max-width: 1280px) {
  .graffiti-left-wrapper  { transform: translateX(70px) translateY(-120px) !important; }
  .graffiti-right-wrapper { transform: translateX(-740px) translateY(100px) !important; }
}
@media (max-width: 1280px) {
  .graffiti-left-wrapper  { transform: translateX(100px) translateY(-120px) !important; }
  .graffiti-right-wrapper { transform: translateX(-740px) translateY(100px) !important; }
}
/* После 1100px — убираем граффити, расширяем и центрируем форму */
@media (max-width: 1100px) {
  /* 1. Убираем граффити */
  .graffiti-left-wrapper,
  .graffiti-right-wrapper,
  .simple-arrow-wrapper {
    display: none !important;
  }


}
/* УМЕНЬШЕНИЕ — ТОЛЬКО ТЕКСТ, НЕ БЛОК! (красивый перенос + читаемость) */
@media (max-width: 2026px) {
  .graffiti-left-wrapper  .graffiti-text,
  .graffiti-right-wrapper .graffiti-text {
    font-size: 2.4rem !important;     /* было ~2.6rem */
    line-height: 1.35 !important;
  }
}
/* УМЕНЬШЕНИЕ — ТОЛЬКО ТЕКСТ, НЕ БЛОК! (красивый перенос + читаемость) */
@media (max-width: 1921px) {
  .graffiti-left-wrapper  .graffiti-text,
  .graffiti-right-wrapper .graffiti-text {
    font-size: 2.3rem !important;     /* было ~2.6rem */
    line-height: 1.35 !important;
  }
}
/* УМЕНЬШЕНИЕ — ТОЛЬКО ТЕКСТ, НЕ БЛОК! (красивый перенос + читаемость) */
@media (max-width: 1861px) {
  .graffiti-left-wrapper  .graffiti-text,
  .graffiti-right-wrapper .graffiti-text {
    font-size: 2.1rem !important;     /* было ~2.6rem */
    line-height: 1.3 !important;
  }
}
/* УМЕНЬШЕНИЕ — ТОЛЬКО ТЕКСТ, НЕ БЛОК! (красивый перенос + читаемость) */
@media (max-width: 1761px) {
  .graffiti-left-wrapper  .graffiti-text,
  .graffiti-right-wrapper .graffiti-text {
    font-size: 2rem !important;     /* было ~2.6rem */
    line-height: 1.3 !important;
  }
}
@media (max-width: 1695px) {
  .graffiti-left-wrapper  .graffiti-text,
  .graffiti-right-wrapper .graffiti-text {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 1640px) {
  .graffiti-left-wrapper  .graffiti-text,
  .graffiti-right-wrapper .graffiti-text {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 1440px) {
  .graffiti-left-wrapper  .graffiti-text,
  .graffiti-right-wrapper .graffiti-text {
    font-size: 1.7rem !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 1100px) {
  .contact-wrapper {
    grid-template-columns: 1fr minmax(auto, 640px) 1fr !important;
    gap: 3rem;
  }
  .graffiti-left-wrapper,
  .graffiti-right-wrapper {
    transform: translateY(-80px) scale(0.9) !important;
  }
  .simple-arrow-wrapper { display: none; }
}

@media (max-width: 1100px) {
  .contact-wrapper {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    text-align: center;
  }
  .graffiti-left-wrapper  { order: -1; transform: none !important; margin-bottom: 1rem; }
  .graffiti-right-wrapper { order: 1; transform: none !important; margin-top: 1rem; }
  .form-wrapper { transform: none !important; }
}

@media (max-width: 768px) {
  .graffiti-left-wrapper,
  .graffiti-right-wrapper,
  .simple-arrow-wrapper,
  .graffiti-arrow {
    display: none !important;
  }
  .contact-wrapper {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }
  .form-wrapper {
    transform: none !important;
  }
  .contact-form {
    padding: 2.2rem 1.8rem;
  }
  .section-title {
    font-size: 3rem !important;
    margin-top: -2rem;
  }
}

@media (max-width: 480px) {
  .section-title { font-size: 2.6rem !important; }
  .contact-form input,
  .contact-form textarea { font-size: 16px; }
}
/* ФИКС: ФОРМА НИКОГДА НЕ ДОЛЖНА ИСЧЕЗАТЬ НА МОБИЛЬНЫХ */
@media (max-width: 480px) {
  .form-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }

  .contact-form {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2.2rem 1.8rem !important;
    border-radius: 22px !important;
  }

  /* На всякий случай — перебиваем все возможные display: none */
  .contact-form,
  .contact-form *,
  .form-wrapper,
  .form-wrapper * {
    display: block !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    font-size: 16px !important; /* iOS не зумит */
    width: 100% !important;
  }
}

/* Дополнительная страховка для ширины 481–768px (на всякий случай) */
@media (max-width: 768px) {
  .form-wrapper {
    display: block !important;
  }
}
footer {
  padding: 4rem 5% 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem 4rem; /* вертикальный и горизонтальный отступ между блоками */
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--gray);
  min-height: 140px; /* чтобы не "прыгал" при изменении контента */
  box-sizing: border-box;
}

/* Логотип по центру */
.footer-center {
  flex: 1 1 200px;
  display: flex;
  justify-content: center;
  order: 2;
}

.footer-center img {
  height: 80px;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

[data-theme="light"] .footer-center img {
  filter: none;
}

/* Левая часть — копирайт */
.footer-left {
  flex: 1 1 300px;
  order: 1;
  text-align: left;
}

/* Правая часть — ссылки */
.footer-right {
  flex: 1 1 300px;
  order: 3;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.8px;
}

.footer-right a {
  color: var(--gray);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.footer-right a:hover {
  color: var(--text);
}

/* ————————————————————————
   АДАПТИВНОСТЬ НА ВСЕХ ЭКРАНАХ
  ———————————————————————— */
@media (max-width: 992px) {
  footer {
    padding: 3.5rem 5% 2rem;
    gap: 2.5rem 3rem;
  }
  
  .footer-center img {
    height: 70px;
  }
}

@media (max-width: 768px) {
  footer {
    flex-direction: column;
    text-align: center;
    padding: 3rem 5% 2rem;
    gap: 2rem;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    order: unset !important;
    text-align: center;
    flex: 1;
  }

  .footer-right {
    justify-content: center;
    gap: 1.4rem;
    font-size: 0.8rem;
  }

  .footer-center {
    order: -1; /* логотип наверх */
  }

  .footer-center img {
    height: 65px;
  }
}

@media (max-width: 480px) {
  footer {
    padding: 2.5rem 5% 1.8rem;
    font-size: 0.9rem;
  }

  .footer-right {
    flex-direction: column;
    gap: 1rem;
    font-size: 0.8rem;
  }

  .footer-center img {
    height: 60px;
  }
}

html[data-theme="light"] header.scrolled .cart-count {
  background: #000000 !important;   /* чёрный бейджик */
  color: #ffffff !important;         /* белая цифра — ВСЕГДА */
}

/* На всякий случай — и без скролла тоже белая цифра */
html[data-theme="light"] .cart-count {
  background: #000000 !important;
  color: #ffffff !important;
}
/* Стили кнопки обратной связи применяются только для экранов больше 1024px */
@media screen and (min-width: 1025px) {
  html[data-theme="light"] button[class*="feedback"],
  html[data-theme="light"] #feedbackFloatingBtn,
  html[data-theme="light"] .floating-feedback-btn,
  html[data-theme="light"] .feedback-btn,
  html[data-theme="light"] button[id*="feedback"],
  html[data-theme="light"] #feedbackBtn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.2px solid rgba(0,0,0,0.18) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.16) !important;
    opacity: 1 !important;
  }
}
/* Лёгкая чёрная рамка ТОЛЬКО в светлой теме */
[data-theme="light"] .admin-svg circle[stroke="#000"] {
  opacity: 0.18 !important; /* чуть заметнее, но всё ещё элегантно */
}

/* В тёмной теме — рамка исчезает полностью */
[data-theme="dark"] .admin-svg circle[stroke="#000"] {
  opacity: 0;
}

/* Плавное появление/исчезновение рамки при смене темы */
.admin-svg circle[stroke="#000"] {
  transition: opacity 0.4s ease;
}
/* ============================================================= */
/* МОБИЛЬНАЯ КАРУСЕЛЬ — СВАЙПЫ + ПЕРЕМЕЩЕНИЕ ПРОГРЕСС-БАРА    */
/* Работает от 1026px и ниже                                   */
/* ============================================================= */
@media (max-width: 1026px) {

  /* 1. Скрываем стрелки — теперь только свайпы */
  .carousel-arrow {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease;
  }

  /* 2. Прогресс-бар поднимаем выше — больше не перекрывается нижней мобильной панелью */
  .carousel-progress {
    bottom: 88px !important;        /* было 24px → теперь над нижним баром */
    transition: bottom 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* На совсем маленьких экранах (iPhone SE и т.п.) поднимаем ещё выше */
  @media (max-height: 700px) {
    .carousel-progress {
      bottom: 76px !important;
    }
  }

  /* 3. Включаем нативные свайпы (touch) */
  .carousel-container {
    touch-action: pan-y pinch-zoom;       /* только горизонтальные свайпы */
    -webkit-user-select: none;
    user-select: none;
  }

  /* Делаем весь слайд "свайпабельным" */
  #landing,
  .carousel-content,
  .carousel-container {
    cursor: grab;
  }
  #landing:active,
  .carousel-container:active {
    cursor: grabbing;
  }

  /* Подсказка пользователю — лёгкая анимация "свайпни" при первом заходе */
  .carousel-container::after {
    content: '← →';
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.4rem;
    color: rgba(255,255,255,0.45);
    pointer-events: none;
    animation: swipeHint 2.8s ease-out 1.5s forwards;
    z-index: 9;
  }

  @keyframes swipeHint {
    0%, 70%   { opacity: 0.6; transform: translateX(-50%) translateY(0); }
    85%       { opacity: 0.4; transform: translateX(-50%) translateY(-8px); }
    100%      { opacity: 0;   transform: translateX(-50%) translateY(-16px); }
  }

  /* Убираем подсказку, если пользователь уже свайпал хоть раз */
  .carousel-container.swiped::after {
    display: none !important;
  }
}

/* Дополнительно: если хочешь чуть больше места на iPhone с "чёлкой" и нижним баром */
@media (max-width: 1026px) and (max-height: 850px) {
  .carousel-progress {
    bottom: 96px !important;
  }
}

@media (max-width: 1024px) {
  .carousel-progress {
    bottom: clamp(96px, 18vh, 120px) !important;
    transition: bottom 0.4s ease;
  }
}
@media (max-width: 1024px) {
  .carousel-container::after {
    content: '← →';
    position: absolute;
    bottom: clamp(110px, 20vh, 140px) !important;   /* ЭТО ГЛАВНОЕ */
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.8rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    z-index: 9;
    animation: swipeHint 3.2s ease-out 1.8s forwards;
    letter-spacing: 8px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  }

  /* Если хочешь ещё чуть выше на маленьких экранах (iPhone SE, Pixel 5) */
  @media (max-height: 700px) {
    .carousel-container::after {
      bottom: 100px !important;
      font-size: 2.5rem;
    }
  }
}
/* ====================== СТРЕЛКА — ПРОШЛЫЙ РАБОЧИЙ ВАРИАНТ ×3 (усиленный вправо) ====================== */

.simple-arrow-wrapper {
  position: absolute;
  top: 50%;
  right: 8%;                    /* база на широких экранах */
  width: 440px;
  transform: translateY(-50%) rotate(-190deg);
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  transition: opacity 1.2s ease-out, right 0.6s ease, width 0.6s ease;
}

.simple-arrow-wrapper.visible {
  opacity: 1;
}

.simple-arrow-png {
  width: 100%;
  height: auto;
  filter: invert(1) drop-shadow(0 0 40px rgba(255,255,255,0.95));
  transition: filter 0.4s ease;
}

/* ТОТ САМЫЙ РАБОЧИЙ ВАРИАНТ — НО УСИЛЕННЫЙ В 3 РАЗА */
@media (max-width: 2600px) {
  .simple-arrow-wrapper {
    /* БЫЛО: ×0.08 → СЕЙЧАС ×0.24 — в 3 раза сильнее уезжает вправо */
    right: calc(8% + (2600px - 20vw) * 0.001);
    
    /* Уменьшение — мягкое (было ×0.12 → теперь ×0.18, почти незаметно) */
    width: calc(440px - (2600px - 100vw) * 0.15);
  }
}

/* 4K+ — как и было */
@media (min-width: 2601px) {
  .simple-arrow-wrapper {
    right: 6%;
    width: 520px;
  }
}

/* ПЛАНШЕТ — без изменений */
@media (max-width: 1026px) and (min-width: 769px) {
  .simple-arrow-wrapper {
    position: relative;
    left: 50%;
    top: auto;
    right: auto;
    width: 300px;
    margin: 2.5rem auto 0;
    transform: translateX(-50%) rotate(90deg);
    opacity: 1 !important;
  }
}

/* МОБИЛКА */
@media (max-width: 768px) {
  .simple-arrow-wrapper {
    display: none !important;
  }
}

/* Светлая тема */
[data-theme="light"] .simple-arrow-png {
  filter: brightness(0) drop-shadow(0 0 40px rgba(0,0,0,0.8)) !important;
}

/* ============================================================= */
/* FAQ — ИДЕАЛЬНАЯ АДАПТАЦИЯ 2025: clamp + перенос + 2–3 строки   */
/* Работает на .faq-card (новый стиль) и старых .faq-item        */
/* ============================================================= */
@media (max-width: 1024px) {

  /* Заголовок "Часто задаваемые вопросы" */
  #faq .section-title {
    font-size: clamp(2.3rem, 8.2vw, 5.2rem) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.03em !important;
    word-break: break-word;
    hyphens: auto;
  }

  /* Сама сетка — на узких экранах всегда в столбик */
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(1.1rem, 4vw, 1.6rem) !important;
    padding: 0 clamp(0.8rem, 4vw, 1.5rem);
  }

  /* Карточка целиком */
  .faq-card,
  .faq-item {
    padding: clamp(1.6rem, 5.5vw, 2.4rem) !important;
    border-radius: clamp(1.4rem, 4vw, 2rem) !important;
  }

  /* ВОПРОС — максимум 2 строки, красивый перенос */
  .faq-card .question,
  .faq-question {
    font-size: clamp(1.12rem, 4.9vw, 1.42rem) !important;
    line-height: 1.38 !important;
    font-weight: 600 !important;
    word-break: break-word !important;
    hyphens: auto !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Знак + / − — тоже масштабируем */
  .faq-card .question::after,
  .faq-question::after {
    font-size: clamp(1.8rem, 6.5vw, 2.2rem) !important;
    margin-left: clamp(0.6rem, 3vw, 1rem);
  }

  /* ОТВЕТ — максимум 6 строк (чтобы не растягивался на весь экран) */
  .faq-card .answer,
  .faq-answer {
    font-size: clamp(0.98rem, 4.3vw, 1.08rem) !important;
    line-height: 1.68 !important;
    color: rgba(255,255,255,0.88) !important;
    word-break: break-word !important;
    hyphens: auto !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.6s ease !important;
  }

  /* Когда открыт — убираем обрезку */
  .faq-card.active .answer,
  .faq-item.active .faq-answer {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Поисковая строка */
  .faq-search {
    max-width: 96% !important;
    margin: clamp(1.4rem, 5vw, 2rem) auto !important;
    border-radius: 16px !important;
  }

  .faq-search input {
    font-size: clamp(0.98rem, 4.4vw, 1.1rem) !important;
    padding: clamp(0.9rem, 4vw, 1.1rem) 1.4rem !important;
  }
}

/* Экстра-узкие экраны (iPhone SE, 320px и меньше) */
@media (max-width: 380px) {
  .faq-card .question,
  .faq-question {
    font-size: clamp(1.05rem, 5.2vw, 1.3rem) !important;
  }
  .faq-card .answer,
  .faq-answer {
    font-size: clamp(0.94rem, 4.5vw, 1.02rem) !important;
  }
  .faq-card,
  .faq-item {
    padding: clamp(1.4rem, 6vw, 2rem) !important;
  }
}

/* Светлая тема — чтобы текст не терялся */
[data-theme="light"] .faq-card .answer,
[data-theme="light"] .faq-answer {
  color: #333 !important;
}
[data-theme="light"] .faq-card.active .answer,
[data-theme="light"] .faq-item.active .faq-answer {
  color: #333 !important;
}

/* ============================================= */
/* ФИНАЛЬНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ — ДЕКАБРЬ 2025 (300px – 1023px) */
/* Один блок — всё внутри. Больше ничего не трогаем выше */
/* ============================================= */
@media (max-width: 1023px) {

  /* Отступы страницы + мобильный заголовок "Личный кабинет" */
  .profile-fullscreen-container {
    padding: clamp(4rem, 14vw, 7rem) clamp(0.8rem, 5vw, 2rem) clamp(6rem, 15vw, 8rem) !important;
  }

  .profile-fullscreen-container::before {
    content: "Личный кабинет";
    display: block;
    text-align: center;
    font-size: clamp(1.5rem, 6.8vw, 2.1rem);
    font-weight: 700;
    color: #000;
    padding: clamp(1rem, 4vw, 1.6rem) 1rem clamp(0.6rem, 3vw, 1rem);
    margin-bottom: clamp(0.5rem, 2vw, 1.5rem);
  }
  html[data-theme="dark"] .profile-fullscreen-container::before { color: #fff; }

  /* Аватар */
  .profile-hero .company-avatar {
    width: clamp(90px, 28vw, 140px) !important;
    height: clamp(90px, 28vw, 140px) !important;
  }
  .profile-hero .company-name   { font-size: clamp(1.7rem, 7.8vw, 2.6rem); text-align: center; }
  .profile-hero .company-inn    { font-size: clamp(0.95rem, 4.2vw, 1.3rem); text-align: center; }

  /* Заголовки секций */
  .section-header {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
  }
  .section-header h3 {
    font-size: clamp(1.3rem, 6.2vw, 1.7rem);
    text-align: center;
  }

  /* Реквизиты — подписи максимум 2 строки */
  .requisite-label {
    font-size: clamp(0.84rem, 3.9vw, 0.96rem) !important;
    line-height: 1.38 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  .requisite-value {
    font-size: clamp(1.08rem, 4.9vw, 1.35rem);
    line-height: 1.45;
    word-break: break-word;
    hyphens: auto;
  }

  /* Настройки — текст не переносится, тумблер строго справа */
  .setting-item {
    gap: clamp(1rem, 5vw, 2rem);
    justify-content: space-between;
    align-items: center;
  }
  .setting-label,
  .setting-item > *:not(.toggle-switch) {
    font-size: clamp(0.98rem, 4.5vw, 1.25rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1;
    min-width: 0;
    padding-right: 0.5rem;
  }
  .toggle-switch {
    flex-shrink: 0 !important;
    width: clamp(50px, 14vw, 56px) !important;
    height: clamp(30px, 8.5vw, 34px) !important;
  }
  .toggle-slider:before {
    width: clamp(24px, 7vw, 28px) !important;
    height: clamp(24px, 7vw, 28px) !important;
  }
  input:checked + .toggle-slider:before {
    transform: translateX(clamp(18px, 5.5vw, 23px)) !important;
  }

  /* Разделы — иконки в ровном столбике */
  .profile-link {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    gap: clamp(0.9rem, 4.5vw, 1.3rem);
    padding: clamp(1.1rem, 5vw, 1.7rem) clamp(1rem, 5.5vw, 1.8rem);
    font-size: clamp(0.98rem, 4.7vw, 1.22rem);
  }
  .profile-link i {
    font-size: clamp(1.3rem, 5.8vw, 1.55rem);
    width: 34px;
    text-align: center;
  }

  /* Кнопка выхода */
  .logout-btn {
    font-size: clamp(0.94rem, 4.5vw, 1.1rem) !important;
    padding: clamp(0.85rem, 5.2vw, 1.1rem) clamp(2.2rem, 9vw, 3.5rem) !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96%;
  }

  /* Дата регистрации */
  #regDate {
    font-size: clamp(1.25rem, 6.2vw, 1.55rem) !important;
  }
}

/* Самые узкие экраны (iPhone SE и ниже) */
@media (max-width: 360px) {
  .profile-fullscreen-container { padding-left: 0.7rem; padding-right: 0.7rem; }
  .profile-link { grid-template-columns: 30px 1fr; }
  .profile-link i { width: 30px; }
  .toggle-switch { width: 48px !important; height: 29px !important; }
}

/* ============================================================= */
/* ФИНАЛЬНЫЙ ФИКС: "Обратная связь" — идеальный clamp на ВСЕХ экранах */
/* Работает от 300px до 8K, никогда не вылезает, красиво переносится     */
/* ============================================================= */

/* 1. БАЗОВЫЙ РАЗМЕР НА ДЕСКТОПЕ — теперь тоже через clamp! */
#contact .section-title,
#faq .section-title {
  font-size: clamp(2.8rem, 6.5vw, 5.8rem) !important;   /* от 44.8px до 92.8px */
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  word-break: break-word !important;
  hyphens: auto !important;
  text-align: center !important;
  max-width: 100% !important;
  padding: 0 1rem !important;
  margin: clamp(4vh, 8vw, 12vh) auto clamp(2.5rem, 5vw, 4rem) !important;
}

/* 2. На мобильных и планшетах — ещё мягче сжатие */
@media (max-width: 1024px) {
  #contact .section-title,
  #faq .section-title {
    font-size: clamp(2.4rem, 8.2vw, 5.2rem) !important;   /* от 38.4px до 83.2px */
    line-height: 1.18 !important;
  }
}

/* 3. На самых узких экранах (iPhone SE, 320px) — гарантированно влезает */
@media (max-width: 480px) {
  #contact .section-title,
  #faq .section-title {
    font-size: clamp(2.1rem, 9vw, 4.2rem) !important;
    padding: 0 0.8rem !important;
  }
}

/* 4. Страховка: если где-то остался жёсткий размер — убиваем */
.section-title,
#contact .section-title,
#faq .section-title {
  font-size: clamp(2.4rem, 7vw, 5.5rem) !important;   /* глобальная защита */
}

/* ===================================================== */
/* ФИНАЛЬНЫЙ ФИКС ПОЛЯ ТЕЛЕФОНА В ФОРМЕ ОБРАТНОЙ СВЯЗИ    */
/* Работает на всех мобильных + iOS не зумит + курсор не прыгает */
/* ===================================================== */
.contact-form input[type="tel"] {
  /* Запрещаем любой зум на iOS */
  font-size: 16px !important;
  -webkit-text-size-adjust: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Убираем все трансформации с формы и её обёртки на мобильных */
@media (max-width: 1024px) {
  .form-wrapper,
  .contact-form {
    transform: none !important;
    scale: none !important;
  }
}

/* Жёстко фиксируем высоту строки и выравнивание текста */
.contact-form input[type="tel"],
.phone-field-wrapper input {
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 1.6rem !important;
  text-align: left !important;
  letter-spacing: normal !important;
  
  /* Самое важное — отключаем странные мобильные стили */
  -webkit-user-modify: read-write-plaintext-only;
  caret-color: #fff;
}

/* Убиваем автозум на iOS раз и навсегда */
@supports (-webkit-touch-callout: none) {
  .contact-form input[type="tel"] {
    font-size: 16px !important;
  }
}

/* Дополнительная страховка: если кто-то всё же поставил transform */
@media (max-width: 768px) {
  .contact-wrapper * {
    transform: none !important;
  }
  
  .contact-form input[type="tel"] {
    min-height: 56px !important;
    max-height: 56px !important;
  }
}