/* =====================================================================
   EDITORIAL — цветная контрастная editorial-система
   Светлая контрастная тема с цветными акцентами.
   Дисплей: Unbounded 500/600/700.
   Текст: Onest 400/500.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500&family=Unbounded:wght@500;600;700&display=swap');

.role-page {
  /* Токены */
  --void: #000000;
  --bone: #ffffff;
  --charcoal: #252525;
  --hairline: rgba(255, 255, 255, .16);
  --hairline-soft: rgba(255, 255, 255, .1);
  --bone-70: rgba(255, 255, 255, .7);
  --bone-45: rgba(255, 255, 255, .45);

  --font-display: 'Unbounded', sans-serif;
  --font-text: 'Onest', 'Manrope', Arial, sans-serif;

  --radius: 50px;
  --radius-pill: 1000px;

  /* Перекрываем базовые переменные светлой темы */
  --bg: var(--void);
  --paper: var(--charcoal);
  --ink: var(--bone);
  --muted: var(--bone-45);
  --line: var(--hairline);
  --blue: var(--bone);
  --yellow: var(--bone);
  --coral: var(--bone);
  --shadow: none;

  background: var(--void);
  color: var(--bone);
  font-family: var(--font-text);
  font-weight: 400;
  letter-spacing: -.01em;
}

/* Никакого шума, свечений, аур, цветных подложек */
.role-page .page-noise,
.role-page .cursor-aura,
.role-page .role-visual-glow,
.role-page .photo-shadow,
.role-page #heroCanvas,
.role-page .spot { display: none !important; }
.role-page * { box-shadow: none !important; text-shadow: none !important; }

/* ---------- Типографика ---------- */
.role-page h1, .role-page h2,
.role-page .section-head h2,
.role-page .hero h1, .role-page .role-hero h1 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  letter-spacing: -.02em !important;
  color: var(--bone);
}
.role-page h3, .role-page h4, .role-page strong, .role-page b {
  font-weight: 400;
}
.role-page .brand {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0;
  font-size: 26px;
}
.role-page .brand span { color: var(--bone); }

/* Caption / метадата — подпись системы */
.role-page .section-label,
.role-page .hero-kicker {
  font-family: var(--font-text) !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--bone-70) !important;
}

/* ---------- Шапка: тихий текстовый ряд ---------- */
.role-page .site-header { top: 0; }
.role-page .header-inner {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  height: 84px;
}
.role-page .site-header.scrolled { top: 0; }
.role-page .site-header.scrolled .header-inner {
  background: rgba(0, 0, 0, .88);
  border-bottom: 1px solid var(--hairline-soft);
  backdrop-filter: blur(14px);
}
.role-page .desktop-nav { gap: 24px; }
.role-page .desktop-nav a { color: var(--bone); font-weight: 400; font-size: 14px; }
.role-page .desktop-nav a::after { background: var(--bone); height: 1px; }
.role-page .header-contact {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--bone);
  font-weight: 400;
  transition: background .25s, color .25s;
}
.role-page .header-contact:hover { background: var(--charcoal); }
.role-page .header-contact span { color: var(--bone-45); }
.role-page .header-progress { background: var(--bone); height: 1px; }
.role-page .menu-button { background: var(--charcoal); border-radius: var(--radius-pill); }
.role-page .mobile-nav { background: rgba(0,0,0,.96); }
.role-page .mobile-nav a { color: var(--bone); border-color: var(--hairline-soft); font-weight: 400; }

.role-switch { background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius-pill); }
.role-switch a { color: var(--bone-45); font-weight: 400; border-radius: var(--radius-pill); }
.role-switch a:hover { color: var(--bone); }
.role-switch a.active, .role-switch a.active[data-accent] {
  background: var(--charcoal) !important;
  color: var(--bone) !important;
}

/* ---------- HERO ---------- */
.role-hero { padding: 190px 0 80px; }
.role-page .hero { padding-top: 190px; }
.role-page .availability {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--bone-70);
  font-weight: 300;
  letter-spacing: .1em;
}
.role-page .availability span { background: var(--bone); box-shadow: none !important; }

.role-page .role-hero h1,
.role-page .hero h1 {
  font-size: clamp(64px, 8.4vw, 132px);
  line-height: .85;
}
.role-page .role-hero h1 span, .role-page .hero h1 span {
  display: block;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--bone) !important;
  color: var(--bone) !important;
  filter: none !important;
}
.role-page .role-hero h1 span:last-child,
.role-page .hero h1 span:last-child { font-style: italic; margin-left: .5em; }
.role-page .hero h1 span:last-child { margin-left: .35em; }

.role-page .hero-role {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 22px);
  color: var(--bone-70);
}
.role-page .role-prefix { color: var(--bone-45); }
.role-page .role-window { color: var(--bone); min-width: 0; }
.role-page .hero-text {
  color: var(--bone-70);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  max-width: 620px;
}
.role-page .hero-meta { color: var(--bone-45); font-weight: 300; }
.role-page .hero-meta b { color: var(--bone); font-weight: 400; }

