/* landing-inside.css — блок «Что внутри».

   Как и первый экран, блок всегда тёмный: золотая карточка с билетами и
   цветные плитки читаются только на почти чёрном фоне. Сетка повторяет
   референс: слева заголовок, справа главная карточка, ниже три плитки
   и ряд узких строк. */

.ci {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 7.2vw, 122px) 0 clamp(60px, 7.2vw, 118px);
  /* фон общий для всей страницы (bg-mesh), здесь только цвет текста —
     иначе на стыке секций видна ступенька */
  color: #eef2f8;
}

/* ---------- верх: текст + главная карточка ---------- */
.ci-top {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(28px, 3.4vw, 62px); align-items: center;
}

.ci-eyebrow {
  display: inline-block; margin-bottom: 20px; padding: 8px 18px; border-radius: 999px;
  font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #8fc2ff; background: rgba(47, 127, 224, .16); border: 1px solid rgba(88, 150, 240, .45);
}
.ci-title {
  margin: 0 0 20px; padding: 0;
  font-size: clamp(28px, 3.05vw, 46px); font-weight: 800; line-height: 1.14;
  letter-spacing: -.035em; color: #fff;
}
.ci-title::before { content: none; }
.ci-lead {
  margin: 0; max-width: 520px;
  font-size: clamp(15px, 1.1vw, 17.5px); line-height: 1.62; color: #9fb0c6;
}

