/* =========================================================
   MODUŁ: Porównanie (vs) — 2 karty side-by-side
   ========================================================= */

.sp-por {
	--sppor-font:        'Inter', sans-serif;
	--sppor-size-label:  13px;
	--sppor-size-tytul:  44px;
	--sppor-weight-tytul: 700;
	--sppor-lh-tytul:    1.2;
	--sppor-size-karta-naglowek: 22px;
	--sppor-size-punkt-tytul: 19px;
	--sppor-size-punkt-opis:  14px;
	--sppor-max-width:   1180px;
	--sppor-pad-y:       90px;
	--sppor-pad-x:       32px;
	--sppor-gap-karty:   32px;
	--sppor-gap-naglowek: 60px;
	--sppor-radius-karta: 24px;
	--sppor-pad-karta:    40px;
	--sppor-radius-sec:  0px;
	--sppor-margin-y:    0px;
	--sppor-tlo:           #FFFFFF;
	--sppor-label:         #1A2540;
	--sppor-label-dot:     #D4A017;
	--sppor-tytul:         #1A2540;
	--sppor-mark:          #D4A017;
	--sppor-lewa-tlo:      #FBF7E8;
	--sppor-lewa-border:   #E8DFCB;
	--sppor-lewa-naglowek: #1A2540;
	--sppor-lewa-ikona:    #9CA3AF;
	--sppor-lewa-ikona-tlo: #FFFFFF;
	--sppor-prawa-tlo:     #FFFFFF;
	--sppor-prawa-border:  #D4A017;
	--sppor-prawa-naglowek: #1A2540;
	--sppor-prawa-ikona:   #FFFFFF;
	--sppor-prawa-ikona-tlo: #1A2540;
	--sppor-punkt-tytul:   #1A2540;
	--sppor-punkt-opis:    #5A5A5A;
	--sppor-badge-tlo:     #D4A017;
	--sppor-badge-tekst:   #1A2540;
	--sppor-cta-tlo:       #D4A017;
	--sppor-cta-tekst:     #1A2540;

	font-family: var(--sppor-font);
	background: var(--sppor-tlo);
	padding: var(--sppor-pad-y) var(--sppor-pad-x);
	border-radius: var(--sppor-radius-sec);
	margin-top: var(--sppor-margin-y);
	margin-bottom: var(--sppor-margin-y);
	color: var(--sppor-punkt-opis);
	position: relative;
	overflow: hidden;
}
.sp-por * { box-sizing: border-box; }

.sp-por--w-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.sp-por--w-container {
	width: 100%;
	max-width: var(--sppor-max-width);
	margin-left: auto;
	margin-right: auto;
}

.sp-por__inner {
	max-width: var(--sppor-max-width);
	margin: 0 auto;
}

/* =========================================================
   NAGŁÓWEK
   ========================================================= */
.sp-por__head {
	text-align: center;
	margin-bottom: var(--sppor-gap-naglowek);
}

.sp-por__label {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-size: var(--sppor-size-label);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sppor-label);
	margin-bottom: 1.5rem;
}
.sp-por__label-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sppor-label-dot);
	box-shadow: 0 0 0 4px rgba(212,160,23,.22);
	animation: sp-por-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes sp-por-dot-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(212,160,23,.22); transform: scale(1); }
	50%      { box-shadow: 0 0 0 9px rgba(212,160,23,.04); transform: scale(1.15); }
}

.sp-por__tytul {
	font-size: clamp(26px, 4.5vw, var(--sppor-size-tytul));
	font-weight: var(--sppor-weight-tytul);
	color: var(--sppor-tytul);
	line-height: var(--sppor-lh-tytul);
	letter-spacing: -.01em;
	margin: 0;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.sp-por--serif .sp-por__tytul {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
	letter-spacing: -.005em;
}
.sp-por__tytul mark {
	background: transparent;
	color: var(--sppor-mark);
	font-weight: inherit;
}
.sp-por__tytul em {
	font-style: italic;
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
}

/* =========================================================
   KARTY
   ========================================================= */
.sp-por__karty {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sppor-gap-karty);
	align-items: stretch;
}

.sp-por__karta {
	background: var(--sppor-lewa-tlo);
	border: 1px solid var(--sppor-lewa-border);
	border-radius: var(--sppor-radius-karta);
	padding: var(--sppor-pad-karta);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	transition: transform .35s cubic-bezier(.4,0,.2,1),
	            box-shadow .35s cubic-bezier(.4,0,.2,1);
	position: relative;
}
.sp-por__karta:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 50px rgba(26,37,64,.10);
}

.sp-por__karta--prawa {
	background: var(--sppor-prawa-tlo);
	border-color: var(--sppor-prawa-border);
}
.sp-por--wyrozniona .sp-por__karta--prawa {
	border-width: 2px;
	box-shadow:
		0 24px 60px rgba(212,160,23,.18),
		0 6px 16px rgba(26,37,64,.06),
		inset 0 0 0 1px rgba(212,160,23,.10);
	position: relative;
	z-index: 2;
}
.sp-por--wyrozniona .sp-por__karta--prawa::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--sppor-radius-karta);
	background: linear-gradient(135deg,
		rgba(212,160,23,.20) 0%,
		transparent 35%,
		transparent 65%,
		rgba(212,160,23,.10) 100%);
	pointer-events: none;
	z-index: -1;
	opacity: .8;
}
.sp-por--wyrozniona .sp-por__karta--prawa:hover {
	transform: translateY(-5px);
	box-shadow:
		0 32px 80px rgba(212,160,23,.28),
		0 8px 24px rgba(26,37,64,.08);
}

