/* ==========================================================================
   SEOVLY — arkusz podstron realizacji (case study)

   Jeden plik dla wszystkich podstron w /realizacje/. Dzieki temu dodanie
   kolejnej realizacji to skopiowanie jednego pliku HTML, bez powielania
   500 linii CSS-a. Kolejnosc jak w reszcie serwisu:

     <link rel="stylesheet" href="case.css">        <- ten plik
     <link rel="stylesheet" href="../responsive.css"> <- ZAWSZE jako ostatni

   Sekcje:
     1. Tokeny, reset, typografia      (identyczne jak na reszcie strony)
     2. Nawigacja i menu mobilne
     3. Przyciski, reveal, stopka
     4. Wejscie hero
     5. Cookie bar
     6. Komponenty case study
     7. Siatka listy realizacji
     8. Responsywnosc komponentow
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-dark: #08080a;
  --bg-soft: #f6f6f8;
  --ink: #08080a;
  --ink-soft: #6b6b73;
  --ink-faint: #a2a2aa;
  --line: #eaeaee;
  --accent: #0b6bff;
  --accent-soft: #5aa0ff;
  --g1: #6e8efb;
  --g2: #a777e3;
  --g3: #ff7eb3;
  --radius: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --eo: cubic-bezier(.22, 1, .36, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 90px;
}

body {
  font-family: 'Manrope', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.5;
}

.serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
}

::selection {
  background: var(--ink);
  color: #fff;
}

a {
  color: inherit;
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* NAV — kompaktowy, stale te same wymiary (bez zmian przy scrollu) */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 22px 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  background: rgba(255, 255, 255, .45);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 18px;
  padding: 13px 20px 13px 28px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  box-shadow: 0 4px 28px rgba(0,0,0,.09);
}
.brand { text-decoration: none; display: flex; align-items: center; }
.brand-logo { height: 43px; width: auto; display: block; margin: 0; }
.brand-mark { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--g1), var(--g2)); display: grid; place-items: center; position: relative; overflow: hidden; }
.brand-mark::after { content: ''; position: absolute; width: 7px; height: 7px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
.nav-links { display: none; gap: 20px; align-items: center; }
@media(min-width:980px) { .nav-links { display: flex; } }
.nav-links a { font-size: .97rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color .3s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
a.nav-cta { font-size: .91rem; font-weight: 600; padding: 11px 21px; border-radius: 17px; background: var(--accent); color: #fff !important; text-decoration: none; transition: background .4s var(--ease), transform .4s var(--ease); }
.nav-cta:hover { transform: scale(1.04); background: #0055e0; }
.nav-drop{position:relative}
.nav-drop-btn{display:flex;align-items:center;gap:4px;background:none;border:none;font:inherit;font-size:.93rem;font-weight:500;color:var(--ink-soft);cursor:pointer;padding:0;text-decoration:none;transition:color .3s}
.nav-drop-btn svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.nav-drop:hover .nav-drop-btn,.nav-drop:focus-within .nav-drop-btn,.nav-drop.active .nav-drop-btn{color:var(--ink)}
.nav-drop:hover .nav-drop-btn svg,.nav-drop:focus-within .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-panel{position:absolute;top:100%;left:0;padding-top:20px;width:min(94vw,880px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;transform:translateY(4px)}
.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav-drop-card{background:var(--bg);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px -25px rgba(8,8,10,.28);padding:26px;display:grid;grid-template-columns:.8fr 1.2fr;gap:24px}
.nav-drop-intro{padding:20px;border-radius:18px;background:var(--bg-soft);display:flex;flex-direction:column}
.nav-drop-tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.nav-drop-intro h4{font-size:1.2rem;font-weight:800;letter-spacing:-.015em;margin-bottom:9px;color:var(--ink)}
.nav-drop-intro p{font-size:.92rem;color:var(--ink-soft);line-height:1.6;flex:1}
.nav-drop-cta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.88rem;font-weight:700;color:var(--accent);text-decoration:none}
.nav-drop-cta svg{transition:transform .3s var(--ease)}
.nav-drop-cta:hover svg{transform:translateX(3px)}
.nav-drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nav-drop-item{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;border:1px solid var(--line);text-decoration:none;transition:background .25s,border-color .25s}
.nav-drop-item:hover{border-color:var(--ink-faint)}
.nav-drop-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nav-drop-item strong{display:block;font-size:.94rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.nav-drop-item small{display:block;font-size:.78rem;color:var(--ink-faint);margin-top:2px}
@media(max-width:1200px){.nav-drop-panel{width:min(92vw,360px)}.nav-drop-card{grid-template-columns:1fr}.nav-drop-intro{display:none}.nav-drop-grid{grid-template-columns:1fr}}

.burger { background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background .2s; }

@media(min-width:980px) {
  .burger {
    display: none;
  }
}

.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 26px;
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
}

.mob-menu.open {
  transform: translateY(0);
}

.mob-menu a {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  text-decoration: none;
}

.mob-close {
  position: absolute;
  top: 22px;
  right: 32px;
  background: none;
  border: none;
  font-size: 2.6rem;
  cursor: pointer;
  color: #0b6bff;
  line-height: 1;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .96rem;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 15px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all .4s var(--ease);
  font-family: inherit;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: scale(1.04);
  background: #0055e0;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition: left .6s;
}

.btn-primary:hover::after {
  left: 100%;
}

@media(prefers-reduced-motion:reduce) {
  .btn-primary::after {
    transition: none;
    display: none;
  }
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(11,107,255,.3);
}

.btn-ghost:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-white {
  background: #fff;
  color: var(--ink);
}

.btn-white:hover {
  transform: scale(1.04);
  background: #eee;
}

.btn-ghost-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
}

.btn-ghost-dark:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* TYPO */
.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 17px;
}

h2.big {
  font-size: clamp(2rem, 4.1vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1;
}

.big em,
.hero-title em,
.cta-final h2 em {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  background: linear-gradient(120deg, var(--g1), var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
}

.lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 590px;
}

.section-pad {
  padding: clamp(70px, 8vh, 110px) 0;
}

@media(max-width:600px) {
  .section-pad {
    padding: 60px 0;
  }
}

/* REVEAL — w duchu wejscia z hero: blur + skala + wznoszenie */
.reveal {
  opacity: 0;
  transform: translateY(46px) scale(.97);
  filter: blur(9px);
  will-change: transform, filter, opacity;
  transition: opacity .9s var(--eo), transform .9s var(--eo), filter .9s var(--eo);
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(.9) translateY(14px);
  filter: blur(10px);
  will-change: transform, filter, opacity;
  transition: opacity .9s var(--eo), transform .9s var(--eo), filter .9s var(--eo);
}

.reveal-scale.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* warianty boczne — wjazd z lewej/prawej */
.reveal-left {
  opacity: 0;
  transform: translateX(-56px) scale(.96);
  filter: blur(9px);
  will-change: transform, filter, opacity;
  transition: opacity .9s var(--eo), transform .9s var(--eo), filter .9s var(--eo);
}

.reveal-left.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(56px) scale(.96);
  filter: blur(9px);
  will-change: transform, filter, opacity;
  transition: opacity .9s var(--eo), transform .9s var(--eo), filter .9s var(--eo);
}

.reveal-right.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* gradientowy blysk na <em>, jak w hero — odpala sie gdy naglowek wjezdza w widok */
.big em { background-size: 220% 100%; }
.reveal.in em, .reveal-scale.in em, .reveal-left.in em, .reveal-right.in em { animation: em-sweep 1.15s var(--ease) .2s both; }

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-scale,.reveal-left,.reveal-right{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .reveal.in em,.reveal-scale.in em,.reveal-left.in em,.reveal-right.in em{animation:none!important}
}

/* PAGE HERO (subpages) */
.page-hero {
  padding: 160px 0 90px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* blobs */
.page-hero .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
}
.page-hero .blob-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(110,142,251,.22), transparent 68%);
  top: -18%; left: -6%;
  animation: ph-blob1 14s ease-in-out infinite;
}
.page-hero .blob-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(167,119,227,.18), transparent 68%);
  top: -12%; right: -4%;
  animation: ph-blob2 17s ease-in-out infinite;
}
.page-hero .blob-3 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(110,142,251,.12), transparent 68%);
  bottom: -8%; left: 50%; transform: translateX(-50%);
  animation: ph-blob3 20s ease-in-out infinite;
}
@keyframes ph-blob1 { 0%,100%{transform:translate(0,0)} 40%{transform:translate(5%,8%)} 70%{transform:translate(-4%,3%)} }
@keyframes ph-blob2 { 0%,100%{transform:translate(0,0)} 35%{transform:translate(-6%,5%)} 65%{transform:translate(4%,-6%)} }
@keyframes ph-blob3 { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-10%)} }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(11,107,255,.25);
  background: rgba(11,107,255,.05);
  padding: 7px 16px;
  border-radius: 980px;
  margin-bottom: 32px;
}

