/* ============================================================
   ПРИЗЫВ НАПРАВЛЕНИЯ (28.09.2026): карточка в духе «точки назначения»
   главной, но с заливкой цвета направления слева.
   ============================================================ */
.dirk__card{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
  overflow:hidden;
  border-radius:var(--r-card);
  background:var(--surface);
  box-shadow:0 2px 6px rgba(13,15,32,.06), 0 30px 70px -30px rgba(var(--accent-rgb), .45);
}
.dirk__main{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(28px, 3vw, 56px);
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    linear-gradient(150deg, var(--accent-1), var(--accent-dark));
  color:#fff;
}
.dirk__main .eyebrow{ color:rgba(255,255,255,.75); }
.dirk__title{
  margin:6px 0 clamp(12px, 1.2vw, 18px);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(26px, 2.6vw, 44px); line-height:1.08;
  letter-spacing:-.02em; text-transform:uppercase;
}
/* на заливке цвета направления светлая пара (--accent-2) того же тона и не читается —
   акцент даём белым потише */
.dirk__title em{ font-style:normal; color:rgba(255,255,255,.66); }
.dirk__lead{ margin:0 0 clamp(20px, 2vw, 30px); max-width:34rem; font-size:clamp(15px, 1.08vw, 18px); line-height:1.55; color:rgba(255,255,255,.86); }
/* на цветной заливке кнопка белая */
.dirk__main .btn--fill{ align-self:flex-start; background:#fff; color:var(--accent-1); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.dirk__contacts{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; margin-top:clamp(20px, 2vw, 28px); }
.dirk__phone{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px, 1.6vw, 26px); color:#fff; text-decoration:none; font-variant-numeric:tabular-nums; }
.dirk__link{ font-size:clamp(14px, 1vw, 16px); color:rgba(255,255,255,.86); text-decoration:none; }
.dirk__phone:hover, .dirk__link:hover{ color:var(--accent-2); }

.dirk__next{ padding:clamp(28px, 3vw, 56px); }
.dirk__cap{ margin:0 0 clamp(16px, 1.6vw, 24px); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); }
.dirk__steps{ list-style:none; margin:0; padding:0; counter-reset:dk; display:grid; gap:clamp(16px, 1.6vw, 24px); }
.dirk__steps li{ position:relative; padding-left:48px; counter-increment:dk; }
.dirk__steps li::before{
  content:counter(dk, decimal-leading-zero);
  position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font:600 13px/1 var(--font); color:var(--accent-1); background:var(--accent-wash);
}
.dirk__steps b{ display:block; font:600 clamp(16px, 1.15vw, 19px)/1.3 var(--font); color:var(--fg); }
.dirk__steps span{ display:block; margin-top:4px; font-size:clamp(14px, .95vw, 15.5px); line-height:1.5; color:var(--fg-lead); }

@media (max-width: 900px){ .dirk__card{ grid-template-columns:minmax(0, 1fr); } }

/* 29.09.2026: стеклянный самолётик (c.art / c.video). Снят на чёрном — screen
   убирает чёрное, стекло светится поверх заливки. Стоит справа внизу, за текстом. */
.dirk__art{
  position:absolute; z-index:-1; right:-4%; bottom:-6%;
  width:min(62%, 440px); aspect-ratio:4 / 3;
  mix-blend-mode:screen; opacity:.9; pointer-events:none;
}
.dirk__art img, .dirk__art .img-video{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 900px){ .dirk__art{ width:70%; opacity:.5; } }
/* 02.10.2026: на странице сайтов окно-предмет наезжало на длинный абзац — с картинкой абзац уже */
@media (min-width: 901px){ .dirk__main:has(.dirk__art) .dirk__lead{ max-width:24rem; } }
/* на телефоне предмет наезжал на телефон и почту — встаёт в поток над заголовком */
@media (max-width: 600px){
  .dirk__art{ position:relative; right:auto; bottom:auto; display:block; width:62%; margin:-8px auto 4px; opacity:.95; }
}