/* Section shell — transparent, continues the global .site-bg canvas.
   Static section (no scroll-jacking): normal document flow, same
   general approach as Configurator/Brief/FAQ. Mode switching is
   click/keyboard-only; scroll just carries the user past the section. */
.trust {
  position: relative;
  background: transparent;
  font-family: var(--font-body);
  padding: calc(var(--section-padding) * 1.1) 0 calc(var(--section-padding) * 0.9);
  overflow: hidden;
}

.trust__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-padding);
  z-index: 3;
}

/* ===== Layout: intro / core / nav ===== */
.trust__grid {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 246px;
  gap: 32px;
  align-items: start;
}

/* ===== LEFT — constant across all 5 modes ===== */
.trust__badge-en {
  color: var(--color-text-dim-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: .04em;
}

.trust__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: var(--ls-heading);
  margin: 18px 0 0;
  color: var(--color-text-primary-strong);
  text-wrap: balance;
}

.trust__title span {
  color: var(--color-accent);
}

.trust__subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 14px 0 0;
}

.trust__direct {
  position: relative;
  margin-top: 28px;
  padding: 20px 0 0 18px;
  border-top: 1px solid var(--color-border-soft);
}

.trust__direct-dot {
  position: absolute;
  left: 0;
  top: 27px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  animation: lutPulse 1.8s ease-in-out infinite;
}

.trust__direct-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--color-text-primary-strong);
  margin: 0 0 8px;
}

.trust__direct-note {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-dim-5);
  margin: 0;
  max-width: 280px;
}

/* ===== CENTER — LWS interface window ===== */
.trust__core {
  position: relative;
  border-radius: var(--radius-hero);
  background: linear-gradient(160deg, rgba(21, 23, 19, .92), rgba(9, 10, 9, .97));
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-elevated), inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Header styled as a direct member of the site's existing browser/
   interface-window family (Hero/Portfolio/Configurator/Brief all use
   the shared .browser-bar red/yellow/green dots) — reuses those exact
   dot classes so Trust reads as the same design system, not a third
   one. Kept in normal flow (not .browser-bar's own absolute
   positioning, which assumes an image-overlay context Trust doesn't
   have) but matches its proportions/tokens exactly. */
.trust__core-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 38px;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--color-border-faint);
}

.trust__core-mode {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary);
}

.trust__core-seen {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  color: var(--color-text-dim-3);
  transition: color .3s ease;
}

.trust__core-seen.is-complete {
  color: var(--color-accent);
}

.trust__core-scan {
  top: 39px;
}

.trust__core-scan.is-scanning {
  animation: trustCoreScan .5s ease-out;
}

@keyframes trustCoreScan {
  0% { top: 39px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.trust__scenes {
  position: relative;
  height: 522px;
  padding: 24px 26px 22px;
}

/* ===== Transition choreography =====
   Leaving: shrink + fade + recede in depth (~200ms, matches RECEDE_MS
   in trust.js). Entering: children stagger in by DOM order via
   nth-child delays — main object first, then supporting rows, then
   text — so it reads as "one system reconfiguring", not a hard cut. */
.trust__scene {
  position: absolute;
  inset: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(.97) translateZ(-30px);
  pointer-events: none;
  overflow: hidden;
}

.trust__scene.is-leaving {
  opacity: 0;
  transform: scale(.96) translateZ(-40px);
  transition: opacity .2s ease, transform .2s ease;
}

.trust__scene.is-active {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.trust__scene > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .38s ease, transform .38s var(--ease-rise);
}

.trust__scene.is-active > * {
  opacity: 1;
  transform: none;
}

.trust__scene.is-active > *:nth-child(1) { transition-delay: 0ms; }
.trust__scene.is-active > *:nth-child(2) { transition-delay: 80ms; }
.trust__scene.is-active > *:nth-child(3) { transition-delay: 150ms; }
.trust__scene.is-active > *:nth-child(4) { transition-delay: 210ms; }
.trust__scene.is-active > *:nth-child(5) { transition-delay: 260ms; }

/* Shared 2-column split — reused by Conditions (facts+scheme) and
   Guarantee (handover+aftercare) so both read as one layout language. */
.trust__row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ===== 01 CONDITIONS — payment stepper ===== */
.trust__pay {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust__pay-step {
  flex: 1;
  padding: 13px 12px;
  border-radius: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.trust__pay-step:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

.trust__pay-step-status {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  color: var(--color-text-dim-3);
  transition: color .3s ease;
}

.trust__pay-step-pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text-primary);
}

.trust__pay-step-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--color-text-dim-4);
}

