/* ══════════════════════════════════════════════════════════
   زاگرس — حمل و نقل بار
   Palette: Persian tilework turquoise on limestone.
   Type:    Vazirmatn variable (OFL), weight-driven hierarchy.
   ══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ground:  #EDEFEA;   /* limestone, biased green toward the accent */
  --surface: #F7F8F5;
  --raised:  #FFFFFF;
  --ink:     #101B1A;
  --muted:   #5E706C;
  --accent:  #0E8A84;   /* tile turquoise — the only accent */
  --accent-soft: rgba(14, 138, 132, 0.10);
  --figure:  #B8731A;   /* saffron — price figures only */
  --line:    rgba(16, 27, 26, 0.13);
  --line-soft: rgba(16, 27, 26, 0.07);
  --shadow:  0 1px 2px rgba(16,27,26,.05), 0 8px 24px -12px rgba(16,27,26,.16);
  --ridge:   rgba(14, 138, 132, 0.16);

  --shell: 74rem;
  --step:  clamp(1.25rem, 0.9rem + 1.4vw, 2rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0A1413;
    --surface: #0E1B1A;
    --raised:  #132322;
    --ink:     #E8EDEA;
    --muted:   #93A7A2;
    --accent:  #2CBFB5;
    --accent-soft: rgba(44, 191, 181, 0.13);
    --figure:  #E0A24A;
    --line:    rgba(232, 237, 234, 0.15);
    --line-soft: rgba(232, 237, 234, 0.08);
    --shadow:  0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.6);
    --ridge:   rgba(44, 191, 181, 0.17);
    color-scheme: dark;
  }
}

/* Viewer's explicit toggle must win over the media query, both directions. */
:root[data-theme='dark'] {
  --ground:  #0A1413;
  --surface: #0E1B1A;
  --raised:  #132322;
  --ink:     #E8EDEA;
  --muted:   #93A7A2;
  --accent:  #2CBFB5;
  --accent-soft: rgba(44, 191, 181, 0.13);
  --figure:  #E0A24A;
  --line:    rgba(232, 237, 234, 0.15);
  --line-soft: rgba(232, 237, 234, 0.08);
  --shadow:  0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.6);
  --ridge:   rgba(44, 191, 181, 0.17);
  color-scheme: dark;
}

:root[data-theme='light'] {
  --ground:  #EDEFEA;
  --surface: #F7F8F5;
  --raised:  #FFFFFF;
  --ink:     #101B1A;
  --muted:   #5E706C;
  --accent:  #0E8A84;
  --accent-soft: rgba(14, 138, 132, 0.10);
  --figure:  #B8731A;
  --line:    rgba(16, 27, 26, 0.13);
  --line-soft: rgba(16, 27, 26, 0.07);
  --shadow:  0 1px 2px rgba(16,27,26,.05), 0 8px 24px -12px rgba(16,27,26,.16);
  --ridge:   rgba(14, 138, 132, 0.16);
  color-scheme: light;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.15; }
p { margin: 0; }
img, svg, canvas { max-width: 100%; }

a { color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

/* The header is sticky, so an anchored jump has to stop short of it or the
   section heading lands underneath the bar. */
section[id] { scroll-margin-top: 5.4rem; }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
}
.skip:focus { inset-inline-start: 1rem; }

/* ── Shared type roles ──────────────────────────────────── */
.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: .9rem;
}

.sectitle {
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.secintro {
  color: var(--muted);
  max-width: 56ch;
  margin-top: 1rem;
}

.label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: .85rem;
  padding: 0;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--solid {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: var(--accent);
}
.btn--ghost:hover { --btn-bd: var(--accent); color: var(--accent); }

.btn__icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Brand mark ─────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__tile  { fill: var(--accent); }
.brand__ridge { fill: none; stroke: var(--ground); stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; }
.brand__peak  { fill: var(--ground); }
.brand__word {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--line-soft); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.4rem;
}

