/* ==========================================================================
   alamirov · гарант сделок
   Implementation of "Alamirov Garant.dc.html" (Claude Design component).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts — self-hosted.

   Previously three round-trips to fonts.googleapis + fonts.gstatic before a
   single glyph could paint, and every visitor's IP handed to a third party.
   These are the variable builds: one file per subset covers every weight,
   cyrillic and latin only. 171 KB for the set.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bruno Ace';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/BrunoAce-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bruno Ace';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/BrunoAce-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --bg:            #090b10;
  --bg-deep:       #07090d;
  --bg-mid:        #0a0d15;
  --bg-top:        #0d1220;
  --bg-footer:     rgba(6, 8, 13, .6);

  /* Ink — .52 is the floor for body/label text (4.5:1 on --bg).
     Anything dimmer fails WCAG AA at the sizes used here. */
  --ink-1:         #edf0f6;
  --ink-2:         rgba(237, 240, 246, .72);
  --ink-3:         rgba(237, 240, 246, .60);
  --ink-4:         rgba(237, 240, 246, .52);

  /* Blue */
  --blue-300:      #b3ceff;
  --blue-400:      #86b3ff;
  --blue-500:      #5590ff;
  --blue-600:      #2a5cdc;
  --blue-700:      #2551cc;
  --blue-rgb:      85, 144, 255;

  /* Gold */
  --gold-200:      #f0e1bd;
  --gold-300:      #dfc48b;
  --gold-400:      #d4ae61;
  --gold-rgb:      196, 158, 80;

  /* Signal */
  --green:         #5fd493;
  --green-soft:    #85e0af;
  --green-rgb:     95, 212, 147;

  /* Hairlines & fills */
  --line:          rgba(255, 255, 255, .085);
  --line-soft:     rgba(255, 255, 255, .065);
  --line-strong:   rgba(255, 255, 255, .13);
  --fill-1:        rgba(255, 255, 255, .055);
  --fill-2:        rgba(255, 255, 255, .018);
  --fill-3:        rgba(255, 255, 255, .035);

  /* Type */
  /* Bruno Ace покрывает только латиницу и цифры — кириллицы в нём нет.
     Manrope здесь не «на случай сбоя», а основной шрифт для русского:
     браузер подбирает начертание поглифно, поэтому заголовок из
     русских слов целиком отрисуется Manrope, а сумма и латинский ник
     рядом — Bruno Ace. */
  --font-display:  'Bruno Ace', Manrope, system-ui, sans-serif;
  --font-body:     Manrope, system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Motion — custom curves. Built-in CSS easings are too weak to feel
     intentional; ease-in is never used, it delays the first frame the
     user is watching most closely. */
  --ease-out:      cubic-bezier(.16, .84, .3, 1);
  --ease-in-out:   cubic-bezier(.77, 0, .175, 1);

  --t-press:       140ms;   /* button press feedback  */
  --t-hover:       200ms;   /* colour / border hover  */
  --t-ui:          240ms;   /* dropdowns, nav sheet   */
  --t-reveal:      620ms;   /* one-time entrances     */

  /* Layout */
  --shell:         1240px;
  --gutter:        40px;
  --masthead-h:    80px;   /* measured: 75px desktop, 79px mobile */
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Sticky masthead would otherwise cover the heading you jumped to. */
  scroll-padding-top: calc(var(--masthead-h) + 28px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { max-width: 100%; display: block; }

a {
  color: var(--blue-400);
  text-decoration: none;
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease,
              border-color var(--t-hover) ease, filter var(--t-hover) ease,
              transform var(--t-press) var(--ease-out);
}

::selection { background: rgba(var(--blue-rgb), .35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 200;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--blue-600);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-ui) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.page {
  position: relative;
  /* Атмосфера растянута по .page. На короткой странице (профиль, проверка,
     вход) .page кончалась посреди экрана, и под градиентом шла полоса фона
     body другого тона — с видимой горизонтальной кромкой. */
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   3. Atmosphere
   -------------------------------------------------------------------------- */

.atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.atmos__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--bg-top) 0%, var(--bg-mid) 34%, var(--bg) 62%, var(--bg-deep) 100%);
}

.atmos__grid {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1080px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 6%, rgba(0, 0, 0, .85), transparent 68%);
          mask-image: radial-gradient(120% 78% at 50% 6%, rgba(0, 0, 0, .85), transparent 68%);
}

.atmos__beam {
  position: absolute;
  top: -300px; left: 50%;
  width: min(1500px, 150vw);
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(58% 52% at 50% 40%,
    rgba(52, 98, 238, .30), rgba(52, 98, 238, .08) 58%, rgba(52, 98, 238, 0) 76%);
  filter: blur(14px);
}

.atmos__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 30%,
    rgba(0, 0, 0, 0) 52%, rgba(4, 5, 9, .55) 100%);
}

.atmos__grain {
  position: absolute; inset: 0;
  opacity: .45;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
}

/* Section-anchored glows. The source pinned these at absolute pixel offsets
   (top: 1900px), which drifts as soon as content reflows. */
.section { position: relative; }

.section__glow {
  position: absolute;
  top: -180px; right: -280px;
  width: 860px; height: 860px;
  pointer-events: none;
  z-index: 0;
}
.section__glow--gold {
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .11), rgba(var(--gold-rgb), 0) 70%);
  animation: breathe 17s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   4. Keyframes
   -------------------------------------------------------------------------- */

@keyframes rise     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes riseSoft { from { opacity: 0; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
@keyframes sweep    { 0% { transform: translateX(-130%); } 100% { transform: translateX(230%); } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes breathe  { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* The headline is uncovered rather than faded in — a wipe reads as the word
   being revealed, not as a box arriving. */
@keyframes unveil   { from { clip-path: inset(0 0 105% 0); } to { clip-path: inset(0 0 -25% 0); } }
@keyframes drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero entrance — fires on load, seen once per visit. */
.rv {
  animation: rise var(--t-reveal) var(--ease-out) both;
  animation-delay: var(--rv-delay, 0s);
}

/* Below-the-fold entrance — driven by IntersectionObserver in main.js.
   Without JS the content is simply visible; never gate content on script. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   5. Shared primitives
   -------------------------------------------------------------------------- */

.shell,
.masthead__inner,
.hero__inner,
.footer__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  z-index: 10;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter) 120px;
}
.section > * { position: relative; z-index: 1; }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 44px;
  max-width: none;
  padding-inline: 0;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(31px, 3.5vw, 44px);
  font-weight: 700;
  letter-spacing: -.042em;
  line-height: 1.1;
  margin-top: 16px;
}

.section__note {
  max-width: 340px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-4);
  text-wrap: pretty;
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(134, 179, 255, .9);
}
.eyebrow--gold { color: rgba(223, 196, 139, .88); }

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 16px 27px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* Only transform and opacity/filter — these skip layout and paint. */
  transition: transform var(--t-press) var(--ease-out),
              filter var(--t-hover) ease,
              background-color var(--t-hover) ease,
              border-color var(--t-hover) ease,
              color var(--t-hover) ease;
}

/* The single most valuable 3 lines in this file: the interface confirming
   it heard the press, within one frame. */
.btn:active { transform: scale(.97); }

.btn--primary {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-700));
  color: #fff;
  box-shadow: 0 18px 40px rgba(44, 92, 220, .4),
              inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn--ghost {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .04);
  color: var(--ink-2);
  font-weight: 500;
}