.trust__pay-step.is-active {
  border-color: var(--color-accent-border-strong);
  background: rgba(200, 255, 46, .06);
  box-shadow: 0 0 22px rgba(200, 255, 46, .12);
}

.trust__pay-step.is-active .trust__pay-step-status {
  color: var(--color-accent);
}

.trust__pay-step.is-locked {
  border-color: var(--color-border-strong);
}

.trust__pay-step.is-locked .trust__pay-step-status {
  color: var(--color-text-dim-5);
}

.trust__pay-step.is-locked .trust__pay-step-pct {
  color: var(--color-text-dim-5);
}

.trust__pay-pulse {
  width: 20px;
  height: 2px;
  flex-shrink: 0;
  background: var(--color-border-strong);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

.trust__pay-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 8px var(--color-accent);
}

.trust__pay-pulse.is-active::before {
  animation: trustPulseTravel .5s ease-out forwards;
}

@keyframes trustPulseTravel {
  0% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

.trust__pay-final {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-text-dim-3);
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--color-border-soft);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s var(--ease-rise);
}

.trust__pay-final.is-visible {
  opacity: 1;
  transform: none;
  border-color: var(--color-accent-border);
  background: rgba(200, 255, 46, .05);
}

.trust__pay-final b {
  color: var(--color-accent);
  font-weight: 700;
}

.trust__pay-note {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-dim-4);
  margin: 10px 0 0;
}

.trust__facts {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  margin-top: 14px;
}

.trust__fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--color-text-dim-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: 5px;
  padding: 6px 9px;
}

.trust__fact-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 5px var(--color-accent);
  flex-shrink: 0;
}

.trust__materials-help {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-dim-5);
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-faint);
}

.trust__materials-help b {
  color: var(--color-text-primary);
  font-weight: 600;
}

.trust__revisions {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-faint);
}

.trust__revisions-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.trust__revisions-text {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-dim-5);
  margin: 0;
  max-width: 520px;
}

/* ===== 02 CONTRACT — document scan ===== */
.trust__doc {
  display: flex;
  gap: 22px;
  align-items: center;
}

.trust__doc-page {
  position: relative;
  flex-shrink: 0;
  width: 178px;
  height: 224px;
  border-radius: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  padding: 16px 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: perspective(700px) rotateY(-8deg);
  box-shadow: 12px 14px 30px rgba(0, 0, 0, .35);
}

.trust__doc-page-head {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-text-dim-4);
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--color-border-faint);
}

.trust__doc-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--color-border-faint);
}

.trust__doc-section-num {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(200, 255, 46, .1);
}

.trust__doc-section-label {
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1.3;
  color: var(--color-text-dim-4);
}

.trust__doc-page-stamp {
  position: absolute;
  bottom: 12px;
  right: -8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-border-strong);
  border-radius: 4px;
  padding: 3px 8px;
  transform: rotate(-8deg);
  opacity: 0;
  transition: opacity .4s ease;
}

.trust__doc-page-stamp.is-visible {
  opacity: 1;
}

.trust__doc-scan {
  top: 0;
}

.trust__doc-scan.is-scanning {
  animation: trustDocScan 1.1s ease-in-out;
}

@keyframes trustDocScan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.trust__doc-checks {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trust__doc-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-faint);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-text-dim-4);
  opacity: .5;
  transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}

.trust__doc-check b {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .03em;
  color: var(--color-text-dim-4);
  font-weight: 700;
  text-transform: uppercase;
  transition: color .3s ease;
}

.trust__doc-check.is-done {
  opacity: 1;
  border-color: var(--color-accent-border);
  background: rgba(200, 255, 46, .05);
}

