/* ─── RESET & TOKENS ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 :root{
  --green:#00b4ff; --green-d:#008ecc; --green-l:#e0f4ff;
  --blue:#00b4ff;  --blue-d:#008ecc;
  --orange:#ff9600;--purple:#1a365d;
  --bg:#ffffff; --bg2:#f7fafc; --bg3:#edf2f7;
  --card:rgba(255,255,255,0.9);
  --text:#0a2e5c; --muted:#4a5568; --muted2:#718096;
  --border:rgba(0, 180, 255, 0.12);
  --glow:rgba(0, 180, 255, 0.25);
  --r:16px; --r-lg:24px;
  --font-head:'Montserrat',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
}
  --green:#58cc02; --green-d:#46a302; --green-l:#7cdf37;
  --blue:#1cb0f6;  --blue-d:#0e8dd0;
  --orange:#ff9600;--purple:#ce82ff;
  --bg:#0b0e14; --bg2:#0e1410; --bg3:#141e12;
  --card:rgba(255,255,255,0.9);
  --text:#eef2e8; --muted:#7a9070; --muted2:#3d5238;
  --border:rgba(88,204,2,0.12);
  --glow:rgba(88,204,2,0.25);
  --r:16px; --r-lg:24px;
  --font-head:'Inter',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
}

html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:#0a2e5c;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}

/* Grain overlay */
body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:1000;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── NAV ──────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 48px;
  transition:background .4s,backdrop-filter .4s;
}
nav.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-mark{width:36px;height:36px}
.nav-logo-text{font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--green);letter-spacing:.5px}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{color:#4a5568;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#0a2e5c}
.nav-cta{
  padding:9px 22px;
  background:var(--green);color:#0a2e5c;
  font-family:var(--font-body);font-size:14px;font-weight:600;
  border-radius:99px;text-decoration:none;
  transition:all .2s;
  box-shadow:0 0 20px rgba(88,204,2,.3);
}
.nav-cta:hover{background:var(--green-l);transform:translateY(-1px);box-shadow:0 4px 24px rgba(88,204,2,.45)}
@media(max-width:768px){
  nav{padding:14px 20px; flex-wrap: wrap; gap: 10px; justify-content: center;}
  .nav-links{display:none}
}

/* ─── HERO ─────────────────────────────────────── */
#hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:100px 24px 60px;
}

/* Animated mesh background */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(88,204,2,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(28,176,246,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(206,130,255,0.04) 0%, transparent 50%);
}

/* Grid lines */
.hero-grid{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(88,204,2,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,204,2,0.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 75%);
}

.hero-lq-container {
  margin: 10px 0 20px;
  display: flex;
  justify-content: center;
}
.lq-svg {
  width: 220px;
  height: 180px;
  filter: drop-shadow(0 15px 25px rgba(10, 46, 92, 0.15));
}
.path-l {
  fill: none;
  stroke: #0a2e5c;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLQ 1.5s ease-out forwards;
}
.path-q-circle {
  fill: none;
  stroke: #0a2e5c;
  stroke-width: 14;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawLQ 1.5s ease-out 0.3s forwards;
}
.path-connector {
  fill: none;
  stroke: #0a2e5c;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLQ 1s ease-out 1s forwards;
}
.path-star {
  fill: var(--orange);
  transform-origin: center;
  transform: scale(0);
  animation: popStar 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}
@keyframes drawLQ {
  to { stroke-dashoffset: 0; }
}
@keyframes popStar {
  to { transform: scale(1); }
}

.hero-inner{
  position:relative;z-index:2;
  max-width:900px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:28px;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;
  background:rgba(88,204,2,0.1);
  border:1px solid rgba(88,204,2,0.25);
  border-radius:99px;
  font-size:13px;color:#0a2e5c;font-weight:700;
  animation:fadeSlideDown .8s ease both;
}
.hero-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(88,204,2,.4)}50%{opacity:.8;box-shadow:0 0 0 6px rgba(88,204,2,0)}}

