/* XplainMaths 2026 official neon identity on a LIGHT, learning-first website. */
:root{
 --ink:#14233f;--muted:#5d6a80;--purple:#6645e7;--mint:#1fb7c8;--cream:#fbfcff;--line:#e3eaf5;
 --neon-cyan:#08c8f9;--neon-blue:#3163f0;--neon-pink:#ec49b6;--neon-orange:#ffad31;
}
html{scroll-behavior:smooth}
body{background:#fcfdff;color:var(--ink)}
.site-header{background:rgba(255,255,255,.93)!important;color:#182342!important;box-shadow:0 1px 0 #e7eaf4,0 7px 36px #1f307110!important;border-bottom:1px solid #e9eef7}
.header-inner{min-height:76px}
.logo{gap:11px;color:#172141;font-size:22px;letter-spacing:-.055em}
.logo-symbol-official{width:49px!important;height:49px!important;flex:0 0 49px;border-radius:13px!important;background:#070d29!important;overflow:hidden;border:1px solid #dce5f7;box-shadow:0 4px 12px #0b214523!important;transform:none!important}
.logo-symbol-official img{height:100%;width:100%;object-fit:cover;display:block}
.logo-em{background:linear-gradient(110deg,#106bfa,#a33bea 44%,#ed379e 68%,#ff971d);color:transparent!important;-webkit-background-clip:text;background-clip:text}
.desktop-links{color:#4b5875!important;font-weight:700}
.desktop-links a:hover{color:#6639d5}
.button-light,.header-join{background:#171e43!important;color:white!important;border:1px solid #171e43!important;box-shadow:0 6px 17px #2c39842b}
.header-mobile-join{color:#6938d7!important}
.mobile-menu-button span{background:#28334f!important}
.mobile-links:not([hidden]){background:#ffffff!important;color:#25304d!important;border-top:1px solid #ecedf5;box-shadow:0 16px 23px #233a6815}
.button{transition:transform .25s,box-shadow .25s,background .25s}
.button:hover{transform:translateY(-2px)}
.button-primary{background:linear-gradient(108deg,#386bea,#8747df 56%,#ce4bba)!important;color:white!important;box-shadow:0 12px 32px #6f5add36;border:0!important}
.button-ghost{background:white!important;color:#28395b!important;border:1px solid #d8deee!important;box-shadow:0 8px 24px #16366b11}
.hero{color:#1c2744!important;background:radial-gradient(ellipse at 92% 12%,#e4ddffbf,transparent 47%),radial-gradient(ellipse at 0% 67%,#daf6ffbd,transparent 45%),linear-gradient(180deg,#fff,#f7f9ff)!important}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#7e9bea1e .75px,transparent .75px);background-size:32px 32px;mask-image:linear-gradient(180deg,#0009,transparent 95%)}
.hero-inner{position:relative;min-height:auto!important;padding-block:60px 20px!important;gap:47px}
.hero h1{color:#142444!important;font-size:clamp(54px,6.4vw,91px)!important;line-height:1.03!important;letter-spacing:-.075em}
.gradient-text{background:linear-gradient(110deg,#157bf5 0%,#7653f0 38%,#eb51a5 73%,#ff9a29 100%)!important;color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;text-shadow:none!important}
.hero-copy>p{color:#54657f!important;font-size:clamp(16px,1.5vw,19px)!important;line-height:1.7}
.hero-copy>p strong{color:#222e56!important}
.eyebrow{color:#6d42ce!important;background:#ffffffb8!important;border:1px solid #e4d6fa!important;box-shadow:0 8px 30px #bcb4f41b}
.eyebrow-pulse{background:#14bec9!important}
.hero-proof{color:#66728a!important}
.hero-glow{opacity:.20!important}.hero-glow-one{background:#a476ed!important}.hero-glow-two{background:#37c9e8!important}
.world-atmosphere span{color:#6c4de9!important;opacity:.20!important}
.dashboard-preview{transform:rotate(1.5deg);background:white!important;border:7px solid #ffffffeb!important;box-shadow:0 30px 68px #1c3f812e,0 0 0 1px #e1e5f3!important;border-radius:25px}
.dashboard-head{background:#fff!important}.dashboard-head>span:first-child,.device-brand{display:flex;align-items:center;gap:7px}
.dashboard-official-logo,.device-official-logo{object-fit:cover;border-radius:7px;border:1px solid #293c7a3d}
.dashboard-demo{background:#f3efff;color:#6548c6;padding:7px 9px;border-radius:20px}
.float-pill{background:#fff!important;color:#263956!important;border:1px solid #e5eaf5;box-shadow:0 12px 27px #284b7d18}
.hero-strip{color:#617187!important;border-top-color:#dce3f2!important;padding-top:14px!important}
.official-banner-holder{display:flex;align-items:center;gap:15px;padding-bottom:22px;position:relative;z-index:2;max-width:1170px}
.official-banner-shell{width:min(445px,71vw);overflow:hidden;background:#060c28;border:5px solid #fff;border-radius:16px;box-shadow:0 10px 25px #13315a25;aspect-ratio:3 / 1}
.official-banner{display:block;width:100%;height:100%;object-fit:contain}
.banner-caption{font-weight:900;letter-spacing:.16em;color:#7b89a7;font-size:9px;white-space:nowrap}
.banner-caption span{color:#e64da9;font-size:16px}
/* Editorial, cinematic, scroll-driven tutor – LIGHT throughout, with vibrant glow accents. */
.story-scroll{background:linear-gradient(175deg,#f3f7ff 0%,#fefcff 67%,#f3f8ff 100%)!important;color:#1a2946!important}
.story-sticky{background:radial-gradient(ellipse at calc(62% + var(--story-x,0px)) 45%,#c6eaffc7,transparent 38%),radial-gradient(ellipse at 14% 56%,#e9dffed0,transparent 41%),linear-gradient(155deg,#f4f7ff,#fff 53%,#f8f4ff)!important}
.story-sticky::after{background:linear-gradient(90deg,#ffffff26,transparent 65%)!important}
.aura-orbit{border-color:#8f8cf736!important}.aura-two{border-color:#1acbdf16!important}.aura-spark{color:#aa5ce8!important;filter:drop-shadow(0 0 14px #dfb7ff99)!important}
.story-overline,.story-bottom{color:#657493!important}.story-progress{background:#dde3f4!important}.story-progress>span{background:linear-gradient(90deg,#16c7e8,#8752ee,#f053a3)!important}
.story-chapter{color:#7354d4!important}
.story-beat h2{color:#142545!important}.story-beat h2 em{background:linear-gradient(115deg,#1c90f0,#8450d7,#f15a9f);background-clip:text;-webkit-background-clip:text;color:transparent!important}.story-beat h2 em span{color:inherit!important}
.story-beat p{color:#5d6c83!important}
.story-device{background:#fff!important;color:#1d2944!important;border:7px solid #fff!important;box-shadow:0 30px 70px #25508030,0 0 0 1px #dee5f4!important}
.story-device::before{border-color:#7e72bd22!important}
.chat-message.from-student .chat-body{background:#293b73!important;color:white!important}
.chat-message.from-tutor .chat-body{background:#f0eaff!important;color:#27334b!important}
.learning-bridge{background:linear-gradient(110deg,#eaf9ff,#f2edff 55%,#fff6f7)!important;color:#172849!important;border-block:1px solid #e6e8f8;padding:27px 0!important}
.bridge-kicker{color:#5d4bc2!important}.bridge-inner h2{color:#1c2a4d!important}.bridge-inner h2 em{color:#9854d4!important}.bridge-inner p{color:#586683!important}.bridge-icon{color:#db4cbf!important}.bridge-link{background:#172447!important;color:white!important;box-shadow:0 8px 25px #2d39622e}
/* Theme collection remains the colourful showcase, framed by light site chrome. */
.worlds-section{background:linear-gradient(180deg,#fff,#f4f8ff 97%)!important;color:#18294a!important}
.worlds-header h2{color:#18294a!important}.worlds-header h2 span{color:#8a48df!important}
.bright-overline{color:#7956d1!important}.worlds-intro p{color:#5e6d85!important}.worlds-intro a{color:#6041c8!important}
.worlds-swipe-hint{color:#667491!important}.worlds-footer{color:#68758c!important}.equal-symbol{color:#7850d9!important}
.world-card{box-shadow:0 12px 28px #243d6a20;border:3px solid white!important}
/* Quiz is one focussed full-screen scene; default palette is also bright. */
.roulette-section{background:linear-gradient(180deg,#f3f7ff,#fcfdff 90%)!important}
.game-intro h2{color:#162547!important}.game-intro h2 em{color:#874add!important}.game-overline{color:#7951d2!important}.game-intro p{color:#53627d!important}
.game-arena{--game-base:#eef3ff;--game-pop:#9374f5;--game-ink:#18294b;background:radial-gradient(ellipse at 9% 22%,color-mix(in srgb,var(--game-pop),transparent 84%),transparent 47%),radial-gradient(ellipse at 93% 85%,color-mix(in srgb,var(--game-pop),transparent 86%),transparent 44%),linear-gradient(137deg,var(--game-base),color-mix(in srgb,var(--game-base),white 45%))!important;color:var(--game-ink);transition:background 1.25s ease}
.game-arena:not(.has-world)::before{background-image:radial-gradient(#6488cc33 1px,transparent 1px);opacity:.7}
.game-topline,.game-footnote{color:var(--game-ink)!important}.game-footnote{opacity:.85}
.game-top-brand strong{color:var(--game-ink)}.game-top-brand small{color:color-mix(in srgb,var(--game-ink),transparent 30%)}
.game-logo-official{overflow:hidden;display:grid;place-items:center;background:#080d29!important;border:2px solid color-mix(in srgb,var(--game-pop),white 50%)!important;box-shadow:0 8px 25px #151b4140!important}
.game-logo-official img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .7s,transform .7s}
.game-arena.has-world .game-logo-official img{filter:hue-rotate(14deg) saturate(1.2);transform:scale(1.04)}
.game-arena[data-world='jungle'] .game-logo-official img{filter:hue-rotate(120deg) saturate(1.14)}
.game-arena[data-world='ocean'] .game-logo-official img{filter:hue-rotate(45deg) saturate(1.2)}
.game-arena[data-world='frozen'] .game-logo-official img{filter:hue-rotate(10deg) saturate(.88)}
.game-arena[data-world='volcano'] .game-logo-official img{filter:hue-rotate(250deg) saturate(1.4)}
.game-arena[data-world='arcade'] .game-logo-official img{filter:saturate(1.65)}
.game-arena[data-world='candy'] .game-logo-official img{filter:hue-rotate(285deg) saturate(1.2)}
.game-arena[data-world='galaxy'] .game-logo-official img{filter:hue-rotate(215deg)}
.game-arena .game-progress-zone{color:var(--game-ink)}
.game-learning-panel,.game-wheel-panel{background:#ffffffea!important;border:1px solid #e1e7f3!important;box-shadow:0 20px 40px #28448017!important}
.game-wheel-panel .wheel-hub img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.game-wheel-panel .wheel-hub{overflow:hidden;background:#090d29!important;padding:0!important}
.wheel-panel-head h3{color:#142546}.game-panel-kicker{color:#5948c0}
/* Matching brighter opt-in section, privacy and thank-you pages. */
.join-section{background:linear-gradient(180deg,#fbfcff 0%,#f0f5ff 100%)!important;color:#1a2b4e!important}
.join-panel{background:radial-gradient(circle at 90% 16%,#fad9edba,transparent 49%),radial-gradient(circle at 2% 0,#cef8ff9c,transparent 44%),linear-gradient(145deg,#ffffff,#f7f5ff)!important;color:#1b294b!important;border:1px solid #e1e7f4!important;box-shadow:0 27px 60px #182f6a15!important}
.join-kicker{color:#7950d6!important}.join-panel h2{color:#1a294d!important}.join-panel h2 span{background:linear-gradient(100deg,#268eef,#8759eb,#ee5ba2);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.join-content>p{color:#5e6881!important}.join-fine{color:#68758d!important}.join-fine a{color:#7752cb!important}
.join-star{color:#a85af5!important;opacity:.33}
.signup-row{background:#fff!important;border:1px solid #d7dded!important;box-shadow:0 10px 30px #324a7416}
.signup-row input{color:#263756!important;background:white!important}.signup-row input::placeholder{color:#9aa5ba!important}
.signup-row button{color:#fff!important;background:linear-gradient(110deg,#2867df,#8b44df 68%,#d847a5)!important}
.consent-row{color:#475676!important}.consent-row input{accent-color:#7352e8}
.faq-section{background:#fff!important}.faq-grid h2{color:#19284a!important}.faq-grid h2 em{color:#9652de!important}
.site-footer{background:#f4f7fc!important;color:#223357!important;border-top:1px solid #e2e8f3!important}
.footer-content p,.footer-links,.footer-copyright{color:#68748c!important}
.footer-links a:hover{color:#7952d8}
/* Interior pages receive exactly the same airy treatment. */
.interior-hero{background:radial-gradient(ellipse at 84% 8%,#f8ddf6a8,transparent 45%),radial-gradient(ellipse at 0 80%,#d7f6ffc7,transparent 47%),linear-gradient(130deg,#fff,#f6f7ff)!important;color:#1e2a48!important}
.interior-kicker{color:#7952d8!important}.interior-kicker-dot{background:#23c5d8!important}
.interior-hero-copy h1{color:#192b4b!important}.interior-hero-copy h1 span{color:#9652db!important}.interior-hero-copy>p{color:#56657f!important}
.interior-lesson-preview,.privacy-sidecard{background:white!important;border:1px solid #e4e9f4!important;box-shadow:0 15px 45px #28457820!important}
.interior-success-check{background:#def8ec;color:#20825d}
.interior-follow-up,.legal-section{background:#fff!important}
.legal-article{color:#465570}.legal-article>h2{color:#192c4a}
@media(max-width:900px){.hero-inner{gap:20px!important}.official-banner-shell{width:min(420px,75vw)}.story-device{transform:translateY(var(--device-shift,0px)) scale(var(--device-scale,1))!important}}
@media(max-width:760px){
 .header-inner{min-height:68px}.logo{font-size:18px!important}.logo-symbol-official{width:40px!important;height:40px!important;flex-basis:40px}.header-mobile-join{font-size:12px!important}
 .hero-inner{padding-block:45px 16px!important}.hero h1{font-size:clamp(45px,11.5vw,68px)!important}.hero-copy>p{font-size:16px!important}
 .hero-preview{padding:12px 0!important}.dashboard-preview{transform:rotate(.6deg)!important}
 .official-banner-holder{display:block;padding-block:1px 14px}.official-banner-shell{width:100%;max-width:480px;aspect-ratio:3 / 1}.banner-caption{display:block;font-size:8px;margin-top:7px}
 .story-device{transform:translateY(var(--device-shift,0px)) scale(var(--device-scale,1))!important}
 .learning-bridge{padding:23px 0!important}
 .join-panel{padding:44px 17px!important}
 .game-topline{align-items:flex-start}.game-top-brand{gap:7px}.game-logo-official{flex-basis:46px;width:46px;height:46px}
}
@media(max-width:390px){.logo{font-size:17px!important}.logo-symbol-official{width:37px!important;height:37px!important;flex-basis:37px}.banner-caption{font-size:7px}.float-pill{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-preview,.story-device{will-change:auto!important}}