.btn--sm  { padding: 11px 20px; font-size: 14px; border-radius: 12px;
            box-shadow: 0 10px 26px rgba(44, 92, 220, .36), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn--lg  { padding: 16px 27px; }
.btn--block { width: 100%; padding: 17px 28px; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { filter: brightness(1.09); transform: translateY(-1px); }
  .btn--primary:active { transform: translateY(-1px) scale(.97); }
  .btn--ghost:hover   { background: rgba(255, 255, 255, .09); color: var(--ink-1); }
}

/* --------------------------------------------------------------------------
   6. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(9, 11, 16, .72);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease;
}
.masthead.is-stuck {
  background: rgba(9, 11, 16, .88);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.masthead__seam {
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: min(640px, 80vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 164, 255, .45), transparent);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 18px;
}

.masthead__aside {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; }

/* Знак — настоящий логотип, а не нарисованная заглушка.
   Скругление и градиент теперь внутри самой картинки, поэтому здесь остаётся
   только тень: рисовать её в файле нельзя — она должна меняться вместе с
   фоном, а не быть впечатанной в пиксели. */
.brand__mark {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 8px;
  filter: drop-shadow(0 8px 20px rgba(48, 96, 224, .38));
}
/* A person's lockup, not a logotype: the name carries the weight and the
   trade sits under it in the small print, the way it reads on a business
   card. The service is the person — the header should not be able to say
   one without the other. */
.brand__lockup { display: grid; gap: 2px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.03em;
  line-height: 1;
}
.brand__role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: 1;
}
@media (max-width: 560px) {
  .brand__name { font-size: 15px; }
  .brand__role { font-size: 8.5px; letter-spacing: .15em; }
}

.nav { display: flex; align-items: center; gap: 32px; }
.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: #fff; }
}

.hours {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink-4);
  white-space: nowrap;
}

/* Mobile nav --------------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  place-content: center;
  gap: 5px;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.nav-toggle:active { transform: scale(.97); }
.nav-toggle__bar {
  display: block;
  width: 17px; height: 1.5px;
  border-radius: 2px;
  background: var(--ink-1);
  transition: transform var(--t-ui) var(--ease-out), opacity 120ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav-sheet {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 18px var(--gutter) 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 11, 16, .96);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  box-shadow: 0 32px 60px rgba(2, 4, 12, .55);
  /* Occasional interaction → animation earns its place here. */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.nav-sheet.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-sheet__nav { display: flex; flex-direction: column; }
.nav-sheet__link {
  padding: 14px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-sheet__cta { margin-top: 18px; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; z-index: 10; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 64px;
  align-items: center;
  padding-block: 92px 120px;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px 8px 11px;
  border: 1px solid rgba(var(--gold-rgb), .32);
  border-radius: 999px;
  background: rgba(var(--gold-rgb), .07);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.eyebrow-pill__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-400);
}

.hero__kicker {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(134, 179, 255, .85);
}

/* Two more letters than the word it replaced ("ГАРАНТ" → "АЛАМИРОВ"), so the
   type ramp comes down to keep the surname on one line at every width. It has
   to stay one line: a surname that wraps stops reading as a signature. */
.hero__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6.5vw, 100px);
  line-height: .9;
  letter-spacing: -.05em;
  color: #fff;
  white-space: nowrap;
  animation: unveil 900ms var(--ease-out) .16s both;
}

/* Sits in the gap between the wipe and the lede, so the eye is led down. */
.hero__rule {
  display: block;
  height: 1px;
  max-width: 470px;
  margin-top: 26px;
  transform-origin: left;
  background: linear-gradient(90deg,
    rgba(134, 179, 255, .75), rgba(134, 179, 255, .1) 55%, transparent);
  animation: drawRule 760ms var(--ease-out) .82s both;
}
/* Gradient text only where it is actually supported — otherwise the word
   renders transparent on transparent. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title {
    background: linear-gradient(176deg, #ffffff 28%, #9db4de);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

/* The autograph -------------------------------------------------------------
   Seen once, on arrival, so it is allowed to be a performance: the strokes
   write themselves in the order a hand would make them, and the line of text
   arrives after the pen lifts. Everywhere else on this page motion is kept
   out of the way; here it is the argument. */

.autograph {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.autograph__ink {
  width: clamp(168px, 19vw, 232px);
  height: auto;
  flex: none;
  color: var(--gold-200);
  filter: drop-shadow(0 3px 14px rgba(var(--gold-rgb), .3));
}
.autograph__ink path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: writeStroke 620ms var(--ease-out) var(--ink-delay, 0s) forwards;
}
.autograph__note {
  font-size: 14px;
  color: var(--ink-3);
  opacity: 0;
  animation: fadeOnly 520ms var(--ease-out) 1.5s forwards;
}

@keyframes writeStroke { to { stroke-dashoffset: 0; } }

/* A signature the visitor cannot read is worse than no signature, so the
   footer copy is smaller but never scaled below legibility. */
@media (max-width: 560px) {
  .autograph { gap: 12px; }
  .autograph__note { font-size: 13px; }
}

/* Who answers ---------------------------------------------------------------
   Portrait and seal on one side, the claim on the other. Deliberately the
   quietest section on the page: a person vouching for something should not
   have to shout. */

.person {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(160deg, var(--fill-1), var(--fill-2));
}

.person__side {
  display: grid;
  justify-items: center;
  gap: 26px;
}

.portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 232px;
  aspect-ratio: 1;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--blue-rgb), .2), transparent 70%),
    linear-gradient(180deg, var(--fill-2), rgba(0, 0, 0, .3));
  overflow: hidden;
}
/* Swap for a real photograph: <img class="portrait__img" …> next to the
   monogram, and delete the monogram span. */
.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.portrait__mono {
  display: grid;
  place-items: center;
  width: 108px; height: 108px;
  border: 1px solid rgba(var(--gold-rgb), .3);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: rgba(var(--gold-rgb), .62);
  text-indent: -.04em;   /* optical centring: the tracking hangs off the right */
}
.portrait__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 16px 13px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
  color: var(--ink-2);
}

.seal {
  width: 132px; height: 132px;
  color: var(--gold-200);
  opacity: .82;
}
.seal__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: .55;
}
.seal__ring--inner { stroke-width: .8; opacity: .35; }
.seal__pip { fill: currentColor; opacity: .5; }
.seal__text {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-anchor: middle;   /* without this the ring text runs off the arc */
}
.seal__mono {
  fill: currentColor;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.04em;
  text-anchor: middle;
  dominant-baseline: central;
}
.seal__year {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-anchor: middle;
  opacity: .75;
}
.seal__year--dim { opacity: .45; font-size: 8px; }

.person__lede {
  margin-top: 20px;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

.person__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.person__fact dt {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.035em;
}
.person__fact dd {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--ink-4);
}

.person__handle { margin-top: 24px; font-size: 14px; color: var(--ink-3); }
.person__handle a { color: var(--gold-200); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .person { grid-template-columns: minmax(0, 1fr); }
  .person__side {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }
  .portrait { width: 168px; }
  .seal { width: 112px; height: 112px; }
}
@media (max-width: 460px) {
  .person__side { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

.hero__lede {
  max-width: 470px;
  margin-top: 28px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  flex-wrap: wrap;
}

/* Stats — <dl> with value above label visually, label first in the DOM so the
   reading order stays "what it is, then the number". */
.stats {
  display: flex;
  align-items: stretch;
  gap: 36px;
  margin-top: 60px;
}
.stats__item { display: flex; flex-direction: column-reverse; }
.stats__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.035em;
  /* Counting digits change width every frame otherwise, and the label
     underneath jitters for the whole roll-up. */
  font-variant-numeric: tabular-nums;
}
.stats__value--gold { color: var(--gold-300); }

/* "0 потерянных средств" is the whole promise. It gets the one glow on the
   left column. */
.stats__item--hero .stats__value {
  font-size: 30px;
  text-shadow: 0 0 26px rgba(var(--gold-rgb), .55);
}
.stats__label {
  margin-top: 7px;
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--ink-4);
}
.stats__rule { width: 1px; background: rgba(255, 255, 255, .08); }

