/* Haagala Homepage — "ליגת הגדולים", dark+gold, RTL, mobile-first */
/* Design System v3.0 — DESIGN-SYSTEM.md §8ג. קטלוג רכיבים — Public Homepage (.hp-*) */
/* Depends on the shared "haagala-landing" cascade (public/css/landing-page.css) for all
   --lp-* custom properties AND for .lp-container / .lp-section-title / .lp-cta, and on
   "haagala-video-css" for .lp-btn-ghost. No :root block here — this file only CONSUMES
   existing --lp-* tokens, per §8ג header. Zero new hex, zero new tokens.
   Every override of a shared .lp-* rule is scoped under .hp-root so the landing,
   company and video pages are never affected. */

/* ——— Elementor wrapper reset — full-bleed widget ——— */
.elementor-widget-haagala_homepage,
.elementor-widget-haagala_homepage > .elementor-widget-container,
.e-con:has(.elementor-widget-haagala_homepage),
.elementor-section:has(.elementor-widget-haagala_homepage),
.elementor-widget-wrap:has(.elementor-widget-haagala_homepage) {
	padding: 0 !important;
	margin: 0 !important;
	width: 100%;
}

body:has(.elementor-widget-haagala_homepage) {
	background-color: var(--lp-bg-deep);
}

/* ——— Base ——— */
.hp-root *,
.hp-root *::before,
.hp-root *::after {
	box-sizing: border-box;
}

.hp-root {
	/* Local layout scale — consumed only inside .hp-root */
	/* Must equal the nav's real rendered height — .hp-nav__inner is pinned to
	   48px content + 2×12px padding so the hero's 100svh math stays exact. */
	--hp-nav-h:   72px;
	--hp-sy:      72px;  /* standard section rhythm */
	--hp-sy-lg:   96px;  /* "breathing" section */
	--hp-ease:    cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */

	font-family: 'Heebo', 'Segoe UI', Arial, sans-serif;
	color: var(--lp-text-primary);
	background: var(--lp-bg-deep);
	direction: rtl;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ——— Scoped overrides of shared .lp-* rules — NEVER edit landing-page.css / video-page.css ——— */

/* Type scale up to luxury proportions (shared rule is clamp(24px,4vw,36px)) */
.hp-root .lp-section-title {
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0;
	text-align: inherit;
}

/* Contrast fix: shared .lp-btn-ghost uses --lp-gold (#C8973A) at 15px/600 ≈ 4.3:1 — fails AA.
   --lp-gold-light (#E8B86D) is 7.0:1 AAA. DESIGN-SYSTEM v3.0 restricts #C8973A to 18px+ bold. */
.hp-root .lp-btn-ghost {
	color: var(--lp-gold-light);
}
.hp-root .lp-btn-ghost:hover {
	border-color: var(--lp-gold-light);
}

/* ——— Motion primitives (§8ג.2) ——— */
.hp-root [data-anim] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms var(--hp-ease), transform 620ms var(--hp-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.hp-root [data-anim].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Legacy explicit stagger — kept for the hero, overrides the --i calc above */
.hp-root .delay-1 { transition-delay: 0.10s; }
.hp-root .delay-2 { transition-delay: 0.20s; }
.hp-root .delay-3 { transition-delay: 0.30s; }
.hp-root .delay-4 { transition-delay: 0.40s; }
.hp-root .delay-5 { transition-delay: 0.50s; }
.hp-root .delay-6 { transition-delay: 0.60s; }
.hp-root .delay-7 { transition-delay: 0.70s; }
.hp-root .delay-8 { transition-delay: 0.80s; }

/* ——— Section chrome — eyebrow + head, shared by every section ——— */
.hp-section {
	padding-block: var(--hp-sy);
}
.hp-section--lg {
	padding-block: var(--hp-sy-lg);
}

.hp-section-head {
	max-width: 760px;
	margin-inline: auto;
	margin-block-end: 40px;
	text-align: center;
}
/* Asymmetric variant — breaks the centred rhythm (§ "monotony") */
.hp-section-head--start {
	margin-inline: 0;
	text-align: start;
	max-width: 680px;
}

.hp-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--lp-gold-light);
	margin-block: 0 16px;
}
.hp-section-head--start .hp-eyebrow {
	justify-content: flex-start;
}
.hp-eyebrow__num {
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}
.hp-eyebrow__line {
	inline-size: 40px;
	block-size: 1px;
	background: linear-gradient(to left, var(--lp-gold), transparent);
	flex-shrink: 0;
}
.hp-eyebrow__text {
	text-transform: uppercase;
}

