/* Концепт «Шлях A1→C2»: звивиста дорога рівнів малюється під час прокрутки, по ній їде розетка; на зупинках — що ви вмієте. */
.c-shliakh { --night: #0f1a3d; --ink: #10172a; --paper: #f6f2ea; --red: #c01a1a; --gold: #f1b711; --sky: #68b8e8; background: var(--paper); color: var(--ink); }
.c-shliakh { --lead-accent: #213467; }
.sh-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(16px, 4vw, 48px); background: rgba(246, 242, 234, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sh-logo { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.sh-logo .rosette { width: 30px; height: 30px; }
.sh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: 999px; background: var(--night); color: #fff; font-weight: 700; text-decoration: none; transition: transform .25s var(--ease), background .25s; }
.sh-btn:hover { transform: translateY(-2px); background: #213467; }
.sh-btn-sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.sh-btn-red { background: var(--red); }
.sh-btn-red:hover { background: #9f1313; }
.sh-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }

.sh-hero { max-width: 1100px; margin: 0 auto; padding: clamp(48px, 9vw, 128px) clamp(16px, 4vw, 48px) clamp(32px, 5vw, 64px); text-align: center; display: grid; justify-items: center; }
.sh-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5d667e; }
.sh-hero h1 { margin-top: 16px; font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6.4rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; text-wrap: balance; }
.sh-hero h1 em { font-family: var(--serif); font-weight: 500; color: var(--red); letter-spacing: -.02em; }
.sh-sub { margin-top: 22px; max-width: 36rem; font-size: 1.15rem; color: #39435e; }
.sh-hero .sh-actions { justify-content: center; }

/* дорога */
.sh-path { position: relative; max-width: 1100px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 48px) 80px; }
.sh-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.sh-base { fill: none; stroke: #d9d1c1; stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.sh-done { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; }
.sh-marker { position: absolute; left: 0; top: 0; z-index: 3; width: 56px; height: 56px; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(16, 23, 42, .3)); will-change: transform; }
.sh-marker .rosette { width: 100%; height: 100%; }
.sh-stops { position: relative; z-index: 2; display: grid; gap: clamp(60px, 10vw, 140px); }
.sh-stop { position: relative; display: grid; grid-template-columns: 1fr; padding-left: 64px; }
.sh-node { position: absolute; left: 22px; top: 34px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 4px solid #cfc6b4; transform: translate(-50%, -50%); transition: border-color .4s, background .4s, transform .5s var(--ease); }
.sh-stop.reached .sh-node { border-color: var(--red); background: var(--red); transform: translate(-50%, -50%) scale(1.25); }
.sh-card { padding: 26px 24px; background: #fff; border-radius: 6px; box-shadow: 0 18px 40px rgba(16, 23, 42, .08); opacity: .45; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sh-stop.reached .sh-card { opacity: 1; transform: none; }
.sh-lv { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--night); }
.sh-stop:nth-child(n+3) .sh-lv { color: #086DAE; }
.sh-stop:nth-child(n+5) .sh-lv { color: var(--red); }
.sh-group { margin-top: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5d667e; }
.sh-text { margin-top: 12px; color: #39435e; font-size: 1.0625rem; }
@media (min-width: 860px) {
  .sh-stop { grid-template-columns: 1fr 1fr; padding-left: 0; }
  .sh-stop .sh-card { grid-column: 1; margin-right: 72px; }
  .sh-stop.right .sh-card { grid-column: 2; margin: 0 0 0 72px; }
  .sh-node { left: 50%; top: 40px; }
  .sh-stop .sh-node { left: calc(50% - 36px); }
  .sh-stop.right .sh-node { left: calc(50% + 36px); }
}

.sh-end { max-width: 900px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) clamp(16px, 4vw, 48px); text-align: center; display: grid; justify-items: center; }
.sh-end h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.sh-end > p { margin-top: 18px; max-width: 34rem; color: #39435e; font-size: 1.125rem; }
.sh-end .sh-actions { justify-content: center; }
.sh-note { font-size: .9375rem !important; color: #5d667e !important; margin-top: 24px !important; }

.sh-courses { display: grid; background: var(--night); }
.sh-courses a { display: grid; gap: 6px; padding: 30px clamp(16px, 4vw, 48px); color: #fff; text-decoration: none; border-top: 6px solid var(--c); transition: background .3s; }
.sh-courses a:hover { background: rgba(255, 255, 255, .06); }
.sh-courses b { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.03em; }
.sh-courses span { color: #b9c3dc; font-size: .9375rem; }
@media (min-width: 900px) { .sh-courses { grid-template-columns: repeat(4, 1fr); } }