/* ========================================
   Szkło i Drewno
   ======================================== */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'DM Sans', 'Inter', 'Segoe UI', sans-serif;
  color: #0d0d0d;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }

/* === Header === */
.header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background: #0c0c0c;
}
.header-inner {
  max-width:1400px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 48px;
}
.logo-link { display:flex; align-items:center; }
.logo-svg {
  height:40px; width:auto;
  filter: brightness(0) invert(1);
}
.nav { display:flex; gap:36px; }
.nav a {
  font-size:0.85rem; font-weight:400; color:rgba(255,255,255,0.75);
  text-decoration:none; letter-spacing:0.02em;
  transition:color 0.2s;
}
.nav a:hover { color:#fff; }

/* === Hero === */
.hero {
  position:relative; width:100%; height:62vh; min-height:500px;
  margin-top:68px; overflow:hidden; background:#0f0f0f;
}
.hero-bg { position:absolute; inset:0; z-index:1; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-gradient {
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.08) 100%);
}
.hero-inner {
  position:relative; z-index:3;
  max-width:1400px; margin:0 auto;
  height:100%;
  display:flex; align-items:center;
  padding:0 48px;
}
.hero-text {
  display:flex; flex-direction:column;
  max-width:760px;
}
.hero-label {
  font-size:0.85rem; font-weight:500; color:rgba(255,255,255,0.7);
  text-transform:uppercase; letter-spacing:0.14em; margin-bottom:12px;
}
.hero-text h1 {
  font-size:clamp(2.5rem, 5vw, 4rem); font-weight:700; color:#fff;
  line-height:1.08; letter-spacing:-0.02em; margin-bottom:18px;
}
.hero-desc {
  font-size:1rem; font-weight:300; color:rgba(255,255,255,0.82);
  line-height:1.6; max-width:540px; margin-bottom:30px;
}
.hero-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.92rem; font-weight:500; color:#fff; text-decoration:none;
  align-self:flex-start;
  transition:gap 0.25s;
}
.hero-cta:hover { gap:14px; }
.arrow { font-size:1.1rem; transition:transform 0.25s; }
.hero-cta:hover .arrow { transform:translateX(4px); }

/* === About (O nas) === */
.about {
  padding:120px 0;
  background:#fff;
}
.about-inner {
  max-width:1400px; margin:0 auto;
  padding:0 48px;
}
.about-inner h2 {
  font-size:clamp(2rem, 5vw, 3.5rem);
  font-weight:700; color:#0d0d0d;
  letter-spacing:-0.02em;
  margin-bottom:36px;
}
.about-text {
  max-width:820px;
}
.about-text p {
  font-size:1.08rem; font-weight:400; color:#2a2a2a;
  line-height:1.72; margin-bottom:20px;
}
.about-text blockquote {
  font-weight:500; font-size:1.35rem; color:#111;
  line-height:1.45; margin:32px 0;
  padding-left:20px;
  border-left:3px solid #0d0d0d;
  font-style:normal;
}

/* === Offer section (Szkło / Drewno) === */
.offer-section { background:#fff; }

.offer-banner {
  position:relative; width:100%;   height:25vh; min-height:220px;
  overflow:hidden; background-color:#222;
  background-size:cover; background-position:center;
  background-attachment:fixed;
}
.offer-banner img { display:none; }
.offer-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.38);
  z-index:1;
}
.banner-inner {
  position:absolute; inset:0; z-index:3;
  max-width:1400px; margin:0 auto;
  width:100%;
  display:flex; align-items:center;
  padding:0 48px;
  left:0; right:0;
}
.offer-title {
  font-size:clamp(1.8rem, 4vw, 3.2rem);
  font-weight:700; color:#fff;
  letter-spacing:-0.01em;
}

