@charset "UTF-8";

/* Alenbi Sans — גופן האתר. שלושה משקלים אמיתיים: 300 / 400 / 700. */
@font-face {
	font-family: "Alenbi Sans";
	src: url("../fonts/alenbi-sans-300.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Alenbi Sans";
	src: url("../fonts/alenbi-sans-400.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Alenbi Sans";
	src: url("../fonts/alenbi-sans-700.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   נעם לישראל — מיניסייט
   העיצוב שורטט על קנבס 1920x10904. היחידה --u היא "פיקסל עיצוב" אחד,
   כך שכל המידות כאן זהות למידות שנמדדו במוקאפ, והפריסה מתכווצת עם החלון.
   ========================================================================== */

:root {
	--u: calc(min(100vw, 1920px) / 1920);

	--navy-900: #0e2c4a;
	--navy-800: #13375a;
	--navy-700: #1d4570;
	--ink: #1d3a5f;
	--gold: #f5c157;
	--sky: #2bb5f0;
	--sky-tab: #4aa8d8;
	--sky-plate: #46abd8;
	--sky-num: #3f9fd0;
	--paper: #fff;
	--panel: #ecf9ff;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	margin: 0;
	direction: rtl;
	font-family: "Alenbi Sans", "Arial Hebrew", Arial, sans-serif;
	color: var(--ink);
	background: var(--paper);
	/* clip ולא hidden: hidden הופך את body לקונטיינר גלילה ושובר
	   את position:sticky של סרגל הניווט */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

.gold {
	color: var(--gold);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   סרגל ניווט — 0..128
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--paper);
	transition: box-shadow 260ms ease;
}

/* הצל עולה רק אחרי שהגלילה התחילה, כדי שבראש העמוד הסרגל יישאר שטוח */
.site-header.is-stuck {
	box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(6, 18, 32, 0.13);
}

.header-inner {
	position: relative;
	height: calc(128 * var(--u));
}

/* הלוגו ממורכז אנכית בסרגל, עם אותו מרווח מהקצה כמו כפתור ההצטרפות משמאל */
.logo {
	position: absolute;
	top: calc(19 * var(--u));
	right: calc(51 * var(--u));
}

.logo img {
	width: calc(292 * var(--u));
	height: auto;
}

/* שורת התפריט נצמדת לקצה השמאלי (55) ונפרסת ימינה:
   הצטרפות · אודות · הנבחרת — בדיוק כמו במוקאפ */
.main-nav {
	position: absolute;
	top: 0;
	left: calc(55 * var(--u));
	height: 100%;
	padding-top: calc(15 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(54 * var(--u));
	font-size: calc(29 * var(--u));
	font-weight: 400;
}

.main-nav a:not(.btn-join) {
	transition: color 0.2s;
}

.main-nav a:not(.btn-join):hover {
	color: var(--sky);
}

.btn-join {
	margin-right: calc(-12 * var(--u));
	width: calc(176 * var(--u));
	height: calc(44 * var(--u));
	background: var(--sky);
	color: var(--paper);
	font-size: calc(24 * var(--u));
	font-weight: 700;
	border-radius: calc(8 * var(--u));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(12 * var(--u));
	transition: background 0.2s;
}

.btn-join:hover {
	background: #17a3e0;
}

.nav-toggle {
	display: none;
}

/* --------------------------------------------------------------------------
   גיבור — 128..1076
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	direction: ltr;
	height: calc(948 * var(--u));
	overflow: hidden;
	background-color: #0b2340;
}

/* הסרטון ממלא את המקטע ונחתך משני הצדדים לפי יחס המסך */
.hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

/* הצללה מעל הסרטון: מכהה את התחתית ואת הצד הימני, כדי שרצועות הזהב
   יישארו קריאות בכל פריים ולא יתחרו בתנועה שמאחוריהן */
.hero-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(to top, rgba(3, 20, 40, 0.9) 0%, rgba(3, 20, 40, 0.32) 22%, rgba(3, 20, 40, 0) 48%),
		linear-gradient(to left, rgba(3, 22, 48, 0.42), rgba(3, 22, 48, 0.04) 55%);
}

.hero-title {
	margin: 0;
	direction: rtl;
}

/* רצועת הכותרת: מקבילית אחת שיושבת על תחתית הסרטון וגולשת מעבר לשני
   הצדדים, כך שהיא נקראת כפס שנמתח לרוחב הפריים. */
.hero-line {
	position: absolute;
	z-index: 3;
	left: calc(-40 * var(--u));
	right: calc(-40 * var(--u));
	bottom: calc(54 * var(--u));
	height: calc(150 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: calc(8 * var(--u));
	color: var(--ink);
	font-size: calc(132 * var(--u));
	font-weight: 700;
	line-height: 1;
	transform: rotate(-1.4deg);
}

.hero-line::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gold);
	transform: skewX(-4deg);
	box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(6, 18, 32, 0.4);
}

.hero-line > span {
	position: relative;
}

/* הרצועה נכנסת מלמטה ואז ממשיכה לנשום בלופ, כדי שהכותרת לא תקפא */
.hero.is-inview .hero-line {
	animation:
		hero-line-in 760ms cubic-bezier(0.14, 0.9, 0.24, 1) 120ms backwards,
		hero-line-breathe 5s ease-in-out 900ms infinite;
}

/* הכיתוב עצמו נכנס אחרי הרצועה, אות אחרי אות של תנופה */
.hero.is-inview .hero-line > span {
	animation:
		hero-text-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 420ms backwards,
		hero-text-loop 6s ease-in-out 1120ms infinite;
}

/* הכיתוב לא נעצר אחרי הכניסה — נדנוד רך ומתמשך בתוך הרצועה */
@keyframes hero-text-loop {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	25% {
		transform: translate(calc(-9 * var(--u)), calc(-4 * var(--u))) scale(1.014);
	}
	50% {
		transform: translate(0, calc(3 * var(--u))) scale(0.994);
	}
	75% {
		transform: translate(calc(9 * var(--u)), calc(-4 * var(--u))) scale(1.014);
	}
}

@keyframes hero-line-in {
	from {
		opacity: 0;
		transform: rotate(-1.4deg) translateY(calc(150 * var(--u))) scaleX(0.86);
	}
	to {
		opacity: 1;
		transform: rotate(-1.4deg) translateY(0) scaleX(1);
	}
}

@keyframes hero-line-breathe {
	0%, 100% {
		transform: rotate(-1.4deg) translateY(0) scale(1);
	}
	50% {
		transform: rotate(-1deg) translateY(calc(-6 * var(--u))) scale(1.012);
	}
}

@keyframes hero-text-in {
	from {
		opacity: 0;
		transform: translateY(calc(34 * var(--u))) scale(0.9);
		letter-spacing: calc(10 * var(--u));
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		letter-spacing: 0;
	}
}

/* --------------------------------------------------------------------------
   כניסת כותרות — כל כותרת נכנסת בתנופה משלה כשהמקטע מגיע למסך
   -------------------------------------------------------------------------- */

.head-in {
	opacity: 0;
	transform: translateY(calc(26 * var(--u))) scale(0.94);
}

.head-in.is-in {
	animation: head-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--head-delay, 0ms) forwards;
}

@keyframes head-rise {
	from {
		opacity: 0;
		transform: translateY(calc(26 * var(--u))) scale(0.94);
	}
	60% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* הלשוניות והמספרים נכנסים מהצד, בכיוון הקריאה */
.plank-tab.head-in,
.why-card-head.head-in {
	transform: translateX(calc(60 * var(--u))) rotate(-6deg);
}

.plank-tab.head-in.is-in {
	animation: tab-swing 820ms cubic-bezier(0.2, 1.3, 0.35, 1) var(--head-delay, 0ms) forwards;
}

.why-card-head.head-in.is-in {
	animation: head-swing 820ms cubic-bezier(0.2, 1.3, 0.35, 1) var(--head-delay, 0ms) forwards;
}

@keyframes tab-swing {
	from {
		opacity: 0;
		transform: translateX(calc(70 * var(--u))) rotate(2deg);
	}
	to {
		opacity: 1;
		transform: translateX(0) rotate(5.8deg);
	}
}

@keyframes head-swing {
	from {
		opacity: 0;
		transform: translateX(calc(70 * var(--u))) rotate(-9deg);
	}
	to {
		opacity: 1;
		transform: translateX(0) rotate(-3.4deg);
	}
}

.why-num.head-in.is-in {
	animation: num-pop 700ms cubic-bezier(0.2, 1.5, 0.4, 1) var(--head-delay, 0ms) forwards;
}

@keyframes num-pop {
	from {
		opacity: 0;
		transform: scale(0.5);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* --------------------------------------------------------------------------
   תנועה מתמשכת — אלמנטים שממשיכים לחיות גם אחרי שנחתו
   -------------------------------------------------------------------------- */

/* פס הזהב האלכסוני בכרטיסי המצע זוחל לאורך האלכסון */
.plank-slash {
	animation: slash-glide 7s ease-in-out infinite;
}

@keyframes slash-glide {
	0%, 100% {
		transform: skewX(-25.7deg) translateX(0);
	}
	50% {
		transform: skewX(-25.7deg) translateX(calc(14 * var(--u)));
	}
}

/* הלשונית מתנדנדת קלות, כמו שלט תלוי */
.plank:hover .plank-tab {
	transform: rotate(4.4deg) translateY(calc(-4 * var(--u)));
}

.plank-tab {
	transition: transform 320ms cubic-bezier(0.2, 1.2, 0.4, 1);
}

/* התצלום בכרטיס המצע נושם פנימה והחוצה */
.plank-media img {
	animation: media-drift 14s ease-in-out infinite;
}

@keyframes media-drift {
	0%, 100% {
		transform: scale(1.04);
	}
	50% {
		transform: scale(1.11);
	}
}

/* כרטיסי "למה דווקא" מתרוממים במגע */
.why-card {
	transition:
		transform 340ms cubic-bezier(0.2, 1, 0.3, 1),
		box-shadow 340ms ease;
}

.why-card:hover {
	transform: translateY(calc(-10 * var(--u)));
	box-shadow: calc(-10 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)) rgba(9, 24, 41, 0.42);
}

/* המספר הגדול פועם ברקע הכרטיס */
.why-num {
	animation: num-glow 3.8s ease-in-out infinite;
}

@keyframes num-glow {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.72;
		transform: scale(1.07);
	}
}

/* כרטיסי הרשימה: התצלום מתקרב והלוחית נדלקת */
.member {
	transition: transform 340ms cubic-bezier(0.2, 1, 0.3, 1);
}

/* הגדילה יוצאת מהבסיס, כדי שהתמונה תיפתח כלפי מעלה ולא תיכנס
   אל תוך לוחית השם שמתחתיה */
.member img {
	position: relative;
	z-index: 0;
	transform-origin: bottom center;
	transition: transform 520ms cubic-bezier(0.2, 1, 0.3, 1);
}

.member:hover {
	transform: translateY(calc(-8 * var(--u)));
}

.member:hover img {
	transform: scale(1.06);
}

.member-plate {
	position: relative;
	z-index: 1;
	transition: background 320ms ease;
}

.member:hover .member-plate {
	background: var(--sky);
}

/* פס הזהב שבין הביוגרפיה לתצלום מרצד לאורך הכרטיס */
.leader::after {
	animation: gold-run 6s ease-in-out infinite;
}

@keyframes gold-run {
	0%, 100% {
		opacity: 1;
		transform: scaleY(1);
	}
	50% {
		opacity: 0.78;
		transform: scaleY(0.965);
	}
}

/* הלוגו מגיב למגע */
.logo img {
	transition: transform 300ms cubic-bezier(0.2, 1.3, 0.4, 1);
}

.logo:hover img {
	transform: scale(1.045);
}

/* קישורי התפריט מקבלים קו תחתון שנפתח מהמרכז */
.main-nav a:not(.btn-join) {
	position: relative;
}

.main-nav a:not(.btn-join)::after {
	content: "";
	position: absolute;
	right: 50%;
	left: 50%;
	bottom: calc(-8 * var(--u));
	height: calc(3 * var(--u));
	background: var(--sky);
	transition: right 260ms ease, left 260ms ease;
}

.main-nav a:not(.btn-join):hover::after {
	right: 0;
	left: 0;
}

/* החץ בכפתור ההצטרפות זוחל שמאלה שוב ושוב */
.btn-join span {
	display: inline-block;
	animation: arrow-nudge 1.9s ease-in-out infinite;
}

@keyframes arrow-nudge {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(calc(-7 * var(--u)));
	}
}

/* הקלפי מתנדנדת קלות, כאילו מישהו בדיוק הניח אותה */
.join-box {
	animation: box-settle 6.5s ease-in-out infinite;
	transform-origin: 50% 100%;
}

@keyframes box-settle {
	0%, 100% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-0.7deg);
	}
}

