/* =====================================================
   Flott — платформа цифрового факторинга
   Style inspired by fruitful.com · blue / white / black
   ===================================================== */

:root {
  --black: #0a0b10;
  --ink-60: rgba(10, 11, 16, 0.62);
  --ink-40: rgba(10, 11, 16, 0.42);
  --white: #ffffff;

  --blue: #2353e8;
  --blue-deep: #1a3fc4;
  --blue-ink: #12309e;
  --blue-text-on: #d9e4ff;

  --tint-blue: #eaf1ff;
  --tint-gray: #f5f7fb;
  --tint-chip: #d7e4ff;
  --line: rgba(10, 11, 16, 0.08);
  --line-strong: rgba(10, 11, 16, 0.14);

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Headings run on the same face as the hero — see the h1/h2/h3 rule. */
  --font-head: var(--font);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

/* ---------- Type ---------- */

h1 {
  font-size: clamp(3.2rem, 8.2vw, 6.6rem);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.035em;
}

h1 em {
  font-style: normal;
  color: var(--blue);
}

h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.h2-sm { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Headings run on the hero's Inter, not a display face. The display sizes stay
   at 400 to match the hero headline (Inter 400 at 56–96px); h3 is small enough
   that 400 reads flabby, so it keeps the 600 declared above. */
h1, h2, .h2-sm {
  font-family: var(--font-head);
  font-weight: 400;
}

h3 {
  font-family: var(--font-head);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 20px;
}

.eyebrow-light { color: #8fadff; }

.section-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-60);
  max-width: 620px;
  margin-top: 20px;
}

.footnote {
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--ink-60);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 30px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
    color 0.35s var(--ease), border-color 0.35s var(--ease);
  will-change: transform;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Magnetic button — JS translates it toward the cursor; keep the transform
   snappy (the default 0.35s feels floaty) while preserving colour transitions. */
.magnetic {
  transition: transform 0.18s var(--ease), background 0.35s var(--ease),
    color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btn-sm { padding: 12px 22px; font-size: 0.92rem; }

.btn-primary { background: var(--blue); color: var(--blue-text-on); }
.btn-primary:hover { background: var(--blue-deep); color: var(--white); }

.btn-dark { background: var(--black); color: var(--white); margin-top: 32px; }
.btn-dark:hover { background: var(--blue); }

.btn-ghost { border-color: var(--line-strong); color: var(--black); background: transparent; }
.btn-ghost:hover { background: var(--black); border-color: var(--black); color: var(--white); }

.btn-white { background: var(--white); color: var(--blue-ink); }
.btn-white:hover { background: var(--tint-chip); }

.btn-outline-light { border-color: rgba(255, 255, 255, 0.4); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--blue-ink); border-color: var(--white); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 14px 0;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 10px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--black);
}

/* Официальный знак вертикальный (1013×1770) — высоту задаём, ширину
   считает браузер, иначе знак сплющивается в квадрат */
.brand-mark { width: auto; height: 30px; color: var(--blue); }

.brand-word {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.site-nav {
  display: flex;
  gap: 34px;
}

.site-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-60);
  transition: color 0.25s;
}

.site-nav a:hover { color: var(--black); }

.header-cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: 10px 6px;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

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

.hero {
  position: relative;
  padding: 172px 0 40px;
  background:
    radial-gradient(58% 48% at 82% 2%, rgba(35, 83, 232, 0.10), transparent 70%),
    radial-gradient(40% 34% at 8% 20%, rgba(35, 83, 232, 0.06), transparent 70%),
    var(--white);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-copy {
  transform-origin: 50% 55%;
  will-change: transform, opacity;
}

.hero-visual {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-60);
  max-width: 660px;
  margin-top: 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero-visual {
  position: relative;
  margin-top: 128px;
}

/* Browser-chrome mockup */

.browser {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    0 2px 6px rgba(10, 11, 16, 0.04),
    0 32px 80px -24px rgba(18, 48, 158, 0.25);
  overflow: hidden;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 20px;
  background: var(--blue);
}

.browser-bar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
}

.browser-bar .url {
  margin-left: 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
  padding: 6px 16px;
  border-radius: 99px;
}

.browser-body { padding: clamp(18px, 3vw, 34px); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.stat {
  background: var(--tint-gray);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.stat-value small { font-size: 0.7em; font-weight: 600; color: var(--ink-40); }
.stat-value.accent { color: var(--blue); }

.mini-table { margin-top: 16px; }

.mini-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 12px 6px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

.mini-row span:last-child { font-weight: 600; }

.mini-head {
  border-top: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
}

.mini-head span { font-weight: 600 !important; }

/* Floating chips */

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 12px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 40px -12px rgba(18, 48, 158, 0.28);
  animation: float 7s ease-in-out infinite;
}

.chip-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tint-chip);
  color: var(--blue-ink);
  font-size: 0.72rem;
  flex: 0 0 auto;
}

.chip-ic.ok { background: var(--blue); color: var(--white); }
.chip-ic.pulse { color: var(--blue); background: var(--tint-blue); animation: pulse 2s infinite; }

.chip-1 { top: -26px; right: 4%; }
.chip-2 { bottom: 16%; left: -14px; animation-delay: -2.5s; }
.chip-3 { bottom: -22px; right: 12%; animation-delay: -4.5s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Marquee ---------- */

/* The seam, continued past the fold. z-index: -1 puts it under every in-flow
   section but still above the page's white canvas, so it shows through the
   transparent sections and the opaque ones — the marquee, the dark band, the
   blue CTA, the footer — simply cover it. Geometry is set in script.js. */
.flow-line {
  position: absolute;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

/* The line draws in as the reader scrolls. Where the browser supports
   scroll-driven animations it runs on the scroll offset itself, so no handler
   of ours fires per frame — that, and not the clip, is what made the earlier
   version drag. script.js sets `animation-range` (it needs the measured
   geometry) and falls back to a rAF handler where this isn't supported.

   `both` matters: before the range the line has to stay hidden, and after it
   has to stay drawn. */
@supports (animation-timeline: scroll()) {
  .flow-line {
    animation: flow-draw linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes flow-draw {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* No background here: it was white on a white page, and dropping it lets the
   flow line pass behind the ticker instead of being cut off right under the
   hero, where the taper reads. */
.marquee-strip {
  padding: 46px 0 26px;
}

.marquee {
  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);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.marquee-track span {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-40);
  white-space: nowrap;
}

.marquee-track i {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--blue);
  opacity: 0.7;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Sections ---------- */

.section { padding: clamp(88px, 11vw, 148px) 0; }

.section-tint {
  background: var(--tint-blue);
  border-radius: clamp(28px, 4vw, 48px);
  width: min(1400px, 100% - 24px);
  margin-inline: auto;
}

/* ---------- Flott AI ---------- */

/* The section is a single blue card laid over the reaching-hands render.

   The mark sits dead centre of that image, so the background is centred and the
   overlay is a vignette rather than a sweep: clear in the middle so the logo
   and the two hands reaching for it read, closing down towards the edges where
   the headline and the panels need a dark ground to sit on. */
.section-ai {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  border-radius: clamp(28px, 4vw, 48px);
  width: min(1400px, 100% - 24px);
  margin-inline: auto;
  background-color: #0d3fbe;
}

/* The render, as an element rather than a background, because the mark is not
   at the centre of its own image — it sits at 47.3% / 56.3%. Under `cover` the
   card is height-constrained, which leaves zero vertical freedom, so no
   background-position could ever pull the mark onto the centre. script.js sizes
   and offsets this instead. These declarations are the starting point, and what
   you get if the script never runs. */
.ai-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Подписи впечатаны в низ снимков — кадрируем выше, как в макете */
  object-position: center 24%;
}

/* На снимке United Ventures подпись впечатана поперёк нижней трети, и никакой
   кроп в пропорциях макета её не убирает — поэтому кадр приближен. Временно:
   с чистым снимком это правило не нужно. */
.backing-shot-zoom {
  /* Кадр показывает верхние ~69% снимка: подпись начинается на 72% и в него
   не попадает. Через высоту, а не transform, — иначе снимок не знает границ. */
  height: 143%;
  object-position: center top;
}

/* Set by script.js when the render is too small to fill a tall card at a
   sensible zoom: it hangs from the top and dissolves into the card's own blue
   rather than ending on a hard edge. */
.ai-bg-fade {
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 96%);
}

/* Vignette over the render: clear in the middle so the mark and the two hands
   reaching for it read, closing down towards the edges where the headline and
   the panels need a dark ground. */
.section-ai::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    78% 74% at 50% 50%,
    rgba(9, 44, 152, 0.22) 0%,
    rgba(9, 42, 146, 0.55) 42%,
    rgba(8, 34, 124, 0.86) 74%,
    rgba(6, 26, 102, 0.95) 100%
  );
}

/* A little extra depth in the corners, the way the render falls off */
.section-ai::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 60% at 4% 8%, rgba(255, 255, 255, 0.08), transparent 70%),
    radial-gradient(60% 70% at 96% 96%, rgba(4, 20, 74, 0.42), transparent 72%);
}

/* …and the content sits above it */
.section-ai > .container { position: relative; z-index: 1; }

.section-ai .section-sub { color: var(--blue-text-on); }

.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 60px;
}

.ai-card {
  background: var(--tint-blue);
  border-radius: var(--r-md);
  padding: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-card h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
}

.ai-card > p {
  color: var(--ink-60);
  max-width: 46ch;
}