/* Кнопки: ghost и charcoal, радиус-пилюля, без заливки белым */
.role-page .button {
  border-radius: var(--radius-pill);
  font-weight: 400;
  min-height: 54px;
  transition: background .25s, border-color .25s, transform .25s;
}
.role-page .button-accent, .role-page .button-primary {
  background: var(--charcoal);
  border: 1px solid transparent;
  color: var(--bone);
}
.role-page .button-accent:hover, .role-page .button-primary:hover {
  background: #303030;
  transform: translateY(-2px);
}
.role-page .button-ghost {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--bone);
}
.role-page .button-ghost:hover { background: var(--charcoal); border-color: transparent; }
.role-page .button span { color: var(--bone-45); }

/* Статы: hairline-таблица, цифры антиквой */
.role-page .hero-stats {
  border: 1px solid var(--hairline);
  background: var(--hairline-soft);
  border-radius: 32px;
  gap: 1px;
}
.role-page .hero-stats article { background: var(--void); }
.role-page .hero-stats strong {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 2.6vw, 44px);
  letter-spacing: -.02em;
}
.role-page .hero-stats article span {
  color: var(--bone-45);
  font-weight: 300;
  font-size: 11px;
}
.role-page .hero-stats p { color: var(--bone-45); font-weight: 300; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }

/* ---------- Визуал: единственная ступень глубины ---------- */
.role-window-panel {
  background: var(--charcoal);
  border: 0;
  border-radius: var(--radius);
  transform: rotate(0deg);
}
.role-window-bar {
  background: rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 16px 24px;
}
.role-window-bar i,
.role-window-bar i:nth-child(1),
.role-window-bar i:nth-child(2),
.role-window-bar i:nth-child(3) { background: rgba(255,255,255,.25); width: 9px; height: 9px; }
.role-window-bar span {
  font-family: var(--font-text);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-45);
}
.role-window-body { padding: 24px 26px; }

/* Код — монохром */
.code-lines { font-family: 'SF Mono', ui-monospace, monospace; }
.code-lines .txt { color: rgba(255,255,255,.88); }
.code-lines .num { color: rgba(255,255,255,.25); }
.tok-key { color: var(--bone); }
.tok-fn { color: var(--bone); }
.tok-str { color: rgba(255,255,255,.65); }
.tok-var { color: rgba(255,255,255,.65); }
.tok-com { color: rgba(255,255,255,.35); }
.code-cursor { background: var(--bone); }

/* Канбан — монохром */
.kanban-col h4 { color: var(--bone-45); font-weight: 400; }
.kanban-col h4 b { background: var(--bone) !important; opacity: .55; }
.kanban-task {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.88);
  font-weight: 400;
  border-radius: 16px;
}
.kanban-task span { color: var(--bone-45); font-weight: 300; }
.kanban-task.done::before { color: var(--bone); }

/* Дашборд — монохром */
.dash-metric {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
}
.dash-metric strong {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
}
.dash-metric small { color: var(--bone-45); font-weight: 300; }
.dash-metric em { color: var(--bone-70) !important; font-weight: 400; }
.dash-chart { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; }
.dash-chart path[fill^="url"] { fill: rgba(255,255,255,.07); }
.dash-grow { stroke: var(--bone); }

/* Орбиты — тонкие белые линии */
.role-page .orbit,
.role-page .orbit-two { border-color: rgba(255,255,255,.16); }
.role-page .orbit::before,
.role-page .orbit-two::before {
  background: var(--bone);
  width: 7px; height: 7px;
  box-shadow: none !important;
}

/* Плавающие подписи → чистые метадата-аннотации */
.role-float {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  padding: 0;
}
.role-float span {
  color: var(--bone-45);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .16em;
}
.role-float strong {
  color: var(--bone);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .02em;
}
.role-sticker {
  background: var(--charcoal);
  color: var(--bone) !important;
  border-radius: var(--radius-pill);
  transform: rotate(0deg);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 16px;
}

/* ---------- Тикеры ---------- */
.role-page .service-ticker {
  background: transparent;
  transform: none;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--bone-70);
  padding: 20px 0;
}
.role-page .ticker-track {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .18em;
}
.role-page .ticker-track i { color: var(--bone-45); }

.mega-ticker { padding: 96px 0 0; }
.mega-track {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(56px, 7vw, 110px);
  letter-spacing: -.02em;
  gap: 56px;
}
.mega-track span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.4); }
.mega-track span.solid { color: var(--bone); -webkit-text-stroke: 0; background: none; -webkit-text-fill-color: var(--bone); }
.mega-track i { color: var(--bone-45); font-size: .3em; }

