/* Hero Window - macOS-style framed window beneath the main title logo.
   Lifted from hero-variant-a-windows.html (Window 1) and scoped under
   .hero-window to avoid colliding with other site styles.
   Only consumer: /home-classic (HomeView.vue), the retired home page kept at a hidden noindexed URL. */

.hero-window-section {
  --hw-brand-grad-compact: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  --hw-hairline: rgba(25, 26, 35, 0.10);
  --hw-hairline-strong: rgba(25, 26, 35, 0.18);
  --hw-mac-titlebar-grad: linear-gradient(180deg, #FBFBFD 0%, #F1F2F4 100%);
  --hw-mac-titlebar-border: rgba(0, 60, 130, 0.09);
  --hw-mac-title-text: rgba(0, 0, 0, 0.62);
  --hw-mac-path-text: rgba(0, 0, 0, 0.36);
  /* Calm, diffuse float: tight contact shadow + soft ambient layers + a
     hairline ring, all in the cool-blue family (no raw black per brand rule). */
  --hw-mac-window-shadow:
    0 2px 5px rgba(0, 60, 130, 0.05),
    0 14px 32px rgba(0, 60, 130, 0.10),
    0 44px 80px rgba(0, 60, 130, 0.10),
    0 0 0 0.5px rgba(0, 60, 130, 0.10);
  --hw-mac-window-bg: #FFFFFF;
  --hw-mac-footer-bg: #F6F7F9;
  --hw-tl-close-fill: #FF5F57;
  --hw-tl-close-border: #E0443E;
  --hw-tl-min-fill: #FEBC2E;
  --hw-tl-min-border: #DEA123;
  --hw-tl-max-fill: #28C840;
  --hw-tl-max-border: #1AAB29;
  --hw-font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  position: relative;
  z-index: 1;
  max-width: 1080px;
  width: calc(100% - 56px);
  margin: 50px auto 96px;
  padding: 0;
}

.hero-window {
  background: var(--hw-mac-window-bg);
  border-radius: 12px;
  box-shadow: var(--hw-mac-window-shadow);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  /* Soft fade-up-and-settle on load - matches the principles strip easing.
     No hover transform on the frame; Apple keeps product chrome still. */
  animation: hero-window-settle 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes hero-window-settle {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-window { animation: none; }
}

/* Title bar - LTR-pinned, matches Big Sur+ */
.hero-window-titlebar {
  height: 40px;
  background: var(--hw-mac-titlebar-grad);
  border-bottom: 1px solid var(--hw-mac-titlebar-border);
  /* Inset top highlight - the surface catches light like glass. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  position: relative;
  direction: ltr;
  user-select: none;
}

.hero-window-traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.hero-window-tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 60, 130, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-family: var(--hw-font-system);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: transparent;
  transition: color 0.12s ease;
  cursor: default;
}

.hero-window-tl--close { background: var(--hw-tl-close-fill); border: 0.5px solid var(--hw-tl-close-border); }
.hero-window-tl--min   { background: var(--hw-tl-min-fill);   border: 0.5px solid var(--hw-tl-min-border); }
.hero-window-tl--max   { background: var(--hw-tl-max-fill);   border: 0.5px solid var(--hw-tl-max-border); }

.hero-window:hover .hero-window-tl--close { color: rgba(74, 0, 0, 0.70); }
.hero-window:hover .hero-window-tl--min   { color: rgba(120, 60, 0, 0.70); }
.hero-window:hover .hero-window-tl--max   { color: rgba(0, 60, 0, 0.70); }

.hero-window-tl--close::before { content: '\00d7'; }
.hero-window-tl--min::before   { content: '\2013'; }
.hero-window-tl--max::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 1.2px solid transparent;
  border-top-color: rgba(0, 60, 0, 0);
  border-left-color: rgba(0, 60, 0, 0);
  transition: border-color 0.12s ease;
}
.hero-window:hover .hero-window-tl--max::before {
  border-top-color: rgba(0, 60, 0, 0.70);
  border-left-color: rgba(0, 60, 0, 0.70);
}

.hero-window-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

.hero-window-title > * {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-window-path {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--hw-mac-path-text);
  font-weight: 500;
}

.hero-window-headline {
  font-family: var(--hw-font-system);
  font-size: 13px;
  font-weight: 600;
  color: var(--hw-mac-title-text);
  letter-spacing: -0.005em;
}

.hero-window-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Body - hero copy */
.hero-window-body {
  direction: rtl;
  padding: 64px 56px 56px;
  text-align: center;
  position: relative;
  /* Faint cool tint pooled at the top - reads as soft glass light, fades to white. */
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(8, 148, 255, 0.035) 0%, rgba(8, 148, 255, 0) 62%),
    #FFFFFF;
}

.hero-window-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--primary-color);
  margin-bottom: 18px;
}

.hero-window-title-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 auto 18px;
  max-width: 22ch;
  color: var(--text-color);
}

.hero-course-main-subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 40px auto 52px;
  position: relative;
  text-align: center;
}

/* ───── Hero Principles strip ───────────────────────────────────
   Apple-store inspired row of brand tenets sitting between the
   marketing subtitle and the macOS-style hero window. Pure typography,
   light weights, brand-gradient discs as separators. The eyebrow above
   and the 64px gradient hairline below frame the strip and bridge it
   into the window beneath. */
