/* === Оформление маршрутных страниц по Impeccable (polish) + Taste Skill (redesign) — 28.09.2026, одобрено Дмитрием кнопкой «Нравится — на все маршруты» ===
   Сохранено: логотип, бронза #b08d57, шрифты Ubuntu/Circe, тёмный фон, все тексты и ссылки.
   Меняется только подача. */

:root{--gold:#b08d57;--gold-hi:#c9a56b;--ink:#131316;--ink2:#1b1b1f;--line:#2c2c31;--grey:#a9a9b0;--ease-out:cubic-bezier(.16,1,.3,1)}
body{background:var(--ink2);text-rendering:optimizeLegibility}

/* поверхности браузера — в цветах бренда (craft-floor: «browser surfaces») */
::selection{background:var(--gold);color:#111}
html{scrollbar-color:#3a3a40 var(--ink2);accent-color:var(--gold)}
input{caret-color:var(--gold)}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* типографика: крупнее и плотнее заголовки, ровные переносы, ширина строки */
h1,h2,h3{text-wrap:balance}
p,.lede,.card p,details .a{text-wrap:pretty}
h1{font-size:clamp(34px,5.2vw,58px);line-height:1.06;letter-spacing:-.022em;font-weight:700;margin-bottom:22px}
h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.015em;line-height:1.15;margin-bottom:14px}
.lede{max-width:68ch}
section{padding:88px 0 80px}                 /* сверху больше, чем снизу — оптически ровно */
section h2{margin-top:0}

/* hero: слева, а не по центру; лид — без толстой бронзовой полосы */
.hero{text-align:left;padding:120px 0 96px}
.hero .wrap{max-width:1160px}
.hero h1{max-width:22ch}
.hero .lede{border-left:0 !important;padding-left:0 !important;margin:0 0 34px !important;max-width:60ch !important;font-size:19px !important;color:#dcdce0 !important}
.crumbs{margin-bottom:28px;letter-spacing:.01em}

/* единственная анимация по смыслу: линия маршрута прочерчивается под заголовком, как рейс */
.route-line{display:flex;align-items:center;gap:12px;margin:0 0 30px;color:var(--grey);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.route-line i{position:relative;flex:0 1 220px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(176,141,87,.35));transform-origin:left;
  animation:route 1.1s var(--ease-out)}   /* без задержки и без fill:both — если анимация не запустится, линия видна сразу */
.route-line i::after{content:'';position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--gold);
  animation:dot 1.3s var(--ease-out)}
@keyframes route{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dot{0%,80%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}

/* кнопка: живое наведение и нажатие */
.btn{border-radius:8px;padding:17px 36px;transition:background-color .18s var(--ease-out),transform .18s var(--ease-out),box-shadow .18s var(--ease-out);
  box-shadow:0 8px 24px -10px rgba(176,141,87,.55)}
.btn:hover{background:var(--gold-hi);transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(176,141,87,.65)}
.btn:active{transform:translateY(1px);box-shadow:0 4px 12px -8px rgba(176,141,87,.6)}

/* факты: числа ровными столбцами, мягче сетка */
.facts{border-radius:12px;overflow:hidden}
.fact{padding:26px 24px;background:var(--ink)}
.fact .v{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:26px}
.fact .n{color:#9d9da4}

/* таблицы: тонкие линии, цифры столбцом */
td,th{font-variant-numeric:tabular-nums}
tr{transition:background-color .15s}
tbody tr:hover{background:rgba(255,255,255,.025)}

/* карточки: без рамки-коробки, глубина фоном */
.card{border:0;border-radius:12px;background:linear-gradient(180deg,#18181c,#141417);transition:transform .2s var(--ease-out),background-color .2s}
.card:hover{transform:translateY(-2px)}

/* вопросы-ответы */
details{border-radius:10px;border-color:var(--line);transition:border-color .2s}
details[open]{border-color:#3a3a40}
summary{transition:color .15s}
summary:hover{color:var(--gold-hi)}

/* заметка: вместо полосы слева — тихая подложка */
.note{border-left:0;padding:18px 20px;background:rgba(176,141,87,.07);border-radius:10px;color:#b9b9c0}

/* ссылки-плашки */
.links a{border-radius:999px;transition:border-color .15s,color .15s}

/* форма */
input{border-color:#5a5a62;border-radius:8px;transition:border-color .15s}
input:hover{border-color:#8a8a92}
input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,87,.18)}

@media(max-width:700px){
  .hero{padding:72px 0 60px}
  section{padding:56px 0 50px}
  .route-line i{flex-basis:120px}
}
@media (prefers-reduced-motion:reduce){
  .route-line i,.route-line i::after{animation:none}
  .btn,.card{transition:none}
  .btn:hover,.card:hover{transform:none}
}

/* hero маршрутных страниц: кнопки (DA-TOPCTA) и второй абзац стояли «по центру» (margin:0 auto),
   а заголовок и лид — слева; выравниваем всё по одному левому краю */
.hero .da-cta{margin:0 0 30px !important;max-width:none !important;justify-content:flex-start}
.hero .wrap > p:not(.lede){margin:0 0 30px;max-width:62ch;font-size:19px;color:#cfcfd4}
/* телефон: линия короче, подписи не рвутся посреди названия */
@media(max-width:700px){
  .route-line{flex-wrap:wrap;gap:6px 10px;font-size:12px;letter-spacing:.1em}
  .route-line span{white-space:nowrap}
  .route-line i{flex:0 0 36px}
}