/* ============================================================
   Home landing — modern B2B SaaS design (Stripe/Linear-inspired).
   All selectors prefixed `.hl` or `.hl-*` — zero global collision.
   Scoped to `body.home` usage via template_include.
   ============================================================ */

.hl {
	--hl-max: 1200px;
	--hl-narrow: 880px;
	--hl-text: #0d1321;
	--hl-text-muted: #5b6574;
	--hl-text-soft: #8a93a3;
	--hl-surface: #ffffff;
	--hl-bg-subtle: #f7f8fb;
	--hl-bg-tint: #eef3ff;
	--hl-border: #e6e8ed;
	--hl-border-strong: #d6dae3;
	--hl-brand: #1552e3;
	--hl-brand-hover: #0e3fb2;
	--hl-brand-soft: #eef3ff;
	--hl-brand-glow: rgba(21, 82, 227, 0.22);
	--hl-accent: #10b981;
	--hl-accent-soft: #ecfdf5;
	--hl-danger: #dc2626;
	--hl-danger-soft: #fef2f2;
	--hl-dark: #0b1225;
	--hl-dark-2: #141c34;
	--hl-radius-sm: 10px;
	--hl-radius-md: 14px;
	--hl-radius-lg: 20px;
	--hl-radius-xl: 28px;
	--hl-shadow-1: 0 1px 2px rgba(13, 19, 33, 0.04);
	--hl-shadow-2: 0 1px 2px rgba(13, 19, 33, 0.04), 0 12px 32px rgba(13, 19, 33, 0.06);
	--hl-shadow-3: 0 2px 4px rgba(13, 19, 33, 0.04), 0 24px 60px rgba(13, 19, 33, 0.10);
	--hl-shadow-brand: 0 6px 20px rgba(21, 82, 227, 0.32);
	color: var(--hl-text);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.hl * { box-sizing: border-box; }

/* Common section-header pattern */
.hl-section__header {
	max-width: 760px;
	margin: 0 auto 56px;
	text-align: center;
	padding: 0 16px;
}
.hl-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hl-brand);
	margin: 0 0 14px;
}
.hl-section__title {
	font-size: clamp(1.875rem, 3.2vw, 2.5rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hl-text);
	margin: 0 0 16px;
}
.hl-section__desc {
	font-size: 1.0625rem;
	color: var(--hl-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* Discrete cross-link line at the bottom of a section */
.hl-section__outro {
	margin: 32px auto 0;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--hl-text-muted);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 12px;
	padding: 0 24px;
}
.hl-section__outro-label { color: var(--hl-text-muted); }
.hl-section__outro a {
	color: var(--hl-brand);
	text-decoration: none;
	font-weight: 600;
}
.hl-section__outro a:hover {
	color: var(--hl-brand-hover);
	text-decoration: underline;
}
.hl-section__outro-sep { color: var(--hl-text-soft); }

/* ============================================================
   BUTTONS
   ============================================================ */

.hl-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	border-radius: var(--hl-radius-sm);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
	white-space: nowrap;
	letter-spacing: -0.005em;
}
.hl-btn span[aria-hidden="true"] {
	transition: transform 0.2s;
}
.hl-btn:hover span[aria-hidden="true"] {
	transform: translateX(3px);
}

.hl-btn--primary {
	background: var(--hl-brand);
	color: #fff !important;
	box-shadow: var(--hl-shadow-brand);
}
.hl-btn--primary:hover {
	background: var(--hl-brand-hover);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(21, 82, 227, 0.42);
}

.hl-btn--ghost {
	background: #fff;
	color: var(--hl-text) !important;
	border-color: var(--hl-border-strong);
}
.hl-btn--ghost:hover {
	border-color: var(--hl-brand);
	color: var(--hl-brand) !important;
	background: var(--hl-brand-soft);
}

.hl-btn--ghost-dark {
	background: transparent;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.28);
}
.hl-btn--ghost-dark:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
}

