/* Trzy przewagi: krótka demonstracja mechanizmu zamiast fikcyjnych wyników pomiarów.
   Animacje jednorazowe, uruchamiane w widoku; treść i końcowe schematy widoczne bez JS. */
.g2adv {
	--g2adv-accent: #16b6d6;
	scroll-margin-top: 112px;
}

.g2adv-heading {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	align-items: end;
	gap: 64px;
	margin-bottom: 52px;
}

.g2u .g2adv-heading .g2u-title {
	max-width: none;
	margin: 0;
	font-size: clamp(34px, 3.65vw, 68px);
	line-height: 1.06;
}

.g2u .g2adv .g2adv-intro {
	max-width: 26em;
	color: #555;
	font-size: 18px;
	line-height: 1.6;
}

.g2adv .g2adv-replay {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	margin: 15px 0 0;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #111;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}

.g2adv .g2adv-replay[hidden] {
	display: none;
}

.g2adv-replay span {
	font-family: system-ui, sans-serif;
	font-size: 24px;
	line-height: 1;
	transition: transform 0.3s;
}

.g2adv-replay:hover span {
	transform: rotate(-45deg);
}

.g2adv-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.g2adv-card {
	--g2adv-ink: #111;
	--g2adv-muted: #555;
	--g2adv-line: #eaeaea;
	--g2adv-soft: #e9e9e9;
	--g2adv-paper: #fff;
	--g2adv-landscape: #d3d3d3;
	--g2adv-warn: #a75348;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 36px 34px 32px;
	border: 1px solid #f2f2f2;
	background: #fdfdfd;
	color: var(--g2adv-ink);
	transition: transform 0.25s, border-color 0.25s;
}

.g2adv-card--security {
	--g2adv-ink: #f7f7f7;
	--g2adv-muted: #bdbdbd;
	--g2adv-line: #414141;
	--g2adv-soft: #252525;
	--g2adv-paper: #191919;
	--g2adv-warn: #dc9386;
	border-color: #111;
	background: #111;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.g2adv-card:hover {
		border-color: #eee;
		transform: translateY(-5px);
	}
	.g2adv-card--security:hover {
		border-color: #aaa;
	}
}

.g2adv-card__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.g2u .g2adv .g2adv-card__title {
	margin: 0;
	color: var(--g2adv-ink);
	font-size: clamp(22px, 1.9vw, 32px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.g2adv-card__number {
	color: var(--g2adv-muted);
	font-size: 12px;
	line-height: 1;
}

.g2adv-scene {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 236px;
	margin: 28px 0 30px;
	background-image: radial-gradient(var(--g2adv-line) 0.7px, transparent 0.7px);
	background-position: center;
	background-size: 16px 16px;
}

.g2adv-scene svg {
	display: block;
	width: 92%;
	max-width: 334px;
	height: auto;
	overflow: visible;
}

.g2u .g2adv .g2adv-card__claim {
	margin: 0 0 22px;
	color: var(--g2adv-ink);
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 400;
	line-height: 1.23;
	letter-spacing: -0.025em;
}

.g2u .g2adv .g2adv-card__text {
	margin: 0 0 32px;
	color: var(--g2adv-muted);
	font-size: 16px;
	line-height: 1.65;
}

.g2u .g2adv .g2adv-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: auto 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--g2adv-line);
	list-style: none;
}

