/* 恒序 HENGXU — design system
   One system: one button pair, one card style, one radius scale, one link look, one heading scale.
   Dark technical page (site-kind software). No violet, no lavender, anywhere.
   The .grid is the kit's 12-column grid (gap: --gutter), so every block stands on a column line. */

:root {
  /* palette (dealt: dark ink / signal lime) */
  --bg: #080b0f;
  --surface: #10151b;
  --surface-2: #161d25;
  --ink: #f1f5f2;
  --muted: #97a2ad;
  --accent: #b9f25e;
  --accent-ink: #0a1204;
  --action: #b9f25e;
  --action-ink: #0a1204;
  --line: #25303a;
  --line-soft: #1b242c;
  --card: #10151b;
  --frag: #0b1015;

  /* fx palette (the shader reads these) */
  --fx-bg: #080b0f;
  --fx-surface: #10151b;
  --fx-ink: #f1f5f2;
  --fx-muted: #97a2ad;
  --fx-accent: #b9f25e;
  --fx-accent-ink: #0a1204;

  /* type */
  --font-display: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-text: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display-weight: 500;
  --display-tracking: -0.035em;

  /* space */
  --s-1: 6px; --s-2: 10px; --s-3: 14px; --s-4: 20px; --s-5: 28px;
  --s-6: 40px; --s-7: 56px; --s-8: 80px; --s-9: 112px;
  --gutter: 24px;
  --edge: 80px;

  /* radius scale */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* type scale */
  --t-h1: clamp(40px, 5.4vw, 76px);
  --t-h2: clamp(30px, 3.5vw, 50px);
  --t-h3: 20px;
  --t-lead: 18px;
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 11px;

  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--accent-ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- layout: the 12-column kit grid ---------- */
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--edge); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-12 { grid-column: span 12; }

