/* ============ Portfolio hub + case study pages (design "Студия") ============ */

/* ---- Portfolio hub: metrics bar (à la .com/cases) ---- */
.cases-metrics{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cases-metrics .cm{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px 24px}
.cases-metrics .cm .n{font-family:"Manrope";font-size:clamp(26px,3vw,36px);font-weight:700;color:var(--blue);line-height:1}
.cases-metrics .cm .l{font-size:14px;color:var(--ink-soft);margin-top:9px;line-height:1.4}

/* ---- Portfolio hub: sort + filter toolbar ---- */
.cases-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:0 0 30px}
.cases-bar .sort{display:flex;align-items:center;gap:10px;order:2}
.cases-bar .sort label{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.cases-bar .sort select{font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 34px 9px 16px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:14px}
.cases-bar .sort select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cases-bar .pfilter{margin:0;order:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cases-bar .case-search{order:0;flex:1 1 100%;max-width:660px;position:relative;display:flex;align-items:center;margin:0 0 4px}
.cases-bar .case-search .cs-ico{position:absolute;left:17px;display:flex;color:var(--ink-soft);pointer-events:none}
.cases-bar .case-search .cs-ico svg{width:20px;height:20px}
.cases-bar .case-search input{font-family:inherit;font-size:16px;font-weight:500;color:var(--ink);width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px 16px 46px;
  box-shadow:0 4px 18px rgba(20,30,60,.05);transition:border-color .2s,box-shadow .2s}
.cases-bar .case-search input::placeholder{color:var(--ink-soft);opacity:.85}
.cases-bar .case-search input:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}

/* ---- Portfolio hub: uniform case cards ---- */
.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.ccard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s}
.ccard:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 28px 54px -30px rgba(46,92,242,.5)}
.ccard.is-hidden{display:none!important}
.ccard .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.ccard .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.ccard:hover .ph img{transform:scale(1.05)}
.ccard .go{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);
  transition:background .25s,color .25s,transform .25s}
.ccard .go svg{width:17px;height:17px}
.ccard:hover .go{background:var(--yellow);color:var(--ink);border-color:var(--yellow);transform:translate(2px,-2px) rotate(-8deg)}
.ccard .body{display:flex;flex-direction:column;flex:1;padding:22px 24px}
.ccard .kick{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--blue);text-transform:uppercase;margin-bottom:10px}
.ccard h3{font-size:20px;font-weight:600;line-height:1.22;margin-bottom:9px}
.ccard p{color:var(--ink-soft);font-size:14.5px;line-height:1.55;flex:1}
.ccard .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.ccard .yr{font-family:"Manrope";font-size:14px;font-weight:600;color:var(--ink-soft)}
.ccard .view{font-size:14px;font-weight:600;color:var(--blue)}
.ccard:hover .view{color:var(--blue-ink)}
@media(max-width:560px){.cases-grid{grid-template-columns:1fr}}

/* ---- Portfolio hub: filter chips ---- */
.pfilter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.pfilter button{font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-soft);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s,transform .2s}
.pfilter button:hover{color:var(--ink);border-color:var(--blue);transform:translateY(-2px)}
.pfilter button[aria-pressed="true"]{color:#fff;background:var(--blue);border-color:var(--blue);
  box-shadow:0 10px 24px -12px rgba(46,92,242,.6)}
.pfilter button .pf-n{margin-left:7px;font-size:12.5px;font-weight:700;color:var(--ink-soft);opacity:.7}
.pfilter button:hover .pf-n{color:var(--ink)}
.pfilter button[aria-pressed="true"] .pf-n{color:#fff;opacity:.85}
/* Instant filter/sort: kill stagger reveal once user interacts */
.cases-grid.nostagger>*{animation:none!important;opacity:1!important}
.pcard.is-hidden{display:none!important}
.proj-empty{display:none;color:var(--ink-soft);font-size:16px;padding:20px 0 4px}

/* ---- Case hero image ---- */
.case-hero-img{margin:22px 0 8px}
.case-hero-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:22px;border:1px solid var(--line);box-shadow:0 34px 70px -40px rgba(19,21,26,.4)}