.hp-section-lead {
	font-size: 17px;
	line-height: 1.75;
	color: var(--lp-text-secondary);
	margin-block: 18px 0;
}
.hp-section-lead p {
	margin-block: 0 14px;
}
.hp-section-lead p:last-child {
	margin-block-end: 0;
}

/* Shared highlighted "punchline" statements */
.hp-why__closing,
.hp-daniel__punchline,
.hp-map__punchline {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--lp-gold-light);
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-block: 40px 0;
}

/* ——— 0 · NAV (§8ג.1) ——— */
.hp-nav {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: transparent;
	border-block-end: 1px solid transparent;
	box-shadow: none;
	transition: background var(--lp-transition), border-color var(--lp-transition),
	            box-shadow var(--lp-transition);
}
/* Opaque, not frosted — §8ג protection rule (3) forbids backdrop-filter on this page. */
.hp-nav.is-scrolled {
	background: var(--lp-bg-deep);
	border-block-end: 1px solid var(--lp-border);
	box-shadow: var(--lp-shadow-1);
}
.hp-nav__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-block-size: 48px;
	padding-block: 12px;
}
.hp-nav__logo {
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--lp-text-primary);
	text-decoration: none;
	flex-shrink: 0;
}
.hp-nav__links {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--lp-bg-deep);
	border-block-end: 1px solid var(--lp-border-strong);
	box-shadow: var(--lp-shadow-1);
	padding: 8px 20px 16px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--lp-transition), transform var(--lp-transition), visibility 0s linear 200ms;
}
.hp-nav__links.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--lp-transition), transform var(--lp-transition);
}
.hp-nav__link {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: var(--lp-text-secondary);
	text-decoration: none;
	padding-block: 12px;
	transition: color var(--lp-transition);
}
.hp-nav__link:hover,
.hp-nav__link:focus-visible,
.hp-nav__link[aria-current="page"] {
	color: var(--lp-gold-light);
}
.hp-nav__link:focus-visible {
	outline: 2px solid var(--lp-gold-light);
	outline-offset: 2px;
}
.hp-nav__cta {
	font-size: 14px;
	padding: 10px 22px;
	flex-shrink: 0;
}
.hp-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-radius-md);
	color: var(--lp-text-primary);
	cursor: pointer;
	transition: background-color var(--lp-transition), border-color var(--lp-transition);
}
.hp-nav__toggle:hover {
	background: var(--lp-gold-glow);
	border-color: var(--lp-border-strong);
}
.hp-nav__toggle:focus-visible {
	outline: 2px solid var(--lp-gold-light);
	outline-offset: 2px;
}

/* ——— 1 · HERO (§8ג.2) — full-fold, static gold ambient background, centred copy ———
   Default path is the two-layer gold glow below. The globe is opt-in (hero_globe_enabled,
   off by default): .hp-hero--globe kills background-image, mirroring .lp-hero--globe in
   landing-page.css:310. The canvas is a direct child of .hp-hero (GlobeHero sizes off
   canvas.parentElement) and is NOT moved by _attachToSection() — backgroundMode is off. */