.trust__doc-check.is-done b {
  color: var(--color-accent);
}

.trust__doc-final {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-text-dim-3);
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--color-border-soft);
  opacity: 0;
  transition: opacity .4s ease;
}

.trust__doc-final.is-visible {
  opacity: 1;
  border-color: var(--color-accent-border);
  background: rgba(200, 255, 46, .05);
}

.trust__doc-final b {
  color: var(--color-accent);
  font-weight: 700;
}

.trust__contract-cta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.trust__doc-text {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-dim-5);
  max-width: 440px;
}

.trust__contract-btn {
  padding: 12px 24px;
}

.trust__contract-note {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-dim-3);
}

/* ===== 03 GUARANTEE — compact ring + two status zones ===== */
.trust__guarantee-top {
  display: flex;
  align-items: center;
  gap: 26px;
}

/* Container is deliberately bigger than the visual ring (190px) so the
   floating labels — positioned via translateY(-80px) from center, plus
   their own rendered width — have room to live without their edges
   reaching .trust__scene's overflow:hidden boundary. */
.trust__ring {
  position: relative;
  width: 230px;
  height: 230px;
  flex-shrink: 0;
}

.trust__ring-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid var(--color-border-soft);
  transform: translate(-50%, -50%);
}

.trust__ring-orbit--outer {
  width: 190px;
  height: 190px;
}

.trust__ring-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(200, 255, 46, .05);
  border: 1.5px solid var(--color-accent-border-strong);
  box-shadow: 0 0 32px rgba(200, 255, 46, .16);
  z-index: 3;
}

.trust__ring-days {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  color: var(--color-accent);
  line-height: 1;
}

.trust__ring-days-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  color: var(--color-text-dim-3);
  margin-top: 3px;
}

.trust__ring-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-80px) rotate(calc(-1 * var(--a)));
  font-family: var(--font-body);
  font-size: 8.5px;
  color: var(--color-text-dim-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: 5px;
  padding: 4px 7px;
  white-space: nowrap;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
  z-index: 2;
}

.trust__ring-node.is-warning {
  color: var(--color-accent);
  border-color: var(--color-accent-border-strong);
  box-shadow: 0 0 16px rgba(200, 255, 46, .35);
}

.trust__ring-signal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(50deg) translateY(-80px);
  transition: opacity .2s ease;
}

.trust__ring-signal.is-active {
  opacity: 1;
  animation: trustSignalTravel .8s ease-in forwards;
}

@keyframes trustSignalTravel {
  0% { transform: translate(-50%, -50%) rotate(50deg) translateY(-80px); }
  100% { transform: translate(-50%, -50%) rotate(50deg) translateY(0); }
}

.trust__guarantee-text {
  flex: 1;
  min-width: 0;
}

.trust__ring-status {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-dim-3);
  margin-bottom: 8px;
}

.trust__ring-status b {
  color: var(--color-accent);
  font-weight: 700;
}

.trust__ring-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-dim-5);
  margin: 0 0 6px;
}

.trust__ring-caveat {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-dim-3);
  margin: 0;
}

.trust__row-split--guarantee {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-faint);
}

.trust__handover-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.trust__handover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--color-text-dim-4);
  border-bottom: 1px solid var(--color-border-faint);
}

.trust__handover-row:last-child {
  border-bottom: none;
}

.trust__handover-row b {
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.trust__aftercare-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--color-text-dim-4);
  border-bottom: 1px solid var(--color-border-faint);
}

.trust__aftercare-row:last-child {
  border-bottom: none;
}

/* ===== 04 EVIDENCE — bigger archive of paper letters + voice link ===== */
.trust__archive-lead {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-dim-4);
  margin: 0 0 12px;
  max-width: 480px;
}

.trust__archive {
  position: relative;
  flex: 1;
  min-height: 250px;
  perspective: 1100px;
}

/* Static positioning layer — NEVER changes on hover/focus. This is the
   fix for the earlier hover-jitter: the element that owns the hover
   hitbox must never move under the cursor. Hovering any descendant
   still counts as hovering this element, so the hitbox never shrinks
   away mid-hover. */
