/* === OLKAN Base Styles v4.8 (rebuild) === */
:root{
  --accent:#1c2d87;          /* blue from logo */
  --accent-dark:#142263;
  --text:#1f2937;
  --soft:#f8fafc;
  --line:#e5e7eb;
  --bg:#f5efe2;              /* beige base */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);line-height:1.55;background:var(--bg) url('../img/paper.png') repeat}
img{max-width:100%;height:auto;}
.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(2px)}
.site-header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo{width:70px;height:auto;border-radius:8px}
.site-nav a{margin-right:16px;text-decoration:none;color:var(--text);font-weight:600}
.site-nav a[aria-current="page"], .site-nav a:hover{color:var(--accent)}
.header-right .phone{color:var(--accent);font-weight:800}
.banner{width:100%;height:220px;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.intro{max-width:1100px;margin:22px auto;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 6px rgba(0,0,0,.04);text-align:center}
.intro h1{margin:0 0 .3rem 0;font-size:2rem;color:var(--text)}
.intro p{margin:.35rem 0;color:#4b5563}
.address-inline{background:#fff;border-radius:10px;padding:8px 12px;display:inline-block}
.services{max-width:1100px;margin:18px auto;padding:0 20px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1100px){.services{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.services{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;text-decoration:none;background:#fff;border:2px solid var(--line);border-radius:16px;padding:18px;transition:transform .15s, background .15s, color .15s, border-color .15s;box-shadow:0 1px 2px rgba(0,0,0,.03);color:var(--text)}
.card .icon{font-size:34px;color:var(--accent)}
.card h3{margin:6px 0 4px 0;font-size:1rem}
.card p{margin:0;color:#6b7280;font-size:.92rem}
.card:hover{background:var(--accent);border-color:var(--accent-dark);color:#fff;transform:translateY(-2px)}
.card:hover .icon, .card:hover p{color:#fff}
.sub-hero-simple{background:var(--soft);border-bottom:1px solid var(--line)}
.sub-hero-simple .wrap{max-width:1100px;margin:0 auto;padding:28px 20px}
.sub-hero-simple h1{margin:0;color:var(--accent)}
.sub-hero-simple p{margin:.35rem 0 0;color:#374151}
.offer-split{max-width:1100px;margin:0 auto;padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.offer-split img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);display:block}
.offer-split h2{margin:0 0 .5rem 0;font-size:1.35rem}
.benefits{margin:.2rem 0 0;padding-left:1.1rem;color:#374151}
.benefits li{margin:.35rem 0}
@media(max-width:900px){.offer-split{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:10px;padding:10px 14px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-weight:700}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent-dark)}
.btn-primary:hover{filter:brightness(.96)}
.btn-ghost{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn-ghost:hover{background:var(--accent);color:#fff}
.map-hours{display:grid;grid-template-columns:2fr 1fr;gap:18px;max-width:1100px;margin:18px auto;padding:0 20px}
.map-wrap{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hours{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.hours h3{margin:0 0 .5rem 0}
.hours ul{margin:.5rem 0 0 1.1rem;padding:0}
.site-footer{margin-top:22px;padding:18px 20px;border-top:1px solid var(--line);text-align:center;background:#fff;color:#6b7280}
a{color:var(--accent)}
a:hover{opacity:.9}

/* === OLKAN: pełna papeteria dla całego UI (hover bez zmian) === */
:root{
  --bg:#f5efe2;                           /* beż tła */
  --paper-line:#e0d8c8;                   /* delikatne krawędzie na papierze */
}

/* Nagłówek na papierze */
.site-header{
  background: var(--bg) url('../img/paper.png') repeat !important;
  border-bottom: 1px solid var(--paper-line);
  backdrop-filter: none;
}

/* „Karty” i boxy też na papierze (zamiast bieli) */
.intro,
.card,
.hours,
.map-wrap,
.site-footer,
.address-inline,
.sub-hero-simple,         /* belka tytułowa podstron */
.faq details,
.card-info{
  background: var(--bg) url('../img/paper.png') repeat !important;
  border: 1px solid var(--paper-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}

/* Siatka usług – zachowujemy efekt hover (na niebiesko) */
.card{
  transition: transform .15s, background .15s, color .15s, border-color .15s;
}
.card:hover{
  background: var(--accent) !important;
  border-color: var(--accent-dark) !important;
  color:#fff !important;
}
.card:hover .icon,
.card:hover p{ color:#fff !important; }

/* Przyciski „ghost” też na papierze */
.btn-ghost{
  background: var(--bg) url('../img/paper.png') repeat;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-ghost:hover{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent-dark);
}

/* Sub-hero (podstrony) – lekko papierowo, ale czytelnie */
.sub-hero-simple{
  border-bottom: 1px solid var(--paper-line) !important;
}
.sub-hero-simple .wrap p{ color:#374151; }

/* Upewniamy się, że baner zostaje „czysty” (bez nadpisania papierem) */
.banner{ background-color: transparent !important; }

/* Drobne dopieszczenie linków na papierze */
a{ color: var(--accent); }
a:hover{ opacity:.9; }

/* --- OLKAN: papierowe karty na /uslugi --- */
:root{
  --paper-line:#e0d8c8; /* delikatna krawędź jak w tle */
}

.svc-card{
  background: var(--bg) url('../img/paper.png') repeat !important;
  border-color: var(--paper-line) !important;
  color: var(--text);
}
.svc-card .icon{ color: var(--accent); }

.svc-card:hover{
  background: var(--accent) !important;
  border-color: var(--accent-dark) !important;
  color:#fff !important;
}
.svc-card:hover .icon,
.svc-card:hover p{ color:#fff !important; }