.ai-card-dark {
  background: var(--black);
  color: var(--white);
}

.ai-card-dark > p { color: rgba(255, 255, 255, 0.66); }

/* Glass, so the render carries through the panels rather than being boxed out
   of them. Both panels are the same here — the light/dark pairing only made
   sense when they sat on a white page. */
.section-ai .ai-card,
.section-ai .ai-card-dark {
  /* Not a flat wash: glass is brighter where it turns towards the light, so the
     fill falls off across the panel and the top edge carries a specular line
     while the bottom only catches a little bounce. The saturate() is what stops
     the blurred render going grey underneath. */
  background: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(255, 255, 255, 0.07) 48%,
    rgba(255, 255, 255, 0.11) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: clamp(20px, 2.2vw, 28px);
  color: var(--white);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    0 30px 70px -34px rgba(4, 20, 74, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

/* The right-hand panel sits over the darker side of the render, so it takes a
   heavier pour of white to read as the same material. Must come after the
   shared rule above — same specificity, so source order decides. */
.section-ai .ai-card-dark {
  background: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.27) 0%,
    rgba(255, 255, 255, 0.15) 48%,
    rgba(255, 255, 255, 0.20) 100%
  );
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 30px 70px -34px rgba(4, 20, 74, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14);
}

.section-ai .ai-card > p,
.section-ai .ai-card-dark > p { color: rgba(255, 255, 255, 0.74); }

/* Both card selectors spelled out: `.ai-card-dark .ai-tag` ties on specificity
   and sits later in the file, so a bare `.section-ai .ai-tag` loses on it and
   the two panels end up with different tag fills. */
.section-ai .ai-card .ai-tag,
.section-ai .ai-card-dark .ai-tag {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.section-ai .ai-list li::before { color: #9dc0ff; }

/* Both bubbles go white against the glass. :hover is spelled out because
   `.ai-demo-dark:hover` carries the same specificity as a two-class override
   and sits further down the file, so it would otherwise win the tie. */
.section-ai .ai-demo,
.section-ai .ai-demo-dark,
.section-ai .ai-demo-dark:hover {
  background: var(--white);
  border: none;
  box-shadow: 0 18px 40px -18px rgba(4, 20, 74, 0.6);
}

.section-ai .ai-demo p { color: var(--black); }

.section-ai .ai-demo::before,
.section-ai .ai-demo-dark::before { border-right-color: var(--white); }

/* The unread dot needs a ring that reads against glass rather than against a
   flat card colour */
.section-ai .ai-demo::after,
.section-ai .ai-demo-dark::after { border-color: rgba(255, 255, 255, 0.85); }

.ai-tag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blue-ink);
  background: var(--white);
  border-radius: 99px;
  padding: 8px 14px;
  margin-bottom: 6px;
}

.ai-card-dark .ai-tag {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.ai-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.ai-list li {
  list-style: none;
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  font-weight: 500;
}

.ai-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--blue);
}

.ai-card-dark .ai-list li::before { color: #7c9bff; }

.ai-demo {
  position: relative;
  z-index: 0;
  margin-top: auto;
  margin-left: 26px;
  display: block;
  background: var(--white);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 14px 34px -18px rgba(18, 48, 158, 0.2);
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease);
  will-change: transform;
}

.ai-demo:hover {
  box-shadow: 0 22px 48px -18px rgba(18, 48, 158, 0.36);
}

.ai-demo:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* круглый AI-логотип, выступающий за край карточки */
.ai-demo .ai-avatar {
  position: absolute;
  left: -84px;
  bottom: -4px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 0.82rem;
  box-shadow: 0 12px 26px -8px rgba(18, 48, 158, 0.5);
}

/* хвостик сообщения, ведущий к логотипу */
.ai-demo::before {
  content: "";
  position: absolute;
  left: -14px;
  bottom: 18px;
  border: 8px solid transparent;
  border-right-color: var(--white);
}

/* красная точка «непрочитанного» */
.ai-demo::after {
  content: "1";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #ef4444;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid var(--tint-blue);
  animation: unreadFlicker 1.4s steps(1, end) infinite;
}

.ai-demo-dark::after { border-color: var(--black); }

@keyframes unreadFlicker {
  0%, 44%, 100% { opacity: 1; transform: scale(1); }
  46%, 54% { opacity: 0.15; transform: scale(0.9); }
  56%, 70% { opacity: 1; transform: scale(1.18); }
  72%, 78% { opacity: 0.15; transform: scale(0.9); }
  80% { opacity: 1; transform: scale(1); }
}

/* Печатающийся текст ответа AI */
.ai-demo p {
  overflow: hidden;
}

.ai-demo .ai-typewriter {
  border-right: 2px solid currentColor;
  animation: aiCaret 0.7s step-end infinite;
}

.ai-demo .ai-typewriter.done {
  border-right-color: transparent;
  animation: none;
}

@keyframes aiCaret {
  0%, 100% { border-right-color: currentColor; }
  50% { border-right-color: transparent; }
}

.ai-demo p {
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 500;
}

.ai-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ai-demo-dark {
  background: #22242d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.ai-demo-dark:hover {
  background: #272a35;
  box-shadow: none;
}

.ai-demo-dark::before { border-right-color: #22242d; }

.ai-demo-dark::after { border-color: var(--black); }

.ai-demo-dark .ai-avatar {
  box-shadow: 0 12px 26px -8px rgba(35, 83, 232, 0.55);
}

/* ---------- Диалог-чат Flott AI ---------- */

/* Полноэкранный слой: затемнение внутри диалога, чтобы круг
   был виден прямо в точке клика */
.ai-dialog {
  position: fixed;
  inset: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  background: rgba(10, 11, 16, 0.5);
  backdrop-filter: blur(3px);
  color: var(--black);
}

.ai-dialog::backdrop { background: transparent; }

/* затемнение мягко проявляется, пока пузырь растёт в чат */
@keyframes aiDimIn {
  from { background-color: rgba(10, 11, 16, 0); }
  to { background-color: rgba(10, 11, 16, 0.5); }
}

@keyframes aiDlgIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.ai-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aiDimIn 0.32s var(--ease);
}

.ai-modal {
  width: min(780px, calc(100vw - 28px));
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(10, 15, 40, 0.5);
  will-change: transform, opacity;
}

/* Two-phase open: the white box grows from the clicked bubble first, then the
   chat chrome fades in — so the non-uniform scale is never seen on text. */
.ai-modal > .ai-dialog-head,
.ai-modal > .ai-dialog-body,
.ai-modal > .ai-dialog-foot {
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.ai-modal.ai-opening > .ai-dialog-head,
.ai-modal.ai-opening > .ai-dialog-body,
.ai-modal.ai-opening > .ai-dialog-foot {
  opacity: 0;
  transform: translateY(6px);
  transition: none; /* hide instantly at Phase A; only the reveal (below) animates */
}

/* Content fades out on close, just before the box shrinks back into the bubble */
.ai-modal.ai-closing > .ai-dialog-head,
.ai-modal.ai-closing > .ai-dialog-body,
.ai-modal.ai-closing > .ai-dialog-foot {
  opacity: 0;
  transform: translateY(4px);
  transition-duration: 0.14s;
}

/* The header avatar hides while the flying clone is in transit, then the clone
   lands exactly on its spot and hands off — a seamless swap. */
.ai-modal.ai-flying .ai-dialog-head .ai-avatar {
  opacity: 0;
}

/* Telegram-style avatar clone that flies between the bubble and the header */
.ai-fly-avatar {
  position: fixed;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  will-change: transform, border-radius;
}

.ai-fly-avatar[hidden] {
  display: none;
}

.ai-dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.ai-dialog-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.ai-dialog-title strong {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.ai-dialog-title span {
  font-size: 0.78rem;
  color: var(--ink-40);
}

.ai-dialog-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: var(--tint-gray);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.ai-dialog-close:hover { background: var(--tint-chip); }

.ai-dialog-close svg { width: 16px; height: 16px; }

.ai-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  max-height: min(680px, 70vh);
  overflow-y: auto;
  background: var(--tint-gray);
}

.msg {
  max-width: 84%;
  border-radius: 18px;
  padding: 13px 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  animation: aiDlgIn 0.25s var(--ease);
}

.msg p { margin: 0; }

.msg-user {
  align-self: flex-end;
  background: var(--blue);
  color: var(--white);
  border-bottom-right-radius: 6px;
}

.msg-ai {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}

.msg-file {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  padding: 9px 11px;
  margin-bottom: 9px;
}

.msg-file svg { width: 17px; height: 17px; flex: 0 0 auto; }

.msg-file-name {
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-file-size { font-size: 0.72rem; opacity: 0.7; }

.msg-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  border-bottom-left-radius: 6px;
  padding: 14px 16px;
}

.msg-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-40);
  animation: typingDot 1s ease-in-out infinite;
}

.msg-typing i:nth-child(2) { animation-delay: 0.15s; }
.msg-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ai-dialog-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.ai-dialog-foot input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--black);
  background: var(--tint-gray);
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 11px 16px;
  outline: none;
  caret-color: var(--blue);
  transition: border-color 0.2s, background 0.2s;
}

.ai-dialog-foot input::placeholder { color: var(--ink-40); }

.ai-dialog-foot input:focus {
  border-color: var(--blue);
  background: var(--white);
}

.ai-dialog-foot button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.ai-dialog-foot button:hover:not(:disabled) { transform: scale(1.06); }

