@font-face{font-family:'Geologica';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geologica-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Geologica';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geologica-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fira-mono-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fira-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* v1 «Маршрут» · taste-skill · wayfinding: one orange line runs through the page, sections are its stops */
:root{--bg:#f6f4ee;--alt:#ece8dd;--ink:#16202b;--muted:#4f5a66;--line:#cfc9ba;--accent:#c2410c;--accent2:#9a3412;--on:#fff;
  --sans:Geologica,system-ui,sans-serif;--mono:"Fira Mono",ui-monospace,monospace;--gut:80px;--rail:2px}
@media(max-width:1023px){:root{--gut:40px}}@media(max-width:639px){:root{--gut:20px}}
*{box-sizing:border-box}html,body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:16px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,96px);font-weight:800;max-width:14ch}
h2{font-size:clamp(32px,4vw,56px)}h3{font-size:19px;line-height:1.3;letter-spacing:-.01em;font-weight:600}
p{margin:0 0 16px;max-width:62ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tag,.kicker,.stop,.pill,dt{font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tag{display:inline-flex;align-items:center;gap:10px;color:var(--accent);margin-bottom:18px}
.tag::before{content:"";width:12px;height:12px;border-radius:50%;border:3px solid currentColor}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* header: items sit low, leaving the top-right corner for the variant menu */
.top{padding-top:48px}.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:16px;background:linear-gradient(var(--ink),var(--ink)) 50% 100%/calc(100% - 2 * var(--gut)) var(--rail) no-repeat}
.logo{display:inline-flex;align-items:center;gap:10px;font:800 24px var(--sans);color:var(--ink);text-decoration:none;letter-spacing:.02em}
.dot{width:14px;height:14px;border-radius:50%;background:var(--accent)}
.top nav{display:flex;gap:28px;font-size:15px;font-weight:500}
@media(max-width:860px){.top nav{display:none}}
.link{color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s}
.link:hover{background-size:100% 1.5px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font:600 16px var(--sans);text-decoration:none;transition:transform .15s,background .15s;flex:none}
.btn--primary{background:var(--accent);color:var(--on)}.btn--primary:hover{transform:translateY(-2px);background:var(--accent2)}.btn:active{transform:translateY(1px) scale(.98)}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(3px)}
@media(max-width:639px){.btn{width:100%}}

/* hero: headline, lead with action, then the route itself across the full wrap */
.hero{min-height:calc(100svh - 110px);display:flex;align-items:center;padding:56px 0}.hero>.wrap{width:100%}
.kicker{color:var(--muted);margin:0 0 24px}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin:36px 0 56px}
.hero-row .lead{font-size:clamp(18px,1.5vw,21px);margin:0;max-width:56ch}
@media(max-width:860px){.hero-row{flex-direction:column;align-items:stretch;gap:28px}}
.routemap{display:block;width:100%;height:auto}
.track{stroke:var(--line);stroke-width:10;stroke-linecap:round;fill:none}
.run{stroke:var(--accent);stroke-width:10;stroke-linecap:round;fill:none;stroke-dasharray:870;stroke-dashoffset:870;animation:draw 2.4s .3s cubic-bezier(.6,0,.2,1) forwards}
.node{fill:var(--bg);stroke:var(--ink);stroke-width:4}.hub{fill:var(--ink);stroke:var(--bg);stroke-width:5}
.end{font:600 26px var(--sans);fill:var(--ink)}
@media(max-width:639px){.end{font-size:48px}.routemap{margin-top:8px}}
@keyframes draw{to{stroke-dashoffset:0}}

.sec{padding:112px 0}.sec--alt{background:var(--alt)}
.sec--ink{background:var(--ink);color:var(--bg)}.sec--ink .tag{color:#f59e6b}
@media(max-width:639px){.sec{padding:72px 0}}
.sec-head{margin-bottom:48px}.sec-head h2{margin-bottom:20px}.sec-head p{color:var(--muted);font-size:19px}

/* steps: a vertical transit line, stops alternate sides on wide screens */
.metro{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:96px}
.metro::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:6px;margin-left:-3px;background:var(--accent);border-radius:3px}
.metro li{position:relative;padding:18px 0 30px;grid-column:1;text-align:right}
.metro li:nth-child(even){grid-column:2;text-align:left;margin-top:-34px}
.metro li::after{content:"";position:absolute;top:22px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:5px solid var(--ink);box-sizing:border-box;transition:transform .2s}
.metro li:nth-child(odd)::after{right:-59px}.metro li:nth-child(even)::after{left:-59px}
.metro li:hover::after{transform:scale(1.2)}
.metro .stop{display:block;color:var(--accent);margin-bottom:8px}
.metro h3{font-size:clamp(18px,1.6vw,22px)}
.terminus{margin:40px auto 0;text-align:center;font-size:clamp(19px,1.8vw,24px);font-weight:600;max-width:46ch}
@media(max-width:760px){
  .metro{grid-template-columns:1fr;padding-left:44px}
  .metro::before{left:9px}
  .metro li,.metro li:nth-child(even){grid-column:1;text-align:left;margin-top:0;padding:10px 0 20px}
  .metro li:nth-child(odd)::after,.metro li:nth-child(even)::after{left:-46px;top:12px}
  .terminus{text-align:left;margin-left:0}
}

