*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--transition:0.45s cubic-bezier(0.4,0,0.2,1)}
[data-theme="dark"]{--bg:#0a0a0a;--bg2:#111;--card:#151515;--border:rgba(255,255,255,0.06);--text:#F5F0E8;--text2:#bbb;--text3:#777;--red:#B63F37;--red-light:#FF4D5A;--red-bg:rgba(182,63,55,0.08);--dark:#1E1E1E;--lime:#DDEA88;--lime-bg:rgba(221,234,136,0.1);--shadow:rgba(0,0,0,0.5);--nav-bg:rgba(10,10,10,0.85);--glow:rgba(182,63,55,0.1);--avatar-bg:#1e1e1e}
[data-theme="light"]{--bg:#FAFAF8;--bg2:#F3F1EC;--card:#FFFFFF;--border:rgba(0,0,0,0.07);--text:#1E1E1E;--text2:#555;--text3:#999;--red:#B63F37;--red-light:#F04756;--red-bg:rgba(182,63,55,0.06);--dark:#1E1E1E;--lime:#DDEA88;--lime-bg:rgba(221,234,136,0.15);--shadow:rgba(0,0,0,0.06);--nav-bg:rgba(250,250,248,0.9);--glow:rgba(182,63,55,0.06);--avatar-bg:#f0ede6}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;transition:background var(--transition),color var(--transition)}
.gluten{font-family:'Gluten',cursive;color:var(--red);font-weight:600;letter-spacing:0}
.lime-text{color:var(--lime);font-family:'Gluten',cursive;font-weight:600}

/* ===== GAME XP BAR (sticky top) ===== */
.game-bar{position:fixed;top:0;left:0;right:0;z-index:200;padding:0;transform:translateY(-100%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.game-bar.show{transform:translateY(0)}
.game-bar-inner{display:flex;align-items:center;gap:14px;padding:8px 24px;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.gb-logo{font-family:'Gluten',cursive;font-size:.9rem;color:var(--red);flex-shrink:0}
.gb-level{padding:4px 14px;border-radius:8px;background:var(--red);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.5px;white-space:nowrap;display:flex;align-items:center;gap:4px;box-shadow:0 2px 0 rgba(180,30,45,.4)}
.gb-level .num{font-family:'Gluten',cursive;font-size:.85rem}
.gb-track{flex:1;height:6px;background:var(--border);border-radius:100px;overflow:hidden}
.gb-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--red),var(--lime));width:0;transition:width .8s cubic-bezier(.16,1,.3,1)}
.gb-xp{font-size:.72rem;font-weight:700;color:var(--text2);white-space:nowrap}
.gb-xp b{color:var(--red);font-family:'Gluten',cursive;font-size:.85rem}
.gb-cta{padding:6px 18px;background:var(--red);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:.72rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s}
.gb-cta:hover{background:var(--red-light)}

/* Level label per section */
.level-label{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:10px;background:var(--red-bg);border:1px solid rgba(182,63,55,.15);font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.level-label .ll-num{font-family:'Gluten',cursive;font-size:.9rem}

/* Level Up Toast */
.lu-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s}
.lu-overlay.show{opacity:1;pointer-events:auto}
.lu-box{background:var(--card);border:2px solid var(--red);border-radius:28px;padding:36px 52px;text-align:center;box-shadow:0 0 0 6px var(--red-bg),0 24px 60px var(--shadow);transform:scale(.7);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.lu-overlay.show .lu-box{transform:scale(1)}
.lu-emoji{font-size:3.5rem;animation:lu-pop .25s ease}
@keyframes lu-pop{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
.lu-title{font-size:.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:3px;font-weight:700;margin-top:8px}
.lu-name{font-family:'Gluten',cursive;font-size:2rem;color:var(--red);margin-top:4px}
.lu-sub{font-size:.82rem;color:var(--text2);margin-top:6px}

/* XP Float */
.xp-float{position:fixed;z-index:250;font-family:'Gluten',cursive;font-size:1.3rem;color:var(--lime);pointer-events:none;animation:xpUp 1.2s ease-out forwards;text-shadow:0 2px 10px rgba(0,0,0,.4)}
@keyframes xpUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-70px) scale(1.4)}}

/* Confetti */
#confetti{position:fixed;inset:0;z-index:250;pointer-events:none}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 48px;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(20px);background:var(--nav-bg);border-bottom:1px solid var(--border);transition:all var(--transition)}
nav.scrolled{padding:12px 48px}
nav.pushed{top:38px}
.logo-wrap{display:flex;align-items:flex-end;gap:2px}
.logo-svg{height:32px;width:auto}
.logo-svg .raw-blob{fill:var(--red)}
.logo-svg .eng-text{fill:var(--text);transition:fill var(--transition)}
.nav-right{display:flex;align-items:center;gap:24px}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{color:var(--text3);text-decoration:none;font-size:0.82rem;font-weight:500;letter-spacing:0.5px;transition:color 0.3s}
.nav-links a:hover{color:var(--red)}
.theme-toggle{width:50px;height:26px;border-radius:100px;background:var(--card);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;padding:0 3px;transition:all var(--transition)}
.theme-knob{width:20px;height:20px;border-radius:50%;background:var(--red);transition:transform var(--transition);display:flex;align-items:center;justify-content:center;font-size:10px}
[data-theme="light"] .theme-knob{transform:translateX(24px)}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;background:var(--red);color:#fff;border:none;border-radius:12px;font-family:inherit;font-size:0.82rem;font-weight:700;cursor:pointer;transition:all 0.3s;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:var(--red-light);transform:translateY(-2px);box-shadow:0 8px 25px rgba(182,63,55,0.3)}
.nav-cta-group{display:flex;align-items:center;gap:12px}
.nav-cta.nav-cta--student{background:var(--red)!important;color:#fff!important;border:none!important}
.nav-cta.nav-cta--student:hover{background:var(--red-light)!important}
.nav-cta.nav-cta--teacher{background:transparent!important;color:var(--text)!important;border:1.5px solid var(--text)!important;box-shadow:none!important}
.nav-cta.nav-cta--teacher:hover{background:var(--text)!important;color:var(--bg)!important;transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.15)!important}

/* ===== SECTIONS BASE ===== */
section{padding:110px 48px}
.section-tag{font-size:0.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:14px;font-weight:700}
.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.15;margin-bottom:20px;letter-spacing:-1px}
.section-desc{font-size:1rem;color:var(--text2);max-width:560px;line-height:1.7}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 65%);animation:pulse-glow 4s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{opacity:0.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.15)}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border:1px solid rgba(182,63,55,0.3);border-radius:12px;font-size:0.78rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:36px;position:relative;z-index:1;animation:fadeUp 0.8s ease-out 0.2s both}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero h1{font-size:clamp(3rem,7.5vw,6rem);font-weight:800;line-height:1.05;position:relative;z-index:1;animation:fadeUp 0.8s ease-out 0.4s both;letter-spacing:-2px}
.hero-sub{font-size:clamp(1rem,2vw,1.2rem);color:var(--text2);max-width:580px;margin:28px auto 0;position:relative;z-index:1;animation:fadeUp 0.8s ease-out 0.6s both;line-height:1.7}
.hero-cta{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;z-index:1;animation:fadeUp 0.8s ease-out 0.8s both}
.hero-buttons{display:flex;gap:14px}
.btn-primary{padding:16px 36px;background:var(--red);color:#fff;border:none;border-radius:14px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{background:var(--red-light);transform:translateY(-3px);box-shadow:0 12px 40px rgba(182,63,55,0.3)}
.btn-ghost{padding:16px 36px;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:14px;font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.3s;text-decoration:none}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-lime{padding:16px 36px;background:var(--lime);color:var(--dark);border:none;border-radius:14px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-lime:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(221,234,136,0.3)}
.social-proof{display:flex;align-items:center;gap:12px}
.sp-faces{display:flex}
.sp-face{width:30px;height:30px;border-radius:50%;background:var(--avatar-bg);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:0.8rem;margin-left:-8px;transition:all var(--transition)}
.sp-face:first-child{margin-left:0}
.sp-text{font-size:0.8rem;color:var(--text3)}.sp-text strong{color:var(--text2)}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text3);font-size:0.7rem;letter-spacing:2px;animation:fadeUp 0.8s ease-out 1.2s both;cursor:pointer}
.scroll-line{width:1px;height:36px;background:linear-gradient(to bottom,var(--red),transparent);animation:scrollDown 2s ease-in-out infinite}
@keyframes scrollDown{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Floating people */
.hero-avatars{position:absolute;inset:0;pointer-events:none;z-index:1}
.floating-person{position:absolute;display:flex;flex-direction:column;align-items:center;animation:float 6s ease-in-out infinite}
.floating-person:nth-child(2){animation-delay:-1.5s}.floating-person:nth-child(3){animation-delay:-3s}.floating-person:nth-child(4){animation-delay:-4.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.person-avatar{width:52px;height:52px;border-radius:50%;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid var(--border);box-shadow:0 8px 30px var(--shadow)}
.person-bubble{margin-top:8px;padding:5px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:0.7rem;color:var(--text2);white-space:nowrap;box-shadow:0 4px 16px var(--shadow)}
.fp1{top:22%;left:7%}.fp2{top:17%;right:9%}.fp3{top:55%;left:4%}.fp4{top:58%;right:5%}

/* Marquee */
.marquee-wrap{padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.marquee{display:flex;gap:50px;animation:marquee 35s linear infinite;width:max-content}
.marquee span{font-size:0.8rem;letter-spacing:3px;text-transform:uppercase;color:var(--text3);white-space:nowrap;display:flex;align-items:center;gap:50px}
.marquee span::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--red)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== TESTIMONIALS ===== */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:0 auto}
.testimonial{padding:30px;background:var(--card);border:1px solid var(--border);border-radius:20px;transition:all 0.4s;cursor:pointer}
.testimonial:hover{border-color:rgba(182,63,55,0.2);transform:translateY(-4px);box-shadow:0 16px 50px var(--shadow)}
.testimonial-emotion{font-size:1.8rem;margin-bottom:14px}
.testimonial-text{font-size:0.9rem;color:var(--text2);line-height:1.6;font-style:italic;margin-bottom:18px}
.testimonial-author{display:flex;align-items:center;gap:12px}
.ta-avatar{width:38px;height:38px;border-radius:50%;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:1rem}
.ta-name{font-size:0.82rem;font-weight:700}
.ta-level{font-size:0.7rem;color:var(--red);letter-spacing:1px;text-transform:uppercase;font-weight:600}

/* ===== PLATFORM GRID ===== */
.platform-section{background:var(--bg2);transition:background var(--transition)}
.platform-wrap{max-width:1100px;margin:0 auto}
.platform-header{text-align:center;margin-bottom:60px}
.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.platform-card{padding:34px 28px;background:var(--card);border:1px solid var(--border);border-radius:22px;transition:all 0.4s;position:relative;overflow:hidden;cursor:pointer}
.platform-card:hover{border-color:rgba(182,63,55,0.15);transform:translateY(-5px);box-shadow:0 20px 50px var(--shadow)}
.platform-card::after{content:'';position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle at top right,var(--red-bg) 0%,transparent 70%)}
.pc-icon{font-size:2rem;margin-bottom:16px}.pc-title{font-size:1.1rem;font-weight:800;margin-bottom:8px}.pc-desc{font-size:0.85rem;color:var(--text2);line-height:1.5;position:relative;z-index:1}
.pc-tag{display:inline-block;margin-top:14px;padding:5px 12px;background:var(--lime-bg);border:1px solid rgba(221,234,136,0.3);border-radius:100px;font-size:0.68rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--lime);position:relative;z-index:1}
[data-theme="light"] .pc-tag{color:#5A7A00}

/* ===== MINI QUIZ — DUOLINGO STYLE ===== */
.quiz-section{background:var(--bg2);transition:background var(--transition)}
.quiz-wrap{max-width:780px;margin:0 auto;text-align:center}

/* Intro screen */
.quiz-intro{background:var(--card);border:2px solid var(--border);border-radius:28px;padding:48px 36px;margin-top:30px;position:relative;overflow:hidden}
.quiz-intro::before{content:'';position:absolute;top:-80px;right:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--red-bg) 0%,transparent 70%);pointer-events:none}
.quiz-hero{position:relative;z-index:1}
.quiz-hero-title{font-family:'Gluten',cursive;font-size:2rem;color:var(--red);margin-bottom:10px;line-height:1.1}
.quiz-hero-sub{font-size:.95rem;color:var(--text2);max-width:460px;margin:0 auto 26px;line-height:1.6}
.quiz-hero-stats{display:flex;justify-content:center;gap:28px;margin-bottom:26px;flex-wrap:wrap}
.qhs{display:flex;flex-direction:column;align-items:center;gap:2px}
.qhs-num{font-family:'Gluten',cursive;font-size:1.6rem;color:var(--red)}
.qhs-lbl{font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-weight:700}
.quiz-start-btn{padding:18px 40px;background:var(--red);color:#fff;border:none;border-radius:14px;font-family:inherit;font-size:1.05rem;font-weight:800;cursor:pointer;transition:all .3s;letter-spacing:.3px;box-shadow:0 6px 0 #8f2129,0 12px 30px rgba(182,63,55,.25);display:inline-flex;align-items:center;gap:10px}
.quiz-start-btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 #8f2129,0 16px 40px rgba(182,63,55,.35)}
.quiz-start-btn:active{transform:translateY(3px);box-shadow:0 3px 0 #8f2129,0 6px 12px rgba(182,63,55,.2)}

/* Game frame */
.quiz-game{background:var(--card);border:2px solid var(--border);border-radius:28px;padding:32px 28px 28px;margin-top:30px;display:none;position:relative;overflow:hidden;min-height:560px}
.quiz-game.show{display:block;animation:qGameIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes qGameIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* HUD: hearts + progress bar */
.quiz-hud{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.quiz-hearts{display:flex;gap:4px;flex-shrink:0}
.qheart{width:22px;height:22px;position:relative;transition:all .3s}
.qheart svg{width:100%;height:100%;fill:var(--red);filter:drop-shadow(0 2px 0 #8f2129)}
.qheart.lost{animation:heartBreak .5s forwards}
.qheart.lost svg{fill:var(--border);filter:none}
@keyframes heartBreak{0%{transform:scale(1)}40%{transform:scale(1.4) rotate(-10deg)}100%{transform:scale(.8) rotate(5deg)}}
.quiz-bar-outer{flex:1;height:16px;background:var(--border);border-radius:100px;overflow:hidden;position:relative}
.quiz-bar-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--lime));border-radius:100px;width:0;transition:width .5s cubic-bezier(.16,1,.3,1);position:relative}
.quiz-bar-fill::after{content:'';position:absolute;top:2px;left:0;right:0;height:4px;background:rgba(255,255,255,.5);border-radius:100px}
.quiz-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.quiz-close:hover{color:var(--red);border-color:var(--red)}

/* Character + speech bubble */
.quiz-scene{display:flex;gap:20px;align-items:flex-start;margin-bottom:24px}
.quiz-char{width:110px;height:130px;flex-shrink:0;position:relative}
.quiz-char svg{width:100%;height:100%;overflow:visible}
.quiz-char.happy .qchar-body{animation:charJump .6s cubic-bezier(.16,1,.3,1)}
.quiz-char.sad .qchar-body{animation:charShake .4s ease}
.quiz-char.thinking .qchar-body{animation:charThink 2s ease-in-out infinite}
@keyframes charJump{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px) rotate(-3deg)}}
@keyframes charShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes charThink{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(2deg)}}

