/* ==========================================================================
   Такси и отдых — Сиверский · лендинг (Desktop 1440 / Mobile 390)
   ========================================================================== */

:root {
    --bg: #1B1B1D;
    --bg-dark: #111113;
    --card: #121212;
    --pink: #FE4F74;
    --violet: #A972FF;
    --grad: linear-gradient(90deg, #FE4F74 0%, #A972FF 100%);
    --line: rgba(255, 255, 255, .14);
    --text-2: rgba(255, 255, 255, .65);
    --text-3: rgba(255, 255, 255, .5);
    --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --pad: 50px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: #fff;
    font-family: var(--font);
    font-weight: 500;
    line-height: 1.219;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.show-m { display: none; }
[hidden] { display: none !important; }
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* ---------- Фоновые пятна ---------- */
.blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.sec .blobs {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px, #000 calc(100% - 240px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 240px, #000 calc(100% - 240px), transparent 100%);
}
.hero .blobs {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 240px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 240px), transparent 100%);
}
.blob {
    position: absolute;
    left: calc(50% - 720px + var(--x)); /* --x задан от левого края кадра 1440 px, стоящего по центру */
    top: var(--y);
    width: var(--w);
    height: var(--h);
    border-radius: 50%;
    background: var(--c);
    filter: blur(var(--b, 120px));
}

/* ---------- Секции ---------- */
.sec {
    position: relative;
    overflow: hidden;
    padding: 110px 0 var(--pb, 100px);
    background: var(--bg);
    scroll-margin-top: 0;
}

.sec-head { margin-bottom: var(--hg, 52px); }

.label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.label--dark { background: rgba(0, 0, 0, .55); }
.label__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad);
    flex: none;
}

.h2 {
    margin-top: 7px;
    font-size: 64px;
    font-weight: 700;
    text-transform: uppercase;
}
.h2--60 { font-size: 60px; }
.h2--72 { font-size: 72px; }

.lead {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-2);
}

.note {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .4);
}

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 30px;
    border: 1.5px solid transparent;
    border-radius: 29px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.219;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    transition: background-color .3s ease-out, box-shadow .3s ease-out, background-position .3s ease-out, background-size .3s ease-out, transform .3s ease-out;
}
.btn--primary {
    margin: 1.5px;
    background: var(--grad);
    background-size: 100% 100%;
    background-position: 0 0;
}
.btn--primary:hover {
    background-size: 150% 100%;
    background-position: 100% 0;
    box-shadow: 0 0 32px rgba(254, 79, 116, .55), 0 0 12px rgba(169, 114, 255, .45);
}
.btn--outline {
    border-color: rgba(255, 255, 255, .9);
    background: transparent;
}
.btn--outline:hover { background: rgba(255, 255, 255, .12); }
.btn:active { transform: translateY(1px); }
.btn--block { display: flex; width: 100%; }

/* ---------- Шапка ---------- */
.header {
    position: fixed;
    z-index: 50;
    top: 24px;
    left: 50%;
    width: min(1340px, calc(100% - 2 * var(--pad)));
    height: 80px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 16px 0 28px;
    border-radius: 40px;
    background: rgba(22, 22, 22, .8);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}
.header__logo img { width: 123px; height: auto; }
.header__nav {
    display: flex;
    justify-content: center;
    gap: 44px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}
.header__nav a {
    color: rgba(255, 255, 255, .75);
    transition: color .2s;
}
.header__nav a:hover { color: #fff; }
.header__actions { display: flex; align-items: center; gap: 8px; }
.btn--header {
    height: 60px;
    width: 150px;
    padding: 0;
    border-radius: 30px;
    border-width: 1px;
    font-size: 16px;
    line-height: 1.2;
}
.btn--taxi { width: 214px; margin-left: 18px; }
.btn--header:first-child { margin-right: 18px; }
.header__social {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #161616;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform .2s, box-shadow .2s;
}
.ico-vk { clip-path: circle(50%); }
.header__social svg { width: 18px; height: 18px; fill: currentColor; }
.header__social:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(255, 255, 255, .3); }
.header__burger { display: none; }

@media (min-width: 1300px) {
    .header__nav { justify-content: flex-start; margin-left: 259px; }
}

/* ---------- 00 · Первый экран ---------- */
.hero {
    position: relative;
    overflow: hidden;
    height: 900px;
    background: var(--bg);
}
.hero__stage {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
}
.hero__wheel {
    position: absolute;
    left: 50%;
    top: 110px;
    width: 600px;
    margin-left: -300px;
    mix-blend-mode: lighten;
    transition: transform .3s ease-out;
}
.hero__wheel img {
    width: 100%;
    height: auto;
    animation: wheel-sway 3s ease-in-out infinite alternate;
}
@keyframes wheel-sway {
    from { transform: translateY(0) rotate(-14deg); }
    to   { transform: translateY(40px) rotate(14deg); }
}

.chip {
    position: absolute;
    width: 170px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .18);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    cursor: default;
    transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), scale .35s var(--ease);
    animation: chip-in .8s var(--ease) var(--in, 1s) backwards, chip-float 2.2s ease-in-out var(--fl, 0s) infinite alternate;
}
.chip--1 { left: calc(50% - 300px); top: 268px; --in: 1.1s; --fl: 0s; }
.chip--2 { left: calc(50% + 140px); top: 258px; --in: 1.25s; --fl: -.7s; }
.chip--3 { left: calc(50% - 320px); top: 560px; --in: 1.4s; --fl: -1.4s; }
.chip--4 { left: calc(50% + 160px); top: 608px; --in: 1.55s; --fl: -2s; }
@keyframes chip-float {
    from { transform: translateY(0); }
    to   { transform: translateY(18px); }
}
/* подсветка при наведении */
.chip:hover {
    scale: 1.1;
    background: var(--grad);
    color: #fff;
    box-shadow: 0 0 40px rgba(254, 79, 116, .45), 0 0 90px rgba(169, 114, 255, .35);
}

