/* Services hub hero + growth loop (V2-Services). */
.fx-hero.fx-svh { padding-bottom: 72px; }
.fx-svh .fx-svh__grid { grid-template-columns: minmax(0, 1fr) 600px; gap: 56px; }
.fx-svh .fx-svh__h1 { font-size: 62px; }
.fx-svh .fx-svh__lead { max-width: 560px; }
.fx-svh__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fx-svh__meta .fx-badge { padding: 8px 14px 8px 10px; gap: 10px; }
.fx-svh__meta .fx-badge__n { font-size: 24px; }
.fx-svh__countries { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Jump-to chips */
.fx-svh__jump { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
.fx-svh__jlabel { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.fx-svh__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.fx-svh__chip {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 10px 12px; border-radius: 999px;
	background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap;
	transition: background-color 200ms, border-color 200ms, color 200ms, transform 200ms;
}
.fx-svh__chip:hover { background-color: var(--violet-soft); border-color: #CFC6F2; color: #4A1FC0; transform: translateY(-2px); }
.fx-svh__cn { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* Visual */
.fx-svh__visual { position: relative; }
.fx-svh__bob { position: absolute; right: -26px; bottom: -28px; z-index: 0; }

/* Growth loop stage: 600×520, rounded-rect track, coral dot on offset-path (10 s). */
.fx-loop {
	--loop: 10s;
	position: relative; z-index: 1; width: 600px; height: 520px; border-radius: 28px; overflow: hidden;
	background: linear-gradient(160deg, #F7F6FF, #EEEBFE); border: 1px solid var(--line); box-shadow: var(--shadow-visual);
}
.fx-loop__bg {
	position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(#D9D2EE 1.2px, transparent 1.2px); background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 80%);
	mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 80%);
}
.fx-loop__track { position: absolute; inset: 0; }
.fx-loop__trail { stroke-dasharray: 180 1300; animation: lpTrail var(--loop) linear infinite; }
.fx-loop__dot {
	position: absolute; left: 0; top: 0; z-index: 1; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 5px; background: var(--coral);
	box-shadow: 0 0 0 6px rgba(238, 90, 58, .18), 0 0 24px 4px rgba(238, 90, 58, .45);
	offset-path: path('M300 90 H442 A48 48 0 0 1 490 138 V382 A48 48 0 0 1 442 430 H158 A48 48 0 0 1 110 382 V138 A48 48 0 0 1 158 90 Z');
	offset-rotate: 0deg; animation: lpMove var(--loop) linear infinite;
}
.fx-loop__centre { position: absolute; left: 300px; top: 260px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fx-loop__tile {
	position: relative; width: 92px; height: 92px; border-radius: 26px; background: #fff; border: 1px solid var(--line);
	box-shadow: 0 24px 40px -26px rgba(23, 17, 46, .5); display: flex; align-items: center; justify-content: center;
}
.fx-loop__ring { position: absolute; inset: 0; border-radius: 26px; border: 2px solid var(--violet-400); }
.ring { animation: ring 3.2s var(--ease) infinite; }
.fx-loop__cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fx-loop__pos { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.fx-loop__pos.is-top { left: 300px; top: 90px; }
.fx-loop__pos.is-right { left: 490px; top: 260px; }
.fx-loop__pos.is-bottom { left: 300px; top: 430px; }
.fx-loop__pos.is-left { left: 110px; top: 260px; }
.fx-loop__card { line-height: 1.3;
	width: 172px; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 14px 16px;
	display: flex; flex-direction: column; gap: 8px; box-shadow: 0 14px 30px -24px rgba(23, 17, 46, .4);
	animation: var(--loop) ease-out infinite;
}
.fx-loop__row { display: flex; align-items: center; justify-content: space-between; }
.fx-loop__ic {
	width: 34px; height: 34px; border-radius: 10px; background: var(--violet-soft); color: var(--violet);
	display: flex; align-items: center; justify-content: center; animation: var(--loop) infinite;
}
.fx-loop__ic.lpi-3 { background: var(--coral-soft); color: var(--cta); }
.fx-loop__n { font-family: var(--font-mono); font-size: 10.5px; color: #706D86; white-space: nowrap; }
.fx-loop__stage { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); }
.fx-loop__cat { font-size: 12.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.lp-0 { animation-name: lp0; } .lp-1 { animation-name: lp1; } .lp-2 { animation-name: lp2; } .lp-3 { animation-name: lp3; }
.lpi-0 { animation-name: lpi0; } .lpi-1 { animation-name: lpi1; } .lpi-2 { animation-name: lpi2; } .lpi-3 { animation-name: lpi3; }

@keyframes lpMove { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes lpTrail { from { stroke-dashoffset: 180; } to { stroke-dashoffset: -1177.6; } }
@keyframes ring { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes lp0 { 0%, 3% { border-color: #5B2BD9; transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(91, 43, 217, .75); } 12%, 92% { border-color: #E3DEEF; transform: none; box-shadow: 0 14px 30px -24px rgba(23, 17, 46, .4); } 100% { border-color: #5B2BD9; transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(91, 43, 217, .75); } }
@keyframes lp1 { 0%, 17% { border-color: #E3DEEF; transform: none; box-shadow: 0 14px 30px -24px rgba(23, 17, 46, .4); } 25%, 28% { border-color: #5B2BD9; transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(91, 43, 217, .75); } 37%, 100% { border-color: #E3DEEF; transform: none; box-shadow: 0 14px 30px -24px rgba(23, 17, 46, .4); } }
@keyframes lp2 { 0%, 42% { border-color: #E3DEEF; transform: none; box-shadow: 0 14px 30px -24px rgba(23, 17, 46, .4); } 50%, 53% { border-color: #5B2BD9; transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(91, 43, 217, .75); } 62%, 100% { border-color: #E3DEEF; transform: none; box-shadow: 0 14px 30px -24px rgba(23, 17, 46, .4); } }
@keyframes lp3 { 0%, 67% { border-color: #E3DEEF; transform: none; box-shadow: 0 14px 30px -24px rgba(23, 17, 46, .4); } 75%, 78% { border-color: #EE5A3A; transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(238, 90, 58, .7); } 87%, 100% { border-color: #E3DEEF; transform: none; box-shadow: 0 14px 30px -24px rgba(23, 17, 46, .4); } }
@keyframes lpi0 { 0%, 3% { background-color: #5B2BD9; color: #FFFFFF; } 12%, 92% { background-color: #EEEBFE; color: #5B2BD9; } 100% { background-color: #5B2BD9; color: #FFFFFF; } }
@keyframes lpi1 { 0%, 17% { background-color: #EEEBFE; color: #5B2BD9; } 25%, 28% { background-color: #5B2BD9; color: #FFFFFF; } 37%, 100% { background-color: #EEEBFE; color: #5B2BD9; } }
@keyframes lpi2 { 0%, 42% { background-color: #EEEBFE; color: #5B2BD9; } 50%, 53% { background-color: #5B2BD9; color: #FFFFFF; } 62%, 100% { background-color: #EEEBFE; color: #5B2BD9; } }
@keyframes lpi3 { 0%, 67% { background-color: #FFE8E2; color: #CC3F25; } 75%, 78% { background-color: #EE5A3A; color: #FFFFFF; } 87%, 100% { background-color: #FFE8E2; color: #CC3F25; } }

@media (max-width: 1240px) {
	.fx-svh .fx-svh__grid { grid-template-columns: minmax(0, 1fr) 520px; gap: 40px; }
	.fx-svh .fx-svh__h1 { font-size: 52px; }
	.fx-svh__visual { width: 520px; height: 451px; }
	.fx-svh__visual .fx-loop { transform: scale(.8667); transform-origin: top left; }
}
@media (max-width: 960px) {
	.fx-svh .fx-svh__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.fx-svh__visual { justify-self: center; width: 600px; height: 520px; }
	.fx-svh__visual .fx-loop { transform: none; }
}
/* Small screens: the loop becomes a 2×2 grid (found, chosen / look, booked) with the same highlight cycle. */
@media (max-width: 680px) {
	.fx-svh__visual { width: 100%; height: auto; justify-self: stretch; }
	.fx-svh__bob, .fx-loop__bg, .fx-loop__track, .fx-loop__dot, .fx-loop__centre { display: none; }
	.fx-loop {
		width: 100%; height: auto; border-radius: 22px; padding: 14px; box-shadow: none; overflow: visible;
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
	}
	.fx-loop__pos { position: static; transform: none; }
	.fx-loop__pos.is-top { order: 1; }
	.fx-loop__pos.is-right { order: 2; }
	.fx-loop__pos.is-left { order: 3; }
	.fx-loop__pos.is-bottom { order: 4; }
	.fx-loop__card { line-height: 1.3; width: 100%; height: 100%; }
	.fx-loop__cat { white-space: normal; }
}
@media (max-width: 600px) {
	.fx-hero.fx-svh { padding-bottom: 48px; }
	.fx-svh .fx-hero__inner { gap: 20px; }
	.fx-svh .fx-svh__h1 { font-size: 38px; }
	.fx-svh .fx-svh__grid { gap: 20px; }
	.fx-svh .fx-pill { font-size: 12px; }
	.fx-svh__meta { display: none; }
	.fx-svh__jump { padding-top: 0; margin-inline: -20px; }
	.fx-svh__jlabel { display: none; }
	.fx-svh__chips { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 20px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
	.fx-svh__chips::-webkit-scrollbar { display: none; }
	.fx-svh__chip { flex: none; font-size: 14px; padding: 9px 14px 9px 10px; scroll-snap-align: start; }
	.fx-svh .fx-btns .fx-btn--sec { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-loop__dot, .fx-loop__trail, .fx-loop__ring { display: none; }
}