.info-block { padding:80px 0; }
.info-grid {
  max-width:1400px; margin:0 auto;
  padding:0 48px;
  display:grid; grid-template-columns:400px 1fr; gap:80px;
}
.info-head { padding-top:4px; }
.info-tag {
  font-size:0.76rem; font-weight:600; color:#888;
  text-transform:uppercase; letter-spacing:0.14em; margin-bottom:8px;
}
.info-head h2 {
  font-size:1.85rem; font-weight:700; color:#0d0d0d;
  line-height:1.2; letter-spacing:-0.01em;
}
.info-body {
  font-size:1.05rem; font-weight:400; color:#1f1f1f; line-height:1.7;
}
.info-body p { margin-bottom:18px; }
.info-body ul { list-style:none; margin:0 0 22px 0; padding:0; }
.info-body li {
  position:relative; padding-left:18px; margin-bottom:12px;
}
.info-body li::before {
  content:''; position:absolute; left:0; top:10px;
  width:5px; height:5px; background:#0d0d0d; border-radius:50%;
}
.info-note {
  margin-top:20px; padding-top:20px;
  border-top:1px solid #e8e8e8;
  font-weight:300; font-style:italic; color:#666;
}

/* === Contact === */
.contact {
  padding:100px 24px; background:#0f0f0f; color:#fff;
}
.contact-inner { max-width:880px; margin:0 auto; text-align:center; }
.contact-inner h2 {
  font-size:2.5rem; font-weight:700; color:#fff;
  letter-spacing:-0.02em; margin-bottom:10px;
}
.contact-lead {
  font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.55);
  margin-bottom:48px;
}
.contact-row {
  display:flex; gap:32px; justify-content:center; flex-wrap:wrap;
}
.contact-card {
  flex:1; min-width:200px; max-width:260px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.contact-icon { font-size:1.6rem; margin-bottom:6px; opacity:0.7; }
.contact-label {
  font-size:0.72rem; font-weight:600; color:rgba(255,255,255,0.4);
  text-transform:uppercase; letter-spacing:0.12em;
}
.contact-card a {
  font-size:0.95rem; font-weight:400; color:#fff; text-decoration:none;
  transition:opacity 0.2s;
}
.contact-card a:hover { opacity:0.7; }
.contact-placeholder {
  font-size:0.95rem; font-weight:300; color:rgba(255,255,255,0.45);
}

/* === Footer === */
.footer {
  padding:36px 24px; background:#0a0a0a; text-align:center;
}
.footer-logo {
  height:24px; width:auto; margin:0 auto 16px;
  filter: brightness(0) invert(1);
  opacity:0.35;
}
.footer p {
  font-size:0.78rem; font-weight:300; color:rgba(255,255,255,0.25);
}

/* === Responsive === */
@media (max-width:860px) {
  .header-inner { padding:12px 24px; }
  .logo-svg { height:32px; }
  .nav { gap:20px; }
  .hero { height:55vh; min-height:420px; }
  .hero-inner { padding:0 24px; }
  .hero-text h1 { font-size:2.2rem; }
  .hero-desc { font-size:0.92rem; }
  .about { padding:80px 0; }
  .about-inner { padding:0 24px; }
  .about-inner h2 { font-size:2.2rem; margin-bottom:28px; }
  .about-text p { font-size:1rem; }
  .about-text blockquote { font-size:1.2rem; }
  .offer-banner { height:22vh; min-height:180px; }
  .banner-inner { padding:0 24px; }
  .offer-title { font-size:1.8rem; }
  .info-block { padding:56px 0; }
  .info-grid { padding:0 24px; grid-template-columns:1fr; gap:24px; }
  .info-head h2 { font-size:1.5rem; }
  .contact { padding:72px 24px; }
  .contact-inner h2 { font-size:2rem; }
}

@media (max-width:480px) {
  .logo-svg { height:28px; }
  .nav { gap:14px; }
  .nav a { font-size:0.78rem; }
  .hero { height:50vh; min-height:380px; }
  .hero-text h1 { font-size:1.8rem; }
  .hero-cta { font-size:0.85rem; }
  .about { padding:60px 0; }
  .about-inner { padding:0 20px; }
  .about-inner h2 { font-size:1.8rem; }
  .about-text blockquote { font-size:1.1rem; margin:24px 0; padding-left:16px; }
  .offer-banner { height:20vh; min-height:150px; }
  .offer-title { font-size:1.5rem; }
  .info-block { padding:44px 0; }
  .info-grid { padding:0 20px; }
  .info-body { font-size:0.95rem; }
  .contact-row { flex-direction:column; align-items:center; gap:24px; }
  .contact-card { max-width:100%; }
}