:root {
  color-scheme: light;
  --bg: #eef5ff;
  --surface: #ffffff;
  --surface-soft: #eef5ff;
  --surface-strong: #e0edff;
  --ink: #061d4f;
  --muted: #60749a;
  --line: #d4e2f8;
  --primary: #0567f2;
  --primary-2: #00a8ff;
  --primary-dark: #003fae;
  --accent: #ff1744;
  --success: #00b74a;
  --warning: #f2b900;
  --danger: #f0183e;
  --navy: #020c25;
  --navy-2: #031d4f;
  --shadow: 0 18px 60px rgba(13, 54, 117, .12);
  --shadow-sm: 0 8px 28px rgba(13, 54, 117, .09);
  --radius: 20px;
  --radius-sm: 13px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #020817;
  --surface: #061633;
  --surface-soft: #09234e;
  --surface-strong: #0b2e64;
  --ink: #eff7ff;
  --muted: #9aabc4;
  --line: #1f3958;
  --primary: #1681ff;
  --primary-2: #00c2ff;
  --primary-dark: #045bd4;
  --navy: #010615;
  --navy-2: #031434;
  --shadow: 0 22px 70px rgba(0, 0, 0, .32);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 0%, rgba(34, 153, 255, .08), transparent 28rem),
    var(--bg);
  font-family: Tahoma, Arial, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.section { padding: 88px 0; }
