:root{
  /* jasny motyw domyślnie */
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0a1222;
  --muted:#56607a;
  --brand:#2dd4bf;
  --brand-2:#60a5fa;
  --border:#dfe6f3;
  --ring:#2b5cff;
  --shadow:0 10px 30px rgba(0,0,0,.07);

  /* przycisk motywu – ciemny na jasnym tle */
  --theme-toggle-bg:#020617;
  --theme-toggle-border:#020617;
  --theme-toggle-color:#f9fafb;
}

[data-theme="dark"]{
  --bg:#0b1220;
  --card:#121a33;
  --text:#eaf1ff;
  --muted:#b7c2d9;
  --border:#22315a;
  --ring:#9fb4ff;
  --shadow:0 10px 30px rgba(0,0,0,.25);

  /* przycisk motywu – jasny na ciemnym tle */
  --theme-toggle-bg:#f9fafb;
  --theme-toggle-border:#f9fafb;
  --theme-toggle-color:#020617;
}

*{box-sizing:border-box}
html,body{height:100%}

/* płynne przewijanie + offset pod sticky header */
html{
  scroll-behavior:smooth;
}
[id]{
  scroll-margin-top:80px;
}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* NAV */
header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px}
.logo-pill{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  font-weight:900;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#041018;
  letter-spacing:.2px;
}
.logo-text{font-weight:900; letter-spacing:.6px; font-size:18px}
@media (max-width:520px){ .logo-text{ font-size:16px } }
nav a{padding:8px 10px; border-radius:10px}
nav a:hover{background:color-mix(in oklab, var(--ring) 18%, transparent)}
.actions{display:flex; gap:10px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff0e, #0000000d);
  font-weight:700;
  box-shadow:var(--shadow);
}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}

/* Theme toggle – kolor zależny od motywu */
.theme-toggle{
  border:2px solid var(--theme-toggle-border);
  background:var(--theme-toggle-bg);
  color:var(--theme-toggle-color);
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  box-shadow:var(--shadow);
}
.theme-toggle:hover{
  outline:2px solid var(--ring);
  outline-offset:2px;
  filter:brightness(1.1);
}
.theme-icon{
  width:20px;
  height:20px;
  display:block;
}

/* HERO */
.hero{position:relative; overflow:hidden}
.hero .wrap{
  display:grid; gap:28px;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  padding-block:56px;
}
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr; padding-block:44px}
}
h1{font-size:clamp(28px,4.2vw,48px); line-height:1.15; margin:0 0 6px}
.subheading{margin:0 0 10px; font-size:18px; color:var(--muted)}
.lead{font-size:clamp(16px,1.8vw,18px); color:var(--muted); margin:0 0 18px}
.glass{
  background:color-mix(in oklab, var(--card) 96%, transparent);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow);
}

/* SEKCJE */
section{padding-block:48px}
h2{font-size:clamp(22px,2.6vw,32px); margin:0 0 14px}
p{margin:0 0 12px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
}
.list{display:grid; gap:10px; padding:0; margin:0; list-style:none}
.list li{display:flex; gap:10px; align-items:flex-start}

/* ART */
.art{
  aspect-ratio:4/3;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, #ffffff08, #00000006);
}
.art svg{width:100%; height:100%; display:block}

/* KONTAKT/HOURS / DWIE KOLUMNY */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:900px){ .two-col{grid-template-columns:1fr} }
.map{aspect-ratio:16/9; width:100%; border:0}

/* FOOTER */
footer{padding:24px 0; border-top:1px solid var(--border); color:var(--muted)}

/* ICON */
.icon{width:20px; height:20px; flex:0 0 20px}
/* Godziny pracy – grid 2 kolumny */
/* Godziny pracy – czytelny układ, bez stałych marginesów */
.hours-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
}

.hours-list li {
  list-style: none;
}

.hours-list strong {
  white-space: nowrap;
}

/* MOBILE TWEAKS – żeby karty „Usługi” i „Godziny pracy”
   nie wyglądały ogromnie na telefonie */
@media (max-width: 600px) {

  /* karty trochę mniejsze */
  .card {
    padding: 14px 16px;
  }

  /* mniejsze nagłówki sekcji */
  .card h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  /* tekst w sekcjach trochę drobniejszy */
  .lead,
  .card p,
  .card li {
    font-size: 14px;
  }

  /* Usługi + Godziny w jednej kolumnie (na wszelki wypadek) */
  .two-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Godziny – na bardzo wąskich ekranach nazwisko nad godzinami */
  .hours-list {
    grid-template-columns: 1fr;
  }

  .hours-list strong {
    display: block;
    margin-bottom: 2px;
  }
}







/* Mobile dock */
.dock{
  position:sticky; bottom:0; z-index:60;
  background:color-mix(in oklab, var(--card) 92%, transparent);
  border-top:1px solid var(--border);
  padding:10px 0;
  display:none;
}
@media (max-width:720px){ .dock{ display:block } }
.dock .actions .btn{ display:none }