/* =============================================================================
   QR Feedback — főoldal (landing)
   Az app.css tokenjeire épül; itt csak a szekciók elrendezése és díszítése van.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(var(--space-7), 7vw, var(--space-9));
	background:
		radial-gradient(1100px 520px at 8% -10%, var(--accent-soft), transparent 60%),
		radial-gradient(900px 480px at 92% 0%, var(--accent-2-soft), transparent 62%);
}

/* Finom rácsminta: „akadémiai jegyzetlap” utalás, nem tolakodó. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--border) 1px, transparent 1px),
		linear-gradient(to bottom, var(--border) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
	opacity: .45;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(var(--space-6), 5vw, var(--space-8));
	align-items: center;
}

@media (max-width: 940px) {
	.hero__inner {
		grid-template-columns: 1fr;
	}
}

.hero h1 {
	margin-block: var(--space-4) var(--space-5);
}

.hero h1 .accent {
	/* Indigó → akadémiai arany: a márka és a vezetői arculat találkozása. */
	background: linear-gradient(115deg, var(--brand-500), var(--gold-500));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero .lead {
	margin-bottom: var(--space-6);
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-top: var(--space-6);
	font-size: var(--step--1);
	color: var(--text-muted);
}

.hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.hero__meta svg {
	width: 18px;
	height: 18px;
	color: var(--accent-2);
}

/* Hero vizuál: telefon + QR kártya, tisztán CSS/SVG. */
.hero__visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 380px;
}

.device {
	position: relative;
	width: min(280px, 76vw);
	aspect-ratio: 9 / 17.5;
	border-radius: 38px;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-lg);
	padding: 14px;
	rotate: -4deg;
}

.device__screen {
	position: relative;
	height: 100%;
	border-radius: 26px;
	background: var(--surface);
	color: var(--text);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border);
}

/* --- Intézményi fejléc: SZÁNDÉKOSAN elmosva ------------------------------
   Az arculat a megrendelő intézményé — a mockupban ezért nem egy konkrét
   egyetem logója szerepel, hanem egy felismerhető, de olvashatatlan sáv.
   A csík éles marad, csak a TARTALMA homályos: így egyértelmű, hogy ott logó,
   intézménynév és nyelvválasztó van. */
.device__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: linear-gradient(100deg, var(--brand-700), var(--brand-500) 60%, var(--teal-600));
	color: #FFFFFF;
}

.device__brandmark {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .92);
	filter: blur(2px);
}

.device__brandname {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	filter: blur(2.2px);
}

.device__lang {
	margin-left: auto;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .22);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .04em;
	filter: blur(1.8px);
}

/* --- A kérdőív törzse ---------------------------------------------------- */
.device__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	min-height: 0;
}