.ai-dialog-foot button:active:not(:disabled) { transform: scale(0.94); }

.ai-dialog-foot button:disabled {
  opacity: 0.4;
  cursor: default;
}

.ai-dialog-foot button svg { width: 16px; height: 16px; }

/* ---------- Cabinet demo (интерактивный кабинет) ---------- */

/* Кабинет — светлая схема из макета: белые карточки на бледно-синем поле,
   синяя шапка, почти белый рельс слева. Токены живут на самой панели —
   дальше по странице они нигде не нужны. */
.cab {
  --cab-canvas: #e9effc;
  --cab-rail: #f6f8ff;
  --cab-line: #dbe4fa;
  margin-top: 56px;
  background: var(--white);
  border: 1px solid var(--cab-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--black);
  box-shadow: 0 40px 90px -40px rgba(18, 48, 158, 0.3);
}

.cab-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--blue);
  border-bottom: 0;
}

.cab-hello {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

/* Шапка кабинета залита синим, а .cab задаёт чёрный цвет текста — приветствие
   наследовало его и читалось тёмным пятном на синем. Ставим белый явно. */
.cab-hi {
  font-size: 1.05rem;
  color: white;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.cab-hint {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cab-icons { display: flex; gap: 8px; }

.cab-icbtn {
  position: relative;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.cab-icbtn:hover { background: rgba(255, 255, 255, 0.3); }

.cab-icbtn svg { width: 19px; height: 19px; }

.cab-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  background: #ef4444;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Уведомления: та же панель, что в дашборде flott-website-main — 320px,
   тёмный фон, рамка 1px, шапка и футер отделены линиями. */
.cab-ic { position: relative; }

/* Точка отсчёта для узких экранов: там панель шире расстояния от колокольчика
   до края карточки, поэтому её растягивают по всей шапке (см. медиазапрос) */
.cab-top { position: relative; }

.cab-notifs {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 48px));
  background: var(--white);
  border: 1px solid var(--cab-line);
  border-radius: 14px;
  /* Шапка залита синим до самого края, поэтому панель обрезает содержимое
     по своему радиусу */
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(18, 48, 158, 0.35);
  text-align: left;
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transform-origin: top right;
  /* Как у мобильного меню: display остаётся дискретным, едут opacity и
     transform. Там, где @starting-style не поддержан, — мгновенный показ. */
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
    display 0.2s allow-discrete;
}

.cab-notifs.on {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .cab-notifs.on {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Синяя шапка на всю ширину — как в макете */
.cab-notifs-head {
  padding: 13px 16px;
  background: var(--blue);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Список короткий и фиксированный — высота по содержимому, без внутреннего
   скролла; последняя граница не нужна, ниже уже линия футера */
.cab-notifs-list { overflow: hidden; }

.cab-notif:last-child { border-bottom: 0; }

/* Строка: слева заголовок и текст, справа — время, как в макете */
.cab-notif {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--cab-line);
  cursor: pointer;
  transition: background 0.2s;
}

.cab-notif:hover { background: rgba(35, 83, 232, 0.05); }

/* Непрочитанные — едва заметная заливка: точек в макете нет, но цифра на
   колокольчике должна что-то значить */
.cab-notif.unread { background: rgba(35, 83, 232, 0.05); }
.cab-notif.unread:hover { background: rgba(35, 83, 232, 0.09); }

.cab-notif-body { min-width: 0; }

.cab-notif-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 3px;
}

/* Приглушённый синий, а не серый — так текст в макете */
.cab-notif-msg {
  font-size: 0.78rem;
  color: rgba(35, 83, 232, 0.72);
}

/* Узкая колонка справа: «5 минут назад» переносится на две строки, как в
   макете, и не растягивает строку */
.cab-notif-time {
  flex: 0 0 56px;
  text-align: right;
  font-size: 0.66rem;
  line-height: 1.3;
  color: var(--ink-40);
}

.cab-notifs-foot {
  padding: 11px;
  border-top: 1px solid var(--cab-line);
}

.cab-notifs-all {
  width: 100%;
  padding: 4px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  transition: color 0.2s;
}

.cab-notifs-all:hover { color: var(--blue-deep); }

.cab-body { display: flex; }

.cab-side {
  flex: 0 0 220px;
  background: var(--cab-rail);
  border-right: 1px solid var(--cab-line);
  padding: 16px 12px;
}

.cab-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cab-tab {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-60);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.cab-tab svg { width: 16px; height: 16px; flex: 0 0 auto; }

.cab-tab:hover { background: rgba(35, 83, 232, 0.07); color: var(--black); }

.cab-tab.active { background: var(--blue); color: var(--white); }

.cab-main {
  flex: 1;
  background: var(--cab-canvas);
  min-width: 0;
  padding: 26px;
  min-height: 540px;
}

.cab-title {
  font-size: 1.35rem;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.cab-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.cab-stat {
  background: var(--white);
  border: 1px solid var(--cab-line);
  border-radius: 14px;
  padding: 18px;
  min-width: 0;
}

.cab-stat-label {
  font-size: 0.82rem;
  color: var(--ink-60);
  margin-bottom: 8px;
}

.cab-stat-value {
  font-size: 1.65rem;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.cab-stat-note { font-size: 0.82rem; color: var(--ink-60); }

.cab-list {
  background: var(--white);
  border: 1px solid var(--cab-line);
  border-radius: 14px;
  padding: 20px;
}

/* Карточка диаграммы — та же оболочка, что у списка. Сам SVG рисуется в
   script.js по фактической ширине .cab-chart-body. */
.cab-chart {
  background: var(--white);
  border: 1px solid var(--cab-line);
  border-radius: 14px;
  padding: 20px;
}

.cab-chart + .cab-chart { margin-top: 14px; }

.cab-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cab-chart-title { font-size: 0.95rem; font-weight: 600; color: var(--blue); }

.cab-legend {
  display: flex;
  gap: 14px;
  font-size: 0.72rem;
  color: var(--ink-60);
}

.cab-leg { display: inline-flex; align-items: center; gap: 6px; }
.cab-leg i { width: 8px; height: 8px; border-radius: 50%; }
.cab-leg-in i { background: #10b981; }
.cab-leg-out i { background: #ef4444; }
.cab-leg-bal i { background: var(--blue); }

.cab-chart-body { position: relative; }
.cab-chart-body svg { max-width: 100%; touch-action: pan-y; }

/* Плашка при наведении — те же стили, что у Recharts-тултипа в исходном
   дашборде: тёмный фон, тонкая рамка, радиус 8 */
.cab-tip {
  position: absolute;
  z-index: 2;
  display: none;
  min-width: 168px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--cab-line);
  border-radius: 8px;
  box-shadow: 0 16px 34px -16px rgba(18, 48, 158, 0.35);
  font-size: 0.76rem;
  line-height: 1.3;
  pointer-events: none;
}

.cab-tip.on { display: block; }

.cab-tip-date {
  margin-bottom: 7px;
  color: var(--ink-40);
}

.cab-tip-row { display: flex; align-items: center; gap: 8px; }
.cab-tip-row + .cab-tip-row { margin-top: 5px; }
.cab-tip-row i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.cab-tip-row b { margin-left: auto; font-weight: 600; }

.cab-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.cab-list-title { font-size: 1.02rem; font-weight: 600; }

.cab-action {
  padding: 9px 16px;
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.cab-action:hover { background: var(--blue-deep); }

.cab-rows { display: flex; flex-direction: column; gap: 10px; }

.cab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--tint-gray);
  border: 1px solid var(--cab-line);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.cab-row:hover { background: var(--tint-blue); }

.cab-row-name { font-weight: 600; margin-bottom: 3px; }

.cab-row-sub { font-size: 0.85rem; color: var(--ink-40); }

.cab-row-right { text-align: right; flex: 0 0 auto; }

.cab-row-val { font-weight: 600; margin-bottom: 3px; }

.cab-row-tag { font-size: 0.78rem; color: var(--ink-60); }

.tone-good { color: #15803d; }
.tone-warn { color: #b45309; }
.tone-bad { color: #dc2626; }

@keyframes cabIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.cab-main.cab-anim > * { animation: cabIn 0.3s var(--ease) both; }

/* ---------- Merge scene (три стороны → flott) ---------- */

/* Белая подложка: странице сквозь всю сцену слияния идёт синяя нить
   (.flow-line, z-index: -1), и во время пина она резала анимацию — проходила
   через логотип, провода и подписи. Фон в цвет страницы прячет её за сценой,
   как её прячут белые карточки в других секциях. */
.merge-scene { height: 380vh; margin-top: 12px; background: var(--white); }

.merge-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 0 16px;
}

.merge-panel {
  width: min(1120px, 100%);
}

/* Tall enough for act 2: the mark, the wire run and two rows of steps stack
   inside it, so the whole scene reads as one vertical column. */
.merge-stage {
  --mcw: clamp(225px, 24vw, 290px);
  position: relative;
  width: 100%;
  height: min(700px, calc(100vh - 140px));
  min-height: 540px;
}

.wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}

.wire-base {
  fill: none;
  stroke: #c3d5ff;
  stroke-width: 2;
}

.wire-flow {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 16;
  animation: flow 1.1s linear infinite;
}

@keyframes flow {
  to { stroke-dashoffset: -22; }
}

/* The latest frame recomposes the card around its centre line: a soft light
   dome crowns the top-centre of a pale blue field (the old frame parked a
   hard-edged disc in the top-left corner), and the type sits centred under it.
   Two gradients draw the field — no image needed, and it scales with the card
   instead of being pinned to one size. */
.merge-card {
  position: absolute;
  z-index: 1;
  width: var(--mcw);
  /* All three are one box. Without this the card is sized by its content, so a
     longer line of copy or a taller render (the three PNGs differ: 957×1096,
     991×986, 987×1047) makes one card bigger than its neighbours. The ratio
     stays the animation's own — the frame's slightly taller card would ride
     the row up into the flott mark before the merge. */
  aspect-ratio: 416 / 453;
  /* Купол света по центру верха — кромка резкая: заливка ровная до самой
     дуги, переход в прозрачность занимает ~1% радиуса (пара пикселей — только
     на сглаживание). Геометрия снята с макета: по центру купол доходит до
     ~52% высоты карточки, у боковых краёв — до ~35%. Поле под ним темнеет
     к низу. */
  background:
    radial-gradient(ellipse 68% 52% at 50% 0%,
      #f7fbff 0%, #f0f5ff 98.8%, rgba(240, 245, 255, 0) 100%),
    linear-gradient(180deg, #d0ddf8 0%, #b7ccf2 100%);
  /* Скругление в макете заметно крупнее прежнего: ~13% ширины карточки */
  border-radius: clamp(28px, 12%, 36px);
  padding: 24px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  will-change: transform, opacity;
}

/* Заголовок #1052F2 и тёмно-синий #0A3599 у текста — из макета (он выглядит
   синим, но это не фирменный синий). Обе строки центрованы, текст держится
   чуть у́же карточки, чтобы переносился в три строки, как в макете. */
.merge-card h3,
.merge-card p {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.merge-card p { max-width: 84%; }

.merge-card h3 {
  font-size: clamp(1.25rem, 8.4%, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1052f2;
}

.merge-card p {
  font-size: clamp(0.9rem, 5.3%, 1.1rem);
  line-height: 1.35;
  color: #0a3599;
}

/* All three sit in a row beneath the mark, as in the design file. The class is
   still called mc-top because it is the first card in the DOM and the wire
   indices in script.js follow that order — it is no longer the top one. */
.mc-top { left: calc(50% - var(--mcw) / 2); bottom: 5%; }
.mc-left { left: 0; bottom: 5%; }
.mc-right { right: 0; bottom: 5%; }

/* In the latest frame the render lives inside the card — bottom-anchored at
   ~74% of the card's width, with only its pedestal's shadow slipping past the
   rounded edge, not the quarter-height overhang the old frame had. Our card is
   wider and shorter than the frame's, so ~66% of its full width matches the
   frame's render-to-card height ratio; the percentage resolves against the
   content box (width minus the 22px side paddings), hence 78%. */
.role-pic {
  width: 78%;
  height: auto;
  align-self: center;
  /* `auto` on top pins the render to the card's bottom edge, so any overflow
     is the same on all three however tall the render itself is. */
  margin: auto auto -4%;
  /* Lit from above, so a soft contact shadow sits it on the card. */
  filter: drop-shadow(0 12px 16px rgba(18, 48, 158, 0.24));
}

.merge-center {
  position: absolute;
  z-index: 2;
  left: 50%;
  /* Sits above the row of three now, not in the middle of a triangle */
  top: 22%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  will-change: transform;
}

.merge-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--blue);
  color: var(--white);
  border-radius: 28px;
  padding: 30px 46px;
  box-shadow: 0 24px 60px -18px rgba(18, 48, 158, 0.45);
}

.merge-logo .brand-mark {
  width: auto;
  height: 52px;
  color: var(--white);
}

.merge-logo span {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mc-caption {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-ink);
  opacity: 0;
}

/* Act 2: wires out of the logo into the six steps */

.wires-out { opacity: 0; }

.wires-out path { stroke-linejoin: round; }

.wires-out .wire-base {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

/* The grid hangs under the mark, not beside it — the wires drop into it, so
   `top` is set in script.js (mark + wire run + grid centred as one column). */
.merge-steps {
  position: absolute;
  z-index: 1;
  /* Full content column, like the design frame: three across, two down */
  left: 0;
  right: 0;
  bottom: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 14px 16px;
  pointer-events: none;
}

#how { padding-bottom: clamp(44px, 6vw, 72px); }

/* Three across instead of two — 422×222 in the design frame. The vh cap keeps
   two rows plus the mark above them inside the stage on short viewports.

   Outlined and flat, as drawn: a 1.36px blue stroke on the 422px card (≈1px at
   our width) and a radius of 5.3% of it, with no shadow. The fill is white
   rather than transparent so the page's flow-line thread passes behind. */
.merge-steps .step {
  min-height: 0;
  aspect-ratio: 422 / 222;
  max-height: 22vh;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px;
  gap: 10px;
  border: 1px solid var(--blue);
  border-radius: 19px;
  box-shadow: none;
  opacity: 0;
  will-change: transform, opacity;
}

.merge-steps .step p {
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
}

/* 39px on the 422px card in the design — a filled circle, not a bare numeral */
.merge-steps .step-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.merge-steps .step-final .step-num {
  background: var(--white);
  color: var(--blue);
}

/* Static fallback: mobile & prefers-reduced-motion (class set in JS) */

.merge-scene.static { height: auto; }
.merge-scene.static .merge-sticky { position: static; height: auto; padding: 24px 0 0; }
.merge-scene.static .merge-stage {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.merge-scene.static .wires { display: none; }
.merge-scene.static .merge-card { position: static; width: 100%; aspect-ratio: auto; }

/* Stacked, the cards are in normal flow, so a render hanging past the bottom
   edge would land on the card below it. Here it stays inside. */
.merge-scene.static .merge-card { padding-bottom: 22px; }
/* Карточка на телефоне широкая и низкая — круг накрывает её почти целиком,
   так что держать текст в 58% незачем */
.merge-scene.static .merge-card h3,
.merge-scene.static .merge-card p { max-width: none; }
.merge-scene.static .role-pic { width: 68%; margin: 6px auto 0; }
.merge-scene.static .merge-center {
  position: static;
  transform: none !important;
  order: 10;
  margin-top: 12px;
}
.merge-scene.static .mc-caption { opacity: 1 !important; }
.merge-scene.static .merge-steps {
  position: static;
  width: 100%;
  order: 11;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
  pointer-events: auto;
  top: auto !important;
}
.merge-scene.static .merge-steps .step {
  aspect-ratio: auto;
  max-height: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 16px;
  opacity: 1 !important;
  transform: none !important;
}
.merge-scene.static .merge-steps .step-num { width: 26px; height: 26px; }

/* Steps */

.step {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 28px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.step-num {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.step p {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.step-final { background: var(--blue); }
.step-final .step-num { color: var(--blue-text-on); }
.step-final p { color: var(--white); font-weight: 600; }

/* ---------- Feature rows ---------- */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding: clamp(44px, 6vw, 80px) 0;
}

.feature-row + .feature-row { border-top: 1px solid var(--line); }

.feature-row-flip .feature-copy { order: 2; }
.feature-row-flip .feature-visual { order: 1; }

.checks {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checks li {
  position: relative;
  padding-left: 38px;
  font-size: 1.02rem;
  color: rgba(10, 11, 16, 0.78);
}

.checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tint-chip);
  color: var(--blue-ink);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Panels (product mockups) */

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
  box-shadow:
    0 2px 6px rgba(10, 11, 16, 0.04),
    0 30px 70px -28px rgba(18, 48, 158, 0.30);
}

/* Cursor-reactive 3D tilt — driven by --tx/--ty from script.js (fine pointer only) */
.panel-tilt {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 500ms var(--ease);
  will-change: transform;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.panel-title {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 7px 14px;
}

.badge-ok { background: var(--tint-chip); color: var(--blue-ink); }
.badge-accent { background: var(--blue); color: var(--white); }
.badge-score { background: var(--black); color: var(--white); }
.badge-mid { background: #fef3c7; color: #b45309; }

/* ---------- Deck: веер заявок в блоке банка ---------- */

.panel-deck {
  position: relative;
  padding: 26px 0 56px;
}

.deck-cards { display: grid; }

.deck-layer {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  will-change: transform;
  pointer-events: none;
}

.deck-layer.on-top { z-index: 2; }

.deck-layer.on-top .panel {
  box-shadow:
    0 2px 6px rgba(10, 11, 16, 0.05),
    0 40px 90px -30px rgba(18, 48, 158, 0.45);
}

.deck-cards .panel {
  transform-origin: 50% 88%;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  pointer-events: auto;
}

/* perspective() must lead the list, or the 3D tilt collapses to a flat 2D matrix */
.slot-front { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateX(-6%) rotate(-10deg) scale(0.88); cursor: default; }
.slot-back { transform: translateX(6%) translateY(56px) rotate(10deg) scale(0.88); cursor: pointer; }

/* Front card keeps its fan on hover and also picks up the cursor tilt (--tx/--ty) */
.panel-deck:hover .slot-front { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateX(-10%) rotate(-16deg) scale(0.88); }
.panel-deck:hover .slot-back { transform: translateX(10%) translateY(56px) rotate(16deg) scale(0.88); }

.progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
}

.p-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-60);
  border-bottom: 1px dashed var(--line);
}

.p-step:last-child { border-bottom: 0; }

.p-step i {
  font-style: normal;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  background: var(--tint-gray);
  color: var(--ink-40);
  flex: 0 0 auto;
}

.p-step.done { color: var(--black); }
.p-step.done i { background: var(--tint-chip); color: var(--blue-ink); }
.p-step.active { color: var(--blue-ink); font-weight: 600; }
.p-step.active i { background: var(--blue); color: var(--white); animation: pulse 2s infinite; }

.panel-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.panel-stats.two { margin-bottom: 16px; }

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.tag {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 99px;
  background: var(--tint-blue);
  color: var(--blue-ink);
  white-space: nowrap;
}

.tag-muted { background: var(--tint-gray); color: var(--ink-60); }

.kv { display: flex; flex-direction: column; }

.kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.kv-row span { color: var(--ink-40); flex: 0 0 auto; }
.kv-row b { font-weight: 600; text-align: right; }

.ok-text { color: var(--blue-ink); }
.accent-text { color: var(--blue); font-size: 1.05rem; }

/* Registry table variant */

#roles .mini-row {
  grid-template-columns: 0.5fr 0.9fr 1.3fr auto;
  gap: 12px;
}

/* ---------- Dark (live) section ---------- */



/* ---------- Results, on the blue field ---------- */

/* The frame paints this section as a full-bleed render — the blue petal photo,
   blurred, with the two plus-lighter glows baked in — so the gradients that
   stood in for it are gone, and so is the inset rounded plate they sat on. */
/* В макете надзаголовок здесь обычным регистром, а не капсом, как в светлых
   секциях */
.section-blue .eyebrow-light {
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}

.section-blue {
  color: var(--white);
  /* Снимок лежит краем в край, поэтому фон — на самой секции, а не на вложенной
     плашке. #1052f2 из макета остаётся подложкой, пока грузится картинка. */
  background: #1052f2 url("../assets/img/results-bg.jpg") center / cover no-repeat;
  /* Полосе во всю ширину нужны поля больше общих: в кадре это 176px на 1920 */
  padding-block: clamp(96px, 12vw, 176px);
}

/* Полоса во всю ширину, поэтому колонка контента здесь шире общей: в кадре она
   1317px на 1920px, а не 1200px, как в светлых секциях на белом. */
.section-blue > .container { width: min(1320px, 100% - 48px); }

/* Left column carries the three cards, right column the deal cycle */
.live-layout {
  display: grid;
  grid-template-columns: 49.4% 1fr;
  gap: 2.6%;
  align-items: start;
  margin-top: clamp(36px, 4vw, 60px);
}

.live-col { display: grid; gap: 16px; }

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

/* White cards on the blue, per the frame — not the translucent panels the
   near-black section used. */
.live-card {
  background: var(--white);
  border-radius: 28px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.45s var(--ease);
}

.live-card:hover { transform: translateY(-6px); }

.live-kicker {
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1052f2;
}

.live-card h3 {
  /* Верх подняли под кадр (30,9px на 1920), нижнюю границу оставили прежней —
     на телефоне заголовку карточки крупнее не нужно */
  font-size: clamp(1.35rem, 2.3vw, 1.93rem);
  /* Общий интерлиньяж h3 растил карточку на полтора десятка пикселей против
     кадра — название здесь всегда в одну строку, ему хватает 1,2 */
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1052f2;
}

/* The copy sits low in the card in the frame, with a gap above it */
.live-text {
  margin-top: auto;
  padding-top: 14px;
  color: #1052f2;
  font-size: 0.88rem;
  line-height: 1.4;
}

.live-card-accent {
  --live-badge-w: min(34.5%, 224px);
  position: relative;
  background: #1052f2;
  border: 1px solid rgba(255, 255, 255, 0.45);
  /* Место под значок справа: он занимает 34,5% ширины карточки, ещё 5% —
     воздух до текста, иначе строки уходят под него */
  padding-right: calc(var(--live-badge-w) + 5%);
  padding-left: 40px;
  padding-block: 32px;
}

/* Свешивается за верх и низ карточки, поэтому не режется её радиусом и стоит
   по центру высоты — как в макете (224×245 при карточке 650×200). */
.live-badge {
  position: absolute;
  top: 50%;
  right: 2%;
  width: var(--live-badge-w);
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}

.live-card-accent:hover { background: #0d46d8; }
.live-card-accent .live-kicker,
.live-card-accent h3 { color: var(--white); }
.live-card-accent .live-text { color: rgba(255, 255, 255, 0.88); }

/* Deal cycle: an outlined panel holding five pills — four in a 2×2, the last
   spanning the width. */
.pipeline {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  padding: clamp(24px, 2.6vw, 38px);
}

.pipeline-title {
  font-size: clamp(1.02rem, 1.4vw, 1.21rem);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 32px;
}

/* Столбцы и строки разведены по-разному — так они и стоят в кадре */
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 15px;
  row-gap: 18px;
}

.pipe {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  padding: 14px 18px;
  background: var(--white);
  border-radius: 13px;
  color: #1052f2;
  font-weight: 600;
  font-size: clamp(1.02rem, 1.35vw, 1.21rem);
  line-height: 1.25;
  text-align: center;
}

/* The last step is the outcome, so it reads as a filled bar across the panel */
.pipe-wide {
  grid-column: 1 / -1;
  min-height: 66px;
  margin-top: 4px;
  background: #1052f2;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
}

/* ---------- Инвестиции ---------- */

.backing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}

.backing-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.45s var(--ease);
}

.backing-card:hover { transform: translateY(-6px); }

/* The two shots are different shapes — one portrait, one landscape — so they
   run through a fixed frame rather than at their own ratios, or the pair sits
   at wildly different heights. */
/* Кадр, который держит кроп: у зумленного снимка иначе нет границ и он
   наезжает на синюю плашку */
/* Рамка выше, чем была: в 16:9 оба снимка резались поперёк людей. 4:3 даёт
   портретному кадру показать группу целиком — карточка просто становится
   крупнее. */
.backing-figure {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.backing-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Портретный снимок в широкой рамке: 55% ставит окно на людей, минуя
     шапку сверху и подпись снизу */
  /* Окно 60% высоты портретного снимка: 44% ставит его на людей, выше
     впечатанной подписи внизу */
  object-position: center 40%;
}

/* У портретного снимка впечатаны и шапка сверху, и подпись снизу — между ними
   остаётся узкая полоса. Зум сужает окно кадра до неё, рамка режет остальное.
   Второй снимок кадрируется по-своему (ниже), поэтому :not(). Оба правила
   временные — с чистыми снимками они не нужны. */
.backing-shot:not(.backing-shot-zoom) {
  transform: scale(1.28);
}

/* Подпись впечатана поперёк нижней трети этого снимка, и никакой кроп в
   пропорциях макета её не убирает. Кадр показывает верхние ~69%: снимок выше
   рамки, прижат к её верху, лишнее срезает .backing-figure. Правило нужно
   только до тех пор, пока не появится чистый снимок. */
.backing-shot-zoom {
  height: 143%;
  object-position: center top;
}

/* Blue plate under the photo: amount and fund left, the note set right */
.backing-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px 24px;
  background: #1052f2;
  color: var(--white);
}

.backing-sum {
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.backing-card h3 {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 600;
  margin-top: 6px;
}

.backing-note {
  flex: 0 1 40%;
  text-align: right;
  font-size: 0.76rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

.backing-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.backing-cta svg { width: 22px; height: 22px; fill: rgba(255, 255, 255, 0.25); }

/* Keyboard focus needs a marker — the cards are anchors */
.backing-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Security ---------- */

.security-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.cert-grid {
  display: grid;
  gap: 16px;
}

.cert-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 4px;
  align-items: center;
  background: var(--tint-gray);
  border-radius: var(--r-md);
  padding: 26px 28px;
  transition: transform 0.45s var(--ease), background 0.45s var(--ease);
}

.cert-card:hover { transform: translateY(-4px); background: var(--tint-blue); }

.cert-ic {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--white);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(18, 48, 158, 0.10);
}

.cert-ic svg { width: 26px; height: 26px; }

.cert-card h3 { font-size: 1.08rem; }
.cert-card p { color: var(--ink-60); font-size: 0.92rem; }

/* ---------- CTA — контактная форма ---------- */

.contact-section { padding-bottom: clamp(64px, 8vw, 110px); }

.contact-card {
  display: grid;
  /* Form first and wider, blue panel second — it carries the hourglass now */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 1.6vw, 22px);
  box-shadow:
    0 2px 6px rgba(10, 11, 16, 0.04),
    0 30px 70px -34px rgba(18, 48, 158, 0.28);
}

/* Синяя панель — довод и контакты */

/* No overflow: hidden — the hourglass is meant to break out of this panel, the
   way it hangs off the card in the design file. The ::before takes the corner
   radius itself instead, which is the only thing the clip was doing. */
.contact-info {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--r-md);
  padding: clamp(28px, 3vw, 40px);
}

.contact-info::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 88% 6%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(40% 54% at 6% 96%, rgba(10, 11, 16, 0.20), transparent 70%);
}

.contact-info > * { position: relative; }

.contact-title {
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.contact-lead {
  margin-top: 16px;
  color: var(--blue-text-on);
  font-size: 1rem;
}

/* Hangs off the panel's right and bottom corner rather than being made to fit
   inside it — in the design the hourglass overruns the card on three sides, and
   nothing is resized to accommodate it. The negative margins are what let the
   panel stay the height of its copy while the render carries on past the edge. */
.contact-visual {
  display: block;
  width: min(360px, 96%);
  height: auto;
  margin-top: clamp(14px, 2vw, 24px);
  margin-left: auto;
  /* Percentages resolve against the panel's content width, so these have to
     clear its padding before anything actually shows outside. Tuned to the
     design's overhang: ~3.5% of the panel's width off the right, ~20% of its
     height off the bottom. */
  margin-right: -14%;
  margin-bottom: -27%;
  filter: drop-shadow(0 20px 30px rgba(4, 20, 74, 0.34));
}

/* Форма */

.contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 20px;
  padding: clamp(10px, 1.4vw, 20px) clamp(6px, 1.2vw, 18px);
}

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

.field label {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.field input,
.field textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  outline: none;
  min-width: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea { resize: vertical; min-height: 120px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-40); }

.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(35, 83, 232, 0.14);
}

/* Поле, не прошедшее проверку при отправке (класс ставится в script.js — не
   :invalid, иначе пустая форма краснеет ещё до того, как её тронули) */
.field input.is-error,
.field textarea.is-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.contact-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 2px;
}

.contact-actions .btn svg { width: 17px; height: 17px; }

.contact-note {
  font-size: 0.9rem;
  color: var(--ink-60);
  min-width: 0;
}

.contact-note.is-error { color: #b91c1c; }
.contact-note.is-ok { color: var(--blue-ink); }

/* ---------- Footer ---------- */

/* The frame drew the panel on a dark strip; here it sits straight on the white
   page, and the pale blue tint is what separates it from the page. */
.site-footer {
  padding: 12px 0 16px;
}

.footer-card {
  width: min(1400px, 100% - 24px);
  margin-inline: auto;
  background: #f1f5ff;
  color: var(--black);
  border-radius: clamp(28px, 3vw, 36px);
  padding: clamp(44px, 6vw, 72px) clamp(28px, 7vw, 96px) clamp(28px, 4vw, 44px);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) repeat(3, auto) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  justify-content: space-between;
  padding-bottom: clamp(36px, 5vw, 56px);
}

.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--blue); }