h1{
  font-family:var(--font-head);
  font-size:clamp(42px,8vw,88px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  animation:fadeSlideUp .9s .1s ease both;
}
.h1-line1{color:#0a2e5c}
.h1-accent{
  color:var(--green);
  position:relative;display:inline-block;
}
.h1-accent::after{
  content:'';
  position:absolute;bottom:-4px;left:0;right:0;
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  transform:scaleX(0);transform-origin:left;
  animation:underlineIn 1s .8s ease forwards;
}
@keyframes underlineIn{to{transform:scaleX(1)}}

.hero-sub{
  font-size:18px;color:#4a5568;max-width:560px;
  font-weight:300;letter-spacing:.01em;
  animation:fadeSlideUp .9s .2s ease both;
}

.hero-ctas{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  animation:fadeSlideUp .9s .3s ease both;
}
.btn-primary{
  padding:15px 32px;
  background:var(--green);color:#0a2e5c;
  font-family:var(--font-body);font-size:16px;font-weight:600;
  border-radius:99px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 0 32px rgba(88,204,2,.35);
  transition:all .2s;
}
.btn-primary:hover{background:var(--green-l);transform:translateY(-2px);box-shadow:0 8px 40px rgba(88,204,2,.5)}
.btn-secondary{
  padding:15px 32px;
  background:#f7fafc;
  border:1px solid #d1e9ff;
  color:#0a2e5c;
  font-family:var(--font-body);font-size:16px;font-weight:500;
  border-radius:99px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  backdrop-filter:blur(8px);
  transition:all .2s;
}
.btn-secondary:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}

/* Floating game cards */
.hero-float{
  position:relative;width:100%;max-width:720px;
  height:320px;margin-top:16px;
  animation:fadeSlideUp .9s .5s ease both;
}
.float-card{
  position:absolute;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  padding:16px 20px;
}

/* Quiz card - center */
.fc-quiz{
  left:50%;transform:translateX(-50%);
  top:0;width:320px;
  animation:floatY 6s ease-in-out infinite;
}
.fc-quiz-q{font-size:14px;font-weight:600;color:#0a2e5c;margin-bottom:12px}
.fc-quiz-opts{display:flex;flex-direction:column;gap:7px}
.fc-opt{
  padding:9px 13px;border-radius:10px;font-size:13px;
  border:1px solid var(--border);color:#4a5568;
  display:flex;align-items:center;gap:8px;
  transition:all .2s;
}
.fc-opt.correct{background:rgba(88,204,2,.15);border-color:var(--green);color:#0a2e5c}
.fc-opt.correct .fc-letter{background:var(--green);color:#0a2e5c}
.fc-letter{
  width:22px;height:22px;border-radius:6px;
  background:#f7fafc;
  font-size:11px;font-weight:700;color:#4a5568;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* XP card - right */
.fc-xp{
  right:0;top:60px;width:150px;
  animation:floatY 5s 1s ease-in-out infinite;
  text-align:center;
}
.fc-xp-num{font-family:var(--font-head);font-size:36px;font-weight:800;color:var(--green);line-height:1}
.fc-xp-label{font-size:11px;color:#4a5568;text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.fc-xp-bar{height:4px;background:rgba(88,204,2,.15);border-radius:2px;margin-top:10px;overflow:hidden}
.fc-xp-fill{height:100%;width:68%;background:var(--green);border-radius:2px}

/* Streak card - left */
.fc-streak{
  left:0;top:80px;width:150px;
  animation:floatY 7s 2s ease-in-out infinite;
  text-align:center;
}
.fc-streak-icon{font-size:32px;line-height:1}
.fc-streak-num{font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--orange);margin-top:4px}
.fc-streak-label{font-size:11px;color:#4a5568;text-transform:uppercase;letter-spacing:1px}

/* Achievement card - bottom */
.fc-ach{
  left:50%;transform:translateX(-50%);
  bottom:0;width:260px;
  animation:floatY 8s 0.5s ease-in-out infinite;
}
.fc-ach-inner{display:flex;align-items:center;gap:12px}
.fc-ach-icon{font-size:28px}
.fc-ach-text{flex:1}
.fc-ach-title{font-size:12px;font-weight:700;color:#0a2e5c}
.fc-ach-sub{font-size:11px;color:#4a5568}
.fc-ach-new{
  font-size:9px;font-weight:700;padding:2px 7px;
  border-radius:99px;
  background:rgba(206,130,255,.15);
  border:1px solid rgba(206,130,255,.3);
  color:var(--purple);letter-spacing:.5px;
}

@keyframes floatY{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@keyframes floatYL{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatYR{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fc-xp{animation:floatYR 5s 1s ease-in-out infinite}
.fc-streak{animation:floatYL 7s 2s ease-in-out infinite}

/* ─── STATS ─────────────────────────────────────── */
#stats{
  padding:60px 24px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stats-grid{
  max-width:900px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
}
.stat-item{
  text-align:center;padding:28px 16px;
  border-right:1px solid var(--border);
}
.stat-item:last-child{border-right:none}
.stat-num{
  font-family:var(--font-head);
  font-size:48px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--green),var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-lbl{font-size:13px;color:#4a5568;margin-top:6px;font-weight:400}
@media(max-width:600px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-item{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
  .stat-item:nth-child(2n){border-right:none}
}

/* ─── SECTIONS SHARED ─────────────────────────── */
section{padding:100px 24px}
.section-label{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--green);margin-bottom:16px;
}
.section-title{
  font-family:var(--font-head);
  font-size:clamp(32px,5vw,52px);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
  color:#0a2e5c;margin-bottom:20px;
}
.section-sub{
  font-size:17px;color:#4a5568;
  max-width:520px;font-weight:300;line-height:1.7;
}
.text-green{color:var(--green)}
.text-blue{color:var(--blue)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ─── HOW IT WORKS ─────────────────────────────── */
#how{background:#f7fafc;position:relative;overflow:hidden}
#how::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
}

.how-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
@media(max-width:768px){.how-inner{grid-template-columns:1fr;gap:48px}}

.how-steps{display:flex;flex-direction:column;gap:0}
.how-step{
  display:flex;gap:20px;
  padding:24px 0;
  border-bottom:1px solid rgba(88,204,2,0.08);
  cursor:pointer;
  transition:all .2s;
}
.how-step:last-child{border-bottom:none}
.how-step.active .step-num{background:var(--green);color:#0a2e5c;box-shadow:0 0 20px rgba(88,204,2,.4)}
.how-step.active .step-title{color:#0a2e5c}

.step-num{
  width:40px;height:40px;border-radius:12px;
  background:rgba(88,204,2,0.1);
  border:1px solid rgba(88,204,2,0.2);
  font-family:var(--font-head);font-size:16px;font-weight:800;
  color:#4a5568;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .3s;
}
.step-title{font-family:var(--font-head);font-size:17px;font-weight:700;color:#0a2e5c;margin-bottom:5px;transition:color .3s}
.step-desc{font-size:14px;color:#4a5568;line-height:1.6}

/* How visual */
.how-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:400px;
}
.how-screen{
  width:100%;max-width:340px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.5);
  transition:all .5s ease;
}
.how-screen-bar{
  display:flex;align-items:center;gap:6px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.2);
}
.hsb-dot{width:8px;height:8px;border-radius:50%}
.how-screen-body{padding:20px}

/* Step 1 - Level map */
.map-preview{display:flex;flex-direction:column;gap:12px;align-items:center}
.map-node-p{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  border:3px solid;position:relative;
}
.mp-done{background:linear-gradient(135deg,#58cc02,#46a302);border-color:#46a302;box-shadow:0 4px 16px rgba(88,204,2,.4)}
.mp-done::after{content:'⭐';position:absolute;top:-8px;right:-6px;font-size:13px}
.mp-now{background:linear-gradient(135deg,#1cb0f6,#0e8dd0);border-color:#1cb0f6;animation:mapPulse2 2s infinite}
.mp-lock{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);opacity:.4;font-size:18px}
@keyframes mapPulse2{0%,100%{box-shadow:0 0 0 0 rgba(28,176,246,.5)}50%{box-shadow:0 0 0 8px rgba(28,176,246,0)}}
.map-path{width:2px;height:24px;background:rgba(88,204,2,.3);border-radius:1px}
.map-path.done{background:var(--green)}

/* Step 2 - Quiz */
.quiz-preview .fp-q{font-size:13px;font-weight:600;color:#0a2e5c;margin-bottom:12px;line-height:1.4}
.fp-timer{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--green);
  margin:0 auto 14px;
}
.fp-opts{display:flex;flex-direction:column;gap:7px}
.fp-opt{
  padding:9px 12px;border-radius:9px;font-size:12px;
  border:1px solid rgba(255,255,255,0.06);color:#4a5568;
  display:flex;align-items:center;gap:8px;
}
.fp-opt.c{background:rgba(88,204,2,.12);border-color:var(--green);color:#0a2e5c}
.fp-opt.w{background:rgba(255,75,75,.12);border-color:rgba(255,75,75,.4);color:rgba(255,100,100,1)}
.fp-letter{width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.06);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fp-opt.c .fp-letter{background:var(--green);color:#0a2e5c}

/* Step 3 - Results */
.results-preview{text-align:center}
.rp-icon{font-size:48px;margin-bottom:8px}
.rp-title{font-family:var(--font-head);font-size:18px;font-weight:800;color:#0a2e5c;margin-bottom:4px}
.rp-sub{font-size:12px;color:#4a5568;margin-bottom:16px}
.rp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.rp-stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:10px 6px;text-align:center}
.rp-stat-n{font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--green)}
.rp-stat-l{font-size:10px;color:#4a5568}
.rp-bar-wrap{text-align:left}
.rp-bar-lbl{font-size:11px;color:#4a5568;margin-bottom:5px}
.rp-bar-track{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.rp-bar-fill{height:100%;border-radius:4px;background:var(--green)}

/* Step 4 - Teacher */
.teacher-preview-container{display:flex;flex-direction:column;gap:12px}
.tp-box{background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:12px; padding:12px;}
.tp-code-box{
  background:rgba(88,204,2,.08);border:1px dashed rgba(88,204,2,.3);
  border-radius:10px;padding:12px;text-align:center;margin-bottom:12px;
}
.tp-code{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--green);letter-spacing:6px}
.tp-label{font-size:10px;color:#4a5568;margin-top:4px;letter-spacing:.5px}
.tp-students{display:flex;flex-direction:column;gap:6px}
.tp-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;
}
.tp-avatar{font-size:18px}
.tp-name{font-size:12px;font-weight:600;color:#0a2e5c;flex:1}
.tp-xp{font-size:11px;color:var(--green);font-weight:700}
.tp-bar-sm{height:3px;background:rgba(255,255,255,.06);border-radius:2px;width:50px;overflow:hidden}
.tp-bar-fill{height:100%;background:var(--green);border-radius:2px}

.shio-chat-p{background:rgba(255,150,0,0.05); border:1px solid rgba(255,150,0,0.2); border-radius:12px; padding:12px;}
.shio-chat-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;border-bottom:1px solid rgba(255,150,0,0.1);padding-bottom:8px}
.shio-chat-i{width:20px;height:20px;background:#ff9600;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:3px}
.shio-chat-i img{width:100%;height:100%;object-fit:contain}
.shio-chat-t{font-size:11px;font-weight:700;color:#ff9600}
.shio-msg-p{font-size:10px;line-height:1.4;margin-bottom:8px;padding:6px 8px;border-radius:8px}
.shio-msg-p.u{background:rgba(0,180,255,0.05);color:#0a2e5c;text-align:right;margin-left:20px}
.shio-msg-p.b{background:white;border:1px solid var(--border);color:#4a5568;margin-right:20px}
.shio-json-p{background:#1a365d;color:#7cdf37;font-family:monospace;font-size:8px;padding:6px;border-radius:6px;overflow:hidden}

/* ─── FEATURES ──────────────────────────────────── */
#features{background:var(--bg)}
.features-inner{max-width:1100px;margin:0 auto}
.features-header{text-align:center;margin-bottom:64px}
.features-header .section-sub{margin:0 auto}

.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media(max-width:900px){.features-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.features-grid{grid-template-columns:1fr}}

.feat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px;
  transition:all .3s;
  position:relative;overflow:hidden;
}
.feat-card::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 80% at 50% 0%, rgba(88,204,2,0.06) 0%, transparent 60%);
  opacity:0;transition:opacity .3s;
}
.feat-card:hover{border-color:rgba(88,204,2,.3);transform:translateY(-4px)}
.feat-card:hover::before{opacity:1}
.feat-card.wide{grid-column:span 2}
@media(max-width:900px){.feat-card.wide{grid-column:span 1}}

.feat-icon{
  width:48px;height:48px;border-radius:14px;
  background:rgba(88,204,2,0.12);
  border:1px solid rgba(88,204,2,0.2);
  font-size:22px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.feat-icon.blue{background:rgba(28,176,246,0.12);border-color:rgba(28,176,246,0.2)}
.feat-icon.purple{background:rgba(206,130,255,0.12);border-color:rgba(206,130,255,0.2)}
.feat-icon.orange{background:rgba(255,150,0,0.12);border-color:rgba(255,150,0,0.2)}

.feat-title{font-family:var(--font-head);font-size:18px;font-weight:700;color:#0a2e5c;margin-bottom:8px}
.feat-desc{font-size:14px;color:#4a5568;line-height:1.65}

/* ─── QUIZ TYPES ────────────────────────────────── */
#quiz-types{background:#f7fafc;position:relative}
#quiz-types::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(28,176,246,.5),transparent)}

.types-inner{max-width:1100px;margin:0 auto}
.types-header{text-align:center;margin-bottom:56px}

.types-tabs{
  display:flex;gap:8px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:4px;
  justify-content:center;flex-wrap:wrap;
  margin-bottom:40px;
}
.types-tabs::-webkit-scrollbar{display:none}
.type-tab{
  padding:8px 18px;border-radius:99px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:#4a5568;font-size:13px;font-weight:500;
  cursor:pointer;transition:all .2s;
  white-space:nowrap;font-family:var(--font-body);
}
.type-tab.active{background:rgba(88,204,2,.12);border-color:rgba(88,204,2,.35);color:#0a2e5c;font-weight:600}

.type-panel{display:none;animation:fadeIn .3s ease}
.type-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){.type-panel.active{grid-template-columns:1fr}}

.type-info .type-icon-big{font-size:52px;margin-bottom:16px}
.type-info .type-title{font-family:var(--font-head);font-size:28px;font-weight:800;color:#0a2e5c;margin-bottom:10px}
.type-info .type-desc{font-size:15px;color:#4a5568;line-height:1.7;margin-bottom:20px}
.type-tags{display:flex;gap:8px;flex-wrap:wrap}
.type-tag{
  padding:4px 12px;border-radius:99px;font-size:12px;font-weight:500;
  background:rgba(88,204,2,.1);border:1px solid rgba(88,204,2,.2);color:#0a2e5c;
}

.type-demo{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.td-label{font-size:11px;font-weight:600;color:#4a5568;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.td-question{font-size:14px;font-weight:600;color:#0a2e5c;margin-bottom:16px;line-height:1.5}

/* MC demo */
.td-opts{display:flex;flex-direction:column;gap:8px}
.td-opt{padding:10px 14px;border-radius:10px;font-size:13px;border:1px solid rgba(255,255,255,.07);color:#4a5568;display:flex;align-items:center;gap:9px;cursor:pointer;transition:all .2s}
.td-opt:hover{border-color:rgba(88,204,2,.3);color:#0a2e5c}
.td-opt.selected{background:rgba(88,204,2,.12);border-color:var(--green);color:#0a2e5c}
.td-letter{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.06);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.td-opt.selected .td-letter{background:var(--green);color:#0a2e5c}

/* Write demo */
.td-write-input{
  width:100%;padding:12px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(88,204,2,.2);
  border-radius:10px;color:#0a2e5c;font-size:14px;
  font-family:var(--font-body);outline:none;
}
.td-write-hint{font-size:11px;color:#4a5568;margin-top:8px}

/* Order demo */
.td-order-answer{
  display:flex;flex-wrap:wrap;gap:6px;
  min-height:42px;padding:8px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(88,204,2,.2);
  border-radius:10px;margin-bottom:10px;
}
.td-order-tokens{display:flex;flex-wrap:wrap;gap:6px}
.td-token{
  padding:7px 12px;border-radius:8px;font-size:13px;
  background:rgba(88,204,2,.1);border:1px solid rgba(88,204,2,.25);
  color:#0a2e5c;cursor:pointer;font-weight:500;transition:all .15s;
}
.td-token:hover{background:rgba(88,204,2,.18);transform:translateY(-1px)}
.td-token.used{opacity:.3;pointer-events:none}

/* Matching demo */
.td-match{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.td-match-col{display:flex;flex-direction:column;gap:6px}
.td-match-item{
  padding:9px 12px;border-radius:9px;font-size:13px;
  border:1px solid rgba(255,255,255,.07);color:#4a5568;
  cursor:pointer;transition:all .2s;text-align:center;
}
.td-match-item:hover{border-color:rgba(88,204,2,.3);color:#0a2e5c}
.td-match-item.matched{background:rgba(88,204,2,.12);border-color:var(--green);color:#0a2e5c}

/* Puzzle demo */
.td-puzzle-area{
  display:flex;flex-wrap:wrap;gap:6px;min-height:44px;
  padding:8px;border:1px dashed rgba(28,176,246,.25);
  border-radius:10px;margin-bottom:10px;background:rgba(28,176,246,.03);
}
.td-puzzle-pool{display:flex;flex-wrap:wrap;gap:6px}
.td-puzzle-token{
  padding:7px 12px;border-radius:8px;font-size:13px;
  background:rgba(28,176,246,.1);border:1px solid rgba(28,176,246,.25);
  color:var(--blue);cursor:pointer;font-weight:500;
}

/* Reading demo */
.td-reading-passage{
  font-size:12px;color:#4a5568;line-height:1.7;
  background:rgba(255,255,255,.03);border-radius:8px;
  padding:12px;margin-bottom:14px;border-left:3px solid var(--green);
}

/* ─── FOR TEACHERS ──────────────────────────────── */
#teachers{background:var(--bg);position:relative;overflow:hidden}
.teachers-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
@media(max-width:768px){.teachers-inner{grid-template-columns:1fr}}

.teachers-visual{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px;
  box-shadow:0 40px 80px rgba(0,0,0,.5);
}
.tv-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.tv-title{font-family:var(--font-head);font-size:16px;font-weight:700;color:#0a2e5c}
.tv-badge{
  font-size:11px;padding:3px 9px;border-radius:99px;
  background:rgba(88,204,2,.12);border:1px solid rgba(88,204,2,.25);color:#0a2e5c;font-weight:600;
}
.tv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.tv-stat{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
.tv-stat-n{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--green)}
.tv-stat-l{font-size:10px;color:#4a5568}
.tv-students{display:flex;flex-direction:column;gap:8px}
.tv-student-row{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;
}
.tv-s-avatar{font-size:20px}
.tv-s-info{flex:1}
.tv-s-name{font-size:13px;font-weight:600;color:#0a2e5c;margin-bottom:3px}
.tv-s-progress{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;width:80px}
.tv-s-bar{height:100%;background:var(--green);border-radius:2px}
.tv-s-xp{font-size:12px;font-weight:700;color:var(--green)}
.tv-s-risk{font-size:10px;padding:2px 7px;border-radius:99px;background:rgba(255,75,75,.12);border:1px solid rgba(255,75,75,.25);color:rgba(255,100,100,1)}

.teachers-text .teacher-features{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.tf-item{display:flex;gap:14px;align-items:flex-start}
.tf-check{
  width:28px;height:28px;border-radius:8px;
  background:rgba(88,204,2,.12);border:1px solid rgba(88,204,2,.25);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:13px;margin-top:2px;
}
.tf-title{font-size:14px;font-weight:600;color:#0a2e5c;margin-bottom:3px}
.tf-desc{font-size:13px;color:#4a5568}

/* ─── TESTIMONIALS ──────────────────────────────── */
#social{background:#f7fafc;padding:80px 24px}
.social-inner{max-width:1100px;margin:0 auto;text-align:center}
.testimonials{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:48px;text-align:left;
}
@media(max-width:900px){.testimonials{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.testimonials{grid-template-columns:1fr}}

.testimonial{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px;
  transition:all .3s;
}
.testimonial:hover{transform:translateY(-4px);border-color:rgba(88,204,2,.2)}
.t-stars{color:var(--orange);font-size:14px;margin-bottom:12px}
.t-text{font-size:14px;color:#4a5568;line-height:1.7;margin-bottom:16px;font-style:italic}
.t-author{display:flex;align-items:center;gap:10px}
.t-avatar{width:36px;height:36px;border-radius:50%;background:rgba(88,204,2,.15);border:1px solid rgba(88,204,2,.25);display:flex;align-items:center;justify-content:center;font-size:18px}
.t-name{font-size:13px;font-weight:600;color:#0a2e5c}
.t-role{font-size:11px;color:#4a5568}

/* ─── CTA FINAL ─────────────────────────────────── */
#cta{
  padding:120px 24px;
  text-align:center;
  position:relative;overflow:hidden;
}
#cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(88,204,2,0.08) 0%, transparent 65%);
}
.cta-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.cta-title{font-family:var(--font-head);font-size:clamp(36px,6vw,60px);font-weight:800;color:#0a2e5c;margin-bottom:16px;letter-spacing:-.02em}
.cta-sub{font-size:17px;color:#4a5568;margin-bottom:36px;font-weight:300}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-note{font-size:12px;color:var(--muted2);margin-top:16px}

/* ─── FOOTER ────────────────────────────────────── */
footer{
  padding:48px 24px 32px;
  border-top:1px solid var(--border);
  background:var(--bg);
}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-logo{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--green)}
.footer-links{display:flex;gap:24px;list-style:none}
.footer-links a{font-size:13px;color:#4a5568;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:#0a2e5c}
.footer-copy{font-size:12px;color:var(--muted2)}

/* ─── KEYFRAMES ─────────────────────────────────── */
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ─── MOBILE ─────────────────────────────────────── */
@media(max-width:600px){
  section{padding:60px 16px}

  /* Nav */
  nav{padding:12px 16px}
  .nav-cta{padding:7px 16px;font-size:13px}

  /* Hero */
  #hero{padding:80px 16px 40px;min-height:auto}
  .hero-badge{font-size:12px;padding:5px 12px}
  h1{font-size:clamp(32px,9vw,52px)}
  .hero-sub{font-size:15px;max-width:100%}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px}
  .btn-primary,.btn-secondary{
    padding:14px 24px;font-size:15px;
    text-align:center;justify-content:center;
    width:100%;
  }
  .hero-float{height:200px;margin-top:12px}
  .fc-quiz{width:240px;padding:12px 14px}
  .fc-quiz-q{font-size:12px;margin-bottom:8px}
  .fc-opt{padding:7px 10px;font-size:12px}
  .fc-letter{width:20px;height:20px;font-size:10px}
  .fc-xp,.fc-streak{display:none}
  .fc-ach{width:200px;padding:10px 14px}
  .fc-ach-icon{font-size:22px}
  .fc-ach-title{font-size:11px}
  .fc-ach-sub{font-size:10px}
  .fc-ach-new{font-size:8px}

  /* Stats */
  #stats{padding:40px 16px}
  .stat-num{font-size:36px}
  .stat-lbl{font-size:12px}
  .stat-item{padding:20px 10px}

  /* How it works */
  .how-inner{gap:32px}
  .section-title{font-size:clamp(26px,6vw,40px)}
  .section-sub{font-size:15px}
  .how-step{padding:16px 0;gap:14px}
  .step-num{width:36px;height:36px;font-size:14px;border-radius:10px}
  .step-title{font-size:15px}
  .step-desc{font-size:13px}
  .how-visual{min-height:300px}
  .how-screen{max-width:280px}
  .how-screen-body{padding:16px}
  .map-node-p{width:44px;height:44px;font-size:18px}
  .map-path{height:18px}
  .fp-timer{width:32px;height:32px;font-size:12px;margin-bottom:10px}
  .fp-q{font-size:12px;margin-bottom:10px}
  .fp-opt{padding:7px 10px;font-size:11px;gap:6px}
  .fp-letter{width:18px;height:18px;font-size:9px}
  .rp-icon{font-size:36px}
  .rp-title{font-size:15px}
  .rp-sub{font-size:11px}
  .rp-stats{gap:6px}
  .rp-stat{padding:8px 4px}
  .rp-stat-n{font-size:15px}
  .rp-stat-l{font-size:9px}
  .rp-bar-lbl{font-size:10px}
  .tp-code{font-size:20px;letter-spacing:4px}
  .tp-label{font-size:9px}
  .tp-row{padding:6px 8px;gap:8px}
  .tp-name{font-size:11px}
  .tp-xp{font-size:10px}
  .tp-bar-sm{width:40px}

  /* Features */
  .features-header{margin-bottom:40px}
  .feat-card{padding:20px;border-radius:16px}
  .feat-icon{width:40px;height:40px;border-radius:12px;font-size:18px;margin-bottom:14px}
  .feat-title{font-size:16px}
  .feat-desc{font-size:13px}

  /* Quiz types */
  .types-header{margin-bottom:36px}
  .types-tabs{gap:6px;margin-bottom:28px}
  .type-tab{padding:7px 14px;font-size:12px}
  .type-panel.active{grid-template-columns:1fr;gap:24px}
  .type-icon-big{font-size:40px;margin-bottom:12px}
  .type-info .type-title{font-size:22px}
  .type-info .type-desc{font-size:14px}
  .type-tags{gap:6px}
  .type-tag{font-size:11px;padding:3px 10px}
  .type-demo{padding:18px;border-radius:16px}
  .td-label{font-size:10px;margin-bottom:8px}
  .td-question{font-size:13px;margin-bottom:12px}
  .td-opt{padding:8px 10px;font-size:12px;gap:7px}
  .td-letter{width:22px;height:22px;font-size:10px}
  .td-write-input{padding:10px 12px;font-size:14px}
  .td-write-hint{font-size:10px}
  .td-token{padding:6px 10px;font-size:12px}
  .td-match-item{padding:8px 10px;font-size:12px}
  .td-puzzle-token{padding:6px 10px;font-size:12px}
  .td-reading-passage{font-size:11px;padding:10px}

  /* Teachers */
  .teachers-inner{gap:32px}
  .tf-item{gap:10px}
  .tf-check{width:24px;height:24px;font-size:11px;border-radius:6px}
  .tf-title{font-size:13px}
  .tf-desc{font-size:12px}
  .teachers-visual{padding:20px;border-radius:16px}
  .tv-title{font-size:14px}
  .tv-badge{font-size:10px;padding:2px 7px}
  .tv-stats{gap:6px;margin-bottom:14px}
  .tv-stat{padding:8px 4px;border-radius:8px}
  .tv-stat-n{font-size:18px}
  .tv-stat-l{font-size:9px}
  .tv-student-row{padding:8px 10px;gap:8px;border-radius:8px}
  .tv-s-avatar{font-size:16px}
  .tv-s-name{font-size:12px}
  .tv-s-progress{width:60px}
  .tv-s-xp{font-size:11px}

  /* CTA */
  #cta{padding:80px 16px}
  .cta-title{font-size:clamp(28px,7vw,44px)}
  .cta-sub{font-size:15px;margin-bottom:28px}
  .cta-btns{flex-direction:column;align-items:stretch}
  .cta-btns .btn-primary{width:100%;justify-content:center;text-align:center}
  .cta-note{font-size:11px}

  /* Footer */
  footer{padding:32px 16px 24px}
  .footer-inner{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .footer-links{gap:16px;flex-wrap:wrap;justify-content:center}
  .footer-links a{font-size:12px}
  .footer-copy{font-size:11px}
}

/* ── EXTRA SMALL (320-360px) ── */
@media(max-width:380px){
  h1{font-size:28px}
  .hero-badge{font-size:11px;padding:4px 10px}
  .hero-sub{font-size:14px}
  .btn-primary,.btn-secondary{padding:12px 20px;font-size:14px}
  .hero-float{height:180px}
  .fc-quiz{width:220px;padding:10px 12px}
  .fc-quiz-q{font-size:11px}
  .fc-ach{width:180px}
  .stat-num{font-size:30px}
  .section-title{font-size:24px}
  .type-tab{font-size:11px;padding:6px 10px}
  .feat-card{padding:16px}
}

/* ── PREVENT HORIZONTAL SCROLL ── */
html,body{overflow-x:hidden;max-width:100vw}

/* ── SMOOTH TOUCH INTERACTIONS ── */
.btn-primary:active,.btn-secondary:active,
.type-tab:active,.feat-card:active,
.how-step:active,.td-opt:active{
  transform:scale(0.97)!important;
  transition:transform 0.1s;
}

/* ── DISABLE PARALLAX ON MOBILE (touch = no mousemove) ── */
@media(pointer:coarse){
  .hero-grid{transform:none!important}
}

/* --- CONTENT PROTECTION --- */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}