/* Onest is self-hosted (not Google Fonts) so visitors' IPs never leave Russia — the privacy
   policy relies on it. One variable file per script covers every weight 400–800. */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/onest-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/onest-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/onest-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --surface: #ffffff;
  --text: #0F172A;
  --muted: #3A4263;
  --line: #C7CEDB;
  --primary: #7498F8;
  --primary-10: rgba(116,152,248,0.1);
  --primary-20: rgba(116,152,248,0.2);
  --primary-ink: #3D5FD9;
  --hero-tint: #E3EAFE;
  --shadow: 0 10px 30px rgba(17, 22, 42, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Onest', Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  /* White by default. Lavender (--hero-tint) is reserved for: homepage .hero, .benefits and
     .contact, and the whole page on the knowledge index, knowledge posts and 404 (below). */
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Pages built around one white card (article plaque, 404 card) keep the lavender ground.
   The knowledge index itself is white, like the rest of the site. */
body[data-page="post"],
body[data-page="notfound"] { background: var(--hero-tint); }
h1, h2, h3 {
  font-family: 'Onest', Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* A class that sets `display` beats the UA rule for the hidden attribute, so
   anything toggled via el.hidden needs this to actually disappear. */
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 18px rgba(116,152,248,0.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(116,152,248,0.45); }
.btn:active { transform: translateY(0); }

.btn-sm { padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.btn-lg { padding: 14px 26px; border-radius: 14px; font-size: 16px; }

.section {
  position: relative;
  padding: 96px 0;
}
.section-header { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.section-header h2 { margin: 0 0 16px; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; display: inline-block; position: relative; }
.title-with-corners {
  position: relative;
  display: inline-block;
}
.section-header p { margin: 0; color: var(--muted); font-size: 18px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { font-weight: 700; font-size: 20px; letter-spacing: 0.2px; display: inline-flex; transition: transform .2s ease, opacity .2s ease; }
.logo:hover { transform: scale(1.03); opacity: .88; }
.logo span { color: var(--primary); }

.nav { display: flex; align-items: center; gap: 20px; }
.nav a { color: var(--muted); font-weight: 500; transition: color .2s ease; }
.nav a:not(.btn):hover { color: var(--primary-ink); }
.nav a.btn { color: #fff; }

.nav-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; position: relative; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; }
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 26px; }

.lang-toggle { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 10px; font: 600 12px/1 'Onest', system-ui, sans-serif; cursor: pointer; letter-spacing: 0.06em; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.lang-toggle:hover { border-color: var(--primary); color: var(--primary); }
.lang-toggle:active { transform: translateY(1px); }

/* Hero */
.hero {
  background: var(--hero-tint) !important;
  padding-top: 40px;
  padding-bottom: 56px;
  overflow: hidden;
}
/* Hero card sits close to the header with slim side margins, matching the reference layout */
.hero .container {
  max-width: 100%;
  padding: 0 32px;
}
/* Hero media: full-width dark card, image placeholder behind, white text+button overlaid and centered */
.hero-media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
}
.hero-media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--text);
  transform: scale(1);
}
/* Light 30% scrim over the whole photo, plus local shade where the text sits:
   bottom edge (headline + buttons) and top-right corner (description). */
.hero-media-scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(15,23,42,0.30);
  background-image:
    linear-gradient(0deg, rgba(15,23,42,0.7) 0%, rgba(15,23,42,0) 42%),
    radial-gradient(ellipse 45% 40% at 100% 0%, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-media-bg {
    animation: heroBgZoomOut 16s ease-in-out both;
  }
  .hero-media-scrim {
    animation: heroScrimLighten 16s ease-in-out both;
  }
}
@keyframes heroBgZoomOut {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
@keyframes heroScrimLighten {
  /* Starts a touch darker than the resting 0.30 and eases down to it. */
  from { background-color: rgba(15,23,42,0.42); }
  to { background-color: rgba(15,23,42,0.30); }
}
/* Desktop: hero card fills the viewport below the header so no sliver of the next
   section is visible before scrolling. Keep this in sync with .site-header's height
   and .hero's own top/bottom padding in any future spacing pass. */
@media (min-width: 901px) {
  .hero-media {
    min-height: calc(100vh - 65px - 40px - 56px);
  }
}
.hero-media .hero-title,
.hero-media .hero-subtitle {
  color: #fff;
  position: relative;
}
.hero-media .hero-subtitle { color: rgba(255,255,255,0.82); }
.hero-media .hero-more-btn {
  background: #fff;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.hero-media .hero-more-btn:hover {
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.hero-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 780px; margin: 0 auto;
  animation: fadeUpHero 1s cubic-bezier(.21,.8,.31,1.25) both;
}
@keyframes fadeUpHero { from {opacity:.05; transform:translateY(36px);} to {opacity:1;transform:none;}}
.hero-spotlight {
  position: absolute; left: 50%; top: 61%; transform: translate(-50%,-50%);
  width: 430px; height: 190px;
  background: rgba(116,152,248,0.08);
  border-radius: 50%;
  filter: blur(28px);
  animation: spotlightScan 4s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}
@keyframes spotlightScan {
  0% { top: 58%; opacity: 0.95; }
  60% { top: 64%; opacity: 1;}
  100% { top: 59%; opacity: 0.93; }
}
.hero-3d-item {
  position: absolute; z-index: 2;
  filter: drop-shadow(0 7px 16px #b6b6bb44);
  animation-duration: 6s; animation-iteration-count: infinite;
}
.hero-3d-item.bottle {
  left: 4%; bottom: 30px; width: 46px; height: 110px;
  animation-name: floatBottle; animation-timing-function: ease-in-out;
}
.hero-3d-item.can {
  right: 7%; bottom: 60px; width: 54px; height: 84px;
  animation-name: floatCan; animation-timing-function: ease-in-out;
}
.hero-3d-item.box {
  left: 51%; bottom: 3px; width: 74px; height: 56px;
  transform: translateX(-50%);
  animation-name: floatBox; animation-timing-function: ease-in-out;
}
@keyframes floatBottle {
  0% { transform: translateY(0) rotate(-13deg); }
  45% { transform: translateY(-16px) rotate(-6deg); }
  60% { transform: translateY(-12px) rotate(-8deg); }
  100% { transform: translateY(0) rotate(-13deg); }
}
@keyframes floatCan {
  0% { transform: translateY(0) rotate(16deg); }
  36% { transform: translateY(-16px) rotate(4deg); }
  51% { transform: translateY(-15px) rotate(8deg); }
  100% { transform: translateY(0) rotate(16deg); }
}
@keyframes floatBox {
  0% { transform:translateX(-50%) rotate(-4deg); }
  43% { transform:translateX(-50%) translateY(-16px) rotate(3deg); }
  60% { transform:translateX(-50%) translateY(-7px) rotate(-2deg); }
  100% { transform:translateX(-50%) rotate(-4deg); }
}
.hero-3d-item svg { width: 100%; height: 100%; display: block; }
.hero-title {
  font-size: 57px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  max-width: 750px;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-weight: 700;
}
.hero-title span { display: inline-block; text-align: center; width: auto; }
@media (max-width: 900px) {
  .hero-title { font-size: 42px; max-width: 99vw; }
}
.hero-subtitle { font-size: 20px; color: var(--muted); margin: 0 0 28px; }

.hero-cta { margin-bottom: 28px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; }
.hero-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.hero-demo-link span { transition: transform 200ms ease; }
.hero-demo-link:hover span { transform: translateX(4px); }
.hero-media .hero-demo-link { color: #fff; }

/* Poster layout: description top-right, headline across the bottom, buttons right under it.
   Selectors are .hero-media-scoped so they outrank the plain .hero-title/.hero-subtitle
   breakpoint rules further down the file. */
/* Content must stay shorter than the desktop min-height calc above, or the card outgrows
   the viewport and the gap under it disappears. */
.hero-media { align-items: stretch; justify-content: flex-start; padding: 44px 56px; }
.hero-media .hero-content { max-width: none; width: 100%; margin: 0; align-items: stretch; text-align: left; }
.hero-media .hero-subtitle {
  order: 1;
  align-self: flex-end;
  /* Wide enough that the first sentence fits in two lines, so the forced <br>
     before «Внедряем» starts line three with «стабильно без интернета» ending line two. */
  max-width: 740px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 1px 14px rgba(15,23,42,0.5);
}
/* Key phrases in the description: bolder, with a translucent brand-blue marker
   stroke under the lower part of the words (clone keeps it on each wrapped line). */
.hero-media .hero-subtitle strong {
  font-weight: 700;
  color: #fff;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  background: linear-gradient(transparent 58%, rgba(116,152,248,0.6) 58%, rgba(116,152,248,0.6) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Keeps a short phrase ("стабильно без интернета") from breaking across lines. */
.nowrap { white-space: nowrap; }
.hero-media .hero-title {
  order: 2;
  display: block;
  margin: auto 0 0;
  padding-top: 24px;
  max-width: none;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-align: left;
  text-shadow: 0 2px 28px rgba(15,23,42,0.35);
}
.hero-media .hero-title span { display: inline; text-align: left; }
.hero-media .hero-cta { order: 3; justify-content: flex-start; margin: 24px 0 0; }
@media (max-width: 1100px) {
  .hero-media { padding: 44px 40px; }
  .hero-media .hero-title { font-size: 72px; }
}
/* Phone: no poster split. Headline, description and buttons form one group pinned to the
   bottom of the card (headline first), the photo stays visible above, and the shade sits
   only under the text. Desktop/tablet (>720px) keep the poster layout above untouched. */
@media (max-width: 720px) {
  .hero-media { padding: 28px 22px; min-height: 640px; }
  /* Group sits in the middle of the card rather than pinned to the bottom edge. */
  .hero-media .hero-content { justify-content: center; }
  /* Scales with the phone width: ~43px on a 390px screen, never so large that
     «распознавание» (the longest word) overflows a 360px screen. */
  .hero-media .hero-title { order: 1; margin: 0; padding-top: 0; font-size: clamp(32px, 11vw, 48px); }
  .hero-media .hero-subtitle { order: 2; align-self: stretch; max-width: none; margin-top: 24px; font-size: 16px; }
  .hero-media .hero-cta { order: 3; margin-top: 32px; gap: 16px; }
  .hero-media-scrim {
    background-image: linear-gradient(0deg, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.6) 50%, rgba(15,23,42,0.25) 100%);
  }
}
#hero-scanner-wave {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
  height: 19vw;
  max-height: 120px;
  width: 100%;
  bottom: 21%;
  opacity: 0.72;
}
.hero-visual {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-visual svg {
  width: 100%; height: 100%; display: block;
}
#waves-canvas { width: 100%; height: 100%; display: block; }

/* Cards */
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }

/* Stats */
.stats-inner {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 96px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.stat-ring {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  cursor: pointer;
}
.stat-ring:focus-visible {
  outline: none;
}
.stat-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.stat-ring-track,
.stat-ring-progress {
  fill: none;
  stroke-width: 14;
}
.stat-ring-track {
  stroke: var(--line);
}
.stat-ring-progress {
  stroke: url(#statRingGradient);
  stroke-linecap: round;
  /* Circumference of r=85 (2 * PI * 85), constant regardless of the SVG's
     rendered on-screen size since it's fixed in viewBox units. JS drives
     stroke-dashoffset between 0 (fully bright) and this value * target%. */
  stroke-dasharray: 534.071;
  stroke-dashoffset: 0;
}
.stat-tooltip {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  width: 260px;
  max-width: 80vw;
  transform: translateX(-50%) translateY(6px);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgba(15,23,42,0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 5;
}
.stat-tooltip-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.62;
}
.stat-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
.stat-ring:hover .stat-tooltip,
.stat-ring:focus-visible .stat-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.stat-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #7498F8 0%, #9A6BEF 41%, #C44FD6 72%, #E8457A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat-label { display: flex; flex-direction: column; gap: 4px; max-width: 220px; }
.stat-label-main { color: var(--muted); font-weight: 400; font-size: 17px; }
@media (max-width: 720px) {
  .stats-inner { gap: 56px; }
  .stat-ring { width: 172px; height: 172px; }
  .stat-number { font-size: 2rem; }
}

/* Benefits: «было / стало» in two columns. One grid written pair by pair, so each "without"
   sits level with its "with"; the cells together draw two cards in the site's card style
   (white, 1px --line border, 28px radius). The "without" card keeps the old table's 10% tint. */
.benefits-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px;
}
.benefits-head,
.benefits-cell {
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.benefits-head {
  padding: 24px 32px 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 28px 28px 0 0;
}
.benefits-head--without { color: var(--muted); }
.benefits-head--with { color: var(--primary-ink); }
.benefits-cell { padding: 20px 32px; }
.benefits-cell .tag { margin-bottom: 6px; }
.benefits-cell p { margin: 0; font-size: 15px; line-height: 1.6; }
.benefits-head--without,
.benefits-without { background: linear-gradient(var(--primary-10), var(--primary-10)), var(--surface); }
.benefits-without .tag,
.benefits-without p { color: var(--muted); }
.benefits-with p { color: var(--text); }.benefits-cell--last {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 28px 28px;
}
.benefits-check {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  color: var(--primary-ink);
  vertical-align: -2px;
  flex-shrink: 0;
}
/* Phone: one column of pairs — each «без» card directly above its «с» card. */
@media (max-width: 760px) {
  .benefits-compare { grid-template-columns: 1fr; }
  .benefits-head { display: none; }
  .benefits-cell { padding: 18px 22px; }
  .benefits-cell.benefits-without { margin-top: 12px; border-radius: 20px 20px 0 0; }
  .benefits-head + .benefits-head + .benefits-cell.benefits-without { margin-top: 0; }
  .benefits-cell.benefits-with { border-bottom: 1px solid var(--line); border-radius: 0 0 20px 20px; }
  .benefits-cell--last { padding-bottom: 18px; }
}

/* Features List */
.features-list { display: flex; flex-direction: column; }
.feature-item {
  display: grid;
  grid-template-columns: 88px 260px 1fr;
  column-gap: 32px;
  row-gap: 6px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.feature-item:last-child { border-bottom: none; }
.feature-number {
  grid-column: 1;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  background: linear-gradient(120deg, #7498F8 0%, #9A6BEF 41%, #C44FD6 72%, #E8457A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.feature-item h3 { grid-column: 2; margin: 0; font-size: 19px; font-weight: 700; color: var(--text); }
.feature-item p { grid-column: 3; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.68; }

/* Homepage "Функции": short scannable tiles — metric name + one short line.
   Not numbered: the five metrics aren't a sequence. .feature-item above stays
   for /pricing/'s .pricing-factors list. 5 across on desktop; 3 + 2 on tablets
   (6-column grid so the second row fills the width); a single column on phones. */
.feature-tiles {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.feature-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.feature-tile h3 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.feature-tile p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
/* Hover matches the knowledge-base .blog-card exactly: lift 4px, neutral var(--shadow),
   heading turns --primary-ink, same .25s ease — no border or colour change on the tile.
   Only on devices with a real pointer, so a tap on a phone doesn't leave a tile stuck raised.
   Tiles also carry .reveal, whose later `.reveal.is-visible` rule sets transform/transition
   at the same specificity — hence the extra .feature-tiles parent here, and opacity kept
   in the transition list so the scroll-in fade still animates. */
@media (hover: hover) {
  .feature-tiles .feature-tile.reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .25s ease, box-shadow .25s ease; }
  .feature-tiles .feature-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  .feature-tile h3 { transition: color .25s ease; }
  .feature-tile:hover h3 { color: var(--primary-ink); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .feature-tiles .feature-tile:hover { transform: none; }
}
@media (max-width: 1100px) {
  .feature-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feature-tile { grid-column: span 2; }
  .feature-tile:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 640px) {
  .feature-tiles { grid-template-columns: 1fr; gap: 10px; }
  .feature-tile, .feature-tile:nth-child(n+4) { grid-column: auto; padding: 18px 20px; gap: 4px; }
  .feature-tile h3 { font-size: 19px; }
}

/* FAQ */
.accordion {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}
.accordion-header:hover { color: var(--primary-ink); }
.accordion-toggle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--line);
  stroke-width: 1;
  transition: transform .25s ease, color .2s ease;
}
.accordion-header:hover .accordion-toggle { color: var(--primary); }
.accordion-item[aria-expanded="true"] .accordion-toggle { transform: rotate(45deg); }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .3s ease;
}
.accordion-item[aria-expanded="true"] .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > p { min-height: 0; overflow: hidden; padding: 0; margin: 0; color: var(--muted); line-height: 1.7; max-width: 760px; }
.accordion-panel > p a { color: var(--primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.accordion-item[aria-expanded="true"] .accordion-panel > p { padding-bottom: 26px; }

#faq .section-header p a {
  color: var(--primary-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Contact */
.contact-inner { text-align: center; }

/* Modal */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2000; }
.modal.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,14,25,0.5); backdrop-filter: blur(4px); }
.modal-content { position: relative; width: min(620px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px rgba(10,14,25,0.25); padding: 24px; animation: pop .25s ease; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: #f3f5fb; color: var(--text); font-size: 22px; cursor: pointer; }

@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* Form */
form { display: grid; gap: 14px; margin-top: 8px; }
.form-row { display: grid; gap: 6px; text-align: left; }
label { font-size: 14px; color: var(--muted); }
input { height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 15px; }
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(116,152,248,0.15); }
.form-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

/* Contact form (homepage #contact) */
/* Compact card (both #contact and the demo dialog): fields in pairs — name + company,
   email + phone — the message full width, and both buttons on one row. Phones stack
   everything into one column (see the max-width: 720px rules below). */
.contact-form {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  text-align: left;
  gap: 14px;
}
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.contact-form .form-actions { gap: 20px; margin-top: 2px; }
.form-row-wide { grid-column: 1 / -1; }
.contact-form label { font-weight: 500; font-size: 13px; }
.contact-form .form-row { gap: 6px; }
.contact-form input:not([type="checkbox"]) { height: 40px; padding: 8px 10px; font-size: 14px; }
.form-req { color: var(--primary); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: inherit;
  color: var(--text);
}
.contact-form textarea {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 76px;
}
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(116,152,248,0.15);
}
.contact-form ::placeholder { color: #9aa3bd; }
.form-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.contact-form button.btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 22px;
}
.form-status {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
/* Empty until a submit happens — don't let it reserve a row (and a grid gap) in the card. */
.form-status:empty { display: none; }
.form-status.is-error { color: #d64562; }
.form-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form button.btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.form-fallback {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--hero-tint);
  font-size: 13px;
  color: var(--muted);
}
.form-fallback p { margin: 0; line-height: 1.55; }
.form-fallback a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.btn-ghost {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.form-fallback-plain {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  resize: vertical;
}
@media (max-width: 720px) {
  .contact-form { padding: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions { gap: 16px; }
  .contact-form button.btn { width: 100%; }
}
/* Consent checkbox in both lead forms. The global `input` rule (44px tall, padded,
   focus ring) hits every <input>, so the checkbox resets it here. */
.form-consent { display: flex; align-items: flex-start; gap: 10px; }
.contact-form .form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--primary);
  cursor: pointer;
}
.contact-form .form-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.contact-form .form-consent label { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--muted); cursor: pointer; }
.form-consent a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Cookie notice: injected by main.js on every page until the visitor dismisses it. */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1100;
  width: min(760px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 16px 14px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.cookie-banner-text { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cookie-banner-text a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-ok { flex-shrink: 0; border: 0; cursor: pointer; font-family: inherit; }
@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: stretch; bottom: 12px; width: calc(100vw - 24px); }
  .cookie-banner-ok { width: 100%; }
}

/* Demo request dialog (native <dialog>, opened by .hero-demo-link). The form inside
   is the same .contact-form card as #contact; the dialog itself is only a frame. */
.demo-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}
.demo-dialog::backdrop { background: rgba(10,14,25,0.5); backdrop-filter: blur(4px); }
.demo-dialog .contact-form { margin: 0; }
.demo-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.demo-dialog-head h2 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.demo-dialog-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--hero-tint);
  color: var(--text);
  font: 400 26px/1 'Onest', system-ui, sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.demo-dialog-close:hover { color: var(--primary-ink); }
.demo-dialog-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .demo-dialog[open] { animation: pop .25s ease; }
}
@media (max-width: 720px) {
  .demo-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .demo-dialog-head h2 { font-size: 22px; }
}

/* Storefront band (homepage, between #how-it-works and #about): a wide card that rhymes
   with the hero's full-width card, one line of white copy over a bottom gradient. */
/* Neighbours contribute 64px each side (#how-it-works bottom, #about top); the extra
   bottom padding offsets the #about heading reading closer than the card edge above. */
.section.storefront {
  background: transparent;
  padding: 24px 0 56px;
}
@media (max-width: 720px) {
  .section.storefront { padding: 8px 0 32px; }
}
.storefront .container {
  max-width: 100%;
  padding: 0 32px;
}
.storefront-media {
  position: relative;
  margin: 0;
  height: clamp(360px, 42vw, 620px);
  border-radius: 28px;
  overflow: hidden;
  background: var(--text);
}
.storefront-media picture,
.storefront-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.storefront-media img { object-fit: cover; object-position: 45% 62%; max-width: none; }
.storefront-media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Just enough shade under the caption — the photo itself is already dusk-blue. */
  background: linear-gradient(to top, rgba(15,23,42,0.68) 0%, rgba(15,23,42,0.26) 38%, rgba(15,23,42,0) 58%);
}
.storefront-caption {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 44px;
  z-index: 1;
}
.storefront-title {
  margin: 0 0 12px;
  max-width: 22ch;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.storefront-text {
  margin: 0;
  max-width: 56ch;
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .storefront .container { padding: 0 16px; }
  .storefront-media { height: 420px; }
  .storefront-media img { object-position: 42% 60%; }
  .storefront-caption { left: 20px; right: 20px; bottom: 22px; }
  .storefront-title { font-size: 26px; margin-bottom: 8px; }
  .storefront-text { font-size: 15px; }
}

/* Footer */
.site-footer {
  background: linear-gradient(120deg, #ffffff 0%, #7498F8 50%, #9A6BEF 72%, #C44FD6 86%, #E8457A 100%);
  padding: 72px 0 32px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(15,23,42,0.15);
}
.footer-brand { max-width: 320px; }
.footer-brand .logo { display: inline-flex; margin-bottom: 16px; }
.footer-tagline { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.footer-col { display: flex; flex-direction: column; gap: 14px; min-width: 140px; }
.footer-col-heading { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.footer-col a { color: var(--text); text-decoration: underline; text-decoration-color: transparent; font-size: 15px; transition: text-decoration-color .2s ease, opacity .2s ease; }
.footer-col a:hover { text-decoration-color: currentColor; opacity: .75; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
}
.footer-bottom .footer-copy { margin: 0; color: var(--muted); }
/* Legal documents (/privacy/, /consent/) sit next to the copyright line on every page. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.footer-legal a { color: var(--muted); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .2s ease, color .2s ease; }
.footer-legal a:hover { color: var(--text); text-decoration-color: currentColor; }
@media (max-width: 720px) {
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { flex-direction: column; align-items: center; }
}

/* Reveal Animations */
.reveal { opacity: 0; transform: translateY(18px); will-change: transform, opacity; }
.hero-content.reveal { opacity: unset; transform: unset; }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }


.about::before { display: none !important; }
.about { background: transparent !important; }

/* Удаляем 3d, spotlight */
.hero-3d-item, .hero-spotlight { display: none!important; }
.hero::after, .hero::before, .section.hero::before {
  display: none !important;
  content: '' !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  height: 0 !important;
}
.section.hero::before {
  display: none !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .hero-title { font-size: 48px; }
  .cards-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .section.contact { padding: 72px 28px; }
  .section-header h2 { font-size: 28px; }
  .section-header p { font-size: 16px; }
  .hero { padding-top: 16px; padding-bottom: 72px; }
  .hero .container { padding: 0 16px; }
  .hero-title { font-size: 38px; }
  .hero-subtitle { font-size: 18px; }
  .stats-inner { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--line); flex-direction: column; padding: 12px 16px; }
  .nav.is-open { display: flex; }
  .nav-toggle { display: inline-block; }
}

.hero-gradient-lines {
  position: absolute;
  left: 0; top: 0; width: 100vw; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(0.4px) drop-shadow(0 34px 48px #7498F844);
}
/* How it works: white section (lavender is reserved for hero, benefits and contact). Three-up hero (headline / phone placeholder / steps
   sidebar) followed by four white footer cards. Numbers are plain large text, never
   illustrated icons. */
.how-it-works {
  background: transparent;
  overflow-x: hidden;
  padding-bottom: 64px;
}
@media (max-width: 720px) {
  .how-it-works { padding-bottom: 72px; }
}
.how-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 72px;
  align-items: center;
  margin-bottom: 96px;
}
.how-hero-title h2 {
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.how-hero-title p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  max-width: 400px;
}
.how-media {
  position: relative;
  width: 320px;
  aspect-ratio: 1530 / 3036;
}
.how-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: opacity, transform;
  transition: opacity 500ms ease, transform 500ms ease;
}
.how-media-img--from {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.how-media-img--to {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
}
.how-media.is-step-2 .how-media-img--from {
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
}
.how-media.is-step-2 .how-media-img--to {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.how-side {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.how-steps {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.how-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.how-number {
  font-family: 'Onest', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  width: 62px;
  background: linear-gradient(120deg, #7498F8 0%, #9A6BEF 41%, #C44FD6 72%, #E8457A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.how-step h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.how-step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.how-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-ink);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.how-cta-link span {
  transition: transform 200ms ease;
}
.how-cta-link:hover span {
  transform: translateX(4px);
}
.how-cta-badges {
  display: flex;
  align-items: center;
  gap: 12px;
}
.how-cta-badge {
  height: 44px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
}
/* /app download page */
.app-download-panel {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  gap: 56px;
  max-width: 860px;
  margin: 56px auto 0;
}
.app-download-media {
  display: flex;
  justify-content: center;
}
.app-download-media img {
  width: 100%;
  max-width: 220px;
}
.app-download-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-top: -80px;
}
.app-download-body .how-cta-badges { margin-bottom: 18px; }
.app-download-body .tag { margin-bottom: 12px; }
.app-download-body h2 { margin: 0 0 14px; font-size: 30px; font-weight: 600; }
.app-download-body p { margin: 0; max-width: 540px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.app-download-actions {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .app-download-panel {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }
  .app-download-body { align-items: center; text-align: center; margin-top: 0; }
  .app-download-body .how-cta-badges { justify-content: center; }
  .app-download-actions { margin-top: 28px; justify-content: center; }
}

/* /team page: centered version of the .app-download-body rhythm — no media
   column since there's no product screenshot to pair it with. */
.team-content {
  max-width: 860px;
  margin: 8px auto 0;
  text-align: center;
}
.team-content p { margin: 0 auto 16px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.team-content p:last-of-type { margin-bottom: 0; }
.team-content p strong { color: var(--text); font-weight: 700; }

/* Team story blocks — same numbered rhythm as .features-list on the homepage */
.team-blocks {
  display: grid;
  text-align: left;
}
.team-block {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: 32px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}
.team-block:first-child { padding-top: 8px; }
.team-block:last-child { border-bottom: none; padding-bottom: 8px; }
.team-block-num {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  background: linear-gradient(120deg, #7498F8 0%, #9A6BEF 41%, #C44FD6 72%, #E8457A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.team-block h2 {
  margin: -4px 0 12px;
  font-size: 30px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--text);
}
.team-block p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.team-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
/* Three separate white cards (the same calm look as before, just drawn apart), then one
   full-width lavender rollout card with week-by-week steps and a demo button. */
.how-footer-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.how-footer-card {
  background: var(--surface);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 28px;
}
.how-footer-card .tag { align-self: flex-start; margin-bottom: 20px; }
.how-footer-card h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; }
.how-footer-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.how-footer-card.how-rollout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  padding: 48px 56px;
  background: var(--hero-tint);
  border-color: var(--hero-tint);
}
.how-rollout-text { display: flex; flex-direction: column; }
.how-footer-card.how-rollout h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.how-rollout-btn { align-self: flex-start; margin-top: 24px; }
/* Progress strip: a dot per step joined by a line, in the button blue (--primary); the last
   step (team at work) is filled. Week caption muted, step name bold. */
.how-rollout-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.how-rollout-steps li { position: relative; padding-top: 34px; }
.how-rollout-steps li::before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); box-sizing: border-box; }
.how-rollout-steps li::after { content: ''; position: absolute; top: 8px; left: 18px; right: -16px; height: 2px; background: var(--primary); opacity: .45; }
.how-rollout-steps li:last-child::before { background: var(--primary); }
.how-rollout-steps li:last-child::after { display: none; }
.how-rollout-steps b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 400; color: var(--muted); }
.how-rollout-steps .how-rollout-step-name { display: block; font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--text); }
@media (max-width: 600px) {
  .how-rollout-steps { grid-template-columns: 1fr; gap: 0; }
  .how-rollout-steps li { padding: 0 0 22px 32px; }
  .how-rollout-steps li::after { top: 18px; bottom: 0; left: 8px; right: auto; width: 2px; height: auto; }
  .how-rollout-steps li:last-child { padding-bottom: 0; }
}
@media (max-width: 1100px) {
  .how-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .how-hero-title h2 { font-size: 42px; }
  .how-hero-title p { margin: 0 auto; }
  .how-step { text-align: left; }
}
@media (max-width: 480px) {
  .how-media { width: 260px; }
}
@media (max-width: 720px) {
  .how-footer-cards { grid-template-columns: 1fr; }
  .how-footer-card { padding: 32px 28px; }
  .how-footer-card.how-rollout { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
}

.typed-effect {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
  margin: 0 auto;
  will-change: contents;
}


/* ===== Refined visual system from "Точность и скорость" and below ===== */
.about,
.benefits,
.features,
.faq,
.contact {
  overflow: hidden;
}

.about,
.benefits,
.features,
.faq,
.contact {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (max-width: 720px) {
  .about,
  .benefits,
  .features,
  .faq,
  .contact {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

.about {
  background: transparent !important;
}
.about .container,
.benefits .container,
.features .container,
.faq .container,
.contact .container {
  position: relative;
  z-index: 1;
}
#how-it-works .section-header,
.about .section-header,
.benefits .section-header,
.features .section-header,
.faq .section-header,
.contact .section-header {
  margin-bottom: 64px;
}
.about .section-header p,
.benefits .section-header p,
.features .section-header p,
.faq .section-header p,
.contact .section-header p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

.cards-grid {
  gap: 26px;
  align-items: stretch;
}
.card {
  position: relative;
  min-height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}
.card h3,
.card p {
  position: relative;
  z-index: 1;
}
.card h3 {
  font-size: 17px;
  margin-bottom: 6px;
}
.card p {
  line-height: 1.5;
  font-size: 14px;
}

.benefits {
  background: var(--hero-tint);
}

.features {
  background: transparent;
}
.features-list {
  max-width: 1020px;
  margin: 0 auto;
}

.faq {
  background: transparent;
}

.contact {
  background: var(--hero-tint);
}
.contact-inner {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}
.contact .section-header {
  margin-bottom: 36px;
}
.contact-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact .btn-lg {
  min-width: 260px;
  font-size: 16px;
  padding: 16px 30px;
}

@media (max-width: 720px) {
  #how-it-works .section-header,
  .about .section-header,
  .benefits .section-header,
  .features .section-header,
  .faq .section-header,
  .contact .section-header {
    margin-bottom: 44px;
  }
  .cards-grid {
    gap: 16px;
  }
  .card {
    border-radius: 20px;
    padding: 22px;
  }
  .hero-title {
    font-size: 28px;
  }
  .hero-subtitle {
    font-size: 16px;
  }
  .section.hero {
    padding-top: 16px;
  }
  .feature-item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 28px 0;
  }
  .feature-number,
  .feature-item h3,
  .feature-item p {
    grid-column: 1;
    grid-row: auto;
  }
  .feature-number { font-size: 32px; margin-bottom: 8px; }
  .team-block { grid-template-columns: 1fr; row-gap: 6px; padding: 26px 0; }
  .team-block-num { font-size: 32px; }
  .team-block h2 { margin-top: 0; font-size: 23px; }
  .team-block p { font-size: 15px; }
  .accordion-header {
    padding: 20px 0;
    font-size: 16px;
  }
  .accordion-toggle { width: 28px; height: 28px; }
  .accordion-panel > p {
    font-size: 15px;
  }
  .accordion-item[aria-expanded="true"] .accordion-panel > p {
    padding-bottom: 20px;
  }
}

/* Blog: listing + post pages */

/* Post tags (category chips). Fixed taxonomy — pick exactly one per post:
   Практика, Инсайты, Кейсы, Продукт (Practice, Insights, Cases, Product). */
.tag {
  display: inline-flex;
  align-items: center;
  color: var(--primary-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.blog-meta,
.post-meta { display: flex; align-items: center; gap: 10px; }
.blog-meta { margin-bottom: 14px; }
.post-meta { margin-top: 4px; }

.page-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.page-header h1 {
  margin: 0 0 14px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.page-header p { margin: 0; color: var(--muted); font-size: 18px; }

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
}
.blog-filter {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.blog-filter:hover { border-color: var(--primary); color: var(--primary-ink); }
.blog-filter.is-active {
  background: var(--primary-ink);
  border-color: var(--primary-ink);
  color: #fff;
}

/* /solutions page */
.solutions-intro {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.solutions-intro-text h1 {
  margin: 0 0 14px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.solutions-intro-text p { margin: 0; max-width: 520px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.solutions-intro-media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 28px;
  background: var(--hero-tint);
  border: 1px solid var(--line);
}
.solutions-intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.solutions-media-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}
.solutions-media-tag--fmcg { left: -18px; top: 64%; }
.solutions-media-tag--retail { right: -18px; top: 30%; }
.solutions-filters { margin-bottom: 0; }
.solutions-panel { max-width: 720px; margin: 48px auto 0; }
.solutions-panel h2 { margin: 0 0 16px; font-size: 28px; font-weight: 600; }
.solutions-panel p { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.solutions-panel p:last-child { margin-bottom: 0; }
.solutions-panel p strong { color: var(--text); font-weight: 700; }
@media (max-width: 720px) {
  .solutions-intro { grid-template-columns: 1fr; text-align: center; }
  .solutions-intro-text p { margin: 0 auto; }
  .solutions-intro-media { width: 100%; max-width: 480px; margin: 0 auto; }
  .solutions-media-tag { padding: 6px 16px; font-size: 12px; }
  .solutions-media-tag--fmcg { left: -8px; top: 64%; }
  .solutions-media-tag--retail { right: -8px; top: 30%; }
}

.blog-cta {
  margin: 56px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}
.blog-cta a {
  color: var(--primary-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(230px, auto);
  grid-auto-flow: dense;
  gap: 24px;
}
/* While only one post is listed (the others sit in HTML comments, which :only-child ignores),
   centre it at the width of a normal half-column. A second card breaks :only-child and the
   two-column grid above comes back on its own — nothing to undo by hand. */
.blog-list:has(> .blog-card:only-child) {
  grid-template-columns: minmax(0, 564px);
  justify-content: center;
}
.blog-card {
  display: flex;
  flex-direction: column;
  color: var(--text);
  border-radius: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}
.blog-card time {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.blog-card h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-family: 'Onest', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color .25s ease;
}
.blog-card p {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.blog-card:hover h2,
.blog-card:focus-visible h2 { color: var(--primary-ink); }
.blog-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}
.blog-card-more {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--primary-ink);
  font-size: 16px;
  font-weight: 600;
}
.blog-card-more span { transition: transform 200ms ease; }
.blog-card:hover .blog-card-more span,
.blog-card:focus-visible .blog-card-more span { transform: translateX(4px); }

/* Brick rhythm: short, tall, tall, short — repeats automatically as more posts
   are added (nth-child math, no per-post markup needed to pick which is "big").
   Tall cards get an art panel that sits above the text; text itself is never
   stretched or shrunk to fit — only the decorative panel absorbs the extra
   height, so reading comfort doesn't depend on where a post lands.
   Temporarily disabled below (commented out, not deleted) while the knowledge
   base only has 2 posts, so every card renders identically. Uncomment once
   there are enough posts again for the brick pattern to look intentional. */
.blog-card-art { display: none; }
/*
.blog-list > .blog-card:nth-child(4n+2),
.blog-list > .blog-card:nth-child(4n+3) {
  grid-row: span 2;
}
.blog-list > .blog-card:nth-child(4n+2) h2,
.blog-list > .blog-card:nth-child(4n+3) h2 {
  font-size: 21px;
}
.blog-list > .blog-card:nth-child(4n+2) .blog-card-art,
.blog-list > .blog-card:nth-child(4n+3) .blog-card-art {
  display: flex;
  order: -1;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 180px;
  margin-bottom: 20px;
  background: var(--primary-20);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
}
.blog-card-num {
  font-family: 'Onest', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, #7498F8 0%, #9A6BEF 41%, #C44FD6 72%, #E8457A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 680px) {
  .blog-list > .blog-card:nth-child(4n+2),
  .blog-list > .blog-card:nth-child(4n+3) {
    grid-row: auto;
  }
  .blog-list > .blog-card:nth-child(4n+2) .blog-card-art,
  .blog-list > .blog-card:nth-child(4n+3) .blog-card-art {
    display: none;
  }
}
*/

.blog-empty {
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  padding: 64px 24px;
  border: 1px dashed var(--line);
  border-radius: 20px;
}

/* The article sits on a white card so the body copy is read on white,
   not on the site's tinted background. Card width minus the horizontal padding
   is the text measure — currently ~760px. */
.post {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 60px 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color .2s ease, transform .2s ease;
}
.post-back:hover { color: var(--primary-ink); transform: translateX(-2px); }
.post-header { margin-bottom: 44px; }
.post-header h1 {
  margin: 0 0 16px;
  font-family: 'Onest', sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.post-header time {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.post-body { color: var(--text); font-size: 18px; line-height: 1.8; }
/* /privacy/ and /consent/ reuse .post-body without the .post wrapper, so they set their own reading column. */
.legal-body { max-width: 760px; margin: 0 auto; }
.legal-body .legal-date { color: var(--muted); font-size: 15px; margin-bottom: 32px; }
.legal-table { overflow-x: auto; margin: 0 0 24px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal-table th { font-weight: 600; background: var(--primary-10); }
/* Phones: each row becomes a card, the column name comes from the cell's data-label. */
@media (max-width: 600px) {
  .legal-table thead { display: none; }
  .legal-table tr, .legal-table td { display: block; }
  .legal-table tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .legal-table td { border: 0; padding: 4px 0; }
  .legal-table td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--muted); }
}
.post-body p { margin: 0 0 24px; }
.post-body h2 {
  margin: 48px 0 18px;
  font-family: 'Onest', sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.post-body h3 { margin: 36px 0 14px; font-size: 21px; font-weight: 600; }
.post-body img { border-radius: 16px; margin: 28px 0; box-shadow: var(--shadow); }
.post-body ul, .post-body ol { margin: 0 0 24px; padding-left: 22px; color: var(--text); }
.post-body li { margin-bottom: 10px; }
.post-body a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote {
  position: relative;
  margin: 36px 0 40px;
  padding: 8px 28px 8px 52px;
  color: var(--text);
  font-size: 19px;
  font-style: italic;
  line-height: 1.6;
  background: var(--hero-tint);
  border: 1px solid var(--primary-20);
  border-radius: 16px;
}
.post-cta {
  margin: 8px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}
.post-cta a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Inline copy-to-clipboard button, sits right after an address it duplicates */
.mail-with-copy { white-space: nowrap; }
.copy-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.copy-inline:hover { color: var(--primary); border-color: var(--primary); }
.copy-inline:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.copy-inline .icon-check { display: none; }
.copy-inline.is-copied .icon-copy { display: none; }
.copy-inline.is-copied .icon-check { display: block; }
/* In the footer link list the 26px button would push its row 6px taller than
   the plain links, so let it overflow the line box instead. */
.footer-col .copy-inline {
  margin-top: -3px;
  margin-bottom: -3px;
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.footer-col .copy-inline:hover { border-color: var(--text); color: var(--text); opacity: .7; }
.post-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 16px;
  top: 2px;
  font-family: 'Onest', sans-serif;
  font-style: normal;
  font-size: 34px;
  font-weight: 700;
  color: var(--primary);
  opacity: 0.55;
}

@media (max-width: 680px) {
  .blog-list { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 28px; }
  .post { padding: 32px 22px 28px; border-radius: 20px; }
  .post-header h1 { font-size: 30px; }
  .post-body { font-size: 17px; }
  .post-body blockquote { font-size: 17px; padding-left: 44px; }
}


/* 404 page (public/404.html) — centered card with the brand-gradient error code
   and a grid of links to the main site sections. */
.notfound { padding: 56px 0 96px; }
.notfound-card {
  max-width: 940px;
  margin: 0 auto;
  padding: 56px 48px 48px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.notfound-code {
  /* fit-content keeps the gradient mapped to the glyphs, not to the full card width. */
  width: fit-content;
  margin: 0 auto 24px;
  font-size: clamp(96px, 16vw, 168px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, #F06835 10%, #E8457A 33%, #C44FD6 52%, #9A6BEF 69%, #7498F8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notfound-heading {
  margin: 0 0 14px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.notfound-intro {
  max-width: 620px;
  margin: 0 auto 40px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}
.notfound-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}
.notfound-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(116,152,248,0.06);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.notfound-link:hover {
  transform: translateY(-3px);
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(116,152,248,0.22);
}
.notfound-link-title { font-size: 17px; font-weight: 600; }
.notfound-link-title span { display: inline-block; transition: transform 200ms ease; }
.notfound-link:hover .notfound-link-title span { transform: translateX(4px); }
.notfound-link-desc { color: var(--muted); font-size: 14px; line-height: 1.5; }
.notfound-cta { margin-top: 72px; }
.notfound-cta .section-header { margin-bottom: 28px; }
.notfound-cta .btn-lg { min-width: 260px; }

@media (max-width: 900px) {
  .notfound-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .notfound { padding: 40px 0 72px; }
  .notfound-card { padding: 40px 22px 32px; border-radius: 22px; }
  .notfound-heading { font-size: 28px; }
  .notfound-intro { font-size: 16px; margin-bottom: 28px; }
  .notfound-links { grid-template-columns: 1fr; }
  .notfound-cta { margin-top: 56px; }
}