.footer-brand .brand-mark { width: auto; height: 34px; }

.footer-word {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Подзаголовок из макета: тёмный, почти вплотную к чёрному, три строки */
.footer-tagline {
  margin-top: 22px;
  max-width: 320px;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
}

.footer-col { display: flex; flex-direction: column; gap: 11px; }

/* В макете заголовки колонок обычным регистром и фирменным синим, не капсом */
.footer-col-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1052f2;
  margin-bottom: 8px;
}

.footer-col a,
.footer-col span {
  font-size: 0.9rem;
  color: var(--black);
  transition: color 0.25s;
}

.footer-underlined { text-decoration: underline; text-underline-offset: 3px; }

.footer-col a:hover { color: #1052f2; }

/* Соцсети: синий круг + подпись справа, столбиком */
.footer-social { display: flex; flex-direction: column; gap: 16px; }

.footer-social a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--black);
  transition: color 0.25s;
}

.footer-social a:hover { color: #1052f2; }

.footer-social-ic {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: #1052f2;
  color: var(--white);
  display: grid;
  place-items: center;
}

.footer-social-ic svg { width: 15px; height: 15px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid #d5e0f5;
  font-size: 0.85rem;
}

.footer-legal { display: flex; flex-wrap: wrap; gap: 14px clamp(20px, 3.5vw, 44px); }

.footer-legal a {
  color: var(--black);
  transition: color 0.25s;
}

.footer-legal a:hover { color: #1052f2; }

/* Пять колонок не живут на планшете: бренд занимает всю строку, колонки
   встают парами; на телефоне всё в один столбец */
@media (max-width: 1024px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
  }
  .footer-brand-block { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.in { opacity: 1; transform: none; }

.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .chip, .marquee-track, .p-step.active i, .chip-ic.pulse, .wire-flow { animation: none; }
  .cab-main.cab-anim > * { animation: none; }
  .ai-dialog[open], .msg, .msg-typing i, .ai-demo::after, .ai-demo .ai-typewriter { animation: none; }
  .ai-demo .ai-typewriter { border-right-color: transparent; }
  .mc-caption { opacity: 1; }

  /* The thread is simply there, already drawn, rather than following the reader */
  .flow-line { animation: none; clip-path: none; }

  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .chip-2 { left: -6px; }

  /* Стопкой синяя панель идёт первой: форма стоит в разметке раньше (слева на
     широком экране), но открывать раздел голой формой, без довода над ней, —
     плохо. order возвращает панель наверх. */
  .contact-card { grid-template-columns: minmax(0, 1fr); }
  .contact-info { order: -1; }

  /* Стопкой панель стоит прямо над формой, поэтому свес должен уместиться в
     зазор сетки — иначе песочные часы ложатся на подпись первого поля. */
  .contact-visual { margin-bottom: -16%; }

  /* Секции с карточками складываются раньше — чтобы не разъезжались и не были огромными.

     minmax(0, …), а не просто 1fr: колонка 1fr берёт минимум из содержимого, а
     в карточках есть неразрывные строки — суммы, бейджи, теги. На 375px этот
     минимум давал 460px, и колонка вместе с текстом рядом вылезала за экран.
     Так карточка не шире того, во что её положили. */
  .feature-row,
  .security-grid,
  .ai-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); }

  /* Две колонки результатов не живут уже 1024px — складываем их */
  .live-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .feature-row-flip .feature-copy { order: 1; }
  .feature-row-flip .feature-visual { order: 2; }

  /* карточку-панель ограничиваем и центрируем, чтобы не растягивалась во всю ширину */
  .feature-visual { width: 100%; max-width: 460px; margin-inline: auto; min-width: 0; }

  /* веер заявок → аккуратный вертикальный стек, без горизонтального выхода за экран */
  .panel-deck { padding: 0; max-width: 460px; margin-inline: auto; }
  .deck-cards { display: flex; flex-direction: column; gap: 14px; }
  .deck-layer {
    position: static;
    z-index: auto;
    will-change: auto;
    transform: none !important;
  }
  .deck-cards .panel {
    transform: none !important;
    cursor: default;
    transition: none;
  }
  .deck-cards .panel.demoting { animation: none; }
  .deck-layer.on-top .panel {
    box-shadow:
      0 2px 6px rgba(10, 11, 16, 0.04),
      0 30px 70px -28px rgba(18, 48, 158, 0.3);
  }
}