.hp-hero {
	position: relative;
	overflow: hidden;
	background: var(--lp-bg-deep);
	/* Layer 1 = primary glow from top-centre (same recipe as .lp-hero, landing-page.css:300).
	   Layer 2 = secondary side glow for depth. */
	background-image:
		radial-gradient(ellipse 80% 60% at 50% -10%, var(--lp-gold-glow) 0%, transparent 65%),
		radial-gradient(ellipse 40% 30% at 100% 50%, var(--lp-gold-glow-soft) 0%, transparent 60%);
	/* Nav is sticky and sits in flow above the hero — subtract it so hero + nav = one fold */
	min-block-size: calc(100svh - var(--hp-nav-h));
	display: flex;
	align-items: center;
	padding-block: 48px 88px;
	animation: hp-hero-fade 700ms var(--hp-ease) both;
}
@keyframes hp-hero-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Fading gold hairline closing the section edge — same idiom as .hp-vision__rule.
   Applies on both paths: it seals the boundary, it is not part of the gold field.
   z-index 2 keeps it above the background and below __grid / __scroll (both z-index 3). */
.hp-hero::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 1px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--lp-gold), transparent);
	opacity: 0.4;
}

/* Globe path: the gold field would fight the canvas, so it steps aside. */
.hp-hero--globe {
	background-image: none;
}

/* Veil keeps the copy readable over the globe — rendered only when the globe is on.
   Anchored at 50% because the copy is centred, not pinned to the RTL start edge. */
.hp-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 100% 145% at 50% 45%,
			var(--lp-bg-deep) 30%,
			rgba(12, 12, 14, 0.94) 46%,
			rgba(12, 12, 14, 0.62) 64%,
			rgba(12, 12, 14, 0) 90%),
		linear-gradient(to top, var(--lp-bg-deep) 0%, rgba(12, 12, 14, 0) 26%);
}

/* Spinner must not blank the hero while three.js loads — copy stays visible (LCP). */
.hp-hero .globe-hero-bg-loader {
	background: transparent;
	z-index: 2;
}

.hp-hero__grid {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	inline-size: 100%;
}
.hp-hero__content {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}
.hp-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lp-gold-light);
	border: 1px solid var(--lp-gold-dark);
	border-radius: var(--lp-radius-full);
	padding-block: 6px;
	padding-inline: 18px;
	margin-block: 0 20px;
}
.hp-hero__title {
	font-size: clamp(40px, 8vw, 88px);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--lp-text-primary);
	margin-block: 0 16px;
}
.hp-hero__slogan {
	font-size: clamp(19px, 2.6vw, 26px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	/* Gradient gold — mirrors .lp-hero__title .highlight (landing-page.css:357) */
	background: linear-gradient(135deg, var(--lp-gold-light) 0%, var(--lp-gold) 55%, var(--lp-gold-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-block: 0 18px;
}
.hp-hero__body p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--lp-text-secondary);
	/* Measure control — centred lines at the full 760px read poorly */
	max-width: 620px;
	margin-block: 0 10px;
	margin-inline: auto;
}
.hp-hero__body p:last-child {
	margin-block-end: 0;
}
.hp-hero__differentiator {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--lp-text-primary);
	margin-block: 20px 28px;
}
/* Replaces the old border-inline-start accent, which read as broken once the copy
   was centred. Same rule idiom as .hp-vision__rule. */
.hp-hero__differentiator::before {
	content: '';
	display: block;
	inline-size: 64px;
	block-size: 2px;
	margin: 0 auto 16px;
	background: linear-gradient(90deg, transparent, var(--lp-gold), transparent);
}
.hp-hero__cta-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.hp-hero__cta,
.hp-hero__cta-secondary {
	margin-block-end: 0;
}

