/* «Включи систему» — страница «Контакты» (contacts.html).
   Подключать после brand-tokens.css и styles.css: оттуда токены, шапка (.nav), футер (.foot) и dotPulse.
   Вся страница — один кино-кадр стройки с контактами поверх, как HUD в hero главной:
   светятся только брекеты, точка и голубые акценты, текст не светится. */

.ct-top { position: relative; background: linear-gradient(180deg, #080D18 0%, #0B1220 100%); padding: 0; }
.ct-top .nav { position: relative; }

.ct { background: #0B1220; padding: 2.5rem 0 6rem; }
.ct h1 { margin: 0; text-transform: none; text-wrap: pretty; }

/* ---------- кадр ---------- */
.ct-frame { position: relative; border-radius: 0.25rem; overflow: hidden; background: #0B1220; }
.ct-frame__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.ct-frame__veil { position: absolute; inset: 0; pointer-events: none; }
.ct-frame__veil--tint { background: rgba(13, 32, 66, 0.44); }
.ct-frame__veil--left { background: linear-gradient(90deg, rgba(4,7,14,.95) 0%, rgba(4,7,14,.86) 38%, rgba(4,7,14,.42) 74%, rgba(4,7,14,.22) 100%); }
.ct-frame__veil--bottom { background: linear-gradient(180deg, rgba(4,7,14,.55) 0%, rgba(4,7,14,.1) 34%, rgba(4,7,14,.82) 100%); }
.ct-frame__content { position: relative; z-index: 1; }

/* ---------- 1. шапка кадра ---------- */
.ct-head { padding: 6rem 4.5rem 3.5rem; }
.ct-kicker { font-size: 0.625rem; letter-spacing: 0.24em; color: #5EC8F8; }
.ct-title { margin-top: 1rem; max-width: 51.25rem; font-size: 3.5rem; line-height: 1.06; font-weight: 600; letter-spacing: -0.032em; color: #F2F7FD; }
.ct-title span { color: #5EC8F8; }
.ct-lead { margin: 1.25rem 0 0; max-width: 40rem; font-size: 1.3125rem; line-height: 1.5; color: #C9D8EA; text-wrap: pretty; }

/* ---------- 2. каналы: две HUD-панели, равные по весу ---------- */
.ct-channels {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 4.5rem;
  border-top: 1px solid rgba(159, 224, 255, 0.16); border-bottom: 1px solid rgba(159, 224, 255, 0.16);
}
.ct-channel {
  position: relative; display: block; min-height: 2.75rem;
  padding: 1.875rem 1.75rem;
  background: rgba(8, 16, 30, 0.55);
  backdrop-filter: blur(0.5rem);
  color: inherit;
  transition: background var(--t-micro) var(--ease);
}
.ct-channel + .ct-channel { border-left: 1px solid rgba(159, 224, 255, 0.16); }
.ct-channel:hover { background: rgba(12, 28, 52, 0.7); color: inherit; }
/* два брекета по диагонали: верхний левый и нижний правый */
.ct-channel > i { position: absolute; width: 0.625rem; height: 0.625rem; border: 0 solid rgba(159, 224, 255, 0.7); pointer-events: none; }
.ct-channel > i:nth-of-type(1) { top: 0.5rem; left: 0.5rem; border-top-width: 1.5px; border-left-width: 1.5px; }
.ct-channel > i:nth-of-type(2) { bottom: 0.5rem; right: 0.5rem; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.ct-channel__label { display: block; font-size: 0.5938rem; letter-spacing: 0.2em; color: #9FDFFF; }
.ct-channel__value { display: block; margin-top: 0.75rem; font-family: var(--font-mono); font-size: 1.625rem; line-height: 1.2; color: #F2F7FD; white-space: nowrap; }
.ct-channel__note { display: block; margin-top: 0.625rem; max-width: 20rem; font-size: 0.9375rem; line-height: 1.5; color: #9FB4CE; text-wrap: pretty; }

/* ---------- 3. «Напишите, если» ---------- */
.ct-why { padding: 2.75rem 4.5rem 0; }
.ct-why__label { font-size: 0.625rem; letter-spacing: 0.2em; color: #8FA6C4; }
.ct-pills { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }
.ct-pill {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0.8125rem 1.125rem;
  background: rgba(8, 16, 30, 0.5);
  border: 1px solid rgba(159, 224, 255, 0.28); border-radius: 0.5625rem;
  backdrop-filter: blur(0.375rem);
  font-size: 1rem; font-weight: 500; line-height: 1.2;
  color: #DFEDFA; white-space: nowrap;
  transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.ct-pill:hover { background: rgba(15, 111, 216, 0.22); border-color: rgba(159, 224, 255, 0.7); color: #FFFFFF; }

/* ---------- 4. подвал кадра ---------- */
.ct-foot { padding: 3.5rem 4.5rem 4.5rem; }
.ct-foot__row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  border-top: 1px solid rgba(159, 224, 255, 0.16); padding-top: 2rem;
}
.ct-read__label { font-size: 0.5938rem; letter-spacing: 0.2em; color: #6B82A4; }
.ct-read__items { display: flex; gap: 1.75rem; flex-wrap: wrap; margin-top: 1rem; }
.ct-read__item { display: block; min-height: 2.75rem; color: inherit; }
.ct-read__item:hover { color: inherit; }
.ct-read__name { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: #F2F7FD; }
.ct-read__handle { display: block; margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.7812rem; letter-spacing: 0.04em; color: #5EC8F8; }
.ct-read__item:hover .ct-read__handle { color: var(--holo-bright); }
.ct-live { flex: none; display: flex; align-items: center; gap: 0.625rem; padding-bottom: 0.25rem; }
.ct-live__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #5EC8F8; animation: dotPulse 2.4s ease-in-out infinite; }
.ct-live__label { font-size: 0.625rem; letter-spacing: 0.18em; color: #8FA6C4; white-space: nowrap; }

/* ---------- 5. реквизиты под кадром: тихая строка ---------- */
.ct-req { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 2.5rem; margin-top: 1.5rem; padding: 0 3rem; }
.ct-req__item { display: flex; flex-direction: column; gap: 0.375rem; }
.ct-req__key { font-size: 0.5625rem; letter-spacing: 0.2em; color: #4E617F; }
.ct-req__val { font-size: 0.875rem; line-height: 1.4; color: #7E93B4; white-space: nowrap; }
.ct-req__note { flex: 1 1 26.25rem; margin: 0; font-size: 0.7812rem; line-height: 1.55; color: #4E617F; text-wrap: pretty; }
.ct-req__note a { color: #7E93B4; }
.ct-req__note a:hover { color: var(--holo); }

/* ---------- адаптив ---------- */
@media (max-width: 1040px) {
  .ct-channels { grid-template-columns: 1fr; }
  .ct-channel + .ct-channel { border-left: 0; border-top: 1px solid rgba(159, 224, 255, 0.16); }
  .ct-foot__row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  .ct-head { padding: 4rem 1.5rem 2.5rem; }
  .ct-title { font-size: 2.375rem; }
  .ct-lead { font-size: 1.1875rem; }
  .ct-channels { margin: 0 1.5rem; }
  .ct-channel { padding: 1.5rem 1.25rem; }
  .ct-channel__value { font-size: 1.375rem; }
  .ct-why { padding: 2.25rem 1.5rem 0; }
  .ct-pill { white-space: normal; }
  .ct-foot { padding: 2.75rem 1.5rem 3.5rem; }
  .ct-req { padding: 0 1.5rem; }
  .ct-req__val { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-live__dot { animation: none; }
}