/*
  Такси Вовремя — Премиальный лендинг
  Палитра: Tiffany #40E0D0, белый, перламутрово-серый, глубокий черный
  Шрифты: Unbounded (заголовки), Inter (тело), Cairo (AR)
*/
:root {
  --tiffany: #40E0D0;
  --tiffany-600: #32c8ba;
  --black: #0B0F10;
  --ink: #14191c;
  --pearl: #f1f3f5;
  --pearl-2: #e6e7e8;
  --muted: #9aa3a8;
  --card: #0f1518;
  --glass: rgba(255,255,255,0.06);
  --shadow: 0 10px 30px rgba(0,0,0,0.3);
  --radius: 14px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: #e7ecef; background: radial-gradient(1200px 700px at 80% -100px, rgba(64,224,208,0.12), transparent), #0B0F10;
  font: 400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
}
body[dir="rtl"] { font-family: Cairo, Inter, system-ui, sans-serif; }

img, svg { display: block; max-width: 100%; }

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2rem, 860px); }
.container--wide { width: min(100% - 1rem, 1400px); }

/* A11y helpers */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.section { position: relative; padding: clamp(64px, 8vw, 120px) 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section h2 { font: 800 clamp(28px, 5vw, 46px)/1.15 Unbounded, Inter, sans-serif; letter-spacing: 0.01em; margin: 0; }
.section__hint { margin: 6px 0 0; color: var(--muted); font-size: 14px; opacity: .95; }

.section--diagonal::before,
.section--diagonal-inverse::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(64,224,208,0.07), rgba(255,255,255,0) 40%);
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
}
.section--diagonal-inverse::before { clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%); }

/* Header */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: linear-gradient(180deg, rgba(11,15,16,0.75), rgba(11,15,16,0.2) 60%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.header.header--solid { background: rgba(11,15,16,0.92); }
.nav-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 16px 0; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .4px; }
.logo__mark { width: 22px; height: 22px; border: 2px solid var(--tiffany); border-radius: 6px; position: relative; box-shadow: 0 0 20px rgba(64,224,208,.4) inset, 0 0 20px rgba(64,224,208,.2);
  background: conic-gradient(from 210deg, rgba(64,224,208,.0), rgba(64,224,208,.2)); }
.logo__mark::after { content: ""; position: absolute; inset: 4px; border-left: 2px solid var(--tiffany); transform: skewX(-20deg); opacity: .9; }
.logo__text { font: 800 16px/1 Unbounded, Inter, sans-serif; }
.logo__text b { color: var(--tiffany); text-shadow: 0 0 20px rgba(64,224,208,.35); }

