/* ===========================================================
   Tara Learn — design system
   Display: Fredoka · Body: Nunito · Devanagari: Baloo 2
   Brand motif: the star (also the reward currency)
   =========================================================== */

:root {
    --ink:        #211A4A;
    --ink-soft:   #5B5685;
    --bg-top:     #E9F1FF;
    --bg-bot:     #F3ECFF;
    --card:       #FFFFFF;
    --line:       #ECE9F7;

    --maths:      #2563EB;
    --english:    #16A34A;
    --hindi:      #EA580C;
    --pink:       #EC4899;
    --gold:       #F59E0B;
    --gold-lite:  #FCD34D;
    --good:       #22C55E;
    --bad:        #EF4444;

    --r-lg: 28px;
    --r-md: 18px;
    --r-sm: 12px;
    --shadow: 0 14px 30px -12px rgba(33,26,74,.28);
    --shadow-sm: 0 8px 18px -10px rgba(33,26,74,.30);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: 'Nunito', system-ui, sans-serif;
    color: var(--ink);
    background: linear-gradient(160deg, var(--bg-top), var(--bg-bot));
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

h1, h2, h3, .display { font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: .2px; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0 0 .4em; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .5em; }
p  { margin: 0 0 1em; }
a  { color: var(--maths); }

/* ---------- floating sky background ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cloud {
    position: absolute; background: #fff; border-radius: 50%;
    width: 120px; height: 44px; opacity: .55;
    box-shadow: 36px 8px 0 -6px #fff, 72px -4px 0 -10px #fff;
    animation: drift 38s linear infinite;
}
.cloud.c1 { top: 12%;  left: -160px; transform: scale(1.2); }
.cloud.c2 { top: 38%;  left: -160px; animation-duration: 52s; opacity: .4; }
.cloud.c3 { top: 68%;  left: -160px; animation-duration: 64s; transform: scale(.9); }
@keyframes drift { to { transform: translateX(118vw); } }

/* ---------- top bar ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px clamp(16px, 4vw, 40px); max-width: 1100px; margin: 0 auto;
}
.brand {
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.5rem;
    color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.brand-star { color: var(--gold); filter: drop-shadow(0 2px 0 #d97706); animation: twinkle 3s ease-in-out infinite; }
.brand-sub { color: var(--pink); }
@keyframes twinkle { 0%,100%{ transform: rotate(0) scale(1);} 50%{ transform: rotate(18deg) scale(1.12);} }
.topnav { display: flex; align-items: center; gap: 10px; }

.hud { display: inline-flex; gap: 8px; }
.hud-item {
    background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 800;
    box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 6px; font-size: 1rem;
}
.hud-item .ic { font-size: 1.1rem; }

/* ---------- layout ---------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 60px; }
.foot { text-align: center; color: var(--ink-soft); padding: 24px; font-size: .9rem; }
.foot-company { font-size: .78rem; margin-top: 4px; color: var(--ink-soft); opacity: .8; }
.foot-legal { font-size: .72rem; margin-top: 6px; color: var(--ink-soft); opacity: .65; max-width: 480px; margin-left: auto; margin-right: auto; }
.flash {
    max-width: 1100px; margin: 0 auto 8px; padding: 12px 20px;
    background: #fff; border-left: 6px solid var(--good); border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm); font-weight: 700;
}

/* ---------- pressable candy buttons (the 3D feel) ---------- */
.btn {
    --c: var(--maths); --c-dark: #1d4ed8;
    appearance: none; border: 0; cursor: pointer; font-family: 'Fredoka', sans-serif;
    font-weight: 600; font-size: 1.15rem; color: #fff; background: var(--c);
    padding: 15px 28px; border-radius: 16px; text-decoration: none; display: inline-flex;
    align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 6px 0 0 var(--c-dark), var(--shadow-sm);
    transition: transform .06s ease, box-shadow .06s ease; user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 0 var(--c-dark); }
.btn-sm { font-size: .95rem; padding: 9px 16px; border-radius: 12px; box-shadow: 0 4px 0 0 var(--c-dark); }
.btn-sm:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--c-dark); }
.btn-block { width: 100%; }
.btn-gold  { --c: var(--gold); --c-dark: #b45309; color: #3b2a00; }
.btn-pink  { --c: var(--pink); --c-dark: #be185d; }
.btn-green { --c: var(--english); --c-dark: #15803d; }
.btn-red   { --c: #EF4444; --c-dark: #B91C1C; }
.btn-ghost {
    background: #F1F5F9; color: var(--ink);
    border: 1.5px solid #CBD5E1;
    box-shadow: 0 3px 0 0 #CBD5E1;
}
.btn-ghost:hover { background: #E2E8F0; }
.btn-ghost:active { box-shadow: 0 1px 0 0 #CBD5E1; transform: translateY(2px); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- cards ---------- */
.card {
    background: var(--card); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px);
    box-shadow: var(--shadow);
}
.card + .card { margin-top: 18px; }
.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

.eyebrow {
    font-family: 'Fredoka', sans-serif; text-transform: uppercase; letter-spacing: 2px;
    font-size: .8rem; color: var(--pink); font-weight: 600; margin-bottom: 8px;
}
.lead { font-size: 1.15rem; color: var(--ink-soft); }

/* ═══════════════════════════════════════════════
   LANDING PAGE
═══════════════════════════════════════════════ */

/* full-bleed breakout from .wrap */
.lp-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 35%, #4c1d95 65%, #6d28d9 100%);
    padding: 70px clamp(16px,5vw,80px) 80px;
    position: relative; overflow: hidden;
}
.lp-hero::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 70% 50%, rgba(245,158,11,.18) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, rgba(236,72,153,.15) 0%, transparent 50%);
    pointer-events:none;
}
.lp-hero-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
@media(max-width:900px){ .lp-hero-inner { grid-template-columns:1fr; text-align:center; } }

.lp-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
    color:#fff; font-size:.82rem; font-weight:700; padding:6px 14px;
    border-radius:999px; margin-bottom:20px; backdrop-filter:blur(4px);
}
.lp-h1 {
    font-family:'Fredoka',sans-serif; font-size:clamp(2.4rem,5vw,3.8rem);
    line-height:1.08; font-weight:700; color:#fff; margin:0 0 20px;
}
.lp-accent {
    background: linear-gradient(90deg,#FCD34D,#F97316);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.lp-sub { font-size:1.1rem; color:rgba(255,255,255,.8); margin-bottom:32px; line-height:1.7; }
.lp-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
@media(max-width:900px){ .lp-cta { justify-content:center; } }
.lp-ghost-btn {
    background:rgba(255,255,255,.12); color:#fff; border:2px solid rgba(255,255,255,.3);
    font-family:'Fredoka',sans-serif; font-size:1rem; font-weight:600;
    padding:15px 24px; border-radius:16px; text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
    transition:background .15s;
}
.lp-ghost-btn:hover { background:rgba(255,255,255,.2); }
.lp-trust-row { display:flex; gap:12px; flex-wrap:wrap; }
.lp-trust-row span { font-size:.8rem; color:rgba(255,255,255,.7); font-weight:600; }
@media(max-width:900px){ .lp-trust-row { justify-content:center; } }

/* ── kid cards cluster ── */
.lp-kids {
    position:relative; height:420px;
}
@media(max-width:900px){ .lp-kids { height:280px; margin-top:8px; } }

.lp-kid-card {
    position:absolute; background:#fff; border-radius:20px;
    padding:14px; display:flex; align-items:center; gap:12px;
    box-shadow:0 20px 50px -10px rgba(0,0,0,.4);
    animation: lkc-float 5s ease-in-out infinite;
    min-width:190px;
}
.lkc-avatar { width:54px; height:54px; border-radius:50%; flex-shrink:0; border:3px solid #F59E0B; }
.lkc-name { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink); }
.lkc-stars { font-size:.78rem; color:var(--ink-soft); font-weight:700; margin-top:2px; }
.lkc-badge {
    position:absolute; top:-10px; right:-10px;
    background:linear-gradient(135deg,#F59E0B,#F97316); color:#fff;
    font-size:.72rem; font-weight:800; padding:4px 10px; border-radius:999px;
    box-shadow:0 4px 12px rgba(245,158,11,.5); white-space:nowrap;
}

.lkc-1 { top:10%; left:0;    animation-delay:0s; }
.lkc-2 { top:42%; right:0;   animation-delay:1.2s; }
.lkc-3 { bottom:4%; left:15%; animation-delay:.6s; }

@keyframes lkc-float {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-12px); }
}

/* floating chips */
.lp-chip {
    position:absolute; background:#fff; border-radius:999px;
    padding:5px 12px; font-size:.78rem; font-weight:800; color:var(--ink);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    animation: lkc-float 4s ease-in-out infinite;
    white-space:nowrap;
}
.chip-a { top:2%;  left:48%;  animation-delay:.3s; }
.chip-b { top:30%; left:38%;  animation-delay:1.5s; }
.chip-c { bottom:32%; right:2%; animation-delay:.9s; }
.chip-d { bottom:16%; right:28%; animation-delay:2.1s; }

/* subject pills */
.lp-subj-pill {
    position:absolute; border-radius:999px; padding:5px 14px;
    font-size:.78rem; font-weight:800; color:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    animation: lkc-float 6s ease-in-out infinite;
}
.sp-maths   { background:#2563EB; top:0%;   right:10%; animation-delay:2.4s; }
.sp-english { background:#16A34A; bottom:40%; left:2%;  animation-delay:.4s; }
.sp-hindi   { background:#EA580C; top:55%;  left:42%;  animation-delay:1.8s; }
.sp-gk      { background:#7C3AED; bottom:8%; right:5%;  animation-delay:1.1s; }

/* ── stats bar ── */
.lp-stats {
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
    gap:0; background:#fff; border-radius:var(--r-lg);
    box-shadow:var(--shadow); padding:28px 32px; margin:28px 0;
}
.lp-stat { text-align:center; padding:0 32px; }
.lp-stat-n { font-family:'Fredoka',sans-serif; font-size:2.6rem; font-weight:700; color:var(--maths); line-height:1; }
.lp-stat-k { font-size:.85rem; font-weight:700; color:var(--ink-soft); margin-top:4px; }
.lp-stat-div { width:1px; height:50px; background:var(--line); }
@media(max-width:600px){ .lp-stat-div{display:none;} .lp-stat{padding:12px 20px;} }

/* ── sections ── */
.lp-section { margin:48px 0; }

/* ── how it works ── */
.lp-steps {
    display:flex; align-items:flex-start; gap:0;
}
@media(max-width:720px){ .lp-steps { flex-direction:column; align-items:center; } }
.lp-step {
    flex:1; background:#fff; border-radius:var(--r-lg); padding:28px 24px;
    text-align:center; box-shadow:var(--shadow-sm);
    transition:transform .2s;
}
.lp-step:hover { transform:translateY(-4px); }
.lp-step-num {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,var(--gold),#F97316);
    color:#fff; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1rem;
    display:inline-flex; align-items:center; justify-content:center;
    margin-bottom:12px;
}
.lp-step-icon { font-size:2.8rem; margin-bottom:10px; }
.lp-step h3 { margin:0 0 8px; font-size:1.2rem; }
.lp-step p { margin:0; color:var(--ink-soft); font-size:.92rem; }
.lp-step-arrow {
    font-size:1.8rem; color:var(--gold); padding:0 12px; flex-shrink:0;
    align-self:center; margin-top:-20px;
}
@media(max-width:720px){ .lp-step-arrow { transform:rotate(90deg); padding:8px 0; } }

/* ── subject cards ── */
.lp-subject-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lp-subject-grid-4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .lp-subject-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:720px){ .lp-subject-grid { grid-template-columns:1fr; } }
.lp-subj-card {
    border-radius:var(--r-lg); padding:32px 24px; text-align:center;
    color:#fff; position:relative; overflow:hidden;
    box-shadow:0 16px 40px -10px rgba(0,0,0,.25);
    transition:transform .2s;
}
.lp-subj-card:hover { transform:translateY(-6px); }
.lp-subj-card::after {
    content:''; position:absolute; right:-20px; bottom:-20px;
    width:100px; height:100px; border-radius:50%;
    background:rgba(255,255,255,.12);
}
.lsc-maths   { background:linear-gradient(135deg,#1d4ed8,#2563EB); }
.lsc-english { background:linear-gradient(135deg,#15803d,#16A34A); }
.lsc-hindi   { background:linear-gradient(135deg,#c2410c,#EA580C); }
.lsc-gk      { background:linear-gradient(135deg,#5b21b6,#7C3AED); }
.lsc-icon { font-size:3rem; margin-bottom:12px; }
.lp-subj-card h3 { color:#fff; font-size:1.6rem; margin:0 0 8px; }
.lp-subj-card p { color:rgba(255,255,255,.85); font-size:.92rem; margin-bottom:16px; }
.lsc-lessons {
    display:inline-block; background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.35); border-radius:999px;
    padding:4px 14px; font-size:.8rem; font-weight:800;
}

/* ── quotes ── */
.lp-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:800px){ .lp-quotes { grid-template-columns:1fr; } }
.lp-quote {
    background:#fff; border-radius:var(--r-lg); padding:28px;
    box-shadow:var(--shadow-sm); border-top:4px solid var(--gold);
}
.lp-quote-stars { font-size:1rem; margin-bottom:12px; }
.lp-quote p { color:var(--ink-soft); font-size:.95rem; line-height:1.65; margin-bottom:20px; font-style:italic; }
.lp-quote-author { display:flex; align-items:center; gap:12px; }
.lp-quote-av { width:44px; height:44px; border-radius:50%; border:2px solid var(--line); }
.lp-quote-author strong { font-size:.92rem; color:var(--ink); }
.lp-quote-author span { font-size:.8rem; color:var(--ink-soft); }

/* ── live demo section ── */
.lp-demo-section {
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
@media(max-width:860px){ .lp-demo-section{ grid-template-columns:1fr; } }
.lp-demo-text h2 { margin-bottom:12px; }
.lp-demo-bullets { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.lp-demo-bullets li { font-size:.95rem; font-weight:600; color:var(--ink-soft); }

/* phone frame */
.lp-phone-wrap { position:relative; display:flex; justify-content:center; padding:20px 40px; }
.lp-phone {
    width:260px; background:#1e1b4b;
    border-radius:40px; padding:14px 10px 20px;
    box-shadow: 0 30px 80px -10px rgba(30,27,75,.55),
                0 0 0 2px rgba(255,255,255,.08),
                inset 0 0 0 1px rgba(255,255,255,.04);
    position:relative; flex-shrink:0;
}
.lp-phone-notch {
    width:80px; height:22px; background:#1e1b4b;
    border-radius:0 0 14px 14px; margin:0 auto 8px;
    position:relative; z-index:2;
    box-shadow:inset 0 -2px 0 rgba(255,255,255,.06);
}
.lp-phone-screen {
    background:#F3ECFF; border-radius:28px; overflow:hidden;
    padding:14px 12px 14px; min-height:440px; position:relative;
}
.lp-phone-bar {
    width:80px; height:4px; background:rgba(255,255,255,.25);
    border-radius:999px; margin:12px auto 0;
}

/* demo internals */
.lp-prog-track { height:8px; background:rgba(33,26,74,.12); border-radius:999px; margin-bottom:10px; overflow:hidden; }
.lp-prog-bar   { height:100%; background:linear-gradient(90deg,#F59E0B,#F97316); border-radius:999px; width:0%; transition:width .6s ease; }
.lp-demo-subj  { font-size:.72rem; font-weight:800; color:var(--ink-soft); text-align:center; margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; }
.lp-demo-card  { background:#fff; border-radius:18px; padding:16px 14px; box-shadow:0 8px 24px rgba(33,26,74,.12); }
.lp-demo-big   { font-size:2rem; text-align:center; margin-bottom:8px; min-height:48px; }
.lp-demo-q     { font-size:.88rem; font-weight:800; color:var(--ink); text-align:center; margin-bottom:14px; line-height:1.4; }
.lp-demo-opts  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lp-opt {
    background:#F3ECFF; border:2.5px solid #E9E3FF; color:var(--ink);
    font-family:'Fredoka',sans-serif; font-size:1.1rem; font-weight:700;
    padding:12px 8px; border-radius:14px; cursor:default;
    transition:all .2s; user-select:none;
}
.lp-opt-tap     { transform:scale(.93); background:#EDE9FE; border-color:#A78BFA; }
.lp-opt-correct { background:#D1FAE5; border-color:#10B981; color:#065F46; transform:scale(1.04); }
.lp-opt-wrong   { background:#FEE2E2; border-color:#EF4444; color:#991B1B; }

/* speak button */
.lp-speak-btn {
    position:absolute; bottom:14px; right:14px;
    background:#fff; border:none; border-radius:50%;
    width:36px; height:36px; font-size:1rem; cursor:default;
    box-shadow:0 4px 12px rgba(33,26,74,.15);
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s;
}
.lp-speak-btn.speaking { animation:speak-pulse 0.6s ease-in-out infinite alternate; }
@keyframes speak-pulse { from{transform:scale(1);box-shadow:0 4px 12px rgba(245,158,11,.2);} to{transform:scale(1.15);box-shadow:0 4px 18px rgba(245,158,11,.6);} }

/* result overlay */
.lp-demo-result {
    position:absolute; inset:0; background:linear-gradient(135deg,#1e1b4b,#4c1d95);
    border-radius:28px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .4s;
    padding:20px;
}
.lp-demo-result.show { opacity:1; }
.lp-demo-stars { font-size:1.8rem; margin-bottom:10px; }
.lp-demo-done  { font-family:'Fredoka',sans-serif; font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:6px; }
.lp-demo-score { font-size:.9rem; font-weight:700; color:rgba(255,255,255,.75); }

/* floating feedback chips */
.lp-fb-chip {
    position:absolute; background:#fff; border-radius:999px;
    padding:6px 14px; font-size:.8rem; font-weight:800; color:var(--ink);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    opacity:0; transform:translateY(10px) scale(.9);
    transition:opacity .35s, transform .35s;
    white-space:nowrap; pointer-events:none;
}
.lp-fb-chip.show { opacity:1; transform:translateY(0) scale(1); }
.fc-1 { top:22%;  right:-10px; }
.fc-2 { top:42%;  left:-14px; }
.fc-3 { bottom:28%; right:-8px; }

/* ── bottom CTA band ── */
.lp-cta-band {
    width:100vw; margin-left:calc(50% - 50vw);
    background:linear-gradient(135deg,#1e1b4b,#4c1d95,#6d28d9);
    padding:70px clamp(16px,5vw,80px);
    text-align:center; position:relative; overflow:hidden;
}
.lp-cta-band::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 100%,rgba(245,158,11,.2) 0%,transparent 60%);
    pointer-events:none;
}
.lp-cta-band-inner { max-width:640px; margin:0 auto; position:relative; }

.feature-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 720px){ .feature-row { grid-template-columns: 1fr; } }
.feature { background:#fff; border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm); }
.feature .fi { font-size: 2rem; }
.feature h3 { margin: 8px 0 4px; }
.feature p { margin: 0; color: var(--ink-soft); }

/* ---------- subject island cards (kid home) ---------- */
.subjects { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 820px){ .subjects { grid-template-columns: 1fr; } }
.island {
    --c: var(--maths);
    position: relative; display: block; text-decoration: none; color: #fff;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 88%, #fff), var(--c));
    border-radius: var(--r-lg); padding: 26px; min-height: 200px;
    box-shadow: 0 10px 0 -2px color-mix(in srgb, var(--c) 70%, #000), var(--shadow);
    transition: transform .12s ease; overflow: hidden;
}
.island:hover { transform: translateY(-4px) rotate(-1deg); }
.island .ico { font-size: 3.2rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.island h3 { color: #fff; font-size: 1.8rem; margin: 10px 0 2px; }
.island .tag { opacity: .92; font-weight: 700; }
.island .meter { margin-top: 16px; background: rgba(255,255,255,.35); border-radius: 999px; height: 12px; overflow: hidden; }
.island .meter > span { display: block; height: 100%; background: #fff; border-radius: 999px; }
.island .meta { margin-top: 8px; font-weight: 800; font-size: .9rem; opacity: .95; }
.island .bubble { position: absolute; right: -10px; top: -10px; font-size: 6rem; opacity: .15; transform: rotate(12deg); }
.subj-maths   { --c: var(--maths); }
.subj-english { --c: var(--english); }
.subj-hindi   { --c: var(--hindi); }

/* ---------- lesson list (days) ---------- */
.daylist { display: grid; gap: 14px; }
.day {
    display: flex; align-items: center; gap: 16px; background:#fff; border-radius: var(--r-md);
    padding: 16px 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
    border: 3px solid transparent; transition: transform .1s ease, border-color .1s ease;
}
.day:hover { transform: translateY(-2px); border-color: var(--line); }
.day .num {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; background: var(--c, var(--maths));
}
.day .body { flex: 1; min-width: 0; }
.day .body .t { font-weight: 800; font-size: 1.1rem; }
.day .body .d { color: var(--ink-soft); font-size: .92rem; }
.day .right { flex: 0 0 auto; font-weight: 800; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.day.done { background: #F0FDF4; border-color: #10B981; }
.day.done .num { background: #10B981; color: transparent; position: relative; }
.day.done .num::after {
    content: '✓'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; font-size: 1.5rem; color: #fff;
}
.day.next { border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.15), var(--shadow-sm); }
.day.locked { opacity: .75; cursor: default; }
.day .stars-won { color: var(--gold); font-weight: 800; font-size: 1.15rem; }
.lock-pill { background: #FFF7E6; color: #92600a; padding: 6px 12px; border-radius: 999px; font-size:.82rem; font-weight: 800; }
.lock-pill.seq-lock { background: #F1F5F9; color: #64748B; }

/* ---------- activity player ---------- */
.progress-track { background: #fff; border-radius: 999px; height: 16px; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 22px; }
.progress-track > span { display:block; height:100%; background: linear-gradient(90deg, #60a5fa, #2563eb); border-radius: 999px; transition: width .35s ease; }
.q-card { background:#fff; border-radius: var(--r-lg); padding: 0; box-shadow: var(--shadow); display:flex; align-items:stretch; overflow:hidden; }
.q-content { flex:1; padding:28px; text-align:center; min-width:0; }
.q-text { font-family:'Fredoka',sans-serif; font-size: 1.5rem; margin-bottom: 14px; }
.q-big {
    font-family: 'Baloo 2', 'Fredoka', sans-serif; font-weight: 700;
    font-size: clamp(3rem, 16vw, 6rem); line-height: 1.1; margin: 6px 0 22px;
    word-break: break-word;
}
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.options.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 520px){ .options, .options.three { grid-template-columns: 1fr 1fr; } }
.opt {
    font-family: 'Baloo 2','Fredoka',sans-serif; font-weight: 700; font-size: 1.8rem;
    background: #F6F4FF; color: var(--ink); border: 3px solid #E7E2FB; border-radius: var(--r-md);
    padding: 22px 10px; cursor: pointer; transition: transform .08s ease, background .1s ease, border-color .1s; user-select: none;
}
.opt:hover { transform: translateY(-2px); }
.opt:active { transform: translateY(1px); }
.opt.correct { background: #DCFCE7; border-color: var(--good); animation: pop .35s ease; }
.opt.wrong   { background: #FEE2E2; border-color: var(--bad); animation: shake .4s ease; }
.opt.disabled { pointer-events: none; }
.opt.reading { background: #FEF9C3; border-color: #EAB308; transform: translateY(-2px); }

/* teach panel — shown when answer is wrong */
.teach-panel {
    margin-top: 16px; padding: 14px 18px; border-radius: 16px;
    background: #FEF3C7; border: 2px solid #F59E0B; color: #92400E;
    font-size: 1.15rem; font-weight: 700; text-align: center;
    opacity: 0; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.teach-panel.show { opacity: 1; transform: translateY(0); }
.teach-tick { margin-right: 6px; }

/* confetti burst */
.confetti-piece {
    position: fixed; pointer-events: none; z-index: 9999;
    animation: confetti-fly var(--dur, 1.2s) cubic-bezier(.2,.8,.4,1) forwards;
}
.confetti-emoji {
    line-height: 1; display: inline-block;
}
@keyframes confetti-fly {
    0%   { transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(1); opacity:1; }
    70%  { opacity: 1; }
    100% { transform: translate(-50%,-50%) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.5); opacity:0; }
}
@keyframes pop { 0%{transform:scale(1);} 50%{transform:scale(1.08);} 100%{transform:scale(1);} }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }

/* ---------- reward overlay ---------- */
.reward {
    position: fixed; inset: 0; z-index: 50; display: none; place-items: center;
    background: rgba(15,10,50,.65); backdrop-filter: blur(6px); padding: 20px;
}
.reward.show { display: grid; }
.reward-card {
    background: #fff; border-radius: 28px; padding: 0; text-align: center;
    max-width: 400px; width: 100%; overflow: hidden;
    box-shadow: 0 32px 80px rgba(15,10,50,.35); animation: rise .45s cubic-bezier(.2,1.2,.4,1);
}
@keyframes rise { from { transform: translateY(32px) scale(.93); opacity: 0; } }
.rw-top {
    background: linear-gradient(160deg, #1e1b4b 0%, #2563EB 100%);
    padding: 28px 24px 22px; position: relative;
}
#reward-3d { width: 100%; height: 140px; }
.reward-stars { font-size: 2.2rem; letter-spacing: 6px; margin: 4px 0 6px; }
.rw-title { color: #fff; font-size: 1.6rem; margin: 0; font-family: 'Fredoka', sans-serif; font-weight: 700; }
/* score row */
.rw-score {
    display: flex; align-items: stretch; gap: 0;
    margin: 0; border-bottom: 2px solid #F3F4F6;
}
.rw-score-item {
    flex: 1; padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rw-score-divider { width: 2px; background: #F3F4F6; }
.rw-score-num { font-size: 2.4rem; font-weight: 900; font-family: 'Baloo 2', sans-serif; line-height: 1; }
.rw-score-label { font-size: .8rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.rw-correct .rw-score-num { color: #16a34a; }
.rw-wrong   .rw-score-num { color: #DC2626; }
.reward-streak { font-weight: 800; color: var(--hindi); margin: 12px 0 0; padding: 0 24px; }
.reward-badges { padding: 0 24px; }
.reward-actions { display:flex; gap:10px; justify-content:center; padding: 16px 20px 22px; flex-wrap:wrap; }
.badge-pop { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin: 14px 0; }
.badge-chip {
    background: #FFF7E6; border: 2px solid var(--gold-lite); border-radius: 14px; padding: 8px 12px;
    font-weight: 800; display: inline-flex; gap: 6px; align-items: center;
}
.badge-chip .be { font-size: 1.4rem; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; text-align: left; }
.field label { display:block; font-weight: 800; margin-bottom: 6px; }
.field input, .field select {
    width: 100%; padding: 14px 16px; border: 3px solid var(--line); border-radius: 14px;
    font-size: 1.05rem; font-family: inherit; background: #FBFAFF;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--maths); }
.form-narrow { max-width: 440px; margin: 0 auto; }
.error { background:#FEE2E2; color:#991b1b; padding:12px 16px; border-radius:12px; font-weight:700; margin-bottom:16px; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ---------- avatars (kid + child picker) ---------- */
.kid-tiles { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:16px; }
.kid-tile {
    background:#fff; border-radius: var(--r-md); padding: 18px; text-align:center; cursor:pointer;
    box-shadow: var(--shadow-sm); border: 4px solid transparent; text-decoration:none; color:var(--ink);
    transition: transform .1s ease, border-color .1s ease;
}
.kid-tile:hover { transform: translateY(-3px); border-color: var(--pink); }
.kid-tile .face { font-size: 3rem; }
.kid-tile .nm { font-weight: 800; margin-top: 6px; }
.avatar-pick { display:flex; gap:10px; flex-wrap:wrap; }
.avatar-pick label { cursor:pointer; }
.avatar-pick input { position:absolute; opacity:0; }
.avatar-pick .a { font-size: 2rem; padding: 8px; border-radius: 12px; border:3px solid var(--line); display:inline-block; }
.avatar-pick input:checked + .a { border-color: var(--pink); background:#FFF0F7; }

/* ---------- progress bits (parent) ---------- */
.statgrid { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
@media (max-width:720px){ .statgrid { grid-template-columns: repeat(2,1fr);} }
.stat { background:#fff; border-radius: var(--r-md); padding: 18px; text-align:center; box-shadow: var(--shadow-sm); }
.stat .v { font-family:'Fredoka',sans-serif; font-size: 2rem; }
.stat .k { color: var(--ink-soft); font-weight:700; font-size:.9rem; }

.bar { background:#EFEDFb; border-radius:999px; height:14px; overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:999px; }

.cal { display:flex; gap:6px; flex-wrap:wrap; }
.cal .d { width: 30px; height: 30px; border-radius: 8px; background:#EEEAFB; display:grid; place-items:center; font-size:.7rem; color:var(--ink-soft); }
.cal .d.on { background: var(--good); color:#fff; font-weight:800; }

.badge-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.bcard { background:#fff; border-radius: var(--r-md); padding:16px; text-align:center; box-shadow: var(--shadow-sm); }
.bcard.locked { opacity:.45; filter: grayscale(.6); }
.bcard .bi { font-size: 2.4rem; }
.bcard .bn { font-weight:800; margin-top:4px; }
.bcard .bd { color:var(--ink-soft); font-size:.8rem; }

.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .cloud { display:none; }
}

/* ---- subject day-list helpers ---- */
.back-link { display:inline-block; margin:2px 0 4px; color:var(--ink-soft); font-weight:700; text-decoration:none; }
.back-link:hover { color:var(--ink); }
.day-list { display:flex; flex-direction:column; gap:12px; }
.go-pill { background:var(--maths); color:#fff; padding:6px 14px; border-radius:999px; font-size:.85rem; font-weight:800; }

/* ---- lesson player extras ---- */
.play-head { margin-bottom: 12px; }
.reward-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
.reward-actions { display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap; }

/* ---- Listen / read-aloud button ---- */
.q-head { display:flex; align-items:center; justify-content:center; gap:12px; }
.speak-btn {
    border:0; cursor:pointer; background:#EEF2FF; color:#2563EB; border-radius:999px;
    width:56px; height:56px; min-width:56px; font-size:1.6rem; line-height:1;
    box-shadow:0 4px 0 #c7d2fe; transition:transform .08s ease;
}
.speak-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #c7d2fe; }
.speak-btn.speaking { animation:speakpulse .7s infinite; }
@keyframes speakpulse { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.14) } }
@media (prefers-reduced-motion: reduce) { .speak-btn.speaking { animation:none } }

/* ---- Certificate ---- */
/* ---- Certificate ---- */
.cert-page { background:linear-gradient(160deg,#EEF2FF,#FDF2F8); min-height:100vh; font-family:'Nunito',system-ui,sans-serif; }
.cert-wrap { max-width:680px; margin:24px auto; padding:0 14px; }
.cert {
    position:relative; background:linear-gradient(170deg,#fff 80%,#EEF2FF);
    border:10px solid #2563EB; border-radius:24px;
    padding:32px 32px 24px; text-align:center;
    box-shadow:0 24px 60px rgba(30,27,75,.22); overflow:hidden;
}
.cert-gold { border-color:#F59E0B; background:linear-gradient(170deg,#fff 80%,#FFF7E6); }
.cert::before {
    content:""; position:absolute; inset:12px; border:2px dashed rgba(37,99,235,.3);
    border-radius:16px; pointer-events:none;
}
.cert-gold::before { border-color:rgba(245,158,11,.4); }

/* corner decorations */
.cert-corner { position:absolute; font-size:1.1rem; color:rgba(37,99,235,.35); line-height:1; }
.cert-gold .cert-corner { color:rgba(245,158,11,.45); }
.cert-corner-tl { top:18px; left:18px; }
.cert-corner-tr { top:18px; right:18px; }
.cert-corner-bl { bottom:18px; left:18px; }
.cert-corner-br { bottom:18px; right:18px; }

.cert-header { display:flex; align-items:baseline; justify-content:center; gap:12px; flex-wrap:wrap; }
.cert-brand { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.4rem; color:#2563EB; }
.cert-gold .cert-brand { color:#B45309; }
.cert-star { color:#F59E0B; }
.cert-site { font-size:.78rem; color:#9ca3af; letter-spacing:.03em; }

.cert-divider { height:2px; background:linear-gradient(90deg,transparent,rgba(37,99,235,.2),transparent); margin:14px 0; border-radius:99px; }
.cert-gold .cert-divider { background:linear-gradient(90deg,transparent,rgba(245,158,11,.3),transparent); }

.cert-ribbon {
    display:inline-block; margin:6px 0 4px; background:#2563EB; color:#fff; font-weight:800;
    padding:6px 20px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem;
}
.cert-gold .cert-ribbon { background:linear-gradient(90deg,#F59E0B,#D97706); }
.cert-icon { font-size:3.8rem; margin:10px 0 4px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)); }
.cert-pre { margin:8px 0 0; color:#6b7280; font-size:.95rem; }
.cert-name { font-family:'Baloo 2',sans-serif; font-size:2.6rem; margin:2px 0 6px; color:#1e1b4b; line-height:1.15; }
.cert-line { font-size:1.05rem; color:#374151; max-width:460px; margin:0 auto 14px; line-height:1.5; }
.cert-stars { display:inline-block; background:#FFF7E6; color:#B45309; font-weight:800; padding:8px 22px; border-radius:999px; font-size:1.05rem; }
.cert-foot { display:flex; align-items:center; justify-content:space-around; gap:12px; margin:16px 8px 4px; }
.cert-foot-v { font-weight:700; color:#1e1b4b; font-size:.95rem; }
.cert-foot-k { font-size:.72rem; color:#9ca3af; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.cert-seal { font-size:2.6rem; }
.cert-tag { margin-top:12px; color:#9ca3af; font-size:.82rem; }
.cert-tag strong { color:#2563EB; }
.cert-gold .cert-tag strong { color:#B45309; }
.cert-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:18px 0; }
.subject-cert-cta { margin-top:20px; text-align:center; background:linear-gradient(150deg,#FFF7E6,#fff); }
/* cert button on day rows */
.cert-day-btn {
    display:inline-flex; align-items:center; gap:3px;
    background:#fff;
    border:1.5px solid #10B981;
    color:#065F46; font-weight:700; font-size:.68rem;
    padding:3px 9px; border-radius:999px;
    text-decoration:none; white-space:nowrap;
    transition:background .15s;
    margin-left:auto;
}
.cert-day-btn:hover { background:#F0FDF4; }
/* ---- Badge grid (kid home) ---- */
.badge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin-bottom:28px; }
.badge-card { position:relative; background:#fff; border:3px solid #E7E2FB; border-radius:18px; padding:18px 12px 14px; text-align:center; transition:transform .1s; }
.badge-card.earned { border-color:#F59E0B; background:linear-gradient(160deg,#FFF7E6,#fff); }
.badge-card.locked { opacity:.45; filter:grayscale(.6); }
.badge-icon { font-size:2.4rem; margin-bottom:6px; }
.badge-name { font-weight:800; font-size:.9rem; color:#1e1b4b; margin-bottom:4px; }
.badge-desc { font-size:.74rem; color:#6b7280; line-height:1.35; }
.badge-lock { position:absolute; top:8px; right:10px; font-size:.8rem; }
@media print { .no-print{ display:none } .cert-page{ background:#fff } .cert{ box-shadow:none } }

/* ---- Teacher panel (lesson page) ---- */
.player { max-width:680px; margin:0 auto; }
.teacher-panel {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:linear-gradient(160deg,#fff8f0,#fff3fb);
    border-right:2px solid var(--line);
    padding:20px 14px; width:110px; flex-shrink:0;
}
.teacher-label { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft); }
.teacher-arrows { display:flex; gap:6px; }
.teacher-arrow {
    background:none; border:2px solid var(--line); border-radius:50%;
    width:28px; height:28px; font-size:1rem; cursor:pointer; font-weight:800;
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    transition:background .15s,border-color .15s; line-height:1;
}
.teacher-arrow:hover { background:var(--gold); color:#fff; border-color:var(--gold); }
.teacher-avatar-wrap { position:relative; }
.teacher-img {
    width:72px; height:72px; border-radius:50%; border:3px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-size:42px; line-height:1; user-select:none;
}
.teacher-speaking-ring {
    position:absolute; inset:-5px; border-radius:50%;
    border:3px solid var(--gold); opacity:0; pointer-events:none;
    transition:opacity .2s;
}
.teacher-speaking-ring.active { opacity:1; animation:ring-pulse 1s ease-in-out infinite; }
@keyframes ring-pulse { 0%,100%{transform:scale(1);opacity:.8;} 50%{transform:scale(1.12);opacity:.35;} }
.teacher-name { font-family:'Fredoka',sans-serif; font-weight:700; font-size:.85rem; color:var(--ink); text-align:center; line-height:1.2; }
.teacher-tag  { font-size:.6rem; color:var(--ink-soft); font-weight:600; text-align:center; }
.teacher-audio-toggle {
    background:#10B981; border:none; border-radius:999px;
    padding:4px 10px; font-size:.8rem; cursor:pointer;
    transition:background .15s; line-height:1; color:#fff;
}
.teacher-audio-toggle.muted { background:#EF4444; }
@media(max-width:560px){
    .q-card { flex-direction:column; }
    .teacher-panel {
        flex-direction:row; width:100%; border-right:none;
        border-bottom:2px solid var(--line); padding:10px 16px; gap:12px;
        background:linear-gradient(90deg,#fff8f0,#fff3fb);
    }
    .teacher-label { display:none; }
}