/* ═══════════════════════════════════════════════════════════════════════
   dir.css — ЦВЕТ КАК СИСТЕМА НАВИГАЦИИ (два направления) + каркас
   уникальных блоков подстраниц.

   Сайты  → синий  (--dir #4A63E0, подложка --dir-soft #ECF1FF)
   Боты   → фиолет (--dir #6D49CE, подложка --dir-soft #F1ECFD)

   Тело:  <body class="dir-sayty"> | <body class="dir-boty">
   Общие жесты НЕ изобретаются: карточка, ховер иконки, mono-числа, spring —
   как в garantii/podderzhka/o-studii/referral.
   ═══════════════════════════════════════════════════════════════════════ */

.dir-sayty{
  --dir:#4A63E0; --dir-2:#6D8BF0; --dir-ink:#1E3A8A;
  --dir-soft:#ECF1FF; --dir-soft2:#F5F8FF; --dir-line:#D6DFF8;
  --dir-ring:rgba(74,99,224,.30); --dir-glow:rgba(74,99,224,.16);
}
.dir-boty{
  --dir:#6D49CE; --dir-2:#9B7BE8; --dir-ink:#4B2E9E;
  --dir-soft:#F1ECFD; --dir-soft2:#F8F5FE; --dir-line:#E4DBFB;
  --dir-ring:rgba(109,73,206,.30); --dir-glow:rgba(109,73,206,.16);
}

/* ── Акцент направления в hero ── */
.dir-sayty .phero .grad{background:linear-gradient(95deg,#4A63E0,#6D8BF0);-webkit-background-clip:text;background-clip:text;color:transparent}
.dir-boty  .phero .grad{background:linear-gradient(95deg,#6D49CE,#9B7BE8);-webkit-background-clip:text;background-clip:text;color:transparent}
/* хлебные крошки: сегмент направления окрашен */
.dir-sayty .crumbs,.dir-boty .crumbs{align-items:center}
.dir-sayty .crumbs a:hover,.dir-boty .crumbs a:hover{color:var(--dir)}
/* полоски-эйрбрау на странице — в цвет направления */
.dir-sayty .label::before,.dir-boty .label::before{background:var(--dir);opacity:.9}

/* ── Цвет направления В РОЛИ ТЕКСТА (--dir-pill-ink) ── */
/* FIX I: текст пилюли берёт --dir-pill-ink, а не --dir. У направления «Сайты»
   #4A63E0 на подложке #ECF1FF давал контраст 4.478 — ниже порога WCAG AA 4.5.
   Притемнили ТОЛЬКО текст до #465ED8 → 4.83 (сам --dir не трогаем, он
   красит иконки/границы/градиенты, где порог не применяется).

   🔴 27.08.2026, Ф3: роль токена расширена с «пилюля» до «любой мелкий текст
   цветом направления по подложке направления» — прогон нашёл ту же цифру 4.48
   ещё у пяти мест (.u-eyebrow, .u-num, .ps-set, .rs-railtx, .here-tag).
   У «Ботов» пришлось завести своё значение: на подложке пилюли #F1ECFD
   #6D49CE давал 5.20 и правки не требовал, а на более плотной #E2DBF5
   (плашка «вы здесь») — 4.49. Минимальное притемнение #6A46CB → 4.68.
   Правило то же, что §1.8 WEB-СТАНДАРТА: заливка не трогается, темнеют чернила. */
.dir-sayty{--dir-pill-ink:#465ED8}
.dir-boty {--dir-pill-ink:#6A46CB}
.dir-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono,monospace);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dir-pill-ink,var(--dir));background:var(--dir-soft);border:1px solid var(--dir-line);
  border-radius:var(--r-pill);padding:6px 13px;margin-bottom:16px}
.dir-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--dir);flex:none}

/* ═══════════════════════ КАРКАС УНИКАЛЬНЫХ БЛОКОВ ═══════════════════════ */

.u-blk{position:relative;border-radius:var(--r,24px);background:var(--dir-soft);
  border:1px solid var(--dir-line);padding:clamp(22px,3.4vw,40px);overflow:hidden}
.u-blk .u-head{max-width:60ch;margin-bottom:clamp(20px,3vw,30px)}
.u-blk .u-eyebrow{font-family:var(--f-mono,monospace);font-size:var(--fs-label,.74rem);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dir-pill-ink,var(--dir));display:inline-flex;align-items:center;gap:9px;margin-bottom:12px}
.u-blk .u-eyebrow::before{content:'';width:22px;height:2px;background:var(--dir);opacity:.9}
.u-blk h3.u-title{font-weight:800;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.12;
  letter-spacing:-.02em;color:var(--c-ink,#061D29);margin:0}
.u-blk .u-sub{font-size:14.5px;line-height:1.55;color:var(--c-muted,#425D6D);margin:10px 0 0;max-width:56ch}

/* карточка-узел (общий жест: белый квадрат с иконкой, ховер scale/rotate) */
.u-node{background:#fff;border:1px solid var(--c-line,#E5E7EB);border-radius:var(--r-md);padding:16px}
.u-ico{width:40px;height:40px;border-radius:var(--r-sm);background:var(--dir-soft);display:flex;
  align-items:center;justify-content:center;color:var(--dir);flex:none;
  transition:transform .4s var(--spring,cubic-bezier(.34,1.4,.5,1))}
.u-ico svg{width:20px;height:20px}
.u-node:hover .u-ico,.u-step:hover .u-ico{transform:scale(1.1) rotate(-5deg)}
.u-num{font-family:var(--f-mono,monospace);font-weight:700;letter-spacing:-.02em;color:var(--dir-pill-ink,var(--dir))}

/* соединительная линия (пунктир направления) */
.u-conn{background-image:linear-gradient(90deg,var(--dir) 55%,transparent 0);
  background-size:9px 2px;background-repeat:repeat-x;height:2px;opacity:.5}
.u-conn.v{background-image:linear-gradient(180deg,var(--dir) 55%,transparent 0);
  background-size:2px 9px;background-repeat:repeat-y;width:2px;height:auto}

/* ── Reveal один проход (движок — uniq.js, getBoundingClientRect) ── */
html.uq .u-rise{opacity:0;transform:translateY(22px)}
html.uq .u-blk.in .u-rise{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
html.uq .u-blk.in .u-rise{transition-delay:calc(var(--i,0) * .07s)}

@media (prefers-reduced-motion:reduce){
  html.uq .u-rise{opacity:1!important;transform:none!important;transition:none!important}
}