.nav__links {
  display: flex;
  gap: 1.6rem;
  margin-inline-start: auto;
  font-size: .95rem;
}
.nav__links a {
  text-decoration: none;
  color: var(--muted);
  transition: color .18s ease;
}
.nav__links a:hover { color: var(--ink); }

/* The two entries that leave the page — the same pair, in the same order and
   the same colour, that leads the phone menu. Tinted so they do not read as
   two more «scroll me somewhere» anchors, and placed first because they are
   errands rather than parts of the page. */
.nav__links .nav__action {
  color: var(--accent);
  font-weight: 700;
}
.nav__links .nav__action:hover { color: var(--accent); text-decoration: underline; }

/* The page you are on, on /join and /track — the row's counterpart to the
   sheet's tinted row. An underline rather than a colour change, so an entry
   that is meant to be in the accent stays in it. */
.nav__links a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.nav__links .nav__action[aria-current] { color: var(--accent); }

/* Stands in for the sheet's group divider: one hairline, so the eye reads two
   groups rather than six links of equal weight. */
.nav__split {
  width: 1px;
  align-self: center;
  height: 1.15em;
  background: var(--line);
}

.nav__actions { display: flex; align-items: center; gap: .6rem; }

.themetoggle {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.themetoggle:hover { border-color: var(--accent); color: var(--accent); }
.themetoggle__icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  .i-sun  { display: none; }
  .i-moon { display: inline; }
}
:root[data-theme='dark'] .i-sun  { display: none; }
:root[data-theme='dark'] .i-moon { display: inline; }
:root[data-theme='light'] .i-sun  { display: inline; }
:root[data-theme='light'] .i-moon { display: none; }

.nav__call { display: inline-flex; align-items: center; gap: .5rem; padding-inline: 1.1rem; }
.nav__call-icon { width: 15px; height: 15px; flex: none; fill: currentColor; }

/* The apps trigger sits between the two: louder than a nav link, quieter than
   the solid call button, so the header reads as one cluster and not two
   competing primaries. */
.appsbtn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.appsbtn:hover { background: color-mix(in srgb, var(--accent) 17%, transparent); border-color: var(--accent); }
.appsbtn__icon,
.appsbtn__caret {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.appsbtn__icon  { width: 16px; height: 16px; stroke-width: 1.8; }
.appsbtn__caret { width: 12px; height: 12px; stroke-width: 2; transition: transform .2s ease; }
.appsbtn[aria-expanded='true'] .appsbtn__caret { transform: rotate(180deg); }

/* Phone-only. Under 860px the link row above is hidden, so this is the direct
   path to /join from the top of the page — everything else moved into the
   sheet that .navmenu opens, and the dock at the bottom only fades in once the
   hero has scrolled past. Outlined, so the call button stays the single filled
   action in the bar. */
.navjoin { display: none; }
.navjoin__icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.navjoin__short { display: none; }

/* The door to the rest of the site on a phone. A quiet circular glyph like the
   theme toggle rather than another pill: the bar already carries a filled call
   button and an outlined «ثبت‌نام», and a third styled control would read as a
   third offer rather than as a way in. */
.navmenu { display: none; }
.navmenu__icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* The row of links goes first, and it goes early. It was already wrapping to a
   second line and spilling out of the bar below about 1000px — live, long
   before any of this — and «پیگیری» becoming «پیگیری درخواست», plus the
   divider, pushed the width it needs up to 1160px. Measured, not guessed: it
   fits at 1160 and wraps at 1140, and closing the gap between the links only
   buys about 40px of that.
   The band had nowhere to put these links until the sheet existed. Now it
   does, so the menu takes over from here down instead of at 860px, and every
   common laptop width (1280 and up) still gets the row. */
@media (max-width: 1160px) {
  .nav__links { display: none; }
  .nav__actions { margin-inline-start: auto; }

  .navmenu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
  }
  .navmenu:hover { border-color: var(--accent); background: var(--accent-soft); }
  .navmenu[aria-expanded='true'] { border-color: var(--accent); background: var(--accent-soft); }
}

