/*
  BLACKLINE DETAILING — arkusz stylów.
  Najważniejsze kolory i rozmiary zmienisz w sekcji :root poniżej.
*/
/* KOLORY: wpisz własne wartości po znaku #, aby zmienić kolorystykę całej strony. */
:root { --black:#0b0b0b; --dark:#141414; --gold:#c9a66b; --cream:#f2ede5; --muted:#aaa49c; --line:rgba(242,237,229,.16); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--cream); background:var(--black); font-family:Manrope,Arial,sans-serif; } a { color:inherit; text-decoration:none; }
.header { position:absolute; z-index:2; top:0; width:100%; height:88px; display:flex; align-items:center; padding:0 clamp(24px,5vw,84px); gap:30px; border-bottom:1px solid var(--line); }.logo { display:inline-flex; align-items:center; gap:10px; height:62px; color:var(--cream); font:800 19px Manrope,Arial,sans-serif; letter-spacing:2px; }.logo img { display:block; max-width:135px; max-height:58px; object-fit:contain; }.navigation { display:flex; gap:28px; margin:auto; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; }.navigation a:hover, .phone:hover { color:var(--gold); }.phone { font-size:13px; font-weight:700; }.menu-button { display:none; background:transparent; border:0; color:var(--cream); font-size:23px; }
/* BANER: obecnie używa lokalnego pliku images/baner-auto.avif. Aby wstawić własne zdjęcie, skopiuj je do folderu images i zmień nazwę po url(...), np. url('images/moje-auto.jpg'). */
.hero { min-height:720px; height:100vh; position:relative; display:flex; align-items:center; padding:130px clamp(24px,13vw,210px) 70px; background:linear-gradient(90deg,rgba(0,0,0,.83) 8%,rgba(0,0,0,.43) 54%,rgba(0,0,0,.16)),url('images/baner-auto.avif') center/cover; }.hero-content { max-width:680px; }.eyebrow { margin:0 0 18px; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:2px; }.hero h1, h2 { margin:0; font-family:'Playfair Display',Georgia,serif; font-size:clamp(45px,6vw,86px); line-height:1.05; font-weight:600; }.hero h1 em { color:var(--gold); }.hero-text { max-width:510px; margin:30px 0; color:#ddd7d0; line-height:1.75; font-size:15px; }.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:51px; padding:0 25px; font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; transition:.2s; }.button-primary { color:#111; background:var(--gold); }.button-primary:hover { background:#e1c18c; }.button-ghost { border:1px solid rgba(255,255,255,.55); }.button-ghost:hover { background:#fff; color:#111; }.button span { margin-left:11px; font-size:17px; }.hero-note { position:absolute; bottom:35px; left:clamp(24px,5vw,84px); font-size:11px; letter-spacing:.7px; }.hero-note span { display:inline-block; width:8px; height:8px; background:var(--gold); border-radius:50%; margin-right:8px; }
/* ZDJĘCIA USŁUG: pliki są w folderze images. Trzecie zdjęcie można później zastąpić własnym plikiem. */
.section { padding:110px clamp(24px,9vw,150px); }.section-heading { max-width:650px; }.section-heading h2,.about h2,.process h2,.contact h2 { font-size:clamp(38px,4.2vw,64px); }.section-heading > p:last-child { max-width:470px; color:var(--muted); line-height:1.7; margin:22px 0 0; }.services { background:#111; }.service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:55px; }.service-card { min-height:425px; padding:29px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; background:linear-gradient(0deg,rgba(0,0,0,.93),rgba(0,0,0,.08)),center/cover; }.service-card::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.12); transition:.3s; }.service-card:hover::before { background:rgba(0,0,0,0); }.service-card:nth-child(1){background-image:linear-gradient(0deg,rgba(0,0,0,.93),rgba(0,0,0,.08)),url('images/usluga-pps.avif')}.service-card:nth-child(2){background-image:linear-gradient(0deg,rgba(0,0,0,.93),rgba(0,0,0,.08)),url('images/usluga-ceramika.avif')}.service-card:nth-child(3){background-image:linear-gradient(0deg,rgba(0,0,0,.93),rgba(0,0,0,.08)),url('https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=900&q=80')}/* USŁUGI 04–07: podmień adresy w url(...) na własne zdjęcia. */.service-card:nth-child(4){background-image:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.15)),url('images/usluga-ceramika.avif')}.service-card:nth-child(5){background-image:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.15)),url('images/usluga-pps.avif')}.service-card:nth-child(6){background-image:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.15)),url('images/realizacja-porsche.avif')}.service-card:nth-child(7){background-image:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.15)),url('images/realizacja-land-rover.avif')}.service-card>* { position:relative; }.service-card>p:first-child { align-self:flex-start; margin:auto 0 48px; font-size:10px; letter-spacing:1px; color:var(--gold); }.service-card h3 { margin:0; font:600 29px 'Playfair Display',serif; }.card-text { color:#d2ccc4; font-size:13px; line-height:1.65; }.service-card a { font-size:11px; font-weight:bold; letter-spacing:.5px; }.service-card a span { color:var(--gold); font-size:18px; margin-left:5px; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,8vw,130px); align-items:center; }.about-image { min-height:580px; background:url('images/o-nas.avif') center/cover; }.about-content>p:not(.eyebrow) { color:var(--muted); line-height:1.8; margin:26px 0 45px; }.numbers { display:flex; gap:clamp(18px,4vw,55px); padding-top:25px; border-top:1px solid var(--line); }.numbers strong { display:block; color:var(--gold); font:600 34px 'Playfair Display',serif; }.numbers span { color:var(--muted); font-size:10px; }
/* REALIZACJE: wszystkie zdjęcia są lokalne w folderze images. Podmień nazwę po url(...), aby użyć własnej fotografii. */
.gallery { background:#111; }.gallery-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:250px 250px; gap:16px; margin-top:50px; }.gallery-item { position:relative; padding:20px; display:flex; align-items:end; font:600 23px 'Playfair Display',serif; background:center/cover; }.gallery-item::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.7),transparent); }.gallery-item span { position:relative; }.gallery-item small { display:block; margin-top:5px; color:var(--gold); font:700 10px Manrope,sans-serif; letter-spacing:1px; text-transform:uppercase; }.gallery-large { grid-row:span 2; background-image:url('images/realizacja-bmw.avif'); }.gallery-item:nth-child(2) { background-image:url('images/realizacja-porsche.avif'); }.gallery-item:nth-child(3) { background-image:url('images/realizacja-land-rover.avif'); }
.process { text-align:center; }.process h2 { max-width:750px; margin:auto; }.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:60px; text-align:left; }.process-grid div { padding:25px 0; border-top:1px solid var(--line); }.process-grid b { color:var(--gold); font-size:12px; }.process-grid h3 { margin:25px 0 10px; font:600 24px 'Playfair Display',serif; }.process-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.contact { padding:100px clamp(24px,9vw,150px); display:grid; grid-template-columns:1.35fr 1fr; gap:40px; background:var(--gold); color:#16130f; }.contact .eyebrow { color:#5b4321; }.contact-links { display:flex; flex-direction:column; align-items:flex-start; gap:13px; }.contact-links>a:not(.button) { font:600 clamp(20px,2.2vw,29px) 'Playfair Display',serif; }.contact-links p { margin:2px 0 18px; font-size:13px; }.contact .button-primary { color:var(--cream); background:#15120e; }.contact .button-primary:hover { background:#31291e; }footer { padding:30px clamp(24px,5vw,84px); display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--muted); font-size:10px; }footer>a:last-child { color:var(--cream); }
@media (max-width:800px) { .header { height:70px; }.logo { height:54px; }.logo img { max-width:105px; max-height:50px; }.navigation,.phone { display:none; }.menu-button { display:block; margin-left:auto; }.navigation.open { display:flex; position:absolute; top:70px; left:0; width:100%; padding:25px; background:#111; flex-direction:column; }.hero { min-height:650px; padding-inline:24px; }.section { padding:75px 24px; }.service-grid,.about,.contact { grid-template-columns:1fr; }.service-card { min-height:360px; }.about-image { min-height:360px; }.gallery-grid { grid-template-columns:1fr; grid-template-rows:300px 220px 220px; }.gallery-large { grid-row:auto; }.process-grid { grid-template-columns:1fr 1fr; }.contact { padding:70px 24px; }footer { flex-wrap:wrap; } }