/* ============================================================
   AI Business Manager — Karriere-Track (v2, Multi-Page)
   Design language: Apple-restraint primary, bold-black type +
   single magenta accent for numbered/interactive elements.
   Shared design system across all pages.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f7;
  --bg-soft-2: #f0f0f2;
  --ink: #0c0c0d;
  --ink-soft: #56565c;
  --ink-faint: #96969c;
  --accent: #e31c5f;
  --accent-dim: rgba(227, 28, 95, 0.08);
  --accent-dim-2: rgba(227, 28, 95, 0.14);
  --line: rgba(12, 12, 13, 0.1);
  --line-soft: rgba(12, 12, 13, 0.07);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 100px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.4, 1);
  --font: "General Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", Roboto, sans-serif;
  --nav-h: 68px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.14s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.2s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.26s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.32s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.38s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
  .stage-panel, .journey-detail, .journey-orbit * { transition: none !important; animation: none !important; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 14px 0;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav.scrolled {
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}
.logo-dot.small { margin-right: 6px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-links a {
  transition: color 0.25s ease;
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -14px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-link-muted {
  color: var(--ink-faint) !important;
  font-weight: 500;
}
.nav-link-muted:hover { color: var(--accent) !important; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.nav-cta {
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s var(--ease);
  flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--accent);
  transform: translateY(-1px);
}
.nav-cta:active { transform: translateY(0) scale(0.97); }

.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav.menu-open .nav-toggle .icon-open { display: none; }
.nav.menu-open .nav-toggle .icon-close { display: block; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-link-muted { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 28px;
    z-index: 199;
  }
  .nav.menu-open .nav-mobile {
    display: flex;
    flex-direction: column;
  }
  .nav-mobile a {
    padding: 15px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
  }
  .nav-mobile a[aria-current="page"] { color: var(--accent); }
  .nav-mobile a:last-of-type { border-bottom: none; }
}
@media (min-width: 901px) {
  .nav-mobile { display: none !important; }
}

@media (max-width: 480px) {
  .nav-inner { padding: 0 16px; gap: 10px; }
  .nav-logo { font-size: 12.5px; }
  .nav-cta { font-size: 11.5px; padding: 8px 12px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(227, 28, 95, 0.45);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.btn-ghost {
  color: var(--ink);
  padding: 14px 8px;
  background: none;
}
.btn-ghost svg { transition: transform 0.3s var(--ease); }
.btn-ghost:hover svg { transform: translateX(4px); }
.btn-large { padding: 17px 36px; font-size: 16px; }

@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
  .btn-large { padding: 15px 22px; font-size: 15px; }
}

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  padding: 156px 32px 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(227, 28, 95, 0.08), rgba(227, 28, 95, 0) 70%);
}
.page-eyebrow {
  position: relative;
  z-index: 1;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.page-header h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(32px, 5.4vw, 56px);
  max-width: 760px;
  margin: 0 auto;
}
.page-header p {
  position: relative;
  z-index: 1;
  margin: 22px auto 0;
  max-width: 560px;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.page-header-actions {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .page-header { padding: 132px 24px 64px; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: 84svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 48px) 32px 48px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: -10% 0 -10%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-glow {
  position: absolute;
  top: -10%;
  left: 20%;
  width: 900px;
  height: 700px;
  background: radial-gradient(closest-side, rgba(227, 28, 95, 0.10), rgba(227, 28, 95, 0) 70%);
  filter: blur(10px);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
  background-size: 120px 100%;
  mask-image: radial-gradient(ellipse 55% 50% at 30% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 30% 40%, black 20%, transparent 75%);
  opacity: 0.6;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  animation: hero-drift 26s ease-in-out infinite;
}
.hero-orb-a {
  width: 440px;
  height: 440px;
  top: -140px;
  right: 6%;
  background: radial-gradient(circle, rgba(227, 28, 95, 0.16), transparent 70%);
  animation-delay: 0s;
}
.hero-orb-b {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: 2%;
  background: radial-gradient(circle, rgba(12, 12, 13, 0.07), transparent 70%);
  animation-delay: -11s;
}
@keyframes hero-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(26px, -20px) scale(1.06); }
  66% { transform: translate(-18px, 18px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}

.hero-split {
  position: relative;
  z-index: 1;
  max-width: 1220px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero-content { max-width: 600px; }
/* Round 17: real Munich Business School lockup (crest + wordmark),
   rebuilt as live text at the exact brand navy sampled from the crest
   asset (#1E2444) — a faithful 1:1 layout match of their official
   logo, not a screenshot crop, so it stays crisp and on-brand at any
   size. Replaces the round 14/16 crest-only + separate kicker-text
   version, which read as small/redundant once compared side by side
   with the real logo. */
.hero-mbs-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px auto 36px;
}
.hero-mbs-crest {
  display: block;
  height: 64px;
  width: auto;
  flex: none;
}
.hero-mbs-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.hero-mbs-name {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #1e2444;
}
.hero-mbs-tagline {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #5a6180;
}
@media (max-width: 600px) {
  .hero-mbs-lockup { gap: 12px; margin: 4px auto 26px; }
  .hero-mbs-crest { height: 46px; }
  .hero-mbs-name { font-size: 17px; }
  .hero-mbs-tagline { font-size: 10.5px; }
}
.hero h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.hero-sub {
  margin: 22px 0 0;
  max-width: 480px;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}
.hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Hero, round 13: single-column "hook" hero — headline + CTAs + a
   prominent trust block (MBS certification + condensed 3-stat row)
   replace the old two-column layout and the journey-orbit graphic. */
.hero-solo .hero-split { grid-template-columns: 1fr; }
.hero-solo .hero-content { max-width: 720px; margin: 0 auto; text-align: center; }
.hero-solo .hero-sub { margin-left: auto; margin-right: auto; }
.hero-solo .hero-actions { justify-content: center; }
.hero-solo h1 { font-size: clamp(32px, 5vw, 56px); }

/* Round 14: hero stat row redesigned to match the reference deck's
   fact-row treatment — bold large numbers with a smaller adjoining
   unit, thin vertical dividers, pink accent reserved for the single
   standout figure (9,8/10), muted micro-label underneath. Sits
   directly under the CTAs (the old separate .hero-trust-block /
   .hero-mbs logo lockup was removed — the kicker above now carries
   the certification signal instead of a second, competing logo). */
.hero-stats-row {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 34px;
}
.hero-stat + .hero-stat { border-left: 1px solid var(--line); }
.hero-stat-value {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-stat-unit {
  margin-left: 5px;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.hero-stat-accent .hero-stat-value,
.hero-stat-accent .hero-stat-value span { color: var(--accent); }
.hero-stat-label { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); text-align: center; max-width: 170px; line-height: 1.4; }

/* Round 28 addendum: small hybrid-format badge between the CTAs and the
   stat row — surfaces the third core differentiator (online + Präsenz)
   without adding a heavy new section next to the hero. */
.hero-format-note {
  margin: 26px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(12, 12, 13, 0.025);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.hero-format-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@media (max-width: 600px) {
  .hero-stats-row { flex-direction: column; gap: 24px; padding-top: 32px; }
  .hero-stat { padding: 0; }
  .hero-stat + .hero-stat { border-left: none; border-top: 1px solid var(--line); padding-top: 24px; }
  .hero-format-note { margin-top: 20px; font-size: 12.5px; text-align: center; white-space: normal; }
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 32px;
  width: 22px;
  height: 36px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 100px;
  z-index: 1;
}
.scroll-cue span {
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
  transform: translateX(-50%);
  animation: scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue {
  0% { opacity: 1; top: 6px; }
  60% { opacity: 0; top: 18px; }
  100% { opacity: 0; top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; opacity: 1; }
}

@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; text-align: center; gap: 56px; }
  .hero-content { max-width: 100%; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .scroll-cue { display: none; }
}
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--nav-h) + 32px); min-height: auto; padding-bottom: 64px; }
}

