/* =========================================================================
   i-fal base - reset, layout primitives, header, footer, buttons.
   Loaded only on coded templates. Section-specific CSS lives per-section.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
body.ifal-coded {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--c-body);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
}
body.ifal-coded h1, body.ifal-coded h2, body.ifal-coded h3, body.ifal-coded h4 {
	color: var(--c-ink);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-2);
	font-weight: var(--fw-bold);
}
body.ifal-coded a { text-decoration: none; }
a { color: inherit; }   /* low-specificity: links inherit text color but never out-specify component color rules */
/* Scope the generic image reset to CONTENT only - never the header/footer logos.
   :where() zeroes the specificity so ANY component rule (single class) can override
   height/display without fighting the reset (this bit us repeatedly). */
:where(.ifal-main) img { max-width: 100%; height: auto; display: block; }

/* ---- Layout ---- */
.ifal-container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.ifal-container--wide { width: min(var(--container-wide), 100% - 2 * var(--gutter)); }
.ifal-section { padding-block: var(--sp-7); }

/* ---- Buttons ---- */
.ifal-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: .75rem 1.5rem; border-radius: var(--radius-pill);
	font-weight: var(--fw-semibold); font-size: var(--fs-small);
	cursor: pointer; border: 1.5px solid transparent; transition: all .18s ease;
	white-space: nowrap;
}
.ifal-btn--primary { background: var(--c-primary); color: #fff; }
.ifal-btn--primary:hover { background: var(--c-primary-600); }
.ifal-btn--ghost { background: #fff; color: var(--c-ink); border-color: var(--c-border); }
.ifal-btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.ifal-btn--whatsapp { background: #fff; color: var(--c-ink); border-color: var(--c-border); }

/* ---- Header (white pill nav, floats OVER the hero) - exact Figma (node 1:1321) ---- */
.ifal-header {
	position: fixed; top: 16px; left: 0; right: 0; z-index: 200;       /* sticky: always visible, floats over content */
	padding-inline: var(--shell-pad);                                  /* aligns to shared shell grid */
}
/* Anchor targets land below the floating header, with a smooth glide. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.ifal-main [id] { scroll-margin-top: 104px; }
.ifal-header__pill {
	display: flex; align-items: center; justify-content: space-between;
	max-width: var(--shell-max); margin-inline: auto;
	background: #fff;
	border-radius: 24px;                                              /* exact */
	padding: 16px 24px;                                               /* exact */
	box-shadow: 0 9px 32.4px rgba(80, 110, 180, .25);                /* exact */
}
.ifal-header__group { display: flex; align-items: center; gap: clamp(16px, 2.08vw, 40px); }  /* 40 @1920, tightens on narrower screens */

.ifal-header__logo-img { height: 24px; width: auto; }                 /* exact 24px */

.ifal-header__menu { display: flex; align-items: center; gap: clamp(14px, 1.82vw, 35px); }  /* 35 @1920 */
.ifal-header__menu-list { display: flex; align-items: center; gap: clamp(14px, 1.82vw, 35px); list-style: none; margin: 0; padding: 0; }
.ifal-header__menu a {
	font-family: "Noto Sans Hebrew", sans-serif;
	font-weight: 500; font-size: clamp(14px, 0.94vw, 18px); color: #0A2869; white-space: nowrap;  /* 18 @1920 */
}
.ifal-header__menu a:hover { color: var(--c-primary); }

/* Language pill (Figma "Change Profile": bg #d8eaff, radius 100, pad 8/12/8/16, gap 4) */
.ifal-langpill {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--c-blue-4);
	border-radius: 100px;
	padding: 8px 12px 8px 16px;
	box-shadow: 0 4px 10px rgba(37, 58, 71, .08);
	color: #0A2869;
}
.ifal-langpill:hover { filter: brightness(.97); }
.ifal-langpill__flag { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; font-size: 16px; line-height: 1; border-radius: 50%; overflow: hidden; }
.ifal-langpill__label { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.3; color: #0A2869; }
.ifal-langpill__chev { color: #0A2869; flex: none; }

/* Header action buttons (exact) */
.ifal-header__actions { display: flex; align-items: center; gap: 16px; }
/* lang pill sits the same 16px from Register as Register does from Download */
.ifal-header__group--actions { gap: 16px; }
.ifal-hbtn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 16px;
	padding: 10px 16px; border-radius: 12px; white-space: nowrap;
	border: 2px solid transparent; transition: transform .15s ease, background .15s ease;
}
.ifal-hbtn--ghost { background: #fff; color: #19235F; border-color: #DEE4FF; box-shadow: 0 4px 10px rgba(37,58,71,.08); }
.ifal-hbtn--ghost:hover { transform: translateY(-1px); }
.ifal-hbtn--primary { background: #1582FF; color: #fff; box-shadow: 0 4px 6px rgba(117,173,209,.30); }
.ifal-hbtn--primary:hover { background: #1773E0; transform: translateY(-1px); }

/* ---- Mobile hamburger + dropdown (desktop: hidden) ---- */
.ifal-header__burger { display: none; }
.ifal-header__mobile { display: none; }
@media (max-width: 900px) {
	.ifal-header__burger {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 40px; height: 40px; padding: 8px;
		background: none; border: 0; cursor: pointer; flex: none;
	}
	.ifal-header__burger span {
		display: block; height: 2.5px; border-radius: 2px; background: #0A2869;
		transition: transform .25s ease, opacity .2s ease;
	}
	.ifal-header__burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
	.ifal-header__burger.is-open span:nth-child(2) { opacity: 0; }
	.ifal-header__burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

	.ifal-header__mobile {
		display: flex; flex-direction: column; gap: 4px;
		margin-top: 8px; padding: 12px;
		background: #fff; border-radius: 18px;
		box-shadow: 0 9px 32.4px rgba(80, 110, 180, .25);
		/* the header is fixed - when the language dropdown opens the panel can
		   outgrow the screen, so it scrolls internally instead of being cut off */
		max-height: calc(100vh - 110px);
		max-height: calc(100dvh - 110px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.ifal-header__mobile[hidden] { display: none; }
	.ifal-header__mobile a {
		font-family: "Noto Sans Hebrew", sans-serif; font-weight: 500; font-size: 16px;
		color: #0A2869; padding: 12px 14px; border-radius: 12px;
	}
	.ifal-header__mobile a:active, .ifal-header__mobile a:hover { background: #F0F5FF; }
	.ifal-header__mobile .ifal-header__mobile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
	.ifal-header__mobile .ifal-hbtn--ghost {
		display: inline-flex; margin-top: 4px; text-align: center; justify-content: center;
		font-size: 14px; padding: 8px 12px;   /* same height as the pill's primary button */
	}
}

/* ---- Footer (dark navy) ---- */
.ifal-footer { background: var(--c-footer); color: var(--c-footer-text); margin-top: var(--sp-7); }
.ifal-footer__logo { height: 34px; width: auto; }
/* full-bleed grid: the brand block and every link column share equal tracks */
.ifal-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--sp-5) var(--sp-4);
	padding-block: var(--sp-6) var(--sp-5);
	max-width: none;
	width: 100%;
	padding-inline: clamp(24px, 4vw, 72px);
}
.ifal-footer__social { display: flex; gap: .75rem; list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.ifal-footer__social a {
	display: grid; place-items: center; width: 34px; height: 34px;
	border-radius: 50%; background: rgba(255,255,255,.08); font-size: .8rem;
}
.ifal-footer__social a:hover { background: var(--c-primary); }
.ifal-footer__cols { display: contents; }
.ifal-footer__col a { line-height: 1.5; display: inline-block; }
body.ifal-coded .ifal-footer__col-title { color: #fff; font-size: var(--fs-small); font-weight: 700; margin-bottom: var(--sp-2); }
.ifal-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; }
.ifal-footer__col a { color: var(--c-footer-text); font-size: var(--fs-small); opacity: .85; }
.ifal-footer__col a:hover { opacity: 1; color: #fff; }
.ifal-footer__bar { border-top: 1px solid rgba(255,255,255,.08); padding-block: var(--sp-3); font-size: var(--fs-small); opacity: .8; }
.ifal-footer__bar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; max-width: none; width: 100%; padding-inline: clamp(24px, 4vw, 72px); }
.ifal-footer__credits { display: inline-flex; align-items: center; gap: 10px; }
.ifal-footer__legal { display: inline-flex; align-items: center; gap: 10px; }
.ifal-footer__legal a { color: var(--c-footer-text); opacity: .8; font-size: var(--fs-small); }
.ifal-footer__legal a:hover { opacity: 1; color: #fff; }
.ifal-footer__credit { color: var(--c-footer-text); opacity: .7; font-size: 13px; }
.ifal-footer__credit-sep { opacity: .4; }
.ifal-footer__credit:hover { opacity: 1; color: #fff; }
.ifal-footer__social a svg { display: block; }
@media (max-width: 900px) {
	.ifal-footer__inner { grid-template-columns: repeat(2, 1fr); }
	/* Footer v2 (Figma mobile): logo and social icons share the top row */
	.ifal-footer__brand {
		grid-column: 1 / -1;
		display: flex; align-items: center; justify-content: space-between;
		gap: 16px; flex-wrap: wrap;
	}
	.ifal-footer__brand > a { display: inline-flex; }
	.ifal-footer__social { margin: 0; }
	.ifal-footer__bar-in { justify-content: center; text-align: center; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	/* compact header: logo + lang pill + primary CTA; menu & Register hidden */
	.ifal-header { top: 10px; }
	.ifal-header__menu, .ifal-hbtn--ghost { display: none; }
	.ifal-header__pill { padding: 10px 14px; border-radius: 18px; }
	.ifal-header__group { gap: 12px; }
	.ifal-header__logo-img { height: 22px; }
	.ifal-header__actions { gap: 8px; }
	.ifal-hbtn { font-size: 14px; padding: 8px 12px; }   /* BOTH buttons - identical height everywhere */
	.ifal-langpill { padding: 6px 10px 6px 12px; }
	.ifal-langpill__label { font-size: 13px; }

}
@media (max-width: 480px) {
	/* phones: squeeze the pill so logo + lang + CTA fit 390px with room to breathe */
	.ifal-header__pill { padding: 8px 10px; }
	.ifal-header__logo-img { height: 20px; }
	.ifal-langpill { padding: 5px 8px 5px 10px; }
	.ifal-langpill__label { font-size: 12px; }
	.ifal-langpill__flag { width: 20px; height: 20px; font-size: 14px; }
	.ifal-hbtn--primary { font-size: 13px; padding: 8px 10px; }
}

/* ==================== SHARED SECTION: CONTACT (used on all coded pages) ==================== */
/* ==================== CONTACT  (node 1:410) ==================== */
.contact { background: #fff; padding: 60px var(--shell-pad); }
.contact__card {
	position: relative; overflow: hidden;
	max-width: 1394px; margin-inline: auto;
	background: linear-gradient(64.46deg, #1582FF 0.98%, #0D4E99 117.12%);   /* exact */
	border-radius: 60px; box-shadow: 0 0 80px rgba(0, 92, 199, .24);          /* exact */
	padding: 60px;                                                            /* exact */
	display: flex; align-items: center;
}
/* Exact Figma glow - three blurred ellipses (nodes 1:412/413/414), colors from the
   source SVGs: cyan #00A6FF (bottom-center), deep #0054D7 (top-right), dark #00003C shade */
/* Glow (Figma ellipses 1:412/413/414) as radial-gradients - NO filter:blur.
   iOS Safari fails to clip filtered children to a rounded parent, which leaked a
   hard-cornered rectangle past the card; radial gradients fade to transparent and
   are clipped normally, so all four corners stay round on every browser. */
.contact__glow {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	border-radius: 60px; overflow: hidden;
	background:
		radial-gradient(36% 58% at 85% 24%,  rgba(0, 84, 215, .90), transparent 74%),   /* deep blue, top-right */
		radial-gradient(40% 55% at 72% 100%, rgba(0, 166, 255, .60), transparent 72%),  /* cyan, low center-right */
		radial-gradient(22% 46% at 75% 70%,  rgba(0, 0, 60, .22),  transparent 74%);    /* soft dark shade */
}
.contact__form { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 40px; }
.contact__head { display: flex; flex-direction: column; gap: 8px; }
.contact .contact__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 32px; color: #fff; margin: 0; }   /* .contact scope out-specifies the base body.ifal-coded h2 ink color */
.contact__sub { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 24px; color: #CFE5FF; margin: 0; }
.contact__fields { display: flex; flex-direction: column; gap: 24px; width: 511px; max-width: 100%; }
.contact__inputs { display: flex; flex-direction: column; gap: 16px; }
.contact__input {
	width: 100%; background: #fff; border: 1px solid #C8D2FF; border-radius: 16px;
	padding: 16px; font-family: "Noto Sans Hebrew", sans-serif; font-size: 14px; color: #19235F;
	box-shadow: 0 4px 10px rgba(37,58,71,.08); outline: none;
}
.contact__input::placeholder { color: #626B96; }
.contact__input:focus { border-color: #1582FF; }
/* RTL forms: browsers force tel inputs LTR, which dumps the typed number at
   the LEFT edge - keep digit order LTR but anchor the number to the right */
[dir="rtl"] .contact__input[type="tel"] { direction: ltr; text-align: right; }
.contact__btn {
	width: 100%; background: #0A2869; color: #fff; border: 0; border-radius: 18px; cursor: pointer;
	padding: 16px 24px; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 16px;
	box-shadow: 0 4px 6px rgba(117,173,209,.3); transition: background .2s ease, transform .15s ease;
}
.contact__btn:hover { background: #0d327f; transform: translateY(-1px); }

/* Illustration - EXACT Figma placement (node 1:425): anchored to the card's
   bottom-right, hands bleed past the right & bottom edges and get clipped by
   the rounded corner. Insets are % of the card box (1394×507). */
.contact__illus {
	position: absolute; z-index: 1; pointer-events: none;
	top: 19.13%; right: -4.57%; bottom: -22.39%; left: 63.77%;
}
/* .contact scope: two classes out-specify the .ifal-main img { height:auto } reset */
.contact .contact__letter    { position: absolute; left: 0;  top: 0;      width: 64.3%; height: 78.6%; object-fit: contain; z-index: 1; }
.contact .contact__character { position: absolute; left: 8%; top: 19.25%; width: 92%;   height: 80.7%; object-fit: contain; z-index: 2; }

/* RTL: the form flows to the right - mirror the illustration to the LEFT half,
   and flip the art itself so the hands face inward like the LTR design */
[dir="rtl"] .contact__illus { right: 63.77%; left: -4.57%; transform: scaleX(-1); }
[dir="rtl"] .contact .contact__letter    { left: auto; right: 0; }
[dir="rtl"] .contact .contact__character { left: auto; right: 8%; }

@media (max-width: 980px) {
	.contact { padding: 40px 20px; }
	.contact__card { flex-direction: column; align-items: stretch; padding: 36px 24px; gap: 24px; border-radius: 36px; }
	.contact__glow { border-radius: 36px; }   /* match the card's mobile radius */
	.contact .contact__title { font-size: 26px; } .contact__sub { font-size: 20px; }
	.contact__fields { width: 100%; }
	.contact__illus { position: relative; inset: auto; width: 100%; height: 220px; margin-bottom: -36px; }   /* form first, art below (bleeds toward the card edge) */
	.contact .contact__letter { left: 18%; width: 50%; height: 90%; }
	.contact .contact__character { left: 30%; top: 25%; width: 64%; height: 85%; }
	/* RTL mobile: cancel the desktop side-anchoring (it shoves the art off-card);
	   keep only the horizontal flip */
	[dir="rtl"] .contact__illus { right: auto; left: auto; }
	[dir="rtl"] .contact .contact__letter { right: 18%; left: auto; }
	[dir="rtl"] .contact .contact__character { right: 30%; left: auto; }
}


/* contact form: honeypot + status message */
.contact__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact__msg { margin: 10px 0 0; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 15px; }
.contact__msg.is-ok { color: #B9F6CA; }
.contact__msg.is-err { color: #FFCDD2; }

/* ---- Language dropdown (all languages) ---- */
.ifal-langdd { position: relative; }
.ifal-langdd .ifal-langpill { border: 0; cursor: pointer; font: inherit; }
.ifal-langpill__chev { color: #0A2869; transition: transform .2s ease; }
.ifal-langdd.is-open .ifal-langpill__chev { transform: rotate(180deg); }
.ifal-langdd__menu {
	position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 300;
	min-width: 150px;
	background: #fff; border-radius: 14px;
	box-shadow: 0 12px 34px rgba(80, 110, 180, .28);
	padding: 6px;
	display: flex; flex-direction: column; gap: 2px;
}
.ifal-langdd__menu[hidden] { display: none; }
.ifal-langdd__item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; border-radius: 10px;
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 14px; color: #0A2869;
	white-space: nowrap;
}
.ifal-langdd__item:hover { background: #F0F5FF; color: var(--c-primary); }
/* mobile contact card title - Figma mobile scale */
@media (max-width: 760px) {
	body.ifal-coded .contact__card .contact__title { font-size: 21px; }
	body.ifal-coded .contact__card .contact__sub { font-size: 15px; }
}

/* mobile: Download + language selector live INSIDE the hamburger panel */
@media (max-width: 900px) {
	.ifal-header__pill .ifal-langdd,
	.ifal-header__pill .ifal-header__actions { display: none; }
	.ifal-header__mobile .ifal-hbtn--primary {
		display: inline-flex; justify-content: center; margin-top: 4px;
		font-size: 14px; padding: 8px 12px;
	}
	.ifal-header__mobile-langs {
		display: flex; flex-wrap: wrap; gap: 8px;
		margin-top: 10px; padding-top: 12px;
		border-top: 1px solid #EDF2FF;
	}
	.ifal-header__mobile-langs a {
		display: inline-flex; align-items: center; gap: 6px;
		background: var(--c-blue-4, #D8EAFF); border-radius: 100px;
		padding: 7px 12px; font-size: 13px; font-weight: 600; color: #0A2869;
	}
}
@media (max-width: 900px) {
	/* the panel's generic link color must not repaint the primary button */
	.ifal-header__mobile a.ifal-hbtn--primary { color: #fff; }
	.ifal-header__mobile a.ifal-hbtn--primary:hover { background: #1773E0; }
	/* in-panel language dropdown */
	.ifal-langdd--mobile { margin-top: 10px; padding-top: 12px; border-top: 1px solid #EDF2FF; }
	.ifal-langdd--mobile .ifal-langpill { width: 100%; justify-content: center; }
	.ifal-langdd--mobile .ifal-langdd__menu {
		position: static; box-shadow: none; border: 1px solid #EDF2FF;
		margin-top: 8px; min-width: 0;
	}
}
@media (max-width: 900px) {
	/* Register + Download share one row, half and half */
	.ifal-header__mobile-ctas { display: flex; gap: 8px; margin-top: 6px; }
	.ifal-header__mobile-ctas .ifal-hbtn { flex: 1 1 0; justify-content: center; margin-top: 0; white-space: nowrap; }
}
@media (max-width: 900px) {
	/* mobile header: logo LEFT, hamburger RIGHT - also on RTL pages */
	[dir="rtl"] .ifal-header__pill { flex-direction: row-reverse; }
}

/* ==== Footer mobile type scale - Figma Footer v2 111:1805 (titles 16/700, links 12) ==== */
@media (max-width: 760px) {
	body.ifal-coded .ifal-footer__col-title { font-size: 16px; }
	.ifal-footer__col a { font-size: 12px; }
	.ifal-footer__bar { font-size: 12px; }
}

/* ==== Mobile header: full-bleed flat bar + tiered menu icon (Figma) ==== */
@media (max-width: 900px) {
	.ifal-header { top: 0; padding-inline: 0; }
	.ifal-header__pill { border-radius: 0; padding: 18px 24px; box-shadow: 0 1px 0 rgba(10, 40, 105, .06); }
	/* panel drops flush under the bar, full width */
	.ifal-header__mobile { margin-top: 0; border-radius: 0 0 20px 20px; box-shadow: 0 16px 32px rgba(80, 110, 180, .2); }
	/* tiered menu icon: three shrinking lines, flush to the reading edge */
	.ifal-header__burger { align-items: flex-start; }
	[dir="rtl"] .ifal-header__burger { align-items: flex-end; }
	.ifal-header__burger span { width: 24px; }
	.ifal-header__burger span:nth-child(2) { width: 17px; }
	.ifal-header__burger span:nth-child(3) { width: 10px; }
	.ifal-header__burger.is-open span { width: 24px; }
}

/* ==== Floating WhatsApp button - bottom right, all pages ==== */
.ifal-wa-fab {
	position: fixed; right: 18px; bottom: 18px; z-index: 190;
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25D366;
	box-shadow: 0 8px 24px rgba(18, 140, 70, .40);
	transition: transform .2s ease, box-shadow .2s ease;
}
.ifal-wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(18, 140, 70, .45); }
@media (max-width: 760px) {
	.ifal-wa-fab { width: 50px; height: 50px; right: 14px; bottom: 14px; }
}