/* --------------------------------------------------------------------------
   כניסה בגלילה — כל מקטע נחשף כשהוא מגיע למסך
   -------------------------------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(calc(38 * var(--u)));
	transition:
		opacity 700ms ease,
		transform 700ms cubic-bezier(0.22, 0.75, 0.3, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* פריטים באותה קבוצה נחשפים במדורג, כדי שהשורה תיקרא כרצף ולא כקפיצה */
.reveal[data-reveal-step="1"] {
	transition-delay: 90ms;
}

.reveal[data-reveal-step="2"] {
	transition-delay: 180ms;
}

.reveal[data-reveal-step="3"] {
	transition-delay: 270ms;
}

.reveal[data-reveal-step="4"] {
	transition-delay: 360ms;
}

/* מי שביקש פחות תנועה מקבל את העמוד בשלמותו, בלי אנימציות */
@media (prefers-reduced-motion: reduce) {
	.hero.is-inview .hero-line {
		animation: none;
	}

	.reveal,
	.reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.join-submit,
	.join-submit::after,
	.join-banner,
	.hero.is-inview .hero-line,
	.hero.is-inview .hero-line > span {
		animation: none;
	}

	.head-in,
	.head-in.is-in {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.plank-slash,
	.plank-media img,
	.why-num,
	.leader::after,
	.btn-join span,
	.join-box {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   פתיח — 1076..1913
   -------------------------------------------------------------------------- */

.intro {
	padding: calc(149 * var(--u)) 0 calc(188 * var(--u));
	text-align: center;
}

.intro-heading {
	width: calc(1278 * var(--u));
	margin-inline: auto;
	border-top: calc(7 * var(--u)) solid var(--ink);
	border-bottom: calc(7 * var(--u)) solid var(--ink);
	padding: calc(29 * var(--u)) 0 calc(31 * var(--u));
}

.intro-heading h2,
.intro-heading p {
	margin: 0;
	font-size: calc(96 * var(--u));
	font-weight: 700;
	line-height: 0.9;
}

.intro-body {
	width: calc(1370 * var(--u));
	margin: calc(72 * var(--u)) auto 0;
	font-size: calc(25 * var(--u));
	line-height: 1.55;
}

.intro-body p {
	margin: 0 0 calc(26 * var(--u));
}

.intro-body p:last-child {
	margin-bottom: 0;
}

.intro-body .strong {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   המצע — 1913..4395
   -------------------------------------------------------------------------- */

.platform {
	background:
		linear-gradient(180deg, rgba(16, 44, 74, 0.95), rgba(16, 44, 74, 0.95)),
		url("../img/flag.jpg") center / cover no-repeat;
	padding: calc(257 * var(--u)) 0 calc(314 * var(--u));
}

.platform .wrap {
	width: calc(1597 * var(--u));
	margin-right: calc(150 * var(--u));
	margin-left: auto;
}

.plank {
	position: relative;
	height: calc(471 * var(--u));
	margin-bottom: calc(251 * var(--u));
	background: linear-gradient(-90deg, #eef5f8 0%, #e9f2f6 55%, #dde9ef 100%);
	box-shadow: calc(-10 * var(--u)) calc(14 * var(--u)) calc(30 * var(--u)) rgba(5, 15, 28, 0.45);
}

/* התצלום חוזר כסימן מים חיוור על כל שטח הכרטיס */
.plank-wash {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.12;
}

.plank:last-child {
	margin-bottom: 0;
}

/* התצלום נחתך באלכסון: הקצה הימני נע מ-484 בראש ל-257 בתחתית */
.plank-media {
	position: absolute;
	top: 0;
	bottom: 0;
	right: auto;
	left: 0;
	width: calc(500 * var(--u));
	clip-path: polygon(0 0, calc(484 * var(--u)) 0, calc(257 * var(--u)) 100%, 0 100%);
}

.plank-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* פס הזהב שרץ לאורך אותו אלכסון */
.plank-slash {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(357 * var(--u));
	width: calc(40 * var(--u));
	background: var(--gold);
	transform: skewX(-25.7deg);
}

.plank-list {
	position: relative;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: calc(128 * var(--u)) calc(90 * var(--u)) calc(56 * var(--u)) calc(120 * var(--u));
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(11 * var(--u));
	font-size: calc(32 * var(--u));
	line-height: 1.35;
	text-align: right;
}

.plank-list li {
	position: relative;
}

.plank-list strong {
	font-weight: 700;
}

.plank-tab {
	position: absolute;
	top: calc(-20 * var(--u));
	right: calc(80 * var(--u));
	z-index: 3;
	background: var(--sky-tab);
	color: var(--paper);
	font-size: calc(44 * var(--u));
	font-weight: 700;
	white-space: nowrap;
	padding: calc(22 * var(--u)) calc(75 * var(--u)) calc(26 * var(--u));
	transform: rotate(5.8deg);
	box-shadow: calc(-4 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)) rgba(5, 15, 28, 0.35);
}

/* --------------------------------------------------------------------------
   כותרות מקטע
   -------------------------------------------------------------------------- */

.section-title {
	margin: 0 auto;
	text-align: center;
	font-size: calc(95 * var(--u));
	font-weight: 700;
	line-height: 0.92;
	color: var(--ink);
}

.section-title span {
	display: block;
}

.section-title.framed {
	width: calc(828 * var(--u));
	border-top: calc(7 * var(--u)) solid var(--paper);
	border-bottom: calc(7 * var(--u)) solid var(--paper);
	padding: calc(40 * var(--u)) 0 calc(24 * var(--u));
	color: var(--paper);
}

/* --------------------------------------------------------------------------
   למה דווקא נעם לישראל — 4395..6345
   -------------------------------------------------------------------------- */

.why {
	padding: calc(233 * var(--u)) 0 calc(340 * var(--u));
	background: var(--paper);
}

.why .wrap {
	width: calc(1600 * var(--u));
	margin-right: calc(166 * var(--u));
	margin-left: auto;
}

.why-grid {
	margin-top: calc(222 * var(--u));
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: calc(384 * var(--u)) calc(400 * var(--u));
	column-gap: calc(86 * var(--u));
	row-gap: calc(192 * var(--u));
}

.why-card {
	position: relative;
	border-radius: calc(16 * var(--u));
	padding: calc(96 * var(--u)) calc(37 * var(--u)) calc(46 * var(--u));
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--paper);
	text-align: center;
	background:
		linear-gradient(150deg, rgba(32, 66, 104, 0.94), rgba(14, 36, 60, 0.97)),
		url("../img/flag.jpg") center / cover no-repeat;
	box-shadow: calc(-8 * var(--u)) calc(12 * var(--u)) calc(26 * var(--u)) rgba(9, 24, 41, 0.3);
}

.why-card p {
	margin: 0;
	font-size: calc(30 * var(--u));
	line-height: 1.1;
}

/* הרצועה התכולה יושבת מעל הכרטיס, צמודה לקצה הימני שלו */
.why-card-head {
	position: absolute;
	top: calc(-38 * var(--u));
	right: calc(-4 * var(--u));
	background: var(--sky-tab);
	padding: calc(10 * var(--u)) calc(34 * var(--u)) calc(16 * var(--u));
	transform: rotate(-3.4deg);
	box-shadow: calc(-4 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)) rgba(9, 24, 41, 0.25);
}

.why-card-head h3 {
	margin: 0;
	font-size: calc(38 * var(--u));
	font-weight: 700;
	white-space: nowrap;
	color: var(--paper);
}

.why-card-head h3 .lead {
	color: var(--gold);
}

.why-num {
	position: absolute;
	top: calc(-62 * var(--u));
	right: calc(8 * var(--u));
	font-size: calc(44 * var(--u));
	font-weight: 700;
	color: var(--sky-num);
	direction: ltr;
}

/* --------------------------------------------------------------------------
   הנבחרת — 6345..10015
   -------------------------------------------------------------------------- */

.team {
	padding: calc(174 * var(--u)) 0 calc(186 * var(--u));
	background:
		linear-gradient(180deg, rgba(16, 44, 74, 0.95), rgba(16, 44, 74, 0.95)),
		url("../img/flag.jpg") center / cover no-repeat;
}

.team .wrap {
	width: calc(1600 * var(--u));
	margin-right: calc(164 * var(--u));
	margin-left: auto;
}

/* כרטיס היו"ר: ביוגרפיה משמאל, תצלום מימין, פס זהב ביניהם */
.leader {
	position: relative;
	display: grid;
	/* התצלום הוא שקובע את גובה הכרטיס, ולכן עמודה צרה יותר מקצרת אותו
	   בלי לחתוך ולו פיקסל מהתמונה. */
	grid-template-columns: calc(470 * var(--u)) 1fr;
	margin-top: calc(154 * var(--u));
	background: var(--panel);
	box-shadow: calc(-10 * var(--u)) calc(14 * var(--u)) calc(30 * var(--u)) rgba(5, 15, 28, 0.4);
}

.leader-bio {
	grid-area: 1 / 2;
	display: flex;
	align-items: center;
	padding: calc(52 * var(--u)) calc(56 * var(--u));
}

.leader-bio ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* קטן דיו שכל כרטיס ייכנס לגובה מסך אחד, בלי גלילה בתוך הכרטיס */
	font-size: calc(23 * var(--u));
	line-height: 1.5;
	text-align: right;
}

.leader-bio li {
	margin-bottom: 0;
}

/* רווח פסקה אחרי הסעיף שמסומן ב-has-gap */
.leader-bio li.has-gap {
	margin-bottom: calc(44 * var(--u));
}

.leader-bio strong {
	font-weight: 700;
}

.leader-card {
	position: relative;
	grid-area: 1 / 1;
	overflow: hidden;
}

/* פס הזהב יושב על גבול העמודות, בצד הכרטיס ולא בתוך עמודת התצלום */
.leader::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	right: calc(470 * var(--u));
	width: calc(15 * var(--u));
	background: var(--gold);
}