@media (max-width: 880px) {
  .site-nav {
    position: fixed;
    top: 62px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 4px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    box-shadow: 0 24px 60px -20px rgba(10, 11, 16, 0.25);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }

  .site-nav a { padding: 12px 10px; font-size: 1.05rem; color: var(--black); }

  body.nav-open .site-nav { opacity: 1; transform: none; pointer-events: auto; }

  .nav-toggle { display: flex; }

  body.nav-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  body.nav-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

  /* minmax(0, …) по той же причине, что и в блоке 1024px: этот блок идёт ниже
     и на телефонах перекрывал бы тот фикс обычным 1fr. */
  .feature-row,
  .security-grid { grid-template-columns: minmax(0, 1fr); }

  .feature-row-flip .feature-copy { order: 1; }
  .feature-row-flip .feature-visual { order: 2; }

  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .backing-grid { grid-template-columns: minmax(0, 1fr); }

  .ai-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-demo { margin-left: 40px; }
  .ai-demo .ai-avatar { left: -62px; width: 48px; height: 48px; }

  /* Веер заявок → обычный вертикальный стек на мобильных */
  .panel-deck { padding: 0; }
  .deck-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .deck-layer {
    position: static;
    z-index: auto;
    will-change: auto;
    transform: none !important;
  }
  .deck-cards .panel {
    transform: none !important;
    cursor: default;
    transition: none;
  }
  .deck-cards .panel.demoting { animation: none; }
  .deck-layer.on-top .panel {
    box-shadow:
      0 2px 6px rgba(10, 11, 16, 0.04),
      0 30px 70px -28px rgba(18, 48, 158, 0.3);
  }

  /* Cabinet demo → стек */
  .cab-body { flex-direction: column; }
  .cab-side {
    flex: none;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 12px;
  }
  .cab-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cab-tab { width: auto; }
  .cab-hint { display: none; }
  .cab-stats { grid-template-columns: 1fr; }
  .cab-main { min-height: 0; padding: 20px 16px; }

  /* Приветствие налезало на колокольчик: .cab-hi — nowrap, поэтому строка не
     сжималась вместе со своим контейнером, а просто вылезала поверх иконок
     (на 360px — на 41px). Даём ей переноситься, а иконкам — не сжиматься. */
  .cab-top { padding: 14px 16px; }
  .cab-hi { font-size: 0.9rem; white-space: normal; }
  .cab-icons { flex: 0 0 auto; }

  /* Колокольчик стоит в ~64px от края карточки, а панель — 320px, поэтому,
     привязанная к нему, она вылезала за левый край и обрезалась по
     overflow: hidden у .cab. Растягиваем её по ширине шапки. */
  .cab-ic { position: static; }
  .cab-notifs {
    left: 16px;
    right: 16px;
    width: auto;
    top: calc(100% + 6px);
  }

  /* Заголовок и кнопка не помещались в одну строку — кнопка уходила за край
     карточки (на 360px — на 61px) и обрезалась по overflow: hidden у .cab. */
  .cab-list-head { flex-wrap: wrap; }
  .cab-list { padding: 16px; }

  /* Правая колонка строки была flex: 0 0 auto — всегда во всю ширину
     содержимого, поэтому «Хорошая репутация» выходила за padding строки.
     Просто разрешить ей сжиматься мало: тогда ломается сумма («UZS» и «88M»
     на разных строках). Кладём строку в столбец, а сумму и статус — рядом. */
  .cab-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cab-row-right {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    text-align: left;
  }

  .cab-row-val { margin-bottom: 0; }

  .chip-1 { top: -18px; right: 2%; }
  .chip-3 { display: none; }
}

/* Две колонки табличных сумм не сжимаются ниже ~400px, и дальше уже сама
   панель начинала задавать ширину страницы. */
@media (max-width: 560px) {
  .panel-stats,
  .panel-stats.two { grid-template-columns: minmax(0, 1fr); }

  /* И то же самое внутри карточки сертификата: колонка текста рядом с иконкой
     тоже брала минимум по содержимому и на 320px растягивала карточку на 28px
     шире контейнера. */
  .cert-card { grid-template-columns: auto minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .hero { padding-top: 140px; }

  /* The card is far taller than it is wide here, so `cover` crops hard to the
     sides and the two hands fall outside the frame — but the mark is centred,
     so it survives the crop. Tighten the clear part of the vignette around it. */
  .section-ai {
    background-image:
      radial-gradient(
        86% 42% at 50% 50%,
        rgba(9, 44, 152, 0.26) 0%,
        rgba(9, 42, 146, 0.6) 44%,
        rgba(8, 34, 124, 0.88) 76%,
        rgba(6, 26, 102, 0.95) 100%
      ),
      url("../assets/img/ai-hands.jpg");
  }

  /* Поля кадра рядом со значком «Пилот бесплатно» здесь съедали колонку текста:
     на 390px под строки оставалось 167px, и заголовок карточки ломался
     посередине. Значок ужимаем, отступы — тоже. */
  .live-card-accent {
    --live-badge-w: 26%;
    padding-left: 24px;
    padding-right: calc(var(--live-badge-w) + 4%);
  }

  /* Имя и Email тоже в одну колонку — вдвоём они здесь уже не читаются */
  .contact-form { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
  .contact-note { width: 100%; }

  /* iOS увеличивает страницу, когда фокус попадает в поле мельче 16px */
  .field input,
  .field textarea { font-size: 16px; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  .header-cta .btn-sm { padding: 10px 16px; font-size: 0.85rem; }

  .mini-row { font-size: 0.8rem; gap: 10px; }

  #roles .mini-row { grid-template-columns: 0.5fr 1fr auto; }
  #roles .mini-row span:nth-child(3) { display: none; }
  #roles .mini-row.mini-head span:nth-child(3) { display: none; }

  .chip { font-size: 0.78rem; padding: 10px 14px; }
  .chip-2 { bottom: 8%; }
}

/* ============================================================
   NEW HERO (video) — merged from flott-landing, classes scoped
   ============================================================ */

/* ============================================================
   Flott — landing styles
   ============================================================ */

:root {
  /* Fill shown behind the full-bleed hero video while it loads. hero.mp4 is
     shot on a neutral light-gray studio backdrop; swap this if the video gets
     re-rendered on a different backdrop. */
  --hero-video-bg: #e2e5ea;

  --grad-start: #174CEA;
  --grad-end: #082677;
  --cyan: #5FFFF3;
  --navy-deep: #0A1B4D;
  --btn-navy: #0B2E92;
  --text-soft: #D7E1FB;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle sheen near the top-left */
/* ============================================================
   Navbar — floating pill
   ============================================================ */

.navbar {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1450px, 90%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 100;
  opacity: 0;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

/* ============================================================
   Entrance choreography
   Fires when .v-reveal lands (video playback starts — the safe's
   glide phase). Navbar and hero run in PARALLEL; all delays are
   relative to that moment:

   Navbar:
   0.00s  bar unfolds from a thin line at top-center, expanding
          outward left+right while fading in (0.6s ease-out)
   0.65s  logo, then nav links left→right every 0.08s
   1.25s  demo button (scale 95%→100%) — navbar done ~1.65s

   Hero (simultaneously, on the left):
   0.20s  eyebrow
   0.30s  headline line 1, +0.15s line 2
   0.95s  paragraph
   1.30s  primary CTA (scale 95%→100%), +0.1s secondary
   ~1.85s everything static
   ============================================================ */

@keyframes navbar-unfold {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.06, 0.35); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) scale(1, 1); }
}

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-rise-scale {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

.navbar.v-reveal {
  opacity: 1;
  animation: navbar-unfold 0.6s ease-out backwards;
}

.nav-logo,
.nav-links a,
.nav-cta,
.nav-burger {
  opacity: 0;
}

.navbar.v-reveal .nav-logo,
.navbar.v-reveal .nav-links a,
.navbar.v-reveal .nav-burger {
  opacity: 1;
  animation: fade-rise 0.4s var(--ease-out-expo) backwards;
}

.navbar.v-reveal .nav-cta {
  opacity: 1;
  animation: fade-rise-scale 0.4s var(--ease-out-expo) 1.25s backwards;
}

.navbar.v-reveal .nav-logo { animation-delay: 0.65s; }
.navbar.v-reveal .nav-links a:nth-child(1) { animation-delay: 0.73s; }
.navbar.v-reveal .nav-links a:nth-child(2) { animation-delay: 0.81s; }
.navbar.v-reveal .nav-links a:nth-child(3) { animation-delay: 0.89s; }
.navbar.v-reveal .nav-links a:nth-child(4) { animation-delay: 0.97s; }
.navbar.v-reveal .nav-links a:nth-child(5) { animation-delay: 1.05s; }
.navbar.v-reveal .nav-links a:nth-child(6) { animation-delay: 1.13s; }
.navbar.v-reveal .nav-burger { animation-delay: 1.25s; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #4C74F0;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The real mark, not a typed "f" — same path the footer and the merge centre
   use. Overrides the base .brand-mark, which is 30px and brand-blue: in here it
   has to fit a 36px tile and read white on the badge's blue. */
.logo-badge .brand-mark {
  width: auto;
  height: 19px;
  color: #fff;
}

.logo-wordmark {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  transition: color 0.25s var(--ease);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: #fff;
  }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-cta {
  background: var(--btn-navy);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.12s ease-out;
}

.nav-cta:hover {
  background: #1440B8;
}

.nav-cta:active {
  transform: scale(0.97);
}

.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
    background 0.25s var(--ease);
}

/* ============================================================
   Hero
   ============================================================ */

/* Ice on the left, water on the right, hard cut down the middle. The divide
   isn't straight — it sways like a slow swell, and the mask's blend, the rule
   that covers it and the badge all ride that one curve (see script.js). */

.ihero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 1;
  background: #9cc3e8;
  letter-spacing: -0.02em;
}

.ihero {
  --hero-video-zoom: 1;
}

/* Both halves are video, and both sources are 1280×720. One shared rule so they
   can only ever crop identically — the ice was a 4:3 still before, which is
   exactly why the water looked more zoomed than it did.

   `cover` is the least zoom that still fills the hero: the hero is taller than
   16:9 at every size (1.58 on a desktop, 0.46 on a phone), so anything smaller
   leaves bands at the edges. --hero-video-zoom is the dial — 1 is cover, above
   1 pushes in. */
.ihero-ice,
.ihero-water {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--hero-video-zoom));
  pointer-events: none;
}