/* ---------- Открывающая сцена ---------- */
.hero__wheel {
    animation: wheel-in 1.5s var(--ease) .1s backwards;
}
@keyframes wheel-in {
    from { opacity: 0; scale: .35; rotate: -120deg; filter: blur(14px); }
    60%  { opacity: 1; }
    to   { opacity: 1; scale: 1; rotate: 0deg; filter: blur(0); }
}
@keyframes chip-in {
    from { opacity: 0; scale: .5; filter: blur(8px); }
    to   { opacity: 1; scale: 1; filter: blur(0); }
}
@keyframes rise-in {
    from { opacity: 0; translate: 0 36px; }
    to   { opacity: 1; translate: 0 0; }
}
.header { animation: header-in .9s var(--ease) .2s backwards; }
@keyframes header-in {
    from { opacity: 0; translate: 0 -30px; }
    to   { opacity: 1; translate: 0 0; }
}
.hero__title { animation: rise-in 1s var(--ease) .75s backwards; }
.hero__sub { animation: rise-in 1s var(--ease) .95s backwards; }
.hero__btns { animation: rise-in 1s var(--ease) 1.15s backwards; }
.hero__tagline { animation: rise-in 1s var(--ease) 1.5s backwards; }
.hero__tags { animation: rise-in 1s var(--ease) 1.65s backwards; }

.hero__center {
    position: absolute;
    top: 318px;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none; /* не перекрывает чипы, чтобы они подсвечивались */
}
.hero__center .btn { pointer-events: auto; }
.hero__title {
    font-size: 92px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
}
.hero__sub {
    margin-top: 17px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
}
.hero__btns {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-top: 36px;
    padding-left: 74px;
}
.hero__btns .btn--primary { margin: 1.5px 0; }

.hero__tagline {
    position: absolute;
    left: var(--pad);
    top: 700px;
}
.hero__slogan { font-size: 30px; font-weight: 600; line-height: 1.15; }
.hero__desc {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, .5);
}
.hero__tags {
    position: absolute;
    right: var(--pad);
    top: 808px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: #9A9A9A;
    white-space: pre;
}
.hero__tags i { font-style: normal; color: var(--pink); margin: 0 6px; }

/* ---------- 01 · Такси ---------- */
.taxi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.taxi__left { display: flex; flex-direction: column; }
.taxi__intro .lead { margin-top: 23px; line-height: 1.5; }
.taxi__intro { margin-bottom: 50px; }

.photo-card {
    position: relative;
    height: 540px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--card);
}
.photo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 11, 12, 0) 35%, rgba(11, 11, 12, .92) 100%);
}
.photo-card__text {
    position: absolute;
    z-index: 1;
    left: 36px;
    right: 36px;
    bottom: 58px;
}
.photo-card h3 { font-size: 36px; font-weight: 600; }
.photo-card p {
    margin-top: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, .75);
}
.photo-card--driver { height: 300px; }
.photo-card--driver::after { background: linear-gradient(180deg, rgba(11, 11, 12, 0) 40%, rgba(11, 11, 12, .85) 100%); }
.photo-card--driver .photo-card__text { left: 32px; bottom: 30px; }
.photo-card--driver h3 { font-size: 28px; }

/* Мини-карта */
.map {
    position: relative;
    min-height: 780px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 59px 0 / 60px 100%,
        linear-gradient(180deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 59px / 100% 60px,
        #16161A;
}
.map__svg { position: absolute; max-width: none; height: auto; pointer-events: none; }
.map__svg--river { left: -5px; top: -5px; width: 701px; }
.map__svg--rail  { left: -1.5px; top: -1.5px; width: 63px; }
.map__svg--road1 { left: -1.5px; top: -1.5px; width: 563px; }
.map__svg--road2 { left: -1.5px; top: -1.5px; width: 228px; }
.map__svg--road3 { left: -1.5px; top: -1.5px; width: 178px; }
.map__svg--m-river, .map__svg--m-rail, .map__svg--m-road, .map__pin-img--m { display: none; }

.pt {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(-2.5px);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
}
.pt::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    flex: none;
}

.map__pin {
    position: absolute;
    left: 52.27%;
    top: 51.28%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
}
.map__pin-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 2px solid rgba(254, 79, 116, .7);
    background: rgba(254, 79, 116, .18);
    animation: pin-pulse 1.6s ease-out infinite;
}
@keyframes pin-pulse {
    from { transform: scale(.233); opacity: 1; }
    to   { transform: scale(1); opacity: 0; }
}
.map__plate {
    position: absolute;
    left: calc(52.27% + 27px);
    top: calc(51.28% - 20px);
    display: grid;
    place-items: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;
    background: rgba(0, 0, 0, .6);
    font-size: 16px;
    font-weight: 600;
}
.map__kicker {
    position: absolute;
    left: 32px;
    top: 32px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
.map__title { position: absolute; left: 32px; top: 54px; font-size: 26px; font-weight: 600; }
.map__tag { position: absolute; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.map__tag--rail { left: 48.18%; top: 5.13%; }
.map__tag--river { left: 84.85%; top: 42.3%; font-weight: 500; color: #7FB3D9; }
.map__note { position: absolute; left: 32px; bottom: 25px; font-size: 12px; color: rgba(255, 255, 255, .4); }

.pluses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.plus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .04);
}
.plus strong { align-self: flex-start; font-size: 40px; font-weight: 700; }
.plus span { font-size: 15px; color: rgba(255, 255, 255, .7); }

/* ---------- 02 · Приложение ---------- */
.roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.role {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 520px;
    padding: 36px 36px 43px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--card);
}
.role__glow {
    position: absolute !important;
    right: -120px;
    top: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--c);
    filter: blur(120px);
}
.role > * { position: relative; }
.role__title {
    margin-top: 15px;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}
.checks { display: grid; gap: 18px; margin-top: 38px; }
.checks li {
    position: relative;
    padding-left: 36px;
    font-size: 16px;
    line-height: 22px;
    color: rgba(255, 255, 255, .85);
}
.checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.stores { display: flex; flex-wrap: wrap; gap: 13px; margin-top: auto; }
.stores .btn--primary { margin: 1.5px 0; }
.store {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 14px;
    background: rgba(0, 0, 0, .6);
    font-size: 15px;
    font-weight: 600;
    transition: border-color .2s, background-color .2s;
}
.store:hover { border-color: rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .8); }
.store small { display: block; font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, .6); }
.store__ico { width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, .9); flex: none; }

/* Телефон */
.phone {
    position: absolute !important;
    z-index: 2;
    width: 240px;
    height: 480px;
    overflow: hidden;
    border: 6px solid rgba(255, 255, 255, .32);
    border-radius: 40px;
    background: #0B0B0C;
    pointer-events: none;
}
.phone--passenger { left: 441px; top: 79px; transform: rotate(8deg); }
.phone--driver { left: 466px; top: 47px; transform: rotate(-8deg); }
.phone > * { position: absolute; }
.phone__blob { border-radius: 50%; filter: blur(70px); }
.phone__blob--a { left: -60px; top: -50px; width: 290px; height: 290px; background: rgba(59, 114, 153, .8); }
.phone__blob--b { left: 40px; top: 210px; width: 270px; height: 270px; background: rgba(154, 79, 181, .7); }
.phone__row { left: 20px; top: var(--t); width: 228px; height: 33px; background: rgba(255, 255, 255, .06); }
.phone__route { left: 40px; top: 0; width: 150px; height: 270px; }
.phone--driver .phone__route { left: 8px; top: 9px; width: 200px; height: 245px; }
.phone__route img { width: 100%; height: 100%; }
.phone__car {
    right: -10px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--grad);
}
.phone__cam {
    left: 50%;
    top: 20px;
    width: 62px;
    height: 26px;
    margin-left: -31px;
    border-radius: 9px;
    background: #000;
}
.phone__sheet {
    left: 6px;
    right: 6px;
    top: 296px;
    height: 180px;
    padding: 16px 18px;
    border-radius: 24px;
    background: rgba(27, 27, 29, .95);
}
.phone__sheet b { display: block; font-size: 15px; font-weight: 600; }
.phone__input {
    display: block;
    margin-top: 10px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
    color: rgba(255, 255, 255, .7);
}
.phone__cta {
    display: grid;
    place-items: center;
    height: 46px;
    margin-top: 10px;
    border-radius: 19px;
    background: var(--grad);
    font-size: 13px;
    font-weight: 600;
}
.phone__sheet--order b { font-size: 14px; }
.phone__sub { display: block; margin-top: 6px; font-size: 11px; color: rgba(255, 255, 255, .6); }
.phone__sheet--order strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 700; }
.phone__sheet--order .phone__cta { margin-top: 12px; }

/* ---------- 03 · Водители ---------- */
.drivers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.conds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
.cond {
    display: flex;
    flex-direction: column;
    min-height: 120px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, .04);
}
.cond b { align-self: flex-start; font-size: 30px; font-weight: 700; }
.cond span { margin-top: 11px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.drivers .note { margin-top: 30px; }

.form-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(18, 18, 18, .9);
}
.form-card__glow {
    position: absolute !important;
    right: -140px;
    top: -200px;
    width: 500px;
    height: 400px;
    border-radius: 50%;
    background: var(--c);
    filter: blur(120px);
    pointer-events: none;
}
.form-card > * { position: relative; }
.form-card--driver { min-height: 600px; padding: 40px 40px 55px; }
.form-card__title { font-size: 32px; font-weight: 600; }
.form-card__sub { margin-top: 7px; font-size: 15px; color: rgba(255, 255, 255, .6); }
.form-card--driver .field { margin-top: 12px; }
.form-card--driver .form-card__sub + .field { margin-top: 36px; }
.form-card--driver .btn--block { margin-top: 34px; width: 100%; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field span, .counters__label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
}
.field input {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    font-size: 16px;
    font-weight: 500;
    outline: 0;
    transition: border-color .2s, background .2s;
}
.field input::placeholder { color: rgba(255, 255, 255, .35); }
.field input:focus {
    border: 1.5px solid transparent;
    padding: 0 19.5px;
    background:
        linear-gradient(#1E1E21, #1E1E21) padding-box,
        var(--grad) border-box;
}
.field.is-invalid input { border-color: var(--pink); }
.consent {
    margin-top: 23px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}
.consent a { text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.consent a:hover { color: #fff; }

/* Ошибка отправки формы и honeypot */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-error {
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(254, 79, 116, .5);
    border-radius: 14px;
    background: rgba(254, 79, 116, .1);
    font-size: 13px;
    line-height: 1.4;
}
.form-error[hidden] { display: none; }
.form-card--booking .form-error { grid-column: 1 / -1; }
.btn:disabled { opacity: .65; cursor: progress; transform: none; box-shadow: none; }

/* ---------- 04 · Транспорт ---------- */
.transport {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.gborder { position: relative; }
.gborder::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1.5px;
    border-radius: inherit;
    background: var(--grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
}
.tcard {
    display: block;
    height: 500px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 24px;
    background: var(--card);
}
.tcard img {
    position: absolute;
    left: 0;
    top: 0;
    width: 135.3%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--ease);
}
.tcard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(11, 11, 12, 0) 30%, rgba(11, 11, 12, .95) 100%);
}
.tcard__tag, .tag {
    position: absolute;
    z-index: 2;
    left: 24px;
    top: 24px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: rgba(0, 0, 0, .5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tcard__text {
    position: absolute;
    z-index: 2;
    left: 28px;
    right: 2px;
    top: 376px;
    transition: transform .35s var(--ease);
}
.tcard h3 { font-size: 32px; font-weight: 600; }
.tcard p {
    margin-top: 7px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, .72);
}
.tcard__arrow {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--grad);
    opacity: 0;
    transform: scale(.8);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.tcard__arrow::before {
    content: "→";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 600;
    transition: transform .35s var(--ease);
}
.tcard:hover img { transform: scale(1.1); }
.tcard:hover::after { opacity: 1; }
.tcard:hover .tcard__text { transform: translateY(-16px); }
.tcard:hover .tcard__arrow { opacity: 1; transform: none; }
.tcard:hover .tcard__arrow::before { content: "↗"; }

/* ---------- 05 · Уровни ---------- */
.levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.lvl { padding-top: 12px; }
.lvl--wide { grid-column: 1 / -1; }
.lvl__card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 24px;
    background: var(--card);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lvl__card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(169, 114, 255, .3);
}
.lvl__card:hover::after { opacity: 1; }
.lvl__photo { position: relative; height: 260px; }
.lvl__photo img { width: 100%; height: 100%; object-fit: cover; }
.lvl__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 45%, #121212 100%);
}
.lvl__photo--triple { display: grid; grid-template-columns: repeat(3, 1fr); }
.lvl__body { position: relative; z-index: 1; padding: 2px 28px 34px; }
.lvl__name { font-size: 34px; font-weight: 700; line-height: 41px; }
.lvl__name--sm { font-size: 28px; line-height: 34px; padding-bottom: 7px; }
.scale { display: flex; gap: 8px; margin-top: 15px; }
.scale i { width: 64px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.scale i.on { background: var(--grad); }
.lvl__desc {
    min-height: 66px;
    margin: 20px 0 30px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
}
.badge {
    position: absolute;
    z-index: 2;
    right: 24px;
    top: 24px;
    padding: 7px 12px;
    border-radius: 20px;
    background: var(--grad);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* бейдж скидки: показывается только в пн–чт (класс is-weekday ставит script.js) */
.badge--day { display: none; }
html.is-weekday .badge--day { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; border-radius: 16px; }
.badge--day b { font-weight: 700; }
.badge--day small { font-size: 10px; font-weight: 600; opacity: .9; }
.lvl__photo .badge, .route__photo .badge { right: 20px; top: 20px; }
.mcard > .badge { right: 32px; top: 32px; }

.stats {
    display: grid;
    grid-template-columns: 172px 1fr;
    padding-top: 19px;
    margin-bottom: 39px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.stats dt { font-size: 12px; color: rgba(255, 255, 255, .5); }
.stats dd { margin-top: 5px; font-size: 24px; font-weight: 600; }
.stats--col { grid-template-columns: 1fr; gap: 23px; padding: 0; margin-bottom: 29px; border: 0; }
.stats--3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 29px; }
.lvl__body .btn--block { margin: 0; width: 100%; }
.lvl__card .btn--primary { margin: 0; }

.lvl--wide .lvl__card {
    display: grid;
    grid-template-columns: 540px 1fr 340px;
    height: 300px;
}
.lvl--wide .lvl__photo { grid-column: 1; grid-row: 1; height: 300px; }
.lvl--wide .lvl__body { grid-column: 2; grid-row: 1; padding: 44px 20px 0 48px; }
.lvl--wide .lvl__desc { min-height: 0; margin: 20px 0 0; max-width: 380px; }
.lvl--wide .scale { margin-top: 15px; }
.lvl__side {
    grid-column: 3;
    grid-row: 1;
    margin: 40px 0;
    padding: 4px 40px 0 39px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}
.lvl__side .btn--block { width: 100%; }
.note--levels { margin-top: 38px; }
.note--levels, .note--sup, .note--more { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.note--sup + .note--sup, .note--more + .note--more { margin-top: 6px; }

/* ---------- 06 · Сапы ---------- */
.routes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.route {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--card);
}
.route__photo { position: relative; height: 300px; }
.route__photo img { width: 100%; height: 100%; object-fit: cover; }
.route__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 50%, #121212 100%);
}
.route__label { position: absolute; left: 28px; top: 28px; z-index: 2; }
.route__body { position: relative; margin-top: -18px; padding: 0 32px 25px; }
.route__name { font-size: 36px; font-weight: 700; line-height: 44px; }
.route__desc {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
}
.trail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 56px 6px 27px;
}
.trail::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 7px;
    height: 3px;
    background: var(--grad);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 10px);
    mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 10px);
}
.trail__stop { position: relative; display: flex; flex-direction: column; gap: 0; }
.trail--2 { grid-template-columns: repeat(2, 1fr); }
.trail__stop--mid { align-items: center; text-align: center; }
.trail__stop--end { align-items: flex-end; text-align: right; }
.trail__stop i {
    width: 16px;
    height: 16px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #fff;
}
.trail__stop--start i { background: var(--grad); }
.trail__stop b { font-size: 14px; font-weight: 600; line-height: 17px; }
.trail__stop small { margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, .5); }
.route .stats { grid-template-columns: repeat(3, 1fr); padding-top: 19px; margin: 0 0 29px; }
.route .btn--primary { margin: 0; width: 100%; }
.note--sup { margin-top: 20px; }

/* ---------- 07 · Велосипеды и подарки ---------- */
.more {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.mcard {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 440px;
    padding: 32px 32px 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--card);
}
.mcard__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard--bike::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 11, 12, 0) 25%, rgba(11, 11, 12, .92) 100%);
}
.mcard__label { position: absolute; left: 32px; top: 32px; z-index: 2; }
.mcard__body { position: relative; z-index: 2; }
.mcard h3 { font-size: 34px; font-weight: 600; }
.mcard--gift h3 { line-height: 1.1; }
.mcard p {
    margin-top: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, .75);
}
.mcard--gift p { line-height: 1.4; margin-top: 16px; }
.mcard .btn { margin-top: 20px; }
.mcard--gift .btn { margin-top: 38px; margin-bottom: 3px; }
.prices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.price {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;
    background: rgba(0, 0, 0, .5);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.prices + .btn { margin-top: 6px; }
.mcard--gift { background: linear-gradient(90deg, #24132F 0%, #3A1530 100%); }
.mcard__glow {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    border-radius: 50%;
    background: var(--c);
    filter: blur(120px);
}
.gift { position: absolute; height: auto; object-fit: contain; z-index: 1; }
.gift--quad { left: 362px; top: 225px; width: 220px; }
.gift--sup  { left: 486px; top: 22px; width: 170px; }
.gift--bike { left: 290px; top: 56px; width: 160px; }
.note--more { margin-top: 20px; }
.more--single { grid-template-columns: 1fr; }
.more--single .mcard { height: 400px; padding: 40px 48px 40px; }
.more--single .mcard--gift .btn { margin-bottom: 0; }
@media (min-width: 1101px) {
    .more--single .gift--bike { left: auto; right: 520px; top: 70px; width: 210px; }
    .more--single .gift--sup  { left: auto; right: 320px; top: 24px; width: 190px; }
    .more--single .gift--quad { left: auto; right: 50px; top: 90px; width: 280px; }
}

/* ---------- 08 · Бронь ---------- */
.form-card--booking {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    padding: 48px 48px 48px;
    background: rgba(18, 18, 18, .88);
}
.form-card--booking .form-card__glow { right: -60px; top: -200px; width: 600px; height: 500px; }
.counters {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 16px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.counters__label { grid-column: 1 / -1; }
.counter {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    transition: border-color .2s, background .2s;
}
.counter.is-active {
    border: 1.5px solid transparent;
    padding: 0 17.5px;
    background:
        linear-gradient(#1F1D22, #1F1D22) padding-box,
        var(--grad) border-box;
}
.counter__name { margin-right: auto; font-size: 15px; font-weight: 600; }
.counter__btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    transition: transform .2s, filter .2s;
}
.counter__btn--plus { background: var(--grad); }
.counter__btn:hover { filter: brightness(1.2); }
.counter__btn:active { transform: scale(.92); }
.counter__val { width: 34px; text-align: center; font-size: 17px; font-weight: 700; }
.field--date, .field--time { margin-top: 38px; }
.field--name, .field--phone { margin-top: 0; }
.form-card--booking .form-card__submit { grid-column: 1 / -1; margin: 34px 0 0; width: 100%; }
.form-card--booking .consent { grid-column: 1 / -1; }

.pay-card {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-top: 24px;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(18, 18, 18, .88);
}
.pay-card__qr {
    flex: none;
    width: 196px;
    height: 196px;
    padding: 12px;
    border-radius: 20px;
    background: #fff;
}
.pay-card__qr img { width: 100%; height: 100%; object-fit: contain; }
.pay-card__text { padding-top: 8px; }
.pay-card__text h3 { margin-top: 17px; font-size: 34px; font-weight: 600; }
.pay-card__text p {
    margin-top: 16px;
    font-size: 18px;
    color: var(--text-2);
}
.pay-card__btn { align-self: center; margin: 0 0 0 auto !important; }

/* ---------- 09 · Подвал ---------- */
.footer {
    position: relative;
    padding-top: 80px;
    background: linear-gradient(180deg, var(--bg) 0, var(--bg-dark) 220px);
    scroll-margin-top: 0;
}
.footer__grid {
    display: grid;
    grid-template-columns: 290px 360px 260px 250px;
    gap: 60px;
    align-items: start;
}
.footer__brand img { width: 123px; height: auto; }
.footer__brand p {
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .7);
}
.footer h4 {
    margin: 4px 0 11px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.point {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 128px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: #16161A;
    transition: border-color .2s, transform .2s;
}
.point:last-child { margin-bottom: 0; }
.point:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.point img { width: 128px; height: 128px; flex: none; }
.point span { display: flex; flex-direction: column; gap: 4px; padding-right: 12px; }
.point b { font-size: 15px; font-weight: 600; }
.point small { font-size: 12px; color: rgba(255, 255, 255, .55); }
.point em {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer__col--phones p { margin-bottom: 22px; }
.footer__col--phones small { display: block; font-size: 13px; color: rgba(255, 255, 255, .5); }
.footer__col--phones a { display: block; margin-top: 4px; font-size: 20px; font-weight: 600; transition: color .2s; }
.footer__col--phones a:hover { color: var(--pink); }
.footer__mail a { font-size: 18px; }
.footer__col--phones .socials--taxi { margin: -8px 0 22px; gap: 8px; }
.footer__col--phones .social { display: grid; width: 42px; height: 42px; margin: 0; }
.footer__col--phones .social svg { width: 21px; height: 21px; }
.footer__col--social { display: flex; flex-direction: column; gap: 12px; }
.footer__col--social h4 { margin-bottom: 0; }
.footer__col--social .btn { width: 100%; height: 58px; padding: 0 20px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.social {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    transition: background-color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.social svg { width: 24px; height: 24px; fill: #fff; }
.social:hover {
    transform: translateY(-3px);
    border-color: transparent;
    background: var(--grad);
    box-shadow: 0 8px 24px rgba(169, 114, 255, .4);
}
.footer__bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 42px;
    padding-top: 27px;
    padding-bottom: 55px;
    font-size: 14px;
}
.footer__bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    height: 1px;
    background: rgba(255, 255, 255, .1);
}
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; color: rgba(255, 255, 255, .7); transition: color .2s; }
.footer__bottom a:hover { color: #fff; }
.footer__bottom span { color: rgba(255, 255, 255, .4); }

/* ---------- Модальные окна ---------- */
.modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 48px 48px 43px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #18181B;
    color: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.modal[open] { animation: modal-in .3s var(--ease); }
.modal::backdrop {
    background: rgba(10, 10, 12, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.modal > * { position: relative; }
.modal__glow {
    position: absolute !important;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    border-radius: 50%;
    background: var(--c);
    filter: blur(120px);
    pointer-events: none;
}
.modal__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    font-size: 24px;
    line-height: 1;
    transition: background-color .2s;
}
.modal__close:hover { background: rgba(255, 255, 255, .16); }
.modal--policy .modal__close { position: absolute; right: 48px; top: 48px; }
.modal__title { font-size: 32px; font-weight: 600; line-height: 1.15; }
.modal__title--c { font-size: 28px; line-height: 1.219; text-align: center; }
.modal__text { font-size: 16px; line-height: 1.45; text-align: center; color: var(--text-2); }

.policy {
    max-height: 470px;
    margin: 28px 0 20px;
    padding-bottom: 40px;
    overflow-y: auto;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, .75);
    -webkit-mask: linear-gradient(180deg, #000 calc(100% - 50px), transparent);
    mask: linear-gradient(180deg, #000 calc(100% - 50px), transparent);
}
.policy h4 { margin-top: 18px; font-size: 15px; font-weight: 500; color: #fff; }
.policy h4:first-child { margin-top: 0; }
.policy p { margin: 0; }
.modal--policy .btn { margin: 0; width: 100%; }

.modal--sent { width: min(480px, calc(100vw - 32px)); padding: 56px 48px 43px; }
.modal__check {
    display: grid !important;
    place-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--grad);
    font-size: 40px;
    font-weight: 700;
}
.modal--sent .modal__title { margin-top: 34px; }
.modal--sent .modal__text { margin: 10px 0 40px; }
.modal--sent .btn { margin: 0; }

.modal--pay { width: min(480px, calc(100vw - 32px)); padding: 44px 48px 40px; }
.modal--pay .modal__text--sub { margin-top: 8px; }
.pay-card__qr--modal { margin: 28px auto 0; }
.modal__text--qr { margin-top: 16px; font-size: 18px; line-height: 1.219; }
.modal__or { margin: 16px 0; text-align: center; font-size: 16px; color: var(--text-2); }
.modal--pay .btn--primary { margin: 0; }
.modal--pay .btn--outline { margin-top: 12px; }

/* ---------- Появление блоков при прокрутке ---------- */
.js .reveal:not(.is-in) { opacity: 0; }
.js .reveal.is-in { animation: reveal .9s var(--ease) var(--d, 0s) backwards; }
@keyframes reveal {
    from { opacity: 0; translate: 0 44px; filter: blur(6px); }
    to   { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* ---------- Анимации (по желанию пользователя — отключаются) ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__wheel, .hero__wheel img, .chip, .map__pulse, .header,
    .hero__title, .hero__sub, .hero__btns, .hero__tagline, .hero__tags,
    .js .reveal.is-in { animation: none; }
    .js .reveal:not(.is-in) { opacity: 1; }
    * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1300px) {
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .header__nav { gap: 28px; }
    .btn--header { width: 130px; }
    .btn--taxi { width: 190px; }
    .gift--quad { left: 330px; }
    .gift--sup { left: 450px; }
    .gift--bike { left: 260px; }
}

@media (max-width: 1100px) {
    :root { --pad: 30px; }
    .h2 { font-size: 48px; }
    .h2--60, .h2--72 { font-size: 52px; }
    .transport { grid-template-columns: repeat(2, 1fr); }
    .tcard { height: 440px; }
    .tcard__text { top: auto; bottom: 28px; }
    .lvl--wide .lvl__card { grid-template-columns: 360px 1fr 300px; }
    .lvl__side { padding: 4px 24px 0 24px; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .hero__title { font-size: 72px; }
    .hero__sub { font-size: 26px; }
    .hero__tags { font-size: 24px; }
    .header__nav { gap: 20px; font-size: 14px; }
    .header { padding-left: 20px; }
    .btn--taxi { display: none; }
    .btn--header:first-child { margin-right: 14px; }
    .form-card--booking .counters { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: 1fr 1fr; }
    .mcard { padding-right: 24px; }
    .gift--sup { left: auto; right: 12px; top: 18px; width: 120px; }
    .gift--quad { left: auto; right: 12px; top: 175px; width: 160px; }
    .gift--bike { left: auto; right: 118px; top: 70px; width: 120px; }
    .header__logo { margin-right: 28px; }
}

@media (max-width: 900px) {
    .taxi, .roles, .drivers, .routes, .more { grid-template-columns: 1fr; }
    .map { min-height: 620px; }
    .levels { grid-template-columns: 1fr; }
    .lvl--wide .lvl__card { grid-template-columns: 1fr; height: auto; }
    .lvl--wide .lvl__photo { grid-column: 1; height: 220px; }
    .lvl--wide .lvl__body { grid-column: 1; grid-row: 2; padding: 0 28px 24px; }
    .lvl--wide .lvl__side { grid-column: 1; grid-row: 3; margin: 0 28px 28px; padding: 24px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
    .lvl--wide .stats--col { grid-template-columns: 1fr 1fr; }
    .pluses { grid-template-columns: 1fr; }
    .role { min-height: 560px; }
    .phone--passenger { left: auto; right: -40px; }
    .phone--driver { left: auto; right: -30px; }
    .phone { top: 60px !important; }
    .pay-card { flex-wrap: wrap; }
    .pay-card__btn { margin: 0 !important; }
    .transport { gap: 16px; }
    .hero { height: 820px; }
    .hero__wheel { width: 460px; margin-left: -230px; top: 150px; }
    .chip { transform: scale(.75); }
    .chip--1 { left: 6%; } .chip--2 { left: auto; right: 6%; }
    .chip--3 { left: 4%; } .chip--4 { left: auto; right: 8%; }
    .hero__title { font-size: 64px; }
    .hero__btns { gap: 24px; }
}

@media (max-width: 640px) {
    :root { --pad: 20px; }
    body { font-size: 15px; }
    .hide-m { display: none !important; }
    .show-m { display: inline; }

    .sec { padding: 60px 0 var(--pb-m, 60px); }
    .sec-head { --hg: 28px !important; }
    .label { padding: 8px 16px; }
    .h2, .h2--60, .h2--72 { margin-top: 7px; font-size: 34px; line-height: 1.05; }
    .lead { margin-top: 12px; font-size: 15px; line-height: 1.45; }
    .taxi__intro .lead { margin-top: 12px; }
    .taxi__intro { margin-bottom: 28px; }
    .btn { font-size: 17px; }

    /* Блобы: на мобильном — упрощённая подсветка */
    .blobs { display: none; }
    .sec {
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 44px), transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 44px), transparent 100%);
    }
    .hero {
        -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent 100%);
        mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent 100%);
    }
    .sec::before, .sec::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        filter: blur(75px);
        pointer-events: none;
    }
    .sec::before { left: -150px; top: 50px; background: rgba(59, 114, 153, .5); }
    .sec::after { right: -150px; bottom: 5%; background: rgba(125, 63, 168, .45); }
    .sec:nth-of-type(odd)::before { left: auto; right: -150px; background: rgba(125, 63, 168, .45); }
    .sec:nth-of-type(odd)::after { right: auto; left: -150px; background: rgba(59, 114, 153, .45); }

    .hero::before, .hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(75px);
        pointer-events: none;
    }
    .hero::before { left: -300px; top: -260px; width: 560px; height: 560px; background: rgba(59, 114, 153, .6); }
    .hero::after { left: 190px; top: 560px; width: 460px; height: 460px; background: rgba(154, 79, 181, .6); }
    .hero .blobs { display: block; inset: 0 auto auto 50%; width: 1440px; height: 100%; margin-left: -720px; }
    .hero .blob { display: none; }
    .hero .blob:nth-child(3) {
        display: block;
        left: -200px; top: 640px; width: 300px; height: 300px;
        background: rgba(125, 63, 168, .45);
        filter: blur(60px);
    }

    /* Шапка */
    .header {
        top: 12px;
        width: calc(100% - 24px);
        height: 60px;
        padding: 0 24px 0 30px;
        border-radius: 30px;
        grid-template-columns: auto 1fr auto;
    }
    .header__logo img { width: 99px; }
    .header__actions { justify-content: flex-end; gap: 0; margin-right: 14px; }
    .header__actions .header__social, .header__actions .btn--taxi { display: none; }
    .btn--header { width: 112px; height: 36px; font-size: 14px; }
    .btn--header:first-child { margin-right: 0; }
    .header__burger {
        position: relative;
        display: block;
        width: 24px;
        height: 36px;
    }
    .header__burger span {
        position: absolute;
        left: 1px;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        transition: transform .3s, top .3s;
    }
    .header__burger span:first-child { top: 11px; }
    .header__burger span:last-child { top: 20px; }
    .header__burger[aria-expanded="true"] span:first-child { top: 16px; transform: rotate(45deg); }
    .header__burger[aria-expanded="true"] span:last-child { top: 16px; transform: rotate(-45deg); }
    .header__nav {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        flex-direction: column;
        gap: 0;
        padding: 12px 30px;
        border-radius: 24px;
        background: rgba(22, 22, 22, .92);
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
        font-size: 17px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s, transform .25s, visibility .25s;
        margin-left: 0 !important;
    }
    .header__nav.is-open { opacity: 1; visibility: visible; transform: none; }
    .header__nav a { padding: 14px 0; }

    /* Hero */
    .hero { height: auto; min-height: 844px; }
    .hero__stage { min-height: 844px; }
    .hero__wheel { left: 20px; top: 150px; width: 350px; margin-left: 0; }
    .chip { width: 116px; height: 35px; border-radius: 18px; font-size: 16px; transform: none; }
    .chip--1 { left: 24px; top: 200px; }
    .chip--2 { left: auto; right: 12px; top: 188px; }
    .chip--3 { left: 18px; top: 440px; }
    .chip--4 { left: auto; right: 34px; top: 480px; }
    .hero__center { top: 312px; padding: 0 20px; }
    .hero__title { font-size: 54px; line-height: 1.05; }
    .hero__sub { margin-top: 10px; font-size: 17px; }
    .hero__btns { flex-direction: column; gap: 13px; margin-top: 84px; }
    .hero__btns { padding-left: 0; }
    .hero__btns .btn { width: 100%; }
    .hero__tagline { left: 20px; top: 700px; }
    .hero__slogan { font-size: 22px; }
    .hero__desc { display: none; }
    .hero__tags { left: 20px; right: auto; top: 766px; font-size: 14px; }
    .hero__tags i { margin: 0 3px; }

    /* 01 */
    .photo-card { height: 260px; border-radius: 24px; }
    .photo-card__text { left: 20px; right: 20px; bottom: 28px; }
    .photo-card h3 { font-size: 24px; }
    .photo-card p { margin-top: 7px; font-size: 13px; }
    .photo-card--driver { height: 220px; }
    .photo-card--driver .photo-card__text { left: 20px; bottom: 22px; }
    .photo-card--driver h3 { font-size: 20px; }
    .taxi { gap: 16px; }
    .map {
        min-height: 400px;
        height: 400px;
        border-radius: 24px;
        background:
            linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 49px 0 / 50px 100%,
            linear-gradient(180deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 49px / 100% 50px,
            #16161A;
    }
    .map__svg--river, .map__svg--rail, .map__svg--road1, .map__svg--road2, .map__svg--road3,
    .map__tag, .map__note, .pt--desktop, .map__pin-img:not(.map__pin-img--m) { display: none; }
    .map__svg--m-river { display: block; left: -13.5px; top: 196.5px; width: 377px; }
    .map__svg--m-rail { display: block; left: 159px; top: -11px; width: 37px; }
    .map__svg--m-road { display: block; left: 29px; top: 89px; width: 302px; }
    .map__pin-img--m { display: block; }
    .pt { left: var(--mx); top: var(--my); font-size: 11px; line-height: 13px; gap: 5px; transform: translateY(-2px); }
    .pt::before { width: 9px; height: 9px; }
    .map__pin { left: 52.86%; top: 52.5%; width: 84px; height: 84px; }
    .map__pulse { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
    .map__plate { left: calc(52.86% + 21px); top: calc(52.5% - 14px); height: 30px; padding: 0 14px; font-size: 13px; }
    .map__kicker { left: 20px; top: 20px; font-size: 11px; }
    .map__title { left: 20px; top: 38px; font-size: 20px; }
    .pluses { gap: 15px; margin-top: 16px; }

    /* 02 */
    .roles { gap: 16px; }
    .role { min-height: 482px; padding: 20px 20px 24px; border-radius: 28px; }
    .role__title { font-size: 28px; margin-top: 15px; }
    .checks { margin-top: 24px; gap: 14px; }
    .checks li { font-size: 14px; }
    .stores { flex-direction: column; align-items: flex-start; gap: 6px; }
    .role--driver .stores { margin-top: auto; }
    .role--driver .btn--primary { width: 210px; margin-top: 0; padding: 18px 20px; }
    .phone { width: 190px; height: 400px; border-width: 5px; border-radius: 32px; }
    .phone--passenger { left: auto; right: -14px; top: 262px !important; }
    .phone--driver { left: auto; right: -52px; top: 236px !important; }
    .phone__sheet { top: 196px; padding: 12px 14px; }
    .phone__sheet b { font-size: 13px; white-space: nowrap; }
    .phone__sheet--order b { font-size: 11px; }
    .phone__sheet--order .phone__sub { font-size: 9px; }
    .phone__route { left: 28px; width: 120px; height: 220px; }
    .phone--driver .phone__route { left: 8px; width: 160px; height: 200px; }
    .phone__row { left: 10px; width: 180px; }

    /* 03 */
    .drivers { gap: 12px; }
    .drivers__left { display: contents; }
    .conds { gap: 12px; margin-top: 0; }
    .cond { min-height: 110px; padding: 16px 16px; border-radius: 24px; }
    .cond b { font-size: 22px; }
    .cond span { margin-top: 8px; font-size: 14px; }
    .drivers .note { display: none; }
    .form-card { border-radius: 24px; }
    .form-card--driver { min-height: 0; padding: 24px; margin-top: 4px; }
    .form-card__title { font-size: 24px; }
    .form-card__sub { font-size: 13px; }
    .form-card--driver .form-card__sub + .field { margin-top: 24px; }
    .field input { height: 60px; border-radius: 16px; font-size: 16px; }
    .consent { margin-top: 16px; font-size: 11px; }

    /* 04 */
    .transport { grid-template-columns: 1fr; gap: 20px; }
    .tcard { height: 404px; }
    .tcard img { width: 100%; }
    .tcard__text { left: 22px; right: 92px; bottom: 24px; top: auto; }
    .tcard h3 { font-size: 28px; }
    .tcard p { font-size: 13px; }
    .tcard__arrow { opacity: 1; transform: none; right: 22px; bottom: 28px; width: 44px; height: 44px; }
    .tcard__arrow::before { font-size: 16px; }
    .tcard__tag { left: 20px; top: 20px; font-size: 10px; padding: 5px 10px; }

    /* 05 */
    .levels { gap: 20px; }
    .lvl { padding-top: 0; }
    .lvl__card:hover { transform: none; }
    .lvl__photo { height: 220px; }
    .lvl__name { font-size: 28px; line-height: 34px; }
    .lvl__name--sm { font-size: 24px; }
    .lvl__body { padding: 2px 24px 24px; }
    .lvl__desc { min-height: 0; margin: 16px 0 24px; font-size: 13px; }
    .stats { grid-template-columns: 1fr 1fr; margin-bottom: 24px; }
    .stats dd { font-size: 22px; }
    .tag { left: 20px; top: 20px; font-size: 10px; padding: 5px 10px; }
    .badge { right: 20px; top: 20px; font-size: 12px; }
    .lvl--wide .lvl__photo { height: 140px; }
    .lvl--wide .lvl__body { padding: 0 24px 16px; }
    .lvl--wide .lvl__side { margin: 0 24px 24px; padding-top: 20px; }
    .lvl--wide .lvl__desc { margin-top: 16px; }
    .lvl--wide .btn--block { margin-top: 0; }
    .note--levels { margin-top: 18px; font-size: 13px; }

    /* 06 */
    .routes { gap: 16px; }
    .route { border-radius: 24px; }
    .route__photo { height: 220px; }
    .route__label { left: 16px; top: 16px; }
    .route__body { margin-top: -24px; padding: 0 20px 20px; }
    .route__name { font-size: 21px; line-height: 28px; }
    .route__desc { font-size: 14px; max-width: 260px; }
    .trail { margin: 36px 4px 20px; }
    .trail__stop b { font-size: 12px; }
    .trail__stop small { font-size: 10px; }
    .trail__stop--end small { max-width: 80px; }
    .route .stats { grid-template-columns: 105px 105px 1fr; margin-bottom: 20px; }
    .route .stats dd { font-size: 20px; white-space: nowrap; }
    .note--sup, .note--more { font-size: 13px; }
    .social { width: 52px; height: 52px; }
    .social svg { width: 26px; height: 26px; }

    /* 07 */
    .more { gap: 16px; }
    .mcard, .more--single .mcard { height: 400px; padding: 24px 24px 24px; border-radius: 24px; }
    .mcard__label { left: 24px; top: 24px; }
    .mcard h3 { font-size: 28px; }
    .mcard h3 { font-size: 24px; }
    .mcard p { font-size: 14px; }
    .mcard .btn, .mcard--gift .btn { width: 100%; margin-top: 20px; margin-bottom: 0; }
    .mcard--gift, .more--single .mcard--gift { height: 460px; }
    .gift--sup { left: 220px; right: auto; top: 22px; width: 112px; }
    .gift--bike { left: 25px; right: auto; top: 62px; width: 140px; }
    .gift--quad { left: 160px; right: auto; top: 160px; width: 150px; }
    .prices { gap: 8px; }
    .price { padding: 8px 14px; font-size: 12px; }
    .prices + .btn { margin-top: 12px; }

    /* 08 */
    .form-card--booking { grid-template-columns: 1fr; padding: 24px; }
    .form-card--booking .field { margin-top: 12px; }
    .form-card--booking .field--name { margin-top: 0; }
    .form-card--booking .counters { grid-template-columns: 1fr; margin-top: 12px; gap: 8px; }
    .form-card--booking .field--date { margin-top: 26px; }
    .form-card--booking .form-card__submit { margin-top: 28px; }
    .counter { height: 56px; border-radius: 28px; padding: 0 12px 0 18px; }
    .counter.is-active { padding: 0 10.5px 0 16.5px; }
    .pay-card { flex-direction: column; align-items: stretch; gap: 0; padding: 20px; border-radius: 24px; }
    .pay-card__qr { width: 180px; height: 180px; margin: 20px auto 40px; }
    .pay-card__text { padding: 0 4px; }
    .pay-card__text h3 { margin-top: 0; font-size: 22px; }
    .pay-card__text p { font-size: 15px; line-height: 1.45; margin-top: 12px; }
    .pay-card__text .label { display: none; }
    .pay-card__btn { margin: 24px 0 0 !important; width: 100%; }

    /* Футер */
    .footer { padding-top: 48px; }
    .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .footer__brand p { margin-top: 20px; font-size: 15px; }
    .footer__col--phones p { margin-bottom: 10px; }
    .footer__col--phones small { display: inline; font-size: 15px; font-weight: 600; color: #fff; }
    .footer__col--phones small::after { content: " · "; }
    .footer__col--phones a { display: inline; margin: 0; font-size: 15px; }
    .footer__mail a { font-size: 15px !important; }
    .point { height: 96px; border-radius: 20px; }
    .point img { width: 96px; height: 96px; }
    .footer__bottom { flex-direction: column; gap: 12px; margin-top: 36px; padding-bottom: 40px; }
    .footer__bottom span { order: 2; }

    /* Модалки */
    .modal { padding: 28px 24px 24px; }
    .modal--policy .modal__close { right: 24px; top: 24px; width: 40px; height: 40px; }
    .modal__title { font-size: 24px; padding-right: 48px; }
    .modal__title--c { padding: 0; }
    .modal--sent, .modal--pay { padding: 40px 24px 28px; }
}