.device__meta {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.device__title {
	font-weight: 700;
	font-size: .88rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.device__title--sub {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

/* Ötfokú skála — a negyedik a kiválasztott válasz. */
.device__scale {
	display: flex;
	gap: 5px;
}

.device__scale i {
	flex: 1;
	display: grid;
	place-items: center;
	height: 34px;
	border-radius: 9px;
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	font-size: .74rem;
	font-style: normal;
	font-weight: 700;
	color: var(--text-muted);
}

.device__scale i.is-on {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	box-shadow: var(--shadow-accent);
}

.device__scale-legend {
	display: flex;
	justify-content: space-between;
	font-size: .58rem;
	color: var(--text-faint);
}

/* Feleletválasztós kérdés */
.device__options {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
}

.device__options li {
	position: relative;
	padding: 9px 10px 9px 30px;
	border-radius: 9px;
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	font-size: .74rem;
	line-height: 1.3;
	color: var(--text-muted);
}

.device__options li::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	translate: 0 -50%;
	width: 13px;
	height: 13px;
	border-radius: var(--radius-pill);
	border: 2px solid var(--border-strong);
	background: var(--surface);
}

.device__options li.is-on {
	background: var(--accent-soft);
	border-color: var(--accent-border);
	color: var(--accent-text);
	font-weight: 650;
}

.device__options li.is-on::before {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--accent);
}

.device__send {
	display: grid;
	place-items: center;
	height: 38px;
	margin-top: 2px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-size: .78rem;
	font-weight: 700;
	box-shadow: var(--shadow-accent);
}

.device__note {
	margin-top: auto;
	font-size: .62rem;
	line-height: 1.45;
	color: var(--text-faint);
}

/* Lebegő QR-kártya */
.qr-card {
	position: absolute;
	right: -6px;
	bottom: 26px;
	display: grid;
	gap: var(--space-2);
	justify-items: center;
	padding: var(--space-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	rotate: 5deg;
}

.qr-card svg {
	width: 92px;
	height: 92px;
	color: var(--text);
}

.qr-card span {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* Lebegő statisztika-buborék */
.float-stat {
	position: absolute;
	left: -10px;
	top: 96px;
	display: grid;
	gap: 2px;
	padding: var(--space-3) var(--space-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	rotate: -3deg;
}

.float-stat b {
	font-size: 1.35rem;
	line-height: 1.1;
	color: var(--accent-2-text);
}

.float-stat span {
	font-size: .72rem;
	color: var(--text-faint);
}

/* Magyarázó címke az elmosott fejléchez: megmondja, miért homályos. */
.brand-hint {
	position: absolute;
	left: -18px;
	top: -26px;
	display: grid;
	gap: 1px;
	padding: var(--space-2) var(--space-4);
	background: var(--surface);
	border: 1px solid var(--gold-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	rotate: -2deg;
	max-width: 176px;
}

.brand-hint b {
	font-size: .78rem;
	line-height: 1.2;
	color: var(--gold-text);
}

.brand-hint span {
	font-size: .68rem;
	color: var(--text-faint);
}

@media (max-width: 720px) {
	.brand-hint {
		position: static;
		rotate: none;
		margin-top: var(--space-4);
		max-width: none;
		justify-items: center;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.float-stat,
	.qr-card {
		position: static;
		rotate: none;
		margin-top: var(--space-4);
	}

	.hero__visual {
		min-height: auto;
	}

	.device {
		rotate: none;
	}
}

/* ---- Bizalmi sáv -------------------------------------------------------- */
.trustbar {
	border-block: 1px solid var(--border);
	background: var(--surface);
	padding-block: var(--space-5);
}

.trustbar__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-5);
	text-align: center;
}

.trustbar__item b {
	display: block;
	font-size: var(--step-3);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--accent-text);
}

.trustbar__item span {
	font-size: var(--step--1);
	color: var(--text-muted);
}

/* ---- Szekció-fejléc ----------------------------------------------------- */
.section-head {
	max-width: 68ch;
	margin-bottom: var(--space-7);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head p {
	color: var(--text-muted);
	font-size: var(--step-1);
	margin-top: var(--space-3);
}

/* ---- Lépések ------------------------------------------------------------ */
.steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--space-5);
}

.step {
	position: relative;
	padding: var(--space-6) var(--space-5) var(--space-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	top: calc(-1 * var(--space-4));
	left: var(--space-5);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 800;
	font-size: 1.05rem;
	box-shadow: var(--shadow-accent);
}

/* Kétoszlopos elrendezésben (lépések + telefon-mockup) a lépések egymás alá
   kerülnek — különben a szűkebb hasábban 2+1-re törnének. */
.steps--stacked {
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.step h3 {
	margin-bottom: var(--space-2);
	font-size: var(--step-1);
}

.step p {
	color: var(--text-muted);
}

/* ---- Két célcsoport egymás mellett (intézmény / kitöltő) ----------------
   Ez ÖSSZEHASONLÍTÓ nézet, ezért a két panel vizuálisan egyenrangú:
   - azonos háttér és keret (nem az egyik „kiemelt”, a másik „halvány”),
   - azonos szerkezetű fejléc, azonos magasságban induló sorokkal,
   - mindkét oldalon HAT tétel, egyenlő magasságú sorokban, így a sorok a két
     oszlop között is egy vonalban futnak — mint egy táblázatban,
   - a gombsor alulra rögzítve, hogy a két panel alja is egy vonalban legyen.
   A megkülönböztetést csak a felső színcsík és az ikonszín adja. */
.audience {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	align-items: stretch;
}

@media (max-width: 900px) {
	.audience {
		grid-template-columns: 1fr;
	}
}

.audience__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: clamp(var(--space-5), 3vw, var(--space-6));
	padding-top: calc(clamp(var(--space-5), 3vw, var(--space-6)) + 4px);
	border-radius: var(--radius-xl);
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

/* Felső színcsík: ez az egyetlen megkülönböztető jegy a két oszlop között. */
.audience__panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
}

.audience__panel--institution::before {
	background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
}

.audience__panel--user::before {
	background: linear-gradient(90deg, var(--teal-600), var(--teal-400));
}

/* A fejléc rögzített minimummagassága tartja egy vonalban a két oszlop
   első sorát akkor is, ha a cím az egyik oldalon két sorba törik. */
.audience__head {
	min-height: 148px;
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid var(--border);
}

@media (max-width: 900px) {
	.audience__head {
		min-height: 0;
	}
}

.audience__role {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-text);
}

.audience__panel--user .audience__role {
	color: var(--accent-2-text);
}

.audience__role svg {
	width: 18px;
	height: 18px;
}

.audience__panel h3 {
	font-size: var(--step-1);
	margin-block: var(--space-3) var(--space-2);
}

.audience__head p {
	color: var(--text-muted);
	font-size: var(--step--1);
	line-height: 1.6;
}

/* A lista kitölti a maradék helyet, és a hat sor egyenlő magasságú: emiatt
   futnak a két panel sorai egy vonalban. */
.audience__list {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
	display: grid;
	grid-auto-rows: 1fr;
	gap: var(--space-4);
}

.audience__list li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: var(--space-4);
	align-items: start;
}

.audience__list .ico {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	background: var(--accent-soft);
	color: var(--accent-text);
}

.audience__panel--user .ico {
	background: var(--accent-2-soft);
	color: var(--accent-2-text);
}

.audience__list .ico svg {
	width: 21px;
	height: 21px;
}

.audience__list b {
	display: block;
	margin-bottom: 2px;
	font-size: var(--step-0);
	line-height: 1.35;
}

.audience__list p {
	color: var(--text-muted);
	font-size: var(--step--1);
	line-height: 1.6;
}

/* A gombsor mindkét panelen alulra tapad. */
.audience__panel .btn-row {
	margin-top: auto;
	padding-top: var(--space-5);
}

/* ---- Funkciók -----------------------------------------------------------
   Fix 3 oszlop: a hat kártya így 3 × 2-es táblát alkot. Az auto-fit korábban
   széles képernyőn 4 + 2-re tördelte, ami félbevágta a rendszert. */
.features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
}

