/* REELM - case studies (wspolny styl) */
:root{
  --bg:#050608;--bg2:#0a0c10;--ink:#F2EEE6;--muted:rgba(242,238,230,.56);--faint:rgba(242,238,230,.32);
  --line:rgba(242,238,230,.12);--amber:#E9A23B;--amber-soft:rgba(233,162,59,.14);
  --maxw:1080px;--ease:cubic-bezier(.22,1,.36,1)
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--amber);color:#100b04}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
h1,h2,h3{font-family:"Clash Display",sans-serif;font-weight:700;line-height:1.02;letter-spacing:-.02em}
.serif{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
.amber{color:var(--amber)}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);font-weight:500}

/* nav */
.cnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:calc(100% - 24px);max-width:var(--maxw);
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 12px 10px 18px;
  border:1px solid var(--line);background:rgba(8,10,14,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:100px}
.cnav .brand{font-family:"Clash Display";font-weight:700;font-size:19px;letter-spacing:.02em;display:inline-flex;align-items:center}
.cnav .brand .mir{display:inline-block;transform:scaleX(-1)}.cnav .brand .l{color:var(--amber)}
.cnav .back{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.cnav .back:hover{color:var(--ink)}

/* przyciski #5 - rysowana ramka */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:500;font-size:14px;letter-spacing:.01em;
  color:var(--ink);border:1px solid var(--line);background:rgba(233,162,59,.06);padding:13px 24px;border-radius:40px;cursor:pointer;overflow:hidden;
  transition:color .35s var(--ease),background .35s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1.5px solid var(--amber);
  clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)}
.btn:hover::after{clip-path:inset(0 0 0 0)}
.btn:hover{color:var(--amber);background:rgba(233,162,59,.12)}

/* hero */
.chero{padding:clamp(120px,18vh,180px) 0 clamp(48px,7vw,84px)}
.chero .tag{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.chero .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.chero h1{font-size:clamp(40px,8vw,88px);text-wrap:balance;max-width:14ch}
.chero .lead{margin-top:22px;color:var(--muted);font-size:clamp(17px,2vw,21px);max-width:54ch}
.chero .cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* meta strip */
.meta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.meta .m{padding:22px clamp(8px,2vw,22px);border-left:1px solid var(--line)}
.meta .m:first-child{border-left:0;padding-left:0}
.meta .m .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.meta .m .v{font-family:"Clash Display";font-weight:600;font-size:clamp(15px,1.6vw,19px);color:var(--ink);line-height:1.15}
@media(max-width:720px){.meta{grid-template-columns:repeat(2,1fr)}.meta .m{border-left:1px solid var(--line)}.meta .m:nth-child(odd){border-left:0;padding-left:0}}

/* trust band (social proof - fakty, bez zmyslonych cytatow/ocen) */
.trust{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:clamp(30px,4vw,48px) 0;background:linear-gradient(160deg,rgba(233,162,59,.05),transparent)}
.trust .ti{padding:22px clamp(14px,2.5vw,26px);border-left:1px solid var(--line)}
.trust .ti:first-child{border-left:0}
.trust .ti b{display:block;font-family:"Clash Display";font-weight:600;font-size:15px;color:var(--amber);margin-bottom:5px;letter-spacing:-.01em}
.trust .ti span{font-size:13px;color:var(--muted);line-height:1.5}
@media(max-width:680px){.trust{grid-template-columns:1fr}.trust .ti{border-left:0;border-top:1px solid var(--line)}.trust .ti:first-child{border-top:0}}

/* shot */
.shot{margin:clamp(40px,6vw,72px) 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative;background:var(--bg2);box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.shot img{width:100%;display:block}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 16px;font-size:12.5px;color:var(--muted);background:linear-gradient(transparent,rgba(5,6,8,.85))}

/* sekcje tresci */
.sec{padding:clamp(28px,4vw,46px) 0;border-top:1px solid var(--line)}
.sec.first{border-top:0}
.sec h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:18px;text-wrap:balance;max-width:18ch}
.sec h2 .serif{font-size:1.08em}
.sec p{color:var(--muted);font-size:clamp(15px,1.5vw,17px);max-width:62ch;margin-bottom:14px}
.sec p strong{color:var(--ink);font-weight:500}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:start}
@media(max-width:760px){.sgrid{grid-template-columns:1fr;gap:18px}}

/* lista cech */
.feat{list-style:none;margin:18px 0 0;display:grid;gap:11px}
.feat li{position:relative;padding-left:24px;color:var(--muted);font-size:15px}
.feat li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--amber)}
.feat li b{color:var(--ink);font-weight:500}

/* stack badges */
.stack{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.stack span{font-size:12px;letter-spacing:.02em;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:rgba(255,255,255,.02)}

/* efekt - statystyki */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;margin-top:24px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:22px;background:linear-gradient(160deg,rgba(255,255,255,.025),transparent)}
.kpi .n{font-family:"Clash Display";font-weight:700;font-size:clamp(26px,3.4vw,40px);color:var(--amber);line-height:1}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:8px}

/* CTA koncowy */
.cend{margin:clamp(48px,7vw,90px) 0 0;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line);text-align:center}
.cend h2{font-size:clamp(28px,4.4vw,52px);text-wrap:balance;max-width:18ch;margin:0 auto 14px}
.cend p{color:var(--muted);max-width:50ch;margin:0 auto 28px}
.cend .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* nawigacja miedzy case'ami */
.morecase{border-top:1px solid var(--line);padding:34px 0 70px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.morecase a{display:inline-flex;align-items:center;gap:8px}.morecase a:hover{color:var(--amber)}

footer.cf{border-top:1px solid var(--line);padding:30px 0;color:var(--faint);font-size:13px}
.cf .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn::after{transition:none}}