/* ---- Case fact strip (client / industry / platforms / year) ---- */
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:28px 0 8px;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.case-meta div{padding:22px 24px;border-right:1px solid var(--line)}
.case-meta div:last-child{border-right:none}
.case-meta .k{font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.case-meta .v{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
@media(max-width:820px){.case-meta{grid-template-columns:1fr 1fr}
  .case-meta div:nth-child(2){border-right:none}
  .case-meta div:nth-child(1),.case-meta div:nth-child(2){border-bottom:1px solid var(--line)}}

/* ---- Big results metric strip ---- */
.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.metric-strip.cols-2{grid-template-columns:repeat(2,1fr)}
.metric-strip.cols-3{grid-template-columns:repeat(3,1fr)}
.metric-strip .ms{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 26px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.metric-strip .ms:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 22px 44px -26px rgba(46,92,242,.36)}
.metric-strip .ms .n{font-family:"Manrope";font-size:clamp(30px,3.4vw,42px);font-weight:700;color:var(--blue);line-height:1}
.metric-strip .ms .l{font-size:14.5px;color:var(--ink-soft);margin-top:12px;line-height:1.45}
@media(max-width:820px){.metric-strip,.metric-strip.cols-3{grid-template-columns:1fr 1fr}}
.numbers-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;max-width:940px}
.numbers-list li{position:relative;padding:16px 20px 16px 52px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.numbers-list li::before{content:"";position:absolute;left:20px;top:23px;width:14px;height:14px;border-radius:5px;
  background:var(--blue);box-shadow:0 0 0 4px rgba(46,92,242,.14)}

/* ---- Tech chips ---- */
.tech-chips{display:flex;flex-wrap:wrap;gap:10px}
.tech-chips span{font-size:14px;font-weight:500;color:var(--ink);background:var(--tint);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px}

/* ---- Quote / testimonial inside case ---- */
.case-quote{border-left:3px solid var(--blue);padding:6px 0 6px 26px;margin:6px 0;
  font-size:19px;line-height:1.6;color:var(--ink);max-width:64ch}
.case-quote cite{display:block;margin-top:16px;font-size:14.5px;font-style:normal;color:var(--ink-soft);font-weight:600}

/* ---- Next case navigation ---- */
.nextcase{display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 30px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.nextcase:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 24px 48px -28px rgba(46,92,242,.4)}
.nextcase .lbl{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.nextcase .t{font-size:21px;font-weight:600;color:var(--ink);line-height:1.25}
.nextcase .arw{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--blue);transition:background .25s,color .25s,transform .25s}
.nextcase:hover .arw{background:var(--blue);color:#fff;transform:translate(3px,-3px)}
.nextcase .arw svg{width:20px;height:20px}
@media(max-width:560px){.nextcase{padding:22px}.nextcase .t{font-size:18px}}

/* ===== .ru-parity blocks: numbers / architecture note / services ===== */
.case-numbers{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;max-width:1000px}
.case-numbers li{position:relative;padding-left:30px;color:var(--ink-soft);font-size:16px;line-height:1.55}
.case-numbers li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:5px;
  background:var(--blue);-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
@media(max-width:680px){.case-numbers{grid-template-columns:1fr;gap:12px}}

.case-note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:16px;padding:30px 34px;max-width:940px}
.case-note h2{margin-bottom:14px}
.case-note p{color:var(--ink-soft);font-size:16px;line-height:1.65;margin-bottom:12px}
.case-note p:last-child{margin-bottom:0}
@media(max-width:560px){.case-note{padding:24px 22px}}

.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;transition:transform .25s,border-color .25s,box-shadow .25s}
.svc-card:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 24px 48px -30px rgba(46,92,242,.42)}
.svc-card h3{font-size:19px;font-weight:600;color:var(--ink);margin-bottom:10px}
.svc-card p{color:var(--ink-soft);font-size:15px;line-height:1.55;flex:1;margin-bottom:16px}
.svc-card .view{font-weight:600;color:var(--blue);font-size:14.5px}
.svc-all{margin-top:22px;font-weight:600}
.svc-all a{color:var(--blue)}
@media(max-width:860px){.svc-cards{grid-template-columns:1fr}}

