/* ============================================================
   Business English page - pixel-perfect from Figma (Buisinesses 1:1340).
   Shares tokens/base (header, footer, contact).
   ============================================================ */

.ifal-reveal {
	opacity: 0; transform: translateY(26px);
	transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--reveal-delay, 0ms);
}
.ifal-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ifal-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------------- HERO (node 1:1342) ---------------- */
.bhero { position: relative; overflow: hidden; padding-bottom: min(3vw, 58px); }
/* Blue hero panel with a softly rounded bottom (Figma node 1:1343) - no wave. */
.bhero::before {
	/* the blue panel always ends ABOVE the logos strip - the strip rides on white */
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(46.7vw, 897px, calc(100% - 175px)); z-index: -1;
	background: radial-gradient(85% 95% at 67% 42%, #F4F7FF 0%, #EDF2FF 100%);
	border-radius: 0 0 min(3.4vw, 66px) min(3.4vw, 66px);
}
.bhero__inner {
	position: relative; z-index: 1;
	max-width: 1920px; margin-inline: auto;
	/* capped by viewport so the client-logos strip lands inside the first 100vh */
	min-height: min(41.5vw, 797px, calc(100vh - 210px));
	display: flex; align-items: center;
	padding-left: var(--shell-pad);
	padding-top: min(5.52vw, 106px);
}
[dir="rtl"] .bhero__inner { padding-left: 0; padding-right: var(--shell-pad); }
.bhero__text { display: flex; flex-direction: column; gap: 24px; z-index: 1; flex: 0 0 min(42vw, 806px); }
.bhero__head { display: flex; flex-direction: column; gap: 12px; }
.bhero__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 700; font-size: min(2.08vw, 40px); line-height: 1.2; color: #0A2869; margin: 0; }   /* Bold 40 */
.bhero__sub { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: min(1.46vw, 28px); line-height: 1.3; color: #626B96; margin: 0; }   /* Regular 28 */
.bhero__lead { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: min(1.25vw, 24px); line-height: 1.5; color: #626B96; margin: 0; max-width: 945px; }   /* Regular 24 */
.bhero__visual { position: relative; flex: 1 1 auto; align-self: center; min-width: 0; padding-right: min(1.7vw, 32px); margin-left: min(-4vw, -76px); }
[dir="rtl"] .bhero__visual { padding-right: 0; padding-left: min(1.7vw, 32px); margin-left: 0; margin-right: min(-4vw, -76px); }
/* Figma has only a faint blue wash behind the person - no purple, no heavy blur. */
.bhero__glow {
	position: absolute; inset: -4% 2% -6% 6%; z-index: 0;
	background:
		radial-gradient(46% 54% at 52% 46%, rgba(120, 168, 255, .22), transparent 72%),
		radial-gradient(40% 48% at 70% 66%, rgba(150, 190, 255, .16), transparent 74%);
}
.bhero__figure { position: relative; z-index: 1; width: 100%; max-width: min(60vw, 1150px, calc((100vh - 330px) * 1.33)); margin-inline-start: auto; }   /* vh term keeps the logos strip inside the first screen at EVERY height */
/* short screens: the illustration height (width x 0.754) drives the hero height -
   cap its width by viewport height so hero + logos strip fit the first 100vh */
@media (max-height: 860px) {
	.bhero__figure { max-width: min(60vw, calc((100vh - 330px) * 1.33)); }
}
[dir="rtl"] .bhero__figure { margin-inline-start: 0; margin-inline-end: auto; transform: scaleX(-1); }
.bhero__art { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* sparkles overlay the person exactly (shared 1069×806 viewBox) */
.bhero__deco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.bhero__spark { transform-box: fill-box; transform-origin: center; will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
	.bhero__spark { animation: bhero-spark 4.6s ease-in-out infinite; }
	.bhero__spark:nth-child(1)  { animation-duration: 3.7s; animation-delay: -.3s; }
	.bhero__spark:nth-child(2)  { animation-duration: 5.2s; animation-delay: -1.5s; }
	.bhero__spark:nth-child(3)  { animation-duration: 4.3s; animation-delay: -.8s; }
	.bhero__spark:nth-child(4)  { animation-duration: 4.0s; animation-delay: -2.2s; }
	.bhero__spark:nth-child(5)  { animation-duration: 4.9s; animation-delay: -.5s; }
	.bhero__spark:nth-child(6)  { animation-duration: 3.5s; animation-delay: -1.9s; }
	.bhero__spark:nth-child(7)  { animation-duration: 5.3s; animation-delay: -1.1s; }
	.bhero__spark:nth-child(8)  { animation-duration: 4.1s; animation-delay: -2.7s; }
	.bhero__spark:nth-child(9)  { animation-duration: 4.6s; animation-delay: -.9s; }
	.bhero__spark:nth-child(10) { animation-duration: 3.9s; animation-delay: -1.6s; }
}
@keyframes bhero-spark {
	0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
	50% { transform: translateY(-8px) rotate(9deg) scale(1.12); opacity: .5; }
}
/* logos - infinite marquee carousel (source: Figma "logos" section) */
.bhero__logos {
	position: relative; z-index: 3;
	width: min(1848px, 100% - 2 * var(--shell-pad)); margin: min(2vw, 40px) auto 0;
	overflow: hidden;
}
/* Edge fade via plain white-gradient overlays (NOT mask-image - masks + animated
   transform layers fail to composite on real Safari/iOS GPU rendering). */
.bhero__logos::before,
.bhero__logos::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 1; pointer-events: none;
}
.bhero__logos::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.bhero__logos::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.bhero__logos-track { display: flex; width: max-content; }
.bhero__logos-set {
	display: flex; align-items: center; flex: 0 0 auto;
	gap: min(4.5vw, 86px); padding-inline-end: min(4.5vw, 86px);
}
.bhero__logo { flex: 0 0 auto; display: flex; align-items: center; }
/* no CSS filter here - filters inside animated layers blank out on real Safari/iOS */
.bhero__logo img, .bhero__logo svg { height: clamp(24px, 1.9vw, 34px); width: auto; opacity: .68; display: block; }
/* marquee motion is driven by JS (initLogosMarquee) - exact pixel loop, no CSS keyframes */
@media (prefers-reduced-motion: no-preference) {
	.ifal-js .bhero__text   { animation: ifal-enter .7s .10s cubic-bezier(.22,.61,.36,1) backwards; }
	.ifal-js .bhero__visual { animation: ifal-enter .9s .18s cubic-bezier(.22,.61,.36,1) backwards; }
	.bhero__figure { animation: b-float 7s ease-in-out infinite; }
	[dir="rtl"] .bhero__figure { animation: none; }
}
@keyframes ifal-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes b-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }

/* ---------------- WHY I-FAL? (node 1:1465) ---------------- */
.bwhy { background: #fff; padding-block: 90px 100px; }
.bwhy__inner { width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin-inline: auto; display: flex; flex-direction: column; gap: 60px; align-items: center; }
.bwhy .bwhy__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 32px; color: #0A2869; margin: 0; text-align: center; }   /* Black 32 */
.bwhy__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 630px)); gap: 40px; justify-content: center; width: 100%; }
.bwhy__card {
	position: relative; overflow: hidden;
	background: #EFF2FF; border-radius: 24px;              /* exact */
	min-height: 268px; padding: 40px 44px;
	display: flex; align-items: center;
	transition: transform .25s ease, box-shadow .25s ease;
}
.bwhy__card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(140, 140, 254, .22); }
.bwhy__card-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; max-width: 355px; }
.bwhy__card-title { font-family: "Noto Sans", "Noto Sans Hebrew", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; color: #052238; margin: 0; }   /* Bold 20 */
.bwhy__card-body { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5; color: #626B96; margin: 0; }
.bwhy__card-icon {
	position: absolute; top: 0;
	height: auto; z-index: 0; pointer-events: none;
	transform-origin: top right;
}
/* Per-card sizing/placement - icons anchor to the TOP and bleed off the RIGHT edge (clipped), matching Figma. */
.bwhy__card:nth-child(1) .bwhy__card-icon { width: 192px; right: -6px;  top: 0; }
.bwhy__card:nth-child(2) .bwhy__card-icon { width: 290px; right: -30px; top: -2px; }
.bwhy__card:nth-child(3) .bwhy__card-icon { width: 206px; right: -10px; top: -2px; }
.bwhy__card:nth-child(4) .bwhy__card-icon { width: 250px; right: -14px; top: -2px; }
/* RTL - mirror to the top-left corner, flipped in place (center origin) so it reads the same way in. */
[dir="rtl"] .bwhy__card-icon { transform: scaleX(-1); transform-origin: center; }
[dir="rtl"] .bwhy__card:nth-child(1) .bwhy__card-icon { right: auto; left: -6px; }
[dir="rtl"] .bwhy__card:nth-child(2) .bwhy__card-icon { right: auto; left: -16px; }
[dir="rtl"] .bwhy__card:nth-child(3) .bwhy__card-icon { right: auto; left: -10px; }
[dir="rtl"] .bwhy__card:nth-child(4) .bwhy__card-icon { right: auto; left: -6px; }
@media (prefers-reduced-motion: no-preference) {
	.bwhy__card-icon { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
	.bwhy__card:hover .bwhy__card-icon { transform: scale(1.06); }
	[dir="rtl"] .bwhy__card:hover .bwhy__card-icon { transform: scaleX(-1) scale(1.06); }
}

/* ---------------- A WIN-WIN (node 1:1573) ---------------- */
.bwin { background: #EDF5FF; padding-block: 90px; overflow: hidden; }
.bwin__inner {
	position: relative;
	width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin-inline: auto;
	display: flex; align-items: center; gap: 40px; min-height: 480px;
}
.bwin__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; max-width: 931px; z-index: 1; }
.bwin .bwin__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 32px; color: #19235F; margin: 0; line-height: 1.3; }
.bwin .bwin__title span { font-weight: 800; color: #1582FF; }
.bwin__body { display: flex; flex-direction: column; gap: 16px; }
.bwin__body p { font-family: "Inter", "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 24px; line-height: 1.8; color: #626B96; margin: 0; }
.bwin__figure { position: relative; flex: 0 0 auto; width: min(31vw, 600px); z-index: 0; }
[dir="rtl"] .bwin__figure { transform: scaleX(-1); }
.bwin__art { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
/* confetti layer overlays the woman exactly (shared 601×648 viewBox) */
.bwin__deco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.bwin__spark { transform-box: fill-box; transform-origin: center; will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
	.bwin__spark { animation: bwin-spark 4.2s ease-in-out infinite; }
	.bwin__spark:nth-child(1)  { animation-duration: 3.6s; animation-delay: -.2s; }
	.bwin__spark:nth-child(2)  { animation-duration: 5.1s; animation-delay: -1.4s; }
	.bwin__spark:nth-child(3)  { animation-duration: 4.4s; animation-delay: -.7s; }
	.bwin__spark:nth-child(4)  { animation-duration: 3.9s; animation-delay: -2.1s; }
	.bwin__spark:nth-child(5)  { animation-duration: 4.8s; animation-delay: -.4s; }
	.bwin__spark:nth-child(6)  { animation-duration: 3.4s; animation-delay: -1.8s; }
	.bwin__spark:nth-child(7)  { animation-duration: 5.4s; animation-delay: -1.0s; }
	.bwin__spark:nth-child(8)  { animation-duration: 4.0s; animation-delay: -2.6s; }
	.bwin__spark:nth-child(9)  { animation-duration: 4.6s; animation-delay: -.9s; }
	.bwin__spark:nth-child(10) { animation-duration: 3.8s; animation-delay: -1.6s; }
	.bwin__spark:nth-child(11) { animation-duration: 5.0s; animation-delay: -.5s; }
	.bwin__spark:nth-child(12) { animation-duration: 4.3s; animation-delay: -2.3s; }
}
@keyframes bwin-spark {
	0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
	50% { transform: translateY(-9px) rotate(10deg) scale(1.08); opacity: .55; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
	.bwhy__cards { grid-template-columns: minmax(0, 630px); }
	/* Single column - keep the desktop look: text ~70%, icon in the remaining ~30% (top-right, full opacity). */
	.bwhy__card { min-height: 210px; }
	.bwhy__card-text { max-width: 70%; }
	.bwhy__card-icon { opacity: 1; top: 0; }
	.bwhy__card:nth-child(1) .bwhy__card-icon { width: 26%; right: 0; }
	.bwhy__card:nth-child(2) .bwhy__card-icon { width: 34%; right: -2%; }
	.bwhy__card:nth-child(3) .bwhy__card-icon { width: 29%; right: -1%; }
	.bwhy__card:nth-child(4) .bwhy__card-icon { width: 32%; right: -1%; }
	[dir="rtl"] .bwhy__card:nth-child(1) .bwhy__card-icon { right: auto; left: 0; }
	[dir="rtl"] .bwhy__card:nth-child(2) .bwhy__card-icon { right: auto; left: -2%; }
	[dir="rtl"] .bwhy__card:nth-child(3) .bwhy__card-icon { right: auto; left: -1%; }
	[dir="rtl"] .bwhy__card:nth-child(4) .bwhy__card-icon { right: auto; left: -1%; }
}
@media (max-width: 980px) {
	/* Blue panel wraps text + person directly, so the person always sits inside it. */
	.bhero::before { display: none; }
	.bhero__inner {
		flex-direction: column; align-items: center; min-height: 0; gap: 8px; text-align: center;
		padding: 104px 24px 12px !important;
		background: radial-gradient(120% 88% at 60% 26%, #F4F7FF 0%, #EDF2FF 100%);
		border-radius: 0 0 34px 34px;
	}
	.bhero { padding-bottom: 0; }
	.bhero__text { flex-basis: auto; align-items: center; }
	.bhero__title { font-size: 30px; } .bhero__sub { font-size: 20px; } .bhero__lead { font-size: 17px; margin-inline: auto; }
	.bhero__visual { display: flex; justify-content: center; margin: 8px 0 0 !important; padding: 0 !important; }
	.bhero__figure { width: min(96%, 500px); max-width: none; margin-inline: auto !important; left: -16px; }
	[dir="rtl"] .bhero__figure { left: 16px; }
	.bhero__art { width: 100%; margin-inline: auto !important; }
	.bhero__logos { margin-top: 28px; }
	.bhero__logos-set { gap: 44px; padding-inline-end: 44px; }
	.bhero__logo img, .bhero__logo svg { height: 26px; }

	.bwin { padding-block: 56px; }
	.bwin__inner { flex-direction: column; align-items: stretch; min-height: 0; gap: 24px; }
	.bwin .bwin__title { font-size: 24px; }
	.bwin__body p { font-size: 18px; line-height: 1.7; }
	.bwin__figure { width: min(78%, 360px); margin: 0 auto; }
}
@media (max-width: 560px) {
	.bwhy { padding-block: 56px 60px; }
	.bwhy__card { padding: 26px; min-height: 168px; }
	.bwhy__card-text { max-width: 70%; }
}

/* desktop: hero fills ~93vh (logos NOT glued to the screen edge), the blue
   panel ends exactly at the hero content's bottom, the illustration is
   bottom-anchored - so the laptop's bottom line sits ON the blue/white edge,
   and the logos ride the white strip below. Fixed foot metrics (logo height
   30px + 42px gap + 58px section padding = 130px) keep the math exact. */
@media (min-width: 901px) {
	.bhero { display: flex; flex-direction: column; min-height: 93vh; padding-bottom: 58px; }
	.bhero__inner { flex: 1 1 auto; }
	.bhero__logos { margin-top: 42px; height: 30px; }
	.bhero__logo img, .bhero__logo svg { height: 30px; }
	.bhero::before { height: calc(100% - 130px); }
	.bhero__visual { align-self: flex-end; }
	.bhero__text { align-self: center; }
}

/* ==== Mobile typography/spacing pass - Figma mobile frame 111:2592 (375px) ==== */
@media (max-width: 760px) {
	/* hero: title 22, sub 16/700, lead 16 */
	.bhero__title { font-size: 22px; }
	.bhero__sub { font-size: 16px; font-weight: 700; }
	.bhero__lead { font-size: 16px; }

	/* hero figure sits flush on the panel's bottom edge - laptop line tangent to the white line */
	.bhero__inner { padding-bottom: 0 !important; }
	.bhero__visual { margin-bottom: -2px !important; align-items: flex-end; }

	/* why i-fal: centered 16/700 eyebrow title, card 18/700 + 12/400; pushed down from the logos */
	.bwhy { padding-block: 72px 56px; }
	.bwhy__inner { gap: 24px; }
	.bwhy .bwhy__title { font-size: 16px; }
	.bwhy__cards { gap: 16px; }
	.bwhy__card { padding: 24px; min-height: 150px; }
	.bwhy__card-title { font-size: 18px; }
	.bwhy__card-body { font-size: 12px; }

	/* win-win: illustration ABOVE the title (Figma order), centered 24/600 + 16 body */
	.bwin { padding-block: 48px; }
	.bwin__inner { gap: 24px; }
	.bwin__figure { order: -1; }
	.bwin .bwin__title { font-size: 24px; text-align: center; }
	.bwin__body p { font-size: 16px; line-height: 1.5; text-align: center; }
}