/* ==========================================================================
   Homepage composition (Phase 03-B). Loaded on the front page only.
   Rhythm: dark cinematic hero → dark brand band → light about →
   dark offer card → tinted services → light "why" panel → dark branches
   → light partners → image CTA → dark footer.
   ========================================================================== */

.xn-page-home .xn-main { padding-top: 0; }

/* ---- Hero ------------------------------------------------------------------- */
.xn-hero {
	--xn-hero-ink: 14, 7, 24;      /* neutral near-black — never a purple wash */
	--xn-hero-base: 38, 16, 63;    /* matches the brand band below */
	--xn-hero-pad-top: calc(var(--xn-header-h) + var(--xn-space-8));
	--xn-hero-pad-bottom: calc(var(--xn-bar-space) + var(--xn-space-4));
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	background: rgb(var(--xn-hero-base));
	color: var(--xn-text-inverse);
	overflow: hidden;
}
@media (min-width: 1024px) {
	.xn-hero { min-height: 100vh; --xn-hero-pad-bottom: var(--xn-space-16); }
}
.xn-hero__slides { display: grid; min-height: inherit; }
.xn-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	min-height: inherit;
	display: grid;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.1s var(--xn-ease), visibility 0s linear 1.1s;
}
.xn-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--xn-ease), visibility 0s; z-index: 1; }

.xn-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.xn-hero__media picture, .xn-hero__img, .xn-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.xn-hero__img, .xn-hero__video { object-fit: cover; object-position: var(--xn-hero-focus, 60% center); }
[dir="rtl"] .xn-hero__slide[data-flip-rtl] .xn-hero__img { transform: scaleX(-1); }
.xn-hero__slide.is-active .xn-hero__img { animation: xn-hero-ken calc(var(--xn-hero-interval, 7s) + 1.2s) var(--xn-ease-out) both; }
[dir="rtl"] .xn-hero__slide[data-flip-rtl].is-active .xn-hero__img { animation-name: xn-hero-ken-flip; }
@keyframes xn-hero-ken      { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes xn-hero-ken-flip { from { transform: scaleX(-1) scale(1.07); } to { transform: scaleX(-1) scale(1); } }
.xn-hero__video { opacity: 0; transition: opacity 0.8s var(--xn-ease); }
.xn-hero__video.is-playing { opacity: 1; }

/* Readability: a directional neutral shade on the text side plus a base fade.
   Strength comes from each slide (--xn-hero-shade, 0–0.8). */
.xn-hero__shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(to top, rgba(var(--xn-hero-base), 1) 0%, rgba(var(--xn-hero-base), 0.55) 14%, rgba(var(--xn-hero-base), 0) 34%),
		linear-gradient(var(--xn-shade-dir, to right), rgba(var(--xn-hero-ink), calc(var(--xn-hero-shade, 0.45) + 0.2)) 0%, rgba(var(--xn-hero-ink), var(--xn-hero-shade, 0.45)) 30%, rgba(var(--xn-hero-ink), 0) 72%),
		linear-gradient(to bottom, rgba(var(--xn-hero-ink), 0.45) 0%, rgba(var(--xn-hero-ink), 0) 22%);
}
.xn-hero__slide[data-x="end"]   .xn-hero__shade { --xn-shade-dir: to left; }
[dir="rtl"] .xn-hero__slide[data-x="start"] .xn-hero__shade { --xn-shade-dir: to left; }
[dir="rtl"] .xn-hero__slide[data-x="end"]   .xn-hero__shade { --xn-shade-dir: to right; }
.xn-hero__slide[data-x="center"] .xn-hero__shade {
	background:
		linear-gradient(to top, rgba(var(--xn-hero-base), 1) 0%, rgba(var(--xn-hero-base), 0) 34%),
		radial-gradient(ellipse at center, rgba(var(--xn-hero-ink), calc(var(--xn-hero-shade, 0.45) + 0.1)) 0%, rgba(var(--xn-hero-ink), calc(var(--xn-hero-shade, 0.45) * 0.4)) 70%);
}

.xn-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;              /* mobile: thumb-reach by default */
	align-items: flex-start;
	padding-top: var(--xn-hero-pad-top);
	padding-bottom: var(--xn-hero-pad-bottom);
}
.xn-hero__slide[data-y-mobile="top"]    .xn-hero__inner { justify-content: flex-start; }
.xn-hero__slide[data-y-mobile="center"] .xn-hero__inner { justify-content: center; }

.xn-hero__content {
	--xn-hero-width: 36rem;
	display: grid;
	gap: var(--xn-space-4);
	width: min(100%, var(--xn-hero-width));
	text-align: start;
}
.xn-hero__slide[data-width="narrow"] .xn-hero__content { --xn-hero-width: 28rem; }
.xn-hero__slide[data-width="wide"]   .xn-hero__content { --xn-hero-width: 50rem; }
.xn-hero__slide[data-align="center"] .xn-hero__content { text-align: center; justify-items: center; }
.xn-hero__slide[data-align="end"]    .xn-hero__content { text-align: end; justify-items: end; }

.xn-hero__kicker {
	display: inline-flex; align-items: center; gap: var(--xn-space-3);
	margin: 0;
	font-size: var(--xn-fs-body-sm);
	font-weight: var(--xn-fw-medium);
	color: var(--xn-text-inverse-muted);
}
.xn-hero__kicker::before { content: ""; width: 28px; height: 1.5px; background: var(--xn-highlight); }

.xn-hero__title {
	--_size: var(--xn-fs-display);
	--_lh: var(--xn-lh-display);
	margin: 0;
	color: #fff;
	font-size: var(--_size);
	font-weight: 700;
	line-height: var(--_lh);
	letter-spacing: var(--xn-ls-display);
	text-wrap: balance;
}
.xn-hero__slide[data-size="md"] .xn-hero__title { --_size: var(--xn-fs-h1); }
.xn-hero__slide[data-size="xl"] .xn-hero__title { --_size: clamp(2.625rem, 1.5rem + 5vw, 5.75rem); }
.xn-hero__slide[data-weight="500"] .xn-hero__title { font-weight: 500; }
.xn-hero__slide[data-weight="600"] .xn-hero__title { font-weight: 600; }
.xn-hero__slide[data-leading="tight"]   .xn-hero__title { --_lh: 1.18; }
.xn-hero__slide[data-leading="relaxed"] .xn-hero__title { --_lh: 1.45; }
:root:lang(en) .xn-hero__slide[data-leading="tight"]   .xn-hero__title { --_lh: 1.0; }
:root:lang(en) .xn-hero__slide[data-leading="normal"]  .xn-hero__title { --_lh: 1.08; }
:root:lang(en) .xn-hero__slide[data-leading="relaxed"] .xn-hero__title { --_lh: 1.25; }

.xn-hero__text { margin: 0; max-width: 34em; color: var(--xn-text-inverse-muted); font-size: var(--xn-fs-body-lg); }
.xn-hero__actions { display: flex; flex-wrap: wrap; gap: var(--xn-space-3); margin-top: var(--xn-space-3); }
.xn-hero__slide[data-align="center"] .xn-hero__actions { justify-content: center; }
.xn-hero__slide[data-align="end"]    .xn-hero__actions { justify-content: flex-end; }
@media (max-width: 479px) {
	.xn-hero__actions { width: 100%; }
	.xn-hero__actions .xn-btn { flex: 1 1 100%; }
}

/* Staggered entrance each time a slide becomes active */
.xn-hero__slide.is-active .xn-hero__content > * { animation: xn-hero-in 0.9s var(--xn-ease-out) both; }
.xn-hero__slide.is-active .xn-hero__content > :nth-child(2) { animation-delay: 90ms; }
.xn-hero__slide.is-active .xn-hero__content > :nth-child(3) { animation-delay: 180ms; }
.xn-hero__slide.is-active .xn-hero__content > :nth-child(4) { animation-delay: 270ms; }
@keyframes xn-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (min-width: 768px) {
	.xn-hero__inner { justify-content: center; }
	.xn-hero__slide[data-y="top"]    .xn-hero__inner { justify-content: flex-start; }
	.xn-hero__slide[data-y="center"] .xn-hero__inner { justify-content: center; }
	.xn-hero__slide[data-y="bottom"] .xn-hero__inner { justify-content: flex-end; }
	.xn-hero__slide[data-x="center"] .xn-hero__inner { align-items: center; }
	.xn-hero__slide[data-x="end"]    .xn-hero__inner { align-items: flex-end; }
}
@media (max-width: 767px) {
	.xn-hero__shade {
		background:
			linear-gradient(to top, rgba(var(--xn-hero-base), 1) 0%, rgba(var(--xn-hero-ink), calc(var(--xn-hero-shade, 0.45) + 0.3)) 30%, rgba(var(--xn-hero-ink), calc(var(--xn-hero-shade, 0.45) * 0.5)) 62%, rgba(var(--xn-hero-ink), 0.35) 100%);
	}
	.xn-hero__img, .xn-hero__video { object-position: var(--xn-hero-focus-mobile, 68% center); }
}

