:root {
  --green: #2c3e50;         /* Ciemny stalowy szary zamiast zieleni */
  --green-light: #95a5a6;   /* Jasny szary (slate) zamiast jasnej zieleni */
  --text: #101010;
  --muted: #5a5a5a;
  --bg: #ffffff;
  --card: #f7f7f7;
  --radius: 20px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Reset i podstawowe style */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); background:var(--bg);}
a{color:var(--green); text-decoration:none;}
a:focus{outline: 2px solid var(--green-light); outline-offset:2px;}
img{max-width:100%; display:block;}

/* Header i menu */
.topbar{position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06);}
.nav{display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:10px 20px;}
.brand img{height:100px; width:auto;}
.menu{display:flex; gap:10px;}
.menu a{padding:10px 12px; border-radius:12px; font-weight:600; color:#222;}
.menu a:hover{background:var(--green-light); color:#fff;}

/* Hamburger */
.hamburger{display:none; flex-direction:column; gap:4px; cursor:pointer;}
.hamburger span{width:26px; height:3px; background:var(--green); border-radius:4px;}

/* Responsywność - mobile */
@media (max-width:820px){
  .menu{
    display:none;
    flex-direction:column;
    position:fixed;
    top:0;
    right:0;
    width:100%;
    height:100vh;
    background:#fff;
    padding:60px 20px;
    gap:20px;
    overflow-y:auto;
    z-index:1000;
  }
  .menu.open{display:flex;}
  .hamburger{display:flex; position:relative; z-index:1100;}
}

/* Hero */
.hero{background:linear-gradient(180deg, #AFB2B3, #fff); padding:48px 20px; text-align:center;}
.hero h1{font-size:clamp(2rem, 3.6vw, 3rem); margin:0 0 14px 0; color:var(--green);}
.hero p{margin:0 0 20px 0; color:var(--muted);}
.cta{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
.btn{padding:12px 18px; border-radius:16px; font-weight:700; cursor:pointer; text-decoration:none;}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:#34495e;}
.btn-ghost{background:#fff; border:1px solid #e6e6e6; color:var(--green);}

/* Sekcje */
section{padding:56px 20px;}
.container{max-width:1200px; margin:0 auto;}
h2.section-title{font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 20px 0; color:var(--green);}

/* Oferta */
.grid{display:grid; gap:14px;}
.grid.cards{grid-template-columns:repeat(4, minmax(0,1fr));}
@media (max-width:1024px){.grid.cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid.cards{grid-template-columns:1fr;}}
.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.card h3{margin:0 0 8px 0; color:var(--green); display:flex; align-items:center; gap:8px;}
.card p{margin:0; color:#000; font-size:1rem;}
.card h3 svg{width:20px; height:20px; fill:var(--green);}

/* O nas */
#onas p{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; line-height:1.6;}

/* FAQ */
details{background:#fff; border:1px solid #eee; border-radius:14px; padding:12px 14px; box-shadow:var(--shadow);}
details + details{margin-top:10px;}
summary{cursor:pointer; font-weight:700; color:var(--green);}
details p{margin:10px 0 0 0;}

/* Blog */
.blog-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin-top:2rem;}
.post{background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 10px rgba(0,0,0,0.1);}
.post-thumb{width:100%; height:180px; object-fit:cover; border-radius:8px 8px 0 0;}
.post-content{padding:1rem;}
.post-content h4{margin:0 0 0.5rem; color:var(--green);}
.post-content time{display:block; font-size:0.85rem; color:#666; margin-bottom:0.5rem;}
.post-content p{margin-bottom:1rem;}

/* Referencje */
.refs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:1024px){.refs{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.refs{grid-template-columns:1fr;}}
.ref{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; padding:16px;}
.ref h4{margin:0 0 8px 0; color:var(--green);}

/* Kontakt */
.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:20px;}
@media (max-width:900px){.contact{grid-template-columns:1fr;}}
.contact-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.map{background:#f4f4f4; border:1px solid #ddd; height:260px; border-radius:14px; position:relative; overflow:hidden;}
.map iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* Footer */
footer{padding:72px 60px; background:var(--green); color:#fff; text-align:center;}
footer .footer-links{margin-top:8px;}
footer .footer-links a{color:#fff; margin:0 8px; font-weight:600; text-decoration:underline;}

/* Dodatkowe responsywności */
@media(max-width:640px){
  .hero h1{font-size:2rem;}
  .grid.cards{grid-template-columns:1fr;}
  .refs{grid-template-columns:1fr;}
}

section {
  scroll-margin-top: 80px;
}

.hero-subtitle {
  font-size: 2.2rem;
  font-weight: 700;
  color: #34495e;
  text-align: center;
  margin-top: 0.5em;
  line-height: 1.2;
  letter-spacing: 0.5px;
  animation: fadeIn 1.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 0.3em;
  line-height: 1.3;
}

.char-container img {
  display: block;
  margin: 0 auto 20px auto;
}