/* ---------- Секции ---------- */
.role-page .section { padding: 96px 0; }
.role-page .section-head h2 { font-size: clamp(52px, 6vw, 92px); line-height: .9; }
.role-page .section-head > p {
  color: var(--bone-45);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.9;
}
.role-page .section-head-light h2 { color: var(--bone); }
.role-page .section-head-light > p { color: var(--bone-45); }

/* Формат — hairline-таблица */
.role-format {
  border: 1px solid var(--hairline);
  background: var(--hairline-soft);
  border-radius: 32px;
  box-shadow: none;
}
.role-format article { background: var(--void); transition: background .25s; }
.role-format article:hover { background: #0d0d0d; }
.role-format article span {
  color: var(--bone-45);
  font-weight: 300;
  letter-spacing: .16em;
}
.role-format article strong { color: var(--bone); font-weight: 400; }

/* Сильные стороны / процесс — charcoal-карты */
.role-page .problem-section { background: transparent; }
.role-page .problem-section::before { display: none; }
.strength-card, .proc-step {
  background: var(--charcoal);
  border: 0;
  border-radius: var(--radius);
  padding: 40px 34px 36px;
}
.strength-card::before, .proc-step::before { display: none; }
.strength-card:hover, .proc-step:hover {
  transform: translateY(-6px);
  border-color: transparent;
}
.strength-card i, .proc-step b {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--bone-70);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .12em;
  width: auto; height: auto;
  padding: 6px 14px;
}
.strength-card h3, .proc-step h3 {
  color: var(--bone);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -.01em;
}
.strength-card p, .proc-step p {
  color: var(--bone-45);
  font-weight: 300;
  line-height: 1.85;
  font-size: 14px;
}
.proc-step u {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  color: var(--bone);
  opacity: .07;
  font-size: 84px;
}

/* ---------- Кейсы ---------- */
.role-page .case-card {
  background: var(--charcoal);
  border: 0;
  border-radius: var(--radius);
}
.role-page .case-card:hover { transform: translateY(-6px); border-color: transparent; }
.role-page .case-art { background: #161616 !important; }
.role-page .case-art::before { border-color: rgba(255,255,255,.14); box-shadow: none !important; }
.role-page .case-art::after { background: rgba(255,255,255,.06); backdrop-filter: none; }
.role-page .case-art-grid { opacity: .1; }
.role-page .case-art-index { font-family: var(--font-text); font-weight: 300; letter-spacing: .14em; }
.role-page .case-art-title { font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em; }
.role-page .case-art-mark { border-color: rgba(255,255,255,.3); }
.role-page .case-image-metric { background: var(--charcoal); color: var(--bone); border: 1px solid var(--hairline-soft); }
.role-page .case-image-metric b, .role-page .case-image-metric small { color: var(--bone); }
.role-page .case-body h3 { color: var(--bone); font-weight: 400; font-size: 21px; }
.role-page .case-body p { color: var(--bone-45); font-weight: 300; line-height: 1.75; }
.role-page .case-meta span { color: var(--bone-45); font-weight: 300; letter-spacing: .12em; }
.role-page .case-meta strong { color: var(--bone); font-family: var(--font-display); font-weight: 300; font-size: 22px; }
.role-page .case-footer span { color: var(--bone-45); font-weight: 300; }
.role-page .case-tags i {
  background: transparent;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-pill);
  color: var(--bone-45);
  font-weight: 300;
}
.role-page .case-browser-bar { background: #1c1c1c; }
.role-page .case-browser-bar span { color: var(--bone-45); }

/* Фильтры (главная) */
.role-page .filter {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--bone-70);
  font-weight: 400;
}
.role-page .filter:hover, .role-page .filter.active {
  background: var(--charcoal);
  border-color: transparent;
  color: var(--bone);
}
.role-page .subfilter {
  background: transparent;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-pill);
  color: var(--bone-70);
  font-weight: 400;
}
.role-page .subfilter span { background: transparent; color: var(--bone-45); }
.role-page .subfilter.active { background: var(--charcoal); border-color: transparent; color: var(--bone); }
.role-page .subfilter.active span { background: transparent; color: var(--bone); }
.role-page .subfilters-head strong, .role-page .subfilters-head > span { color: var(--bone-45); font-weight: 300; }
.role-page .subfilters-panel::before { background: var(--hairline); }

/* Проблемы (главная) */
.role-page .problem-row { border-color: var(--hairline-soft); }
.role-page .problem-row:hover { background: rgba(255,255,255,.03); }
.role-page .problem-row > span {
  color: var(--bone-45);
  font-family: var(--font-text);
  font-weight: 300;
  letter-spacing: .12em;
}
.role-page .problem-row h3 { color: var(--bone); font-weight: 400; }
.role-page .problem-row p { color: var(--bone-45); font-weight: 300; }
.role-page .problem-row button { color: var(--bone); font-weight: 400; }