/* Hero visual -------------------------------------------------------------- */

.hero__visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 132px 26px 140px;
  justify-self: end;
}

.deal {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  box-shadow: 0 44px 90px rgba(2, 4, 12, .72), inset 0 1px 0 rgba(255, 255, 255, .15);
  animation: riseSoft 1s var(--ease-out) .18s both;
  transition: border-color var(--t-hover) ease, transform var(--t-hover) var(--ease-out);
}

.deal__sweep {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140, 180, 255, .85), transparent);
  animation: sweep 5s linear infinite;
}

/* State swapping ----------------------------------------------------------
   Every state is stacked in one grid cell, so the card never changes height
   as it advances — a card that resizes four times a loop is a card nobody
   trusts. Outgoing text blurs out: without it you read two overlapping
   strings mid-crossfade instead of one string changing. */

.swap {
  display: inline-grid;
  vertical-align: bottom;
}
.swap > [data-for] {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(4px);
  filter: blur(3px);
  pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out),
              filter 260ms var(--ease-out);
}
.deal[data-state="0"] .swap > [data-for~="0"],
.deal[data-state="1"] .swap > [data-for~="1"],
.deal[data-state="2"] .swap > [data-for~="2"],
.deal[data-state="3"] .swap > [data-for~="3"] {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}

.deal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.deal__id {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-4);
}
/* The badge carries the state in colour as well as words: agreed is neutral
   blue, held is blue, in-transit is gold, paid is green. Green from the first
   frame would say "done" while the money is still moving. */
.deal__status {
  padding: 5px 10px;
  border: 1px solid rgba(var(--accent-rgb, var(--green-rgb)), .26);
  border-radius: 8px;
  background: rgba(var(--accent-rgb, var(--green-rgb)), .1);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--accent-soft, var(--green-soft));
  white-space: nowrap;
  transition: border-color 300ms ease, background-color 300ms ease, color 300ms ease;
}

.deal[data-state="0"] { --accent-rgb: var(--blue-rgb); --accent-soft: var(--blue-300); }
.deal[data-state="1"] { --accent-rgb: var(--blue-rgb); --accent-soft: var(--blue-300); }
.deal[data-state="2"] { --accent-rgb: var(--gold-rgb); --accent-soft: var(--gold-200); }
.deal[data-state="3"] { --accent-rgb: var(--green-rgb); --accent-soft: var(--green-soft); }

.deal__amount {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.045em;
}
.deal__caption { margin-top: 8px; font-size: 13px; color: var(--ink-4); }

.parties {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}
.party {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--fill-3);
}
.party {
  transition: border-color 300ms ease, background-color 300ms ease;
}

/* The modifier lives on the <li>, not on the avatar — the previous
   `.party__avatar--buyer` selector matched nothing and both avatars
   rendered as empty squares. */
.party__avatar {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 10px;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
}
.party__avatar::after {
  content: "";
  width: 11px; height: 11px;
  border-radius: 3px;
  background: currentColor;
  opacity: .85;
}
.party--buyer  .party__avatar { background: rgba(var(--blue-rgb), .16); border-color: rgba(var(--blue-rgb), .32); color: var(--blue-400); }
.party--seller .party__avatar { background: rgba(var(--gold-rgb), .14); border-color: rgba(var(--gold-rgb), .3);  color: var(--gold-400); }
.party--seller .party__avatar::after { border-radius: 50%; }
.party__body { flex: 1; min-width: 0; display: block; }
.party__role { display: block; font-size: 13.5px; font-weight: 600; }
.party__meta {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-4);
}
/* Pending is a hollow ring; done fills and draws a tick. Driven off the
   card's state so there is no third source of truth to keep in sync. */
.party__check {
  position: relative;
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.party__check::after {
  content: "";
  position: absolute;
  top: 3.5px; left: 6px;
  width: 4px; height: 8px;
  border: 1.5px solid var(--green-soft);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}

.deal[data-state="1"] .party--buyer  .party__check,
.deal[data-state="2"] .party--buyer  .party__check,
.deal[data-state="3"] .party--buyer  .party__check,
.deal[data-state="3"] .party--seller .party__check {
  background: rgba(var(--green-rgb), .16);
  border-color: rgba(var(--green-rgb), .4);
}
.deal[data-state="1"] .party--buyer  .party__check::after,
.deal[data-state="2"] .party--buyer  .party__check::after,
.deal[data-state="3"] .party--buyer  .party__check::after,
.deal[data-state="3"] .party--seller .party__check::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Whichever side is acting right now gets the lit border. */
.deal[data-state="0"] .party--buyer,
.deal[data-state="2"] .party--seller {
  border-color: rgba(var(--accent-rgb), .3);
  background: rgba(var(--accent-rgb), .05);
}

.deal__progress {
  margin-top: 24px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
/* scaleX, not width: width would relayout the bar every frame of a 520ms
   transition. transform-origin puts the growth on the left. */
.deal__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #4a86ff, #8fb8ff);
  transform: scaleX(var(--progress, .12));
  transform-origin: left;
  transition: transform 520ms var(--ease-out);
}
.deal[data-state="0"] { --progress: .12; }
.deal[data-state="1"] { --progress: .46; }
.deal[data-state="2"] { --progress: .74; }
.deal[data-state="3"] { --progress: 1; }
.deal[data-state="3"] .deal__progress-fill { background: linear-gradient(90deg, #4a86ff, var(--green)); }

/* Step control ------------------------------------------------------------
   A segmented control, not four buttons: one indicator slides between the
   four labels so the card reads as a single object moving through stages. */

.deal__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: 16px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}
.deal__steps::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: calc((100% - 6px) / 4);
  height: calc(100% - 6px);
  border-radius: 9px;
  background: rgba(var(--accent-rgb, var(--blue-rgb)), .18);
  border: 1px solid rgba(var(--accent-rgb, var(--blue-rgb)), .34);
  /* Moving on screen, not entering or leaving → ease-in-out. */
  transform: translateX(calc(var(--step-index, 0) * 100%));
  transition: transform 380ms var(--ease-in-out),
              background-color 300ms ease, border-color 300ms ease;
}
.deal[data-state="0"] .deal__steps { --step-index: 0; }
.deal[data-state="1"] .deal__steps { --step-index: 1; }
.deal[data-state="2"] .deal__steps { --step-index: 2; }
.deal[data-state="3"] .deal__steps { --step-index: 3; }

.deal__step {
  position: relative;
  padding: 8px 2px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-4);
  cursor: pointer;
  transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.deal__step:active { transform: scale(.97); }
.deal__step[aria-current="true"] { color: var(--ink-1); }
@media (hover: hover) and (pointer: fine) {
  .deal__step:hover { color: var(--ink-2); }
}

.float {
  position: absolute;
  width: 244px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(23, 29, 48, .94), rgba(13, 17, 29, .86));
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: 0 26px 56px rgba(2, 4, 12, .6), inset 0 1px 0 rgba(255, 255, 255, .13);
  animation: riseSoft 900ms var(--ease-out) .42s both;
}
.float--fee   { top: 0; left: 0; }
.float--hours {
  bottom: 0; right: 0;
  width: 254px;
  border-color: rgba(var(--gold-rgb), .26);
  background: linear-gradient(180deg, rgba(32, 27, 17, .94), rgba(15, 14, 13, .88));
  box-shadow: 0 26px 56px rgba(2, 4, 12, .6), inset 0 1px 0 rgba(255, 255, 255, .09);
  animation-delay: .5s;
}
.float__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.float__label--gold { color: rgba(223, 196, 139, .8); }
.float__value {
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.038em;
}
.float__value--gold { font-size: 16px; letter-spacing: -.03em; color: var(--gold-200); line-height: 1.25; }
.float__note { margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--ink-4); }