/* Badge „REKOMENDOWANE" w prawym górnym rogu */
.sp-por__badge {
	position: absolute;
	top: -14px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .5em 1em;
	background: var(--sppor-badge-tlo);
	color: var(--sppor-badge-tekst);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 999px;
	box-shadow:
		0 10px 24px rgba(212,160,23,.45),
		inset 0 1px 0 rgba(255,255,255,.30);
	z-index: 3;
	animation: sp-por-badge-float 3s ease-in-out infinite;
}
.sp-por__badge svg {
	width: 13px;
	height: 13px;
}
@keyframes sp-por-badge-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}

/* Nagłówek karty */
.sp-por__karta-naglowek {
	font-size: var(--sppor-size-karta-naglowek);
	font-weight: 800;
	margin: 0 0 .5rem;
	letter-spacing: -.005em;
	line-height: 1.3;
}
.sp-por__karta--lewa  .sp-por__karta-naglowek { color: var(--sppor-lewa-naglowek); }
.sp-por__karta--prawa .sp-por__karta-naglowek { color: var(--sppor-prawa-naglowek); }

/* =========================================================
   LISTA PUNKTÓW
   ========================================================= */
.sp-por__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sp-por__punkt {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: flex-start;
}

.sp-por__ikona {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
	transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.sp-por__karta:hover .sp-por__ikona {
	transform: scale(1.12) rotate(-4deg);
}
.sp-por__ikona svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* LEWA — ikona „pusta" (tylko check w tekście) */
.sp-por__karta--lewa .sp-por__ikona {
	background: transparent;
	color: var(--sppor-lewa-ikona);
}

/* PRAWA — ikona w kółku z tłem (jak na screenie) */
.sp-por__karta--prawa .sp-por__ikona,
.sp-por__ikona--filled {
	background: var(--sppor-prawa-ikona-tlo);
	color: var(--sppor-prawa-ikona);
	box-shadow:
		0 6px 14px rgba(26,37,64,.18),
		inset 0 1px 0 rgba(255,255,255,.10);
}

.sp-por__punkt-text {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.sp-por__punkt-tytul {
	font-size: var(--sppor-size-punkt-tytul);
	font-weight: 700;
	color: var(--sppor-punkt-tytul);
	line-height: 1.3;
	letter-spacing: -.005em;
}

.sp-por__punkt-opis {
	font-size: var(--sppor-size-punkt-opis);
	color: var(--sppor-punkt-opis);
	line-height: 1.6;
	margin: 0;
}

/* =========================================================
   CTA pod kartami
   ========================================================= */
.sp-por__cta-wrap {
	text-align: center;
	margin-top: 3rem;
}
.sp-por__cta {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: 1.05em 1.85em;
	background: linear-gradient(135deg, var(--sppor-cta-tlo), color-mix(in srgb, var(--sppor-cta-tlo) 75%, #FFF));
	color: var(--sppor-cta-tekst);
	border-radius: 999px;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .015em;
	text-decoration: none;
	box-shadow:
		0 14px 32px rgba(212,160,23,.42),
		inset 0 1px 0 rgba(255,255,255,.25);
	transition: transform .25s cubic-bezier(.4,0,.2,1),
	            box-shadow .25s cubic-bezier(.4,0,.2,1),
	            filter .2s ease;
	position: relative;
	overflow: hidden;
	border-bottom: none !important;
}
.sp-por__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
	transform: translateX(-100%);
	transition: transform .7s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}
.sp-por__cta:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 20px 44px rgba(212,160,23,.55);
	filter: brightness(1.05);
}
.sp-por__cta:hover::before { transform: translateX(100%); }
.sp-por__cta svg {
	width: 16px;
	height: 16px;
	position: relative;
	z-index: 1;
	transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.sp-por__cta:hover svg { transform: translateX(4px); }
.sp-por__cta > span { position: relative; z-index: 1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 880px) {
	.sp-por {
		--sppor-pad-y: 60px;
		--sppor-pad-x: 20px;
		--sppor-pad-karta: 28px;
		--sppor-gap-naglowek: 40px;
	}
	.sp-por__karty {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.sp-por__karta--prawa { order: -1; }
	.sp-por__badge { right: 50%; transform: translateX(50%); }
	.sp-por__badge { right: 16px; transform: none; }
}
@media (max-width: 600px) {
	.sp-por { --sppor-pad-karta: 22px; }
	.sp-por__karta-naglowek { font-size: 19px; }
	.sp-por__punkt-tytul { font-size: 17px; }
	.sp-por__punkt-opis { font-size: 13.5px; }
	.sp-por__lista { gap: 1.25rem; }
}