.leader-card {
	background: var(--panel);
}

.leader-card {
	display: flex;
	flex-direction: column;
}

/* התצלום נשמר בפרופורציה הטבעית שלו ולעולם אינו נחתך. כשהביוגרפיה גבוהה
   ממנו, margin-top:auto מצמיד אותו לתחתית העמודה ליד לוחית השם. */
.leader-card img {
	flex: none;
	margin-top: auto;
	width: 100%;
	height: auto;
	display: block;
}

.leader-plate {
	position: relative;
	z-index: 1;
	flex: none;
	background: var(--sky-plate);
	color: var(--paper);
	padding: calc(20 * var(--u)) calc(38 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u));
	display: flex;
	flex-direction: column;
	text-align: right;
}

.leader-plate h3 {
	margin: 0;
	font-size: calc(37 * var(--u));
	font-weight: 700;
	line-height: 1;
}

.leader-role {
	margin: 0;
	font-size: calc(28 * var(--u));
	font-weight: 700;
	color: var(--gold);
	line-height: 1.3;
	white-space: nowrap;
}

.leader-family {
	margin: 0;
	font-size: calc(19 * var(--u));
	line-height: 1.9;
}

/* רשת חברי הרשימה */
.member-grid {
	margin-top: calc(133 * var(--u));
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: calc(32 * var(--u));
}