.trust__letter-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 122px;
  height: 166px;
  transform: translate(-50%, -50%) translateX(var(--fan-x)) translateZ(var(--fan-z)) rotate(var(--fan-a));
  z-index: 1;
}

.trust__letter-slot.is-active {
  z-index: 10;
}

/* The actual lift/scale/straighten — applied to the INNER button via
   plain :hover/:focus-visible, or via .is-active for keyboard-driven
   sync from JS. Since the OUTER slot above never moves, this can shift
   freely without ever causing a flicker loop. */
.trust__letter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform: rotate(0deg) scale(1) translateZ(0);
  transition: transform .3s var(--ease-rise);
}

.trust__letter:hover,
.trust__letter:focus-visible,
.trust__letter-slot.is-active .trust__letter {
  transform: rotate(calc(-1 * var(--fan-a))) scale(1.12) translateZ(50px);
}

.trust__letter:focus-visible {
  outline: none;
}

.trust__letter:focus-visible .trust__letter-face {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

.trust__letter-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(160deg, #f2f2ec, #e2e2d8);
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: var(--shadow-lifted);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px 12px;
  gap: 7px;
  overflow: hidden;
  transition: box-shadow .3s ease;
}

.trust__letter:hover .trust__letter-face,
.trust__letter:focus-visible .trust__letter-face,
.trust__letter-slot.is-active .trust__letter-face {
  box-shadow: var(--shadow-deep), 0 0 30px rgba(200, 255, 46, .22);
}

.trust__letter-face--photo {
  padding: 0;
  background: var(--color-surface-2);
}

.trust__letter-face--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trust__letter-head {
  width: 38%;
  height: 6px;
  border-radius: 2px;
  background: rgba(20, 22, 18, .18);
}

.trust__letter-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.trust__letter-lines span {
  display: block;
  height: 4.5px;
  border-radius: 2px;
  background: rgba(20, 22, 18, .13);
}

.trust__letter-lines span:nth-child(1) { width: 88%; }
.trust__letter-lines span:nth-child(2) { width: 66%; }
.trust__letter-lines span:nth-child(3) { width: 76%; }

.trust__letter-seal {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px dashed rgba(20, 22, 18, .3);
  margin-top: 3px;
}

.trust__letter-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: rgba(20, 22, 18, .55);
}

.trust__letter-slot-text {
  font-family: var(--font-body);
  font-size: 8px;
  line-height: 1.3;
  color: rgba(20, 22, 18, .45);
  text-align: center;
}

.trust__letter-voice-mark {
  position: absolute;
  bottom: 7px;
  right: 7px;
  font-family: var(--font-mono);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-accent-on-accent);
  background: var(--color-accent);
  border-radius: 3px;
  padding: 2px 5px;
}

.trust__evidence-caption {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-faint);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.trust__evidence-caption-main {
  min-width: 0;
}

.trust__evidence-caption-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-accent);
  margin-bottom: 5px;
}

.trust__evidence-caption-text {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-dim-5);
}

.trust__evidence-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-border);
  border-radius: 20px;
  padding: 5px 11px 5px 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .25s ease, transform .25s ease;
}

.trust__evidence-link.is-visible {
  opacity: 1;
  transform: none;
}

.trust__evidence-link-arrow {
  font-size: 10px;
}

/* ===== 05 LIVE SIGNAL — slow-drifting network + CTA ===== */
.trust__network-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-primary-strong);
  margin: 0 0 6px;
}

.trust__network-subtitle {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-dim-4);
  margin: 0 0 14px;
  max-width: 460px;
}

.trust__network {
  position: relative;
  height: 230px;
  flex-shrink: 0;
}

.trust__network-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(200, 255, 46, .06);
  border: 1.5px solid var(--color-accent-border-strong);
  box-shadow: 0 0 34px rgba(200, 255, 46, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--color-accent);
  z-index: 3;
}

.trust__network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.trust__network-line {
  stroke: rgba(200, 255, 46, .18);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  animation: trustLineFlow 6s linear infinite;
}

