/* Направления деятельности: блок «Направления» на главной и шесть страниц направлений
   (макет заказчика «сst-vibekod»). Всё заскоуплено под .dirs-sec и .dir-page — в
   глобальном style.css уже заняты .card/.grid/.info/.note и другие короткие имена, без
   скоупа вёрстка поехала бы на каталоге и тарифах. Переменные с префиксом --dir-,
   акцент — брендовый #11AE88, как в home-hero.css и how-it-works.css. */

.dirs-sec,
.dir-page{
    --dir-green:#11AE88; --dir-green-d:#0E9476; --dir-green-dd:#0b7a5b;
    --dir-ink:#16241f; --dir-soft:#5b6b64; --dir-mut:#8b9a93;
    --dir-line:#e6ece9; --dir-bg-soft:#f5f9f7;
    font-family:'Inter','Segoe UI',system-ui,sans-serif;
    color:var(--dir-ink);
    -webkit-font-smoothing:antialiased;
}
.dirs-sec *,
.dir-page *{ box-sizing:border-box; }

/* ─────────── блок «Направления» на главной ─────────── */

.dirs-sec{ padding:56px 0 8px; scroll-margin-top:100px; }
.dirs-sec-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:24px;
    flex-wrap:wrap; margin-bottom:26px;
}
.dirs-sec-head h2{ font-size:36px; font-weight:800; letter-spacing:-.025em; margin:0; }
.dirs-sec-head span{ font-size:15px; color:var(--dir-mut); }
.dirs-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.dirs-card{
    display:block; border:1px solid var(--dir-line); border-radius:16px; padding:24px 26px;
    background:#fff; color:var(--dir-ink); text-decoration:none;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dirs-card:hover{
    border-color:var(--dir-green); color:var(--dir-ink);
    box-shadow:0 14px 30px -18px rgba(17,174,136,.55); transform:translateY(-2px);
}
.dirs-card h3{ font-size:19px; font-weight:700; letter-spacing:-.015em; margin:0 0 8px; }
.dirs-card p{ font-size:14.5px; line-height:1.5; color:var(--dir-soft); margin:0; }
.dirs-card-note{
    display:block; margin-top:14px; padding-top:12px; border-top:1px solid #eef4f1;
    font-size:13.5px; line-height:1.45; color:var(--dir-mut);
}
.dirs-card-go{
    display:inline-flex; align-items:center; gap:6px; margin-top:12px;
    font-size:13.5px; font-weight:700; color:var(--dir-green-dd);
}

/* ─────────── страница направления ─────────── */

.dir-page{ padding:28px 0 72px; }
.dir-hero{
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:44px;
    align-items:start; padding:6px 0 48px;
}
.dir-title{ font-size:40px; font-weight:800; line-height:1.1; letter-spacing:-.03em; margin:0 0 18px; }
.dir-intro p{ font-size:16.5px; line-height:1.6; color:var(--dir-soft); margin:0 0 14px; }
.dir-intro p:last-child{ margin-bottom:0; }

.dir-form{
    background:var(--dir-bg-soft); border:1px solid var(--dir-line); border-radius:18px;
    padding:26px 26px 24px; display:flex; flex-direction:column; gap:10px;
}
.dir-form h2{ font-size:20px; font-weight:700; letter-spacing:-.015em; margin:0 0 4px; }
.dir-form label{ font-size:13.5px; font-weight:600; color:var(--dir-soft); }
.dir-form input,
.dir-form select,
.dir-form textarea{
    width:100%; height:50px; padding:0 15px; background:#fff; color:var(--dir-ink);
    border:1px solid #d7e5df; border-radius:12px; font-family:inherit; font-size:15px;
}
.dir-form textarea{ height:84px; padding:12px 15px; line-height:1.45; resize:vertical; }
/* Стрелку выпадающего списка оставляю системную: своя потребовала бы отдельной иконки
   и абсолютного позиционирования, как в .tender-modal-col, а список здесь один. */