.member {
	position: relative;
	background: var(--panel);
	overflow: hidden;
}

.member img {
	/* המסגרת נגזרת מיחס הצלע של התצלומים עצמם, ולכן זהה בכל רוחב מסך
	   ולא חותכת כלום — גם כשהכרטיס נמתח לרוחב מלא במובייל */
	width: 100%;
	aspect-ratio: 0.82;
	height: auto;
	object-fit: cover;
	object-position: top center;
}

.member-plate {
	background: var(--sky-plate);
	color: var(--paper);
	padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
	text-align: right;
}

.member-plate h3 {
	margin: 0;
	font-size: calc(26 * var(--u));
	font-weight: 400;
	line-height: 1.16;
}

.member-plate p {
	margin: calc(2 * var(--u)) 0 0;
	font-size: calc(17 * var(--u));
	font-weight: 700;
	color: var(--gold);
}

/* --------------------------------------------------------------------------
   הצטרפות — 10015..10904
   -------------------------------------------------------------------------- */

.join {
	position: relative;
	background: var(--paper);
	padding: calc(325 * var(--u)) 0 calc(56 * var(--u));
}

/* יעדי העוגנים נעצרים מתחת לסרגל הדביק במקום להיחתך מאחוריו.
   ל-join נדרש מרווח גדול יותר, כי הקלפי גולשת אל מעל גבול המקטע. */
