/* =========================================================
   KAMALEON — warsztat samochodowy, Koszalin ul. Zielona 37
   ========================================================= */

:root{
  --grafit:      #0E1113;
  --grafit-2:    #141A1D;
  --karta:       #1A2226;
  --linia:       #263136;
  --tekst:       #ECF1F0;
  --mgla:        #94A3A7;
  --zielen:      #3FD37A;
  --limonka:     #A8E63A;
  --turkus:      #17C6C0;
  --grad:        linear-gradient(100deg,#A8E63A 0%,#3FD37A 46%,#17C6C0 100%);
  --cien:        0 18px 50px rgba(0,0,0,.45);
  --r:           16px;
  --max:         1220px;
  --naglowek:    "Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --tresc:       "Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--grafit);color:var(--tekst);
  font-family:var(--tresc);font-size:17px;line-height:1.66;
  overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--naglowek);font-weight:700;line-height:1.03;letter-spacing:.005em;margin:0}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem);text-transform:uppercase}
h3{font-size:1.32rem;text-transform:uppercase;letter-spacing:.02em}
p{margin:0 0 1rem}

.kontener{width:min(100% - 40px,var(--max));margin-inline:auto}
.kontener--waski{width:min(100% - 40px,820px)}

.pomin{position:absolute;left:-9999px;top:0;background:var(--limonka);color:#000;padding:12px 20px;z-index:200}
.pomin:focus{left:12px;top:12px}

.gradtekst{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.nadtytul{
  font-family:var(--naglowek);font-size:1rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--limonka);margin:0 0 14px;display:flex;align-items:center;gap:12px;
}
.nadtytul::before{content:"";width:34px;height:2px;background:var(--grad);flex:none}

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--naglowek);font-size:1.12rem;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;border:0;cursor:pointer;
  background:var(--grad);color:#08110B;font-weight:700;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,filter .22s;
  box-shadow:0 10px 28px rgba(63,211,122,.22);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(63,211,122,.34);filter:saturate(1.15)}
.btn--duch{background:transparent;color:var(--tekst);border:1.5px solid var(--linia);box-shadow:none}
.btn--duch:hover{border-color:var(--zielen);color:var(--zielen);box-shadow:none}
.btn--mini{padding:10px 20px;font-size:.98rem}

