/* Сторінка кейсу v0.4 — відповідає Vercel case-a.html ("ВИДАННЯ").
   База (токени, .container, .marquee, .btn, .site-head, шрифти) — з redesign.css теми. */

/* СВІТЛИЙ фон сторінки кейсу — перебиває темний body.redesign-v2 (background:ink) */
body.bzc-case-page{background:var(--paper);color:var(--ink)}
body.bzc-case-page main{background:transparent}
/* текстура бетону (redesign глушить .bg-concrete::before display:none — вмикаємо назад) */
body.bzc-case-page.bg-concrete::before{display:block}

/* ===== HERO ===== */
.chero{position:relative;height:54vh;min-height:420px;display:flex;align-items:flex-start;overflow:hidden}
.chero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,15,.82) 0%,rgba(14,15,15,.4) 42%,rgba(14,15,15,.18) 100%)}
.chero .inner{position:relative;z-index:2;color:var(--paper);padding-top:46px;width:100%}
.chero .eyebrow{color:var(--lime);margin-bottom:18px;display:flex;gap:14px;align-items:center;font-family:ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.chero .eyebrow::before{content:"";width:42px;height:2px;background:var(--lime)}
.chero h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2.1rem,5.2vw,4.2rem);line-height:.9;letter-spacing:-.02em;max-width:18ch;color:var(--paper)}
.chero .tags{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.chero .tags span{border:1px solid rgba(244,245,242,.45);color:var(--paper);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding:8px 16px;border-radius:40px}

/* ===== split body ===== */
.case-grid{display:block;padding:54px 0 26px}
.rail{margin-bottom:48px}
.rail dl{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);border:1px solid var(--ink);border-top:2px solid var(--lime);margin:0}
.rail .spec{background:transparent;border:0;border-left:1px solid var(--line-dark);padding:22px 26px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.rail .spec:first-child{border-left:0}
.rail .spec dt{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-family:var(--font-display)}
.rail .spec dd{font-family:var(--font-display);font-weight:700;font-size:21px;text-align:left;letter-spacing:-.01em;line-height:1.1;color:var(--paper);margin:0}
.rail .videobtn{margin-top:26px;max-width:300px;display:flex;align-items:center;gap:13px;background:var(--ink);color:var(--lime);padding:15px 18px;border-radius:2px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:13px;transition:.25s;text-decoration:none}
.rail .videobtn:hover{background:#000}
.rail .videobtn .pi{width:30px;height:30px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none}
.rail .videobtn .pi svg{width:12px;height:12px;fill:var(--ink);margin-left:2px}

.intro{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(30px,4vw,60px);align-items:start;margin-bottom:74px;padding-bottom:54px;border-bottom:1px solid var(--line)}
.lead{font-family:var(--font-display);font-weight:500;text-transform:none;font-size:clamp(1.55rem,2.7vw,2.35rem);line-height:1.16;letter-spacing:-.01em;margin:0;color:var(--ink)}
.intro-side{background:var(--ink);color:var(--paper);padding:26px 30px 28px;border-top:3px solid var(--lime)}
.intro-side .be{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.02em;color:var(--lime)}
.intro-side dl{margin-top:18px;display:flex;flex-direction:column}
.intro-side .r{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;border-top:1px solid var(--line-dark);padding:12px 0}
.intro-side .r:first-child{border-top:0;padding-top:0}
.intro-side .r dt{font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:11px}
.intro-side .r dd{font-family:var(--font-display);font-weight:600;color:var(--paper);text-align:right;margin:0}
@media(max-width:760px){.intro{grid-template-columns:1fr;gap:24px;margin-bottom:48px;padding-bottom:0;border-bottom:0}.intro-side{margin-top:4px}}

.sec-label{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.sec-label::before{content:"";width:30px;height:30px;flex:none;background:var(--lime);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.sec-label h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.01em;margin:0;color:var(--ink)}

/* challenges numbered */
.chal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3vw,48px);margin-bottom:78px}
.chal .c .n{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ink);letter-spacing:-.03em}
.chal .c h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:18px;margin:16px 0 10px;letter-spacing:-.005em;color:var(--ink)}
.chal .c p{color:var(--gray);font-size:15px;line-height:1.5}
@media(max-width:760px){.chal{grid-template-columns:1fr;gap:26px}}

