{"id":231,"date":"2026-04-26T11:17:16","date_gmt":"2026-04-26T11:17:16","guid":{"rendered":"https:\/\/allenglish4u.com\/home\/"},"modified":"2026-07-12T02:59:06","modified_gmt":"2026-07-12T02:59:06","slug":"home","status":"publish","type":"page","link":"https:\/\/allenglish4u.com\/vi\/","title":{"rendered":"All English 4U \u2014 Free Interactive English Lessons"},"content":{"rendered":"\n<!-- AE4U Homepage v8 \u2014 deployed via Cowork 2026-05-26 -->\n<!-- Source: Claude Design project 71b3693e-3222-431c-b341-7d8d7d0c4913 -->\n<!-- Scope: all CSS prefixed with .ae4u-v8 to avoid theme conflicts -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&#038;family=Inter:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\" \/>\n\n<style data-ae4u-v8=\"styles\">\n\/* ============================================\n   ALL ENGLISH 4U \u2014 v6 Bright \u00b7 Smooth \u00b7 Refined\n   ============================================ *\/\n.ae4u-v8 {\n  \/* Backgrounds *\/\n  --bg-light: #f8faff;\n  --bg-pure: #ffffff;\n\n  \/* Brand *\/\n  --brand: #2563EB;\n  --brand-light: #60a5fa;\n  --cyan: #06b6d4;\n  --cyan-light: #22d3ee;\n  --indigo: #6366f1;\n  --indigo-light: #818cf8;\n\n  \/* Course colors *\/\n  --grammar-1: #8b5cf6;   --grammar-2: #a78bfa;\n  --toefl-1: #2563eb;     --toefl-2: #60a5fa;\n  --ielts-1: #0d9488;     --ielts-2: #34d399;\n  --dictation-1: #f97316; --dictation-2: #fb923c;\n  --cambridge-1: #ef4444; --cambridge-2: #f87171;\n  --magazine-1: #f43f5e;  --magazine-2: #fb7185;\n  --skills-1: #6366f1;    --skills-2: #818cf8;\n\n  \/* Text *\/\n  --ink: #0a1628;\n  --muted: #475569;\n  --muted-2: #64748b;\n  --border: #e2e8f0;\n\n  \/* Type *\/\n  --font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;\n\n  \/* Easing \u2014 the smooth-settle curve used everywhere *\/\n  --ease: cubic-bezier(0.22, 1, 0.36, 1);\n\n  \/* Tweakable variables (defaults) *\/\n  --tw-accent: #22d3ee;       \/* cyan accent \u2014 controllable *\/\n  --tw-logo-size: 300px;      \/* hero logo size *\/\n  --tw-anim-mult: 1;          \/* animation speed multiplier *\/\n  --tw-hero-bright: 1;        \/* hero brightness filter *\/\n\n  \/* Noise overlay \u2014 inline SVG data URL, small (32x32 tile, low alpha) *\/\n  --noise: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'\/><\/filter><rect width='100%25' height='100%25' filter='url(%23n)'\/><\/svg>\");\n}\n.ae4u-v8 { box-sizing: border-box; margin: 0; padding: 0; }\n\/* Accessibility focus ring *\/\n.ae4u-v8 *:focus { outline: none; }\n.ae4u-v8 *:focus-visible {\n  outline: 2px solid var(--cyan-light);\n  outline-offset: 2px;\n  border-radius: 6px;\n}\n.ae4u-v8 .btn:focus-visible, .ae4u-v8 .cta-glow:focus-visible {\n  outline-offset: 4px;\n}\n.ae4u-v8 {\n  scroll-behavior: smooth;\n  scroll-padding-top: 80px;\n}\n.ae4u-v8 {\n  font-family: var(--font);\n  background: var(--bg-light);\n  color: var(--ink);\n  line-height: 1.55;\n  overflow-x: hidden;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n.ae4u-v8 img, .ae4u-v8 svg { display: block; max-width: 100%; }\n.ae4u-v8 a { color: inherit; text-decoration: none; }\n.ae4u-v8 button { font: inherit; cursor: pointer; border: 0; background: 0; }\n\/* ============================================\n   HEADER\n   ============================================ *\/\n.ae4u-v8 .site-header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  padding: 22px 48px;\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease), padding 0.4s var(--ease), border-color 0.5s var(--ease);\n  border-bottom: 1px solid transparent;\n}\n.ae4u-v8 .site-header.scrolled {\n  padding: 14px 48px;\n  background: rgba(2,13,31,0.78);\n  -webkit-backdrop-filter: blur(20px) saturate(150%);\n  backdrop-filter: blur(20px) saturate(150%);\n  border-bottom-color: rgba(34,211,238,0.16);\n}\n\/* dark veil behind nav so words never compete with link text *\/\n.ae4u-v8 .hero-nav-veil {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 130px;\n  z-index: 40;\n  background: linear-gradient(180deg, rgba(2,13,31,0.72) 0%, rgba(2,13,31,0.35) 60%, transparent 100%);\n  pointer-events: none;\n}\n.ae4u-v8 .brand {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #fff;\n  font-weight: 800;\n  font-size: 18px;\n  letter-spacing: -0.01em;\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ae4u-v8 .brand-logo-wrap {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  box-shadow:\n    inset 0 -3px 8px rgba(2,13,31,0.3),\n    inset 0 2px 4px rgba(255,255,255,0.18),\n    0 4px 16px rgba(37,99,235,0.45),\n    0 0 24px rgba(34,211,238,0.3);\n  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);\n}\n.ae4u-v8 .brand-logo-wrap::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 50%);\n  z-index: 2;\n  pointer-events: none;\n}\n.ae4u-v8 .brand-logo-wrap::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(2,13,31,0.4);\n  z-index: 3;\n  pointer-events: none;\n}\n.ae4u-v8 .brand:hover .brand-logo-wrap {\n  transform: translateY(-1px) rotate(-6deg);\n  box-shadow:\n    inset 0 -3px 8px rgba(2,13,31,0.3),\n    inset 0 2px 4px rgba(255,255,255,0.25),\n    0 8px 24px rgba(37,99,235,0.55),\n    0 0 32px rgba(34,211,238,0.5);\n}\n.ae4u-v8 .brand-logo {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: contain;\n  display: block;\n  position: relative;\n  z-index: 1;\n}\n.ae4u-v8 .main-nav {\n  display: flex;\n  gap: 26px;\n  flex: 1;\n  justify-content: center;\n}\n.ae4u-v8 .main-nav a {\n  color: rgba(255,255,255,0.78);\n  font-size: 14px;\n  font-weight: 500;\n  position: relative;\n  padding: 6px 2px;\n  transition: color 0.35s var(--ease);\n}\n.ae4u-v8 .main-nav a::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  width: 0;\n  height: 2px;\n  background: linear-gradient(90deg, var(--cyan), var(--brand-light));\n  transform: translateX(-50%);\n  transition: width 0.5s var(--ease);\n  box-shadow: 0 0 8px var(--cyan);\n}\n.ae4u-v8 .main-nav a:hover { color: #fff; }\n.ae4u-v8 .main-nav a:hover::after { width: 100%; }\n.ae4u-v8 .header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n.ae4u-v8 .search-btn {\n  width: 38px;\n  height: 38px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.18);\n  color: #fff;\n  display: grid;\n  place-items: center;\n  transition: all 0.35s var(--ease);\n}\n.ae4u-v8 .search-btn:hover {\n  background: rgba(255,255,255,0.08);\n  border-color: var(--cyan);\n}\n.ae4u-v8 .cta-glow {\n  padding: 10px 20px;\n  border-radius: 999px;\n  background: linear-gradient(135deg, var(--brand), var(--cyan));\n  color: #fff;\n  font-weight: 700;\n  font-size: 14px;\n  letter-spacing: 0.01em;\n  box-shadow:\n    0 0 0 1px rgba(255,255,255,0.18) inset,\n    0 6px 32px rgba(6,182,212,0.5),\n    0 2px 8px rgba(37,99,235,0.4);\n  transition: all 0.45s var(--ease);\n}\n.ae4u-v8 .cta-glow:hover {\n  transform: translateY(-2px);\n  box-shadow:\n    0 0 0 1px rgba(255,255,255,0.28) inset,\n    0 12px 48px rgba(6,182,212,0.75),\n    0 4px 16px rgba(37,99,235,0.6);\n}\n\/* ============================================\n   HERO \u2014 layout\n   ============================================ *\/\n.ae4u-v8 .hero {\n  position: relative;\n  min-height: 92vh;\n  overflow: hidden;\n  background: linear-gradient(135deg, #020d1f 0%, #051535 30%, #0a2060 60%, #0d3485 100%);\n  color: #fff;\n  isolation: isolate;\n  filter: brightness(var(--tw-hero-bright, 1));\n}\n\/* noise grain overlay across whole hero \u2014 adds depth *\/\n.ae4u-v8 .hero::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background-image: var(--noise);\n  background-size: 160px 160px;\n  opacity: 0.45;\n  mix-blend-mode: overlay;\n  pointer-events: none;\n}\n\/* bottom-center cyan glow \u2014 makes hero text appear lit from below *\/\n.ae4u-v8 .hero-bg-glow-bottom {\n  position: absolute;\n  left: 50%;\n  bottom: -10%;\n  width: 60%;\n  height: 60%;\n  transform: translateX(-50%);\n  background: radial-gradient(ellipse at center, rgba(34,211,238,0.18) 0%, rgba(34,211,238,0.06) 40%, transparent 70%);\n  filter: blur(8px);\n  z-index: 0;\n  pointer-events: none;\n}\n.ae4u-v8 .hero-bg {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n.ae4u-v8 .hero-bg::before {\n  content: '';\n  position: absolute;\n  top: -20%;\n  right: -10%;\n  width: 70%;\n  height: 70%;\n  background: radial-gradient(circle, rgba(37,99,235,0.42) 0%, rgba(6,182,212,0.18) 35%, transparent 65%);\n  filter: blur(10px);\n}\n.ae4u-v8 .hero-bg::after {\n  content: '';\n  position: absolute;\n  bottom: -10%;\n  left: -10%;\n  width: 50%;\n  height: 50%;\n  background: radial-gradient(circle, rgba(99,102,241,0.30) 0%, rgba(139,92,246,0.12) 40%, transparent 70%);\n  filter: blur(8px);\n}\n.ae4u-v8 .hero-grid {\n  position: absolute;\n  inset: -20px;\n  background-image: radial-gradient(circle, rgba(147,197,253,0.18) 1px, transparent 1px);\n  background-size: 36px 36px;\n  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\n  animation: gridDrift 60s linear infinite;\n  z-index: 1;\n  pointer-events: none;\n}\n@keyframes gridDrift  {\n  from { background-position: 0 0; }\n  to   { background-position: -360px 0; }\n}\n.ae4u-v8 .starlight {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.ae4u-v8 .starlight span {\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0 0 12px 2px rgba(255,255,255,0.7), 0 0 24px 4px var(--cyan-light);\n  animation: twinkle var(--dur, 4s) ease-in-out infinite;\n  opacity: 0.5;\n}\n@keyframes twinkle  {\n  0%, 100% { opacity: 0.15; transform: scale(0.7); }\n  50% { opacity: 0.85; transform: scale(1.2); }\n}\n\/* The stage \u2014 vertical layout: logo arena at top, text below *\/\n.ae4u-v8 .hero-stage {\n  position: relative;\n  z-index: 10;\n  max-width: 1280px;\n  margin: 0 auto;\n  min-height: inherit;\n  padding: 96px 24px 80px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 14px;\n}\n\/* Arena \u2014 holds logo + portals + galaxy *\/\n.ae4u-v8 .logo-arena {\n  position: relative;\n  width: min(720px, 92%);\n  aspect-ratio: 1 \/ 1;\n  height: auto;\n  display: grid;\n  place-items: center;\n  transform-style: preserve-3d;\n  perspective: 1200px;\n  flex-shrink: 0;\n}\n\/* ============================================\n   LOGO \u2014 3D float (clamped, never spins flat)\n   ============================================ *\/\n.ae4u-v8 .logo-3d {\n  position: relative;\n  width: var(--tw-logo-size, 300px);\n  height: var(--tw-logo-size, 300px);\n  z-index: 10;\n  cursor: pointer;\n  --rx: 0deg;\n  --ry: 0deg;\n  perspective: 1100px;\n  transform-style: preserve-3d;\n  transform: rotateX(var(--rx)) rotateY(var(--ry));\n  transition: transform 0.6s var(--ease), width 0.5s var(--ease), height 0.5s var(--ease);\n}\n.ae4u-v8 .logo-3d-inner {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  transform-style: preserve-3d;\n  animation: logoIdle3D calc(8s \/ var(--tw-anim-mult)) ease-in-out infinite;\n}\n.ae4u-v8 .logo-arena:hover .logo-3d-inner { animation-play-state: paused; }\n\/* Layer 1: the disc \u2014 circular wrapper with the inner darkening + outer cyan glow *\/\n.ae4u-v8 .logo-disc {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  \/* inset bottom-darkening = sphere depth; outer cyan = halo *\/\n  box-shadow:\n    inset 0 -22px 44px rgba(2,13,31,0.28),\n    inset 0 14px 28px rgba(255,255,255,0.10),\n    0 0 80px 6px rgba(34,211,238,0.32),\n    0 0 160px 18px rgba(34,211,238,0.16),\n    0 20px 60px rgba(37,99,235,0.45);\n  animation: logoGlowPulse calc(4s \/ var(--tw-anim-mult)) ease-in-out infinite;\n  transform-style: preserve-3d;\n  transform: translateZ(20px);\n}\n.ae4u-v8 .logo-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  object-fit: contain;\n  display: block;\n  position: relative;\n  z-index: 1;\n}\n\/* Layer 2: sphere highlight \u2014 glossy upper-left specular *\/\n.ae4u-v8 .logo-spec {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: radial-gradient(circle at 30% 25%,\n      rgba(255,255,255,0.40) 0%,\n      rgba(255,255,255,0.10) 22%,\n      rgba(255,255,255,0.00) 50%);\n  pointer-events: none;\n  mix-blend-mode: screen;\n  z-index: 2;\n}\n\/* Layer 3: edge rim \u2014 top white \/ bottom dark thin ring *\/\n.ae4u-v8 .logo-rim {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  pointer-events: none;\n  z-index: 3;\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,0.55),\n    inset 0 -1.5px 0 rgba(2,13,31,0.45),\n    inset 1px 0 0 rgba(255,255,255,0.15),\n    inset -1px 0 0 rgba(2,13,31,0.15);\n}\n\/* Layer 4: floor shadow \u2014 soft ground shadow beneath logo *\/\n.ae4u-v8 .logo-floor-shadow {\n  position: absolute;\n  left: 50%;\n  bottom: -10%;\n  width: 78%;\n  height: 36px;\n  transform: translateX(-50%) translateZ(-20px);\n  background: radial-gradient(ellipse at center, rgba(2,13,31,0.55) 0%, rgba(2,13,31,0.18) 40%, transparent 70%);\n  filter: blur(18px);\n  pointer-events: none;\n  z-index: 0;\n  transition: width 0.6s var(--ease), bottom 0.6s var(--ease), filter 0.6s var(--ease), opacity 0.6s var(--ease);\n}\n.ae4u-v8 .logo-arena:hover .logo-floor-shadow {\n  width: 64%;\n  bottom: -14%;\n  filter: blur(28px);\n  opacity: 0.85;\n}\n\/* Layer 5: reflection \u2014 soft blue glow underneath suggesting the sphere on a glossy floor *\/\n.ae4u-v8 .logo-reflection {\n  position: absolute;\n  left: 50%;\n  bottom: -36%;\n  width: 90%;\n  height: 50%;\n  transform: translateX(-50%) scaleY(-1);\n  background:\n    radial-gradient(ellipse at 50% 0%,\n      rgba(37,99,235,0.55) 0%,\n      rgba(34,211,238,0.25) 30%,\n      transparent 65%);\n  filter: blur(14px);\n  opacity: 0.5;\n  pointer-events: none;\n  z-index: 0;\n  mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), transparent 80%);\n  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), transparent 80%);\n}\n.ae4u-v8.no-logo-spin .logo-3d-inner { animation: none; }\n@keyframes logoIdle3D  {\n  0%   { transform: rotateY(0deg)   rotateX(0deg)  translateY(0)    scale(1);    }\n  25%  { transform: rotateY(8deg)   rotateX(-3deg) translateY(-6px) scale(1.012); }\n  50%  { transform: rotateY(0deg)   rotateX(0deg)  translateY(0)    scale(1);    }\n  75%  { transform: rotateY(-8deg)  rotateX(3deg)  translateY(-6px) scale(1.012); }\n  100% { transform: rotateY(0deg)   rotateX(0deg)  translateY(0)    scale(1);    }\n}\n@keyframes logoGlowPulse  {\n  0%, 100% {\n    box-shadow:\n      inset 0 -22px 44px rgba(2,13,31,0.28),\n      inset 0 14px 28px rgba(255,255,255,0.10),\n      0 0 80px 6px rgba(34,211,238,0.32),\n      0 0 160px 18px rgba(34,211,238,0.16),\n      0 20px 60px rgba(37,99,235,0.45);\n  }\n  50% {\n    box-shadow:\n      inset 0 -22px 44px rgba(2,13,31,0.28),\n      inset 0 14px 28px rgba(255,255,255,0.12),\n      0 0 110px 12px rgba(34,211,238,0.5),\n      0 0 220px 28px rgba(34,211,238,0.22),\n      0 24px 80px rgba(37,99,235,0.55);\n  }\n}\n@keyframes logoIdle  {\n  0%   { transform: translateY(0px)   rotateY(-14deg) rotateX(4deg); }\n  25%  { transform: translateY(-6px)  rotateY(  0deg) rotateX(6deg); }\n  50%  { transform: translateY(-8px)  rotateY( 14deg) rotateX(-2deg); }\n  75%  { transform: translateY(-2px)  rotateY(  0deg) rotateX(-6deg); }\n  100% { transform: translateY(0px)   rotateY(-14deg) rotateX(4deg); }\n}\n\/* Glowing aura behind logo *\/\n.ae4u-v8 .logo-aura {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--tw-logo-size, 300px) * 1.55);\n  height: calc(var(--tw-logo-size, 300px) * 1.55);\n  transform: translate(-50%, -50%);\n  background: radial-gradient(circle, rgba(6,182,212,0.42) 0%, rgba(37,99,235,0.28) 30%, transparent 65%);\n  border-radius: 50%;\n  animation: auraPulse calc(3s \/ var(--tw-anim-mult)) ease-in-out infinite;\n  z-index: 1;\n  pointer-events: none;\n  filter: blur(2px);\n}\n@keyframes auraPulse  {\n  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.55; }\n  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }\n}\n\/* ============================================\n   PORTAL RIBBONS \u2014 flowing energy + glowing dots\n   ============================================ *\/\n.ae4u-v8 .portals {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  pointer-events: none;\n  overflow: visible;\n}\n.ae4u-v8 .portal-link { text-decoration: none; }\n.ae4u-v8 .portal-link:focus-visible .portal-group { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 30px; }\n.ae4u-v8 .portal-group {\n  pointer-events: auto;\n  cursor: pointer;\n  transition: filter 0.5s var(--ease), transform 0.4s var(--ease);\n  transform-origin: center;\n  transform-box: fill-box;\n}\n.ae4u-v8 .portal-group .portal-arc {\n  fill: none;\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  stroke-dasharray: 6 8;\n  animation: portalFlow calc(10s \/ var(--tw-anim-mult)) linear infinite;\n  transition: stroke-width 0.5s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease);\n  opacity: 0.65;\n  filter: drop-shadow(0 0 4px currentColor);\n}\n.ae4u-v8 .portal-group .portal-dot-glow {\n  transition: r 0.5s var(--ease), opacity 0.5s var(--ease);\n  animation: dotPulse calc(2s \/ var(--tw-anim-mult)) ease-in-out infinite;\n  transform-origin: center;\n  transform-box: fill-box;\n  filter: blur(2px);\n  opacity: 0.85;\n}\n.ae4u-v8 .portal-group .portal-dot {\n  transition: r 0.5s var(--ease), filter 0.5s var(--ease);\n  filter: drop-shadow(0 0 8px currentColor);\n}\n.ae4u-v8 .portal-group .portal-label {\n  font-family: var(--font);\n  font-weight: 800;\n  font-size: 18px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  fill: #fff;\n  transition: font-size 0.5s var(--ease), fill 0.5s var(--ease);\n  text-shadow: 0 2px 10px rgba(0,0,0,0.75);\n  paint-order: stroke fill;\n  stroke: rgba(2,13,31,0.55);\n  stroke-width: 0.6;\n}\n.ae4u-v8 .portal-link:hover .portal-arc,\n.ae4u-v8 .portal-link:focus-visible .portal-arc {\n  stroke-width: 5;\n  opacity: 1;\n  animation-duration: 5s;\n  filter: drop-shadow(0 0 18px currentColor);\n}\n.ae4u-v8 .portal-link:hover .portal-dot,\n.ae4u-v8 .portal-link:focus-visible .portal-dot { r: 13; }\n.ae4u-v8 .portal-link:hover .portal-dot-glow,\n.ae4u-v8 .portal-link:focus-visible .portal-dot-glow { r: 30; opacity: 1; }\n.ae4u-v8 .portal-link:hover .portal-label,\n.ae4u-v8 .portal-link:focus-visible .portal-label { font-size: 21px; fill: currentColor; }\n.ae4u-v8 .portal-link:hover .portal-group,\n.ae4u-v8 .portal-link:focus-visible .portal-group { filter: brightness(1.15); }\n@keyframes portalFlow  {\n  from { stroke-dashoffset: 0; }\n  to   { stroke-dashoffset: -140; }\n}\n@keyframes dotPulse  {\n  0%, 100% { transform: scale(1); opacity: 0.7; }\n  50%      { transform: scale(1.35); opacity: 1; }\n}\n\/* ============================================\n   GALAXY \u2014 orbiting words (donut mask, no logo overlap)\n   ============================================ *\/\n.ae4u-v8 .galaxy {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 8;\n  pointer-events: none;\n  transform-style: preserve-3d;\n  \/* Donut mask: hide inside the logo radius, fade out far from center,\n     also fade out at the top edge so words never enter the nav band *\/\n  --inner: 175px;\n  --outer: 360px;\n  -webkit-mask-image:\n    radial-gradient(circle at 50% 50%,\n      transparent 0,\n      transparent var(--inner),\n      black calc(var(--inner) + 35px),\n      black var(--outer),\n      transparent calc(var(--outer) + 30px));\n  mask-image:\n    radial-gradient(circle at 50% 50%,\n      transparent 0,\n      transparent var(--inner),\n      black calc(var(--inner) + 35px),\n      black var(--outer),\n      transparent calc(var(--outer) + 30px));\n}\n.ae4u-v8 .galaxy-word {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-family: var(--font);\n  font-weight: 600;\n  white-space: nowrap;\n  pointer-events: auto;\n  cursor: pointer;\n  user-select: none;\n  transform-style: preserve-3d;\n  --radius: 280px;\n  --orbit-dur: 30s;\n  --orbit-delay: 0s;\n  --depth: 0px;\n  --size: 15px;\n  --color: rgba(255,255,255,0.85);\n  --opa: 0.85;\n  --blur: 0px;\n  font-size: var(--size);\n  color: var(--color);\n  opacity: var(--opa);\n  filter: blur(var(--blur));\n  animation: galaxyOrbit calc(var(--orbit-dur) \/ var(--tw-anim-mult)) linear infinite var(--orbit-delay);\n  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease), filter 0.4s var(--ease);\n}\n.ae4u-v8 .galaxy-word:hover {\n  color: #fff !important;\n  text-shadow: 0 0 20px var(--color);\n  filter: blur(0) !important;\n  z-index: 25;\n}\n@keyframes galaxyOrbit  {\n  from { transform: rotate(0deg)   translateX(var(--radius)) rotate(0deg)   translateZ(var(--depth)); }\n  to   { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg) translateZ(var(--depth)); }\n}\n\/* ============================================\n   HERO COPY \u2014 visible above galaxy, with shadow\n   ============================================ *\/\n.ae4u-v8 .hero-text-block {\n  position: relative;\n  z-index: 20;\n  max-width: 720px;\n  margin: 4px auto 0;\n  text-align: center;\n  padding: 0 1rem;\n}\n.ae4u-v8 .hero-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 18px;\n  border-radius: 999px;\n  border: 1px solid rgba(34,211,238,0.4);\n  background: rgba(6,182,212,0.10);\n  backdrop-filter: blur(8px);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  color: var(--cyan-light);\n  margin-bottom: 22px;\n  box-shadow: 0 0 24px rgba(6,182,212,0.2);\n  opacity: 0;\n  transform: translateY(16px);\n  animation: heroReveal 0.9s var(--ease) 0.2s forwards;\n}\n.ae4u-v8 .hero-eyebrow .pulse {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--cyan-light);\n  box-shadow: 0 0 12px var(--cyan-light);\n  animation: pulseDot 1.6s ease-in-out infinite;\n}\n@keyframes pulseDot  {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(0.7); }\n}\n.ae4u-v8 .hero-title {\n  font-size: clamp(2.6rem, 6vw, 4.5rem);\n  font-weight: 800;\n  letter-spacing: -0.03em;\n  line-height: 1.02;\n  margin-bottom: 22px;\n  text-wrap: balance;\n  text-shadow:\n    0 0 80px rgba(34,211,238,0.15),\n    0 0 24px rgba(2,13,31,0.7),\n    0 2px 12px rgba(2,13,31,0.5);\n}\n.ae4u-v8 .hero-title .line-1, .ae4u-v8 .hero-title .line-2 {\n  display: block;\n  opacity: 0;\n  transform: translateY(16px);\n  animation: heroReveal 0.9s var(--ease) forwards;\n}\n.ae4u-v8 .hero-title .line-1 {\n  color: #fff;\n  animation-delay: 0.4s;\n}\n.ae4u-v8 .hero-title .line-2 {\n  background: linear-gradient(90deg, #60a5fa 0%, #22d3ee 25%, #a78bfa 50%, #22d3ee 75%, #60a5fa 100%);\n  background-size: 250% auto;\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  animation:\n    heroReveal 0.9s var(--ease) 0.55s forwards,\n    textShift calc(12s \/ var(--tw-anim-mult)) linear 1s infinite;\n  text-shadow: none;\n}\n@keyframes textShift  {\n  to { background-position: 200% center; }\n}\n@keyframes heroReveal  {\n  to { opacity: 1; transform: translateY(0); }\n}\n.ae4u-v8 .hero-sub {\n  font-size: clamp(1rem, 1.5vw, 1.15rem);\n  color: rgba(255,255,255,0.82);\n  max-width: 620px;\n  margin: 0 auto 32px;\n  line-height: 1.6;\n  text-wrap: pretty;\n  text-shadow: 0 2px 12px rgba(2,13,31,0.6);\n  opacity: 0;\n  transform: translateY(16px);\n  animation: heroReveal 0.9s var(--ease) 0.7s forwards;\n}\n.ae4u-v8 .hero-actions {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n  justify-content: center;\n  opacity: 0;\n  transform: translateY(16px);\n  animation: heroReveal 0.9s var(--ease) 0.85s forwards;\n}\n.ae4u-v8 .btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  padding: 15px 28px;\n  border-radius: 14px;\n  font-weight: 700;\n  font-size: 15.5px;\n  letter-spacing: -0.005em;\n  transition: all 0.5s var(--ease);\n  position: relative;\n}\n.ae4u-v8 .btn-primary {\n  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);\n  color: #fff;\n  box-shadow:\n    0 8px 36px rgba(6,182,212,0.45),\n    0 2px 8px rgba(37,99,235,0.35),\n    inset 0 1px 0 rgba(255,255,255,0.28);\n  position: relative;\n  overflow: hidden;\n}\n.ae4u-v8 .btn-primary::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--noise);\n  background-size: 160px 160px;\n  opacity: 0.18;\n  mix-blend-mode: overlay;\n  pointer-events: none;\n}\n.ae4u-v8 .btn-primary:hover {\n  transform: translateY(-2px);\n  box-shadow:\n    0 18px 60px rgba(34,211,238,0.7),\n    0 4px 16px rgba(37,99,235,0.55),\n    inset 0 1px 0 rgba(255,255,255,0.4);\n}\n.ae4u-v8 .btn-ghost {\n  background: rgba(255,255,255,0.04);\n  color: #fff;\n  border: 1px solid rgba(34,211,238,0.35);\n  backdrop-filter: blur(8px);\n}\n.ae4u-v8 .btn-ghost:hover {\n  background: rgba(34,211,238,0.1);\n  border-color: var(--cyan-light);\n  transform: translateY(-2px);\n}\n\/* Live ticker *\/\n.ae4u-v8 .live-ticker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 12;\n  padding: 14px 48px;\n  background: linear-gradient(180deg, transparent, rgba(2,13,31,0.85));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  font-size: 13px;\n  color: rgba(255,255,255,0.78);\n  font-weight: 500;\n  border-top: 1px solid rgba(34,211,238,0.15);\n}\n.ae4u-v8 .live-ticker .live-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #10b981;\n  box-shadow: 0 0 12px #10b981;\n  animation: pulseDot 1.4s ease-in-out infinite;\n}\n.ae4u-v8 .live-ticker .ticker-text { min-height: 18px; transition: opacity 0.5s var(--ease); }\n.ae4u-v8 .live-ticker .ticker-text strong { color: #fff; font-weight: 700; }\n\/* Word tooltip *\/\n.ae4u-v8 .word-tooltip {\n  position: fixed;\n  z-index: 100;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #0a2060 0%, #051535 100%);\n  border: 1px solid rgba(34,211,238,0.4);\n  border-radius: 14px;\n  color: #fff;\n  font-size: 14px;\n  max-width: 280px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);\n  opacity: 0;\n  transform: translateY(8px);\n  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);\n  pointer-events: none;\n}\n.ae4u-v8 .word-tooltip.show {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n.ae4u-v8 .word-tooltip .tip-word {\n  font-weight: 800;\n  font-size: 16px;\n  background: linear-gradient(90deg, var(--cyan-light), var(--brand-light));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  margin-bottom: 4px;\n}\n.ae4u-v8 .word-tooltip .tip-def {\n  color: rgba(255,255,255,0.78);\n  font-size: 13px;\n  line-height: 1.5;\n  margin-bottom: 8px;\n}\n.ae4u-v8 .word-tooltip .tip-link {\n  font-size: 12px;\n  font-weight: 800;\n  color: var(--cyan-light);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\/* ============================================\n   SECTION COMMON\n   ============================================ *\/\n.ae4u-v8 .section {\n  padding: 120px 48px;\n  position: relative;\n}\n.ae4u-v8 .section-inner { max-width: 1280px; margin: 0 auto; }\n.ae4u-v8 .eyebrow {\n  display: inline-block;\n  font-size: 12px;\n  font-weight: 800;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  background: linear-gradient(90deg, var(--brand), var(--cyan));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  margin-bottom: 14px;\n}\n.ae4u-v8 .section-title {\n  font-size: clamp(2rem, 4vw, 3.2rem);\n  font-weight: 800;\n  letter-spacing: -0.025em;\n  line-height: 1.05;\n  color: var(--ink);\n  margin-bottom: 14px;\n  text-wrap: balance;\n}\n.ae4u-v8 .section-sub {\n  font-size: 1.15rem;\n  color: var(--muted);\n  max-width: 620px;\n  text-wrap: pretty;\n}\n.ae4u-v8 .section-head {\n  max-width: 740px;\n  margin: 0 auto 64px;\n  text-align: center;\n}\n.ae4u-v8 .section-head .section-sub { margin: 0 auto; }\n\/* ============================================\n   STATS \u2014 glass cards\n   ============================================ *\/\n.ae4u-v8 .stats {\n  background: var(--bg-light);\n  padding: 90px 48px;\n  position: relative;\n  z-index: 1;\n}\n.ae4u-v8 .stats-grid {\n  max-width: 1280px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 24px;\n}\n.ae4u-v8 .stat-card {\n  background: rgba(255,255,255,0.7);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  border-radius: 22px;\n  padding: 36px 30px;\n  border: 1px solid var(--c-border, rgba(37,99,235,0.18));\n  position: relative;\n  overflow: hidden;\n  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.5s var(--ease);\n}\n.ae4u-v8 .stat-card:hover {\n  transform: translateY(-6px);\n  border-color: var(--c1);\n}\n.ae4u-v8 .stat-num {\n  font-size: clamp(2rem, 5vw, 3.5rem);\n  font-weight: 800;\n  letter-spacing: -0.04em;\n  line-height: 1;\n  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  margin-bottom: 10px;\n  text-shadow: 0 4px 24px var(--c-glow, rgba(37,99,235,0.25));\n}\n.ae4u-v8 .stat-label {\n  font-size: 0.9rem;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n.ae4u-v8 .stat-card[data-color=\"blue\"] { --c1: #2563eb; --c2: #60a5fa; --c-border: rgba(37,99,235,0.30);  --c-glow: rgba(37,99,235,0.28);  box-shadow: 0 8px 28px rgba(37,99,235,0.08); }\n.ae4u-v8 .stat-card[data-color=\"purple\"] { --c1: #8b5cf6; --c2: #a78bfa; --c-border: rgba(139,92,246,0.30); --c-glow: rgba(139,92,246,0.30); box-shadow: 0 8px 28px rgba(139,92,246,0.10); }\n.ae4u-v8 .stat-card[data-color=\"teal\"] { --c1: #0d9488; --c2: #34d399; --c-border: rgba(13,148,136,0.30); --c-glow: rgba(13,148,136,0.30); box-shadow: 0 8px 28px rgba(13,148,136,0.10); }\n.ae4u-v8 .stat-card[data-color=\"orange\"] { --c1: #f97316; --c2: #fb923c; --c-border: rgba(249,115,22,0.30); --c-glow: rgba(249,115,22,0.30); box-shadow: 0 8px 28px rgba(249,115,22,0.10); }\n.ae4u-v8 .stat-card[data-color=\"blue\"]:hover { box-shadow: 0 16px 44px rgba(37,99,235,0.22); }\n.ae4u-v8 .stat-card[data-color=\"purple\"]:hover { box-shadow: 0 16px 44px rgba(139,92,246,0.25); }\n.ae4u-v8 .stat-card[data-color=\"teal\"]:hover { box-shadow: 0 16px 44px rgba(13,148,136,0.25); }\n.ae4u-v8 .stat-card[data-color=\"orange\"]:hover { box-shadow: 0 16px 44px rgba(249,115,22,0.25); }\n\/* ============================================\n   COURSES \u2014 premium polish\n   ============================================ *\/\n.ae4u-v8 .courses { background: var(--bg-light); }\n.ae4u-v8 .courses-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 28px;\n  perspective: 1400px;\n}\n.ae4u-v8 .course-card {\n  background: #fff;\n  border-radius: 18px;\n  padding: 36px 30px 28px;\n  border: 1px solid var(--border);\n  position: relative;\n  overflow: hidden;\n  transform-style: preserve-3d;\n  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);\n  cursor: pointer;\n  min-height: 340px;\n  display: flex;\n  flex-direction: column;\n}\n\/* top accent bar with downward glow *\/\n.ae4u-v8 .course-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: linear-gradient(90deg, var(--c1) 0%, var(--c2) 100%);\n  transition: height 0.5s var(--ease);\n  z-index: 2;\n  box-shadow: 0 4px 16px var(--c-shadow);\n}\n.ae4u-v8 .course-card:hover::before { height: 6px; }\n\/* inner glow on hover (radial from top) *\/\n.ae4u-v8 .course-card::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(ellipse at 50% 0%, var(--c-glow-soft) 0%, transparent 60%);\n  opacity: 0;\n  transition: opacity 0.6s var(--ease);\n  pointer-events: none;\n  z-index: 0;\n}\n.ae4u-v8 .course-card:hover::after { opacity: 1; }\n.ae4u-v8 .course-card > * { position: relative; z-index: 1; }\n.ae4u-v8 .course-icon-wrap {\n  width: 60px;\n  height: 60px;\n  border-radius: 16px;\n  background: var(--c-icon-bg);\n  display: grid;\n  place-items: center;\n  margin-bottom: 22px;\n  color: var(--c1);\n  transition: transform 0.6s var(--ease);\n}\n.ae4u-v8 .course-card:hover .course-icon-wrap { transform: translateY(-2px) scale(1.04); }\n.ae4u-v8 .course-tag {\n  display: inline-block;\n  padding: 5px 12px;\n  border-radius: 999px;\n  background: var(--c-tag-bg);\n  font-size: 0.7rem;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--c1);\n  margin-bottom: 14px;\n  align-self: flex-start;\n}\n.ae4u-v8 .course-title {\n  font-size: 1.4rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  color: var(--ink);\n  margin-bottom: 10px;\n}\n.ae4u-v8 .course-desc {\n  color: var(--muted-2);\n  font-size: 0.95rem;\n  line-height: 1.65;\n  font-weight: 500;\n  margin-bottom: 22px;\n  flex: 1;\n}\n.ae4u-v8 .course-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid var(--border);\n  padding-top: 18px;\n}\n.ae4u-v8 .course-count {\n  font-size: 0.85rem;\n  color: var(--c1);\n  font-weight: 700;\n}\n.ae4u-v8 .course-link {\n  font-size: 14px;\n  font-weight: 800;\n  color: var(--c1);\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.ae4u-v8 .course-link .arrow {\n  transition: transform 0.5s var(--ease);\n  display: inline-block;\n}\n.ae4u-v8 .course-card:hover .course-link .arrow { transform: translateX(4px); }\n.ae4u-v8 .course-card[data-course=\"grammar\"] { --c1: #8b5cf6; --c2: #a78bfa; --c-shadow: rgba(139,92,246,0.30); --c-glow-soft: rgba(139,92,246,0.05); --c-icon-bg: rgba(139,92,246,0.12); --c-tag-bg: rgba(139,92,246,0.10); }\n.ae4u-v8 .course-card[data-course=\"toefl\"] { --c1: #2563eb; --c2: #60a5fa; --c-shadow: rgba(37,99,235,0.30);  --c-glow-soft: rgba(37,99,235,0.05);  --c-icon-bg: rgba(37,99,235,0.12);  --c-tag-bg: rgba(37,99,235,0.10); }\n.ae4u-v8 .course-card[data-course=\"ielts\"] { --c1: #0d9488; --c2: #34d399; --c-shadow: rgba(13,148,136,0.30); --c-glow-soft: rgba(13,148,136,0.05); --c-icon-bg: rgba(13,148,136,0.12); --c-tag-bg: rgba(13,148,136,0.10); }\n.ae4u-v8 .course-card[data-course=\"dictation\"] { --c1: #f97316; --c2: #fb923c; --c-shadow: rgba(249,115,22,0.30); --c-glow-soft: rgba(249,115,22,0.05); --c-icon-bg: rgba(249,115,22,0.12); --c-tag-bg: rgba(249,115,22,0.10); }\n.ae4u-v8 .course-card[data-course=\"cambridge\"] { --c1: #ef4444; --c2: #f87171; --c-shadow: rgba(239,68,68,0.30);  --c-glow-soft: rgba(239,68,68,0.05);  --c-icon-bg: rgba(239,68,68,0.12);  --c-tag-bg: rgba(239,68,68,0.10); }\n.ae4u-v8 .course-card[data-course=\"magazine\"] { --c1: #f43f5e; --c2: #fb7185; --c-shadow: rgba(244,63,94,0.30);  --c-glow-soft: rgba(244,63,94,0.05);  --c-icon-bg: rgba(244,63,94,0.10);  --c-tag-bg: rgba(244,63,94,0.10); }\n.ae4u-v8 .course-card[data-course=\"grammar\"]:hover { box-shadow: 0 24px 60px rgba(139,92,246,0.18); }\n.ae4u-v8 .course-card[data-course=\"toefl\"]:hover { box-shadow: 0 24px 60px rgba(37,99,235,0.18); }\n.ae4u-v8 .course-card[data-course=\"ielts\"]:hover { box-shadow: 0 24px 60px rgba(13,148,136,0.18); }\n.ae4u-v8 .course-card[data-course=\"dictation\"]:hover { box-shadow: 0 24px 60px rgba(249,115,22,0.18); }\n.ae4u-v8 .course-card[data-course=\"cambridge\"]:hover { box-shadow: 0 24px 60px rgba(239,68,68,0.18); }\n.ae4u-v8 .course-card[data-course=\"magazine\"]:hover { box-shadow: 0 24px 60px rgba(244,63,94,0.18); }\n.ae4u-v8 .course-soon-badge {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: linear-gradient(135deg, var(--c1), var(--c2));\n  color: #fff;\n  z-index: 2;\n}\n\/* ============================================\n   FEATURES\n   ============================================ *\/\n.ae4u-v8 .features { background: var(--bg-light); }\n.ae4u-v8 .features-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 28px;\n}\n.ae4u-v8 .feature-card {\n  background: #fff;\n  border-radius: 22px;\n  padding: 40px 32px;\n  border: 1px solid var(--border);\n  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);\n  position: relative;\n  overflow: hidden;\n}\n.ae4u-v8 .feature-card:hover {\n  transform: translateY(-6px);\n  box-shadow: 0 24px 56px var(--shadow, rgba(37,99,235,0.15));\n}\n.ae4u-v8 .feature-card[data-tint=\"blue\"] { --shadow: rgba(37,99,235,0.18); --tint-1: #2563eb; --tint-2: #60a5fa; }\n.ae4u-v8 .feature-card[data-tint=\"teal\"] { --shadow: rgba(13,148,136,0.18); --tint-1: #0d9488; --tint-2: #34d399; }\n.ae4u-v8 .feature-card[data-tint=\"purple\"] { --shadow: rgba(139,92,246,0.18); --tint-1: #8b5cf6; --tint-2: #a78bfa; }\n.ae4u-v8 .feature-icon {\n  width: 72px;\n  height: 72px;\n  border-radius: 20px;\n  background: linear-gradient(135deg, var(--tint-1), var(--tint-2));\n  display: grid;\n  place-items: center;\n  margin-bottom: 24px;\n  color: #fff;\n  box-shadow: 0 12px 32px var(--shadow);\n}\n.ae4u-v8 .feature-title {\n  font-size: 1.45rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  color: var(--ink);\n  margin-bottom: 12px;\n}\n.ae4u-v8 .feature-desc {\n  color: var(--muted);\n  font-size: 1rem;\n  line-height: 1.6;\n}\n\/* ============================================\n   TRY-A-LESSON\n   ============================================ *\/\n.ae4u-v8 .try-lesson { background: var(--bg-light); }\n.ae4u-v8 .try-card {\n  background: #fff;\n  border-radius: 26px;\n  padding: 48px;\n  border: 1px solid var(--border);\n  box-shadow: 0 24px 64px rgba(37,99,235,0.08);\n  max-width: 920px;\n  margin: 0 auto;\n  position: relative;\n  overflow: hidden;\n}\n.ae4u-v8 .try-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 6px;\n  background: linear-gradient(90deg, var(--brand), var(--cyan), var(--indigo), var(--grammar-1));\n}\n.ae4u-v8 .try-passage {\n  font-size: 1.25rem;\n  line-height: 1.85;\n  color: var(--ink);\n  margin-bottom: 28px;\n}\n.ae4u-v8 .gap {\n  display: inline-block;\n  min-width: 110px;\n  padding: 4px 14px;\n  margin: 0 4px;\n  border-radius: 10px;\n  background: var(--bg-light);\n  border: 2px dashed var(--border);\n  font-weight: 700;\n  color: var(--muted-2);\n  text-align: center;\n  transition: all 0.45s var(--ease);\n  font-size: 0.95em;\n}\n.ae4u-v8 .gap.filled {\n  border-style: solid;\n  background: rgba(99,102,241,0.08);\n  border-color: var(--indigo);\n  color: var(--indigo);\n}\n.ae4u-v8 .gap.correct {\n  background: rgba(13,148,136,0.12);\n  border-color: var(--ielts-1);\n  color: var(--ielts-1);\n  animation: shakeIn 0.5s var(--ease);\n}\n.ae4u-v8 .gap.wrong {\n  background: rgba(239,68,68,0.12);\n  border-color: var(--cambridge-1);\n  color: var(--cambridge-1);\n  animation: shakeIn 0.5s var(--ease);\n}\n@keyframes shakeIn  {\n  0%, 100% { transform: translateX(0); }\n  25% { transform: translateX(-4px); }\n  75% { transform: translateX(4px); }\n}\n.ae4u-v8 .options-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-bottom: 22px;\n}\n.ae4u-v8 .option-pill {\n  padding: 12px 22px;\n  border-radius: 999px;\n  background: #fff;\n  border: 2px solid var(--border);\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--ink);\n  cursor: pointer;\n  transition: all 0.4s var(--ease);\n}\n.ae4u-v8 .option-pill:hover:not(.used) {\n  border-color: var(--c, var(--brand));\n  color: var(--c, var(--brand));\n  transform: translateY(-2px);\n}\n.ae4u-v8 .option-pill.used { opacity: 0.35; cursor: not-allowed; }\n.ae4u-v8 .option-pill[data-c=\"b\"] { --c: #2563eb; }\n.ae4u-v8 .option-pill[data-c=\"p\"] { --c: #8b5cf6; }\n.ae4u-v8 .option-pill[data-c=\"t\"] { --c: #0d9488; }\n.ae4u-v8 .option-pill[data-c=\"o\"] { --c: #f97316; }\n.ae4u-v8 .option-pill[data-c=\"r\"] { --c: #ef4444; }\n.ae4u-v8 .option-pill[data-c=\"m\"] { --c: #f43f5e; }\n.ae4u-v8 .option-pill[data-c=\"i\"] { --c: #6366f1; }\n.ae4u-v8 .try-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  border-top: 1px solid var(--border);\n  padding-top: 24px;\n}\n.ae4u-v8 .try-score { font-size: 15px; font-weight: 700; color: var(--muted); }\n.ae4u-v8 .try-score .score-num { color: var(--brand); font-size: 1.5em; }\n.ae4u-v8 .btn-check {\n  background: linear-gradient(135deg, var(--brand), var(--cyan));\n  color: #fff;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-weight: 700;\n  font-size: 15px;\n  box-shadow: 0 8px 24px rgba(6,182,212,0.4);\n  transition: all 0.5s var(--ease);\n}\n.ae4u-v8 .btn-check:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 14px 36px rgba(6,182,212,0.6);\n}\n.ae4u-v8 .btn-reset {\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--muted-2);\n  padding: 8px 16px;\n  border-radius: 8px;\n  transition: color 0.35s var(--ease);\n}\n.ae4u-v8 .btn-reset:hover { color: var(--ink); }\n\/* Confetti *\/\n.ae4u-v8 .confetti { position: fixed; pointer-events: none; z-index: 200; }\n.ae4u-v8 .confetti-piece {\n  position: absolute;\n  width: 10px;\n  height: 14px;\n  top: 50%;\n  left: 50%;\n  border-radius: 2px;\n  animation: confettiFall 1.6s cubic-bezier(0.2,0.7,0.5,1) forwards;\n}\n@keyframes confettiFall  {\n  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }\n  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--tr)); opacity: 0; }\n}\n\/* ============================================\n   YOUTUBE CTA\n   ============================================ *\/\n.ae4u-v8 .youtube {\n  background: linear-gradient(135deg, #020d1f 0%, #051535 30%, #0a2060 60%, #0d3485 100%);\n  color: #fff;\n  padding: 120px 48px;\n  position: relative;\n  overflow: hidden;\n}\n.ae4u-v8 .youtube::before {\n  content: '';\n  position: absolute;\n  top: -30%;\n  right: -10%;\n  width: 60%;\n  height: 90%;\n  background: radial-gradient(circle, rgba(239,68,68,0.18) 0%, transparent 60%);\n  pointer-events: none;\n}\n.ae4u-v8 .youtube-grid {\n  max-width: 1280px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1.05fr;\n  gap: 60px;\n  align-items: center;\n  position: relative;\n  z-index: 1;\n}\n.ae4u-v8 .youtube .section-title { color: #fff; }\n.ae4u-v8 .youtube .section-sub { color: rgba(255,255,255,0.75); }\n.ae4u-v8 .btn-youtube {\n  background: linear-gradient(135deg, #ef4444 0%, #f43f5e 100%);\n  color: #fff;\n  padding: 18px 32px;\n  border-radius: 14px;\n  font-weight: 700;\n  font-size: 16px;\n  box-shadow: 0 12px 36px rgba(239,68,68,0.5);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  margin-top: 28px;\n  transition: all 0.5s var(--ease);\n}\n.ae4u-v8 .btn-youtube:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 18px 52px rgba(239,68,68,0.7);\n}\n.ae4u-v8 .video-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 18px;\n}\n.ae4u-v8 .video-thumb {\n  aspect-ratio: 16\/10;\n  border-radius: 18px;\n  background: linear-gradient(135deg, var(--c1, #2563eb), var(--c2, #06b6d4));\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);\n  border: 1px solid rgba(255,255,255,0.08);\n  display: flex;\n  align-items: flex-end;\n  padding: 18px;\n}\n.ae4u-v8 .video-thumb:nth-child(1) { --c1: #8b5cf6; --c2: #6366f1; grid-row: span 2; aspect-ratio: 1; }\n.ae4u-v8 .video-thumb:nth-child(2) { --c1: #0d9488; --c2: #34d399; }\n.ae4u-v8 .video-thumb:nth-child(3) { --c1: #f97316; --c2: #fb923c; }\n.ae4u-v8 .video-thumb:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 24px 64px rgba(0,0,0,0.4); }\n.ae4u-v8 .video-thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45));\n}\n.ae4u-v8 .video-thumb .play-btn {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 60px;\n  height: 60px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.95);\n  display: grid;\n  place-items: center;\n  color: #ef4444;\n  box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n  z-index: 2;\n}\n.ae4u-v8 .video-info { position: relative; z-index: 2; color: #fff; }\n.ae4u-v8 .video-info .video-tag {\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  opacity: 0.85;\n}\n.ae4u-v8 .video-info .video-title {\n  font-size: 15px;\n  font-weight: 700;\n  margin-top: 4px;\n  line-height: 1.25;\n}\n\/* ============================================\n   FOOTER\n   ============================================ *\/\n.ae4u-v8 .site-footer {\n  background: linear-gradient(180deg, #020d1f 0%, #010817 100%);\n  color: rgba(255,255,255,0.7);\n  padding: 80px 48px 32px;\n  border-top: 1px solid rgba(34,211,238,0.1);\n}\n.ae4u-v8 .footer-grid {\n  max-width: 1280px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;\n  gap: 48px;\n  margin-bottom: 56px;\n}\n.ae4u-v8 .footer-brand {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  font-size: 20px;\n  font-weight: 800;\n  color: #fff;\n  margin-bottom: 16px;\n}\n.ae4u-v8 .footer-logo {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  object-fit: contain;\n  box-shadow:\n    inset 0 -2px 6px rgba(2,13,31,0.3),\n    0 4px 16px rgba(37,99,235,0.45);\n}\n.ae4u-v8 .footer-tagline {\n  font-size: 14px;\n  line-height: 1.6;\n  margin-bottom: 22px;\n  max-width: 280px;\n}\n.ae4u-v8 .footer-contact {\n  font-size: 14px;\n  color: var(--cyan-light);\n  font-weight: 600;\n}\n.ae4u-v8 .footer-col h4 {\n  color: #fff;\n  font-size: 13px;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  margin-bottom: 20px;\n}\n.ae4u-v8 .footer-col ul {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.ae4u-v8 .footer-col a {\n  font-size: 14px;\n  color: rgba(255,255,255,0.65);\n  transition: color 0.35s var(--ease);\n}\n.ae4u-v8 .footer-col a:hover { color: var(--cyan-light); }\n.ae4u-v8 .footer-bottom {\n  max-width: 1280px;\n  margin: 0 auto;\n  border-top: 1px solid rgba(255,255,255,0.08);\n  padding-top: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  font-size: 13px;\n}\n.ae4u-v8 .social-row { display: flex; gap: 10px; }\n.ae4u-v8 .social-row a {\n  width: 38px;\n  height: 38px;\n  border-radius: 12px;\n  border: 1px solid rgba(255,255,255,0.12);\n  display: grid;\n  place-items: center;\n  color: rgba(255,255,255,0.75);\n  transition: all 0.4s var(--ease);\n}\n.ae4u-v8 .social-row a:hover {\n  border-color: var(--cyan);\n  color: var(--cyan-light);\n  box-shadow: 0 0 16px rgba(6,182,212,0.4);\n  transform: translateY(-2px);\n}\n\/* ============================================\n   REVEAL\n   ============================================ *\/\n.ae4u-v8 .reveal {\n  opacity: 0;\n  transform: translateY(28px);\n  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);\n}\n.ae4u-v8 .reveal.in {\n  opacity: 1;\n  transform: translateY(0);\n}\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-height: 880px)  {\n.ae4u-v8 .hero-stage { padding: 84px 24px 72px; gap: 10px; }\n.ae4u-v8 .logo-arena { width: min(620px, 92%); }\n.ae4u-v8 .logo-3d { width: 260px; height: 260px; }\n.ae4u-v8 .logo-aura { width: 380px; height: 380px; }\n.ae4u-v8 .hero-title { font-size: clamp(2rem, 4.6vw, 3.6rem); }\n.ae4u-v8 .hero-sub { margin-bottom: 22px; font-size: 0.98rem; }\n.ae4u-v8 .hero-eyebrow { margin-bottom: 16px; }\n}\n@media (max-height: 720px)  {\n.ae4u-v8 .hero { min-height: auto; }\n.ae4u-v8 .hero-stage { padding: 76px 24px 70px; gap: 6px; }\n.ae4u-v8 .logo-arena { width: min(520px, 90%); }\n.ae4u-v8 .logo-3d { width: 200px; height: 200px; }\n.ae4u-v8 .logo-aura { width: 290px; height: 290px; }\n.ae4u-v8 .galaxy { --inner: 130px; --outer: 270px; }\n}\n@media (max-width: 1100px)  {\n.ae4u-v8 .main-nav { display: none; }\n.ae4u-v8 .stats-grid { grid-template-columns: repeat(2, 1fr); }\n.ae4u-v8 .courses-grid { grid-template-columns: repeat(2, 1fr); }\n.ae4u-v8 .features-grid { grid-template-columns: 1fr; }\n.ae4u-v8 .youtube-grid { grid-template-columns: 1fr; }\n.ae4u-v8 .footer-grid { grid-template-columns: 1fr 1fr; }\n}\n@media (max-width: 700px)  {\n.ae4u-v8 .site-header { padding: 18px 24px; }\n.ae4u-v8 .hero-stage { padding: 96px 16px 80px; gap: 12px; }\n.ae4u-v8 .logo-arena { width: min(440px, 94%); }\n.ae4u-v8 .logo-3d { width: 200px; height: 200px; }\n.ae4u-v8 .logo-aura { width: 290px; height: 290px; }\n.ae4u-v8 .portal-group .portal-label { font-size: 16px; letter-spacing: 0.06em; }\n.ae4u-v8 .galaxy { --inner: 130px; --outer: 280px; }\n.ae4u-v8 .galaxy-word { font-size: calc(var(--size) * 0.78) !important; }\n.ae4u-v8 .section { padding: 80px 24px; }\n.ae4u-v8 .stats { padding: 60px 24px; }\n.ae4u-v8 .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }\n.ae4u-v8 .stat-card { padding: 24px 18px; }\n.ae4u-v8 .courses-grid { grid-template-columns: 1fr; }\n.ae4u-v8 .try-card { padding: 28px 22px; }\n.ae4u-v8 .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }\n}\n\/* Reduced motion *\/\n@media (prefers-reduced-motion: reduce)  {\n.ae4u-v8, .ae4u-v8 *::before, .ae4u-v8 *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n.ae4u-v8 .logo-3d, .ae4u-v8 .logo-3d-inner, .ae4u-v8 .galaxy-word, .ae4u-v8 .hero-grid, .ae4u-v8 .starlight span, .ae4u-v8 .logo-aura {\n    animation: none !important;\n    transform: none !important;\n  }\n.ae4u-v8 .hero-title .line-1, .ae4u-v8 .hero-title .line-2, .ae4u-v8 .hero-eyebrow, .ae4u-v8 .hero-sub, .ae4u-v8 .hero-actions {\n    opacity: 1 !important;\n    transform: none !important;\n  }\n}\n\/* user-toggled reduce-motion (from Tweaks) *\/\n.ae4u-v8.tw-reduce-motion *, .ae4u-v8.tw-reduce-motion *::before, .ae4u-v8.tw-reduce-motion *::after {\n  animation-duration: 0.01ms !important;\n  animation-iteration-count: 1 !important;\n  transition-duration: 0.01ms !important;\n}\n.ae4u-v8.tw-reduce-motion .logo-3d-inner, .ae4u-v8.tw-reduce-motion .galaxy-word, .ae4u-v8.tw-reduce-motion .hero-grid, .ae4u-v8.tw-reduce-motion .starlight span, .ae4u-v8.tw-reduce-motion .logo-aura {\n  animation: none !important;\n}\n\/* tweak-driven content visibility *\/\n.ae4u-v8.tw-no-ticker .live-ticker { display: none !important; }\n.ae4u-v8.tw-no-portals .portals { display: none !important; }\n\/* ============================================\n   V7 \u2014 Aesthetic polish: ornaments, divider, sections\n   ============================================ *\/\n\/* Subtle diagonal gradient on light sections (replaces flat bg-light) *\/\n.ae4u-v8 .stats, .ae4u-v8 .section.courses, .ae4u-v8 .section.features, .ae4u-v8 .section.try-lesson {\n  background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #eef4ff 100%);\n}\n\/* Animated cyan divider between dark hero and light stats *\/\n.ae4u-v8 .section-divider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg,\n    transparent 0%,\n    rgba(34,211,238,0) 20%,\n    rgba(34,211,238,0.9) 50%,\n    rgba(34,211,238,0) 80%,\n    transparent 100%);\n  background-size: 50% 100%;\n  background-repeat: no-repeat;\n  background-position: -50% 0;\n  animation: dividerShimmer calc(8s \/ var(--tw-anim-mult)) linear infinite;\n}\n@keyframes dividerShimmer  {\n  from { background-position: -50% 0; }\n  to   { background-position: 150% 0; }\n}\n\/* Title ornament \u2014 40px gradient bar between eyebrow and H2 *\/\n.ae4u-v8 .title-ornament {\n  width: 44px;\n  height: 3px;\n  margin: 14px auto 18px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, var(--orn-1, var(--brand)) 0%, var(--orn-2, var(--cyan-light)) 100%);\n  box-shadow: 0 2px 12px var(--orn-glow, rgba(6,182,212,0.4));\n}\n.ae4u-v8 .section.courses { --orn-1: #8b5cf6; --orn-2: #2563eb; --orn-glow: rgba(139,92,246,0.4); }\n.ae4u-v8 .section.features { --orn-1: #06b6d4; --orn-2: #6366f1; --orn-glow: rgba(6,182,212,0.4); }\n.ae4u-v8 .section.try-lesson { --orn-1: #f97316; --orn-2: #2563eb; --orn-glow: rgba(249,115,22,0.35); }\n\/* Refined body type *\/\n.ae4u-v8 .section-sub, .ae4u-v8 .course-desc, .ae4u-v8 .feature-desc {\n  color: var(--muted);\n  font-weight: 500;\n  line-height: 1.7;\n}\n\/* Glass edge highlight on cards and buttons *\/\n.ae4u-v8 .stat-card, .ae4u-v8 .course-card, .ae4u-v8 .feature-card, .ae4u-v8 .try-card {\n  position: relative;\n}\n.ae4u-v8 .stat-card::after, .ae4u-v8 .course-card .top-edge, .ae4u-v8 .feature-card::before, .ae4u-v8 .try-card::after {\n  \/* 1px inner top highlight for premium glass feel *\/\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);\n  pointer-events: none;\n  z-index: 3;\n}\n.ae4u-v8 .course-card::before {\n  \/* keep the colored accent bar \u2014 top edge highlight via inset shadow *\/\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);\n}\n\/* Stat card numbers get subtle scale-up on reveal feel *\/\n.ae4u-v8 .stat-card:hover .stat-num { transform: scale(1.02); }\n.ae4u-v8 .stat-num { transition: transform 0.6s var(--ease); display: inline-block; }\n\/* ============================================\n   DOL SECTIONS (5 categories with lazy-fetched cards)\n   ============================================ *\/\n.ae4u-v8 .section.dol {\n  padding: 100px 24px 80px;\n  background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.02) 50%, transparent 100%);\n}\n.ae4u-v8 .dol-inner {\n  max-width: 1240px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 72px;\n}\n.ae4u-v8 .dol-section-title {\n  text-align: center;\n  margin-bottom: 24px;\n}\n.ae4u-v8 .dol-section-title h2 {\n  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;\n  font-size: clamp(28px, 4vw, 44px);\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  margin: 0 0 8px;\n  background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n.ae4u-v8 .dol-section-title p {\n  color: var(--text-mute, #94a3b8);\n  font-size: 16px;\n  margin: 0;\n}\n\n.ae4u-v8 .dol-section {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n.ae4u-v8 .dol-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  padding-bottom: 16px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.12);\n  position: relative;\n}\n.ae4u-v8 .dol-header::after {\n  content: '';\n  position: absolute;\n  bottom: -1px;\n  left: 0;\n  width: 64px;\n  height: 2px;\n  background: var(--dol-color, var(--cyan));\n  border-radius: 2px;\n  box-shadow: 0 0 12px var(--dol-color, var(--cyan));\n}\n.ae4u-v8 .dol-header h3 {\n  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;\n  font-size: clamp(20px, 2.5vw, 28px);\n  font-weight: 700;\n  margin: 0;\n  color: #fff;\n  display: flex;\n  align-items: baseline;\n  gap: 14px;\n}\n.ae4u-v8 .dol-header h3 .lessons-count {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--dol-color, var(--cyan));\n  background: color-mix(in srgb, var(--dol-color, var(--cyan)) 14%, transparent);\n  padding: 4px 10px;\n  border-radius: 999px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.ae4u-v8 .dol-header .see-all {\n  color: var(--dol-color, var(--cyan));\n  font-size: 14px;\n  font-weight: 600;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  transition: gap 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n  white-space: nowrap;\n}\n.ae4u-v8 .dol-header .see-all:hover { gap: 12px; }\n\n.ae4u-v8 .dol-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 18px;\n}\n\n\/* Card *\/\n.ae4u-v8 .dol-card,\n.ae4u-v8 .dol-skeleton {\n  position: relative;\n  background: rgba(8, 18, 38, 0.65);\n  border: 1px solid rgba(148, 163, 184, 0.10);\n  border-radius: 16px;\n  overflow: hidden;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  display: flex;\n  flex-direction: column;\n  text-decoration: none;\n  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n              border-color 0.3s, box-shadow 0.4s;\n  will-change: transform;\n  min-height: 280px;\n}\n.ae4u-v8 .dol-card::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 3px;\n  background: linear-gradient(90deg, var(--dol-color, var(--cyan)) 0%, var(--dol-color-2, var(--cyan-light)) 100%);\n  z-index: 2;\n}\n.ae4u-v8 .dol-card:hover {\n  border-color: color-mix(in srgb, var(--dol-color, var(--cyan)) 40%, transparent);\n  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6),\n              0 0 32px -8px color-mix(in srgb, var(--dol-color, var(--cyan)) 35%, transparent);\n}\n\n.ae4u-v8 .dol-card__thumb {\n  height: 120px;\n  background-size: cover;\n  background-position: center;\n  background-color: rgba(15, 23, 42, 0.6);\n  position: relative;\n  overflow: hidden;\n}\n.ae4u-v8 .dol-card__thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(180deg, transparent 60%, rgba(2, 13, 31, 0.85) 100%);\n}\n\n.ae4u-v8 .dol-card__level {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  z-index: 3;\n  background: rgba(2, 13, 31, 0.85);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 999px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  border: 1px solid color-mix(in srgb, var(--dol-color, var(--cyan)) 50%, transparent);\n  backdrop-filter: blur(8px);\n}\n\n.ae4u-v8 .dol-card__body {\n  padding: 16px 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n}\n.ae4u-v8 .dol-card__title {\n  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 1.35;\n  color: #fff;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.ae4u-v8 .dol-card__excerpt {\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--text-mute, #94a3b8);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  flex: 1;\n}\n.ae4u-v8 .dol-card__cta {\n  margin-top: auto;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--dol-color, var(--cyan));\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  transition: gap 0.3s;\n}\n.ae4u-v8 .dol-card:hover .dol-card__cta { gap: 12px; }\n\n\/* Skeleton shimmer *\/\n.ae4u-v8 .dol-skeleton {\n  background: rgba(8, 18, 38, 0.5);\n  border-color: rgba(148, 163, 184, 0.08);\n  pointer-events: none;\n}\n.ae4u-v8 .dol-skeleton::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(110deg,\n    transparent 30%,\n    rgba(148, 163, 184, 0.08) 50%,\n    transparent 70%);\n  background-size: 200% 100%;\n  animation: dolShimmer 1.8s ease-in-out infinite;\n}\n@keyframes dolShimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n.ae4u-v8 .dol-skeleton__thumb {\n  height: 120px;\n  background: rgba(15, 23, 42, 0.5);\n}\n.ae4u-v8 .dol-skeleton__body {\n  padding: 16px 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ae4u-v8 .dol-skeleton__line {\n  height: 12px;\n  background: rgba(148, 163, 184, 0.10);\n  border-radius: 4px;\n}\n.ae4u-v8 .dol-skeleton__line.short { width: 60%; }\n.ae4u-v8 .dol-skeleton__line.medium { width: 85%; }\n\n\/* Hidden state when no data *\/\n.ae4u-v8 .dol-section.is-empty { display: none; }\n\n\/* Per-section color tokens *\/\n.ae4u-v8 .dol-section[data-course=\"grammar\"]   { --dol-color: var(--grammar-1);   --dol-color-2: var(--grammar-2); }\n.ae4u-v8 .dol-section[data-course=\"ielts\"]     { --dol-color: var(--ielts-1);     --dol-color-2: var(--ielts-2); }\n.ae4u-v8 .dol-section[data-course=\"toefl\"]     { --dol-color: var(--toefl-1);     --dol-color-2: var(--toefl-2); }\n.ae4u-v8 .dol-section[data-course=\"dictation\"] { --dol-color: var(--dictation-1); --dol-color-2: var(--dictation-2); }\n.ae4u-v8 .dol-section[data-course=\"reading\"]   { --dol-color: #059669; --dol-color-2: #34d399; }\n\n\/* Responsive *\/\n@media (max-width: 1100px) {\n  .ae4u-v8 .dol-grid { grid-template-columns: repeat(2, 1fr); }\n  .ae4u-v8 .dol-inner { gap: 56px; }\n}\n@media (max-width: 600px) {\n  .ae4u-v8 .section.dol { padding: 72px 20px 60px; }\n  .ae4u-v8 .dol-grid { grid-template-columns: 1fr; gap: 14px; }\n  .ae4u-v8 .dol-card { min-height: auto; }\n  .ae4u-v8 .dol-header { flex-direction: column; align-items: flex-start; gap: 8px; }\n  .ae4u-v8 .dol-header h3 { flex-wrap: wrap; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .ae4u-v8 .dol-skeleton::after { animation: none; }\n  .ae4u-v8 .dol-card { transition: none !important; }\n}\n\n<\/style>\n\n<div class=\"ae4u-v8\">\n<svg width=\"0\" height=\"0\" style=\"position:absolute\" aria-hidden=\"true\">\n  <defs>\n    <radialGradient id=\"logo-shine\" cx=\"38%\" cy=\"28%\" r=\"62%\">\n      <stop offset=\"0%\" stop-color=\"#3b82f6\" stop-opacity=\"0.55\" \/>\n      <stop offset=\"55%\" stop-color=\"#2563EB\" stop-opacity=\"0\" \/>\n    <\/radialGradient>\n    <radialGradient id=\"logo-rim\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n      <stop offset=\"92%\" stop-color=\"#2563EB\" stop-opacity=\"0\" \/>\n      <stop offset=\"100%\" stop-color=\"#1e3a8a\" stop-opacity=\"0.5\" \/>\n    <\/radialGradient>\n    <symbol id=\"ae4u-logo\" viewBox=\"0 0 512 512\">\n      <circle cx=\"256\" cy=\"256\" r=\"240\" fill=\"#2563EB\" \/>\n      <circle cx=\"256\" cy=\"256\" r=\"240\" fill=\"url(#logo-shine)\" \/>\n      <circle cx=\"256\" cy=\"256\" r=\"240\" fill=\"url(#logo-rim)\" \/>\n      <!-- Single fluid brushstroke quill, upper-left \u2192 lower-center -->\n      <path d=\"M 215 80 Q 130 175 175 295 Q 215 375 285 365\"\n            stroke=\"#ffffff\" stroke-width=\"38\" stroke-linecap=\"round\" fill=\"none\" \/>\n      <!-- subtle highlight stripe along stroke (gives brush-edge feel) -->\n      <path d=\"M 215 80 Q 138 173 180 287\"\n            stroke=\"rgba(255,255,255,0.45)\" stroke-width=\"8\" stroke-linecap=\"round\" fill=\"none\" \/>\n      <!-- 4U text, lower-right quadrant -->\n      <text x=\"290\" y=\"432\"\n            font-family=\"Plus Jakarta Sans, Inter, sans-serif\"\n            font-size=\"155\"\n            font-weight=\"800\"\n            fill=\"#ffffff\"\n            letter-spacing=\"-5\">4U<\/text>\n    <\/symbol>\n  <\/defs>\n<\/svg>\n<header class=\"site-header\">\n  <a href=\"#top\" class=\"brand\" aria-label=\"All English 4U home\">\n    <span class=\"brand-logo-wrap\">\n      <img loading=\"lazy\" decoding=\"async\" class=\"brand-logo\" src=\"https:\/\/allenglish4u.com\/wp-content\/uploads\/2026\/04\/Transparent-background-MacBook-Pro-cua-Hang.png\" alt=\"All English 4U logo\" width=\"44\" height=\"44\" \/>\n      <span class=\"brand-logo-spec\"><\/span>\n    <\/span>\n    <span>All English 4U<\/span>\n  <\/a>\n  <nav class=\"main-nav\">\n    <a href=\"\/grammar\/\">Grammar<\/a>\n    <a href=\"\/ielts\/\">IELTS<\/a>\n    <a href=\"\/toefl\/\">TOEFL<\/a>\n    <a href=\"\/cambridge\/\">Cambridge<\/a>\n    <a href=\"\/celpip\/\">CELPIP<\/a>\n    <a href=\"\/dictation\/\">Dictation<\/a>\n    <a href=\"\/contact\/\">Contact<\/a>\n  <\/nav>\n  <div class=\"header-right\">\n    <button class=\"search-btn\" aria-label=\"Search\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\n    <\/button>\n    <a href=\"#try\" class=\"cta-glow\">Start Free \u2192<\/a>\n  <\/div>\n<\/header>\n\n<!-- ============================================\n     HERO\n     ============================================ -->\n<section class=\"hero\" data-screen-label=\"01 Hero\" id=\"top\">\n  <div class=\"hero-bg\"><\/div>\n  <div class=\"hero-bg-glow-bottom\"><\/div>\n  <div class=\"hero-grid\"><\/div>\n  <div class=\"starlight\" id=\"starlight\"><\/div>\n  <div class=\"hero-nav-veil\"><\/div>\n\n  <div class=\"hero-stage\">\n    <div class=\"logo-arena\" id=\"logoArena\">\n      <div class=\"logo-aura\"><\/div>\n\n      <!-- Course portals \u2014 viewBox 800x800 square, logo center (400,400), 5 nodes wrapped in <a> -->\n      <svg class=\"portals\" viewBox=\"0 0 800 800\" preserveAspectRatio=\"xMidYMid meet\" role=\"navigation\" aria-label=\"Course portals\">\n        <!-- Grammar (top, purple) -->\n        <a href=\"\/grammar\/\" class=\"portal-link\" aria-label=\"Grammar lessons\">\n          <g class=\"portal-group\" data-course=\"grammar\" style=\"color:#a78bfa\">\n            <path class=\"portal-arc\" stroke=\"#a78bfa\" d=\"M 400 200 Q 400 130 400 70\" \/>\n            <circle class=\"portal-dot-glow\" cx=\"400\" cy=\"70\" r=\"22\" fill=\"#a78bfa\"\/>\n            <circle class=\"portal-dot\" cx=\"400\" cy=\"70\" r=\"9\" fill=\"#fff\"\/>\n            <text class=\"portal-label\" x=\"400\" y=\"40\" text-anchor=\"middle\">GRAMMAR \u2191<\/text>\n          <\/g>\n        <\/a>\n        <!-- TOEFL (upper-right, blue) -->\n        <a href=\"\/toefl\/\" class=\"portal-link\" aria-label=\"TOEFL preparation\">\n          <g class=\"portal-group\" data-course=\"toefl\" style=\"color:#60a5fa\">\n            <path class=\"portal-arc\" stroke=\"#60a5fa\" d=\"M 545 265 Q 645 195 730 130\" \/>\n            <circle class=\"portal-dot-glow\" cx=\"730\" cy=\"130\" r=\"22\" fill=\"#60a5fa\"\/>\n            <circle class=\"portal-dot\" cx=\"730\" cy=\"130\" r=\"9\" fill=\"#fff\"\/>\n            <text class=\"portal-label\" x=\"730\" y=\"100\" text-anchor=\"middle\">TOEFL \u2197<\/text>\n          <\/g>\n        <\/a>\n        <!-- IELTS (lower-right, teal) -->\n        <a href=\"\/ielts\/\" class=\"portal-link\" aria-label=\"IELTS preparation\">\n          <g class=\"portal-group\" data-course=\"ielts\" style=\"color:#34d399\">\n            <path class=\"portal-arc\" stroke=\"#34d399\" d=\"M 545 535 Q 645 605 730 670\" \/>\n            <circle class=\"portal-dot-glow\" cx=\"730\" cy=\"670\" r=\"22\" fill=\"#34d399\"\/>\n            <circle class=\"portal-dot\" cx=\"730\" cy=\"670\" r=\"9\" fill=\"#fff\"\/>\n            <text class=\"portal-label\" x=\"730\" y=\"704\" text-anchor=\"middle\">IELTS \u2198<\/text>\n          <\/g>\n        <\/a>\n        <!-- Dictation (lower-left, orange) -->\n        <a href=\"\/dictation\/\" class=\"portal-link\" aria-label=\"Dictation practice\">\n          <g class=\"portal-group\" data-course=\"dictation\" style=\"color:#fb923c\">\n            <path class=\"portal-arc\" stroke=\"#fb923c\" d=\"M 255 535 Q 155 605 70 670\" \/>\n            <circle class=\"portal-dot-glow\" cx=\"70\" cy=\"670\" r=\"22\" fill=\"#fb923c\"\/>\n            <circle class=\"portal-dot\" cx=\"70\" cy=\"670\" r=\"9\" fill=\"#fff\"\/>\n            <text class=\"portal-label\" x=\"70\" y=\"704\" text-anchor=\"middle\">DICTATION \u2199<\/text>\n          <\/g>\n        <\/a>\n        <!-- Cambridge (upper-left, red) -->\n        <a href=\"\/cambridge\/\" class=\"portal-link\" aria-label=\"Cambridge exams\">\n          <g class=\"portal-group\" data-course=\"cambridge\" style=\"color:#f87171\">\n            <path class=\"portal-arc\" stroke=\"#f87171\" d=\"M 255 265 Q 155 195 70 130\" \/>\n            <circle class=\"portal-dot-glow\" cx=\"70\" cy=\"130\" r=\"22\" fill=\"#f87171\"\/>\n            <circle class=\"portal-dot\" cx=\"70\" cy=\"130\" r=\"9\" fill=\"#fff\"\/>\n            <text class=\"portal-label\" x=\"70\" y=\"100\" text-anchor=\"middle\">CAMBRIDGE \u2196<\/text>\n          <\/g>\n        <\/a>\n      <\/svg>\n\n      <!-- Orbiting English words galaxy -->\n      <div class=\"galaxy\" id=\"galaxy\"><\/div>\n\n      <!-- The 3D logo -->\n      <div class=\"logo-3d\" id=\"logo3d\">\n        <div class=\"logo-3d-inner\" id=\"logo3dInner\">\n          <div class=\"logo-disc\">\n            <img loading=\"lazy\" decoding=\"async\" class=\"logo-img\"\n                 src=\"https:\/\/allenglish4u.com\/wp-content\/uploads\/2026\/04\/Transparent-background-MacBook-Pro-cua-Hang.png\"\n                 alt=\"All English 4U \u2014 a blue circle with a white quill and the text 4U\"\n                 width=\"512\" height=\"512\" \/>\n            <span class=\"logo-spec\" aria-hidden=\"true\"><\/span>\n            <span class=\"logo-rim\" aria-hidden=\"true\"><\/span>\n          <\/div>\n          <span class=\"logo-floor-shadow\" aria-hidden=\"true\"><\/span>\n          <span class=\"logo-reflection\" aria-hidden=\"true\"><\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"hero-text-block\">\n      <div class=\"hero-eyebrow\">\n        <span class=\"pulse\"><\/span>\n        <span>5,000+ LEARNERS WORLDWIDE \u00b7 100% FREE<\/span>\n      <\/div>\n\n      <h1 class=\"hero-title\">\n        <span class=\"line-1\">Master English.<\/span>\n        <span class=\"line-2\">Free. Forever.<\/span>\n      <\/h1>\n\n      <p class=\"hero-sub\">Grammar, IELTS, TOEFL, Cambridge, DET &amp; Dictation \u2014 with interactive exercises, video lessons, and real exam practice. Open your browser, start learning. No signup.<\/p>\n\n      <div class=\"hero-actions\">\n        <a href=\"#try\" class=\"btn btn-primary\" id=\"primaryBtn\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n          Start Learning Now\n        <\/a>\n        <a href=\"#courses\" class=\"btn btn-ghost\">\n          Explore Courses\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"live-ticker\">\n    <span class=\"live-dot\"><\/span>\n    <span class=\"ticker-text\" id=\"ticker\"><strong>Live now:<\/strong> 23 learners on IELTS Vocabulary Unit 7<\/span>\n  <\/div>\n<\/section>\n\n<!-- Word tooltip -->\n<div class=\"word-tooltip\" id=\"wordTip\">\n  <div class=\"tip-word\" id=\"tipWord\">word<\/div>\n  <div class=\"tip-def\" id=\"tipDef\">definition\u2026<\/div>\n  <a class=\"tip-link\" href=\"#courses\">Learn this \u2192<\/a>\n<\/div>\n\n<!-- ============================================\n     STATS\n     ============================================ -->\n<section class=\"stats\" data-screen-label=\"02 Stats\">\n  <div class=\"section-divider\"><\/div>\n  <div class=\"stats-grid\">\n    <div class=\"stat-card reveal\" data-color=\"blue\">\n      <div class=\"stat-num\"><span class=\"counter\" data-target=\"200\" data-suffix=\"+\">0<\/span><\/div>\n      <div class=\"stat-label\">Video Lessons<\/div>\n    <\/div>\n    <div class=\"stat-card reveal\" data-color=\"purple\">\n      <div class=\"stat-num\"><span class=\"counter\" data-target=\"500\" data-suffix=\"+\">0<\/span><\/div>\n      <div class=\"stat-label\">Interactive Exercises<\/div>\n    <\/div>\n    <div class=\"stat-card reveal\" data-color=\"teal\">\n      <div class=\"stat-num\"><span class=\"counter\" data-target=\"5\" data-suffix=\"K+\">0<\/span><\/div>\n      <div class=\"stat-label\">Monthly Learners<\/div>\n    <\/div>\n    <div class=\"stat-card reveal\" data-color=\"orange\">\n      <div class=\"stat-num\"><span class=\"counter\" data-target=\"100\" data-suffix=\"%\">0<\/span><\/div>\n      <div class=\"stat-label\">Completely Free<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     COURSES\n     ============================================ -->\n<section class=\"section courses\" id=\"courses\" data-screen-label=\"03 Courses\" data-accent=\"courses\">\n  <div class=\"section-inner\">\n    <div class=\"section-head\">\n      <div class=\"eyebrow\">OUR COURSES<\/div>\n      <div class=\"title-ornament\"><\/div>\n      <h2 class=\"section-title\">Everything you need to succeed<\/h2>\n      <p class=\"section-sub\">Five paths. One mission. Find yours.<\/p>\n    <\/div>\n\n    <div class=\"courses-grid\">\n      <!-- Grammar -->\n      <article class=\"course-card reveal\" data-course=\"grammar\">\n        <div class=\"course-icon-wrap\">\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n        <\/div>\n        <span class=\"course-tag\">FUNDAMENTALS<\/span>\n        <h3 class=\"course-title\">Grammar<\/h3>\n        <p class=\"course-desc\">From basics to advanced. Tenses, clauses, syntax \u2014 explained simply.<\/p>\n        <div class=\"course-footer\">\n          <span class=\"course-count\">183+ Lessons<\/span>\n          <a class=\"course-link\" href=\"\/grammar\/\">Learn Grammar <span class=\"arrow\">\u2192<\/span><\/a>\n        <\/div>\n      <\/article>\n\n      <!-- TOEFL -->\n      <article class=\"course-card reveal\" data-course=\"toefl\">\n        <div class=\"course-icon-wrap\">\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L3 7l9 5 9-5-9-5z\"\/><path d=\"M3 12l9 5 9-5\"\/><path d=\"M3 17l9 5 9-5\"\/><\/svg>\n        <\/div>\n        <span class=\"course-tag\">EXAM PREP<\/span>\n        <h3 class=\"course-title\">TOEFL iBT<\/h3>\n        <p class=\"course-desc\">Reach 100+ with calm preparation. Reading, Listening, Speaking, Writing.<\/p>\n        <div class=\"course-footer\">\n          <span class=\"course-count\">65+ Lessons<\/span>\n          <a class=\"course-link\" href=\"\/toefl\/\">Prepare TOEFL <span class=\"arrow\">\u2192<\/span><\/a>\n        <\/div>\n      <\/article>\n\n      <!-- IELTS -->\n      <article class=\"course-card reveal\" data-course=\"ielts\">\n        <div class=\"course-icon-wrap\">\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M3 12h18\"\/><path d=\"M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z\"\/><\/svg>\n        <\/div>\n        <span class=\"course-tag\">EXAM PREP<\/span>\n        <h3 class=\"course-title\">IELTS Academic<\/h3>\n        <p class=\"course-desc\">From band 5 to band 8.5+. Real test format, real exam practice.<\/p>\n        <div class=\"course-footer\">\n          <span class=\"course-count\">120+ Lessons<\/span>\n          <a class=\"course-link\" href=\"\/ielts\/\">Prepare IELTS <span class=\"arrow\">\u2192<\/span><\/a>\n        <\/div>\n      <\/article>\n\n      <!-- Dictation -->\n      <article class=\"course-card reveal\" data-course=\"dictation\">\n        <div class=\"course-icon-wrap\">\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"\/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"\/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"\/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"\/><\/svg>\n        <\/div>\n        <span class=\"course-tag\">LISTENING<\/span>\n        <h3 class=\"course-title\">Dictation Practice<\/h3>\n        <p class=\"course-desc\">Train your ear with native audio across A1\u2013C2 levels.<\/p>\n        <div class=\"course-footer\">\n          <span class=\"course-count\">78+ Audio Lessons<\/span>\n          <a class=\"course-link\" href=\"\/dictation\/\">Practice Dictation <span class=\"arrow\">\u2192<\/span><\/a>\n        <\/div>\n      <\/article>\n\n      <!-- Cambridge -->\n      <article class=\"course-card reveal\" data-course=\"cambridge\">\n        <span class=\"course-soon-badge\">LIVE \u00b7 160+ TESTS<\/span>\n        <div class=\"course-icon-wrap\">\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><path d=\"M3.27 6.96L12 12l8.73-5.04\"\/><line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"12\"\/><\/svg>\n        <\/div>\n        <span class=\"course-tag\">PRE-A1\u2013B1 EXAMS<\/span>\n        <h3 class=\"course-title\">Cambridge English<\/h3>\n        <p class=\"course-desc\">Starters, Movers, Flyers, KET &amp; PET \u2014 real Cambridge past papers with instant marking and answer keys.<\/p>\n        <div class=\"course-footer\">\n          <span class=\"course-count\">160+ Full Tests<\/span>\n          <a class=\"course-link\" href=\"\/cambridge\/\">View Cambridge <span class=\"arrow\">\u2192<\/span><\/a>\n        <\/div>\n      <\/article>\n\n      \n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================\n     DOL SECTIONS \u2014 Browse by Category (lazy-fetched)\n     ============================================ -->\n<section class=\"section dol\" data-screen-label=\"04 Categories\" id=\"categories\">\n  <div class=\"dol-inner\">\n    <header class=\"dol-section-title\">\n      <h2>Browse by Category<\/h2>\n      <p>Latest lessons across every track \u2014 fresh from our growing library.<\/p>\n    <\/header>\n\n    <div class=\"dol-section\" data-course=\"grammar\" data-parent-id=\"111\" data-section-url=\"\/grammar\/\">\n      <header class=\"dol-header\">\n        <h3>Grammar <span class=\"lessons-count\">183+ lessons<\/span><\/h3>\n        <a href=\"\/grammar\/\" class=\"see-all\">See all \u2192<\/a>\n      <\/header>\n      <div class=\"dol-grid\" data-dol-grid>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"dol-section\" data-course=\"ielts\" data-parent-id=\"113\" data-section-url=\"\/ielts\/\">\n      <header class=\"dol-header\">\n        <h3>IELTS Preparation <span class=\"lessons-count\">120+ lessons<\/span><\/h3>\n        <a href=\"\/ielts\/\" class=\"see-all\">See all \u2192<\/a>\n      <\/header>\n      <div class=\"dol-grid\" data-dol-grid>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"dol-section\" data-course=\"toefl\" data-parent-id=\"131\" data-section-url=\"\/toefl\/\">\n      <header class=\"dol-header\">\n        <h3>TOEFL Preparation <span class=\"lessons-count\">65+ lessons<\/span><\/h3>\n        <a href=\"\/toefl\/\" class=\"see-all\">See all \u2192<\/a>\n      <\/header>\n      <div class=\"dol-grid\" data-dol-grid>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"dol-section\" data-course=\"dictation\" data-parent-id=\"137\" data-section-url=\"\/dictation\/\">\n      <header class=\"dol-header\">\n        <h3>Dictation Practice <span class=\"lessons-count\">78+ lessons<\/span><\/h3>\n        <a href=\"\/dictation\/\" class=\"see-all\">See all \u2192<\/a>\n      <\/header>\n      <div class=\"dol-grid\" data-dol-grid>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"dol-section\" data-course=\"reading\" data-parent-id=\"686\" data-section-url=\"\/listening-reading\/\">\n      <header class=\"dol-header\">\n        <h3>Listening &amp; Reading <span class=\"lessons-count\">45+ lessons<\/span><\/h3>\n        <a href=\"\/listening-reading\/\" class=\"see-all\">See all \u2192<\/a>\n      <\/header>\n      <div class=\"dol-grid\" data-dol-grid>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n        <div class=\"dol-skeleton\"><div class=\"dol-skeleton__thumb\"><\/div><div class=\"dol-skeleton__body\"><div class=\"dol-skeleton__line short\"><\/div><div class=\"dol-skeleton__line medium\"><\/div><div class=\"dol-skeleton__line\"><\/div><\/div><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================\n     FEATURES\n     ============================================ -->\n<section class=\"section features\" id=\"features\" data-screen-label=\"04 Features\" data-accent=\"features\">\n  <div class=\"section-inner\">\n    <div class=\"section-head\">\n      <div class=\"eyebrow\">WHY ALL ENGLISH 4U<\/div>\n      <div class=\"title-ornament\"><\/div>\n      <h2 class=\"section-title\">Learn more effectively<\/h2>\n      <p class=\"section-sub\">Three principles. Built into every lesson.<\/p>\n    <\/div>\n    <div class=\"features-grid\">\n      <div class=\"feature-card reveal\" data-tint=\"blue\">\n        <div class=\"feature-icon\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><circle cx=\"7\" cy=\"10\" r=\"1\" fill=\"currentColor\"\/><line x1=\"10\" y1=\"10\" x2=\"17\" y2=\"10\"\/><\/svg>\n        <\/div>\n        <h3 class=\"feature-title\">No Signup. Just Learn.<\/h3>\n        <p class=\"feature-desc\">No registration or app download required. Open your browser and start learning instantly \u2014 on your phone, tablet, or laptop.<\/p>\n      <\/div>\n\n      <div class=\"feature-card reveal\" data-tint=\"teal\">\n        <div class=\"feature-icon\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 11 12 14 22 4\"\/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"\/><\/svg>\n        <\/div>\n        <h3 class=\"feature-title\">Exam-Grade Exercises<\/h3>\n        <p class=\"feature-desc\">Fill in the blanks, Drag &amp; Drop, Multiple Choice, True\/False \u2014 designed to match real international exam formats.<\/p>\n      <\/div>\n\n      <div class=\"feature-card reveal\" data-tint=\"purple\">\n        <div class=\"feature-icon\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"23 7 16 12 23 17 23 7\"\/><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\"\/><\/svg>\n        <\/div>\n        <h3 class=\"feature-title\">Watch. Then Practice.<\/h3>\n        <p class=\"feature-desc\">Every lesson features detailed video explanations paired with practical exercises \u2014 don&#8217;t just watch, practice immediately.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     TRY A LESSON\n     ============================================ -->\n<section class=\"section try-lesson\" id=\"try\" data-screen-label=\"05 Try a lesson\" data-accent=\"try\">\n  <div class=\"section-inner\">\n    <div class=\"section-head\">\n      <div class=\"eyebrow\">TRY IT YOURSELF \u00b7 30 SECONDS<\/div>\n      <div class=\"title-ornament\"><\/div>\n      <h2 class=\"section-title\">Take a free taste, no signup<\/h2>\n      <p class=\"section-sub\">Drag the right word into each gap. See how it feels.<\/p>\n    <\/div>\n\n    <div class=\"try-card reveal\" id=\"tryCard\">\n      <div class=\"try-passage\" id=\"tryPassage\">\n        She <span class=\"gap\" data-gap=\"0\" data-answer=\"has been\"><\/span> studying English for three years, and now she <span class=\"gap\" data-gap=\"1\" data-answer=\"speaks\"><\/span> three languages fluently. Tomorrow she <span class=\"gap\" data-gap=\"2\" data-answer=\"will take\"><\/span> her IELTS exam.\n      <\/div>\n\n      <div class=\"options-row\" id=\"optionsRow\">\n        <button class=\"option-pill\" data-c=\"b\" data-word=\"has been\">has been<\/button>\n        <button class=\"option-pill\" data-c=\"p\" data-word=\"speaks\">speaks<\/button>\n        <button class=\"option-pill\" data-c=\"t\" data-word=\"will take\">will take<\/button>\n        <button class=\"option-pill\" data-c=\"o\" data-word=\"have been\">have been<\/button>\n        <button class=\"option-pill\" data-c=\"r\" data-word=\"speak\">speak<\/button>\n        <button class=\"option-pill\" data-c=\"m\" data-word=\"takes\">takes<\/button>\n      <\/div>\n\n      <div class=\"try-footer\">\n        <div class=\"try-score\">\n          Correct: <span class=\"score-num\"><span id=\"scoreN\">0<\/span>\/3<\/span>\n        <\/div>\n        <div style=\"display:flex; gap:14px; align-items:center\">\n          <button class=\"btn-reset\" id=\"resetBtn\">Reset<\/button>\n          <button class=\"btn-check\" id=\"checkBtn\">Check Answers \u2192<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     YOUTUBE CTA\n     ============================================ -->\n<section class=\"youtube\" data-screen-label=\"06 YouTube\">\n  <div class=\"youtube-grid\">\n    <div>\n      <div class=\"eyebrow\" style=\"background:linear-gradient(90deg,#ef4444,#f43f5e); -webkit-background-clip:text; background-clip:text;\">YOUTUBE CHANNEL<\/div>\n      <h2 class=\"section-title\">Watch Free Video Lessons on YouTube<\/h2>\n      <p class=\"section-sub\" style=\"color:rgba(255,255,255,0.75)\">200+ in-depth video lessons. New uploads every week. Subscribe so you never miss one.<\/p>\n      <a href=\"#\" class=\"btn-youtube\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n        Subscribe on YouTube\n      <\/a>\n    <\/div>\n\n    <div class=\"video-grid\">\n      <div class=\"video-thumb\">\n        <div class=\"play-btn\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div>\n        <div class=\"video-info\">\n          <div class=\"video-tag\">GRAMMAR \u00b7 18:24<\/div>\n          <div class=\"video-title\">Present Perfect vs Past Simple \u2014 once and for all<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"video-thumb\">\n        <div class=\"play-btn\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div>\n        <div class=\"video-info\">\n          <div class=\"video-tag\">IELTS \u00b7 24:12<\/div>\n          <div class=\"video-title\">Writing Task 2 \u00b7 How to plan a 7+ essay<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"video-thumb\">\n        <div class=\"play-btn\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div>\n        <div class=\"video-info\">\n          <div class=\"video-tag\">DICTATION \u00b7 09:48<\/div>\n          <div class=\"video-title\">Native speed practice \u00b7 Level B2<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     FOOTER\n     ============================================ -->\n<footer class=\"site-footer\" id=\"footer\" data-screen-label=\"07 Footer\">\n  <div class=\"footer-grid\">\n    <div class=\"footer-col\">\n      <div class=\"footer-brand\">\n        <img loading=\"lazy\" decoding=\"async\" class=\"footer-logo\" src=\"https:\/\/allenglish4u.com\/wp-content\/uploads\/2026\/04\/Transparent-background-MacBook-Pro-cua-Hang.png\" alt=\"All English 4U\" width=\"44\" height=\"44\" \/>\n        <span>All English 4U<\/span>\n      <\/div>\n      <p class=\"footer-tagline\">Free, world-class English learning \u2014 for everyone, everywhere. No paywalls. No signup walls.<\/p>\n      \n    <\/div>\n    <div class=\"footer-col\">\n      <h4>Courses<\/h4>\n      <ul>\n        <li><a href=\"\/grammar\/\">Grammar<\/a><\/li>\n        <li><a href=\"\/toefl\/\">TOEFL iBT<\/a><\/li>\n        <li><a href=\"\/ielts\/\">IELTS Academic<\/a><\/li>\n        <li><a href=\"\/cambridge\/\">Cambridge<\/a><\/li>\n        <li><a href=\"\/dictation\/\">Dictation<\/a><\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"footer-col\">\n      <h4>Learn<\/h4>\n      <ul>\n        <li><a href=\"#features\">How it works<\/a><\/li>\n        <li><a href=\"#try\">Try a lesson<\/a><\/li>\n        <li><a href=\"\/skills\/\">Levels A1\u2013C2<\/a><\/li>\n        \n      <\/ul>\n    <\/div>\n    <div class=\"footer-col\">\n      <h4>Resources<\/h4>\n      <ul>\n        <li><a href=\"\/grammar\/\">Vocabulary lists<\/a><\/li>\n        <li><a href=\"\/listening-reading\/\">Pronunciation guide<\/a><\/li>\n        <li><a href=\"\/grammar\/\">Grammar reference<\/a><\/li>\n        <li><a href=\"\/toefl\/\">Mock tests<\/a><\/li>\n      <\/ul>\n    <\/div>\n    <div class=\"footer-col\">\n      <h4>Connect<\/h4>\n      <ul>\n        <li><a href=\"#\">YouTube<\/a><\/li>\n        <li><a href=\"#\">Facebook<\/a><\/li>\n        <li><a href=\"#\">TikTok<\/a><\/li>\n        <li><a href=\"#\">Newsletter<\/a><\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n\n  <div class=\"footer-bottom\">\n    <span>\u00a9 2026 All English 4U \u00b7 Free English, for everyone, forever.<\/span>\n    <div class=\"social-row\">\n      <a href=\"#\" aria-label=\"YouTube\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M23.5 6.2a3 3 0 0 0-2.1-2.1C19.6 3.6 12 3.6 12 3.6s-7.6 0-9.4.5A3 3 0 0 0 .5 6.2C0 8 0 12 0 12s0 4 .5 5.8a3 3 0 0 0 2.1 2.1c1.8.5 9.4.5 9.4.5s7.6 0 9.4-.5a3 3 0 0 0 2.1-2.1C24 16 24 12 24 12s0-4-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z\"\/><\/svg>\n      <\/a>\n      <a href=\"#\" aria-label=\"Facebook\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 12c0-5.5-4.5-10-10-10S2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12z\"\/><\/svg>\n      <\/a>\n      <a href=\"#\" aria-label=\"TikTok\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19.6 6.3a4.8 4.8 0 0 1-3.2-1.1 4.8 4.8 0 0 1-1.6-2.7V2h-3.4v13.7a2.9 2.9 0 1 1-2-2.7v-3.5a6.3 6.3 0 1 0 5.4 6.2V8.9a8.2 8.2 0 0 0 4.8 1.5V7a4.8 4.8 0 0 1 0-.7z\"\/><\/svg>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/footer>\n\n<script data-cfasync=\"false\" src=\"\/cdn-cgi\/scripts\/5c5dd728\/cloudflare-static\/email-decode.min.js\"><\/script>\n\n<style id=\"ae4u-v8-searchfix\">\n.ae4u-v8 .header-right{position:relative;}\n.ae4u-v8 .header-right .search-btn{position:relative;z-index:2;}\n.ae4u-v8 .hsearch-input{position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;opacity:0;padding:0;margin:0;border:1px solid transparent;box-sizing:border-box;height:40px;border-radius:999px;font-size:14px;line-height:40px;outline:none;z-index:1;background:#fff;color:#0f172a;pointer-events:none;box-shadow:0 6px 24px rgba(2,6,23,.18);transition:width .28s cubic-bezier(.22,1,.36,1),opacity .2s,padding .28s;}\n.ae4u-v8 .header-right.search-open .hsearch-input{width:min(340px,68vw);opacity:1;padding:0 46px 0 18px;pointer-events:auto;border-color:rgba(34,211,238,.65);}\n.ae4u-v8 .hsearch-input::placeholder{color:#94a3b8;}\n\n  .ae4u-v8 .course-card { cursor: pointer; }\n  .ae4u-v8 .course-link::before { content: ''; position: absolute; inset: 0; }\n<\/style>\n<script data-ae4u-v8=\"searchfix\">\n(function(){function init(){var btn=document.querySelector(\".ae4u-v8 .search-btn\");if(!btn||btn.getAttribute(\"data-wired\"))return;var wrap=btn.closest(\".header-right\")||btn.parentElement;if(!wrap)return;btn.setAttribute(\"data-wired\",\"1\");var input=document.createElement(\"input\");input.type=\"search\";input.className=\"hsearch-input\";input.setAttribute(\"placeholder\",\"Search lessons...\");input.setAttribute(\"aria-label\",\"Search lessons\");btn.parentNode.insertBefore(input,btn);function killAnim(){try{input.getAnimations().forEach(function(a){try{a.cancel();}catch(e){}});}catch(e){}}function go(){var q=input.value.trim();if(q){window.location=\"\/?s=\"+encodeURIComponent(q);}}btn.addEventListener(\"click\",function(e){e.preventDefault();if(wrap.classList.contains(\"search-open\")&&input.value.trim()){go();return;}wrap.classList.toggle(\"search-open\");if(wrap.classList.contains(\"search-open\")){killAnim();setTimeout(function(){killAnim();input.focus();},50);}});input.addEventListener(\"keydown\",function(e){if(e.key===\"Enter\"){e.preventDefault();go();}else if(e.key===\"Escape\"){wrap.classList.remove(\"search-open\");input.blur();}});input.addEventListener(\"blur\",function(){if(!input.value.trim()){wrap.classList.remove(\"search-open\");}});}if(document.readyState===\"loading\"){document.addEventListener(\"DOMContentLoaded\",init);}else{init();}})();\n<\/script>\n<script data-ae4u-v8=\"app\">\n\/* ============================================\n   ALL ENGLISH 4U \u2014 v6 interactions\n   ============================================ *\/\n\n(() => {\n  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/\/ ---------- Header scroll-blur ----------\n  const header = document.querySelector('.site-header');\n  if (header) {\n    let lastY = -1;\n    function syncHeader() {\n      const y = window.scrollY || document.documentElement.scrollTop;\n      if (y === lastY) return;\n      lastY = y;\n      header.classList.toggle('scrolled', y > 80);\n    }\n    window.addEventListener('scroll', syncHeader, { passive: true });\n    syncHeader();\n  }\n\n  \/\/ ---------- starlight particles ----------\n  const starlight = document.getElementById('starlight');\n  if (starlight) {\n    for (let i = 0; i < 12; i++) {\n      const s = document.createElement('span');\n      s.style.left = `${Math.random() * 100}%`;\n      \/\/ keep stars above ticker, below nav band\n      s.style.top  = `${15 + Math.random() * 60}%`;\n      s.style.setProperty('--dur', `${4 + Math.random() * 5}s`);\n      s.style.animationDelay = `${Math.random() * 5}s`;\n      s.style.transform = `scale(${0.6 + Math.random() * 0.8})`;\n      starlight.appendChild(s);\n    }\n  }\n\n  \/\/ ---------- 3D logo: smooth cursor tilt (NO full rotation) ----------\n  const arena = document.getElementById('logoArena');\n  const logo  = document.getElementById('logo3d');\n  if (arena) if (logo) if (!reduce) {\n    let raf = null;\n    let targetX = 0, targetY = 0;\n    let currentX = 0, currentY = 0;\n\n    arena.addEventListener('mousemove', (e) => {\n      const r = arena.getBoundingClientRect();\n      const nx = (e.clientX - r.left) \/ r.width  - 0.5; \/\/ -0.5 .. 0.5\n      const ny = (e.clientY - r.top)  \/ r.height - 0.5;\n      targetX = Math.max(-1, Math.min(1, nx * 2));      \/\/ clamped -1..1\n      targetY = Math.max(-1, Math.min(1, ny * 2));\n    });\n    arena.addEventListener('mouseleave', () => {\n      targetX = 0; targetY = 0;\n    });\n\n    \/\/ smooth lerp toward target each frame\n    function tick() {\n      currentX += (targetX - currentX) * 0.06;\n      currentY += (targetY - currentY) * 0.06;\n      const ry =  currentX * 20;   \/\/ max \u00b120deg Y\n      const rx = -currentY * 10;   \/\/ max \u00b110deg X\n      logo.style.setProperty('--rx', `${rx}deg`);\n      logo.style.setProperty('--ry', `${ry}deg`);\n      raf = requestAnimationFrame(tick);\n    }\n    tick();\n  }\n\n  \/\/ ---------- Galaxy of English words \u2014 exactly 20, weighted colors ----------\n  const galaxy = document.getElementById('galaxy');\n\n  const WORDS = [\n    { w: 'knowledge',     d: 'Facts, information, and skills acquired through experience or education.' },\n    { w: 'fluency',       d: 'The ability to speak or write a language easily and accurately.' },\n    { w: 'grammar',       d: 'The system of rules that governs how words combine in a language.' },\n    { w: 'vocabulary',    d: 'The body of words used in a particular language.' },\n    { w: 'writing',       d: 'Composing text to express ideas clearly and effectively.' },\n    { w: 'speaking',      d: 'Producing language orally to communicate with others.' },\n    { w: 'listening',     d: 'Understanding spoken language attentively and accurately.' },\n    { w: 'reading',       d: 'Understanding the meaning of written text.' },\n    { w: 'syntax',        d: 'How words combine to form phrases and sentences.' },\n    { w: 'lexicon',       d: 'The complete vocabulary of a language or a person.' },\n    { w: 'idiom',         d: 'A phrase whose meaning is not literal \u2014 e.g. \"break a leg\".' },\n    { w: 'pronunciation', d: 'The way a word is spoken aloud.' },\n    { w: 'tense',         d: 'The verb form that shows the time of an action.' },\n    { w: 'clause',        d: 'A group of words containing a subject and a verb.' },\n    { w: 'verb',          d: 'A word expressing an action, occurrence, or state.' },\n    { w: 'noun',          d: 'A word for a person, place, thing, or idea.' },\n    { w: 'TOEFL',         d: 'Test of English as a Foreign Language \u2014 the US-focused exam.' },\n    { w: 'IELTS',         d: 'International English Language Testing System.' },\n    { w: 'B2',            d: 'CEFR upper-intermediate level \u2014 independent user.' },\n    { w: 'Cambridge',     d: 'A family of internationally recognised English exams.' }\n  ];\n\n  \/\/ Weighted color palette \u2014 20 slots, deterministic distribution\n  \/\/ white(50%)\u00b7cyan(15%)\u00b7purple(8%)\u00b7blue(8%)\u00b7teal(8%)\u00b7orange(5%)\u00b7red(4%)\u00b7rose(2%)\n  \/\/ For exactly 20 words: white=10, cyan=3, purple=2, blue=2, teal=2, orange=1, red=0\u20131, rose=0\u20131\n  \/\/ We'll do: white 10, cyan 3, purple 2, blue 2, teal 2, orange 1\n  const COLOR_SLOTS = [\n    \/\/ 10 whites with varied opacity\n    'rgba(255,255,255,0.85)', 'rgba(255,255,255,0.75)', 'rgba(255,255,255,0.65)',\n    'rgba(255,255,255,0.55)', 'rgba(255,255,255,0.80)', 'rgba(255,255,255,0.45)',\n    'rgba(255,255,255,0.70)', 'rgba(255,255,255,0.50)', 'rgba(255,255,255,0.85)',\n    'rgba(255,255,255,0.60)',\n    \/\/ 3 cyan\n    'rgba(34,211,238,0.75)', 'rgba(34,211,238,0.70)', 'rgba(34,211,238,0.70)',\n    \/\/ 2 purple\n    'rgba(167,139,250,0.65)', 'rgba(167,139,250,0.60)',\n    \/\/ 2 blue\n    'rgba(96,165,250,0.72)', 'rgba(96,165,250,0.70)',\n    \/\/ 2 teal\n    'rgba(52,211,153,0.65)', 'rgba(52,211,153,0.60)',\n    \/\/ 1 orange\n    'rgba(251,146,60,0.55)'\n  ];\n  \/\/ shuffle once for variety per load\n  COLOR_SLOTS.sort(() => Math.random() - 0.5);\n\n  const tip = document.getElementById('wordTip');\n  const tipW = document.getElementById('tipWord');\n  const tipD = document.getElementById('tipDef');\n\n  function showTip(item, el) {\n    tipW.textContent = item.w;\n    tipD.textContent = item.d;\n    const r = el.getBoundingClientRect();\n    let x = r.left + r.width \/ 2;\n    let y = r.top - 12;\n    x = Math.min(Math.max(x, 150), window.innerWidth - 150);\n    y = Math.max(y, 90);\n    tip.style.left = `${x}px`;\n    tip.style.top  = `${y}px`;\n    tip.style.transform = `translate(-50%, -100%)`;\n    tip.classList.add('show');\n    clearTimeout(showTip._t);\n    showTip._t = setTimeout(() => tip.classList.remove('show'), 4500);\n  }\n  document.addEventListener('click', (e) => {\n    if (!tip.contains(e.target)) if (!e.target.classList.contains('galaxy-word')) {\n      tip.classList.remove('show');\n    }\n  });\n\n  if (galaxy) {\n    \/\/ Expose render function so the Tweaks panel can change density\n    function renderGalaxy(count) {\n      galaxy.innerHTML = '';\n      const n = Math.max(0, Math.min(WORDS.length, count));\n      \/\/ shuffle COLOR_SLOTS for variety\n      const colors = COLOR_SLOTS.slice().sort(() => Math.random() - 0.5);\n      const words = WORDS.slice(0, n);\n      words.forEach((item, i) => {\n        const span = document.createElement('span');\n        span.className = 'galaxy-word';\n        span.textContent = item.w;\n\n        const radius = 210 + (i % 7) * 22 + Math.random() * 16;\n        const dur    = 28 + Math.random() * 20;\n        const delay  = -Math.random() * dur;\n        const depth  = (Math.random() - 0.5) * 220;\n        const size   = 13 + Math.random() * 9;\n        const norm   = (depth + 110) \/ 220;\n        const blur   = (1 - norm) * 1.2;\n        const dir    = i % 3 === 0 ? -1 : 1;\n        const color  = colors[i % colors.length];\n\n        span.style.setProperty('--radius', `${radius}px`);\n        span.style.setProperty('--orbit-dur', `${dur}s`);\n        span.style.setProperty('--orbit-delay', `${delay}s`);\n        span.style.setProperty('--depth', `${depth}px`);\n        span.style.setProperty('--size', `${size}px`);\n        span.style.setProperty('--blur', `${blur}px`);\n        span.style.setProperty('--color', color);\n        const baseOpa = 0.6 + norm * 0.4;\n        span.style.setProperty('--opa', baseOpa);\n        if (dir < 0) span.style.animationDirection = 'reverse';\n\n        span.addEventListener('click', (e) => {\n          e.stopPropagation();\n          showTip(item, span);\n        });\n        galaxy.appendChild(span);\n      });\n    }\n\n    renderGalaxy(20);\n    window.AE4U_setGalaxyCount = renderGalaxy;\n  }\n\n  \/\/ ---------- Course portals scroll to courses ----------\n  document.querySelectorAll('.portal-group').forEach(g => {\n    g.addEventListener('click', () => {\n      document.getElementById('courses').scrollIntoView({ behavior: 'smooth', block: 'start' });\n    });\n  });\n\n  \/\/ ---------- Live ticker rotation ----------\n  const ticker = document.getElementById('ticker');\n  const TICKER_ITEMS = [\n    '<strong>Live now:<\/strong> 23 learners on IELTS Vocabulary Unit 7',\n    '<strong>Live now:<\/strong> 41 learners on Grammar \u00b7 Present Perfect',\n    '<strong>Just finished:<\/strong> Aino in Helsinki passed TOEFL Reading Mock 4',\n    '<strong>Live now:<\/strong> 18 learners on Dictation \u00b7 Level B2',\n    '<strong>Trending:<\/strong> \"Common Mistakes with Articles\" \u2014 312 views today',\n    '<strong>Live now:<\/strong> 27 learners on Cambridge B2 \u00b7 Listening Part 3',\n    ];\n  let tIdx = 0;\n  if (ticker) {\n    setInterval(() => {\n      ticker.style.opacity = 0;\n      setTimeout(() => {\n        tIdx = (tIdx + 1) % TICKER_ITEMS.length;\n        ticker.innerHTML = TICKER_ITEMS[tIdx];\n        ticker.style.opacity = 1;\n      }, 480);\n    }, 5500);\n  }\n\n  \/\/ ---------- Reveal on scroll ----------\n  const io = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        const siblings = Array.from(entry.target.parentElement.children).filter(c => c.classList.contains('reveal'));\n        const idx = siblings.indexOf(entry.target);\n        setTimeout(() => entry.target.classList.add('in'), idx * 110);\n        io.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.15 });\n  document.querySelectorAll('.reveal').forEach(el => io.observe(el));\n\n  \/\/ ---------- Stats count-up with subtle overshoot ----------\n  const countIO = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        const el = entry.target;\n        const target = parseInt(el.dataset.target, 10);\n        const suffix = el.dataset.suffix || '';\n        const duration = 1800;\n        const start = performance.now();\n        function step(now) {\n          const t = Math.min(1, (now - start) \/ duration);\n          \/\/ smooth ease-out with subtle overshoot at ~0.85\n          let eased;\n          if (t < 0.85) {\n            eased = 1 - Math.pow(1 - t \/ 0.85, 3);\n            eased = eased * 1.04; \/\/ overshoot\n          } else {\n            const k = (t - 0.85) \/ 0.15;\n            eased = 1.04 - 0.04 * (1 - Math.pow(1 - k, 2));\n          }\n          el.textContent = Math.round(target * eased) + suffix;\n          if (t < 1) requestAnimationFrame(step);\n          else el.textContent = target + suffix;\n        }\n        requestAnimationFrame(step);\n        countIO.unobserve(el);\n      }\n    });\n  }, { threshold: 0.5 });\n  document.querySelectorAll('.counter').forEach(el => countIO.observe(el));\n\n  \/\/ ---------- 3D card tilt ----------\n  function bindTilt(selector, maxX = 6, maxY = 8) {\n    document.querySelectorAll(selector).forEach(card => {\n      if (reduce) return;\n      let rafId = null;\n      card.addEventListener('mousemove', (e) => {\n        const r = card.getBoundingClientRect();\n        const x = (e.clientX - r.left) \/ r.width  - 0.5;\n        const y = (e.clientY - r.top)  \/ r.height - 0.5;\n        if (rafId) cancelAnimationFrame(rafId);\n        rafId = requestAnimationFrame(() => {\n          card.style.transform = `translateY(-6px) perspective(900px) rotateX(${-y * maxY}deg) rotateY(${x * maxX}deg)`;\n        });\n      });\n      card.addEventListener('mouseleave', () => { card.style.transform = ''; });\n    });\n  }\n  bindTilt('.course-card', 7, 5);\n  bindTilt('.feature-card', 5, 4);\n  bindTilt('.stat-card', 4, 3);\n\n  \/\/ ---------- Try-a-lesson widget ----------\n  const optionsRow = document.getElementById('optionsRow');\n  const gaps = document.querySelectorAll('.gap');\n  const scoreN = document.getElementById('scoreN');\n  const checkBtn = document.getElementById('checkBtn');\n  const resetBtn = document.getElementById('resetBtn');\n\n  function reset() {\n    gaps.forEach(g => {\n      g.textContent = '';\n      g.classList.remove('filled', 'correct', 'wrong');\n      g.dataset.value = '';\n    });\n    optionsRow.querySelectorAll('.option-pill').forEach(p => p.classList.remove('used'));\n    scoreN.textContent = '0';\n  }\n  resetBtn.addEventListener('click', reset);\n\n  optionsRow.querySelectorAll('.option-pill').forEach(p => {\n    p.addEventListener('click', () => {\n      if (p.classList.contains('used')) return;\n      const target = Array.from(gaps).find(g => !g.classList.contains('filled'));\n      if (!target) return;\n      target.textContent = p.dataset.word;\n      target.dataset.value = p.dataset.word;\n      target.classList.add('filled');\n      p.classList.add('used');\n      target.dataset.pill = p.dataset.c;\n    });\n  });\n\n  gaps.forEach(g => {\n    g.addEventListener('click', () => {\n      if (!g.classList.contains('filled')) return;\n      const word = g.dataset.value;\n      g.textContent = '';\n      g.classList.remove('filled', 'correct', 'wrong');\n      g.dataset.value = '';\n      const pill = optionsRow.querySelector(`.option-pill[data-word=\"${word}\"].used`);\n      if (pill) pill.classList.remove('used');\n    });\n  });\n\n  checkBtn.addEventListener('click', () => {\n    let correct = 0;\n    gaps.forEach(g => {\n      const v = g.dataset.value || '';\n      if (v.toLowerCase() === g.dataset.answer.toLowerCase()) {\n        g.classList.add('correct');\n        g.classList.remove('wrong');\n        correct++;\n      } else if (v) {\n        g.classList.add('wrong');\n        g.classList.remove('correct');\n      }\n    });\n    scoreN.textContent = String(correct);\n    if (correct === 3) confetti();\n  });\n\n  function confetti() {\n    const colors = ['#2563eb', '#06b6d4', '#8b5cf6', '#0d9488', '#f97316', '#ef4444', '#f43f5e'];\n    const wrap = document.createElement('div');\n    wrap.className = 'confetti';\n    const card = document.getElementById('tryCard');\n    const cr = card.getBoundingClientRect();\n    wrap.style.left = `${cr.left + cr.width \/ 2}px`;\n    wrap.style.top  = `${cr.top + cr.height \/ 2}px`;\n    document.body.appendChild(wrap);\n    for (let i = 0; i < 80; i++) {\n      const piece = document.createElement('div');\n      piece.className = 'confetti-piece';\n      const tx = (Math.random() - 0.5) * 600;\n      const ty = (Math.random() - 0.2) * 500;\n      const tr = (Math.random() - 0.5) * 720;\n      piece.style.setProperty('--tx', `${tx}px`);\n      piece.style.setProperty('--ty', `${ty}px`);\n      piece.style.setProperty('--tr', `${tr}deg`);\n      piece.style.background = colors[i % colors.length];\n      piece.style.animationDelay = `${Math.random() * 0.3}s`;\n      wrap.appendChild(piece);\n    }\n    setTimeout(() => wrap.remove(), 2400);\n  }\n\n  \/\/ ---------- Magnetic primary button ----------\n  const magBtn = document.getElementById('primaryBtn');\n  if (magBtn) if (!reduce) {\n    magBtn.addEventListener('mousemove', (e) => {\n      const r = magBtn.getBoundingClientRect();\n      const cx = r.left + r.width \/ 2;\n      const cy = r.top + r.height \/ 2;\n      const dx = e.clientX - cx;\n      const dy = e.clientY - cy;\n      const dist = Math.hypot(dx, dy);\n      if (dist < 80) {\n        const k = (1 - dist \/ 80) * 8;\n        magBtn.style.transform = `translate(${(dx\/80) * k}px, ${(dy\/80) * k - 2}px)`;\n      }\n    });\n    magBtn.addEventListener('mouseleave', () => { magBtn.style.transform = ''; });\n  }\n\n})();\n\n<\/script>\n<script data-ae4u-v8=\"dol\">\n\/* ============================================\n   DOL SECTIONS \u2014 Lazy fetch + level badge parser\n   ============================================ *\/\n(function() {\n  var dolSections = document.querySelectorAll('.ae4u-v8 .dol-section[data-parent-id]');\n  if (!dolSections.length) return;\n\n  \/\/ Level badge inference from title\n  function inferLevel(title) {\n    if (!title) return '';\n    var t = title.toUpperCase();\n    \/\/ Direct CEFR markers\n    var cefrMatch = t.match(\/\\b(A[12]|B[12]|C[12])\\b\/);\n    if (cefrMatch) return cefrMatch[1];\n    \/\/ Named levels\n    if (\/\\bELEMENTARY\\b\/.test(t)) return 'A2';\n    if (\/\\bPRE.?INTERMEDIATE\\b\/.test(t)) return 'A2';\n    if (\/\\bUPPER.?INTERMEDIATE\\b\/.test(t)) return 'B2';\n    if (\/\\bINTERMEDIATE\\b\/.test(t)) return 'B1';\n    if (\/\\bADVANCED\\b\/.test(t)) return 'C1';\n    if (\/\\bBEGINNER\\b\/.test(t)) return 'A1';\n    \/\/ Unit number heuristic\n    var unitMatch = t.match(\/UNIT\\s*(\\d+)\/);\n    if (unitMatch) {\n      var n = parseInt(unitMatch[1], 10);\n      if (n <= 3) return 'A2';\n      if (n <= 7) return 'B1';\n      if (n <= 12) return 'B2';\n      return 'C1';\n    }\n    return '';\n  }\n\n  \/\/ Render card from WP page object + section context\n  function renderCard(page, sec) {\n    var media = page._embedded ? page._embedded['wp:featuredmedia'] : null;\n    var thumb = (media ? (media[0] ? (media[0].source_url || '') : '') : '');\n    var rawExc = page.excerpt ? page.excerpt.rendered : '';\n    var exc = rawExc.replace(\/<[^>]+>\/g, '').replace(\/&[^;]+;\/g, ' ').trim().slice(0, 110);\n    var title = page.title.rendered.replace(\/<[^>]+>\/g, '');\n    var level = inferLevel(title);\n\n    var thumbStyle = thumb\n      ? 'background-image: url(' + thumb + ');'\n      : 'background: linear-gradient(135deg, var(--dol-color) 0%, var(--dol-color-2) 100%);';\n\n    var card = document.createElement('a');\n    card.className = 'dol-card';\n    card.href = page.link;\n    card.innerHTML =\n      (level ? '<span class=\"dol-card__level\">' + level + '<\/span>' : '') +\n      '<div class=\"dol-card__thumb\" style=\"' + thumbStyle + '\"><\/div>' +\n      '<div class=\"dol-card__body\">' +\n        '<h4 class=\"dol-card__title\">' + title + '<\/h4>' +\n        (exc ? '<p class=\"dol-card__excerpt\">' + exc + (exc.length >= 110 ? '\u2026' : '') + '<\/p>' : '<p class=\"dol-card__excerpt\"><\/p>') +\n        '<span class=\"dol-card__cta\">Study now \u2192<\/span>' +\n      '<\/div>';\n    return card;\n  }\n\n  \/\/ Fetch + render\n  function loadSection(secEl) {\n    if (secEl.dataset.loaded === '1') return;\n    secEl.dataset.loaded = '1';\n    var parentId = secEl.dataset.parentId;\n    var grid = secEl.querySelector('[data-dol-grid]');\n    if (!parentId || !grid) return;\n\n    var SLUG_RX = { '111': \/^grammar-intermediate-unit-\/, '131': \/^toefl-\/, '137': \/^dictation-\/, '686': \/^cambridge-\/ };\n    var rx = SLUG_RX[parentId];\n\n    function parentFetch() {\n      return fetch('\/wp-json\/wp\/v2\/pages?per_page=4&parent=' + parentId + '&_embed=1&orderby=date&order=desc')\n        .then(function(r) { return r.json(); });\n    }\n\n    var listP;\n    if (rx) {\n      if (!window.__dolAllPages) {\n        window.__dolAllPages = Promise.all([1, 2].map(function(pg) {\n          return fetch('\/wp-json\/wp\/v2\/pages?per_page=100&page=' + pg + '&orderby=date&order=desc&_fields=slug,link,title,excerpt')\n            .then(function(r) { return r.ok ? r.json() : []; })\n            .catch(function() { return []; });\n        })).then(function(parts) { return parts[0].concat(parts[1]); });\n      }\n      listP = window.__dolAllPages.then(function(all) {\n        var hits = (Array.isArray(all) ? all : []).filter(function(p) { return rx.test(p.slug); }).slice(0, 4);\n        return hits.length ? hits : parentFetch();\n      });\n    } else {\n      listP = parentFetch();\n    }\n\n    listP\n      .then(function(pages) {\n        if (!Array.isArray(pages) || pages.length === 0) {\n          secEl.classList.add('is-empty');\n          return;\n        }\n        grid.innerHTML = '';\n        pages.forEach(function(p) {\n          grid.appendChild(renderCard(p, secEl));\n        });\n      })\n      .catch(function() {\n        secEl.classList.add('is-empty');\n      });\n  }\n\n  \/\/ IntersectionObserver: fetch when section enters viewport\n  if ('IntersectionObserver' in window) {\n    var io = new IntersectionObserver(function(entries) {\n      entries.forEach(function(entry) {\n        if (entry.isIntersecting) {\n          loadSection(entry.target);\n          io.unobserve(entry.target);\n        }\n      });\n    }, { rootMargin: '300px 0px' });\n    dolSections.forEach(function(s) { io.observe(s); });\n  } else {\n    \/\/ Fallback: load all immediately\n    dolSections.forEach(loadSection);\n  }\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>4U All English 4U Grammar IELTS TOEFL Cambridge CELPIP Dictation Contact Start Free \u2192 GRAMMAR \u2191 TOEFL \u2197 IELTS \u2198 DICTATION \u2199 CAMBRIDGE \u2196 5,000+ LEARNERS WORLDWIDE \u00b7 100% FREE Master English. Free. Forever. Grammar, IELTS, TOEFL, Cambridge, DET &amp; Dictation \u2014 with interactive exercises, video lessons, and real exam practice. Open your browser, start [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-231","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/pages\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":24,"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/pages\/231\/revisions"}],"predecessor-version":[{"id":6499,"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/pages\/231\/revisions\/6499"}],"wp:attachment":[{"href":"https:\/\/allenglish4u.com\/vi\/wp-json\/wp\/v2\/media?parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}