/* ============================================================
   Vocabulary-game page - new-site design language (matches the
   Business/About pages: blue hero panel, light cards, gradient CTA).
   ============================================================ */

/* ---------------- HERO ---------------- */
.ghero { position: relative; overflow: hidden; padding-bottom: min(3vw, 58px); }
.ghero::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1;
	background: radial-gradient(85% 95% at 60% 40%, #F4F7FF 0%, #EDF2FF 100%);
	border-radius: 0 0 min(3.4vw, 66px) min(3.4vw, 66px);
}
.ghero__inner {
	position: relative; z-index: 1;
	width: min(1394px, 100% - 2 * var(--shell-pad)); margin-inline: auto;
	display: flex; align-items: center; gap: min(3vw, 58px);
	padding-top: min(9vw, 172px); padding-bottom: min(3.2vw, 62px);
}
.ghero__text { flex: 0 0 min(42vw, 806px); display: flex; flex-direction: column; gap: 24px; }
.ghero__head { display: flex; flex-direction: column; gap: 12px; }
.ghero__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 700; font-size: min(2.08vw, 40px); line-height: 1.2; color: #0A2869; margin: 0; }
.ghero__sub { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: min(1.46vw, 28px); line-height: 1.3; color: #626B96; margin: 0; }
.ghero__lead { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: min(1.25vw, 24px); line-height: 1.5; color: #626B96; margin: 0; }
.ghero__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ghero__cta { font-size: 18px; padding: 14px 34px; }
.ghero__note { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 15px; color: #626B96; margin: 0; }

/* browser-style frame around the live-game screenshot */
.ghero__visual { flex: 1 1 auto; min-width: 0; }
.ghero__frame {
	display: block; background: #fff; border-radius: 20px; overflow: hidden;
	box-shadow: 0 24px 60px rgba(37, 58, 71, .18);
	transition: transform .3s ease, box-shadow .3s ease;
}
.ghero__frame:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(37, 58, 71, .24); }
.ghero__frame-bar { display: flex; gap: 7px; padding: 12px 16px; background: #EFF2FF; }
.ghero__frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9D4F2; }
.ghero__frame-bar i:first-child { background: #8C8CFE; }
.ghero__shot { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
	.ifal-js .ghero__text   { animation: ghero-enter .7s .10s cubic-bezier(.22,.61,.36,1) backwards; }
	.ifal-js .ghero__visual { animation: ghero-enter .9s .18s cubic-bezier(.22,.61,.36,1) backwards; }
}
@keyframes ghero-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------------- FEATURES ---------------- */
.gfeat { background: #fff; padding-block: 90px 100px; }
.gfeat__inner { width: min(1394px, 100% - 2 * var(--shell-pad)); margin-inline: auto; display: flex; flex-direction: column; gap: 60px; align-items: center; }
.gfeat .gfeat__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 32px; color: #0A2869; margin: 0; text-align: center; }
.gfeat__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; width: 100%; }
.gfeat__card {
	position: relative; overflow: hidden;
	background: #EFF2FF; border-radius: 24px;
	min-height: 240px; padding: 40px 44px;
	display: flex; align-items: center;
	transition: transform .25s ease, box-shadow .25s ease;
}
.gfeat__card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(140, 140, 254, .22); }
.gfeat__card-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.gfeat__card-title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; color: #052238; margin: 0; }
.gfeat__card-body { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5; color: #626B96; margin: 0; }
/* ---------------- FAQ (same look as the homepage accordion) ---------------- */
.gfaq { position: relative; background: #F6F8FF; padding-block: 90px; }
.faq__inner { position: relative; z-index: 1; width: min(1394px, 100% - 2 * var(--shell-pad)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.faq__header { display: flex; flex-direction: column; align-items: center; text-align: center; }
.faq__titles { display: flex; flex-direction: column; gap: 8px; }
.gfaq .faq__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 32px; color: #0A2869; margin: 0; }
.faq__list { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.faq__item {
	background: #fff; border-radius: 18px; box-shadow: 0 4px 6px rgba(117, 173, 209, .3);
	padding: 24px 20px; overflow: hidden;
}
.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;
	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; }

/* ---------------- STUDENT QUOTE ---------------- */
.gquote { background: #fff; padding-block: 90px; }
.gquote__inner { width: min(1394px, 100% - 2 * var(--shell-pad)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.gquote .gquote__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 32px; color: #0A2869; margin: 0; text-align: center; }
/* four big numbers (original page stats) */
.gstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; }
.gstat {
	background: #EFF2FF; border-radius: 24px; padding: 34px 18px;
	display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
	transition: transform .25s ease, box-shadow .25s ease;
}
.gstat:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(140, 140, 254, .22); }
.gstat__num { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 900; font-size: 46px; line-height: 1.1; color: #1582FF; }
.gstat__label { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 500; font-size: 17px; color: #626B96; }

.gquote__card {
	position: relative; margin: 0; width: 100%;
	background: #EDF5FF; border-radius: 24px; padding: 48px 56px;
	display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center;
}
.gquote__text { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 500; font-size: 24px; line-height: 1.7; color: #19235F; margin: 0; max-width: 900px; }
.gquote__by { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 18px; color: #626B96; }

/* ---------------- CTA BANNER (same gradient family as the contact card) ---------------- */
.gcta { background: #fff; padding-block: 0 90px; }
.gcta__inner { width: min(1394px, 100% - 2 * var(--shell-pad)); margin-inline: auto; }
.gcta__card {
	position: relative; overflow: hidden; border-radius: 40px;
	padding: 64px 48px;
	display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
	background:
		radial-gradient(36% 58% at 15% 24%, rgba(0, 84, 215, .90), transparent 74%),
		radial-gradient(40% 55% at 28% 100%, rgba(0, 166, 255, .60), transparent 72%),
		linear-gradient(115deg, #1582FF 0%, #0B5ED7 100%);
}
.gcta__title { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 32px; color: #fff; margin: 0; }
.gcta__sub { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 20px; color: rgba(255, 255, 255, .9); margin: 0; }
.gcta__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; list-style: none; margin: 6px 0 0; padding: 0; }
.gcta__points li {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 500; font-size: 17px; color: #fff;
}
.gcta__points svg { color: #8FE3B0; }
.gcta__btn {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 14px; padding: 14px 40px; border-radius: 999px;
	background: #fff; color: #0B5ED7;
	font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 18px;
	box-shadow: 0 8px 22px rgba(0, 30, 90, .25);
	transition: transform .2s ease, box-shadow .2s ease;
}
.gcta__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 30, 90, .32); color: #0B5ED7; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
	.gfeat__cards { grid-template-columns: minmax(0, 630px); }
	.gfeat__card { min-height: 200px; }
	.gfeat__card-text { max-width: 70%; }
	}
@media (max-width: 980px) {
	.ghero__inner { flex-direction: column; align-items: stretch; gap: 28px; text-align: center; padding-top: 110px; }
	.ghero__text { flex-basis: auto; align-items: center; }
	.ghero__title { font-size: 30px; } .ghero__sub { font-size: 20px; } .ghero__lead { font-size: 17px; }
	.ghero__actions { align-items: center; }
	.ghero__visual { width: 100%; }

	.gfeat { padding-block: 56px 60px; }
	.gfeat .gfeat__title, .gquote .gquote__title, .gfaq .faq__title { font-size: 26px; }
	.gfaq, .gquote { padding-block: 56px; }
	.gstats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.gstat { padding: 22px 12px; }
	.gstat__num { font-size: 32px; }
	.gstat__label { font-size: 14px; }
	.gquote__card { padding: 32px 24px; }
	.gquote__text { font-size: 19px; }

	.gcta { padding-bottom: 56px; }
	.gcta__card { border-radius: 28px; padding: 44px 24px; }
	.gcta__title { font-size: 24px; }
	.gcta__sub { font-size: 17px; }
}
@media (max-width: 560px) {
	.gfeat__card { padding: 26px; min-height: 168px; }
}

/* ==== Mobile type scale - aligned with the sitewide Figma mobile pass ==== */
@media (max-width: 760px) {
	.ghero__title { font-size: 22px; }
	.ghero__sub { font-size: 16px; font-weight: 700; }
	.ghero__lead { font-size: 16px; }
	.gfeat .gfeat__title, .gquote .gquote__title, .gfaq .faq__title { font-size: 16px; }
	.gfeat__card-title { font-size: 18px; }
	.gfeat__card-body { font-size: 12px; }
	.gquote__text { font-size: 16px; }
	.gquote__by { font-size: 14px; }
	.gcta__title { font-size: 22px; }
	.gcta__sub { font-size: 16px; }
}