.dir-form select{ padding-right:10px; }
.dir-form input:focus,
.dir-form select:focus,
.dir-form textarea:focus{ outline:none; border-color:var(--dir-green); }
.dir-form button{
    height:52px; margin-top:6px; border:0; border-radius:12px; cursor:pointer;
    background:var(--dir-green); color:#fff; font-family:inherit; font-size:15.5px; font-weight:700;
    transition:background .15s ease;
}
.dir-form button:hover{ background:var(--dir-green-d); }
.dir-form-note{ font-size:13px; line-height:1.5; color:var(--dir-soft); margin:2px 0 0; }
.dir-form-link{ color:var(--dir-green); font-weight:600; text-decoration:none; }
.dir-form-link:hover{ text-decoration:underline; }

.dir-sec{ padding:0 0 48px; }
.dir-sec h2{ font-size:28px; font-weight:800; letter-spacing:-.025em; margin:0 0 22px; }
.dir-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.dir-card{ border:1px solid var(--dir-line); border-radius:16px; padding:22px 24px; background:#fff; }
.dir-card h3{ font-size:17.5px; font-weight:700; letter-spacing:-.015em; margin:0 0 8px; }
.dir-card-lead{ font-size:14.5px; line-height:1.5; color:var(--dir-soft); margin:0 0 12px; }
.dir-card ul{ margin:0; padding-left:18px; }
/* В глобальном style.css маркеры списков сняты (`ul li{list-style:none}`) - здесь
   перечень позиций без маркеров читается как сплошной текст, возвращаю их. */
.dir-card li{ list-style:disc; font-size:14.5px; line-height:1.5; color:var(--dir-mut); margin-bottom:5px; }
.dir-card li:last-child{ margin-bottom:0; }

/* Глобальный style.css оформляет ЛЮБУЮ таблицу как сравнение КП: отступ сверху 100px,
   тень, рамка, серая чётная строка и зелёная последняя. Для таблицы «что указать
   в заявке» всё это снимаю - она простая, в две колонки. */
.dir-table{ width:100%; border-collapse:collapse; margin:0; border:0; border-radius:0; box-shadow:none; }
.dir-table tr{ background:none; }
.dir-table td{ width:auto; border:0; border-bottom:1px solid var(--dir-line);
    padding:14px 16px; font-size:15.5px; line-height:1.5; }
.dir-table td:first-child{ width:34%; font-weight:700; color:var(--dir-ink); }
.dir-table td:last-child{ color:var(--dir-soft); }
.dir-table tr:last-child td{ border-bottom:0; }
.dir-note{ font-size:15.5px; line-height:1.6; color:var(--dir-soft); margin:18px 0 0; max-width:88ch; }

.dir-help{ background:var(--dir-bg-soft); border-radius:18px; padding:28px 32px; }
.dir-help h2{ font-size:21px; margin:0 0 8px; }
.dir-help p{ font-size:15.5px; line-height:1.55; color:var(--dir-soft); margin:0; max-width:78ch; }

.dir-other h2{ font-size:21px; margin:0 0 16px; }
.dir-other-list{ display:flex; flex-wrap:wrap; gap:10px; }
.dir-other-list a{
    border:1px solid var(--dir-line); border-radius:12px; padding:11px 16px;
    font-size:14.5px; font-weight:600; color:var(--dir-ink); text-decoration:none;
    transition:border-color .15s ease, color .15s ease;
}
.dir-other-list a:hover{ border-color:var(--dir-green); color:var(--dir-green-dd); }

@media (max-width:1100px){
    .dirs-grid,
    .dir-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
    .dir-hero{ grid-template-columns:1fr; gap:28px; padding-bottom:36px; }
    .dir-title{ font-size:32px; }
    .dirs-sec-head h2{ font-size:28px; }
}
@media (max-width:640px){
    .dirs-grid,
    .dir-grid{ grid-template-columns:1fr; }
    .dirs-sec{ padding-top:36px; }
    .dir-title{ font-size:27px; }
    .dir-sec h2{ font-size:23px; }
    .dir-table td{ padding:12px 10px; font-size:14.5px; }
    .dir-table td:first-child{ width:40%; }
    .dir-help{ padding:22px 20px; }
}