/* ==========================================================================
   Strona główna. Wartości 1:1 z „Agencja GEO - Strona główna.dc.html".
   ========================================================================== */

/* ------------------------------------------------------------ hero -------- */

.fr-hero {
	background: var(--ag-ink);
	padding: 76px var(--ag-gutter) 92px;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.fr-hero__copy { position: relative; }
.fr-hero__copy .ag-badge { margin-bottom: 28px; }

.fr-hero__title {
	font-size: 64px;
	line-height: 1.04;
	color: var(--ag-cream);
	letter-spacing: -.03em;
}
.fr-hero__title em { color: var(--ag-mint); font-style: normal; }

.fr-hero__lead {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--ag-on-dark);
	margin: 26px 0 36px;
	max-width: 540px;
}
.fr-hero__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.fr-hero__mock { position: relative; }

/* Poglądowy zrzut raportu */
.fr-mock {
	background: var(--ag-card);
	border-radius: var(--ag-r-mock);
	padding: 28px;
	box-shadow: var(--ag-sh-mock);
	margin: 0;
}
.fr-mock__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	gap: 12px;
}
.fr-mock__title { font-weight: 700; font-size: 15px; }
.fr-mock__pill {
	font-weight: 600;
	font-size: 12px;
	background: var(--ag-ok-bg);
	color: var(--ag-green);
	padding: 5px 11px;
	border-radius: var(--ag-r-pill);
	white-space: nowrap;
}
.fr-mock__bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }

.fr-bar__label {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	font-weight: 500;
	color: #5F6E66;  /* 5.23:1 na --ag-card (WCAG AA); #6E7D74 dawal 4.22:1 */
	margin-bottom: 5px;
}
.fr-bar--own .fr-bar__label { font-weight: 600; color: var(--ag-ink); }
.fr-bar__track { height: 12px; border-radius: var(--ag-r-pill); background: var(--ag-track); }
.fr-bar__track span { display: block; height: 12px; border-radius: var(--ag-r-pill); }
.fr-bar--own .fr-bar__track span { background: var(--ag-ink); }
.fr-bar--a   .fr-bar__track span { background: var(--ag-bar-1); }
.fr-bar--b   .fr-bar__track span { background: var(--ag-bar-2); }

.fr-mock__quotes {
	border-top: 1px solid var(--ag-track);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fr-mock__quotes p {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
}
.fr-chip {
	font-size: 11px;
	font-weight: 600;
	background: var(--ag-ink);
	color: var(--ag-mint);
	padding: 4px 9px;
	border-radius: 6px;
	flex: none;
}

.fr-float {
	position: absolute;
	left: -26px;
	bottom: -26px;
	background: var(--ag-mint);
	border-radius: 14px;
	padding: 16px 20px;
	box-shadow: var(--ag-sh-float);
	max-width: 210px;
}
.fr-float strong {
	display: block;
	font-family: var(--ag-display);
	font-weight: 800;
	font-size: 26px;
	color: var(--ag-ink);
}
.fr-float span { font-size: 12px; font-weight: 600; color: var(--ag-ink); }

/* --------------------------------------------------------- marquee -------- */

.fr-marquee { background: var(--ag-mint); overflow: hidden; padding: 15px 0; }
.fr-marquee__track {
	display: flex;
	gap: 44px;
	width: max-content;
	animation: fr-marquee 24s linear infinite;
	font-size: 15px;
	font-weight: 700;
	color: var(--ag-ink);
	white-space: nowrap;
}
@keyframes fr-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ------------------------------------------------------------ talk -------- */

.fr-talk {
	padding-top: 96px;
	padding-bottom: 96px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.fr-talk__title { font-size: 46px; line-height: 1.06; letter-spacing: -.03em; }
.fr-talk__lead {
	font-size: 18px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--ag-on-light);
	margin: 22px 0 18px;
	max-width: 480px;
}
.fr-talk__strong { font-size: 18px; line-height: 1.6; font-weight: 600; max-width: 480px; }
.fr-talk__link { display: inline-block; margin-top: 28px; font-size: 16px; font-weight: 700; color: var(--ag-green); }

.fr-chat { display: flex; flex-direction: column; gap: 14px; }
.fr-chat__q {
	align-self: flex-end;
	background: var(--ag-card);
	border: 1px solid var(--ag-line);
	border-radius: 18px 18px 4px 18px;
	padding: 16px 22px;
	font-size: 15px;
	font-weight: 500;
	max-width: 420px;
}
.fr-chat__a {
	align-self: flex-start;
	background: var(--ag-ink);
	color: var(--ag-cream);
	border-radius: 18px 18px 18px 4px;
	padding: 18px 24px;
	font-size: 15.5px;
	line-height: 1.55;
	font-weight: 500;
	max-width: 440px;
}
.fr-chat__note {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ag-green);
	padding-left: 8px;
}

/* ------------------------------------------------------------ czym jest --- */

.fr-what { background: var(--ag-ink); padding-top: 96px; padding-bottom: 96px; }
.fr-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--ag-mint);
	margin-bottom: 18px;
}
.fr-what__intro {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 56px;
	margin-bottom: 56px;
}
.fr-what__title { font-size: 44px; line-height: 1.08; color: var(--ag-cream); letter-spacing: -.03em; }
.fr-what__lead { font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--ag-on-dark); }