#about,
#team {
	scroll-margin-top: calc(170 * var(--u));
}

#join {
	scroll-margin-top: calc(280 * var(--u));
}

.join .wrap {
	position: relative;
	width: calc(1653 * var(--u));
	margin-right: calc(122 * var(--u));
	margin-left: auto;
	text-align: right;
}

/* הקלפי גולשת אל תוך המקטע הכהה שמעליה.
   הפתק שוכב מאחורי התיבה, כך שבגלילה הוא נבלע מתחת למכסה. */
.join-art {
	position: absolute;
	left: calc(-27 * var(--u));
	top: calc(-440 * var(--u));
	width: calc(394 * var(--u));
	height: calc(739 * var(--u));
}

.join-box {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	width: 100%;
}

/* חלון חיתוך שנגמר בדיוק בקו החריץ. הפתק מעל התיבה, כך
   שבגלילה הוא יורד על המכסה ונבלע בדיוק בפתח ולא מאחוריו. */
.join-slot {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	top: 0;
	height: calc(398 * var(--u));
	overflow: hidden;
}

.join-slip {
	position: absolute;
	left: calc(110 * var(--u));
	top: 0;
	width: calc(255 * var(--u));
	filter: drop-shadow(calc(-7 * var(--u)) calc(9 * var(--u)) calc(15 * var(--u)) rgba(9, 24, 41, 0.28));
	transform-origin: 50% 100%;
	transform:
		translate(
			calc(var(--slip, 0) * -22 * var(--u)),
			calc(var(--slip, 0) * 249 * var(--u))
		)
		rotate(calc(var(--slip, 0) * -6deg));
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.join-slip {
		transform: none;
	}
}

