/* ============================================================
   M.S DETAILING — style
   Paleta i typografia odwzorowane 1:1 z grafik w assets/
   (banner wizytówki + plakat cennika), wyciągnięte próbkowaniem
   pikseli oryginałów. Układ, klasy i zachowanie bez zmian.
   ============================================================ */

:root{
  /* kolory z próbki histogramu obu grafik */
  --ink:#0b0909;              /* tlo plakatu cennika: #0B0909 */
  --ink-soft:#121110;         /* panel sekcji "jasnych" */
  --ink-panel:#131110;        /* wypukła karta jak ramka w cenniku */
  --ink-deep:#070606;         /* stopka / header */
  --gold:#c98b3b;             /* zloto marki (cennik #C98B3B, banner #CA983E) */
  --gold-bright:#e8b45c;      /* rozbłysk na lakierze / gora gradientu logo */
  --gold-deep:#956c1c;        /* cień zlota, krawedzie liter */
  --line:rgba(201,139,59,.22);/* zlociste włoskowate linie zamiast #ccc */
  --line-soft:rgba(201,139,59,.12);
  --white:#f6efef;            /* biel naglowkow z grafik */
  --muted:#a5a5a5;            /* szarosci posrednie #A5A5A5 */
  --muted-2:#8b857c;
  --font-display:"Arial Narrow","Avenir Next Condensed","Liberation Sans Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --font-body:"Segoe UI",Roboto,"Helvetica Neue",Arial,Helvetica,sans-serif;
  --font-script:"Snell Roundhand","Segoe Script","Bradley Hand","Brush Script MT",cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .18s ease,border-color .18s ease,background-color .18s ease}