.section-soft { background: color-mix(in srgb, var(--surface-soft) 68%, transparent); }
.section-heading { max-width: 690px; margin: 0 auto 42px; text-align: center; }
.section-heading.align-start { text-align: start; margin-inline: 0; }
.eyebrow { color: var(--primary); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.25; }
h2 { font-size: clamp(1.75rem, 4vw, 2.8rem); margin-bottom: 14px; }
.muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.center { text-align: center; }
.stack { display: grid; gap: 18px; }
.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: max-content; font-weight: 900; }
.brand img { width: 53px; height: 53px; filter: drop-shadow(0 6px 10px rgba(0, 94, 205, .22)); }
.brand-text { display: grid; line-height: 1.15; }
.brand-text small { color: var(--primary); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 26px; flex: 1; font-size: .92rem; font-weight: 700; }
.main-nav a { position: relative; color: var(--muted); padding: 27px 0 23px; }
.main-nav a:hover, .main-nav a.active { color: var(--primary); }
.main-nav a.active::after { content: ""; position: absolute; inset-inline: 0; bottom: 15px; height: 3px; border-radius: 9px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.icon-btn, .menu-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 1.15rem; transition: .2s ease; }
.icon-btn:hover, .menu-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.menu-btn { display: none; }
.lang-switch { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 8px 11px; font-size: .75rem; font-weight: 900; color: var(--primary); }

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary-2), var(--primary)); box-shadow: 0 10px 25px rgba(10, 126, 232, .25); }
.btn-primary:hover { box-shadow: 0 14px 34px rgba(10, 126, 232, .35); }
.btn-outline { color: var(--ink); border-color: var(--line); background: var(--surface); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { color: #fff; background: var(--danger); }
.btn-success { color: #fff; background: var(--success); }
.btn-ghost { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.btn-sm { min-height: 36px; padding: 7px 13px; border-radius: 10px; font-size: .82rem; }
.btn-block { width: 100%; }

.hero {
  overflow: hidden;
  position: relative;
  min-height: 620px;
  background:
    linear-gradient(115deg, rgba(2, 12, 37, .98), rgba(3, 61, 156, .95)),
    radial-gradient(circle at 20% 20%, #00a8ff, transparent 38%);
  color: #fff;
  border-radius: 0 0 34px 34px;
}
.hero::before { content: ""; position: absolute; width: 600px; height: 600px; inset-inline-end: -220px; top: -240px; border-radius: 50%; border: 1px solid rgba(71, 199, 255, .2); box-shadow: 0 0 0 60px rgba(71, 199, 255, .035), 0 0 0 120px rgba(71, 199, 255, .025); }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(#8bdcff 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent 20%, #000 100%); }
.hero-grid { min-height: 620px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 55px; position: relative; z-index: 2; }
.hero-copy { padding: 74px 0; }
.hero-badge { display: inline-flex; gap: 9px; align-items: center; border: 1px solid rgba(110, 216, 255, .35); background: rgba(12, 124, 218, .16); border-radius: 999px; padding: 7px 13px; color: #9ce7ff; font-size: .8rem; font-weight: 800; margin-bottom: 20px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #41ffbd; box-shadow: 0 0 0 6px rgba(65,255,189,.12); animation: pulse 1.8s infinite; }
.hero h1 { max-width: 680px; font-size: clamp(2.45rem, 5.6vw, 4.9rem); margin: 0 0 19px; letter-spacing: -.035em; }
.hero h1 span { color: #34c8ff; text-shadow: 0 0 28px rgba(39, 186, 255, .25); }
.hero-copy > p { max-width: 650px; color: #c8d8ef; font-size: 1.07rem; line-height: 1.9; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.hero-trust { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 30px; color: #c2d5eb; font-size: .83rem; }
.hero-trust span { display: flex; align-items: center; gap: 7px; }
.trust-check { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #79e7ff; background: rgba(67, 189, 255, .12); }
.academy-stage { position: relative; min-height: 450px; display: grid; place-items: center; }
.mascot-stage { --mascot-x: 0px; --mascot-y: 0px; --mascot-rotate: 0deg; isolation: isolate; }
.mascot-aura { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle, rgba(65,201,255,.3), rgba(16,119,221,.11) 48%, transparent 72%); filter: blur(2px); animation: mascotAura 3.4s ease-in-out infinite; }
.mascot-float { position: relative; z-index: 4; width: min(440px, 100%); height: 500px; animation: mascotFloat 3.8s ease-in-out infinite; filter: drop-shadow(0 30px 36px rgba(0,10,35,.38)); }
.mascot-crop { width: 100%; height: 100%; background-image: url("../img/academy-character-sheet.jpg"); background-repeat: no-repeat; background-size: 307% 236%; background-position: 50% 38%; border-radius: 48% 52% 45% 55% / 42% 44% 56% 58%; mask-image: radial-gradient(ellipse 64% 68% at 50% 51%, #000 58%, rgba(0,0,0,.9) 66%, transparent 77%); -webkit-mask-image: radial-gradient(ellipse 64% 68% at 50% 51%, #000 58%, rgba(0,0,0,.9) 66%, transparent 77%); transform: translate(var(--mascot-x), var(--mascot-y)) rotate(var(--mascot-rotate)); transition: transform .22s ease-out; }
.mascot-orbit { position: absolute; z-index: 5; width: 430px; height: 155px; border: 4px solid rgba(255,57,69,.86); border-radius: 50%; box-shadow: 0 0 26px rgba(255,48,65,.25), inset 0 0 13px rgba(255,255,255,.17); pointer-events: none; }
.mascot-orbit i { position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #ff3d43; box-shadow: 0 0 0 5px rgba(255,61,67,.16), 0 0 20px #ff3d43; top: 50%; inset-inline-start: -10px; }
.mascot-orbit.orbit-one { transform: rotate(-13deg); animation: orbitPulse 3.4s ease-in-out infinite; }
.mascot-orbit.orbit-two { width: 360px; height: 125px; border-width: 2px; border-color: rgba(105,220,255,.5); transform: rotate(18deg); animation: orbitPulseTwo 4.8s ease-in-out infinite reverse; }
.mascot-spark { position: absolute; z-index: 7; color: #76ddff; text-shadow: 0 0 18px currentColor; animation: sparkle 2.7s ease-in-out infinite; }
.spark-one { top: 15%; inset-inline-start: 10%; font-size: 1.8rem; }
.spark-two { top: 27%; inset-inline-end: 4%; font-size: 1.15rem; animation-delay: -1.2s; }
.spark-three { bottom: 17%; inset-inline-end: 14%; color: #ff5962; font-size: 2rem; animation-delay: -.6s; }
.mascot-speech { position: absolute; z-index: 8; top: 40px; inset-inline-start: 6px; padding: 10px 15px; border: 1px solid rgba(133,219,255,.34); border-radius: 16px 16px 4px 16px; background: rgba(6,39,81,.88); color: #fff; backdrop-filter: blur(12px); box-shadow: 0 14px 35px rgba(0,0,0,.24); font-size: .78rem; font-weight: 900; animation: speechPop 4.2s ease-in-out infinite; }
[dir="ltr"] .mascot-speech { border-radius: 16px 16px 16px 4px; }
.orbit { position: absolute; width: 430px; height: 205px; border: 4px solid rgba(255, 66, 66, .82); border-radius: 50%; transform: rotate(-14deg); box-shadow: 0 0 25px rgba(255, 50, 65, .26); }
.orbit::after { content: ""; position: absolute; inset: 9px; border: 2px solid rgba(255,255,255,.55); border-radius: inherit; }
.dashboard-preview { position: relative; width: min(460px, 100%); border: 1px solid rgba(141, 213, 255, .28); border-radius: 24px; padding: 18px; background: linear-gradient(160deg, rgba(10, 43, 91, .93), rgba(8, 24, 56, .98)); box-shadow: 0 32px 80px rgba(0, 8, 31, .5); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); }
[dir="ltr"] .dashboard-preview { transform: perspective(1000px) rotateY(5deg) rotateX(2deg); }
.preview-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.preview-brand { display: flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 900; }
.preview-brand img { width: 38px; }
.live-chip { color: #fff; background: #eb3d4d; border-radius: 999px; padding: 5px 9px; font-size: .67rem; font-weight: 900; }
.preview-video { min-height: 170px; border-radius: 17px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 75% 24%, rgba(44,190,255,.48), transparent 25%), linear-gradient(135deg, #0d5fac, #071b43); position: relative; overflow: hidden; }
.preview-video::before { content: "A"; position: absolute; inset-inline-end: 20px; top: -12px; font-size: 10rem; line-height: 1; color: rgba(255,255,255,.09); font-weight: 900; }
.play-ring { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); margin-bottom: 18px; }
.preview-video h3 { margin-bottom: 3px; font-size: 1rem; }
.preview-video p { margin: 0; color: #b6cce7; font-size: .75rem; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.mini-stat { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px; }
.mini-stat strong { display: block; color: #62d8ff; font-size: 1rem; }
.mini-stat span { color: #9fb5d0; font-size: .62rem; }
.float-card { position: absolute; border: 1px solid rgba(127,212,255,.23); background: rgba(6, 33, 72, .88); backdrop-filter: blur(12px); box-shadow: 0 15px 40px rgba(0,0,0,.25); border-radius: 14px; padding: 11px 14px; display: flex; gap: 9px; align-items: center; font-size: .73rem; animation: float 5s ease-in-out infinite; }
.float-card.one { top: 30px; inset-inline-end: -2px; }
.float-card.two { bottom: 25px; inset-inline-start: -20px; animation-delay: -2.4s; }
.float-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(45,180,255,.15); color: #6fdcff; }

.stats-strip { position: relative; z-index: 4; margin-top: -38px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.stat-card { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 22px 16px; border-inline-end: 1px solid var(--line); }
.stat-card:last-child { border-inline-end: 0; }
.stat-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-soft); color: var(--primary); font-size: 1.25rem; }
.stat-card strong { font-size: 1.35rem; display: block; line-height: 1.1; }
.stat-card span { color: var(--muted); font-size: .74rem; }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pricing-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 26px; box-shadow: var(--shadow-sm); transition: .25s ease; overflow: hidden; }
.pricing-card:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.pricing-card.featured { border: 2px solid var(--primary); transform: translateY(-8px); }
.pricing-card.featured:hover { transform: translateY(-12px); }
.pricing-ribbon { position: absolute; top: 13px; inset-inline-end: -35px; width: 135px; text-align: center; transform: rotate(38deg); background: var(--primary); color: #fff; font-size: .65rem; font-weight: 900; padding: 4px; }
[dir="ltr"] .pricing-ribbon { transform: rotate(38deg); }
.plan-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: var(--primary); background: var(--surface-soft); font-size: 1.4rem; }
.pricing-card h3 { margin: 16px 0 5px; }
.price { font-size: 2.4rem; font-weight: 950; color: var(--primary); line-height: 1; }
.price small { color: var(--muted); font-size: .68rem; font-weight: 600; }
.feature-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; min-height: 105px; }
.feature-list li { color: var(--muted); font-size: .82rem; display: flex; gap: 8px; align-items: flex-start; }
.feature-list li::before { content: "✓"; color: var(--success); font-weight: 900; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card, .course-card, .panel, .auth-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.feature-card { padding: 26px; transition: .25s ease; }
.feature-card:hover { transform: translateY(-5px); }
.feature-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary-2) 20%, var(--surface)), color-mix(in srgb, var(--primary) 12%, var(--surface))); color: var(--primary); font-size: 1.35rem; }
.feature-card h3 { margin: 18px 0 8px; font-size: 1.05rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .85rem; }
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.course-card { overflow: hidden; transition: .25s ease; }
.course-card:hover { transform: translateY(-5px); }
.course-cover { height: 180px; position: relative; padding: 19px; color: #fff; overflow: hidden; background: linear-gradient(135deg, #05265d, #0783e7); }
.course-cover::after { content: ""; position: absolute; width: 180px; height: 180px; border: 28px solid rgba(255,255,255,.08); border-radius: 50%; inset-inline-end: -70px; top: -60px; }
.course-cover.history { background: linear-gradient(135deg, #4f2d18, #d99737); }
.course-cover.science { background: linear-gradient(135deg, #05433b, #08a887); }
.course-cover .category { display: inline-flex; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 9px; font-size: .68rem; }
.course-mark { position: absolute; inset-inline-end: 18px; bottom: 7px; font-size: 6rem; font-weight: 950; opacity: .18; }
.course-body { padding: 20px; }
.course-body h3 { font-size: 1rem; margin-bottom: 7px; }
.course-body p { color: var(--muted); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.teacher-line { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .76rem; }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary-2), var(--primary-dark)); color: #fff; font-weight: 900; }
.course-footer { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 13px; display: flex; align-items: center; justify-content: space-between; }
.course-footer strong { color: var(--primary); }

.cta { border-radius: 28px; padding: 44px; display: flex; align-items: center; gap: 30px; background: linear-gradient(115deg, #052456, #087fd8); color: #fff; position: relative; overflow: hidden; }
.cta::after { content: "A"; position: absolute; inset-inline-end: 5%; top: -60%; font-size: 20rem; line-height: 1; font-weight: 950; opacity: .045; }
.cta-copy { max-width: 720px; position: relative; z-index: 2; }
.cta h2 { margin-bottom: 8px; }
.cta p { color: #c9def4; margin-bottom: 0; }
.cta-actions { margin-inline-start: auto; display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }
.cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }

.site-footer { color: #c0cde0; background: var(--navy); padding: 55px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 42px; }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { color: #8fa6c5; font-size: .82rem; max-width: 340px; }
.footer-title { color: #fff; font-weight: 900; margin-bottom: 16px; }
.footer-links { display: grid; gap: 9px; color: #93a9c6; font-size: .82rem; }
.footer-links a:hover { color: #58d1ff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); margin-top: 38px; padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; color: #7890b0; font-size: .76rem; flex-wrap: wrap; }
.whatsapp-float { position: fixed; z-index: 45; bottom: 22px; inset-inline-start: 22px; display: flex; align-items: center; gap: 9px; color: #fff; background: #17b965; border-radius: 999px; padding: 10px 15px 10px 11px; box-shadow: 0 15px 35px rgba(22, 181, 99, .32); font-weight: 900; font-size: .8rem; }
.whatsapp-float i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); font-style: normal; font-size: 1.1rem; }
.mascot-helper { --mascot-x:0px;--mascot-y:0px;--mascot-rotate:0deg; position: fixed; z-index: 46; bottom: 18px; inset-inline-end: 20px; width: 104px; height: 122px; filter: drop-shadow(0 14px 20px rgba(0,27,75,.28)); }
.mascot-helper-art { display: block; width: 100%; height: 100%; background-image: url("../img/academy-character-sheet.jpg"); background-size: 307% 236%; background-position: 50% 38%; background-repeat: no-repeat; border-radius: 52% 48% 50% 50%; mask-image: radial-gradient(ellipse 66% 70% at 50% 51%,#000 58%,transparent 78%); -webkit-mask-image: radial-gradient(ellipse 66% 70% at 50% 51%,#000 58%,transparent 78%); transform: translate(var(--mascot-x),var(--mascot-y)) rotate(var(--mascot-rotate)); animation: helperWiggle 4s ease-in-out infinite; transition: transform .2s ease-out; }
.mascot-helper-bubble { position: absolute; z-index: 3; bottom: 92px; inset-inline-end: 70px; min-width: max-content; padding: 7px 10px; border: 1px solid var(--line); border-radius: 11px 11px 3px 11px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-size: .68rem; font-weight: 900; opacity: 0; transform: translateY(8px) scale(.94); transition: .2s ease; }
[dir="ltr"] .mascot-helper-bubble { border-radius: 11px 11px 11px 3px; }
.mascot-helper:hover .mascot-helper-bubble,.mascot-helper:focus-visible .mascot-helper-bubble { opacity: 1; transform: translateY(0) scale(1); }
.mascot-online-dot { position: absolute; z-index: 4; width: 15px; height: 15px; bottom: 16px; inset-inline-end: 11px; border: 3px solid var(--surface); border-radius: 50%; background: #20ce78; box-shadow: 0 0 0 5px rgba(32,206,120,.13); }
.demo-login-box { margin-top: 16px; padding: 13px; border: 1px dashed color-mix(in srgb,var(--primary) 38%,var(--line)); border-radius: 13px; background: var(--surface-soft); text-align: center; }
.demo-login-box>span { display: block; color: var(--muted); font-size: .7rem; font-weight: 800; margin-bottom: 8px; }
.demo-login-actions { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.demo-login-box>a { display: inline-block; margin-top: 8px; color: var(--primary); font-size: .68rem; font-weight: 800; }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--surface); }
.auth-visual { color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; background: linear-gradient(135deg, #031735, #075eb7 60%, #06aadd); }
.auth-visual::after { content: ""; width: 560px; height: 560px; position: absolute; bottom: -300px; inset-inline-end: -180px; border: 70px solid rgba(255,255,255,.055); border-radius: 50%; }
.auth-visual .brand { color: #fff; position: relative; z-index: 2; }
.auth-message { position: relative; z-index: 2; max-width: 570px; }
.auth-message h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); }
.auth-message p { color: #c6daf0; font-size: 1.05rem; }
.auth-benefits { display: grid; gap: 12px; position: relative; z-index: 2; }
.auth-benefit { display: flex; align-items: center; gap: 10px; color: #d4e8fa; font-size: .86rem; }
.auth-benefit i { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.11); font-style: normal; }
.auth-form-wrap { display: grid; place-items: center; padding: 50px 28px; background: var(--bg); }
.auth-card { width: min(500px, 100%); padding: 34px; }
.auth-card h2 { font-size: 1.8rem; margin-bottom: 5px; }
.auth-card > p { color: var(--muted); margin-bottom: 25px; }
.auth-home { display: inline-flex; margin-bottom: 18px; color: var(--primary); font-weight: 800; font-size: .8rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-group { display: grid; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: .78rem; font-weight: 800; color: var(--ink); }
.field, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="datetime-local"], select, textarea {
  width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); padding: 10px 13px; outline: none; transition: .2s ease;
}
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.input-icon { position: relative; }
.input-icon span { position: absolute; top: 50%; inset-inline-start: 13px; transform: translateY(-50%); color: var(--muted); }
.input-icon input { padding-inline-start: 40px; }
.form-note { color: var(--muted); font-size: .7rem; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); }
.checkbox input { accent-color: var(--primary); }

.flash-wrap { position: fixed; z-index: 100; width: min(430px, calc(100% - 28px)); top: 88px; inset-inline-end: 16px; display: grid; gap: 9px; }
.flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 13px; border: 1px solid var(--line); padding: 12px 14px; background: var(--surface); box-shadow: var(--shadow); font-size: .82rem; }
.flash-success { border-inline-start: 5px solid var(--success); }
.flash-warning { border-inline-start: 5px solid var(--warning); }
.flash-danger, .flash-error { border-inline-start: 5px solid var(--danger); }
.flash button { border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; }

.dashboard-shell { min-height: 100vh; display: grid; grid-template-columns: 265px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 20px 14px; color: #c8d7eb; background: linear-gradient(180deg, #061d40, #03142e); overflow-y: auto; }
.sidebar .brand { color: #fff; padding: 5px 10px 24px; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 17px; }
.sidebar .brand img { width: 47px; }
.side-label { color: #627fa6; font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; padding: 12px 12px 6px; }
.side-nav { display: grid; gap: 5px; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: #9cb2ce; border-radius: 11px; font-size: .82rem; font-weight: 700; }
.side-link:hover, .side-link.active { color: #fff; background: linear-gradient(90deg, rgba(17, 146, 235, .32), rgba(18, 117, 216, .12)); }
.side-link.active { box-shadow: inset 3px 0 0 #26baff; }
[dir="rtl"] .side-link.active { box-shadow: inset -3px 0 0 #26baff; }
.side-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.055); }
.sidebar-user { border-top: 1px solid rgba(255,255,255,.08); margin-top: 20px; padding: 18px 10px 3px; display: flex; align-items: center; gap: 10px; }
.sidebar-user .avatar { flex: 0 0 40px; }
.sidebar-user strong { display: block; color: #fff; font-size: .78rem; }
.sidebar-user span { color: #7993b3; font-size: .65rem; }
.dashboard-main { min-width: 0; background: var(--bg); }
.dashboard-topbar { min-height: 76px; padding: 12px 28px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 35; background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.dashboard-topbar h1 { font-size: 1.15rem; margin: 0; }
.dashboard-topbar p { color: var(--muted); font-size: .69rem; margin: 0; }
.mobile-side-toggle { display: none; }
.dashboard-content { padding: 28px; }
.dash-grid { display: grid; gap: 18px; }
.dash-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.dash-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dash-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.metric-card { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); padding: 20px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 15px; }
.metric-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--surface-soft); font-size: 1.25rem; }
.metric-card strong { display: block; font-size: 1.5rem; line-height: 1.15; }
.metric-card span { color: var(--muted); font-size: .72rem; }
.panel { padding: 22px; overflow: hidden; }
.announcement-banner { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line)); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface)); box-shadow:var(--shadow-sm); }
.announcement-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(135deg,var(--primary-2),var(--primary)); }
.announcement-banner strong { font-size:.82rem; }
.announcement-banner p { margin:3px 0 0; color:var(--muted); font-size:.72rem; }
.quiz-card { border:1px solid var(--line); border-radius:17px; background:var(--surface); padding:20px; box-shadow:var(--shadow-sm); }
.quiz-card h3 { margin:12px 0 6px; font-size:1rem; }
.quiz-card p { color:var(--muted); font-size:.76rem; }
.quiz-meta { display:flex; gap:8px; flex-wrap:wrap; margin:13px 0; }
.question-card { border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:20px; margin-bottom:14px; }
.question-card legend { font-weight:900; padding:0 5px; }
.quiz-option { display:flex; align-items:center; gap:10px; margin-top:9px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; color:var(--muted); cursor:pointer; transition:.2s; }
.quiz-option:hover { border-color:var(--primary); color:var(--ink); background:var(--surface-soft); }
.quiz-option input { accent-color:var(--primary); }
.result-score { width:120px; height:120px; margin:0 auto 18px; display:grid; place-items:center; border:8px solid color-mix(in srgb,var(--primary) 18%,var(--line)); border-top-color:var(--primary); border-radius:50%; color:var(--primary); font-size:1.65rem; font-weight:950; }
.certificate-card { position:relative; overflow:hidden; border:1px solid color-mix(in srgb,#d6ad50 55%,var(--line)); border-radius:18px; background:linear-gradient(135deg,#fffdf7,var(--surface)); padding:24px; box-shadow:var(--shadow-sm); }
:root[data-theme="dark"] .certificate-card { background:linear-gradient(135deg,#2a2517,var(--surface)); }
.certificate-card::after { content:"A"; position:absolute; inset-inline-end:-10px; bottom:-55px; font-size:11rem; color:rgba(205,164,69,.08); font-weight:950; }
.certificate-card>* { position:relative; z-index:1; }
.generated-codes-panel { margin-bottom:18px; border-color:color-mix(in srgb,var(--success) 45%,var(--line)); }
.generated-code-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.generated-code { display:grid; gap:4px; padding:14px; border:1px dashed color-mix(in srgb,var(--primary) 45%,var(--line)); border-radius:13px; background:var(--surface-soft); color:var(--ink); cursor:pointer; }
.generated-code strong,.code-token { font-family:Consolas,"Courier New",monospace; letter-spacing:.06em; }
.generated-code small { color:var(--muted); font-size:.63rem; }
.generated-code.is-copied,.copy-mini.is-copied { color:var(--success); border-color:var(--success); }
.copy-mini { margin-inline-start:5px; border:0; background:transparent; color:var(--primary); cursor:pointer; }
.redeem-layout { align-items:start; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.redeem-panel { text-align:center; }
.redeem-icon { width:76px; height:76px; display:grid; place-items:center; margin:0 auto 15px; border-radius:22px; color:#fff; background:linear-gradient(135deg,var(--primary-2),var(--primary)); box-shadow:0 16px 35px color-mix(in srgb,var(--primary) 28%,transparent); font-size:2rem; }
.code-input { min-height:58px!important; text-align:center; font:900 1.25rem/1 Consolas,"Courier New",monospace; letter-spacing:.12em; text-transform:uppercase; }
.security-note { display:flex; align-items:flex-start; gap:9px; margin-top:15px; padding:12px; border-radius:12px; text-align:start; color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--surface)); }
.security-note p { margin:0; color:var(--muted); font-size:.7rem; }
.admin-reel-grid,.public-reel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.admin-reel-card,.public-reel-card { overflow:hidden; border:1px solid var(--line); border-radius:19px; background:var(--surface); box-shadow:var(--shadow-sm); }
.admin-reel-preview,.public-reel-media { position:relative; aspect-ratio:9/16; max-height:560px; overflow:hidden; background:#03142d; }
.admin-reel-preview video,.admin-reel-preview iframe,.public-reel-media video,.public-reel-media iframe { width:100%; height:100%; display:block; border:0; object-fit:cover; }
.admin-reel-body,.public-reel-body { padding:17px; }
.admin-reel-body h3,.public-reel-body h3 { margin:10px 0 5px; font-size:.95rem; }
.admin-reel-body p,.public-reel-body p { color:var(--muted); font-size:.75rem; min-height:35px; }
.reel-admin-chip { position:absolute; top:12px; inset-inline-start:12px; padding:6px 10px; border-radius:999px; color:#fff; background:rgba(3,20,45,.78); backdrop-filter:blur(10px); font-size:.66rem; font-weight:900; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-head h2, .panel-head h3 { font-size: 1rem; margin: 0; }
.panel-head p { margin: 2px 0 0; color: var(--muted); font-size: .69rem; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .78rem; }
th { text-align: start; color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .05em; padding: 11px 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--surface-soft) 55%, transparent); }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 9px; font-size: .65rem; font-weight: 900; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-active, .badge-approved, .badge-live, .badge-converted { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.badge-pending, .badge-scheduled, .badge-new { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.badge-suspended, .badge-rejected, .badge-ended, .badge-lost, .badge-disabled, .badge-expired { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.badge-contacted, .badge-student, .badge-teacher, .badge-admin, .badge-manager, .badge-parent, .badge-used { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.empty-state { padding: 42px 20px; text-align: center; color: var(--muted); }
.empty-state i { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 18px; background: var(--surface-soft); font-style: normal; font-size: 1.5rem; }
.page-tabs { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 20px; padding-bottom: 2px; }
.page-tab { white-space: nowrap; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); padding: 8px 14px; font-size: .75rem; font-weight: 800; }
.page-tab.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.progress { width: 100%; height: 8px; border-radius: 99px; background: var(--surface-strong); overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: inherit; }
.lesson-list { display: grid; gap: 10px; }
.lesson-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; padding: 12px; }
.lesson-number { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-soft); color: var(--primary); font-weight: 900; }
.lesson-row h4 { margin: 0; font-size: .82rem; }
.lesson-row p { margin: 2px 0 0; color: var(--muted); font-size: .68rem; }
.live-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 18px; position: relative; overflow: hidden; }
.live-card.is-live { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.live-card.is-live::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--danger); }
.live-card h3 { font-size: .95rem; margin: 12px 0 7px; }
.live-card p { color: var(--muted); font-size: .75rem; }
.video-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 16px; background: #020a14; }
.live-room { min-height: calc(100vh - 150px); }
.zoom-launch { min-height: 480px; display: grid; place-items: center; align-content: center; gap: 16px; text-align: center; padding: 38px; border: 1px dashed color-mix(in srgb,var(--primary) 42%,var(--line)); border-radius: 20px; background: radial-gradient(circle at center,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface)); }
.zoom-launch h2,.zoom-launch p { max-width: 650px; margin: 0; }
.zoom-logo { width: 110px; height: 110px; display: grid; place-items: center; border-radius: 32px; color: #fff; background: linear-gradient(135deg,#2d8cff,#0567f2); box-shadow: 0 22px 55px rgba(5,103,242,.3); font-size: 1.5rem; font-weight: 950; }
.permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.book-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.book-cover,.book-cover-placeholder { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: linear-gradient(135deg,var(--navy-2),var(--primary)); }
.book-cover-placeholder { display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 4.5rem; }
.book-body { display: grid; gap: 12px; padding: 20px; }
.book-body h3,.book-body p { margin: 0; }
.book-body p { min-height: 46px; color: var(--muted); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.modal { position: fixed; z-index: 120; inset: 0; display: none; place-items: center; padding: 22px; background: rgba(0, 9, 26, .62); backdrop-filter: blur(8px); }
.modal.is-open { display: grid; }
.modal-card { width: min(650px, 100%); max-height: calc(100vh - 44px); overflow-y: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.35); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.modal-head h3 { margin: 0; font-size: 1.05rem; }
.modal-close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--surface-soft); color: var(--ink); cursor: pointer; }
.install-shell { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at top, rgba(16,151,244,.18), transparent 40%), var(--bg); }
.install-card { width: min(800px, 100%); border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); padding: 35px; }
.install-logo { width: 82px; margin: 0 auto 15px; }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.account-card { border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); padding: 13px; font-size: .73rem; overflow-wrap: anywhere; }
.account-card strong { display: block; color: var(--primary); margin-bottom: 5px; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 5px rgba(65,255,189,.12); } 50% { box-shadow: 0 0 0 11px rgba(65,255,189,0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mascotFloat { 0%,100% { transform: translateY(2px) rotate(-1deg); } 48% { transform: translateY(-15px) rotate(1.6deg); } 72% { transform: translateY(-8px) rotate(.2deg); } }
@keyframes mascotAura { 0%,100% { transform: scale(.94); opacity:.7; } 50% { transform: scale(1.08); opacity:1; } }
@keyframes orbitPulse { 0%,100% { transform: rotate(-13deg) scaleX(1); } 50% { transform: rotate(-7deg) scaleX(1.06); } }
@keyframes orbitPulseTwo { 0%,100% { transform: rotate(18deg) scale(.95); opacity:.55; } 50% { transform: rotate(25deg) scale(1.06); opacity:1; } }
@keyframes sparkle { 0%,100% { opacity:.15; transform: scale(.65) rotate(0); } 50% { opacity:1; transform: scale(1.18) rotate(25deg); } }
@keyframes speechPop { 0%,15%,100% { opacity:0; transform:translateY(8px) scale(.9); } 25%,76% { opacity:1; transform:translateY(0) scale(1); } 86% { opacity:0; transform:translateY(-4px) scale(.96); } }
@keyframes helperWiggle { 0%,100% { margin-top:0; } 45% { margin-top:-8px; } 55% { margin-top:-8px; } 70% { margin-top:-2px; } }

@media (max-width: 1050px) {
  .main-nav { display: none; position: absolute; top: 77px; inset-inline: 16px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
  .main-nav.is-open { display: grid; gap: 0; }
  .main-nav a { padding: 11px 10px; }
  .main-nav a.active::after { display: none; }
  .menu-btn { display: grid; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid, .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 2 / -1; }
  .dash-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .generated-code-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 820px) {
  .nav-actions .btn { display: none; }
  .hero, .hero-grid { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { padding: 70px 0 10px; }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .academy-stage { min-height: 400px; }
  .mascot-float { height: 440px; width: min(390px,100%); }
  .mascot-orbit { width: 380px; }
  .dashboard-preview { transform: none; }
  [dir="ltr"] .dashboard-preview { transform: none; }
  .float-card.one { inset-inline-end: 0; }
  .float-card.two { inset-inline-start: 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(2) { border-inline-end: 0; }
  .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cta { display: grid; text-align: center; }
  .cta-actions { margin-inline: auto; justify-content: center; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { min-height: 350px; padding: 35px 28px; }
  .auth-benefits { grid-template-columns: repeat(2, 1fr); }
  .dashboard-shell { grid-template-columns: 78px 1fr; }
  .sidebar { padding-inline: 9px; }
  .sidebar .brand-text, .side-label, .side-link > span:last-child, .sidebar-user > div:last-child { display: none; }
  .sidebar .brand { justify-content: center; padding-inline: 0; }
  .side-link { justify-content: center; padding-inline: 6px; }
  .sidebar-user { justify-content: center; padding-inline: 0; }
  .dashboard-content { padding: 20px; }
  .dash-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .admin-reel-grid,.public-reel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .container { width: min(100% - 22px, 1180px); }
  .section { padding: 65px 0; }
  .nav-wrap { min-height: 68px; }
  .brand-text strong { font-size: .83rem; }
  .brand img { width: 44px; height: 44px; }
  .main-nav { top: 69px; }
  .hero h1 { font-size: 2.45rem; }
  .hero-copy { padding-top: 52px; }
  .academy-stage { min-height: 350px; }
  .mascot-float { height: 365px; width: 330px; }
  .mascot-orbit { width: 320px; height: 120px; }
  .mascot-orbit.orbit-two { width: 275px; height: 95px; }
  .mascot-speech { top: 20px; }
  .orbit { width: 320px; height: 165px; }
  .dashboard-preview { padding: 13px; }
  .preview-video { min-height: 140px; }
  .float-card { display: none; }
  .stats-strip { margin-top: -18px; }
  .stat-card { padding: 16px 9px; gap: 8px; }
  .stat-icon { width: 37px; height: 37px; }
  .stat-card strong { font-size: 1.05rem; }
  .pricing-grid, .features-grid, .courses-grid, .footer-grid, .form-grid, .account-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }
  .footer-grid > :last-child { grid-column: auto; }
  .footer-bottom { justify-content: center; text-align: center; }
  .cta { padding: 30px 20px; }
  .auth-form-wrap { padding: 30px 12px; }
  .auth-card { padding: 24px 18px; }
  .auth-visual { display: none; }
  .dashboard-shell { display: block; }
  .sidebar { position: fixed; z-index: 90; inset-block: 0; inset-inline-start: -290px; width: 265px; height: 100vh; transition: .25s ease; }
  [dir="rtl"] .sidebar { inset-inline-start: auto; inset-inline-end: -290px; }
  .sidebar.is-open { inset-inline-start: 0; }
  [dir="rtl"] .sidebar.is-open { inset-inline-end: 0; }
  .sidebar .brand-text, .side-label, .side-link > span:last-child, .sidebar-user > div:last-child { display: initial; }
  .side-link { justify-content: flex-start; padding-inline: 12px; }
  [dir="rtl"] .side-link { justify-content: flex-start; }
  .sidebar-user { justify-content: flex-start; padding-inline: 10px; }
  .mobile-side-toggle { display: grid; }
  .dashboard-topbar { padding: 10px 13px; min-height: 65px; }
  .dashboard-content { padding: 14px; }
  .dash-grid.cols-4, .dash-grid.cols-3, .dash-grid.cols-2 { grid-template-columns: 1fr; }
  .generated-code-grid,.admin-reel-grid,.public-reel-grid,.library-grid,.permission-grid { grid-template-columns:1fr; }
  .redeem-layout { grid-template-columns:1fr; }
  .admin-reel-preview,.public-reel-media { max-height:620px; }
  .panel { padding: 17px; }
  .whatsapp-float { bottom: 13px; inset-inline-start: 13px; padding: 8px; }
  .whatsapp-float span { display: none; }
  .mascot-helper { width: 79px; height: 94px; bottom: 8px; inset-inline-end: 8px; }
  .mascot-helper-bubble { bottom: 74px; inset-inline-end: 54px; }
  .form-group.full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* ========================================================================== 
   ALASSEMA ACADEMY — REFERENCE DESIGN V4
   Visual layer inspired by the supplied academy composition. Layout rules
   below do not change application permissions, data, or dashboard behavior.
   ========================================================================== */

:root {
  --bg: #edf4fd;
  --surface-soft: #e5f0ff;
  --surface-strong: #d7e8ff;
  --ink: #061d4f;
  --muted: #58709a;
  --line: #c9dbf2;
  --primary: #086df3;
  --primary-2: #00bcff;
  --primary-dark: #003b9b;
  --accent: #ff234d;
  --success: #00b85b;
  --warning: #ffd21f;
  --navy: #00112f;
  --navy-2: #003477;
}

:root[data-theme="dark"] {
  --bg: #010818;
  --surface: #061a3a;
  --surface-soft: #092858;
  --surface-strong: #0c3774;
  --ink: #f5f9ff;
  --muted: #a7bddc;
  --line: #1d4774;
  --primary: #147fff;
  --primary-2: #00d1ff;
  --primary-dark: #0052c5;
  --navy: #000714;
  --navy-2: #00215b;
}

.site-header {
  color: #fff;
  border-bottom: 1px solid rgba(90, 176, 255, .26);
  background: rgba(0, 18, 55, .94);
  box-shadow: 0 8px 28px rgba(0, 8, 33, .23);
}
.site-header .nav-wrap { min-height: 62px; gap: 15px; }
.site-header .brand { gap: 8px; }
.site-header .brand img { width: 42px; height: 42px; filter: drop-shadow(0 0 12px rgba(0, 178, 255, .42)); }
.site-header .brand-text strong { color: #fff; font-size: .86rem; }
.site-header .brand-text small { color: #52d8ff; font-size: .52rem; }
.site-header .main-nav { gap: 18px; font-size: .75rem; }
.site-header .main-nav a { color: #c6dcfb; padding: 21px 0 18px; white-space: nowrap; }
.site-header .main-nav a:hover,.site-header .main-nav a.active { color: #fff; }
.site-header .main-nav a.active::after { bottom: 9px; background: linear-gradient(90deg,#00d4ff,#1677ff); }
.header-search { width: clamp(150px,17vw,245px); height: 36px; position: relative; flex: 0 1 auto; }
.header-search input { width: 100%; height: 100%; border: 1px solid rgba(118,188,255,.25); border-radius: 999px; padding: 0 38px 0 14px; background: rgba(1,28,76,.7); color: #fff; outline: 0; font-size: .68rem; }
[dir="rtl"] .header-search input { padding: 0 14px 0 38px; }
.header-search input::placeholder { color: #8faed8; }
.header-search input:focus { border-color: #33c7ff; box-shadow: 0 0 0 3px rgba(0,189,255,.12); }
.header-search button { position: absolute; inset-inline-end: 5px; top: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #d9efff; cursor: pointer; font-size: 1rem; }
.site-header .nav-actions { gap: 6px; }
.site-header .icon-btn,.site-header .lang-switch,.site-header .menu-btn { color: #fff; border-color: rgba(119,187,255,.3); background: rgba(6,45,105,.72); }
.site-header .icon-btn { width: 36px; height: 36px; }
.site-header .lang-switch { padding: 7px 9px; }
.site-header .btn { min-height: 36px; padding: 7px 12px; font-size: .7rem; }
.site-header .btn-outline { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.04); }
.site-header .header-register { background: linear-gradient(135deg,#00a9ff,#086cf1); }

.capital-home { overflow: hidden; background: var(--bg); }
.capital-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 625px;
  padding: 40px 0 0;
  color: #fff;
  border-radius: 0 0 38px 38px;
  background:
    radial-gradient(circle at 55% -15%, rgba(29,132,255,.42), transparent 38%),
    radial-gradient(circle at 4% 72%, rgba(0,163,255,.2), transparent 28%),
    linear-gradient(118deg,#00102d 0%,#002b70 45%,#003f92 68%,#00163f 100%);
}
.capital-hero::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.42; background-image:radial-gradient(rgba(148,218,255,.9) .8px,transparent .8px); background-size:35px 35px; mask-image:linear-gradient(90deg,#000,transparent 54%,#000); }
.capital-hero::after { content:""; position:absolute; z-index:-1; width:780px; height:780px; border-radius:50%; inset-inline-end:-260px; top:-340px; border:1px solid rgba(75,191,255,.17); box-shadow:0 0 0 85px rgba(21,143,255,.035),0 0 0 170px rgba(21,143,255,.025); }
.capital-hero-grid { min-height: 445px; display:grid; grid-template-columns:minmax(220px,300px) minmax(420px,1fr) minmax(250px,340px); grid-template-areas:"brand copy mascot"; align-items:center; gap:28px; position:relative; z-index:2; }
.hero-brand-visual { grid-area:brand; position:relative; min-height:390px; display:grid; place-items:center; align-content:center; }
.hero-big-logo { width:min(250px,92%); position:relative; z-index:3; filter:drop-shadow(0 18px 26px rgba(0,0,0,.42)); }
.hero-logo-orbit { position:absolute; z-index:1; width:270px; height:105px; border:7px solid #ff3345; border-radius:50%; transform:rotate(-11deg); box-shadow:0 0 22px rgba(255,39,63,.5),inset 0 0 10px rgba(255,255,255,.38); }
.hero-logo-orbit::after { content:""; position:absolute; inset:8px; border:2px solid rgba(255,255,255,.88); border-radius:inherit; }
.hero-logo-name { position:relative; z-index:4; margin-top:-25px; display:grid; justify-items:center; font-weight:950; text-align:center; text-shadow:0 3px 0 #003788,0 7px 18px #000a; }
.hero-logo-name strong { font-size:1.7rem; color:#fff; }
.hero-logo-name span { letter-spacing:.42em; color:#ff3d3d; font-size:.83rem; background:#fff; text-shadow:none; padding:1px 12px 1px 17px; border-radius:999px; }
.hero-brand-mascot { position:absolute; z-index:5; width:125px; height:145px; inset-inline-end:-3px; top:67px; background:url("../img/academy-character-sheet.jpg") 51% 37%/308% 236% no-repeat; border-radius:48%; filter:drop-shadow(0 12px 14px rgba(0,0,0,.34)); animation:mascotFloat 3.8s ease-in-out infinite; }

.capital-hero-copy { grid-area:copy; text-align:center; align-self:center; padding-top:4px; }
.hero-welcome { display:block; color:#ffdf2f; font-size:1.28rem; font-weight:950; margin-bottom:5px; text-shadow:0 0 16px rgba(255,215,29,.3); }
.hero-title-plate { width:min(100%,500px); margin:0 auto 10px; display:grid; justify-items:center; transform:rotate(-1.5deg); }
.hero-title-plate strong { width:100%; color:#03215e; background:#fff; border-radius:13px 28px 13px 28px; padding:8px 25px 9px; font-size:clamp(2.05rem,3.8vw,3.25rem); line-height:1.05; box-shadow:0 13px 30px rgba(0,12,54,.33); }
.hero-title-plate span { width:76%; margin-top:-3px; padding:1px 10px 2px; color:#f42537; background:#fff; border-radius:0 0 18px 18px; letter-spacing:.36em; font-size:1.12rem; font-weight:950; transform:rotate(1.5deg); }
.capital-hero-copy h1 { margin:11px 0 14px; font-size:clamp(1.45rem,2.3vw,2.15rem); color:#f8fbff; text-shadow:0 5px 18px rgba(0,0,0,.32); }
.hero-service-pills { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.hero-service-pills span { min-height:35px; display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid rgba(106,195,255,.35); border-radius:999px; background:rgba(1,39,101,.56); color:#f5fbff; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); font-size:.75rem; }
.capital-hero-actions { display:flex; align-items:stretch; justify-content:center; gap:9px; flex-wrap:wrap; margin-top:16px; }
.capital-action { min-height:48px; min-width:150px; display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:8px 17px; border-radius:13px; border:1px solid rgba(255,255,255,.22); font-size:.78rem; font-weight:900; box-shadow:0 10px 22px rgba(0,7,35,.25); transition:.2s ease; }
.capital-action:hover { transform:translateY(-3px); filter:brightness(1.07); }
.action-whatsapp { min-width:195px; flex-wrap:wrap; background:linear-gradient(135deg,#00bc57,#04a348); }
.action-whatsapp b { width:100%; margin-top:-8px; font-size:.78rem; }
.action-whatsapp span { font-size:1.3rem; }
.action-courses { background:linear-gradient(135deg,#00b9ff,#0872f7); }
.action-video { background:rgba(1,31,86,.72); }
.action-video i { width:31px; height:31px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; font-style:normal; }

.capital-mascot-stage { grid-area:mascot; position:relative; min-height:410px; display:grid; place-items:center; }
.capital-mascot-stage .mascot-float { width:330px; height:405px; }
.capital-mascot-stage .mascot-aura { width:360px; height:360px; }
.capital-mascot-stage .mascot-orbit { width:350px; height:135px; }
.capital-mascot-stage .mascot-orbit.orbit-two { width:300px; height:108px; }
.floating-app-icon { position:absolute; z-index:9; width:54px; height:54px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,#2ac9ff,#0872f0); border:1px solid rgba(255,255,255,.42); box-shadow:0 10px 28px rgba(0,130,255,.38); color:#fff; font-size:1.35rem; animation:float 4s ease-in-out infinite; }
.app-mail { top:30px; inset-inline-end:4px; }
.app-play { bottom:90px; inset-inline-end:-8px; animation-delay:-1.2s; }
.app-shield { top:150px; inset-inline-start:-18px; animation-delay:-2.2s; }
.hero-star { position:absolute; color:#8edfff; text-shadow:0 0 16px currentColor; animation:sparkle 3.2s ease-in-out infinite; }
.star-a { top:100px; left:3%; font-size:1.6rem; }.star-b { top:220px; left:35%; }.star-c { right:43%; top:70px; color:#fff; }

.capital-metrics { position:relative; z-index:5; min-height:92px; margin-top:7px; display:grid; grid-template-columns:1.3fr repeat(5,1fr); align-items:center; border:1px solid rgba(94,181,255,.28); border-radius:20px 20px 0 0; background:linear-gradient(90deg,rgba(0,22,62,.96),rgba(3,52,119,.96)); box-shadow:0 -8px 30px rgba(0,13,47,.25); overflow:hidden; }
.discover-chip { height:100%; display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,.96); color:#052559; }
.discover-mascot { width:65px; height:70px; flex:0 0 auto; background:url("../img/academy-character-sheet.jpg") 51% 37%/308% 236% no-repeat; border-radius:46%; }
.discover-chip strong { font-size:.78rem; }
.capital-metric { min-width:0; padding:9px 8px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:7px; align-items:center; border-inline-start:1px solid rgba(255,255,255,.09); }
.capital-metric i { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(0,216,255,.12); color:#56dcff; font-style:normal; font-size:1.15rem; }
.capital-metric strong { color:#ffe327; font-size:1rem; line-height:1.1; }
.capital-metric span { color:#d2e5ff; font-size:.6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.reference-market { position:relative; padding:42px 0 56px; background:linear-gradient(180deg,#eaf4ff 0%,#f8fbff 72%,transparent); }
:root[data-theme="dark"] .reference-market { background:linear-gradient(180deg,#03112b,#061a38 70%,transparent); }
.reference-market::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.42; background:radial-gradient(circle at 12% 35%,rgba(0,139,255,.16),transparent 22rem),radial-gradient(circle at 88% 75%,rgba(35,189,255,.11),transparent 20rem); }
.reference-market-grid { position:relative; display:grid; grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(245px,300px); grid-template-areas:"phone plans live"; align-items:start; gap:16px; }
.subscription-hub { grid-area:plans; min-width:0; }
.reference-heading { display:flex; align-items:center; justify-content:center; gap:8px; margin:-4px 0 15px; }
.reference-heading h2 { margin:0; font-size:clamp(1.5rem,2.5vw,2.25rem); color:#061d4f; }
:root[data-theme="dark"] .reference-heading h2 { color:#f5f9ff; }
.reference-heading span { color:#ffc400; font-size:1.3rem; }
.reference-pricing-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.reference-pricing-grid .pricing-card { --plan:#086df3; min-width:0; padding:15px 11px 12px; color:#fff; border:0; border-radius:17px; background:linear-gradient(155deg,color-mix(in srgb,var(--plan) 82%,#fff),color-mix(in srgb,var(--plan) 78%,#00133c)); box-shadow:0 13px 28px color-mix(in srgb,var(--plan) 25%,transparent); text-align:center; overflow:hidden; }
.reference-pricing-grid .pricing-card:hover,.reference-pricing-grid .pricing-card.featured,.reference-pricing-grid .pricing-card.featured:hover { transform:translateY(-5px); }
.reference-pricing-grid .plan-lesson { --plan:#ff4a21; }.reference-pricing-grid .plan-month { --plan:#0876f5; }.reference-pricing-grid .plan-term { --plan:#7e26ef; }.reference-pricing-grid .plan-year { --plan:#00a84f; }
.plan-topline { display:flex; align-items:center; justify-content:center; gap:5px; }
.reference-pricing-grid .plan-icon { width:32px; height:32px; display:grid; place-items:center; padding:0; border-radius:10px; background:rgba(255,255,255,.16); color:#fff; font-size:1rem; }
.reference-pricing-grid h3 { margin:0; color:#fff; font-size:1rem; }
.reference-pricing-grid .price { margin:4px 0 2px; color:#fff; font-size:2.1rem; text-shadow:0 3px 10px rgba(0,0,0,.18); }
.reference-pricing-grid .price small { display:block; color:#fff; opacity:.9; font-size:.58rem; }
.plan-note { display:inline-block; margin:2px 0 8px; padding:2px 11px; border-radius:999px; background:#ffe528; color:#3b2600; font-size:.58rem; font-weight:950; }
.plan-feature-box { min-height:134px; padding:9px; border-radius:11px; background:rgba(255,255,255,.96); color:#12274a; text-align:start; }
.reference-pricing-grid .feature-list { min-height:auto; margin:0; gap:7px; }
.reference-pricing-grid .feature-list li { color:#233b5d; font-size:.65rem; }
.reference-pricing-grid .feature-list li::before { color:#00ad55; }
.reference-pricing-grid .btn { min-height:36px; margin-top:9px; color:#fff; border-color:rgba(255,255,255,.76); background:rgba(2,26,73,.28); font-size:.68rem; }
.reference-pricing-grid .btn:hover { background:rgba(255,255,255,.18); }

.academy-phone { grid-area:phone; min-height:510px; padding:17px 13px 15px; position:relative; overflow:hidden; color:#fff; border:9px solid #0b1730; border-radius:38px; background:radial-gradient(circle at 50% 19%,rgba(0,122,255,.45),transparent 32%),linear-gradient(180deg,#001a4b,#03295f 60%,#00102d); box-shadow:0 24px 50px rgba(0,19,62,.3),inset 0 0 0 1px rgba(255,255,255,.13); text-align:center; }
.phone-speaker { width:52px; height:5px; margin:-8px auto 7px; border-radius:999px; background:#0c1220; }
.phone-top { display:flex; justify-content:space-between; color:#d6e8ff; font-size:.57rem; }
.phone-visual { min-height:185px; position:relative; display:grid; place-items:center; }
.phone-visual img { width:125px; filter:drop-shadow(0 12px 20px rgba(0,0,0,.38)); }
.phone-mascot { position:absolute; width:95px; height:118px; inset-inline-end:-4px; bottom:0; background:url("../img/academy-character-sheet.jpg") 51% 37%/308% 236% no-repeat; border-radius:48%; filter:drop-shadow(0 7px 12px rgba(0,0,0,.32)); }
.academy-phone h3 { margin:0 0 12px; font-size:.92rem; line-height:1.55; }
.academy-phone > a { min-height:35px; margin:6px 0; display:flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(90deg,#0b6ff7,#00b6ff); font-size:.69rem; font-weight:900; }
.academy-phone > a.phone-live { background:linear-gradient(90deg,#ff1744,#ff335b); }
.phone-plans { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:16px; }
.phone-plans span { min-width:0; padding:6px 2px; display:grid; border-radius:7px; color:#fff; font-size:.5rem; }
.phone-plans b { font-size:.76rem; }.mini-lesson{background:#ef2850}.mini-month{background:#0875f4}.mini-term{background:#7b26ea}.mini-year{background:#00a84d}

.live-now-card { grid-area:live; padding:13px; border:1px solid #b7cee9; border-radius:18px; background:#fff; box-shadow:0 15px 36px rgba(7,52,116,.15); color:#071d49; }
:root[data-theme="dark"] .live-now-card { background:#061a3a; color:#f5f9ff; border-color:#1c4c7b; }
.live-card-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.live-card-title strong { font-size:.88rem; }
.live-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; background:#ff244f; color:#fff; font-size:.58rem; font-weight:950; }
.live-badge i { width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.18); animation:pulse 1.3s infinite; }
.live-stage { min-height:245px; position:relative; overflow:hidden; border-radius:13px; background:radial-gradient(circle at 30% 25%,rgba(103,20,226,.58),transparent 25%),radial-gradient(circle at 70% 68%,rgba(0,174,255,.42),transparent 28%),linear-gradient(145deg,#07183e,#062b6d); }
.live-stage::after { content:""; position:absolute; inset:0; opacity:.28; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:24px 24px; }
.live-stage-mascot { position:absolute; z-index:2; width:175px; height:215px; left:4px; bottom:-13px; background:url("../img/academy-character-sheet.jpg") 51% 37%/308% 236% no-repeat; border-radius:48%; filter:drop-shadow(0 18px 22px rgba(0,0,0,.38)); }
.live-play { position:absolute; z-index:5; left:76px; top:80px; width:54px; height:54px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.75); border-radius:50%; background:rgba(7,74,167,.66); color:#fff; box-shadow:0 0 0 7px rgba(255,255,255,.09); }
.live-chat-stack { position:absolute; z-index:4; inset-inline-end:8px; top:20px; width:118px; display:grid; gap:7px; }
.live-chat-stack span { padding:6px 7px; border-radius:9px; background:rgba(255,255,255,.94); color:#172a4b; font-size:.5rem; box-shadow:0 6px 12px rgba(0,0,0,.18); }
.live-now-card h3 { margin:12px 0 3px; font-size:.9rem; }.live-now-card p { margin:0 0 10px; color:var(--muted); font-size:.68rem; }

.capital-home .section-heading h2,.capital-home .panel-head h2 { color:#061d4f; }
:root[data-theme="dark"] .capital-home .section-heading h2,:root[data-theme="dark"] .capital-home .panel-head h2 { color:#f5f9ff; }
.capital-home #features { background:linear-gradient(180deg,transparent,rgba(208,228,249,.56)); }
:root[data-theme="dark"] .capital-home #features { background:linear-gradient(180deg,transparent,rgba(3,27,62,.65)); }
.capital-home .feature-card { border-color:#c4d9f1; box-shadow:0 10px 24px rgba(7,58,126,.08); }
.capital-home .feature-icon { color:#0b72f3; background:linear-gradient(135deg,#dff4ff,#dce9ff); }
.capital-home .feature-card:hover { border-color:#62b8ff; }

.reference-course-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.reference-course-grid .course-card { border:1px solid #b9d1ec; border-radius:15px; box-shadow:0 12px 26px rgba(7,58,126,.11); }
.reference-course-grid .course-cover { height:150px; padding:14px; display:flex; align-items:flex-start; background:linear-gradient(135deg,#06205a,#086ed4); }
.reference-course-grid .course-cover.history { background:linear-gradient(135deg,#3a165a,#af35d7); }.reference-course-grid .course-cover.science { background:linear-gradient(135deg,#4a1f10,#e56b25); }
.course-cover-copy { position:relative; z-index:3; width:65%; display:grid; gap:4px; }
.course-cover-copy .category { width:max-content; max-width:100%; }
.course-cover-copy strong { font-size:.86rem; line-height:1.35; }.course-cover-copy small { color:#cbe5ff; font-size:.58rem; }
.course-card-mascot { position:absolute; z-index:2; width:100px; height:125px; inset-inline-end:-2px; bottom:-6px; border-radius:48%; background:url("../img/academy-character-sheet.jpg") 51% 37%/308% 236% no-repeat; filter:drop-shadow(0 9px 12px rgba(0,0,0,.28)); }
.reference-course-grid .course-mark { z-index:1; }.reference-course-grid .course-body { padding:15px; }.reference-course-grid .course-body h3 { font-size:.86rem; }.reference-course-grid .course-body p { font-size:.7rem; }
.reference-course-grid .teacher-line { font-size:.64rem; }.course-rating { color:#f5b400; }.reference-course-grid .course-footer strong { font-size:.74rem; }.reference-course-grid .course-footer .btn { min-height:31px; font-size:.62rem; }
.search-result-note { margin:7px 0 0; font-size:.78rem; }.empty-course-state { padding:50px 20px; display:grid; justify-items:center; gap:8px; border:1px dashed #9dbfe4; border-radius:20px; text-align:center; background:var(--surface); }.empty-course-state>span { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--surface-soft); color:var(--primary); font-size:1.6rem; }.empty-course-state h3,.empty-course-state p { margin:0; }

.operations-section { padding-top:35px; background:radial-gradient(circle at 50% 100%,rgba(0,112,255,.16),transparent 42%); }
.operations-grid { display:grid; grid-template-columns:minmax(190px,.75fr) minmax(520px,2.25fr) minmax(190px,.75fr); align-items:center; gap:15px; }
.platform-points { align-self:stretch; padding:24px 8px; }.platform-points h2 { font-size:1.6rem; }.platform-points p { color:var(--muted); font-size:.78rem; }.platform-points ul { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }.platform-points li { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.72rem; }.platform-points i { width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:#dff3ff; color:#0874ef; font-style:normal; font-weight:950; }
.admin-screen-preview { border:8px solid #06162f; border-radius:17px; overflow:hidden; background:#f6f9fe; box-shadow:0 24px 48px rgba(0,24,72,.26); color:#0b2148; transform:perspective(1200px) rotateX(1deg); }
.admin-preview-bar { height:42px; display:flex; align-items:center; gap:7px; padding:6px 10px; color:#fff; background:linear-gradient(90deg,#06172f,#0a2e61); font-size:.62rem; }.admin-preview-bar img { width:26px; margin-inline-start:auto; }.preview-admin-dot { width:24px; height:24px; border-radius:50%; background:url("../img/academy-character-sheet.jpg") 51% 37%/308% 236% no-repeat; }.preview-search { width:45%; margin-inline:auto; padding:4px 10px; border-radius:999px; color:#9cb5d7; background:rgba(255,255,255,.06); }
.admin-preview-body { min-height:300px; display:grid; grid-template-columns:46px 1fr; }.admin-preview-body aside { padding:9px 6px; display:grid; align-content:start; gap:7px; color:#a9cdfd; background:#07204b; }.admin-preview-body aside b { height:30px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.055); }
.admin-preview-content { padding:17px; }.admin-preview-content h3 { margin:0 0 12px; font-size:.9rem; }.preview-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.preview-kpis span { padding:9px; display:grid; grid-template-columns:auto 1fr; gap:2px 6px; border:1px solid #d8e5f5; border-radius:9px; background:#fff; }.preview-kpis i { grid-row:1/3; width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:#def6ff; color:#0872ef; font-style:normal; }.preview-kpis small { color:#7186a2; font-size:.5rem; }.preview-kpis b { font-size:.76rem; }
.preview-data-row { margin-top:12px; display:grid; grid-template-columns:.9fr 1.3fr; gap:9px; }.preview-chart,.preview-table { min-height:135px; padding:10px; border:1px solid #d8e5f5; border-radius:9px; background:#fff; font-size:.62rem; }.chart-line { height:86px; display:block; position:relative; overflow:hidden; border-bottom:1px solid #d8e5f5; background:linear-gradient(170deg,transparent 48%,rgba(7,110,243,.13) 49%,rgba(7,110,243,.04) 70%,transparent 71%); }.chart-line::after { content:""; position:absolute; width:125%; height:65px; left:-10%; bottom:2px; border-top:3px solid #0872f4; border-radius:50% 50% 0 0; transform:rotate(-9deg); }.preview-table { display:grid; gap:6px; align-content:start; }.preview-table>span { padding:6px; display:flex; align-items:center; justify-content:space-between; border-radius:6px; background:#f5f8fc; }.preview-table i { padding:2px 5px; border-radius:999px; background:#d9f8e9; color:#008c47; font-style:normal; font-size:.46rem; }
.manage-card { padding:18px 13px; position:relative; overflow:hidden; border:1px solid #b9d1ec; border-radius:17px; background:linear-gradient(165deg,#fff,#e9f3ff); box-shadow:0 15px 34px rgba(7,57,124,.14); text-align:center; color:#071d49; }.manage-mascot { width:100px; height:120px; display:block; margin:-3px auto -20px; background:url("../img/academy-character-sheet.jpg") 51% 37%/308% 236% no-repeat; border-radius:48%; }.manage-folder { width:112px; height:75px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:12px; background:linear-gradient(145deg,#ffc615,#ff8d00); box-shadow:0 8px 18px rgba(255,145,0,.23); }.manage-folder img { width:55px; }.manage-folder span { color:#fff; }.manage-card h3 { margin:0 0 5px; }.manage-card p { color:#60769a; font-size:.69rem; }
:root[data-theme="dark"] .manage-card { background:linear-gradient(165deg,#071e45,#0a2d61); color:#fff; border-color:#1a4b7d; }

.capital-home .cta { background:linear-gradient(115deg,#002059,#076fe9); border:1px solid rgba(82,181,255,.35); box-shadow:0 20px 45px rgba(0,42,115,.2); }
.site-footer { background:linear-gradient(145deg,#00102d,#002356); }

/* Carry the same identity into login and working dashboards. */
.auth-visual { background:radial-gradient(circle at 72% 18%,rgba(0,189,255,.28),transparent 25rem),linear-gradient(135deg,#00102f,#003883 58%,#005fb5); }
.auth-visual::before { content:""; position:absolute; inset:0; opacity:.28; background-image:radial-gradient(#fff .8px,transparent .8px); background-size:28px 28px; mask-image:linear-gradient(135deg,#000,transparent 72%); }
.auth-visual .brand,.auth-message,.auth-benefits { position:relative; z-index:2; }
.auth-card { border-color:color-mix(in srgb,var(--primary) 22%,var(--line)); box-shadow:0 22px 55px rgba(5,50,112,.13); }
.sidebar { background:radial-gradient(circle at 50% 0,rgba(0,117,255,.23),transparent 17rem),linear-gradient(180deg,#00153b,#000b22); }
.sidebar .brand img { filter:drop-shadow(0 0 12px rgba(0,190,255,.38)); }
.side-link:hover,.side-link.active { background:linear-gradient(90deg,rgba(0,185,255,.3),rgba(0,91,211,.16)); }
.dashboard-topbar { box-shadow:0 8px 24px rgba(5,42,99,.06); }
.metric-card:nth-child(4n+1) .metric-icon { color:#0874ef; background:#def2ff; }.metric-card:nth-child(4n+2) .metric-icon { color:#00a757; background:#dcf7e9; }.metric-card:nth-child(4n+3) .metric-icon { color:#7d2ee7; background:#efe3ff; }.metric-card:nth-child(4n) .metric-icon { color:#ef5328; background:#ffe8df; }
:root[data-theme="dark"] .metric-card:nth-child(n) .metric-icon { background:var(--surface-soft); }

@media (max-width:1180px) {
  .site-header .main-nav { gap:12px; }.header-search { display:none; }.site-header .header-register { display:none; }
  .capital-hero-grid { grid-template-columns:220px minmax(370px,1fr) 270px; gap:14px; }
  .hero-big-logo { width:205px; }.hero-brand-mascot { width:105px; height:125px; }.capital-mascot-stage .mascot-float { width:285px; height:365px; }
  .capital-metrics { grid-template-columns:1.1fr repeat(5,1fr); }.capital-metric { padding-inline:5px; }.capital-metric i { width:31px; height:31px; }
  .reference-market-grid { grid-template-columns:180px minmax(0,1fr) 245px; }.reference-pricing-grid { grid-template-columns:repeat(2,1fr); }.academy-phone { min-height:500px; }
  .reference-course-grid { grid-template-columns:repeat(3,1fr); }
  .operations-grid { grid-template-columns:1fr 2.4fr; }.manage-card { grid-column:1/-1; display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:12px; text-align:start; }.manage-mascot { width:80px; height:90px; margin:-15px 0 -15px; }.manage-folder { width:90px; height:62px; margin:0; }.manage-card h3,.manage-card p { margin:0; }.manage-card .btn { width:auto; }
}

@media (max-width:900px) {
  .site-header .main-nav { background:#001741; border-color:#17558c; }.site-header .main-nav a { color:#d9eaff; padding:11px 15px; }.site-header .main-nav a.active::after { display:none; }
  .capital-hero { padding-top:25px; }
  .capital-hero-grid { min-height:auto; grid-template-columns:1fr 1fr; grid-template-areas:"copy copy" "brand mascot"; gap:4px 20px; }
  .capital-hero-copy { padding:16px 0 6px; }.hero-brand-visual { min-height:285px; }.hero-big-logo { width:180px; }.hero-logo-name strong { font-size:1.25rem; }.hero-logo-name span { font-size:.62rem; }.hero-brand-mascot { top:38px; }
  .capital-mascot-stage { min-height:300px; }.capital-mascot-stage .mascot-float { width:250px; height:300px; }.capital-mascot-stage .mascot-aura { width:275px; height:275px; }.capital-mascot-stage .mascot-orbit { width:260px; height:100px; }.capital-mascot-stage .mascot-orbit.orbit-two { width:220px; height:82px; }
  .capital-metrics { width:calc(100% - 24px); display:flex; overflow-x:auto; min-height:80px; border-radius:17px 17px 0 0; }.discover-chip { min-width:185px; }.capital-metric { min-width:125px; }
  .reference-market-grid { grid-template-columns:minmax(0,1fr) 245px; grid-template-areas:"plans live" "phone phone"; }.academy-phone { width:min(100%,340px); min-height:520px; margin:15px auto 0; }.reference-pricing-grid { grid-template-columns:repeat(2,1fr); }
  .reference-course-grid { grid-template-columns:repeat(2,1fr); }
  .operations-grid { grid-template-columns:1fr; }.platform-points { padding:10px 0; }.admin-screen-preview { transform:none; }.manage-card { grid-column:auto; }
}

@media (max-width:620px) {
  .site-header .nav-actions .btn { display:none; }.site-header .brand-text { display:grid; }.site-header .brand-text strong { font-size:.72rem; }.site-header .brand img { width:38px; height:38px; }
  .capital-hero { min-height:auto; border-radius:0 0 24px 24px; }
  .capital-hero-grid { grid-template-columns:1fr; grid-template-areas:"copy" "mascot"; }.hero-brand-visual { display:none; }
  .capital-hero-copy { padding:8px 0 0; }.hero-welcome { font-size:.95rem; }.hero-title-plate strong { font-size:1.9rem; padding-inline:12px; }.hero-title-plate span { font-size:.78rem; }.capital-hero-copy h1 { font-size:1.2rem; }
  .hero-service-pills { gap:5px; }.hero-service-pills span { padding:5px 9px; font-size:.62rem; }.capital-hero-actions { display:grid; grid-template-columns:1fr 1fr; }.capital-action { min-width:0; min-height:43px; padding:7px; font-size:.67rem; }.action-whatsapp { grid-column:1/-1; }
  .capital-mascot-stage { min-height:280px; }.capital-mascot-stage .mascot-float { width:245px; height:285px; }.floating-app-icon { width:42px; height:42px; }.app-mail { inset-inline-end:12%; }.app-play { inset-inline-end:9%; }.app-shield { inset-inline-start:9%; }
  .capital-metrics { margin-top:0; }
  .reference-market { padding-top:30px; }.reference-market-grid { grid-template-columns:1fr; grid-template-areas:"plans" "live" "phone"; gap:22px; }.reference-pricing-grid { grid-template-columns:1fr 1fr; gap:8px; }.reference-pricing-grid .pricing-card { padding:12px 8px 10px; }.reference-pricing-grid .price { font-size:1.7rem; }.plan-feature-box { min-height:124px; padding:7px; }.reference-pricing-grid .feature-list li { font-size:.58rem; }.academy-phone { width:min(100%,300px); }
  .live-now-card { width:min(100%,340px); margin-inline:auto; }.reference-course-grid { grid-template-columns:1fr; }.reference-course-grid .course-cover { height:170px; }
  .operations-grid { gap:22px; }.admin-screen-preview { border-width:4px; }.admin-preview-body { grid-template-columns:34px 1fr; }.admin-preview-content { padding:9px; overflow:hidden; }.preview-kpis { grid-template-columns:repeat(2,1fr); }.preview-data-row { grid-template-columns:1fr; }.preview-chart { display:none; }.manage-card { display:block; text-align:center; }.manage-card .manage-mascot { margin:-3px auto -18px; }.manage-card .manage-folder { margin:0 auto 10px; }.manage-card .btn { width:100%; }
}

/* =========================================================
   HARMONIZED UI SYSTEM — V4.1
   One palette, spacing rhythm, surface language and motion.
   ========================================================= */
:root {
  --brand-ink: #061a3a;
  --brand-deep: #00102f;
  --brand-navy: #00245f;
  --brand-blue: #0878f9;
  --brand-cyan: #19c8ff;
  --brand-sky: #eaf6ff;
  --brand-gold: #ffd22e;
  --ui-radius: 17px;
  --ui-radius-sm: 11px;
  --ui-border: #c7dcf1;
  --ui-shadow: 0 14px 34px rgba(4, 48, 111, .11);
  --ui-shadow-hover: 0 20px 44px rgba(4, 61, 139, .17);
}

body {
  color: var(--brand-ink);
  background:
    radial-gradient(circle at 6% 16%, rgba(25, 200, 255, .08), transparent 24rem),
    linear-gradient(180deg, #f8fbff, #eef6ff 58%, #f8fbff);
}
:root[data-theme="dark"] body {
  color: #eef7ff;
  background:
    radial-gradient(circle at 8% 16%, rgba(25, 200, 255, .08), transparent 25rem),
    linear-gradient(180deg, #020c20, #04152f 58%, #020d22);
}

/* Shared controls */
.btn,
.capital-action,
.academy-phone > a {
  border-radius: var(--ui-radius-sm);
  letter-spacing: 0;
  box-shadow: 0 9px 22px rgba(0, 63, 149, .15);
}
.btn-primary,
.site-header .header-register {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue) 72%);
}
.btn-success { background: linear-gradient(135deg, #10bd6d, #079552); }
.btn-ghost { color: var(--brand-blue); border-color: #a9c9eb; background: rgba(255, 255, 255, .72); }
:root[data-theme="dark"] .btn-ghost { color: #7bdcff; border-color: #245481; background: rgba(7, 29, 63, .78); }
.btn:hover,
.capital-action:hover { box-shadow: 0 14px 28px rgba(0, 76, 169, .22); }

/* Header and hero share exactly the same blue family. */
.site-header {
  background: rgba(0, 16, 47, .96);
  border-bottom-color: rgba(91, 196, 255, .22);
}
.site-header .nav-wrap { min-height: 64px; }
.site-header .main-nav a.active::after { background: var(--brand-cyan); }
.header-search input,
.site-header .icon-btn,
.site-header .lang-switch,
.site-header .menu-btn { background-color: rgba(8, 55, 117, .64); }
.capital-hero {
  background:
    radial-gradient(circle at 55% -12%, rgba(35, 143, 255, .38), transparent 38%),
    radial-gradient(circle at 4% 72%, rgba(25, 200, 255, .15), transparent 29%),
    linear-gradient(120deg, var(--brand-deep), var(--brand-navy) 47%, #03458e 72%, #00163e);
}
.hero-service-pills span,
.action-video { background: rgba(1, 38, 91, .64); border-color: rgba(104, 202, 255, .32); }
.action-courses { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue)); }
.capital-metrics { background: linear-gradient(100deg, #001536, #06346e); }
.capital-metric i { background: rgba(25, 200, 255, .12); color: #73e0ff; }

/* Consistent sections and cards */
.reference-market,
.capital-home #features,
.operations-section {
  background-color: transparent;
}
.reference-market { background: linear-gradient(180deg, #e9f5ff, rgba(248, 251, 255, .92) 72%, transparent); }
:root[data-theme="dark"] .reference-market { background: linear-gradient(180deg, #03132d, rgba(4, 24, 52, .92) 72%, transparent); }
.reference-heading,
.section-heading,
.panel-head { margin-bottom: 22px; }
.reference-heading h2,
.capital-home .section-heading h2,
.capital-home .panel-head h2,
.platform-points h2 { color: var(--brand-ink); }
:root[data-theme="dark"] .reference-heading h2,
:root[data-theme="dark"] .capital-home .section-heading h2,
:root[data-theme="dark"] .capital-home .panel-head h2,
:root[data-theme="dark"] .platform-points h2 { color: #f5faff; }

.academy-phone,
.live-now-card,
.capital-home .feature-card,
.reference-course-grid .course-card,
.admin-screen-preview,
.manage-card,
.empty-course-state {
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}
.live-now-card,
.capital-home .feature-card,
.reference-course-grid .course-card,
.manage-card,
.empty-course-state {
  border: 1px solid var(--ui-border);
}
.capital-home .feature-card,
.reference-course-grid .course-card,
.live-now-card,
.manage-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.capital-home .feature-card:hover,
.reference-course-grid .course-card:hover,
.live-now-card:hover,
.manage-card:hover { transform: translateY(-4px); border-color: #6fc6f6; box-shadow: var(--ui-shadow-hover); }
:root[data-theme="dark"] .live-now-card,
:root[data-theme="dark"] .capital-home .feature-card,
:root[data-theme="dark"] .reference-course-grid .course-card,
:root[data-theme="dark"] .manage-card,
:root[data-theme="dark"] .empty-course-state { border-color: #1c4a78; background-color: #061a38; }

/* Plans retain their useful color coding inside one card system. */
.reference-pricing-grid { align-items: stretch; }
.reference-pricing-grid .pricing-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--ui-radius);
  box-shadow: 0 13px 30px color-mix(in srgb, var(--plan) 19%, rgba(1, 32, 76, .12));
}
.reference-pricing-grid .plan-topline { min-height: 34px; }
.reference-pricing-grid .plan-note { min-height: 20px; }
.reference-pricing-grid .plan-feature-box { flex: 1; }
.reference-pricing-grid .btn { margin-top: 10px; background: rgba(0, 24, 67, .26); }
.phone-plans span { border: 1px solid rgba(255, 255, 255, .22); }

/* Course and feature content now uses the same rhythm. */
.features-grid,
.reference-course-grid { align-items: stretch; }
.capital-home .feature-card { min-height: 100%; padding: 22px; }
.capital-home .feature-card h3 { margin: 14px 0 7px; }
.capital-home .feature-icon { border-radius: var(--ui-radius-sm); }
.reference-course-grid .course-card { min-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.reference-course-grid .course-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.reference-course-grid .course-body h3,
.reference-course-grid .course-body p { margin: 0; }
.reference-course-grid .teacher-line { margin-top: auto; }
.reference-course-grid .course-footer { margin-top: 2px; }
.reference-course-grid .course-cover { background: linear-gradient(135deg, #05245e, var(--brand-blue)); }
.reference-course-grid .course-cover.history { background: linear-gradient(135deg, #102a68, #684dd7); }
.reference-course-grid .course-cover.science { background: linear-gradient(135deg, #07346a, #0d9ec2); }

/* The operations area reads as one connected product surface. */
.operations-grid { align-items: stretch; }
.platform-points,
.manage-card { align-self: stretch; }
.platform-points { border-radius: var(--ui-radius); }
.platform-points li { color: #526a8b; }
:root[data-theme="dark"] .platform-points li { color: #b7cce6; }
.admin-screen-preview { border-color: var(--brand-deep); }
.admin-preview-bar,
.admin-preview-body aside { background: var(--brand-deep); }
.manage-folder { background: linear-gradient(145deg, var(--brand-gold), #ff9e16); }
.capital-home .cta,
.site-footer { background: linear-gradient(125deg, var(--brand-deep), var(--brand-navy) 64%, #03447f); }

/* Login and dashboards inherit the same component language. */
.auth-card,
.panel,
.metric-card,
.table-card {
  border-radius: var(--ui-radius);
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow);
}
.auth-visual,
.sidebar { background-color: var(--brand-deep); }
.dashboard-topbar { border-bottom-color: var(--ui-border); }

@media (max-width: 900px) {
  .reference-market-grid,
  .operations-grid { gap: 24px; }
  .capital-home .section { padding-block: 58px; }
  .capital-home .feature-card { padding: 20px; }
}

@media (max-width: 620px) {
  :root { --ui-radius: 15px; --ui-radius-sm: 10px; }
  .capital-home .section { padding-block: 42px; }
  .capital-hero-actions { gap: 8px; }
  .reference-market-grid { gap: 24px; }
  .reference-pricing-grid { gap: 9px; }
  .reference-pricing-grid .pricing-card { padding: 13px 8px 10px; }
  .reference-heading,
  .section-heading,
  .panel-head { margin-bottom: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-brand-mascot,
  .capital-mascot-stage *,
  .discover-mascot,
  .live-badge i { animation: none !important; }
  .capital-home * { scroll-behavior: auto !important; }
}

/* =========================================================
   DUAL THEME SYSTEM — V4.2
   Light: the supplied white/navy/blue reference.
   Dark: a distinct midnight/violet/cyan identity.
   ========================================================= */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --theme-page: #f4f8fd;
  --theme-surface: #ffffff;
  --theme-surface-2: #eaf4ff;
  --theme-surface-3: #dcecff;
  --theme-text: #061b3f;
  --theme-muted: #60789b;
  --theme-border: #c9ddf2;
  --theme-primary: #0878f9;
  --theme-secondary: #16c5f4;
  --theme-header: #001535;
  --theme-hero-start: #00102f;
  --theme-hero-mid: #002b70;
  --theme-hero-end: #034b96;
  --theme-glow: rgba(25, 197, 244, .14);
  --theme-shadow: 4, 48, 111;
  --bg: var(--theme-page);
  --surface: var(--theme-surface);
  --surface-soft: var(--theme-surface-2);
  --surface-strong: var(--theme-surface-3);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-border);
  --primary: var(--theme-primary);
  --primary-2: var(--theme-secondary);
  --primary-dark: #045bc8;
  --navy: var(--theme-header);
  --navy-2: #00265f;
  --shadow: 0 20px 56px rgba(var(--theme-shadow), .13);
  --shadow-sm: 0 11px 30px rgba(var(--theme-shadow), .1);
  --ui-border: var(--theme-border);
  --ui-shadow: 0 14px 34px rgba(var(--theme-shadow), .11);
  --ui-shadow-hover: 0 20px 44px rgba(var(--theme-shadow), .17);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #060713;
  --theme-surface: #101226;
  --theme-surface-2: #171a36;
  --theme-surface-3: #20254a;
  --theme-text: #f5f3ff;
  --theme-muted: #aaa9c8;
  --theme-border: #302f58;
  --theme-primary: #8b5cf6;
  --theme-secondary: #22d3ee;
  --theme-header: #09091b;
  --theme-hero-start: #080816;
  --theme-hero-mid: #18113f;
  --theme-hero-end: #10354b;
  --theme-glow: rgba(139, 92, 246, .2);
  --theme-shadow: 0, 0, 0;
  --bg: var(--theme-page);
  --surface: var(--theme-surface);
  --surface-soft: var(--theme-surface-2);
  --surface-strong: var(--theme-surface-3);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-border);
  --primary: var(--theme-primary);
  --primary-2: var(--theme-secondary);
  --primary-dark: #6d3fe0;
  --accent: #fb7185;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --navy: var(--theme-header);
  --navy-2: #17113c;
  --shadow: 0 24px 70px rgba(var(--theme-shadow), .42);
  --shadow-sm: 0 12px 34px rgba(var(--theme-shadow), .3);
  --ui-border: var(--theme-border);
  --ui-shadow: 0 16px 40px rgba(var(--theme-shadow), .31);
  --ui-shadow-hover: 0 22px 52px rgba(44, 25, 98, .4);
}

body,
.capital-home {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 7% 13%, var(--theme-glow), transparent 25rem),
    linear-gradient(180deg, var(--theme-page), color-mix(in srgb, var(--theme-surface-2) 54%, var(--theme-page)) 58%, var(--theme-page));
}

/* Every content surface follows the active theme tokens. */
.feature-card,
.course-card,
.pricing-card,
.panel,
.auth-card,
.metric-card,
.quiz-card,
.question-card,
.live-card,
.book-card,
.modal-card,
.install-card,
.account-card,
.admin-reel-card,
.public-reel-card,
.announcement-banner,
.lesson-row,
.page-tab,
.stats-grid,
.empty-course-state,
.live-now-card,
.manage-card {
  color: var(--theme-text);
  border-color: var(--theme-border);
  background-color: var(--theme-surface);
}
input,
select,
textarea,
.input-icon,
.quiz-option {
  color: var(--theme-text);
  border-color: var(--theme-border);
  background: var(--theme-surface);
}
input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--theme-muted) 78%, transparent); }
input:focus,
select:focus,
textarea:focus { border-color: var(--theme-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, transparent); }
.muted,
.feature-card p,
.course-body p,
.teacher-line,
.metric-card span,
.panel-head p,
.book-body p,
.live-card p,
.question-card p { color: var(--theme-muted); }

/* Light mode deliberately follows the supplied reference. */
:root:not([data-theme="dark"]) .site-header,
:root[data-theme="light"] .site-header {
  background: rgba(0, 21, 53, .97);
  border-bottom-color: rgba(22, 197, 244, .24);
}
:root:not([data-theme="dark"]) .capital-hero,
:root[data-theme="light"] .capital-hero {
  background:
    radial-gradient(circle at 55% -12%, rgba(35, 143, 255, .38), transparent 38%),
    radial-gradient(circle at 4% 72%, rgba(25, 200, 255, .15), transparent 29%),
    linear-gradient(120deg, var(--theme-hero-start), var(--theme-hero-mid) 48%, var(--theme-hero-end) 75%, #00183f);
}
:root:not([data-theme="dark"]) .reference-market,
:root[data-theme="light"] .reference-market {
  background: linear-gradient(180deg, #e9f5ff, #f9fcff 72%, transparent);
}

/* Dark mode has a genuinely different violet/cyan visual identity. */
:root[data-theme="dark"] .site-header {
  background: rgba(9, 9, 27, .97);
  border-bottom-color: rgba(139, 92, 246, .34);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .42);
}
:root[data-theme="dark"] .site-header .main-nav a { color: #c4c2dc; }
:root[data-theme="dark"] .site-header .main-nav a:hover,
:root[data-theme="dark"] .site-header .main-nav a.active { color: #ffffff; }
:root[data-theme="dark"] .site-header .main-nav a.active::after { background: linear-gradient(90deg, #8b5cf6, #22d3ee); }
:root[data-theme="dark"] .site-header .main-nav { background-color: #111226; border-color: #302f58; }
:root[data-theme="dark"] .header-search input,
:root[data-theme="dark"] .site-header .icon-btn,
:root[data-theme="dark"] .site-header .lang-switch,
:root[data-theme="dark"] .site-header .menu-btn { background: #15142d; border-color: #35335f; }
:root[data-theme="dark"] .capital-hero {
  background:
    radial-gradient(circle at 50% -12%, rgba(139, 92, 246, .28), transparent 40%),
    radial-gradient(circle at 90% 68%, rgba(34, 211, 238, .13), transparent 29%),
    linear-gradient(120deg, var(--theme-hero-start), var(--theme-hero-mid) 50%, var(--theme-hero-end));
}
:root[data-theme="dark"] .hero-title-plate strong { color: #211746; background: #f5f3ff; }
:root[data-theme="dark"] .hero-title-plate span { color: #7c3aed; background: #f5f3ff; }
:root[data-theme="dark"] .hero-logo-orbit,
:root[data-theme="dark"] .capital-mascot-stage .mascot-orbit { border-color: #8b5cf6; box-shadow: 0 0 25px rgba(139, 92, 246, .46), inset 0 0 12px rgba(255, 255, 255, .15); }
:root[data-theme="dark"] .capital-mascot-stage .mascot-orbit.orbit-two { border-color: rgba(34, 211, 238, .58); }
:root[data-theme="dark"] .floating-app-icon { background: linear-gradient(145deg, #8b5cf6, #0e7490); box-shadow: 0 10px 28px rgba(91, 56, 198, .4); }
:root[data-theme="dark"] .hero-service-pills span,
:root[data-theme="dark"] .action-video { background: rgba(18, 17, 48, .76); border-color: rgba(139, 92, 246, .34); }
:root[data-theme="dark"] .action-courses,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .site-header .header-register { background: linear-gradient(135deg, #8b5cf6, #22b9d2); }
:root[data-theme="dark"] .capital-metrics { background: linear-gradient(100deg, #0a0a1d, #21164b); border-color: rgba(139, 92, 246, .32); }
:root[data-theme="dark"] .discover-chip { color: #211746; background: #f5f3ff; }
:root[data-theme="dark"] .capital-metric i { color: #67e8f9; background: rgba(34, 211, 238, .11); }
:root[data-theme="dark"] .capital-metric strong { color: #c4b5fd; }
:root[data-theme="dark"] .reference-market { background: linear-gradient(180deg, #0b0b1b, #080918 72%, transparent); }
:root[data-theme="dark"] .reference-market::before { background: radial-gradient(circle at 12% 35%, rgba(139, 92, 246, .13), transparent 22rem), radial-gradient(circle at 88% 75%, rgba(34, 211, 238, .08), transparent 20rem); }
:root[data-theme="dark"] .capital-home #features { background: linear-gradient(180deg, transparent, rgba(28, 20, 65, .58)); }
:root[data-theme="dark"] .operations-section { background: radial-gradient(circle at 50% 100%, rgba(139, 92, 246, .16), transparent 44%); }
:root[data-theme="dark"] .reference-heading h2,
:root[data-theme="dark"] .capital-home .section-heading h2,
:root[data-theme="dark"] .capital-home .panel-head h2,
:root[data-theme="dark"] .platform-points h2 { color: #f5f3ff; }
:root[data-theme="dark"] .reference-heading span,
:root[data-theme="dark"] .eyebrow { color: #a78bfa; }
:root[data-theme="dark"] .academy-phone { background: radial-gradient(circle at 50% 19%, rgba(139, 92, 246, .3), transparent 33%), linear-gradient(180deg, #0a0a1d, #18113f 62%, #080817); border-color: #18172e; }
:root[data-theme="dark"] .live-stage { background: radial-gradient(circle at 30% 25%, rgba(139, 92, 246, .55), transparent 25%), radial-gradient(circle at 70% 68%, rgba(34, 211, 238, .29), transparent 28%), linear-gradient(145deg, #101027, #21164b); }
:root[data-theme="dark"] .admin-screen-preview { color: #eceaff; border-color: #080817; background: #111226; }
:root[data-theme="dark"] .admin-preview-bar,
:root[data-theme="dark"] .admin-preview-body aside { background: #09091b; }
:root[data-theme="dark"] .admin-preview-content,
:root[data-theme="dark"] .preview-kpis span,
:root[data-theme="dark"] .preview-chart,
:root[data-theme="dark"] .preview-table { color: #eceaff; border-color: #302f58; background: #15172f; }
:root[data-theme="dark"] .preview-table > span { background: #1c1e3b; }
:root[data-theme="dark"] .preview-kpis i { color: #a78bfa; background: #25204c; }
:root[data-theme="dark"] .preview-kpis small { color: #aaa9c8; }
:root[data-theme="dark"] .chart-line { border-bottom-color: #34345c; background: linear-gradient(170deg, transparent 48%, rgba(139, 92, 246, .19) 49%, rgba(139, 92, 246, .05) 70%, transparent 71%); }
:root[data-theme="dark"] .chart-line::after { border-top-color: #8b5cf6; }
:root[data-theme="dark"] .manage-folder { background: linear-gradient(145deg, #8b5cf6, #22b8d2); }
:root[data-theme="dark"] .manage-card { background: linear-gradient(165deg, #111226, #1b1740); }
:root[data-theme="dark"] .capital-home .cta,
:root[data-theme="dark"] .site-footer { background: linear-gradient(125deg, #09091b, #21164b 64%, #10354b); }

/* Cards, plans and course accents adapt without losing hierarchy. */
:root[data-theme="dark"] .reference-pricing-grid .plan-lesson { --plan: #fb7185; }
:root[data-theme="dark"] .reference-pricing-grid .plan-month { --plan: #38bdf8; }
:root[data-theme="dark"] .reference-pricing-grid .plan-term { --plan: #a78bfa; }
:root[data-theme="dark"] .reference-pricing-grid .plan-year { --plan: #34d399; }
:root[data-theme="dark"] .reference-pricing-grid .pricing-card { background: linear-gradient(155deg, color-mix(in srgb, var(--plan) 54%, #15152d), #101126); border-color: color-mix(in srgb, var(--plan) 40%, #34345b); }
:root[data-theme="dark"] .plan-feature-box { color: #eceaff; background: rgba(16, 18, 38, .9); }
:root[data-theme="dark"] .reference-pricing-grid .feature-list li { color: #c8c7dc; }
:root[data-theme="dark"] .reference-course-grid .course-cover { background: linear-gradient(135deg, #171143, #6044ca); }
:root[data-theme="dark"] .reference-course-grid .course-cover.history { background: linear-gradient(135deg, #251348, #8b5cf6); }
:root[data-theme="dark"] .reference-course-grid .course-cover.science { background: linear-gradient(135deg, #10263f, #0e7490); }
:root[data-theme="dark"] .capital-home .feature-icon,
:root[data-theme="dark"] .metric-icon { color: #c4b5fd; background: #242046; }
:root[data-theme="dark"] .btn-ghost { color: #c4b5fd; border-color: #494274; background: #17172f; }
:root[data-theme="dark"] .btn-outline { color: #f5f3ff; border-color: #454268; background: #15162d; }
:root[data-theme="dark"] .page-tab.active { border-color: #8b5cf6; background: #8b5cf6; }
:root[data-theme="dark"] .progress > span { background: linear-gradient(90deg, #8b5cf6, #22d3ee); }

/* Authentication and all role dashboards are coherent in both modes. */
.auth-form-wrap,
.dashboard-main,
.dashboard-content { background: transparent; }
:root[data-theme="dark"] .auth-visual { background: radial-gradient(circle at 72% 18%, rgba(139, 92, 246, .25), transparent 25rem), linear-gradient(135deg, #09091b, #21164b 58%, #10354b); }
:root[data-theme="dark"] .sidebar { background: radial-gradient(circle at 50% 0, rgba(139, 92, 246, .2), transparent 18rem), linear-gradient(180deg, #09091b, #060713); }
:root[data-theme="dark"] .side-link:hover,
:root[data-theme="dark"] .side-link.active { color: #fff; background: linear-gradient(90deg, rgba(139, 92, 246, .31), rgba(34, 211, 238, .08)); }
:root[data-theme="dark"] .dashboard-topbar { border-bottom-color: #302f58; background: rgba(16, 18, 38, .91); }
:root[data-theme="dark"] .install-shell { background: radial-gradient(circle at top, rgba(139, 92, 246, .17), transparent 40%), var(--theme-page); }
:root[data-theme="dark"] .certificate-card { background: linear-gradient(135deg, #28203b, var(--theme-surface)); }

/* Avoid a flash of mixed palettes while changing mode. */
body,
.site-header,
.capital-hero,
.reference-market,
.feature-card,
.course-card,
.panel,
.metric-card,
.auth-card,
.live-now-card,
.manage-card,
input,
select,
textarea { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }