:root{
  --ink:#000; --bg:#fff; --paper:#f1f2f4; --line:#d8dbe0; --text:#15171a; --muted:#596069;
  --accent:#ff9100; --accent-ink:#1b0f00; --link:#a85800; --bad:#b42318; --good:#15803d; --dark2:#17181b;
  --f-head:"Unbounded","Onest",system-ui,sans-serif; --f-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(16px,4vw,32px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font:400 17px/1.6 var(--f-body);color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{width:min(1160px,100% - 2*var(--gut));margin-inline:auto}
.wrap--narrow{max-width:520px}.wrap--mid{max-width:760px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:10px;border:2px solid transparent;font:600 16px/1.2 var(--f-body);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn--main{background:var(--accent);color:var(--accent-ink)}.btn--main:hover{background:#ffa733}
.btn--lg{min-height:54px;padding:14px 28px;font-size:18px}
.btn--line{border-color:#fff;color:#fff;background:transparent}.btn--line:hover{background:#fff;color:#000}
.btn--text{color:#fff;background:transparent}.btn--text:hover{color:var(--accent)}
.btn--ondark{color:#fff}
.btn--ondark2{border-color:var(--text);color:var(--text)}.btn--ondark2:hover{background:var(--text);color:#fff}

/* шапка */
.top{background:#000;position:sticky;top:0;z-index:50;border-bottom:1px solid #26272b}
.top__in{display:flex;align-items:center;gap:24px;min-height:68px}
.top__logo{display:block;line-height:0;flex-shrink:0}
.top__nav{display:flex;gap:22px;margin-left:auto}
.top__nav a{color:#d6d8dc;text-decoration:none;font-size:15px;font-weight:500}.top__nav a:hover{color:var(--accent)}
.top__acc{display:flex;gap:8px;margin-left:12px}
.top__acc .btn{min-height:40px;padding:8px 16px;font-size:15px}
@media(max-width:980px){.top__nav{display:none}.top__acc{margin-left:auto}}
@media(max-width:420px){.top__logo img{width:120px;height:auto}.top__acc .btn--text{display:none}}

.notice{background:#ecfdf3;color:#14532d;padding:12px 0;font-weight:500}.notice--err{background:#fef3f2;color:var(--bad)}

/* hero */
.hero{background:#000;color:#fff;padding:clamp(44px,8vw,96px) 0 0}
.hero__h{font:600 clamp(28px,4.6vw,56px)/1.12 var(--f-head);letter-spacing:-.02em;max-width:19em;margin:0 0 24px;text-wrap:balance}
.hero__lead{font-size:clamp(18px,2vw,22px);line-height:1.5;color:#e4e6ea;max-width:36em;margin:0 0 32px}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.coast{margin:clamp(44px,7vw,80px) 0 0;padding:0 0 28px}
.coast svg{width:100%;height:auto;display:block;overflow:visible}
.coast__line{stroke:#3a3c42;stroke-width:3}
.coast__run{stroke:var(--accent);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;animation:coast 2.2s .3s cubic-bezier(.5,0,.2,1) forwards}
.coast__dot circle{fill:#000;stroke:var(--accent);stroke-width:4}
.coast__t text{fill:#c9ccd2;font:500 17px var(--f-body)}
@keyframes coast{to{stroke-dashoffset:0}}
@media(max-width:640px){.coast__t text{font-size:22px}}
@media(prefers-reduced-motion:reduce){.coast__run{animation:none;stroke-dashoffset:0}html{scroll-behavior:auto}}

/* факты */
.facts{background:var(--accent);color:var(--accent-ink)}
.facts__row{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.facts__row p{margin:0;padding:20px 24px 20px 0;font-size:16px;line-height:1.45}
.facts__row p+p{padding-left:24px;border-left:2px solid rgba(27,15,0,.25)}
@media(max-width:820px){.facts__row{grid-template-columns:1fr}.facts__row p,.facts__row p+p{padding:14px 0;border-left:0}.facts__row p+p{border-top:2px solid rgba(27,15,0,.25)}}

/* секции */
.sec{padding:clamp(48px,7vw,96px) 0}.sec--paper{background:var(--paper)}
.h2{font:600 clamp(24px,3vw,36px)/1.2 var(--f-head);letter-spacing:-.015em;margin:0 0 24px;text-wrap:balance}
.h3{font:600 18px/1.3 var(--f-head);margin:0 0 14px}
.lead{font-size:19px;max-width:44em}
.fine{font-size:14px;line-height:1.5;color:var(--muted)}
.dim{color:var(--muted)}.r{text-align:right}

.about{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.about__txt p{max-width:34em;margin:0 0 1em}
.zones{width:100%;border-collapse:collapse}
.zones th,.zones td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.zones td{text-align:right;font-weight:700;white-space:nowrap}
@media(max-width:860px){.about{grid-template-columns:1fr}}

/* форма заказа */
.gate{background:#000;color:#e4e6ea;border-radius:14px;padding:22px 24px;margin:0 0 28px}
.gate p{margin:0 0 14px}.gate p:last-child{margin:0;display:flex;flex-wrap:wrap;gap:10px}
.gate .btn--ondark2{border-color:#fff;color:#fff}.gate .btn--ondark2:hover{background:#fff;color:#000}
.order{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,48px);align-items:start}
.form{background:#fff;border-radius:16px;padding:clamp(18px,3vw,32px)}
.fs{margin:0 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.fs__t{grid-column:1/-1;font:600 18px/1.3 var(--f-head);margin:0 0 2px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field--wide{grid-column:1/-1}
.field label{font-weight:600;font-size:15px}
input,select,textarea{font:inherit;color:var(--text);width:100%;min-height:48px;padding:10px 14px;border:1.5px solid #b9bec6;border-radius:10px;background:#fff}
input:focus,select:focus{border-color:#000;outline:3px solid var(--accent);outline-offset:0}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--accent)}
.check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer}
.check input{margin-top:3px;width:20px;height:20px;flex-shrink:0}
.seg{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.seg__i{position:relative;cursor:pointer}
.seg__i input{position:absolute;opacity:0;inset:0}
.seg__i span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:8px 12px;border:1.5px solid #b9bec6;border-radius:10px;font-weight:600;font-size:15px;line-height:1.3}
.seg__i input:checked+span{border-color:#000;background:#000;color:#fff;box-shadow:inset 0 -4px 0 var(--accent)}
.seg__i input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.form__go{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.form__go .fine{margin:0}
@media(max-width:640px){.fs{grid-template-columns:1fr}.seg{grid-template-columns:1fr}}
.calc{position:sticky;top:92px;background:#000;color:#fff;border-radius:16px;padding:24px}
.calc__h{font:600 16px/1.3 var(--f-head);margin:0 0 16px;color:#c9ccd2}
.calc__empty{margin:0 0 18px;color:#c9ccd2}
.calc__price{font:600 44px/1.05 var(--f-head);margin:0 0 6px;letter-spacing:-.02em;color:var(--accent)}
.calc__zone{margin:0 0 6px;font-size:18px;font-weight:600}
.calc__line{margin:0 0 6px;color:#c9ccd2}
.calc .fine{color:#a3a7ae}
.calc__list{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid #34363b;font-size:15px;color:#c9ccd2}
.calc__list li{padding:4px 0 4px 18px;position:relative}
.calc__list li:before{content:"";position:absolute;left:0;top:.8em;width:8px;height:2px;background:var(--accent)}
@media(max-width:940px){.order{grid-template-columns:1fr}.calc{position:static;order:-1}}

/* подсказки адреса и окно карты (addr.js) */
.addr{position:relative}
.sugg{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:0 10px 30px #0003;display:none;max-height:280px;overflow:auto}
.sugg div{padding:10px 14px;cursor:pointer;font-size:15px;border-bottom:1px solid var(--line)}.sugg div:hover{background:var(--paper)}
.sugg .warn{color:#8a4b00}.sugg .hint{color:var(--muted);cursor:default}
.mapbtn{align-self:flex-start;margin-top:4px;background:none;border:0;color:var(--link);font:600 14px var(--f-body);padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pinmark{color:var(--good);font-weight:500}
.mp-wrap{position:fixed;inset:0;background:#000a;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
.mp{background:#fff;border-radius:14px;width:min(900px,100%);display:flex;flex-direction:column;overflow:hidden}
.mp-head{padding:14px 18px}.mp-map{height:min(60vh,520px)}
.mp-foot{display:flex;gap:10px;align-items:center;padding:12px 18px}.mp-foot .sp{flex:1}
.mp-foot button{min-height:44px;padding:8px 18px;border-radius:10px;border:2px solid #000;font:600 15px var(--f-body);cursor:pointer;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mp-foot button.ghost{background:#fff;color:#000;border-color:#000}.mp-foot button:disabled{opacity:.4;cursor:default}
.muted{color:var(--muted)}.small{font-size:14px}

/* как работаем */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.steps li{counter-increment:s;position:relative;padding-top:56px}
.steps li:before{content:counter(s);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:#000;color:var(--accent);display:grid;place-items:center;font:600 16px var(--f-head);z-index:1}
.steps li:after{content:"";position:absolute;top:19px;left:40px;right:-24px;height:2px;background:var(--line)}
.steps li:last-child:after{display:none}
.steps h3{font:600 17px/1.3 var(--f-head);margin:0 0 8px}
.steps p{margin:0;font-size:15.5px;line-height:1.55;color:#363a40}
@media(max-width:980px){.steps{grid-template-columns:1fr;gap:0}.steps li{padding:0 0 26px 60px;min-height:70px}.steps li:after{top:40px;bottom:0;left:19px;right:auto;width:2px;height:auto}.steps li:last-child{padding-bottom:0}}

/* сравнение транспорта */
.cmp-wrap{overflow-x:auto;margin-top:28px}
.cmp{width:100%;min-width:720px;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45}
.cmp thead th{font:600 15px/1.3 var(--f-body);background:#fff;vertical-align:bottom}
.cmp thead th span{font-weight:500;font-size:13px}
.cmp tbody th{font-weight:600;width:19%}
.cmp .cmp__us{background:#000;color:#fff;border-bottom-color:#2a2b2f}
.cmp thead .cmp__us{border-top:5px solid var(--accent)}
.cmp thead .cmp__us span{color:var(--accent)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* вопросы, отзывы */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 36px 18px 0;font-weight:600;font-size:18px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:50%;translate:0 -50%;font:500 26px/1 var(--f-body);color:var(--link);transition:rotate .2s}
.faq details[open] summary:after{rotate:45deg}
.faq details p{margin:0 0 18px;max-width:40em;color:#363a40}
.rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.rev figure{margin:0;background:#fff;border-radius:14px;padding:22px}
.rev blockquote{margin:0 0 14px;font-size:17px;line-height:1.55}.rev figcaption{font-weight:600;font-size:15px;color:var(--muted)}

/* вход, регистрация, кабинет */
.auth .lead{margin:0 0 24px}
.form--auth{display:flex;flex-direction:column;gap:16px;border:1.5px solid var(--line);margin-bottom:18px}
.err{background:#fef3f2;color:var(--bad);padding:12px 16px;border-radius:10px;font-weight:600;margin:0 0 16px}
.cab__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.cab__head .h2{margin-bottom:4px}
.cab__pack{margin-left:16px}
.cab__h{margin-top:40px}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:640px}
.tbl th,.tbl td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);text-align:left;font-size:15.5px;vertical-align:top}
.tbl th{font-weight:600;color:var(--muted);font-size:14px}.tbl .r{text-align:right}
.empty{color:var(--muted)}
.st{display:inline-block;padding:3px 10px;border-radius:99px;background:var(--paper);font:600 14px/1.4 var(--f-body);vertical-align:middle}
.st--new,.st--assigned{background:#fff1d9;color:#7a4300}.st--delivered{background:#dcfce7;color:#14532d}.st--cancelled{background:#eee;color:#555}
.st--accepted,.st--at_pickup,.st--picked_up,.st--at_stop,.st--at_drop{background:#e0efff;color:#0b3d78}
.kv{display:grid;grid-template-columns:150px 1fr;gap:0;margin:0 0 28px}
.kv dt,.kv dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}.kv dt{color:var(--muted);font-size:15px}
@media(max-width:560px){.kv{grid-template-columns:1fr}.kv dt{border:0;padding-bottom:0}}
.prose p{max-width:40em}.prose .h3{margin-top:28px}

/* подвал */
.foot{background:#000;color:#c9ccd2;padding:clamp(40px,6vw,72px) 0 24px;font-size:15.5px}
.foot a{color:#fff}.foot a:hover{color:var(--accent)}
.foot p{margin:0 0 8px}
.foot__grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr 1.3fr;gap:32px}
.foot__lead{margin-top:16px;max-width:22em}
.foot__h{font:600 15px/1.3 var(--f-body);color:#fff;margin:0 0 12px}
.foot__tel{font:600 22px var(--f-head);text-decoration:none}
.foot__dim{color:#8d9199}
.foot__copy{margin-top:36px;padding-top:20px;border-top:1px solid #26272b;font-size:13.5px;color:#8d9199}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}}

.matrix-wrap{overflow-x:auto;margin-bottom:10px}
.matrix{border-collapse:collapse;width:100%;min-width:420px;font-size:14.5px}
.matrix th,.matrix td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.matrix thead th{font-weight:600;color:var(--muted);font-size:13px;vertical-align:bottom}
.matrix tbody th{text-align:left;font-weight:600}
.matrix td{font-weight:600}
.kmline{margin:10px 0 6px;padding:10px 12px;background:#000;color:#fff;border-radius:10px;font-size:15px}.kmline b{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