/* --------------------------------------------------------------------------
   8. Ticker
   -------------------------------------------------------------------------- */

.ticker {
  position: relative;
  z-index: 10;
  margin-bottom: 110px;
  border-block: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .015);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
/* Constant motion is hard to read past. Let people stop it. */
@media (hover: hover) and (pointer: fine) {
  .ticker:hover .ticker__track { animation-play-state: paused; }
}
.ticker__row {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 16px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-4);
  white-space: nowrap;
}
.ticker__row .is-blue { color: rgba(134, 179, 255, .8); }
.ticker__row .is-gold { color: rgba(223, 196, 139, .8); }

/* --------------------------------------------------------------------------
   9. Steps
   -------------------------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  /* Room above the cards for the rail and its nodes. */
  padding-top: 46px;
}

/* The rail is decoration, not a fifth card. Left in the grid flow it took
   cell 1 as a 278px invisible box, pushing 01–03 across and orphaning 04
   onto a second row — which is what made the set look uneven. */
.steps__rail {
  position: absolute;
  top: 15px; left: 0; right: 0;
  height: 1px;
  /* Blue at "условия", gold at "выплата": the line carries the journey. */
  background: linear-gradient(90deg,
    rgba(var(--blue-rgb), 0) 0%,
    rgba(var(--blue-rgb), .55) 12%,
    rgba(var(--blue-rgb), .5) 46%,
    rgba(var(--gold-rgb), .55) 82%,
    rgba(var(--gold-rgb), 0) 100%);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--fill-1), var(--fill-2));
  transition: border-color var(--t-hover) ease,
              transform var(--t-hover) var(--ease-out),
              background-color var(--t-hover) ease;
}

/* Each card hangs from its own node on the rail. */
.step::before {
  content: "";
  position: absolute;
  /* Flush with the card's text column (24px padding), not eyeballed. */
  top: -36px; left: 24px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--blue-500);
  box-shadow: 0 0 0 4px rgba(9, 11, 16, .9), 0 0 14px rgba(var(--blue-rgb), .55);
  transition: transform var(--t-hover) var(--ease-out),
              box-shadow var(--t-hover) ease;
}
.step--gold::before {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 4px rgba(9, 11, 16, .9), 0 0 14px rgba(var(--gold-rgb), .6);
}
/* The last node is filled — the process resolves rather than trailing off. */
.step--gold::before { background: var(--gold-400); }

/* The stem from node to card, so the two read as attached. */
.step::after {
  content: "";
  position: absolute;
  top: -25px; left: 29px;   /* centre of the 11px node */
  width: 1px; height: 25px;
  background: linear-gradient(180deg, rgba(var(--blue-rgb), .45), rgba(var(--blue-rgb), 0));
}
.step--gold::after {
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .5), rgba(var(--gold-rgb), 0));
}
.step--gold {
  border-color: rgba(var(--gold-rgb), .28);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .085), rgba(var(--gold-rgb), .015));
}
@media (hover: hover) and (pointer: fine) {
  .step:hover       { border-color: rgba(134, 179, 255, .38); transform: translateY(-3px); }
  .step--gold:hover { border-color: rgba(223, 196, 139, .5); }
  /* The node stays put while the card lifts, so the stem reads as taut. */
  .step:hover::before { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(9, 11, 16, .9), 0 0 20px rgba(var(--blue-rgb), .8); }
  .step--gold:hover::before { box-shadow: 0 0 0 4px rgba(9, 11, 16, .9), 0 0 20px rgba(var(--gold-rgb), .85); }
}

.step__index {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--blue-400);
}
.step--gold .step__index { color: var(--gold-300); }

.step__title {
  margin-top: 20px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.step--gold .step__title { color: var(--gold-200); }

.step__body {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-4);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10. Safety + tariff
   -------------------------------------------------------------------------- */

.safety-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 16px;
  align-items: stretch;
}

.panel { border-radius: 24px; }

/* Flex column so the guarantees can absorb the height the grid hands this
   panel when the tariff card next to it is taller — it was stretching to
   768px and leaving 386px of empty gradient under the last line of text. */
.panel--safety {
  display: flex;
  flex-direction: column;
  padding: 42px 40px;
  border: 1px solid rgba(255, 255, 255, .095);
  background: linear-gradient(152deg, rgba(28, 50, 114, .48), rgba(13, 17, 28, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11);
}

.panel__title {
  max-width: 420px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.9vw, 37px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.16;
}

.guarantees {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 14px;
  margin-top: 36px;
}

/* Four tiles rather than four floating paragraphs: they hold the panel's
   width and take the leftover height evenly instead of pooling it at the
   bottom. Echoes the four step cards above. */
.guarantee {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, .028);
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .guarantee:hover { border-color: rgba(134, 179, 255, .3); background: rgba(255, 255, 255, .05); }
}

.guarantee__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.guarantee__title::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 10px rgba(var(--blue-rgb), .8);
}

.guarantee__body {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-4);
  text-wrap: pretty;
}

/* Mirrors .tariff__hours pinned at the foot of the card beside it, so both
   panels resolve at the same place instead of one just running out. */
.safety__proof {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  padding: 18px 22px;
  border: 1px solid rgba(var(--gold-rgb), .24);
  border-radius: 16px;
  background: rgba(var(--gold-rgb), .06);
}
.safety__proof-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--gold-300);
  text-shadow: 0 0 24px rgba(var(--gold-rgb), .5);
}
.safety__proof-label {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

.panel--tariff {
  display: flex;
  flex-direction: column;
  padding: 42px 36px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--fill-1), var(--fill-2));
}

.tariff__rate {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
}
.tariff__number {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .88;
}
.tariff__unit {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold-300);
}

.tariff__body {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Calculator --------------------------------------------------------------
   The decision moment. Everything here is sized so the answer — what the
   seller actually receives — is the largest thing after the amount itself. */

.calc {
  margin-top: 26px;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .028);
}

.calc__label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.calc__amount {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

/* Native range, restyled. The filled portion is a gradient hard-stopped at
   the thumb position, so there is no second element to keep in sync. */
.calc__range {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  margin: 18px 0 0;
  height: 22px;
  background: transparent;
  cursor: grab;
}
.calc__range:active { cursor: grabbing; }

.calc__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background:
    linear-gradient(90deg, var(--gold-400), var(--gold-200)) 0 / var(--calc-pos, 62%) 100% no-repeat,
    rgba(255, 255, 255, .08);
}
.calc__range::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}
.calc__range::-moz-range-progress {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-200));
}