@media (max-width: 860px) {
  /* Only from here do the last two buttons hand over as well: a laptop at
     900px has room for «دانلود اپ» and the theme glyph, and folding them away
     that early would cost a main action for no gain.
     Scoped to the header that actually has a sheet: /join and /track carry a
     copy of this bar with no link row and no «دانلود اپ», and hiding their
     theme toggle would take it away with nothing standing in for it. */
  .nav--sheet .themetoggle { display: none; }
  .nav--sheet .appsbtn { display: none; }
  .navjoin {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .85rem;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    border-radius: 999px;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease;
  }
  .navjoin:hover { border-color: var(--accent); background: var(--accent-soft); }
}
/* The bar now carries four controls instead of three, so below 42rem the phone
   number gives up its digits first: the button itself stays (the tel: link and
   its aria-label are untouched) and the number is spelled out again in the hero
   CTA, the footer and the dock — while /join has no other way in from up here. */
@media (max-width: 42rem) {
  .nav__call-num { display: none; }
  .nav__call { padding-inline: .85rem; }
  .nav__inner { gap: .75rem; }
  .navjoin { font-size: .84rem; padding-inline: .7rem; }
}

/* Phone widths: the labelled pill plus the brand, the menu and the call button
   stop fitting, so «ثبت‌نام راننده» shortens. It keeps a word either way — an
   unlabelled truck does not read as a registration link. («دانلود اپ» used to
   drop to its glyph here; it is in the sheet now, so those rules went.) */
@media (max-width: 32rem) {
  .nav__inner { gap: .5rem; }
  .navjoin__long  { display: none; }
  .navjoin__short { display: inline; }
  .navjoin { padding-inline: .62rem; }
  .nav__call { padding-inline: .7rem; }
}

/* The narrowest phones — 320 to 368px, where this bar overflowed its shell even
   before the join button existed. Four controls and a wordmark do not fit, and
   the wordmark is the one thing here that is not a tap target: the mark still
   links home and the page says «زاگرس» in its own title a few lines below. */
@media (max-width: 23rem) {
  .nav__inner { gap: .4rem; }
  .brand { gap: .4rem; }
  .brand__word { display: none; }
  .navjoin { padding-inline: .55rem; }
  .navmenu { width: 34px; height: 34px; }
}

/* ── App menu ───────────────────────────────────────────── */
/* One panel for both triggers. JS pins it under (or over) whichever one was
   used; below 34rem the media query turns it into a bottom sheet and the
   script leaves the position alone. */
.appsmenu {
  position: fixed;
  z-index: 70;
  width: min(23.5rem, calc(100vw - 1.6rem));
  padding: 1rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 24px 60px -20px rgba(16,27,26,.45);
}
.appsmenu[hidden] { display: none; }
.appsmenu:not([hidden]) { animation: appsmenu-in .18s cubic-bezier(.22,.61,.36,1); }
@keyframes appsmenu-in { from { opacity: 0; transform: translateY(6px); } }

.appsmenu__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* Decoration only — clicking away is handled on document, so the scrim never
     swallows a second click on the trigger that opened the panel. Wide screens
     get no tint at all; it would be heavy for a popover this small. */
  pointer-events: none;
  background: transparent;
}
.appsmenu__scrim[hidden] { display: none; }

.appsmenu__group + .appsmenu__group {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}

.appsmenu__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin: 0 .35rem .45rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
}
.appsmenu__ver { font-size: .78rem; font-weight: 600; letter-spacing: 0; color: var(--figure); }

.appsmenu__item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem .7rem;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .16s ease;
}
.appsmenu__item:hover { background: var(--accent-soft); }