/* Обо мне / Профи (главная) */
.role-page .about-copy { background: var(--charcoal); border: 0; border-radius: var(--radius); }
.role-page .about-copy h2 { font-size: clamp(40px, 4.6vw, 64px); }
.role-page .about-copy p { color: var(--bone-70); font-weight: 300; line-height: 1.95; }
.role-page .profi-card {
  background: var(--void);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.role-page .profi-card::before { border-color: rgba(255,255,255,.12); box-shadow: none !important; }
.role-page .profi-card:hover { transform: translateY(-6px) rotate(0deg); }
.role-page .profi-top strong { font-family: var(--font-text); font-weight: 400; letter-spacing: .1em; }
.role-page .profi-top span, .role-page .profi-bottom span { color: var(--bone-45); font-weight: 300; }
.role-page .profi-score b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 120px;
}
.role-page .profi-score span { color: var(--bone-70); letter-spacing: .2em; font-size: 20px; }
.role-page .profi-bottom em { background: var(--charcoal); color: var(--bone); font-weight: 400; }

/* Отзывы (главная): антиква в цитатах, одна инверсия */
.role-page .review-card { background: var(--charcoal); border: 0; border-radius: 40px; }
.role-page .review-card:hover { transform: translateY(-6px); border-color: transparent; }
.role-page .stars { color: var(--bone); letter-spacing: .2em; }
.role-page .review-card blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.role-page .review-card p { color: var(--bone-45); font-weight: 300; }
.role-page .review-card > span { color: var(--bone-70); font-weight: 400; }
.role-page .review-more {
  background: var(--bone);
  color: var(--void);
}
.role-page .review-more strong { font-family: var(--font-display); font-weight: 300; color: var(--void); }
.role-page .review-more p, .role-page .review-more > span { color: rgba(0,0,0,.6); }
.role-page .review-accent { background: var(--void); border: 1px solid var(--hairline); color: var(--bone); }
.role-page .review-accent strong { font-family: var(--font-display); font-weight: 300; }
.role-page .review-accent p { color: var(--bone-45); }

/* Хаб-карты (главная) */
.role-page .hub-card {
  background: var(--charcoal);
  border: 0;
  border-radius: var(--radius);
}
.role-page .hub-card::after { display: none; }
.role-page .hub-card:hover { transform: translateY(-8px); border-color: transparent; }
.role-page .hub-card__num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--bone);
  opacity: .06;
}
.role-page .hub-card__tag {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--bone-70);
  font-weight: 300;
  letter-spacing: .14em;
}
.role-page .hub-card h3 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-size: 38px;
  letter-spacing: -.01em;
}
.role-page .hub-card p { color: var(--bone-45); font-weight: 300; line-height: 1.8; }
.role-page .hub-card__tech span {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--bone-45);
  font-weight: 300;
}
.role-page .hub-card__go { color: var(--bone); font-weight: 400; }
.role-page .hub-card__go i { color: var(--bone-45); }
.role-page .hub-visitcard {
  border: 1px dashed var(--hairline);
  background: transparent;
  border-radius: var(--radius);
}
.role-page .hub-visitcard div strong { color: var(--bone); font-weight: 400; }
.role-page .hub-visitcard div span { color: var(--bone-45); font-weight: 300; }

/* Фото (главная): без рамки, ч/б, высокий контраст */
.role-page .photo-card {
  border: 0;
  border-radius: var(--radius);
  background: var(--charcoal);
  transform: rotate(0deg);
}
.role-page .photo-card img { filter: grayscale(1) contrast(1.12); }
.role-page .photo-shade { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); }
.role-page .photo-label { font-weight: 300; letter-spacing: .2em; }
.role-page .floating-note {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  padding: 0;
  min-width: 0;
}
.role-page .floating-note strong { font-family: var(--font-display); font-weight: 300; font-size: 30px; color: var(--bone); }
.role-page .floating-note small { color: var(--bone-45); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.role-page .code-sticker {
  background: var(--charcoal);
  border: 0;
  color: var(--bone);
  border-radius: var(--radius-pill);
  transform: rotate(0deg);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .12em;
}

/* ---------- Стек ---------- */
.role-page .stack-board { border: 1px solid var(--hairline); background: transparent; border-radius: 40px; }
.role-page .stack-row { border-color: var(--hairline-soft); }
.role-page .stack-row:hover { background: rgba(255,255,255,.025); }
.role-page .stack-row h3 { color: var(--bone); font-weight: 400; }
.role-page .stack-row span {
  background: transparent;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-pill);
  color: var(--bone-70);
  font-weight: 300;
}
.role-page .stack-row span:hover { border-color: var(--bone-45); background: transparent; }