.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px; height: 20px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, var(--gold-200));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--gold-rgb), .5);
  transition: transform var(--t-press) var(--ease-out);
}
.calc__range::-moz-range-thumb {
  width: 20px; height: 20px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, var(--gold-200));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--gold-rgb), .5);
}
/* Grabbing the thumb should feel like picking it up, not pressing it down. */
.calc__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc__range:active::-moz-range-thumb     { transform: scale(1.12); }
@media (hover: hover) and (pointer: fine) {
  .calc__range:hover::-webkit-slider-thumb { transform: scale(1.06); }
}
.calc__range:focus { outline: none; }
.calc__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 0 0 3px var(--blue-400);
}
.calc__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 0 0 3px var(--blue-400);
}

.calc__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--ink-4);
}

.calc__rows {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
}
.calc__row dt { color: var(--ink-4); }
.calc__row dd {
  margin: 0;
  flex: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.calc__row--total dt { color: var(--ink-2); font-weight: 600; }
.calc__row--total dd {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--gold-200);
}

.tariff__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.tariff__list li { display: flex; align-items: center; gap: 11px; }
.tariff__list li::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
}

.tariff__hours {
  margin-top: auto;
  padding: 16px 18px;
  border: 1px solid rgba(var(--gold-rgb), .24);
  border-radius: 14px;
  background: rgba(var(--gold-rgb), .06);
}
.tariff__hours-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(223, 196, 139, .8);
}
.tariff__hours-value {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 15.5px;
  letter-spacing: .01em;
  color: var(--gold-200);
}
/* Push the hours block to the bottom of the card without collapsing the
   gap when the card is short. */
.panel--tariff .tariff__hours { margin-top: auto; }
.panel--tariff .tariff__list  { margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   10b. Verify / anti-clone
   -------------------------------------------------------------------------- */

.verify {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  padding: 44px 44px 46px;
  border: 1px solid rgba(var(--gold-rgb), .22);
  border-radius: 28px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--gold-rgb), .09), transparent 62%),
    linear-gradient(180deg, var(--fill-1), var(--fill-2));
}

.verify__head { grid-column: 1 / -1; max-width: 620px; }
.verify__head .section__title { margin-top: 14px; }
.verify__note {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* The handle is the single most important string on the page — it gets the
   weight of a headline and a one-tap copy, because retyping it by hand is
   exactly where people land on a lookalike. */
.handle {
  align-self: start;
  padding: 22px 24px 20px;
  border: 1px solid rgba(var(--gold-rgb), .3);
  border-radius: 18px;
  background: rgba(var(--gold-rgb), .07);
}
.handle__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(223, 196, 139, .82);
}
.handle__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.handle__value {
  font-family: var(--font-mono);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--gold-200);
  overflow-wrap: anywhere;
}
.handle__copy {
  flex: none;
  padding: 10px 16px;
  border: 1px solid rgba(var(--gold-rgb), .38);
  border-radius: 11px;
  background: rgba(var(--gold-rgb), .1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-200);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.handle__copy:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .handle__copy:hover { background: rgba(var(--gold-rgb), .18); border-color: rgba(var(--gold-rgb), .55); }
}
.handle__hint {
  min-height: 17px;   /* reserved, so confirming does not nudge the layout */
  margin-top: 10px;
  font-size: 12px;
  color: var(--green-soft);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.handle__hint.is-shown { opacity: 1; }

/* Checker ------------------------------------------------------------------
   Verdict colour is driven by [data-state] on the form, so the input, the
   ring and the message can never disagree about what was found. */

.checker { margin-top: 18px; }

.checker__label {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
}

.checker__field { margin-top: 10px; }

.checker__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-1);
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease,
              box-shadow var(--t-hover) ease;
}
.checker__input::placeholder { color: rgba(237, 240, 246, .3); }
.checker__input:focus-visible {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), .22);
}

.checker[data-state="good"] .checker__input {
  border-color: rgba(var(--green-rgb), .55);
  background: rgba(var(--green-rgb), .07);
}
.checker[data-state="bad"] .checker__input {
  border-color: rgba(255, 122, 122, .55);
  background: rgba(255, 122, 122, .07);
}

.checker__verdict {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.checker[data-state] .checker__verdict { display: flex; }
.checker[data-state="good"] .checker__verdict { color: var(--green-soft); }
.checker[data-state="bad"]  .checker__verdict { color: #ff9b9b; }

/* Shape as well as colour, so the verdict survives colour-blindness and a
   grayscale screenshot. */
.checker__verdict::before {
  content: "";
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: currentColor;
  opacity: .22;
}
.checker[data-state="good"] .checker__verdict::before,
.checker[data-state="bad"]  .checker__verdict::before { opacity: 1; }
.checker[data-state="good"] .checker__verdict::before {
  background: rgba(var(--green-rgb), .18);
  box-shadow: inset 0 0 0 1px rgba(var(--green-rgb), .6);
}
.checker[data-state="bad"] .checker__verdict::before {
  background: rgba(255, 122, 122, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 122, .6);
}

.checker__detail {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-4);
  overflow-wrap: anywhere;
}
.checker__detail:empty { display: none; }

/* The offending characters, called out inside the explanation. */
.checker__mark {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 122, 122, .18);
  color: #ffc2c2;
  font-family: var(--font-mono);
}

.checks {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
}

/* Проверка сделки по номеру.
   Стоит в этой же секции не случайно: выше человек убеждается, что пишет
   настоящему гаранту, здесь — что сделка настоящая. Оба вопроса он задаёт
   в одну минуту, перед переводом, и оба решаются без аккаунта. */
.verify__deal {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
}
.verify__deal-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.verify__deal-body {
  margin-top: 8px;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}
.verify__deal-link { margin-top: 16px; max-width: 100%; }
@media (max-width: 700px) {
  .verify__deal-link { width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
}
.check { display: flex; align-items: flex-start; gap: 13px; }
.check__mark {
  position: relative;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
}
/* A crossed circle for "never happens", a ticked one for "this is the rule".
   Shape carries the meaning, not colour alone. */
.check__mark--no {
  border: 1px solid rgba(255, 122, 122, .45);
  background: rgba(255, 122, 122, .12);
}
.check__mark--no::before,
.check__mark--no::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1.5px;
  border-radius: 2px;
  background: #ff9b9b;
  transform: translate(-50%, -50%) rotate(45deg);
}
.check__mark--no::after { transform: translate(-50%, -50%) rotate(-45deg); }

.check__mark--yes {
  border: 1px solid rgba(var(--green-rgb), .45);
  background: rgba(var(--green-rgb), .14);
}
.check__mark--yes::after {
  content: "";
  position: absolute;
  top: 4px; left: 7px;
  width: 4px; height: 8px;
  border: 1.5px solid var(--green-soft);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.check__title { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.check__body {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-4);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10c. Reviews
   -------------------------------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--fill-1), var(--fill-2));
  transition: border-color var(--t-hover) ease, transform var(--t-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .review:hover { border-color: rgba(134, 179, 255, .34); transform: translateY(-3px); }
}

.review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review__deal {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-4);
}
.review__amount {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--green-soft);
}

.review__quote {
  flex: 1;
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

.review__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-4);
}

a.review__deal { transition: color var(--t-hover) ease; }
.review__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
  transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  a.review__deal:hover,
  .review__author:hover { color: #fff; }
}
.review__date { flex: none; }

/* Знак отзыва. Отрицательный показывается так же честно, как и
   положительный: это отзыв о стороне сделки, а не о гаранте, и то, что
   сделка с недобросовестной стороной всё равно закрылась, — довод за, а не
   против. */