@media (max-width: 980px) {
	.features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.features {
		grid-template-columns: 1fr;
	}
}

/* ---- Adatvédelmi sáv ---------------------------------------------------- */
.privacy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--space-5), 4vw, var(--space-7));
	align-items: center;
	padding: clamp(var(--space-5), 4vw, var(--space-7));
	border-radius: var(--radius-xl);
	background: var(--surface-inverse);
	color: var(--text-inverse);
	box-shadow: var(--shadow-lg);
}

.privacy h2 {
	color: inherit;
	font-size: var(--step-3);
}

.privacy p {
	color: color-mix(in srgb, currentColor 72%, transparent);
	margin-top: var(--space-3);
}

.privacy .check-list li {
	color: color-mix(in srgb, currentColor 78%, transparent);
}

/* A globális `strong { color: var(--text) }` a fordított hátterű sávon
   olvashatatlan lenne (sötét szöveg sötét alapon) — itt a fordított tokent
   kell használni. */
.privacy strong {
	color: var(--text-inverse);
}

.privacy .check-list svg {
	color: var(--teal-400);
}

@media (max-width: 860px) {
	.privacy {
		grid-template-columns: 1fr;
	}
}

/* ---- Idézet ------------------------------------------------------------- */
.quote {
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.quote blockquote {
	font-size: var(--step-2);
	line-height: 1.45;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.quote figcaption {
	margin-top: var(--space-4);
	color: var(--text-faint);
	font-size: var(--step--1);
}

/* ---- GYIK --------------------------------------------------------------- */
.faq {
	display: grid;
	gap: var(--space-3);
	max-width: 860px;
	margin-inline: auto;
}

.faq details {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-5);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.faq details[open] {
	border-color: var(--accent-border);
	box-shadow: var(--shadow-sm);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	cursor: pointer;
	font-weight: 650;
	list-style: none;
	min-height: 32px;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--text-faint);
	border-bottom: 2px solid var(--text-faint);
	rotate: 45deg;
	transition: rotate var(--transition);
}

.faq details[open] summary::after {
	rotate: -135deg;
}

.faq p {
	margin-top: var(--space-3);
	color: var(--text-muted);
}

/* ---- Záró felhívás ------------------------------------------------------ */
.cta-band {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(var(--space-6), 5vw, var(--space-8));
	border-radius: var(--radius-xl);
	background:
		radial-gradient(760px 340px at 50% -20%, rgba(199, 154, 80, .22), transparent 62%),
		linear-gradient(150deg, var(--ink-800), var(--ink-950));
	color: #FFFFFF;
	box-shadow: var(--shadow-lg);
}

.cta-band h2 {
	color: inherit;
	font-size: var(--step-3);
}

.cta-band p {
	margin: var(--space-3) auto var(--space-6);
	max-width: 56ch;
	color: rgba(255, 255, 255, .88);
}

.cta-band .btn-row {
	justify-content: center;
}

.cta-band .btn--primary {
	background: var(--gold-500);
	border-color: var(--gold-500);
	color: #16130B;
	box-shadow: 0 10px 30px rgba(2, 6, 23, .35);
}

.cta-band .btn--primary:hover {
	background: var(--gold-400);
	border-color: var(--gold-400);
	color: #16130B;
}

.cta-band .btn--secondary {
	background: transparent;
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, .55);
	box-shadow: none;
}

