/* Мобильная и планшетная версия первого экрана (до 1023px).
   Десктоп свёрстан в cqw от ширины макета 1440 — на узком экране всё мельчает,
   поэтому здесь шапка, текст и кнопка получают свои размеры в px,
   а орбита становится «видом с ребра»: плоский широкий эллипс под текстом
   (геометрию считает script.js, см. geometry()). */

.burger,
.mobile-menu { display: none; }

@media (max-width: 1023px) {
  /* ---------- Шапка: лого · Пробный доступ · бургер ---------- */

  .site-header {
    --header-top: calc(env(safe-area-inset-top, 0px) + 10px);
  }

  .brand,
  .site-header.is-scrolled .brand {
    top: var(--header-top);
    left: 16px;
    height: 36px;
    opacity: 1;
    filter: none;
    transform: none;
    pointer-events: auto;
  }

  .brand :is(img, svg) { height: 32px; }

  .nav,
  .login { display: none; }

  .account {
    top: var(--header-top);
    right: 60px;
    left: auto;
    width: auto;
    height: 36px;
  }

  .trial {
    width: auto;
    height: 36px;
    padding: 0 14px;
    border-width: 2px;
    border-radius: 8px;
    font-size: 14px;
    backdrop-filter: none;
  }

  .burger {
    position: absolute;
    z-index: 20;
    top: var(--header-top);
    right: 16px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(244, 235, 255, .1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    cursor: pointer;
  }

  .burger span {
    position: absolute;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 360ms cubic-bezier(.16, 1, .3, 1);
  }

  .burger span:first-child { transform: translateY(-3.5px); }
  .burger span:last-child { transform: translateY(3.5px); }
  .burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

  /* Меню: сплошной тёмный фон, плавное появление, пункты выезжают по очереди.
     Закрытое состояние описывает анимацию закрытия, .is-open — открытия. */
  .mobile-menu {
    --menu-ease: cubic-bezier(.16, 1, .3, 1);
    position: fixed;
    z-index: 10;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 88px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
    visibility: hidden;
    opacity: 0;
    background: #08070c;
    pointer-events: none;
    transition: opacity 280ms ease 60ms, visibility 0s linear 340ms;
  }

  .mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 320ms ease;
  }

  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu__nav a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(244, 235, 255, .08);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .mobile-menu__nav small {
    min-width: 20px;
    color: rgba(244, 235, 255, .36);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  .mobile-menu__nav span {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.04em;
  }

  .mobile-menu__nav svg {
    width: 20px;
    height: 20px;
    margin-left: auto;
    align-self: center;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .3;
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .mobile-menu__nav a:active svg {
    opacity: 1;
    transform: translate3d(2px, -2px, 0);
  }

  .mobile-menu.is-open .mobile-menu__nav a {
    opacity: 1;
    transform: none;
    transition:
      opacity 500ms var(--menu-ease) calc(80ms + var(--i) * 50ms),
      transform 600ms var(--menu-ease) calc(80ms + var(--i) * 50ms);
  }

  .mobile-menu__nav a:nth-child(1) { --i: 0; }
  .mobile-menu__nav a:nth-child(2) { --i: 1; }
  .mobile-menu__nav a:nth-child(3) { --i: 2; }

  .mobile-menu__foot {
    margin-top: auto;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .mobile-menu.is-open .mobile-menu__foot {
    opacity: 1;
    transform: none;
    transition:
      opacity 500ms var(--menu-ease) 240ms,
      transform 600ms var(--menu-ease) 240ms;
  }

  .mobile-menu__actions {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8px;
  }

  .mobile-menu__login,
  .mobile-menu__trial {
    display: flex;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.02em;
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms ease;
  }

  .mobile-menu__login {
    border: 1px solid rgba(244, 235, 255, .14);
    color: var(--ink);
  }

  .mobile-menu__trial {
    border: 2px solid rgba(108, 67, 255, .3);
    color: var(--violet-deep);
    background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  }

  .mobile-menu__trial img { width: 20px; height: 20px; }
  .mobile-menu__login:active,
  .mobile-menu__trial:active { transform: scale(.98); }

  .mobile-menu__note {
    margin: 16px 0 0;
    color: rgba(244, 235, 255, .32);
    font-size: 12px;
    text-align: center;
  }

  /* Пока меню открыто, кнопка в шапке прячется — она есть внизу меню. */
  .account {
    transition: opacity 400ms var(--ease, ease), filter 400ms ease;
  }

  .site-header.is-menu-open .account {
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
  }


  /* ---------- Текст: обычный поток вместо абсолютных cqw ---------- */

  .hero-copy {
    top: calc(env(safe-area-inset-top, 0px) + clamp(96px, 16svh, 170px));
    right: 16px;
    left: 16px;
    width: auto;
    height: auto;
  }

  .hero-copy .cup-mark {
    position: static;
    display: block;
    width: 32px;
    height: 40px;
    margin: 0 auto 18px;
  }

  .hero-copy h1 {
    position: static;
    width: auto;
    font-size: clamp(27px, 7.8vw, 44px);
    line-height: 1.04;
  }

  .hero-copy p {
    position: static;
    width: auto;
    margin-top: 14px;
    font-size: clamp(16px, 4.1vw, 19px);
    line-height: 1.3;
  }

  /* ---------- Кнопка: во всю ширину у нижнего края ---------- */

  .primary-cta {
    --glow-blur: 40px;
    top: auto;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    left: 16px;
    width: auto;
    max-width: 420px;
    height: 52px;
    margin: 0 auto;
    gap: 8px;
    border-width: 2px;
    border-radius: 10px;
    box-shadow: 0 4px 40px rgba(244, 235, 255, .3);
  }

  .primary-cta img { width: 22px; height: 22px; }

  /* Подсказка между каруселью и кнопкой: сайт листается дальше.
     Гаснет, как только начали листать (script.js, .is-hidden). */
  .scroll-hint {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px + 52px + 14px);
    left: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: rgba(244, 235, 255, .55);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    transition: opacity 400ms ease;
  }

  .scroll-hint svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
    animation: scroll-hint-bob 1.6s ease-in-out infinite;
  }

  .scroll-hint.is-hidden { opacity: 0; }

  @keyframes scroll-hint-bob {
    50% { transform: translateY(3px); }
  }
  .primary-cta span { font-size: 17px; }

  /* ---------- Орбита «с ребра» ---------- */

  .orbit { top: 62%; }

  /* Свайп вбок крутит орбиту (script.js), вертикальный — прокручивает страницу. */
  .stage { touch-action: pan-y; }

  .orbit-card {
    --card-w: clamp(176px, 46vw, 260px);
    width: var(--card-w);
    height: calc(var(--card-w) * .625);
    font-size: calc(var(--card-w) / 16);
  }

  /* На узком экране 6 карточек: иначе дальний ряд превращается в кашу. */
  .orbit-card:nth-child(n + 7) { display: none; }
}

/* ---------- Второй блок: возможности платформы ----------
   Меню разделов — строкой под шапкой, текст крупнее, макет под ним.
   На телефоне макет занимает всё свободное место по высоте
   (компактная раскладка в mockups.js), на планшете — десктопный макет. */
@media (max-width: 1023px) {
  /* Меню разделов на узком экране не показываем: раздел и так назван заголовком. */
  .feature-menu { display: none; }

  .feature-stack {
    top: 0;
    width: calc(100% - 32px);
    max-width: 800px;
  }

  .feature-content {
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 80px) 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
  }

  .feature-content h2 { font-size: clamp(28px, 7.4vw, 40px); }

  .feature-content p {
    min-height: 0;
    margin: 10px 0 18px;
    font-size: clamp(15px, 3.9vw, 18px);
  }

  .feature-content p br { display: none; }
  .feature-content p { text-wrap: balance; }
}