.appsmenu__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.appsmenu__body { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.appsmenu__t { font-weight: 700; font-size: .95rem; }
.appsmenu__d { font-size: .8rem; color: var(--muted); }

@media (max-width: 34rem) {
  .appsmenu {
    inset-inline: .8rem;
    bottom: .8rem;
    width: auto;
    border-radius: 20px;
  }
  /* A sheet this size is modal in practice, so here the scrim does take the
     taps — it has to, or a tap meant to dismiss it lands on the page behind. */
  .appsmenu__scrim { background: rgba(4, 12, 11, .42); pointer-events: auto; }
  .appsmenu:not([hidden]) { animation: appsmenu-up .2s cubic-bezier(.22,.61,.36,1); }
  @keyframes appsmenu-up { from { opacity: 0; transform: translateY(16px); } }
}

/* ── Phone link menu ────────────────────────────────────── */
/* Borrows .appsmenu wholesale — the panel shape, the bottom-sheet media query
   and the scrim are the same and must stay the same. Only the rows differ:
   these are destinations with nothing to say about themselves, so they are one
   line each rather than the app menu's icon-plus-description. */
.navsheet__item {
  display: block;
  padding: .72rem .7rem;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  transition: background-color .16s ease;
}
.navsheet__item:hover { background: var(--accent-soft); }
/* The two rows that are errands rather than parts of the page: پیگیری and
   ثبت‌نام راننده. They sit in their own group at the top of the sheet and are
   the only coloured rows in it, because they are why most people open this
   menu at all — everything under them is a section of the home page. */
.navsheet__item--action { color: var(--accent); font-weight: 750; }

/* The page you are already on. A background only, never a colour: on /track
   the row marked this way is «پیگیری», and greying it out would take the
   accent off one of the two rows that are meant to keep it. */
.navsheet__item[aria-current] { background: var(--line-soft); }

/* The two controls the bar handed over. Side by side because neither is a
   destination — one opens a section of this page, the other changes it. */
.navsheet__tools { display: flex; gap: .5rem; }
.navsheet__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 1 1 0;
  min-width: 0;
  padding: .6rem .5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.navsheet__tool:hover { border-color: var(--accent); background: var(--accent-soft); }
.navsheet__tool svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Floating dock ──────────────────────────────────────── */
.dock {
  position: fixed;
  inset-inline-start: 1.25rem;
  bottom: 1.25rem;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: .5rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.dock.is-in { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }

.dock__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 3rem;
  padding-inline: 1.15rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(16,27,26,.55);
  transition: transform .18s ease;
}
.dock__btn:hover { transform: translateY(-2px); }

/* The driver form, carried in the dock because the header's menu is hidden on
   phones — without this, the only way to it from the top of the site is to
   scroll the whole page. Outlined rather than filled so «دانلود اپ» stays the
   one solid button down here. */
.dock__join {
  background: var(--raised);
  border-color: var(--accent);
  color: var(--accent);
}
.dock__join:hover { background: var(--accent); color: #fff; }

/* Three labelled pills do not fit a 320px phone — the dock ran off the edge.
   The truck glyph carries this one on the narrowest screens; «دانلود اپ» keeps
   its word, because a bare download arrow is not worth a tap (same reasoning
   as the header's apps trigger). */
@media (max-width: 24rem) {
  .dock__join { width: 3rem; padding-inline: 0; }
  .dock__join span { display: none; }
}

/* Icon-only: the number is spelled out in the header and the footer, so down
   here it only needs to be reachable. */
.dock__call {
  width: 3rem;
  padding-inline: 0;
  background: var(--raised);
  border-color: var(--line);
  color: var(--ink);
}
.dock__call:hover { border-color: var(--accent); color: var(--accent); }

.dock__icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock__icon--fill { fill: currentColor; stroke: none; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(4rem, 2rem + 9vw, 8.5rem) clamp(3.5rem, 2rem + 6vw, 6rem);
  overflow: hidden;
}

.hero__ridge {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  height: 38%;
  pointer-events: none;
  /* Dissolve the base so the ridge reads as a horizon, not a colour block. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%);
}

.hero__inner { position: relative; }

.hero__title {
  font-size: clamp(2.6rem, 1.4rem + 5.6vw, 5.6rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 16ch;
}
.hero__title-accent { color: var(--accent); }

.hero__lede {
  margin-top: 1.6rem;
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
}

.hero__cta {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.hero__facts {
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.8rem;
}
.fact dt { font-size: .82rem; color: var(--muted); letter-spacing: .04em; }
.fact dd {
  margin: .35rem 0 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fact dd .num { color: var(--figure); }

/* ── Sections + route spine ─────────────────────────────── */
.section {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}
.section--alt { background: var(--surface); }

.sechead { position: relative; margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.2rem); }

/* Station node on the reading (right) edge — the route spine. */
.node {
  position: absolute;
  inset-inline-start: -2.2rem;
  top: .5rem;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}
.node::before {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  top: 100%;
  width: 1px;
  height: 60vh;
  background: linear-gradient(to bottom, var(--line), transparent);
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: top;
}
@media (max-width: 1180px) { .node { display: none; } }

/* ── Estimator ──────────────────────────────────────────── */
.estimator {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .estimator { grid-template-columns: 1fr; } }

.estimator__controls { display: flex; flex-direction: column; gap: 2.2rem; }

.field { border: 0; padding: 0; margin: 0; min-width: 0; }

.choices { display: grid; gap: .6rem; }

.choice {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.choice:hover { border-color: var(--accent); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.choice__dot {
  width: 15px; height: 15px; flex: none;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color .18s ease;
}
.choice:has(input:checked) .choice__dot { border-color: var(--accent); }
.choice:has(input:checked) .choice__dot::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.choice__body { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }
.choice__name { font-weight: 700; }
.choice__meta { font-size: .84rem; color: var(--muted); }
.choice__rate { margin-inline-start: auto; font-weight: 700; font-size: .92rem; color: var(--figure); white-space: nowrap; }

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  margin: 0;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--ground);
  box-shadow: 0 1px 6px rgba(0,0,0,.22);
  cursor: grab;
}
.slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--ground);
  box-shadow: 0 1px 6px rgba(0,0,0,.22);
  cursor: grab;
  border-color: var(--ground);
}
.slider__out {
  display: block;
  margin-top: .9rem;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Ticket — the estimator's readout */
.ticket {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  box-shadow: var(--shadow);
}
.ticket__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .55rem; }
.ticket__k { color: var(--muted); font-size: .92rem; }
.ticket__v { font-weight: 600; }
.ticket__rule { height: 1px; background: var(--line); margin-block: .9rem; }
.ticket__row--total { padding-top: 0; }
.ticket__total {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--figure);
  line-height: 1.2;
}
.ticket__note {
  margin-top: 1rem;
  font-size: .84rem;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: .9rem;
}

