/* /vulnerability/ — a sérülékenység-vizsgálat landing SAJÁT eltérései.
   Az arculati alap a /soc/ lap CSS-e (egy rendszer, egy fájl) — ide csak az
   kerül, ami ezen a lapon tényleg más. Ami itt nincs, az szándékosan közös. */

/* A hero alcíme itt hosszabb (a súlyozás mibenlétét az első mondat mondja ki),
   ezért kap valamivel szélesebb sávot — 640px-en hét sorra törne. */
#szolgaltatas .lead { max-width: 740px; }

/* ---- A kör ----
   Ez a lap EGYETLEN szerkezeti újdonsága, és szándékos: a /pentest/ lineáris
   lépéssora projekt-jellegű munkát ígér, itt viszont pont az a termék, hogy a
   kör újraindul. A körív és a lépések közti nyilak díszítés — CSS-ből jönnek,
   hogy a felolvasó ne mondja ki őket; a sorrendet a számozott lista hordozza. */
.loop-wrap { position: relative; margin: 38px auto 0; width: 520px; max-width: 100%; }
.loop {
	position: relative; list-style: none; margin: 0; padding: 0;
	aspect-ratio: 1; width: 100%;
}
/* A körív: szaggatott, mert a kör nem egy zárt projekt, hanem ismétlődő üzem. */
.loop::before {
	content: ""; position: absolute; inset: 14%;
	border: 1px dashed var(--line); border-radius: 50%;
}
.loop li {
	position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px;
	border: 1px solid var(--pur); border-radius: 50%;
	background: rgba(124, 58, 237, .14);
	display: flex; align-items: center; justify-content: center;
	text-align: center;
}
.loop li span { font-size: 14px; font-weight: 600; letter-spacing: -.2px; padding: 0 6px; }
/* Öt csomópont 72 fokonként, a Leltár felül indul — ugyanaz az állás, mint a
   szolgáltatáslap 7. oldalán, hogy a nyomtatott és a webes ábra egyet mutasson.
   A százalékok a körív sugarából számolva (inset 14% → r = 36%): a csomópontok
   KÖZÉPPONTJA ül a vonalon, különben az ábra szemre megbillen. */
.loop-1 { top: 14%;   left: 50%; }
.loop-2 { top: 38.9%; left: 84.2%; }
.loop-3 { top: 79.1%; left: 71.2%; }
.loop-4 { top: 79.1%; left: 28.8%; }
.loop-5 { top: 38.9%; left: 15.8%; }

.loop-mid {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	text-align: center; width: 150px;
}
.loop-mid b { display: block; font-size: 19px; font-weight: 700; }
.loop-mid span { display: block; font-size: 13px; color: var(--mut); }

/* A visszacsatolás kimondva is: a körív önmagában nem állítás, a felolvasó
   pedig egyáltalán nem látja. Keskeny kijelzőn ez tartja meg a körkörösséget,
   amikor a rajz függőleges lánccá esik vissza. */
.loop-back {
	margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--mut);
}
.loop-back::before { content: "\21BB"; color: var(--pur); margin-right: 7px; }

/* ---- Szám-sáv ----
   Itt EGY összefüggő állítás áll, nem három önálló adat, ezért nem a /soc/
   három dobozát használjuk: a mondat egyben marad, a számok tipográfiával
   emelkednek ki. Így a 13% és az 55% megtartja a viszonyítási szerepét. */
.stat {
	margin-top: 40px; background: var(--card); border: 1px solid var(--line);
	border-radius: 16px; padding: 28px 30px;
}
.stat-text { font-size: 18px; color: rgba(255, 255, 255, .86); max-width: 860px; }
.stat-text b { color: var(--pur-l); font-size: 1.35em; font-weight: 700; letter-spacing: -.5px; }
.stat-src { margin-top: 14px; }

/* ---- Három szint ---- */
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.level {
	background: var(--card); border: 1px solid var(--line); border-radius: 16px;
	padding: 26px 24px; display: flex; flex-direction: column; gap: 10px;
}
/* A mélység és az időigény a cím FÖLÖTT áll: a vevő előbb azt méri fel, belefér-e
   az idejébe, és csak utána olvassa el, mi a szolgáltatás neve. */
.level-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pur-l); font-weight: 600; }
.level h3 { font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; }
.level p { font-size: 14.5px; color: var(--mut); }

/* ---- Amit minden szinten átadunk ---- */
.give { margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; }
.give h3 { font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pur-l); font-weight: 600; margin-bottom: 14px; }
.give ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 34px; }
.give li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--mut); }
.give li::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--pur); position: absolute; left: 0; top: 9px;
}
.give b { color: #fff; font-weight: 600; }

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

@media (max-width: 900px) {
	/* A kör rajza itt már nem olvasható (a csomópontok egymásra csúsznának),
	   ezért függőleges lánccá esik vissza — a visszacsatolást a .loop-back
	   mondata tartja meg. */
	.loop-wrap { width: 100%; }
	.loop { aspect-ratio: auto; display: flex; flex-direction: column; gap: 10px; }
	.loop::before { display: none; }
	.loop li {
		position: static; width: 100%; height: auto; margin: 0;
		border-radius: 12px; padding: 12px 16px;
	}
	.loop-mid { display: none; }
	.stat { padding: 22px 20px; }
	.stat-text { font-size: 16px; }
	.give ul { grid-template-columns: 1fr; }
}