@keyframes trustLineFlow {
  to { stroke-dashoffset: -90; }
}

.trust__network-nodes {
  position: absolute;
  inset: 0;
}

/* Light floating node — icon badge + name + small action label, no
   surrounding card. The previous version wrapped this in a
   full opaque .color-surface-2 box (92px wide, padded, bordered) —
   fine alone, but four of them at once read as heavy tiles that
   crowded the heading/CTA below on narrow screens. Only the icon gets
   a soft circular backdrop now; name/action sit on the transparent
   scene background like a caption, not another box. */
.trust__network-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 84px;
  padding: 0;
  color: var(--color-text-dim-4);
  text-align: center;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
  z-index: 2;
  animation: trustNodeDrift 7s ease-in-out infinite;
  animation-play-state: running;
}

.trust__network:has(.trust__network-node:hover) .trust__network-node,
.trust__network:has(.trust__network-node:focus-visible) .trust__network-node {
  animation-play-state: paused;
}

.trust__network:has(.trust__network-node:hover) .trust__network-node:not(:hover),
.trust__network:has(.trust__network-node:focus-visible) .trust__network-node:not(:focus-visible) {
  opacity: .45;
}

@keyframes trustNodeDrift {
  0%, 100% { margin: 0 0 0 0; }
  50% { margin: -6px 0 0 4px; }
}

.trust__network-node[data-net-node="0"] { left: 50%; top: 0; transform: translateX(-50%); animation-delay: 0s; }
.trust__network-node[data-net-node="1"] { right: 4%; top: 16%; animation-delay: 1.6s; }
.trust__network-node[data-net-node="2"] { right: 4%; bottom: 2%; animation-delay: 3.2s; }
.trust__network-node[data-net-node="3"] { left: 4%; bottom: 2%; animation-delay: 4.8s; }

.trust__network-node:hover,
.trust__network-node:focus-visible {
  color: var(--color-text-primary);
  opacity: 1;
  transform: translateY(-3px) scale(1.05);
}

.trust__network-node[data-net-node="0"]:hover,
.trust__network-node[data-net-node="0"]:focus-visible {
  transform: translateX(-50%) translateY(-3px) scale(1.05);
}

.trust__network-node:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

.trust__network-node-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.trust__network-node-icon svg {
  width: 17px;
  height: 17px;
}

.trust__network-node:hover .trust__network-node-icon,
.trust__network-node:focus-visible .trust__network-node-icon {
  background: rgba(200, 255, 46, .09);
  border-color: var(--color-accent-border-strong);
  box-shadow: 0 0 16px rgba(200, 255, 46, .3);
}

.trust__network-node-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10.5px;
}

.trust__network-node-cta {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-dim-3);
}

.trust__network-node:hover .trust__network-node-cta,
.trust__network-node:focus-visible .trust__network-node-cta {
  color: var(--color-accent);
}

.trust__live-cta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.trust__live-cta-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-dim-4);
  margin: 0 auto;
  max-width: 380px;
}

/* ===== RIGHT — mode navigation ===== */
.trust__nav-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trust__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trust__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}

.trust__nav-item:hover {
  background: var(--color-surface-2);
}

.trust__nav-item:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

.trust__nav-item.is-active {
  border-color: var(--color-accent-border);
  background: rgba(200, 255, 46, .06);
}

.trust__nav-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text-dim-3);
  transition: color .2s ease;
  flex-shrink: 0;
}

.trust__nav-item.is-active .trust__nav-num {
  color: var(--color-accent);
}

.trust__nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trust__nav-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-text-dim-4);
  transition: color .2s ease;
}

.trust__nav-item.is-active .trust__nav-title {
  color: var(--color-text-primary-strong);
}

.trust__nav-sub {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--color-text-dim-2);
}

.trust__nav-hint {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-dim-3);
  padding: 0 14px;
}

/* ===== Document preview viewer ===== */
.trust__viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.trust__viewer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.trust__viewer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 6, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trust__viewer-window {
  position: relative;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, rgba(20, 22, 18, .97), rgba(10, 11, 10, .99));
  border: 1px solid var(--color-accent-border);
  box-shadow: var(--shadow-deep), 0 0 60px rgba(200, 255, 46, .12);
  padding: 34px 30px 28px;
  transform: scale(.96) translateY(8px);
  transition: transform .3s var(--ease-rise);
}