::selection{background:var(--gold);color:#0b0909}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;height:auto}

.container{width:min(1160px,calc(100% - 40px));margin:auto}

/* ---------- header ---------- */
.header{height:76px;position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(7,6,6,.86);color:var(--white);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;height:100%}
.logo picture{display:flex;align-items:center;height:100%}
.logo img{height:48px;width:auto;object-fit:contain}
.header nav{display:flex;gap:23px;align-items:center;text-transform:uppercase;font-size:11px;letter-spacing:.08em;font-family:var(--font-display)}
.header nav a{opacity:.72}
.header nav a:hover{opacity:1;color:var(--gold)}
.outline{border:1px solid var(--gold);color:var(--gold);padding:9px 13px;border-radius:2px}
.outline:hover{background:var(--gold);color:#0b0909}
.menu{display:none;background:none;border:0;color:var(--gold);font-size:25px;cursor:pointer}

/* ---------- hero ---------- */
.hero{min-height:100svh;background:radial-gradient(circle at 78% 42%,#1e1a16,#100e0d 45%,#060505 82%);
  color:var(--white);display:flex;align-items:center;position:relative;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#060505}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(9,8,8,.98) 0 30%,rgba(9,8,8,.86) 46%,rgba(9,8,8,.45) 72%,rgba(9,8,8,.15) 100%)}
/* cieple zlote swiatlo w rogu — echo podswietlenia lakieru z obu grafik */
.hero:after{content:"";position:absolute;right:-12vw;top:-16vh;z-index:1;width:56vw;height:56vw;pointer-events:none;background:radial-gradient(circle at center,rgba(201,139,59,.17),rgba(201,139,59,0) 62%)}
.hero-inner{width:min(1160px,calc(100% - 40px));margin:auto;position:relative;z-index:2;padding-top:70px}

.eyebrow{font-family:var(--font-display);font-size:10px;letter-spacing:.3em;font-weight:700;color:var(--gold);margin:0 0 18px;text-transform:uppercase}
.eyebrow:before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);vertical-align:middle;margin-right:10px;opacity:.8}
.hero h1{font-family:var(--font-display);font-size:clamp(50px,8vw,100px);line-height:.94;letter-spacing:-.02em;margin:0;text-transform:uppercase;font-weight:800}
.hero h1 i,h2 i{font-style:normal;opacity:1;font-family:var(--font-script);text-transform:none;letter-spacing:0;font-weight:400;color:var(--gold-bright);font-size:1.06em}
.lead{max-width:620px;color:var(--muted);font-size:18px;margin:28px 0}

.buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;min-height:48px;padding:0 22px;align-items:center;justify-content:center;border:1px solid var(--line);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;font-family:var(--font-display);cursor:pointer;border-radius:2px;color:var(--white)}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.primary{background:linear-gradient(160deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));color:#0b0909;border-color:transparent;box-shadow:0 10px 26px -12px rgba(201,139,59,.7)}
.primary:hover{color:#0b0909;filter:brightness(1.08)}
.hero .btn:not(.primary){border-color:var(--line);color:var(--white)}
.hero .btn:not(.primary):hover{border-color:var(--gold)}
.scroll{position:absolute;bottom:25px;left:32px;z-index:2;font-family:var(--font-display);font-size:9px;letter-spacing:.28em;opacity:.75;color:var(--gold)}

/* ---------- sekcje ---------- */
.section{padding:105px 0;background:var(--ink-soft);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.dark{background:var(--ink);color:var(--white)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.two h2,.heading h2,.contact h2{font-family:var(--font-display);font-size:clamp(38px,5vw,68px);line-height:1.03;letter-spacing:-.01em;margin:0;text-transform:uppercase;font-weight:800}
.two p{color:var(--muted)}
.dark p{color:var(--muted)}
.heading{max-width:720px;margin-bottom:50px}
.heading>p:last-child{margin-top:15px;color:var(--muted-2)}

/* karty uslug — ramka jak kolumny w plakacie cennika */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.cards article{background:var(--ink-panel);padding:30px;min-height:300px;display:flex;flex-direction:column;transition:background-color .2s ease}
.cards article:hover{background:#1a1714}
.cards small{opacity:1;color:var(--gold);font-family:var(--font-display);font-size:11px;letter-spacing:.2em}
.cards h3{font-size:22px;line-height:1.15;margin:45px 0 15px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;font-weight:700}
.cards p{font-size:14px;color:var(--muted);margin:0 0 18px}
.cards a{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);font-weight:700;font-family:var(--font-display);margin-top:auto}
.cards a:hover{color:var(--gold-bright)}

/* cennik */
.prices{border-top:1px solid var(--line)}
.prices>div{display:flex;justify-content:space-between;gap:25px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.prices>div:hover{background:rgba(201,139,59,.04)}
.prices b{display:block;font-size:18px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;font-weight:700;color:var(--white)}
.prices small{display:block;color:var(--muted-2);margin-top:3px;font-size:14px;text-transform:none;letter-spacing:0;font-weight:400}
.prices strong{white-space:nowrap;color:var(--gold);font-family:var(--font-display);font-size:20px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.notice{background:var(--ink-panel);border-left:2px solid var(--gold);padding:18px;margin-top:28px;font-size:14px;color:var(--muted)}
.notice b{color:var(--white)}

/* proces */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.process>div{background:var(--ink-panel);padding:30px;min-height:190px}
.process b{opacity:1;font-family:var(--font-display);font-size:11px;letter-spacing:.2em;color:var(--gold);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%}
.process h3{margin:35px 0 5px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;font-size:19px}
.process p{font-size:14px;color:var(--muted)}

/* realizacje */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery>div{aspect-ratio:4/3;background:linear-gradient(135deg,#171412,#0c0b0a);border:1px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.gallery b{font-size:25px;letter-spacing:.1em;color:var(--gold);font-family:var(--font-display)}
.gallery small{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.center{text-align:center}
.darkbtn{margin-top:30px;border-color:var(--line);color:var(--gold)}
.darkbtn:hover{border-color:var(--gold);background:rgba(201,139,59,.08)}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}
.tags span{border:1px solid var(--line);padding:6px 9px;font-size:9px;letter-spacing:.14em;color:var(--gold);font-family:var(--font-display);text-transform:uppercase;border-radius:2px}

.quote{text-align:center}
.quote h2{font-size:clamp(35px,5vw,65px);line-height:1.05;margin:0}

/* FAQ — natywne <details>, zachowanie bez zmian */
.narrow{width:min(800px,calc(100% - 40px))}
details{border-top:1px solid var(--line);padding:20px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{font-weight:700;cursor:pointer;list-style:none;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:17px}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--gold)}
summary:after{content:"+";float:right;font-size:22px;color:var(--gold);line-height:1}
details[open] summary:after{content:"−"}
details p{color:var(--muted);padding-right:34px}

/* kontakt — panel w stylu wizytówki: złote ikony, włoskowate linie, delikatna poświata */
.contact-section{position:relative;overflow:hidden}
.contact-section:before,.contact-section:after{content:"";position:absolute;pointer-events:none;border-radius:50%}
.contact-section:before{left:-16vw;bottom:-32vh;width:58vw;height:58vw;background:radial-gradient(circle,rgba(201,139,59,.11),rgba(201,139,59,0) 62%)}
.contact-section:after{right:-14vw;top:-24vh;width:50vw;height:50vw;background:radial-gradient(circle,rgba(201,139,59,.07),rgba(201,139,59,0) 60%)}
.contact{position:relative;z-index:1;display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}
.contact h2{margin-bottom:20px}
.contact-lead{color:var(--muted);max-width:470px;font-size:17px;margin:0}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.contact-actions .btn svg{width:15px;height:15px;margin-right:9px}
.contact-meta{margin-top:40px;display:grid;gap:18px}
.meta-item{display:flex;gap:14px;align-items:flex-start}
.m-icon{flex:0 0 auto;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:rgba(201,139,59,.06);color:var(--gold)}
.m-icon svg{width:16px;height:16px}
.meta-item b{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:13px;color:var(--white)}
.meta-item small{display:block;color:var(--muted-2);font-size:13.5px;margin-top:2px}
/* panel z danymi — jak rewers wizytówki */
.contact-panel{position:relative;background:linear-gradient(168deg,#171412,#0d0b0a 72%);border:1px solid var(--line);border-radius:4px;padding:6px 32px;box-shadow:0 34px 70px -34px rgba(0,0,0,.85)}
.contact-panel:before{content:"";position:absolute;top:-1px;left:30px;right:30px;height:1px;background:linear-gradient(90deg,rgba(201,139,59,0),var(--gold),rgba(201,139,59,0));opacity:.75}
.contact-row{display:flex;align-items:center;gap:18px;padding:25px 0;border-bottom:1px solid var(--line-soft)}
.contact-row:last-child{border-bottom:0}
.contact-icon{flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:rgba(201,139,59,.08);color:var(--gold);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.contact-icon svg{width:17px;height:17px}
.contact-body{display:flex;flex-direction:column;min-width:0}
.contact-body small{font-family:var(--font-display);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.contact-body b{font-family:var(--font-display);font-size:clamp(18px,1.9vw,23px);letter-spacing:.02em;color:var(--white);margin-top:3px;overflow-wrap:anywhere}
.contact-body em{font-style:normal;color:var(--muted-2);font-size:13px;margin-top:3px}
.contact-arrow{margin-left:auto;flex:0 0 auto;color:var(--gold);opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .2s ease}
.contact-arrow svg{width:16px;height:16px;display:block}
a.contact-row:hover .contact-arrow{opacity:1;transform:none}
a.contact-row:hover .contact-icon{background:var(--gold);border-color:var(--gold);color:#0b0909}
a.contact-row:hover .contact-body b{color:var(--gold-bright)}
.contact-row.soon .contact-icon{border-style:dashed;background:rgba(201,139,59,.04)}
.contact-row.soon .contact-body b{color:var(--gold-bright)}
.badge-soon{margin-left:auto;flex:0 0 auto;font-family:var(--font-display);font-size:9px;letter-spacing:.22em;color:var(--gold);border:1px dashed var(--line);background:rgba(201,139,59,.05);padding:6px 10px;border-radius:2px}

.mobilebar{display:none}

@media(max-width:900px){
  .header nav{display:none;position:absolute;top:76px;left:0;right:0;background:rgba(7,6,6,.97);flex-direction:column;align-items:stretch;padding:15px 25px;border-bottom:1px solid var(--line)}
  .header nav.open{display:flex}
  .menu{display:block}
  .two{grid-template-columns:1fr;gap:40px}
  .contact{grid-template-columns:1fr;gap:48px;align-items:start}
  .cards{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  /* na waskich ekranach auto zostaje mocno przyciemnione — zeby naglowek byl czytelny */
  .hero:before{background:linear-gradient(180deg,rgba(9,8,8,.96),rgba(9,8,8,.88))}
  .hero:after{width:80vw;height:80vw;right:-30vw;top:-6vh}
}

@media(max-width:600px){
  body{padding-bottom:64px}
  .header{padding:0 16px}
  .logo img{height:42px}
  .container,.hero-inner{width:calc(100% - 28px)}
  .section{padding:75px 0}
  .hero h1{font-size:clamp(42px,15vw,54px)}
  .hero .buttons .btn{flex:1 1 100%}
  .lead{font-size:16px}
  .cards,.process,.gallery{grid-template-columns:1fr}
  .prices>div{display:block}
  .prices strong{display:block;margin-top:9px}
  .mobilebar{position:fixed;display:grid;grid-template-columns:1fr 1fr 1fr;left:0;right:0;bottom:0;background:var(--ink-deep);color:var(--white);z-index:20;border-top:1px solid var(--gold)}
  .mobilebar a{text-align:center;padding:12px 4px;border-right:1px solid var(--line);font-size:9px;text-transform:uppercase;font-family:var(--font-display);letter-spacing:.1em}
  .mobilebar a:last-child{border-right:0}
  .mobilebar svg{width:12px;height:12px;vertical-align:-1.5px;margin-right:6px}
  .two h2,.heading h2,.contact h2{font-size:43px}
  .contact-panel{padding:2px 20px}
  .contact-row{gap:14px;padding:19px 0}
  .contact-body b{font-size:18px}
  .contact-actions .btn{flex:1 1 100%}
  .contact-arrow,.badge-soon{display:none}
}

@supports (content-visibility:auto){
  .section{content-visibility:auto;contain-intrinsic-size:650px}
}

@media(prefers-reduced-data:reduce){
  .hero:after,.contact-section:before,.contact-section:after{display:none}
  .primary{box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}