/**
 * Education & Skills Landing — pixel-matched styles (from education.png).
 *
 * Everything is scoped under `.edu` so it never leaks into other pages.
 * Palette derives from the theme tokens (main.css):
 *   --purple #5B14E6, --violet #7B2CFF, --blue #2196FF, --dark-purple #2A0A66.
 *
 * Uses the site's global fixed white header (72px). The hero clears it with
 * padding-top so nothing hides behind the navbar.
 *
 * @package Novira_Academy
 */

.edu {
	--e-purple: #5b14e6;
	--e-violet: #7b2cff;
	--e-blue: #2196ff;
	--e-ink: #1a0a3d;
	--e-navy: #180a3e;
	--e-muted: #6f63a3;
	--e-line: #ece7fb;
	--e-lilac: #f5f2fd;
	--e-gold: #ffb020;
	--e-grad: linear-gradient(135deg, #6a1fe6, #4a10c9);
	--e-grad-btn: linear-gradient(135deg, #7b2cff, #5b14e6);
	--e-radius: 22px;
	--e-shadow: 0 20px 46px rgba(91, 20, 230, .12);
	font-family: var(--ff-body, 'Almarai', sans-serif);
	color: var(--e-ink);
	background: #fff;
	overflow-x: clip;
}

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

.edu-container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 24px;
}

.edu-section { padding: 72px 0; }

/* ---- Shared headings ---- */
.edu-h2 {
	font-family: var(--ff-display, 'Noto Kufi Arabic', sans-serif);
	font-size: clamp(24px, 3.1vw, 34px);
	font-weight: 800;
	color: var(--e-ink);
	text-align: center;
	margin: 0 0 46px;
	line-height: 1.35;
}
.edu-h2--light { color: #fff; }
.edu-h2__deco {
	color: var(--e-violet);
	font-size: .74em;
	vertical-align: middle;
	margin-inline: 8px;
	opacity: .85;
}
.edu-h2--light .edu-h2__deco { color: #c9a9ff; }

/* ---- Buttons ---- */
.edu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--ff-body, 'Almarai', sans-serif);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	border: 0;
	border-radius: 999px;
	padding: 14px 26px;
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	white-space: nowrap;
}
.edu-btn--lg { padding: 16px 32px; font-size: 16px; }
.edu-btn svg { flex: none; }
.edu-btn--primary { background: var(--e-grad-btn); color: #fff; box-shadow: 0 12px 26px rgba(91, 20, 230, .32); }
.edu-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(91, 20, 230, .42); }
.edu-btn--white { background: #fff; color: var(--e-purple); box-shadow: 0 10px 24px rgba(26, 10, 61, .14); }
.edu-btn--white:hover { transform: translateY(-2px); }
.edu-btn--ghost-white { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.edu-btn--ghost-white:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

/* ============================================================= */
/* 1. HERO                                                        */
/* ============================================================= */
.edu-hero {
	position: relative;
	padding-top: 132px;
	padding-bottom: 118px;
	background:
		radial-gradient(120% 120% at 88% 10%, #8b45ff 0%, rgba(139,69,255,0) 46%),
		linear-gradient(155deg, #4a12b0 0%, #5b17d6 46%, #7b2cff 100%);
	overflow: hidden;
	isolation: isolate;
}
.edu-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.edu-hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .55;
}
.edu-hero__glow--a { width: 420px; height: 420px; top: -80px; right: -60px; background: #a56bff; }
.edu-hero__glow--b { width: 360px; height: 360px; bottom: -120px; left: 10%; background: #3a12a8; opacity: .7; }
.edu-hero__grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(80% 70% at 60% 30%, #000, transparent 75%);
}

.edu-hero__wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	direction: ltr; /* visual: figures on left, copy on right */
}
.edu-hero__copy { direction: rtl; text-align: start; }
.edu-hero__visual { direction: rtl; }

.edu-hero__title {
	font-family: var(--ff-display, 'Noto Kufi Arabic', sans-serif);
	font-weight: 800;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.18;
	margin: 0 0 22px;
}
.edu-hero__title-a { display: block; color: #fff; }
.edu-hero__title-b {
	display: block;
	background: linear-gradient(90deg, #ffd36e, #ff8fc4 55%, #b98bff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.edu-hero__desc {
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.9;
	color: rgba(255, 255, 255, .9);
	font-weight: 700;
	margin: 0 0 30px;
}
.edu-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* hero visual */
.edu-hero__visual { position: relative; min-height: 440px; }
.edu-hero__scene { position: absolute; inset: 0; display: grid; place-items: center; }
.edu-hero__blob {
	position: absolute;
	width: 380px; height: 380px;
	left: 50%; top: 52%; transform: translate(-50%, -50%);
	background: radial-gradient(circle at 40% 35%, rgba(160,110,255,.55), rgba(91,20,230,.1) 70%);
	border-radius: 50%;
	filter: blur(6px);
}
.edu-hero__orbit {
	position: absolute;
	border: 1.5px dashed rgba(255, 255, 255, .28);
	border-radius: 50%;
	left: 50%; top: 52%;
	transform: translate(-50%, -50%);
}
.edu-hero__orbit--1 { width: 460px; height: 460px; animation: eduSpin 34s linear infinite; }
.edu-hero__orbit--2 { width: 350px; height: 350px; animation: eduSpin 24s linear infinite reverse; border-color: rgba(255,255,255,.16); }
@keyframes eduSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.edu-hero__photo {
	position: relative;
	z-index: 2;
	margin: 0;
	width: min(100%, 500px);
	aspect-ratio: 11 / 9;
	border-radius: 26px;
	overflow: hidden;
	border: 1.5px solid rgba(255, 255, 255, .25);
	box-shadow: 0 30px 60px rgba(20, 5, 52, .45);
	animation: eduFloat 7s ease-in-out infinite;
}
.edu-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
@keyframes eduFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.edu-badge {
	position: absolute;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	box-shadow: 0 10px 26px rgba(20, 5, 52, .3);
	animation: eduBadge 5s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes eduBadge { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.edu-badge--code { top: 4%; right: 2%; z-index: 3; }
.edu-badge--aa { top: 26%; left: -2%; font-family: var(--ff-display); z-index: 3; }
.edu-badge--globe { bottom: 8%; left: 4%; z-index: 3; }

/* ============================================================= */
/* 2. FIELDS                                                      */
/* ============================================================= */
.edu-fields {
	position: relative;
	margin-top: -46px;
	background: #fff;
	border-radius: 40px 40px 0 0;
	z-index: 2;
	padding-top: 60px;
}
.edu-fields__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
}
.edu-field {
	background: #fff;
	border: 1px solid var(--e-line);
	border-radius: 18px;
	padding: 26px 16px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(91, 20, 230, .06);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.edu-field:hover { transform: translateY(-6px); box-shadow: var(--e-shadow); border-color: transparent; }
.edu-field__ico {
	display: grid; place-items: center;
	width: 62px; height: 62px;
	margin: 0 auto 16px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(123,44,255,.12), rgba(91,20,230,.12));
	color: var(--e-purple);
}
.edu-field:hover .edu-field__ico { background: var(--e-grad-btn); color: #fff; }
.edu-field__t { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: var(--e-ink); }
.edu-field__s { font-size: 12.5px; color: var(--e-muted); margin: 0; line-height: 1.5; }

/* ============================================================= */
/* 3. WHY (dark band)                                            */
/* ============================================================= */
.edu-why {
	background:
		radial-gradient(90% 120% at 15% 0%, #33146e 0%, rgba(51,20,110,0) 55%),
		linear-gradient(135deg, #1c0a4a 0%, #241056 100%);
	border-radius: 30px;
	margin: 0 auto;
	max-width: 1180px;
	padding: 60px 40px;
	position: relative;
	overflow: hidden;
}
.edu-why__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}
.edu-why__item { text-align: center; padding: 10px 8px; }
.edu-why__ico {
	display: grid; place-items: center;
	width: 58px; height: 58px;
	margin: 0 auto 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #c9a9ff;
	transition: transform .25s ease;
}
.edu-why__item:hover .edu-why__ico { transform: translateY(-5px); background: var(--e-grad-btn); color: #fff; border-color: transparent; }
.edu-why__t { font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 5px; }
.edu-why__s { font-size: 12px; color: rgba(255, 255, 255, .6); margin: 0; line-height: 1.5; }

/* ============================================================= */
/* 4. LEARN MODES                                                */
/* ============================================================= */
.edu-modes__wrap {
	display: grid;
	grid-template-columns: 1fr 340px; /* list (1fr) left, media (340px) right */
	gap: 26px;
	align-items: stretch;
	direction: ltr;
}
.edu-modes__list { display: flex; flex-direction: column; gap: 16px; direction: rtl; }
.edu-modes__media { direction: rtl; }
.edu-mode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--e-line);
	border-radius: 18px;
	padding: 22px 24px;
	box-shadow: 0 8px 22px rgba(91, 20, 230, .05);
	transition: transform .25s ease, box-shadow .25s ease;
}
.edu-mode:hover { transform: translateX(-6px); box-shadow: var(--e-shadow); }
.edu-mode__body { text-align: start; }
.edu-mode__t {
	display: flex; align-items: center; gap: 10px;
	font-size: 20px; font-weight: 800; color: var(--e-ink); margin: 0 0 6px;
}
.edu-mode__s { font-size: 14px; color: var(--e-muted); margin: 0; line-height: 1.6; }
.edu-mode__ico {
	flex: none;
	display: grid; place-items: center;
	width: 64px; height: 64px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(123,44,255,.12), rgba(91,20,230,.12));
	color: var(--e-purple);
}
.edu-mode__live {
	display: inline-flex; align-items: center; gap: 5px;
	background: #ff3b6b; color: #fff;
	font-size: 11px; font-weight: 800; letter-spacing: .5px;
	padding: 3px 9px; border-radius: 999px;
}
.edu-mode__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: eduPulse 1.4s ease-in-out infinite; }
@keyframes eduPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.edu-modes__media { min-height: 100%; }
.edu-classroom {
	position: relative;
	height: 100%;
	min-height: 300px;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--e-shadow);
	background: #1c0a44;
}
.edu-classroom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edu-classroom::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,10,68,0) 45%, rgba(26,10,68,.55) 100%);
	pointer-events: none;
}
.edu-classroom__logo {
	position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
	color: #fff; font-family: var(--ff-display); font-weight: 800; font-size: 16px;
	text-align: center; line-height: 1.1; z-index: 2;
	text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.edu-classroom__logo em { display: block; font-size: 9px; letter-spacing: 3px; font-style: normal; opacity: .9; }

/* ============================================================= */
/* 5. STATS BAND                                                 */
/* ============================================================= */
.edu-stats { padding: 0 0 8px; }
.edu-stats .edu-container {
	background:
		radial-gradient(80% 140% at 12% 0%, #33146e 0%, rgba(51,20,110,0) 60%),
		linear-gradient(135deg, #1c0a4a 0%, #2a1160 100%);
	border-radius: 24px;
	padding: 34px 30px;
	box-shadow: 0 20px 46px rgba(28, 10, 74, .28);
}
.edu-stats__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin: 0; padding: 0; list-style: none;
}
.edu-stat { display: flex; align-items: center; gap: 14px; justify-content: center; }
.edu-stat + .edu-stat { border-inline-start: 1px solid rgba(255,255,255,.1); }
.edu-stat__ico {
	flex: none;
	display: grid; place-items: center;
	width: 50px; height: 50px;
	border-radius: 14px;
	background: rgba(255,255,255,.08);
	color: #c9a9ff;
}
.edu-stat__txt { text-align: start; }
.edu-stat__n { display: block; direction: ltr; font-family: var(--ff-display); font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.edu-stat__l { display: block; font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 4px; }

/* ============================================================= */
/* 6. PROGRAMS                                                   */
/* ============================================================= */
.edu-programs__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}
.edu-prog {
	position: relative;
	border-radius: var(--e-radius);
	padding: 34px 34px 40px;
	overflow: hidden;
	min-height: 340px;
}
.edu-prog--adults { background: linear-gradient(150deg, #f3edff 0%, #e9e0ff 100%); }
.edu-prog--kids { background: linear-gradient(150deg, #eef4ff 0%, #e3ecff 100%); }
.edu-prog__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.edu-prog__badge {
	flex: none; display: grid; place-items: center;
	width: 46px; height: 46px; border-radius: 13px;
	background: var(--e-grad-btn); color: #fff;
}
.edu-prog__badge--kids { background: linear-gradient(135deg, #2196ff, #7b2cff); }
.edu-prog__t { font-family: var(--ff-display); font-size: 23px; font-weight: 800; color: var(--e-ink); margin: 2px 0 4px; }
.edu-prog__sub { font-size: 13.5px; color: var(--e-muted); margin: 0; }
.edu-prog__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 13px; max-width: 62%; }
.edu-prog__list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--e-ink); }
.edu-prog__list li svg { flex: none; color: var(--e-purple); }
.edu-prog__list--kids li svg { color: var(--e-blue); }
.edu-prog__cta { width: fit-content; }
.edu-prog__art {
	position: absolute;
	bottom: 20px; inset-inline-end: 24px;
	width: 168px; height: 148px;
	display: block;
	pointer-events: none;
	border-radius: 18px;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, .8);
	box-shadow: 0 16px 34px rgba(26, 10, 61, .22);
}
.edu-prog__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edu-prog__art--kid img { object-position: 30% center; }
/* Adults card mirrors the kids card: figure sits bottom-right, copy shifts left. */
.edu-prog__art--adult { inset-inline-end: auto; inset-inline-start: 24px; }
.edu-prog--adults .edu-prog__list,
.edu-prog--adults .edu-prog__cta { margin-inline-start: auto; }

/* ============================================================= */
/* 7. COURSES CAROUSEL                                           */
/* ============================================================= */
.edu-courses { background: var(--e-lilac); }
.edu-carousel { position: relative; display: flex; align-items: center; gap: 12px; }
.edu-carousel__viewport { overflow: hidden; flex: 1; padding: 8px 4px 12px; }
.edu-carousel__track { display: flex; gap: 20px; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.edu-course {
	flex: 0 0 calc((100% - 40px) / 3);
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--e-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(91, 20, 230, .06);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease, border-color .28s ease;
}
.edu-course:hover { transform: translateY(-8px); box-shadow: var(--e-shadow); border-color: #d9d0f5; }
.edu-course__thumb { aspect-ratio: 3 / 2; background: #eee; display: grid; place-items: center; overflow: hidden; }
.edu-course__thumb svg { width: 100%; height: 100%; display: block; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.edu-course:hover .edu-course__thumb svg { transform: scale(1.06); }
.edu-course__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; text-align: center; }
.edu-course__t { font-size: 18px; font-weight: 800; color: var(--e-ink); margin: 0 0 4px; }
.edu-course__s { font-size: 13px; color: var(--e-muted); margin: 0 0 12px; min-height: 34px; }

/* Level rail — shared progression signature, scoped to .edu */
.edu-course__levels {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-size: 11.5px; font-weight: 800; color: var(--e-purple);
	margin: 0 0 8px;
}
.edu-course__levels svg { color: var(--e-violet); }
.edu-rail { display: flex; align-items: center; gap: 5px; margin: 0 0 15px; }
.edu-rail__dot {
	flex: none; width: 8px; height: 8px; border-radius: 50%;
	background: #fff; border: 2px solid #d9d0f5;
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
	transition-delay: calc(var(--n, 0) * 70ms);
}
.edu-rail__dot--start { background: var(--e-grad-btn); border-color: transparent; box-shadow: 0 0 0 4px rgba(123, 44, 255, .14); }
.edu-rail__seg { flex: 1; height: 2px; border-radius: 2px; background: var(--e-line); position: relative; overflow: hidden; }
.edu-rail__seg::after {
	content: ""; position: absolute; inset: 0; background: var(--e-grad-btn);
	transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
	transition-delay: calc(var(--n, 0) * 70ms);
}
[dir="rtl"] .edu-rail__seg::after { transform-origin: right; }
.edu-rail__more { flex: none; color: #d9d0f5; font-weight: 800; font-size: 12px; }
.edu-course:hover .edu-rail__dot { background: var(--e-violet); border-color: var(--e-violet); }
.edu-course:hover .edu-rail__dot--start { background: var(--e-grad-btn); }
.edu-course:hover .edu-rail__seg::after { transform: scaleX(1); }

.edu-course__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.edu-course__rate { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--e-ink); }
.edu-course__rate svg { color: var(--e-gold); }
.edu-course__rate strong { font-weight: 800; }
.edu-course__rate em { font-style: normal; color: var(--e-muted); font-size: 12px; }
.edu-course__cat {
	font-size: 11.5px; font-weight: 700; color: var(--e-purple);
	background: rgba(91, 20, 230, .09);
	padding: 4px 12px; border-radius: 999px;
}
.edu-course__cta {
	margin-top: auto;
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	font-family: var(--ff-body, 'Almarai', sans-serif);
	font-size: 13.5px; font-weight: 800; color: #fff;
	background: var(--e-grad-btn);
	border-radius: 12px; padding: 11px 16px;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(91, 20, 230, .22);
	transition: transform .2s ease, box-shadow .2s ease, gap .2s ease;
}
.edu-course__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(91, 20, 230, .32); gap: 9px; }
.edu-course__cta svg { transition: transform .2s ease; }
.edu-course:hover .edu-course__cta svg:last-child { transform: translateX(-3px); }
[dir="ltr"] .edu-course:hover .edu-course__cta svg:last-child { transform: translateX(3px); }
.edu-course__cta:focus-visible { outline: 3px solid rgba(123, 44, 255, .45); outline-offset: 2px; }
.edu-carousel__nav {
	flex: none;
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--e-line);
	color: var(--e-purple);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(91, 20, 230, .12);
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.edu-carousel__nav:hover { background: var(--e-grad-btn); color: #fff; transform: scale(1.08); border-color: transparent; }
.edu-courses__cta { text-align: center; margin-top: 40px; }

/* ============================================================= */
/* 8. TESTIMONIALS                                               */
/* ============================================================= */
.edu-quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.edu-quote {
	position: relative;
	background: #fff;
	border: 1px solid var(--e-line);
	border-radius: 18px;
	padding: 40px 26px 24px;
	margin: 0;
	box-shadow: 0 8px 24px rgba(91, 20, 230, .06);
}
.edu-quote__mark { position: absolute; top: 20px; inset-inline-start: 24px; color: rgba(123, 44, 255, .18); }
.edu-quote__text { font-size: 15px; line-height: 1.9; color: var(--e-ink); margin: 0 0 22px; font-weight: 700; }
.edu-quote__foot { display: flex; align-items: center; gap: 12px; }
.edu-quote__avatar {
	flex: none;
	width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center;
	color: #fff; font-weight: 800; font-size: 18px;
	font-family: var(--ff-display);
}
.edu-quote__who { flex: 1; text-align: start; }
.edu-quote__who strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--e-ink); }
.edu-quote__who em { font-style: normal; font-size: 12px; color: var(--e-muted); }
.edu-quote__stars { display: inline-flex; gap: 1px; color: var(--e-gold); }
.edu-quotes__dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.edu-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: #d6ccf3; cursor: pointer; transition: all .2s ease; padding: 0; }
.edu-dot.is-active { width: 26px; border-radius: 999px; background: var(--e-purple); }

/* ============================================================= */
/* 9. CTA BAND                                                   */
/* ============================================================= */
.edu-cta { padding: 0 24px 72px; }
.edu-cta__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 26px;
	direction: ltr; /* visual: gift left, copy centre, actions right */
	background:
		radial-gradient(90% 160% at 90% 0%, #8b45ff 0%, rgba(139,69,255,0) 55%),
		linear-gradient(135deg, #5b14e6 0%, #7b2cff 100%);
	border-radius: 28px;
	padding: 40px 44px;
	overflow: hidden;
	box-shadow: 0 24px 50px rgba(91, 20, 230, .3);
}
.edu-cta__gift { flex: none; width: 120px; height: 120px; }
.edu-cta__gift svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 20px rgba(20,5,52,.3)); }
.edu-cta__copy { flex: 1; text-align: right; color: #fff; }
.edu-cta__t { font-family: var(--ff-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; margin: 0 0 8px; }
.edu-cta__s { font-size: 15px; margin: 0; color: rgba(255, 255, 255, .9); }
.edu-cta__actions { flex: none; display: flex; flex-direction: column; gap: 12px; width: 260px; }
.edu-cta__actions .edu-btn { width: 100%; }

/* ============================================================= */
/* REVEAL ANIMATIONS                                             */
/* ============================================================= */
.edu [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: calc(var(--i, 0) * 80ms);
}
.edu [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.edu [data-reveal] { opacity: 1; transform: none; transition: none; }
	.edu-hero__photo, .edu-badge, .edu-hero__orbit { animation: none !important; }
	.edu-course, .edu-course__thumb svg, .edu-course__cta, .edu-course__cta svg,
	.edu-rail__dot, .edu-rail__seg::after { transition: none !important; }
	.edu-course:hover { transform: none; }
	.edu-course:hover .edu-course__thumb svg { transform: none; }
	.edu-course:hover .edu-rail__seg::after { transform: scaleX(1); }
}

/* ============================================================= */
/* RESPONSIVE                                                    */
/* ============================================================= */
@media (max-width: 1020px) {
	.edu-fields__grid { grid-template-columns: repeat(3, 1fr); }
	.edu-why__grid { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
	.edu-stats__grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
	.edu-stat:nth-child(3n+1) { border-inline-start: 0; }
	.edu-course { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 900px) {
	.edu-hero__wrap { grid-template-columns: 1fr; gap: 34px; }
	.edu-hero__copy { text-align: center; }
	.edu-hero__cta { justify-content: center; }
	.edu-hero__visual { order: -1; min-height: auto; margin: 0 auto; max-width: 440px; width: 100%; }
	.edu-modes__wrap { grid-template-columns: 1fr; }
	.edu-modes__media { min-height: 240px; }
	.edu-programs__grid { grid-template-columns: 1fr; }
	.edu-quotes__grid { grid-template-columns: 1fr; }
	.edu-quote { display: none; }
	.edu-quote.is-active { display: block; }
	.edu-cta__inner { flex-direction: column; text-align: center; padding: 36px 28px; }
	.edu-cta__copy { text-align: center; }
	.edu-cta__actions { width: 100%; max-width: 340px; }
}

@media (max-width: 620px) {
	/* Hero */
	.edu-hero { padding-top: 100px; padding-bottom: 60px; }
	.edu-hero__title { font-size: clamp(28px, 8vw, 40px); line-height: 1.22; }
	.edu-hero__desc { font-size: 15px; margin-bottom: 26px; }
	.edu-hero__desc br { display: none; }
	.edu-hero__photo { aspect-ratio: 4 / 3; border-radius: 20px; }
	.edu-hero__cta { flex-direction: column; align-items: stretch; }
	.edu-hero__cta .edu-btn { width: 100%; }
	.edu-hero__orbit--1 { width: 108%; height: auto; aspect-ratio: 1; }
	.edu-hero__orbit--2 { width: 82%; height: auto; aspect-ratio: 1; }
	.edu-badge { width: 46px; height: 46px; font-size: 18px; border-radius: 13px; }

	/* Rhythm */
	.edu-section { padding: 46px 0; }
	.edu-container { padding-inline: 18px; }
	.edu-h2 { font-size: clamp(21px, 6.2vw, 28px); margin-bottom: 32px; }

	/* Fields */
	.edu-fields { border-radius: 30px 30px 0 0; padding-top: 46px; }
	.edu-fields__grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
	.edu-field { padding: 22px 12px; }
	.edu-field__ico { width: 54px; height: 54px; margin-bottom: 12px; }

	/* Why */
	.edu-why { padding: 40px 16px; border-radius: 22px; }
	.edu-why__grid { grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 22px; }

	/* Modes */
	.edu-mode { padding: 18px 18px; }
	.edu-mode__t { font-size: 18px; }
	.edu-mode__ico { width: 54px; height: 54px; }
	.edu-modes__media { min-height: 200px; }

	/* Stats — 2-up, drop dividers, left-aligned pairs */
	.edu-stats .edu-container { padding: 26px 18px; }
	.edu-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
	.edu-stat { justify-content: flex-start; gap: 12px; }
	.edu-stat + .edu-stat { border-inline-start: 0; }
	.edu-stat__ico { width: 44px; height: 44px; }
	.edu-stat__n { font-size: 23px; }
	.edu-stat__l { font-size: 11.5px; }

	/* Courses */
	.edu-course { flex-basis: 100%; }
	.edu-carousel { gap: 6px; }
	.edu-carousel__nav { width: 40px; height: 40px; }
	.edu-courses__cta { margin-top: 30px; }

	/* Programs — photo becomes a full-width banner beneath the copy */
	.edu-prog { min-height: auto; padding: 26px 22px 26px; }
	.edu-prog__list,
	.edu-prog--adults .edu-prog__list,
	.edu-prog--adults .edu-prog__cta { max-width: 100%; margin-inline-start: 0; }
	.edu-prog__art,
	.edu-prog__art--adult {
		position: static;
		inset-inline-end: auto; inset-inline-start: auto;
		width: 100%; height: 168px;
		margin-top: 20px;
		opacity: 1;
		border-width: 0;
		box-shadow: 0 12px 26px rgba(26, 10, 61, .18);
	}

	/* Testimonials + CTA */
	.edu-quote { padding: 34px 22px 22px; }
	.edu-cta { padding: 0 16px 52px; }
	.edu-cta__inner { padding: 32px 22px; gap: 18px; }
	.edu-cta__gift { width: 90px; height: 90px; }
	.edu-cta__t { font-size: 20px; }
	.edu-cta__s { font-size: 14px; }
}

@media (max-width: 380px) {
	.edu-fields__grid,
	.edu-why__grid,
	.edu-stats__grid { grid-template-columns: 1fr; }
	.edu-stat { justify-content: center; }
}

/* === LTR activation (inert under RTL) — courses carousel + modes ==========
   Scoped to [dir="ltr"], no effect on the current Arabic build. */
[dir="ltr"] .edu-carousel__nav svg { transform: scaleX(-1); }
[dir="ltr"] .edu-mode:hover { transform: translateX(6px); }
[dir="ltr"] .edu-modes__list,
[dir="ltr"] .edu-modes__media { direction: ltr; }