/* ============================================================================
   Brick Auction — landing page (redesign: "Warm Monochrome")
   A white content card floats on a light field; the page chrome stays
   monochrome (charcoal ink + ONE warm neutral scale, both derived from the 2026
   brand sand #E8E0D2 — the same colour the logo mark sits on). The brand
   palette proper appears ONLY inside the phone/auction mockups, which represent
   the real customer & supplier apps and therefore mirror
   services/shared/design-tokens/src/tokens.js exactly.
   Persian/RTL, Vazirmatn, self-hosted, no build step.
   ========================================================================== */

/* ── Fonts (self-hosted — never load Google Fonts at runtime in Iran) ─────── */
@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/vazirmatn-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  /* Arabic / Persian range — keeps the latin file out of Persian rendering. */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/vazirmatn-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2190, U+2191, U+2193, U+2212, U+2713;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* landing chrome — warm monochrome: charcoal ink on a sand-derived neutral
     scale. Every step is a tint/shade of the brand sand #E8E0D2 so the chrome
     belongs to the same family as the mockups without competing with them. */
  --field: #e8e0d2;        /* brand sand at full strength — the field/edging */
  --card: #ffffff;
  --ink: #263238;          /* brand charcoal — accents, buttons, headings */
  --text: #263238;
  --text-2: #4a443b;       /* nav links */
  --muted: #5c564b;        /* body copy (7.3:1 on the card) */
  --muted-2: #918878;      /* subtle labels — mockup-internal (role=img, exempt) */
  --muted-strong: #6f675a; /* AA-passing (≥4.5:1 on light bg) secondary chrome text */
  --line: #eae3d6;
  --line-2: #dcd3c2;       /* button/outline borders */
  --surface-1: #fbf8f3;    /* hero wash / features band */
  --surface-2: #f5f1ea;    /* cards, tiles */
  --surface-3: #efe9de;
  --surface-4: #f0ede5;
  --footer-bg: #f6f2ea;

  /* success / auction accent (also used inside mockups) — semantic, NOT brand:
     deliberately left un-tinted so "leading / won" never reads as decoration. */
  --green: #1e7b4f;
  --green-soft: rgba(46, 158, 104, 0.12);

  /* app-brand palette — used inside the phone/auction mockups and the supplier
     path CTA. Values mirror services/shared/design-tokens/src/tokens.js; renamed
     away from the old --navy/--gold because those names now describe nothing. */
  --brand-ink: #263238;      /* = primary900 */
  --brand-ink-700: #3e515b;  /* = primary700 */
  --brand-ink-800: #2f3e46;  /* = primary800 */
  --brand-accent: #b6533c;   /* = accent500, the brick terracotta */
  /* The mockups' on-charcoal accent (= the apps' `goldSoft`, #F5B3A3) has no
     token here: it only ever appears as a `stroke=` on the inline SVG icons in
     index.html, where a literal is safer than var() on a presentation
     attribute. Terracotta itself is 3.3:1 on charcoal — never use it there. */
  --brand-paper: #faf7f0;    /* = the apps' page bg */
  --brand-line: #e8e0d2;     /* = the apps' border/divider */

  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: "Vazirmatn", "Tahoma", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Horizontal gutter for every full-width section. Section backgrounds run
     edge-to-edge; this gutter keeps their CONTENT centred at --maxw on wide
     screens (the max() term) while falling back to clamp() edge padding on
     narrow screens (where the centring term goes negative). */
  --pad-x: max(clamp(20px, 5vw, 56px), calc((100% - var(--maxw)) / 2));
}

/* ── Reset & base ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  font-family: var(--font);
  background: var(--card);
  color: var(--text);
  line-height: 1.7;
  font-weight: 400;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}

/* ── Accessibility helpers ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -64px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 16px;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Skip-link target: focusable via tabindex=-1, but suppress the ring on the
   whole main region (the scroll + focus move is the feedback). */
#main:focus {
  outline: none;
}

/* ── Page shell ────────────────────────────────────────────────────────── */
/* Edge-to-edge: the content surface fills the viewport (no floating card, no
   gray field). Section backgrounds run full-width; --pad-x centres each
   section's content at --maxw. */
.page {
  padding: 0;
}
.card {
  position: relative;
  background: var(--card);
  overflow: hidden;
  color: var(--text);
}

/* ── Brand mark ────────────────────────────────────────────────────────── */
/* The official «چک» mark. It IS the wordmark, so it stands alone — there is no
   brand text beside it; the anchor's aria-label carries the accessible name.
   Deliberately NOT set on a circle/tile, and not recoloured: the artwork keeps
   its own terracotta + charcoal (the only place brand colour appears in this
   otherwise monochrome page). Both placements sit on light grounds (card and
   --footer-bg), so the light-background variant is the correct one. */