.fr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fr-step {
	background: rgba(242, 239, 231, .06);
	border: 1px solid rgba(61, 242, 176, .25);
	border-radius: var(--ag-r-card);
	padding: 30px;
}
.fr-step__num {
	font-family: var(--ag-display);
	font-weight: 800;
	font-size: 15px;
	color: var(--ag-mint);
	margin-bottom: 14px;
}
.fr-step__title {
	font-family: var(--ag-font);
	font-weight: 700;
	font-size: 20px;
	color: var(--ag-cream);
	margin-bottom: 8px;
	letter-spacing: normal;
}
.fr-step__text { font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--ag-on-dark); }

.fr-step--mint { background: var(--ag-mint); border-color: var(--ag-mint); }
.fr-step--mint .fr-step__num,
.fr-step--mint .fr-step__title,
.fr-step--mint .fr-step__text { color: var(--ag-ink); }

/* ------------------------------------------------------------ usługi ------ */

.fr-services { padding-top: 96px; padding-bottom: 96px; }
.fr-services__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 48px;
	gap: 40px;
}
.fr-services__title { font-size: 48px; line-height: 1.05; letter-spacing: -.03em; max-width: 640px; }
.fr-services__lead { font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ag-on-light); max-width: 420px; }
.fr-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fr-svc {
	background: var(--ag-card);
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-r-card);
	padding: 30px;
}
.fr-svc__num { font-size: 13px; font-weight: 700; color: var(--ag-green); margin-bottom: 16px; }
.fr-svc__title {
	font-family: var(--ag-font);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -.01em;
	margin-bottom: 10px;
}
.fr-svc__text { font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--ag-on-light); }

.fr-svc--dark { background: var(--ag-ink); border-color: var(--ag-ink); }
.fr-svc--dark .fr-svc__num { color: var(--ag-mint); }
.fr-svc--dark .fr-svc__title { color: var(--ag-cream); }
.fr-svc--dark .fr-svc__text { color: var(--ag-on-dark); }

/* Pasek statystyk usunięty (decyzja właściciela) — patrz komentarz w front-page.php. */

/* ------------------------------------------------------------ proces ------ */

.fr-process { padding-top: 96px; padding-bottom: 96px; }
.fr-process__title { font-size: 48px; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 48px; }
.fr-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fr-phase { border-top: 3px solid var(--ag-ink); padding-top: 22px; }
.fr-phase__num {
	font-family: var(--ag-display);
	font-weight: 800;
	font-size: 15px;
	color: var(--ag-green);
	margin-bottom: 12px;
	letter-spacing: normal;
}
.fr-phase__text { font-size: 15.5px; line-height: 1.55; font-weight: 500; color: var(--ag-body-soft); }

/* ------------------------------------------------------------ blog -------- */

.fr-blog { padding-bottom: 96px; }
.fr-blog__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 36px;
	gap: 24px;
}
.fr-blog__title { font-size: 40px; letter-spacing: -.03em; }
.fr-blog__all { font-size: 16px; font-weight: 700; color: var(--ag-green); white-space: nowrap; }
.fr-blog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fr-blog .ag-card__media,
.fr-blog .ag-ph { aspect-ratio: 64 / 30; }
.fr-blog .ag-card__body { padding: 26px 28px; }
.fr-blog .ag-card__title { font-size: 22px; }

/* ==========================================================================
   RWD
   ========================================================================== */

@media (max-width: 1100px) {
	.fr-hero { grid-template-columns: 1fr; gap: 64px; }
	.fr-hero__title { font-size: 48px; }
	.fr-what__intro { grid-template-columns: 1fr; gap: 24px; }
	.fr-steps { grid-template-columns: 1fr; }
	.fr-services__grid { grid-template-columns: repeat(2, 1fr); }
	.fr-process__grid { grid-template-columns: repeat(2, 1fr); }
	.fr-talk { grid-template-columns: 1fr; gap: 40px; }
	.fr-services__head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 700px) {
	.fr-hero { padding-top: 48px; padding-bottom: 64px; gap: 48px; }
	.fr-hero__title { font-size: 34px; line-height: 1.08; }
	.fr-hero__lead { font-size: 16px; margin: 20px 0 28px; }
	.fr-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }

	.fr-mock { padding: 20px; }
	.fr-mock__head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.fr-float { left: auto; right: 8px; bottom: -20px; padding: 12px 16px; }
	.fr-float strong { font-size: 22px; }

	.fr-talk { padding-top: 64px; padding-bottom: 64px; }
	.fr-talk__title { font-size: 27px; line-height: 1.12; }
	.fr-talk__lead, .fr-talk__strong { font-size: 14.5px; }
	.fr-chat__q, .fr-chat__a { max-width: 100%; font-size: 14px; }

	.fr-what { padding-top: 64px; padding-bottom: 64px; }
	.fr-what__title { font-size: 25px; }
	.fr-what__lead { font-size: 14.5px; }

	.fr-services { padding-top: 64px; padding-bottom: 64px; }
	.fr-services__title, .fr-process__title { font-size: 25px; }
	.fr-services__grid { grid-template-columns: 1fr; }

	/* Handoff: usługi na mobile jako lista kart z numerem po lewej. */
	.fr-svc { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 24px; }
	.fr-svc__num { grid-row: 1 / span 2; margin-bottom: 0; font-size: 14px; }
	.fr-svc__title { font-size: 18px; margin-bottom: 6px; }
	.fr-svc__text { font-size: 14px; }

	.fr-process { padding-top: 64px; padding-bottom: 64px; }
	.fr-process__grid { grid-template-columns: 1fr; }

	.fr-blog { padding-bottom: 64px; }
	.fr-blog__title { font-size: 26px; }
	.fr-blog__grid { grid-template-columns: 1fr; }
	.fr-blog__head { flex-direction: column; align-items: flex-start; gap: 12px; }
}