.ihero-ice {
  z-index: 1;
  /* Shows through while the video buffers, and if it can't play at all */
  background: #9cc3e8 url("../assets/img/ice.png") center / cover no-repeat;
}

/* mask-size is 100% of this box and the seam is painted in viewport
   coordinates, so this must stay exactly viewport-sized. */
.ihero-water {
  z-index: 3;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.ihero-seam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

/* Headline sits above the seam's bars; the tagline locks up under them on the
   seam, in the same white but held back so it reads as secondary. */

/* Контейнер на весь герой: обе половины заголовка позиционируются в нём
   абсолютно, по углам композиции из "Comp 4" */
.ihero-head {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Inter, not the site's Voltaire — the second line is the sans half of the
   lockup against the Playfair italic above it.

   Sized off the viewport HEIGHT as well as its width: the Russian headline is
   ~30% wider than the English original it was translated from, so on a short
   screen a width-only clamp runs the second line straight under the invoice
   card. The vh term is what keeps the headline clear of it. */
/* Размер снят с кадра 1920×1080: строки гротеска ~72px (3.75vw), курсивная
   строка над ними крупнее (см. .serif-accent ниже). vh-часть держит заголовок
   в кадре на коротких экранах. */
.ihero-h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(30px, min(3.9vw, 6.6vh), 78px);
  line-height: 1.02;
}

.ihero-h1 .line { display: block; }

/* Голова фразы — верхний левый угол, на льду; хвост — нижний правый, на воде.
   Позиции из кадра: 140/1920 и 250/1080 слева, 165/1920 и 115/1080 справа. */
/* Ширина выставлена так, чтобы «замороженный счет» ломался на две строки,
   как в кадре: «замороженный» помещается, вместе со «счет» — уже нет */
.ihero-h1-left {
  position: absolute;
  left: 7.3%;
  top: 21.5%;
  display: block;
  max-width: 31%;
  text-align: left;
}

.ihero-h1-right {
  position: absolute;
  right: 8.3%;
  bottom: 10.5%;
  display: block;
  text-align: right;
}

/* Курсивная строка в каждой половине крупнее гротеска — как в кадре, где обе
   строки половины почти равны по ширине */
.ihero-h1 .serif-accent { font-size: 1.3em; line-height: 1; }

/* Playfair italic — the page's one display accent. Two places use it now: the
   hero's first line and the closing line in the contact panel. Only the face
   is shared; tracking stays with each, because the hero runs it at 40–96px
   where it needs pulling in, and the contact heading at roughly half that. */
.serif-accent {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
}

.ihero-serif {
  letter-spacing: -0.05em;
}

.ihero-h1 .line + .line {
  letter-spacing: -0.06em;
  margin-top: -4px;
}

/* left is set from the wave in script.js, same as the badge */
/* Под значком, по центру вьюпорта — в кадре блок стоит на 60% высоты и не
   ездит по волне, поэтому left задан здесь, а не из script.js */
.ihero-tagline {
  position: absolute;
  top: 59.5%;
  left: 50%;
  z-index: 4;
  width: max-content;
  max-width: 92vw;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: clamp(24px, 2.9vw, 56px);
  line-height: 1.28;
  pointer-events: none;
}

.ihero-tagline span { display: block; }

/* Значок на правом изгибе ленты: центр вьюпорта по горизонтали, 43.5% по
   высоте — позиция и размер (236px на 1080-кадре) из "Comp 4" */
.ihero-badge {
  position: absolute;
  left: 50%;
  top: 43.5%;
  z-index: 4;
  width: clamp(120px, 12.3vw, 236px);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 22px 40px rgba(8, 28, 90, 0.35));
  pointer-events: none;
}

/* ---------- Invoice → money morph ---------- */

/* One card plays both parts. Geometry, colour and the two faces are driven
   from the scroll position in script.js; everything here is the resting state
   (the invoice) plus the static fallback for phones and reduced motion. */

/* Секция живёт своими отступами: у .section они рассчитаны на блок с текстом,
   а здесь весь смысл — уместить заголовок и карточку в один экран */
#morph { padding: clamp(40px, 5vw, 72px) 0; }

.morph-scene { height: 180vh; }

.morph-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* сверху — место под плавающий навбар, иначе он накрывает надзаголовок */
  padding: 118px 0 34px;
}

.morph-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Заголовок едет вместе с карточкой, поэтому его отступы здесь свои */
.morph-head { align-self: stretch; }
.morph-head .eyebrow { margin-bottom: 8px; }
.morph-head h2 { margin-bottom: 8px; }
.morph-head .section-sub { margin-bottom: 0; }

/* Размер задаётся в script.js от того, сколько места осталось под заголовком;
   эти значения — только исходная точка до первого расчёта */
.morph-card {
  position: relative;
  /* пара «карточка + подпись» центруется в остатке под заголовком: свободное
     место делится между этим auto и таким же у подписи */
  margin-top: auto;
  width: 330px;
  height: 430px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 34px 80px -34px rgba(18, 48, 158, 0.45);
  will-change: width, height, background-color;
}

.morph-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 26px;
}

/* --- лицо счёта --- */

.morph-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.morph-doc-title { font-size: 0.95rem; font-weight: 600; }

.morph-doc-tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--tint-gray);
  font-size: 0.72rem;
  color: var(--ink-60);
}

/* Строки документа — намеренно нечитаемые: это бумага, а не текст */
.morph-rows {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: auto;
}

.morph-rows span {
  height: 9px;
  border-radius: 5px;
  background: var(--tint-gray);
  transform-origin: left center;
}

.morph-rows span:nth-child(1) { width: 100%; }
.morph-rows span:nth-child(2) { width: 78%; }
.morph-rows span:nth-child(3) { width: 92%; }
.morph-rows span:nth-child(4) { width: 64%; }
.morph-rows span:nth-child(5) { width: 84%; }

.morph-total {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.morph-total-label {
  font-size: 0.78rem;
  color: var(--ink-60);
}

/* Деньги ещё не ваши — сумма читается как сумма, но не как доступные средства */
.morph-total-val {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  filter: blur(5px);
  -webkit-user-select: none;
  user-select: none;
}

.morph-total-val small { font-size: 0.55em; font-weight: 500; }

/* --- лицо выплаты --- */

.morph-cash {
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--white);
  opacity: 0;
  pointer-events: none;
}

.morph-cash-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}

.morph-cash-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.85);
}

.morph-cash-sum {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.morph-cash-sum small { margin-left: 8px; font-size: 0.4em; font-weight: 400; }

.morph-cash-meta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }

.morph-cta { margin-top: 12px; }

/* Подпись под картой — единственное, что подсчитывает время вслух */
.morph-caption {
  margin-bottom: auto;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

/* Статичный вариант: телефоны и prefers-reduced-motion — два состояния рядом,
   без липкой сцены (класс ставится в script.js) */
.morph-scene.static { height: auto; }
.morph-scene.static .morph-sticky { position: static; height: auto; padding: 0; }
.morph-scene.static .morph-stage {
  height: auto;
  display: grid;
  gap: 18px;
}
.morph-scene.static .morph-card { margin: 0; }
.morph-scene.static .morph-caption { margin-bottom: 0; }
/* Карточка перестаёт быть носителем стиля — это просто обёртка, а каждое
   состояние становится самостоятельной карточкой, одна под другой */
.morph-scene.static .morph-card {
  display: grid;
  gap: 16px;
  width: 100%;
  height: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.morph-scene.static .morph-face { position: static; padding: 0; }
.morph-scene.static .morph-doc {
  min-height: 290px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: 0 22px 50px -30px rgba(18, 48, 158, 0.4);
}
.morph-scene.static .morph-cash {
  opacity: 1;
  pointer-events: auto;
  padding: 30px 24px;
  border-radius: var(--r-lg);
  background: var(--blue);
}

/* Hero entrance — see the choreography map above the navbar rules. */

.ihero-h1 .line,
.ihero-tagline {
  opacity: 0;
}

.ihero.v-reveal .ihero-h1 .line {
  opacity: 1;
  animation: fade-rise 0.5s var(--ease-out-expo) backwards;
}

.ihero.v-reveal .ihero-h1 .line:nth-child(1) { animation-delay: 0.3s; }
.ihero.v-reveal .ihero-h1 .line:nth-child(2) { animation-delay: 0.45s; }

.ihero.v-reveal .ihero-tagline {
  opacity: 1;
  animation: ihero-fade 0.5s var(--ease-out-expo) 0.6s backwards;
}

@keyframes ihero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border-radius: 24px;
    background: rgba(10, 24, 74, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(-8px);
    transform-origin: top center;
    /* `display` stays discrete so the pill still collapses layout; opacity +
       transform ease. Degrades to today's instant toggle where unsupported. */
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
      display 0.2s allow-discrete;
  }

  .navbar.nav-open .nav-links {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  /* Entry starting point — the menu drops in from under the pill */
  @starting-style {
    .navbar.nav-open .nav-links {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  .nav-links a {
    padding: 12px 16px;
    border-radius: 14px;
  }

  /* Past the hero the navbar goes white and repaints these links #0a0b10 — but
     the open menu is its own dark navy panel, so that lands dark on dark. The
     panel's own colour wins whenever it's showing, hover included: :hover is
     specificity-equal to the .scrolled rule, so it has to be stated too, and
     it fires on touch as well, where it would otherwise stick blue after a tap. */
  .navbar.nav-open.scrolled .nav-links a,
  .navbar.nav-open.scrolled .nav-links a:hover {
    color: #fff;
  }

  .nav-burger {
    display: flex;
  }

  .navbar.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .navbar.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .ihero-tagline {
    font-size: clamp(24px, 6vw, 40px);
    top: 61%;
  }

  /* Углы композиции на телефоне сходятся к краям сильнее, а половины
     заголовка не должны налезать на значок и подпись в центре */
  .ihero-h1 { font-size: clamp(26px, 7vw, 40px); }
  .ihero-h1-left { left: 6%; top: 16%; max-width: 70%; }
  .ihero-h1-right { right: 6%; bottom: 9%; }
  .ihero-badge { width: clamp(96px, 26vw, 150px); top: 41%; }
}

/* Mobile menu tap highlight — only where a real pointer can hover */
@media (max-width: 980px) and (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 480px) {
  .nav-cta {
    padding: 10px 16px;
    font-size: 13px;
  }

  .navbar {
    padding: 12px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar.v-reveal,
  .navbar.v-reveal .nav-logo,
  .navbar.v-reveal .nav-links a,
  .navbar.v-reveal .nav-cta,
  .navbar.v-reveal .nav-burger,
  .ihero.v-reveal .ihero-h1 .line,
  .ihero.v-reveal .ihero-tagline {
    animation: none;
  }

  /* Mobile menu: keep the fade, drop the slide */
  .nav-links,
  .navbar.nav-open .nav-links {
    transform: none;
  }
}

/* Navbar readable over the light sections below the hero */
.navbar.scrolled {
  background: #ffffff;
  border-color: rgba(10, 11, 16, 0.08);
  box-shadow: 0 10px 30px -14px rgba(10, 11, 16, 0.22);
}
.navbar.scrolled .logo-wordmark,
.navbar.scrolled .nav-links a { color: #0a0b10; }
.navbar.scrolled .nav-links a:hover { color: #2353e8; }
.navbar.scrolled .nav-burger span { background: #0a0b10; }