html,
      body {
        font-family: "Inter", sans-serif;
        background: #ffffff;
        color: #222222;
        overflow-x: hidden;
      }

      .header-solid {
        background: #ffffff;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      }

      .scroll-reveal {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .scroll-reveal.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      .reveal-left {
        opacity: 0;
        transform: translateX(-40px);
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .reveal-left.is-visible {
        opacity: 1;
        transform: translateX(0);
      }

      .reveal-right {
        opacity: 0;
        transform: translateX(40px);
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .reveal-right.is-visible {
        opacity: 1;
        transform: translateX(0);
      }

      .btn-corporate {
        background-color: #e37a1d;
        color: white;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(227, 122, 29, 0.2);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translateZ(0);
        will-change: transform, box-shadow;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .btn-corporate:hover {
        background-color: #cc6c18;
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 8px 25px rgba(227, 122, 29, 0.4);
      }

      .btn-outline {
        border: 2px solid #005b8f;
        color: #005b8f;
        background: transparent;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translateZ(0);
        will-change: transform, box-shadow;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .btn-outline:hover {
        background: #005b8f;
        color: white;
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 8px 25px rgba(0, 91, 143, 0.25);
      }

      .perspective-container {
        perspective: 1200px;
      }

      .img-3d {
        transform: rotateY(-12deg) rotateX(6deg) scale(0.98);
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: -20px 25px 40px rgba(0, 0, 0, 0.15);
        will-change: transform, box-shadow;
      }
      .img-3d:hover {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }

      .img-3d-reverse {
        transform: rotateY(12deg) rotateX(6deg) scale(0.98);
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 20px 25px 40px rgba(0, 0, 0, 0.15);
        will-change: transform, box-shadow;
      }
      .img-3d-reverse:hover {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }

      @keyframes floatDownHero {
        0%,
        100% {
          transform: translateY(0) translateX(-50%);
        }
        50% {
          transform: translateY(20px) translateX(-50%);
        }
      }
      .hero-arrow {
        animation: floatDownHero 3.5s ease-in-out infinite;
      }
      .hero-arrow:hover {
        animation-play-state: paused;
        filter: drop-shadow(0 0 10px rgba(0, 159, 227, 0.6));
      }

      /* 3D Карточки Кейсов */
      .case-wrapper {
        perspective: 1200px;
        display: block;
        cursor: pointer;
      }
      .case-3d {
        /* 1. Возвращаем translateZ вместо scale (идеальная четкость во время движения) */
        transform: rotateY(-8deg) rotateX(4deg) translateZ(-15px);
        transition:
          transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform-style: preserve-3d;
        border-radius: 0.5rem;
        position: relative;
        overflow: hidden;
        box-shadow: -15px 20px 30px rgba(0, 0, 0, 0.15);
        background-color: #222;
        outline: 1px solid transparent;
        -webkit-font-smoothing: antialiased;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* ПОЛНОСТЬЮ УБРАЛИ will-change, чтобы браузер не "мылил" текстуру */
      }
      .case-wrapper:nth-child(even) .case-3d {
        transform: rotateY(8deg) rotateX(4deg) translateZ(-15px);
        box-shadow: 15px 20px 30px rgba(0, 0, 0, 0.15);
      }
      .case-wrapper:hover .case-3d {
        /* 2. Микро-градус 0.01deg. Глазу не видно, но браузер не может схлопнуть слой в 2D, поэтому скачка резкости в конце больше нет */
        transform: rotateY(0.01deg) rotateX(0.01deg) translateZ(45px);
        box-shadow: 0 15px 40px rgba(0, 91, 143, 0.3);
        z-index: 20;
      }
      .case-bg {
        /* Фон сделан чуть больше с запасом */
        position: absolute;
        top: -5%;
        left: -5%;
        right: -5%;
        bottom: -5%;
        background-size: cover;
        background-position: center;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
      }
      .case-wrapper:hover .case-bg {
        /* Легкий параллакс фона (углубление) */
        transform: translateZ(10px);
      }
      .case-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(0, 30, 50, 0.95) 0%,
          rgba(0, 30, 50, 0.3) 60%,
          transparent 100%
        );
        z-index: 1;
        transition: background 0.4s ease;
      }
      .case-wrapper:hover .case-overlay {
        background: linear-gradient(
          to top,
          rgba(0, 91, 143, 0.95) 0%,
          rgba(0, 30, 50, 0.4) 70%,
          transparent 100%
        );
      }
      .case-content {
        position: relative;
        z-index: 2;
        padding: 1rem;
        color: white;
        /* 3. Физически отрываем текст от фона. Это намертво блокирует дерганье букв. */
        transform: translateZ(1px);
      }

      .hide-scroll-bar::-webkit-scrollbar {
        display: none;
      }
      .hide-scroll-bar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      .comparison-bg {
        background: linear-gradient(-45deg, #ffffff, #f0f8ff, #e6f2ff, #f8fafc);
        background-size: 400% 400%;
        animation: gradientAnim 12s ease infinite;
        position: relative;
        overflow: hidden;
      }
      @keyframes gradientAnim {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      .floating-shape {
        position: absolute;
        border-radius: 50%;
        filter: blur(40px);
        animation: floatShape 10s ease-in-out infinite alternate;
        z-index: 0;
        pointer-events: none;
      }
      @keyframes floatShape {
        0% {
          transform: translate(0, 0) scale(1);
        }
        100% {
          transform: translate(30px, -50px) scale(1.2);
        }
      }

      /* Анимация Микрофона */
      @keyframes pulseShake {
        0% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(0, 91, 143, 0.3);
        }
        10% {
          transform: scale(1.1) rotate(-5deg);
        }
        20% {
          transform: scale(1.1) rotate(5deg);
        }
        30% {
          transform: scale(1.1) rotate(-5deg);
        }
        40% {
          transform: scale(1.1) rotate(0deg);
          box-shadow: 0 0 0 8px rgba(0, 91, 143, 0);
        }
        100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(0, 91, 143, 0);
        }
      }
      .mic-attention {
        animation: pulseShake 2.5s infinite;
        color: #005b8f;
      }
      .mic-recording {
        background-color: #ef4444 !important;
        color: white !important;
        border-color: #ef4444 !important;
        animation: pulse-red 1.5s infinite !important;
      }
      @keyframes pulse-red {
        0% {
          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        }
        100% {
          box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
        }
      }

      #mobile-menu-btn.menu-open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
      }
      #mobile-menu-btn.menu-open span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
      }
      #mobile-menu-btn.menu-open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
      }

      .mc-modal {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.4s ease, opacity 0.4s ease;
      }
      .mc-modal.is-open {
        visibility: visible;
        opacity: 1;
      }
      .mc-modal-content {
        /* Плавный старт: окно появляется чуть снизу и на 5% меньше */
        transform: scale(0.95) translateY(20px);
        opacity: 0;
        /* Форсируем аппаратное ускорение (GPU) для 60-120 FPS */
        will-change: transform, opacity;
        /* Премиальная плавная кривая (ease-out) */
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
      }
      .mc-modal.is-open .mc-modal-content {
        /* Конечное состояние */
        transform: scale(1) translateY(0);
        opacity: 1;
      }

      /* Скругления делаем статичными, чтобы не нагружать процессор анимацией */
      @media (max-width: 639px) {
        .mc-modal .mc-modal-content {
          border-radius: 1.5rem 1.5rem 0 0; /* Идеальные круглые углы только сверху для мобилок */
        }
      }
      @media (min-width: 640px) {
        .mc-modal .mc-modal-content {
          border-radius: 0.5rem;
        }
      }
      
      .smooth-error {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .smooth-error.show {
        max-height: 100px;
        opacity: 1;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-width: 1px;
      }

      .checkbox-error {
        outline: 2px solid #ef4444 !important;
        outline-offset: 2px !important;
        border-color: #ef4444 !important;
      }
      .error-border {
        border-color: #ef4444 !important;
      }

      @keyframes pulseReady {
        0% {
          box-shadow: 0 4px 10px rgba(227, 122, 29, 0.2);
          transform: scale(1);
        }
        50% {
          box-shadow: 0 0 15px rgba(227, 122, 29, 0.6);
          transform: scale(1.02);
        }
        100% {
          box-shadow: 0 4px 10px rgba(227, 122, 29, 0.2);
          transform: scale(1);
        }
      }
      .btn-ready {
        animation: pulseReady 2s infinite;
      }

      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-thumb {
        background: #005b8f;
        border-radius: 4px;
      }
      ::-webkit-scrollbar-track {
        background: #f5f5f5;
      }
      .city-dropdown-scroll::-webkit-scrollbar {
        width: 4px;
      }
      .city-dropdown-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
      }

      #scroll-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition:
          opacity 0.3s ease,
          transform 0.3s ease,
          background-color 0.3s ease;
      }
      #scroll-to-top.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      .step-fade-in {
        animation: stepFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }
      @keyframes stepFade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      /* Стабилизация для шагов формы */
      .form-step-1,
      .form-step-2 {
        /* Форсируем аппаратное ускорение */
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
        /* Убираем "дерганье" шрифта */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* Оптимизируем только нужные свойства для анимации */
        will-change: transform, opacity;
      }