{"id":6,"date":"2026-09-16T17:39:13","date_gmt":"2026-09-16T17:39:13","guid":{"rendered":"https:\/\/demo.marketingnexuss.online\/?page_id=6"},"modified":"2026-09-16T18:44:43","modified_gmt":"2026-09-16T18:44:43","slug":"home","status":"publish","type":"page","link":"https:\/\/demo.marketingnexuss.online\/?page_id=6","title":{"rendered":"HOME"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nFLUENT \u2014 IELTS & Spoken English<\/title>\r\n\r\n<meta\r\n name=\"description\"\r\n content=\"Premium IELTS and Spoken English training designed to help you communicate with confidence.\"\r\n>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap\"\r\n rel=\"stylesheet\"\r\n>\r\n\r\n<style>\r\n\r\n:root {\r\n --bg: #070707;\r\n --bg-soft: #0d0d0d;\r\n --white: #f7f5ef;\r\n --muted: #a7a7a2;\r\n --gold: #d7b56d;\r\n --line: rgba(255,255,255,.12);\r\n --glass: rgba(12,12,12,.65);\r\n --max: 1440px;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n scroll-behavior: auto;\r\n}\r\n\r\nbody {\r\n background: var(--bg);\r\n color: var(--white);\r\n font-family: \"DM Sans\", sans-serif;\r\n overflow-x: hidden;\r\n}\r\n\r\na {\r\n color: inherit;\r\n text-decoration: none;\r\n}\r\n\r\nbutton {\r\n font: inherit;\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n display: block;\r\n}\r\n\r\n\/* =========================================================\r\n CURSOR\r\n========================================================= *\/\r\n\r\n.cursor {\r\n position: fixed;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: white;\r\n pointer-events: none;\r\n z-index: 9999;\r\n transform: translate(-50%, -50%);\r\n mix-blend-mode: difference;\r\n}\r\n\r\n.cursor-ring {\r\n position: fixed;\r\n width: 38px;\r\n height: 38px;\r\n border: 1px solid rgba(255,255,255,.7);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 9998;\r\n transform: translate(-50%, -50%);\r\n transition:\r\n width .25s ease,\r\n height .25s ease,\r\n background .25s ease;\r\n}\r\n\r\n\/* =========================================================\r\n NAVIGATION\r\n========================================================= *\/\r\n\r\n.nav {\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 86px;\r\n z-index: 500;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 0 4vw;\r\n background: linear-gradient(\r\n to bottom,\r\n rgba(0,0,0,.72),\r\n transparent\r\n );\r\n}\r\n\r\n.logo {\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: 20px;\r\n font-weight: 800;\r\n letter-spacing: -.04em;\r\n}\r\n\r\n.logo span {\r\n color: var(--gold);\r\n}\r\n\r\n.nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 36px;\r\n font-size: 13px;\r\n color: rgba(255,255,255,.78);\r\n}\r\n\r\n.nav-links a {\r\n transition: opacity .25s ease;\r\n}\r\n\r\n.nav-links a:hover {\r\n opacity: .55;\r\n}\r\n\r\n.nav-cta {\r\n border: 1px solid rgba(255,255,255,.28);\r\n padding: 12px 19px;\r\n border-radius: 100px;\r\n transition: .3s ease;\r\n}\r\n\r\n.nav-cta:hover {\r\n background: white;\r\n color: black;\r\n}\r\n\r\n\/* =========================================================\r\n CINEMATIC SCROLL\r\n========================================================= *\/\r\n\r\n.cinematic {\r\n height: 560vh;\r\n position: relative;\r\n}\r\n\r\n.cinematic-sticky {\r\n position: sticky;\r\n top: 0;\r\n height: 100vh;\r\n overflow: hidden;\r\n background: #050505;\r\n}\r\n\r\n#plateCanvas {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n}\r\n\r\n\/* Atmospheric overlays *\/\r\n\r\n.atmosphere {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 3;\r\n pointer-events: none;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 50% 45%,\r\n transparent 0%,\r\n rgba(0,0,0,.08) 45%,\r\n rgba(0,0,0,.72) 100%\r\n ),\r\n linear-gradient(\r\n to bottom,\r\n rgba(0,0,0,.2),\r\n transparent 30%,\r\n rgba(0,0,0,.52)\r\n );\r\n}\r\n\r\n.grain {\r\n position: absolute;\r\n inset: -50%;\r\n z-index: 8;\r\n pointer-events: none;\r\n opacity: .06;\r\n\r\n background-image:\r\n url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'\/%3E%3C\/svg%3E\");\r\n\r\n animation: grainMove .2s steps(2) infinite;\r\n}\r\n\r\n@keyframes grainMove {\r\n 0% { transform: translate(0,0); }\r\n 25% { transform: translate(2%,-1%); }\r\n 50% { transform: translate(-1%,2%); }\r\n 75% { transform: translate(1%,1%); }\r\n 100% { transform: translate(-2%,-1%); }\r\n}\r\n\r\n\/* =========================================================\r\n THREE.JS\r\n========================================================= *\/\r\n\r\n#flightCanvas {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 6;\r\n pointer-events: none;\r\n}\r\n\r\n.flight-shadow {\r\n position: absolute;\r\n width: 260px;\r\n height: 80px;\r\n left: 50%;\r\n top: 55%;\r\n transform: translate(-50%, -50%);\r\n background: radial-gradient(\r\n ellipse,\r\n rgba(0,0,0,.5),\r\n transparent 70%\r\n );\r\n filter: blur(20px);\r\n z-index: 4;\r\n opacity: .7;\r\n}\r\n\r\n\/* =========================================================\r\n CINEMATIC CONTENT\r\n========================================================= *\/\r\n\r\n.cinematic-content {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 10;\r\n pointer-events: none;\r\n}\r\n\r\n.scene-copy {\r\n position: absolute;\r\n left: 7vw;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: min(600px, 75vw);\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n}\r\n\r\n.scene-copy.active {\r\n opacity: 1;\r\n}\r\n\r\n.eyebrow {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n color: var(--gold);\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: .18em;\r\n text-transform: uppercase;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.eyebrow::before {\r\n content: \"\";\r\n width: 34px;\r\n height: 1px;\r\n background: var(--gold);\r\n}\r\n\r\n.scene-copy h1 {\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: clamp(52px, 7.5vw, 124px);\r\n line-height: .88;\r\n letter-spacing: -.065em;\r\n font-weight: 700;\r\n}\r\n\r\n.scene-copy p {\r\n margin-top: 28px;\r\n max-width: 430px;\r\n font-size: 16px;\r\n line-height: 1.65;\r\n color: rgba(255,255,255,.72);\r\n}\r\n\r\n.hero-mini {\r\n margin-top: 32px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 14px;\r\n pointer-events: auto;\r\n}\r\n\r\n.circle-arrow {\r\n width: 42px;\r\n height: 42px;\r\n border: 1px solid rgba(255,255,255,.35);\r\n border-radius: 50%;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n\/* =========================================================\r\n SCENE INDICATOR\r\n========================================================= *\/\r\n\r\n.scene-index {\r\n position: absolute;\r\n right: 4vw;\r\n bottom: 38px;\r\n z-index: 20;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n font-size: 11px;\r\n letter-spacing: .12em;\r\n color: rgba(255,255,255,.65);\r\n}\r\n\r\n.scene-line {\r\n width: 90px;\r\n height: 1px;\r\n background: rgba(255,255,255,.2);\r\n position: relative;\r\n}\r\n\r\n.scene-line span {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n height: 100%;\r\n width: 0%;\r\n background: white;\r\n}\r\n\r\n\/* =========================================================\r\n SCROLL HINT\r\n========================================================= *\/\r\n\r\n.scroll-hint {\r\n position: absolute;\r\n bottom: 38px;\r\n left: 4vw;\r\n z-index: 20;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n color: rgba(255,255,255,.55);\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n letter-spacing: .16em;\r\n}\r\n\r\n.scroll-wheel {\r\n width: 22px;\r\n height: 34px;\r\n border: 1px solid rgba(255,255,255,.45);\r\n border-radius: 20px;\r\n position: relative;\r\n}\r\n\r\n.scroll-wheel::after {\r\n content: \"\";\r\n position: absolute;\r\n width: 3px;\r\n height: 6px;\r\n background: white;\r\n border-radius: 10px;\r\n top: 6px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n animation: scrollDot 1.5s infinite;\r\n}\r\n\r\n@keyframes scrollDot {\r\n 0% { opacity: 0; transform: translate(-50%,0); }\r\n 30% { opacity: 1; }\r\n 100% { opacity: 0; transform: translate(-50%,14px); }\r\n}\r\n\r\n\/* =========================================================\r\n COURSE SECTION\r\n========================================================= *\/\r\n\r\n.courses {\r\n min-height: 100vh;\r\n padding: 150px 5vw;\r\n background:\r\n radial-gradient(\r\n circle at 50% 0%,\r\n rgba(215,181,109,.08),\r\n transparent 40%\r\n ),\r\n var(--bg);\r\n overflow: hidden;\r\n}\r\n\r\n.section-header {\r\n max-width: 760px;\r\n margin-bottom: 90px;\r\n}\r\n\r\n.section-label {\r\n font-size: 11px;\r\n letter-spacing: .18em;\r\n color: var(--gold);\r\n text-transform: uppercase;\r\n margin-bottom: 18px;\r\n}\r\n\r\n.section-header h2 {\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: clamp(42px, 6vw, 90px);\r\n line-height: .95;\r\n letter-spacing: -.055em;\r\n}\r\n\r\n.section-header p {\r\n max-width: 550px;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n margin-top: 28px;\r\n}\r\n\r\n\/* =========================================================\r\n LARGE CIRCULAR CARD SYSTEM\r\n========================================================= *\/\r\n\r\n.orbit-wrapper {\r\n position: relative;\r\n width: min(1100px, 100%);\r\n height: 720px;\r\n margin: 0 auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.orbit {\r\n position: absolute;\r\n width: 660px;\r\n height: 660px;\r\n border: 1px solid rgba(255,255,255,.12);\r\n border-radius: 50%;\r\n}\r\n\r\n.orbit::before,\r\n.orbit::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 70px;\r\n border: 1px solid rgba(255,255,255,.045);\r\n border-radius: 50%;\r\n}\r\n\r\n.orbit::after {\r\n inset: 140px;\r\n}\r\n\r\n.orbit-cards {\r\n position: absolute;\r\n inset: 0;\r\n transform: rotate(var(--orbit-rotation, 0deg));\r\n transition: transform .7s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\/*\r\n Cards ride the circle.\r\n The whole group rotates.\r\n Individual cards do not use trig.\r\n*\/\r\n\r\n.course-card {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n width: 250px;\r\n min-height: 315px;\r\n transform:\r\n translate(-50%, -50%)\r\n rotate(var(--card-angle))\r\n translateY(-330px);\r\n\r\n transform-origin: center 330px;\r\n\r\n padding: 28px;\r\n border-radius: 24px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n rgba(255,255,255,.1),\r\n rgba(255,255,255,.025)\r\n );\r\n\r\n border: 1px solid rgba(255,255,255,.12);\r\n backdrop-filter: blur(20px);\r\n\r\n transition:\r\n scale .4s ease,\r\n opacity .4s ease;\r\n}\r\n\r\n.course-card:hover {\r\n scale: 1.04;\r\n}\r\n\r\n.course-number {\r\n font-size: 11px;\r\n color: var(--gold);\r\n letter-spacing: .12em;\r\n}\r\n\r\n.course-card h3 {\r\n margin-top: 80px;\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: 27px;\r\n letter-spacing: -.04em;\r\n}\r\n\r\n.course-card p {\r\n color: var(--muted);\r\n font-size: 13px;\r\n line-height: 1.6;\r\n margin-top: 14px;\r\n}\r\n\r\n.course-link {\r\n position: absolute;\r\n bottom: 25px;\r\n display: flex;\r\n justify-content: space-between;\r\n width: calc(100% - 56px);\r\n font-size: 12px;\r\n}\r\n\r\n\/* Center *\/\r\n\r\n.orbit-center {\r\n position: relative;\r\n z-index: 4;\r\n width: 260px;\r\n height: 260px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(215,181,109,.15),\r\n rgba(0,0,0,.85) 65%\r\n );\r\n\r\n border: 1px solid rgba(255,255,255,.14);\r\n}\r\n\r\n.orbit-center strong {\r\n display: block;\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: 30px;\r\n letter-spacing: -.05em;\r\n}\r\n\r\n.orbit-center span {\r\n display: block;\r\n margin-top: 8px;\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n\/* =========================================================\r\n RESULTS\r\n========================================================= *\/\r\n\r\n.results {\r\n padding: 150px 5vw;\r\n background: #0a0a0a;\r\n}\r\n\r\n.results-grid {\r\n max-width: var(--max);\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1.1fr 1fr;\r\n gap: 100px;\r\n align-items: center;\r\n}\r\n\r\n.results-title {\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: clamp(45px, 6vw, 86px);\r\n line-height: .94;\r\n letter-spacing: -.06em;\r\n}\r\n\r\n.results-title em {\r\n font-style: normal;\r\n color: var(--gold);\r\n}\r\n\r\n.results-description {\r\n color: var(--muted);\r\n line-height: 1.7;\r\n max-width: 500px;\r\n margin-top: 28px;\r\n}\r\n\r\n.stats {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1px;\r\n background: rgba(255,255,255,.1);\r\n}\r\n\r\n.stat {\r\n padding: 42px 30px;\r\n background: #0a0a0a;\r\n}\r\n\r\n.stat strong {\r\n display: block;\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: clamp(42px, 5vw, 70px);\r\n letter-spacing: -.06em;\r\n}\r\n\r\n.stat span {\r\n display: block;\r\n margin-top: 10px;\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n\/* =========================================================\r\n TESTIMONIAL\r\n========================================================= *\/\r\n\r\n.testimonial {\r\n padding: 180px 5vw;\r\n min-height: 80vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n\r\n background:\r\n radial-gradient(\r\n circle at center,\r\n rgba(215,181,109,.1),\r\n transparent 45%\r\n ),\r\n #060606;\r\n}\r\n\r\n.quote {\r\n max-width: 950px;\r\n}\r\n\r\n.quote-mark {\r\n font-size: 100px;\r\n color: var(--gold);\r\n line-height: .5;\r\n}\r\n\r\n.quote blockquote {\r\n margin-top: 30px;\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: clamp(35px, 5vw, 72px);\r\n line-height: 1.02;\r\n letter-spacing: -.055em;\r\n}\r\n\r\n.quote cite {\r\n display: block;\r\n margin-top: 40px;\r\n color: var(--muted);\r\n font-style: normal;\r\n}\r\n\r\n\/* =========================================================\r\n CTA\r\n========================================================= *\/\r\n\r\n.cta {\r\n min-height: 80vh;\r\n padding: 120px 5vw;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.cta::before {\r\n content: \"\";\r\n position: absolute;\r\n width: 700px;\r\n height: 700px;\r\n border-radius: 50%;\r\n border: 1px solid rgba(255,255,255,.08);\r\n}\r\n\r\n.cta-content {\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n.cta h2 {\r\n font-family: \"Manrope\", sans-serif;\r\n font-size: clamp(50px, 8vw, 120px);\r\n line-height: .88;\r\n letter-spacing: -.07em;\r\n}\r\n\r\n.cta p {\r\n color: var(--muted);\r\n margin: 30px auto;\r\n max-width: 470px;\r\n line-height: 1.6;\r\n}\r\n\r\n.primary-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 15px;\r\n background: white;\r\n color: black;\r\n padding: 17px 26px;\r\n border-radius: 100px;\r\n font-size: 13px;\r\n font-weight: 700;\r\n transition: .3s ease;\r\n}\r\n\r\n.primary-btn:hover {\r\n transform: translateY(-4px);\r\n padding-left: 32px;\r\n padding-right: 32px;\r\n}\r\n\r\n\/* =========================================================\r\n FOOTER\r\n========================================================= *\/\r\n\r\nfooter {\r\n padding: 45px 5vw;\r\n border-top: 1px solid var(--line);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n.footer-links {\r\n display: flex;\r\n gap: 25px;\r\n}\r\n\r\n\/* =========================================================\r\n MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width: 850px) {\r\n\r\n .nav {\r\n height: 70px;\r\n padding: 0 5vw;\r\n }\r\n\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n .cursor,\r\n .cursor-ring {\r\n display: none;\r\n }\r\n\r\n .scene-copy {\r\n left: 6vw;\r\n top: 47%;\r\n width: 88vw;\r\n }\r\n\r\n .scene-copy h1 {\r\n font-size: clamp(52px, 15vw, 90px);\r\n }\r\n\r\n .scene-copy p {\r\n font-size: 14px;\r\n max-width: 330px;\r\n }\r\n\r\n .scroll-hint {\r\n display: none;\r\n }\r\n\r\n .scene-index {\r\n bottom: 25px;\r\n right: 5vw;\r\n }\r\n\r\n .orbit-wrapper {\r\n height: 650px;\r\n transform: scale(.75);\r\n transform-origin: center center;\r\n width: 133%;\r\n margin-left: -16.5%;\r\n }\r\n\r\n .courses {\r\n padding-left: 0;\r\n padding-right: 0;\r\n }\r\n\r\n .section-header {\r\n padding: 0 7vw;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .results-grid {\r\n grid-template-columns: 1fr;\r\n gap: 60px;\r\n }\r\n\r\n footer {\r\n flex-direction: column;\r\n gap: 20px;\r\n align-items: flex-start;\r\n }\r\n}\r\n\r\n@media(max-width: 500px) {\r\n\r\n .cinematic {\r\n height: 500vh;\r\n }\r\n\r\n .course-card {\r\n width: 220px;\r\n min-height: 290px;\r\n }\r\n\r\n .orbit {\r\n width: 570px;\r\n height: 570px;\r\n }\r\n\r\n .orbit-center {\r\n width: 210px;\r\n height: 210px;\r\n }\r\n\r\n .stats {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<!-- =========================================================\r\n NAVIGATION\r\n========================================================= -->\r\n\r\n<header class=\"nav\">\r\n\r\n <a href=\"#\" class=\"logo\">\r\n FLUENT<span>.<\/span>\r\n <\/a>\r\n\r\n <nav class=\"nav-links\">\r\n <a href=\"#courses\">Courses<\/a>\r\n <a href=\"#results\">Results<\/a>\r\n <a href=\"#stories\">Stories<\/a>\r\n <a href=\"#contact\" class=\"nav-cta\">\r\n Book a Free Session\r\n <\/a>\r\n <\/nav>\r\n\r\n<\/header>\r\n\r\n\r\n<!-- =========================================================\r\n CINEMATIC HERO\r\n========================================================= -->\r\n\r\n<section class=\"cinematic\" id=\"home\">\r\n\r\n <div class=\"cinematic-sticky\">\r\n\r\n <canvas id=\"plateCanvas\"><\/canvas>\r\n\r\n <div class=\"atmosphere\"><\/div>\r\n\r\n <div class=\"flight-shadow\"><\/div>\r\n\r\n <!-- Three.js transparent layer -->\r\n <canvas id=\"flightCanvas\"><\/canvas>\r\n\r\n <div class=\"grain\"><\/div>\r\n\r\n\r\n <!-- SCENE CONTENT -->\r\n\r\n <div class=\"cinematic-content\">\r\n\r\n <div class=\"scene-copy active\" data-scene=\"0\">\r\n\r\n <div class=\"eyebrow\">\r\n IELTS + SPOKEN ENGLISH\r\n <\/div>\r\n\r\n <h1>\r\n Speak<br>\r\n Beyond<br>\r\n Limits.\r\n <\/h1>\r\n\r\n <p>\r\n Build the English communication skills,\r\n confidence and clarity you need for\r\n classrooms, careers and the world beyond.\r\n <\/p>\r\n\r\n <div class=\"hero-mini\">\r\n <div class=\"circle-arrow\">\u2193<\/div>\r\n <span>Scroll to explore<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"scene-copy\" data-scene=\"1\">\r\n\r\n <div class=\"eyebrow\">\r\n IELTS PREPARATION\r\n <\/div>\r\n\r\n <h1>\r\n Your<br>\r\n Target.<br>\r\n Your Score.\r\n <\/h1>\r\n\r\n <p>\r\n Structured preparation for Listening,\r\n Reading, Writing and Speaking with\r\n focused practice and feedback.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"scene-copy\" data-scene=\"2\">\r\n\r\n <div class=\"eyebrow\">\r\n SPOKEN ENGLISH\r\n <\/div>\r\n\r\n <h1>\r\n Think.<br>\r\n Speak.<br>\r\n Naturally.\r\n <\/h1>\r\n\r\n <p>\r\n Stop translating every sentence in your\r\n head. Develop practical English that feels\r\n natural in real conversations.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"scene-copy\" data-scene=\"3\">\r\n\r\n <div class=\"eyebrow\">\r\n PERSONAL COACHING\r\n <\/div>\r\n\r\n <h1>\r\n Feedback<br>\r\n That Moves<br>\r\n You Forward.\r\n <\/h1>\r\n\r\n <p>\r\n Identify your speaking gaps, improve\r\n pronunciation and build confidence\r\n through continuous practice.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"scene-copy\" data-scene=\"4\">\r\n\r\n <div class=\"eyebrow\">\r\n YOUR NEXT CHAPTER\r\n <\/div>\r\n\r\n <h1>\r\n Make Your<br>\r\n English<br>\r\n Count.\r\n <\/h1>\r\n\r\n <p>\r\n Start with a free assessment and discover\r\n the learning path that fits your goals.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"scroll-hint\">\r\n <div class=\"scroll-wheel\"><\/div>\r\n <span>Scroll<\/span>\r\n <\/div>\r\n\r\n\r\n <div class=\"scene-index\">\r\n\r\n <span id=\"sceneNumber\">\r\n 01 \/ 05\r\n <\/span>\r\n\r\n <div class=\"scene-line\">\r\n <span id=\"sceneProgress\"><\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n COURSES\r\n========================================================= -->\r\n\r\n<section class=\"courses\" id=\"courses\">\r\n\r\n <div class=\"section-header\">\r\n\r\n <div class=\"section-label\">\r\n What we teach\r\n <\/div>\r\n\r\n <h2>\r\n One language.<br>\r\n Many possibilities.\r\n <\/h2>\r\n\r\n <p>\r\n Choose a learning path designed around the way\r\n you actually want to use English.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"orbit-wrapper\">\r\n\r\n <div class=\"orbit\"><\/div>\r\n\r\n <div class=\"orbit-cards\" id=\"orbitCards\">\r\n\r\n <article\r\n class=\"course-card\"\r\n style=\"--card-angle: 0deg;\"\r\n >\r\n\r\n <div class=\"course-number\">\r\n 01 \/ IELTS\r\n <\/div>\r\n\r\n <h3>\r\n IELTS Academic\r\n <\/h3>\r\n\r\n <p>\r\n Complete preparation for all four\r\n IELTS modules with mock tests,\r\n strategies and feedback.\r\n <\/p>\r\n\r\n <div class=\"course-link\">\r\n <span>Explore<\/span>\r\n <span>\u2197<\/span>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"course-card\"\r\n style=\"--card-angle: 72deg;\"\r\n >\r\n\r\n <div class=\"course-number\">\r\n 02 \/ IELTS\r\n <\/div>\r\n\r\n <h3>\r\n IELTS General\r\n <\/h3>\r\n\r\n <p>\r\n Practical preparation for work,\r\n migration and everyday English\r\n requirements.\r\n <\/p>\r\n\r\n <div class=\"course-link\">\r\n <span>Explore<\/span>\r\n <span>\u2197<\/span>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"course-card\"\r\n style=\"--card-angle: 144deg;\"\r\n >\r\n\r\n <div class=\"course-number\">\r\n 03 \/ SPEAKING\r\n <\/div>\r\n\r\n <h3>\r\n Spoken English\r\n <\/h3>\r\n\r\n <p>\r\n Improve fluency, pronunciation,\r\n vocabulary and confidence for\r\n everyday conversations.\r\n <\/p>\r\n\r\n <div class=\"course-link\">\r\n <span>Explore<\/span>\r\n <span>\u2197<\/span>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"course-card\"\r\n style=\"--card-angle: 216deg;\"\r\n >\r\n\r\n <div class=\"course-number\">\r\n 04 \/ CAREER\r\n <\/div>\r\n\r\n <h3>\r\n Business English\r\n <\/h3>\r\n\r\n <p>\r\n Communicate more effectively in\r\n interviews, meetings, presentations\r\n and professional environments.\r\n <\/p>\r\n\r\n <div class=\"course-link\">\r\n <span>Explore<\/span>\r\n <span>\u2197<\/span>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n\r\n <article\r\n class=\"course-card\"\r\n style=\"--card-angle: 288deg;\"\r\n >\r\n\r\n <div class=\"course-number\">\r\n 05 \/ FOUNDATION\r\n <\/div>\r\n\r\n <h3>\r\n English Foundation\r\n <\/h3>\r\n\r\n <p>\r\n Build grammar, vocabulary and\r\n sentence confidence from the\r\n ground up.\r\n <\/p>\r\n\r\n <div class=\"course-link\">\r\n <span>Explore<\/span>\r\n <span>\u2197<\/span>\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"orbit-center\">\r\n\r\n <div>\r\n <strong>\r\n FLUENT\r\n <\/strong>\r\n\r\n <span>\r\n Learn. Practice. Transform.\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n RESULTS\r\n========================================================= -->\r\n\r\n<section class=\"results\" id=\"results\">\r\n\r\n <div class=\"results-grid\">\r\n\r\n <div>\r\n\r\n <div class=\"section-label\">\r\n Built around progress\r\n <\/div>\r\n\r\n <h2 class=\"results-title\">\r\n Practice with<br>\r\n <em>purpose.<\/em>\r\n <\/h2>\r\n\r\n <p class=\"results-description\">\r\n Every session combines structured learning,\r\n real communication and actionable feedback.\r\n The goal isn't just to know English.\r\n It's to use it.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"stats\">\r\n\r\n <div class=\"stat\">\r\n <strong>4<\/strong>\r\n <span>\r\n IELTS Modules\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"stat\">\r\n <strong>1:1<\/strong>\r\n <span>\r\n Personal Feedback\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"stat\">\r\n <strong>100%<\/strong>\r\n <span>\r\n Practice Focus\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"stat\">\r\n <strong>\u221e<\/strong>\r\n <span>\r\n Room to Improve\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n TESTIMONIAL\r\n========================================================= -->\r\n\r\n<section class=\"testimonial\" id=\"stories\">\r\n\r\n <div class=\"quote\">\r\n\r\n <div class=\"quote-mark\">\r\n \u201c\r\n <\/div>\r\n\r\n <blockquote>\r\n English stopped feeling like a subject\r\n and started feeling like something\r\n I could actually use.\r\n <\/blockquote>\r\n\r\n <cite>\r\n \u2014 Student testimonial\r\n <\/cite>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n CTA\r\n========================================================= -->\r\n\r\n<section class=\"cta\" id=\"contact\">\r\n\r\n <div class=\"cta-content\">\r\n\r\n <div class=\"section-label\">\r\n Start here\r\n <\/div>\r\n\r\n <h2>\r\n Ready to<br>\r\n speak?\r\n <\/h2>\r\n\r\n <p>\r\n Take your first step with a free English\r\n assessment and discover where you can improve.\r\n <\/p>\r\n\r\n <a href=\"#\" class=\"primary-btn\">\r\n Book a Free Assessment\r\n <span>\u2197<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n FOOTER\r\n========================================================= -->\r\n\r\n<footer>\r\n\r\n <div>\r\n \u00a9 2026 FLUENT. All rights reserved.\r\n <\/div>\r\n\r\n <div class=\"footer-links\">\r\n <a href=\"#\">Instagram<\/a>\r\n <a href=\"#\">YouTube<\/a>\r\n <a href=\"#\">Contact<\/a>\r\n <\/div>\r\n\r\n<\/footer>\r\n\r\n\r\n<!-- =========================================================\r\n THREE.JS\r\n========================================================= -->\r\n\r\n<script type=\"importmap\">\r\n{\r\n \"imports\": {\r\n \"three\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/build\/three.module.js\",\r\n \"three\/addons\/\": \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/examples\/jsm\/\"\r\n }\r\n}\r\n<\/script>\r\n\r\n\r\n<script type=\"module\">\r\n\r\nimport * as THREE from \"three\";\r\nimport { GLTFLoader } from \"three\/addons\/loaders\/GLTFLoader.js\";\r\n\r\n\r\n\/* =========================================================\r\n BASIC SETUP\r\n========================================================= *\/\r\n\r\nconst flightCanvas =\r\n document.getElementById(\"flightCanvas\");\r\n\r\nconst renderer =\r\n new THREE.WebGLRenderer({\r\n canvas: flightCanvas,\r\n alpha: true,\r\n antialias: true,\r\n powerPreference: \"high-performance\"\r\n });\r\n\r\nrenderer.setPixelRatio(\r\n Math.min(window.devicePixelRatio, 2)\r\n);\r\n\r\nrenderer.setSize(\r\n window.innerWidth,\r\n window.innerHeight\r\n);\r\n\r\nrenderer.shadowMap.enabled = true;\r\nrenderer.shadowMap.type =\r\n THREE.PCFSoftShadowMap;\r\n\r\nrenderer.outputColorSpace =\r\n THREE.SRGBColorSpace;\r\n\r\n\r\n\/* =========================================================\r\n SCENE\r\n========================================================= *\/\r\n\r\nconst scene = new THREE.Scene();\r\n\r\nscene.fog = new THREE.FogExp2(\r\n 0x090909,\r\n 0.018\r\n);\r\n\r\n\r\n\/* =========================================================\r\n CAMERA\r\n========================================================= *\/\r\n\r\nconst camera =\r\n new THREE.PerspectiveCamera(\r\n 35,\r\n window.innerWidth \/\r\n window.innerHeight,\r\n .1,\r\n 200\r\n );\r\n\r\ncamera.position.set(\r\n 0,\r\n 2.5,\r\n 16\r\n);\r\n\r\n\r\n\/* =========================================================\r\n LIGHTING\r\n========================================================= *\/\r\n\r\nconst ambient =\r\n new THREE.HemisphereLight(\r\n 0xffffff,\r\n 0x111111,\r\n 2.5\r\n );\r\n\r\nscene.add(ambient);\r\n\r\n\r\nconst sun =\r\n new THREE.DirectionalLight(\r\n 0xffffff,\r\n 4\r\n );\r\n\r\nsun.position.set(\r\n -5,\r\n 10,\r\n 8\r\n);\r\n\r\nsun.castShadow = true;\r\n\r\nsun.shadow.mapSize.width = 2048;\r\nsun.shadow.mapSize.height = 2048;\r\n\r\nscene.add(sun);\r\n\r\n\r\nconst rim =\r\n new THREE.DirectionalLight(\r\n 0xd7b56d,\r\n 2\r\n );\r\n\r\nrim.position.set(\r\n 8,\r\n 3,\r\n -5\r\n);\r\n\r\nscene.add(rim);\r\n\r\n\r\n\/* =========================================================\r\n AIRCRAFT GROUP\r\n========================================================= *\/\r\n\r\nconst aircraft =\r\n new THREE.Group();\r\n\r\nscene.add(aircraft);\r\n\r\n\r\n\/* =========================================================\r\n PROCEDURAL AIRCRAFT\r\n FALLBACK IF aircraft.glb IS NOT PRESENT\r\n========================================================= *\/\r\n\r\nfunction createFallbackAircraft() {\r\n\r\n const group =\r\n new THREE.Group();\r\n\r\n\r\n const bodyMaterial =\r\n new THREE.MeshStandardMaterial({\r\n color: 0xe8e4d9,\r\n roughness: .32,\r\n metalness: .35\r\n });\r\n\r\n\r\n const darkMaterial =\r\n new THREE.MeshStandardMaterial({\r\n color: 0x161616,\r\n roughness: .25,\r\n metalness: .5\r\n });\r\n\r\n\r\n const glassMaterial =\r\n new THREE.MeshPhysicalMaterial({\r\n color: 0x242424,\r\n roughness: .08,\r\n metalness: .25,\r\n transparent: true,\r\n opacity: .9\r\n });\r\n\r\n\r\n \/* Fuselage *\/\r\n\r\n const fuselage =\r\n new THREE.Mesh(\r\n new THREE.CapsuleGeometry(\r\n .48,\r\n 3.5,\r\n 8,\r\n 20\r\n ),\r\n bodyMaterial\r\n );\r\n\r\n fuselage.rotation.z =\r\n Math.PI \/ 2;\r\n\r\n fuselage.castShadow = true;\r\n\r\n group.add(fuselage);\r\n\r\n\r\n \/* Nose *\/\r\n\r\n const nose =\r\n new THREE.Mesh(\r\n new THREE.ConeGeometry(\r\n .48,\r\n 1.3,\r\n 20\r\n ),\r\n bodyMaterial\r\n );\r\n\r\n nose.rotation.z =\r\n -Math.PI \/ 2;\r\n\r\n nose.position.x = 2.25;\r\n\r\n nose.castShadow = true;\r\n\r\n group.add(nose);\r\n\r\n\r\n \/* Cockpit *\/\r\n\r\n const cockpit =\r\n new THREE.Mesh(\r\n new THREE.SphereGeometry(\r\n .44,\r\n 20,\r\n 12\r\n ),\r\n glassMaterial\r\n );\r\n\r\n cockpit.scale.set(\r\n .9,\r\n .5,\r\n .7\r\n );\r\n\r\n cockpit.position.set(\r\n .75,\r\n .34,\r\n 0\r\n );\r\n\r\n group.add(cockpit);\r\n\r\n\r\n \/* Main wing *\/\r\n\r\n const wing =\r\n new THREE.Mesh(\r\n new THREE.BoxGeometry(\r\n .35,\r\n .1,\r\n 5.6\r\n ),\r\n bodyMaterial\r\n );\r\n\r\n wing.position.x = -.15;\r\n\r\n wing.castShadow = true;\r\n\r\n group.add(wing);\r\n\r\n\r\n \/* Tail wing *\/\r\n\r\n const tailWing =\r\n new THREE.Mesh(\r\n new THREE.BoxGeometry(\r\n .25,\r\n .08,\r\n 2.2\r\n ),\r\n bodyMaterial\r\n );\r\n\r\n tailWing.position.x = -1.65;\r\n\r\n group.add(tailWing);\r\n\r\n\r\n \/* Vertical stabilizer *\/\r\n\r\n const tail =\r\n new THREE.Mesh(\r\n new THREE.BoxGeometry(\r\n .5,\r\n .9,\r\n .12\r\n ),\r\n bodyMaterial\r\n );\r\n\r\n tail.position.set(\r\n -1.65,\r\n .45,\r\n 0\r\n );\r\n\r\n tail.rotation.z = -.15;\r\n\r\n group.add(tail);\r\n\r\n\r\n \/* Engines *\/\r\n\r\n [-1.35, 1.35].forEach(z => {\r\n\r\n const engine =\r\n new THREE.Mesh(\r\n new THREE.CylinderGeometry(\r\n .23,\r\n .27,\r\n 1.5,\r\n 16\r\n ),\r\n darkMaterial\r\n );\r\n\r\n engine.rotation.z =\r\n Math.PI \/ 2;\r\n\r\n engine.position.set(\r\n -.25,\r\n -.2,\r\n z\r\n );\r\n\r\n engine.castShadow = true;\r\n\r\n group.add(engine);\r\n\r\n });\r\n\r\n\r\n \/* Scale *\/\r\n\r\n group.scale.set(\r\n 1.35,\r\n 1.35,\r\n 1.35\r\n );\r\n\r\n\r\n return group;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CREATE FALLBACK\r\n========================================================= *\/\r\n\r\nconst fallbackAircraft =\r\n createFallbackAircraft();\r\n\r\naircraft.add(fallbackAircraft);\r\n\r\n\r\n\/* =========================================================\r\n OPTIONAL GLTF MODEL\r\n========================================================= *\/\r\n\r\nconst loader =\r\n new GLTFLoader();\r\n\r\nloader.load(\r\n\r\n \".\/assets\/aircraft.glb\",\r\n\r\n gltf => {\r\n\r\n \/*\r\n If a real aircraft.glb exists,\r\n use it instead of the fallback.\r\n *\/\r\n\r\n aircraft.remove(\r\n fallbackAircraft\r\n );\r\n\r\n const model =\r\n gltf.scene;\r\n\r\n model.scale.setScalar(\r\n 2.2\r\n );\r\n\r\n model.traverse(\r\n object => {\r\n\r\n if (object.isMesh) {\r\n\r\n object.castShadow = true;\r\n object.receiveShadow = true;\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n aircraft.add(model);\r\n\r\n },\r\n\r\n undefined,\r\n\r\n () => {\r\n\r\n \/*\r\n No GLB found.\r\n Fallback remains active.\r\n *\/\r\n\r\n console.log(\r\n \"No aircraft.glb found \u2014 using built-in 3D aircraft.\"\r\n );\r\n\r\n }\r\n);\r\n\r\n\r\n\/* =========================================================\r\n FLIGHT PATH\r\n========================================================= *\/\r\n\r\nconst flightPoints = [\r\n\r\n new THREE.Vector3(\r\n -5,\r\n 1,\r\n 4\r\n ),\r\n\r\n new THREE.Vector3(\r\n -2.5,\r\n 3,\r\n 2\r\n ),\r\n\r\n new THREE.Vector3(\r\n 1,\r\n 1,\r\n 0\r\n ),\r\n\r\n new THREE.Vector3(\r\n 4,\r\n 4,\r\n -2\r\n ),\r\n\r\n new THREE.Vector3(\r\n 1,\r\n 1,\r\n -5\r\n ),\r\n\r\n new THREE.Vector3(\r\n -4,\r\n 3,\r\n -3\r\n ),\r\n\r\n new THREE.Vector3(\r\n 0,\r\n 5,\r\n -7\r\n )\r\n\r\n];\r\n\r\n\r\nconst flightCurve =\r\n new THREE.CatmullRomCurve3(\r\n flightPoints,\r\n false,\r\n \"catmullrom\",\r\n .45\r\n );\r\n\r\n\r\n\/* =========================================================\r\n TARGET VARIABLES\r\n========================================================= *\/\r\n\r\nlet scrollProgress = 0;\r\n\r\nlet pointerX = 0;\r\nlet pointerY = 0;\r\n\r\nlet smoothPointerX = 0;\r\nlet smoothPointerY = 0;\r\n\r\nlet currentFlightProgress = 0;\r\n\r\n\r\n\/* =========================================================\r\n POINTER\r\n========================================================= *\/\r\n\r\nwindow.addEventListener(\r\n \"pointermove\",\r\n event => {\r\n\r\n pointerX =\r\n (event.clientX \/\r\n window.innerWidth) * 2 - 1;\r\n\r\n pointerY =\r\n (event.clientY \/\r\n window.innerHeight) * 2 - 1;\r\n\r\n }\r\n);\r\n\r\n\r\n\/* =========================================================\r\n AIRCRAFT UPDATE\r\n========================================================= *\/\r\n\r\nfunction updateAircraft() {\r\n\r\n \/*\r\n Slightly delay the aircraft behind\r\n the scroll position for a cinematic feel.\r\n *\/\r\n\r\n currentFlightProgress +=\r\n (\r\n scrollProgress -\r\n currentFlightProgress\r\n ) * .055;\r\n\r\n\r\n const t =\r\n THREE.MathUtils.clamp(\r\n currentFlightProgress,\r\n 0,\r\n 1\r\n );\r\n\r\n\r\n const position =\r\n flightCurve.getPointAt(t);\r\n\r\n\r\n const tangent =\r\n flightCurve.getTangentAt(t);\r\n\r\n\r\n aircraft.position.copy(\r\n position\r\n );\r\n\r\n\r\n \/*\r\n Point aircraft in the direction\r\n of the flight curve.\r\n *\/\r\n\r\n const targetQuaternion =\r\n new THREE.Quaternion();\r\n\r\n const direction =\r\n tangent.clone().normalize();\r\n\r\n\r\n \/*\r\n Aircraft points along local +X.\r\n *\/\r\n\r\n const defaultDirection =\r\n new THREE.Vector3(\r\n 1,\r\n 0,\r\n 0\r\n );\r\n\r\n\r\n targetQuaternion.setFromUnitVectors(\r\n defaultDirection,\r\n direction\r\n );\r\n\r\n\r\n aircraft.quaternion.slerp(\r\n targetQuaternion,\r\n .08\r\n );\r\n\r\n\r\n \/*\r\n Pointer banking.\r\n *\/\r\n\r\n smoothPointerX +=\r\n (pointerX - smoothPointerX)\r\n * .045;\r\n\r\n smoothPointerY +=\r\n (pointerY - smoothPointerY)\r\n * .045;\r\n\r\n\r\n const pointerBank =\r\n smoothPointerX * -.25;\r\n\r\n const pointerPitch =\r\n smoothPointerY * .08;\r\n\r\n\r\n aircraft.rotation.z +=\r\n pointerBank;\r\n\r\n aircraft.rotation.y +=\r\n pointerPitch;\r\n\r\n\r\n \/*\r\n Small flight vibration.\r\n *\/\r\n\r\n aircraft.position.y +=\r\n Math.sin(\r\n performance.now() * .0015\r\n ) * .035;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n CAMERA\r\n========================================================= *\/\r\n\r\nfunction updateCamera() {\r\n\r\n const t =\r\n scrollProgress;\r\n\r\n const cameraTarget =\r\n new THREE.Vector3(\r\n Math.sin(t * Math.PI * 2) * 2,\r\n 2 + Math.sin(t * Math.PI) * 1.5,\r\n 10 - t * 4\r\n );\r\n\r\n\r\n camera.position.x +=\r\n (\r\n cameraTarget.x -\r\n camera.position.x\r\n ) * .025;\r\n\r\n\r\n camera.position.y +=\r\n (\r\n cameraTarget.y -\r\n camera.position.y\r\n ) * .025;\r\n\r\n\r\n camera.position.z +=\r\n (\r\n cameraTarget.z -\r\n camera.position.z\r\n ) * .025;\r\n\r\n\r\n \/*\r\n Camera reacts slightly to pointer.\r\n *\/\r\n\r\n camera.position.x +=\r\n smoothPointerX * .8;\r\n\r\n\r\n camera.position.y -=\r\n smoothPointerY * .4;\r\n\r\n\r\n camera.lookAt(\r\n aircraft.position\r\n );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n RENDER LOOP\r\n========================================================= *\/\r\n\r\nfunction animate() {\r\n\r\n requestAnimationFrame(\r\n animate\r\n );\r\n\r\n updateAircraft();\r\n\r\n updateCamera();\r\n\r\n renderer.render(\r\n scene,\r\n camera\r\n );\r\n\r\n}\r\n\r\nanimate();\r\n\r\n\r\n\/* =========================================================\r\n RESIZE\r\n========================================================= *\/\r\n\r\nwindow.addEventListener(\r\n \"resize\",\r\n () => {\r\n\r\n camera.aspect =\r\n window.innerWidth \/\r\n window.innerHeight;\r\n\r\n camera.updateProjectionMatrix();\r\n\r\n renderer.setSize(\r\n window.innerWidth,\r\n window.innerHeight\r\n );\r\n\r\n renderer.setPixelRatio(\r\n Math.min(\r\n window.devicePixelRatio,\r\n 2\r\n )\r\n );\r\n\r\n }\r\n);\r\n\r\n\r\n\/* =========================================================\r\n EXPOSE SCROLL VARIABLE\r\n========================================================= *\/\r\n\r\nwindow.setFlightProgress =\r\n value => {\r\n\r\n scrollProgress =\r\n THREE.MathUtils.clamp(\r\n value,\r\n 0,\r\n 1\r\n );\r\n\r\n };\r\n\r\n<\/script>\r\n\r\n\r\n<!-- =========================================================\r\n CANVAS IMAGE SEQUENCE\r\n========================================================= -->\r\n\r\n<script>\r\n\r\nconst canvas =\r\n document.getElementById(\r\n \"plateCanvas\"\r\n );\r\n\r\nconst ctx =\r\n canvas.getContext(\"2d\", {\r\n alpha: false\r\n });\r\n\r\n\r\nlet width =\r\n window.innerWidth;\r\n\r\nlet height =\r\n window.innerHeight;\r\n\r\n\r\nfunction resizeCanvas() {\r\n\r\n const ratio =\r\n Math.min(\r\n window.devicePixelRatio,\r\n 2\r\n );\r\n\r\n width =\r\n window.innerWidth;\r\n\r\n height =\r\n window.innerHeight;\r\n\r\n canvas.width =\r\n width * ratio;\r\n\r\n canvas.height =\r\n height * ratio;\r\n\r\n canvas.style.width =\r\n width + \"px\";\r\n\r\n canvas.style.height =\r\n height + \"px\";\r\n\r\n ctx.setTransform(\r\n ratio,\r\n 0,\r\n 0,\r\n ratio,\r\n 0,\r\n 0\r\n );\r\n\r\n}\r\n\r\nresizeCanvas();\r\n\r\nwindow.addEventListener(\r\n \"resize\",\r\n resizeCanvas\r\n);\r\n\r\n\r\n\/* =========================================================\r\n 240 FRAME SYSTEM\r\n========================================================= *\/\r\n\r\nconst FRAME_COUNT = 240;\r\n\r\nconst frames = [];\r\n\r\nlet loadedFrames = 0;\r\n\r\n\r\nfunction framePath(index) {\r\n\r\n return (\r\n \".\/assets\/aerial\/frame_\" +\r\n String(index).padStart(3, \"0\") +\r\n \".jpg\"\r\n );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n LOAD FRAMES\r\n========================================================= *\/\r\n\r\nfor (\r\n let i = 1;\r\n i <= FRAME_COUNT;\r\n i++\r\n) {\r\n\r\n const image =\r\n new Image();\r\n\r\n image.src =\r\n framePath(i);\r\n\r\n image.onload =\r\n () => {\r\n\r\n loadedFrames++;\r\n\r\n };\r\n\r\n frames.push(image);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n PROCEDURAL FALLBACK\r\n========================================================= *\/\r\n\r\nfunction drawFallback(progress) {\r\n\r\n const w = width;\r\n const h = height;\r\n\r\n \/*\r\n Deep aerial-style background.\r\n *\/\r\n\r\n const gradient =\r\n ctx.createLinearGradient(\r\n 0,\r\n 0,\r\n 0,\r\n h\r\n );\r\n\r\n gradient.addColorStop(\r\n 0,\r\n \"#101112\"\r\n );\r\n\r\n gradient.addColorStop(\r\n .5,\r\n \"#202321\"\r\n );\r\n\r\n gradient.addColorStop(\r\n 1,\r\n \"#070807\"\r\n );\r\n\r\n ctx.fillStyle =\r\n gradient;\r\n\r\n ctx.fillRect(\r\n 0,\r\n 0,\r\n w,\r\n h\r\n );\r\n\r\n\r\n \/*\r\n Large simulated city blocks.\r\n *\/\r\n\r\n ctx.save();\r\n\r\n ctx.translate(\r\n w \/ 2,\r\n h \/ 2\r\n );\r\n\r\n ctx.rotate(\r\n -.35\r\n );\r\n\r\n\r\n const gridSize =\r\n 90;\r\n\r\n\r\n for (\r\n let x = -w * 1.5;\r\n x < w * 1.5;\r\n x += gridSize\r\n ) {\r\n\r\n for (\r\n let y = -h * 1.5;\r\n y < h * 1.5;\r\n y += gridSize\r\n ) {\r\n\r\n const wave =\r\n Math.sin(\r\n x * .007 +\r\n progress * 7\r\n ) *\r\n 12;\r\n\r\n const size =\r\n 35 +\r\n Math.abs(\r\n Math.sin(\r\n y * .01 +\r\n x * .002\r\n )\r\n ) * 55;\r\n\r\n\r\n ctx.fillStyle =\r\n `rgba(\r\n 255,\r\n 255,\r\n 255,\r\n ${.025 + progress * .015}\r\n )`;\r\n\r\n ctx.fillRect(\r\n x + wave,\r\n y,\r\n size,\r\n size * .55\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n ctx.restore();\r\n\r\n\r\n \/*\r\n Roads.\r\n *\/\r\n\r\n ctx.save();\r\n\r\n ctx.translate(\r\n w \/ 2,\r\n h \/ 2\r\n );\r\n\r\n ctx.rotate(\r\n -.28\r\n );\r\n\r\n\r\n for (\r\n let i = -8;\r\n i <= 8;\r\n i++\r\n ) {\r\n\r\n ctx.beginPath();\r\n\r\n ctx.moveTo(\r\n i * 180,\r\n -h\r\n );\r\n\r\n ctx.lineTo(\r\n i * 110,\r\n h\r\n );\r\n\r\n ctx.lineWidth =\r\n i % 3 === 0\r\n ? 5\r\n : 1;\r\n\r\n ctx.strokeStyle =\r\n \"rgba(255,255,255,.08)\";\r\n\r\n ctx.stroke();\r\n\r\n }\r\n\r\n\r\n ctx.restore();\r\n\r\n\r\n \/*\r\n Aerial movement.\r\n *\/\r\n\r\n const zoom =\r\n 1 +\r\n progress * .16;\r\n\r\n ctx.globalAlpha =\r\n .15;\r\n\r\n ctx.strokeStyle =\r\n \"#ffffff\";\r\n\r\n ctx.lineWidth = 1;\r\n\r\n for (\r\n let i = 0;\r\n i < 16;\r\n i++\r\n ) {\r\n\r\n const y =\r\n (\r\n i * 130 +\r\n progress * 800\r\n ) % (h + 200) - 100;\r\n\r\n ctx.beginPath();\r\n\r\n ctx.moveTo(\r\n 0,\r\n y\r\n );\r\n\r\n ctx.lineTo(\r\n w,\r\n y - 180\r\n );\r\n\r\n ctx.stroke();\r\n\r\n }\r\n\r\n ctx.globalAlpha = 1;\r\n\r\n\r\n \/*\r\n Vignette.\r\n *\/\r\n\r\n const vignette =\r\n ctx.createRadialGradient(\r\n w \/ 2,\r\n h \/ 2,\r\n h * .1,\r\n w \/ 2,\r\n h \/ 2,\r\n h * .8\r\n );\r\n\r\n vignette.addColorStop(\r\n 0,\r\n \"rgba(0,0,0,0)\"\r\n );\r\n\r\n vignette.addColorStop(\r\n 1,\r\n \"rgba(0,0,0,.8)\"\r\n );\r\n\r\n ctx.fillStyle =\r\n vignette;\r\n\r\n ctx.fillRect(\r\n 0,\r\n 0,\r\n w,\r\n h\r\n );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n DRAW REAL FRAME\r\n========================================================= *\/\r\n\r\nfunction drawFrame(index) {\r\n\r\n const image =\r\n frames[index];\r\n\r\n\r\n if (\r\n image &&\r\n image.complete &&\r\n image.naturalWidth > 0\r\n ) {\r\n\r\n const imageRatio =\r\n image.naturalWidth \/\r\n image.naturalHeight;\r\n\r\n const canvasRatio =\r\n width \/\r\n height;\r\n\r\n\r\n let drawWidth;\r\n let drawHeight;\r\n let offsetX;\r\n let offsetY;\r\n\r\n\r\n if (\r\n imageRatio >\r\n canvasRatio\r\n ) {\r\n\r\n drawHeight =\r\n height;\r\n\r\n drawWidth =\r\n height *\r\n imageRatio;\r\n\r\n offsetX =\r\n (width -\r\n drawWidth) \/ 2;\r\n\r\n offsetY = 0;\r\n\r\n } else {\r\n\r\n drawWidth =\r\n width;\r\n\r\n drawHeight =\r\n width \/\r\n imageRatio;\r\n\r\n offsetX = 0;\r\n\r\n offsetY =\r\n (height -\r\n drawHeight) \/ 2;\r\n\r\n }\r\n\r\n\r\n ctx.drawImage(\r\n image,\r\n offsetX,\r\n offsetY,\r\n drawWidth,\r\n drawHeight\r\n );\r\n\r\n } else {\r\n\r\n drawFallback(\r\n index \/\r\n (FRAME_COUNT - 1)\r\n );\r\n\r\n }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SCROLL ENGINE\r\n========================================================= *\/\r\n\r\nconst cinematic =\r\n document.querySelector(\r\n \".cinematic\"\r\n );\r\n\r\nconst sceneCopies =\r\n document.querySelectorAll(\r\n \".scene-copy\"\r\n );\r\n\r\nconst sceneNumber =\r\n document.getElementById(\r\n \"sceneNumber\"\r\n );\r\n\r\nconst sceneProgress =\r\n document.getElementById(\r\n \"sceneProgress\"\r\n );\r\n\r\n\r\nfunction updateCinematic() {\r\n\r\n const rect =\r\n cinematic.getBoundingClientRect();\r\n\r\n const scrollable =\r\n cinematic.offsetHeight -\r\n window.innerHeight;\r\n\r\n\r\n let progress =\r\n -rect.top \/\r\n scrollable;\r\n\r\n\r\n progress =\r\n Math.max(\r\n 0,\r\n Math.min(\r\n 1,\r\n progress\r\n )\r\n );\r\n\r\n\r\n \/*\r\n Canvas frame.\r\n *\/\r\n\r\n const frame =\r\n Math.floor(\r\n progress *\r\n (FRAME_COUNT - 1)\r\n );\r\n\r\n\r\n drawFrame(frame);\r\n\r\n\r\n \/*\r\n Send progress to Three.js.\r\n *\/\r\n\r\n if (\r\n window.setFlightProgress\r\n ) {\r\n\r\n window.setFlightProgress(\r\n progress\r\n );\r\n\r\n }\r\n\r\n\r\n \/*\r\n Scene transitions.\r\n *\/\r\n\r\n const sceneCount =\r\n sceneCopies.length;\r\n\r\n\r\n const sceneFloat =\r\n progress *\r\n sceneCount;\r\n\r\n\r\n let activeScene =\r\n Math.floor(\r\n sceneFloat\r\n );\r\n\r\n\r\n activeScene =\r\n Math.min(\r\n activeScene,\r\n sceneCount - 1\r\n );\r\n\r\n\r\n sceneCopies.forEach(\r\n (copy, index) => {\r\n\r\n copy.classList.toggle(\r\n \"active\",\r\n index === activeScene\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n sceneNumber.textContent =\r\n String(activeScene + 1)\r\n .padStart(2, \"0\") +\r\n \" \/ \" +\r\n String(sceneCount)\r\n .padStart(2, \"0\");\r\n\r\n\r\n \/*\r\n Scene progress line.\r\n *\/\r\n\r\n const localProgress =\r\n sceneFloat -\r\n activeScene;\r\n\r\n\r\n sceneProgress.style.width =\r\n (\r\n localProgress *\r\n 100\r\n ) + \"%\";\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n SCROLL LISTENER\r\n========================================================= *\/\r\n\r\nlet ticking = false;\r\n\r\nwindow.addEventListener(\r\n \"scroll\",\r\n () => {\r\n\r\n if (!ticking) {\r\n\r\n requestAnimationFrame(\r\n () => {\r\n\r\n updateCinematic();\r\n\r\n ticking = false;\r\n\r\n }\r\n );\r\n\r\n ticking = true;\r\n\r\n }\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n);\r\n\r\n\r\n\/* =========================================================\r\n INITIAL DRAW\r\n========================================================= *\/\r\n\r\ndrawFrame(0);\r\n\r\n\r\n\/* =========================================================\r\n CIRCULAR CARD INTERACTION\r\n========================================================= *\/\r\n\r\nconst orbitCards =\r\n document.getElementById(\r\n \"orbitCards\"\r\n );\r\n\r\nlet orbitRotation = 0;\r\n\r\nlet targetOrbitRotation = 0;\r\n\r\n\r\nwindow.addEventListener(\r\n \"wheel\",\r\n event => {\r\n\r\n if (\r\n window.innerWidth < 700\r\n ) return;\r\n\r\n\r\n \/*\r\n Only gently rotate the course\r\n orbit while hovering its section.\r\n *\/\r\n\r\n const courses =\r\n document.getElementById(\r\n \"courses\"\r\n );\r\n\r\n const rect =\r\n courses.getBoundingClientRect();\r\n\r\n\r\n if (\r\n rect.top <\r\n window.innerHeight &&\r\n rect.bottom > 0\r\n ) {\r\n\r\n targetOrbitRotation +=\r\n event.deltaY * .025;\r\n\r\n }\r\n\r\n },\r\n {\r\n passive: true\r\n }\r\n);\r\n\r\n\r\nfunction animateOrbit() {\r\n\r\n orbitRotation +=\r\n (\r\n targetOrbitRotation -\r\n orbitRotation\r\n ) * .06;\r\n\r\n\r\n orbitCards.style.setProperty(\r\n \"--orbit-rotation\",\r\n orbitRotation + \"deg\"\r\n );\r\n\r\n\r\n requestAnimationFrame(\r\n animateOrbit\r\n );\r\n\r\n}\r\n\r\nanimateOrbit();\r\n\r\n\r\n\/* =========================================================\r\n CUSTOM CURSOR\r\n========================================================= *\/\r\n\r\nconst cursor =\r\n document.querySelector(\r\n \".cursor\"\r\n );\r\n\r\nconst ring =\r\n document.querySelector(\r\n \".cursor-ring\"\r\n );\r\n\r\n\r\nlet mouseX = 0;\r\nlet mouseY = 0;\r\n\r\nlet ringX = 0;\r\nlet ringY = 0;\r\n\r\n\r\nwindow.addEventListener(\r\n \"pointermove\",\r\n event => {\r\n\r\n mouseX =\r\n event.clientX;\r\n\r\n mouseY =\r\n event.clientY;\r\n\r\n cursor.style.left =\r\n mouseX + \"px\";\r\n\r\n cursor.style.top =\r\n mouseY + \"px\";\r\n\r\n }\r\n);\r\n\r\n\r\nfunction animateCursor() {\r\n\r\n ringX +=\r\n (\r\n mouseX -\r\n ringX\r\n ) * .14;\r\n\r\n ringY +=\r\n (\r\n mouseY -\r\n ringY\r\n ) * .14;\r\n\r\n\r\n ring.style.left =\r\n ringX + \"px\";\r\n\r\n ring.style.top =\r\n ringY + \"px\";\r\n\r\n\r\n requestAnimationFrame(\r\n animateCursor\r\n );\r\n\r\n}\r\n\r\nanimateCursor();\r\n\r\n\r\n\/* =========================================================\r\n CURSOR HOVER\r\n========================================================= *\/\r\n\r\ndocument\r\n.querySelectorAll(\"a, button, .course-card\")\r\n.forEach(\r\n element => {\r\n\r\n element.addEventListener(\r\n \"mouseenter\",\r\n () => {\r\n\r\n ring.style.width =\r\n \"60px\";\r\n\r\n ring.style.height =\r\n \"60px\";\r\n\r\n ring.style.background =\r\n \"rgba(255,255,255,.08)\";\r\n\r\n }\r\n );\r\n\r\n\r\n element.addEventListener(\r\n \"mouseleave\",\r\n () => {\r\n\r\n ring.style.width =\r\n \"38px\";\r\n\r\n ring.style.height =\r\n \"38px\";\r\n\r\n ring.style.background =\r\n \"transparent\";\r\n\r\n }\r\n );\r\n\r\n }\r\n);\r\n\r\n<\/script>\r\n\r\n\r\n<!-- =========================================================\r\n CURSOR ELEMENTS\r\n========================================================= -->\r\n\r\n<div class=\"cursor\"><\/div>\r\n<div class=\"cursor-ring\"><\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-dc14eb3 e-con e-atomic-element e-flexbox-base e-d311b9e \" data-id=\"dc14eb3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dc14eb3\">\n \n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FLUENT \u2014 IELTS & Spoken English FLUENT. Courses Results Stories Book a Free Session IELTS + SPOKEN ENGLISH Speak Beyond […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":7,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/demo.marketingnexuss.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}