/* ---------- главная карточка: билеты ---------- */
.ci-main {
  position: relative; display: block; overflow: hidden;
  min-height: clamp(300px, 26vw, 400px);
  padding: clamp(26px, 2.4vw, 38px) clamp(24px, 2.2vw, 36px);
  border-radius: 20px; text-decoration: none; color: inherit;
  border: 1px solid rgba(226, 178, 88, .34);
  background:
    radial-gradient(70% 90% at 88% 26%, rgba(228, 165, 60, .16), transparent 62%),
    linear-gradient(140deg, #12100c 0%, #0a0b10 58%, #08090e 100%);
  box-shadow: 0 0 60px -24px rgba(226, 170, 70, .45), 0 28px 60px -34px rgba(0, 0, 0, .9);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ci-main:hover {
  border-color: rgba(240, 198, 110, .6); transform: translateY(-2px);
  box-shadow: 0 0 80px -22px rgba(232, 178, 80, .55), 0 32px 70px -34px rgba(0, 0, 0, .9);
}
.ci-main > * { position: relative; z-index: 2; max-width: 48%; }

.ci-kicker {
  display: block; margin-bottom: 14px;
  font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: #e3ad4e;
}
.ci-big {
  margin: 0; font-size: clamp(64px, 7vw, 108px); font-weight: 800; line-height: .92;
  letter-spacing: -.05em;
  background: linear-gradient(168deg, #ffe6a8 6%, #f0bd5c 52%, #d99a2e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ci-big-sub {
  margin: 4px 0 16px; font-size: clamp(20px, 1.85vw, 29px); font-weight: 800;
  letter-spacing: -.03em; color: #fff;
}
.ci-p { margin: 0 0 26px; font-size: clamp(14px, 1.02vw, 16px); line-height: 1.6; color: #a6b4c8; }

.ci-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 26px; border-radius: 999px;
  font: 700 16px/1 var(--sans); color: #10120f; background: #f4f2ec;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .9);
  transition: background .15s ease, transform .13s ease;
}
.ci-btn svg { width: 18px; height: 18px; transition: transform .16s ease; }
.ci-main:hover .ci-btn { background: #fff; }
.ci-main:hover .ci-btn svg { transform: translateX(3px); }

/* Снимок билетов отрисован на чёрном фоне без альфы, поэтому кладём его
   в режиме screen — чёрное растворяется, остаётся свечение и карточки. */
.ci-shot {
  position: absolute; z-index: 1; right: -2%; top: 52%; transform: translateY(-50%);
  /* держим снимок в границах карточки: иначе на узких экранах он вылезает
     за верх и низ и обрезается рамкой */
  width: auto; height: auto; max-width: min(57%, 600px); max-height: 88%;
  mix-blend-mode: screen; pointer-events: none;
  /* края растворяем маской, иначе прямоугольник снимка виден на карточке */
  -webkit-mask-image: radial-gradient(78% 72% at 52% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(78% 72% at 52% 50%, #000 40%, transparent 100%);
}

/* ---------- три плитки ---------- */
.ci-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 26px); margin-top: clamp(30px, 3.2vw, 52px);
}
.ci-card {
  --ci-c: #4a94ec;
  position: relative; display: block; min-height: 300px;
  padding: clamp(26px, 2.2vw, 34px) clamp(26px, 2.2vw, 34px) clamp(28px, 2.4vw, 36px);
  border-radius: 18px; text-decoration: none; color: inherit;
  border: 1px solid color-mix(in srgb, var(--ci-c) 32%, transparent);
  background:
    radial-gradient(110% 95% at 0% 0%, color-mix(in srgb, var(--ci-c) 22%, transparent), transparent 60%),
    linear-gradient(160deg, #0b0e15 0%, #080a11 100%);
  transition: border-color .18s ease, transform .18s ease;
}
.ci-card:hover { border-color: color-mix(in srgb, var(--ci-c) 55%, transparent); transform: translateY(-2px); }

/* иконки — готовые глянцевые рендеры с альфой, поэтому им нужен только размер */
.ci-ico {
  display: block; width: auto; height: clamp(52px, 4.4vw, 68px);
  margin-bottom: clamp(24px, 2.4vw, 40px);
  filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--ci-c) 40%, transparent));
}

.ci-card h3 { margin: 0 0 6px; font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ci-card h3::before { content: none; }
.ci-sub { margin: 0 0 14px; font-size: clamp(14px, 1.05vw, 16px); font-weight: 500; color: var(--ci-c); }
.ci-txt { margin: 0; max-width: 74%; font-size: clamp(13.5px, .98vw, 15px); line-height: 1.62; color: #93a3b8; }

.ci-go {
  position: absolute; right: clamp(18px, 1.7vw, 26px); bottom: clamp(20px, 1.9vw, 30px);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ci-c) 42%, transparent);
  background: color-mix(in srgb, var(--ci-c) 14%, transparent);
  color: color-mix(in srgb, var(--ci-c) 82%, #fff);
  transition: background .16s ease, transform .16s ease;
}
.ci-go svg { width: 20px; height: 20px; }
.ci-card:hover .ci-go { background: color-mix(in srgb, var(--ci-c) 26%, transparent); transform: translateX(2px); }

/* ---------- узкие строки ---------- */
.ci-mini {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 26px); margin-top: clamp(16px, 1.7vw, 26px);
}
.ci-line {
  --ci-c: #4a94ec;
  position: relative; display: flex; align-items: center; gap: 16px;
  min-height: 112px; padding: 22px clamp(64px, 5vw, 74px) 22px 22px;
  border-radius: 16px; text-decoration: none; color: inherit;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(160deg, #0a0d13 0%, #08090f 100%);
  transition: border-color .18s ease, transform .18s ease;
}
.ci-line:hover { border-color: color-mix(in srgb, var(--ci-c) 45%, transparent); transform: translateY(-2px); }
/* у мелких иконок подложка нарисована внутри самой картинки */
.ci-line-ico {
  flex: none; width: auto; height: clamp(46px, 3.4vw, 56px);
  filter: drop-shadow(0 4px 16px color-mix(in srgb, var(--ci-c) 38%, transparent));
}
.ci-line b { display: block; margin-bottom: 5px; font-size: clamp(15px, 1.1vw, 17px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ci-line i { font-style: normal; font-size: clamp(13px, .95vw, 14.5px); line-height: 1.45; color: #8b9bb0; }
.ci-line .ci-go { width: 40px; height: 40px; bottom: 50%; transform: translateY(50%); }
.ci-line .ci-go svg { width: 17px; height: 17px; }
.ci-line:hover .ci-go { background: color-mix(in srgb, var(--ci-c) 26%, transparent); transform: translate(2px, 50%); }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .ci-top { grid-template-columns: minmax(0, 1fr); }
  .ci-main > * { max-width: 62%; }
  .ci-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ci-cards { grid-template-columns: minmax(0, 1fr); }
  .ci-card { min-height: 0; padding-bottom: 84px; }
  .ci-txt { max-width: 100%; }
}
@media (max-width: 720px) {
  .ci-main { min-height: 0; padding-bottom: 210px; }
  .ci-main > * { max-width: 100%; }
  .ci-shot { right: 50%; top: auto; bottom: -6px; width: min(92%, 420px); transform: translate(50%, 0); }
  .ci-mini { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ci-main, .ci-card, .ci-line, .ci-go, .ci-btn, .ci-btn svg { transition: none; }
}