/* =====================================================================
   LOBODS · /cases/ — сторінка кейсів. Токени й кнопки — з site.css.
   Без JS і з prefers-reduced-motion усе видно одразу, без анімацій.
   ===================================================================== */
html,.cs-body{overflow-x:clip}
.cs-body main{padding-top:var(--hdr)}
.langs a{padding:7px 10px;border-radius:999px;font:700 11px/1 var(--mono);letter-spacing:.06em;color:var(--fg-3);transition:.2s}
.langs a.on{background:var(--brand);color:var(--bg)}
.langs a:not(.on):hover{color:var(--fg)}
.y{font-style:normal;color:var(--accent)}
.h2 .y,.h1 .y{font-style:normal}

/* ---------- hero ---------- */
.cs-hero{position:relative;padding-top:clamp(40px,8vh,96px);background:
  radial-gradient(900px 520px at 85% 0%,var(--brand-soft),transparent 70%),
  radial-gradient(700px 420px at 0% 100%,var(--accent-soft),transparent 70%)}
.cs-hero-in{display:grid;gap:22px}
.cs-h1{font-size:clamp(42px,7.4vw,124px);line-height:.94}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:inline-block}
.cs-hero .lede{max-width:60ch}
.cs-hstats{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,64px);margin-top:10px}
.cs-hstats div{display:grid;gap:4px}
.cs-hstats dt{font:800 clamp(30px,3.4vw,52px)/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cs-hstats dd{font:600 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.cs-pile{position:relative;margin:clamp(28px,5vh,56px) auto 0;max-width:calc(var(--max) + 2 * var(--gut));padding:0 var(--gut);display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* плашки — желейні скляні пігулки: напівпрозорий корпус, відблиск згори, тінь знизу, легкий колірний відтінок */
.plg{--tint:109,192,231;position:relative;display:flex;align-items:center;justify-content:center;width:124px;height:58px;padding:10px 16px;border-radius:999px;user-select:none;-webkit-user-select:none;
  background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(var(--tint),.2),rgba(var(--tint),.06) 60%,rgba(10,13,18,.35));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -6px 14px rgba(0,0,0,.35),inset 0 0 0 1px rgba(var(--tint),.12),0 14px 22px -12px rgba(0,0,0,.75)}
.plg:nth-child(3n+2){--tint:255,233,74}
.plg:nth-child(3n+3){--tint:243,241,234}
.plg::before{content:"";position:absolute;left:16%;right:34%;top:4px;height:26%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));pointer-events:none}
.plg::after{content:"";position:absolute;right:13%;bottom:5px;width:10%;height:9%;border-radius:999px;background:rgba(255,255,255,.12);filter:blur(1px);pointer-events:none}
.plg img{position:relative;max-height:32px;max-width:100%;width:auto;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
@media (pointer:fine){.plg{-webkit-backdrop-filter:blur(6px) saturate(1.4);backdrop-filter:blur(6px) saturate(1.4)}}
.cs-pile.live{height:clamp(240px,34vh,340px);display:block;padding:0;overflow:hidden;cursor:grab;touch-action:pan-y;border-bottom:1px solid var(--line)}
.cs-pile.live:active{cursor:grabbing}
.cs-pile.live .plg{position:absolute;left:0;top:0;will-change:transform;transform:translate(-200px,-200px)}
.cs-pile.live .plg img{will-change:transform}
.cs-pile-hint{font:600 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding-block:14px 22px;display:none}
.cs-pile.live+.cs-pile-hint{display:block}

/* ---------- index ---------- */
.cs-index{padding-block:clamp(72px,12vh,140px) clamp(40px,8vh,96px)}
.cs-index-hd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.cs-index-hd .eyebrow{margin-bottom:14px}
.cs-note{display:flex;align-items:center;gap:18px;max-width:820px;margin:0 0 32px;padding:16px 22px 16px 16px;border:1px dashed var(--line-2);border-radius:var(--r-m);background:var(--card)}
.cs-note img{flex:none;width:60px;height:60px;transform:rotate(-8deg);filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.cs-note p{font-size:15px;line-height:1.5;color:var(--fg-2)}
.cs-note b{color:var(--fg);font-weight:700}
.cs-filters{display:flex;flex-wrap:wrap;gap:8px}
.cs-filters button{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);transition:background .2s,color .2s,border-color .2s}
.cs-filters button:hover{color:var(--fg);border-color:var(--fg-3)}
.cs-filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.cs-tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.cs-tile[hidden]{display:none}
.cs-tile a{display:grid;grid-template-rows:auto auto 1fr;height:100%;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line);overflow:hidden;transition:border-color .25s,transform .35s var(--ease-o)}
.cs-tile a:hover{border-color:var(--brand);transform:translateY(-4px)}
.cs-tile .th{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.cs-tile .th img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease-o)}
.cs-tile a:hover .th img{transform:scale(1.06)}
.cs-tile .ti{display:flex;gap:10px;align-items:baseline;padding:14px 16px 4px;font:700 14px/1.3 var(--body)}
.cs-tile .ti b{font:700 11px/1 var(--mono);color:var(--brand)}
.cs-tile .tn{padding:0 16px 16px;align-self:end;font:800 20px/1.1 var(--disp);color:var(--accent);letter-spacing:-.02em}
.cs-tile .tn.tc{font:700 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}

