/* ==========================================================================
   Konkol.dev — system wizualny
   Biel, granat, miękkie cienie. Helvetica Neue + Caveat (podpis odręczny).
   ========================================================================== */

:root{
  /* powierzchnie */
  --paper:      #FFFFFF;
  --paper-2:    #F1F4F9;
  --card:       #FFFFFF;
  --on-dark:    #FFFFFF;

  /* tekst */
  --ink:        #010736;
  --ink-2:      #22396F;
  --ink-3:      #54648C;

  /* linie */
  --rule:       #E4E8F0;
  --rule-2:     #CBD2E0;
  --grid-line:  rgba(1,7,54,.05);

  /* marka */
  --navy:      #0D1C42;
  --navy-2:    #22396F;
  --navy-deep: #010736;
  --navy-tint: #EDF0F7;
  --navy-line: #A8B3CE;

  /* typografia */
  --sans: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  --serif:'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;

  /* przestrzeń */
  --gut:  clamp(20px, 5vw, 56px);
  --maxw: 1180px;
  --band: clamp(72px, 9vw, 128px);

  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(1,7,54,.04), 0 3px 10px rgba(1,7,54,.045);
  --shadow-md: 0 2px 4px rgba(1,7,54,.04), 0 14px 36px rgba(1,7,54,.07);
  --shadow-lg: 0 4px 8px rgba(1,7,54,.05), 0 24px 60px rgba(1,7,54,.10);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

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

:focus-visible{
  outline:2px solid var(--navy-2);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--navy); color:#fff;
  font-family:var(--sans); font-size:15px; padding:12px 18px; border-radius:var(--r-pill);
}
.skip:focus{ left:12px; top:12px; }

/* --- siatka ----------------------------------------------------------- */
.shell{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.band{ padding-block:var(--band); position:relative; }
.band--tight{ padding-block:clamp(48px,6vw,80px); }
.band--sunken{ background:var(--paper-2); }
.band--dark{ background:var(--navy-deep); color:#fff; }

/* papier milimetrowy w tle — ledwo widoczny, wygaszany ku dołowi */
.grid-bg::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 10%, #000 20%, transparent 75%);
  mask-image:radial-gradient(120% 90% at 50% 10%, #000 20%, transparent 75%);
}
.grid-bg > *{ position:relative; z-index:1; }
.band--dark.grid-bg{ --grid-line:rgba(255,255,255,.06); }

/* --- typografia ------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.08;
  text-wrap:balance;
}

h1{ font-size:clamp(34px,5.2vw,62px); line-height:1.04; letter-spacing:-.035em; }
h2{ font-size:clamp(28px,3.8vw,46px); letter-spacing:-.03em; }
h3{ font-size:clamp(20px,2.2vw,25px); font-weight:600; letter-spacing:-.02em; }
h4{ font-size:18px; font-weight:600; letter-spacing:-.015em; line-height:1.3; }

p{ max-width:68ch; }

.lead{
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.6;
  color:var(--ink-3);
  max-width:58ch;
}

.note{
  font-family:var(--sans);
  font-size:14.5px; line-height:1.5;
  color:var(--ink-3);
}

/* etykieta sekcji — pigułka z ikoną */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--ink-2);
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-pill);
  padding:6px 14px;
  box-shadow:var(--shadow-sm);
}
.pill svg{ width:15px; height:15px; flex-shrink:0; }
.band--dark .pill{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.85); box-shadow:none;
}

/* nagłówek sekcji — wyśrodkowany */
.head{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
  margin-bottom:clamp(40px,5vw,60px);
}
.head h2{ max-width:18ch; }
.head .lead{ max-width:54ch; }

/* wariant lewy — tam, gdzie treść jest długa */
.head--left{ align-items:flex-start; text-align:left; }
.head--left h2{ max-width:20ch; }