.hero-principles {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 10px auto 44px;
  padding: 0 24px;
  text-align: center;
  animation: hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.hero-principles-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  direction: rtl;
}

.hero-principles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  direction: ltr;
  max-width: 70vw;
}

.hero-principles-item {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-color);
  white-space: nowrap;
  padding: 4px 0;
  transition: color 0.2s ease;
}

/* Combined selector out-specifies the base .hero-principles-item color,
   so the shared .blue-bold-text accent actually lands on emphasized items.
   Solid brand blue (not gradient), so bold-600 is allowed here. */
.hero-principles-item.blue-bold-text {
  color: var(--primary-color);
  font-weight: 600;
}

.hero-principles-item:hover {
  color: var(--primary-color);
}

/* Brand-gradient disc inserted after every item except the last.
   Using ::after (not ::before) so the disc trails its item and stays
   on the same line on wrap - no orphan disc leading a new row.
   Compact 3-stop gradient matches the canonical brand mark. */
.hero-principles-item:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0894FF 0%, #BD32D6 55%, #FFA304 100%);
  box-shadow: 0 0 10px rgba(189, 50, 214, 0.28);
  margin: 0 20px;
  vertical-align: middle;
  position: relative;
  top: -2px;
  flex-shrink: 0;
}

.hero-principles-hairline {
  display: block;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  opacity: 0.55;
}

.hero-window-support {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  line-height: 1.7;
  color: var(--text-color);
  max-width: 50ch;
  margin: 36px auto 0;
}

/* Single restrained brand-gradient micro-rule (canonical 56x2 mark) in place
   of the old top+bottom hairlines that fenced this block in. */
.hero-window-support::before {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 auto 28px;
  border-radius: 999px;
  background: var(--hw-brand-grad-compact);
  opacity: 1;
}

.hero-window-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 38px;
}

.hero-window-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.hero-window-btn:hover { transform: translateY(-1px); }

/* Primary = the registration CTA. A slanted partial slice of the brand gradient -
   deep blue -> violet -> deep magenta-pink - kept dark and restrained so it reads
   professional, not neon. White text sits on the fill (the brand weight rule only
   forbids gradient applied TO text, not gradient fills beneath it). A faint inset
   highlight + purple-blue glow from the cool-shadow family add craft. */
.hero-window-btn--primary {
  background-image: linear-gradient(135deg, #1E50B8 10%, #6A37C9 72%, #A82C84 100%);
  color: #fff;
  padding: 12px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(0, 60, 130, 0.12),
    0 6px 18px rgba(106, 55, 201, 0.28);
}
.hero-window-btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 4px rgba(0, 60, 130, 0.16),
    0 11px 28px rgba(106, 55, 201, 0.38);
}

.hero-window-btn--primary svg { transition: transform 0.25s ease; }
.hero-window-btn--primary:hover svg { transform: translateX(-3px); }

/* Secondary = quiet glass chips - clearly subordinate to the orange CTA. */
.hero-window-btn--secondary {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-color);
  border-color: var(--hw-hairline-strong);
  box-shadow: 0 1px 2px rgba(0, 60, 130, 0.04);
}
.hero-window-btn--secondary:hover {
  background: #fff;
  border-color: rgba(0, 60, 130, 0.22);
  box-shadow: 0 2px 8px rgba(0, 60, 130, 0.08);
}

/* Footer - manifesto strip */
.hero-window-footer {
  direction: rtl;
  background: var(--hw-mac-footer-bg);
  border-top: 1px solid var(--hw-hairline);
  padding: 22px 36px;
}

.hero-window-manifesto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-window-manifesto-line {
  font-family: var(--font-display);
  font-weight: 500;
  /*font-style: italic;*/
  font-size: 16px;
  color: var(--text-color);
  line-height: 1.4;
  margin: 0;
}

/* Solid brand color on the emphasized word - gradient is forbidden on
   semi-bold weight per the brand rule (light/thin only). */
.hero-window-manifesto-line strong {
  font-weight: 600;
  font-style: normal;
  color: var(--primary-color);
}

.hero-window-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  direction: ltr;
}

.hero-window-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--hw-hairline-strong);
  padding: 5px 10px;
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-window-section { width: calc(100% - 32px); margin-bottom: 72px; }
  .hero-window-body { padding: 56px 40px 48px; }
  .hero-principles { margin-bottom: 36px; gap: 16px; }
  .hero-principles-item:not(:last-child)::after { margin: 0 14px; }
}

@media (max-width: 820px) {
  .hero-principles-list {
  max-width: 90%;
  }
  .hero-window-section { width: calc(100% - 24px); margin-bottom: 56px; }
  .hero-window-body { padding: 48px 24px 40px; }
  .hero-window-footer { padding: 20px 24px; }
  .hero-window-title { gap: 0; }
  .hero-window-headline { font-size: 12px; }
  .hero-window-path { display: none; }
  .hero-window-toolbar-badge { display: none; }
  .hero-principles { margin-bottom: 30px; gap: 14px; }
  .hero-principles-eyebrow { font-size: 10px; letter-spacing: 0.28em; }
  .hero-principles-item:not(:last-child)::after { margin: 0 10px; width: 5px; height: 5px; top: -1px; }

    .hero-course-main-subtitle {
  max-width: 85%;
}


}