/* =====================================================================
   CASE v2 — компоненты вёрстки, портированные с yusmpgroup.com/cases
   (device-мокапы, hero-grid, highlights, compare-таблица, фазы).
   Светлая тема «Студия». Эталон — kejs-limp-vpn.
   ===================================================================== */

/* ---- Hero: 2 колонки (текст + оформленный визуал/девайс) ---- */
.case-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,480px);
  gap:56px;align-items:center;margin-top:8px}
.case-hero-grid .hg-copy{min-width:0}
.case-hero-grid .hg-visual{position:relative}
.case-hero-grid .hg-visual img{width:100%;height:auto;display:block;border-radius:24px;
  border:1px solid var(--line);box-shadow:0 40px 80px -46px rgba(19,21,26,.5)}
.case-hero-grid .hg-visual::after{content:"";position:absolute;inset:auto -8% -12% -8%;height:60%;z-index:-1;
  background:radial-gradient(60% 100% at 60% 0,rgba(46,92,242,.22),transparent 70%);filter:blur(10px)}
@media(max-width:900px){.case-hero-grid{grid-template-columns:1fr;gap:30px}
  .case-hero-grid .hg-visual{max-width:440px}}

/* ---- Highlights: чипы-теги проекта ---- */
.case-highlights{display:flex;flex-wrap:wrap;gap:10px}
.case-highlights span{font-size:14px;font-weight:600;color:var(--blue-ink);background:var(--tint);
  border:1px solid #dfe6fb;border-radius:999px;padding:9px 15px;line-height:1.2}
/* dark: the hardcoded light lavender border (#dfe6fb) read as a white outline on dark case pages */
html[data-theme="dark"] .case-highlights span{border-color:rgba(63,107,255,.30)}

/* ---- Feature row: копия рядом с device-мокапом (чередование) ---- */
.case-feature{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:56px;align-items:center}
.case-feature + .case-feature{margin-top:64px}
.case-feature--reverse .cf-media{order:2}
.case-feature__title{font-size:clamp(23px,2.4vw,30px);font-weight:600;line-height:1.2;margin-bottom:16px}
.cf-text p{color:var(--ink-soft);font-size:16.5px;line-height:1.68;max-width:62ch}
.cf-text p + p{margin-top:14px}

/* device: телефонный корпус (портрет) на мягкой сцене */
.cf-media{position:relative;display:flex;justify-content:center;padding:34px 20px;
  background:linear-gradient(160deg,var(--tint),var(--bg-2));border:1px solid var(--line);border-radius:26px}
.cf-media--phone .cf-frame{position:relative;width:100%;max-width:288px;border:8px solid #0b1020;border-radius:40px;
  overflow:hidden;background:#0b1020;box-shadow:0 30px 60px -30px rgba(11,16,32,.6);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cf-frame img{width:100%;height:auto;display:block;border-radius:32px}
.case-feature:hover .cf-media--phone .cf-frame{transform:translateY(-6px)}

/* device: браузер-окно (ландшафт) для веб-кейсов — шапка с traffic-lights в ПОТОКЕ (без absolute-чёлки, ср. баг #169) */
.case-feature--web{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}
.case-feature--web.case-feature--reverse{grid-template-columns:minmax(280px,1fr) minmax(0,1.5fr)}
.case-feature--web .cf-media{order:0}
.case-feature--web.case-feature--reverse .cf-media{order:2}
.cf-media--web .cf-frame,.cf-media--flat .cf-frame{position:relative;width:100%;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -34px rgba(11,16,32,.5);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cf-media--web .cf-frame::before{content:"";display:block;height:34px;background:#eef1f7;border-bottom:1px solid var(--line);
  background-image:radial-gradient(circle at 6px 6px,#ff5f57 4px,transparent 4.5px),radial-gradient(circle at 24px 6px,#febc2e 4px,transparent 4.5px),radial-gradient(circle at 42px 6px,#28c840 4px,transparent 4.5px);
  background-position:10px 11px,10px 11px,10px 11px;background-repeat:no-repeat}
.cf-media--web .cf-frame img,.cf-media--flat .cf-frame img{border-radius:0}
.case-feature--web:hover .cf-frame{transform:translateY(-6px)}
@media(max-width:820px){.case-feature,.case-feature--reverse .cf-media,
  .case-feature--web,.case-feature--web.case-feature--reverse{grid-template-columns:1fr;order:0}
  .case-feature--web.case-feature--reverse .cf-media{order:0}
  .case-feature{gap:26px}.cf-media{padding:26px 16px}}

/* ---- Comparison table (WireGuard vs OpenVPN vs …) ---- */
.cl-compare{margin-top:40px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card)}
.cl-compare__intro{padding:24px 28px 4px}
.cl-compare__intro .eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.cl-compare__title{font-size:19px;font-weight:600;line-height:1.35;max-width:60ch}
.cl-compare__scroll{overflow-x:auto;padding:18px 10px 6px}
.cl-compare__scroll:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cl-compare__table{width:100%;border-collapse:collapse;min-width:680px;font-size:14.5px}
.cl-compare__table th,.cl-compare__table td{text-align:left;padding:14px 18px;vertical-align:top;
  border-bottom:1px solid var(--line);line-height:1.45}
.cl-compare__table thead th{font-size:13px;font-weight:600;color:var(--ink);background:var(--bg-2);white-space:nowrap}
.cl-compare__table tbody th{font-weight:600;color:var(--ink);width:210px}
.cl-compare__table td{color:var(--ink-soft)}
.cl-compare__table .is-limp{background:rgba(46,92,242,.06)}
.cl-compare__table thead th.is-limp{color:var(--blue-ink);background:rgba(46,92,242,.12)}
.cl-compare__table td.is-limp{color:var(--ink);font-weight:500}
.cl-compare__table tbody tr:last-child th,.cl-compare__table tbody tr:last-child td{border-bottom:none}
.cl-compare__refs{margin:0;padding:14px 28px 22px;font-size:13.5px;color:var(--ink-soft)}
.cl-compare__refs a{color:var(--blue);font-weight:500}

/* ---- Delivery methodology: фазы ---- */
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.phase{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.phase:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 22px 44px -28px rgba(46,92,242,.36)}
.phase .ph-n{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.phase h3{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:9px;line-height:1.25}
.phase p{color:var(--ink-soft);font-size:14.5px;line-height:1.55}
@media(max-width:860px){.phase-grid{grid-template-columns:1fr}}

/* ---- Галерея остаточных экранов кейса (все скачанные скрины попадают на страницу) ---- */
.case-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:38px}
.case-shots figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 24px 50px -36px rgba(11,16,32,.45);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.case-shots figure:hover{transform:translateY(-5px)}
.case-shots img{width:100%;height:auto;display:block}
.case-shots figcaption{font-size:13.5px;line-height:1.5;color:var(--ink-soft);
  padding:12px 16px 14px;border-top:1px solid var(--line);background:#fff}

/* ---- Клик по экрану → увеличение (лайтбокс) ---- */
.cf-frame img,.case-shots img,.hg-visual img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:rgba(9,12,22,.86);backdrop-filter:blur(4px);padding:4vmin;opacity:0;transition:opacity .22s ease}
.lb.open{display:grid;opacity:1}
.lb img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);cursor:zoom-out;
  transform:scale(.97);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.lb.open img{transform:scale(1)}
.lb-close{position:fixed;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:44px;cursor:pointer;
  transition:background .2s}
.lb-close:hover{background:rgba(255,255,255,.24)}

/* ===== mobile hardening (2026-07-07) — кейсы: убираем горизонтальный обрез ===== */
@media(max-width:820px){
  .case-hero-grid>*,.case-meta>*,.metric-strip>*,.svc-cards>*,.phase-grid>*,
  .case-feature>*,.case-numbers>*,.cases-grid>*,.case-shots>*{min-width:0}
}
/* плашка фактов в одну колонку на телефонах — иначе значения типа «iOS · Android» распирают сетку */
@media(max-width:520px){
  .case-meta{grid-template-columns:1fr}
  .case-meta div{border-right:none}
  .case-meta div:nth-child(1),.case-meta div:nth-child(2),.case-meta div:nth-child(3){border-bottom:1px solid var(--line)}
}

/* ── Ссылки на сайт/сторы кейса: бейджи с пиктограммами (2026-07-09) ── */
.case-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.store-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:12px;
  background:var(--ink,#0f1115);color:#fff;border:1px solid var(--ink,#0f1115);text-decoration:none;
  line-height:1.05;transition:transform .18s ease,box-shadow .2s ease,background .2s ease}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,17,21,.20);background:#000}
.store-badge svg{width:24px;height:24px;flex:0 0 auto}
.store-badge .sb-t{display:flex;flex-direction:column;text-align:left}
.store-badge .sb-s{font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.72;font-weight:500}
.store-badge .sb-b{font-size:15px;font-weight:600;letter-spacing:.01em}
/* Вариант «сайт» — светлый, чтобы отличался от сторов */
.store-badge.sb-web{background:#fff;color:var(--ink,#0f1115);border:1px solid var(--line,#e5e7eb)}
.store-badge.sb-web:hover{background:#fff;border-color:var(--ink,#0f1115);box-shadow:0 10px 24px rgba(15,17,21,.12)}


/* ===== injected from index.html: «Наши клиенты» marquee + «Услуги» fcards (pattern blocks on case pages) ===== */
/* ===== clients logo slider ===== */
.logo-slider{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;gap:14px;width:max-content;animation:logoscroll 46s linear infinite;will-change:transform}
.logo-slider:hover .logo-track,.logo-slider:focus-within .logo-track{animation-play-state:paused}
.logo-track .lg{flex:0 0 auto;width:200px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 24px;aspect-ratio:16/9;transition:border-color .2s,box-shadow .2s,transform .2s}
.logo-track .lg:hover{border-color:#d3d9e6;box-shadow:0 10px 26px rgba(19,21,26,.06);transform:translateY(-2px)}
.logo-track img{width:100%;max-height:110px;object-fit:contain;opacity:1;transition:transform .25s}
.logo-track .lg:hover img{transform:scale(1.05)}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:720px){.logo-track .lg{width:150px;padding:14px 18px}.logo-track{gap:10px;animation-duration:34s}}
/* ===== services list — «Услуги веб-студии YuSMP Group» (паттерн карточек со стр. Услуги) ===== */
.usl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:26px}
.usl-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;transition:transform .25s,border-color .25s,box-shadow .25s}
.fcard:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 22px 44px -26px rgba(46,92,242,.36)}
.fcard .ai{width:46px;height:46px;border-radius:13px;background:var(--tint);color:var(--blue);display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.fcard h3{font-size:18px;font-weight:600;margin-bottom:8px}
.fcard p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
a.fcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
a.fcard h3{color:var(--ink)}
a.fcard p{flex:1}
a.fcard:hover .fcard-more,a.fcard:focus-visible .fcard-more{gap:8px}
.fcard-more{display:inline-flex;align-items:center;gap:5px;margin-top:16px;font-size:14px;font-weight:600;color:var(--blue);transition:gap .2s}
/* per-service line-art motif — same idea as «Полный цикл» bento, adapted to light cards */
.fcard{position:relative;overflow:hidden}
.fcard>*{position:relative;z-index:1}
.fcard .motif{position:absolute;right:-12px;bottom:-14px;width:46%;max-width:158px;height:auto;color:var(--blue);opacity:.11;z-index:0;pointer-events:none;overflow:visible;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.fcard:hover .motif,.fcard:focus-visible .motif{opacity:.22;transform:translate(-5px,-5px)}
.fcard.mo-acc .motif{color:#d8a600}
/* cursor-follow glow — тот же приём, что в тёмном «Полный цикл», адаптирован под светлые карточки */
.fcard::after{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(46,92,242,.16),transparent 62%)}
.fcard:hover::after,.fcard:focus-visible::after{opacity:1}
.fcard.mo-acc::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(216,166,0,.18),transparent 62%)}
@media(max-width:980px){.usl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.usl-grid{grid-template-columns:1fr}}

/* ===== company overview — «Создаём технологичные решения» ===== */

/* ===== кликабельный техстек — карточка ведёт на страницу технологии ===== */
.tech-link{text-decoration:none;color:inherit;cursor:pointer}
.tech-link .tech-go{margin-left:auto;color:var(--blue);font-weight:600;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.tech-link:hover .tech-go{opacity:1;transform:none}

/* === DARK THEME overrides for case.css — marker dark-theme-v1-20260723 === */
/* surfaces hardcoded white → dark card (token-based rules inherit automatically) */
html[data-theme="dark"] .ccard .go{background:var(--card)}
html[data-theme="dark"] .cf-media--web .cf-frame,
html[data-theme="dark"] .cf-media--flat .cf-frame{background:var(--card)}
html[data-theme="dark"] .case-shots figure,
html[data-theme="dark"] .case-shots figcaption{background:var(--card)}
/* .store-badge.sb-web stays a light "website" pill by design (dark text on white) */

/* === DARK THEME: case link/store badges — marker badge-dark-20260723 === */
/* App Store badge: base uses background:var(--ink) which flips near-white in dark → white text vanished.
   Force a dark elevated pill with white glyph/text. */
html[data-theme="dark"] .store-badge{
  background:#12151d;color:#fff;border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .store-badge:hover{
  background:#191d27;border-color:rgba(255,255,255,.26);box-shadow:0 10px 24px rgba(0,0,0,.5)}
/* «Официальный сайт» stays a light pill by design, but text used var(--ink) → flipped near-white on #fff.
   Pin dark text/glyph so the light pill reads on dark pages. */
html[data-theme="dark"] .store-badge.sb-web{
  background:#fff;color:#0f1115;border-color:rgba(255,255,255,.28)}
html[data-theme="dark"] .store-badge.sb-web .sb-s{opacity:.62}
html[data-theme="dark"] .store-badge.sb-web:hover{
  background:#fff;border-color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.45)}
/* ==== case3d ==== */

/* ==== case3d: 3D-логотип кейса в hero — единый стиль со страницами технологий (#743/#762) ==== */
.hg-visual:has(.case3d){width:min(100%,440px);aspect-ratio:1/1;justify-self:center;border:0;box-shadow:none}
.hg-visual:has(.case3d)::after{display:none}
.case3d{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center;perspective:1000px}
.c3d-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 60%,transparent),transparent 72%);filter:blur(24px);opacity:.7;animation:c3dPulse 6s ease-in-out infinite;z-index:0}
.c3d-grid{position:absolute;inset:0;border-radius:26px;background:linear-gradient(transparent 96%,color-mix(in srgb,var(--brand) 24%,transparent) 0) 0 0/36px 36px,linear-gradient(90deg,transparent 96%,color-mix(in srgb,var(--brand) 24%,transparent) 0) 0 0/36px 36px;-webkit-mask:radial-gradient(closest-side,#000,transparent 76%);mask:radial-gradient(closest-side,#000,transparent 76%);opacity:.4;transform:translateZ(-70px);z-index:0}
.c3d-ring{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;border:1px dashed color-mix(in srgb,var(--brand) 55%,transparent);transform:rotateX(74deg);animation:c3dOrbit 16s linear infinite;opacity:.5;z-index:1}
.c3d-ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--brand);box-shadow:0 0 16px 3px color-mix(in srgb,var(--brand) 80%,transparent)}
.c3d-stage{position:relative;width:56%;aspect-ratio:1/1;transform-style:preserve-3d;z-index:2}
.c3d-obj{position:absolute;inset:0;transform-style:preserve-3d;animation:c3dSpin 9s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.c3d-lay{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(calc(var(--k) * -1.5px));fill:var(--brand);filter:brightness(calc(1 - var(--k)*0.055))}
.c3d-lay[style*="--k:0"]{filter:drop-shadow(0 10px 26px color-mix(in srgb,var(--brand) 50%,transparent))}
.c3d-def{position:absolute;width:0;height:0;overflow:hidden}
.c3d-badge{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center;z-index:3}
.c3d-badge b{display:block;font-size:1.15rem;letter-spacing:.01em;color:var(--ink,#13151a)}
.c3d-badge span{font-size:.7rem;opacity:.66;letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#13151a)}
@media(max-width:900px){.hg-visual:has(.case3d){max-width:320px}.c3d-stage{width:54%}}
@media(prefers-reduced-motion:reduce){.c3d-obj,.c3d-ring,.c3d-glow{animation:none}.c3d-obj{transform:rotateY(-18deg) rotateX(7deg)}}
@keyframes c3dSpin{0%,100%{transform:rotateY(-34deg) rotateX(7deg)}50%{transform:rotateY(34deg) rotateX(-5deg)}}
@keyframes c3dPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:.82;transform:scale(1.05)}}
@keyframes c3dOrbit{to{transform:rotateX(74deg) rotateZ(360deg)}}
/* c3d-tile */
.c3d-lay rect{fill:var(--brand)}
.c3d-face{position:absolute;inset:0;display:grid;place-items:center;transform:translateZ(7px);z-index:5;pointer-events:none}
.c3d-face span{font:800 clamp(46px,7.6vw,104px)/1 Manrope,Arial,sans-serif;color:#fff;letter-spacing:-.03em;text-shadow:0 3px 12px rgba(0,0,0,.30)}
/* c3d-slab */
.c3d-sl{position:absolute;inset:0;border-radius:24%;background:var(--brand);transform:translateZ(calc(var(--k) * -2px));filter:brightness(calc(1 - var(--k)*0.05))}
.c3d-sl[style*="--k:0"]{box-shadow:0 24px 54px -18px color-mix(in srgb,var(--brand) 60%,transparent),inset 0 2px 8px rgba(255,255,255,.30),inset 0 -12px 26px rgba(0,0,0,.22);background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 82%,#fff),var(--brand) 52%,color-mix(in srgb,var(--brand) 82%,#000))}
/* ==== case3d cover (#770): реальная обложка кейса в 3D, вращается как логотип технологий ==== */
.case3d.is-cover .c3d-stage{width:78%;aspect-ratio:4/3}
.c3d-card{position:absolute;inset:0;transform-style:preserve-3d;animation:c3dSpin 9s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.c3d-edge{position:absolute;inset:0;border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 66%,#0a0c10),color-mix(in srgb,var(--brand) 42%,#0a0c10));transform:translateZ(calc(var(--k) * -1.4px));filter:brightness(calc(1 - var(--k)*0.018))}
.c3d-front{position:absolute;inset:0;border-radius:16px;overflow:hidden;transform:translateZ(3px);background:#0a0c10;box-shadow:0 30px 66px -22px color-mix(in srgb,var(--brand) 62%,transparent),0 6px 18px rgba(0,0,0,.28)}
.c3d-front::before{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);z-index:2;pointer-events:none}
.c3d-front::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.24),transparent 42%);z-index:3;pointer-events:none}
.c3d-front img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.hg-visual:has(.case3d){max-width:360px}.case3d.is-cover .c3d-stage{width:92%}}

/* fix #776: контейним плашку фактов в колонку контента (была full-bleed до краёв экрана) */
.case-meta{width:min(calc(var(--maxw) - 48px), calc(100% - 48px));max-width:none;margin-left:auto;margin-right:auto}