/* =============================================================================
   Захиалгын үйлдвэрийн систем — product page (dark industrial theme)
   Sibling of the LMS page: same anatomy, steel skin. Blueprint grid, mono
   station codes, corner brackets, hazard stripes, a running conveyor.
   ========================================================================== */

:root {
  --kt-accent: #F94803;
  --bg: #101318;
  --band: #0C0F14;
  --panel: #161A21;
  --panel-grad: linear-gradient(180deg, #151922 0%, #11141B 100%);
  --cell: #13161D;
  --ink: #E9EBF1;
  --bullet: #C3C7D1;
  --mut: #9AA0AE;
  /* Handoff soft is #6B7280 (3.1:1 here); lifted to clear AA on small text. */
  --soft: #8A91A1;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .05);
  --tint: rgba(249, 72, 3, .09);
  --tint-2: rgba(249, 72, 3, .26);
  --tint-3: rgba(249, 72, 3, .45);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad-x: clamp(20px, 5vw, 72px);
  --pad-y: clamp(70px, 11vh, 130px);
  --maxw: 1160px;
  --r: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', 'Helvetica Neue', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* blueprint paper */
  background-image:
    linear-gradient(rgba(126, 146, 180, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 146, 180, .06) 1px, transparent 1px);
  background-size: 44px 44px;
}

h1, h2, h3, p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ink); text-decoration: none; transition: color .2s; }
a:hover { color: var(--kt-accent); }
img { max-width: 100%; display: block; }
button { font: inherit; }
::selection { background: var(--kt-accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 3px; }

.f-skip {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  padding: 10px 18px; border-radius: 6px;
  background: var(--kt-accent); color: var(--bg); font-weight: 800; font-size: 13px;
  transform: translateY(-160%); transition: transform .3s;
}
.f-skip:focus-visible { transform: translateY(0); }

/* ---------- Reading progress -------------------------------------------- */
.f-progress { position: fixed; inset: 0 0 auto 0; z-index: 70; height: 2px; pointer-events: none; }
.f-progress i { display: block; height: 100%; width: 0; background: var(--kt-accent); }

/* ---------- Nav ---------------------------------------------------------- */
.f-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px var(--pad-x);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s;
}
.f-nav.is-scrolled {
  background: rgba(16, 19, 24, .82);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.f-logo { display: block; width: clamp(84px, 10vw, 104px); color: var(--ink); }
.f-logo svg { width: 100%; height: auto; display: block; }
.f-nav__links { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 26px); font-size: 13.5px; font-weight: 700; }
.f-nav__back { color: var(--mut); }
.f-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.24); }
.f-lang a { color: var(--mut); }
.f-lang a[aria-current] { color: var(--ink); cursor: default; }
.f-pill {
  padding: 9px 17px; border-radius: 6px;
  background: var(--kt-accent); color: var(--bg);
  transition: filter .2s, transform .2s;
}
.f-pill:hover { color: var(--bg); filter: brightness(1.1); transform: translateY(-1px); }

/* ---------- Section furniture -------------------------------------------- */
.f-sec { padding: var(--pad-y) var(--pad-x); position: relative; }
.f-sec--band { background: var(--band); }
.f-sec > *, .f-hero__inner { max-width: var(--maxw); margin-inline: auto; }

.f-over {
  font-family: var(--mono);
  font-size: clamp(10.5px, 1.2vw, 12.5px); font-weight: 700;
  letter-spacing: .22em; color: var(--kt-accent);
}

.f-h1 {
  margin-top: clamp(16px, 2.6vh, 26px);
  font-size: clamp(31px, 5.4vw, 66px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.025em;
}
.f-h1 b { color: var(--kt-accent); font-weight: inherit; }
.f-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.f-mask > span { display: block; will-change: transform; }

.f-h2 {
  margin-top: clamp(14px, 2.4vh, 24px);
  font-size: clamp(24px, 4vw, 48px); font-weight: 800;
  line-height: 1.16; letter-spacing: -.02em; text-wrap: balance;
}
.f-dim { color: var(--soft); }
.f-lead {
  margin-inline: 0 auto; margin-top: clamp(14px, 2.2vh, 20px);
  max-width: 64ch; color: var(--mut);
  font-size: clamp(14px, 1.7vw, 16.5px); line-height: 1.7;
}

/* Corner brackets — the industrial tell, drawn with two pseudo elements. */
.f-brackets { position: relative; }
.f-brackets::before, .f-brackets::after {
  content: ''; position: absolute; width: 13px; height: 13px; pointer-events: none;
}
.f-brackets::before { top: -1px; left: -1px; border-top: 2px solid var(--kt-accent); border-left: 2px solid var(--kt-accent); }
.f-brackets::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--kt-accent); border-right: 2px solid var(--kt-accent); }

