/* ==========================================================================
   Sapartaxi — лендинг таксопарка
   Палитра: графит #12151c, приглушённое золото #F2B632, песочный фон #F7F5F1
   ========================================================================== */

:root{
  --ink:#12151c;
  --ink-2:#1c212b;
  --text:#232833;
  --muted:#6b7280;
  --line:#e6e2db;
  --bg:#ffffff;
  --bg-tint:#f7f5f1;
  --gold:#f2b632;
  --gold-d:#d99f1d;
  --gold-soft:#fff6e2;
  --ok:#1f9254;
  --err:#c0392b;
  --r:16px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(18,21,28,.04), 0 8px 24px rgba(18,21,28,.06);
  --shadow-lg:0 2px 6px rgba(18,21,28,.06), 0 24px 60px rgba(18,21,28,.12);
  --font:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.18; letter-spacing:-.02em; color:var(--ink); font-weight:800}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:min(1160px, 100% - 40px); margin-inline:auto}
.wrap--narrow{width:min(820px, 100% - 40px)}

/* ── кнопки ─────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border:1px solid transparent; border-radius:12px;
  background:var(--gold); color:var(--ink);
  font:inherit; font-weight:700; font-size:16px; text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover{background:var(--gold-d)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid rgba(242,182,50,.45); outline-offset:2px}
.btn--lg{padding:15px 28px; font-size:17px; border-radius:14px}
.btn--sm{padding:10px 16px; font-size:15px}
.btn--full{width:100%}
.btn--ghost{background:transparent; border-color:rgba(18,21,28,.18); color:var(--ink)}
.btn--ghost:hover{background:rgba(18,21,28,.05); border-color:rgba(18,21,28,.3)}
.btn[disabled]{opacity:.55; pointer-events:none}

/* ── шапка ──────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex; align-items:center; gap:26px; height:72px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.logo__mark{display:inline-flex; line-height:0}
.logo__txt{font-weight:800; font-size:20px; letter-spacing:-.03em; color:var(--ink)}
.logo__txt span{color:var(--gold-d)}
.nav{display:flex; gap:22px; margin-inline:auto; font-size:15.5px; font-weight:600}
.nav a{color:var(--muted); text-decoration:none; transition:color .15s}
.nav a:hover{color:var(--ink)}
.hdr__act{display:flex; align-items:center; gap:14px; flex:none}
.hdr__tel{font-weight:800; text-decoration:none; color:var(--ink); font-size:16.5px; white-space:nowrap}

/* ── герой ──────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(242,182,50,.16), transparent 60%),
    linear-gradient(180deg, #fbfaf8 0%, var(--bg-tint) 100%);
  border-bottom:1px solid var(--line);
}
.hero__in{
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:start;
  padding:64px 0 76px;
}
.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 11px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-size:14.5px; font-weight:700; color:var(--ink);
  box-shadow:0 1px 2px rgba(18,21,28,.04);
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(31,146,84,.16)}
.hero h1{margin:20px 0 18px; font-size:clamp(32px, 4.4vw, 51px); letter-spacing:-.035em}
.hero h1 b{color:var(--gold-d); font-weight:800}
.lead{font-size:18.5px; color:#4b5261; max-width:52ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero__facts{display:flex; gap:36px; flex-wrap:wrap; margin-top:38px; padding-top:28px; border-top:1px solid var(--line)}
.hero__facts li{display:flex; flex-direction:column}
.hero__facts b{font-size:23px; font-weight:800; color:var(--ink); letter-spacing:-.02em}
.hero__facts span{font-size:14.5px; color:var(--muted)}

/* ── карточка формы ─────────────────────────────────── */
.formcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; box-shadow:var(--shadow-lg); scroll-margin-top:90px;
}
.formcard__head h2{font-size:24px}
.formcard__head p{margin-top:9px; font-size:15px; color:var(--muted)}
.form{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.field{display:flex; flex-direction:column; gap:7px}
.field__lbl{font-size:14px; font-weight:700; color:var(--ink)}
.field__lbl em{font-style:normal; font-weight:500; color:var(--muted)}
.field input, .field select{
  width:100%; padding:13px 14px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  transition:border-color .15s, box-shadow .15s;
}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:40px;
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(242,182,50,.18);
}
.field input.is-bad{border-color:var(--err); box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--muted); line-height:1.45; cursor:pointer}
.check input{margin:2px 0 0; width:17px; height:17px; accent-color:var(--gold-d); flex:none}
.check a{color:var(--muted); text-underline-offset:2px}
.form__note{font-size:13px; color:var(--muted); text-align:center}
.form__msg{display:none; font-size:15px; font-weight:600; padding:12px 14px; border-radius:12px; text-align:center}
.form__msg.is-ok{display:block; background:#eaf7ef; color:var(--ok)}
.form__msg.is-err{display:block; background:#fdeeec; color:var(--err)}

/* ── полоса цифр ────────────────────────────────────── */
.stats{background:var(--ink); color:#fff}
.stats__in{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:38px 0}
.stat{display:flex; flex-direction:column; gap:6px}
.stat b{font-size:32px; font-weight:800; letter-spacing:-.03em; color:var(--gold)}
.stat span{font-size:14.5px; color:rgba(255,255,255,.66); line-height:1.4}

/* ── секции ─────────────────────────────────────────── */
.sect{padding:84px 0}
.sect--tint{background:var(--bg-tint); border-block:1px solid var(--line)}
.sect__head{max-width:720px; margin-bottom:44px}
.eyebrow{
  font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-d); margin-bottom:12px;
}
.sect__head h2{font-size:clamp(26px, 3.2vw, 38px)}
.sect__sub{margin-top:16px; font-size:17.5px; color:#4b5261}

.cards{display:grid; gap:20px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:28px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.card--flat{box-shadow:none}
.card--flat:hover{transform:none; box-shadow:var(--shadow)}
.card__ico{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold-d); margin-bottom:18px;
}
.card h3{font-size:19px; margin-bottom:11px; display:flex; align-items:baseline; gap:10px}
.card p{font-size:15.8px; color:#525a68}
.num{font-size:13px; font-weight:800; color:var(--gold-d); letter-spacing:.04em}

/* ── заработок ──────────────────────────────────────── */
.income{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.income__col{
  border:1px solid var(--line); border-radius:var(--r); padding:28px; background:#fff;
}
.income__col--hot{
  background:var(--ink); border-color:var(--ink); color:#fff;
  box-shadow:var(--shadow-lg);
}
.income__tag{font-size:14px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em}
.income__col--hot .income__tag{color:var(--gold)}
.income__sum{font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--ink); margin-top:14px}
.income__col--hot .income__sum{color:#fff}
.income__per{font-size:14.5px; color:var(--muted); margin-top:2px}
.income__col--hot .income__per{color:rgba(255,255,255,.6)}
.income ul{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px}
.income__col--hot ul{border-color:rgba(255,255,255,.15)}
.income li{font-size:15.5px; color:#525a68; padding-left:20px; position:relative}
.income__col--hot li{color:rgba(255,255,255,.8)}
.income li::before{
  content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  border-radius:50%; background:var(--gold);
}
.disclaimer{margin-top:22px; font-size:14px; color:var(--muted); max-width:70ch}

/* ── требования ─────────────────────────────────────── */
.req{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.req__box{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px}
.req__box h3{font-size:20px; margin-bottom:18px}
.ticks{display:flex; flex-direction:column; gap:13px}
.ticks li{position:relative; padding-left:32px; font-size:16px; color:#4b5261}
.ticks li::before{
  content:""; position:absolute; left:0; top:2px; width:21px; height:21px; border-radius:50%;
  background:var(--gold-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d99f1d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center/12px no-repeat;
}

/* ── шаги ───────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s}
.steps li{position:relative; padding-top:8px}
.steps__n{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--ink); color:var(--gold); font-weight:800; font-size:18px; margin-bottom:16px;
}
.steps h3{font-size:18px; margin-bottom:8px}
.steps p{font-size:15.5px; color:#525a68}

/* ── средний CTA ────────────────────────────────────── */
.midcta{
  margin-top:56px; display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
  background:var(--gold-soft); border:1px solid #f1e2bd; border-radius:var(--r-lg); padding:32px 36px;
}
.midcta h3{font-size:22px; margin-bottom:8px}
.midcta p{color:#6d6350; font-size:16px; max-width:56ch}
.midcta__act{display:flex; gap:12px; flex-wrap:wrap}
.midcta .btn--ghost{border-color:rgba(18,21,28,.22); background:rgba(255,255,255,.6)}

/* ── FAQ ────────────────────────────────────────────── */
.faq{display:flex; flex-direction:column; gap:10px}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:4px 22px; transition:box-shadow .18s;
}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
  font-weight:700; font-size:17px; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:0; top:22px; width:14px; height:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.6' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/14px no-repeat;
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq p{padding:0 0 20px; font-size:16px; color:#525a68; max-width:74ch}

/* ── финальный блок ─────────────────────────────────── */
.final{
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(242,182,50,.14), transparent 65%),
    var(--ink);
  color:#fff; padding:78px 0;
}
.final__in{text-align:center; max-width:660px; margin-inline:auto}
.final h2{color:#fff; font-size:clamp(26px, 3.4vw, 38px)}
.final p{margin-top:16px; color:rgba(255,255,255,.7); font-size:17.5px}
.final__act{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap}
.final .btn--ghost{color:#fff; border-color:rgba(255,255,255,.28)}
.final .btn--ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5)}

/* ── подвал ─────────────────────────────────────────── */
.ftr{background:var(--ink-2); color:rgba(255,255,255,.72); padding:56px 0 28px; font-size:15.5px}
.ftr__in{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:36px}
.ftr h4{color:#fff; font-size:16px; margin-bottom:14px}
.ftr a{color:rgba(255,255,255,.82); text-decoration:none}
.ftr a:hover{color:var(--gold)}
.ftr p{margin-bottom:9px}
.ftr .logo__txt{color:#fff}
.logo--ftr{margin-bottom:16px}
.ftr__about{max-width:42ch; color:rgba(255,255,255,.6)}
.muted{color:rgba(255,255,255,.45); font-size:14px}
.ftr__bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:13.5px; color:rgba(255,255,255,.45);
}

/* ── мобильная панель ───────────────────────────────── */
.mbar{display:none}

/* ── адаптив ────────────────────────────────────────── */
@media (max-width:1040px){
  .nav{display:none}
  .hero__in{grid-template-columns:1fr; gap:40px; padding:44px 0 56px}
  .lead{max-width:none}
  .cards--3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .stats__in{grid-template-columns:1fr 1fr; gap:24px}
  .ftr__in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .wrap{width:min(100% - 32px, 100%)}
  .hdr__in{height:64px; gap:12px}
  .hdr__tel{display:none}
  .sect{padding:56px 0}
  .sect__head{margin-bottom:30px}
  .hero__facts{gap:22px 30px}
  .formcard{padding:22px}
  .cards--3, .income, .req, .steps{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .midcta{padding:26px; text-align:left}
  .midcta__act{width:100%}
  .midcta__act .btn{flex:1}
  .ftr__in{grid-template-columns:1fr; gap:30px}
  body{padding-bottom:68px}
  .mbar{
    display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  .mbar__b{
    display:grid; place-items:center; padding:12px 6px; border-radius:11px;
    font-size:15px; font-weight:700; text-decoration:none; color:var(--ink);
    border:1px solid var(--line); background:#fff;
  }
  .mbar__b--main{background:var(--gold); border-color:var(--gold)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}

/* ==========================================================================
   Юридические страницы (политики, удаление аккаунта)
   ========================================================================== */
.doc{padding:52px 0 84px}
.doc__kicker{font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d); margin-bottom:12px}
.doc h1{font-size:clamp(26px,3.4vw,38px); margin-bottom:12px}
.doc .upd{color:var(--muted); font-size:15px; margin-bottom:14px}
.doc__intro{font-size:17.5px; color:#4b5261; margin-bottom:34px; max-width:74ch}
.doc h2{font-size:21px; margin:38px 0 12px; scroll-margin-top:90px}
.doc h3{font-size:17.5px; margin:24px 0 8px}
.doc p{color:#4b5261; font-size:16.5px; margin-bottom:12px; max-width:80ch}
.doc ul,.doc ol{margin:12px 0 16px; display:flex; flex-direction:column; gap:9px}
.doc li{position:relative; padding-left:22px; color:#4b5261; font-size:16.5px; max-width:78ch}
.doc li::before{content:""; position:absolute; left:2px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.doc ol{counter-reset:n}
.doc ol li{counter-increment:n; padding-left:28px}
.doc ol li::before{
  content:counter(n); position:static; float:left; margin-left:-28px; width:20px; height:auto;
  background:none; border-radius:0; color:var(--gold-d); font-weight:800; font-size:15px;
}
.doc strong{color:var(--ink); font-weight:700}
.doc a{color:var(--gold-d); text-underline-offset:3px}

/* оглавление */
.toc{
  background:var(--bg-tint); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 26px; margin-bottom:36px;
}
.toc h2{margin:0 0 12px; font-size:16px}
.toc ol{margin:0; gap:7px}
.toc li{font-size:15.5px}
.toc a{color:#4b5261; text-decoration:none}
.toc a:hover{color:var(--gold-d); text-decoration:underline}

/* таблица данных для магазинов приложений */
.tablewrap{overflow-x:auto; margin:18px 0 22px; border:1px solid var(--line); border-radius:var(--r)}
.dtable{width:100%; border-collapse:collapse; font-size:15.5px; min-width:640px; background:#fff}
.dtable th,.dtable td{padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.dtable th{background:var(--bg-tint); font-weight:800; color:var(--ink); font-size:14.5px}
.dtable tr:last-child td{border-bottom:0}
.dtable td{color:#4b5261}

/* врезка-предупреждение */
.callout{
  background:var(--gold-soft); border:1px solid #f1e2bd; border-radius:var(--r);
  padding:20px 24px; margin:22px 0;
}
.callout p{color:#6d6350; margin-bottom:0}
.callout p + p{margin-top:10px}

/* переключатель документов */
.docnav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:34px}
.docnav a{
  padding:9px 15px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:14.5px; font-weight:700; color:var(--muted); text-decoration:none;
  transition:border-color .15s, color .15s;
}
.docnav a:hover{color:var(--ink); border-color:rgba(18,21,28,.25)}
.docnav a[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:#fff}

/* блок контактов внизу документа */
.docend{
  margin-top:44px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; gap:24px; justify-content:space-between; align-items:center; flex-wrap:wrap;
}
.docend p{margin:0; font-size:15.5px}
@media (max-width:720px){
  .doc{padding:36px 0 60px}
  .doc h2{font-size:19px; margin-top:30px}
  .toc{padding:18px 20px}
}

/* ==========================================================================
   Пассажирский лендинг: ссылка «Водителям», кнопка-телефон, кнопка в карточке
   ========================================================================== */
.hdr__alt{
  font-size:14.5px; font-weight:700; color:var(--muted); text-decoration:none;
  padding:8px 12px; border-radius:9px; white-space:nowrap; transition:color .15s, background .15s;
}
.hdr__alt:hover{color:var(--ink); background:rgba(18,21,28,.05)}
.btn--call{letter-spacing:-.01em; font-size:18px}
.card__act{margin-top:18px}
.form__note a{color:var(--gold-d); font-weight:700; text-underline-offset:2px}
@media (max-width:1040px){ .hdr__alt{display:none} }
@media (max-width:720px){
  .btn--call{font-size:16.5px}
  .ftr__in{grid-template-columns:1fr}
}

/* переключатель языка */
.lang{
  font-size:13.5px; font-weight:800; letter-spacing:.04em; text-decoration:none;
  color:var(--muted); padding:7px 11px; border:1px solid var(--line); border-radius:9px;
  background:#fff; white-space:nowrap; transition:color .15s, border-color .15s;
}
.lang:hover{color:var(--ink); border-color:rgba(18,21,28,.28)}
@media (max-width:720px){ .lang{padding:6px 9px; font-size:12.5px} }