.join-banner {
	display: inline-block;
	position: relative;
	width: calc(1157 * var(--u));
	margin: 0 calc(-46 * var(--u)) 0 0;
	padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(34 * var(--u));
	color: var(--ink);
	font-size: calc(140 * var(--u));
	font-weight: 700;
	line-height: 1;
	transform: rotate(1.15deg);
}

.join-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gold);
	transform: skewX(-5.35deg);
	box-shadow: calc(-8 * var(--u)) calc(12 * var(--u)) calc(22 * var(--u)) rgba(9, 24, 41, 0.28);
}

.join-banner > span {
	position: relative;
	display: inline-block;
}

/* כניסת ההכרזה: פס הזהב נפרש מימין לשמאל, הטקסט נוחת אחריו, והכל נחתם
   בהלימה קצרה. זה המשפט המרכזי של העמוד, ולכן הכניסה שלו נחרצת. */
.join-banner.reveal {
	opacity: 1;
	transform: rotate(1.15deg);
	transition: none;
}

.join-banner.reveal::before {
	transform: skewX(-5.35deg) scaleX(0);
	transform-origin: right center;
}

.join-banner.reveal > span {
	opacity: 0;
}

.join-banner.reveal.is-visible {
	animation:
		banner-punch 640ms cubic-bezier(0.3, 1.5, 0.5, 1) 200ms,
		banner-breathe 4.4s ease-in-out 900ms infinite;
}

.join-banner.reveal.is-visible::before {
	animation: banner-sweep 600ms cubic-bezier(0.2, 0.92, 0.24, 1) forwards;
}

.join-banner.reveal.is-visible > span {
	animation: banner-text 540ms cubic-bezier(0.16, 1, 0.3, 1) 280ms forwards;
}

@keyframes banner-sweep {
	from {
		transform: skewX(-5.35deg) scaleX(0);
	}
	to {
		transform: skewX(-5.35deg) scaleX(1);
	}
}

