/*
 * Skóra bloku site/hero-wizual — WYGLĄD. Struktura: blocks/hero-wizual/style.css.
 * Wartości: AP S03; `Kampanie reklamowe.dc.html` L241 @0–7746,
 * `Kompleksowa obsluga reklamowa.dc.html` L241 @0–8358,
 * `Opieka nad strona.dc.html` L234 @0–9782.
 */

.s-hero-wizual__glow {
	background: radial-gradient(56% 60% at 30% -6%, #3f5c88 0%, #314971 14%, #243550 28%, #1a2639 42%, rgba(17, 25, 40, 0.7) 58%, rgba(11, 17, 30, 0.28) 78%, rgba(9, 14, 26, 0) 100%);
	-webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 74%);
	mask-image: linear-gradient(180deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 74%);
}

.s-hero-wizual__lines {
	opacity: 0.12;
	background-image: repeating-linear-gradient(90deg, rgba(214, 232, 255, 0.9) 0 1px, rgba(255, 255, 255, 0) 1px 34px);
	-webkit-mask-image: radial-gradient(56% 66% at 30% 6%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 78%);
	mask-image: radial-gradient(56% 66% at 30% 6%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 78%);
}

.s-hero-wizual__title {
	font-size: clamp(38px, 5.2vw, 62px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.05em;
	color: #fff;
}

.s-hero-wizual__lead {
	font-size: clamp(16px, 1.4vw, 18.5px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.76);
}

.s-hero-wizual__meta {
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
}

.s-hero-wizual__price {
	font-size: 30px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.045em;
	color: #fff;
}

/* --- Ilustracja „kampanie” ---------------------------------------------- */

.s-hero-wizual__ad {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: #0e1728;
	box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.95);
}

.s-hero-wizual__ad-logo {
	background: linear-gradient(140deg, #1667e6, #66b4ff);
	font-size: 14px;
	font-weight: 800;
	color: #fff;
}

.s-hero-wizual__ad-name {
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
}

.s-hero-wizual__ad-url {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.s-hero-wizual__ad-badge {
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
}

.s-hero-wizual__ad-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #9abeff;
}

.s-hero-wizual__ad-text {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.64);
}

.s-hero-wizual__ad-btn {
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
}

.s-hero-wizual__ad-btn.is-primary {
	border: 0;
	background: #1667e6;
}

.s-hero-wizual__alert {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(12, 20, 36, 0.96);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.95);
}

.s-hero-wizual__alert-icon {
	background: #1667e6;
	color: #fff;
}

.s-hero-wizual__alert-title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.s-hero-wizual__alert-time {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

/* --- Ilustracja „hub” ---------------------------------------------------- */

.s-hero-wizual__hub-lines g {
	stroke: rgba(154, 190, 255, 0.4);
}

.s-hero-wizual__node {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(12, 20, 36, 0.96);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
}

.s-hero-wizual__node-icon,
.s-hero-wizual__report-icon {
	border: 1px solid rgba(154, 190, 255, 0.3);
	background: rgba(22, 103, 230, 0.18);
	color: #9abeff;
}

.s-hero-wizual__node-title {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

.s-hero-wizual__node-sub {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.56);
}

.s-hero-wizual__core {
	background: radial-gradient(circle at 35% 30%, #4f95ff, #1667e6 55%, #0d3f9a);
	box-shadow:
		0 0 0 12px rgba(22, 103, 230, 0.14),
		0 0 0 26px rgba(22, 103, 230, 0.07),
		0 30px 60px -20px rgba(22, 103, 230, 0.8);
}

.s-hero-wizual__core-title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #fff;
}

.s-hero-wizual__core-sub {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}

/* --- Ilustracja „raport” ------------------------------------------------- */

.s-hero-wizual__report {
	border: 1px solid rgba(122, 166, 255, 0.34);
	background: linear-gradient(160deg, rgba(22, 103, 230, 0.22), rgba(12, 21, 38, 0.98) 62%);
	box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95);
}

.s-hero-wizual__report-head {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.s-hero-wizual__report-title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

.s-hero-wizual__report-sub {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.55);
}

.s-hero-wizual__report-row + .s-hero-wizual__report-row {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.s-hero-wizual__report-row-icon {
	background: rgba(255, 255, 255, 0.06);
	color: #9abeff;
}

.s-hero-wizual__report-name {
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
}

.s-hero-wizual__pill {
	background: rgba(22, 103, 230, 0.2);
	font-size: 12.5px;
	font-weight: 700;
	color: #cfe0ff;
}

.s-hero-wizual__pill.is-warn {
	background: rgba(251, 191, 36, 0.14);
	color: #fcd34d;
}

/* --- Okno przeglądarki i plakietki („przed-po”, „makiety”) -------------- */

.s-hero-wizual__window {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: #0e1728;
	box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95);
}

.s-hero-wizual__window-bar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
}

.s-hero-wizual__dot {
	background: rgba(255, 255, 255, 0.22);
}

.s-hero-wizual__address {
	background: rgba(255, 255, 255, 0.07);
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}

.s-hero-wizual__screen,
.s-hero-wizual__phone {
	background: #101b33;
}

.s-hero-wizual__float {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(12, 20, 36, 0.94);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9);
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
}

.s-hero-wizual__float-icon {
	background: #1667e6;
	color: #fff;
}

/* --- Ilustracja „przed-po” ----------------------------------------------- */

.s-hero-wizual__old {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: #d6d1c4;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.s-hero-wizual__tag {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.s-hero-wizual__tag.is-old {
	background: #3a3f4a;
	color: rgba(255, 255, 255, 0.85);
}

.s-hero-wizual__tag.is-new {
	background: #1667e6;
	color: #fff;
}

.s-hero-wizual__old-bar {
	background: #8e8778;
}

/* Stara strona: krój szeryfowy systemu (design: Georgia) — bez pobierania. */
.s-hero-wizual__old-body {
	font-family: var(--pw-font-serif);
	color: #5b5549;
}

.s-hero-wizual__old-title {
	font-size: 17px;
	font-weight: 700;
	color: #34338a;
	text-decoration: underline;
}

.s-hero-wizual__old-line {
	background: #b3ad9f;
}

.s-hero-wizual__old-tiles > div {
	border: 2px outset #e6e1d5;
	background: #bdb7a9;
}

.s-hero-wizual__old-date {
	font-size: 11px;
	color: #7a7466;
}

/* --- Ilustracja „makiety” ------------------------------------------------ */

.s-hero-wizual__phone {
	border: 6px solid #1b263a;
	box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.95);
}

@media (max-width: 640px) {
	.s-hero-wizual__title {
		font-size: 36px;
	}

	/* Design: 13,5 px; bramka mobile.textSize ≥ 14 px (deviations).
	   Interlinia = wysokość wiersza designu (13,5 px / normal = 17 px). */
	.s-hero-wizual__meta {
		font-size: 14px;
		line-height: 17px;
	}
}

/* `[data-h1]` na ≤ 400 px (design L351–355, wspólny arkusz podstron). */
@media (max-width: 400px) {
	.s-hero-wizual__title {
		letter-spacing: -0.035em;
	}
}