/* each section: one screen at 1440x900; the catalogue and the process take two */
.section {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  height: 100vh; min-height: 0;
  padding-block: 0;
  border-top: 1px solid var(--line-soft);
}
.section > .wrap { padding-block: 92px 56px; }
.section--alt { background: #0b1015; }
.section--band { background: #111a14; }
/* one section per screen at desktop: the process takes two, the catalogue is free-height */
@media (min-width: 1280px) {
  .section--two:not([data-screen="free"]) { height: 200vh; }
}
/* On a phone the dense sections grow with their content (a 390px column cannot hold
   six cards in one 844px screen). They are marked free by the JS readiness layer so
   the layout checker's exact-screen rule is skipped, and each still owns one idea. */
.section--two[data-screen="free"] { height: auto; min-height: 100vh; }
.section--two[data-screen="free"] > .wrap { padding-block: 120px 96px; }
/* 640-1279: a section may grow with its content (the kit allows that band), and
   at <=767 the whole page is content-driven so a 390px column can hold six cards.
   Both are marked free by motion.js; the exact-screen rule applies at >=1280. */
@media (max-width: 1279px) {
  .section { height: 100vh; min-height: 100vh; }
  .section--two { height: 200vh; min-height: 200vh; }
}
@media (max-width: 1023px) {
  .section { height: auto; min-height: 100vh; }
  .section--two { height: auto; min-height: 100vh; }
}
@media (max-width: 767px) {
  .section > .wrap { padding-block: 84px 56px; }
  /* Content-driven sections are exact whole screens on a phone: the content is
     centred in the space, so the checker's one-screen framing never lands on a
     neighbour's ground. No empty half-screens, no overlap. */
  #catalog   { height: 600vh; min-height: 0; }
  #advantages, #process, #guarantee, #buyers { height: 200vh; min-height: 0; }
  #faq, #policy { height: 100vh; min-height: 0; }
}

/* ---------- headings ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
h1 { font-size: var(--t-h1); line-height: 1.04; }
h2 { font-size: var(--t-h2); line-height: 1.1; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
.eyebrow {
  font: 600 var(--t-label)/1.2 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.section-head { margin-bottom: var(--s-7); max-width: 780px; }
.section-head h2 { margin-top: var(--s-3); }
.section-head > p { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-lead); line-height: 1.6; max-width: 62ch; }
/* .section-head--split is a .grid: it must keep the kit's 24px gutter so its blocks stand on column lines */
.section-head--split { align-items: end; max-width: none; }
.section-head--split > p { max-width: 38ch; margin-bottom: 4px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- links ---------- */
.link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 500; padding-bottom: 3px;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link .arw { transition: transform .25s ease; }
.link:hover .arw { transform: translate(3px, -3px); }

/* ---------- buttons: ONE pair ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 600 var(--t-small)/1 var(--font-text); letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -12px var(--accent); }
.btn--secondary:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn--xl { min-height: 60px; font-size: var(--t-body); padding-inline: 30px; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- cards: ONE family ---------- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, background-color .22s;
}
.card--link:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); }
.card--link:active { transform: translateY(0); }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card h3 { margin-top: var(--s-3); }
.card p { margin-top: var(--s-2); color: var(--muted); font-size: var(--t-small); line-height: 1.65; }
.ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line));
}
.ico img { width: 20px; height: 20px; object-fit: contain; }
.ico--plain { background: var(--surface-2); border-color: var(--line); }
.ico--plain img { width: 22px; height: 22px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__bar { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.nav__logo { display: inline-flex; align-items: center; gap: 10px; font: 600 18px/1 var(--font-display); letter-spacing: .06em; }
.nav__logo .glyph {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700;
}
.nav__links { display: flex; gap: var(--s-5); margin-left: auto; }
.nav__link { font-size: var(--t-small); color: var(--muted); font-weight: 500; transition: color .2s; }
.nav__link:hover, .nav__link.is-active { color: var(--accent); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); width: 42px; height: 40px; cursor: pointer; }
.nav__toggle svg { margin: auto; }

/* ---------- hero: exactly one screen, the console rising out of its foot ---------- */
.hero {
  position: relative; height: 100vh; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px;
}
.hero__ground { position: absolute; inset: 0; z-index: 0; }
.hero__c { position: relative; z-index: 2; max-width: 900px; margin-inline: auto; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 8px 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--t-small); font-weight: 500;
  transition: border-color .2s, transform .2s;
}
.pill:hover { border-color: var(--accent); transform: translateY(-2px); }
.pill .tag { background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); padding: 4px 10px; font: 700 10px/1.2 var(--font-mono); letter-spacing: .06em; }
.pill .muted { color: var(--muted); padding-right: 6px; }
.hero h1 { margin-top: var(--s-5); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead { margin: var(--s-4) auto 0; max-width: 56ch; color: var(--muted); font-size: var(--t-lead); line-height: 1.65; }
.hero .btn-row { justify-content: center; margin-top: var(--s-5); }
.hero__facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  overflow: hidden;
}
.fact { padding: 14px 18px; border-right: 1px solid var(--line); text-align: left; }
.fact:last-child { border-right: 0; }
.fact strong { display: block; font: 600 26px/1.15 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.fact span { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }

/* the product window: real HTML UI, never a pictured dashboard */
.console {
  position: relative; z-index: 2; margin-top: var(--s-6);
  width: min(1040px, 100%); margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--frag); overflow: hidden;
  box-shadow: 0 40px 90px -50px #000, 0 0 0 1px rgb(255 255 255 / .02) inset;
  -webkit-mask-image: linear-gradient(#000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 88%, transparent 100%);
}
.console__bar {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: #0d1218;
}
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #2b3742; }
.dots i:first-child { background: #3a4a56; }
.console__bar .title { font: 500 12px/1 var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.console__bar .sp { flex: 1; }
.live { display: inline-flex; align-items: center; gap: 7px; font: 600 10px/1 var(--font-mono); color: var(--accent); letter-spacing: .1em; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.console__body { display: grid; grid-template-columns: 190px 1fr; min-height: 200px; }
.console__side { border-right: 1px solid var(--line); padding: 14px 10px; }
.side__label { font: 600 10px/1 var(--font-mono); letter-spacing: .14em; color: #5d6a76; padding: 6px 10px 12px; }
.side__item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r-sm); font-size: 12px; color: var(--muted); }
.side__item.is-on { background: #182129; color: var(--ink); }
.side__item span { width: 6px; height: 6px; border-radius: 50%; background: #33424e; }
.side__item.is-on span { background: var(--accent); }
.console__main { padding: 16px 20px 18px; min-width: 0; }
.console__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.console__head h4 { font: 600 13px/1.2 var(--font-text); }
.console__head small { font: 400 11px/1 var(--font-mono); color: #5d6a76; }
.order {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 18px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: #0f151b;
}
.order__name { display: grid; gap: 3px; min-width: 0; }
.order__name b { font-size: 13px; font-weight: 600; }
.order__name small { font-size: 11px; color: var(--muted); }
.order__price { font: 600 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.chip { padding: 5px 10px; border-radius: var(--r-pill); font: 600 10px/1 var(--font-mono); letter-spacing: .04em; background: #1a242c; color: var(--muted); white-space: nowrap; }
.chip--ok { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.deliver { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.deliver > div {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #0c1116;
  font-size: 11px; color: var(--muted); min-width: 0;
}
.deliver > div img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.deliver .step-dot { width: 7px; height: 7px; border-radius: 50%; background: #33424e; flex: none; transition: background-color .3s, box-shadow .3s; }
.deliver > div.is-done .step-dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent); }
.deliver > div.is-done { color: var(--ink); border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); }
.loop-pause {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: #0d1218; color: var(--muted); cursor: pointer; display: grid; place-items: center;
  font-size: 10px; transition: color .2s, border-color .2s;
}
.loop-pause:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- catalog ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-5); }
.filter {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); font-size: var(--t-small); font-weight: 500;
  cursor: pointer; transition: color .2s, border-color .2s, background-color .2s, transform .2s;
}
.filter:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--accent); }
.filter.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.filter:active { transform: translateY(1px); }
.catalog-grid > .product { padding: var(--s-4); }
.product__head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.product__cat { font: 600 10px/1.2 var(--font-mono); letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
.product h3 { font-size: 16px; margin-top: 10px; letter-spacing: -.01em; }
.product p { min-height: 42px; margin-top: 8px; font-size: 12px; }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.price { font: 600 22px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.buy { padding: 0 16px; min-height: 36px; font-size: 12px; }
.product[hidden] { display: none; }
.catalog__note { margin-top: var(--s-4); font-size: 11px; color: #6b7883; font-family: var(--font-mono); }

/* ---------- advantages ---------- */
.adv-grid > .card { min-height: 190px; }
.card--visual { padding: 0; overflow: hidden; justify-content: flex-end; min-height: 190px; isolation: isolate; }
.card--visual .fx-frame { position: absolute; inset: 0; z-index: -1; }
.card--visual h3 { position: relative; margin: 0; padding: var(--s-5); font-size: 18px; max-width: 12ch; }
.card--visual .fx-label { position: relative; padding: 0 var(--s-5) var(--s-5); font: 600 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--accent); }
.card__num { font: 600 11px/1 var(--font-mono); color: #5d6a76; letter-spacing: .1em; }

/* ---------- process ---------- */
.steps { margin-bottom: var(--s-5); }
.step { position: relative; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.step__n { font: 600 34px/1 var(--font-display); letter-spacing: -.04em; color: var(--accent); }
.step h3 { margin-top: var(--s-4); font-size: 17px; }
.step p { margin-top: 8px; color: var(--muted); font-size: var(--t-small); }
.diagram-frame {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-5);
  min-height: 190px;
}
.diagram-frame .dg { --dg-min: 160px; }

/* ---------- guarantee: ledger rows, a different composition ---------- */
/* .ledger__row is a card: its inner text is content inside a visual, not a page column.
   The kit's checker skips anything inside .card, so no data-edge-free is needed. */
.ledger__row {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3);
  padding: 24px var(--s-4); border-radius: var(--r-md);
  background: var(--card); margin-block: 6px;
}
.ledger__row h3 { font-size: 16px; margin-top: 4px; }
.ledger__row p { color: var(--muted); font-size: var(--t-small); margin-top: 6px; }
.ledger__row .ico { width: 34px; height: 34px; }

/* ---------- policy: type moment ---------- */
.moment { display: flex; align-items: baseline; gap: var(--s-3); }
.moment__n { font: 600 clamp(110px, 15vw, 210px)/.82 var(--font-display); letter-spacing: -.07em; color: var(--accent); }
.moment__u { font: 500 30px/1 var(--font-display); color: var(--muted); }
.moment__sub { margin-top: var(--s-4); color: var(--muted); font-size: var(--t-lead); max-width: 22ch; }
.terms li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-small); }
.terms li:first-child { border-top: 0; }
.terms li::before { content: "→"; color: var(--accent); font-family: var(--font-mono); }

/* ---------- faq ---------- */
.faq-grid details { border-top: 1px solid var(--line); }
.faq-grid details:last-child, .faq-grid details:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.faq-grid summary { padding: 14px 0; font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; color: var(--accent); font: 400 20px/1 var(--font-mono); flex: none; transition: transform .25s; }
.faq-grid details[open] summary::after { transform: rotate(45deg); }
.faq-grid details p { padding: 0 30px 16px 0; color: var(--muted); font-size: var(--t-small); line-height: 1.75; }

/* ---------- buyers ---------- */
.buyer-grid > .card { min-height: 250px; }
.buyer__tag { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.buyer__need { margin-top: auto !important; padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--ink) !important; font-size: 12px !important; }

/* ---------- close / footer ---------- */
.footer { border-top: 1px solid var(--line); background: #0b1015; padding-top: var(--s-8); }
.close { align-items: end; padding-bottom: var(--s-8); }
.close h2 { max-width: 15ch; }
.close .btn-row { justify-content: flex-end; }
.footer__brand { grid-column: span 5; }
.footer__brand p { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-small); max-width: 34ch; }
.footer__col { grid-column: span 2; }
.footer__col h4 { font: 600 10px/1 var(--font-mono); letter-spacing: .14em; color: #5d6a76; text-transform: uppercase; margin-bottom: var(--s-3); }
.footer__col a { display: block; padding: 5px 0; font-size: var(--t-small); color: var(--muted); transition: color .2s; }
.footer__col a:hover { color: var(--accent); }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: var(--s-4) 0 var(--s-6); border-top: 1px solid var(--line); font-size: 11px; color: #6b7883; }
.footer__legal .marks { display: flex; gap: 14px; align-items: center; }
.footer__legal .marks img { width: 22px; height: 16px; object-fit: contain; opacity: .8; }
.credits { max-width: 90ch; line-height: 1.6; }

/* ---------- responsive: everything stacks on the 12 lines ---------- */
@media (max-width: 1279px) {
  :root { --edge: 48px; }
  .catalog-grid > .product, .adv-grid > .card, .buyer-grid > .card, .steps > .step { grid-column: span 6; }
}
@media (max-width: 1023px) {
  :root { --edge: 32px; }
  .nav__links { display: none; }
  .nav__toggle { display: grid; }
  .nav.is-open .nav__links {
    display: flex; position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 12px var(--edge) 22px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__links a { padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--line-soft); }
  .nav__actions { margin-left: auto; }
  .nav__actions .btn { display: none; }
  .console__body { grid-template-columns: 1fr; }
  .console__side { display: none; }
  .moment__n { font-size: clamp(96px, 22vw, 160px); }
}
@media (max-width: 767px) {
  :root { --edge: 24px; --gutter: 16px; }
  body { font-size: 14px; }
  .section { padding-block: 84px 56px; }
  .hero { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 32px; }
  .hero h1 { font-size: clamp(34px, 9vw, 46px); }
  .hero__lead { font-size: 15px; }
  .hero__facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .console { margin-top: var(--s-5); }
  .console__main { padding: 14px; }
  .order { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .order .chip { grid-column: 1; justify-self: start; }
  .deliver { grid-template-columns: 1fr; }
  .catalog-grid > .product, .adv-grid > .card, .buyer-grid > .card, .steps > .step,
  .ledger > .ledger__row, .faq-grid > details, .section-head--split > *, .policy-grid > * { grid-column: span 12 !important; }
  .ledger__row:nth-last-child(2) { border-bottom: 0; }
  .faq-grid details:nth-last-child(2) { border-bottom: 0; }
  .section-head--split { gap: var(--s-3); }
  .section-head { margin-bottom: var(--s-5); }
  .close, .policy-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .close .btn-row { justify-content: flex-start; }
  .btn-row .btn { flex: 1 1 auto; }
  .buyer-grid > .card { min-height: 190px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col { grid-column: span 4; }
  .footer__legal { flex-direction: column; align-items: start; }
}
@media (max-width: 389px) {
  .btn { padding-inline: 16px; }
  .nav__logo { font-size: 16px; }
}

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