.trust__viewer.is-open .trust__viewer-window {
  transform: none;
}

.trust__viewer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.trust__viewer-close:hover {
  color: var(--color-text-primary);
  border-color: var(--color-accent-border);
}

.trust__viewer-close:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

.trust__viewer-doc-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary-strong);
  margin-bottom: 16px;
}

.trust__viewer-doc-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 320px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
}

.trust__viewer-doc-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trust__viewer-doc-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #f2f2ec, #e2e2d8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
}

.trust__viewer-doc-head {
  width: 30%;
  height: 8px;
  border-radius: 3px;
  background: rgba(20, 22, 18, .18);
}

.trust__viewer-doc-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trust__viewer-doc-lines span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(20, 22, 18, .13);
}

.trust__viewer-doc-lines span:nth-child(1) { width: 92%; }
.trust__viewer-doc-lines span:nth-child(2) { width: 70%; }
.trust__viewer-doc-lines span:nth-child(3) { width: 82%; }
.trust__viewer-doc-lines span:nth-child(4) { width: 55%; }

.trust__viewer-doc-seal {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px dashed rgba(20, 22, 18, .3);
}

.trust__viewer-doc-status {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-dim-4);
  text-align: center;
}

.trust__voice {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-faint);
}

.trust__voice.is-hidden {
  display: none;
}

.trust__voice-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.trust__voice-company {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-dim-4);
  margin-bottom: 12px;
}

.trust__voice-player {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust__voice-play {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-accent-border);
  background: rgba(200, 255, 46, .06);
  color: var(--color-accent);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.trust__voice-play:hover:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-accent-on-accent);
}

.trust__voice-play:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

.trust__voice-play:disabled {
  cursor: default;
  opacity: .4;
  color: var(--color-text-dim-3);
  border-color: var(--color-border-soft);
  background: transparent;
}

.trust__voice-wave {
  position: relative;
  flex: 1;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  background:
    linear-gradient(90deg, var(--color-accent) var(--progress, 0%), transparent 0),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 5px);
  background-size: 100% 100%, 100% 60%;
  background-position: left, center;
  background-repeat: no-repeat, repeat-x;
}

.trust__voice-player.is-disabled .trust__voice-wave {
  cursor: default;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 5px);
  background-size: 100% 50%;
  background-position: center;
  background-repeat: repeat-x;
}

.trust__voice-time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-text-dim-4);
  white-space: nowrap;
}

.trust__voice-pending {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-dim-3);
  display: none;
}

.trust__voice-pending.is-visible {
  display: block;
}

/* ===== Reduced motion — no scroll-jacking to begin with, so this just
   drops the entrance stagger / scan / pulse choreography. ===== */
@media (prefers-reduced-motion: reduce) {
  .trust__scene,
  .trust__scene.is-leaving,
  .trust__scene > * {
    transition: none !important;
  }

  .trust__core-scan,
  .trust__direct-dot,
  .trust__pay-pulse::before,
  .trust__doc-scan,
  .trust__ring-signal,
  .trust__network-node,
  .trust__network-line {
    animation: none !important;
  }

  .trust__letter,
  .trust__letter-face {
    transition: none !important;
  }

  .trust__viewer,
  .trust__viewer-window {
    transition: none !important;
  }
}

/* ============================================================
   Responsive — large screens down to phone
   ============================================================
   None of the properties below overlap with the reduced-motion
   block above (that block only ever sets transition/animation to
   none !important), so there's no cascade-order conflict between
   the two regardless of which comes first in the file. */

@media (min-width: 1920px) {
  .trust__grid {
    grid-template-columns: 360px minmax(0, 1fr) 280px;
    gap: 40px;
  }
}

@media (max-width: 1199px) {
  .trust__grid {
    grid-template-columns: 250px minmax(0, 1fr) 200px;
    gap: 22px;
  }

  .trust__scenes {
    height: 480px;
  }
}

