/* ===== Слайд 11 — "Мы не продаем гостинице еще одну программу" / контакты
     (Figma node 2898:4297, названа в самой Figma "Why US2 (desktop)" — та же
     ситуация, что и у слайдов 8/9/10: внутреннее имя фрейма унаследовано от
     дублирования, контент — блок "свяжитесь с нами": заголовок+подзаголовок,
     три способа связи (телефон/почта/адрес) и CTA-кнопка) =====
     Одиннадцатая, ПОСЛЕДНЯЯ реальная позиция трека (TOTAL=11 в js/slides.js).
     Единственный вход — advance() из слайда 10 (index===9→10), единственный
     обратный путь — retreat() в слайд 10. phone-frame — та же крошечная
     обводка (см. SLIDE11_PHONE_BACK/setPhoneSlide11 в js/phone-shared.js),
     едет ещё раз (вниз относительно слайда 10: top 196.992→365.028) —
     ВПЕРВЫЕ приземляется ВНУТРИ непрозрачного элемента контента (жёлтый
     кружок "Позвонить нам"), поэтому setPhoneSlide11 поднимает z-index
     общего слоя НАД #slide-track (Z_SLIDE3, та же константа, что у
     Solution/App — иначе обводка была бы полностью не видна ПОД кружком).
     colorBack НЕ трогается — остаётся на позиции Guest (`APP_COLORBACK`),
     см. SLIDE8_COLORBACK в js/phone-shared.js. */
  #slide-11{ top:7600px; }

  .connect-heading{
    position:absolute; left:232px; top:137px; width:1013px; margin:0; opacity:0;
    /* 600 (SemiBold), не 700 — правка 2026-08-07. Это был ПОСЛЕДНИЙ Bold в
       проекте; вместе с ним из css/fonts.css удалён и сам файл начертания. */
    font-family:'Unbounded',sans-serif; font-weight:600; font-size:52px; line-height:1.1;
    color:#1A1A1C; text-align:center;
  }
  .connect-subheading{
    position:absolute; left:316px; top:267px; width:845px; margin:0; opacity:0;
    font-family:'Unbounded',sans-serif; font-weight:500; font-size:24px; line-height:1.3;
    color:#1A1A1C; text-align:center;
  }
  /* Жёлтые кружки (bg:#FFE300 — ТОТ ЖЕ жёлтый, что и фон страницы) под каждой
     иконкой — не декоративный акцент, а "заплатка", вырезающая круглую дыру в
     цветном градиенте .color-back там, где он в неё попадает (1:1 с Figma,
     явно заданный fill, не прозрачность) — так иконки остаются на чистом
     жёлтом, а не на произвольном участке градиента позади. Обычный контент
     слайда (z-index не задаём — уже выше .color-back по общему правилу
     #slide-track(2) > .color-back(1), см. память проекта). */
  .connect-circle{
    position:absolute; top:368px; width:112px; height:112px; opacity:0;
    border-radius:50%; background:#FFE300; pointer-events:none;
  }
  .connect-circle--phone{ left:224px; }
  .connect-circle--mail{ left:664px; }
  .connect-circle--address{ left:1129px; }
  /* Иконки почты/адреса — готовые SVG, которые Серг сам положил в корень
     проекта (mail.svg/location.svg, обычные однотонные лайн-иконки, не
     Figma-экспорт) — скопированы в images/ рядом с остальными ассетами.
     Иконка "телефона" отдельного файла не имеет — это сама общая переезжающая
     обводка (.phone-frame-back), приземляющаяся ровно в .connect-circle--phone
     (см. SLIDE11_PHONE_BACK выше). */
  .connect-icon{ position:absolute; display:block; opacity:0; pointer-events:none; }
  .connect-icon--mail{ left:680px; top:384px; width:80px; height:80px; }
  .connect-icon--address{ left:1147px; top:380px; width:80px; height:80px; }

  .connect-item{
    position:absolute; top:506px; margin:0; opacity:0;
    display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  }
  .connect-item--phone{ left:114px; width:332px; }
  .connect-item--mail{ left:554px; width:332px; }
  .connect-item--address{ left:997px; width:380px; }
  .connect-item__label{
    margin:0; font-family:'Source Sans Pro',sans-serif; font-weight:600; font-size:16px;
    letter-spacing:0.5714px; text-transform:uppercase; color:#1A1A1C;
  }
  .connect-item__value{
    margin:0; font-family:'Unbounded',sans-serif; font-weight:500; font-size:24px; line-height:1.3;
    color:#1A1A1C;
  }
  /* Кнопка "Напишите нам" (Figma "Buttons / Filled 52", 2898:5104) — тот же
     пилюля-паттерн, что и .demo-cta, просто короче текст. Ширина — auto
     (padding:0 20px, тот же паттерн, что и у .demo-cta/.solution-btn) —
     фиксированный px, подобранный под текст в одном браузере, переполняется
     в другом при иных метриках шрифта (нашли на Safari). left:50% +
     translateX(-50%) вместо расчётного left держит центр по канве (720px)
     НЕЗАВИСИМО от фактической ширины — раньше left был жёстко посчитан под
     фиксированную ширину (637+166/2=720), с auto-шириной та формула сломала
     бы центрирование. Открывает панель-форму «Демонстрация» — висит в общем
     списке openTriggers (js/nav-menu.js) вместе с кнопкой хедера и Hero. */
  .connect-cta{
    position:absolute; left:0; right:0; margin:0 auto; width:max-content;
    top:617px; height:52px; padding:0 20px; opacity:0;
    display:flex; align-items:center; justify-content:center;
    background:#1A1A1C; border:none; border-radius:26px; cursor:pointer;
  }
  .connect-cta__text{
    margin:0; font-family:'Source Sans Pro',sans-serif; font-weight:600; font-size:16px;
    letter-spacing:0.7143px; text-transform:uppercase; color:#fff; white-space:nowrap;
  }

  /* ===== Рамка-ссылка вокруг пункта связи (правка 2026-08-07) =============
     Просьба пользователя: «такая же рамка вокруг 3-х пунктов связи при
     ховере, как на слайде 4». Механика 1:1 с `.sol-block` (css/slide3-cost.css):
     рамка `1px dashed` стоит ВСЕГДА, просто прозрачная, а по наведению
     меняется только `border-color` — так вёрстка не дёргается на 1px в
     момент ховера. Радиус 24 и цвет `--ink` — оттуда же.

     ГЕОМЕТРИЯ СЧИТАНА, А НЕ ВЗЯТА ИЗ МАКЕТА (в Figma этой рамки нет).
     Рамка охватывает кружок с иконкой И подпись — то есть всю группу:
       кружок   top 368, высота 112  → низ 480
       подпись  top 506, высота 55 (телефон/почта) или 86 (адрес, две строки)
     Верх рамки — 344 (24 над кружком). Низ — 604, и это НЕ симметричные 24
     снизу, а 12: кнопка «Напишите нам» начинается на 617, при 24 рамка
     упёрлась бы прямо в неё. Высота у всех трёх одинаковая (260) намеренно —
     разная высота из-за двухстрочного адреса читалась бы как ошибка вёрстки.
     Ширина — по тексту плюс 24 с каждой стороны (кружок уже 112 и внутрь
     попадает с запасом): 332+48=380 у телефона и почты, 380+48=428 у адреса.
     Правый край адресной рамки 973+428=1401, до края канваса ещё 39.

     Слой `pointer-events:none`, ловят наведение только сами рамки — иначе
     прозрачный контейнер во весь слайд перехватывал бы клики по кнопке. */
  .connect-blocks{ position:absolute; inset:0; pointer-events:none; }
  .connect-block{
    position:absolute; top:344px; height:260px; box-sizing:border-box;
    display:block; text-decoration:none; pointer-events:auto; cursor:pointer;
    border:1px dashed transparent; border-radius:24px;
    transition:border-color 0.18s ease;
  }
  .connect-block:hover,
  .connect-block:focus-visible{ border-color:var(--ink); outline:none; }
  .connect-block--phone{ left:90px; width:380px; }
  .connect-block--mail{ left:530px; width:380px; }
  .connect-block--address{ left:973px; width:428px; }