@media (max-width: 639px) {
  .feature-preview {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ---------- Тарифы: переключатель + карусель ----------
   Сверху — сегментированный переключатель с плашкой, которая переезжает
   за активным тарифом. Ниже — карусель со снапом: карточка ~78% ширины,
   соседние заметно выглядывают. При первом появлении карточки один раз
   «качаются», подсказывая жест. Под каруселью — точки-индикатор. */
.plans-switch,
.plans-dots { display: none; }

@media (max-width: 1023px) {
  .pricing {
    --px: 1px;
    --plan-w: min(78vw, 360px);
    padding: 96px 0 96px;
  }

  .pricing__head {
    margin-bottom: 24px;
    padding: 0 16px;
  }

  .pricing__head h2 { font-size: 36px; }
  .pricing__head p { font-size: 17px; }

  .plans-switch {
    --i: 1;
    position: relative;
    display: grid;
    width: min(100% - 32px, 380px);
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto 8px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(244, 235, 255, .08);
  }

  .plans-switch__pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 3);
    border-radius: 8px;
    background: rgba(244, 235, 255, .14);
    transform: translateX(calc(var(--i) * 100%));
    transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
  }

  .plans-switch button {
    position: relative;
    height: 40px;
    padding: 0;
    border: 0;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 300ms ease;
  }

  .plans-switch button.is-active { color: var(--ink); }

  .plans {
    position: relative;
    grid-template-columns: none;
    grid-auto-columns: var(--plan-w);
    grid-auto-flow: column;
    justify-content: start;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 20px calc((100vw - var(--plan-w)) / 2) 8px;
    scroll-padding-inline: calc((100vw - var(--plan-w)) / 2);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .plans::-webkit-scrollbar { display: none; }

  .plan {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .plan__head p { min-height: 0; }

  /* «до 1000+ пользователей» не помещалось в узкую карточку. На телефоне
     у всех тарифов одинаково: «до N» крупно, «пользователей» строкой ниже. */
  .plan__metric { flex-wrap: wrap; row-gap: 8px; }
  .plan__metric strong { font-size: 44px; }
  .plan__metric span { flex-basis: 100%; font-size: 15px; }
  .plan__metric small { font-size: 15px; }

  .plan.is-side {
    opacity: .6;
    filter: blur(1.5px);
    transform: scale(.95);
  }

  /* Подсказка жеста: один раз при первом появлении. */
  .plans.is-nudging .plan { animation: plans-nudge 1100ms cubic-bezier(.45, 0, .2, 1); }

  @keyframes plans-nudge {
    35% { translate: -34px 0; }
    70% { translate: 6px 0; }
  }

  .plans-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
  }

  .plans-dots i {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: rgba(244, 235, 255, .2);
    transition: width 420ms cubic-bezier(.16, 1, .3, 1), background-color 300ms ease;
  }

  .plans-dots i.is-active {
    width: 20px;
    background: rgba(244, 235, 255, .7);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .plans.is-nudging .plan { animation: none; }
}

/* ---------- Заявка: пропуск над формой, всё по центру ----------
   Правило из signup.css (до 900px) расширено до 1023px — как у остальных блоков. */
@media (max-width: 1023px) {
  .signup {
    --px: 1px;
    min-height: 0;
    padding: 112px 16px 128px;
  }

  .signup__inner {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
    gap: 36px;
  }

  /* Размеры пропуска в --px, поэтому уменьшаем его одним множителем. */
  .pass-hanger {
    --px: .72px;
    order: -1;
    justify-self: center;
    width: calc(var(--px) * 340);
  }

  .signup__head {
    margin-bottom: 28px;
    text-align: center;
  }

  .signup__head h2 { font-size: 40px; }
  .signup__head p { font-size: 17px; }
  .signup__note,
  .signup__done { text-align: center; }
}

/* Пропуск крутится горизонтальным свайпом; вертикальный остаётся прокруткой. */
@media (max-width: 1023px) {
  .pass-flip {
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }

  .pass-flip.is-dragging { cursor: grabbing; }

}

@media (max-width: 380px) {
  .pass-hanger { --px: .64px; }
  .signup__head h2 { font-size: 36px; }
}

/* ---------- Подвал ----------
   Правило из footer.css (до 900px) расширено до 1023px. На телефоне вордмарк
   встаёт в две строки и становится почти вдвое крупнее; если подвал выше
   экрана, он перестаёт быть «занавесом» и едет следом (класс ставит footer.js). */
@media (max-width: 1023px) {
  .site-footer { --px: 1px; }
  .site-footer.is-static { position: relative; }
  main { --sheet-fade: 120px; }

  .footer__inner { padding: 56px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .footer__top { grid-template-columns: 1fr; gap: 36px; padding: 0; }
  .footer__mark { margin-bottom: 18px; }
  .footer__title { margin-bottom: 22px; font-size: 28px; text-wrap: balance; }
  /* Жёсткий перенос из десктопной вёрстки на узком экране отрывал тире. */
  .footer__title br { display: none; }

  .footer__cta {
    width: 100%;
    max-width: 420px;
    height: 52px;
    justify-content: center;
    border-radius: 10px;
    font-size: 17px;
  }

  .footer__nav { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .footer__col-title { margin-bottom: 14px; }
  .footer__col ul { gap: 14px; }
  .footer__link { font-size: 17px; }

  .footer__word {
    --r: calc(130px * var(--lens, 1));
    --haze-blur: 14px;
    margin: 36px 0 20px;
    touch-action: pan-y;
  }

  .footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 16px;
    padding: 16px 0 0;
  }

  .footer__bottom a { grid-row: 2; grid-column: 1 / -1; }
  .footer__totop { grid-row: 1; grid-column: 2; }
}

@media (max-width: 639px) {
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
  .footer__col:last-child { grid-column: 1 / -1; }

  /* «Double» и «Hub» — две строки: так надпись почти вдвое крупнее.
     Значок над заголовком убираем: бренд и так на полэкрана, а подвал
     должен помещаться в экран, чтобы работал «занавес». */
  .footer__inner { padding-top: 40px; }
  .footer__mark { display: none; }
  .footer__col ul { gap: 12px; }
  /* Надпись уже экрана: по бокам остаётся место, чтобы свечение не обрезалось. */
  .footer__word { --fit: .82; margin: 24px 0 12px; font-size: 120px; line-height: .86; }
  .footer__word-row span.is-space { display: block; width: 0; height: 0; }
}

/* Телефон в горизонтальном положении: по высоте места нет — орбиту убираем,
   текст и кнопка встают по центру. */
@media (max-width: 1023px) and (max-height: 520px) {
  .orbit-scene { display: none; }
  .hero-copy { top: calc(env(safe-area-inset-top, 0px) + 72px); }
  .hero-copy .cup-mark { margin-bottom: 12px; }
  .hero-copy h1 { font-size: 30px; }
  .primary-cta { max-width: 260px; }
  /* Карусели здесь нет, а по высоте подсказке места не хватает. */
  .scroll-hint { display: none; }
}

/* Тач-экраны: :hover «залипает» после касания, поэтому фирменное размытие
   соседей при наведении здесь выключено. */
@media (hover: none) {
  .site-header :is(.nav a, .login, .trial),
  .site-header.is-scrolled .brand,
  .site-header .nav::before,
  .stage .hero-copy,
  .stage .orbit-scene {
    filter: none !important;
    opacity: 1 !important;
  }

  .orbit-card:hover {
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 1.1111cqw 3.3333cqw rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .scroll-hint svg { animation: none; }

  .mobile-menu :is(.mobile-menu__nav a, .mobile-menu__foot),
  .mobile-menu.is-open :is(.mobile-menu__nav a, .mobile-menu__foot) {
    transform: none;
  }
}

/* ---------- Производительность на тач-устройствах ----------
   Стеклянное размытие под тарифами и полями формы там незаметно (под ним
   тёмный фон), а перерисовывается при каждой прокрутке. Правило в конце,
   чтобы перебить исходные стили блоков. */
@media (hover: none) and (pointer: coarse) {
  .plan,
  .field__input,
  .burger { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .burger { background: rgba(244, 235, 255, .12); }
}