/* Cosmic art direction. The original stylesheet retains the layout and responsive foundations. */
:root {
  --cyan: #05c7f2;
  --aqua: #05f2db;
  --magenta: #f205cb;
  --bright-magenta: #ee05f2;
  --electric-blue: #4e6dff;
  --violet: #8a5cff;
  --pink-ink: #ff91e3;
  --violet-ink: #b7a2ff;
  --accent: #70e7de;
  --foreground: #fff;
  --ring: #05c7f2;
}
/* The human portrait remains the first screen's focal point. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 83% 37%, #8a5cff1f, transparent 47%),
    radial-gradient(ellipse at 57% 72%, #f205cb0c, transparent 40%);
}
.portrait-frame { box-shadow: 18px 5px 70px -45px #8a5cff80; }
.os-label { border-color: #05c7f24d; background: linear-gradient(120deg, #0d202bf5, #15172bf5); border-radius: 6px; }
.button { transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.button-primary { background: #70e7de; }
.button-primary:hover { background: #a0f5eb; box-shadow: 0 8px 28px #05c7f21a; }
.button:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #8befff; outline-offset: 5px; }
.section-heading h2 { text-wrap: balance; }
.school-manifesto {
  background-image: radial-gradient(ellipse at 90% 50%, #8a5cff17, transparent 65%),
    linear-gradient(#8aa4b209 1px, transparent 1px), linear-gradient(90deg, #8aa4b209 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
}
.manifesto-inner h2 .accent { color: var(--accent); }
#outcomes .eyebrow, #results .eyebrow, #outcomes h2 .accent, #results h2 .accent { color: var(--pink-ink); }
.program-intro h2 .accent { color: var(--pink-ink); }
.defense-card .eyebrow { color: var(--violet-ink); }
/* Cyan and pink glass badges. Bright colors belong to edges; lighter tones to text. */
.event-content .eyebrow, .os-inner .eyebrow, .library-tags > span {
  width: fit-content; max-width: 100%; border: 1px solid #05c7f238; border-radius: 6px;
  background: #0b1c29e8; padding: 10px 12px; color: var(--accent);
}
.event-content .eyebrow, .os-inner .eyebrow {
  border-color: #f205cb4d; background: linear-gradient(115deg, #221324eb, #111623f5);
  color: var(--pink-ink); box-shadow: inset 0 1px #f205cb0d, 0 0 24px #f205cb08;
}
.library-tags > span { box-shadow: inset 0 1px #05c7f20b; }
.event-meta > span:first-child {
  color: var(--pink-ink); background: #25142ae6; border: 1px solid #f205cb42; padding: 6px 10px; border-radius: 5px;
}
/* Open lesson: editorial invitation, with a separate image window on mobile. */
.event-card { border-color: #a44b9559; border-radius: 12px; box-shadow: 0 18px 65px -45px #f205cb55; }
.event-art { width: 100%; height: 100%; aspect-ratio: 1672 / 941; object-fit: cover; object-position: 70% 50%; opacity: .9; }
.event-card::before {
  background: linear-gradient(90deg, #0b1220 3%, #0b1220f5 34%, #0b1220c9 51%, #0b12201a 86%),
    linear-gradient(0deg, #0b1220a6, transparent 40%);
}
.event-content { width: 66%; padding: 48px; }
.event-content h2 .accent { color: var(--pink-ink); }
.event-meta { align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.event-date { color: var(--pink-ink); font-size: 15px; font-weight: 650; }
.event-timezone { color: #b8c3d4; }
.event-number { color: #f6eaff; text-shadow: 0 4px 24px #0b1220; }
.event-content .button, .final-inner .button-primary {
  color: #fff; background: linear-gradient(115deg, #32203a, #251a37); border: 1px solid #ec65cf;
  box-shadow: inset 0 1px #ffffff0d, 0 6px 28px #f205cb0d;
}
.event-content .button:hover, .final-inner .button-primary:hover {
  background: #482347; border-color: #ffb0ee; box-shadow: 0 8px 30px #f205cb24;
}
/* Controlled card variation. */
.outcome-card, .audience-card { transition: border-color .25s, box-shadow .25s; }
.outcome-card { border-top-color: #05c7f269; border-radius: 8px; }
.outcome-card:nth-child(2), .outcome-card:nth-child(4) {
  border-top-color: #f205cb80; background: radial-gradient(ellipse at 100% 0, #f205cb0e, transparent 62%), #0c1520;
}
.outcome-card:nth-child(2) .outcome-index, .outcome-card:nth-child(4) .outcome-index { color: var(--pink-ink); }
.outcome-card:nth-child(2) li svg, .outcome-card:nth-child(4) li svg { color: #c67ab6; }
.outcome-index > span { color: #9aaabc; }
.outcome-card:nth-child(2):hover, .outcome-card:nth-child(4):hover {
  border-color: #f205cb66; box-shadow: 0 12px 35px -22px #f205cb35;
}
.audience-card:hover { border-color: #05c7f280; box-shadow: 0 8px 30px -20px #05c7f240; }
/* Strategy 01–03 cyan, commerce 04–06 pink, 07–08 cyan, AI violet, growth pink. */
.lesson { --lesson-accent: var(--accent); }
.lesson:nth-child(n+4):nth-child(-n+6), .lesson:nth-child(10) { --lesson-accent: var(--pink-ink); }
.lesson:nth-child(9) { --lesson-accent: var(--violet-ink); }
.lesson-number { color: var(--lesson-accent); font-variant-numeric: tabular-nums; border-top: 1px solid currentColor; padding-top: 9px; }
.lesson-trigger:hover .lesson-title, .lesson-trigger[aria-expanded=true] .lesson-title,
.lesson-trigger[aria-expanded=true] .lesson-number, .lesson-result > span { color: var(--lesson-accent); }
.lesson-trigger > [data-slot=accordion-trigger-icon] { color: var(--lesson-accent) !important; }
.lesson:nth-child(n+4):nth-child(-n+6) .lesson-result, .lesson:nth-child(10) .lesson-result {
  background: linear-gradient(125deg, #261a2a, #161b29); border-color: #f205cb38;
}
.lesson:nth-child(9) .lesson-result { background: #1b1b32; border-color: #8a5cff59; }
.cosmic-editorial {
  margin: 0 0 28px 58px; position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid #8a5cff40; border-radius: 10px; box-shadow: 0 14px 45px -32px #8a5cff55;
}
.cosmic-editorial::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #080e174d, transparent 40%); box-shadow: inset 0 0 55px #080e1730;
}
.cosmic-image {
  display: block; width: 100%; height: auto; aspect-ratio: 2.65; object-fit: cover;
  object-position: 50% 53%; filter: saturate(.78) brightness(.9);
}
.lesson:nth-child(4) .cosmic-editorial { border-top-color: #f205cb73; }
.lesson:nth-child(4) .cosmic-image { object-position: 60% 42%; }
.lesson:nth-child(8) .cosmic-editorial { border-top-color: #05c7f273; }
.lesson:nth-child(8) .cosmic-image { object-position: 50% 53%; }
/* Marketing OS: portal, network and content occupy separate visual layers. */
.os-section, .final-section { position: relative; isolation: isolate; overflow: hidden; }
.cosmic-backdrop {
  display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  aspect-ratio: 1672 / 941; object-fit: cover; object-position: 65% 50%; opacity: .8; filter: saturate(.8);
}
.os-section::before, .final-section::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #080e17f5 5%, #080e17d9 35%, #080e1733 100%),
    linear-gradient(0deg, #080e17e6, #080e1700 55%, #080e1773);
}
.os-inner { gap: 72px; padding-block: 100px; }
.os-inner, .final-inner { position: relative; z-index: 2; }
.os-inner h2 > span:not(.accent) {
  color: transparent; background: linear-gradient(105deg, #70e7de 10%, #b7a2ff 58%, #ff91e3);
  background-clip: text; -webkit-background-clip: text;
}
.os-inner h2 .accent { color: var(--pink-ink); }
.os-inner .small-label { color: #a9bcd0; }
.os-inner > div > p { color: #d0d9e5; }
.os-map { padding: 22px; border: 1px solid #8a5cff4d; border-radius: 12px; background: #0a1123d9; box-shadow: 0 20px 60px #0004; }
.os-map-core { background: #102c39f5; border-color: #05c7f273; }
.os-map-nodes > div { background: #101d2df5; }
.os-map-nodes > div > span:first-child { color: #97b3c6; }
.os-map-nodes > div:nth-child(4), .os-map-nodes > div:nth-child(5), .os-map-nodes > div:nth-child(7) { border-color: #f205cb45; }
.os-map-nodes > div:nth-child(4) .status-dot, .os-map-nodes > div:nth-child(5) .status-dot,
.os-map-nodes > div:nth-child(7) .status-dot { background: var(--pink-ink); }
.os-map-nodes > div:nth-child(11) { border-color: #8a5cff80; }
.final-section { border-top-color: #8a5cff59; background: #0b1220; }
.final-section .cosmic-backdrop { object-position: 50% 52%; opacity: .85; }
.final-section::before {
  background: linear-gradient(90deg, #080e17f5, #080e17b8 52%, #080e1726), linear-gradient(0deg, #080e17cc, transparent 55%);
}
.final-inner { padding-block: 94px 100px; }
.final-inner h2 { max-width: 900px; }
.final-inner > p { color: #d0d9e5; }
.final-inner .eyebrow { color: var(--pink-ink); }
.final-inner .button-secondary { background: #0b1220d9; }
.final-coordinates { color: #c1afdf; }
@media (max-width: 1200px) {
  .event-content { width: 72%; padding: 36px; }
  .os-inner { gap: 35px; }
  .os-map { padding: 16px; }
}
@media (max-width: 1000px) {
  .event-content { width: 82%; }
  .os-map-core { padding: 20px 12px; }
  .cosmic-image { aspect-ratio: 2.3; }
}
@media (max-width: 700px) {
  .hero::before { background: radial-gradient(ellipse at 75% 65%, #8a5cff12, transparent 50%); }
  .event-card { display: flex; flex-direction: column; border-radius: 10px; }
  .event-art {
    position: relative; inset: auto; order: 0; z-index: 0; width: 100%; height: auto;
    aspect-ratio: 16 / 10; object-position: 68% 50%; opacity: .86;
  }
  .event-card::before { display: none; }
  .event-content { order: 1; width: 100%; padding: 26px 23px 30px; background: linear-gradient(145deg, #171326, #0c1622 65%); }
  .event-content .eyebrow { font-size: 8px; letter-spacing: .1em; gap: 8px; }
  .event-content .eyebrow > span { width: 14px; flex-shrink: 0; }
  .event-description { max-width: none; }
  .event-meta { gap: 10px; }
  .event-date { font-size: 13px; line-height: 1.8; }
  .event-content .button { min-height: 48px; font-size: 11px; }
  .cosmic-editorial { margin: 0 0 24px; border-radius: 8px; box-shadow: none; }
  .cosmic-image { aspect-ratio: 16 / 10; }
  .lesson-number { padding-top: 6px; }
  .os-inner { padding-block: 55px; }
  .os-section .cosmic-backdrop { width: 100%; height: 420px; object-position: 58% 45%; opacity: .55; }
  .os-section::before { background: linear-gradient(0deg, #080e17 35%, #080e17a6 75%, #080e17cc); }
  .os-map { padding: 16px; margin-top: 32px; }
  .os-map-core { padding: 18px 12px; gap: 9px; }
  .os-map-core strong { font-size: 13px; }
  .os-map-core > span { display: none; }
  .os-map-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-map-nodes > div { font-size: 11px; padding: 13px 9px; }
  .os-map-nodes > div:last-child { grid-column: auto; }
  .final-section .cosmic-backdrop { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 16 / 10; object-position: 65% 50%; }
  .final-section::before { display: none; }
  .final-inner { padding-block: 35px 55px; }
  .final-inner .button { font-size: 12px; }
}
@media (max-width: 360px) {
  .event-content { padding-inline: 18px; }
  .event-content .button { width: 100%; padding-inline: 9px; gap: 7px; font-size: 10px; }
  .event-content .eyebrow { font-size: 7px; }
  .os-map { padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .button:hover { transform: none; }
}
@media print {
  .cosmic-backdrop, .cosmic-editorial, .event-art { display: none; }
  .os-section::before, .final-section::before { display: none; }
}