@keyframes banner-text {
	from {
		opacity: 0;
		transform: translateX(calc(60 * var(--u))) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes banner-breathe {
	0%, 100% {
		transform: rotate(1.15deg) scale(1);
	}
	50% {
		transform: rotate(1.55deg) scale(1.022);
	}
}

@keyframes banner-punch {
	0% {
		transform: rotate(1.15deg) scale(1);
	}
	45% {
		transform: rotate(1.15deg) scale(1.05);
	}
	100% {
		transform: rotate(1.15deg) scale(1);
	}
}

.join-title {
	margin: calc(72 * var(--u)) 0 calc(50 * var(--u));
	font-size: calc(95 * var(--u));
	font-weight: 700;
	line-height: 1;
	text-align: right;
}

.join-form {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(42 * var(--u));
}

.join-field {
	display: block;
}

/* שדות פתוחים במסגרת כחולה — קורא כ"יש למלא כאן", לא כתווית סגורה */
.join-form input {
	width: 100%;
	height: calc(61 * var(--u));
	border: calc(2 * var(--u)) solid var(--sky);
	border-radius: calc(6 * var(--u));
	background: var(--paper);
	color: var(--ink);
	font-family: inherit;
	font-size: calc(22 * var(--u));
	font-weight: 500;
	text-align: right;
	padding: 0 calc(24 * var(--u));
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.join-form input::placeholder {
	color: rgba(29, 58, 95, 0.6);
	opacity: 1;
}

.join-form input:focus {
	outline: none;
	border-color: var(--navy-700);
	box-shadow: 0 0 0 calc(4 * var(--u)) rgba(43, 181, 240, 0.22);
}


/* הכפתור הוא הפעולה: כחול מלא, פועם קלות במנוחה ומתרומם במגע */
.join-submit {
	position: relative;
	overflow: hidden;
	height: calc(61 * var(--u));
	border: 0;
	border-radius: calc(6 * var(--u));
	background: #1e3a5f;
	color: var(--paper);
	font-family: inherit;
	font-size: calc(23 * var(--u));
	font-weight: 700;
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	animation: cta-pulse 2.6s ease-in-out infinite;
}

/* ניצוץ שחולף על הכפתור ומושך אליו את העין */
.join-submit::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 42%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: cta-sheen 3.6s ease-in-out infinite;
}

@keyframes cta-pulse {
	0%, 100% {
		box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(30, 58, 95, 0.3);
	}
	50% {
		box-shadow: 0 calc(9 * var(--u)) calc(24 * var(--u)) rgba(30, 58, 95, 0.5);
	}
}

@keyframes cta-sheen {
	0%, 64% {
		transform: translateX(-170%);
	}
	100% {
		transform: translateX(330%);
	}
}

.join-submit:hover {
	background: #16293f;
	transform: translateY(calc(-3 * var(--u)));
	box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(30, 58, 95, 0.44);
	animation-play-state: paused;
}

.join-submit:active {
	transform: translateY(0);
}

.join-message {
	margin: calc(18 * var(--u)) 0 0;
	min-height: calc(28 * var(--u));
	font-size: calc(20 * var(--u));
	font-weight: 700;
	text-align: right;
}

/* כל עוד אין הודעה אין מה לשמור לה מקום — אחרת נותר ריק בתחתית העמוד */
.join-message:empty {
	margin: 0;
	min-height: 0;
}

.join-message.is-error {
	color: #c0392b;
}

.join-message.is-ok {
	color: #1e7a48;
}

/* המוקאפ מסתיים בטופס — הקרדיט נשאר לקוראי מסך בלבד */
.site-footer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   מסכים צרים
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	:root {
		--u: calc(100vw / 430);
	}

	.platform .wrap,
	.why .wrap,
	.team .wrap,
	.join .wrap {
		width: auto;
		margin-inline: 0;
		padding-inline: calc(20 * var(--u));
	}

	.header-inner {
		height: calc(64 * var(--u));
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-inline: calc(20 * var(--u));
	}

	.logo {
		position: static;
	}

	.logo img {
		width: calc(150 * var(--u));
	}

	.nav-toggle {
		display: block;
		width: calc(34 * var(--u));
		height: calc(26 * var(--u));
		border: 0;
		background: transparent;
		position: relative;
		cursor: pointer;
		order: -1;
	}

	.nav-toggle-bar,
	.nav-toggle-bar::before,
	.nav-toggle-bar::after {
		position: absolute;
		left: 0;
		right: 0;
		height: calc(3 * var(--u));
		background: var(--ink);
		border-radius: 2px;
		transition:
			transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1),
			background-color 160ms ease;
	}

	/* פתוח: הפס האמצעי נעלם, והחיצוניים נפגשים במרכז ומצטלבים ל-X */
	.nav-toggle[aria-expanded="true"] .nav-toggle-bar {
		background-color: transparent;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before {
		transform: translateY(calc(9 * var(--u))) rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after {
		transform: translateY(calc(-9 * var(--u))) rotate(-45deg);
	}

	.nav-toggle-bar {
		top: calc(12 * var(--u));
	}

	.nav-toggle-bar::before {
		content: "";
		top: calc(-9 * var(--u));
	}

	.nav-toggle-bar::after {
		content: "";
		top: calc(9 * var(--u));
	}

	.main-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--paper);
		box-shadow: 0 10px 24px rgba(9, 24, 41, 0.14);
		font-size: calc(17 * var(--u));
		pointer-events: auto;
		/* נפתח בהחלקה ולא בקפיצה. display לא ניתן להנפשה, ולכן הסתרה
		   דרך max-height ו-visibility, שגם משאירה את התפריט מחוץ למיקוד
		   ומחוץ לקוראי מסך כשהוא סגור. */
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		transition:
			max-height 320ms cubic-bezier(0.3, 0, 0.2, 1),
			opacity 180ms ease,
			visibility 0s linear 320ms;
	}

	.main-nav.is-open {
		max-height: calc(400 * var(--u));
		opacity: 1;
		visibility: visible;
		transition:
			max-height 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
			opacity 200ms ease,
			visibility 0s;
	}

	.main-nav a {
		padding: calc(14 * var(--u)) calc(20 * var(--u));
		border-bottom: 1px solid #e6eef5;
	}

	/* מיושר לימין ככל שאר פריטי התפריט, ולא ממורכז כמו בגרסת הכפתור */
	.btn-join {
		margin-right: 0;
		width: auto;
		height: auto;
		border-radius: 0;
		justify-content: flex-start;
	}

	.hero {
		height: calc(400 * var(--u));
	}

	.hero-line {
		justify-content: center;
		left: calc(-14 * var(--u));
		right: calc(-14 * var(--u));
		bottom: calc(26 * var(--u));
		height: calc(62 * var(--u));
		font-size: calc(46 * var(--u));
	}

	.intro {
		padding: calc(58 * var(--u)) calc(18 * var(--u)) calc(52 * var(--u));
	}

	.intro-heading {
		width: auto;
		border-width: calc(3 * var(--u));
		padding: calc(16 * var(--u)) 0 calc(14 * var(--u));
	}

	.intro-heading h2,
	.intro-heading p {
		font-size: calc(38 * var(--u));
		line-height: 1.12;
	}

	.intro-body {
		width: auto;
		font-size: calc(18 * var(--u));
		margin-top: calc(26 * var(--u));
	}

	.platform {
		padding: calc(70 * var(--u)) 0 calc(60 * var(--u));
	}

	.plank {
		height: auto;
		margin-bottom: calc(80 * var(--u));
	}

	.plank-media {
		position: static;
		width: auto;
		height: calc(170 * var(--u));
		clip-path: none;
	}

	.plank-slash {
		display: none;
	}

	.plank-list {
		height: auto;
		padding: calc(28 * var(--u)) calc(22 * var(--u));
		font-size: calc(15 * var(--u));
		gap: calc(14 * var(--u));
	}

	.plank-list li {
		padding-right: calc(26 * var(--u));
	}

	.plank-list li::before {
		width: calc(16 * var(--u));
		height: calc(16 * var(--u));
		top: calc(3 * var(--u));
	}

	.plank-tab {
		top: calc(-24 * var(--u));
		right: calc(24 * var(--u));
		font-size: calc(18 * var(--u));
		padding: calc(7 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
	}

	.section-title {
		font-size: calc(40 * var(--u));
		line-height: 1.12;
	}

	.section-title.framed {
		width: auto;
		border-width: calc(3 * var(--u));
		padding: calc(14 * var(--u)) 0 calc(12 * var(--u));
	}

	.why {
		padding: calc(60 * var(--u)) 0;
	}

	.why-grid {
		grid-template-columns: 1fr;
		/* בלי האיפוס הזה גבהי השורות של הדסקטופ נשארים, והכרטיסים
		   הראשונים נמתחים סביב טקסט קצר */
		grid-template-rows: auto;
		margin-top: calc(80 * var(--u));
		row-gap: calc(80 * var(--u));
	}

	.why-card {
		padding: calc(50 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u));
	}

	.why-card p {
		font-size: calc(15 * var(--u));
	}

	.why-card-head {
		top: calc(-18 * var(--u));
		padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(9 * var(--u));
	}

	.why-card-head h3 {
		font-size: calc(19 * var(--u));
	}

	.why-num {
		top: calc(-34 * var(--u));
		font-size: calc(24 * var(--u));
	}

	.team {
		padding: calc(60 * var(--u)) 0;
	}

	.leader {
		grid-template-columns: 1fr;
		/* כנ"ל: שורת הדסקטופ הותירה כאן ריק גדול מתחת לתצלום */
		grid-template-rows: auto;
		height: auto;
		margin-top: calc(46 * var(--u));
	}

	.leader::after {
		display: none;
	}

	/* במובייל התצלום מוצג במלואו: הכרטיס והתמונה זורמים לפי היחס
	   הטבעי, והלוחית יורדת מתחת במקום לרחף מעליו ולחתוך אותו. */
	.leader-card {
		grid-area: 1 / 1;
		height: auto;
	}

	.leader-card img {
		position: static;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.leader-card::after {
		display: none;
	}

	.leader-bio {
		grid-area: 2 / 1;
		padding: calc(24 * var(--u)) calc(22 * var(--u));
	}

	.leader-bio ul {
		font-size: calc(14 * var(--u));
	}

	.leader-plate {
		position: static;
		height: auto;
		padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
	}

	.leader-plate h3 {
		font-size: calc(24 * var(--u));
	}

	.leader-role {
		font-size: calc(14 * var(--u));
	}

	.leader-family {
		font-size: calc(13 * var(--u));
	}

	.member-grid {
		margin-top: calc(46 * var(--u));
		grid-template-columns: repeat(3, 1fr);
		column-gap: calc(10 * var(--u));
	}

	.member {
		height: auto;
	}

	/* היחס נשמר מהדסקטופ — התמונה לעולם לא נחתכת */
	.member img {
		height: auto;
	}

	.member-plate {
		height: auto;
		padding: calc(8 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u));
	}

	.member-plate h3 {
		font-size: calc(13 * var(--u));
		line-height: 1.2;
	}

	.member-plate p {
		font-size: calc(10 * var(--u));
	}

	.join {
		padding: calc(50 * var(--u)) 0 calc(26 * var(--u));
	}

	/* הקלפי הוגדלה בכשליש ומורכזת — במידות הקודמות היא נצמדה לימין
	   ונקראה כתמונה אבודה במקום כמוקד המקטע */
	.join-art {
		position: relative;
		left: auto;
		top: auto;
		width: calc(216 * var(--u));
		height: calc(405 * var(--u));
		margin-inline: auto;
		margin-bottom: calc(24 * var(--u));
	}

	.join-slot {
		height: calc(216 * var(--u));
	}

	.join-slip {
		left: calc(62 * var(--u));
		width: calc(140 * var(--u));
		transform:
			translate(
				calc(var(--slip, 0) * -12 * var(--u)),
				calc(var(--slip, 0) * 136 * var(--u))
			)
			rotate(calc(var(--slip, 0) * -6deg));
	}

	.join-banner {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0;
		text-align: center;
		font-size: calc(32 * var(--u));
		padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(25 * var(--u));
	}

	.join-title {
		margin: calc(40 * var(--u)) 0 calc(20 * var(--u));
		font-size: calc(44 * var(--u));
	}

	.join-form {
		grid-template-columns: 1fr;
		gap: calc(14 * var(--u));
	}

	.join-form input,
	.join-submit {
		height: calc(48 * var(--u));
		font-size: calc(16 * var(--u));
	}
}