:root {
  
  --b-red: #961D16;
  --b-gold: #DBB686;
  --b-blue: #0F67B1;
  --b-green: #026948;
  --b-ink: #2E3135;
  --b-white: #FFFFFF;
  --b-warm: #F5F5F7;
  --b-beige: #E6E5E1;
  
  --b-ink-80: color-mix(in srgb, var(--b-ink) 82%, #fff);
  --b-ink-60: color-mix(in srgb, var(--b-ink) 64%, #fff);
  --b-ink-40: color-mix(in srgb, var(--b-ink) 42%, #fff);
  --b-line: color-mix(in srgb, var(--b-ink) 14%, #fff);
  --b-line-strong: color-mix(in srgb, var(--b-ink) 28%, #fff);
  --b-fill: color-mix(in srgb, var(--b-ink) 6%, #fff);
  --b-gold-mark: color-mix(in srgb, var(--b-gold) 55%, transparent);
  --b-red-dark: color-mix(in srgb, var(--b-red) 84%, #000);
  --b-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --b-radius: 8px;

  
  --fs-red: var(--b-red);
  --fs-blue: var(--b-blue);
  --fs-green: var(--b-green);
  --fs-black: var(--b-ink);
  --fs-white: var(--b-white);
  --grey-50: var(--b-warm);
  --grey-100: var(--b-fill);
  --ink-70: var(--b-ink-80);
  --ink-50: var(--b-ink-60);
  --ink-30: var(--b-ink-40);
  --line: var(--b-line);
  --line-strong: var(--b-line-strong);
  --font-sans: var(--b-font);
  --font-mono: var(--b-font);
  --mono: var(--b-font);
}


html body, html body *, html body *::before, html body *::after { font-family: var(--b-font) !important; }


.b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 15px/1 var(--b-font); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.b-btn .b-icon { width: 18px; height: 18px; }
.b-btn--primary { background: var(--b-red); color: #fff; }
.b-btn--primary:hover { background: var(--b-red-dark); }
.b-btn--secondary { background: transparent; color: var(--b-red); border-color: var(--b-red); }
.b-btn--secondary:hover { background: color-mix(in srgb, var(--b-red) 7%, transparent); }
.b-btn--sm { height: 38px; padding: 0 18px; font-size: 14px; }

.b-btn--action { background: transparent; color: var(--b-ink); border-color: var(--b-red); padding: 0 8px 0 18px; }
.b-btn--action::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--b-red); margin-left: 2px; }
.b-btn--action:hover { color: var(--b-red); }
.b-link { color: var(--b-red); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.b-link:hover { text-decoration-thickness: 2px; }
.b-link .b-icon { width: 16px; height: 16px; vertical-align: -3px; margin-left: 4px; }


.b-tag { display: inline-block; padding: 4px 8px 4px; font: 600 11px/1.2 var(--b-font); letter-spacing: .02em; color: #fff; background: var(--b-red); border-radius: 0; white-space: nowrap; }
.b-tag--flagship { background: var(--b-red); }
.b-tag--academy { background: var(--b-blue); }
.b-tag--platform { background: var(--b-green); }
.b-badge { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 5px 0 11px; border: 1.5px solid var(--b-red); border-radius: 999px;
  color: var(--b-red); font: 600 12px/1 var(--b-font); white-space: nowrap; }
.b-badge::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--b-red); }


.b-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--b-red); flex: none; }
.b-dot--sm { width: 6px; height: 6px; }
.b-dot--lg { width: 12px; height: 12px; }

.b-steps { display: inline-flex; align-items: center; gap: 10px; }
.b-steps > * { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--b-ink-40); background: transparent; padding: 0; }
.b-steps > .is-active { background: var(--b-red); border-color: var(--b-red); }

.b-progress { position: relative; height: 12px; --p: 0; }
.b-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--b-line-strong); }
.b-progress::after { content: ""; position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--b-red); transition: left .3s ease; }

.b-timeline { display: flex; align-items: center; }
.b-timeline > * { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--b-ink-60); background: #fff; flex: none; }
.b-timeline > * + *::before { content: ""; }
.b-timeline > .is-active { background: var(--b-red); border-color: var(--b-red); }

.b-list { list-style: none; margin: 0; padding: 0; }
.b-list > li { display: flex; align-items: baseline; gap: 12px; }
.b-list > li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--b-red); flex: none; transform: translateY(-1px); }


.b-card { position: relative; background: var(--b-white); border: 1px solid var(--b-line); border-radius: var(--b-radius); }
.b-card--warm { background: var(--b-warm); border-color: transparent; }
.b-card--dot::after { content: ""; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--b-red); }
.b-quote-mark { display: block; font: 600 96px/.7 var(--b-font); color: var(--b-red); letter-spacing: -.04em; }
.b-figure { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--b-red); }
.b-figure--academy { color: var(--b-blue); }
.b-figure--platform { color: var(--b-green); }
.b-hl-red { color: var(--b-red); }
.b-hl-green { color: var(--b-green); }
.b-hl-blue { color: var(--b-blue); }
.b-mark { text-decoration: underline; text-decoration-color: var(--b-red); text-decoration-thickness: 2px; text-underline-offset: .18em; } 
.b-num { font-variant-numeric: tabular-nums; }


.b-bg-white { background: var(--b-white); }
.b-bg-warm { background: var(--b-warm); }
.b-bg-beige { background: var(--b-beige); }
.b-bg-key { background: var(--b-ink); color: #fff; } 


.b-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.b-icon--flagship { color: var(--b-red); }
.b-icon--academy { color: var(--b-blue); }
.b-icon--platform { color: var(--b-green); }

@media (prefers-reduced-motion: reduce) {
  .b-btn, .b-progress::after { transition: none; }
}