/* Podstrony usług codelink.pl (strona dla salonu, strona z rezerwacją). Ten sam wygląd co blog. */
:root{--bg:#090b0a; --bg2:#0d100f; --surface:#111513; --line:#1d2622; --line2:#283430; --ink:#e7ece5; --ink2:#c3ccc0; --dim:#a9b5a6; --mid:#7f8d80;
  --green:#4ade80; --amber:#f5b041; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--sans); font-size:17px; line-height:1.7; color:var(--ink); -webkit-font-smoothing:antialiased;
  background:radial-gradient(1000px 600px at 85% -10%, rgba(74,222,128,.07), transparent 60%), var(--bg);}
a{color:var(--green);}
.wrap{max-width:980px; margin:0 auto; padding:0 24px;}
.tekst{max-width:760px;}

.nav{position:sticky; top:0; z-index:10; background:rgba(9,11,10,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; gap:20px; height:64px;}
.logo{font-family:var(--mono); font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:.02em; display:flex; align-items:center; gap:10px; min-height:44px;}
.logo i{width:9px; height:9px; background:var(--green); box-shadow:0 0 10px rgba(74,222,128,.7);}
.nav nav{margin-left:auto; display:flex; align-items:center; gap:20px; font-family:var(--mono); font-size:13px;}
.nav nav a{color:var(--dim); text-decoration:none; padding:12px 0;} .nav nav a:hover{color:var(--ink);}
@media (max-width:700px){ .nav nav a:not(.btn){display:none;} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; font-family:var(--mono); font-size:14px; font-weight:500; border-radius:8px; padding:11px 18px;
  border:1px solid var(--green); background:var(--green); color:#06100a; text-decoration:none;}
.btn.drugi{background:transparent; color:var(--ink); border-color:var(--line2);}
.nav nav .btn,.nav nav .btn:hover{padding:9px 14px; font-size:13px; white-space:nowrap; color:#06100a;}

.okruszki{font-family:var(--mono); font-size:13px; color:var(--mid); margin:40px 0 14px;}
.okruszki ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.okruszki li+li::before{content:"/"; margin-right:6px; color:var(--line2);}
.okruszki a{color:var(--dim); text-decoration:none; padding:12px 0;} .okruszki a:hover{color:var(--ink);}

h1{font-family:var(--mono); font-weight:800; font-size:clamp(28px,4vw,42px); line-height:1.12; letter-spacing:-.03em; margin:0 0 18px;}
.lead{font-size:clamp(17px,1.6vw,19px); color:var(--ink2); margin:0 0 22px;}
.znaczki{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; list-style:none; font-family:var(--mono); font-size:13px;}
.znaczki li{border:1px solid var(--line2); border-radius:999px; padding:6px 12px; color:var(--dim);} .znaczki b{color:var(--green); font-weight:500;}
.akcje{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px;}

main h2{font-family:var(--mono); font-size:clamp(21px,2.4vw,26px); line-height:1.25; letter-spacing:-.02em; margin:52px 0 12px;}
main h3{font-family:var(--mono); font-size:17px; line-height:1.35; margin:0 0 6px;}
main p, main li{color:var(--ink2);}
main li{margin:6px 0;}
.lista-funkcji{padding-left:20px;}

.karty{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0;}
@media (max-width:700px){ .karty{grid-template-columns:1fr;} }
.karta{border:1px solid var(--line); border-radius:12px; background:var(--bg2); padding:18px 20px;}
.karta .cena{font-family:var(--mono); color:var(--green); font-size:20px; font-weight:700; margin:2px 0 8px;}
.karta p{margin:0; font-size:15.5px;}
.karta h3 a{display:block; padding:11px 0; margin:-11px 0; color:var(--ink); text-decoration:none;} .karta h3 a:hover{color:var(--green);}

.fakt{border-left:3px solid var(--green); background:var(--bg2); border-radius:0 10px 10px 0; padding:14px 18px; margin:22px 0;}
.fakt p{margin:0 0 6px; color:var(--ink);}
.fakt cite{font-style:normal; font-family:var(--mono); font-size:12.5px; color:var(--mid);}
.fakt cite a{color:var(--dim); padding:12px 0;}

.tabela{overflow-x:auto; margin:20px 0;}
table{width:100%; border-collapse:collapse; font-size:15px;}
th,td{border:1px solid var(--line2); padding:10px 12px; text-align:left; vertical-align:top;}
th{background:var(--surface); color:var(--ink); font-family:var(--mono); font-size:13.5px;}
td{color:var(--ink2);}
@media (max-width:640px){
  table{min-width:520px;}
  .tabela::before{content:"→ przesuń tabelę w bok"; display:block; position:sticky; left:0; margin-bottom:6px; font-family:var(--mono); font-size:12.5px; color:var(--mid);}
}

.przyklad{display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:center; border:1px solid var(--line); border-radius:14px; background:var(--bg2); padding:18px; margin:18px 0;}
@media (max-width:700px){ .przyklad{grid-template-columns:1fr;} }
.przyklad img{width:100%; height:auto; border-radius:10px; border:1px solid var(--line2); display:block;}
.przyklad p{margin:0 0 10px; font-size:15.5px;}

.kroki{counter-reset:k; list-style:none; padding:0; margin:18px 0;}
.kroki li{counter-increment:k; position:relative; padding:4px 0 4px 44px; margin:10px 0;}
.kroki li::before{content:counter(k,decimal-leading-zero); position:absolute; left:0; top:3px; font-family:var(--mono); font-size:14px; color:var(--green);}

details{border:1px solid var(--line); border-radius:10px; background:var(--bg2); margin:8px 0; padding:0 18px;}
summary{cursor:pointer; padding:13px 0; font-weight:600; color:var(--ink); min-height:44px;}
details p{margin:0 0 14px;}

.cta{margin:52px 0 10px; border:1px dashed rgba(245,176,65,.45); border-radius:14px; padding:24px 26px; background:radial-gradient(500px 220px at 15% 0%, rgba(245,176,65,.08), transparent 70%), var(--bg2);}
.cta h2{margin:0 0 8px;}
.cta p{margin:0 0 16px;}
.zobacz{margin:36px 0 0; padding-top:20px; border-top:1px solid var(--line);}
.zobacz h2{font-size:18px; margin:0 0 10px;}

footer{border-top:1px solid var(--line); margin-top:48px; padding:26px 0 40px; font-size:13.5px; color:var(--mid);}
footer a{color:var(--dim); padding:14px 0;}