/* VextaLearn landing refresh — October 2026
   Scoped to the public homepage. Presentation-only overrides: Flask routes,
   Jinja data, auth state, course cards, CMS values and backend integrations stay intact. */
body.homepage {
  --vl-phase-bg: #ffffff;
  --vl-phase-paper: #f7f9fd;
  --vl-phase-tint: #eef5ff;
  --vl-phase-ink: #102344;
  --vl-phase-muted: #536783;
  --vl-phase-brand: #1764f5;
  --vl-phase-deep: #0c2d68;
  --vl-phase-gold: #f4b740;
  --vl-phase-border: #dce7f7;
  --vl-phase-shadow: 0 18px 48px rgba(16, 48, 96, .09);
  background: var(--vl-phase-bg);
  color: var(--vl-phase-ink);
}
body.homepage .vl-container { width: min(100% - 40px, 1280px); }
body.homepage .vl-section { padding-block: clamp(64px, 7.5vw, 100px); }
body.homepage .vl-section--paper { background: var(--vl-phase-paper); }
body.homepage .vl-section--tint { background: var(--vl-phase-tint); }
body.homepage .vl-eyebrow,
body.homepage .vl-hero-copy .vl-eyebrow { color: var(--vl-phase-brand); font-family: var(--vl-body); letter-spacing: .095em; }
body.homepage h1, body.homepage h2, body.homepage h3,
body.homepage .course-title { color: var(--vl-phase-ink); letter-spacing: -.045em; }
body.homepage h2 em, body.homepage h1 em { color: var(--vl-phase-brand); }
body.homepage .vl-button { min-height: 48px; border-radius: 11px; }
body.homepage .vl-button--primary { background: var(--vl-phase-brand); box-shadow: 0 9px 22px rgba(23,100,245,.18); }
body.homepage .vl-button--primary:hover { background: #0b4ed1; }
body.homepage .vl-button--secondary { background: #fff; border-color: #b9ccef; color: var(--vl-phase-deep); }
body.homepage .vl-button--secondary:hover { border-color: var(--vl-phase-brand); background: var(--vl-phase-tint); color: var(--vl-phase-deep); }
body.homepage .vl-arrow-link { color: var(--vl-phase-brand); }

/* Keep the top bar readable over the hero in either selected theme. */
body.homepage .vxt-navbar:not(.hb-nav-scrolled) {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--vl-phase-border);
  backdrop-filter: blur(16px);
}
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .nav-link,
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vx-navbar-wordmark,
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vx-navbar-wordmark-accent,
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vx-navbar-wordmark-learn,
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-nav-login-link,
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-nav-icon,
body.homepage .vxt-navbar:not(.hb-nav-scrolled) #languageSwitcher { color: var(--vl-phase-deep); }
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-mobile-toggler,
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-mobile-icon-btn { border-color: var(--vl-phase-border); background: #fff; color: var(--vl-phase-deep); }
body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-mobile-toggler { border-color: var(--vl-phase-border); background: #fff; }
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) {
  background: rgba(15,23,42,.94);
  border-bottom-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) .nav-link,
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vx-navbar-wordmark,
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vx-navbar-wordmark-accent,
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vx-navbar-wordmark-learn,
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-nav-login-link,
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-nav-icon,
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) #languageSwitcher { color: rgba(255,255,255,.9); }
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-mobile-toggler,
html[data-theme="dark"] body.homepage .vxt-navbar:not(.hb-nav-scrolled) .vxt-mobile-icon-btn {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
}
body.homepage .vxt-navbar.hb-nav-scrolled { background: rgba(255,255,255,.94); border-bottom-color: var(--vl-phase-border); box-shadow: 0 8px 26px rgba(16,35,68,.07); }
html[data-theme="dark"] body.homepage .vxt-navbar.hb-nav-scrolled { background: rgba(15,23,42,.94); }

/* Hero: clearer hierarchy, blue glow, and existing platform artwork. */
body.homepage .vl-hero { padding-top: 118px; background: var(--vl-phase-bg); color: var(--vl-phase-ink); }
body.homepage .vl-hero-backdrop {
  background: radial-gradient(ellipse at 83% 23%, rgba(53,132,255,.15), transparent 34%),
              radial-gradient(ellipse at 12% 4%, rgba(23,100,245,.06), transparent 28%),
              linear-gradient(180deg, #fff 0%, #f7faff 100%);
}
body.homepage .vl-hero-backdrop::after { display: none; }
body.homepage .vl-hero-layout { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); min-height: 570px; gap: clamp(32px,6vw,82px); padding-bottom: 64px; }
body.homepage .vl-hero-copy { max-width: 600px; }
body.homepage .vl-hero-copy .vl-eyebrow { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: #eaf2ff; font-size: .72rem; letter-spacing: .055em; }
body.homepage .vl-hero h1 { max-width: 620px; margin-top: 22px; font-size: clamp(3rem,5.8vw,5.25rem); line-height: .99; letter-spacing: -.065em; }
body.homepage .vl-hero-lead { max-width: 510px; margin-top: 22px; color: var(--vl-phase-muted); font-size: clamp(1rem,1.35vw,1.12rem); line-height: 1.75; }
body.homepage .vl-hero-actions { gap: 12px; margin-top: 28px; }
body.homepage .vl-hero-proof { gap: 20px; margin-top: 30px; color: var(--vl-phase-muted); }
body.homepage .vl-hero-proof strong { color: var(--vl-phase-ink); }
body.homepage .vl-hero-media { min-height: 0; isolation: isolate; }
body.homepage .vl-hero-image-frame { width: min(100%,680px); aspect-ratio: 1.12/1; overflow: hidden; border: 1px solid #d4e5ff; border-radius: 26px; background: #e8f2ff; box-shadow: 0 28px 64px rgba(22,74,145,.15); }
body.homepage .vl-hero-image-frame::after { background: linear-gradient(145deg,rgba(23,100,245,.06),transparent 55%,rgba(255,255,255,.12)); }
body.homepage .vl-hero-image-frame img { width: 100%; height: 100%; object-fit: cover; }
body.homepage .vl-hero-image-label { right: 18px; bottom: 18px; border-color: rgba(255,255,255,.65); background: rgba(12,45,104,.88); }
body.homepage .vl-hero-image-label i { color: #9dc3ff; }
body.homepage .vl-hero-footer { border-top: 1px solid var(--vl-phase-border); background: #f0f6ff; }
body.homepage .vl-hero-footer__inner { color: var(--vl-phase-muted); }

/* Learning paths and outcomes: card-based, clean, and consistent. */
body.homepage .vl-category-grid { gap: 18px; }
body.homepage .vl-category-card,
body.homepage .vl-outcome-card,
body.homepage .vl-featured-panel,
body.homepage .vl-mentor-card,
body.homepage .vl-popular-card {
  border-color: var(--vl-phase-border);
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(16,48,96,.035);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body.homepage .vl-category-card { background: linear-gradient(145deg,#fff,#f5f9ff); }
body.homepage .vl-category-card:hover,
body.homepage .vl-outcome-card:hover,
body.homepage .vl-popular-card:hover { transform: translateY(-4px); border-color: #9bbdff; box-shadow: var(--vl-phase-shadow); }
body.homepage .vl-category-icon,
body.homepage .vl-outcome-icon { color: var(--vl-phase-brand); background: #eaf2ff; border-radius: 13px; }
body.homepage .vl-category-footer { color: var(--vl-phase-brand); }
body.homepage .vl-outcome-card { background: #fff; }
body.homepage .vl-outcome-card > span strong { color: var(--vl-phase-ink); }
body.homepage .vl-outcome-card > span small { color: var(--vl-phase-muted); }

/* Featured and popular course panels retain the existing real course data. */
body.homepage .vl-featured-panel { overflow: hidden; background: #fff; box-shadow: var(--vl-phase-shadow); }
body.homepage .vl-image-badge { background: var(--vl-phase-brand); }
body.homepage .vl-image-category { background: rgba(12,45,104,.9); }
body.homepage .vl-featured-copy > p,
body.homepage .vl-section-heading > p { color: var(--vl-phase-muted); line-height: 1.75; }
body.homepage .vl-meta-row { color: var(--vl-phase-muted); }
body.homepage .vl-featured-footer { border-top-color: var(--vl-phase-border); }
body.homepage .vl-featured-footer > strong { color: var(--vl-phase-deep); }
body.homepage .vl-popular-card { overflow: hidden; background: #fff; }
body.homepage .vl-popular-card .course-card,
body.homepage .vl-popular-card .card { border: 0; box-shadow: none; }
body.homepage .vl-journey-section { background: #fff; }
body.homepage .vl-journey-image-frame { border-radius: 22px; box-shadow: var(--vl-phase-shadow); }
body.homepage .vl-journey-note { border-color: var(--vl-phase-border); background: #fff; color: var(--vl-phase-muted); box-shadow: 0 12px 30px rgba(16,48,96,.08); }
body.homepage .vl-journey-number { color: var(--vl-phase-brand); }
body.homepage .vl-journey-icon { color: var(--vl-phase-brand); background: #eaf2ff; border-color: #d9e7ff; }
body.homepage .vl-journey-copy strong { color: var(--vl-phase-ink); }
body.homepage .vl-journey-copy p { color: var(--vl-phase-muted); }
body.homepage .vl-mentor-card { background: #fff; }
body.homepage .vl-mentor-label { color: var(--vl-phase-brand); }
body.homepage .vl-mentor-stats { color: var(--vl-phase-muted); }
body.homepage .vl-mentor-stats strong { color: var(--vl-phase-ink); }

/* Conversion area and FAQ use a confident navy/blue finish. */
body.homepage .vl-cta-section,
body.homepage .vl-final-cta,
body.homepage .vl-referral-banner { background: linear-gradient(120deg,#0c2d68,#1249a4 68%,#1764f5); color: #fff; }
body.homepage .vl-cta-section h2,
body.homepage .vl-final-cta h2,
body.homepage .vl-referral-banner h2 { color: #fff; }
body.homepage .vl-cta-section p,
body.homepage .vl-final-cta p,
body.homepage .vl-referral-banner p { color: rgba(255,255,255,.8); }
body.homepage .vl-cta-section .vl-eyebrow,
body.homepage .vl-final-cta .vl-eyebrow,
body.homepage .vl-referral-banner .vl-eyebrow { color: #b8d2ff; }
body.homepage .vl-faq-item { border-color: var(--vl-phase-border); background: #fff; border-radius: 12px; }
body.homepage .vl-faq-item summary { color: var(--vl-phase-ink); }
body.homepage .vl-faq-item p { color: var(--vl-phase-muted); }
body.homepage .vl-home a:focus-visible,
body.homepage .vl-home button:focus-visible { outline: 3px solid #8ab4ff; outline-offset: 3px; border-radius: 6px; }

html[data-theme="dark"] body.homepage {
  --vl-phase-bg: #0b1220;
  --vl-phase-paper: #111b2c;
  --vl-phase-tint: #101f35;
  --vl-phase-ink: #eef4ff;
  --vl-phase-muted: #b3c2d9;
  --vl-phase-border: #293a54;
  background: var(--vl-phase-bg);
  color: var(--vl-phase-ink);
}
html[data-theme="dark"] body.homepage .vl-hero-backdrop { background: radial-gradient(ellipse at 83% 23%,rgba(23,100,245,.22),transparent 34%),linear-gradient(180deg,#0b1220,#101a2b); }
html[data-theme="dark"] body.homepage .vl-hero-copy .vl-eyebrow { background: #172d4e; }
html[data-theme="dark"] body.homepage .vl-hero h1,
html[data-theme="dark"] body.homepage h1,
html[data-theme="dark"] body.homepage h2,
html[data-theme="dark"] body.homepage h3 { color: var(--vl-phase-ink); }
html[data-theme="dark"] body.homepage .vl-hero-footer { background: #111f33; border-color: var(--vl-phase-border); }
html[data-theme="dark"] body.homepage .vl-category-card,
html[data-theme="dark"] body.homepage .vl-outcome-card,
html[data-theme="dark"] body.homepage .vl-featured-panel,
html[data-theme="dark"] body.homepage .vl-mentor-card,
html[data-theme="dark"] body.homepage .vl-popular-card,
html[data-theme="dark"] body.homepage .vl-faq-item { background: #111b2c; border-color: var(--vl-phase-border); }
html[data-theme="dark"] body.homepage .vl-journey-section { background: var(--vl-phase-bg); }
html[data-theme="dark"] body.homepage .vl-journey-note { background: #111b2c; color: var(--vl-phase-muted); border-color: var(--vl-phase-border); }
html[data-theme="dark"] body.homepage .vl-featured-footer > strong,
html[data-theme="dark"] body.homepage .vl-outcome-card > span strong,
html[data-theme="dark"] body.homepage .vl-journey-copy strong,
html[data-theme="dark"] body.homepage .vl-faq-item summary { color: var(--vl-phase-ink); }

@media (max-width: 991.98px) {
  body.homepage .vl-hero { padding-top: 104px; }
  body.homepage .vl-hero-layout { grid-template-columns: 1fr; min-height: auto; gap: 34px; padding-bottom: 48px; }
  body.homepage .vl-hero-copy { max-width: 760px; }
  body.homepage .vl-hero h1 { max-width: 720px; font-size: clamp(3rem,8.2vw,5rem); }
  body.homepage .vl-hero-media { width: min(100%,760px); margin-inline: auto; }
  body.homepage .vl-hero-image-frame { aspect-ratio: 1.35/1; }
}
@media (max-width: 575.98px) {
  body.homepage .vl-container { width: min(100% - 32px,1280px); }
  body.homepage .vl-hero { padding-top: 94px; }
  body.homepage .vl-hero h1 { font-size: clamp(2.65rem,12vw,4rem); line-height: 1.02; }
  body.homepage .vl-hero-lead { font-size: .98rem; line-height: 1.65; }
  body.homepage .vl-hero-actions { align-items: stretch; flex-direction: column; }
  body.homepage .vl-hero-actions .vl-button { width: 100%; }
  body.homepage .vl-hero-image-frame { aspect-ratio: 1/1; border-radius: 18px; }
  body.homepage .vl-hero-proof { flex-wrap: wrap; gap: 10px 18px; }
  body.homepage .vl-hero-footer__inner { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 16px; }
  body.homepage .vl-hero-footer__rule { display: none; }
  body.homepage .vl-section { padding-block: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  body.homepage .vl-home *, body.homepage .vl-home *::before, body.homepage .vl-home *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}