/* ---------- кадри: пост / телефон / браузер ---------- */
.fr{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--bg-3);border:1px solid var(--line-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.fr img{width:100%;height:auto}
.fr-p{border-radius:30px;border:6px solid #1d2531;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px var(--line-2)}
.fr-b{border-radius:14px}
.fr-bar{display:flex;gap:6px;padding:9px 12px;background:var(--bg-4);border-bottom:1px solid var(--line)}
.fr-bar b{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.fr-bar b:first-child{background:#ff6159}.fr-bar b:nth-child(2){background:var(--accent)}.fr-bar b:nth-child(3){background:#3fd17a}

/* ---------- кейс ---------- */
.cs-case{position:relative;overflow-x:clip;padding-block:clamp(72px,12vh,150px);border-top:1px solid var(--line)}
.cs-case[hidden],.cs-feat[hidden]{display:none}
.cs-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"copy media";column-gap:clamp(28px,5vw,88px);row-gap:36px;align-items:start}
.cs-r .cs-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"media copy"}
.cs-copy{grid-area:copy;display:grid;gap:16px;position:relative;z-index:2}
.cs-n{position:absolute;top:-.32em;right:var(--gut);font:900 clamp(120px,19vw,300px)/1 var(--disp);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--line-2);pointer-events:none;z-index:0;user-select:none}
.cs-r .cs-n{right:auto;left:var(--gut)}
.cs-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cs-idx{font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--fg-3)}
.cs-logos{display:flex;align-items:center;gap:18px}
.cs-logos img{height:36px;width:auto;max-width:180px}
.cs-copy .h2{font-size:clamp(28px,3.3vw,54px)}
.cs-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.cs-big b{font:800 clamp(40px,4.6vw,76px)/1 var(--disp);letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.cs-big span{font:600 12px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);max-width:26ch}
.cs-task{color:var(--fg-2);max-width:56ch}
.cs-task b{color:var(--fg)}
.cs-did{display:grid;gap:10px;max-width:58ch}
.cs-did li{position:relative;padding-left:26px;color:var(--fg-2);font-size:15.5px}
.cs-did li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--brand)}
.cs-did b{color:var(--fg);font-weight:700}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chips span{padding:7px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cs-copy .btn,.pane-copy .btn{justify-self:start;transition:background .25s,color .25s,border-color .25s}
.btn.fill.cs-play{background:var(--accent);border-color:var(--accent)}
.cs-tiles{display:grid;margin-top:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative;z-index:2}
.tl{padding:18px 16px;border-radius:var(--r-s);background:var(--card-2);border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.tl:first-child{background:var(--brand);border-color:var(--brand);color:var(--bg)}
.tl:first-child dd{color:rgba(10,13,18,.72)}
.tv{font:800 clamp(22px,2.1vw,34px)/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl dd{font-size:13px;line-height:1.35;color:var(--fg-2)}

/* медіа — масонрі у дві колонки, права колонка зсунута вниз */
.cs-media{grid-area:media;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);align-items:start}
.cs-media .fr:nth-of-type(even){margin-top:clamp(40px,8vw,120px)}
.cs-media .fr-b{grid-column:1/-1;margin-top:0!important}
.cs-media[data-n="1"]{grid-template-columns:1fr}
.cs-emo{position:absolute;width:clamp(72px,8vw,120px);height:auto;top:-40px;right:-18px;z-index:4;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.cs-r .cs-emo{right:auto;left:-18px}

/* ---------- Stadami: закріплена історія ---------- */
.cs-feat{position:relative;border-top:1px solid var(--line);background:radial-gradient(900px 600px at 80% 30%,var(--brand-soft),transparent 70%)}
.cs-feat-in{display:grid;gap:28px;padding-block:clamp(56px,9vh,110px)}
.cs-feat-top{display:grid;gap:16px}
.cs-feat-top .h2{font-size:clamp(32px,4.4vw,72px);max-width:18ch}
.cs-steps{display:flex;flex-wrap:wrap;gap:8px}
.cs-steps li{display:flex;gap:10px;align-items:center;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);transition:.3s}
.cs-steps li b{color:inherit}
.cs-steps li.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.cs-panes{display:grid;gap:56px}
.pane{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center}
.pane-copy{display:grid;gap:18px;align-content:start}
.pane-copy h3{font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pane-copy .cs-tiles{grid-template-columns:1fr;gap:10px;margin-top:0}
.pane-copy .tl{grid-template-columns:auto 1fr;align-items:center;gap:18px}
.pane-copy .tv{font-size:clamp(30px,3.4vw,54px)}
.pane-media.fan{display:flex;justify-content:center;align-items:center}
.pane-media.fan .fr{width:38%;flex:none}
.pane-media.fan .fr:nth-child(1){transform:rotate(-6deg) translate(12%,4%)}
.pane-media.fan .fr:nth-child(2){z-index:2}
.pane-media.fan .fr:nth-child(3){transform:rotate(6deg) translate(-12%,4%)}
.cs-feat-bar{display:none}

/* ---------- тікер цифр ---------- */
.cs-tick{overflow:hidden;padding-block:clamp(22px,4vh,40px);border-top:1px solid var(--line);background:var(--bg-2)}
.cs-tick-in{display:flex;gap:36px;width:max-content;align-items:center;white-space:nowrap}
.cs-tick span{font:600 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.cs-tick b{font:800 clamp(34px,4.4vw,72px)/1 var(--disp);letter-spacing:-.04em;color:var(--fg);text-transform:none;margin-right:10px}
.cs-tick i{font-style:normal;color:var(--accent);font-size:28px}

/* ---------- фінал ---------- */
.cs-end{position:relative;overflow:hidden;padding-block:clamp(96px,16vh,180px);border-top:1px solid var(--line);background:radial-gradient(800px 500px at 50% 100%,var(--accent-soft),transparent 70%)}
.cs-end-in{display:grid;gap:24px;justify-items:center;text-align:center}
.cs-end .h1{font-size:clamp(40px,7vw,120px)}
.cs-end .lede{margin-inline:auto}
.cs-end-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cs-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.cs-end-in{position:relative;z-index:1}
.cs-foot{border-top:1px solid var(--line);padding-block:28px}
.cs-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;font:600 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.cs-foot span{margin-right:auto}
.cs-foot a:hover{color:var(--fg)}

/* ---------- HUD «07 / 23» — вертикальна рейка ліворуч ---------- */
.cs-hud{position:fixed;left:max(10px,calc((100vw - var(--max)) / 2 - var(--gut) - 6px));top:50%;z-index:800;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translate(-8px,-50%);opacity:0;transition:opacity .3s,transform .3s var(--ease-o);pointer-events:none;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.cs-hud b{font:800 15px/1 var(--disp);color:var(--fg);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cs-hud span{writing-mode:vertical-rl}
.cs-hud i{display:block;width:2px;height:90px;background:var(--line-2);position:relative;overflow:hidden}
.cs-hud i::after{content:"";position:absolute;inset:0;transform-origin:50% 0;transform:scaleY(var(--p,0));background:linear-gradient(var(--brand),var(--accent))}
.cs-hud.on{opacity:1;transform:translate(0,-50%)}
@media (max-width:1240px){.cs-hud{display:none}}

/* ---------- десктоп із рухом ---------- */
@media (min-width:921px) and (prefers-reduced-motion:no-preference){
  .js .cs-copy.sticky{position:sticky;top:calc(var(--hdr) + 32px)}
  .js .cs-feat.pinnable .cs-feat-pin{height:100vh;height:100svh;display:flex;align-items:center}
  .js .cs-feat.pinnable .cs-feat-in{width:100%;gap:20px;padding-block:calc(var(--hdr) + 20px) 28px}
  .js .cs-feat.pinnable .cs-feat-top{grid-template-columns:auto 1fr;align-items:end;column-gap:28px;row-gap:12px}
  .js .cs-feat.pinnable .cs-feat-top .eyebrow{grid-column:1/-1}
  .js .cs-feat.pinnable .cs-feat-top .h2{font-size:clamp(28px,3.2vw,50px);max-width:none;grid-column:1/-1}
  .js .cs-feat.pinnable .cs-steps{grid-column:1/-1}
  .js .cs-feat.pinnable .cs-panes{position:relative;display:block;height:min(54vh,540px)}
  .js .cs-feat.pinnable .pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
  .js .cs-feat.pinnable .pane.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
  .js .cs-feat.pinnable .pane-media{height:100%;display:flex;align-items:center;justify-content:center}
  .js .cs-feat.pinnable .pane-media>.fr-b{max-height:100%;width:auto;aspect-ratio:auto}
  .js .cs-feat.pinnable .pane-media>.fr-b img{max-height:calc(min(54vh,540px) - 30px);width:auto}
  .js .cs-feat.pinnable .pane-media.fan .fr{width:auto}
  .js .cs-feat.pinnable .pane-media.fan .fr img{height:calc(min(54vh,540px) - 60px);width:auto}
  .js .cs-feat.pinnable .cs-feat-bar{display:block;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
  .js .cs-feat.pinnable .cs-feat-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));transform-origin:0 50%;transform:scaleX(var(--p,0))}
}

/* ---------- планшет і телефон ---------- */
@media (min-width:921px) and (max-width:1100px){
  .cs-nav a:not(.act):not(.nav-game){display:none}
}
@media (max-width:920px){
  .cs-nav a.act{color:var(--brand)}
  .cs-case{padding-block:clamp(56px,8vh,88px)}
  .cs-r .cs-n{left:auto;right:var(--gut)}
  .cs-grid,.cs-r .cs-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "media";row-gap:28px}
  .cs-media{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:8px var(--gut) 16px;scrollbar-width:none}
  .cs-media::-webkit-scrollbar{display:none}
  .cs-media .fr{flex:none;width:62vw;max-width:300px;scroll-snap-align:center;margin-top:0!important}
  .cs-media .fr-b{width:84vw;max-width:520px}
  .cs-emo{display:none}
  .cs-n{font-size:clamp(90px,28vw,160px);top:-.2em}
  .pane{grid-template-columns:minmax(0,1fr)}
  .pane-media.fan .fr{width:42%}
  .cs-hud{display:none}
}
@media (max-width:560px){
  .hdr-cta{display:none}
  .cs-n{display:none}
  .cs-note{gap:14px;padding:14px 16px 14px 12px;align-items:flex-start}
  .cs-note img{width:44px;height:44px}
  .cs-note p{font-size:14px}
  .cs-tiles{grid-template-columns:minmax(0,1fr)}
  .tl{grid-template-columns:auto 1fr;align-items:center;gap:14px}
  .cs-tiles-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cs-tile .ti{font-size:13px;padding:10px 12px 2px}
  .cs-tile .tn{padding:0 12px 12px;font-size:17px}
  .plg{width:92px;height:44px;padding:8px 12px}
  .plg img{max-height:24px}
  .cs-pile:not(.live) .plg:nth-child(n+19){display:none}
}