.review__mark {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  flex: none;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1;
}
.review__mark--plus  { background: rgba(var(--green-rgb), .14); color: var(--green-soft); }
.review__mark--minus { background: rgba(255, 122, 122, .14); color: #ff9b9b; }

/* --------------------------------------------------------------------------
   11. CTA
   -------------------------------------------------------------------------- */

.section--cta { padding-bottom: 100px; }

.cta {
  position: relative;
  overflow: hidden;
  padding: 62px 52px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 28px;
  background: linear-gradient(148deg, rgba(34, 60, 140, .52), rgba(11, 15, 26, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 40px 88px rgba(2, 4, 12, .6);
}
.cta__glow {
  position: absolute;
  top: -200px; right: -100px;
  width: 540px; height: 540px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--blue-rgb), .3), rgba(var(--blue-rgb), 0));
}
.cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 52px;
  flex-wrap: wrap;
}
.cta__title {
  max-width: 540px;
  font-family: var(--font-display);
  font-size: clamp(29px, 3.3vw, 42px);
  font-weight: 700;
  letter-spacing: -.042em;
  line-height: 1.14;
}
.cta__body {
  max-width: 470px;
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}
.cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 236px;
}
.cta__actions .btn--primary { box-shadow: 0 18px 44px rgba(44, 92, 220, .42), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

.section#faq { padding-bottom: 104px; }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 56px;
}

.faq { display: flex; flex-direction: column; }
.faq__item {
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.faq__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-hover) ease;
}
/* The default disclosure triangle is not part of this type system. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { color: var(--blue-300); }
  .faq__q:hover .faq__chevron { border-color: rgba(134, 179, 255, .5); }
}
.faq__q:focus-visible { outline-offset: -2px; }

.faq__chevron {
  position: relative;
  width: 26px; height: 26px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color var(--t-hover) ease, transform var(--t-ui) var(--ease-out);
}
/* A plus that becomes a minus: the horizontal bar stays, the vertical one
   rotates away. Cheaper to read than a spinning chevron. */
.faq__chevron::before,
.faq__chevron::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  border-radius: 2px;
  background: var(--ink-2);
  transform: translate(-50%, -50%);
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) ease;
}
.faq__chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__chevron::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq__item[open] .faq__chevron { border-color: rgba(134, 179, 255, .45); }

.faq__a {
  max-width: 620px;
  margin: 0;
  padding-bottom: 26px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-4);
  text-wrap: pretty;
}
/* Ответ, который отправляет проверять сказанное, должен показывать, куда.
   Подчёркивание, а не только цвет: на приглушённом тексте FAQ одного цвета
   мало, чтобы ссылку заметили. */
.faq__link {
  color: var(--blue-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--blue-rgb), .45);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .faq__link:hover { color: #fff; text-decoration-color: currentColor; }
}
/* Occasional interaction, so the reveal earns its animation. */
.faq__item[open] .faq__a {
  animation: faqOpen 300ms var(--ease-out) both;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: var(--bg-footer);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-block: 36px;
}
.footer__brand { display: flex; align-items: center; gap: 12px; }
/* Тот же знак, что в шапке. Раньше здесь был просто синий квадрат с
   градиентом и без буквы — заглушка, оставшаяся от времён, когда логотипа
   не существовало. */
.footer__mark {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 7px;
}
.footer__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -.03em;
}
.footer__tag { margin-left: 6px; font-size: 12.5px; color: var(--ink-4); }

.footer__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13px; }
.footer__nav a { color: var(--ink-4); }
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover { color: #fff; }
}

.footer__contact {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
}

/* Документы — отдельной строкой под основным футером, на всех страницах
   сайта и кабинета. Платёжный провайдер требует, чтобы соглашение,
   политика, тарифы и контакты были доступны постоянно, а не по запросу. */