.cta-band .btn--secondary:hover {
	background: rgba(255, 255, 255, .12);
	color: #FFFFFF;
	border-color: #FFFFFF;
}

/* ---- Belépéskor megjelenő finom animáció -------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .7, .3, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* =============================================================================
   Kiegészítések — intézményi/vezetői szekciók
   FONTOS: a CSP tiltja az inline style attribútumot, ezért minden méret
   (pl. sávszélesség) osztályból jön.
   ========================================================================== */

/* ---- Bizalmi sáv: kattintható elemek ----------------------------------- */
.trustbar__item {
	display: block;
	padding: var(--space-3) var(--space-2);
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
	transition: background var(--transition), transform var(--transition);
}

.trustbar__item:hover {
	background: var(--surface-2);
	color: inherit;
	transform: translateY(-2px);
}

.trustbar__item:hover b {
	color: var(--gold-text);
}

/* ---- Szekció-lezáró hivatkozás ----------------------------------------- */
.section-foot {
	margin-top: var(--space-6);
	text-align: center;
}

.section-foot a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 650;
	text-decoration: none;
	border-bottom: 1px solid var(--accent-border);
	padding-bottom: 2px;
}

.section-foot a:hover {
	border-bottom-color: currentColor;
}

.section-foot svg {
	width: 18px;
	height: 18px;
}

/* ---- Vezetői szekció: szöveg + riport ---------------------------------- */
.lead-split {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(var(--space-6), 5vw, var(--space-8));
	align-items: center;
}

@media (max-width: 940px) {
	.lead-split {
		grid-template-columns: 1fr;
	}
}

.qlist {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--space-4);
}

.qlist li {
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: var(--space-4);
	align-items: center;
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
}

