/* ============================================================
   English homepage — pixel-perfect from Figma (file gx7CJ0I8Q4e2EjoGZLQPLU).
   Design canvas width: 1920px. Values below are the exact Figma numbers.
   ============================================================ */

/* ---------------- Entrance animations ---------------- */
/* Scroll-reveal: JS tags elements with .ifal-reveal (no-JS = everything visible) */
.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: entrance on page load (staggered) */
@media (prefers-reduced-motion: no-preference) {
	.ifal-js .ifal-hero__head   { animation: ifal-enter .7s .10s cubic-bezier(.22,.61,.36,1) backwards; }
	.ifal-js .ifal-hero__cta    { animation: ifal-enter .7s .28s cubic-bezier(.22,.61,.36,1) backwards; }
	.ifal-js .ifal-hero__visual { animation: ifal-enter .9s .18s cubic-bezier(.22,.61,.36,1) backwards; }
}
@keyframes ifal-enter {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

/* ---------------- HERO  (node 1:488, 1920×1523) ---------------- */
.ifal-hero {
	position: relative;
	/* Main Background Shape: radial #F4F7FF→#EDF2FF over white, rounded bottom-left 200px */
	background:
		radial-gradient(80% 70% at 67% 54%, #F4F7FF 0%, #EDF2FF 100%);
	border-bottom-left-radius: 200px;
	overflow: hidden;
}
.ifal-hero__inner {
	position: relative;
	z-index: 1;   /* content sits above the ::before light body */
	max-width: 1920px;
	margin-inline: auto;
	/* Uniform 1920-canvas scaling: every hero dimension is vw-proportional (px/19.2),
	   so the wave clip (also vw) stays glued to the phone at ANY viewport width. */
	min-height: min(46.88vw, 900px);
	display: flex;
	align-items: center;
	padding-left: var(--shell-pad);            /* 6.25vw — already proportional */
	padding-top: min(5.52vw, 106px);           /* 106px @1920, clears the floating header */
	gap: 0;
}

/* --- Text Container (node 1:677): width 716, vertical gap 40 --- */
.ifal-hero__text {
	flex: 0 0 min(37.29vw, 716px);   /* 716px @1920, scales uniformly below */
	display: flex;
	flex-direction: column;
	gap: min(2.08vw, 40px);          /* exact: header-block → buttons */
	z-index: 2;
}
.ifal-hero__head { display: flex; flex-direction: column; gap: 4px; }   /* exact */

.ifal-hero__title {
	font-family: "Noto Sans Hebrew", sans-serif;
	font-weight: 700;                     /* Bold */
	font-size: min(2.08vw, 40px);         /* 40px @1920, scales uniformly */
	line-height: 2;                       /* 80px @1920 */
	color: #0A2869;                       /* exact */
	margin: 0;
	white-space: nowrap;
}
.ifal-hero__sub { display: flex; flex-direction: column; gap: 12px; }    /* exact */
.ifal-hero__lead {
	font-family: "Noto Sans Hebrew", sans-serif;
	font-weight: 600;                     /* SemiBold */
	font-size: min(1.46vw, 28px);         /* 28px @1920 */
	line-height: 1.5;
	color: #626B96;                       /* exact */
	margin: 0;
}
.ifal-hero__price {
	font-family: "Noto Sans Hebrew", Arial, sans-serif;   /* Arial fallback carries ₪ */
	font-weight: 500;                     /* Medium */
	font-size: min(1.25vw, 24px);         /* 24px @1920 */
	line-height: 1.5;
	color: #626B96;
	margin: 0;
}
.ifal-hero__price strong { font-weight: 700; color: #19235F; }          /* exact */

/* --- Buttons (node 1:683): gap 16, padding 10/16, radius 12 --- */
.ifal-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.ifal-hero__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 16px;
	border-radius: 12px;
	font-family: "Noto Sans Hebrew", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: normal;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ifal-hero__btn--wa {
	background: #FFFFFF;
	color: #19235F;
	border: 2px solid #DEE4FF;
	box-shadow: 0 4px 10px rgba(37, 58, 71, .08);   /* exact */
}
.ifal-hero__btn--wa:hover { transform: translateY(-1px); }
.ifal-hero__btn--dl {
	background: #1582FF;
	color: #FFFFFF;
	border: 2px solid transparent;
	box-shadow: 0 4px 6px rgba(117, 173, 209, .30);  /* exact */
}
.ifal-hero__btn--dl:hover { background: #1773E0; transform: translateY(-1px); }

/* --- Visual (node 1:491): layered decorations + phone, each independently animatable --- */
.ifal-hero__visual {
	position: relative;
	flex: 1 1 auto;
	align-self: center;
	min-width: 0;
	aspect-ratio: 1238 / 973;               /* exact Visual box ratio */
	max-width: 1238px;
	margin-inline-start: max(-2.08vw, -40px);   /* -40px @1920, scales uniformly */
}
/* soft glow (recreated from Figma ellipses 156/157/158) */
.ifal-hero__glow {
	position: absolute; inset: 8% 2% 14% 6%; z-index: 0;
	background:
		radial-gradient(46% 46% at 40% 42%, rgba(120,160,255,.50), transparent 70%),
		radial-gradient(46% 52% at 66% 60%, rgba(160,130,255,.42), transparent 72%);
	filter: blur(10px);
}
/* All decorations + phone are absolutely placed by Figma-derived percentages */
.ifal-deco, .ifal-hero__phone, .ifal-star { position: absolute; }
.ifal-deco { z-index: 1; height: auto; will-change: transform; }
.ifal-deco--book   { left: 20%;  top: 40%;  width: 33%; }     /* node 1:494 */
.ifal-deco--rocket { left: 60%;  top: 6%;   width: 34%; }     /* node 1:637 */
.ifal-deco--bubble { left: 80%;  top: 34%;  width: 15%; }     /* node 1:654 */

.ifal-hero__phone {
	left: 40%; top: 12%; width: 40%; height: auto; z-index: 3;
	filter: drop-shadow(0 30px 60px rgba(37,58,71,.18));
}

/* sparkles — 4-point stars in brand colors (animatable) */
.ifal-star { z-index: 2; width: 22px; height: 22px; will-change: transform; }
.ifal-star::before {
	content: ""; position: absolute; inset: 0;
	background: currentColor;
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.ifal-star--1 { left: 30%; top: 8%;  color: #1582FF; }
.ifal-star--2 { left: 92%; top: 20%; color: #61CE70; width: 16px; height: 16px; }
.ifal-star--3 { left: 16%; top: 66%; color: #0A2869; width: 14px; height: 14px; }
.ifal-star--4 { left: 74%; top: 74%; color: #1582FF; width: 18px; height: 18px; }

/* firework sparkle bursts — scattered like the Figma background */
.ifal-spark { position: absolute; z-index: 1; height: auto; width: clamp(34px, 4vw, 54px); will-change: transform; opacity: .95; }
.ifal-spark--1 { left: 4%;  top: 12%; width: clamp(30px, 3.4vw, 46px); }
.ifal-spark--2 { left: 26%; top: 2%;  }
.ifal-spark--3 { left: 86%; top: 6%;  width: clamp(30px, 3.6vw, 48px); }
.ifal-spark--4 { left: 2%;  top: 52%; width: clamp(28px, 3.2vw, 44px); }
.ifal-spark--5 { left: 90%; top: 60%; }

/* Gentle default float — user will refine per-element directions later.
   Each element drifts on its own path/timing; disabled for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	.ifal-deco--book   { animation: ifal-float-a 7s  ease-in-out infinite; }
	.ifal-deco--rocket { animation: ifal-float-b 6s  ease-in-out infinite; }
	.ifal-deco--bubble { animation: ifal-float-a 8s  ease-in-out infinite .5s; }
	.ifal-star--1 { animation: ifal-float-b 5s ease-in-out infinite; }
	.ifal-star--2 { animation: ifal-float-a 6.5s ease-in-out infinite .3s; }
	.ifal-star--3 { animation: ifal-float-b 7.5s ease-in-out infinite .6s; }
	.ifal-star--4 { animation: ifal-float-a 5.5s ease-in-out infinite .2s; }
	/* Phone: slow, gentle floating bob with a whisper of tilt */
	.ifal-hero__phone { animation: ifal-phone-float 6.5s ease-in-out infinite; }
	/* Sparkle bursts: soft twinkle (scale + fade) with a slow spin */
	.ifal-spark--1 { animation: ifal-twinkle 4.5s ease-in-out infinite; }
	.ifal-spark--2 { animation: ifal-twinkle 3.8s ease-in-out infinite .6s; }
	.ifal-spark--3 { animation: ifal-twinkle 5.2s ease-in-out infinite .3s; }
	.ifal-spark--4 { animation: ifal-twinkle 4.1s ease-in-out infinite .9s; }
	.ifal-spark--5 { animation: ifal-twinkle 4.8s ease-in-out infinite .2s; }
}
@keyframes ifal-twinkle {
	0%, 100% { transform: scale(1) rotate(0deg);      opacity: .95; }
	50%      { transform: scale(.82) rotate(20deg);   opacity: .55; }
}
@keyframes ifal-phone-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-20px) rotate(-1.2deg); }
}
@keyframes ifal-float-a { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes ifal-float-b { 0%,100% { transform: translate(0,0) rotate(0) } 50% { transform: translate(8px,-10px) rotate(3deg) } }

/* QA screenshots (?ifalshot=1): pin the vh-based hero to its 1920-canvas height */
body.ifal-shot .ifal-hero__inner { height: min(51.5vw, 989px) !important; }

/* Desktop: hero fits ~one screen — total 95vh including the wave strip.
   The visual (and the phone inside it) scales down to fit, hugging the right. */
@media (min-width: 861px) {
	.ifal-hero__inner {
		height: calc(110vh - min(9.97vw, 191px));
		min-height: 480px;
	}
	.ifal-hero__visual { max-height: 100%; margin-inline-start: auto; }
}

/* ---------------- Responsive: hero scales uniformly via vw down to ~1000px.
   Guard rails for mid-small screens before the 860px mobile flip. ---------------- */
@media (max-width: 1100px) and (min-width: 861px) {
	.ifal-hero__title { font-size: 23px; line-height: 1.6; }   /* keep the headline readable */
	.ifal-hero__lead  { font-size: 17px; }
	.ifal-hero__price { font-size: 15px; }
}
@media (max-width: 860px) {
	/* the wave clip-path scales with vw - it stays on mobile too */
	.ifal-hero__inner {
		/* Figma mobile 111:1067: texts + pill CTAs, then the LARGE tilted phone
		   bleeding off the start edge and cropped by the section bottom */
		flex-direction: column; min-height: 0; gap: 0; text-align: center;
		padding: 118px 20px 0;
	}
	.ifal-hero__text { flex: 0 0 auto; width: 100%; align-items: center; gap: 34px; }
	.ifal-hero__head { align-items: center; gap: 10px; }
	.ifal-hero__sub { gap: 4px; }
	.ifal-hero__title { font-size: 23px; line-height: 1.4; letter-spacing: -0.01em; white-space: normal; }
	.ifal-hero__lead  { font-size: 16px; }
	.ifal-hero__price { font-size: 16px; }
	/* pill CTAs on ONE row (Figma) */
	.ifal-hero__cta { flex-direction: row; justify-content: center; align-items: stretch; width: 100%; gap: 12px; flex-wrap: nowrap; }
	.ifal-hero__cta .ifal-hero__btn { flex: 1 1 0; min-width: 0; font-size: 13px; padding: 12px 8px; justify-content: center; border-radius: 999px; }
	/* visual: wider than the viewport, shifted so the phone bleeds off the
	   start edge; bottom sinks into the section crop (Figma composition) */
	.ifal-hero__visual {
		width: 150%; max-width: none; flex: 0 0 auto;
		margin-inline-start: -42%; margin-inline-end: auto;
		margin-top: 16px; margin-bottom: -14%;
	}
	/* RTL: pull the composition leftward (was hugging the right edge) */
	[dir="rtl"] .ifal-hero__visual { margin-inline-start: -12%; margin-inline-end: -38%; }
	.ifal-hero__phone { left: 32%; top: 4%; width: 46%; filter: drop-shadow(0 20px 36px rgba(37,58,71,.24)); }
	/* drop the white wave 1px so it hugs the next section (was leaving a hairline gap) */
	.ifal-hero::after { bottom: -1px; }
	.ifal-spark { width: 26px; }
}

/* RTL: mirror the wave horizontally */
[dir="rtl"] .ifal-hero::after { transform: scaleX(-1); }
@media (min-width: 861px) {
	/* desktop only — on mobile the inner keeps its symmetric padding */
	[dir="rtl"] .ifal-hero__inner { padding-left: 0; padding-right: var(--shell-pad); }
}


/* ==================== WHAT IS IFAL?  (node 1:692) ==================== */
.wif {
	/* soft blue elliptical glow behind the carousel (Figma node 1:695) over white */
	background:
		radial-gradient(46% 42% at 50% 52%, rgba(126, 182, 255, .42) 0%, rgba(126, 182, 255, 0) 68%),
		#fff;
	padding-block: 20px 60px;                  /* hero's wave band already provides the white gap above */
	overflow: hidden;
}
.wif__header {
	display: flex; flex-direction: column; align-items: center; gap: 16px;   /* exact */
	text-align: center; margin-bottom: 56px;
}
.wif__title {
	font-family: "Noto Sans Hebrew", sans-serif;
	font-weight: 900; font-size: 24px; color: #0A2869; margin: 0;             /* Black 900 */
}
.wif__subtitle {
	font-family: "Noto Sans Hebrew", sans-serif;
	font-weight: 400; font-size: 20px; color: #626B96; margin: 0;            /* Regular 20 */
}

.wif__carousel { position: relative; max-width: 1840px; margin-inline: auto; direction: ltr; }   /* carousel geometry stays LTR — the JS centering math assumes it (RTL pushed the track off-screen) */
[dir="rtl"] .wif__info-text { direction: rtl; text-align: right; }   /* but captions stay Hebrew-aligned */
/* Laptops: 2 small each side (1283px). Large screens (≥1800px): 3 each side (1720px). */
.wif__viewport {
	position: relative;
	max-width: min(1283px, 94vw);   /* 2-each-side default */
	margin-inline: auto;
	overflow: hidden;
}
@media (min-width: 1800px) {
	.wif__viewport { max-width: 1720px; }   /* 3-each-side on large screens */
}
.wif__track {
	display: flex; align-items: center; gap: 22.857px;                        /* exact gap */
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);                  /* smooth easeInOutCubic */
	will-change: transform;
}
/* during (re)init the metrics are measured at full size — freeze all motion */
.wif-init .wif__track, .wif-init .wif__card, .wif-init .wif__card * { transition: none !important; }

/* base = side thumbnail (exact 153.143 × 400, radius 18.286) */
.wif__card {
	position: relative; flex: 0 0 auto;
	width: 153.143px; height: 400px;
	border-radius: 18.286px; overflow: hidden;
	cursor: pointer;
	transition: width .55s cubic-bezier(.65,0,.35,1), height .55s cubic-bezier(.65,0,.35,1), border-radius .55s;
}
.wif__card .wif__thumb, .wif__card iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.wif__card-scrim {
	position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background:
		linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
		linear-gradient(180deg, rgba(0,0,0,0) 42.43%, rgba(0,0,0,.6) 79.93%);
}

/* active = center featured card (exact 578.571 × 450, radius 20.571) */
.wif__card.is-active { width: 578.571px; height: 450px; border-radius: 20.571px; cursor: default; }

/* info overlay + play button only on the active card */
.wif__info { opacity: 0; transform: translateY(6px); transition: opacity .3s .1s, transform .3s .1s; pointer-events: none; }
.wif__card.is-active .wif__info { opacity: 1; transform: none; pointer-events: auto; }

/* play/pause toggle icon (button stays visible; overlay stays) */
.wif__play .wif__ic-pause { display: none; }
.wif__card.is-playing .wif__play .wif__ic-play { display: none; }
.wif__card.is-playing .wif__play .wif__ic-pause { display: block; }
/* While a video plays, the caption bar gets out of the way (fades down);
   the viewer uses YouTube's own controls. Re-appears on pause/stop. */
.wif__card.is-playing .wif__info { opacity: 0; transform: translateY(6px); pointer-events: none; }
/* while playing, dim the darkening scrim so the video reads clearly (title bar stays) */
.wif__card.is-playing .wif__card-scrim { opacity: 0; transition: opacity .3s; }
.wif__info {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; align-items: flex-start; gap: 7.714px;
	padding: 25.714px;                                                        /* exact */
	background: rgba(81, 75, 87, .7);                                         /* exact */
	backdrop-filter: blur(11.432px); -webkit-backdrop-filter: blur(11.432px);
}
.wif__info-text { flex: 1 0 0; display: flex; flex-direction: column; gap: 8px; color: #fff; min-width: 0; }
.wif__info-title {
	font-family: "Noto Sans Hebrew", sans-serif;
	font-weight: 700; font-size: 18px; line-height: 1.5; margin: 0; color: #fff;
}
.wif__info-sub {
	font-family: "Noto Sans Hebrew", sans-serif;
	font-weight: 400; font-size: 14px; line-height: 1.5; margin: 0; color: #fff;
}
/* play button (exact 51.429 circle, gradient + border #dee4ff) */
.wif__play {
	flex: 0 0 auto; width: 51.429px; height: 51.429px; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	border: 1.837px solid #DEE4FF;
	background:
		linear-gradient(115deg, rgba(21,130,255,.3) 0%, rgba(174,212,255,.3) 95%),
		rgba(255,255,255,.4);
	box-shadow: 0 6.429px 19.286px rgba(117,173,209,.3);
	transition: transform .15s ease;
}
.wif__play:hover { transform: scale(1.06); }

/* nav arrows — plain chevrons at the edges (matches Figma, no circle) */
.wif__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
	width: 62px; height: 62px; border: 0; background: none; cursor: pointer;
	display: grid; place-items: center;
	color: #0A2869; opacity: .85; transition: opacity .15s ease, transform .15s ease;
}
.wif__arrow svg { width: 34px; height: 34px; }
.wif__arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.08); }
.wif__arrow--prev { left: clamp(8px, 3vw, 48px); }
.wif__arrow--next { right: clamp(8px, 3vw, 48px); }

/* edge fade - the outer cards dissolve into the REAL section background
   (blue glow, not flat white): a mask fades the cards themselves instead of
   painting a white overlay on top. */
.wif__viewport {
	--wif-fade: 150px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--wif-fade), #000 calc(100% - var(--wif-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--wif-fade), #000 calc(100% - var(--wif-fade)), transparent 100%);
}

/* On narrower screens the fixed-size cards simply show fewer per side (centre
   stays correct); only shrink on small tablets/phones. */
@media (max-width: 760px) {
	.wif { padding-top: 40px; }
	.wif__header { margin-bottom: 32px; gap: 8px; }
	.wif__subtitle { font-size: 17px; }
	.wif__card { width: 20vw; height: 62vw; }
	.wif__card.is-active { width: 78vw; height: 64vw; }
	.wif__info { padding: 14px; gap: 8px; align-items: center; }
	.wif__info-title { font-size: 14px; line-height: 1.35; }
	.wif__info-sub { font-size: 12px; }
	.wif__play { width: 40px; height: 40px; }
	.wif__viewport { --wif-fade: 8vw; }
	.wif__arrow { width: 44px; height: 44px; }
	.wif__arrow svg { width: 26px; height: 26px; }
	.wif__arrow--prev { left: 0; } .wif__arrow--next { right: 0; }
}


/* ==================== WHY CHOOSE US?  (node 1:762) ==================== */
.why { position: relative; background: #fff; overflow: hidden; padding-block: 80px 100px; }
/* exact section background pulled from Figma (Group 75896.svg — both blurred blobs) */
.why__bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("../images/why-bg.svg") center top / 100% auto no-repeat;
}

.why__inner {
	position: relative; z-index: 1;
	width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin-inline: auto;   /* 1680 content, no double-count */
	display: flex; flex-direction: column; align-items: center; gap: 120px;   /* exact */
}

/* header */
.why__header { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.why__title {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 20px;
	color: #0A2869; margin: 0; line-height: 1.2;
}
.why__subs { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.why__sub {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 24px;
	color: #626B96; margin: 0; line-height: 1.5;
}
.why__tag {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 32px;
	color: #1773E0; margin: 0; line-height: 1.5;
}

/* cards row */
.why__cards { display: flex; gap: 40px; justify-content: center; align-items: stretch; width: 100%; flex-wrap: wrap; }
.why__card {
	background: #fff; border-radius: 40px;
	box-shadow: 5px 5px 20px rgba(211, 209, 252, .51);          /* exact */
	padding: 30px 16px 34px;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	flex: 1 1 240px; max-width: 351px;                           /* shrink to keep all 4 on one row */
	transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.why__card:hover {
	transform: translateY(-10px);
	box-shadow: 6px 14px 40px rgba(140, 140, 254, .30);
}
.why__card:hover .why__word { color: #1773E0; }               /* deepen accent on hover */

/* the icon PNGs carry a wide transparent glow halo - the box is SHORTER than
   the image so the halo overlaps the paddings instead of adding empty space */
.why__icon { height: 76px; display: grid; place-items: center; }
.why__icon img {
	height: 104px; width: auto; max-width: 100%;
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);  /* springy */
}
.why__card:hover .why__icon img { transform: scale(1.12) rotate(-4deg); }
/* gentle idle bob so the icons feel alive (disabled for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
	.why__icon img { animation: why-bob 4s ease-in-out infinite; }
	.why__card:nth-child(2) .why__icon img { animation-delay: .4s; }
	.why__card:nth-child(3) .why__icon img { animation-delay: .8s; }
	.why__card:nth-child(4) .why__icon img { animation-delay: 1.2s; }
	.why__card:hover .why__icon img { animation-play-state: paused; }
}
@keyframes why-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.why__card-text { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 319px; text-align: center; }
.why__card-title { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; }
.why__because {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 16px; color: #0A2869;
}
.why__word {
	font-family: "Noto Sans", "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 24px; color: #1582FF;
}
.why__card-body {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5;
	color: #626B96; margin: 0; width: 100%; max-width: 304px;
}

@media (max-width: 1200px) {
	.why__inner { gap: 64px; }
	.why__cards { gap: 20px; }
}
@media (max-width: 720px) {
	.why { padding-block: 48px 60px; }
	.why__sub { font-size: 20px; } .why__tag { font-size: 26px; }
	.why__cards { flex-wrap: wrap; }
	.why__card { flex: 1 1 45%; max-width: 360px; }   /* 2×2 on small tablets */
}
@media (max-width: 560px) {
	.why__card { flex: 1 1 100%; max-width: 420px; }   /* single column on phones */
}


/* ==================== WE CAN HELP YOU IMPROVE  (node 1:837) ==================== */
.improve { position: relative; background: #fff; overflow: hidden; padding-block: 100px; }
.improve__inner {
	width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin-inline: auto;
	/* top-aligned: the accordion grows DOWNWARD only, so the media panel never jumps */
	display: flex; align-items: flex-start; justify-content: space-between; gap: 60px;
}
.improve__col { flex: 0 1 621px; display: flex; flex-direction: column; gap: 48px; }   /* exact */

.improve__intro { display: flex; flex-direction: column; gap: 12px; }
.improve__title {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 32px;
	color: #19235F; margin: 0; line-height: 1.2;
}
.improve__title span { font-weight: 800; color: #1773E0; }
.improve__sub {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 500; font-size: 20px;
	color: #626B96; margin: 0;
}

.improve__list { display: flex; flex-direction: column; gap: 24px; }   /* exact */

/* each feature = a tab button */
.improve__item {
	display: flex; align-items: stretch; gap: 16px;
	width: 100%; text-align: start; background: none; border: 0; cursor: pointer;   /* start = direction-aware (right in RTL) */
	padding: 16px 0 16px 0; position: relative;
}
/* left marker — thin grey line collapsed, gradient bar when active */
.improve__marker {
	flex: 0 0 4px; align-self: stretch; border-radius: 4px;
	background: #B7C3DF; transition: flex-basis .25s ease, background .25s ease;
}
.improve__item.is-active .improve__marker {
	flex-basis: 6px;
	background: linear-gradient(180deg, #B1B1FF 0%, #88C0FF 100%);   /* gradient marker */
}
.improve__item-text { display: flex; flex-direction: column; gap: 0; justify-content: center; min-width: 0; }
.improve__item-title {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 18px; line-height: 1.5;
	color: #19235F; transition: font-size .2s ease, color .2s ease;
}
/* active title uses the bolder Noto Sans Black look */
.improve__item.is-active .improve__item-title {
	font-family: "Noto Sans", "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 20px; line-height: 24px;
}
/* body — collapsed by default, expands when the tab is active */
.improve__item-body {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5;
	color: #626B96;
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease;
}
.improve__item.is-active .improve__item-body { max-height: 160px; opacity: 1; margin-top: 16px; }
.improve__item:not(.is-active):hover .improve__marker { background: #8C8CFE; }

/* visual (node 1:854) — already includes the purple container + phones */
/* Media panel: FIXED-ratio masked frame (the rounded squircle of improve-visual.png:
   shape 575×510, corner r≈100). Image & video both fill it with cover, so swapping
   tabs/media never changes the panel's size or position. */
/* centered beside the tabs — the fixed-aspect media panel keeps the column height
   stable, so centering no longer causes jumps */
.improve__visual { flex: 0 1 575px; display: flex; justify-content: flex-end; align-items: flex-start; align-self: center; }
.improve__media {
	position: relative;
	width: 100%; max-width: 575px;
	aspect-ratio: 575 / 510;
	border-radius: 17.4% / 19.6%;               /* squircle corners of the source shape (r≈100 @575×510) */
	overflow: hidden;
	background: #E3DDFA;                        /* lavender of the visuals — hides load flashes */
	transform: translateZ(0);                   /* Safari: enforce the rounded clipping on video */
}
/* improve-visual.png carries 37px transparent margins around its 575×510 shape —
   oversize it so the SHAPE fills the mask edge-to-edge */
.improve__media img {
	position: absolute;
	left: -6.43%; top: -7.25%;
	width: 114.78%; height: 116.67%;
	max-width: none;
}
.improve__media video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;                          /* 16:9 clip fills the squarer mask, sides crop */
}
.improve__media [hidden] { display: none; }

@media (max-width: 980px) {
	.improve { padding-block: 60px; }
	.improve__inner { flex-direction: column; align-items: stretch; gap: 40px; }
	.improve__col { flex-basis: auto; }
	.improve__visual { justify-content: center; position: static; margin-top: 0; }
	.improve__media { max-width: 480px; }
}
@media (max-width: 560px) {
	.improve { padding-block: 48px; }
	.improve__title { font-size: 26px; }
	.improve__media { max-width: 100%; }
}
/* mobile: the panel relocates under the active tab (JS placePanel) */
@media (max-width: 980px) {
	.improve__list .improve__media { margin: 4px 0 12px; }
}


/* ==================== THERE IS NO COMPETITION  (node 1:870) ==================== */
.comp { position: relative; background: #00083A; overflow: hidden; padding-block: 120px 130px; }
.comp__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.comp__bg::before, .comp__bg::after { content: ""; position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }
.comp__bg::before { inset: 0.91% 54.67% 14.53% -1.67%; background-image: url("../images/comp-blob-l.svg"); }   /* #249EFF */
.comp__bg::after  { inset: 31.61% -3.61% -17.57% 55.59%; background-image: url("../images/comp-blob-r.svg"); } /* #8559FF */

.comp__inner {
	position: relative; z-index: 1;
	width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin-inline: auto;
	display: flex; flex-direction: column; align-items: center;
}

/* header */
.comp__header { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; margin-bottom: 56px; }
.comp .comp__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 24px; color: #fff; margin: 0; line-height: 1.2; }   /* .comp scope out-specifies the base body.ifal-coded h2 ink color */
.comp__subs { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.comp__sub { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 24px; color: #fff; margin: 0; }
.comp__tag {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 32px; margin: 0;
	background: linear-gradient(94deg, #B1B1FF 37%, #88C0FF 92%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* glassy comparison table (node 1:878) */
.comp__table {
	width: 100%; max-width: 1394px;
	filter: drop-shadow(5px 5px 20px rgba(110, 103, 244, .24));
}
.comp__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 24px; }
.comp__cell { font-family: "Noto Sans Hebrew", Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: #fff; }  /* Arial fallback carries ₪ on Latin-only pages */
.comp__cell--label { flex: 0 1 510px; }
.comp__cell--ifal  { flex: 0 0 262px; display: flex; align-items: center; }
.comp__cell--rival { flex: 0 0 262px; display: flex; align-items: center; }

.comp__row--head { height: 60px; background: rgba(0, 24, 75, .7); border-radius: 40px 40px 0 0; }
.comp__logo { height: 28px; width: auto; max-width: none; }   /* never squeeze to the cell — that smears the ratio */
.comp__cell--rival { font-family: "Noto Sans Hebrew", sans-serif; }
.comp__row--head .comp__cell--rival { font-weight: 600; }

.comp__body {
	background: rgba(143, 152, 209, .42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-radius: 0 0 40px 40px; padding: 0 24px 24px;
}
.comp__body .comp__row { height: 80px; padding-inline: 0; border-bottom: 1px solid #97A0CE; }
.comp__body .comp__row:last-child { border-bottom: 0; }
.comp-ic { flex: none; }

@media (max-width: 900px) {
	.comp { padding-block: 64px 72px; }
	.comp__sub { font-size: 20px; } .comp__tag { font-size: 26px; }
	.comp__cell { font-size: 14px; }
	.comp__cell--ifal, .comp__cell--rival { flex-basis: 90px; justify-content: center; }
	.comp__cell--label { flex: 1; }
	.comp__row, .comp__body { padding-inline: 14px; }
	.comp__body .comp__row { gap: 10px; }
}
@media (max-width: 620px) {
	.comp__logo { height: 22px; }
	.comp__cell { font-size: 13px; }
	.comp__cell--ifal, .comp__cell--rival { flex: 0 0 86px; font-size: 12px; text-align: center; }
	.comp__cell--label { flex: 1 1 auto; min-width: 0; }
	.comp__row { gap: 8px; padding-inline: 10px; }
	.comp__row--head { border-radius: 24px 24px 0 0; }
	.comp__body { padding: 0 12px 14px; border-radius: 0 0 24px 24px; }
	.comp__body .comp__row { height: auto; min-height: 60px; padding-block: 10px; }
}


/* ==================== MEET OUR TEACHERS  (node 1:924) ==================== */
.teach { position: relative; background: #F9FBFF; overflow: hidden; padding-block: 90px; }
.teach__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.teach__bg::before, .teach__bg::after { content: ""; position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }
.teach__bg::before { inset: -5.3% 17.72% 12.07% 32.56%; background-image: url("../images/teachers-blob-l.svg"); }  /* #A4D6FF */
.teach__bg::after  { inset: 20.1% -8.23% -8.43% 62.92%; background-image: url("../images/teachers-blob-r.svg"); }  /* #BAA1FF */

.teach__inner {
	position: relative; z-index: 1;
	width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.teach__col { flex: 0 1 793px; display: flex; flex-direction: column; gap: 16px; }
.teach__head { display: flex; flex-direction: column; }
.teach__eyebrow {
	font-family: "Noto Sans", "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 20px;
	color: #0A2869; margin: 0; line-height: 2;
}
.teach__title { font-size: 32px; line-height: 1.5; margin: 0; font-family: "Noto Sans Hebrew", sans-serif; }
.teach__title-soft   { font-weight: 600; color: #626B96; }
.teach__title-strong { font-weight: 900; color: #0A2869; }

.teach__body { display: flex; flex-direction: column; gap: 32px; margin-top: 16px; }
.teach__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.teach__point { display: flex; align-items: flex-start; gap: 8px; }
.teach__check {
	flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; border-radius: 40px;
	background: #88C116; display: grid; place-items: center;
}
.teach__point-text {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5;
	color: #626B96; max-width: 623px;
}
.teach__cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* layered visual — laptop + independently-animatable decorations (node 1:954) */
.teach__visual { flex: 0 1 1017px; position: relative; aspect-ratio: 1083 / 812; max-width: 1083px; }
.teach-laptop {
	position: absolute; left: 5.4%; top: 10%; width: 90.2%; height: auto; z-index: 2;
	filter: drop-shadow(0 30px 50px rgba(37,58,71,.18));
}
.teach-deco { position: absolute; z-index: 1; height: auto; will-change: transform; }
.teach-deco--bubble { left: 15.3%; top: 11.3%; width: 12%; }    /* node 1:955 */
.teach-deco--shape  { left: 71%;   top: 64.6%; width: 15%; z-index: 3; }  /* node 1:962 */
.teach-deco--heart  { left: 76%;   top: 3.4%;  width: 8.5%; }   /* node 1:976 */

.teach-star { position: absolute; z-index: 1; width: 18px; height: 18px; will-change: transform; }
.teach-star::before {
	content: ""; position: absolute; inset: 0; background: currentColor;
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.teach-star--1 { left: 45%; top: 1%;  color: #0A2869; width: 14px; height: 14px; }
.teach-star--2 { left: 6%;  top: 36%; color: #1582FF; }
.teach-star--3 { left: 88%; top: 55%; color: #1582FF; width: 15px; height: 15px; }

@media (prefers-reduced-motion: no-preference) {
	.teach-deco--bubble { animation: ifal-float-a 6s ease-in-out infinite; }
	.teach-deco--shape  { animation: ifal-float-b 7s ease-in-out infinite .4s; }
	.teach-deco--heart  { animation: ifal-float-a 5.5s ease-in-out infinite .2s; }
	.teach-star--1 { animation: ifal-float-b 5s ease-in-out infinite; }
	.teach-star--2 { animation: ifal-float-a 6.5s ease-in-out infinite .3s; }
	.teach-star--3 { animation: ifal-float-b 7s ease-in-out infinite .5s; }
}

@media (max-width: 1024px) {
	.teach__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
	.teach__col { flex-basis: auto; }
	.teach__title { font-size: 26px; }
	.teach__visual { flex: 0 0 auto; width: 100%; max-width: 640px; align-self: center; }   /* in column flow the 1017px flex-basis would become HEIGHT */
}
@media (max-width: 700px) {
	.teach__cta { flex-direction: column; align-items: stretch; }
	.teach__cta .ifal-hero__btn { width: 100%; justify-content: center; }
	.teach__point-text { font-size: 16px; }
}


/* ==================== OUR STUDY PACKAGES  (node 1:985) ==================== */
.pkg { background: #EDF5FF; padding-block: 94px 100px; overflow: hidden; }
.pkg__inner { width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin-inline: auto; }
.pkg__header { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 56px; }
.pkg__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 20px; color: #0A2869; margin: 0; line-height: 1.4; }
.pkg__sub { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 24px; color: #0A2869; margin: 0; }
.pkg__sub strong { font-weight: 900; }

.pkg__cards { display: flex; gap: 22px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.pkg__card {
	position: relative; background: #fff; border-radius: 24px;
	box-shadow: 0 4px 20px rgba(37, 58, 71, .08);
	padding: 22px 18px 28px; flex: 1 1 218px; max-width: 390px;
	display: flex; flex-direction: column; gap: 40px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.pkg__card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(37, 58, 71, .14); }
.pkg__card--featured { border: 4px solid #1582FF; padding: 20px 20px 28px; }
.pkg__badge {
	position: absolute; top: 22px; right: 24px;
	background: #FDEED9; color: #D68A19;
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.3;
	padding: 4px 12px; border-radius: 300px;
}

.pkg__top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
[dir="rtl"] .pkg__tier { align-self: flex-end; }   /* RTL: tier icon moves to the LEFT corner so the badge owns the right */
.pkg__tier { height: 34px; width: auto; object-fit: contain; }
.pkg__num {
	font-family: "Noto Sans Hebrew", Arial, sans-serif;
	font-weight: 800; font-size: 40px; line-height: 1; color: #1582FF;
	height: 34px; display: flex; align-items: center;
}
.pkg__lessons { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 700; font-size: 16px; color: #19235F; margin: 0; }
.pkg__price { display: flex; align-items: flex-end; gap: 4px; }
.pkg__amount { font-family: "Noto Sans Hebrew", Arial, sans-serif; font-weight: 800; font-size: 20px; color: #19235F; line-height: 1.5; }
.pkg__per { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 12px; color: #626B96; }
.pkg__avg { font-family: "Noto Sans Hebrew", Arial, sans-serif; font-weight: 400; font-size: 16px; color: #626B96; margin: 0; }

.pkg__divider { border: 0; border-top: 1px solid #E6ECF7; margin: 0; width: 100%; }

.pkg__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pkg__feature { display: flex; align-items: center; gap: 8px; }
.pkg__feat-ic { width: 20px; height: 20px; flex: none; object-fit: contain; }
.pkg__feature span { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 14px; color: #626B96; line-height: 1.5; }

.pkg__btn {
	margin-top: auto; display: flex; align-items: center; justify-content: center;
	background: #1582FF; color: #fff; border-radius: 16px; padding: 12px;
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 16px; line-height: 1.3;
	transition: background .2s ease;
}
.pkg__btn:hover { background: #1773E0; }


@media (max-width: 700px) { .pkg__sub { font-size: 20px; } }


/* ==================== STUDENTS FEEDBACK  (node 1:1127) ==================== */
.fb {
	position: relative; overflow: hidden; padding-block: 90px 100px;
	background: linear-gradient(234.5deg, #06104B 9.32%, #192C86 125.69%), #19235F;   /* exact */
}
/* Exact Figma bottom glow — three blurred ellipses (#4400FF / #7847FF / #0026FF @80%,
   blur 250) forming the blue-purple radial wash rising from the bottom */
.fb::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(32% 52% at 19.5% 100%, rgba(68, 0, 255, .70), transparent 74%),
		radial-gradient(34% 44% at 49.6% 105%, rgba(120, 71, 255, .65), transparent 74%),
		radial-gradient(32% 52% at 80.5% 100%, rgba(0, 38, 255, .65), transparent 74%);
	filter: blur(40px);
}
.fb__header { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 64px; }
.fb__head-top { display: flex; flex-direction: column; gap: 2px; }
.fb__head-1 { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 28px; color: #fff; margin: 0; }
.fb__head-2 { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 32px; color: #B5D6FF; margin: 0; }
.fb__eyebrow { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 20px; color: #B7C3DF; margin: 0; }

.fb__track-wrap { position: relative; z-index: 1; direction: ltr; overflow: hidden; margin-block: -40px -36px; }   /* marquee geometry stays LTR - the translateX loop assumes it; negative margins cancel the glow padding below */
[dir="rtl"] .fb__card { direction: rtl; }                              /* card content still reads right-to-left */
/* Side fades: a mask dissolves the cards into the REAL background (diagonal
   gradient + bottom glows) - solid-color overlays never quite matched it */
.fb__track-wrap {
	--fb-fade: min(22vw, 420px);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fb-fade), #000 calc(100% - var(--fb-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--fb-fade), #000 calc(100% - var(--fb-fade)), transparent 100%);
}

/* padding-block leaves room for the cards' 40px-blur glow inside the
   overflow:hidden wrap (the glow clipped at the box edges otherwise) */
.fb__track { display: flex; gap: 40px; align-items: stretch; width: max-content; padding-block: 48px 56px; animation: fb-marquee 55s linear infinite; }
.fb__track-wrap:hover .fb__track, .fb__track-wrap.is-paused .fb__track { animation-play-state: paused; }
@keyframes fb-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 20px)); } }
@media (prefers-reduced-motion: reduce) { .fb__track { animation: none; } }

.fb__group { display: flex; gap: 40px; align-items: stretch; }
.fb__card { flex: 0 0 auto; border-radius: 40px; }
/* text testimonial card */
.fb__card--text {
	width: 534px; max-width: 86vw;
	background: rgba(143, 152, 209, .42); border: 1px solid rgba(143, 152, 209, .6);
	box-shadow: 5px 5px 40px rgba(55, 48, 183, .51);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	padding: 24px 40px; display: flex; flex-direction: column; gap: 24px;
}
.fb__stars { display: flex; gap: 2px; }
.fb__star { flex: none; }
.fb__quote { font-family: "Inter", "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 20px; line-height: 30px; color: #DEE4FF; margin: 0; }
.fb__quote strong { font-weight: 700; color: #fff; }
.fb__author { display: flex; align-items: center; gap: 8px; }
.fb__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.fb__name { font-family: "Inter", "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 18px; color: #DEE4FF; }

/* video testimonial card */
.fb__card--video {
	width: 278px;
	background: rgba(143, 152, 209, .42); border: 1px solid rgba(143, 152, 209, .6);
	box-shadow: 5px 5px 40px rgba(55, 48, 183, .51); padding: 12px;
	display: flex;
}
.fb__video { position: relative; width: 100%; aspect-ratio: 254 / 324; border-radius: 28px; overflow: hidden; }
.fb__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
	border: 1.4px solid #DEE4FF; box-shadow: 0 5px 15px rgba(117,173,209,.3);
	background: linear-gradient(115deg, rgba(21,130,255,.3), rgba(174,212,255,.3)), rgba(255,255,255,.4);
	display: grid; place-items: center;
}
.fb__play:hover { transform: translate(-50%, -50%) scale(1.08); }

@media (max-width: 700px) {
	.fb { padding-block: 56px 64px; }
	.fb__header { margin-bottom: 40px; }
	.fb__head-1 { font-size: 22px; } .fb__head-2 { font-size: 26px; }
	.fb__track { gap: 20px; }
	.fb__group { gap: 20px; }
	.fb__card--text { padding: 20px 24px; } .fb__quote { font-size: 17px; line-height: 26px; }
	.fb__card--video { width: 220px; }
	.fb__track-wrap { --fb-fade: 15vw; }
}


/* ==================== 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) */
.contact__glow {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	/* Safari paints the blurred ellipses without honoring the card's rounded
	   clip - clipping them here (radius inherited from the card) fixes the
	   square corners on mobile */
	border-radius: inherit; overflow: hidden;
}
.contact__glow::before,
.contact__glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(100px); }
.contact__glow::before {   /* cyan glow low center-right */
	left: 52%; top: 64.5%; width: 40%; height: 65%;
	background: rgba(0, 166, 255, .8);
}
.contact__glow::after {    /* deep blue top-right */
	left: 59.8%; top: -16.8%; width: 49.7%; height: 89.5%;
	background: #0054D7;
}
.contact__shade {          /* soft dark shade under the letter */
	position: absolute; left: 61.3%; top: 34.3%; width: 28%; height: 72.6%;
	border-radius: 50%; background: rgba(0, 0, 60, .2); filter: blur(100px);
	pointer-events: none;
}
.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; }
.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 .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; }
}


/* ==================== FROM THE MEDIA  (node 1:1210) ==================== */
.press { background: #F9FBFF; padding-block: 90px; overflow: hidden; }
.press__inner { width: min(var(--shell-max), 100% - 2 * var(--shell-pad)); margin-inline: auto; }
.press__header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 40px; }
.press__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 20px; color: #0A2869; margin: 0; line-height: 1.6; }
.press__sub { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 28px; color: #0A2869; margin: 0; }
.press__sub strong { font-weight: 800; }

.press__row { display: flex; gap: 40px; align-items: stretch; }
.press__cards {
	display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 12px; scrollbar-width: none; flex: 1 1 auto; min-width: 0;
}
.press__cards::-webkit-scrollbar { display: none; }

.press__card {
	/* exactly 3 whole cards fit beside the featured card — no clipping; scroll for more */
	flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start;
	background: #fff; border-radius: 40px; box-shadow: 0 4px 10px rgba(37,58,71,.08);
	padding: 16px 16px 20px; height: 570px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
	color: inherit; transition: transform .25s ease, box-shadow .25s ease;
}
.press__card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(37,58,71,.14); }
.press__card-top { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.press__img { width: 100%; aspect-ratio: 310 / 260; border-radius: 24px; overflow: hidden; }
.press__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.press__texts { display: flex; flex-direction: column; gap: 8px; }
.press__card-title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.5; color: #0A2869; margin: 0; }
.press__card-desc { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: #626B96; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.press__meta { display: flex; align-items: center; gap: 16px; }
.press__logo { height: 34px; width: auto; max-width: 170px; object-fit: contain; }
.press__date { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 16px; color: #626B96; }

/* featured (bigger) card */
.press__card--feat { flex: 0 0 390px; height: 580px; padding: 16px 16px 24px; }
.press__img--feat { border-radius: 8px; aspect-ratio: 358 / 300; }
.press__card-title--feat { font-size: 24px; line-height: 32px; }
.press__card-desc--feat { font-size: 18px; line-height: 24px; color: #0A2869; }
.press__date--feat { font-weight: 700; color: #464E8B; }

@media (max-width: 1100px) {
	.press__row { flex-direction: column; }
	.press__card--feat { flex-basis: auto; height: auto; }
}

/* ==================== FAQ  (node 1:1276) ==================== */
.faq { position: relative; background: #D8EAFF; padding-block: 100px; overflow: hidden; }
.faq__deco { position: absolute; z-index: 0; height: auto; pointer-events: none; will-change: transform; }
.faq__deco--left  { left: 10%;  top: 60px;  width: 170px; }
.faq__deco--right { right: 10%; top: 130px; width: 140px; }
@media (prefers-reduced-motion: no-preference) {
	.faq__deco--left  { animation: ifal-float-a 6s ease-in-out infinite; }
	.faq__deco--right { animation: ifal-float-b 7s ease-in-out infinite .4s; }
}
@media (max-width: 1100px) { .faq .faq__deco { display: none; } }   /* double-class beats the .ifal-main img display:block reset */
.faq__inner { position: relative; z-index: 1; width: min(1197px, 100% - 2 * var(--shell-pad)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.faq__header { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.faq__titles { display: flex; flex-direction: column; gap: 8px; }
.faq__sub { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 28px; color: #0A2869; margin: 0; }
.faq__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 32px; color: #0A2869; margin: 0; }
.faq__cta { display: flex; gap: 16px; }

.faq__list { display: flex; flex-direction: column; gap: 18px; width: min(1106px, 100%); }
.faq__item {
	background: #fff; border-radius: 18px; box-shadow: 0 4px 6px rgba(117,173,209,.3);
	padding: 24px 20px; overflow: hidden;
}
.faq__item.is-hidden { display: none; }
.faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	width: 100%; background: none; border: 0; cursor: pointer; padding: 0; text-align: start;   /* direction-aware */
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.5; color: #19235F;
}
.faq__icon { flex: none; display: inline-flex; }
.faq__ic-minus { display: none; }
.faq__item.is-open .faq__ic-plus { display: none; }
.faq__item.is-open .faq__ic-minus { display: block; }
.faq__a {
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: #626B96;
	max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease;
	max-width: 1007px;
}
.faq__item.is-open .faq__a { max-height: 400px; opacity: 1; margin-top: 8px; }
.faq__a p { margin: 0 0 .5em; }

.faq__more {
	display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 18px; color: #1773E0;
	margin-top: -20px;
}
.faq__more:hover { text-decoration: underline; }
.faq__more.is-expanded svg { transform: rotate(180deg); }

@media (max-width: 700px) {
	.faq { padding-block: 56px; }
	.faq__sub { font-size: 22px; } .faq__title { font-size: 26px; }
	.faq__inner { gap: 44px; }
	.fb__head-1 { font-size: 22px; } .fb__head-2 { font-size: 26px; }
	.fb__card--text { padding: 20px 24px; } .fb__quote { font-size: 17px; line-height: 26px; }
}


/* ==================== Mobile refinements - Figma mobile frames (111:1066) ==================== */
@media (max-width: 760px) {
	/* Why cards: horizontal snap carousel with peek instead of a vertical stack */
	.why__cards {
		flex-wrap: nowrap; justify-content: flex-start;
		overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* full-bleed: the strip runs to the SCREEN edge (peeking card cut by the
		   viewport, not by the container), with padding room so card shadows
		   never clip; negative margins keep the visual rhythm unchanged */
		width: 100vw; margin-inline: calc(-1 * var(--shell-pad, 24px));
		padding: 22px var(--shell-pad, 24px) 30px;
		margin-top: -18px; margin-bottom: -12px;
		scroll-padding-inline: var(--shell-pad, 24px);
		scrollbar-width: none;
	}
	.why__cards::-webkit-scrollbar { display: none; }
	.why__card { flex: 0 0 78%; max-width: 320px; scroll-snap-align: center; }

	/* Packages: horizontal snap carousel, full-bleed to the screen edge */
	.pkg__cards {
		flex-wrap: nowrap; justify-content: flex-start;
		overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		width: 100vw; margin-inline: calc(-1 * var(--shell-pad, 24px));
		padding: 14px var(--shell-pad, 24px) 22px;
		scroll-padding-inline: var(--shell-pad, 24px);
		scrollbar-width: none;
	}
	.pkg__cards::-webkit-scrollbar { display: none; }
	.pkg__card { flex: 0 0 80%; max-width: 330px; scroll-snap-align: center; }
	.pkg__card--featured { order: -1; }

	/* Teachers: both CTAs share one row (Figma) */
	.teach__cta { flex-direction: row; flex-wrap: nowrap; }
	.teach__cta .ifal-hero__btn { width: auto; flex: 1 1 0; justify-content: center; padding-inline: 10px; font-size: 15px; white-space: nowrap; }

	/* Press: horizontal snap carousel with peek */
	.press__cards {
		display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-block: 4px 18px;
		scrollbar-width: none;
	}
	.press__cards::-webkit-scrollbar { display: none; }
	.press__card { flex: 0 0 74%; max-width: 300px; scroll-snap-align: center; height: auto; }

	/* Carousel cards must not run their per-card fade-up while the user swipes -
	   off-screen cards were "revealing" (jumping up) as they scrolled into view.
	   Inside the horizontal carousels the cards are simply always visible. */
	.why__card.ifal-reveal, .pkg__card.ifal-reveal, .press__card.ifal-reveal {
		opacity: 1; transform: none; transition: none;
	}

	/* FAQ intro: centered strip - titles then the two CTAs side by side */
	.faq__header { gap: 24px; }
	.faq__cta { flex-wrap: nowrap; width: 100%; justify-content: center; }
	.faq__cta .ifal-hero__btn { flex: 0 1 auto; padding-inline: 12px; font-size: 14px; white-space: nowrap; }
}


/* ==================== Press: carousel + lightbox ==================== */
/* Cards ride a snap carousel on ALL viewports (arrows injected by JS) */
.press__inner { position: relative; }
.press__cards {
	display: flex; grid-template-columns: none;
	overflow-x: auto; scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* generous padding + negative margins: the hover lift/shadow needs room
	   INSIDE the scroll clip, while visual spacing stays unchanged */
	padding: 28px 28px 52px;
	margin: -24px -28px -34px;
	scroll-padding-inline: 28px;
	scrollbar-width: none;
}
.press__cards::-webkit-scrollbar { display: none; }
.press__card { flex: 0 0 calc((100% - 3 * 24px) / 4); scroll-snap-align: start; height: auto; }
@media (max-width: 1100px) { .press__card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 760px)  { .press__card { flex-basis: 74%; max-width: 300px; scroll-snap-align: center; } }

.press__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 46px; height: 46px; border-radius: 50%;
	background: #fff; border: 1px solid #DEE4FF; color: #19235F;
	display: grid; place-items: center; cursor: pointer;
	box-shadow: 0 4px 14px rgba(37, 58, 71, .14);
	transition: transform .15s ease, box-shadow .15s ease;
}
.press__arrow:hover { transform: translateY(-50%) scale(1.07); box-shadow: 0 6px 18px rgba(37,58,71,.2); }
.press__arrow--prev { left: -14px; }
.press__arrow--next { right: -14px; }
@media (max-width: 760px) { .press__arrow { display: none; } }

/* Lightbox: scrollable full article screenshot, prev/next, no page leave */
.plb {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(8, 13, 38, .8);
	display: flex; align-items: center; justify-content: center;
	padding: 4vh 16px;
}
.plb[hidden] { display: none; }
.plb__panel { position: relative; width: min(720px, 94vw); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.plb__scroll {
	overflow-y: auto; border-radius: 18px; background: #fff;
	max-height: 80vh;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.plb__img { display: block; width: 100%; height: auto; }
.plb__caption { color: #fff; font-family: "Noto Sans Hebrew", sans-serif; font-size: 15px; text-align: center; margin: 0; opacity: .9; }
.plb__close {
	position: absolute; top: -14px; inset-inline-end: -14px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
	background: #fff; color: #19235F; font-size: 22px; line-height: 1;
	display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.plb__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.92); color: #19235F;
	display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.plb__nav:hover { background: #fff; }
.plb__nav--prev { left: -60px; }
.plb__nav--next { right: -60px; }
@media (max-width: 900px) {
	.plb__nav--prev { left: 6px; }
	.plb__nav--next { right: 6px; }
	.plb__close { inset-inline-end: 0; top: -18px; }
}

/* carousel cards never run per-card fade-up (they'd jump while swiping) */
.press__card.ifal-reveal { opacity: 1; transform: none; transition: none; }


/* ==================== Mobile typography pass - exact Figma mobile scale (111:1066) ==================== */
@media (max-width: 760px) {
	/* hero */
	.ifal-hero__title { font-size: 23px; line-height: 1.4; letter-spacing: -0.01em; }
	.ifal-hero__lead { font-size: 16px; }
	.ifal-hero__price { font-size: 14px; }
	/* what is ifal */
	.wif__title { font-size: 20px; }
	.wif__subtitle { font-size: 14px; }
	/* why: compact start-aligned header (Figma: 16/18/20, items-start) */
	.why__header { align-items: flex-start; text-align: start; }
	.why__title { font-size: 16px; font-weight: 700; }
	.why__subs { align-items: flex-start; text-align: start; }
	.why__sub { font-size: 18px; }
	.why__tag { font-size: 20px; font-weight: 700; }
	.why__card { flex: 0 0 240px; max-width: 240px; padding: 18px 20px 20px; border-radius: 29px; gap: 10px; }
	.why__card-text { gap: 10px; }
	.why__card p, .why__card-body { font-size: 14px; }
	/* improve */
	.improve__title { font-size: 20px; }
	.improve__sub { font-size: 14px; }
	/* comp table */
	/* mobile: header aligned to start (right in HE, left in EN) */
	.comp .comp__header { align-items: flex-start; text-align: start; }
	.comp .comp__subs { align-items: flex-start; }
	.comp .comp__title { font-size: 18px; }
	.comp .comp__sub { font-size: 15px; }
	.comp .comp__tag { font-size: 17px; }
	/* teachers */
	.teach__eyebrow { font-size: 13px; }
	.teach__title { font-size: 18px; }
	.teach__points, .teach__points li { font-size: 14px; }
	/* packages: compact header, featured card centered by JS on load */
	.pkg__title { font-size: 16px; }
	.pkg__sub { font-size: 18px; }
	.pkg__lessons { font-size: 19px; }
	.pkg__avg { font-size: 13px; }
	.pkg__feature span { font-size: 14px; }
	.pkg__card--featured { order: 0; }   /* natural position - JS centers it instead */
	.pkg__card { padding: 18px 20px 20px; gap: 20px; }
	.pkg__top { gap: 10px; }
	.pkg__features { gap: 9px; }
	.pkg__divider { margin-block: 2px; }
	/* feedback */
	.fb__head-1 { font-size: 15px; }
	.fb__head-2 { font-size: 19px; }
	.fb__eyebrow { font-size: 13px; }
	/* press */
	.press__title { font-size: 16px; }
	.press__sub { font-size: 20px; }
	/* faq */
	.faq__sub { font-size: 20px; }
	.faq__title { font-size: 24px; }
}


/* mobile accordion: the description that moves below the media panel */
@media (max-width: 980px) {
	.improve__list > .improve__body--below {
		display: block;
		/* outside its tab, the collapsed-state rules must be lifted */
		max-height: none; opacity: 1; overflow: visible;
		margin: 12px 6px 8px;
		font-size: 15px; line-height: 1.7; color: #626B96;
		text-align: start;
	}
}


/* packages carousel dots (mobile) - Figma: small dashes, active one wider */
@media (max-width: 760px) {
	.pkg__dots { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 2px; }
	.pkg__dots button {
		width: 12px; height: 6px; border-radius: 3px; border: 0; padding: 0;
		background: #C9DEFF; cursor: pointer;
		transition: width .25s ease, background .25s ease;
	}
	.pkg__dots button.is-active { width: 38px; background: #1582FF; }
}
@media (min-width: 761px) { .pkg__dots { display: none; } }


/* ---- FAQ mobile: show deco bubbles + half/half CTA buttons (Figma 111:1701) ---- */
@media (max-width: 760px) {
	.faq { padding-top: 112px; }
	.faq .faq__deco { display: block; }
	.faq__deco--left  { left: 20px; right: auto; top: 26px; width: 88px; }
	.faq__deco--right { right: 22px; left: auto; top: 46px; width: 62px; }
	.faq__header { width: 100%; }
	.faq__cta { width: 100%; gap: 12px; }
	.faq__cta .ifal-hero__btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 13px; justify-content: center; }
}


/* hero phone as <video>: size/flow like the img it replaced */
video.ifal-hero__phone { height: auto; display: block; background: transparent; }