/*
 * Brand palette v5.
 * Oxford navy keeps the academic character, electric indigo carries the
 * product UI, ice blue marks actions and hot coral adds human energy.
 */
:root {
  --brand-night: #11162f;
  --brand-night-2: #1b2349;
  --brand-electric: #5b4df2;
  --brand-electric-dark: #3d31bd;
  --brand-ice: #78e7ff;
  --brand-coral: #ff5f7a;
  --brand-sun: #ffc766;
  --brand-cloud: #f3f5fb;
  --brand-paper: #fffefd;
  --p-pine: var(--brand-night);
  --p-pine-2: var(--brand-night-2);
  --p-green: var(--brand-electric);
  --p-lime: var(--brand-ice);
  --p-cream: var(--brand-cloud);
  --p-paper: var(--brand-paper);
  --p-ink: #151a31;
  --p-muted: #68708a;
  --p-line: #dce1ee;
  --p-coral: var(--brand-coral);
  --p-blue: #bdd7ff;
  --p-cobalt: var(--brand-electric);
  --v3-bg: var(--brand-cloud);
  --v3-surface: var(--brand-paper);
  --v3-ink: #151a31;
  --v3-muted: #68708a;
  --v3-line: #dce1ee;
  --v3-primary: var(--brand-electric);
  --v3-primary-dark: var(--brand-electric-dark);
  --v3-lime: var(--brand-ice);
  --v3-mint: #c9f5ff;
  --v3-coral: var(--brand-coral);
  --v3-yellow: var(--brand-sun);
  --ui-night: var(--brand-night);
  --ui-panel: var(--brand-night-2);
  --ui-soft: #eef2ff;
  --ui-violet: var(--brand-electric);
  --ui-lime: var(--brand-ice);
  --ui-border: #dde3f0;
}

html,
.public-page { background: var(--brand-cloud); }
.public-page main {
  background:
    radial-gradient(circle at 7% 4%, rgba(120, 231, 255, .13), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(255, 95, 122, .09), transparent 20%),
    var(--brand-cloud);
}
.public-header { border-bottom-color: rgba(17, 22, 47, .08); }
.public-brand-type b,
.public-nav .public-cabinet-link,
.public-eyebrow,
.product-proof > header > span { color: var(--brand-electric); }
.public-header-cta { background: var(--brand-night); }
.public-header-cta b,
.product-primary span,
.public-button--lime { background: var(--brand-ice); color: var(--brand-night); }

.product-kicker i { background: var(--brand-coral); }
.product-hero h1 em {
  background: linear-gradient(112deg, var(--brand-electric) 8%, var(--brand-electric) 58%, var(--brand-coral) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.product-hero-meta b { color: var(--brand-coral); }
.product-demo {
  background: var(--brand-night);
  border-color: #20284f;
  box-shadow: 0 45px 100px rgba(17, 22, 47, .27);
}
.product-demo > header { background: #20284f; }
.product-demo-body > aside { background: #171d3a; }
.product-demo > header b,
.product-demo-body > aside nav i.is-active,
.demo-stat-row article:first-child { background: var(--brand-ice); border-color: var(--brand-ice); }
.product-demo-body > aside nav i.is-active { box-shadow: 0 0 0 7px rgba(120, 231, 255, .11); }
.product-demo-body > aside strong,
.demo-topline button,
.demo-journey li.is-current > i { background: var(--brand-electric); border-color: var(--brand-electric); }
.demo-journey-head > b { background: #e9faff; color: #13748c; }

.bento-library,
.method-copy,
.teacher-quote,
.public-footer,
.public-inner-hero,
.subject-profile-hero,
.course-detail-hero,
.portal-login-story { background: var(--brand-night); }
.bento-topic-stack span { background: #20284f; }
.bento-topic-stack span:nth-child(2) { background: var(--brand-electric); }
.bento-visibility { background: var(--brand-ice); }
.bento-progress { background: #e9e8ff; }
.progress-ring {
  background: conic-gradient(var(--brand-electric) 0 52%, var(--brand-coral) 52% 72%, rgba(91, 77, 242, .12) 72%);
}

.method-visual { background: linear-gradient(145deg, var(--brand-electric) 0%, #4335c8 58%, #29205f 100%); }
.method-visual::after {
  background:
    radial-gradient(circle at 68% 48%, var(--brand-ice) 0 10%, transparent 10.5%),
    radial-gradient(circle at 44% 62%, var(--brand-coral) 0 7%, transparent 7.5%),
    linear-gradient(145deg, transparent 45%, rgba(255, 255, 255, .14) 46% 54%, transparent 55%);
}
.method-copy h2 em,
.method-copy li > span,
.teacher-quote > span,
.public-footer-main > a:last-child { color: var(--brand-ice); }

.request-copy { background: linear-gradient(145deg, var(--brand-electric) 0%, #4938dd 62%, #302668 100%); }
.request-copy h2 em { color: var(--brand-ice); }
.request-copy::after {
  background:
    radial-gradient(circle at 70% 70%, var(--brand-ice) 0 8%, transparent 8.5%),
    radial-gradient(circle at 80% 58%, var(--brand-coral) 0 5%, transparent 5.5%);
}

.public-program-card:has(.public-program-visual) { --program-accent: var(--brand-ice); }
.public-program-card:has(.public-program-visual):nth-child(2) { --program-accent: var(--brand-electric); }
.public-program-card:has(.public-program-visual):nth-child(3) { --program-accent: var(--brand-coral); }
.public-program-card:has(.public-program-visual):nth-child(4) { --program-accent: var(--brand-sun); }
.public-program-card:has(.public-program-visual) .public-pill { background: #eeecff; color: var(--brand-electric); }

.interface-chrome,
.public-inner-hero::before,
.subject-profile-hero::before,
.course-detail-hero::before,
.contact-layout::before { background: #20284f; }
.interface-session { background: var(--brand-night); }
.session-screen { background: #171d3a; }
.session-layout > aside { background: var(--brand-night); }
.session-focus { background: linear-gradient(145deg, var(--brand-electric), #4031ba); }
.session-focus::after { background: var(--brand-ice); }
.session-layout > aside > span,
.onboarding-steps span.is-active i { background: var(--brand-ice); border-color: var(--brand-ice); }
.interface-onboarding { background: #e5e8ff; }
.onboarding-steps span { color: #d8dbff; }
.form-appbar > b { background: #eeecff; color: var(--brand-electric); }

.public-inner-hero--about { background: var(--brand-night); }
.public-inner-hero--about .public-eyebrow { color: var(--brand-coral); }
.public-inner-hero--about h1 em,
.portal-login-copy h1 em { color: var(--brand-ice); }
.portal-login-story::after { border-color: var(--brand-electric); }
.portal-login-ticket { background: var(--brand-coral); }
.portal-login-ticket i { background: var(--brand-ice); }

.catalog-window .public-program-card:not(:has(.public-program-visual))::before {
  background: radial-gradient(circle at 22% 28%, rgba(91, 77, 242, .16) 0 18%, transparent 18.5%), linear-gradient(145deg, #eeecff, #f8f8ff);
  color: var(--brand-electric);
}
.catalog-window .public-program-card:not(:has(.public-program-visual)):nth-child(4)::before {
  background: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)), repeating-linear-gradient(0deg, transparent 0 24px, rgba(120,231,255,.2) 25px), #dff8ff;
  color: #168eb1;
}

@media (max-width: 900px) {
  .public-nav { background: var(--brand-night); }
}