/* Controls: small, quiet, never pagination */
.xn-hero__controls {
	position: absolute; z-index: 3;
	inset-inline-end: var(--xn-gutter);
	top: calc(var(--xn-header-h) + var(--xn-space-3));
	display: flex; gap: var(--xn-space-2);
	margin: 0;
}
.xn-hero__controls .xn-icon-btn--glass { background: rgba(252, 250, 255, 0.12); border-color: rgba(252, 250, 255, 0.16); color: var(--xn-text-inverse); }
.xn-hero__controls .xn-icon-btn--glass:hover { background: rgba(252, 250, 255, 0.22); }
.xn-hero__controls :focus-visible { outline-color: var(--xn-focus-ring-inverse); }
.xn-hero__controls .xn-carousel__prev,
.xn-hero__controls .xn-carousel__next { display: none; }
@media (min-width: 768px) {
	.xn-hero__controls { top: auto; bottom: var(--xn-space-8); }
	.xn-hero__controls .xn-carousel__prev,
	.xn-hero__controls .xn-carousel__next { display: inline-grid; }
}

/* ---- Brand band (independent of the hero slides) ----------------------------- */
.xn-hero-brands {
	position: relative;
	z-index: 1;
	padding-block: var(--xn-space-5) var(--xn-space-6);
	background: var(--xn-surface-inverse);
	border-end-start-radius: var(--xn-radius-xl);
	border-end-end-radius: var(--xn-radius-xl);
}
.xn-hero-brands::before {
	content: ""; display: block;
	width: min(100% - 2 * var(--xn-gutter), var(--xn-container-wide));
	height: 1px; margin: 0 auto var(--xn-space-5);
	background: var(--xn-border-inverse);
}

/* ---- About ---------------------------------------------------------------------- */
.xn-home-about__grid { display: grid; gap: var(--xn-space-10); align-items: center; }
.xn-home-about__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--xn-radius-xl);
	overflow: hidden;
	background: var(--xn-surface-tint);
}
.xn-home-about__media img { width: 100%; height: 100%; object-fit: cover; }
.xn-home-about__badge {
	position: absolute;
	inset-block-end: var(--xn-space-4);
	inset-inline-start: var(--xn-space-4);
	display: inline-flex; align-items: center; gap: var(--xn-space-3);
	padding: var(--xn-space-2) var(--xn-space-4) var(--xn-space-2) var(--xn-space-2);
	border-radius: var(--xn-radius-pill);
	font-size: var(--xn-fs-body-sm);
	font-weight: var(--xn-fw-semi);
}
[dir="rtl"] .xn-home-about__badge { padding: var(--xn-space-2) var(--xn-space-2) var(--xn-space-2) var(--xn-space-4); }
.xn-home-about__badge-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(252, 250, 255, 0.12); color: var(--xn-highlight); }
.xn-home-about__copy { display: grid; justify-items: start; gap: var(--xn-space-2); }
.xn-home-about__title { margin: 0 0 var(--xn-space-3); font-size: var(--xn-fs-h2); max-width: 18ch; }
.xn-home-about__text {
	--xn-word-step: 22ms;
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
	line-height: var(--xn-lh-body);
	color: var(--xn-text);
	max-width: 40em;
}
.xn-home-about__points { list-style: none; margin: var(--xn-space-6) 0 var(--xn-space-2); padding: 0; display: grid; gap: var(--xn-space-3); }
.xn-home-about__points li { display: flex; align-items: center; gap: var(--xn-space-3); font-weight: var(--xn-fw-medium); }
.xn-home-about__tick { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--xn-accent-soft); color: var(--xn-accent); }
@media (min-width: 1024px) {
	.xn-home-about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 7rem); }
	.xn-home-about__media { aspect-ratio: 4 / 5; }
}

/* ---- Offer -------------------------------------------------------------------------- */
.xn-home-offer { padding-top: 0; }

/* ---- Section head with carousel ---------------------------------------------------- */
.xn-home-head .xn-section-head { margin-bottom: var(--xn-space-8); }
.xn-home-carousel { --xn-carousel-gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
.xn-home-carousel .xn-carousel__controls { margin-top: var(--xn-space-6); }
.xn-home-carousel .xn-carousel__slide { display: flex; }
.xn-home-carousel .xn-carousel__slide > .xn-card { flex: 1; }

/* ---- Why ------------------------------------------------------------------------------ */
.xn-why {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	border-radius: var(--xn-radius-xl);
	background: var(--xn-surface);
	border: 1px solid var(--xn-border);
	overflow: hidden;
}
.xn-why__item {
	position: relative;
	display: grid;
	justify-items: start;
	align-content: start;
	gap: var(--xn-space-3);
	padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.xn-why__item + .xn-why__item { border-top: 1px solid var(--xn-border); }
.xn-why__icon {
	display: grid; place-items: center;
	width: 60px; height: 60px;
	margin-bottom: var(--xn-space-3);
	border-radius: var(--xn-radius-md);
	background: var(--xn-accent-soft);
	color: var(--xn-accent);
	transition: background-color var(--xn-dur-3) var(--xn-ease), color var(--xn-dur-3) var(--xn-ease), transform var(--xn-dur-3) var(--xn-ease-out);
}
.xn-why__item:hover .xn-why__icon { background: var(--xn-primary); color: var(--xn-highlight); transform: translateY(-3px); }
.xn-why__title { margin: 0; font-size: var(--xn-fs-h4); }
.xn-why__text { margin: 0; color: var(--xn-text-muted); }
@media (min-width: 768px) {
	.xn-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.xn-why__item + .xn-why__item { border-top: 0; border-inline-start: 1px solid var(--xn-border); }
}

/* ---- Branches (dark band) ---------------------------------------------------------- */
.xn-home-branches { border-radius: var(--xn-radius-xl); margin-inline: clamp(0px, 1vw, 16px); }
.xn-home-branches .xn-card--branch-compact .xn-card__body { gap: var(--xn-space-2); }

/* ---- Partners --------------------------------------------------------------------------- */
.xn-home-partners .xn-section-head { margin-bottom: var(--xn-space-8); }
.xn-home-partners .xn-logos { justify-content: center; }

/* ---- Final CTA ----------------------------------------------------------------------------- */
.xn-home-cta { padding-top: 0; padding-bottom: var(--xn-section-y-sm); }
/* The final CTA already carries the footer's call to action. */
.xn-page-home .xn-footer__cta { display: none; }
.xn-cta--final { min-height: clamp(380px, 30vw + 200px, 560px); align-content: end; }
.xn-cta--final .xn-cta__title { font-size: var(--xn-fs-h1); max-width: 16ch; }
@media (min-width: 1024px) { .xn-cta--final { align-content: center; } }
.xn-motion-ready .xn-home-cta [data-xn-motion] .xn-cta__bg img { transition: transform 1.4s var(--xn-ease-out); }
.xn-motion-ready .xn-home-cta [data-xn-motion]:not(.is-in) .xn-cta__bg { transform: scale(1.06); }
.xn-home-cta .xn-cta__bg { transition: transform 1.4s var(--xn-ease-out); }

/* Footer follows the CTA directly */
.xn-page-home .xn-footer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.xn-hero__slide { transition: none; }
	.xn-hero__slide.is-active .xn-hero__img,
	.xn-hero__slide.is-active .xn-hero__content > * { animation: none !important; }
	[dir="rtl"] .xn-hero__slide[data-flip-rtl] .xn-hero__img { transform: scaleX(-1); }
}