.footer__legal {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.footer__legal a { color: var(--ink-4); }
@media (hover: hover) and (pointer: fine) {
  .footer__legal a:hover { color: #fff; }
}
.footer__legal a[aria-current="page"] { color: var(--ink-2); }

/* Кодовое слово для проверки сайта платёжным провайдером. Видимое, но
   тихое: его ищет проверяющий, а не посетитель. Убрать после регистрации
   кассы — вместе с элементом в разметке. */
.footer__code {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   13b. Mobile dock
   -------------------------------------------------------------------------- */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(9, 11, 16, .92);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: 0 -18px 40px rgba(2, 4, 12, .5);
  /* Hidden by its own height, so it never needs a magic pixel value. */
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out);
}
.dock.is-up { transform: none; }

.dock__meta { display: flex; align-items: center; gap: 8px; }
.dock__hours {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.dock__cta { flex: 1; max-width: 220px; padding: 13px 20px; }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .hero__visual { justify-self: center; }
  .safety-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The rail is a four-across device. Once the set wraps to two rows a
     single line above the first row would connect the wrong cards. */
  .steps { padding-top: 0; }
  .steps__rail { display: none; }
  .step::before, .step::after { display: none; }

  .verify { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav { display: none; }
  .nav-toggle { display: grid; }
  .nav-sheet { display: flex; }
  .panel--tariff .tariff__hours { margin-top: 32px; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }
  .hero__inner { padding-block: 64px 88px; }
  .cta { padding: 44px 30px; }
  .verify { padding: 34px 26px 36px; }
  .panel--safety { padding: 34px 28px; }
  .panel--tariff { padding: 34px 28px; }
  .ticker { margin-bottom: 84px; }
  .section { padding-bottom: 88px; }
}

@media (max-width: 700px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .guarantees { grid-template-columns: minmax(0, 1fr); }
  .reviews { grid-template-columns: minmax(0, 1fr); }

  /* The 1px rules read as debris once the row wraps. */
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
  .stats__rule { display: none; }

  .hours { display: none; }
  .masthead__inner { gap: 16px; }
  .hero__actions .btn { flex: 1 1 100%; }

  /* At this width the masthead CTA wrapped to two lines and crowded the
     brand. It is redundant here anyway: the hero's own button is on screen
     at the top, and the dock takes over the moment it scrolls away. */
  .masthead__aside > .btn--sm { display: none; }

  /* Floating cards stack instead of overlapping the panel at this width. */
  .hero__visual { padding: 0; max-width: 100%; }
  .float { position: static; width: 100%; margin-top: 12px; }
  .float--hours { width: 100%; }

  .cta__actions { width: 100%; }
  .faq-grid { gap: 32px; }

  .dock { display: flex; }
  /* Clear the dock so it never covers the last line of the footer. */
  .footer__inner { padding-bottom: 96px; }
  /* Страницы без дока — документы и кабинет — запас под него не держат. */
  .footer--plain .footer__inner { padding-bottom: 36px; }
  .footer__code { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   Fewer and gentler, not zero: opacity and colour survive, movement and
   the three infinite loops do not.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .ticker__track,
  .deal__sweep,
  .section__glow--gold { animation: none; }

  .rv,
  .deal,
  .float,
  .hero__title { animation: fadeOnly 300ms var(--ease-out) both; }

  .hero__rule { animation: none; transform: none; }

  /* The signature still appears — it carries meaning, not decoration. What
     goes is the writing motion. */
  .autograph__ink path { animation: none; stroke-dashoffset: 0; }
  .autograph__note { animation: fadeOnly 300ms var(--ease-out) both; }

  /* State changes still need to be legible — the opacity crossfade stays,
     the movement and the blur go. */
  .swap > [data-for] {
    transform: none;
    filter: none;
    transition: opacity 200ms ease;
  }
  .deal__steps::before { transition: transform 0ms, background-color 200ms ease; }
  .deal__progress-fill { transition: transform 200ms ease; }
  .party__check::after { transform: rotate(45deg); transition: opacity 200ms ease; }
  .deal__step:active,
  .calc__range:active::-webkit-slider-thumb { transform: none; }

  .js [data-reveal] { transform: none; }
  .js [data-reveal].is-in { transition: opacity 300ms var(--ease-out); }

  .btn:active,
  .btn--primary:hover,
  .btn--primary:active,
  .nav-toggle:active,
  .step:hover,
  .review:hover,
  .handle__copy:active { transform: none; }

  .faq__item[open] .faq__a { animation: fadeOnly 200ms var(--ease-out) both; }
  .dock { transition: opacity 200ms ease; }

  .nav-sheet { transition: opacity 200ms ease; transform: none; }
}

/* ==========================================================================
   3D-объекты

   Правило одно: объект помогает понять секцию или его здесь нет. Поэтому
   все они `aria-hidden` и `loading="lazy"` — это иллюстрация, а не контент,
   и она не должна задерживать ни чтение, ни первый экран.

   Движение у каждого своё, но по одному закону: объект живёт, пока на него
   смотрят, и замирает, когда уходит из виду. Бесконечная анимация за
   пределами экрана — это разряженная батарея и ничего больше.
   ========================================================================== */

.o3d-wrap {
  position: relative;
  pointer-events: none;         /* объект не перехватывает клики у текста */
}

.o3d {
  display: block;
  width: 100%;
  height: auto;
  /* Рендеры приходят с собственной мягкой тенью, но она рассчитана на
     светлый фон. На тёмном добавляем холодное свечение снизу — иначе
     объект висит в пустоте без опоры. */
  filter: drop-shadow(0 22px 46px rgba(var(--blue-rgb), .20));
}

/* Появление: объект всплывает чуть позже текста рядом. Порядок чтения —
   сначала слово, потом картинка; одновременный выход их сталкивает. */
.js .o3d {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity var(--t-reveal) var(--ease-out) .12s,
              transform var(--t-reveal) var(--ease-out) .12s;
}
.js .is-in .o3d,
.js .o3d.is-in { opacity: 1; transform: none; }

/* Дыхание. Амплитуда намеренно мизерная — 6px за 7 секунд: на глаз это
   не «анимация», а ощущение, что предмет настоящий и стоит в воздухе.
   Всё, что заметнее, начинает отвлекать от текста. */
.js .o3d.is-in { animation: o3dFloat 7s var(--ease-in-out) infinite alternate; }
@keyframes o3dFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* -- размещение по секциям -------------------------------------------------- */

/* Процесс: четыре плиты — широкий объект, встаёт полосой под заголовком. */
.o3d-wrap--how { max-width: 620px; margin: 6px auto 34px; }

/* Безопасность и тариф: объект в углу панели, за текстом. Панель узкая,
   поэтому он уходит вправо и частично за край — так он не съедает колонку
   и читается как фон, а не как вставка. */
.o3d-wrap--safety,
.o3d-wrap--tariff {
  position: absolute;
  top: -26px; right: -40px;
  width: 260px;
  opacity: .5;
  z-index: 0;
}
.panel--safety, .panel--tariff { position: relative; overflow: hidden; }
.panel--safety > :not(.o3d-wrap),
.panel--tariff > :not(.o3d-wrap) { position: relative; z-index: 1; }

/* Проверка: две таблички. Объект про сравнение — и стоит там же, где
   человек сравнивает: в правой колонке, над списком признаков подделки.
   Раньше он висел над заголовком секции и не относился ни к чему. */
.o3d-wrap--verify {
  max-width: 320px;
  margin: -6px 0 26px;
}

/* Кто отвечает: штамп уходит в фон панели.
   В секции уже есть печать — нарисованная, с текстом по кругу. Два предмета
   одного смысла рядом читаются как повтор, поэтому 3D-штамп поддерживает
   композицию, а не спорит с ней. */
.o3d-wrap--person {
  position: absolute;
  /* Целиком внутри панели и по вертикали к середине: в правом верхнем углу
     штамп подпирал заголовок, а справа от текста колонка пустует по всей
     высоте. Первый вариант вообще вылезал за край, и скруглённый угол
     разрезал головку пополам — предмет читался обрезанным, а не уходящим
     за кадр. */
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 190px;
  opacity: .32;
  z-index: 0;
}
.person { position: relative; overflow: hidden; }
.person > :not(.o3d-wrap) { position: relative; z-index: 1; }

/* Отзывы: стопка жетонов встаёт справа, рядом с пояснением.
   `.section__head` — флекс с выравниванием по низу, и объект внутри левой
   ячейки делал её высокой: пояснение справа уезжало вниз, а заголовок
   отрывался от него. Теперь объект и пояснение — одна колонка. */
.section__aside {
  display: grid;
  justify-items: end;
  gap: 16px;
  max-width: 420px;
}
.o3d-wrap--reviews { width: 158px; }
.section__aside .section__note { margin: 0; }

/* Призыв: дверь. `.cta__inner` — флекс, и без явной основы обёртка
   схлопывается в нулевую ширину: `max-width` ограничивает, но ничего не
   задаёт. Нужен flex-basis. */
.o3d-wrap--cta {
  flex: 0 0 170px;
  align-self: center;
  opacity: .75;
}
@media (max-width: 900px) {
  /* В колонку объект уходит первым: кнопки должны остаться внизу, под рукой. */
  .o3d-wrap--cta { flex: 0 0 auto; max-width: 150px; margin: 0 auto; order: -1; }
}

/* Кириллический хвост у числа.

   Bruno Ace покрывает латиницу и цифры, но не кириллицу. В строках, где
   число стоит рядом с русским словом — «₽ 480 млн», «Сделка 10%»,
   «с 2019 года», — из-за этого внутри одной строки оказывались две
   гарнитуры одного кегля и веса. Это читалось как сбой вёрстки, а не как
   решение.

   Слово рядом с числом теперь отбито намеренно: мельче, спокойнее по цвету.
   Разные шрифты в одной строке перестают выглядеть случайностью, как только
   между ними появляется видимая иерархия. */
.unit {
  font-family: var(--font-body);
  font-size: .68em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* Гарант объявил, что его нет.
   Часы в шапке обещают ответ; когда обещание сегодня не действует, на их
   месте должно стоять это, и заметно — иначе человек напишет и будет ждать
   впустую. */
.hours--away {
  /* У обычных часов нет ни рамки, ни фона — это просто текст. Плашка
     отсутствия рисует их себе сама: иначе `border-color` красит рамку,
     которой не существует, и на экране не меняется ничего. */
  padding: 5px 11px;
  border: 1px solid rgba(var(--gold-rgb), .45);
  border-radius: 999px;
  background: rgba(var(--gold-rgb), .12);
  color: var(--gold-200);
  cursor: help;
}

/* -- капсула фоном первого экрана -------------------------------------------

   Три попытки поставить её отдельной картинкой в правой колонке кончились
   одинаково: объект всё время с чем-нибудь спорил. Сначала его срезало краем
   экрана, потом карточка разрезала подставку, потом он просто висел рядом,
   не относясь ни к чему.

   Фоном он перестаёт быть вторым предметом на экране. Это уже не картинка
   рядом с текстом, а то, о чём весь экран: деньги под защитой. Спорить не с
   чем — за текстом нет ничего, кроме него.

   Две вещи держат это в рамках приличия:

   * прозрачность .22 — на тёмном фоне этого хватает, чтобы предмет читался,
     и не хватает, чтобы мешать белому заголовку поверх;
   * лёгкое размытие. Без него объект выглядит просто выцветшим; с ним —
     находящимся за планом, как расфокусированный фон в кадре.
   -------------------------------------------------------------------------- */

.capsule {
  position: absolute;
  /* Держится левее карточки сделки и не пересекается с ней вовсе.
     Карточка полупрозрачная — всего 7,5% белого поверх фона, — и светлый
     предмет под ней съедал контраст у мелкого серого текста: «сумма
     зафиксирована в условиях» переставало читаться. Крупный белый заголовок
     фон переживает спокойно, одиннадцатипиксельная подпись — нет, поэтому
     выбор между «за именем» и «за карточкой» решается не вкусом. */
  /* Ниже шапки: при отрицательном отступе верх капсулы уходил под
     тёмную полосу навигации, и от предмета оставался обрезанный низ. */
  top: 8%;
  /* Привязка к центру страницы, а не к проценту от окна.
     Было `left: 32%` плюс `margin-left: min(-340px, -44%)` — и на широком
     мониторе процент побеждал пиксели, отступ рос вместе с окном, и капсулу
     утаскивало за левый край. Смещение от центра — величина постоянная,
     потому что контент тоже центрирован. */
  left: 50%;
  /* Смещение сжимается вместе с окном: на 1280 постоянные 320px уводили
     край объекта за экран. clamp держит его в рамках, не превращаясь при
     этом в процент, который на широком мониторе улетает. */
  translate: calc(-50% - clamp(150px, 22vw, 320px)) 0;
  width: min(680px, 88%);
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  filter: blur(2px);
}
.capsule__video { display: block; width: 100%; height: auto; }

.js .capsule {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1200ms var(--ease-out) .35s,
              transform 1600ms var(--ease-out) .35s;
}
.js .capsule.is-in { opacity: .18; transform: none; }

/* Содержимое поверх фона. */
.hero__inner { position: relative; z-index: 1; }

@media (max-width: 1200px) {
  .capsule { width: min(520px, 92%); translate: calc(-50% - clamp(110px, 15vw, 190px)) 0; top: 6%; }
  .o3d-wrap--safety, .o3d-wrap--tariff { width: 190px; right: -30px; opacity: .38; }
}
@media (max-width: 700px) {
  /* На телефоне первый экран — это заголовок и кнопка. Фоновый предмет за
     ними на маленьком экране только мешает читать. */
  .capsule { display: none; }
  /* Штамп в «Кто отвечает» — тоже фон за текстом, и на узком экране он
     ложился прямо на абзац. Тот же довод, что у капсулы. */
  .o3d-wrap--safety, .o3d-wrap--tariff, .o3d-wrap--person { display: none; }
  .o3d-wrap--reviews, .o3d-wrap--verify { max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .o3d { opacity: 1; transform: none; transition: none; }
  .js .o3d.is-in { animation: none; }
  .js .capsule { opacity: .92; transform: none; animation: none; }
}


/* Отпечаток снимка на странице метрик. Моноширинный и с переносом по любому
   символу: его копируют целиком, и разорванная посередине строка из 64 знаков
   на узком экране — это строка, которую скопируют неверно. */
.honest__root {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--gold-200);
  overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   17. Документы — соглашение, политика, тарифы, контакты

   Режим чтения, а не витрина: одна колонка не шире 72 знаков, номер у
   каждого пункта (на него ссылаются в споре и в переписке с банком),
   оглавление сверху, короткая выжимка до юридического текста. Никаких
   появлений по скроллу — документ виден целиком сразу.
   -------------------------------------------------------------------------- */

.doc {
  position: relative;
  z-index: 10;
  max-width: 820px;
  margin-inline: auto;
  padding: 56px var(--gutter) 110px;
}

.doc__home {
  padding: 10px 17px;
  font-size: 13.5px;
  border-radius: 12px;
}

.doc__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.doc__docs a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 13px;
  color: var(--ink-3);
  transition: border-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .doc__docs a:hover { border-color: var(--line-strong); color: #fff; }
}
.doc__docs a[aria-current="page"] {
  border-color: rgba(var(--blue-rgb), .45);
  background: rgba(var(--blue-rgb), .1);
  color: var(--blue-300);
}

.doc__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.042em;
  line-height: 1.1;
  text-wrap: balance;
}
.doc__meta {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-4);
}

.doc__summary {
  margin-top: 34px;
  padding: 22px 24px;
  border: 1px solid rgba(var(--blue-rgb), .24);
  border-radius: 18px;
  background: rgba(var(--blue-rgb), .06);
}
.doc__summary-label,
.doc__toc-label,
.doc__figure-label,
.doc__contact-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.doc__summary-label { color: var(--blue-400); }
.doc__summary ul { margin: 12px 0 0; padding-left: 18px; }
.doc__summary li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.doc__summary li + li { margin-top: 6px; }

.doc__toc {
  margin-top: 30px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--fill-1), var(--fill-2));
}
.doc__toc ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  columns: 2 220px;
  column-gap: 32px;
}
.doc__toc li { break-inside: avoid; padding: 3px 0; font-size: 14px; }
.doc__toc a { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .doc__toc a:hover { color: #fff; }
}

.doc__section { margin-top: 48px; scroll-margin-top: 96px; }
.doc__section h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.3;
}
.doc__section h3 {
  margin-top: 26px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.015em;
}
.doc__section p,
.doc__section li {
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}
.doc__section p { margin-top: 14px; }
.doc__section ul,
.doc__section ol { margin: 12px 0 0; padding-left: 22px; }
.doc__section li + li { margin-top: 6px; }
/* Общий сброс снимает маркеры со всех списков; в документе они нужны —
   без них перечень читается как набор отдельных абзацев с отступом. */
