/* ============================================================
   Tutorio landing page - modern design layer.
   Loaded after index-assets/style.css and intentionally
   overrides the legacy theme throughout.
   ============================================================ */

:root {
	--ix-navy-900: #081a2e;
	--ix-navy-800: #0b2340;
	--ix-navy-700: #103154;
	--ix-blue: #2196f3;
	--ix-blue-deep: #1565c0;
	--ix-cyan: #00bcd4;
	--ix-mint: #69f0ae;
	--ix-ink: #0f2038;
	--ix-body: #55657a;
	--ix-muted: #8a99a8;
	--ix-line: rgba(33,150,243,0.12);
	--ix-card-shadow: 0 10px 30px rgba(13,46,84,0.06);
	--ix-card-shadow-hover: 0 26px 52px rgba(13,46,84,0.14);
	--ix-radius: 20px;
}

/* clip (not hidden) so iOS Safari can't pan horizontally; set on both html and body */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
	html, body { overflow-x: hidden; }
}

body { color: var(--ix-body); }
h1, h2, h3, h4, h5, h6 { color: var(--ix-ink); }
::selection { background: rgba(33,150,243,0.25); }

/* ---- Buttons (override legacy theme) ---- */
.btn.btn-primary {
	background: linear-gradient(135deg, #1e88e5, #00acc1) !important;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	letter-spacing: 0.2px;
	padding: 13px 30px !important;
	box-shadow: 0 12px 28px -8px rgba(30,136,229,0.55);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
	color: #fff !important;
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -8px rgba(30,136,229,0.6);
}
.btn.btn-default {
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: 13px 30px !important;
	border: 2px solid rgba(33,150,243,0.35);
	color: var(--ix-blue-deep);
	transition: all 0.2s ease;
}
.btn.btn-default:hover {
	background: rgba(33,150,243,0.08) !important;
	border-color: var(--ix-blue) !important;
	color: var(--ix-blue-deep) !important;
}

/* ---- Navbar ---- */
.nav-item { display: flex; align-items: center; }
.ix-nav {
	padding: 12px 0;
	background: rgba(255,255,255,0.82);
	backdrop-filter: blur(16px) saturate(1.5);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	border-bottom: 1px solid rgba(33,150,243,0.10);
	box-shadow: 0 12px 30px -22px rgba(13,71,161,0.35);
	transition: padding 0.25s ease, box-shadow 0.25s ease;
}
.ix-brand { padding: 0; display: flex; align-items: center; }
.ix-brand:hover .ix-brand-logo { transform: scale(1.04); }
/* Explicit width: Safari won't derive SVG width from the viewBox when width is auto. */
.ix-brand-logo { height: 40px; width: 157px; display: block; transition: transform 0.2s ease; }
.ix-nav .navbar-nav .nav-item { margin-left: 4px; }
.ix-nav .navbar-nav .nav-link {
	color: #45536e;
	font-size: 15px;
	font-weight: 500;
	padding: 9px 14px;
	border-radius: 10px;
	transition: color 0.2s ease, background 0.2s ease;
}
.ix-nav .navbar-nav .nav-link:hover,
.ix-nav .navbar-nav .nav-link.active {
	color: #1976d2;
	background: rgba(33,150,243,0.08);
}
.ix-nav .navbar-nav .nav-item.btn-download { margin-left: 16px; }
.ix-nav .navbar-nav .nav-item.btn-download .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #1e88e5, #00acc1);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 10px 26px;
	border-radius: 999px;
	box-shadow: 0 8px 20px -6px rgba(30,136,229,0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ix-nav .navbar-nav .nav-item.btn-download .nav-link:hover {
	background: linear-gradient(135deg, #1976d2, #0097a7);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -6px rgba(30,136,229,0.55);
}
.ix-nav .navbar-nav .nav-item.btn-download .nav-link i { font-size: 15px; }

@media screen and (max-width: 991.98px) {
	.ix-brand-logo { height: 34px; width: 133px; }
	.ix-nav .navbar-collapse { padding-bottom: 12px; }
	.ix-nav .navbar-nav .nav-item { margin-left: 0; }
	.ix-nav .navbar-nav .nav-link { border-radius: 8px; }
	.btn-download { margin-top: 12px !important; justify-content: center !important; }
	.ix-nav .navbar-nav .nav-item.btn-download { margin-left: 0; }
	.ix-nav .navbar-nav .nav-item.btn-download .nav-link { justify-content: center; width: 170px; }
}

/* ---- Announcement ribbon ---- */
.ix-ribbon {
	width: 100%;
	padding: 13px 8px 11px;
	color: #fff !important;
	font-size: 14.5px;
	background:
		radial-gradient(600px 120px at 20% 0%, rgba(255,255,255,0.14), transparent 70%),
		linear-gradient(90deg, #0d47a1, #1976d2 45%, #0097a7);
	position: relative;
	overflow: hidden;
}
.ix-ribbon::after {
	content: "";
	position: absolute; top: 0; bottom: 0; width: 60px;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
	transform: skewX(-20deg);
	animation: ixSheen 6s ease-in-out infinite;
	left: -80px;
}
@keyframes ixSheen {
	0%, 60% { left: -80px; }
	100% { left: 110%; }
}
.ix-ribbon .rotating-text { color: #fff !important; }
#ribbon a, #ribbon a:hover { text-decoration: none; color: #fff; }

.rotating-text p { display: inline-flex; margin: 0; vertical-align: top; }
.rotating-text .word { position: absolute; display: inline-flex; opacity: 0; }
.word-length { display: inline-block; transition: 1s ease; }
.word-container { position: relative; }
.rotating-text .word .letter { transform-origin: center center 25px; }
.rotating-text .word .letter.out { transform: rotateX(90deg); transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2); }
.rotating-text .word .letter.in { transition: 0.38s ease; }
.rotating-text .word .letter.behind { transform: rotateX(-90deg); }

/* ---- Hero ---- */
/* #home.ix-hero: must out-specificity the legacy `#home { background:url(banner/1.png) }` */
#home.ix-hero, .ix-hero {
	position: relative;
	background:
		radial-gradient(1100px 640px at 88% -12%, rgba(0,188,212,0.26), transparent 62%),
		radial-gradient(950px 640px at -12% 34%, rgba(33,150,243,0.24), transparent 62%),
		radial-gradient(700px 420px at 55% 110%, rgba(105,240,174,0.10), transparent 65%),
		linear-gradient(180deg, var(--ix-navy-900) 0%, #0e2a49 60%, #103154 100%);
	color: #fff;
	overflow: hidden;
	/* Safari lets 3D-transformed children (GSAP rotationX/Y) escape overflow:hidden
	   unless the clipping box is its own stacking context - that escape was the
	   horizontal scroll on iOS. */
	isolation: isolate;
}
.tx-showcase { isolation: isolate; }
/* subtle grid texture over the hero */
.ix-hero::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(900px 600px at 40% 20%, rgba(0,0,0,0.9), transparent 75%);
	-webkit-mask-image: radial-gradient(900px 600px at 40% 20%, rgba(0,0,0,0.9), transparent 75%);
	pointer-events: none;
}
.ix-hero .banner-caption { padding-top: 40px; position: relative; z-index: 2; }
.ix-hero h1, .ix-hero .hero-text h1 { color: #fff; font-weight: 800; font-size: 54px; line-height: 1.12; letter-spacing: -1.2px; text-transform: none; }
.ix-hero h1 .grad {
	background: linear-gradient(90deg, #4fc3f7, #00e5ff, #69f0ae);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ix-hero p.lead-text { color: rgba(255,255,255,0.85); font-size: 18px; max-width: 520px; line-height: 1.75; }
.ix-hero .hero-text { padding: 130px 0 70px; }
@media screen and (max-width: 767.98px) {
	/* nav is in-flow on mobile, so the desktop top offset is just dead space */
	.ix-hero .banner-caption { padding-top: 0; padding-bottom: 72px; }
	.ix-hero .hero-text { padding: 36px 4px 0; }
	.ix-hero h1, .ix-hero .hero-text h1 { font-size: clamp(31px, 9.4vw, 40px); line-height: 1.08; letter-spacing: -0.8px; margin-bottom: 14px; text-wrap: balance; }
	.ix-hero p.lead-text { font-size: 16px; line-height: 1.6; margin-bottom: 24px; text-wrap: pretty; }
	.ix-hero .hero-text .btn.btn-primary,
	.ix-hero .hero-text .btn.btn-ghost { display: block; width: 100%; margin: 0 0 12px !important; padding: 14px 20px !important; font-size: 16px; text-align: center; }
	.ix-hero-trust { gap: 8px 18px; margin-top: 18px; }
	.ix-hero-trust .item { font-size: 13px; }
	.ix-badge { font-size: 12px; padding: 6px 12px; margin-bottom: 16px; line-height: 1.3; text-wrap: balance; }
	.ix-badge .dot { flex: 0 0 8px; }
	.ix-orb.o1 { width: 150px; height: 150px; top: 4%; }
	.ix-orb.o3 { display: none; }
	.ix-ribbon { font-size: 13px; line-height: 1.45; padding: 9px 4px 8px; }
}

.ix-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.18);
	color: #b3e5fc; border-radius: 999px;
	padding: 7px 16px; font-size: 13px; font-weight: 600;
	margin-bottom: 22px; backdrop-filter: blur(4px);
}
.ix-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ix-mint); box-shadow: 0 0 0 0 rgba(105,240,174,0.7); animation: ixPulse 2s infinite; display: inline-block; }
@keyframes ixPulse { 0% { box-shadow: 0 0 0 0 rgba(105,240,174,0.6); } 70% { box-shadow: 0 0 0 10px rgba(105,240,174,0); } 100% { box-shadow: 0 0 0 0 rgba(105,240,174,0); } }

/* legacy theme paints hero buttons white with #4776e6 text - force the gradient pill */
.ix-hero .hero-text .btn.btn-primary,
.ix-hero .hero-text .btn.btn-primary:not(:disabled):not(.disabled):active,
.ix-hero .btn-primary {
	background: linear-gradient(135deg, #1e88e5, #00acc1) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 10px 30px rgba(33,150,243,0.45);
}
.ix-hero .hero-text .btn.btn-primary:hover { color: #fff !important; }
/* GSAP animates these buttons' transform (hero intro, magnetic hover); a CSS
   transition on transform fights the tween and left the CTA stuck 34px low on
   mobile, overlapping the trust row. Keep the transition off transform here. */
.ix-hero .hero-text .btn.btn-primary,
.ix-hero .hero-text .btn.btn-ghost { transition-property: background, box-shadow, filter, color; }
.btn-ghost {
	background: rgba(255,255,255,0.08) !important;
	border: 1px solid rgba(255,255,255,0.25) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: 13px 28px !important;
	backdrop-filter: blur(4px);
	transition: background 0.2s ease, transform 0.2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.18) !important; transform: translateY(-2px); }

/* store badges */
.ix-hero .hero-text img[alt*="Google Play"],
.ix-hero .hero-text img[alt*="App Store"] {
	border-radius: 10px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ix-hero .hero-text a:hover img[alt*="Google Play"],
.ix-hero .hero-text a:hover img[alt*="App Store"] {
	transform: translateY(-3px);
	box-shadow: 0 14px 26px rgba(0,0,0,0.35);
}

.ix-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.5; animation: ixFloat 9s ease-in-out infinite; pointer-events: none; }
.ix-orb.o1 { width: 220px; height: 220px; background: radial-gradient(circle at 30% 30%, rgba(0,229,255,0.5), transparent 70%); top: 10%; left: -60px; }
.ix-orb.o2 { width: 160px; height: 160px; background: radial-gradient(circle at 30% 30%, rgba(105,240,174,0.4), transparent 70%); bottom: 8%; right: 4%; animation-delay: -3s; }
.ix-orb.o3 { width: 120px; height: 120px; background: radial-gradient(circle at 30% 30%, rgba(33,150,243,0.6), transparent 70%); top: 20%; right: 30%; animation-delay: -6s; }
@keyframes ixFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-28px); } }

