/* ПОПАП КЕЙСА — вариант P1 «Окно из пыли» (логика popup-p1.js).
   Десктоп: окно по центру поверх размытой и затемненной страницы. Телефон: лист снизу почти на весь экран.
   Окно — очень темное стекло: тонкая кромка rgba(255,255,255,.12), тихий блик сверху, скругление 26px.
   Открытие и закрытие ведет popup-p1.js по одному таймлайну (canvas 2D поверх): пыль слетается
   от нажатой кнопки в контур окна и в заголовок, затем проявляется стекло и текст; при закрытии
   окно слева направо рассыпается пылью. Поэтому прозрачности здесь без transition — их пишет JS. */

.cp1[hidden] { display: none; }
.cp1 { position: fixed; inset: 0; z-index: 900; }

/* фон: сильный блюр страницы + затемнение; без backdrop-filter — почти черная заливка */
.cp1__back {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(0,0,0,.52);
  -webkit-backdrop-filter: blur(28px) saturate(.7) brightness(.72);
  backdrop-filter: blur(28px) saturate(.7) brightness(.72);
  opacity: 0;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cp1__back { background: rgba(0,0,0,.88); }
}

.cp1__stage {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 4vh 0; pointer-events: none;
}

/* ---------- окно ---------- */
.cp1__win {
  position: relative; pointer-events: auto;
  width: min(880px, 92vw); max-height: 86vh; max-height: 86dvh;
  display: flex; flex-direction: column;
  border-radius: 26px; overflow: hidden; isolation: isolate;
  background: rgba(8,8,10,.8);
  box-shadow: 0 -18px 70px -46px rgba(255,255,255,.28), 0 60px 160px -30px rgba(0,0,0,.9), 0 24px 60px -24px rgba(0,0,0,.7);
  opacity: 0;
}
/* тихий блик сверху: свет падает на верхнюю кромку стекла */
.cp1__win::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 300px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(255,255,255,.075), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%);
}
/* кромка: волосяная линия по всему контуру, сверху чуть светлее */
.cp1__win::after {
  content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.2);
}

.cp1__grip { display: none; }