/* ---------- górny pasek ---------- */
.topbar{background:#090C0D;border-bottom:1px solid var(--linia);font-size:.9rem}
.topbar__in{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;justify-content:center;padding:9px 0;color:var(--mgla)}
.topbar__i{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.topbar__tel{color:var(--limonka);font-weight:600}
.ik{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- nawigacja ---------- */
.nav{position:sticky;top:0;z-index:90;background:rgba(14,17,19,.72);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.jest{background:rgba(9,12,13,.95);border-bottom-color:var(--linia)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}

.marka{display:flex;align-items:center;gap:12px}
.marka__znak{width:44px;height:44px;display:grid;place-items:center;background:#0A0E10;border:1px solid var(--linia);border-radius:12px;flex:none}
.marka__znak svg{width:34px;height:34px}
.marka__txt b{display:block;font-family:var(--naglowek);font-size:1.5rem;letter-spacing:.16em;line-height:1}
.marka__txt i{display:block;font-style:normal;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mgla);margin-top:3px}

.menu{display:flex;align-items:center;gap:28px}
.menu a{font-size:.96rem;font-weight:500;color:#C6D1D3;position:relative;padding:4px 0;transition:color .2s}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--grad);transition:right .28s}
.menu a:not(.btn):hover{color:#fff}
.menu a:not(.btn):hover::after{right:0}
.menu__cta{color:#08110B !important}

.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--linia);border-radius:11px;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--tekst);margin:4px auto;transition:.28s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(80px,13vw,150px) 0 clamp(90px,11vw,130px);isolation:isolate;overflow:hidden}
.hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04)}
.hero__cien{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(14,17,19,.86) 0%,rgba(14,17,19,.62) 38%,rgba(14,17,19,.94) 88%,var(--grafit) 100%),
    radial-gradient(80% 70% at 18% 42%,rgba(23,198,192,.18),transparent 62%);
}
.hero__in{max-width:820px}
.hero__h1{font-size:clamp(2.9rem,8.2vw,6.1rem);text-transform:uppercase;letter-spacing:-.005em;margin-bottom:26px;text-shadow:0 6px 34px rgba(0,0,0,.5)}
.hero__lid{font-size:clamp(1.02rem,1.7vw,1.22rem);color:#CFD9DB;max-width:60ch;margin-bottom:32px}
.hero__akcje{display:flex;flex-wrap:wrap;gap:14px}

.paski{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linia);
  border:1px solid var(--linia);border-radius:var(--r);overflow:hidden;
  position:relative;z-index:2;box-shadow:var(--cien);
}
.pasek{display:flex;align-items:center;gap:16px;padding:24px 26px;background:#11171A}
.pasek__ik{width:30px;height:30px;flex:none;fill:none;stroke:var(--zielen);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pasek b{display:block;font-family:var(--naglowek);font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase}
.pasek span{display:block;font-size:.88rem;color:var(--mgla)}

.paski-strefa{position:relative;z-index:3;margin-top:clamp(-78px,-6vw,-56px)}

/* ---------- atuty ---------- */
.atuty{padding:clamp(64px,8vw,100px) 0 clamp(40px,6vw,70px);background:var(--grafit)}
.siatka4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.siatka3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.atut{padding:28px 26px;border:1px solid var(--linia);border-radius:var(--r);background:linear-gradient(180deg,#161D21,#11171A);position:relative;overflow:hidden}
.atut::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.atut:hover::after{transform:scaleX(1)}
.atut h3{margin:0 0 10px;font-size:1.18rem}
.atut p{color:var(--mgla);font-size:.96rem;margin:0}

/* ---------- sekcje ---------- */
.sekcja{padding:clamp(70px,9vw,120px) 0}
.sekcja--ciasna{padding-top:0}
.glowa{max-width:760px;margin-bottom:clamp(34px,5vw,58px)}
.glowa__lid{color:var(--mgla);font-size:1.06rem;margin:16px 0 0}

/* ---------- karty usług ---------- */
.karty .karta{
  border:1px solid var(--linia);border-radius:var(--r);overflow:hidden;background:var(--karta);
  display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s,box-shadow .3s;
}
.karta:hover{transform:translateY(-6px);border-color:#3A4A50;box-shadow:var(--cien)}
.karta__foto{aspect-ratio:4/3;overflow:hidden;position:relative}
.karta__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,17,19,.72));pointer-events:none}
.karta__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1);filter:saturate(.92)}
.karta:hover .karta__foto img{transform:scale(1.07);filter:saturate(1.08)}
.karta__tresc{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.karta__tresc h3{margin-bottom:10px}
.karta__tresc p{color:var(--mgla);font-size:.97rem;margin:0}
.karta--cta{background:linear-gradient(140deg,#16302A,#111A1D);border-color:#2C4A42;justify-content:center}
.karta--cta .karta__tresc{padding:34px 26px}
.karta--cta p{margin-bottom:20px}

/* ---------- split ---------- */
.split{padding:clamp(70px,9vw,120px) 0;background:var(--grafit-2);border-block:1px solid var(--linia)}
.split--odwr{background:var(--grafit);border:0}
.split__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.split--odwr .split__foto{order:2}
.split__foto{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--cien)}
.split__foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split--odwr .split__foto img{aspect-ratio:5/6}
.split__plakietka{
  position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:14px;
  background:rgba(9,12,13,.86);backdrop-filter:blur(10px);border:1px solid var(--linia);
  border-radius:14px;padding:16px 20px;
}
.split__plakietka b{font-family:var(--naglowek);font-size:2.4rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.split__plakietka span{font-size:.86rem;color:var(--mgla);line-height:1.35}
.split__tekst h2{margin-bottom:20px}
.split__tekst p{color:#C3CDCF}

.ptaszki{list-style:none;padding:0;margin:24px 0 30px;display:grid;gap:12px}
.ptaszki li{position:relative;padding-left:34px;color:#C3CDCF}
.ptaszki li::before{
  content:"";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--grad);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M7 12.4l3.3 3.2L17 9' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M7 12.4l3.3 3.2L17 9' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.liczby{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:34px;margin-top:30px;padding-top:26px;border-top:1px solid var(--linia)}
.liczby b{display:block;font-family:var(--naglowek);font-size:2.9rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.liczby span{font-size:.86rem;color:var(--mgla);text-transform:uppercase;letter-spacing:.1em}

/* ---------- pasaż z cytatem ---------- */
.pasaz{position:relative;padding:clamp(80px,11vw,140px) 0;isolation:isolate;text-align:center;overflow:hidden}
.pasaz__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pasaz::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,17,19,.92),rgba(10,14,16,.86))}
.pasaz h2{font-size:clamp(1.7rem,3.6vw,2.9rem);text-transform:none;font-weight:600;max-width:20ch;margin:0 auto 18px;line-height:1.24}
.pasaz p{color:var(--limonka);font-family:var(--naglowek);letter-spacing:.2em;text-transform:uppercase;margin:0}

/* ---------- kroki ---------- */
.krok{position:relative;padding:30px 26px;border:1px solid var(--linia);border-radius:var(--r);background:#12191C}
.krok__nr{
  position:absolute;top:-20px;left:26px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);color:#08110B;
  font-family:var(--naglowek);font-size:1.4rem;font-weight:700;
}
.krok h3{margin:16px 0 10px;font-size:1.14rem}
.krok p{color:var(--mgla);font-size:.95rem;margin:0}
.kroki{margin-top:26px}

/* ---------- galeria ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.galeria__el{margin:0;border-radius:var(--r);overflow:hidden;position:relative}
.galeria__el--duzy{grid-column:span 2;grid-row:span 2}
.galeria__el img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1);filter:saturate(.9) contrast(1.03)}
.galeria__el:hover img{transform:scale(1.08)}
.galeria__el::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--linia);border-radius:var(--r);pointer-events:none}

/* ---------- faq ---------- */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--linia);border-radius:14px;background:#12191C;overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:#33474C}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 56px 19px 24px;position:relative;
  font-family:var(--naglowek);font-size:1.24rem;text-transform:uppercase;letter-spacing:.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--zielen);border-bottom:2px solid var(--zielen);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{margin:0;padding:0 24px 22px;color:var(--mgla)}

/* ---------- cta ---------- */
.cta{position:relative;padding:clamp(80px,11vw,140px) 0;isolation:isolate;text-align:center;overflow:hidden}
.cta__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,19,.9),rgba(10,14,16,.94)),radial-gradient(60% 80% at 50% 50%,rgba(63,211,122,.16),transparent 70%)}
.cta p{color:#C3CDCF;max-width:52ch;margin:16px auto 30px}
.cta .hero__akcje{justify-content:center}

/* ---------- kontakt ---------- */
.kontakt{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start}
.kontakt__dane{display:grid;gap:22px}
.dana{padding:20px 22px;border:1px solid var(--linia);border-radius:14px;background:#12191C}
.dana__et{display:block;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--turkus);margin-bottom:8px}
.dana b{font-family:var(--naglowek);font-size:1.34rem;letter-spacing:.02em;line-height:1.3;font-weight:600}
.dana a:hover{color:var(--zielen)}
.dana__mala{display:block;font-size:.88rem;color:var(--mgla);margin-top:6px}
.godziny{width:100%;border-collapse:collapse;font-size:.98rem}
.godziny td{padding:7px 0;border-bottom:1px solid var(--linia);color:#C3CDCF}
.godziny tr:last-child td{border-bottom:0;color:var(--mgla)}
.godziny td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.kontakt__mapa{border:1px solid var(--linia);border-radius:var(--r);overflow:hidden;min-height:520px;background:#12191C}
.kontakt__mapa iframe{width:100%;height:100%;min-height:520px;border:0;display:block;filter:grayscale(.34) invert(.9) hue-rotate(175deg) contrast(.92)}

/* ---------- stopka ---------- */
.stopka{border-top:1px solid var(--linia);background:#090C0D;padding:44px 0}
.stopka__in{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.stopka__marka b{font-family:var(--naglowek);font-size:1.5rem;letter-spacing:.18em}
.stopka__marka p{color:var(--mgla);font-size:.9rem;margin:6px 0 0}
.stopka__menu{display:flex;flex-wrap:wrap;gap:20px;font-size:.94rem;color:#C6D1D3}
.stopka__menu a:hover{color:var(--zielen)}
.stopka__prawa{color:#5F6E72;font-size:.85rem;margin:0;width:100%;padding-top:20px;border-top:1px solid var(--linia)}

/* ---------- do góry ---------- */
.dozgory{
  position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);z-index:80;
  opacity:0;pointer-events:none;transform:translateY(14px);transition:.3s;box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.dozgory.jest{opacity:1;pointer-events:auto;transform:none}
.dozgory svg{width:22px;height:22px;fill:none;stroke:#08110B;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- animacje wejścia ---------- */
[data-anim]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
[data-anim].widac{opacity:1;transform:none}

/* =========================================================
   RWD
   ========================================================= */
@media (max-width:1040px){
  .siatka4{grid-template-columns:repeat(2,1fr)}
  .siatka3{grid-template-columns:repeat(2,1fr)}
  .kontakt{grid-template-columns:1fr}
  .kontakt__mapa{min-height:400px}
  .kontakt__mapa iframe{min-height:400px}
}
@media (max-width:900px){
  .menu{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);flex-direction:column;align-items:flex-start;
    gap:6px;background:#0B0F11;border-left:1px solid var(--linia);padding:96px 28px 28px;
    transform:translateX(102%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.3,1),visibility .35s;z-index:95;
  }
  .menu.otwarte{transform:none;visibility:visible}
  .menu a{width:100%;padding:13px 0;border-bottom:1px solid var(--linia);font-size:1.06rem}
  .menu__cta{margin-top:18px;border-bottom:0;justify-content:center}
  .burger{display:block;position:relative;z-index:96}
  .paski{grid-template-columns:1fr}
  .split__in{grid-template-columns:1fr}
  .split--odwr .split__foto{order:0}
  .split--odwr .split__foto img{aspect-ratio:4/3}

  .galeria{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
}
@media (max-width:620px){
  body{font-size:16px}
  .topbar__in{justify-content:flex-start;font-size:.82rem;gap:6px 18px}
  .siatka4,.siatka3{grid-template-columns:1fr}
  .hero__akcje .btn{width:100%}
  .galeria{grid-template-columns:1fr;grid-auto-rows:210px}
  .galeria__el--duzy{grid-column:span 1;grid-row:span 1}
  .liczby{gap:22px}
  .liczby b{font-size:2.3rem}
  .stopka__in{flex-direction:column;align-items:flex-start}
  .marka__txt i{display:none}
  .marka__txt b{font-size:1.35rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition-duration:.01ms !important}
  [data-anim]{opacity:1;transform:none}
}