.hl-btn--xl {
	padding: 18px 32px;
	font-size: 1rem;
}

/* ============================================================
   1. HERO
   ============================================================ */

.hl-hero {
	position: relative;
	padding: clamp(72px, 9vw, 96px) 24px clamp(48px, 6vw, 64px);
	overflow: hidden;
	background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
}
.hl-hero__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(21, 82, 227, 0.08), transparent 70%),
		radial-gradient(ellipse 60% 40% at 90% 10%, rgba(16, 185, 129, 0.06), transparent 70%);
	pointer-events: none;
}
.hl-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(13, 19, 33, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(13, 19, 33, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 20%, transparent 70%);
	opacity: 0.7;
}
.hl-hero__wrap {
	max-width: var(--hl-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
	position: relative;
}
@media (min-width: 1024px) {
	.hl-hero__wrap {
		grid-template-columns: 1.1fr 1fr;
		gap: 64px;
	}
}

.hl-hero__text { max-width: 620px; }

.hl-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--hl-brand-soft);
	color: var(--hl-brand);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0 0 24px;
	border: 1px solid rgba(21, 82, 227, 0.15);
}
.hl-hero__title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--hl-text);
	margin: 0 0 18px;
}
.hl-hero__lead {
	font-size: clamp(1.0625rem, 1.55vw, 1.1875rem);
	line-height: 1.55;
	color: var(--hl-text);
	font-weight: 500;
	margin: 0 0 14px;
	max-width: 600px;
}
.hl-hero__subtitle {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.6;
	color: var(--hl-text-muted);
	margin: 0 0 32px;
	max-width: 560px;
}
.hl-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}
.hl-hero__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 0.875rem;
	color: var(--hl-text-muted);
}
.hl-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.hl-hero__trust svg {
	width: 16px;
	height: 16px;
	color: var(--hl-accent);
	flex-shrink: 0;
}

.hl-hero__visual {
	position: relative;
}
.hl-hero__visual img {
	width: 100%;
	max-width: 620px;
	height: auto;
	display: block;
	margin-left: auto;
}
@media (max-width: 1023px) {
	.hl-hero__visual img { margin: 0 auto; max-width: 420px; }
}

/* ============================================================
   2. STATS
   ============================================================ */

.hl-stats {
	padding: 48px 16px;
	background: var(--hl-bg-subtle);
	border-top: 1px solid var(--hl-border);
	border-bottom: 1px solid var(--hl-border);
}
.hl-stats__caption {
	max-width: var(--hl-max);
	margin: 0 auto 28px;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hl-text-muted);
}
.hl-stats__wrap {
	max-width: var(--hl-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 16px;
}
@media (min-width: 768px) {
	.hl-stats__wrap { grid-template-columns: repeat(4, 1fr); }
}
.hl-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.hl-stat__val {
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--hl-brand);
	line-height: 1;
}
.hl-stat__lbl {
	font-size: 0.875rem;
	color: var(--hl-text-muted);
	line-height: 1.4;
	max-width: 180px;
}

/* ============================================================
   3. PROBLEM / SOLUTION SPLIT
   ============================================================ */

.hl-split {
	padding: 96px 16px;
}
.hl-split__wrap {
	max-width: var(--hl-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 900px) {
	.hl-split__wrap { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.hl-split__col {
	padding: 40px 36px;
	border-radius: var(--hl-radius-lg);
	border: 1px solid var(--hl-border);
}
.hl-split__col--problem {
	background: var(--hl-bg-subtle);
}
.hl-split__col--solution {
	background: linear-gradient(135deg, var(--hl-brand-soft) 0%, #e0ecff 100%);
	border-color: rgba(21, 82, 227, 0.2);
	box-shadow: 0 24px 60px rgba(21, 82, 227, 0.08);
}
.hl-split__badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 20px;
}
.hl-split__badge--red   { background: var(--hl-danger-soft); color: var(--hl-danger); }
.hl-split__badge--green { background: var(--hl-accent-soft); color: var(--hl-accent); }

.hl-split__title {
	font-size: clamp(1.375rem, 2vw, 1.625rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--hl-text);
	margin: 0 0 14px;
}
.hl-split__desc {
	font-size: 0.9375rem;
	color: var(--hl-text-muted);
	line-height: 1.6;
	margin: 0 0 20px;
}
.hl-split__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 0.9375rem;
	color: var(--hl-text);
}
.hl-split__list li {
	position: relative;
	padding-left: 32px;
	line-height: 1.5;
}
.hl-split__list--cross li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hl-danger-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center/12px;
}
.hl-split__list--check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hl-accent-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/12px;
}