/* шапка поверх прокрутки: номер кейса и закрыть */
.cp1__bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px 0 56px; pointer-events: none;
}
.cp1__bar > * { pointer-events: auto; }
.cp1__idx { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp1__idx b { font-weight: 400; color: rgba(255,255,255,.88); }
.cp1__mini {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(5px);
  max-width: 54%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px; font-weight: 300; letter-spacing: -0.01em; color: rgba(255,255,255,.7);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.cp1.is-scrolled .cp1__mini { opacity: 1; transform: translate(-50%, -50%); }
.cp1__close {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.035); color: rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background-color .2s ease;
}
.cp1__close svg { display: block; }
.cp1__close:hover { transform: rotate(90deg); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
body.v8 .cp1__close:focus-visible { outline: 1px solid rgba(255,255,255,.6); outline-offset: 3px; }

/* прокрутка: верх уходит под шапку растворяясь, низ тоже растворяется */
.cp1__scroll {
  position: relative; z-index: 1; flex: 0 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 54px, #000 96px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 54px, #000 96px, #000 calc(100% - 36px), transparent 100%);
}
.cp1__scroll::-webkit-scrollbar { display: none; }
body.v8 .cp1__scroll:focus, body.v8 .cp1__scroll:focus-visible { outline: none; }
/* свой тонкий ползунок: волосяная линия у правой кромки */
.cp1__thumb {
  position: absolute; right: 7px; top: 0; width: 2px; border-radius: 2px; z-index: 7; pointer-events: none;
  background: rgba(255,255,255,.22); opacity: 0; transition: opacity .4s ease;
}
.cp1.is-moving .cp1__thumb { opacity: 1; }

.cp1__in { padding: 100px 56px 76px; transition: opacity .25s ease; }
.cp1.is-swap .cp1__in { opacity: 0; }

.cp1__title {
  font-size: clamp(34px, 3.3vw, 48px); font-weight: 220; line-height: 1.06; letter-spacing: -0.038em;
  color: #fff; text-wrap: balance; margin: 0; max-width: 720px;
  transition: text-shadow 1s ease;
}
.cp1__title.is-lit { text-shadow: 0 0 30px rgba(255,255,255,.5), 0 0 80px rgba(255,255,255,.2); transition: text-shadow .2s ease; }
.cp1__tag {
  font-size: 18px; font-weight: 300; line-height: 1.6; letter-spacing: -0.014em;
  color: rgba(255,255,255,.64); text-wrap: pretty; margin: 22px 0 0; max-width: 610px;
}

/* живой кадр: широкая полоса во всю ширину окна, края растворены в стекле */
.cp1__art { position: relative; height: 360px; margin: 26px -56px 0; }
.cp1__art[hidden] { display: none; }
.cp1__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* факты строками «подпись — цифра»; садятся на растворенный низ кадра */
.cp1__facts { position: relative; z-index: 1; margin-top: -26px; }
.cp1__facts[hidden] { display: none; }
.cp1__art[hidden] + .cp1__facts { margin-top: 48px; }
.cp1__fact { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 19px 0 17px; border-top: 1px solid rgba(255,255,255,.08); }
.cp1__fact:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.cp1__fact span { font-size: 15.5px; font-weight: 300; letter-spacing: -0.01em; color: rgba(255,255,255,.55); }
.cp1__fact b { font-size: 34px; font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* разделы: номер и заголовок слева, текст справа */
.cp1__text { margin-top: 18px; }
.cp1__sec { display: grid; grid-template-columns: 172px 1fr; gap: 0 40px; padding: 46px 0 4px; }
.cp1__sec + .cp1__sec { border-top: 1px solid rgba(255,255,255,.07); margin-top: 40px; }
.cp1__sec > header > div { position: sticky; top: 84px; }
.cp1__sec small { display: block; font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.34); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.cp1__sec h2 { font-size: 17px; font-weight: 400; line-height: 1.35; letter-spacing: -0.016em; color: #fff; margin: 0; text-wrap: balance; }
.cp1__sec--lead { grid-template-columns: 1fr; }
.cp1__sec--lead > header { display: none; }

.cp1__text p { font-size: 15.5px; font-weight: 300; line-height: 1.8; letter-spacing: -0.011em; color: rgba(255,255,255,.78); text-wrap: pretty; margin: 0; }
.cp1__text p + p { margin-top: 20px; }
.cp1__text b { font-weight: 450; color: #fff; }
.cp1__text ul, .cp1__text ol { list-style: none; margin: 18px 0 4px; padding: 0; }
.cp1__text li { position: relative; padding: 13px 0 13px 30px; border-top: 1px solid rgba(255,255,255,.07); font-size: 15px; font-weight: 300; line-height: 1.6; letter-spacing: -0.011em; color: rgba(255,255,255,.78); }
.cp1__text li:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }
.cp1__text ul li::before { content: ''; position: absolute; left: 2px; top: 25px; width: 10px; height: 1px; background: rgba(255,255,255,.4); }
.cp1__text ol { counter-reset: step; }
.cp1__text ol li { counter-increment: step; }
.cp1__text ol li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.36); }
.cp1__text .cmodal__duo { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 6px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.cp1__text .cmodal__duo > div { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 20px 22px 20px 0; }
.cp1__text .cmodal__duo > div + div { padding: 20px 0 20px 22px; box-shadow: inset 1px 0 0 rgba(255,255,255,.08); }
.cp1__text .cmodal__duo h3 { font-size: 15.5px; font-weight: 400; letter-spacing: -0.014em; color: #fff; margin: 0 0 8px; }
.cp1__text .cmodal__duo p { font-size: 14.5px; line-height: 1.68; color: rgba(255,255,255,.64); }
.cp1__text .big { font-size: 23px; font-weight: 200; line-height: 1.45; letter-spacing: -0.026em; color: #fff; text-wrap: balance; margin: 36px 0; }
.cp1__sec > div > .cmodal__duo:last-child, .cp1__sec > div > ul:last-child li:last-child, .cp1__sec > div > ol:last-child li:last-child { border-bottom: 0; }

/* низ: следующий кейс и кнопка */
.cp1__foot { margin-top: 76px; border-top: 1px solid rgba(255,255,255,.1); }
.cp1__next {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px;
  padding: 30px 0 34px; border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff; text-decoration: none; cursor: pointer;
}
.cp1__next small { display: block; font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.38); margin-bottom: 12px; }
.cp1__next strong { display: block; font-size: 27px; font-weight: 220; letter-spacing: -0.032em; line-height: 1.15; }
.cp1__next i { font-style: normal; font-size: 22px; font-weight: 200; color: rgba(255,255,255,.6); transition: transform .3s cubic-bezier(.16,1,.3,1), color .2s ease; }
.cp1__next:hover i { transform: translateX(6px); color: #fff; }
.cp1__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; flex-wrap: wrap; }
.cp1__cta p { margin: 0; font-size: 15.5px; font-weight: 300; color: rgba(255,255,255,.56); letter-spacing: -0.012em; line-height: 1.5; max-width: 320px; }

/* холст пыли поверх всего попапа */
.cp1__fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }

@media (max-width: 960px) {
  .cp1__bar { padding-left: 40px; }
  .cp1__in { padding-left: 40px; padding-right: 40px; }
  .cp1__art { margin-left: -40px; margin-right: -40px; }
  .cp1__sec { grid-template-columns: 140px 1fr; gap: 0 28px; }
}

/* ============ телефон: лист снизу почти на весь экран ============ */
@media (max-width: 720px) {
  .cp1__back { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(18px) saturate(.7) brightness(.7); backdrop-filter: blur(18px) saturate(.7) brightness(.7); }
  .cp1__stage { padding: 0; place-items: end stretch; }
  .cp1__win {
    width: 100%; max-height: none; height: calc(100% - 10px); height: calc(100dvh - 10px);
    border-radius: 24px 24px 0 0; background: rgba(8,8,10,.86);
  }
  .cp1__win.is-drag { transition: none; }
  .cp1__grip { display: block; position: absolute; top: 0; left: 0; right: 0; height: 24px; z-index: 9; }
  .cp1__grip::after { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 999px; background: rgba(255,255,255,.26); }
  .cp1__bar { height: 64px; padding: 10px 10px 0 22px; touch-action: none; }
  .cp1__close { width: 44px; height: 44px; }
  .cp1__scroll { flex: 1 1 auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 56px, #000 100px); mask-image: linear-gradient(180deg, transparent 0, transparent 56px, #000 100px); }
  .cp1__thumb { right: 4px; }
  .cp1__in { padding: 96px 22px calc(60px + env(safe-area-inset-bottom)); }

  .cp1__title { font-size: 32px; line-height: 1.08; }
  .cp1__tag { font-size: 16.5px; line-height: 1.6; margin-top: 16px; }

  .cp1__art { height: auto; aspect-ratio: 5 / 4; margin: 14px -22px 0; }
  .cp1__facts { margin-top: -18px; }
  .cp1__art[hidden] + .cp1__facts { margin-top: 34px; }
  .cp1__fact { padding: 17px 0 15px; }
  .cp1__fact span { font-size: 14.5px; }
  .cp1__fact b { font-size: 27px; }

  .cp1__text { margin-top: 0; }
  .cp1__sec, .cp1__sec--lead { display: block; padding: 40px 0 0; }
  .cp1__sec + .cp1__sec { margin-top: 40px; }
  .cp1__sec > header > div { position: static; margin-bottom: 16px; }
  .cp1__sec small { margin-bottom: 8px; }
  .cp1__sec h2 { font-size: 21px; font-weight: 350; line-height: 1.3; letter-spacing: -0.022em; }
  .cp1__text p { font-size: 16px; line-height: 1.72; }
  .cp1__text li { font-size: 15.5px; padding: 14px 0 14px 32px; }
  .cp1__text ul li::before { top: 26px; }
  .cp1__text ol li::before { top: 17px; }
  .cp1__text .cmodal__duo { display: block; }
  .cp1__text .cmodal__duo > div, .cp1__text .cmodal__duo > div + div { padding: 20px 0; box-shadow: none; }
  .cp1__text .cmodal__duo > div + div { border-top: 1px solid rgba(255,255,255,.07); }
  .cp1__text .cmodal__duo h3 { font-size: 16.5px; }
  .cp1__text .cmodal__duo p { font-size: 15px; }
  .cp1__text .big { font-size: 22px; line-height: 1.42; margin: 34px 0; padding-left: 18px; box-shadow: inset 1px 0 0 rgba(255,255,255,.5); }

  .cp1__foot { margin-top: 60px; }
  .cp1__next strong { font-size: 23px; }
  .cp1__cta { flex-direction: column; align-items: stretch; gap: 22px; }
  .cp1__cta p { max-width: none; }
  body.v8 .cp1__cta a.btn8.btn8 { width: 100%; }
}

/* Owner review: no top glow, larger reading text, no illustration in the case window. */
.cp1__win { box-shadow: 0 60px 160px -30px rgba(0,0,0,.9), 0 24px 60px -24px rgba(0,0,0,.7); }
.cp1__win::before { content: none; }
.cp1__win::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.cp1__title.is-lit { text-shadow: none; }
.cp1__tag { font-size: 20px; }
.cp1__sec h2 { font-size: 21px; }
.cp1__text p { font-size: 17.5px; line-height: 1.72; }
.cp1__text li { font-size: 17px; }
.cp1__text .cmodal__duo p { font-size: 17px; }
@media (max-width: 720px) {
  .cp1__tag { font-size: 18px; }
  .cp1__text p, .cp1__text li, .cp1__text .cmodal__duo p { font-size: 17px; }
  .cp1__sec h2 { font-size: 23px; }
}

body.case-page { overflow-x:hidden; }
.case-page .cp1__win { margin:32px auto; max-height:none; height:auto; opacity:1; }
.case-page .cp1__scroll { overflow:visible; mask-image:none; -webkit-mask-image:none; }
.case-page .cp1__bar { position:absolute; }
.case-page .cp1__in { opacity:1; }
.case-page .cp1__title { font-family:inherit; }
.case-page a:focus-visible { outline:1px solid white; outline-offset:5px; }
@media(max-width:720px) { .case-page .cp1__win { margin:10px auto 0; } }