/* --- przyciski -------------------------------------------------------- */
.btn{
  font-family:var(--sans);
  font-size:15.5px; font-weight:600; letter-spacing:-.01em; line-height:1;
  padding:16px 26px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:9px;
  white-space:nowrap;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn svg{ width:15px; height:15px; }
.btn--solid{ background:var(--navy); color:#fff; box-shadow:var(--shadow-md); }
.btn--solid:hover{ background:var(--navy-2); transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn--ghost{ background:var(--card); border-color:var(--rule-2); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn--ghost:hover{ border-color:var(--ink-3); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn--light{ background:#fff; color:var(--navy-deep); }
.btn--light:hover{ background:var(--navy-tint); transform:translateY(-1px); }
.btn--onDark{ border-color:rgba(255,255,255,.26); color:#fff; }
.btn--onDark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-row--center{ justify-content:center; }

.tlink{
  font-family:var(--sans); font-weight:600; font-size:15.5px;
  color:var(--navy-2);
  display:inline-flex; align-items:center; gap:7px;
  transition:gap .18s ease, color .18s ease;
}
.tlink::after{ content:'›'; font-size:19px; line-height:0; }
.tlink:hover{ color:var(--navy); gap:10px; }

/* drobne pigułki z tagami */
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tags b{
  font-family:var(--sans); font-size:13px; font-weight:500;
  color:var(--ink-3);
  border:1px solid var(--rule); border-radius:8px;
  padding:5px 10px;
  background:var(--card);
}

/* --- pływający pasek nawigacji ---------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:100;
  padding:14px var(--gut);
  transition:padding .25s ease;
}
.site-head[data-stuck='true']{ padding-top:10px; }

.site-head nav{
  width:fit-content; max-width:100%;
  margin-inline:auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,34px);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--rule);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-md);
  padding:9px 9px 9px 22px;
}
.brand img{ height:24px; width:auto; }

.nav-links{
  display:flex; gap:clamp(14px,2vw,26px);
  font-family:var(--sans); font-size:15px; font-weight:500;
  color:var(--ink-3);
}
.nav-links a{ transition:color .18s ease; }
.nav-links a:hover{ color:var(--ink); }

.nav-end{ display:flex; align-items:center; gap:10px; }
.nav-end .btn{ font-size:14.5px; padding:12px 18px; box-shadow:none; }

.burger{
  display:none; background:none; border:none;
  width:38px; height:38px; align-items:center; justify-content:center;
  border-radius:var(--r-pill);
}
.burger i{
  display:block; position:relative;
  width:20px; height:1.5px; background:var(--ink);
  transition:background-color .2s ease;
}
.burger i::before,.burger i::after{
  content:''; position:absolute; left:0;
  width:20px; height:1.5px; background:var(--ink);
  transition:transform .25s ease;
}
.burger i::before{ top:-6px; }
.burger i::after{ top:6px; }
.burger[aria-expanded='true'] i{ background:transparent; }
.burger[aria-expanded='true'] i::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] i::after{ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--paper);
  padding:100px var(--gut) var(--gut);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s;
}
.drawer[data-open='true']{ opacity:1; visibility:visible; }
.drawer a:not(.btn){
  font-family:var(--sans); font-weight:600;
  font-size:clamp(24px,6.5vw,36px); letter-spacing:-.03em;
  padding:14px 0; border-bottom:1px solid var(--rule);
}
.drawer .btn{ margin-top:26px; align-self:flex-start; }

@media (max-width:980px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .nav-end:has(.burger) .btn{ display:none; }
}
@media (max-width:620px){
  .site-head nav{ width:100%; padding-left:18px; }
  .nav-end .btn{ font-size:14px; padding:11px 15px; }
}

/* --- hero ------------------------------------------------------------- */
.hero{ text-align:center; padding-block:clamp(32px,4.5vw,56px) clamp(56px,7vw,92px); }
.hero > .shell > *{ margin-inline:auto; }
.hero h1{ max-width:17ch; margin-top:22px; }
.hero .lead{ margin:20px auto 30px; }

/* polaroid z odręcznym podpisem */
.polaroid{
  width:clamp(126px,13vw,156px);
  background:var(--card);
  border-radius:10px;
  padding:9px 9px 0;
  box-shadow:var(--shadow-lg);
  transform:rotate(-4deg);
}
.polaroid img{
  /* height:auto jest konieczne — atrybut height="" na <img> jest określony
     i bez tego unieważnia aspect-ratio */
  width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; object-position:center 8%;
  border-radius:6px; background:var(--paper-2);
}
.polaroid figcaption{
  font-family:var(--hand); font-size:23px; line-height:1;
  color:var(--ink-2); text-align:center;
  padding:9px 0 13px;
}

/* pigułki z kategoriami usług pod zdjęciem */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:22px; }

/* --- pasek dowodu ----------------------------------------------------- */
.proof{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-top:clamp(44px,5vw,64px);
  text-align:left;
}
.proof div{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:24px 26px;
}
.proof dt{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(22px,2.4vw,27px); letter-spacing:-.03em; line-height:1.15;
}
.proof dd{ font-size:15px; color:var(--ink-3); margin-top:7px; }
@media (max-width:760px){ .proof{ grid-template-columns:1fr; } }

/* --- pasek klientów --------------------------------------------------- */
.clients h2{ font-size:clamp(19px,2vw,23px); font-weight:600; color:#fff; text-align:center; }
.clients .note{ color:rgba(255,255,255,.6); text-align:center; margin:8px auto 0; max-width:52ch; }
.client-grid{
  margin-top:36px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px 14px;
  align-items:center;
}
.client-grid span{ display:flex; align-items:center; justify-content:center; height:70px; padding:0 10px; }
.client-grid img{
  max-height:46px; max-width:124px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1) brightness(1.7) contrast(.8);
  opacity:.62;
  transition:opacity .25s ease, filter .25s ease;
}
.client-grid span:hover img{ opacity:1; filter:grayscale(0); }
@media (max-width:900px){ .client-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .client-grid{ grid-template-columns:repeat(2,1fr); } }

/* --- karty uniwersalne ------------------------------------------------ */
.card{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:clamp(24px,2.6vw,32px);
}

/* --- usługi ----------------------------------------------------------- */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:clamp(24px,2.6vw,32px);
  display:flex; flex-direction:column;
  transition:box-shadow .22s ease, transform .22s ease;
}
.service:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.service h3{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.service h3 svg{ width:19px; height:19px; color:var(--ink-2); flex-shrink:0; }
.service p{ color:var(--ink-3); font-size:15.5px; margin-bottom:20px; }
.service .tags{ margin-top:auto; padding-top:18px; border-top:1px solid var(--rule); }
@media (max-width:900px){ .services{ grid-template-columns:1fr; } }

/* --- realizacje ------------------------------------------------------- */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.work-card{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:14px 14px 24px;
  display:flex; flex-direction:column;
  transition:box-shadow .22s ease, transform .22s ease;
}
.work-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.work-card .shot{
  border-radius:11px; overflow:hidden; background:var(--paper-2);
  aspect-ratio:16/10; margin-bottom:20px;
}
.work-card .shot img{ width:100%; height:100%; object-fit:cover; }
.work-card .body{ padding-inline:10px; }
.work-card h3{ margin-bottom:6px; }
.work-card p{ color:var(--ink-3); font-size:15.5px; margin-bottom:16px; }
.work-card .tlink{ margin-top:16px; }
@media (max-width:820px){ .work-grid{ grid-template-columns:1fr; } }

/* --- proces ----------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:clamp(22px,2.4vw,28px);
}
.step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-pill);
  background:var(--navy-tint); color:var(--navy-2);
  font-family:var(--sans); font-size:14px; font-weight:700;
  margin-bottom:18px;
}
.step h4{ margin-bottom:8px; }
.step p{ color:var(--ink-3); font-size:15px; }
.step .when{
  display:block; margin-top:14px;
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink-3);
}
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* --- pakiety ---------------------------------------------------------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.plan{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:clamp(26px,2.6vw,32px);
  display:flex; flex-direction:column;
}
.plan h3{ font-size:22px; }
.plan .plan-for{ color:var(--ink-3); font-size:15.5px; margin-top:9px; min-height:3.4em; }
.plan ul{
  margin:22px 0 26px; padding-top:20px; border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:15px; line-height:1.45;
  display:grid; gap:11px;
}
.plan li{ padding-left:26px; position:relative; color:var(--ink-2); }
.plan li::before{
  content:''; position:absolute; left:0; top:.4em;
  width:11px; height:6px;
  border-left:1.8px solid var(--navy-2); border-bottom:1.8px solid var(--navy-2);
  transform:rotate(-45deg);
}
.plan .btn{ margin-top:auto; justify-content:center; }

.plan--lead{
  background:var(--navy-deep); color:#fff;
  border-color:var(--navy-deep);
  box-shadow:var(--shadow-lg);
  position:relative;
}
.plan--lead .plan-for{ color:rgba(255,255,255,.7); }
.plan--lead ul{ border-top-color:rgba(255,255,255,.16); }
.plan--lead li{ color:rgba(255,255,255,.88); }
.plan--lead li::before{ border-color:#fff; }
.plan--lead .tag{
  position:absolute; top:18px; right:18px;
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.14); color:#fff;
  padding:5px 12px; border-radius:var(--r-pill);
}
@media (max-width:900px){ .plans{ grid-template-columns:1fr; } }

/* --- opinie ----------------------------------------------------------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.quote{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:clamp(24px,2.4vw,30px);
}
.quote .stars{ color:#F5A623; font-size:14px; letter-spacing:2px; margin-bottom:14px; }
.quote blockquote{ font-size:16.5px; line-height:1.6; color:var(--ink-2); }
.quote figcaption{
  display:flex; align-items:center; gap:12px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--rule);
}
.quote .ava{
  width:38px; height:38px; flex-shrink:0; border-radius:var(--r-pill);
  background:var(--navy-tint); color:var(--navy-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:13px; font-weight:700;
}
.quote .who{ font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.3; }
.quote .org{ font-family:var(--sans); font-size:14px; color:var(--ink-3); line-height:1.3; }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }

/* --- FAQ -------------------------------------------------------------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:10px; }
.faq details{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:0 clamp(20px,2.2vw,26px);
}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:21px 0;
  font-family:var(--sans); font-weight:600;
  font-size:clamp(16.5px,1.8vw,18.5px); letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; flex-shrink:0;
  width:11px; height:11px;
  border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3);
  transform:translateY(-3px) rotate(45deg);
  transition:transform .22s ease;
}
.faq details[open] summary::after{ transform:translateY(2px) rotate(-135deg); }
.faq summary:hover{ color:var(--navy-2); }
.faq .answer{ padding-bottom:22px; color:var(--ink-3); font-size:16px; }
.faq .answer p + p{ margin-top:12px; }

/* --- kontakt ---------------------------------------------------------- */
.contact{
  background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:clamp(26px,3.6vw,48px);
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(30px,4vw,56px);
}
@media (max-width:880px){ .contact{ grid-template-columns:1fr; } }

.facts{ margin-top:28px; display:grid; gap:16px; }
.facts div{ display:grid; gap:2px; }
.facts dt{ font-family:var(--sans); font-size:13.5px; color:var(--ink-3); }
.facts dd{ font-family:var(--sans); font-size:16px; font-weight:500; }

form .pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ form .pair{ grid-template-columns:1fr; } }
.field{ margin-bottom:14px; }
.field label{
  display:block; font-family:var(--sans); font-size:14px; font-weight:500;
  color:var(--ink-2); margin-bottom:7px;
}
.field input,.field textarea{
  width:100%;
  font-family:var(--serif); font-size:16px; color:var(--ink);
  background:var(--paper-2);
  border:1px solid transparent; border-radius:var(--r-sm);
  padding:14px 15px;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field textarea:focus{
  outline:none; background:var(--card);
  border-color:var(--navy-2);
  box-shadow:0 0 0 3px rgba(34,57,111,.14);
}
.field textarea{ min-height:130px; resize:vertical; }
form .btn{ margin-top:6px; }
.form-note{ margin-top:12px; }

/* --- stopka ----------------------------------------------------------- */
.site-foot{ background:var(--navy-deep); color:#fff; }
.site-foot .inner{
  padding-block:clamp(48px,6vw,72px) 30px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(26px,4vw,52px);
}
.site-foot img{ height:28px; width:auto; margin-bottom:16px; }
.site-foot .blurb{ color:rgba(255,255,255,.62); font-size:15.5px; max-width:34ch; }
.site-foot h5{
  font-family:var(--sans); font-size:14px; font-weight:600;
  color:rgba(255,255,255,.5); margin-bottom:13px;
}
.site-foot nav a{
  display:block; font-family:var(--sans); font-size:15.5px;
  color:rgba(255,255,255,.8); padding:5px 0;
  transition:color .18s ease;
}
.site-foot nav a:hover{ color:#fff; }
.foot-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-block:20px 34px;
  border-top:1px solid rgba(255,255,255,.13);
  font-family:var(--sans); font-size:14px; color:rgba(255,255,255,.5);
}
@media (max-width:760px){
  .site-foot .inner{ grid-template-columns:1fr 1fr; }
  .site-foot .about{ grid-column:1/-1; }
}

/* --- jedno wejście przy wczytaniu strony ------------------------------ */
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.enter > *{ animation:rise .7s cubic-bezier(.2,.75,.25,1) backwards; }
.enter > *:nth-child(1){ animation-delay:.04s; }
.enter > *:nth-child(2){ animation-delay:.12s; }
.enter > *:nth-child(3){ animation-delay:.2s; }
.enter > *:nth-child(4){ animation-delay:.28s; }
.enter > *:nth-child(5){ animation-delay:.36s; }
.enter > *:nth-child(6){ animation-delay:.44s; }
@media (prefers-reduced-motion: reduce){ .enter > *{ animation:none; } }

/* ==========================================================================
   Podstrony realizacji (case study)
   ========================================================================== */

.back{
  font-family:var(--sans); font-size:15px; font-weight:500;
  color:var(--ink-3);
  display:inline-flex; align-items:center; gap:8px;
  transition:color .18s ease;
}
.back::before{ content:'←'; font-size:16px; line-height:1; }
.back:hover{ color:var(--ink); }
.back-short{ display:none; }
@media (max-width:620px){
  .back-long{ display:none; }
  .back-short{ display:inline; }
}

.case-head{ padding-block:clamp(40px,5vw,68px) clamp(28px,3.4vw,44px); text-align:center; }
.case-head > *{ margin-inline:auto; }
.case-head h1{ margin:16px auto 18px; max-width:16ch; }
.case-head .lead{ max-width:60ch; }

.case-meta{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; margin-top:28px;
}
.case-meta div{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
  padding:9px 18px;
  display:flex; align-items:baseline; gap:8px;
}
.case-meta dt{ font-family:var(--sans); font-size:13.5px; color:var(--ink-3); }
.case-meta dd{ font-family:var(--sans); font-size:15px; font-weight:600; }

.plate{
  border:1px solid var(--rule); border-radius:var(--r-lg);
  overflow:hidden; background:var(--card);
  box-shadow:var(--shadow-md);
}
.plate + .cap, .shots + .cap{ margin-top:12px; }
.cap{ font-family:var(--sans); font-size:14px; color:var(--ink-3); max-width:70ch; }
.stack{ display:grid; gap:clamp(26px,3.4vw,42px); margin-top:clamp(30px,4vw,46px); }

.block{ max-width:62ch; }
.block h2{ margin-bottom:14px; }
.block p{ color:var(--ink-3); font-size:16.5px; }

.swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(30px,4vw,46px); }
.swatch{
  border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.swatch i{ display:block; height:104px; border-bottom:1px solid var(--rule); }
.swatch .body{ padding:18px 18px 22px; }
.swatch .hex{ font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-3); }
.swatch h4{ margin:4px 0 8px; }
.swatch p{ font-size:14.5px; color:var(--ink-3); }
@media (max-width:900px){ .swatches{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .swatches{ grid-template-columns:1fr; } }

.types{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:clamp(30px,4vw,46px); }
.type{
  border:1px solid var(--rule); border-radius:var(--r-md);
  background:var(--card); box-shadow:var(--shadow-sm);
  padding:clamp(24px,2.6vw,32px);
}
.type .role{ font-family:var(--sans); font-size:13.5px; color:var(--ink-3); }
.type .specimen{ font-size:clamp(32px,4.2vw,48px); line-height:1.1; margin:12px 0 6px; }
.type .abc{ font-size:20px; color:var(--ink-3); padding-bottom:16px; border-bottom:1px solid var(--rule); }
.type p{ font-size:15px; color:var(--ink-3); margin-top:16px; }
@media (max-width:760px){ .types{ grid-template-columns:1fr; } }

.shots{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px; margin-top:clamp(30px,4vw,46px);
}
.shots img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--rule); border-radius:var(--r-md);
  background:var(--card); box-shadow:var(--shadow-sm);
}

.case-cta{ text-align:center; }
.case-cta h2{ max-width:20ch; margin-inline:auto; color:#fff; }
.case-cta p{ margin:16px auto 30px; color:rgba(255,255,255,.7); max-width:48ch; }

/* ==========================================================================
   Podstrona „O mnie”
   ========================================================================== */

.intro{ text-align:center; }
.intro > *{ margin-inline:auto; }
.intro h1{ max-width:15ch; margin:24px auto 0; }
.intro .lead{ margin:20px auto 30px; }

.flags{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; }
.flags b{
  font-family:var(--sans); font-size:14px; font-weight:500;
  color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r-pill);
  padding:6px 14px;
}

.bio{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(30px,4vw,64px); }
.bio p + p{ margin-top:14px; }
.bio p{ font-size:17px; color:var(--ink-2); }
@media (max-width:860px){ .bio{ grid-template-columns:1fr; } }

.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols3 > *{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:clamp(24px,2.6vw,32px);
}
@media (max-width:860px){ .cols3{ grid-template-columns:1fr; } }

.skillset h3{ margin-bottom:16px; }
.skillset ul{ font-family:var(--sans); font-size:15px; color:var(--ink-3); }
.skillset li{ padding:8px 0; border-top:1px solid var(--rule); }
.skillset li:first-child{ border-top:none; }

.tools{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.tool{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:500;
  border:1px solid var(--rule); border-radius:var(--r-pill);
  padding:8px 16px 8px 9px;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.tool i{
  width:25px; height:25px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; font-style:normal; color:#fff;
}
.tool-group + .tool-group{ margin-top:22px; }
.tool-group h4{ margin-bottom:12px; color:var(--ink-3); font-weight:500; text-align:center; }

.feature{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px);
  align-items:center;
  transition:box-shadow .22s ease, transform .22s ease;
}
.feature + .feature{ margin-top:16px; }
.feature:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.feature-media{ border-radius:11px; overflow:hidden; background:var(--paper-2); }
.feature-media img{ width:100%; height:auto; display:block; }
.feature-body{ padding:10px clamp(8px,2vw,22px) 16px 0; }
.feature-body h3{ margin:8px 0 10px; }
.feature-body p{ color:var(--ink-3); font-size:16px; }
.feature-body .tlink{ margin-top:16px; }
@media (max-width:820px){ .feature{ grid-template-columns:1fr; } }

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.tile{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:14px 14px 20px;
  transition:box-shadow .22s ease, transform .22s ease;
}
.tile:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.tile img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:11px; }
.tile .kicker{ font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink-3); margin-top:14px; display:block; padding-inline:8px; }
.tile .name{ font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:-.02em; padding-inline:8px; }
@media (max-width:760px){ .tiles{ grid-template-columns:1fr 1fr; } }

.tabs{
  display:inline-flex; gap:4px;
  border:1px solid var(--rule); border-radius:var(--r-pill); padding:4px;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.tabs button{
  font-family:var(--sans); font-size:14.5px; font-weight:500;
  border:none; background:none; color:var(--ink-3);
  padding:9px 18px; border-radius:var(--r-pill);
  transition:background-color .18s ease, color .18s ease;
}
.tabs button[aria-selected='true']{ background:var(--navy); color:#fff; }

.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr);
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; margin-top:26px;
  scrollbar-width:thin;
}
.rail figure{ scroll-snap-align:start; }
.rail img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--rule); border-radius:var(--r-md);
  background:var(--card);
}
.rail figcaption{ font-family:var(--sans); font-size:13px; color:var(--ink-3); margin-top:9px; }

/* opakowanie polaroida — animacja wejścia nie może nadpisać obrotu kartki */
.polaroid-wrap{ display:flex; justify-content:center; }

/* zdjęcie w nagłówku podstrony „O mnie” */
.portrait{
  max-width:330px; margin-inline:auto;
  background:var(--paper-2);
  border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.portrait img{ width:100%; height:auto; }

/* --- slider grafik (serie) -------------------------------------------- */
.rail-wrap{ position:relative; margin-top:26px; }
.rail-wrap .rail{ margin-top:0; }

.rail-nav{
  position:absolute; top:calc(50% - 14px); transform:translateY(-50%);
  z-index:5;
  width:44px; height:44px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--ink);
  border:1px solid var(--rule);
  box-shadow:var(--shadow-md);
  font-size:22px; line-height:1; padding-bottom:3px;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.rail-nav:hover{ transform:translateY(-50%) scale(1.07); box-shadow:var(--shadow-lg); }
.rail-nav[disabled]{ opacity:0; pointer-events:none; }
.rail-nav.prev{ left:-14px; }
.rail-nav.next{ right:-14px; }
@media (max-width:760px){ .rail-nav{ display:none; } }

/* wygaszenie krawędzi, żeby było widać, że pasek biegnie dalej */
.rail-wrap::before,
.rail-wrap::after{
  content:''; position:absolute; top:0; bottom:18px; width:48px; z-index:4;
  pointer-events:none;
}
.rail-wrap::before{ left:0; background:linear-gradient(90deg, var(--paper), transparent); }
.rail-wrap::after{ right:0; background:linear-gradient(270deg, var(--paper), transparent); }
.band--sunken .rail-wrap::before{ background:linear-gradient(90deg, var(--paper-2), transparent); }
.band--sunken .rail-wrap::after{ background:linear-gradient(270deg, var(--paper-2), transparent); }