/* ---------- Контакты ---------- */
.role-page .contacts-section { background: transparent; }
.role-page .contacts-title h2 { color: var(--bone); }
.role-page .contacts-title p { color: var(--bone-45); font-weight: 300; line-height: 1.9; }
.role-page .contact-links, .role-page .contact-links a { border-color: var(--hairline-soft); }
.role-page .contact-links a:hover { background: rgba(255,255,255,.025); }
.role-page .contact-links span { color: var(--bone-45); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.role-page .contact-links strong { color: var(--bone); font-weight: 400; }
.role-page .contact-links i { color: var(--bone-45); }
.role-page .footer { border-color: var(--hairline-soft); color: var(--bone-45); font-weight: 300; }
.role-page .footer a { color: var(--bone); font-weight: 400; }

/* Кнопка возврата */
.role-page .role-back {
  background: var(--charcoal);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--bone);
  font-weight: 400;
  backdrop-filter: none;
}
.role-page .role-back span { color: var(--bone-45); }

/* ---------- Модалка ---------- */
.role-page .modal-backdrop { background: rgba(0,0,0,.85); backdrop-filter: none; }
.role-page .modal-panel { background: #0a0a0a; border: 1px solid var(--hairline-soft); border-radius: 40px; }
.role-page .modal-close { background: var(--charcoal); color: var(--bone); }
.role-page .modal-art { background: #161616 !important; }
.role-page .modal-art::before { border-color: rgba(255,255,255,.12); box-shadow: none !important; }
.role-page .modal-art::after { font-family: var(--font-display); font-weight: 300; }
.role-page .modal-meta { color: var(--bone-45); font-weight: 300; }
.role-page .modal-meta strong { color: var(--bone); font-family: var(--font-display); font-weight: 300; font-size: 24px; }
.role-page .modal-content > h2 { font-family: var(--font-display); font-weight: 300; }
.role-page .modal-columns h3 { color: var(--bone-70); font-weight: 400; letter-spacing: .14em; }
.role-page .modal-columns p, .role-page .modal-columns li { color: var(--bone-45); font-weight: 300; line-height: 1.85; }
.role-page .modal-footer { border-color: var(--hairline-soft); }
.role-page .modal-tech span { border: 1px solid var(--hairline-soft); border-radius: var(--radius-pill); color: var(--bone-70); font-weight: 300; }
.role-page .modal-visual-label strong { font-family: var(--font-display); font-weight: 300; }

/* ---------- Появление строк H1 (без шиммера) ---------- */
.role-hero h1 > span, .role-page .hero h1 > span {
  opacity: 0;
  transform: translateY(40px);
  animation: lineUp .9s cubic-bezier(.2, .8, .2, 1) .05s forwards;
}
.role-hero h1 > span:last-child, .role-page .hero h1 > span:last-child {
  animation-delay: .2s;
}
@keyframes lineUp { to { opacity: 1; transform: none; } }
@keyframes taskIn { from { opacity: 0; transform: translateY(-10px); } }

/* ---------- Reveal: мягко, без blur ---------- */
.role-page .reveal { filter: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 980px) {
  .proc-grid { grid-template-columns: 1fr 1fr; }
  .role-page .role-hero h1, .role-page .hero h1 { font-size: clamp(52px, 11vw, 84px); }
}
@media (max-width: 560px) {
  .proc-grid { grid-template-columns: 1fr; }
  .mega-track { font-size: 46px; }
  .strength-card, .proc-step { padding: 30px 26px; border-radius: 36px; }
  .role-page .case-card { border-radius: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .role-hero h1 > span, .role-page .hero h1 > span { opacity: 1; transform: none; animation: none; }
  .mega-track { animation: none; }
}

/* proc-grid структура (перенесена из прежней темы) */
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.proc-step { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.proc-step b { display: inline-block; position: relative; z-index: 1; margin-bottom: 44px; }
.proc-step h3 { position: relative; z-index: 1; margin: 0 0 10px; }
.proc-step p { position: relative; z-index: 1; margin: 0; }
.proc-step u { position: absolute; right: 22px; top: 16px; text-decoration: none; pointer-events: none; line-height: 1; }
.mega-ticker { overflow: hidden; }
.mega-track { display: flex; align-items: center; width: max-content; white-space: nowrap; animation: ticker 34s linear infinite; }

/* ---------- Фиксы позиционирования аннотаций ---------- */
/* Роль-страницы: метадата не должна выходить за вьюпорт */
.role-float--tl { left: 0; top: 4%; }
.role-float--br { right: 0; bottom: 6%; text-align: right; }

/* Главная: аннотации внутри фото-сцены, не на заголовке */
.role-page .note-one { right: 2%; top: 12%; text-align: right; }
.role-page .note-two { left: 4%; top: 46%; }
.role-page .note-three { right: 3%; bottom: 10%; text-align: right; }
.role-page .code-sticker { left: 4%; top: 5%; }

/* Главная: имя компактнее, чтобы не налезало на колонку фото */
.index-page .hero h1 { font-size: clamp(54px, 6.2vw, 96px) !important; }


/* =====================================================================
   COLOR FIX — возвращаем нормальную цветную тему и контраст
   ===================================================================== */
.role-page {
  --void: #f5f3ed;
  --bone: #121318;
  --charcoal: #fffefa;
  --hairline: rgba(18, 19, 24, .14);
  --hairline-soft: rgba(18, 19, 24, .08);
  --bone-70: rgba(18, 19, 24, .78);
  --bone-45: rgba(18, 19, 24, .58);

  --bg: #f5f3ed;
  --paper: #fffefa;
  --ink: #121318;
  --muted: #3f4550;
  --line: rgba(18, 19, 24, .14);
  --blue: #3157ff;
  --blue-dark: #1732cb;
  --yellow: #ffd94a;
  --yellow-ink: #a97e00;
  --coral: #ff6d52;
  --shadow: 0 24px 70px rgba(22, 27, 47, .12);

  --font-display: 'Unbounded', sans-serif;
  --font-text: 'Onest', 'Manrope', Arial, sans-serif;

  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-text) !important;
  font-weight: 400;
}

.role-page[data-accent="blue"] {
  --page-accent: var(--blue);
  --page-accent-ink: var(--blue);
}
.role-page[data-accent="yellow"] {
  --page-accent: var(--yellow);
  --page-accent-ink: var(--yellow-ink);
}
.role-page[data-accent="coral"] {
  --page-accent: var(--coral);
  --page-accent-ink: var(--coral);
}

.role-page h1,
.role-page h2,
.role-page .section-head h2,
.role-page .hero h1,
.role-page .role-hero h1,
.role-page .brand,
.role-page .case-art-title,
.role-page .contacts-title h2,
.role-page .modal-content > h2 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -.065em !important;
}
.role-page h3,
.role-page h4,
.role-page strong,
.role-page b {
  font-weight: 500;
}
.role-page .brand span,
.role-page .section-label,
.role-page .hero-kicker,
.role-page .text-link,
.role-page .case-meta strong,
.role-page .modal-meta strong,
.role-page .modal-columns h3 {
  color: var(--page-accent-ink) !important;
}
.role-page .section-label,
.role-page .hero-kicker {
  font-weight: 500 !important;
}
.role-page .section-head > p,
.role-page .section-head > .text-link,
.role-page .hero-text,
.role-page .hero-meta,
.role-page .role-prefix,
.role-page .about-copy p,
.role-page .case-body p,
.role-page .case-meta span,
.role-page .case-footer span,
.role-page .case-tags i,
.role-page .stack-row span,
.role-page .strength-card p,
.role-page .proc-step p,
.role-page .hub-card p,
.role-page .hub-card__tech span,
.role-page .hub-visitcard div span,
.role-page .modal-columns p,
.role-page .modal-columns li,
.role-page .modal-meta,
.role-page .modal-visual-label span {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.role-page .hero h1 span,
.role-page .role-hero h1 span {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.role-page .hero h1 span:last-child,
.role-page .role-hero h1 span:last-child {
  color: var(--page-accent) !important;
  -webkit-text-fill-color: var(--page-accent) !important;
  font-style: normal !important;
}
.role-page .role-window {
  color: var(--page-accent) !important;
}
.role-page .hero-role {
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.role-page .hero-meta b {
  color: var(--ink) !important;
  font-weight: 500 !important;
}

.role-page .header-inner {
  background: rgba(255, 254, 250, .84) !important;
  border: 1px solid rgba(18, 19, 24, .1) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  box-shadow: 0 16px 48px rgba(22, 27, 47, .08) !important;
}
.role-page .site-header.scrolled .header-inner {
  background: rgba(255, 254, 250, .94) !important;
  border-color: rgba(18, 19, 24, .12) !important;
}
.role-page .desktop-nav a,
.role-page .mobile-nav a,
.role-switch a {
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.role-page .desktop-nav a:hover,
.role-page .mobile-nav a:hover,
.role-switch a:hover {
  color: var(--ink) !important;
}
.role-page .desktop-nav a::after,
.role-page .header-progress {
  background: var(--page-accent) !important;
}
.role-page .header-contact,
.role-page .menu-button,
.role-switch a.active,
.role-switch a.active[data-accent] {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(18, 19, 24, .14) !important;
}
.role-page .header-contact span,
.role-page .role-back span {
  color: var(--yellow) !important;
}
.role-switch {
  background: rgba(255, 254, 250, .78) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
}
.role-switch a.active[data-accent="yellow"] {
  background: var(--ink) !important;
  color: var(--yellow) !important;
}
.role-switch a.active[data-accent="coral"] {
  background: var(--coral) !important;
  color: #fff !important;
}
.role-page .mobile-nav {
  background: rgba(255, 254, 250, .98) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.role-page .availability,
.role-page .button-ghost,
.role-page .filter,
.role-page .subfilter,
.role-page .hub-card__tag,
.role-page .stack-row span,
.role-page .modal-tech span,
.role-page .case-tags i {
  background: rgba(255, 255, 255, .66) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.role-page .availability span {
  background: #34c759 !important;
  box-shadow: 0 0 0 5px rgba(52, 199, 89, .13) !important;
}
.role-page .button,
.role-page .button-primary,
.role-page .button-accent,
.role-page .button-ghost,
.role-page .role-back {
  border-radius: 17px !important;
  font-weight: 500 !important;
}
.role-page .button-primary,
.role-page .button-accent,
.role-page .filter.active,
.role-page .subfilter.active {
  background: var(--page-accent) !important;
  border-color: var(--page-accent) !important;
  color: #fff !important;
  box-shadow: 0 15px 35px color-mix(in srgb, var(--page-accent) 28%, transparent) !important;
}
.role-page[data-accent="yellow"] .button-primary,
.role-page[data-accent="yellow"] .button-accent,
.role-page[data-accent="yellow"] .filter.active,
.role-page[data-accent="yellow"] .subfilter.active {
  color: var(--ink) !important;
}
.role-page .button-ghost:hover,
.role-page .filter:hover,
.role-page .subfilter:hover {
  background: var(--paper) !important;
  border-color: color-mix(in srgb, var(--page-accent) 42%, transparent) !important;
}
.role-page .button span {
  color: currentColor !important;
  opacity: .82;
}

.role-page .hero-stats,
.role-format,
.role-page .stack-board {
  background: var(--line) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 18px 55px rgba(22, 27, 47, .08) !important;
}
.role-page .hero-stats article,
.role-format article,
.role-page .stack-row,
.role-page .about-copy,
.role-page .direction-card,
.role-page .case-card,
.role-page .review-card,
.role-page .hub-card,
.strength-card,
.proc-step {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 16px 44px rgba(22, 27, 47, .07) !important;
  color: var(--ink) !important;
}
.role-page .direction-card:hover,
.role-page .case-card:hover,
.role-page .review-card:hover,
.role-page .hub-card:hover,
.strength-card:hover,
.proc-step:hover {
  box-shadow: 0 28px 70px rgba(22, 27, 47, .14) !important;
}
.role-page .hero-stats strong,
.role-format article strong,
.role-page .case-body h3,
.role-page .hub-card h3,
.role-page .strength-card h3,
.role-page .proc-step h3,
.role-page .stack-row h3,
.role-page .review-card blockquote,
.role-page .modal-visual-label strong,
.role-page .hub-visitcard div strong {
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.role-page .hero-stats p,
.role-page .hero-stats article span,
.role-format article span {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.role-page .direction-card__description,
.role-page .direction-card__type,
.role-page .direction-card__tags span,
.role-page .direction-card__footer {
  color: var(--muted) !important;
}
.role-page .direction-card__number {
  background: rgba(255, 255, 255, .78) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.role-page .direction-card__footer i,
.role-page .direction-card__type::before {
  background: var(--direction-accent) !important;
}
.role-page .direction-card__background-number {
  color: var(--ink) !important;
  opacity: .055 !important;
}

.role-page .photo-card {
  border: 8px solid rgba(255, 255, 255, .82) !important;
  border-radius: 46% 46% 28px 28px !important;
  background: #18245b !important;
  box-shadow: 0 24px 70px rgba(22, 27, 47, .14) !important;
}
.role-page .photo-card img {
  filter: saturate(.95) contrast(1.04) !important;
}
.role-page .photo-shadow {
  display: block !important;
  background: radial-gradient(circle at 50% 40%, rgba(49, 87, 255, .24), rgba(255, 217, 74, .18) 45%, transparent 70%) !important;
}
.role-page .orbit,
.role-page .orbit-two {
  border-color: color-mix(in srgb, var(--page-accent) 32%, transparent) !important;
}
.role-page .orbit::before,
.role-page .orbit-two::before {
  background: var(--page-accent) !important;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--page-accent) 13%, transparent) !important;
}
.role-page .floating-note {
  background: rgba(255, 254, 250, .9) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  box-shadow: 0 14px 36px rgba(22, 27, 47, .13) !important;
}
.role-page .floating-note strong {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
}
.role-page .floating-note small {
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.role-page .code-sticker,
.role-sticker {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
  box-shadow: 8px 8px 0 rgba(18, 19, 24, .85) !important;
}
.role-page[data-accent="blue"] .role-sticker,
.role-page[data-accent="coral"] .role-sticker {
  background: var(--page-accent) !important;
  color: #fff !important;
}

.role-window-panel {
  background: #10162c !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 34px 80px rgba(15, 21, 48, .32) !important;
}
.role-window-bar {
  background: rgba(255, 255, 255, .05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
}
.role-window-bar span,
.code-lines .num,
.kanban-col h4,
.kanban-task span,
.dash-metric small {
  color: rgba(255, 255, 255, .52) !important;
}
.code-lines .txt,
.kanban-task,
.dash-metric strong {
  color: #dce3ff !important;
}
.tok-key { color: #7aa2ff !important; }
.tok-fn { color: #ffd94a !important; }
.tok-str { color: #7ee0a8 !important; }
.tok-var { color: #ff8f6b !important; }
.tok-com { color: rgba(255, 255, 255, .48) !important; }
.kanban-task,
.dash-metric,
.dash-chart {
  background: rgba(255, 255, 255, .055) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
}
.dash-metric em { color: #7ee0a8 !important; }
.dash-grow { stroke: var(--page-accent) !important; }

.role-page .service-ticker,
.role-page .problem-section,
.role-page .contacts-section {
  background: var(--ink) !important;
  color: #fff !important;
}
.role-page .service-ticker {
  transform: rotate(-1deg) scale(1.02) !important;
  border: 0 !important;
}
.role-page .ticker-track i,
.role-page .contacts-title .section-label,
.role-page .problem-row > span,
.role-page .problem-row button,
.role-page .contact-links i {
  color: var(--yellow) !important;
}
.role-page .section-head-light h2,
.role-page .problem-row h3,
.role-page .contacts-title h2,
.role-page .contact-links strong,
.role-page .footer a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.role-page .section-head-light > p,
.role-page .problem-row p,
.role-page .contacts-title p,
.role-page .contact-links span,
.role-page .footer {
  color: rgba(255, 255, 255, .72) !important;
}
.role-page .problem-list,
.role-page .problem-row,
.role-page .contact-links,
.role-page .contact-links a,
.role-page .footer {
  border-color: rgba(255, 255, 255, .18) !important;
}
.role-page .problem-row:hover,
.role-page .contact-links a:hover {
  background: rgba(255, 255, 255, .04) !important;
}

.role-page .case-art,
.role-page .modal-art {
  background: var(--art-bg, var(--page-accent)) !important;
  color: #fff !important;
}
.role-page .case-art-title,
.role-page .case-art-index,
.role-page .case-art-mark,
.role-page .modal-art::after {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.role-page .case-art::before,
.role-page .modal-art::before {
  border-color: rgba(255, 255, 255, .45) !important;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, .045), 0 0 0 100px rgba(255, 255, 255, .035) !important;
}
.role-page .case-art::after {
  background: rgba(255, 255, 255, .18) !important;
  backdrop-filter: blur(10px) !important;
}
.role-page .case-browser,
.role-page .modal-browser {
  box-shadow: 0 30px 70px rgba(6, 12, 35, .34), 0 10px 22px rgba(6, 12, 35, .18) !important;
}
.role-page .case-image-metric,
.role-page .modal-visual-label {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  box-shadow: 0 18px 42px rgba(6, 12, 35, .2) !important;
}
.role-page .case-image-metric b,
.role-page .modal-visual-label b {
  color: var(--page-accent) !important;
}
.role-page .case-image-metric small {
  color: var(--muted) !important;
}
.role-page .case-browser-bar,
.role-page .modal-browser-bar {
  background: rgba(255, 255, 255, .96) !important;
}
.role-page .case-browser-bar span,
.role-page .modal-browser-bar span {
  color: rgba(18, 19, 24, .58) !important;
}

.role-page .review-more {
  background: var(--yellow) !important;
  color: var(--ink) !important;
}
.role-page .review-accent,
.role-page .profi-card {
  background: var(--blue) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 24px 60px rgba(49, 87, 255, .25) !important;
}
.role-page .review-more strong,
.role-page .review-more p,
.role-page .review-more > span {
  color: var(--ink) !important;
}
.role-page .review-accent strong,
.role-page .review-accent p,
.role-page .review-accent > span,
.role-page .profi-card strong,
.role-page .profi-card span,
.role-page .profi-score b,
.role-page .profi-score span,
.role-page .profi-bottom span {
  color: #fff !important;
}
.role-page .profi-bottom em {
  background: #fff !important;
  color: var(--blue) !important;
}
.role-page .stars {
  color: #ffad00 !important;
}

.role-page .stack-section {
  background: #eae7de !important;
}
.role-page .hub-card__num,
.proc-step u {
  color: var(--ink) !important;
  opacity: .055 !important;
}
.role-page .role-back {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 0 14px 40px rgba(22, 27, 47, .22) !important;
}

.role-page .modal-panel {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .35) !important;
}
.role-page .modal-backdrop {
  background: rgba(10, 12, 18, .74) !important;
  backdrop-filter: blur(12px) !important;
}
.role-page .modal-close {
  background: rgba(255, 255, 255, .95) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}
.role-page .modal-content > h2 {
  color: var(--ink) !important;
}
.role-page .modal-footer {
  border-color: var(--line) !important;
}

@media (max-width: 760px) {
  .role-page .button,
  .role-page .button-primary,
  .role-page .button-accent,
  .role-page .button-ghost {
    width: 100%;
  }
}