/* Hazard tape */
.f-hazard { position: relative; }
.f-hazard::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: repeating-linear-gradient(45deg, var(--kt-accent) 0 12px, transparent 12px 24px);
}

/* Pending slots the owner still has to fill — deliberate, not broken. */
.f-pending {
  display: inline-block; padding: 2px 9px;
  border: 1px dashed var(--tint-3); border-radius: 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; color: var(--kt-accent);
  vertical-align: middle;
}
.f-pending[data-on=""] { display: none; }

/* ---------- Hero --------------------------------------------------------- */
.f-hero { padding: clamp(110px, 15vh, 165px) var(--pad-x) clamp(30px, 5vh, 56px); }
.f-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--mut);
}
.f-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--kt-accent); animation: f-blink 1.6s ease-in-out infinite; }
.f-hero__sub { margin-top: clamp(18px, 3vh, 26px); max-width: 62ch; color: var(--mut); font-size: clamp(14.5px, 1.8vw, 17px); line-height: 1.7; }
.f-hero__actions { margin-top: clamp(22px, 3.4vh, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.f-hero__price { margin-top: 16px; color: var(--soft); font-size: 12.5px; line-height: 1.8; }

.f-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 27px; border-radius: 6px;
  background: var(--kt-accent); color: var(--bg); font-weight: 800; font-size: 15px;
  box-shadow: 0 10px 28px rgba(249, 72, 3, .28);
  transition: transform .22s, filter .22s, box-shadow .22s;
}
.f-btn:hover { color: var(--bg); transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 34px rgba(249, 72, 3, .36); }
.f-btn:active { transform: translateY(0); }

.f-textlink {
  font-weight: 700; font-size: 14.5px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--tint-3);
  display: inline-flex; align-items: center; gap: 8px; transition: gap .25s, color .2s;
}
.f-textlink:hover { color: var(--kt-accent); gap: 12px; }

/* ---------- Conveyor demo ------------------------------------------------ */
.f-line {
  margin-top: clamp(30px, 5vh, 52px);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-grad);
}
.f-line__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--mut);
}
.f-line__auto { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--kt-accent); }
.f-line__auto i { width: 6px; height: 6px; border-radius: 50%; background: var(--kt-accent); animation: f-blink 1.6s ease-in-out infinite; }

/* The line is 620px wide and a phone shows about half of it. An unfaded edge
   reads as the end of the diagram, which is the opposite of the truth, so JS
   marks which sides still have track behind them and we fade those. Stations
   snap so the scroll settles on a station rather than between two. */
.f-line { position: relative; }
.f-line__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.f-station { scroll-snap-align: center; }

/* Only a scrollable line carries a cue, so only then does it reserve the strip
   the cue sits in. Anchoring the cue to an offset instead would have to track a
   head that wraps at 320px; reserved space cannot drift out from under it. */
.f-line[data-more] .f-line__inner { padding-bottom: calc(clamp(16px, 2.4vw, 24px) + 26px); }

.f-line__scroll[data-more~="end"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 54px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 54px), transparent);
}
.f-line__scroll[data-more~="start"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 54px);
          mask-image: linear-gradient(90deg, transparent, #000 54px);
}
.f-line__scroll[data-more~="start"][data-more~="end"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 54px, #000 calc(100% - 54px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 54px, #000 calc(100% - 54px), transparent);
}

/* A wordless nudge, so it needs no translation. Reduced motion stops the
   drift via the blanket rule below but keeps the chevron — the affordance is
   information, not decoration. */
.f-line__more {
  position: absolute;
  right: 9px;
  bottom: 11px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--kt-accent);
  font-size: 13px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.f-line[data-more~="end"] .f-line__more { opacity: 1; animation: f-nudge 1.7s ease-in-out infinite; }
@keyframes f-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.f-line__inner { min-width: 620px; padding: clamp(20px, 3vw, 30px) clamp(16px, 2.5vw, 26px) clamp(16px, 2.4vw, 24px); }

.f-carriage { position: relative; height: 46px; }

/* The rail is the full width of the track, so translating it by 10% moves it
   by 10% of the track — which lets the carriage travel on the compositor
   instead of animating `left` and re-laying-out every frame. */
.f-rail { position: absolute; inset: 0; will-change: transform; animation: f-rail 10s cubic-bezier(.5, 0, .3, 1) infinite; }
.f-order {
  position: absolute; top: 0; left: 0; transform: translateX(-35.8%);
  /* Capped so the token can sit centred on its station instead of being
     shoved inward at the ends; the full label stays in the title attribute. */
  max-width: 26%;
  padding: 9px 15px; border: 1px solid var(--tint-2); border-radius: 6px;
  background: var(--cell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  will-change: transform;
  animation: f-order 10s cubic-bezier(.5, 0, .3, 1) infinite;
}
.f-belt {
  position: relative; overflow: hidden;
  height: 10px; margin: 6px 0 14px; border-radius: 3px;
  border: 1px solid var(--line-2); background: var(--cell);
}
.f-belt::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 200%;
  background: repeating-linear-gradient(45deg, var(--tint-2) 0 10px, transparent 10px 20px);
  will-change: transform;
  animation: f-belt 1.1s linear infinite;
}
.f-stations { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.f-station { text-align: center; }
.f-lamp {
  width: 9px; height: 9px; margin: 0 auto 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  animation: f-lamp 10s linear infinite;
}
.f-stage {
  display: block; padding: 7px 6px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel); color: var(--mut);
  font-size: clamp(10.5px, 1.2vw, 12.5px); font-weight: 700;
  animation: f-stage 10s linear infinite;
}
.f-station__auto {
  display: block; margin-top: 7px; font-family: var(--mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--soft);
}
.f-station:nth-child(2) .f-lamp, .f-station:nth-child(2) .f-stage { animation-delay: 2s; }
.f-station:nth-child(3) .f-lamp, .f-station:nth-child(3) .f-stage { animation-delay: 4s; }
.f-station:nth-child(4) .f-lamp, .f-station:nth-child(4) .f-stage { animation-delay: 6s; }
.f-station:nth-child(5) .f-lamp, .f-station:nth-child(5) .f-stage { animation-delay: 8s; }
.f-line:hover .f-rail, .f-line:hover .f-order, .f-line:hover .f-belt::before,
.f-line:hover .f-lamp, .f-line:hover .f-stage { animation-play-state: paused; }

/* ---------- Stats board -------------------------------------------------- */
.f-stats {
  margin-top: clamp(30px, 5vh, 50px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1px;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line);
}
.f-stat { padding: 20px 16px; background: var(--cell); text-align: center; }
.f-stat b {
  display: block; font-family: var(--mono);
  font-size: clamp(24px, 3.6vw, 34px); font-weight: 700;
  letter-spacing: -.02em; color: var(--kt-accent); font-variant-numeric: tabular-nums;
}
.f-stat u { display: block; margin-top: 2px; text-decoration: none; font-size: 12px; font-weight: 800; color: var(--ink); }
.f-stat span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--mut); line-height: 1.45; }

/* ---------- Shop cards --------------------------------------------------- */
.f-shops { margin-top: clamp(28px, 4.5vh, 46px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.f-shop {
  padding: clamp(17px, 2.4vw, 24px); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-grad); transition: transform .3s, border-color .3s;
}
.f-shop:hover { transform: translateY(-4px); border-color: var(--tint-2); }
.f-code { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--kt-accent); }
.f-shop h3 { margin-top: 11px; font-size: clamp(15px, 1.9vw, 17px); font-weight: 800; letter-spacing: -.01em; }
.f-shop p { margin-top: 9px; color: var(--mut); font-size: clamp(12.5px, 1.5vw, 14px); line-height: 1.6; }

/* ---------- Advantage rows ----------------------------------------------- */
.f-adv { margin-top: clamp(28px, 4.5vh, 46px); }
.f-adv__row { display: grid; gap: 8px 30px; padding: clamp(17px, 2.4vh, 24px) 0; border-top: 1px solid var(--line); }
.f-adv__row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .f-adv__row { grid-template-columns: 84px minmax(200px, 1fr) 2fr; align-items: start; } }
.f-adv__row h3 { font-size: clamp(14.5px, 1.8vw, 17px); font-weight: 800; letter-spacing: -.01em; }
.f-adv__row p { color: var(--mut); font-size: clamp(13px, 1.6vw, 15px); line-height: 1.7; }

/* ---------- Module tabs -------------------------------------------------- */
.f-tabs { margin-top: clamp(26px, 4vh, 40px); display: flex; flex-wrap: wrap; gap: 7px; }
.f-tab {
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--mut);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer; transition: background .25s, border-color .25s, color .25s, transform .2s;
}
.f-tab:hover { color: var(--ink); border-color: var(--tint-2); transform: translateY(-1px); }
.f-tab[aria-selected="true"] { background: var(--kt-accent); border-color: var(--kt-accent); color: var(--bg); }

.f-panels { margin-top: 14px; }
.f-panel { padding: clamp(20px, 3.2vw, 32px); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-grad); }
.f-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.f-panel__extra {
  padding: 3px 9px; border: 1px solid var(--tint-2); border-radius: 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--kt-accent);
}
.f-panel__extra[data-on=""] { display: none; }
.f-panel h3 { margin-top: 9px; font-size: clamp(18px, 2.5vw, 25px); font-weight: 800; letter-spacing: -.015em; }
.f-panel__list { margin-top: clamp(15px, 2.2vh, 21px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 13px 26px; }
.f-panel__list li { display: flex; gap: 11px; align-items: flex-start; color: var(--bullet); font-size: clamp(13px, 1.6vw, 15px); line-height: 1.6; }
.f-panel__list i { flex: none; width: 6px; height: 6px; margin-top: 8px; background: var(--kt-accent); }

/* ---------- Price -------------------------------------------------------- */
.f-prices { margin-top: clamp(28px, 4.5vh, 46px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.f-price { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-grad); }
.f-price[data-highlight="1"] { border-color: var(--tint-2); }
.f-price__label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--mut); }
.f-price[data-highlight="1"] .f-price__label { color: var(--kt-accent); }
.f-price__value { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.f-price__unit { font-family: var(--mono); font-size: 13px; color: var(--soft); }
.f-price p { margin-top: 13px; color: var(--mut); font-size: 13.5px; line-height: 1.65; }
.f-price__note { margin-top: 16px; color: var(--soft); font-size: 12.5px; line-height: 1.6; }

/* ---------- FAQ ---------------------------------------------------------- */
.f-faq { margin-top: clamp(26px, 4vh, 42px); display: flex; flex-direction: column; gap: 9px; }
.f-faq__item { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.f-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(15px, 2.2vw, 20px); border: 0; background: transparent; cursor: pointer;
  text-align: left; font-size: clamp(14px, 1.7vw, 16.5px); font-weight: 700; color: var(--ink);
  transition: color .2s;
}
.f-faq__q:hover { color: var(--kt-accent); }
.f-faq__icon {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px;
  background: var(--tint); color: var(--kt-accent); font-style: normal; font-weight: 800; font-size: 15px;
  transition: transform .3s cubic-bezier(.22,.66,.22,1);
}
.f-faq__a { overflow: hidden; }
.f-faq__a p { padding: 0 clamp(15px, 2.2vw, 20px) clamp(16px, 2.4vw, 22px); color: var(--mut); font-size: clamp(13px, 1.6vw, 15px); line-height: 1.7; }

/* ---------- CTA ---------------------------------------------------------- */
.f-cta {
  position: relative; overflow: hidden; border-radius: 14px;
  padding: clamp(34px, 6vw, 66px) clamp(22px, 5vw, 58px);
  border: 1px solid var(--tint-2); background: var(--panel-grad); text-align: center;
}
.f-cta::before, .f-cta::after {
  content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(45deg, var(--kt-accent) 0 12px, transparent 12px 24px);
}
.f-cta::before { top: 0; }
.f-cta::after { bottom: 0; }
.f-cta__glow {
  position: absolute; left: 50%; top: -40%; width: min(90%, 700px); aspect-ratio: 1/1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, var(--tint) 0%, transparent 62%); pointer-events: none;
}
.f-cta__inner { position: relative; max-width: 720px; margin-inline: auto; }
.f-cta__h { margin-top: 14px; font-size: clamp(23px, 3.8vw, 42px); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; }
.f-cta__sub { margin-top: 15px; color: var(--mut); font-size: clamp(14px, 1.7vw, 16.5px); line-height: 1.65; }
.f-cta__actions { margin-top: clamp(22px, 3.6vh, 32px); }
.f-cta__contacts { margin-top: clamp(18px, 3vh, 28px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--mut); font-size: 14px; font-weight: 600; }
.f-cta__contacts a { color: var(--mut); }
.f-cta__contacts a:hover { color: var(--kt-accent); }

/* ---------- Footer ------------------------------------------------------- */
.f-footer {
  border-top: 1px solid var(--line); padding: clamp(26px, 4vh, 40px) var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px; color: var(--soft); font-size: 12px;
}
.f-footer__brand { display: flex; flex-direction: column; gap: 7px; }
.f-footer__brand span { font-size: 11px; letter-spacing: .05em; }
.f-footer__links { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 30px); font-size: 13px; font-weight: 600; }
.f-footer__links a { color: var(--mut); }

/* ---------- Back to top -------------------------------------------------- */
.f-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 17px; cursor: pointer;
  transition: transform .25s, background .25s, color .25s;
}
.f-top:hover { background: var(--kt-accent); color: var(--bg); transform: translateY(-3px); }

/* ---------- Reveals ------------------------------------------------------ */
[data-reveal] { transition-delay: calc(var(--i, 0) * 60ms); }

/* ---------- Keyframes ---------------------------------------------------- */
@keyframes f-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes f-belt  { to { transform: translateX(-56px); } }
/* Two synced transform tracks: the rail steps to the five station centres
   (percentages of the track), the card trims its own offset near the ends so
   it never runs past the edge (percentages of the card). No layout, no paint. */
@keyframes f-rail {
  0%, 16%   { transform: translateX(10%); }
  20%, 36%  { transform: translateX(30%); }
  40%, 56%  { transform: translateX(50%); }
  60%, 76%  { transform: translateX(70%); }
  80%, 100% { transform: translateX(90%); }
}
/* Centred on the station wherever there is room; clamped to the track edge at
   the first and last stop. Values solved for a 26%-wide token, so the worst
   misalignment is 3.7% instead of the 15.3% a guessed offset produced. */
@keyframes f-order {
  0%, 16%   { transform: translateX(-35.8%); }
  20%, 36%  { transform: translateX(-50%); }
  40%, 56%  { transform: translateX(-50%); }
  60%, 76%  { transform: translateX(-50%); }
  80%, 100% { transform: translateX(-64.2%); }
}
@keyframes f-lamp {
  0%, 16%   { background: var(--kt-accent); box-shadow: 0 0 12px rgba(249, 72, 3, .6); }
  20%, 100% { background: rgba(255, 255, 255, .14); box-shadow: none; }
}
@keyframes f-stage {
  0%, 16%   { background: var(--kt-accent); color: #101318; border-color: var(--kt-accent); box-shadow: 0 0 18px rgba(249, 72, 3, .45); }
  20%, 100% { background: var(--panel); color: var(--mut); border-color: var(--line); box-shadow: none; }
}

/* ---------- Touch targets ------------------------------------------------ */
/* Padding plus an equal negative margin grows the hit area without moving
   anything on screen. Only on coarse pointers, where it matters. */
@media (pointer: coarse) {
  .f-nav__links a,
  .f-lang a,
  .f-footer__links a,
  .f-cta__contacts a,
  .f-textlink,
  .f-logo {
    padding-block: 14px;
    margin-block: -14px;
  }
  /* 9.5-10.5px uppercase Cyrillic loses its diacritics on a phone screen.
     The clamps keep their slope; only the floor comes up. */
  .f-station__auto { font-size: 11px; }
  .f-stage { font-size: clamp(11.5px, 1.2vw, 12.5px); }
  .f-over { font-size: clamp(11.5px, 1.2vw, 12.5px); }
  .f-footer small { font-size: 11.5px; }

  .f-tab,
  .f-faq__q,
  .f-skip,
  .f-pill,
  .f-btn { min-height: 44px; }
}

/* ---------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  /* Freeze the line on its first station rather than mid-travel. */
  .f-rail { transform: translateX(10%); }
  .f-order { transform: translateX(-35.8%); }
  .f-station:first-child .f-lamp { background: var(--kt-accent); }
}
.kt-no-motion *, .kt-no-motion *::before, .kt-no-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
.kt-no-motion .f-rail { transform: translateX(10%); }
.kt-no-motion .f-order { transform: translateX(-35.8%); }

@media (max-width: 519px) { .f-nav__back { display: none; } }