/* solutions accordion */
.acc{margin-bottom:78px}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(1rem,1.7vw,1.25rem);letter-spacing:-.005em;transition:.2s;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;flex:none;transition:.3s;position:relative}
.acc summary .pm::before,.acc summary .pm::after{content:"";position:absolute;background:var(--ink);transition:.3s}
.acc summary .pm::before{width:12px;height:2px}.acc summary .pm::after{width:2px;height:12px}
.acc details[open] summary .pm{background:var(--lime);border-color:var(--lime)}
.acc details[open] summary .pm::after{transform:scaleY(0)}
.acc .answer{padding:0 4px 28px;color:var(--gray);font-size:16px;line-height:1.6;max-width:70ch}

/* result metrics */
.result{background:var(--ink);color:var(--paper);border-radius:4px;padding:56px 48px;margin-bottom:30px}
.result .rlede{font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3;max-width:34ch;margin:0 0 44px;color:var(--paper)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.metrics .m b{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5vw,4rem);color:var(--lime);display:block;line-height:1;letter-spacing:-.03em}
.metrics .m span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:12px;display:block}
@media(max-width:680px){.metrics{grid-template-columns:1fr 1fr;gap:30px 20px}.result{padding:40px 26px}}
@media(max-width:620px){.rail dl{grid-template-columns:1fr 1fr}.rail .spec:nth-child(3){border-left:0}.rail .spec:nth-child(n+3){border-top:1px solid var(--line-dark)}}

/* gallery horizontal */
.gal{padding:30px 0 90px}
.gal .galhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.galwrap{position:relative}
.galrow{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:var(--lime) var(--line)}
.galrow img{height:clamp(280px,42vw,460px);width:auto;flex:none;scroll-snap-align:start;object-fit:cover;border-radius:3px}
.galrow::-webkit-scrollbar{height:6px}.galrow::-webkit-scrollbar-thumb{background:var(--lime)}.galrow::-webkit-scrollbar-track{background:var(--line)}
.galnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--lime);border:0;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:background .2s,transform .2s}
.galnav:hover{background:#000;transform:translateY(-50%) scale(1.07)}
.galnav.prev{left:-14px}.galnav.next{right:-14px}
@media(max-width:600px){.galnav{display:none}}

/* video band */
.vband{padding:8px 0 92px}
.vband .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.vcap{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.vcap::before{content:"";width:30px;height:30px;flex:none;background:var(--lime);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.vcap .vt{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.01em;color:var(--ink)}
.vcap .vm{margin-left:auto;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vframe{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#0a0b0a;box-shadow:0 24px 60px -28px rgba(14,15,15,.6)}
.vframe::after{content:"";position:absolute;inset:0;border:1px solid var(--line-dark);border-radius:5px;pointer-events:none}
.vband iframe,.vband video{width:100%;height:100%;border:0;display:block;object-fit:cover}
@media(max-width:640px){.vband .wrap{padding:0 18px}.vband{padding:4px 0 64px}}

/* cta */
.cta2{background:var(--ink);color:var(--paper);text-align:center;padding:96px 0}
.cta2 h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,4.5vw,3.4rem);line-height:.96;letter-spacing:-.02em;max-width:20ch;margin:0 auto 32px;color:var(--paper)}
.cta2 h2 em{font-style:normal;color:var(--lime)}
.backlink{padding:22px 0;border-bottom:1px solid var(--line)}
.backlink a{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--gray);display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.backlink a:hover{color:var(--ink)}
@media(max-width:600px){.chero h1{font-size:clamp(2.2rem,8.5vw,3rem)}.chero .eyebrow{font-size:9.5px;letter-spacing:.08em}}