.finenote {
  margin-top: 2rem;
  font-size: .86rem;
  color: var(--muted);
  max-width: 70ch;
}

/* ── Fleet ──────────────────────────────────────────────── */
.fleet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.1rem;
}

.truck {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform .2s ease, border-color .2s ease;
}
.truck:hover { transform: translateY(-3px); border-color: var(--accent); }

.truck__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.truck__rate { font-size: 1.5rem; font-weight: 800; color: var(--figure); letter-spacing: -0.02em; line-height: 1.2; }
.truck__rate small { font-size: .82rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.truck__spec { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; padding-block: .4rem; border-top: 1px solid var(--line-soft); }
.truck__spec dt { color: var(--muted); }
.truck__spec dd { margin: 0; font-weight: 600; }
.truck__use { font-size: .9rem; color: var(--muted); margin-top: auto; }

/* ── Steps ──────────────────────────────────────────────── */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.6rem;
  counter-reset: step;
}
.step { position: relative; padding-top: 2.6rem; border-top: 2px solid var(--line); }
.step__n {
  position: absolute;
  top: -0.05rem;
  inset-inline-start: 0;
  transform: translateY(-55%);
  background: var(--ground);
  padding-inline-end: .7rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
}
.section--alt .step__n { background: var(--surface); }
.step__t { font-size: 1.12rem; font-weight: 700; margin-bottom: .5rem; }
.step__d { color: var(--muted); font-size: .93rem; }