.doc__section ul,
.doc__summary ul { list-style: disc; }
.doc__section ol { list-style: decimal; }
.doc__section li::marker,
.doc__summary li::marker { color: var(--blue-400); }
.doc__section a {
  color: var(--blue-400);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.doc__section strong { color: var(--ink-1); font-weight: 650; }
.doc__section code { font-family: var(--font-mono); font-size: .88em; color: var(--ink-1); }
/* Номер пункта — моноширинным, чтобы «4.10» не прыгал рядом с «4.9». */
.doc__n {
  font-family: var(--font-mono);
  font-size: .86em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}

/* Тарифы: таблица примеров. На телефоне прокручивается рамка, а не
   страница целиком. */
.doc__table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.doc__table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc__table th,
.doc__table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.doc__table tr:last-child td { border-bottom: 0; }
.doc__table th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: rgba(255, 255, 255, .025);
}
.doc__table td { color: var(--ink-2); }
.doc__table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* Ключевые цифры тарифа. */
.doc__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}
.doc__figure {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--fill-1), var(--fill-2));
}
.doc__figure-value {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.doc__figure-note { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-4); }

/* Контакт поддержки. */
.doc__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding: 24px 26px;
  border: 1px solid rgba(var(--gold-rgb), .32);
  border-radius: 20px;
  background: rgba(var(--gold-rgb), .06);
}
.doc__contact-label { color: rgba(223, 196, 139, .88); }
.doc__contact-handle {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--gold-200);
}
.doc__contact-note { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }

@media (max-width: 700px) {
  .doc { padding-top: 36px; }
  .doc__figures { grid-template-columns: minmax(0, 1fr); }
  .doc__contact .btn { flex: 1 1 100%; }
  .doc__section h2 { font-size: 19px; }
}