.qlist li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.qlist .ico {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-pill);
	background: var(--gold-soft);
	color: var(--gold-text);
}

.qlist .ico svg {
	width: 19px;
	height: 19px;
}

/* ---- Riport-illusztráció ------------------------------------------------ */
.report {
	margin: 0;
	padding: var(--space-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

.report__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--border);
}

.report__title {
	font-weight: 700;
	letter-spacing: -0.01em;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.chip--gold {
	background: var(--gold-soft);
	color: var(--gold-text);
	border: 1px solid var(--gold-line);
}

.report__body {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.report__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px 34px;
	gap: var(--space-4);
	align-items: center;
	font-size: var(--step--1);
	color: var(--text-muted);
}

.report__row b {
	text-align: right;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.report__row--alert b {
	color: var(--danger);
}

.meter {
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--bg-subtle);
	overflow: hidden;
}

.meter__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
}

.report__row--alert .meter__fill {
	background: var(--danger);
}

.meter__fill--48 { width: 48%; }
.meter__fill--72 { width: 72%; }
.meter__fill--88 { width: 88%; }
.meter__fill--94 { width: 94%; }

.report__trend {
	margin-top: var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border);
	color: var(--accent-2);
}

.report__trend svg {
	width: 100%;
	height: auto;
}

.report__note {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border);
	font-size: .78rem;
	color: var(--text-faint);
	line-height: 1.55;
}

.report__trend span {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--step--1);
	color: var(--text-faint);
}

/* ---- „Nem dobozos szoftver” sáv (sötét, tinta-kék) ---------------------- */
.inkband {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--space-6), 5vw, var(--space-8));
	border-radius: var(--radius-xl);
	background:
		radial-gradient(900px 420px at 12% -20%, rgba(199, 154, 80, .18), transparent 62%),
		linear-gradient(160deg, var(--ink-800), var(--ink-950));
	color: var(--on-ink);
	box-shadow: var(--shadow-lg);
}

.inkband__head {
	max-width: 76ch;
}

.inkband h2 {
	color: #FFFFFF;
	font-size: var(--step-3);
	margin-top: var(--space-3);
}

.inkband__head p {
	margin-top: var(--space-4);
	color: var(--on-ink-muted);
	font-size: var(--step-1);
	line-height: 1.6;
}

.inkband strong {
	color: #FFFFFF;
}

.inkband__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--space-5);
	margin-top: var(--space-7);
}

.inkcard {
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
}

.inkcard__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius);
	background: rgba(199, 154, 80, .16);
	color: var(--gold-300);
	margin-bottom: var(--space-4);
}

.inkcard__icon svg {
	width: 21px;
	height: 21px;
}

.inkcard h3 {
	font-size: var(--step-1);
	color: #FFFFFF;
	margin-bottom: var(--space-3);
}

.inkcard p {
	color: var(--on-ink-muted);
	font-size: var(--step--1);
	line-height: 1.6;
}

/* Kiemelt idézet a sötét sávban */
.pull {
	margin: var(--space-7) 0 0;
	padding-left: var(--space-5);
	border-left: 3px solid var(--gold-400);
	max-width: 72ch;
}

.pull blockquote {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.45;
	color: #FFFFFF;
	text-wrap: balance;
}

.pull figcaption {
	margin-top: var(--space-4);
}

.pull__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--gold-300);
	font-weight: 650;
	text-decoration: none;
	font-size: var(--step--1);
}

.pull__link:hover {
	color: #FFFFFF;
}

.pull__link svg {
	width: 18px;
	height: 18px;
}

/* ---- Adatvédelmi sáv kiegészítései ------------------------------------- */
.eyebrow--onink {
	color: var(--teal-400);
}

/* ---- Záró felhívás lábjegyzete ----------------------------------------- */
.cta-band__foot {
	margin-top: var(--space-6);
	font-size: var(--step--1);
	color: rgba(255, 255, 255, .82);
}

.cta-band__foot a {
	color: #FFFFFF;
	font-weight: 650;
}