/* Portrait tablet / phone — the 3-column grid has nowhere to put a
   250px side column, so it collapses to a single flex column and
   reorders to the owner's spec: intro (unchanged, already first) ->
   mode navigation -> central window. Nav becomes a horizontal
   scroll-snap strip so the active mode is reachable by swipe/tap
   instead of the desktop vertical list. */
@media (max-width: 1023px) {
  .trust__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .trust__intro { order: 1; }
  .trust__nav-wrap { order: 2; }
  .trust__core { order: 3; }

  .trust__direct-note {
    max-width: none;
  }

  /* Grid, not a horizontal scroll-snap strip — all 5 modes need to be
     visible at once (a swipeable nav that hides modes off-screen was
     the reported problem: the user has to discover there's more to
     scroll, and it reads like a broken/incomplete list). 2 columns x 3
     rows, with the 5th item spanning the full width of its own row so
     the grid doesn't end on a lopsided single narrow cell. */
  .trust__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .trust__nav-item {
    min-height: 44px;
  }

  .trust__nav-item:last-child {
    grid-column: 1 / -1;
  }

  .trust__nav-hint {
    padding: 0;
  }

  /* .trust__scene.is-active switches to position:relative (see the
     base rule above), so the parent's auto height already tracks
     whichever scene is showing — min-height just keeps the switch
     between short/tall scenes from feeling like a sudden jump. */
  .trust__scenes {
    height: auto;
    min-height: 360px;
    padding: 20px 18px 18px;
  }

  /* ---- Conditions: vertical payment timeline ---- */
  .trust__pay {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .trust__pay-pulse {
    width: 2px;
    height: 20px;
    margin: 0 auto;
  }

  .trust__pay-pulse::before {
    transform-origin: top;
  }

  .trust__pay-pulse.is-active::before {
    animation-name: trustPulseTravelVertical;
  }

  /* ---- Contract: visual+checklist stacked, centered cta ---- */
  .trust__doc {
    flex-direction: column;
    text-align: center;
  }

  .trust__doc-page {
    transform: none;
    margin: 0 auto;
  }

  .trust__contract-cta {
    text-align: center;
  }

  /* ---- Guarantee: ring above text, stacked handover/aftercare ---- */
  .trust__guarantee-top {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .trust__ring {
    transform: scale(.82);
    margin: -20px 0;
  }

  .trust__row-split--guarantee {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* ---- Evidence: smaller fan so more of it stays on-screen ---- */
  .trust__archive {
    transform: scale(.86);
    transform-origin: center 40%;
  }

  /* ---- Live signal: compact grid instead of the full-size orbit ----
     Bottom margin is NOT the same negative value as the top: the two
     bottom nodes (data-net-node 2/3) are anchored via `bottom: 2%`,
     i.e. close to this element's own bottom edge already, so pulling
     that edge in further with a negative margin (as the top edge does,
     to close the gap above) crowded their name/action labels straight
     into the "Условия понятны..." caption right after — the reported
     "nodes conflict with the CTA" bug. Top keeps the old value (that
     gap was fine), bottom gets real breathing room instead. */
  .trust__network {
    transform: scale(.84);
    margin: -18px 0 20px;
  }
}

@media (max-width: 599px) {
  .trust__ring {
    transform: scale(.72);
    margin: -32px 0;
  }

  .trust__archive {
    transform: scale(.74);
  }

  .trust__network {
    transform: scale(.72);
    margin: -32px 0 28px;
  }
}

@keyframes trustPulseTravelVertical {
  0% { transform: scaleY(0); transform-origin: top; }
  100% { transform: scaleY(1); transform-origin: top; }
}

/* ---- Document viewer — near-fullscreen on phone, safe-area aware ---- */
@media (max-width: 599px) {
  .trust__viewer {
    padding: max(16px, var(--safe-top)) max(12px, var(--safe-right)) max(16px, var(--safe-bottom)) max(12px, var(--safe-left));
  }

  .trust__viewer-window {
    width: 100%;
    max-height: min(92vh, 92dvh);
    padding: 28px 20px 22px;
  }
}