/* ---------- Stat band ---------- */
.stat-band {
  position: relative;
  overflow: hidden;
  padding: 96px 32px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-band::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 780px; height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(227, 28, 95, 0.06), transparent 72%);
  pointer-events: none;
}
.stats-grid {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.stat { padding: 0 24px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat-value {
  display: block;
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-value-accent {
  background: linear-gradient(120deg, var(--ink) 30%, var(--accent) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr; gap: 40px; }
  .stat { border-left: none; border-top: 1px solid var(--line); padding: 28px 0 0; }
  .stat:first-child { border-top: none; padding-top: 0; }
}

/* ---------- Mentors ---------- */
.mentors { padding: 140px 32px; }
.mentors.mentors-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mentors-inner { max-width: 1180px; margin: 0 auto; }
.mentors-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mentors h2 { font-size: clamp(28px, 4vw, 44px); max-width: 620px; }
.mentors-intro { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 560px; }
.mentors-more { font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mentors-more svg { transition: transform 0.3s var(--ease); }
.mentors-more:hover svg { transform: translateX(4px); }

.mentors-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 28px;
}
.mentor-photo {
  overflow: hidden;
  border-radius: var(--radius-md);
  /* Round 29: pure white, not a gray placeholder tone — every source
     photo's real backdrop is already 255/255/255, so a gray fallback
     here only risked showing as a mismatched sliver/frame around any
     photo whose crop transform doesn't fully overscan the box (e.g. a
     zoom factor at/near 1.0). White keeps every card visually seamless
     with its own backdrop regardless of the exact crop math. */
  background: #fff;
  box-shadow: 0 0 0 0 rgba(227, 28, 95, 0);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.mentor img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.5s var(--ease);
}
/* Per-photo crop fix (round 28, refined): every mentor headshot was
   measured pixel-by-pixel (headroom above the head + how far the torso
   runs before hitting background) and mapped onto a single shared
   reference framing — the ratio already shared by Stefan Neumann /
   Dr. Gunther Schunk / Prof. Dr. Heiko Seif (~11% headroom, subject
   running full-bleed to the bottom of the frame). Since every source
   file already matches the card's 4:5 aspect ratio exactly, plain
   object-position has nothing to reposition — object-fit: cover applies
   zero crop when ratios already match. Instead each image gets its own
   two-point affine fit (--zoom scale + --ty vertical shift, both solved
   from the image's actual measured top/bottom content offsets so the
   same head-to-frame and torso-to-frame proportions land in the same
   place for every mentor), with the wrapper's overflow: hidden clipping
   whatever the transform pushes outside the card. No source pixels are
   invented — this only repositions/scales existing image content. */
.mentor-crop {
  transform: translateY(var(--ty, 0%)) scale(var(--zoom, 1));
  transform-origin: 50% 0%;
}
.mentor:hover .mentor-photo {
  transform: translateY(-5px);
  box-shadow: 0 26px 46px -22px rgba(12, 12, 13, 0.4);
}
.mentor:hover img {
  filter: grayscale(0%);
}
.mentor h3 { margin-top: 16px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.mentor p { margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
/* Thin accent rule between name and role — homepage editorial cards
   only (see .mentor-rule usage below); base mentoren.html cards don't
   include this element in their markup, so it's a no-op there. */
.mentor-rule {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  margin: 10px 0 6px;
}

@media (max-width: 980px) { .mentors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .mentors-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; } }

/* Homepage-only variant: 6 curated mentors in a single clean row
   (round 14, replaces the round-13 5-up grid). Uses a double-class
   selector (.mentors-grid.mentors-grid-6) so it always wins over the
   base 4-col .mentors-grid rule regardless of source order — the
   previous single-class .mentors-grid-5 override was fragile to that
   exact failure mode. Kept as its own class (not touching the base
   .mentors-grid used on the full mentoren.html roster) so that page
   is unaffected. */
.mentors-grid.mentors-grid-6 { grid-template-columns: repeat(6, 1fr); gap: 30px 20px; }
@media (max-width: 1100px) { .mentors-grid.mentors-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .mentors-grid.mentors-grid-6 { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; } }

/* ---------- Format facts strip ---------- */
.facts { padding: 0 32px 120px; }
.facts-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.fact { padding: 32px 24px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: none; }
.fact-value { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.fact-label { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 780px) {
  .facts-inner { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-left: none; }
  .fact:nth-child(1), .fact:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Stages (accordion, Programm page) ---------- */
.stages { padding: 20px 32px 160px; background: var(--bg); }
.stages-inner { max-width: 880px; margin: 0 auto; }
.stages h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; }
.stages-intro { margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 560px; }

.stage-list { margin-top: 60px; border-top: 1px solid var(--ink); }
.stage { border-bottom: 1px solid var(--line); }
.stage-trigger {
  appearance: none; background: none; border: none; width: 100%;
  display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 20px;
  padding: 30px 0; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
  transition: transform 0.15s ease;
}
.stage-trigger:active { transform: scale(0.997); }
.stage-trigger:hover .stage-title, .stage-trigger:hover .stage-num { color: var(--accent); }
.stage-num { font-size: 15px; font-weight: 600; color: var(--ink-faint); transition: color 0.25s ease; font-variant-numeric: tabular-nums; }
.stage-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; transition: color 0.25s ease; }
.stage-icon {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  transition: transform 0.35s var(--ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
}
.stage-trigger[aria-expanded="true"] .stage-icon { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff; }
.stage-trigger[aria-expanded="true"] .stage-title, .stage-trigger[aria-expanded="true"] .stage-num { color: var(--accent); }

.stage-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.stage-panel.open { grid-template-rows: 1fr; }
.stage-panel-inner { overflow: hidden; }
.stage-panel-inner .stage-panel-body { padding: 0 0 36px 76px; max-width: 620px; }
.stage-panel-body p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.stage-sub {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
}
.stage-sub-chip {
  font-size: 12.5px; font-weight: 600; padding: 7px 13px;
  border-radius: var(--radius-pill); background: var(--accent-dim); color: var(--accent);
}
/* Round 28: distinguish the 6 AI-skill stages from the 6 stages built
   around direct top-manager experience — same pill shape, so it reads
   as a light tag rather than a bolted-on badge system. AI-Thema keeps
   the existing accent-pink treatment (it was already the only chip
   style); Top-Manager-Erfahrung gets a neutral ink-toned fill instead
   of introducing a brand-new hue into an otherwise monochrome+accent
   palette. */
.stage-sub-chip--ai { background: var(--accent-dim); color: var(--accent); }
.stage-sub-chip--tm { background: rgba(12, 12, 13, 0.06); color: var(--ink-soft); }
.stage-legend {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 20px;
}
.stage-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.stage-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stage-legend-dot-ai { background: var(--accent); }
.stage-legend-dot-tm { background: var(--ink-faint); }
@media (max-width: 600px) {
  .stage-trigger { grid-template-columns: 36px 1fr 32px; gap: 12px; padding: 22px 0; }
  .stage-icon { width: 32px; height: 32px; }
  .stage-panel-inner .stage-panel-body { padding-left: 48px; }
  .stage-panel-body p { font-size: 15.5px; }
  .stage-legend { gap: 14px 20px; margin-top: 18px; }
}

/* ---------- Journey CTA banner (Programm page) ---------- */
.journey-banner {
  margin: 0 32px 160px;
  max-width: 1120px;
  margin-left: auto; margin-right: auto;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.journey-banner::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, rgba(227,28,95,0.28), transparent 70%);
  pointer-events: none;
}
.journey-banner-copy { position: relative; z-index: 1; max-width: 520px; }
.journey-banner-copy span.jb-kicker {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #ff5f8f;
}
.journey-banner-copy h2 { margin-top: 14px; font-size: clamp(24px, 3vw, 32px); color: #fff; }
.journey-banner-copy p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.68); }
.journey-banner .btn-primary { position: relative; z-index: 1; background: #fff; color: var(--ink); }
.journey-banner .btn-primary:hover { background: var(--accent); color: #fff; }
@media (max-width: 700px) {
  .journey-banner { grid-template-columns: 1fr; text-align: left; padding: 48px 32px; }
}

/* ---------- Audience rows ---------- */
.audience { padding: 20px 32px 150px; }
.audience-inner { max-width: 900px; margin: 0 auto; }
.audience h2 { font-size: clamp(28px, 4vw, 42px); max-width: 620px; }
.audience-intro { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 620px; }
.audience-rows { margin-top: 56px; border-top: 1px solid var(--line); }
.audience-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.audience-row h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.audience-row p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 760px) { .audience-row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Logo wall / references ---------- */
.partners { padding: 110px 32px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partners-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.partners-head { display: flex; flex-direction: column; align-items: center; }
.partners h2 { font-size: clamp(22px, 2.8vw, 30px); }
.partners-more { margin-top: 14px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.partners-more svg { transition: transform 0.3s var(--ease); }
.partners-more:hover svg { transform: translateX(4px); }
.partners-intro { margin: 14px auto 0; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.partners-quote {
  margin: 44px auto 0;
  max-width: 560px;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}
.partners-quote p { font-size: 16.5px; line-height: 1.5; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.partners-quote footer { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.partners-quote footer span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
@media (max-width: 600px) {
  .partners-quote { padding: 24px 22px; }
}

.logo-wall { margin-top: 52px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px; }
.logo-wall img {
  height: 88px; width: 88px; object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.logo-wall img:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(12,12,13,0.3); border-color: var(--line); }

@media (max-width: 640px) {
  .logo-wall { gap: 14px; }
  .logo-wall img { height: 66px; width: 66px; padding: 7px; }
}

/* Partner logos (transparent-style, wordmarks) reused on unternehmen/index secondary walls.
   A fixed height alone makes square icon-marks (e.g. Management Forum
   Starnberg, Thalia) read much smaller than wide wordmarks (e.g. Lehmanns,
   Senator) at the same height, since rendered area differs a lot by
   aspect ratio. Instead we size by visual footprint: icon-marks get a
   taller box, mid-ratio marks a medium box, wordmarks the base height —
   so every logo reads with roughly the same prominence. */
.logo-wall-flat { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 44px 60px; }
.logo-wall-flat img {
  height: 44px; width: auto; max-width: 170px; object-fit: contain;
  filter: grayscale(100%); opacity: 0.6;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.logo-wall-flat img.logo-mark { height: 72px; }
.logo-wall-flat img.logo-mid { height: 54px; }
/* Round 28: BFB, FOX Group and Thalia individually bumped up — BFB's
   mark was unreadably small at the shared .logo-mid size, and FOX Group
   / Thalia needed a touch more visual weight relative to the rest of
   the row. Kept as their own classes rather than resizing .logo-mid /
   .logo-mark so Talk Concrete and Management Forum Starnberg (which
   read fine already) aren't affected. */
.logo-wall-flat img.logo-bfb { height: 66px; }
.logo-wall-flat img.logo-fox { height: 63px; }
.logo-wall-flat img.logo-thalia { height: 82px; }
.logo-wall-flat img:hover { filter: grayscale(0%); opacity: 1; }
.logo-wall-flat a { display: inline-flex; align-items: center; border-radius: 4px; outline-offset: 4px; }
.logo-wall-flat a img { display: block; }
.logo-wall-flat a:hover img { filter: grayscale(0%); opacity: 1; transform: translateY(-2px); }
.logo-wall-flat a img { transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease; }
.logo-wall-flat a:focus-visible { outline: 2px solid var(--accent); }
.mbs-lockup-logo-link { display: inline-flex; border-radius: 6px; outline-offset: 6px; transition: opacity 0.25s ease; }
.mbs-lockup-logo-link:hover { opacity: 0.82; }
.mbs-lockup-logo-link:focus-visible { outline: 2px solid var(--accent); }
@media (max-width: 640px) {
  .logo-wall-flat { gap: 28px 36px; }
  .logo-wall-flat img { height: 34px; max-width: 130px; }
  .logo-wall-flat img.logo-mark { height: 56px; }
  .logo-wall-flat img.logo-mid { height: 42px; }
  .logo-wall-flat img.logo-bfb { height: 50px; }
  .logo-wall-flat img.logo-fox { height: 48px; }
  .logo-wall-flat img.logo-thalia { height: 62px; }
}

/* (legacy .trust-chip removed — replaced by .hero-cert-badge / .hero-stat-badge above) */

/* ---------- Kooperationspartner ---------- */
.coop { padding: 96px 32px 84px; background: var(--bg); border-top: 1px solid var(--line); }
.coop-inner { max-width: 1040px; margin: 0 auto; text-align: center; }
.coop-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.coop h2 { margin-top: 14px; font-size: clamp(28px, 4vw, 44px); }
.coop-intro { margin: 18px auto 0; max-width: 620px; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }

.mbs-lockup {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 36px;
  text-align: left;
}
.mbs-lockup-logo {
  flex-shrink: 0;
  height: 76px;
  width: auto;
  object-fit: contain;
}
.mbs-lockup-copy {}
.mbs-lockup-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.mbs-lockup-copy h3 { margin-top: 10px; font-size: clamp(22px, 2.6vw, 28px); color: var(--ink); letter-spacing: -0.02em; }
.mbs-lockup-copy p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 480px; }

.coop-grid-label {
  margin-top: 52px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Social-proof line under the partner logo wall — the partners feature
   the programme on their own sites; keep it a single quiet sentence,
   no link list, so the section stays uncluttered. */
.coop-feature-note {
  margin: 34px auto 0;
  max-width: 468px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .mbs-lockup { flex-direction: column; text-align: center; gap: 20px; }
  .mbs-lockup-copy p { margin-left: auto; margin-right: auto; }
}

/* Centered single-column variant (round 13, homepage) — tighter, more
   elegant presentation than the left-aligned lockup used elsewhere. */
.mbs-lockup-centered {
  flex-direction: column;
  text-align: center;
  gap: 22px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.mbs-lockup-centered .mbs-lockup-logo { height: 84px; }
.mbs-lockup-centered .mbs-lockup-copy p { margin-left: auto; margin-right: auto; }

/* Certified-by lockup reused on Programm page (near header) — unframed:
   just the logo and a small authenticity caption, no card/border/background. */
.mbs-badge-block { padding: 24px 32px 68px; display: flex; justify-content: center; }
.mbs-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 440px;
}
.mbs-badge-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.mbs-badge-logo { height: 76px; width: auto; max-width: 260px; object-fit: contain; }
.mbs-badge-note { font-size: 12.5px; font-weight: 500; color: var(--ink-faint); line-height: 1.5; max-width: 340px; }
@media (max-width: 600px) {
  .mbs-badge-logo { height: 60px; }
}

/* ---------- CTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  padding: 170px 32px;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 900px; height: 560px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(227, 28, 95, 0.07), transparent 72%);
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(28px, 4.6vw, 48px); }
.cta p { margin-top: 16px; font-size: 16.5px; color: var(--ink-soft); }
.cta .btn { margin-top: 34px; }
.cta-note { margin-top: 16px; font-size: 13px; color: var(--ink-faint); }
.cta-alt { margin-top: 24px; font-size: 14px; color: var(--ink-faint); }
.cta-alt a { font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.cta-alt a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 32px 32px; }
.footer-inner { max-width: 1220px; margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand .footer-logo { display: flex; align-items: center; font-weight: 600; font-size: 15px; color: var(--ink); }
.footer-brand p { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); max-width: 220px; }
.footer-brand p.footer-partners { margin-top: 10px; font-size: 11px; line-height: 1.55; letter-spacing: 0.02em; opacity: 0.72; max-width: 240px; }
.footer-col-title { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.footer-col ul { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 13.5px; color: var(--ink-soft); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--ink-faint);
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / 3; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1; }
}

/* ============================================================
   JOURNEY PAGE — the 12-stage interactive centerpiece
   ============================================================ */
.journey-app {
  padding: 20px 32px 160px;
}
.journey-app-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: flex-start;
}

.journey-nav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}
.journey-nav-progress {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
}
.journey-nav-progress-bar {
  margin: 0 20px 16px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.journey-nav-progress-fill {
  position: relative;
  height: 100%;
  width: 8.33%;
  background: linear-gradient(90deg, #ff5f8f, var(--accent));
  border-radius: 3px;
  box-shadow: 0 0 12px 1px rgba(227, 28, 95, 0.45);
  transition: width 0.6s var(--ease-spring);
}
.journey-tablist {
  display: flex;
  flex-direction: column;
  max-height: 520px;
  overflow-y: auto;
}
.journey-tab {
  appearance: none;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 20px;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.journey-tab:hover { background: var(--bg-soft); color: var(--ink); }
.journey-tab .jt-num { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-faint); flex-shrink: 0; width: 18px; }
.journey-tab .jt-title { font-size: 14.5px; font-weight: 500; }
.journey-tab[aria-selected="true"] {
  background: var(--accent-dim);
  border-left-color: var(--accent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(227, 28, 95, 0.06);
}
.journey-tab[aria-selected="true"] .jt-num { color: var(--accent); }
.journey-tab[aria-selected="true"] .jt-title { font-weight: 600; }

.journey-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #fff 0%, var(--bg-soft) 130%);
  box-shadow: 0 40px 80px -50px rgba(12, 12, 13, 0.25);
}
.journey-detail::before {
  content: "";
  position: absolute;
  top: -20%; right: -8%;
  width: 360px; height: 360px;
  background: radial-gradient(closest-side, var(--accent-dim), transparent 72%);
  pointer-events: none;
}
.journey-detail-content {
  position: relative;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.journey-detail-content.jd-enter-next { opacity: 0; transform: translateX(18px); }
.journey-detail-content.jd-enter-prev { opacity: 0; transform: translateX(-18px); }

.jd-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
}
.jd-kicker .jd-num-badge {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(155deg, #17171a, var(--ink) 60%, #24121a);
  box-shadow: 0 0 0 4px var(--accent-dim), 0 8px 16px -6px rgba(227, 28, 95, 0.35);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.jd-title {
  margin-top: 22px;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.02em;
}
.jd-hook {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  max-width: 620px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}
.jd-audience {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 600px;
}
.jd-audience-label {
  font-weight: 600;
  color: var(--ink-soft);
}
.jd-bullets {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
.jd-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.jd-bullets li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

.journey-detail-footer {
  position: relative;
  z-index: 1;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.jd-nav-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.25s ease, transform 0.25s var(--ease), background 0.25s ease, color 0.25s ease;
}
.jd-nav-btn:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.jd-nav-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.jd-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.jd-nav-btn.jd-next { background: var(--ink); color: #fff; border-color: var(--ink); }
.jd-nav-btn.jd-next:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.jd-progress-text { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .journey-app-inner { grid-template-columns: 1fr; }
  .journey-nav { position: static; }
  .journey-tablist {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .journey-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    border-left: none;
    border-bottom: 3px solid transparent;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .journey-tab[aria-selected="true"] { border-left: none; border-bottom-color: var(--accent); }
  .journey-detail { padding: 36px 28px; }
  .jd-bullets { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .journey-detail-footer { flex-wrap: wrap; }
  .jd-hook { font-size: 17px; }
}

/* Journey page header micro-progress ring (page header addon) */
.journey-meta-strip {
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: 0 32px;
  display: flex;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
}
.journey-meta-item { text-align: center; }
.journey-meta-value { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.journey-meta-label { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }

/* ============================================================
   REFERENCES PAGE — featured + progressive disclosure
   ============================================================ */
.ref-featured { padding: 20px 32px 24px; }
.ref-featured-inner { max-width: 1120px; margin: 0 auto; }
.ref-featured h2 { font-size: clamp(24px, 3.2vw, 34px); text-align: center; }
.ref-featured-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ref-card {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ref-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -20px rgba(12,12,13,0.25); }
.ref-card img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) { .ref-featured-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ref-featured-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pull quote ---------- */
.pull-quote { padding: 80px 32px 150px; }
.pull-quote-inner {
  max-width: 780px; margin: 0 auto; text-align: center;
}
.pull-quote blockquote {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.45; font-weight: 500; letter-spacing: -0.015em;
  color: var(--ink);
}
.pull-quote footer { margin-top: 24px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.pull-quote footer span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-faint); }

/* ---------- Value cards (Unternehmen page) ---------- */
.value-cards { padding: 20px 32px 150px; }
.value-cards-inner { max-width: 1120px; margin: 0 auto; }
.value-cards-head { max-width: 640px; }
.value-cards-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.value-cards-head p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.value-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.value-card {
  position: relative;
  overflow: hidden;
  padding: 36px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, #fbfbfc 0%, var(--bg-soft) 65%);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
}
.value-card::before {
  content: "";
  position: absolute;
  top: -20px; left: -20px;
  width: 140px; height: 140px;
  background: radial-gradient(closest-side, var(--accent-dim), transparent 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: 0 26px 50px -28px rgba(12, 12, 13, 0.25);
}
.value-card:hover::before { opacity: 1; }
.value-card > * { position: relative; z-index: 1; }
.value-card-num { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.value-card h3 { margin-top: 18px; font-size: 20px; letter-spacing: -0.01em; }
.value-card p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 860px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- Statement / big line ---------- */
.statement { padding: 30px 32px 20px; max-width: 900px; margin: 0 auto; text-align: center; }
.statement p { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.statement .dim { color: var(--ink-soft); font-weight: 400; }

/* ============================================================
   FAQ (accordion — same interaction language as .stage-trigger)
   ============================================================ */
.faq { padding: 20px 32px 150px; background: var(--bg); }
.faq-inner { max-width: 780px; margin: 0 auto; padding-top: 64px; }
.faq h2 { font-size: clamp(28px, 4vw, 40px); text-align: center; }
.faq-intro { margin-top: 14px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.faq-list { margin-top: 48px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-trigger {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.15s ease;
}
.faq-trigger:active { transform: scale(0.997); }
.faq-q { font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em; transition: color 0.25s ease; }
.faq-trigger:hover .faq-q { color: var(--accent); }
.faq-icon {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0;
  transition: transform 0.35s var(--ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff; }
.faq-trigger[aria-expanded="true"] .faq-q { color: var(--accent); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq-panel.open { grid-template-rows: 1fr; }
.faq-panel-inner { overflow: hidden; }
.faq-panel-inner p { padding: 0 44px 26px 2px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.faq-more { margin-top: 40px; text-align: center; font-size: 14.5px; font-weight: 600; }
.faq-more a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.faq-more a:hover { color: var(--accent); }
@media (max-width: 600px) {
  .faq-inner { padding-top: 48px; }
  .faq-q { font-size: 15.5px; }
  .faq-panel-inner p { padding-right: 20px; }
}

/* ============================================================
   ERFOLGSGESCHICHTEN — stat hero, video testimonials, quote bento
   ============================================================ */
.story-stat { padding: 30px 32px 60px; text-align: center; }
.story-stat-inner { max-width: 700px; margin: 0 auto; }
.story-stat-value {
  display: block;
  font-size: clamp(64px, 12vw, 128px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(120deg, var(--ink) 25%, var(--accent) 115%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.story-stat-value span {
  font-size: 0.42em; font-weight: 600; letter-spacing: -0.02em;
  background: none; -webkit-text-fill-color: var(--ink-faint); color: var(--ink-faint);
}
.story-stat-label {
  display: block;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.story-stat-sub { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 480px; margin-left: auto; margin-right: auto; }

.story-videos { padding: 90px 32px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-videos-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.story-videos h2 { font-size: clamp(26px, 3.6vw, 38px); }
.story-videos-inner > p { margin: 16px auto 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

.video-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
.video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-play {
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.video-play:hover img { transform: scale(1.04); }
.video-play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
}
.video-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: transform 0.3s var(--ease-spring), background 0.25s ease;
  z-index: 1;
}
.video-play:hover .video-play-icon { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.video-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.video-meta { padding: 18px 22px 22px; color: #fff; }
.video-meta h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.video-meta p { margin-top: 3px; font-size: 13px; color: rgba(255,255,255,0.6); }

@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }

/* ============================================================
   STORY OUTCOMES — round 33: a dedicated "what actually happened
   after the course" feature, distinct from the short-quote wall
   below. Reuses the boxless numbered-list language already
   established on the homepage .outcomes section (round 16) rather
   than inventing a new card style, so the two "outcome" moments on
   the site (curriculum results vs. real participant results) read
   as a family. Facts (12 agents, AI Ambassador role, follower
   growth) are as supplied by David for these three named,
   already-verified participants - no numbers invented beyond that.
   ============================================================ */
.story-outcomes { padding: 100px 32px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-outcomes-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.story-outcomes h2 { font-size: clamp(26px, 3.6vw, 38px); }
.story-outcomes-inner > p { margin: 16px auto 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.outcome-story-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  text-align: left;
}
.outcome-story-grid-pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.outcome-story-item {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.outcome-story-num {
  display: block;
  font-size: 14px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.outcome-story-item h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.outcome-story-role { margin-top: 3px; font-size: 13.5px; color: var(--ink-faint); }
.outcome-story-result { margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.outcome-story-detail { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 760px) {
  .outcome-story-grid { grid-template-columns: 1fr; gap: 32px; }
}

.story-quotes { padding: 130px 32px; }
.story-quotes-inner { max-width: 1120px; margin: 0 auto; }
.story-quotes h2 { font-size: clamp(28px, 4vw, 42px); text-align: center; }
.story-quotes-inner > p.story-quotes-sub { text-align: center; margin-top: 14px; color: var(--ink-soft); font-size: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* The testimonial wall is deliberately wider than the site's usual
   1120px reading column — it's a proof wall, not prose, and wants to
   use more of the page on large screens instead of leaving big dead
   margins either side. Heading/sub stay centered and narrow above it. */
.story-bento {
  margin-top: 56px;
  max-width: min(94vw, 2200px);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 18px;
}
.story-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
}
.story-item:not(.story-item-featured):hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(12, 12, 13, 0.28);
}
.story-item > * { position: relative; z-index: 1; }
.story-item-featured {
  grid-column: 1 / 3;
  background: linear-gradient(155deg, #131315 0%, #0c0c0d 55%, #1a0a11 100%);
  color: #fff;
  justify-content: center;
}
.story-item-featured::before {
  content: "";
  position: absolute;
  top: -25%; right: -12%;
  width: 380px; height: 380px;
  background: radial-gradient(closest-side, rgba(227, 28, 95, 0.3), transparent 70%);
  pointer-events: none;
}
.story-item-featured .story-stars { color: #ff5f8f; }
.story-item-featured p { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; }
.story-item-featured footer { color: rgba(255,255,255,0.6); }
.story-stars { color: var(--accent); font-size: 13px; letter-spacing: 2px; }
.story-item p { margin: 0; font-size: 15.5px; line-height: 1.55; color: inherit; }
.story-item footer { font-size: 13.5px; font-weight: 600; }
.story-item footer span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }

/* Bento breakout — a handful of cards span 2 columns and sit at bigger
   type scale, so the list breaks its own rhythm left/right instead of
   reading as one uniform column of identical boxes. Kept on the light
   --bg-soft ground (not dark) so the single dark accent card stays the
   one bold moment on the page. */
.story-item-wide {
  grid-column: span 2;
  padding: 44px 52px;
}
.story-item-wide p { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.5; font-weight: 500; letter-spacing: -0.015em; }
.story-item-wide-r { grid-column: 3 / span 2; }

@media (max-width: 1080px) {
  .story-bento { grid-template-columns: repeat(2, 1fr); }
  .story-item-wide-r { grid-column: span 2; }
}
@media (max-width: 620px) {
  .story-bento { grid-template-columns: 1fr; }
  .story-item-featured, .story-item-wide, .story-item-wide-r { grid-column: 1; }
}

/* ============================================================
   REFERENCES MARQUEE (replaces the old click-to-expand grid)
   ============================================================ */
.ref-marquee-section { padding: 10px 0 150px; overflow: hidden; }
.ref-marquee-label {
  max-width: 1120px; margin: 0 auto 40px; padding: 0 32px; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
}
.ref-marquee-rows { display: flex; flex-direction: column; gap: 22px; }
.ref-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.ref-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  padding: 6px 28px;
  animation: ref-scroll 58s linear infinite;
}
.ref-marquee-track.ref-marquee-track-reverse {
  animation-name: ref-scroll-reverse;
  animation-duration: 72s;
}
.ref-marquee:hover .ref-marquee-track { animation-play-state: paused; }

/* Each logo gets real visual weight — a bordered, shadowed card, matching
   the depth language of the featured grid above instead of a bare wordmark. */
.ref-marquee-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  width: 168px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px 22px;
  box-shadow: 0 18px 32px -24px rgba(12, 12, 13, 0.2);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease;
}
.ref-marquee-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -20px rgba(12, 12, 13, 0.28);
  border-color: var(--line);
}
/* Round 29: logos are auto-cropped to their true content bounding box
   (assets/references/marquee/, generated from the featured-grid source
   files, deterministic crop, no image generation) — the original PNGs
   sit on a uniform 383x383 canvas but the actual glyphs range from ~10%
   to ~58% of that canvas height, so a fixed CSS height made wordmark
   logos (Schaeffler, Novartis, Lufthansa...) render many times smaller
   than icon marks (BMW, Apple...) at the same box size. Cropping first
   means the same height now maps to comparable visual weight for all 27. */
.ref-marquee-card img {
  height: 56px; width: auto; max-width: 100%; object-fit: contain;
  filter: grayscale(100%); opacity: 0.6;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.ref-marquee-card:hover img { filter: grayscale(0%); opacity: 1; }
@keyframes ref-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ref-scroll-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ref-marquee-track { animation: none; }
}
@media (max-width: 640px) {
  .ref-marquee-rows { gap: 14px; }
  .ref-marquee-track { gap: 14px; }
  .ref-marquee-card { height: 84px; width: 130px; padding: 8px 14px; }
  .ref-marquee-card img { height: 44px; }
}

/* ============================================================
   QUOTE MARQUEE — rotating short testimonials, directly under the
   hook statement / format facts
   ============================================================ */
/* Round 19: embedded directly into .hook (dark photo panel) instead of
   its own light-grey section — the hard black-to-grey seam that used
   to sit right under the photo read as a "box" stacked underneath it.
   Living inside the same dark panel as the headline, separated only
   by a faint hairline, keeps it noticeable while reading as one
   continuous moment instead of a second stacked block. */
.quote-marquee.qm-on-dark {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 560px;
}
.qm-viewport {
  display: grid;
  min-height: 96px;
  align-content: center;
}
.qm-quote {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.qm-quote.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.qm-quote p {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.qm-quote footer {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.qm-quote footer span { font-weight: 400; }
.qm-quote footer span::before { content: " · "; }
.qm-dots {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}
.qm-dot {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  width: 7px;
  height: 7px;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  transition: width 0.35s var(--ease), background 0.3s ease;
}
.qm-dot.is-active { width: 22px; background: var(--accent); }
.qm-dot:hover { background: rgba(255, 255, 255, 0.5); }
.qm-more {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s ease;
}
.qm-more svg { transition: transform 0.3s var(--ease); }
.qm-more:hover { color: #fff; }
.qm-more:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .qm-quote { transition: none; }
}
@media (max-width: 600px) {
  .quote-marquee.qm-on-dark { margin-top: 24px; padding-top: 20px; }
  .qm-viewport { min-height: 128px; }
}

/* ============================================================
   OUTCOMES — "3 concrete outcomes after 12 weeks"
   ============================================================ */
.outcomes { padding: 130px 32px 110px; }
.outcomes-inner { max-width: 1120px; margin: 0 auto; }
.outcomes-head { max-width: 640px; }
.outcomes-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.outcomes-head h2 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 38px); }
.outcomes-head p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.outcomes-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 0;
}
/* Round 16: boxless 2x2 grid — bare numbers + thin divider lines,
   now with BOTH a horizontal rule (between rows) and a vertical rule
   (between columns), matching the reference deck's divider
   convention. Still no card backgrounds — collapses to a single
   stacked column with only horizontal rules on mobile. */
.outcome-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-rows: auto auto;
  column-gap: 28px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.outcome-item:nth-child(even) {
  border-left: 1px solid var(--line);
  margin-left: -32px;
  padding-left: 32px;
}
.outcome-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.outcome-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 16px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; padding-top: 3px;
}
.outcome-item h3 { grid-column: 2; grid-row: 1; font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; }
.outcome-item p { grid-column: 2; grid-row: 2; margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 560px; }
@media (max-width: 760px) {
  .outcomes-grid { grid-template-columns: 1fr; }
  .outcome-item:nth-child(even) { border-left: none; margin-left: 0; padding-left: 0; }
  .outcome-item:nth-last-child(-n+2) { border-bottom: none; }
  .outcome-item:last-child { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .outcomes { padding-top: 90px; padding-bottom: 72px; }
  .outcome-item { grid-template-columns: 40px 1fr; column-gap: 16px; padding: 28px 0; }
  .outcome-num { font-size: 14px; }
}

.outcomes-close {
  margin: 26px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: 8px;
}

/* ============================================================
   COHORTS — start dates / cohort urgency block
   ============================================================ */
.cohorts { padding: 112px 32px; }
.cohorts-card {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #131315 0%, #0c0c0d 55%, #1a0a11 100%);
  color: #fff;
  padding: 64px 56px 56px;
  text-align: center;
}
.cohorts-card::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: 640px; height: 480px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(227, 28, 95, 0.26), transparent 70%);
  pointer-events: none;
  animation: cohorts-glow 8s ease-in-out infinite;
}
@keyframes cohorts-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .cohorts-card::before { animation: none; }
}
.cohorts-card > * { position: relative; z-index: 1; }
.cohorts-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #ff5f8f; }
.cohorts-card h2 { margin-top: 14px; font-size: clamp(26px, 3.6vw, 40px); color: #fff; max-width: 640px; margin-left: auto; margin-right: auto; }
.cohorts-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 520px; margin-left: auto; margin-right: auto; }

.cohorts-row {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: left;
}
.cohort-date-card, .cohort-seats {
  padding: 24px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color 0.3s ease, transform 0.3s var(--ease), background 0.3s ease;
}
.cohort-date-card:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.07);
  transform: translateY(-3px);
}
.cohort-date-season { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cohort-date-day { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: #fff; white-space: nowrap; }
.cohort-seats { align-items: flex-start; justify-content: center; }
.cohort-seats-num {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(120deg, #fff 35%, #ff5f8f 140%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cohort-seats-label { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.4; }

.cohorts-cta { margin-top: 40px; }
.cohorts-card .btn-primary {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 40px -12px rgba(227, 28, 95, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cohorts-card .btn-primary svg { transition: transform 0.3s var(--ease); }
.cohorts-card .btn-primary:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 20px 48px -12px rgba(227, 28, 95, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.cohorts-card .btn-primary:hover svg { transform: translateX(3px); }
.cohorts-note { margin-top: 18px; font-size: 12.5px; color: rgba(255,255,255,0.45); }

@media (max-width: 980px) and (min-width: 781px) {
  .cohorts-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .cohorts { padding: 76px 24px; }
  .cohorts-card { padding: 48px 28px 40px; }
  .cohorts-row { grid-template-columns: 1fr; text-align: center; }
  .cohort-date-card, .cohort-seats { align-items: center; text-align: center; }
}

/* ============================================================
   MENTORS — uniform grid (round 7). Client explicitly asked for a
   perfectly uniform grid ("wie bei Apple") — every mentor card must
   be pixel-identical: same image ratio, same padding (zero), same
   background (none), same alignment. Do not reintroduce per-card
   background/padding/offset variety here.
   ============================================================ */

/* ============================================================
   ANCHOR STATS — real price/format facts, near the program section
   ============================================================ */
.anchor-stats { padding: 130px 32px 100px; }
.anchor-stats-inner { max-width: 1120px; margin: 0 auto; }
.anchor-stats-head { max-width: 640px; margin: 0 auto; text-align: center; }
.anchor-stats-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.anchor-stats-head h2 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 38px); }

.anchor-stats-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.anchor-stat {
  padding: 30px 26px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  text-align: left;
}
.anchor-stat:nth-child(3n+1) { border-left: none; }
.anchor-stat:nth-child(-n+3) { border-top: none; }
.anchor-stat-value { display: block; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.anchor-stat-label { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 860px) {
  .anchor-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .anchor-stat:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .anchor-stat:nth-child(odd) { border-left: none; }
  .anchor-stat:nth-child(-n+3) { border-top: 1px solid var(--line); }
  .anchor-stat:nth-child(-n+2) { border-top: none; }
}
@media (max-width: 560px) {
  .anchor-stats { padding-top: 90px; }
  .anchor-stats-grid { grid-template-columns: 1fr; }
  .anchor-stat { border-left: none !important; text-align: center; }
  .anchor-stat:nth-child(n) { border-top: 1px solid var(--line); }
  .anchor-stat:first-child { border-top: none; }
}

/* ============================================================
   MENTORS — trust-badge strip below the homepage teaser
   ============================================================ */
.mentors-trust-strip {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.mentors-trust-strip span:not(.mts-dot) {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.mts-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
@media (max-width: 640px) { .mts-dot { display: none; } }

/* ============================================================
   HOOK — foundational mission statement, directly after the format
   facts block and before the quote marquee / outcomes (frames the
   page before diving into outcomes, journey, and mentor content)
   ============================================================ */
.hook { padding: 96px 0; }
.hook-inner { padding: 0 32px; }
.hook-inner-col { max-width: 1120px; margin: 0 auto; text-align: left; }
.hook-inner h2 {
  font-size: clamp(34px, 5.6vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.hook-accent { color: var(--accent); }
.hook-eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.hook-lede {
  margin-top: 16px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #fff;
  max-width: 640px;
}
@media (max-width: 600px) {
  .hook { padding: 64px 0; }
  .hook-inner { padding: 0 24px; }
}

/* ============================================================
   NEXT STEP — 3-CTA section before the final footer CTA
   ============================================================ */
.next-step { padding: 0 32px 140px; }
.next-step-inner { max-width: 1120px; margin: 0 auto; }
.next-step-head { max-width: 620px; }
.next-step-head h2 { font-size: clamp(26px, 3.4vw, 38px); }
.next-step-head p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

.next-step-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.next-step-card {
  padding: 38px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, #fbfbfc 0%, var(--bg-soft) 65%);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.next-step-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(12, 12, 13, 0.22); }
.next-step-card h3 { font-size: 19.5px; letter-spacing: -0.01em; }
.next-step-card p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); flex-grow: 1; }
.next-step-card .btn { margin-top: 24px; align-self: flex-start; }
.next-step-card-primary {
  background: linear-gradient(165deg, #131315 0%, #0c0c0d 55%, #1a0a11 100%);
  border-color: var(--ink);
  color: #fff;
}
.next-step-card-primary h3 { color: #fff; }
.next-step-card-primary p { color: rgba(255, 255, 255, 0.68); }

@media (max-width: 860px) { .next-step-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER SOCIAL LINKS
   ============================================================ */
.footer-bottom { flex-wrap: wrap; }
.social-links { display: flex; align-items: center; gap: 14px; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease);
}
.social-link:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.social-link svg { width: 15px; height: 15px; }

/* ============================================================
   GUIDED QUALIFIER WIDGET — floating, client-side only
   ============================================================ */
.qw {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 300;
}
.qw-fab {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 36px -14px rgba(12, 12, 13, 0.45);
  transition: background 0.25s ease, transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}
.qw-fab:hover { background: var(--accent); transform: translateY(-2px) scale(1.04); }
.qw-fab:active { transform: translateY(0) scale(0.96); }
.qw-fab svg { transition: transform 0.35s var(--ease-spring); }
.qw.qw-open .qw-fab svg.qw-icon-open { transform: rotate(90deg) scale(0); opacity: 0; }
.qw-fab svg.qw-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0); }
.qw.qw-open .qw-fab svg.qw-icon-close { opacity: 1; transform: rotate(0) scale(1); }
.qw.qw-open .qw-fab svg.qw-icon-open { position: absolute; }

.qw-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: 340px;
  max-width: calc(100vw - 44px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(12, 12, 13, 0.4);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: scale(0.92) translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-spring), transform 0.3s var(--ease-spring);
}
.qw.qw-open .qw-panel { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

.qw-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.qw-header-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.qw-header-sub { margin-top: 2px; font-size: 12px; color: var(--ink-faint); }
.qw-progress { display: flex; gap: 5px; margin-top: 4px; }
.qw-progress-dot { width: 16px; height: 3px; border-radius: 3px; background: var(--line); transition: background 0.3s ease; }
.qw-progress-dot.is-done { background: var(--accent); }

.qw-body { padding: 20px 22px 22px; min-height: 168px; }
.qw-step-q { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.qw-options { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.qw-option {
  appearance: none; text-align: left; font-family: inherit;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-soft);
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease);
}
.qw-option:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateX(2px); }

.qw-back {
  appearance: none; border: none; background: none; cursor: pointer;
  margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
  padding: 0;
}
.qw-back:hover { color: var(--ink); }

.qw-result-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.qw-result-text { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.qw-result-cta {
  margin-top: 18px; display: inline-flex; width: 100%; justify-content: center;
  padding: 12px 18px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  transition: background 0.25s ease, transform 0.25s var(--ease);
}
.qw-result-cta:hover { background: var(--accent); transform: translateY(-1px); }
.qw-restart {
  margin-top: 12px; width: 100%; text-align: center; appearance: none; border: none; background: none;
  font-family: inherit; font-size: 12px; color: var(--ink-faint); cursor: pointer; padding: 4px;
}
.qw-restart:hover { color: var(--ink-soft); }

@media (max-width: 480px) {
  .qw { right: 14px; bottom: 14px; }
  .qw-panel { width: calc(100vw - 28px); right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .qw-panel, .qw-fab, .qw-fab svg { transition: none; }
}

/* ============================================================
   PHOTOGRAPHY — real workshop photography (round 9). Restrained,
   black-and-white editorial accents only. Do not add more without
   a clear reason — this design intentionally uses very few photos.
   ============================================================ */

/* Full-bleed feature band with caption, used once after "outcomes" */
.photo-feature {
  position: relative;
  width: 100%;
  /* Round 31: round 30's fixed 760px cap re-triggered the documented
     "wide-viewport crop bug class" - object-fit: cover scales with the
     viewport width (~0.72x, the image's own aspect ratio) while a
     px-capped box height doesn't, so past ~1400px wide the gap between
     the two keeps growing and the effective top-crop grows right along
     with it. Cap raised further and the vw factor bumped so box height
     keeps pace with the image's own scaling for longer. */
  height: clamp(450px, 57vw, 830px);
  margin-top: 64px;
  overflow: hidden;
}
.photo-feature picture,
.photo-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Round 31: 22% (was 30% in round 28) - trims less off the top of the
     frame so there's headroom above both heads at any viewport width;
     there's ample floor/legs below to absorb the extra bottom crop. */
  object-position: 50% 22%;
  filter: grayscale(1) contrast(0.97) brightness(1.02);
}
.photo-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 13, 0) 35%, rgba(12, 12, 13, 0.8) 100%);
  pointer-events: none;
}
.photo-feature-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 32px 56px;
  color: #fff;
}
.photo-feature-caption-inner { max-width: 1120px; margin: 0 auto; }
.photo-feature-rule {
  display: block;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 18px;
}
.photo-feature-line {
  max-width: 680px;
  font-size: clamp(20px, 3.1vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .photo-feature { margin-top: 44px; height: clamp(340px, 92vw, 460px); }
  .photo-feature-caption { padding: 0 24px 30px; }
  /* Round 29: at narrow/tall mobile ratios this crop is height-driven
     (object-fit: cover has zero vertical overflow to work with), so the
     handshake's head sits close enough to the very top of the section
     that it reads as cut off right as the fixed nav bar scrolls over it.
     A small top-anchored zoom pushes the head down a bit for clearance
     without meaningfully losing the sides. */
  .photo-feature img { transform: scale(1.25); transform-origin: 50% 0%; }
}

/* Slim full-bleed divider band, no caption — a quiet visual pause
   between "reise" and "mentoren" */
.divider-photo {
  position: relative;
  width: 100%;
  /* Round 31: same wide-viewport fix as .photo-feature above. */
  height: clamp(360px, 54vw, 800px);
  overflow: hidden;
}
.divider-photo picture,
.divider-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(0.96) brightness(1.02);
}

/* Hook section — photo as texture/depth behind the emotional statement.
   Full-bleed with its own dark overlay, so it reads as a clean break
   regardless of what precedes/follows it. */
.hook {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Round 19: section height was purely text-content-driven (padding +
     heading line count), while the photo behind it fills 100% width —
     on very wide screens (iMac-class, 2500px+) the image's covered
     area grew far wider than tall, so object-fit:cover exposed a much
     thinner vertical slice of the source photo and cropped into the
     subject's face. min-height now scales with viewport width so the
     visible crop window stays proportionally consistent at any size. */
  min-height: clamp(380px, 32vw, 680px);
}
.hook-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hook-media picture,
.hook-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  filter: grayscale(1) contrast(1.05);
}
.hook-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 32%, rgba(12, 12, 13, 0.55) 0%, rgba(12, 12, 13, 0.9) 68%, rgba(12, 12, 13, 0.96) 100%);
}
.hook-inner { position: relative; z-index: 1; }
.hook-inner h2 { color: #fff; }

/* ============================================================
   FEATURE — two-column highlight (Unternehmen page): kicker +
   heading + copy + checklist, paired with a restrained pulsing-
   ring visual. No card background — matches the boxless language
   used elsewhere; the pulse is the only accent motion, echoing
   the cohorts-glow / hero-orb pulse already established on the
   site. Round 21 audit finding: this markup previously had zero
   matching CSS anywhere in the file and rendered as unstyled,
   near-invisible plain text — this block fixes that.
   ============================================================ */
.features { padding: 30px 32px 150px; }
.feature {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  align-items: center;
}
.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-card {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-pulse-core {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.f-pulse-ring {
  position: absolute;
  inset: 0;
}
.f-pulse-ring::before,
.f-pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-dim-2);
  animation: f-pulse 3.6s var(--ease) infinite;
}
.f-pulse-ring::after { animation-delay: 1.8s; }
@keyframes f-pulse {
  0% { transform: scale(0.22); opacity: 0.9; }
  85%, 100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .f-pulse-ring::before, .f-pulse-ring::after { animation: none; opacity: 0; }
}
.feature-kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.feature-copy h2 { margin-top: 14px; font-size: clamp(26px, 3.4vw, 38px); }
.feature-copy > p { margin-top: 16px; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); max-width: 560px; }
.feature-copy ul { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.feature-copy li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.feature-copy li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .feature-visual { order: -1; }
  .feature-copy > p, .feature-copy ul { margin-left: auto; margin-right: auto; }
  .feature-copy li { text-align: left; }
}
@media (max-width: 480px) {
  .f-card { width: 180px; height: 180px; }
}

/* ============================================================
   BLOG
   ============================================================ */

/* -- Index: list of post cards -- */
.blog-list-section { padding: 0 32px 120px; }
.blog-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.blog-card {
  padding: 40px 0;
  border-bottom: 1px solid var(--line-soft);
}
.blog-list .blog-card:first-child { padding-top: 0; }
.blog-card-meta {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.blog-card-meta span { color: var(--accent); text-transform: uppercase; }
.blog-card h2 { margin-top: 12px; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.25; }
.blog-card h2 a { color: var(--ink); transition: color 0.2s ease; }
.blog-card h2 a:hover { color: var(--accent); }
.blog-card-excerpt { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 640px; }
.blog-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.blog-card-more span { transition: transform 0.25s var(--ease); }
.blog-card-more:hover span { transform: translateX(3px); }

/* -- Post header (extends .page-header) -- */
.blog-post-header h1 { max-width: 820px; }
.blog-post-standfirst { max-width: 620px; }
.blog-article-meta {
  position: relative;
  z-index: 1;
  margin-top: 24px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-faint) !important;
  text-transform: uppercase;
}

/* -- Article body -- */
.blog-article {
  max-width: 700px;
  margin: 0 auto;
  padding: 8px 32px 120px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.blog-article > p { margin-top: 22px; }
.blog-article > p:first-of-type { margin-top: 0; }
.blog-article h2 {
  margin-top: 52px;
  font-size: clamp(22px, 2.8vw, 27px);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.blog-article ul { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.blog-article li { padding-left: 22px; position: relative; }
.blog-article li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.blog-article strong { color: var(--ink); font-weight: 600; }
.blog-article em { color: var(--ink); }

.blog-cta-box {
  margin-top: 56px;
  padding: 36px;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  text-align: center;
}
.blog-cta-box h3 { font-size: 21px; color: var(--ink); }
.blog-cta-box p { margin-top: 10px; font-size: 15px; line-height: 1.6; max-width: 440px; margin-left: auto; margin-right: auto; }
.blog-cta-box .btn { margin-top: 22px; }
.blog-cta-box .btn + .btn { margin-left: 12px; }

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.blog-back:hover { color: var(--accent); }

@media (max-width: 600px) {
  .blog-list-section { padding: 0 24px 90px; }
  .blog-article { padding: 8px 24px 90px; font-size: 16px; }
  .blog-cta-box { padding: 28px 22px; }
  .blog-cta-box .btn { display: block; width: 100%; }
  .blog-cta-box .btn + .btn { margin-left: 0; margin-top: 12px; }
}

.blog-archive-label {
  max-width: 760px;
  margin: 12px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.blog-list-archive { margin-top: 4px; }