/* ============================================================
   4. PILLARS
   ============================================================ */

.hl-pillars {
	padding: 96px 16px;
	background: var(--hl-bg-subtle);
}
.hl-pillars__grid {
	max-width: var(--hl-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.hl-pillars__grid { grid-template-columns: repeat(3, 1fr); }
}
.hl-pillar {
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-radius-lg);
	padding: 36px 28px;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.hl-pillar:hover {
	transform: translateY(-4px);
	box-shadow: var(--hl-shadow-3);
	border-color: rgba(21, 82, 227, 0.25);
}
.hl-pillar__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--hl-radius-md);
	background: var(--hl-brand-soft);
	color: var(--hl-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.hl-pillar__icon svg { width: 28px; height: 28px; }
.hl-pillar__title {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--hl-text);
	margin: 0 0 10px;
}
.hl-pillar__desc {
	font-size: 0.9375rem;
	color: var(--hl-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* ============================================================
   5. DEMO
   ============================================================ */

.hl-demo {
	padding: 96px 16px;
}
.hl-demo__wrap {
	max-width: var(--hl-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	align-items: center;
}
@media (min-width: 1024px) {
	.hl-demo__wrap { grid-template-columns: 1fr 1.1fr; gap: 72px; }
}
.hl-demo__text .hl-eyebrow { text-align: left; }
.hl-demo__title {
	font-size: clamp(1.75rem, 2.8vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--hl-text);
	margin: 0 0 16px;
}
.hl-demo__desc {
	font-size: 1.0625rem;
	color: var(--hl-text-muted);
	line-height: 1.6;
	margin: 0 0 28px;
}
.hl-demo__benefits {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hl-demo__benefits li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.hl-demo__b-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--hl-accent-soft);
	color: var(--hl-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hl-demo__b-icon svg { width: 16px; height: 16px; }
.hl-demo__benefits strong {
	display: block;
	font-weight: 600;
	color: var(--hl-text);
	font-size: 1rem;
	margin-bottom: 2px;
}
.hl-demo__benefits span {
	color: var(--hl-text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Browser chrome around the product screenshot */
.hl-demo__browser {
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-radius-lg);
	overflow: hidden;
	box-shadow: var(--hl-shadow-3);
}
.hl-demo__browser-bar {
	height: 36px;
	background: var(--hl-bg-subtle);
	border-bottom: 1px solid var(--hl-border);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
}
.hl-demo__browser-bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #cfd3da;
}
.hl-demo__browser-bar span:nth-child(1) { background: #ff5f57; }
.hl-demo__browser-bar span:nth-child(2) { background: #febc2e; }
.hl-demo__browser-bar span:nth-child(3) { background: #28c840; }
.hl-demo__browser img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================
   5b. DEMO — 3-pillar slider (CRM · Itinéraires · Facturation)
   ============================================================ */

.hl-pslider {
	position: relative;
	max-width: var(--hl-max);
	margin: 32px auto 0;
}

/* Tabs nav — replaces dots for the demo carousel */
.hl-pslider__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 28px;
}
.hl-pslider__tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: var(--hl-bg-subtle);
	border: 1px solid var(--hl-border);
	border-radius: 999px;
	color: var(--hl-text-muted);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
	white-space: nowrap;
}
.hl-pslider__tab:hover {
	color: var(--hl-text);
	border-color: var(--hl-border-strong);
	transform: translateY(-1px);
}
.hl-pslider__tab.is-active {
	background: var(--hl-brand);
	color: #fff;
	border-color: var(--hl-brand);
	box-shadow: var(--hl-shadow-brand);
	transform: translateY(-1px);
}
.hl-pslider__tab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba(13, 19, 33, 0.06);
	font-size: 0.75rem;
	font-weight: 700;
	transition: background 0.2s, color 0.2s;
}
.hl-pslider__tab.is-active .hl-pslider__tab-num {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* Frame wraps viewport + arrows so arrows position relative to the slide */
.hl-pslider__frame { position: relative; }

/* Slide counter */
.hl-pslider__counter {
	margin-top: 18px;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hl-text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hl-pslider__counter span {
	color: var(--hl-brand);
	font-size: 1rem;
}

.hl-pslider__viewport {
	overflow: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overflow-x: auto;
	scrollbar-width: none;
	border-radius: var(--hl-radius-lg);
}
.hl-pslider__viewport::-webkit-scrollbar { display: none; }
.hl-pslider__track {
	display: flex;
	width: 100%;
}
.hl-pslider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-radius-lg);
	padding: 56px;
	box-shadow: var(--hl-shadow-2);
	box-sizing: border-box;
}
.hl-pslider__text { min-width: 0; }
.hl-pslider__title {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--hl-text);
	margin: 0 0 16px;
}
.hl-pslider__desc {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--hl-text-muted);
	margin: 0 0 20px;
}
.hl-pslider__points {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hl-pslider__points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--hl-text);
}
.hl-pslider__check {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--hl-brand-soft);
	color: var(--hl-brand);
	margin-top: 1px;
}
.hl-pslider__check svg { width: 14px; height: 14px; }
.hl-pslider__cta {
	display: inline-flex;
}
.hl-pslider__media {
	position: relative;
	border-radius: var(--hl-radius-md);
	overflow: hidden;
	aspect-ratio: 7 / 5;
	background: var(--hl-bg-subtle);
	box-shadow: 0 6px 24px rgba(13, 19, 33, 0.10);
}
.hl-pslider__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Arrows */
.hl-pslider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hl-surface);
	color: var(--hl-text);
	border: 1px solid var(--hl-border-strong);
	border-radius: 999px;
	cursor: pointer;
	box-shadow: var(--hl-shadow-2);
	transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
	z-index: 2;
}
.hl-pslider__arrow:hover {
	background: var(--hl-brand);
	color: #fff;
	border-color: var(--hl-brand);
}
.hl-pslider__arrow--prev { left: -22px; }
.hl-pslider__arrow--next { right: -22px; }