/* compare: two lines side by side, WAAO is the solid one */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:48px}.cols2 p{margin:0}
@media(max-width:760px){.cols2{grid-template-columns:1fr;gap:16px}}
.lines{width:100%;border-collapse:collapse}
.lines th,.lines td{text-align:left;vertical-align:top;padding:20px 24px 20px 0}
.lines thead th{padding-bottom:16px}
.lines tbody th{font-weight:600;width:22%}
.lines tbody tr{border-top:1px solid var(--line)}
.lines td:nth-child(2){color:var(--muted);width:34%;border-left:4px dashed var(--line);padding-left:20px}
.lines td:nth-child(3){border-left:6px solid var(--accent);padding-left:20px;font-weight:500}
.pill{display:inline-block;padding:8px 14px;border-radius:999px}
.pill--old{border:2px dashed var(--muted);color:var(--muted)}.pill--new{background:var(--accent);color:var(--on)}
@media(max-width:760px){
  .lines thead{display:none}.lines,.lines tbody,.lines tr,.lines th,.lines td{display:block;width:auto}
  .lines tbody th{padding:20px 0 8px;width:auto}.lines td{padding:6px 0 6px 16px;margin-bottom:8px}
  .lines td:nth-child(2)::before{content:"Обычное карго: "}.lines td:nth-child(3)::before{content:"WAAO: ";color:var(--accent)}
  .lines td:nth-child(2){width:auto}
}

/* advantages: sticky heading on the left, seven stations on a rail */
.split{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
.aside{position:sticky;top:32px}.aside h2{margin-bottom:24px}.aside p{color:var(--muted)}
@media(max-width:1023px){.split{grid-template-columns:1fr;gap:40px}.aside{position:static}}
.stations{list-style:none;margin:0 0 0 18px;padding:0;border-left:var(--rail) solid var(--ink)}
.stations li{position:relative;padding:0 0 44px 48px}
.stations li:last-child{padding-bottom:0}
.stations .stop{position:absolute;left:-19px;top:-4px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on);display:grid;place-items:center;font-size:15px}
.stations h3{font-size:clamp(20px,1.8vw,24px);margin-bottom:14px}
.stations p{color:var(--muted)}.stations .res{color:var(--ink);margin:0;padding-top:12px;border-top:1px dashed var(--line)}
@media(max-width:639px){.stations li{padding-left:32px}}

/* audience: departure tickets */
.tickets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tickets li{display:flex;gap:14px;align-items:flex-start;padding:24px;background:var(--bg);border-radius:14px;border-left:6px solid var(--accent);font-weight:500;transition:transform .2s}
.tickets li:hover{transform:translateY(-2px)}
.tickets svg{width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--accent);stroke-width:2.4}
@media(max-width:1023px){.tickets{grid-template-columns:1fr 1fr}}@media(max-width:639px){.tickets{grid-template-columns:1fr}}

/* docs */
.checks{list-style:none;margin:0;padding:0}
.checks li{position:relative;padding:20px 0 20px 48px;border-top:1px solid var(--line);font-size:18px}
.checks li:last-child{border-bottom:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:0;top:20px;width:26px;height:26px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center/18px no-repeat}
.note{font-size:15px;padding-left:16px;border-left:3px solid var(--accent)}

/* contacts: the terminus */
.sec--ink h2{margin-bottom:48px}
.ct{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;border-top:var(--rail) solid var(--bg)}
.ct div{padding:24px 24px 0 0}.ct dt{color:#b8b2a4;margin-bottom:12px}.ct dd{margin:0;font-size:22px;font-weight:600}
@media(max-width:860px){.ct{grid-template-columns:1fr 1fr;row-gap:24px}}

.foot{padding:28px 0;font-size:14px;color:var(--muted)}.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.run{stroke-dashoffset:0}}