/* Trust strip — pulls proof above the fold (Enterprise Gateway pattern) */
.hp-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 20px;
	list-style: none;
	padding: 0;
	margin-block: 30px 0;
}
.hp-hero__trust-item {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 13px;
	color: var(--lp-text-secondary);
}
.hp-hero__trust-value {
	display: inline-block; /* pairs with dir="ltr" so "40+" is not bidi-flipped */
	font-size: 19px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	color: var(--lp-gold-light);
	letter-spacing: -0.02em;
}

/* Optional portrait — only rendered when a photo is set; otherwise the globe shows through */
.hp-hero__visual {
	position: relative;
	display: none;
}
.hp-hero__photo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 560px;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--lp-radius-lg);
	/* Blend the portrait into the dark canvas instead of boxing it */
	-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%, #000 100%);
	mask-image: linear-gradient(to top, transparent 0%, #000 22%, #000 100%);
}

.hp-hero__scroll {
	position: absolute;
	inset-block-end: 24px;
	inset-inline-start: 50%;
	transform: translateX(50%); /* RTL-safe centring for inset-inline-start */
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--lp-radius-full);
	border: 1px solid var(--lp-border);
	color: var(--lp-gold-light);
	background: rgba(12, 12, 14, 0.5);
	transition: border-color var(--lp-transition), background-color var(--lp-transition);
	animation: hp-scroll-bob 2.4s ease-in-out infinite;
}
.hp-hero__scroll:hover {
	border-color: var(--lp-border-strong);
	background: var(--lp-gold-glow);
}
.hp-hero__scroll:focus-visible {
	outline: 2px solid var(--lp-gold-light);
	outline-offset: 3px;
}
@keyframes hp-scroll-bob {
	0%, 100% { transform: translateX(50%) translateY(0); }
	50%      { transform: translateX(50%) translateY(6px); }
}

/* ——— 2 · מה זה העגלה — earns its centred treatment (mission statement) ——— */
.hp-what-is {
	background: var(--lp-bg-surface);
}
.hp-what-is .hp-section-head {
	margin-block-end: 0;
}

/* ——— 3 · 4 מסלולים (§8ג.3) — dual-weight grid ——— */
.hp-tracks {
	background: var(--lp-bg-surface-2);
}
.hp-track-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.hp-track-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--lp-bg-surface);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-radius-lg);
	padding: 26px 24px;
	position: relative;
	overflow: hidden;
	transition: border-color var(--lp-transition), box-shadow var(--lp-trans-slow),
	            transform var(--lp-trans-slow);
}
.hp-track-card::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	background: linear-gradient(90deg, transparent, var(--lp-gold), transparent);
	opacity: 0;
	transition: opacity var(--lp-transition);
}
.hp-track-card:hover {
	border-color: var(--lp-border-strong);
	box-shadow: var(--lp-shadow-gold);
	transform: translateY(-4px);
}
.hp-track-card:hover::before {
	opacity: 1;
}
.hp-track-card:active {
	transform: translateY(-4px) scale(0.985);
}
.hp-track-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	background: var(--lp-gold-muted);
	color: var(--lp-gold-light);
	border-radius: var(--lp-radius-md);
	margin-block-end: 16px;
	flex-shrink: 0;
}
.hp-track-card__icon svg {
	inline-size: 24px;
	block-size: 24px;
}
.hp-track-card__title {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--lp-text-primary);
	margin-block: 0 8px;
}
.hp-track-card__body {
	font-size: 15px;
	line-height: 1.65;
	color: var(--lp-text-secondary);
	margin: 0;
}
.hp-track-card__btn {
	margin-block-start: auto;
	padding-block-start: 18px;
}

/* The two primary tracks (companies / workers) carry the dual-track message — they
   must not read as peers of the two supporting tracks. First two repeater rows win. */