.crumb a {
  text-decoration: none;
  color: var(--accent);
  transition: opacity .3s;
}

.crumb a:hover {
  opacity: .75;
}

.page-hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  padding-bottom: 0.12em;
  position: relative;
}

.page-hero h1 em {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  background: linear-gradient(120deg, var(--g1), var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero p {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 600px;
  margin: 24px auto 0;
  position: relative;
}

/* DARK */
.dark {
  background: var(--bg-dark);
  color: #fff;
}

.dark .eyebrow {
  color: var(--accent-soft);
}

.dark .lead {
  color: #9a9aa2;
}

/* FOOTER */
footer {
  padding: 80px 0 40px;
}

.footer-top {
  display: grid;
  gap: 40px;
  margin-bottom: 60px;
}

@media(min-width:760px) {
  .footer-top {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-brand { margin-bottom: 16px; display: flex; align-items: center; }
.footer-brand-logo { height: 72px; width: auto; display: block; margin: 0; }

.footer-desc {
  font-size: .96rem;
  color: #8e8e96;
  max-width: 300px;
}

.footer-col h5 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8e8e96;
  margin-bottom: 20px;
}

.footer-col a {
  display: block;
  font-size: .96rem;
  color: #d0d0d4;
  text-decoration: none;
  margin-bottom: 12px;
  transition: color .3s;
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .88rem;
  color: #8e8e96;
}

/* CARDS GENERIC */
.card {
  padding: 38px 32px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--line);
  transition: all .5s var(--ease);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .18);
  border-color: transparent;
}

/* CTA FINAL */
.cta-final {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.cta-final h2 {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .98;
  margin-bottom: 28px;
}

/* ===== HERO ENTRANCE — kaskadowe wejscie (jak w hero strony glownej) ===== */
.page-hero h1 .line{display:block;overflow:hidden;padding-bottom:0.12em;margin-bottom:-0.12em}
.page-hero h1 .line-i{display:block;will-change:transform;transition:transform .95s var(--eo)}
.page-hero h1 .line:nth-child(1) .line-i{transition-delay:.26s}
.page-hero h1 .line:nth-child(2) .line-i{transition-delay:.40s}
.page-hero .crumb{will-change:transform,opacity;transition:opacity .7s var(--eo) .12s,transform .7s var(--eo) .12s}
.page-hero p{will-change:transform,opacity;transition:opacity .85s var(--eo) .58s,transform .85s var(--eo) .58s}
.page-hero .blob{transition:opacity 1.3s var(--eo)}
.page-hero .blob-2{transition-delay:.1s}.page-hero .blob-3{transition-delay:.2s}
.hero-card-inner{transition:transform .95s var(--eo),opacity .8s var(--eo)}
.hero-card-1 .hero-card-inner{transition-delay:.48s}
.hero-card-2 .hero-card-inner{transition-delay:.60s}
.hero-card-3 .hero-card-inner{transition-delay:.70s}
.hero-card{will-change:opacity,filter;transition:opacity .8s var(--eo),filter .8s var(--eo)}
.hero-card-1{transition-delay:.48s}.hero-card-2{transition-delay:.60s}.hero-card-3{transition-delay:.70s}
/* stan poczatkowy (zanim doda sie .hero-in) */
#hero-pin:not(.hero-in) .crumb,
#hero-pin:not(.hero-in) p{opacity:0;transform:translateY(26px)}
#hero-pin:not(.hero-in) h1 .line-i{transform:translateY(120%)}
/* mobile: H1 widoczny od pierwszej klatki, bez czekania na skrypt (LCP) */
@media(max-width:979px){#hero-pin h1 .line-i{transform:none!important;transition:none!important}}
#hero-pin:not(.hero-in) .blob{opacity:0}
#hero-pin:not(.hero-in) .hero-card{opacity:0;filter:blur(12px)}
#hero-pin:not(.hero-in) .hero-card-1 .hero-card-inner{transform:translate(-66px,44px) rotate(-16deg) scale(.68)}
#hero-pin:not(.hero-in) .hero-card-2 .hero-card-inner{transform:translate(66px,52px) rotate(14deg) scale(.68)}
#hero-pin:not(.hero-in) .hero-card-3 .hero-card-inner{transform:translate(42px,-52px) rotate(12deg) scale(.64)}
.page-hero h1 em{background-size:220% 100%}
#hero-pin.hero-in h1 em{animation:em-sweep 1.15s var(--ease) .5s both}
@keyframes em-sweep{0%{background-position:130% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){
  #hero-pin .crumb,#hero-pin p,#hero-pin .blob,#hero-pin .hero-card{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  #hero-pin h1 .line-i{transform:none!important;transition:none!important}
  #hero-pin.hero-in h1 em{animation:none!important}
}

/* mob-menu — jednolity styl jak na stronie głównej */
.mob-menu{position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;padding:72px 32px 28px;transform:translateY(-100%);transition:transform .55s cubic-bezier(.16,1,.3,1);overflow-y:auto}
.mob-menu.open{transform:translateY(0)}
.mob-menu a{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);display:block;transition:color .2s}
.mob-menu a:last-child{border-bottom:none}
.mob-menu a:hover{color:var(--accent)}
.mob-close{position:absolute;top:18px;right:24px;background:none;border:none;font-size:2rem;cursor:pointer;color:#0b6bff;line-height:1}
.mob-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;border-bottom:1px solid var(--line);padding:13px 0;font-family:inherit;font-size:1.15rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.mob-acc-chev{transition:transform .3s var(--ease);flex-shrink:0}
.mob-acc.open .mob-acc-chev{transform:rotate(180deg)}
.mob-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.mob-acc.open .mob-acc-panel{grid-template-rows:1fr}
.mob-acc-panel>div{overflow:hidden}
.mob-acc-item{display:flex!important;align-items:center;gap:12px;padding:10px 0 10px 8px!important;font-size:1rem!important;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:none!important}
.mob-acc-ic{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* --- burger --- */
.burger:hover { background: rgba(0, 0, 0, .06); }
.burger img { width: 27px; height: 27px; display: block; }

/* cookie banner */
.cookie-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:calc(100% - 48px);max-width:800px;background:var(--bg-dark);color:#fff;border-radius:var(--radius);padding:20px 26px;z-index:9999;box-shadow:0 8px 40px rgba(0,0,0,.4);display:flex;align-items:center;gap:20px;flex-wrap:wrap;animation:cb-up .5s var(--ease) both;}
.cookie-bar.hidden{display:none;}
.cookie-bar p{flex:1;font-size:.88rem;color:rgba(255,255,255,.72);min-width:200px;line-height:1.5;}
.cookie-bar-btns{display:flex;gap:10px;flex-shrink:0;}
.cb-btn{padding:10px 20px;font-size:.85rem;font-weight:600;font-family:inherit;border-radius:50px;cursor:pointer;transition:all .3s;}
.cb-btn.sec{background:transparent;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.75);}
.cb-btn.sec:hover{border-color:rgba(255,255,255,.6);color:#fff;}
.cb-btn.pri{background:var(--accent);color:#fff;border:none;}
.cb-btn.pri:hover{background:var(--accent-soft);}
@keyframes cb-up{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ==========================================================================
   6. CASE STUDY — komponenty wlasne podstron realizacji
   ========================================================================== */

/* --- pasek metadanych pod hero (klient / branza / zakres / rok) --- */
.cs-meta {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
}

@media(min-width:880px) {
  .cs-meta { grid-template-columns: repeat(4, 1fr); }
}

.cs-meta > div { background: var(--bg); padding: 24px 26px; }

.cs-meta h6 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 9px;
}

.cs-meta p { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

.cs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
  position: relative;
  z-index: 2;
}

/* --- SYGNATURA: ramka przegladarki z przewijanym zrzutem ekranu ---------
   Wysokosc okna trzyma zmienna --vh. Obrazek jest dluzszy niz ramka,
   wiec przesuwamy go o (wysokosc obrazka - wysokosc ramki):
   translateY(calc(-100% + var(--vh))). Bez JS, bez pomiarow.       */
.shot {
  border-radius: calc(var(--radius) * .85);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  box-shadow: 0 50px 90px -50px rgba(8, 8, 10, .45);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: #f1f1f4;
  border-bottom: 1px solid var(--line);
}

.shot-dot { width: 10px; height: 10px; border-radius: 50%; background: #d6d6dd; flex: none; }
.shot-dot.r { background: #ff5f57; }
.shot-dot.y { background: #febc2e; }
.shot-dot.g { background: #28c840; }

.shot-url {
  margin-left: 10px;
  flex: 1;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .74rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shot-view {
  --vh: 660px;
  height: var(--vh);
  overflow: hidden;
  position: relative;
  background: var(--bg-soft);
}

.shot-view img {
  width: 100%;
  display: block;
  transition: transform 7s cubic-bezier(.33, 0, .2, 1);
}

.shot.long:hover .shot-view img { transform: translateY(calc(-100% + var(--vh))); }

.shot-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin-top: 16px;
}

/* na dotyku nie ma najechania — nie obiecujemy efektu, ktorego nie da sie wywolac */
@media(pointer:coarse) {
  .shot.long:hover .shot-view img { transform: none; }
  .shot-hint { display: none; }
}

@media(prefers-reduced-motion:reduce) {
  .shot-view img { transition: none; }
  .shot.long:hover .shot-view img { transform: none; }
}

/* --- makieta telefonu ---------------------------------------------------- */
.phone {
  width: 268px;
  flex: none;
  margin: 0 auto;
  border: 10px solid #131317;
  border-radius: 42px;
  background: #131317;
  box-shadow: 0 40px 80px -40px rgba(8, 8, 10, .6);
  position: relative;
  overflow: hidden;
}

.phone::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 6px;
  border-radius: 99px;
  background: #2b2b33;
  z-index: 2;
}

.phone-view {
  --vh: 520px;
  height: var(--vh);
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
}

.phone-view img { width: 100%; display: block; transition: transform 18s linear; }
.phone.long:hover .phone-view img { transform: translateY(calc(-100% + var(--vh))); }

@media(pointer:coarse) { .phone.long:hover .phone-view img { transform: none; } }
@media(prefers-reduced-motion:reduce) { .phone-view img { transition: none; } }

/* --- galeria: telefon obok zrzutu desktopowego --------------------------- */
.cs-gallery { display: grid; gap: 28px; align-items: start; }

@media(min-width:900px) {
  .cs-gallery { grid-template-columns: 1fr 268px; gap: 40px; }
}

/* --- wiersz: zrzut PageSpeed (albo miejsce na niego) --------------------- */
.ps-row { display: flex; flex-direction: column; gap: 24px; align-items: center; }
@media(min-width:760px) {
  .ps-row { flex-direction: row; align-items: stretch; justify-content: center; }
}

.ps-shot {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 26px 20px 20px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ps-shot img { width: 100%; max-width: 437px; display: block; margin: 0 auto; }
.ps-shot p {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 18px;
}

/* --- miejsce na zrzut PageSpeed, zanim projekt trafi na demo.seovly.pl --- */
.ps-placeholder {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 30px 28px;
  max-width: 520px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  color: var(--ink-faint);
}
.ps-placeholder svg { opacity: .55; flex-shrink: 0; }
.ps-placeholder p { font-size: .88rem; line-height: 1.55; max-width: 32ch; }

/* --- uklad: lepka etykieta + tresc --------------------------------------- */
.cs-split { display: grid; gap: 32px; }

@media(min-width:920px) {
  .cs-split { grid-template-columns: .75fr 1.25fr; gap: 64px; }
  .cs-split-label { position: sticky; top: 110px; align-self: start; }
}

.cs-split-label h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.cs-body p { font-size: 1.04rem; color: var(--ink-soft); margin-bottom: 18px; max-width: 64ch; }
.cs-body p:last-child { margin-bottom: 0; }
.dark .cs-body p { color: #9a9aa2; }

.cs-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 36px 0 14px;
}

.cs-list { list-style: none; display: grid; gap: 13px; margin-top: 6px; }

.cs-list li { position: relative; padding-left: 32px; color: var(--ink-soft); font-size: 1rem; }
.dark .cs-list li { color: #9a9aa2; }

.cs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .34em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(11, 107, 255, .1);
  border: 1px solid rgba(11, 107, 255, .28);
}

.cs-list li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- co dokladnie zrobilem: siatka kart --------------------------------- */
.do-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }

@media(min-width:700px) { .do-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:1040px) { .do-grid { grid-template-columns: repeat(3, 1fr); } }

.do-card { padding: 32px 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); transition: all .5s var(--ease); }
.do-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .2); border-color: transparent; }
.do-card h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.do-card p { font-size: .95rem; color: var(--ink-soft); }

.do-ic {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(11, 107, 255, .08);
  color: var(--accent);
  margin-bottom: 18px;
}

/* --- proces: numerowana os czasu (kolejnosc niesie tu informacje) -------- */
.tl { display: grid; }

.tl-item { display: grid; grid-template-columns: 46px 1fr; gap: 22px; padding-bottom: 38px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }

.tl-item::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 46px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.dark .tl-item::before { background: rgba(255, 255, 255, .12); }
.tl-item:last-child::before { display: none; }

.tl-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  position: relative;
  z-index: 1;
}

.dark .tl-num { background: var(--bg-dark); border-color: rgba(255, 255, 255, .16); color: #fff; }
.tl-body h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; margin: 11px 0 8px; }
.tl-body p { font-size: .98rem; color: var(--ink-soft); max-width: 62ch; }
.dark .tl-body p { color: #9a9aa2; }

/* --- technologie --------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  font-size: .84rem;
  font-weight: 600;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--bg);
}

.dark .chip { border-color: rgba(255, 255, 255, .14); color: #c9c9d1; background: rgba(255, 255, 255, .04); }

/* --- cytat klienta ------------------------------------------------------- */
.quote { max-width: 880px; margin: 0 auto; text-align: center; }

.quote blockquote {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.quote-by { margin-top: 28px; font-size: .92rem; color: #8e8e96; }
.quote-by strong { color: #fff; font-weight: 700; }

/* --- nawigacja miedzy realizacjami --------------------------------------- */
.cs-nav { display: grid; gap: 16px; }

@media(min-width:760px) { .cs-nav { grid-template-columns: 1fr 1fr; } }

.cs-nav a {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  transition: all .5s var(--ease);
}

.cs-nav a:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .2); border-color: transparent; }
.cs-nav-dir { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.cs-nav-ttl { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.cs-nav .r { text-align: right; }

/* ==========================================================================
   7. LISTA REALIZACJI — siatka na /realizacje
   ========================================================================== */

.case-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 54px; }

.case-filter {
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .35s var(--ease);
}

.case-filter:hover { color: var(--ink); border-color: var(--ink-faint); }
.case-filter.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.cases { display: grid; gap: 46px; }

@media(min-width:880px) {
  .cases { grid-template-columns: 1fr 1fr; gap: 56px 34px; }
  .case.wide { grid-column: 1 / -1; }
  .case.wide .case-shot { aspect-ratio: 21/9; }
  .case.wide .case-ttl { font-size: 2rem; }
}

.case { display: block; text-decoration: none; color: inherit; }
.case[hidden] { display: none; }

.case-shot {
  position: relative;
  aspect-ratio: 16/11;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-color: var(--bg-soft);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.case:hover .case-shot { transform: translateY(-7px); box-shadow: 0 45px 75px -45px rgba(8, 8, 10, .5); }

.case-arr {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8, 8, 10, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
  transition: all .5s var(--ease);
}

.case:hover .case-arr { background: #fff; color: var(--ink); transform: rotate(-45deg); }

.case-cat { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 22px 0 9px; }
.case-ttl { font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.case-desc { font-size: .99rem; color: var(--ink-soft); margin-top: 11px; max-width: 60ch; }

.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.case-tag {
  font-size: .77rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 6px 13px;
  border-radius: 999px;
}

.case-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .92rem; font-weight: 700; color: var(--accent); transition: gap .35s var(--ease); }
.case:hover .case-more { gap: 14px; }

/* karta zapraszajaca do kontaktu — ostatnie pole w siatce */
.case-cta .case-shot {
  background: linear-gradient(135deg, var(--accent), #7b5cff);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 38px;
  color: #fff;
}

.case-cta .case-shot p { font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.12; max-width: 15ch; }

/* ==========================================================================
   8. RESPONSYWNOSC KOMPONENTOW CASE STUDY
   ========================================================================== */

@media(max-width:900px) {
  .shot-view { --vh: 380px; }
  .phone-view { --vh: 440px; }
  .phone { width: 240px; }
}

@media(max-width:520px) {
  .page-hero .crumb { font-size: .72rem; padding: 6px 13px; letter-spacing: .05em; }
}

@media(max-width:600px) {
  .shot-view { --vh: 260px; }
  .shot-url { display: none; }
  .cs-meta > div { padding: 18px 20px; }
  .do-card { padding: 26px 22px; }
  .tl-item { grid-template-columns: 38px 1fr; gap: 16px; padding-bottom: 30px; }
  .tl-num { width: 38px; height: 38px; font-size: .74rem; }
  .tl-item::before { left: 19px; top: 38px; }
  .cs-nav a { padding: 22px 24px; }
  .cs-nav .r { text-align: left; }
  .case-ttl { font-size: 1.35rem; }
  .cases { gap: 38px; }
  .case-filters { gap: 8px; margin-bottom: 36px; }
  .case-filter { padding: 8px 16px; font-size: .82rem; }
}

/* ===== TABLET 768–979px ===== */
@media(min-width:768px) and (max-width:979px){
  .nav-inner{width:70%;max-width:70%;gap:16px;justify-content:space-between}
  .nav-cta{display:none}
  .page-hero{padding:90px 0 60px}
  .footer-brand-logo{height:62px!important;margin:0!important}
}
/* ===== MOBILE ≤767px ===== */
@media(max-width:767px){
  .wrap{padding:0 20px}
  .nav-inner{width:70%!important;max-width:70%!important;padding:8px 12px!important;gap:0;justify-content:space-between}
  .nav-cta{display:none!important}
  .page-hero{padding:96px 0 48px}
  .page-hero h1{font-size:clamp(2.2rem,8vw,3.2rem);letter-spacing:-.04em}
  .page-hero p{font-size:.96rem}
  h2.big{font-size:clamp(1.9rem,7.5vw,2.6rem)}
  .cta-final h2{font-size:clamp(2rem,7vw,2.8rem)}
  .card{padding:26px 20px}
  .footer-brand-logo{height:56px!important;margin:0!important}
  footer{padding:48px 0 28px}
  .footer-top{gap:24px;margin-bottom:36px}
  .footer-bottom{flex-direction:column;gap:6px;align-items:flex-start}
}
/* ===== SMALL PHONES ≤480px ===== */
@media(max-width:480px){
  .wrap{padding:0 16px}
  .nav-inner{padding:8px 12px!important}
  .page-hero h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  .footer-brand-logo{height:48px!important}
}

/* ==========================================================================
   9. CASE STUDY 2.0 — przypiety ekran, pas zblizen, pasek postepu

   Zasada dla calej tej sekcji: kazdy efekt ma wylacznik.
   Na dotyku i przy prefers-reduced-motion wszystko sprowadza sie do
   zwyklego, statycznego ukladu. Zadnych listenerow, zadnych pomiarow.
   ========================================================================== */

/* --- pasek postepu czytania ------------------------------------------- */
.rp {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 210;
  pointer-events: none;
  background: transparent;
}

.rp span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--g2));
}

/* --- odznaka "projekt koncepcyjny" ------------------------------------ */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g2);
  background: rgba(167, 119, 227, .09);
  border: 1px solid rgba(167, 119, 227, .24);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.cs-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g2);
}

/* --- SYGNATURA 1: ekran rozjezdzajacy sie przy pierwszym przewinieciu ---
   JS ustawia --hp od 0 do 1. CSS robi reszte. Bez JS zostaje --hp:1,
   czyli po prostu pelna szerokosc.                                        */
.hs { padding: 46px 0 0; }

.hs-inner {
  transform: scale(calc(.74 + var(--hp, 1) * .26));
  transform-origin: 50% 0;
  will-change: transform;
}

.hs .shot { box-shadow: 0 60px 110px -55px rgba(8, 8, 10, .5); }

/* --- SYGNATURA 2: przypiety ekran + narracja obok ---------------------- */
.pin-grid { display: grid; gap: 34px; }

@media(min-width:960px) {
  .pin-grid { grid-template-columns: 1.02fr .98fr; gap: 56px; }
  .pin-sticky { position: sticky; top: 104px; }
}

.pin-frame {
  --fh: 60vh;
  height: var(--fh);
  overflow: hidden;
  position: relative;
  background: var(--bg-soft);
}

.pin-frame img {
  width: 100%;
  display: block;
  transform: translateY(0);
  will-change: transform;
}

.pin-dots { display: flex; gap: 7px; justify-content: center; margin-top: 20px; }

.pin-dot {
  width: 26px;
  height: 3px;
  border-radius: 99px;
  background: var(--line);
  transition: background .4s var(--ease);
}

.pin-dot.on { background: var(--accent); }

.pin-track { display: grid; }

.pin-step {
  padding: 6vh 0;
  opacity: .38;
  transition: opacity .6s var(--ease);
}

/* Krok musi zajmowac dosc miejsca w pionie, zeby przypiety ekran mial przez
   co przewijac. Ponizej 960px to nie obowiazuje, bo sticky i tak jest off. */
@media(min-width:960px) {
  .pin-step {
    min-height: 54vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.pin-step.on { opacity: 1; }
.pin-step:first-child { padding-top: 2vh; }
.pin-step:last-child { padding-bottom: 4vh; }

.pin-step .num {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 12px;
}

.pin-step h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.pin-step p { font-size: 1.02rem; color: var(--ink-soft); max-width: 52ch; }

/* na waskich ekranach nie ma miejsca na dwie kolumny: sticky wylaczony,
   ramka nizsza, wszystkie kroki widoczne w pelni */
@media(max-width:959px) {
  .pin-frame { --fh: 44vh; }
  .pin-step { padding: 26px 0; opacity: 1; }
  .pin-dots { display: none; }
}

/* --- SYGNATURA 3: poziomy pas ze zblizeniami ---------------------------
   .strip-pin dostaje od JS wysokosc (100vh + dystans do przewiniecia
   w bok), .strip-viewport przypina sie do gory ekranu na czas tego
   dodatkowego scrolla. Strona rusza dalej w dol dopiero, gdy pas zdjec
   dojedzie do konca — patrz skrypt na dole strony.

   WAZNE: .strip NIE MOZE miec tu overflow:hidden. Sticky przestaje
   dzialac, gdy jakikolwiek przodek ma ustawiony overflow inny niz
   visible — .strip-viewport ponizej i tak juz przycina poziomy pasek,
   wiec zewnetrzny overflow:hidden byl tylko zbednym duplikatem, ktory
   po cichu blokowal przypinanie.                                         */
.strip { overflow: visible; }

.strip-pin { position: relative; }

.strip-viewport { overflow: hidden; }
.strip-heading { margin-bottom: 38px; }

@media(min-width:960px) and (pointer:fine) {
  .strip-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.strip-track {
  display: flex;
  gap: 22px;
  padding-right: 24px;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.strip-item { flex: 0 0 auto; width: min(70vw, 460px); }

.strip-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: calc(var(--radius) * .8);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  display: block;
}

.strip-item figcaption {
  font-size: .88rem;
  color: var(--ink-soft);
  margin-top: 14px;
  padding-right: 10px;
}

/* bez JS albo na dotyku: zwykle przewijanie palcem ze snapowaniem */
@media(max-width:959px), (pointer:coarse) {
  .strip-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .strip-viewport::-webkit-scrollbar { display: none; }
  .strip-track { transform: none !important; }
  .strip-item { scroll-snap-align: center; width: min(82vw, 400px); }
}

/* --- pasek systemu projektowego --------------------------------------- */
.pal {
  display: grid;
  gap: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 34px;
  background: var(--bg);
}

@media(min-width:840px) { .pal { grid-template-columns: 1fr 1fr; gap: 56px; } }

.pal h4 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

.pal-colors { display: flex; flex-wrap: wrap; gap: 20px; }
.pal-color { display: flex; align-items: center; gap: 12px; }

.pal-swatch {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--c);
  border: 1px solid rgba(8, 8, 10, .1);
  flex: none;
}

.pal-hex { display: block; font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }
.pal-name { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: 3px; max-width: 20ch; }

.pal-font { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pal-font:last-child { border-bottom: 0; }
.pal-sample { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; }
.pal-meta { font-size: .8rem; color: var(--ink-faint); margin-top: 6px; }

/* --- sekcja szczerosci (ciemna, wezsza) -------------------------------- */
.honest { max-width: 720px; }
.honest ul { list-style: none; display: grid; gap: 14px; margin-top: 20px; }

.honest li {
  position: relative;
  padding-left: 30px;
  color: #9a9aa2;
  font-size: 1.02rem;
}

.honest li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .55em;
  width: 14px;
  height: 1px;
  background: var(--g2);
}

/* --- wylaczniki -------------------------------------------------------- */
@media(prefers-reduced-motion:reduce) {
  .hs-inner { transform: none !important; }
  .pin-frame img { transition: none; }
  .pin-step { opacity: 1 !important; }
  .rp span { transition: none; }
  .strip-track { transform: none !important; }
  .strip-pin { height: auto !important; }
  .strip-viewport { position: static !important; height: auto !important; }
}

@media(max-width:959px) {
  .hs-inner { transform: none !important; }
}

@media(max-width:600px) {
  .pin-frame { --fh: 300px; }
  .pal { padding: 28px 24px; }
  .pal-sample { font-size: 1.25rem; }
}

/* ==========================================================================
   SVEDRA — wyjatki tej jednej podstrony
   ========================================================================== */

/* Ramka hero dostaje osobny, jednoekranowy zrzut (hero.webp, 2880x1800)
   zamiast sklejonej calej strony, ktora siedzi w sekcji "Przewin" i musi
   zostac dluga. Stala wysokosc --vh przycielaby go przy kazdej szerokosci
   innej niz projektowa, wiec tutaj wysokosc ramki wynika wprost z proporcji
   obrazu: zero przyciecia i zero pustego pola pod spodem, od 320 do 1400px.
   --vh z regul wyzej zostaje bez efektu, bo height juz go nie czyta.       */
.svedra-hero-view { height: auto; aspect-ratio: 16 / 10; }

/* ===== H1 realizacji z branza (2026-10-08) =====
   H1 mowi teraz, dla jakiej branzy jest strona, a nazwa klienta przeszla
   do linii pod spodem (.cs-client). Dluzszy tekst dostaje troche mniejszy
   maksymalny rozmiar, zeby na komputerze miescil sie w dwoch liniach.
   Telefon bierze rozmiar z responsive.min.css jak dotad. */
.page-hero h1.cs-h1{font-size:clamp(2.4rem,5.2vw,4.2rem)}
.page-hero p.cs-client{font-size:1.12rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-top:6px;margin-bottom:14px}