.g2adv-card__tags li {
	margin: 0;
	padding: 0;
	color: var(--g2adv-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}

/* Wspólna paleta ilustracji, także w ciemnej karcie. */
.g2adv-svg-paper { fill: var(--g2adv-paper); stroke: var(--g2adv-line); stroke-width: 1.2; }
.g2adv-svg-line { fill: none; stroke: var(--g2adv-line); stroke-width: 1.4; }
.g2adv-svg-soft { fill: var(--g2adv-soft); }
.g2adv-svg-landscape { fill: var(--g2adv-landscape); }
.g2adv-svg-ink { fill: var(--g2adv-ink); }
.g2adv-svg-muted { fill: var(--g2adv-muted); }
.g2adv-svg-accent { fill: var(--g2adv-accent); }
.g2adv-svg-accent-line { fill: none; stroke: var(--g2adv-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g2adv-svg-accent-outline { fill: none; stroke: var(--g2adv-accent); stroke-width: 1.4; }
.g2adv-svg-dark-stroke { fill: none; stroke: #111; stroke-width: 1.5; }
.g2adv-svg-warn { fill: var(--g2adv-warn); }
.g2adv-svg-warn-stroke { fill: none; stroke: var(--g2adv-warn); stroke-width: 1.5; }
.g2adv-svg-placeholder { fill: none; stroke: var(--g2adv-line); stroke-width: 1.2; stroke-dasharray: 4 4; }
.g2adv-svg-cursor { fill: var(--g2adv-ink); stroke: var(--g2adv-paper); stroke-width: 1.5; }
.g2adv-svg-label { fill: var(--g2adv-muted); font-family: inherit; font-size: 13px; font-weight: 400; }
.g2adv-svg-label--strong { fill: var(--g2adv-ink); font-weight: 500; }
.g2adv-svg-module-label { fill: #111; font-family: inherit; font-size: 14px; font-weight: 500; }
.g2adv-speed-packet, .g2adv-security-good, .g2adv-security-bad { opacity: 0; }

/* Każda sekwencja kończy się w mniej niż pięć sekund. Bez ciągłej animacji w tle. */
.g2adv-card.is-playing .g2adv-speed-piece { animation: g2adv-build 0.6s both cubic-bezier(0.2, 0.7, 0.2, 1); }
.g2adv-card.is-playing .g2adv-speed-piece--one { animation-delay: 0.35s; }
.g2adv-card.is-playing .g2adv-speed-piece--two { animation-delay: 0.65s; }
.g2adv-card.is-playing .g2adv-speed-piece--three { animation-delay: 0.95s; }
.g2adv-card.is-playing .g2adv-speed-route { transform-origin: 43px 210px; animation: g2adv-route 1.4s 0.1s both; }
.g2adv-card.is-playing .g2adv-speed-packet { animation: g2adv-fast-packet 1.6s 0.1s both; }
.g2adv-card.is-playing .g2adv-security-gate { stroke-dasharray: 1; animation: g2adv-gate 1.6s both; }
.g2adv-card.is-playing .g2adv-security-good { animation: g2adv-good-packet 3s 0.2s both; }
.g2adv-card.is-playing .g2adv-security-bad { animation: g2adv-bad-packet 2.7s 0.1s both; }
.g2adv-card.is-playing .g2adv-security-stop { animation: g2adv-stop 2.7s 0.1s both; transform-origin: 116px 142px; }
.g2adv-card.is-playing .g2adv-security-pulse { stroke-dasharray: 360; animation: g2adv-pulse 2s 0.7s both; }
.g2adv-card.is-playing .g2adv-flex-module { animation: g2adv-module 2.3s 0.3s both; transform-origin: 241px 139px; }
.g2adv-card.is-playing .g2adv-flex-cursor { animation: g2adv-cursor 2.5s both; }
.g2adv-card.is-playing .g2adv-flex-status { animation: g2adv-build 0.6s 2.2s both; }

@keyframes g2adv-build { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes g2adv-route { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g2adv-fast-packet { 0% { opacity: 0; transform: translateX(-274px); } 15% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } }
@keyframes g2adv-gate { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g2adv-good-packet { 0% { opacity: 0; transform: translate(-233px, 0); } 10% { opacity: 1; } 42% { transform: translate(-143px, 0); } 62% { transform: translate(-58px, 21px); } 88% { opacity: 1; transform: translate(0, 21px); } 100% { opacity: 0; transform: translate(0, 21px); } }
@keyframes g2adv-bad-packet { 0% { opacity: 0; transform: translateX(-64px); } 12% { opacity: 1; } 45% { opacity: 1; transform: translateX(0); } 62%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes g2adv-stop { 0%, 40% { opacity: 0; transform: scale(0.7); } 53% { opacity: 1; transform: scale(1.2); } 70%, 100% { opacity: 1; transform: scale(1); } }
@keyframes g2adv-pulse { from { stroke-dashoffset: 360; } to { stroke-dashoffset: 0; } }
@keyframes g2adv-module { 0%, 24% { opacity: 0; transform: translate(26px, 38px) scale(0.9); } 66% { opacity: 1; transform: translate(0, -3px) scale(1.02); } 82%, 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes g2adv-cursor { 0% { opacity: 0; transform: translate(29px, 32px); } 25% { opacity: 1; } 50%, 100% { opacity: 1; transform: translate(0, 0); } }

@media (max-width: 1100px) {
	.g2adv-heading { grid-template-columns: 1fr 1fr; gap: 28px; }
	.g2adv-grid { grid-template-columns: 1fr; gap: 20px; }
	.g2adv-card { display: grid; grid-template-columns: 0.95fr 1.05fr; column-gap: 36px; padding: 32px; }
	.g2adv-card__top { grid-column: 1; align-self: start; }
	.g2u .g2adv .g2adv-card__title { font-size: 26px; }
	.g2adv-scene { grid-column: 1; grid-row: 2 / 4; height: auto; min-height: 200px; margin: 16px 0 0; }
	.g2adv-card__body { grid-column: 2; grid-row: 1 / 3; }
	.g2u .g2adv .g2adv-card__claim { font-size: 23px; }
	.g2u .g2adv .g2adv-card__text { margin-bottom: 20px; }
	.g2u .g2adv .g2adv-card__tags { grid-column: 2; grid-row: 3; align-self: end; }
}

@media (max-width: 767px) {
	.g2adv { scroll-margin-top: 90px; }
	.g2adv-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 30px; }
	.g2u .g2adv-heading .g2u-title { font-size: clamp(29px, 7.5vw, 44px); }
	.g2u .g2adv .g2adv-intro { max-width: none; font-size: 17px; }
	.g2adv-card { display: flex; padding: 28px 26px; }
	.g2adv-card__top { align-self: stretch; }
	.g2adv-scene { min-height: 0; height: auto; margin: 28px 0 30px; }
	.g2adv-svg-label, .g2adv-svg-module-label { font-size: 16px; }
	.g2u .g2adv .g2adv-card__title { font-size: 27px; }
	.g2u .g2adv .g2adv-card__claim { font-size: 23px; }
	.g2u .g2adv .g2adv-card__text { font-size: 16px; margin-bottom: 28px; }
	.g2u .g2adv .g2adv-card__tags { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.g2adv *, .g2adv *::before, .g2adv *::after { animation: none !important; transition: none !important; }
	.g2adv .g2adv-replay { display: none; }
}