/* /seo: «Результаты» (слайды). Классы от JS (seo-cases.js): .is-live (нет reduced-motion), .cx--sticky (>= 900px, высота >= 640), .is-on на карточке.
   Без JS и при reduced-motion: статичный список карточек, ничего не липнет. */

.pg .cx{--cx-grad:linear-gradient(135deg,#e0e7ff 0%,#a5b4fc 45%,#5eead4 100%);--cx-fs:clamp(15px,1.15vw,17px)}
.pg .cx-bar{display:none}
.pg .cx .section-head{margin-bottom:clamp(24px,3vw,44px)}
.pg .cx-list{display:grid;gap:clamp(18px,2.6vw,32px)}

/* ───────── карточка кейса (база: список, mobile) ───────── */
.pg .cx-case{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px);padding:clamp(20px,2.6vw,36px);border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pg .cx-txt{display:flex;flex-direction:column;min-width:0}
.pg .cx-hd h3{font:600 clamp(20px,1.9vw,28px)/1.15 var(--font-head);letter-spacing:-.025em;margin:0;max-width:none;grid-column:auto}
.pg .cx-tag{margin:5px 0 0;font-size:13.5px;color:var(--text-3)}
.pg .cx-steps{display:grid;gap:clamp(12px,1.7vh,18px);margin:clamp(14px,2vh,22px) 0 0}
.pg .cx-step{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:12px;align-items:start}
.pg .cx-step dt,.pg .cx-step dd{margin:0}
.pg .cx-step p{grid-column:auto;margin:0;font-size:var(--cx-fs);line-height:1.45;color:var(--text-2)}
.pg .cx-pill{display:inline-block;margin-top:2px;padding:2px 11px;border-radius:999px;font:600 12.5px/1.6 var(--font-text);letter-spacing:.2px;white-space:nowrap}
.pg .cx-was .cx-pill{color:var(--text-2);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pg .cx-did .cx-pill{color:#c7d2fe;background:rgba(129,140,248,.14);box-shadow:inset 0 0 0 1px rgba(129,140,248,.38)}
.pg .cx-got .cx-pill{color:#99f6e4;background:rgba(94,234,212,.12);box-shadow:inset 0 0 0 1px rgba(94,234,212,.38)}
.pg .cx-got .cx-fig{margin:0;color:var(--text);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px}
.pg .cx-n{display:block;font:600 clamp(52px,5vw,76px)/1 var(--font-head);letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--cx-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.04em;padding-right:.1em} /* запас справа: из-за letter-spacing −.05em хвост последней цифры выходил за бокс и срезался градиентом */
.pg .cx-u{display:block;flex:1 1 150px;min-width:0;font:500 clamp(16px,1.3vw,19px)/1.3 var(--font-head);color:#e0e7ff}
.pg .cx-got .cx-note{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--text-3)}
.pg .cx-ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.pg .cx-ul li{position:relative;padding-left:17px;font-size:var(--cx-fs);line-height:1.42;color:var(--text-2)}
.pg .cx-ul li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:#5eead4}
.pg .cx-src{margin:14px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-3)}
.pg .cx-more{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:8px 14px;border-radius:12px;font:600 14px/1.2 var(--font-text);
  color:var(--text-3);text-decoration:none;cursor:default;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pg .cx-more small{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.08)}

/* ───────── скриншот панели в рамке окна ───────── */
.pg .cx-shot{margin:0;min-width:0;perspective:1500px}
.pg .cx-win{position:relative;display:block;width:100%;padding:0;margin:0;border:1px solid rgba(255,255,255,.18);border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in;font:inherit;
  box-shadow:0 44px 80px -34px rgba(0,0,0,.9),0 0 70px -26px rgba(99,102,241,.6);transition:transform 1.2s var(--ease-r),box-shadow .5s,opacity .8s linear}
.pg .cx-win::before{content:"";display:block;height:20px;background:
  radial-gradient(circle at 14px 50%,#ff6b6b 0 3.5px,transparent 4px),radial-gradient(circle at 28px 50%,#fbbf24 0 3.5px,transparent 4px),radial-gradient(circle at 42px 50%,#34d399 0 3.5px,transparent 4px),#eceef5}
.pg .cx-win::after{content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(10,10,24,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e7ff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/18px no-repeat;opacity:.85;transition:opacity .3s}
.pg .cx-win img{display:block;width:100%;height:auto}
.pg .cx-win:focus-visible{outline:2px solid #a5b4fc;outline-offset:3px}
.pg .cx-shot figcaption{margin-top:10px;font-size:12.5px;color:var(--text-3)}
/* появление: окно «выпрямляется» */
.pg .cx.is-live .cx-win{transform:rotateY(-13deg) rotateX(5deg) translateY(14px) scale(.93);opacity:.35;transform-origin:30% 50%}
.pg .cx.is-live .cx-case.is-on .cx-win{transform:none;opacity:1}
@media (hover:hover){.pg .cx-case.is-on .cx-win:hover{transform:translateY(-4px);box-shadow:0 52px 90px -34px rgba(0,0,0,.9),0 0 80px -22px rgba(129,140,248,.8)}.pg .cx-win:hover::after{opacity:1}}

/* ───────── >= 900px, вариант A без sticky (reduced-motion, низкий экран): крупные карточки в два столбца ───────── */
@media (min-width:900px){
  .pg .cx-case{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,64px);align-items:center}
}

/* ───────── ВАРИАНТ A: sticky-слайды ───────── */
.pg .cx.cx--sticky{height:calc(var(--cx-n,5) * 85vh);height:calc(var(--cx-n,5) * 85svh)}
.pg .cx--sticky .cx-stage{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));display:grid;grid-template-rows:auto auto minmax(0,1fr);
  padding:clamp(12px,2.6vh,32px) 0 clamp(8px,1.8vh,20px)}
.pg .cx--sticky .section-head{margin-bottom:clamp(6px,1.4vh,14px)}
.pg .cx--sticky .section-head h2{font-size:clamp(28px,3.3vw,48px)}
.pg .cx--sticky .cx-bar{display:block;margin-bottom:clamp(8px,2vh,24px)}
.pg .cx-bar-row{display:flex;align-items:center;gap:12px;justify-content:space-between}
.pg .cx-tabs{display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0}
.pg .cx-tab{padding:5px 12px;border:0;border-radius:999px;background:none;font:500 13px/1.3 var(--font-text);color:var(--text-3);cursor:pointer;box-shadow:inset 0 0 0 1px transparent;transition:color .3s,background .3s,box-shadow .3s}
.pg .cx-tab:hover{color:var(--text)}
.pg .cx-tab[aria-current="true"]{color:var(--text);background:rgba(129,140,248,.16);box-shadow:inset 0 0 0 1px rgba(129,140,248,.42)}
.pg .cx-tab:focus-visible,.pg .cx-arr:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.pg .cx-arrs{display:flex;gap:6px;flex:none}
.pg .cx-arr{width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--text-2);font:600 16px/1 var(--font-text);cursor:pointer;transition:background .3s,color .3s,opacity .3s}
.pg .cx-arr:hover:not(:disabled){background:rgba(129,140,248,.2);color:var(--text)}
.pg .cx-arr:disabled{opacity:.3;cursor:default}
.pg .cx-prog{height:2px;margin-top:10px;border-radius:2px;background:rgba(255,255,255,.1)}
.pg .cx-prog i{display:block;height:100%;border-radius:2px;background:#818cf8;box-shadow:var(--glow);transform:scaleX(var(--cxp,0));transform-origin:left}
.pg .cx--sticky .cx-list{display:grid;gap:0;min-height:0}
.pg .cx--sticky .cx-case{grid-area:1/1;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;--cx-fs:clamp(14px,1.85vh,16.5px);
  grid-template-columns:minmax(0,11fr) minmax(0,13fr);column-gap:clamp(24px,4vw,64px);align-items:center;
  opacity:0;translate:70px 0;pointer-events:none;transition:opacity .55s linear,translate .9s var(--ease-r)}
.pg .cx--sticky .cx-case.is-on{opacity:1;translate:0 0;pointer-events:auto}
.pg .cx--sticky .cx-case.is-past{translate:-70px 0}
/* Пустой хвост сцены под последним слайдом (сцена высотой с самый высокий слайд) уходит под следующий блок: иначе провал ~250px. Сцена и слайд не ловят клики, только их содержимое */
@media (min-height:800px){
  .pg .cx.cx--sticky{margin-bottom:-15svh}
  .pg .cx--sticky .cx-stage,.pg .cx--sticky .cx-list,.pg .cx--sticky .cx-case.is-on{pointer-events:none}
  .pg .cx--sticky .cx-case.is-on>*{pointer-events:auto}
}
.pg .cx--sticky .cx-hd h3{font-size:clamp(18px,2.7vh,26px)}
.pg .cx--sticky .cx-steps{margin-top:clamp(10px,1.8vh,20px);gap:clamp(8px,1.5vh,16px)}
.pg .cx--sticky .cx-n{font-size:clamp(44px,7.6vh,68px)}
.pg .cx--sticky .cx-u{font-size:clamp(15px,2.1vh,18px)}
.pg .cx--sticky .cx-ul{gap:clamp(3px,.8vh,7px);margin-top:clamp(6px,1.2vh,10px)}
.pg .cx--sticky .cx-src{margin-top:clamp(8px,1.6vh,14px)}
.pg .cx--sticky .cx-more{margin-top:clamp(8px,1.4vh,12px);padding:6px 13px}
.pg .cx--sticky .cx-shot{position:relative}
.pg .cx--sticky .cx-shot::before{content:"";position:absolute;inset:-34% -12%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(99,102,241,.26),transparent)}

/* ───────── mobile: общее ───────── */
@media (max-width:560px){
  .pg .cx-case{padding:18px 16px 20px;border-radius:22px}
  .pg .cx-step{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .pg .cx-pill{margin-top:0}
  .pg .cx-n{font-size:clamp(52px,17vw,68px)}
}

/* ───────── lightbox ───────── */
html.cx-lb-open{overflow:hidden}
.cx-lb{width:min(96vw,1240px);max-width:none;max-height:92vh;margin:auto;padding:0;border:0;border-radius:18px;background:#0d0d20;color:var(--text);overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 120px -30px rgba(0,0,0,.9)}
.cx-lb::backdrop{background:rgba(4,4,14,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cx-lb-in{position:relative;padding:54px clamp(12px,2vw,22px) clamp(12px,2vw,22px);max-height:92vh;overflow:auto}
.cx-lb-sc{overflow:auto;border-radius:10px}
.cx-lb-sc img{display:block;width:100%;min-width:880px;height:auto;background:#fff}
.cx-lb-cap{margin:12px 44px 0 0;font-size:13.5px;color:var(--text-3)}
.cx-lb-x{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:rgba(10,10,24,.82);color:var(--text);font:400 22px/1 var(--font-text);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.cx-lb-x:hover{background:rgba(99,102,241,.5)}
.cx-lb-x:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .pg .cx-win,.pg .cx-case{transition:none}
}

/* окно без скрина (deutschland-gecheckt.de на /de/seo): визуал «DE / RU / UA», без лайтбокса */
.pg .cx-win--static{cursor:default;background:#10102a;color:#c7d2fe}
.pg .cx-win--static::after{display:none}
.pg .cx-win--static svg{display:block;width:100%;height:auto}
.pg .cx-win--static .cx-lang rect{fill:rgba(99,102,241,.16);stroke:rgba(129,140,248,.55);stroke-width:1.5}
.pg .cx-win--static .cx-lang text{fill:#c7d2fe;font:600 58px var(--font-head);letter-spacing:-.02em}
/* Длинная сумма «47.000 € → 140.000 €»: меньше кегль, перенос между частями, каждая часть не рвётся */
.pg .cx-n.cx-n--long{white-space:normal;font-size:clamp(36px,3.4vw,54px);line-height:1.08}
.pg .cx-n--long .cx-nw{white-space:nowrap}
@media (max-width:600px){.pg .cx-n.cx-n--long{font-size:clamp(34px,10.5vw,44px)}}
/* Второй акцент под главной цифрой (агро: «+142 %»): меньше главной, градиент сайта, подпись рядом */
.pg .cx-fig2{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px}
.pg .cx-n2{font:600 clamp(30px,2.6vw,42px)/1.05 var(--font-head);letter-spacing:-.03em;white-space:nowrap;padding-bottom:.12em;margin-bottom:-.12em;padding-right:.08em;
  background:var(--cx-grad,linear-gradient(100deg,#818cf8,#a78bfa 45%,#5eead4));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pg .cx-u2{font:500 clamp(14px,1.1vw,17px)/1.3 var(--font-head);color:#c7d2fe}
.pg .cx--sticky .cx-n2{font-size:clamp(28px,4.4vh,40px)}

/* ТЗ-37: слайд прижат к табам (без вертикального центрирования), плашка «Хотите так же?» живёт внутри sticky-сцены внизу и видна вместе со слайдом */
.pg .cx-stage > .cta-row{margin-top:clamp(18px,3vw,32px)}
.pg .cx--sticky .cx-stage{grid-template-rows:auto auto minmax(0,1fr) auto}
.pg .cx--sticky .cx-case{align-items:start;padding-top:clamp(4px,1vh,10px)}
.pg .cx--sticky .cx-stage > .cta-row{margin-top:clamp(6px,1.2vh,14px);padding:clamp(8px,1.5vh,14px) 24px clamp(8px,1.5vh,14px) 30px;pointer-events:auto}
.pg .cx--sticky .cx-stage > .cta-row .cta-t{font-size:clamp(16px,2.3vh,22px)}
.pg .cx--sticky .cx-stage > .cta-row .btn{padding-top:clamp(8px,1.4vh,13px);padding-bottom:clamp(8px,1.4vh,13px)}
.pg .cx--sticky .cx-case{grid-template-columns:minmax(0,12fr) minmax(0,13fr)}
.pg .cx--sticky .cx-step{grid-template-columns:82px minmax(0,1fr)}
@media (max-height:920px){
  .pg .cx--sticky .cx-steps{margin-top:8px;gap:8px}
  .pg .cx--sticky .cx-ul{margin-top:4px;gap:3px}
  .pg .cx--sticky .cx-src{margin-top:7px;line-height:1.38}
  .pg .cx--sticky .cx-more{margin-top:6px;padding:4px 12px}
}
@media (max-height:800px){
  .pg .cx--sticky .cx-case{--cx-fs:13.5px}
  .pg .cx--sticky .cx-hd h3{font-size:clamp(17px,2.5vh,22px)}
  .pg .cx--sticky .cx-tag{margin-top:2px}
  .pg .cx--sticky .cx-steps{margin-top:8px;gap:7px}
  .pg .cx--sticky .cx-n{font-size:clamp(38px,6.4vh,52px)}
  .pg .cx--sticky .cx-got .cx-note{margin-top:3px;font-size:12px;line-height:1.35}
  .pg .cx--sticky .cx-ul{gap:2px}
  .pg .cx--sticky .cx-src{margin-top:6px;font-size:12px}
}
}

/* ТЗ-39: воздух над H2, слайд по центру свободного места между табами и плашкой CTA, колонки слайда по центру */
.pg .cx--sticky .cx-stage{padding-top:clamp(24px,4vh,56px)}
.pg .cx--sticky .cx-list{grid-template-rows:minmax(0,1fr)}
.pg .cx--sticky .cx-case{align-items:center;align-self:center;padding-top:0}
.pg .cx--sticky .cx-stage > .cta-row{margin-top:clamp(32px,4vh,48px)}
/* Плашка CTA теперь внутри сцены и занимает низ сцены, поэтому хвост сцены под следующий блок не заводим: иначе плашка перекрывала «Частые вопросы» */
@media (min-height:800px){.pg .cx.cx--sticky{margin-bottom:calc(-1 * clamp(8px,1.8vh,20px))}}