.brand {
  display: inline-flex;
  align-items: center;
}
.brand__mark {
  display: block;
  /* Fixed height, auto width — the intrinsic ratio must never be stretched. */
  height: 34px;
  width: auto;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 14px;
  /* A <button> does NOT inherit font-family — browsers give it the system UI
     font. Every .btn on the marketing page happens to be an <a>, so this only
     surfaced once the shop added real buttons («افزودن به سبد», «مشاهدهٔ سبد خرید»),
     which rendered in Tahoma/system instead of Vazirmatn. */
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn--sm {
  padding: 11px 24px;
  border-radius: 12px;
  font-size: 0.94rem;
}
.btn--dark {
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover {
  background: #2f3e46;
}
.btn--outline {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--outline:hover {
  border-color: var(--ink);
}
.btn--supplier {
  background: var(--brand-accent);
  color: #fff;
  border-color: var(--brand-accent);
}
.btn--supplier:hover {
  background: #9f4734;
  border-color: #9f4734;
  color: #fff;
}
.btn--light {
  background: #fff;
  color: var(--ink);
  padding: 15px 34px; /* match the design's wider, less-rounded CTA-band button */
  border-radius: 12px;
}
.btn--light:hover {
  background: #f5f1ea;
}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: clamp(18px, 3vw, 26px) var(--pad-x);
  position: relative;
  z-index: 10;
}
.nav__links {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.nav__links a:hover {
  color: var(--ink);
}
/* The shop tab (/products) — the only centre link that leaves this page, and
   therefore the only one that survives the ≤1250px collapse below. */
.nav__shop {
  color: var(--ink);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-inline-start: auto;
}
.nav__signin {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.nav__signin:hover {
  color: var(--muted);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding: 40px var(--pad-x) 70px;
  background: linear-gradient(180deg, var(--surface-1) 0%, #ffffff 100%);
}
.hero__title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  color: var(--muted);
  max-width: 44ch;
  margin-bottom: 34px;
}
.hero__paths {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.pathbtn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 30px;
  border-radius: 14px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pathbtn:hover {
  transform: translateY(-3px);
}
.pathbtn__role {
  font-size: 16px;
  font-weight: 800;
}
.pathbtn__hint {
  font-size: 12px;
  font-weight: 500;
}
.pathbtn--customer {
  background: var(--ink);
  color: #fff;
}
.pathbtn--customer:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}
.pathbtn--customer .pathbtn__hint {
  opacity: 0.7;
}
.pathbtn--supplier {
  background: var(--brand-accent);
  color: #fff;
  border: 1px solid var(--brand-accent);
}
.pathbtn--supplier:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.1);
}
.pathbtn--supplier .pathbtn__hint {
  color: rgba(255, 255, 255, 0.78);
}

/* ── Dual-phone mockup ─────────────────────────────────────────────────── */
/* Centre the fixed-size stage with flexbox. `justify-content:center` keeps it
   centred even when it is a little wider than the column — its overflow spills
   symmetrically into the empty gutter rather than pinning to the RTL edge the
   way `margin-inline:auto` would; the stage must not shrink, hence flex:0 0 auto.
   On narrow screens `zoom` (below) shrinks the layout box so it fits. */
.hero__visual {
  display: flex;
  justify-content: center;
}
/* Two 240px phones with a 28px breathing gap between them: back pinned to the
   stage's left edge, front to its right edge inside the 508px stage. */
.phone-stage {
  position: relative;
  flex: 0 0 auto;
  width: 508px;
  height: 640px;
}
.phone {
  position: absolute;
  top: 20px;
  width: 240px;
  height: 600px;
  background: #1a2226;
  border-radius: 40px;
  padding: 10px;
}
.phone--back {
  left: 0;
  z-index: 1;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.18);
}
.phone--front {
  right: 0;
  z-index: 2;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.28);
}
.phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 19px;
  background: #1a2226;
  border-radius: 999px;
  z-index: 5;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--brand-paper);
  color: var(--brand-ink);
}
.phone__label {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.phone__label--light {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--field);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.phone__label--dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

/* status bar */
.pm-statusbar {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-ink);
  z-index: 4;
  letter-spacing: 0.3px;
}
.pm-statusbar__icons {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* scaled screen content — matches the design's 0.7 downscale at 143% width */
.pm-scale {
  padding: 46px 13px 74px;
  transform: scale(0.7);
  transform-origin: top right;
  width: 143%;
}

/* header */
.pm-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}
.pm-header__id {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
.pm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--brand-ink-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-accent);
}
.pm-avatar--factory {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-ink-700), var(--brand-ink));
}
.pm-header__text {
  text-align: right;
}
.pm-header__greet {
  font-size: 10px;
  color: var(--muted-2);
}
.pm-header__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-top: 1px;
}
.pm-bell {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--brand-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-ink);
}
.pm-bell__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d92d20;
  border: 2px solid #fff;
}

