.about-hero {
  position: relative;
  background-color: var(--color-dark);
  background-image: linear-gradient(rgba(47, 63, 73, 0.9), rgba(47, 63, 73, 0.8)), url('../img/solutions/dach-plaski.webp');
  background-size: cover;
  background-position: center;
  padding: 180px 0 100px;
  color: #fff;
  text-align: center;
}

.about-hero__content { max-width: 800px; margin: 0 auto; }
.about-hero__title { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.5rem; line-height: 1.1; }
.about-hero__desc { font-size: 1.2rem; line-height: 1.6; opacity: 0.9; font-weight: 300; }

.approach { background: #fff; }
.approach__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: center; }
.approach__content { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.approach__intro { font-size: 1.1rem; line-height: 1.7; margin: 0; color: var(--color-text); }
.approach__list-col { display: flex; justify-content: center; align-items: center; }
.approach__list { list-style: none; margin: 0; padding: 0; width: 100%; }
.approach__list li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.approach__list .icon { color: var(--color-primary); font-size: 2.2rem; margin-top: 2px; line-height: 1; }
.approach__list span { font-size: 1rem; color: var(--color-text); line-height: 1.55; }

.timeline-section { background: #f8fafc; position: relative; overflow: hidden; }
.timeline-wrap { position: relative; max-width: 1000px; margin: 3rem auto 0; padding: 2rem 0; }

.timeline-line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: #cbd5e0; transform: translateX(-50%); z-index: 1;
}

.timeline-item {
  position: relative; width: 50%; padding: 0 2.5rem; margin-bottom: 3rem;
  box-sizing: border-box; z-index: 2;
}

.timeline-item:nth-child(even) { left: 0; text-align: right; }
.timeline-item:nth-child(odd) { left: 50%; text-align: left; }

.timeline-dot {
  position: absolute; top: 0; width: 16px; height: 16px;
  background: #fff; border: 3px solid var(--color-primary);
  border-radius: 50%; z-index: 3;
}
.timeline-item:nth-child(even) .timeline-dot { right: -8px; }
.timeline-item:nth-child(odd) .timeline-dot { left: -8px; }

.timeline-date {
  font-size: 1.5rem; font-weight: var(--w-bold); color: var(--color-primary);
  margin-bottom: 0.5rem; line-height: 1;
}

.timeline-content h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--color-text-heading); font-weight: var(--w-semi); }
.timeline-content p { font-size: 0.95rem; color: var(--color-text); line-height: 1.5; }

.timeline-item.is-today .timeline-date { font-size: 2rem; color: var(--color-dark); text-transform: uppercase; }
.timeline-item.is-today .timeline-dot {
  width: 24px; height: 24px; background: var(--color-primary); border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--color-primary);
}
.timeline-item.is-today:nth-child(even) .timeline-dot { right: -12px; }
.timeline-item.is-today:nth-child(odd) .timeline-dot { left: -12px; }

.quality { background: var(--color-dark); color: #fff; position: relative; }
.quality::before {
  content: ""; position: absolute; inset: 0;
  background: url('../img/pattern.svg'); opacity: 0.05; pointer-events: none;
}

/* NIE ustawiamy żadnego max-width / padding na .quality__container
   bo to jest ten sam element co .container i ma dziedziczyć identyczny układ */

.quality__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: start; }
.quality__left { text-align: left; justify-self: start; }
.quality__left .section-title--light { margin-bottom: 1rem; text-align: left; }
.quality__left p { font-size: 1.1rem; opacity: 0.9; line-height: 1.7; margin: 0; max-width: 65ch; text-align: left; }

.quality__right { display: flex; flex-direction: column; align-items: center; justify-self: start; }
.quality__list { list-style: none; margin: 0 0 2rem; padding: 0; width: 100%; }
.quality__list li { position: relative; padding-left: 2rem; margin-bottom: 1rem; font-size: 1.05rem; width: 100%; }
.quality__list li::before { content: "✔"; position: absolute; left: 0; color: var(--color-primary); font-weight: bold; }
.quality__actions { margin: 0; width: 100%; display: flex; justify-content: flex-start; }

.partners-text { background: #fff; }
.partners-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 4rem; align-items: center; }
.partners-content { text-align: left; }
.partners-content p { margin: 0 0 2rem; line-height: 1.7; }
.partners-visual { display: flex; justify-content: center; align-items: center; }
.partners-icon { font-size: 9rem; color: var(--color-primary); line-height: 1; }

.mission { background: #a9b58a; color: #fff; padding: 5rem 0; }
.mission__grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 4rem; align-items: center; }
.mission__visual { display: flex; justify-content: center; align-items: center; }
.mission-icon { font-size: 9rem; color: #fff; line-height: 1; }
.mission__content { text-align: left; }
.mission__title { font-size: 2.5rem; margin-bottom: 1.25rem; }
.mission__text { font-size: 1.2rem; line-height: 1.7; font-weight: 300; margin: 0; max-width: 65ch; }

.cta-simple { background: #f8fafc; }
.cta-simple__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.cta-simple__item { text-align: left; }
.cta-simple__item-inner { border-left: 3px solid var(--color-primary); padding-left: 1.5rem; }
.cta-simple__item h3 { font-size: 1.6rem; margin: 0 0 0.75rem; color: var(--color-text-heading); }
.cta-simple__item p { margin: 0 0 1.25rem; color: var(--color-text); line-height: 1.7; max-width: 60ch; }
.cta-simple__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.offer-contact { background: #f8fafc; }
.form-wrapper { max-width: 800px; margin: 0 auto; background: #fff; padding: 3rem; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.form-subtitle { text-align: center; margin-bottom: 2.5rem; color: var(--color-text); }
.b2b-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group.full-width { grid-column: 1 / -1; }
.b2b-form label { font-size: 0.9rem; font-weight: var(--w-semi); color: var(--color-dark); }
.b2b-form input, .b2b-form textarea { padding: 0.8rem; border: 1px solid #cbd5e0; border-radius: 6px; font-family: inherit; transition: border-color 0.3s; }
.b2b-form input:focus, .b2b-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(235,101,48,0.1); }
.checkbox-group { flex-direction: row; align-items: flex-start; gap: 0.8rem; }
.checkbox-group input { margin-top: 4px; }
.checkbox-group label { font-weight: var(--w-reg); font-size: 0.85rem; color: #718096; }
.form-actions { margin-top: 2rem; text-align: center; }

@media (max-width: 992px) {
  .approach__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .quality__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .partners-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .mission__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cta-simple__grid { grid-template-columns: 1fr; gap: 2rem; }
  .quality__right { align-items: flex-start; }
  .quality__actions { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .timeline-line { left: 30px; }
  .timeline-item { width: 100%; padding-left: 70px; padding-right: 0; text-align: left !important; }
  .timeline-item:nth-child(even), .timeline-item:nth-child(odd) { left: 0; }
  .timeline-item:nth-child(even) .timeline-dot, .timeline-item:nth-child(odd) .timeline-dot { left: 22px; right: auto; }
  .timeline-item.is-today .timeline-dot { left: 18px; }

  .about-hero__title { font-size: 2.5rem; }
  .b2b-form .form-grid { grid-template-columns: 1fr; }

  .partners-icon { font-size: 7.5rem; }
  .mission-icon { font-size: 5rem; }
}

/* Crafted with ❤️ by PixelShark.eu */