.nav { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 28px); justify-content: center; }
.nav__link { color: #cfe5e3; text-decoration: none; font-weight: 600; position: relative; padding: 8px 2px; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: linear-gradient(90deg, var(--tiffany), transparent); transform: scaleX(0); transform-origin: left; transition: .35s ease; }
.nav__link:hover::after { transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: 14px; }

.lang-switch { display: inline-flex; gap: 6px; padding: 4px; background: rgba(255,255,255,.06); border-radius: 99px; }
.lang-switch__btn { appearance: none; border: 0; background: transparent; color: #cfe5e3; font: 700 12px/1 Inter, sans-serif; padding: 6px 10px; border-radius: 99px; cursor: pointer; }
.lang-switch__btn:hover { color: #fff; }
.lang-switch__btn.is-active { background: rgba(64,224,208,.15); color: #fff; box-shadow: inset 0 0 0 1px rgba(64,224,208,.45); }

.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; height: var(--h); padding: 0 20px; border-radius: 12px; font: 700 14px/1 Inter, sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer; border: 0; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn--primary { background: linear-gradient(180deg, var(--tiffany), #29b5a6); color: #041414; box-shadow: 0 10px 30px rgba(64,224,208,.25), 0 0 0 1px rgba(64,224,208,.6) inset; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 40px rgba(64,224,208,.35), 0 0 0 1px rgba(255,255,255,.4) inset; }
.btn--ghost { background: rgba(255,255,255,.08); color: #eaf7f6; border: 1px solid rgba(255,255,255,.18); }
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn--xl { --h: 56px; padding-inline: 28px; font-size: 15px; }
.btn--sm { --h: 34px; padding-inline: 10px; font-size: 12px; border-radius: 10px; }

/* Hero */
.hero { padding-top: 120px; min-height: 100vh; display: grid; align-content: center; position: relative; overflow: clip; }
.hero__visual { position: absolute; inset: 0; z-index: -1; }
.hero-lines { position: absolute; inset: 0; opacity: .9; }
.hero-city { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; opacity: .8; }

.dash { stroke-dasharray: 220 560; animation: dash 12s linear infinite; }
.dash.delay1 { animation-delay: .8s; }
.dash.delay2 { animation-delay: 1.6s; }
.dash.delay3 { animation-delay: 2.4s; }
@keyframes dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -780; } }

.hero__content { text-align: left; padding-top: 40px; }
.hero__title { font: 800 clamp(36px, 7vw, 64px)/1.05 Unbounded, Inter, sans-serif; margin: 0 0 16px; letter-spacing: .01em; }
.hero__subtitle { font-size: clamp(16px, 2.4vw, 20px); color: #cfe5e3; margin: 0 0 28px; }
.hero__cta { display: flex; gap: 14px; align-items: center; }

.scroll-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 30px; height: 46px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
.scroll-hint span { display: block; width: 4px; height: 10px; margin: 8px auto 0; border-radius: 2px; background: var(--tiffany); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%,100% { transform: translateY(0); opacity: .2 } 50% { transform: translateY(10px); opacity: 1 } }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.5vw, 24px); margin-top: 24px; }
.card { position: relative; padding: 22px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(64,224,208,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.card:hover { transform: translateY(-6px); border-color: rgba(64,224,208,.55); box-shadow: 0 25px 60px rgba(64,224,208,.18); }
.card::before { content: ""; position: absolute; inset: -30% -10%; background: radial-gradient(400px 120px at 30% 20%, rgba(64,224,208,.18), transparent 70%); transform: rotate(-8deg); }
.card__icon { width: 56px; height: 56px; color: var(--tiffany); filter: drop-shadow(0 10px 18px rgba(64,224,208,.35)); margin-bottom: 12px; }
.card h3 { margin: 0 0 6px; font: 800 18px/1.15 Unbounded, Inter, sans-serif; }
.card p { margin: 0; color: #cfe5e3; }

/* Mapflow */
.mapflow { padding-top: clamp(40px, 6vw, 80px); }
.mapflow__legend { margin-top: 2px; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #dff7f4; padding: 8px 12px; border-radius: 999px; font: 700 12px/1 Inter, sans-serif; cursor: pointer; transition: .25s ease; }
.chip:hover { background: rgba(255,255,255,.1); }
.chip.is-active, .chip[aria-selected="true"] { background: rgba(64,224,208,.18); border-color: rgba(64,224,208,.5); color: #fff; box-shadow: 0 6px 18px rgba(64,224,208,.18); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(64,224,208,.28); }
.mapflow__canvas { position: relative; height: clamp(360px, 52vw, 540px); margin: 10px auto; width: min(100% - 2rem, 1200px); border-radius: 24px; overflow: hidden; background:
  radial-gradient(600px 240px at 20% 30%, rgba(64,224,208,.08), transparent 60%),
  radial-gradient(600px 240px at 80% 70%, rgba(64,224,208,.08), transparent 60%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px),
  #0d1215;
  box-shadow: 0 30px 80px rgba(0,0,0,.45) inset, 0 20px 50px rgba(0,0,0,.25);
}
.has-live-map .mapflow__svg { display: none; }
.mapflow__canvas::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1000px 300px at -10% -20%, rgba(64,224,208,.18), transparent 60%); mix-blend-mode: screen; pointer-events: none; }
/* Faux map svg layer */
.mapflow__svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; filter: saturate(0.9) contrast(1.05); pointer-events: none; }
.mapflow__svg .road { stroke-linecap: round; }
.mapflow__svg .road--primary { filter: drop-shadow(0 6px 18px rgba(64,224,208,.16)); }
.mapflow__canvas .live-map { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 0; pointer-events: none; }
.point { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); cursor: pointer; z-index: 2; }
.point.open, .point:focus-visible, .point:hover { z-index: 3; }
.pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--tiffany); box-shadow: 0 0 0 0 rgba(64,224,208,.8); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(64,224,208,.7); } 70% { box-shadow: 0 0 0 20px rgba(64,224,208,0); } 100% { box-shadow: 0 0 0 0 rgba(64,224,208,0); } }
.tooltip { position: absolute; left: 22px; top: -6px; width: max-content; max-width: 240px; padding: 10px 12px; background: rgba(11,15,16,.92); color: #eaf7f6; border: 1px solid rgba(64,224,208,.45); box-shadow: 0 8px 24px rgba(64,224,208,.15); border-radius: 12px; transform: translateY(6px); opacity: 0; pointer-events: none; transition: .25s ease; }
.point:hover .tooltip { transform: translateY(0); opacity: 1; }
.tooltip strong { display: block; font: 800 14px/1 Unbounded, Inter, sans-serif; margin-bottom: 4px; color: #cffff7; }
.tooltip span { font-size: 13px; color: #cfe5e3; }
.tooltip__cta { display: inline-flex; margin-top: 8px; }
/* Directional modifiers to reduce overlap near clustered cities */
.tooltip--ne { left: 18px; top: -34px; }
.tooltip--e  { left: 22px; top: -6px; }
.tooltip--se { left: 18px; top: 18px; }
.tooltip--w  { left: auto; right: 22px; top: -6px; }
.tooltip--nw { left: auto; right: 18px; top: -34px; }
.tooltip--sw { left: auto; right: 22px; top: 18px; }
/* Show tooltip when point toggled open (for touch devices) */
.point.open .tooltip { transform: translateY(0); opacity: 1; pointer-events: auto; }
.point:focus-visible .tooltip { transform: translateY(0); opacity: 1; }
.point:focus-visible .pulse, .point.open .pulse { box-shadow: 0 0 0 8px rgba(64,224,208,.18), 0 0 0 0 rgba(64,224,208,.8); }
.point.is-dimmed { opacity: .45; filter: saturate(.8) brightness(.9); }
.point.is-highlight .pulse { transform: scale(1.08); box-shadow: 0 0 0 0 rgba(64,224,208,.95); }
/* Labels near points */
.point__label { position: absolute; left: 22px; top: -22px; padding: 4px 8px; font: 700 12px/1.2 Inter, sans-serif; color: #dff7f4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; white-space: nowrap; pointer-events: none; backdrop-filter: blur(2px); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.point.is-dimmed .point__label { opacity: .6; }
.point.is-highlight .point__label { color: #fff; border-color: rgba(64,224,208,.45); box-shadow: 0 10px 28px rgba(64,224,208,.18); }

/* Live map (Leaflet) */
.live-map {
  height: clamp(360px, 52vw, 540px);
  width: 100%;
  margin: 10px 0 16px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(600px 240px at 20% 30%, rgba(64,224,208,.08), transparent 60%),
    radial-gradient(600px 240px at 80% 70%, rgba(64,224,208,.08), transparent 60%),
    #0d1215;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.35) inset, 0 20px 50px rgba(0,0,0,.25);
}
.leaflet-container { background: transparent; font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.leaflet-control-zoom a {
  background: rgba(255,255,255,.08);
  color: #eaf7f6;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
}
.leaflet-control-zoom a:hover { background: rgba(255,255,255,.14); }
.leaflet-control-zoom { border: 0 !important; }

/* Custom pins for From/To */
.map-pin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  color: #062321; font: 800 13px/1 Unbounded, Inter, sans-serif; text-shadow: 0 1px 0 rgba(255,255,255,.15);
  box-shadow: 0 10px 26px rgba(64,224,208,.25), 0 0 0 1px rgba(64,224,208,.45) inset;
}
.map-pin--from { background: radial-gradient(120% 120% at 30% 20%, #6ff0e4, var(--tiffany)); border: 2px solid rgba(64,224,208,.9); }
.map-pin--to { background: radial-gradient(120% 120% at 30% 20%, #5dd7ca, var(--tiffany-600)); border: 2px solid rgba(64,224,208,.6); }

/* Advantages */
.adv-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 20px); }
.adv-item { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(64,224,208,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); transition: .3s ease; }
.adv-item:hover { border-color: rgba(64,224,208,.5); box-shadow: 0 18px 48px rgba(64,224,208,.16); transform: translateY(-4px); }
.adv-icon { width: 56px; height: 56px; color: var(--tiffany); filter: drop-shadow(0 10px 18px rgba(64,224,208,.35)); }
.adv-item h3 { margin: 0 0 4px; font: 800 16px/1.15 Unbounded, Inter, sans-serif; }
.adv-item p { margin: 0; color: #cfe5e3; }

/* Order form */
.order .form { display: grid; gap: 14px; padding: 18px; background: linear-gradient(180deg, rgba(64,224,208,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; box-shadow: var(--shadow); }
.form__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.form__field { display: grid; gap: 8px; }
.form__field--full { grid-column: 1 / -1; }
.form__label { color: #cfe5e3; font-weight: 600; }
input, select, textarea { width: 100%; padding: 14px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.35); color: #e8f7f6; outline: none; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
input:focus, select:focus, textarea:focus { border-color: rgba(64,224,208,.55); box-shadow: 0 0 0 3px rgba(64,224,208,.2); }
.form__actions { display: flex; align-items: center; gap: 16px; padding-top: 6px; }
.form__note { color: #9ad8d2; font-size: 13px; }

/* Testimonials circular */
.circ { position: relative; height: clamp(420px, 55vw, 520px); display: grid; place-items: center; overflow: hidden; }
.circ__orbit { position: relative; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; }
.circ__item { position: absolute; width: 230px; padding: 14px; background: radial-gradient(180px 120px at top left, rgba(64,224,208,.12), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; color: #eaf7f6; box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(2px); transform: translate(-50%, -50%); }
.circ__text { margin: 0 0 8px; color: #eaf7f6; }
.circ__author { color: #9ad8d2; font-size: 13px; }

/* Footer */
.footer { background: linear-gradient(180deg, #0b0f10, #070a0b); border-top: 1px solid rgba(255,255,255,.06); margin-top: 40px; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 24px); padding-top: 32px; }
.footer__title { font: 800 20px/1.15 Unbounded, Inter, sans-serif; margin: 0 0 10px; }
.contacts { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.contact-link { display: inline-grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; color: #d9f4f1; text-decoration: none; opacity: .9; }
.contact-link:hover { opacity: 1; }
.contact-link svg { width: 20px; height: 20px; color: var(--tiffany); }
.map-card { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0f1518; }
.map-card__bg { height: 220px; background:
    radial-gradient(380px 180px at 20% 40%, rgba(64,224,208,.14), transparent 60%),
    conic-gradient(from 220deg at 70% 30%, rgba(64,224,208,.12), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 12px);
}
.map-card__body { padding: 14px; display: flex; align-items: center; justify-content: space-between; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 16px; }
.footer__bottom p { color: #cfe5e3; opacity: .9; }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(12px); transition: .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .adv-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .nav-wrap { grid-template-columns: 1fr auto; grid-template-areas: 'logo actions' 'nav nav'; row-gap: 8px; }
  .logo { grid-area: logo; }
  .nav { grid-area: nav; justify-content: start; }
  .header__actions { grid-area: actions; }
  .hero__content { text-align: left; }
  .cards { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .circ__orbit { width: 380px; height: 380px; }
  .circ__item { width: 220px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* RTL tweaks */
[dir="rtl"] .nav__link::after { transform-origin: right; }
[dir="rtl"] .tooltip { left: auto; right: 22px; }
[dir="rtl"] .tooltip--ne { right: 18px; top: -34px; left: auto; }
[dir="rtl"] .tooltip--e  { right: 22px; top: -6px; left: auto; }
[dir="rtl"] .tooltip--se { right: 18px; top: 18px; left: auto; }
[dir="rtl"] .tooltip--w  { left: 22px; top: -6px; right: auto; }
[dir="rtl"] .tooltip--nw { left: 18px; top: -34px; right: auto; }
[dir="rtl"] .tooltip--sw { left: 22px; right: auto; top: 18px; }
[dir="rtl"] .point__label { left: auto; right: 22px; }