/* =====================================================================
   Otter Solutions — sections.css
   O nas, Usługi, listy kontrolne, karty wartości
   ===================================================================== */

.section-sub { color: var(--muted); margin-top: 12px; font-size: 1.05rem; }

/* ---------- About ---------- */
.about-grid {
	display: grid; grid-template-columns: 1.25fr .75fr; gap: 54px; align-items: start;
}
.about-grid h2 { margin: 12px 0 18px; }
.about-grid p { margin-bottom: 16px; }

.check-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.check-list li {
	position: relative; padding-left: 34px; color: var(--ink-2); font-weight: 500;
}
.check-list li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	width: 23px; height: 23px; border-radius: 50%;
	background: var(--grad); color: #fff; font-size: 13px; font-weight: 800;
	display: grid; place-items: center; line-height: 1;
}

.about-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h) + 24px); }
.value-card {
	background: var(--bg); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 26px;
	box-shadow: var(--shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.value-card.alt { background: var(--grad-soft); border-color: transparent; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value-card h3 { margin-bottom: 8px; }
.value-card p { margin: 0; color: var(--ink-2); }

/* ---------- Services ---------- */
.services-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.service-card {
	background: var(--bg); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 30px 26px;
	box-shadow: var(--shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	position: relative; overflow: hidden;
}
.service-card::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: var(--grad); transform: scaleX(0); transform-origin: left;
	transition: transform .3s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-ico {
	width: 56px; height: 56px; border-radius: 14px;
	display: grid; place-items: center; font-size: 1.6rem;
	background: var(--grad-soft); margin-bottom: 18px;
}
.service-card h3 { margin-bottom: 9px; }
.service-card p { font-size: .98rem; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.about-grid { grid-template-columns: 1fr; gap: 32px; }
	.about-side { position: static; flex-direction: row; }
	.about-side .value-card { flex: 1; }
}
@media (max-width: 820px) {
	.services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.services-grid { grid-template-columns: 1fr; }
	.about-side { flex-direction: column; }
}