/* VEZY — a light blue palette, independent of the layout and motion system. */
:root {
  --bg: #fbfdff;
  --ink: #365f82;
  --muted: #5d7489;
  --accent: #287bbd;
  --purple: var(--accent);
  --sky: #a6d8ff;
  --sky-hover: #94ceff;
  --lime: #b9e6ff;
  --lavender: #eaf3ff;
  --border: #d7e8f5;
  --surface: #ffffff;
  --surface-soft: #f3f9ff;
  --surface-blue: #eaf5ff;
  --surface-fresh: #e0f3ff;
  --ink-heading: #355f85;
  --ink-body: #526b80;
  --ink-secondary: #60778b;
  --ring: #a4d2f4;
  --gradient-action: linear-gradient(115deg, #b4e7ff, #a5cfff);
  --gradient-action-hover: linear-gradient(115deg, #a3dfff, #94c6ff);
  --shadow: 0 18px 45px #3584c012;
}

body { background: var(--bg); color: var(--ink); }
h1, h2, h3 { color: var(--ink-heading); }
.purple-text { color: var(--accent); }
.hero h1 .purple-text {
  background: linear-gradient(105deg, #247fbf, #477cda);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.muted-text { color: #6a7f8f; }
.eyebrow, .small-tag, .tiny-label { color: var(--accent); }
.section-index { color: #677885; }
::selection { background: #b1d7f2; color: #2a5068; }
:focus-visible { outline-color: #3f8bb8; }

/* Fresh, legible controls with a consistent hierarchy. */
.button-dark {
  color: #265a82;
  background: var(--gradient-action);
  border-color: #94c9f5;
  box-shadow: 0 6px 20px #63b6f026;
}
.button-dark:hover {
  color: #265a82;
  background: var(--gradient-action-hover);
  border-color: #83bdec;
  box-shadow: 0 10px 25px #4599df25;
}
.button-lime { color: #265a82; background: var(--gradient-action); border-color: #94c9f5; box-shadow: 0 8px 25px #63b6f026; }
.button-lime:hover { color: #265a82; background: var(--gradient-action-hover); }
.button:hover { box-shadow: 0 8px 20px #3e6d8e18; }
.text-link, .privacy-button { color: var(--accent); }
.status-dot { background: #3a8ec1; }
.skip-link { color: #2b4e65; background: var(--sky); }
.scroll-progress { background: linear-gradient(90deg, #75d6ff, #6ba5f5); }
.site-header { background: #fbfdfff0; }
.site-header.scrolled { border-color: var(--border); box-shadow: 0 3px 14px #48729308; }
.brand, .brand-dot { color: #326b9d; }
.brand-mark i:first-child { background: linear-gradient(145deg, #a6e4ff, #81c4f7); }
.brand-mark i:last-child { background: linear-gradient(145deg, #62b9f3, #5890e0); }
.desktop-nav a { color: #566874; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--accent); }
.desktop-nav a::after { background: #68a9d2; }
.menu-toggle { background: #f5f9fc; border-color: var(--border); }
.menu-toggle span { background: #4e697d; }
.mobile-nav { border-color: var(--border); }
.mobile-nav a { color: #466377; }

/* The hero uses white surfaces, a gentle sky halo, and shades of blue. */
.hero-eyebrow { color: #3e6c88; }
.hero-eyebrow .status-dot { box-shadow: 0 0 0 5px #b3daf23d; }
.hero-description { color: var(--ink-body); }
.title-spark { stroke: #5798c4; }
.play-circle { color: #4a708a; border-color: #bacfdf; background: #f5f9fc; }
.hero-note, .hero-bottom { color: #5e7281; }
.hero-note .mini-check { color: #487ea3; border-color: #a3c1d7; }
.mouse { border-color: #abc1d4; }
.mouse i { background: #6386a2; }
.visual-grid { background-image: linear-gradient(#a7c2d82a 1px, transparent 1px), linear-gradient(90deg, #a7c2d82a 1px, transparent 1px); }
.visual-halo { background: radial-gradient(circle at 35% 35%, #bce9ff99, #daedff85 50%, #e9f2ff78 68%, transparent 70%); }
.orbit-one { border-color: #97bfdc67; }
.orbit-two { border-color: #b0d0e870; }
.symbol-plus { color: #6ca3c9; }
.symbol-pi { color: #5390b6; }
.orb-lime { background: radial-gradient(circle at 30% 25%, #cfdefe, #9dc5e7); }
.orb-purple { background: radial-gradient(circle at 30% 25%, #cbebfe, #72b4dc); }
.learning-window { border-color: #d3e2ed; box-shadow: 0 30px 65px #426d8e15, 0 4px 12px #44709208; }
.window-bar { background: #f2f7fb; color: #697d8d; border-color: #e2ebf3; }
.window-bar > .icon { color: #618cac; }
.window-dots i { background: #d6e2eb; }
.window-dots i:first-child { background: #9dc0da; }
.window-greeting .tiny-label { color: #627789; }
.wave { color: #6d9dc0; }
.avatar, .role-avatar { color: #356a8d; background: #ddecf7; }
.daily-goal { background: linear-gradient(110deg, #eaf7ff, #eaf1ff); }
.daily-goal strong { color: #36607e; }
.daily-goal p { color: #5f768b; }
.goal-icon { color: #437498; background: #c6def1; }
.goal-arrow, .window-section-title > span { color: #537490; }
.window-section-title strong, .mock-course strong { color: #3d586d; }
.mock-course + .mock-course { border-color: #e5ecf2; }
.mock-course > div > span, .course-percent { color: #667788; }
.course-purple { color: #4e7a9f; background: #d7e3f5; }
.course-lime { color: #36759b; background: #d8eaf6; }
.mock-progress { background: #e8edf3; }
.mock-progress span { background: #82b7ee; }
.mock-progress.green span { background: #6ec4ed; }
.window-footer { color: #6a7988; border-color: #e3eaf1; }
.window-footer i { background: #7f9cc2; }
.window-footer .icon { color: #6d8fb0; }
.float-card { border-color: #d8e4ee; box-shadow: var(--shadow); }
.achievement-card div > span { color: #617484; }
.achievement-icon { color: #3374a0; background: #dbebf8; }
.card-confetti { color: #8bacc8; }
.progress-card > .tiny-label { color: #617990; }
.progress-card-top { color: #3c596f; }
.progress-card-top > span { background: #d8e5fa; color: #5070a6; }
.chart-line { stroke: #5aa8e7; }

/* Light surfaces distinguish sections without introducing dark blocks. */
.principles-strip { background: #eef5fb; border-color: #d8e4ee; }
.principles > span { color: #60707e; }
.principles > span strong { color: #42647f; }
.principles > div { color: #536879; }
.principles .icon { color: #6790b0; }
.section-heading > p { color: var(--ink-body); }
.feature-main { background: linear-gradient(135deg, #edf8ff, #eaf2ff); border-color: #d2e5f8; }
.feature-feedback { background: linear-gradient(145deg, #e5f7ff, #e3efff); border-color: #cce4f7; }
.feature-progress { background: #f0f8ff; border-color: #d8e8f5; }
.feature-top .small-tag { color: #5e7585; }
.feature-icon { background: #ffffff9c; border-color: #c7d9e6; color: #506f84; }
.feature-card > p { color: var(--ink-body); }
.exercise-illustration { border-color: #d5e0ea; box-shadow: 0 12px 20px #5a758f0a; }
.exercise-label { color: #667788; }
.mini-answer { color: #667587; border-color: #e2e8ee; }
.mini-answer > span { color: #66717d; }
.mini-answer > i { border-color: #ccd8e3; }
.mini-answer.selected { background: #e8effa; border-color: #9cb3db; color: #486391; }
.mini-answer.selected > span { color: #495f83; }
.feedback-circle { background: linear-gradient(135deg, #a8dfff, #9dc9ff); box-shadow: inset 0 0 0 9px #caeaff; }
.feedback-circle > .icon { color: #397db2; }
.circle-orbit { border-color: #b1c9dc; }
.circle-star { color: #6598ba; }
.feedback-label { color: #406e8e; border-color: #d5e1ec; }
.bar-chart::before { background: repeating-linear-gradient(to top, #dbe7f0 0, #dbe7f0 1px, transparent 1px, transparent 35px); }
.bar-chart i { background: #c5e3f9; }
.bar-chart > div:nth-child(5) i { background: #92cafa; }
.bar-chart > div:nth-child(6) i { background: linear-gradient(0deg, #78b5ec, #6cccf0); }
.bar-chart span { color: #5c7182; }

.journey { background: #f0f7ff; color: var(--ink); }
.journey::before { background: radial-gradient(circle, #bdd5ec32, transparent 70%); }
.journey .eyebrow { color: #5b778f; }
.journey .section-index { color: #6f879d; }
.journey h2 { color: var(--ink-heading); }
.journey h2 > span { color: var(--accent); }
.journey-sticky > p { color: var(--ink-body); }
.journey-counter > span:first-child { color: #5486ad; }
.journey-counter > span:nth-child(2) { color: #788ea2; }
.journey-line { background: #cfdbe8; }
.journey-line i { background: #75a5ca; }
.journey-step { border-color: #d4dfea; opacity: 1; }
.journey-step.is-active { opacity: 1; }
.journey-step.is-active .step-preview { border-color: #a4c0d7; box-shadow: 0 8px 28px #7da2c120; }
.step-number { border-color: #b3c7da; color: #61819d; background: #f7fafc; }
.is-active .step-number { color: #426b8a; background: #d2e3f2; border-color: #b4cee4; }
.step-content h3 { color: var(--ink-heading); }
.step-content > p { color: var(--ink-body); }
.step-preview { background: #ffffffd9; border-color: #d2dfea; box-shadow: 0 8px 28px #52728d07; }
.subject-preview > .tiny-label { color: #60788c; }
.subject-tile { color: #49657b; }
.purple-tile { background: #d3e3f1; }
.lime-tile { background: #c7e3f5; }
.peach-tile { background: #d8e1f6; }
.solution-preview > div { color: #496983; }
.solution-check { color: #49799e; background: #dbe9f6; }
.solution-preview > p { color: #4e677f; background: #ecf2fb; border-color: #cbd7eb; }
.solution-preview > p span { color: #798da9; }
.solution-preview > p b { color: #477399; }
.solution-preview > span { color: #68788a; }
.recap-preview .tiny-label { color: #697c8e; }
.recap-preview strong { color: #4b667d; }
.recap-preview strong > .icon { color: #668eb0; }
.recap-dots > span { color: #6389aa; background: #deeaf4; }
.recap-dots > span.recap-next { color: #4b7a9e; background: #b6d4ec; }

.role-tabs { background: #f0f4f8; border-color: #dde4ec; }
.role-tabs button { color: #61788b; }
.role-tabs button[aria-selected=true] { color: #36607f; background: white; border-color: #cddbe6; box-shadow: 0 2px 8px #5977950a; }
.role-panel { background: #f0f8ff; border-color: #d8e8f5; }
.role-copy > .small-tag { color: #53738e; }
.role-copy > p, .role-copy li { color: var(--ink-body); }
.role-copy li > .icon { color: #6191b5; }
.role-copy .text-link { color: var(--accent); }
.role-visual { margin-bottom: 0; }
.role-orbit { border-color: #cbdae6; }
.role-card { border-color: #d7e2eb; box-shadow: 0 20px 40px #466b8c0a; }
.role-card-header div > span { color: #667787; }
.role-card-header > .icon { color: #8eabc3; }
.role-card-banner { background: #e8f0f9; }
.role-card-banner > span { color: #647a91; }
.role-card-banner strong { color: #4b657f; }
.role-mini-progress { background: #d2deeb; }
.role-mini-progress span { background: #7fa8ce; }
.role-task { color: #5d6d7e; }
.role-task > span:last-child { color: #687a8e; }
.task-checkbox { border-color: #d7e1ea; }
.task-checkbox.checked { color: #618aab; background: #e6eff8; border-color: #cedcea; }
.role-card-foot { color: #617689; border-color: #e1e9f0; }

.demo-section { background: #edf7ff; border-color: #d8e8f5; }
.demo-section .section-heading > p, .demo-intro > p { color: var(--ink-body); }
.demo-badge { color: #4a718f; background: #d8e5f1; }
.subject-button { color: #556f84; border-color: #cbdae7; }
.subject-button > span { color: #6086a5; background: #dde8f3; }
.subject-button.active { color: #426988; border-color: #8fb3d0; background: white; box-shadow: 0 6px 14px #52728f0b; }
.subject-button.active > .icon { color: #739abb; }
.subject-button:hover { border-color: #86abc9; }
.demo-intro > .demo-disclaimer { color: #647b8d; }
.quiz-card { border-color: #cddce8; box-shadow: 0 16px 32px #4c6e8d08; }
.quiz-header, .quiz-header > span:last-child { color: #637687; }
.quiz-progress { background: #eaf0f7; }
.quiz-progress > span { background: #90b1d2; }
.quiz-question-label { color: #667889; }
.quiz-option { color: #516475; border-color: #dbe3eb; }
.option-letter { color: #778ea7; background: #e9eff9; }
.option-radio { border-color: #c2d1de; }
.quiz-option:hover { border-color: #9ab6cf; }
.quiz-option:has(input:checked) { background: #eaf0fa; border-color: #98b0d4; color: #4d658d; }
.quiz-option:has(input:checked) .option-radio { border-color: #839fc7; }
.quiz-option.is-correct { background: #e9f9ed; border-color: #9dd3ab; color: #588666; }
.quiz-option.is-correct .option-letter { background: #d9f1df; color: #5c9c6f; }
.quiz-option.is-correct .option-radio { border-color: #8bc79a; }
.quiz-option.is-wrong { background: #fff7ec; border-color: #e6cda4; color: #997644; }
.quiz-option.is-wrong .option-radio { border-color: #dcb87e; }
.hint-button { color: #5e7a91; }
.quiz-hint { background: #fff9ed; color: #8c784f; border-color: #ede1c4; }
.quiz-feedback { background: #ecf8ed; color: #608466; border-color: #d1e8d2; }
.quiz-feedback strong { color: #4c7e58; }
.quiz-feedback.incorrect { background: #fff8ee; color: #927c59; border-color: #ebdcc2; }
.quiz-feedback.incorrect strong { color: #917044; }
.quiz-actions .button:disabled { color: #698295; background: #dfe7ee; border-color: #d6dfe7; box-shadow: none; }
.quiz-footer, .quiz-footer > span:last-child { color: #617688; border-color: #e1e9f0; }
.result-spark { color: #6897ba; background: #e2eef8; }
.quiz-results > .eyebrow { color: #698298; }
.quiz-results > p { color: var(--ink-body); }
.result-score > strong { color: #5285ab; }
.result-score > span { color: #70889c; }
.result-review > div { color: #617687; border-color: #e2e9f0; }
.result-review .review-answer { color: #657a8c; }
.result-review .review-status { color: #6fac79; background: #edf8e8; }
.result-review .review-status.wrong { color: #be925d; background: #fff1de; }

.about-art { background: linear-gradient(135deg, #e6f7ff, #e6efff); border-color: #d0e4f7; }
.about-grid { background-image: linear-gradient(#aec5d840 1px, transparent 1px), linear-gradient(90deg, #aec5d840 1px, transparent 1px); }
.about-art::before, .about-art::after { border-color: #b6cee18f; }
.large-brand-mark { filter: drop-shadow(10px 18px 10px #4f708a18); }
.large-brand-mark i { background: linear-gradient(135deg, #83d0fb, #6198e3); }
.large-brand-mark i:first-child { background: linear-gradient(130deg, #c7eeff, #99c7fb); }
.about-copy > p { color: var(--ink-body); }
.about-values > span { color: #5a7892; }
.faq-heading > .eyebrow { color: #5f7688; }
.faq-list details { border-color: var(--border); }
.faq-list details > p { color: var(--ink-body); }
.faq-plus::before, .faq-plus::after { background: #85a2b8; }
.faq-list details > p a { color: var(--accent); }
.cta-section { color: var(--ink); background: linear-gradient(115deg, #edf9ff, #dfefff 64%, #eaf3ff); border: 1px solid #cce4f8; }
.cta-section .eyebrow { color: #5b7994; }
.cta-section h2 { color: var(--ink-heading); }
.cta-section h2 span { color: #448dca; }
.cta-section p { color: #577187; }
.cta-star { stroke: #96b9d6; opacity: .8; }
.cta-orbit, .cta-orbit::after { border-color: #bad1e45c; }
.footer-brand > p, .footer-company > span { color: #627381; }
.footer-main > nav { color: #5f7586; }
.footer-bottom { color: #607180; border-color: var(--border); }
.privacy-button { color: #5c758a; }
.back-top { color: #68859e; border-color: #d0dde8; background: #f0f6fb; }
.privacy-dialog { color: var(--ink); border-color: #d8e2eb; background: var(--bg); box-shadow: var(--shadow); }
.privacy-dialog::backdrop { background: #d4e4f1b8; backdrop-filter: blur(7px); }
.privacy-dialog .eyebrow { color: #6b8398; }
.privacy-dialog > p { color: var(--ink-body); }
.dialog-close { color: #6e8395; }
.noscript-message { color: #5f7487; background: #e7eff8; }

@media (max-width: 959px) {
  .role-visual { margin-bottom: 0; }
}
@media (max-width: 699px) {
  .role-visual { margin-block: 8px 0; }
  .footer-bottom .privacy-button { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-step { opacity: 1; }
}
@media print {
  .journey, .demo-section, .role-panel { background: white; }
  .hero h1 .purple-text { background: none; -webkit-text-fill-color: var(--accent); }
}
@media (forced-colors: active) {
  .hero h1 .purple-text { background: none; -webkit-text-fill-color: CanvasText; }
}