/* Dots */
.hl-pslider__dots {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 24px;
}
.hl-pslider__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: var(--hl-border-strong);
	cursor: pointer;
	transition: background 0.15s, width 0.2s;
}
.hl-pslider__dot:hover { background: var(--hl-text-soft); }
.hl-pslider__dot.is-active {
	background: var(--hl-brand);
	width: 28px;
}

/* Responsive */
@media (max-width: 900px) {
	.hl-pslider__slide {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 32px 24px;
	}
	.hl-pslider__media { order: -1; aspect-ratio: 16 / 10; }
	.hl-pslider__arrow--prev { left: 8px; }
	.hl-pslider__arrow--next { right: 8px; }
}

/* ============================================================
   6. REASONS
   ============================================================ */

.hl-reasons {
	padding: 96px 16px;
	background: var(--hl-bg-subtle);
}
.hl-reasons__grid {
	max-width: var(--hl-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 640px)  { .hl-reasons__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hl-reasons__grid { grid-template-columns: repeat(3, 1fr); } }
.hl-reason {
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-radius-md);
	padding: 28px 26px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.hl-reason:hover {
	border-color: rgba(21, 82, 227, 0.25);
	box-shadow: var(--hl-shadow-2);
}
.hl-reason__icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--hl-brand-soft);
	color: var(--hl-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.hl-reason__icon svg { width: 22px; height: 22px; }
.hl-reason__title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--hl-text);
	margin: 0 0 8px;
	letter-spacing: -0.005em;
}
.hl-reason__desc {
	font-size: 0.9375rem;
	color: var(--hl-text-muted);
	line-height: 1.55;
	margin: 0;
}

/* ============================================================
   7. TESTIMONIAL
   ============================================================ */

.hl-testi {
	padding: 96px 16px;
}
/* Testimonial slider — reuses the .hl-pslider mechanics (viewport,
   track, dots, arrows, JS handler) and overrides the slide layout
   so each slide is one centered quote card instead of a 2-col grid. */
.hl-pslider--testi {
	max-width: 880px;
	margin: 0 auto;
}
.hl-pslider__slide--testi {
	display: block;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.hl-pslider--testi .hl-pslider__arrow--prev { left: -22px; }
.hl-pslider--testi .hl-pslider__arrow--next { right: -22px; }
@media (max-width: 900px) {
	.hl-pslider--testi .hl-pslider__arrow--prev { left: 8px; }
	.hl-pslider--testi .hl-pslider__arrow--next { right: 8px; }
}

.hl-testi__card {
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-radius-xl);
	padding: 56px 48px;
	position: relative;
	box-shadow: var(--hl-shadow-2);
	margin: 0;
}
.hl-testi__quote-mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--hl-brand);
	position: absolute;
	top: 20px;
	left: 30px;
	opacity: 0.2;
}
.hl-testi__quote {
	position: relative;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.7;
	color: var(--hl-text);
	font-weight: 400;
	margin: 0 0 32px;
	letter-spacing: -0.01em;
}
@media (max-width: 600px) {
	.hl-testi__card { padding: 40px 28px; }
}
.hl-testi__footer {
	display: flex;
	align-items: center;
	gap: 16px;
}
.hl-testi__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hl-brand) 0%, #3b7af0 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
}
.hl-testi__name {
	font-weight: 600;
	color: var(--hl-text);
	font-size: 1rem;
}
.hl-testi__role {
	font-size: 0.875rem;
	color: var(--hl-text-muted);
}

/* ============================================================
   8. PROCESS
   ============================================================ */