/* ── Cards ──────────────────────────────────────────────── */
/* Six cards: explicit tracks so they break 3+3, never a lopsided 4+2. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 40rem)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem)  { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-3px); }
.card__t { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.card__d { color: var(--muted); font-size: .93rem; }

/* ── Customer app ───────────────────────────────────────── */
.capp {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 1rem + 3vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .capp { grid-template-columns: 1fr; } }

.capp__copy { position: relative; }
.capp__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.capp__meta {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  font-size: .85rem;
  color: var(--muted);
}
.capp__meta > span + span::before {
  content: '·';
  margin-inline-end: .6rem;
  color: var(--line);
}
.capp__meta .num { color: var(--figure); }

/* ── Drivers ────────────────────────────────────────────── */
.section--drivers { background: var(--surface); }
.drivers {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 1rem + 3vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .drivers { grid-template-columns: 1fr; } }

.drivers__copy { position: relative; }
.drivers__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.drivers__list,
.capp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
}
.drivers__list li,
.capp__list li {
  padding: 1rem 0 1rem 0;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.drivers__list li:last-child,
.capp__list li:last-child { border-bottom: 1px solid var(--line); }
.drivers__list li::before,
.capp__list li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* ── Footer ─────────────────────────────────────────────── */
/* The footer carries the contact details, so it is a real section, not a
   one-line legal strip. */
.foot {
  border-top: 1px solid var(--line);
  padding-block: 3rem 2rem;
  /* The drivers section above is --surface; keep the alternation going. */
  background: var(--ground);
}
.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}
@media (max-width: 62rem) { .foot__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 40rem) { .foot__inner { grid-template-columns: 1fr; gap: 2rem; } }

.foot__col { display: grid; gap: .9rem; align-content: start; }
.foot__brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.foot__note { color: var(--muted); font-size: .9rem; max-width: 34ch; }

/* The brand column also carries the postal address; its own grid so the label
   sits tight above the lines instead of inheriting the column's 0.9rem gap. */
.foot__addr { display: grid; gap: .55rem; margin-top: .3rem; }
.foot__addr address {
  font-style: normal;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.9;
  max-width: 34ch;
}

.foot__h {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--muted);
}

/* «نشانی دفتر» is not a quiet column label like the other two headings: it
   carries the brand tile and sits in ink, so the first column reads as one
   identity block — who we are, then where we are. Sized off .foot__brand
   exactly: inherit undoes .foot__h's .8rem, normal undoes its .09em tracking,
   and the mark keeps .brand__mark's own 30px. Must stay BELOW .foot__h — same
   specificity, so source order is the only thing that lets it win. */
.foot__h--brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: inherit;
  letter-spacing: normal;
  color: var(--ink);
}

.foot__phones { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot__phone {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: color .18s ease;
}
.foot__phone:hover { color: var(--accent); }
.foot__range { font-size: .8rem; font-weight: 400; color: var(--muted); }

.foot__links { display: grid; gap: .45rem; font-size: .92rem; }
.foot__links a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
.foot__links a:hover { color: var(--accent); }

.foot__copy {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .84rem;
  color: var(--muted);
}
/* Narrow screens run the copyright line the full width, straight under the
   floating dock — leave it room. */
@media (max-width: 40rem) { .foot__copy { padding-bottom: 3.4rem; } }

/* ── Reveal ─────────────────────────────────────────────── */
/* Only hide when JS is present to bring it back (see the head script). */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}