.hp-track-card:nth-child(-n+2) {
	border-color: var(--lp-border-strong);
	box-shadow: var(--lp-shadow-gold);
	background:
		radial-gradient(ellipse 90% 70% at 100% 0%, var(--lp-gold-glow) 0%, transparent 60%),
		var(--lp-bg-surface-3);
}
.hp-track-card:nth-child(-n+2)::before {
	opacity: 1;
}
.hp-track-card:nth-child(-n+2):hover {
	box-shadow: var(--lp-shadow-gold-hover);
}
.hp-track-card:nth-child(-n+2) .hp-track-card__icon {
	inline-size: 56px;
	block-size: 56px;
	background: var(--lp-gold-glow-strong);
}
.hp-track-card:nth-child(-n+2) .hp-track-card__icon svg {
	inline-size: 28px;
	block-size: 28px;
}
.hp-track-card:nth-child(-n+2) .hp-track-card__title {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.02em;
}
.hp-track-card:nth-child(-n+2) .hp-track-card__body {
	font-size: 16px;
}

/* ——— 4 · למה שונה (§8ג.4) — asymmetric head ——— */
.hp-why {
	background: var(--lp-bg-surface);
}
.hp-benefit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.hp-benefit-card {
	background: var(--lp-bg-surface-2);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-radius-md);
	padding: 22px;
	transition: border-color var(--lp-transition), transform var(--lp-transition),
	            background-color var(--lp-transition);
}
.hp-benefit-card:hover {
	border-color: var(--lp-border-strong);
	background: var(--lp-bg-surface-3);
	transform: translateY(-3px);
}
.hp-benefit-card__icon {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	background: var(--lp-gold-muted);
	color: var(--lp-gold-light);
	border-radius: var(--lp-radius-md);
	margin-block-end: 14px;
}
.hp-benefit-card__icon svg {
	inline-size: 22px;
	block-size: 22px;
}
.hp-benefit-card__title {
	color: var(--lp-text-primary);
	font-size: 16px;
	font-weight: 700;
	margin-block: 0 6px;
}
.hp-benefit-card__body {
	color: var(--lp-text-secondary);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* ——— 5 · מי זה דניאל (§8ג.5) ——— */
.hp-daniel {
	background: var(--lp-bg-surface-2);
}
.hp-daniel__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
	margin-block-end: 56px;
}
.hp-authority-card {
	background: var(--lp-bg-surface-3);
	border: 1px solid var(--lp-border-strong);
	border-radius: var(--lp-radius-lg);
	padding: 28px;
	box-shadow: var(--lp-shadow-gold);
	text-align: center;
}
.hp-authority-card__header {
	margin-block-end: 22px;
}
.hp-authority-card__avatar {
	inline-size: 84px;
	block-size: 84px;
	border-radius: var(--lp-radius-full);
	background: var(--lp-gold-glow);
	border: 1px solid var(--lp-border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-size: 32px;
	font-weight: 900;
	color: var(--lp-gold-light);
	margin-inline: auto;
	margin-block-end: 16px;
}
.hp-authority-card__avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.hp-authority-card__bio {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hp-authority-card__name {
	font-size: 19px;
	font-weight: 800;
	color: var(--lp-text-primary);
}
.hp-authority-card__role {
	font-size: 13px;
	line-height: 1.5;
	color: var(--lp-text-secondary);
}
.hp-authority-card__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 18px 12px;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--lp-border);
}
.hp-authority-card__stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.hp-authority-card__stat-value {
	font-size: 24px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: var(--lp-gold-light);
}
.hp-authority-card__stat-label {
	font-size: 11px;
	line-height: 1.4;
	color: var(--lp-text-secondary);
}
.hp-daniel__edge-title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--lp-text-primary);
	text-align: center;
	margin-block: 0 24px;
}

/* ——— 6 · מפת עולם (§8ג.6) ——— */
.hp-map {
	background: var(--lp-bg-surface);
}
.hp-map__figure {
	position: relative;
	margin: 8px 0 0;
	border-radius: var(--lp-radius-lg);
	overflow: hidden;
	background: radial-gradient(ellipse 62% 85% at 78% 42%, var(--lp-gold-glow) 0%, transparent 62%);
}
.hp-map__svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}
.hp-map__land {
	fill: var(--lp-bg-surface-3);
}
/* The map is only ~130px tall on a 375px screen, so the dots are scaled up there and
   scaled back down once the figure is large enough. CSS geometry properties override
   the r attribute; browsers without support keep the attribute value. */
.hp-map__halo {
	fill: var(--lp-gold);
	r: 18;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: hp-map-pulse 3s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 140ms);
}
.hp-map__core {
	fill: var(--lp-gold-light);
	r: 11;
}
@keyframes hp-map-pulse {
	0%   { transform: scale(0.5); opacity: 0.5; }
	65%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

.hp-map__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 28px 0 0;
}
.hp-map__chip {
	background: var(--lp-bg-surface-2);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-radius-full);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--lp-text-secondary);
	transition: border-color var(--lp-transition), color var(--lp-transition);
}
.hp-map__chip:hover {
	border-color: var(--lp-border-strong);
	color: var(--lp-gold-light);
}

/* ——— 7 · הוכחות (§8ג.7) — self-proving: the stat band is always populated ——— */
.hp-proof {
	background: var(--lp-bg-surface-2);
}
.hp-stat-band {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 16px;
	margin-block-start: 8px;
	padding-block: 8px;
}
.hp-stat-band__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.hp-stat-band__value {
	font-size: clamp(40px, 7vw, 72px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
	color: var(--lp-gold-light);
}
.hp-stat-band__label {
	font-size: 13px;
	line-height: 1.45;
	color: var(--lp-text-secondary);
	max-inline-size: 15ch;
}

.hp-proof__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin-block-start: 44px;
}
.hp-proof__item {
	border-radius: var(--lp-radius-md);
	overflow: hidden;
	background: var(--lp-bg-surface);
	border: 1px solid var(--lp-border);
	margin: 0;
	transition: border-color var(--lp-transition), transform var(--lp-transition);
}
.hp-proof__item:hover {
	border-color: var(--lp-border-strong);
	transform: translateY(-3px);
}
.hp-proof__image {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.hp-proof__caption {
	padding: 12px 14px;
	font-size: 13px;
	color: var(--lp-text-secondary);
}
.hp-proof__quotes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-block-start: 44px;
}
.hp-proof__quote {
	position: relative;
	background: var(--lp-bg-surface);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-radius-lg);
	padding: 26px 24px;
	margin: 0;
}
.hp-proof__quote p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--lp-text-primary);
	margin: 0 0 14px;
}
.hp-proof__quote-meta {
	font-size: 13px;
	font-weight: 600;
	color: var(--lp-gold-light);
}

/* ——— 8 · חזון — full-bleed statement, the page's quiet climax ——— */
.hp-vision {
	position: relative;
	background: var(--lp-bg-deep);
	background-image: radial-gradient(ellipse 80% 70% at 50% 50%, var(--lp-gold-glow) 0%, transparent 62%);
	border-block: 1px solid var(--lp-border);
	text-align: center;
}
.hp-vision__inner {
	max-width: 820px;
	margin-inline: auto;
}
.hp-vision__line {
	font-size: clamp(21px, 3.2vw, 32px);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--lp-text-primary);
	max-width: 720px;
	margin-inline: auto;
	margin-block: 36px 0;
}
.hp-vision__rule {
	inline-size: 64px;
	block-size: 2px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--lp-gold), transparent);
	margin: 32px auto 0;
}

/* ——— 9 · CTA סופי (§8ג.8) ——— */
.hp-final {
	background: var(--lp-bg-surface-2);
	border-block-end: 1px solid var(--lp-border);
}
.hp-final__inner {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}
.hp-final__body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--lp-text-secondary);
	margin-block: 18px 32px;
}
.hp-final-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.hp-final-cta__primary {
	font-size: 17px;
	padding: 16px 40px;
	margin-block-end: 0;
}
.hp-final-cta__rest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
}
/* Supporting paths are links, not peer buttons — the primary CTA must stand alone */
.hp-final-cta__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--lp-gold-light);
	text-decoration: none;
	border-block-end: 1px solid var(--lp-border-strong);
	padding-block: 6px 4px;
	transition: border-color var(--lp-transition), color var(--lp-transition);
}
.hp-final-cta__link:hover {
	color: var(--lp-text-primary);
	border-block-end-color: var(--lp-gold-light);
}
.hp-final-cta__link:focus-visible {
	outline: 2px solid var(--lp-gold-light);
	outline-offset: 3px;
}

/* ——— FOOTER ——— */
.hp-footer {
	background: var(--lp-footer-bg);
	border-block-start: 1px solid var(--lp-border);
	padding-block: 28px;
}
.hp-footer__inner {
	text-align: center;
}
.hp-footer__text {
	font-size: 12px;
	color: var(--lp-footer-text);
	margin: 0;
}

/* ——— 480px+ ——— */
@media (min-width: 480px) {
	.hp-authority-card {
		padding: 32px;
	}
	.hp-final-cta__rest {
		gap: 10px 28px;
	}
}

/* ——— 768px+ ——— */
@media (min-width: 768px) {
	.hp-root {
		--hp-sy:    96px;
		--hp-sy-lg: 128px;
	}
	.hp-track-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.hp-track-card {
		padding: 30px 28px;
	}
	.hp-track-card:nth-child(-n+2) {
		padding: 38px 34px;
	}
	/* 8 items across 3 columns (3/3/2) breathes; 4 columns cramps them */
	.hp-benefit-grid--why {
		grid-template-columns: repeat(3, 1fr);
	}
	.hp-benefit-grid--edge {
		grid-template-columns: repeat(3, 1fr);
	}
	.hp-daniel__inner {
		grid-template-columns: 1fr 330px;
		gap: 44px;
	}
	.hp-proof__quotes {
		grid-template-columns: repeat(2, 1fr);
	}
	.hp-stat-band {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
	}
	.hp-stat-band__item + .hp-stat-band__item {
		border-inline-start: 1px solid var(--lp-border);
	}
	.hp-map__halo { r: 9; }
	.hp-map__core { r: 5; }
	.hp-final-cta {
		gap: 24px;
	}
}

/* ——— 1024px+ ——— */
@media (min-width: 1024px) {
	.hp-root {
		--hp-sy:    112px;
		--hp-sy-lg: 144px;
	}
	.hp-hero {
		padding-block: 56px 96px;
	}
	/* No second column — the hero stays a single centred stack at every width.
	   If a portrait is set it falls centred beneath the copy instead of beside it. */
	.hp-hero__visual {
		display: block;
		max-inline-size: 420px;
		margin-inline: auto;
	}
	.hp-section-head {
		margin-block-end: 52px;
	}
	.hp-nav__links {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 28px;
		background: transparent;
		border-block-end: 0;
		box-shadow: none;
		padding: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
	.hp-nav__toggle {
		display: none;
	}
}

/* ——— 1280px+ ——— */
@media (min-width: 1280px) {
	.hp-benefit-grid--why {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ——— prefers-reduced-motion ——— */
@media (prefers-reduced-motion: reduce) {
	.hp-root *,
	.hp-root *::before,
	.hp-root *::after {
		transition-duration: 0.01ms !important;
		animation-duration:  0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.hp-root [data-anim] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.hp-map__halo {
		animation: none;
		opacity: 0.28;
	}
	.hp-hero__scroll {
		animation: none;
		transform: translateX(50%);
	}
}

/* Disable reveal animations in the Elementor editor — separate render path */
.elementor-editor-active .hp-root [data-anim] {
	opacity: 1 !important;
	transform: none !important;
}
.elementor-editor-active .hp-hero {
	min-block-size: 0;
}