/* wallet card */
.pm-wallet {
  position: relative;
  border-radius: 20px;
  padding: 15px;
  background: linear-gradient(135deg, var(--brand-ink-800), var(--brand-ink));
  overflow: hidden;
}
.pm-wallet__blob {
  position: absolute;
  top: -30px;
  left: -24px;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: rgba(182, 83, 60, 0.12);
}
.pm-wallet__top {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.pm-wallet__chip {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(182, 83, 60, 0.4);
  border-radius: 999px;
  padding: 4px 9px;
  color: #fff;
  font-size: 10.5px;
}
.pm-wallet__label {
  position: relative;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10.5px;
  text-align: right;
  margin-top: 12px;
}
.pm-wallet__amount {
  position: relative;
  text-align: right;
  margin-top: 3px;
}
.pm-wallet__num {
  font-size: 23px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.pm-wallet__num--lg {
  font-size: 24px;
}
.pm-wallet__unit {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.pm-wallet__actions {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  margin-top: 14px;
}
.pm-wallet__btn {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 5px;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 700;
}
.pm-wallet__btn--accent {
  background: var(--brand-accent);
  color: #fff;
}
.pm-wallet__btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* quick-action tiles */
.pm-quick {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  margin-top: 14px;
}
.pm-tile {
  position: relative;
  flex: 1;
  border-radius: 16px;
  padding: 13px;
  min-height: 104px;
  overflow: hidden;
}
.pm-tile--ink {
  background: linear-gradient(135deg, var(--brand-ink-700), var(--brand-ink));
}
.pm-tile--paper {
  background: #fff;
  border: 1px solid var(--brand-line);
}
.pm-tile__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(182, 83, 60, 0.22);
}
.pm-tile__icon--green {
  background: #e0f4ea;
}
.pm-tile__badge {
  position: absolute;
  top: -5px;
  left: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-tile__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink);
  text-align: right;
  margin-top: 11px;
}
.pm-tile__title--light {
  color: #fff;
}
.pm-tile__sub {
  font-size: 10px;
  color: var(--muted-2);
  text-align: right;
  margin-top: 2px;
}
.pm-tile__sub--light {
  color: rgba(255, 255, 255, 0.6);
}

/* orders link (customer only) */
.pm-orderlink {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink-700);
}

/* stat pills */
.pm-stats {
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  margin-top: 12px;
}
.pm-stat {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  padding: 9px 8px;
}
.pm-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
.pm-stat__icon--green {
  background: #e0f4ea;
}
.pm-stat__icon--amber {
  background: #fef0c7;
}
.pm-stat__icon--blue {
  background: #dfe4e7;
}
.pm-stat__text {
  text-align: right;
}
.pm-stat__num {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}
.pm-stat__label {
  font-size: 9px;
  color: var(--muted-2);
}

/* section head inside the phone */
.pm-section-head {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.pm-section-head__text {
  text-align: right;
}
.pm-section-head__title {
  font-size: 13.5px;
  font-weight: 800;
}
.pm-section-head__sub {
  font-size: 10px;
  color: var(--muted-2);
  margin-top: 1px;
}
.pm-section-head__all {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand-ink-700);
}

/* list card (live auction / active bid) */
.pm-listcard {
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
}
.pm-listcard--lead {
  border-right: 3px solid var(--brand-accent);
}
.pm-listcard__top {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.pm-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
}
.pm-badge--live,
.pm-badge--lead {
  color: var(--green);
  background: #e0f4ea;
}
.pm-timer {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: #b25e09;
  letter-spacing: 0.5px;
}
.pm-listcard__title {
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}
.pm-listcard__meta {
  font-size: 11px;
  color: var(--muted-2);
  text-align: right;
  margin-top: 3px;
}
.pm-listcard__prices {
  display: flex;
  flex-direction: row-reverse;
  gap: 16px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--brand-line);
}
.pm-price {
  text-align: right;
}
.pm-price__label {
  font-size: 9.5px;
  color: var(--muted-2);
  margin-bottom: 2px;
}
.pm-price__val {
  font-size: 13px;
  font-weight: 800;
}
.pm-price__val--green {
  color: var(--green);
}
.pm-price__val span {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted-2);
}

/* bottom fade + tab bar */
.pm-fade {
  position: absolute;
  bottom: 44px;
  left: 0;
  right: 0;
  height: 46px;
  background: linear-gradient(to top, var(--brand-paper), rgba(250, 247, 240, 0));
  pointer-events: none;
  z-index: 3;
}
.pm-tabbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  border-top: 1px solid var(--brand-line);
  padding: 8px 6px 10px;
}
.pm-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #b6ac9a;
  font-size: 8.5px;
}
.pm-tab--active {
  color: var(--brand-ink);
  font-weight: 700;
}

/* ── Feature rows (customer / supplier) ────────────────────────────────── */
.feature-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 56px var(--pad-x);
}
.feature-row--reverse {
  grid-template-columns: 1.1fr 0.9fr;
  padding: 24px var(--pad-x) 64px;
}
.feature-row__title {
  font-size: clamp(1.6rem, 3.4vw, 2.375rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.feature-row__text {
  font-size: clamp(1rem, 2vw, 1.0625rem);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 26px;
}
.checklist {
  display: grid;
  gap: 16px;
  margin-bottom: 30px;
}
.checklist li {
  position: relative;
  padding-inline-start: 24px;
  font-size: 16px;
}
.checklist li::before {
  content: "›";
  position: absolute;
  inset-inline-start: 0;
  color: var(--ink);
  font-weight: 700;
}

/* customer art wrapper (gradient tile holding the auction card) */
.feature-row__art {
  display: flex;
  align-items: center;
  justify-content: center;
}
#customer .feature-row__art {
  background: linear-gradient(150deg, #f5f1ea, #e8e0d2);
  border-radius: 24px;
  aspect-ratio: 1 / 1;
  /* overflow:visible (not hidden) so the tile grows past the square when the
     card is taller than the column is wide — otherwise the leaderboard card is
     clipped on every viewport where the column is narrower than the card. */
  overflow: visible;
  padding: 34px;
}

/* ── Auction card (customer leaderboard mockup) ────────────────────────── */
.auction-card {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 22px;
  padding: 24px 22px;
  box-shadow: 0 20px 44px rgba(38, 50, 56, 0.12);
  overflow: hidden;
}
.auction-card__edge {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 6px;
  background: linear-gradient(180deg, #263238, #3e515b);
}
.auction-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
}
.chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.chip__dot--dark {
  background: var(--ink);
}
.chip__dot--green {
  width: 7px;
  height: 7px;
  background: #2e9e68;
}
.chip--neutral {
  background: #f0eae0;
}
.chip--green {
  color: var(--green);
  background: var(--green-soft);
}
.chip--strong {
  font-weight: 800;
}
.chip--soft {
  background: #eae3d6;
}
.chip--stamp {
  font-weight: 800;
  color: var(--ink);
  background: #ece5d8;
  padding: 8px 14px;
}
.auction-card__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.auction-card__meta {
  font-size: 13px;
  color: var(--muted-2);
  margin-top: 3px;
}
.auction-card__label {
  font-size: 13px;
  color: var(--muted-2);
  margin: 18px 0 4px;
}
.auction-card__pricerow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.auction-card__price {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.auction-card__unit {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-2);
}
.auction-card__leaders {
  display: grid;
  gap: 8px;
}
.leader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  border-radius: 12px;
  background: #f6f2ea;
  font-size: 13px;
  color: var(--muted);
}
.leader__val {
  font-weight: 700;
  color: var(--ink);
}
.leader--top {
  background: var(--ink);
  color: #fff;
}
.leader--top .leader__val {
  color: #fff;
  font-weight: 800;
}
.leader__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.leader__tag {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
  padding: 2px 8px;
  border-radius: 999px;
}
.auction-card__foot {
  font-size: 12px;
  color: var(--muted-2);
  text-align: center;
  margin-top: 14px;
}

/* ── Features band ─────────────────────────────────────────────────────── */
.section-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 48px;
}
.section-head__title {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 8px;
}
.section-head__sub {
  font-size: 16px;
  color: var(--muted-strong);
}
.features {
  padding: 64px var(--pad-x);
  background: var(--surface-1);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature-card {
  position: relative;
  border-radius: 20px;
  padding: 34px 30px;
  min-height: 230px;
}
.feature-card--a {
  background: var(--surface-2);
}
.feature-card--b {
  background: var(--surface-3);
}
.feature-card--c {
  background: var(--surface-4);
}
.feature-card__icon {
  position: absolute;
  top: 28px;
  left: 30px;
  color: var(--ink);
}
.feature-card__title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
  max-width: 12ch;
}
.feature-card__text {
  font-size: 15px;
  color: var(--muted);
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq {
  padding: 64px var(--pad-x);
}
.faq__grid {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr;
  gap: 32px;
  align-items: start;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 4px;
}
.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.faq-item__q::-webkit-details-marker {
  display: none;
}
.faq-item__plus {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s var(--ease);
  display: inline-block;
}
.faq-item[open] .faq-item__plus {
  transform: rotate(45deg);
}
.faq-item__a {
  font-size: 15px;
  color: var(--muted);
  margin-top: 14px;
}
.faq__aside {
  background: var(--surface-2);
  border-radius: 20px;
  padding: 34px 30px;
  text-align: center;
}
.faq__aside-title {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 10px;
}
.faq__aside-text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 22px;
}
.faq__aside .btn {
  padding: 13px 28px;
  border-radius: 12px;
  font-size: 15px;
}

/* ── Dark CTA band ─────────────────────────────────────────────────────── */
.cta-band {
  padding: 0 var(--pad-x) 64px;
}
.cta-band__inner {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  border-radius: 28px;
  padding: clamp(48px, 8vw, 72px) 40px;
  text-align: center;
}
.cta-band__title {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}
.cta-band__sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 30px;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer {
  background: var(--footer-bg);
  padding: 56px var(--pad-x) 30px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 28px;
}
.footer .brand {
  margin-bottom: 14px;
}
.footer__tagline {
  font-size: 14px;
  color: var(--muted-strong);
  max-width: 30ch;
}
.footer__col-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 16px;
}
.footer__col ul {
  display: grid;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}
.footer__col a:hover {
  color: var(--ink);
}
.footer__contact {
  color: var(--muted);
}
.footer__base {
  border-top: 1px solid var(--line);
  margin-top: 36px;
  padding-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--muted-strong);
}

/* ── Scroll-reveal (progressive enhancement) ───────────────────────────── */
/* ⚠️ Gated on `.js`, which an inline script in <head> adds before first paint.
   Without that gate, `opacity: 0` is the DEFAULT state and only JavaScript ever
   removes it — so a blocked, failed or slow script left 20 elements on the home
   page permanently invisible, including two <h2>s and their body copy. Verified
   with JS disabled: 20 of 20 stayed at opacity 0.

   Googlebot does render JavaScript, so this was not an indexing outage — but
   content whose visibility depends on a third-party-adjacent script is content
   that can vanish, and an element at opacity 0 is also disqualified from being
   the LCP candidate. The hero h1 carries no `reveal` class at all for that
   second reason. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
/* Hero collapses first and early: the 470px dual-phone stage needs a genuinely
   wide right-hand column, so we keep two columns only on large desktops. */
@media (max-width: 1250px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    padding-bottom: 40px;
  }
  .hero__sub {
    margin-inline: auto;
  }
  .hero__paths {
    justify-content: center;
  }
  .hero__visual {
    order: -1; /* phones above the copy when stacked */
  }
  /* Below the wide-desktop layout the nav has no room for the centre links;
     the CTAs (register) remain, and every in-page target is reachable by
     scrolling. «محصولات» is the exception — it is a separate page, which
     scrolling cannot reach, so that one link stays and takes a pill shape to
     read as a tab (and to keep a comfortable tap target). */
  .nav__links a:not(.nav__shop) {
    display: none;
  }
  .nav__shop {
    padding: 9px 14px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
  }
}

@media (max-width: 960px) {
  .feature-row,
  .feature-row--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px var(--pad-x);
  }
  #customer .feature-row__art,
  #supplier .feature-row__art {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }
  #customer .feature-row__art {
    order: 1; /* copy first, illustration below */
  }
  .feature-row__text {
    max-width: none;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .features__grid {
    grid-template-columns: 1fr;
  }
  .faq__grid {
    grid-template-columns: 1fr;
  }
}

/* Scale the fixed-size phone composition down to fit narrow viewports.
   `zoom` scales the layout box (not just the paint), so the stage stays
   narrower than its container and stays centred. Values are tuned so the 508px
   stage never exceeds the content width at any viewport in the bracket. */
@media (max-width: 620px) {
  .phone-stage {
    zoom: 0.7;
  }
}

@media (max-width: 520px) {
  .nav {
    flex-wrap: wrap;
  }
  .nav__signin {
    display: none;
  }
  .hero__paths {
    flex-direction: column;
  }
  .pathbtn {
    width: 100%;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 440px) {
  .phone-stage {
    zoom: 0.56;
  }
}

@media (max-width: 360px) {
  .phone-stage {
    zoom: 0.48;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}