.hl-process {
	padding: 96px 16px;
	background: var(--hl-bg-subtle);
}
.hl-process__steps {
	max-width: var(--hl-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	position: relative;
}
@media (min-width: 768px) {
	.hl-process__steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
	.hl-process__steps::before {
		content: "";
		position: absolute;
		top: 28px;
		left: 16%;
		right: 16%;
		height: 2px;
		background: linear-gradient(90deg, var(--hl-brand) 0%, var(--hl-brand-soft) 50%, var(--hl-brand) 100%);
		z-index: 0;
		opacity: 0.3;
	}
}
.hl-process__step {
	text-align: center;
	position: relative;
	z-index: 1;
}
.hl-process__num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hl-surface);
	border: 2px solid var(--hl-brand);
	color: var(--hl-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0 auto 20px;
	box-shadow: 0 0 0 6px var(--hl-brand-soft);
}
.hl-process__title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--hl-text);
	margin: 0 0 10px;
}
.hl-process__desc {
	font-size: 0.9375rem;
	color: var(--hl-text-muted);
	line-height: 1.6;
	margin: 0;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   9. FAQ
   ============================================================ */

.hl-faq {
	padding: 96px 16px;
}
.hl-faq__list {
	max-width: var(--hl-narrow);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hl-faq__item {
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-radius-md);
	padding: 4px 24px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.hl-faq__item[open] {
	border-color: rgba(21, 82, 227, 0.25);
	box-shadow: var(--hl-shadow-2);
}
.hl-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	cursor: pointer;
	font-weight: 600;
	color: var(--hl-text);
	font-size: 1rem;
	line-height: 1.4;
	list-style: none;
}
.hl-faq__q::-webkit-details-marker { display: none; }
.hl-faq__chev {
	flex-shrink: 0;
	color: var(--hl-text-muted);
	transition: transform 0.2s, color 0.2s;
}
.hl-faq__chev svg { width: 20px; height: 20px; }
.hl-faq__item[open] .hl-faq__chev {
	transform: rotate(180deg);
	color: var(--hl-brand);
}
.hl-faq__a {
	margin: 0 0 20px;
	padding-top: 4px;
	color: var(--hl-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ============================================================
   10. FINAL CTA
   ============================================================ */

/* Boxed banner pattern — same visual signature as .cl-banner / .prl-banner /
   .sl-banner / .hcl-support. Outer section sits on a soft background with
   bottom padding so the dark card doesn't touch the footer. */
/* ============================================================
   9.5. LATEST ARTICLES
   ============================================================ */

.hl-articles {
	padding: clamp(64px, 8vw, 96px) 24px;
	background: var(--hl-surface);
}
.hl-articles__grid {
	max-width: var(--hl-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.hl-article {
	display: flex;
	flex-direction: column;
	background: var(--hl-surface);
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.hl-article:hover {
	transform: translateY(-3px);
	border-color: var(--hl-brand);
	box-shadow: var(--hl-shadow-2);
}
.hl-article__media {
	overflow: hidden;
	background: var(--hl-bg-subtle);
}
.hl-article__media img {
	width: 100%;
	height: auto;
	max-height: 220px;
	display: block;
	transition: transform 400ms ease;
}
.hl-article:hover .hl-article__media img { transform: scale(1.04); }

.hl-article__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.hl-article__cat {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hl-brand);
	background: var(--hl-brand-soft);
	padding: 4px 10px;
	border-radius: 999px;
}
.hl-article__title {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
	margin: 0;
	color: var(--hl-text);
	flex: 1;
}
.hl-article__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--hl-text-soft);
	margin-top: auto;
}

.hl-articles__more {
	max-width: var(--hl-max);
	margin: 32px auto 0;
	display: flex;
	justify-content: center;
}

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

.hl-final {
	padding: 0 24px 80px;
	background: var(--hl-bg-subtle);
}
.hl-final__wrap {
	max-width: var(--hl-max);
	margin: 0 auto;
	padding: 56px 56px 48px;
	background: linear-gradient(135deg, var(--hl-dark) 0%, var(--hl-dark-2) 50%, #1a2550 100%);
	border-radius: var(--hl-radius-lg);
	color: #fff;
	text-align: center;
	box-shadow: 0 12px 40px rgba(11, 18, 37, 0.18);
	position: relative;
	overflow: hidden;
}
.hl-final__wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 50% at 80% 20%, rgba(21, 82, 227, 0.22), transparent 60%),
		radial-gradient(ellipse 40% 60% at 20% 80%, rgba(16, 185, 129, 0.08), transparent 60%),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
	background-size: auto, auto, 22px 22px;
	pointer-events: none;
}
.hl-final__title {
	position: relative;
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: #fff;
	margin: 0 auto 16px;
	max-width: 720px;
}
.hl-final__desc {
	position: relative;
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.55;
	margin: 0 auto 40px;
	max-width: 560px;
}
.hl-final__cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

@media (max-width: 760px) {
	.hl-final { padding: 0 16px 56px; }
	.hl-final__wrap { padding: 40px 24px 32px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
	.hl-hero { padding: 48px 16px 40px; }
	.hl-split,
	.hl-pillars,
	.hl-demo,
	.hl-reasons,
	.hl-testi,
	.hl-process,
	.hl-faq { padding: 64px 16px; }
	/* .hl-final keeps its boxed-banner padding from its own rules above */
	.hl-section__header { margin-bottom: 40px; }
	.hl-split__col { padding: 28px 24px; }
	.hl-testi__card { padding: 40px 28px; }
	.hl-testi__quote-mark { font-size: 4rem; top: 10px; left: 18px; }
	.hl-process__steps::before { display: none; }
}