.quiz-bubble{flex:1;background:var(--bg2);border:2px solid var(--border);border-radius:20px;padding:18px 22px;position:relative;text-align:left;min-height:80px;display:flex;align-items:center}
.quiz-bubble::before{content:'';position:absolute;left:-10px;top:30px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:12px solid var(--border)}
.quiz-bubble::after{content:'';position:absolute;left:-7px;top:31px;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:11px solid var(--bg2)}
.qbubble-text{font-size:.95rem;color:var(--text);line-height:1.5;font-weight:500}

/* Question body */
.quiz-q-area{margin-bottom:22px;min-height:180px}
.quiz-q-label{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-weight:700;margin-bottom:14px;text-align:left}
.quiz-q-prompt{font-size:1.3rem;font-weight:800;margin-bottom:22px;letter-spacing:-.3px;line-height:1.35;text-align:left}
.quiz-q-prompt code{background:var(--red-bg);color:var(--red);padding:3px 12px;border-radius:8px;font-family:'Gluten',cursive;font-size:1.2rem;margin:0 2px;display:inline-block;min-width:40px;text-align:center;border:2px dashed var(--red)}

/* Multi-choice options */
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-opts.single{grid-template-columns:1fr}
.quiz-opt{padding:16px 18px;background:var(--card);border:2px solid var(--border);border-bottom-width:4px;border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:left;display:flex;align-items:center;gap:12px;position:relative;color:var(--text)}
.quiz-opt::before{content:attr(data-key);width:28px;height:28px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Gluten',cursive;font-size:.75rem;color:var(--text3);flex-shrink:0;transition:all .2s}
.quiz-opt:hover{border-color:var(--red);transform:translateY(-2px)}
.quiz-opt:hover::before{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.quiz-opt.selected{border-color:var(--red);background:var(--red-bg)}
.quiz-opt.selected::before{background:var(--red);color:#fff;border-color:var(--red)}
.quiz-opt.correct{border-color:var(--lime);background:var(--lime-bg);animation:optCorrect .4s}
.quiz-opt.correct::before{background:var(--lime);color:var(--dark);border-color:var(--lime)}
.quiz-opt.wrong{border-color:var(--red);background:var(--red-bg);animation:optWrong .4s}
[data-theme="dark"] .quiz-opt.correct{color:var(--lime)}
@keyframes optCorrect{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes optWrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* Word-bank (drag-tap sentence builder) */
.quiz-bank-target{min-height:70px;padding:14px 12px;background:var(--bg2);border:2px dashed var(--border);border-radius:14px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;margin-bottom:14px}
.quiz-bank-target.correct{border-color:var(--lime);background:var(--lime-bg);border-style:solid}
.quiz-bank-target.wrong{border-color:var(--red);background:var(--red-bg);border-style:solid;animation:optWrong .4s}
.quiz-bank{display:flex;flex-wrap:wrap;gap:8px;min-height:50px;justify-content:center}
.qword{padding:10px 16px;background:var(--card);border:2px solid var(--border);border-bottom-width:4px;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .15s;color:var(--text);user-select:none}
.qword:hover{transform:translateY(-2px);border-color:var(--red)}
.qword:active{transform:translateY(1px);border-bottom-width:2px}
.qword.placed{opacity:0;pointer-events:none}
.qword-placed{padding:10px 16px;background:var(--red-bg);border:2px solid var(--red);border-radius:12px;font-size:.95rem;font-weight:700;color:var(--red);cursor:pointer;transition:all .15s}
.qword-placed:hover{background:var(--red);color:#fff}

/* Listen task */
.quiz-listen{display:flex;flex-direction:column;align-items:center;gap:16px;padding:10px 0 20px}
.quiz-speaker{width:110px;height:110px;border-radius:50%;background:var(--red);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;box-shadow:0 8px 0 #8f2129,0 16px 40px rgba(182,63,55,.3)}
.quiz-speaker:hover{transform:translateY(-3px);box-shadow:0 11px 0 #8f2129,0 20px 50px rgba(182,63,55,.4)}
.quiz-speaker:active{transform:translateY(4px);box-shadow:0 4px 0 #8f2129,0 8px 20px rgba(182,63,55,.2)}
.quiz-speaker svg{width:48px;height:48px;fill:#fff}
.quiz-speaker.playing{animation:speakerPulse 1s ease-in-out infinite}
@keyframes speakerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.quiz-listen-hint{font-size:.78rem;color:var(--text3);letter-spacing:1px;text-transform:uppercase;font-weight:700}

/* Match pairs */
.quiz-match{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.qmatch-col{display:flex;flex-direction:column;gap:10px}
.qmatch-item{padding:14px 18px;background:var(--card);border:2px solid var(--border);border-bottom-width:4px;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:center;color:var(--text)}
.qmatch-item:hover{transform:translateY(-2px);border-color:var(--red)}
.qmatch-item.active{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.qmatch-item.matched{background:var(--lime-bg);border-color:var(--lime);color:var(--text);pointer-events:none;opacity:.7}
[data-theme="dark"] .qmatch-item.matched{color:var(--lime)}
.qmatch-item.gone{opacity:0;transform:scale(.85);pointer-events:none;transition:all .4s}

/* Footer action bar */
.quiz-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:22px;border-top:2px solid var(--border);margin-top:auto}
.quiz-skip{background:none;border:none;color:var(--text3);font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;padding:10px;letter-spacing:.5px;text-transform:uppercase}
.quiz-skip:hover{color:var(--text2)}
.quiz-check{padding:14px 32px;background:var(--border);color:var(--text3);border:none;border-radius:12px;font-family:inherit;font-size:.95rem;font-weight:800;cursor:not-allowed;transition:all .2s;letter-spacing:.5px;text-transform:uppercase}
.quiz-check.ready{background:var(--red);color:#fff;cursor:pointer;box-shadow:0 4px 0 #8f2129}
.quiz-check.ready:hover{transform:translateY(-2px);box-shadow:0 6px 0 #8f2129}
.quiz-check.ready:active{transform:translateY(2px);box-shadow:0 2px 0 #8f2129}

/* Feedback banner (bottom) */
.quiz-feedback{position:absolute;left:0;right:0;bottom:0;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;transform:translateY(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:5;border-radius:0 0 28px 28px}
.quiz-feedback.show{transform:translateY(0)}
.quiz-feedback.good{background:linear-gradient(var(--lime-bg),var(--lime-bg)),var(--card);border-top:3px solid var(--lime)}
.quiz-feedback.bad{background:linear-gradient(var(--red-bg),var(--red-bg)),var(--card);border-top:3px solid var(--red)}
.qf-left{display:flex;align-items:center;gap:14px}
.qf-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.quiz-feedback.good .qf-icon{background:var(--lime);color:var(--dark)}
.quiz-feedback.bad .qf-icon{background:var(--red);color:#fff}
.qf-text{text-align:left}
.qf-title{font-family:'Gluten',cursive;font-size:1.15rem;margin-bottom:2px}
.quiz-feedback.good .qf-title{color:#5A7A00}
.quiz-feedback.bad .qf-title{color:var(--red)}
[data-theme="dark"] .quiz-feedback.good .qf-title{color:var(--lime)}
.qf-correct{font-size:.82rem;color:var(--text2);font-weight:600}
.qf-correct b{color:var(--text)}
.qf-btn{padding:14px 28px;background:var(--lime);color:var(--dark);border:none;border-radius:12px;font-family:inherit;font-weight:800;cursor:pointer;font-size:.9rem;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;box-shadow:0 4px 0 #8fab3a}
.quiz-feedback.bad .qf-btn{background:var(--red);color:#fff;box-shadow:0 4px 0 #8f2129}
.qf-btn:hover{transform:translateY(-2px)}
.qf-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #8fab3a}
.quiz-feedback.bad .qf-btn:active{box-shadow:0 2px 0 #8f2129}

/* RESULT / RECOMMENDATIONS */
.quiz-result-screen{display:none;margin-top:30px}
.quiz-result-screen.show{display:block;animation:qGameIn .5s cubic-bezier(.16,1,.3,1)}
.qres-hero{background:linear-gradient(135deg,var(--card),var(--bg2));border:2px solid var(--border);border-radius:28px;padding:40px 36px;text-align:center;position:relative;overflow:hidden;margin-bottom:18px}
.qres-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,var(--red-bg) 0%,transparent 60%);pointer-events:none}
.qres-char{width:160px;height:180px;margin:0 auto 18px;position:relative;z-index:1}
.qres-char svg{width:100%;height:100%;overflow:visible}
.qres-char .qchar-body{animation:charJump 1.4s ease-in-out infinite}
.qres-label{font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:800;margin-bottom:8px;position:relative;z-index:1}
.qres-level{font-family:'Gluten',cursive;font-size:3rem;color:var(--red);line-height:1;margin-bottom:10px;position:relative;z-index:1}
.qres-tagline{font-size:1rem;color:var(--text2);max-width:440px;margin:0 auto 24px;line-height:1.5;position:relative;z-index:1}
.qres-stats{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;position:relative;z-index:1}
.qres-stat{padding:12px 22px;background:var(--card);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:100px}
.qres-stat-n{font-family:'Gluten',cursive;font-size:1.4rem;color:var(--red)}
.qres-stat-l{font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-weight:700}

/* Recommendation path */
.qres-section-title{font-family:'Gluten',cursive;font-size:1.6rem;color:var(--text);margin:28px 0 14px;text-align:center}
.qres-section-title .gluten{color:var(--red)}
.qres-roadmap{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px 26px}
.qres-step{display:flex;gap:16px;padding:18px 0;border-bottom:1px dashed var(--border);align-items:flex-start}
.qres-step:last-child{border-bottom:none}
.qres-step-num{width:44px;height:44px;border-radius:12px;background:var(--red-bg);color:var(--red);font-family:'Gluten',cursive;font-size:1.3rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--red);font-weight:700}
.qres-step.done .qres-step-num{background:var(--lime-bg);color:var(--lime);border-color:var(--lime)}
[data-theme="light"] .qres-step.done .qres-step-num{color:#5A7A00}
.qres-step-body{flex:1;text-align:left}
.qres-step-title{font-size:1.05rem;font-weight:800;margin-bottom:4px}
.qres-step-desc{font-size:.85rem;color:var(--text2);line-height:1.5}
.qres-step-tag{display:inline-block;margin-top:8px;padding:3px 10px;background:var(--bg2);border-radius:6px;font-size:.7rem;color:var(--text3);font-weight:700;letter-spacing:.5px}
.qres-step-tag.lime{background:var(--lime-bg);color:#5A7A00}
[data-theme="dark"] .qres-step-tag.lime{color:var(--lime)}

.qres-cta-box{background:linear-gradient(135deg,var(--red),#c82a37);border-radius:24px;padding:32px 28px;text-align:center;margin-top:22px;color:#fff;position:relative;overflow:hidden}
.qres-cta-box::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.qres-cta-title{font-family:'Gluten',cursive;font-size:1.8rem;margin-bottom:8px;position:relative;z-index:1}
.qres-cta-sub{font-size:.95rem;opacity:.9;margin-bottom:22px;max-width:420px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.qres-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.qres-cta-primary{padding:16px 32px;background:var(--lime);color:var(--dark);border:none;border-radius:14px;font-family:inherit;font-size:1rem;font-weight:800;cursor:pointer;transition:all .3s;box-shadow:0 5px 0 #8fab3a;display:inline-flex;align-items:center;gap:8px}
.qres-cta-primary:hover{transform:translateY(-3px);box-shadow:0 8px 0 #8fab3a}
.qres-cta-ghost{padding:16px 28px;background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:14px;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s;backdrop-filter:blur(6px)}
.qres-cta-ghost:hover{background:rgba(255,255,255,.25);border-color:#fff}

@media(max-width:640px){
  .quiz-opts{grid-template-columns:1fr}
  .quiz-match{grid-template-columns:1fr 1fr;gap:10px}
  .quiz-scene{flex-direction:column;align-items:center}
  .quiz-bubble::before,.quiz-bubble::after{display:none}
  .qres-level{font-size:2.2rem}
  .quiz-feedback{flex-direction:column;text-align:center}
}

/* ===== GAMIFICATION ===== */
.gamification-section{max-width:1100px;margin:0 auto}
.gamification-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.xp-card{padding:40px;background:var(--card);border:1px solid var(--border);border-radius:24px;transition:all 0.4s;cursor:pointer}
.xp-card:hover{border-color:rgba(182,63,55,0.15);transform:translateY(-3px);box-shadow:0 16px 50px var(--shadow)}
.xp-card.full{grid-column:span 2;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.xp-icon{font-size:2.4rem;margin-bottom:18px}.xp-title{font-size:1.2rem;font-weight:800;margin-bottom:8px}.xp-desc{font-size:0.88rem;color:var(--text2);line-height:1.5}

/* Levels */
.levels-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:1100px;margin:30px auto 0}
.level-card{padding:24px 16px;background:var(--card);border:1px solid var(--border);border-radius:18px;text-align:center;position:relative;overflow:hidden;transition:all 0.4s;cursor:pointer}
.level-card:hover{border-color:rgba(182,63,55,0.3);transform:translateY(-6px);box-shadow:0 20px 50px var(--shadow)}
.level-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0}
.level-card:nth-child(1)::before{background:#B63F37}.level-card:nth-child(2)::before{background:#EF505E}.level-card:nth-child(3)::before{background:#F06A52}.level-card:nth-child(4)::before{background:#D4A040}.level-card:nth-child(5)::before{background:#B8D050}.level-card:nth-child(6)::before{background:var(--lime)}
.level-name{font-family:'Gluten',cursive;font-size:1.1rem;color:var(--red);font-weight:600;margin-bottom:6px}
.level-desc-short{font-size:0.72rem;color:var(--text3);line-height:1.4}

/* ===== HOW IT WORKS ===== */
.hiw{max-width:1100px;margin:0 auto}
.hiw-header{text-align:center;margin-bottom:80px}
.timeline{display:flex;justify-content:space-between;position:relative;padding:0 20px}
.timeline::before{content:'';position:absolute;top:50px;left:80px;right:80px;height:2px;background:linear-gradient(90deg,var(--red),var(--lime),var(--red));opacity:0.25}
.tl-step{display:flex;flex-direction:column;align-items:center;text-align:center;width:22%;position:relative;z-index:1}
.tl-icon{width:100px;height:100px;border-radius:22px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin-bottom:24px;box-shadow:0 8px 30px var(--shadow);transition:all 0.4s}
.tl-step:hover .tl-icon{border-color:var(--red);transform:translateY(-6px) scale(1.05)}
.tl-num{font-size:0.65rem;letter-spacing:2px;color:var(--red);margin-bottom:6px;font-weight:700}
.tl-title{font-size:1rem;font-weight:800;margin-bottom:6px}
.tl-text{font-size:0.8rem;color:var(--text3);line-height:1.5}

/* ===== FORMATS BENTO ===== */
.formats{max-width:1100px;margin:0 auto}
.formats-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(180px,auto);gap:16px}
.fmt-card{background:var(--card);border:1px solid var(--border);border-radius:22px;transition:all 0.5s;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 26px;cursor:pointer}
.fmt-card:hover{border-color:rgba(182,63,55,0.2);transform:translateY(-5px);box-shadow:0 20px 60px var(--shadow)}
.fmt-card::before{content:'';position:absolute;inset:0;opacity:0.06;transition:opacity 0.5s}.fmt-card:hover::before{opacity:0.12}
.fmt-card--hero{grid-column:span 7;grid-row:span 2;padding:40px 36px}.fmt-card--hero::before{background:radial-gradient(circle at 70% 30%,var(--red) 0%,transparent 60%)}
.fmt-card--debate{grid-column:span 5}.fmt-card--debate::before{background:radial-gradient(circle at 30% 70%,var(--lime) 0%,transparent 55%)}
.fmt-card--wine{grid-column:span 5}.fmt-card--wine::before{background:radial-gradient(circle at 80% 20%,#c084fc 0%,transparent 55%)}
.fmt-card--niche{grid-column:span 4}.fmt-card--niche::before{background:radial-gradient(circle at 50%,var(--red) 0%,transparent 55%)}
.fmt-card--lessons{grid-column:span 4}.fmt-card--lessons::before{background:radial-gradient(circle at 20% 80%,var(--lime) 0%,transparent 55%)}
.fmt-card--events{grid-column:span 4}.fmt-card--events::before{background:radial-gradient(circle at 60% 20%,#f59e0b 0%,transparent 55%)}
.fmt-deco{position:absolute;font-size:5rem;opacity:0.12;transition:all 0.6s;pointer-events:none}.fmt-card:hover .fmt-deco{opacity:0.22;transform:scale(1.15) rotate(-5deg)}
.fmt-card--hero .fmt-deco{font-size:8rem;top:15px;right:25px}.fmt-card--debate .fmt-deco,.fmt-card--wine .fmt-deco,.fmt-card--niche .fmt-deco,.fmt-card--lessons .fmt-deco,.fmt-card--events .fmt-deco{top:-5px;right:15px}
.fmt-content{position:relative;z-index:2}
.fmt-tag{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:100px;font-size:0.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:var(--red-bg);color:var(--red)}
.fmt-tag--lime{background:var(--lime-bg);color:#6B8F00}[data-theme="dark"] .fmt-tag--lime{color:var(--lime)}
.fmt-tag--purple{background:rgba(192,132,252,0.1);color:#a855f7}
.fmt-tag--amber{background:rgba(245,158,11,0.1);color:#d97706}
.fmt-name{font-size:1.15rem;font-weight:800;margin-bottom:6px}.fmt-card--hero .fmt-name{font-size:1.6rem}
.fmt-desc{font-size:0.85rem;color:var(--text2);line-height:1.6}

/* ===== MEMBERSHIP ===== */
.membership-wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.membership-card{padding:44px;background:var(--card);border:1px solid rgba(182,63,55,0.15);border-radius:28px;position:relative;overflow:hidden}
.membership-card::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,var(--red-bg),transparent,var(--lime-bg),transparent);animation:slow-rotate 12s linear infinite}
@keyframes slow-rotate{100%{transform:rotate(360deg)}}
.membership-card>*{position:relative;z-index:1}
.membership-list{list-style:none;margin:24px 0 28px;display:flex;flex-direction:column;gap:12px}
.membership-list li{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:var(--text2)}
.ml-check{width:22px;height:22px;border-radius:8px;background:var(--lime-bg);border:1px solid rgba(221,234,136,0.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.65rem;color:var(--lime)}[data-theme="light"] .ml-check{color:#5A7A00}

/* ===== CTA FINAL ===== */
.cta-section{text-align:center;padding:140px 48px;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;bottom:-100px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 65%)}
.cta-title{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;line-height:1.1;margin-bottom:20px;position:relative;z-index:1;letter-spacing:-1px}
.cta-sub{font-size:1rem;color:var(--text2);margin-bottom:36px;position:relative;z-index:1}

/* ===== FOOTER ===== */
footer{padding:50px 48px 36px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.footer-logo{font-family:'Gluten',cursive;font-size:1.3rem;color:var(--red)}
.footer-links{display:flex;gap:20px;list-style:none}
.footer-links a{color:var(--text3);text-decoration:none;font-size:0.82rem;transition:color 0.3s}
.footer-links a:hover{color:var(--red)}
.footer-copy{font-size:0.72rem;color:var(--text3)}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:all 0.7s cubic-bezier(0.16,1,0.3,1)}.reveal.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:900px){section{padding:80px 24px}nav{padding:14px 20px}.nav-links{display:none}.nav-cta-group{gap:6px}.nav-cta{padding:8px 14px;font-size:0.74rem}.nav-cta--teacher{display:none}.testimonials{grid-template-columns:1fr}.platform-grid{grid-template-columns:1fr}.gamification-grid{grid-template-columns:1fr}.xp-card.full{grid-column:span 1;grid-template-columns:1fr}.levels-grid{grid-template-columns:repeat(3,1fr)}.timeline{flex-direction:column;gap:36px;align-items:center}.timeline::before{display:none}.tl-step{width:80%}.formats-bento{grid-template-columns:1fr}.fmt-card--hero,.fmt-card--debate,.fmt-card--wine,.fmt-card--niche,.fmt-card--lessons,.fmt-card--events{grid-column:span 1}.fmt-card--hero{grid-row:span 1}.membership-wrap{grid-template-columns:1fr}footer{flex-direction:column;gap:20px;text-align:center}.floating-person{display:none}.hero-buttons{flex-direction:column}}
@media(max-width:600px){.levels-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(2.5rem,10vw,3.5rem)}}