/* GSAP motion layer (assets/js/pages/index_gsap.js) */
/* The head adds gs-pending so the hero never flashes before its intro. */
html.gs-pending .ix-hero .hero-text > *,
html.gs-pending .ix-hero .phone-mockup { opacity: 0; }
/* Pointer parallax rides on `translate` so it composes with ixFloat's transform. */
.ix-orb { translate: var(--px, 0px) var(--py, 0px); }
/* Headline word masks; the padding keeps descenders from being clipped. */
.gs-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.gs-word { display: inline-block; will-change: transform; }
.gs-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
	background: linear-gradient(90deg, #00e5ff, #2196f3 55%, #69f0ae);
	transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

.ix-hero-trust { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.ix-hero-trust .item { color: rgba(255,255,255,0.75); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.ix-hero-trust .item i { color: var(--ix-mint); }

/* phone mockup halo */
.phone-mockup > div { position: relative; }
.phone-mockup > div::before {
	content: "";
	position: absolute; inset: -30px -10px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(0,229,255,0.18), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}

/* ---- Section rhythm & titles ---- */
.section-title { margin: 0 0 56px; }
.section-title h2 { font-weight: 800; letter-spacing: -0.6px; color: var(--ix-ink); }
.section-title p { color: var(--ix-body); line-height: 1.75; }
.ix-kicker { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 700; color: var(--ix-blue); display: block; margin-bottom: 10px; }
.ix-grad {
	background: linear-gradient(90deg, #2196f3, #00bcd4);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
}

/* ---- Stats bar ---- */
.ix-stats { background: #fff; position: relative; z-index: 5; }
.ix-stats .inner {
	background: linear-gradient(180deg, #ffffff, #fbfdff);
	border-radius: var(--ix-radius);
	box-shadow: 0 24px 60px rgba(13, 46, 84, 0.14);
	margin-top: -56px; padding: 34px 10px 28px;
	border: 1px solid var(--ix-line);
}
.ix-stat { position: relative; }
.ix-stat + .ix-stat::before {
	content: "";
	position: absolute; left: 0; top: 18%; bottom: 18%;
	border-left: 1px solid rgba(33,150,243,0.10);
}
.ix-stat h3 { font-size: 36px; font-weight: 800; color: var(--ix-navy-700); margin-bottom: 2px; letter-spacing: -1px; }
.ix-stat h3 span { color: var(--ix-blue); }
.ix-stat p { color: #6c7a89; margin: 0; font-size: 14px; }
@media (max-width: 767.98px) { .ix-stat:nth-child(3)::before { display: none; } .ix-stat { padding: 8px 0; } }

/* ---- Tutoring showcase ---- */
.ix-tutoring {
	background:
		radial-gradient(900px 500px at 110% 10%, rgba(33,150,243,0.10), transparent 60%),
		linear-gradient(180deg, #f4f9ff 0%, #eef6ff 100%);
	padding: 100px 0;
}
.ix-tutoring h2 { font-weight: 800; color: var(--ix-navy-700); letter-spacing: -0.5px; }
/* Feature "hyper cards" - shared by the tutor grid and the student grid.
   Each card carries --fa/--fb accent colours; hover lights a gradient
   hairline border, a cursor-tracking spotlight (--mx/--my set from JS)
   and flips the icon tile to a full gradient. */
.ix-tutor-card, .ix-feature-card {
	--fa: #2196f3; --fb: #21cbf3;
	--mx: 50%; --my: 0%;
	background:
		radial-gradient(420px 260px at var(--mx) var(--my), color-mix(in srgb, var(--fa) 9%, transparent), transparent 70%),
		linear-gradient(165deg, #fff 60%, color-mix(in srgb, var(--fa) 4%, #fff));
	border-radius: 22px; padding: 32px 28px; height: 100%;
	border: 1px solid transparent;
	box-shadow: var(--ix-card-shadow);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
	position: relative; overflow: hidden; text-align: left;
	isolation: isolate;
}
/* gradient hairline border (masked pseudo so the background can glow through) */
.ix-tutor-card::before, .ix-feature-card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--fa) 45%, transparent), rgba(13,46,84,0.08) 40%, color-mix(in srgb, var(--fb) 45%, transparent));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0.55; transition: opacity 0.35s ease;
	pointer-events: none;
}
/* soft accent bloom in the top corner + diagonal shine that sweeps on hover */
.ix-tutor-card::after, .ix-feature-card::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background:
		radial-gradient(240px 240px at 108% -8%, color-mix(in srgb, var(--fb) 16%, transparent), transparent 70%),
		linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0) 54%, transparent 70%);
	background-repeat: no-repeat;
	background-size: 100% 100%, 260% 100%;
	background-position: 0 0, 130% 0;
	transition: background-position 0s;
}
.ix-tutor-card:hover, .ix-feature-card:hover {
	transform: translateY(-10px) scale(1.015);
	box-shadow:
		0 30px 60px -18px color-mix(in srgb, var(--fa) 38%, rgba(13,46,84,0.25)),
		0 12px 28px rgba(13,46,84,0.10);
}
.ix-tutor-card:hover::before, .ix-feature-card:hover::before { opacity: 1; }
.ix-tutor-card:hover::after, .ix-feature-card:hover::after {
	background-position: 0 0, -60% 0;
	transition: background-position 0s, background-position 0.9s ease 0s;
}
.ix-tutor-card .icon-wrap, .ix-feature-card .icon-wrap {
	width: 62px; height: 62px; border-radius: 18px;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--fa) 14%, #fff), color-mix(in srgb, var(--fb) 18%, #fff));
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--fa) 22%, transparent),
		0 6px 16px -6px color-mix(in srgb, var(--fa) 35%, transparent);
	display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, box-shadow 0.35s ease;
	position: relative; z-index: 1;
}
.ix-tutor-card:hover .icon-wrap, .ix-feature-card:hover .icon-wrap {
	transform: scale(1.12) rotate(-6deg) translateY(-3px);
	background: linear-gradient(135deg, var(--fa), var(--fb));
	box-shadow:
		0 14px 28px -8px color-mix(in srgb, var(--fa) 65%, transparent),
		0 0 0 6px color-mix(in srgb, var(--fa) 10%, transparent);
}
.ix-tutor-card .icon-wrap i, .ix-feature-card .icon-wrap i {
	font-size: 27px; color: var(--fa);
	transition: color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ix-tutor-card:hover .icon-wrap i, .ix-feature-card:hover .icon-wrap i {
	color: #fff; transform: scale(1.1);
}
.ix-tutor-card h3, .ix-feature-card h3 {
	font-size: 19.5px; font-weight: 800; letter-spacing: -0.2px;
	color: var(--ix-navy-700); margin-bottom: 10px;
	position: relative; z-index: 1; width: fit-content;
	background-image: linear-gradient(90deg, var(--fa), var(--fb));
	background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 100%;
	padding-bottom: 4px;
	transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ix-tutor-card:hover h3, .ix-feature-card:hover h3 { background-size: 100% 3px; }
.ix-tutor-card p, .ix-feature-card p {
	color: #5b6b7c; font-size: 14.5px; margin: 0; line-height: 1.7;
	position: relative; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.ix-tutor-card, .ix-feature-card, .ix-tutor-card *, .ix-feature-card *,
	.ix-tutor-card::before, .ix-feature-card::before,
	.ix-tutor-card::after, .ix-feature-card::after { transition: none !important; }
}
/* per-card accents for the tutor grid (cards carry no colour class, so key off position) */
.ix-tutoring .row > div:nth-child(1) .ix-tutor-card { --fa: #2196f3; --fb: #21cbf3; }
.ix-tutoring .row > div:nth-child(2) .ix-tutor-card { --fa: #7c5cfc; --fb: #b18cff; }
.ix-tutoring .row > div:nth-child(3) .ix-tutor-card { --fa: #0ea5a4; --fb: #2dd4bf; }
.ix-tutoring .row > div:nth-child(4) .ix-tutor-card { --fa: #16a34a; --fb: #4ade80; }
.ix-tutoring .row > div:nth-child(5) .ix-tutor-card { --fa: #f59e0b; --fb: #fbbf24; }
.ix-tutoring .row > div:nth-child(6) .ix-tutor-card { --fa: #f4511e; --fb: #fb8c4c; }

.ix-tutor-cta {
	margin-top: 46px; border-radius: 22px; padding: 42px 36px;
	background: linear-gradient(120deg, #0e2a49, #14528f 55%, #1976d2);
	color: #fff; position: relative; overflow: hidden;
	box-shadow: 0 24px 60px rgba(13,46,84,0.28);
}
.ix-tutor-cta::after {
	content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
	background: radial-gradient(circle, rgba(0,229,255,0.35), transparent 70%);
}
.ix-tutor-cta::before {
	content: ""; position: absolute; left: -110px; bottom: -140px; width: 320px; height: 320px; border-radius: 50%;
	background: radial-gradient(circle, rgba(33,150,243,0.45), transparent 70%);
}
.ix-tutor-cta .cta-kicker {
	text-transform: uppercase; letter-spacing: 3px; font-size: 11px; font-weight: 700;
	color: #7fd4ff; display: block; margin-bottom: 8px;
}
.ix-tutor-cta h3 { color: #fff; font-weight: 800; font-size: 28px; }
.ix-tutor-cta p { color: rgba(255,255,255,0.85); max-width: 620px; margin-bottom: 0; }
.ix-tutor-cta .cta-points { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; }
.ix-tutor-cta .cta-points span { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.92); white-space: nowrap; }
.ix-tutor-cta .cta-points i { color: var(--ix-mint); margin-right: 6px; }
.ix-tutor-cta .btn-light {
	font-weight: 700; color: #0e2a49; border-radius: 999px; padding: 12px 30px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ix-tutor-cta .btn-light:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.26); }
@media (max-width: 767px) {
	.ix-tutor-cta { padding: 34px 26px; text-align: center; }
	.ix-tutor-cta p { margin-left: auto; margin-right: auto; }
	.ix-tutor-cta .cta-points { justify-content: center; }
}

/* ---- Student features ---- */
.ix-features {
	padding: 100px 0 80px;
	background:
		radial-gradient(800px 460px at -10% 0%, rgba(0,188,212,0.07), transparent 60%),
		radial-gradient(900px 520px at 110% 90%, rgba(33,150,243,0.08), transparent 60%),
		#fff;
}
.ix-features h2 { font-weight: 800; color: var(--ix-navy-700); letter-spacing: -0.5px; line-height: 1.2; }
.ix-lead { color: #5b6b7c; font-size: 16.5px; max-width: 640px; margin: 14px auto 8px; line-height: 1.7; }
/* Student cards share the hyper-card base above; only the accents differ */
.ix-feature-card.c1 { --fa: #2196f3; --fb: #21cbf3; }
.ix-feature-card.c2 { --fa: #0ea5a4; --fb: #2dd4bf; }
.ix-feature-card.c3 { --fa: #7c5cfc; --fb: #b18cff; }
.ix-feature-card.c4 { --fa: #f59e0b; --fb: #fbbf24; }
.ix-feature-card.c5 { --fa: #16a34a; --fb: #4ade80; }
.ix-feature-card.c6 { --fa: #f4511e; --fb: #fb8c4c; }
.ix-features-cta { border-radius: 999px; padding: 14px 38px !important; font-weight: 700; box-shadow: 0 12px 30px rgba(33,150,243,0.35); margin-top: 12px; }
.ix-cta-note { color: var(--ix-muted); font-size: 13px; margin-top: 12px; }

/* ---- Carousel dots (testimonials) ---- */
.owl-theme .owl-dots .owl-dot span {
	width: 8px; height: 8px; margin: 4px;
	background: rgba(33,150,243,0.25);
	transition: all 0.25s ease;
}
.owl-theme .owl-dots .owl-dot.active span {
	background: var(--ix-blue);
	width: 26px; border-radius: 999px;
}

/* ---- How it works ---- */
.ix-how {
	padding: clamp(64px, 9vw, 110px) 0;
	background:
		radial-gradient(760px 420px at 50% -10%, rgba(33,150,243,0.07), transparent 60%),
		#fff;
	overflow: hidden;
}
.ix-steps {
	--step-gap: clamp(16px, 2.6vw, 36px);
	--conn: 0;               /* connector progress 0..1, driven by scroll (index_gsap.js) */
	list-style: none; margin: 18px 0 0; padding: 0;
	display: grid; gap: var(--step-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	position: relative;
}
/* the connector: a faint track plus a growing gradient beam along the icon row */
.ix-steps::before, .ix-steps::after {
	content: ""; position: absolute; pointer-events: none; z-index: 0;
	left: calc(100% / 6); right: calc(100% / 6);
	top: calc(clamp(24px, 3vw, 32px) + clamp(28px, 3vw, 34px));
	height: 3px; border-radius: 999px;
}
.ix-steps::before { background: rgba(33,150,243,0.12); }
.ix-steps::after {
	background: linear-gradient(90deg, #2196f3, #7c5cfc, #ff9f1c);
	transform: scaleX(var(--conn)); transform-origin: left center;
	box-shadow: 0 0 14px rgba(33,150,243,0.45);
}
.ix-step-col { position: relative; z-index: 1; min-width: 0; }
.ix-step {
	--mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg; --lift: 0px;
	text-align: center; position: relative; height: 100%; isolation: isolate;
	background: #fff; border-radius: var(--ix-radius);
	padding: clamp(24px, 3vw, 32px) clamp(18px, 2.4vw, 28px) clamp(22px, 2.6vw, 28px);
	border: 1px solid rgba(33,150,243,0.14);
	box-shadow: 0 8px 26px rgba(13,46,84,0.05);
	transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
	transform-style: preserve-3d;
	transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
	outline: none;
}
/* gradient hairline that fades in with the spotlight */
.ix-step::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
	background: linear-gradient(135deg, var(--sa), var(--sb));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.ix-step-glow {
	position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
	background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--sa) 16%, transparent), transparent 65%);
	opacity: 0; transition: opacity 0.35s ease;
}
.ix-step:hover, .ix-step:focus-visible, .ix-step.is-active {
	border-color: transparent;
	box-shadow: 0 24px 54px rgba(13,46,84,0.13), 0 0 0 1px color-mix(in srgb, var(--sa) 25%, transparent);
}
.ix-step:hover::before, .ix-step:focus-visible::before, .ix-step.is-active::before,
.ix-step:hover .ix-step-glow, .ix-step:focus-visible .ix-step-glow, .ix-step.is-active .ix-step-glow { opacity: 1; }
.ix-step:hover { --lift: -6px; }

.ix-step .icon-wrap {
	width: clamp(56px, 6vw, 68px); height: clamp(56px, 6vw, 68px); margin: 0 auto 18px; border-radius: 20px;
	background: linear-gradient(135deg, var(--sa), var(--sb));
	color: #fff; font-size: clamp(20px, 2.2vw, 26px);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 22px color-mix(in srgb, var(--sa) 35%, transparent);
	position: relative; transform: translateZ(30px);
	transition: transform 0.4s cubic-bezier(0.2,0.9,0.3,1.4), box-shadow 0.35s ease;
}
.ix-step:hover .icon-wrap, .ix-step.is-active .icon-wrap {
	transform: translateZ(40px) translateY(-4px) rotate(-6deg) scale(1.06);
	box-shadow: 0 18px 30px color-mix(in srgb, var(--sa) 45%, transparent);
}
/* soft pulse ring on the active step's icon */
.ix-step .icon-wrap::after {
	content: ""; position: absolute; inset: -6px; border-radius: 24px;
	border: 2px solid var(--sa); opacity: 0; pointer-events: none;
}
.ix-step.is-active .icon-wrap::after { animation: ixRing 1.8s ease-out infinite; }
@keyframes ixRing {
	0% { transform: scale(0.85); opacity: 0.55; }
	100% { transform: scale(1.35); opacity: 0; }
}
.ix-step .icon-wrap .num {
	position: absolute; top: -8px; right: -10px;
	width: 26px; height: 26px; border-radius: 50%;
	background: #0d47a1; color: #fff; font-weight: 800; font-size: 12px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #fff;
	box-shadow: 0 4px 10px rgba(13,46,84,0.25);
	transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.5), background 0.3s ease;
}
.ix-step:hover .num, .ix-step.is-active .num { transform: scale(1.18) rotate(8deg); background: var(--sa); }
.ix-step h3 {
	font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; color: var(--ix-navy-700); margin-bottom: 10px;
	transform: translateZ(20px); transition: color 0.3s ease;
}
.ix-step:hover h3, .ix-step.is-active h3 { color: var(--sa); }
.ix-step p { color: #5b6b7c; font-size: clamp(14px, 1.1vw, 15.5px); margin: 0; line-height: 1.65; transform: translateZ(10px); }
.ix-step-chips {
	list-style: none; margin: 16px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
	transform: translateZ(14px);
}
.ix-step-chips li {
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
	padding: 5px 10px; border-radius: 999px;
	color: color-mix(in srgb, var(--sa) 80%, #103154);
	background: color-mix(in srgb, var(--sa) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--sa) 22%, transparent);
	display: inline-flex; align-items: center; gap: 5px;
	transition: transform 0.3s ease, background 0.3s ease;
}
.ix-step-chips li i { font-size: 10.5px; }
.ix-step:hover .ix-step-chips li, .ix-step.is-active .ix-step-chips li { background: color-mix(in srgb, var(--sa) 16%, #fff); }
.ix-step:hover .ix-step-chips li:nth-child(1) { transform: translateY(-2px); transition-delay: 0s; }
.ix-step:hover .ix-step-chips li:nth-child(2) { transform: translateY(-2px); transition-delay: 0.05s; }
.ix-step:hover .ix-step-chips li:nth-child(3) { transform: translateY(-2px); transition-delay: 0.1s; }

/* tablet: two up, third spans full width; the horizontal beam no longer lines up so hide it */
@media (max-width: 991px) and (min-width: 640px) {
	.ix-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ix-step-col:nth-child(3) { grid-column: 1 / -1; }
	.ix-step-col:nth-child(3) .ix-step { max-width: 560px; margin: 0 auto; }
	.ix-steps::before, .ix-steps::after { display: none; }
}
/* phone: vertical timeline, icons on the rail, copy beside them */
@media (max-width: 639px) {
	.ix-steps { grid-template-columns: 1fr; gap: 18px; }
	.ix-steps::before, .ix-steps::after {
		left: 46px; right: auto; top: 40px; bottom: 40px; width: 3px; height: auto;
	}
	.ix-steps::after {
		transform: scaleY(var(--conn)); transform-origin: top center;
		background: linear-gradient(180deg, #2196f3, #7c5cfc, #ff9f1c);
	}
	.ix-step {
		text-align: left; padding: 18px;
		display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start;
		transform: translateY(var(--lift)); /* no tilt on touch */
	}
	.ix-step .icon-wrap { width: 56px; height: 56px; margin: 0; grid-row: 1 / span 3; font-size: 20px; }
	.ix-step h3 { margin: 4px 0 6px; }
	.ix-step p { font-size: 14px; }
	.ix-step-chips { justify-content: flex-start; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ix-step, .ix-step *, .ix-step::before, .ix-steps::after { transition: none !important; animation: none !important; }
	.ix-step { transform: none !important; }
	.ix-steps { --conn: 1; }
}
@supports not (color: color-mix(in srgb, red, blue)) {
	.ix-step-glow { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(33,150,243,0.14), transparent 65%); }
	.ix-step-chips li { color: #1565c0; background: rgba(33,150,243,0.08); border-color: rgba(33,150,243,0.2); }
}

.ix-search { position: relative; max-width: 720px; margin: 26px auto 0; }
.ix-search i {
	position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
	color: var(--ix-blue); font-size: 16px; pointer-events: none;
}
.ix-search input {
	width: 100%; border-radius: 999px; border: 1px solid rgba(33,150,243,0.18);
	background: #fff; padding: 16px 26px 16px 54px; font-size: 15px; color: var(--ix-navy-700);
	box-shadow: 0 14px 34px rgba(13,46,84,0.08); outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ix-search input::placeholder { color: var(--ix-muted); }
.ix-search input:focus { border-color: var(--ix-blue); box-shadow: 0 14px 40px rgba(33,150,243,0.18); }

/* ---- Testimonials ---- */
.ix-testimonials {
	padding: 100px 0 !important;
	background:
		radial-gradient(800px 460px at 100% 0%, rgba(0,188,212,0.06), transparent 60%),
		#fff;
}
.testimonial {
	background: #fff;
	border: 1px solid var(--ix-line);
	border-radius: var(--ix-radius);
	padding: 30px 28px 26px;
	margin: 10px 6px 30px;
	box-shadow: var(--ix-card-shadow);
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--ix-card-shadow-hover); }
.testimonial::before {
	content: "\201C";
	position: absolute; top: 6px; right: 22px;
	font-size: 84px; line-height: 1; font-family: Georgia, serif;
	color: rgba(33,150,243,0.14);
	pointer-events: none;
}
.testimonial .media { margin-bottom: 16px; }
.testimonial .media img {
	border-radius: 50%;
	border: 3px solid rgba(33,150,243,0.18);
	box-shadow: 0 8px 18px rgba(13,46,84,0.12);
}
.testimonial h3 { font-size: 17px; font-weight: 700; color: var(--ix-navy-700); margin-bottom: 2px; }
.testimonial h4 { font-size: 13px; font-weight: 600; color: var(--ix-blue); margin: 0; }
.testimonial-p { line-height: 1.75rem; text-overflow: ellipsis; overflow: hidden; color: #5b6b7c; font-size: 14.5px; }
.testimonial-p.collapsed { height: 5.25rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; }
.testimonial .read-more {
	color: var(--ix-blue); font-weight: 600; font-size: 13.5px;
}
.testimonial .read-more:hover { color: var(--ix-blue-deep); text-decoration: none; }

/* ============================================================
   sx- : student showcase animations ("See it in action") +
   the redesigned download band. Row/copy layout reuses the
   tx-show-* rules from tutors.css (always loaded by the shell).
   ============================================================ */

/* ---- Demo 1: interactive practice ---- */
.sx-demo-practice { min-height: 300px; }
.sx-prac-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sx-hearts i { color: #ef5350; font-size: 14px; margin-left: 5px; animation: sxHeartBeat 2.6s ease-in-out infinite; }
.sx-hearts i:nth-child(2) { animation-delay: 0.2s; }
.sx-hearts i:nth-child(3) { animation-delay: 0.4s; }
@keyframes sxHeartBeat { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.25); } 16% { transform: scale(1); } }
.sx-prac-progress {
	height: 8px; border-radius: 999px; background: rgba(33,150,243,0.12);
	margin: 16px 0 18px; overflow: hidden;
}
.sx-prac-progress .fill {
	display: block; height: 100%; width: 40%; border-radius: 999px;
	background: linear-gradient(90deg, #2196f3, #00e5ff);
	animation: sxPracFill 7s ease-in-out infinite;
}
@keyframes sxPracFill { 0%, 40% { width: 40%; } 55%, 92% { width: 60%; } 100% { width: 60%; } }
.sx-prac-q { font-size: 17px; color: #1a2b4a; margin-bottom: 14px; }
.sx-prac-q b { font-weight: 800; color: #103154; }
.sx-opt {
	display: flex; align-items: center; gap: 12px;
	border: 2px solid rgba(33,150,243,0.16); border-radius: 14px;
	padding: 12px 16px; margin-bottom: 10px;
	font-size: 14.5px; font-weight: 700; color: #33415a;
	background: #fff; position: relative;
	transition: border-color 0.2s ease;
}
.sx-opt .key {
	width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(33,150,243,0.1); color: #1976d2;
	font-size: 12px; font-weight: 800;
}
.sx-opt > i { margin-left: auto; color: #1db954; opacity: 0; }
/* the loop: tap lands on B at ~40%, it flashes correct, sparks + XP fly */
.sx-opt.o2 { animation: sxOptCorrect 7s ease-in-out infinite; }
.sx-opt.o2 .key { animation: sxOptKey 7s ease-in-out infinite; }
.sx-opt.o2 > i { animation: sxOptTick 7s ease-in-out infinite; }
@keyframes sxOptCorrect {
	0%, 38% { border-color: rgba(33,150,243,0.16); background: #fff; transform: none; }
	41% { transform: scale(0.97); }
	44%, 88% { border-color: #34d399; background: rgba(52,211,153,0.08); transform: none; box-shadow: 0 10px 26px -14px rgba(52,211,153,0.7); }
	96%, 100% { border-color: rgba(33,150,243,0.16); background: #fff; box-shadow: none; }
}
@keyframes sxOptKey {
	0%, 40% { background: rgba(33,150,243,0.1); color: #1976d2; }
	44%, 88% { background: #34d399; color: #fff; }
	96%, 100% { background: rgba(33,150,243,0.1); color: #1976d2; }
}
@keyframes sxOptTick {
	0%, 42% { opacity: 0; transform: scale(0); }
	46%, 88% { opacity: 1; transform: scale(1); }
	92%, 100% { opacity: 0; }
}
.sx-tap {
	position: absolute; z-index: 3;
	bottom: 30%; right: 18%;
	font-size: 26px; color: #103154;
	text-shadow: 0 6px 14px rgba(13,46,84,0.35);
	animation: sxTap 7s ease-in-out infinite;
	pointer-events: none;
}
@keyframes sxTap {
	0% { transform: translate(70px, 90px) rotate(8deg); opacity: 0; }
	18% { opacity: 1; }
	36% { transform: translate(0, 0) rotate(0deg); }
	41% { transform: translate(0, 0) scale(0.82); }
	46% { transform: translate(0, 0) scale(1); }
	62% { opacity: 1; }
	78%, 100% { transform: translate(70px, 90px) rotate(8deg); opacity: 0; }
}
.sx-xp {
	position: absolute; z-index: 3;
	top: 46%; right: 12%;
	background: linear-gradient(135deg, #f0a901, #f57c00);
	color: #fff; font-size: 13px; font-weight: 800;
	border-radius: 999px; padding: 6px 14px;
	box-shadow: 0 10px 24px -8px rgba(245,124,0,0.7);
	opacity: 0; pointer-events: none;
	animation: sxXpPop 7s ease-in-out infinite;
}
@keyframes sxXpPop {
	0%, 44% { opacity: 0; transform: translateY(10px) scale(0.6); }
	48% { opacity: 1; transform: translateY(-6px) scale(1.12); }
	52% { transform: translateY(-10px) scale(1); }
	72% { opacity: 1; transform: translateY(-26px); }
	80%, 100% { opacity: 0; transform: translateY(-34px); }
}
.sx-combo {
	position: absolute; z-index: 3;
	top: 88px; right: 26px;
	background: rgba(124,58,237,0.1); color: #7c3aed;
	border: 1px solid rgba(124,58,237,0.3);
	font-size: 12px; font-weight: 800;
	border-radius: 999px; padding: 5px 12px;
	opacity: 0; pointer-events: none;
	animation: sxComboPop 7s ease-in-out infinite;
}
@keyframes sxComboPop {
	0%, 50% { opacity: 0; transform: scale(0.7); }
	55% { opacity: 1; transform: scale(1.1); }
	58%, 86% { opacity: 1; transform: scale(1); }
	94%, 100% { opacity: 0; transform: scale(0.9); }
}
.sx-spark {
	position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%;
	background: #69f0ae; box-shadow: 0 0 10px rgba(105,240,174,0.9);
	bottom: 38%; right: 22%;
	opacity: 0; pointer-events: none;
	animation: sxSpark 7s ease-in-out infinite;
}
.sx-spark.s2 { background: #4fc3f7; box-shadow: 0 0 10px rgba(79,195,247,0.9); --sx: -46px; --sy: -34px; animation-delay: 0.06s; }
.sx-spark.s3 { background: #f0a901; box-shadow: 0 0 10px rgba(240,169,1,0.9); --sx: 34px; --sy: -50px; animation-delay: 0.12s; }
@keyframes sxSpark {
	0%, 43% { opacity: 0; transform: translate(0, 0) scale(0.4); }
	46% { opacity: 1; }
	58%, 100% { opacity: 0; transform: translate(var(--sx, -20px), var(--sy, -56px)) scale(1); }
}

/* ---- Demo 2: live lesson on your phone ---- */
.sx-demo-live { display: flex; align-items: center; gap: 0; min-height: 300px; }
.sx-demo-live .tx-deliver-tutor { flex: 0 0 46%; }
.sx-phone {
	position: relative; flex: 0 0 32%;
	border: 2px solid rgba(16,49,84,0.85);
	border-radius: 26px; padding: 20px 10px 16px;
	background: #fff; z-index: 2;
	box-shadow: 0 24px 44px -22px rgba(13,46,84,0.5);
}
.sx-phone-notch {
	position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
	width: 42%; height: 8px; border-radius: 999px; background: rgba(16,49,84,0.85);
}
.sx-phone-live {
	position: absolute; top: -10px; left: -8px;
	display: inline-flex; align-items: center; gap: 5px;
	background: #e53935; color: #fff;
	font-size: 9px; font-weight: 800; letter-spacing: 1px;
	border-radius: 999px; padding: 3px 9px;
	box-shadow: 0 6px 14px -4px rgba(229,57,53,0.7);
}
.sx-phone-live .dot {
	width: 6px; height: 6px; border-radius: 50%; background: #fff;
	animation: txLivePulse 1.4s ease-in-out infinite;
}
.sx-phone-screen { padding-top: 6px; }
.sx-phone-screen .blk { border-radius: 6px; margin-bottom: 8px; animation: txBlkCycle 5s ease-in-out infinite; }
.sx-phone-screen .blk.b1 { height: 26px; background: linear-gradient(90deg, rgba(33,150,243,0.25), rgba(0,188,212,0.25)); animation-delay: 0.45s; }
.sx-phone-screen .blk.b2 { height: 9px; width: 85%; background: rgba(16,49,84,0.12); animation-delay: 0.6s; }
.sx-phone-screen .blk.b3 { height: 9px; width: 60%; background: rgba(16,49,84,0.09); animation-delay: 0.75s; }
.sx-phone-tag {
	position: absolute; bottom: -9px; right: 12px;
	background: linear-gradient(135deg, #7b1fa2, #e91e63);
	color: #fff; font-size: 9px; font-weight: 800;
	border-radius: 999px; padding: 2px 10px;
	box-shadow: 0 4px 10px -3px rgba(233,30,99,0.6);
}
.sx-demo-live .tx-deliver-beam { min-width: 40px; }
.sx-live-toast {
	position: absolute; z-index: 3;
	bottom: 18px; left: 50%; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(23,26,38,0.92); color: #c6cddd;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 999px; padding: 7px 15px;
	font-size: 11.5px; font-weight: 700; white-space: nowrap;
	box-shadow: 0 14px 30px -12px rgba(0,0,0,0.7);
	animation: sxToastCycle 5s ease-in-out infinite;
}
.sx-live-toast i { color: #00e5ff; }
@keyframes sxToastCycle {
	0%, 10% { opacity: 0; transform: translate(-50%, 8px); }
	18%, 80% { opacity: 1; transform: translate(-50%, 0); }
	92%, 100% { opacity: 0; transform: translate(-50%, 8px); }
}

/* ---- Demo 3: streaks, XP & rewards ---- */
.sx-demo-streak { min-height: 300px; }
.sx-streak-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.sx-flame {
	width: 58px; height: 58px; border-radius: 18px; flex: 0 0 58px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #ff7043, #f57c00);
	color: #fff; font-size: 26px;
	box-shadow: 0 14px 30px -10px rgba(245,124,0,0.65);
	animation: sxFlame 2.2s ease-in-out infinite;
}
@keyframes sxFlame {
	0%, 100% { transform: scale(1) rotate(0deg); }
	30% { transform: scale(1.08) rotate(-3deg); }
	60% { transform: scale(1.03) rotate(2deg); }
}
.sx-streak-meta .v { display: block; font-size: 22px; font-weight: 800; color: #103154; line-height: 1.2; }
.sx-streak-meta .k { font-size: 12.5px; font-weight: 600; color: #8a99a8; }
.sx-week { display: flex; gap: 10px; margin-bottom: 24px; }
.sx-day {
	flex: 1; height: 44px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 800; color: #8a99a8;
	background: #f1f6fc; border: 1px solid rgba(33,150,243,0.1);
}
.sx-day.lit {
	background: linear-gradient(135deg, #ff7043, #f57c00);
	color: #fff; border: none;
	box-shadow: 0 8px 18px -8px rgba(245,124,0,0.6);
	opacity: 0; transform: scale(0.6);
	animation: sxDayPop 0.45s cubic-bezier(0.3, 0, 0.2, 1.4) forwards;
}
.sx-day.d1 { animation-delay: 0.2s; }
.sx-day.d2 { animation-delay: 0.35s; }
.sx-day.d3 { animation-delay: 0.5s; }
.sx-day.d4 { animation-delay: 0.65s; }
.sx-day.d5 { animation-delay: 0.8s; }
@keyframes sxDayPop { to { opacity: 1; transform: scale(1); } }
/* today keeps pulsing to invite the next session */
.sx-day.today {
	background: #fff; color: #f57c00;
	border: 2px dashed rgba(245,124,0,0.55);
	animation: sxToday 2s ease-in-out 1.1s infinite;
}
@keyframes sxToday {
	0%, 100% { box-shadow: 0 0 0 0 rgba(245,124,0,0.35); }
	50% { box-shadow: 0 0 0 9px rgba(245,124,0,0); }
}
.sx-level { position: relative; }
.sx-level-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.sx-level-row .lv { font-size: 13.5px; font-weight: 800; color: #103154; }
.sx-level-row .xp { font-size: 12px; font-weight: 700; color: #8a99a8; }
.sx-level-bar { height: 10px; border-radius: 999px; background: rgba(33,150,243,0.12); overflow: hidden; }
.sx-level-bar .fill {
	display: block; height: 100%; border-radius: 999px; width: 55%;
	background: linear-gradient(90deg, #2196f3, #00e5ff, #69f0ae);
	animation: sxLevelFill 6s ease-in-out infinite;
}
@keyframes sxLevelFill { 0%, 25% { width: 55%; } 55%, 90% { width: 100%; } 100% { width: 55%; } }
.sx-levelup {
	position: absolute; right: 0; top: -34px;
	background: linear-gradient(135deg, #00997b, #69f0ae);
	color: #fff; font-size: 12px; font-weight: 800;
	border-radius: 999px; padding: 5px 13px;
	box-shadow: 0 10px 22px -8px rgba(0,153,123,0.7);
	opacity: 0; pointer-events: none;
	animation: sxLevelUp 6s ease-in-out infinite;
}
@keyframes sxLevelUp {
	0%, 55% { opacity: 0; transform: translateY(8px) scale(0.7); }
	60% { opacity: 1; transform: translateY(0) scale(1.1); }
	64%, 86% { opacity: 1; transform: translateY(0) scale(1); }
	94%, 100% { opacity: 0; transform: translateY(-6px) scale(0.9); }
}
.sx-unlock {
	display: inline-flex; align-items: center; gap: 9px;
	margin-top: 26px;
	background: rgba(124,58,237,0.08); color: #6d28d9;
	border: 1px solid rgba(124,58,237,0.25);
	border-radius: 999px; padding: 8px 18px;
	font-size: 13px; font-weight: 800;
	animation: sxUnlockGlow 3s ease-in-out infinite;
}
.sx-unlock .emoji { font-size: 16px; }
@keyframes sxUnlockGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.25); }
	50% { box-shadow: 0 0 0 8px rgba(124,58,237,0); }
}

/* ---- Download band ---- */
.sx-download { padding: 40px 0 100px; background: #fff; }
.sx-dl-band {
	position: relative; overflow: hidden;
	border-radius: 26px; padding: 60px 40px;
	text-align: center; color: #fff;
	background: linear-gradient(120deg, #0e2a49, #14528f 55%, #1976d2);
	box-shadow: 0 30px 70px rgba(13,46,84,0.3);
}
.sx-dl-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.sx-dl-orb.a {
	right: -90px; top: -90px; width: 300px; height: 300px;
	background: radial-gradient(circle, rgba(0,229,255,0.35), transparent 70%);
	animation: ixFloat 9s ease-in-out infinite;
}
.sx-dl-orb.b {
	left: -120px; bottom: -150px; width: 340px; height: 340px;
	background: radial-gradient(circle, rgba(33,150,243,0.45), transparent 70%);
	animation: ixFloat 9s ease-in-out -4s infinite;
}
.sx-dl-band .cta-kicker {
	text-transform: uppercase; letter-spacing: 3px; font-size: 11px; font-weight: 700;
	color: #7fd4ff; display: block; margin-bottom: 10px;
	position: relative; z-index: 2;
}
.sx-dl-band h2 { color: #fff; font-weight: 800; letter-spacing: -0.6px; position: relative; z-index: 2; }
.sx-dl-band p {
	color: rgba(255,255,255,0.85); max-width: 560px;
	margin: 14px auto 26px; line-height: 1.75;
	position: relative; z-index: 2;
}
.sx-dl-badges { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 2; }
.sx-dl-badges img { border-radius: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sx-dl-badges a:hover img { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,0.35); }
.sx-dl-band .cta-points { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; position: relative; z-index: 2; }
.sx-dl-band .cta-points span { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.92); white-space: nowrap; }
.sx-dl-band .cta-points i { color: var(--ix-mint); margin-right: 6px; }
@media (max-width: 767.98px) { .sx-dl-band { padding: 44px 24px; } }

/* ---- Mobile: mocks stack above their copy, so drop the filler height
   and tighten the row rhythm ---- */
@media (max-width: 991px) {
	.sx-demo-practice, .sx-demo-live, .sx-demo-streak { min-height: 0; }
	.tx-showcase .tx-show-row { margin-top: 44px; }
	.tx-showcase .section-title { margin-bottom: 34px; }
	.sx-demo-live .tx-deliver-beam { min-width: 28px; }
	.sx-live-toast { max-width: calc(100% - 24px); white-space: normal; text-align: center; }
	.sx-week { gap: 7px; }
}

/* ---- Reduced motion: settle sx- animations into final state ---- */
@media (prefers-reduced-motion: reduce) {
	.sx-hearts i, .sx-flame, .sx-day.today, .sx-unlock, .sx-dl-orb,
	.sx-tap, .sx-spark, .sx-opt.o2, .sx-opt.o2 .key { animation: none !important; }
	.sx-xp, .sx-combo, .sx-live-toast { animation: none !important; opacity: 1; }
	.sx-opt.o2 > i { animation: none !important; opacity: 1; }
	.sx-day.lit { animation: none !important; opacity: 1; transform: none; }
	.sx-prac-progress .fill { animation: none !important; width: 60%; }
	.sx-level-bar .fill { animation: none !important; width: 100%; }
	.sx-levelup { animation: none !important; opacity: 1; }
}

/* ---- Footer ---- */
.ix-footer {
	padding: 110px 0 60px;
	background:
		radial-gradient(900px 500px at 85% 0%, rgba(0,188,212,0.15), transparent 60%),
		radial-gradient(760px 480px at 0% 100%, rgba(33,150,243,0.18), transparent 60%),
		linear-gradient(180deg, var(--ix-navy-800), var(--ix-navy-900)) !important;
}
.ix-footer-brand img { height: 84px; }
.ix-footer-logo { height: 48px; width: auto; display: inline-block; }
.ix-footer-tagline {
	color: rgba(255,255,255,0.85);
	max-width: 460px; margin: 18px auto 0;
	font-size: 15px; line-height: 1.7; font-weight: 300;
}
.ix-footer-nav {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 30px;
	list-style: none; padding: 0; margin: 30px 0 0;
}
.ix-footer-nav a {
	color: rgba(255,255,255,0.85); font-size: 14.5px; font-weight: 600;
	letter-spacing: 0.2px; transition: color 0.2s ease;
}
.ix-footer-nav a:hover { color: #fff; text-decoration: none; }
.ix-footer-social {
	display: flex; justify-content: center; gap: 12px;
	list-style: none; padding: 0; margin: 28px 0 0;
}
.ix-footer-social a {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	color: #fff; font-size: 16px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	transition: all 0.25s ease;
}
.ix-footer-social a:hover {
	background: #fff; color: #1976d2; border-color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 10px 22px rgba(9,52,99,0.30);
}
.ix-footer-contact {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
	margin: 30px 0 0;
}
.ix-footer-contact a {
	display: inline-flex; align-items: center; gap: 10px;
	color: #fff; font-size: 15px; font-weight: 600;
	padding: 11px 24px; border-radius: 999px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	transition: all 0.25s ease;
}
.ix-footer-contact a + a { margin-left: 0; }
.ix-footer-contact a:hover {
	background: #fff; color: #1976d2; text-decoration: none;
	box-shadow: 0 10px 22px rgba(9,52,99,0.30);
}
.ix-footer-contact a i { font-size: 14px; }
.ix-footer-divider {
	max-width: 640px; margin: 40px auto 26px;
	border-top: 1px solid rgba(255,255,255,0.22);
}
.ix-footer-fineprint p {
	color: rgba(255,255,255,0.75); font-size: 13px;
	font-weight: 300; margin: 0 0 4px; line-height: 1.6;
}

/* ---- Back to top ---- */
.back-top a {
	background: linear-gradient(135deg, #1e88e5, #00acc1) !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 26px -8px rgba(30,136,229,0.55);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.back-top a:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -8px rgba(30,136,229,0.6); }