:root {
  --chistovik-green: #22C58A;
  --chistovik-mint: #7EE2B6;
  --chistovik-mint-bg: #E6FAF1;
  --chistovik-bg: #F4F6F8;
  --chistovik-ink: #0F1720;
  --chistovik-gray: #506069;
  --white: #FFFFFF;
  --line: rgba(15, 23, 32, 0.1);
  --shadow: 0 24px 70px rgba(15, 23, 32, 0.12);
  --radius: 28px;
  --font: Manrope, Inter, DejaVu Sans, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font);
  background: linear-gradient(135deg, #f4f6f8 0%, #e6faf1 48%, #f4f6f8 100%);
  background-size: 240% 240%;
  color: var(--chistovik-ink);
  overflow-x: hidden;
  animation: pageGradientFlow 22s ease-in-out infinite;
}
.landing-page { padding-bottom: 0; }

body::before {
  content: '';
  position: fixed;
  inset: -22vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(34,197,138,.46) 0 12vmax, transparent 27vmax),
    radial-gradient(circle at 82% 18%, rgba(126,226,182,.58) 0 15vmax, transparent 31vmax),
    radial-gradient(circle at 70% 82%, rgba(34,197,138,.36) 0 14vmax, transparent 30vmax),
    radial-gradient(circle at 22% 78%, rgba(230,250,241,.98) 0 17vmax, transparent 32vmax);
  filter: blur(12px) saturate(1.18);
  opacity: .98;
  animation: ambientGradientFlow 24s ease-in-out infinite alternate;
}

body::after {
  content: '';
  position: fixed;
  inset: -12vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 54% at 8% 28%, transparent 0 46%, rgba(255,255,255,.78) 48%, rgba(126,226,182,.30) 52%, transparent 58%),
    radial-gradient(ellipse 74% 48% at 88% 64%, transparent 0 42%, rgba(255,255,255,.66) 45%, rgba(34,197,138,.28) 50%, transparent 57%),
    radial-gradient(ellipse 86% 52% at 52% 112%, transparent 0 45%, rgba(126,226,182,.28) 49%, transparent 57%),
    linear-gradient(115deg, rgba(255,255,255,.30) 0 22%, rgba(230,250,241,.10) 42%, rgba(126,226,182,.18) 64%, rgba(255,255,255,.28) 100%);
  background-size: 136% 136%, 132% 132%, 142% 142%, 210% 210%;
  filter: blur(5px) saturate(1.16);
  opacity: .92;
  animation: ambientWaveSweep 13s ease-in-out infinite alternate;
}

@keyframes pageGradientFlow {
  0%, 100% { background-position: 0% 44%; }
  45% { background-position: 88% 56%; }
  72% { background-position: 36% 92%; }
}
@keyframes ambientGradientFlow {
  0% { transform: translate3d(-2%, -1%, 0) scale(1) rotate(0deg); }
  48% { transform: translate3d(3%, 2%, 0) scale(1.04) rotate(4deg); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02) rotate(-3deg); }
}
@keyframes ambientWaveSweep {
  0% { transform: translate3d(-4%, -1%, 0) scale(1.02); background-position: 0% 38%, 94% 64%, 18% 100%, 0% 50%; }
  46% { transform: translate3d(2%, -3%, 0) scale(1.04); background-position: 48% 24%, 60% 42%, 50% 78%, 78% 50%; }
  100% { transform: translate3d(5%, 2%, 0) scale(1.02); background-position: 96% 58%, 18% 76%, 84% 44%, 100% 50%; }
}
@keyframes headerWaveFlow {
  0%, 100% { transform: translate3d(-5%, 0, 0) rotate(-1.5deg); background-position: 0% 38%, 100% 68%, 50% 0%, 0% 50%; }
  50% { transform: translate3d(5%, -4px, 0) rotate(1.5deg); background-position: 58% 24%, 30% 44%, 72% 100%, 100% 50%; }
}
@keyframes phoneWaveFlow {
  0%, 100% { transform: translate3d(-6%, 2%, 0) rotate(-2deg); background-position: 0% 34%, 100% 64%, 26% 100%, 0% 50%; }
  50% { transform: translate3d(6%, -3%, 0) rotate(2deg); background-position: 58% 18%, 34% 48%, 72% 60%, 100% 50%; }
}
@keyframes waveRibbonFlow {
  0%, 100% { transform: translate3d(-36%, 10%, 0) rotate(-8deg); opacity: .22; }
  42% { transform: translate3d(-4%, -8%, 0) rotate(5deg); opacity: .58; }
  78% { transform: translate3d(30%, 7%, 0) rotate(-5deg); opacity: .34; }
}
@keyframes noticeWaveBase {
  0%, 100% { background-position: 0% 50%; }
  45% { background-position: 82% 38%; }
  76% { background-position: 42% 86%; }
}
@keyframes noticeWaveSweep {
  0%, 100% { transform: translate3d(-34%, 10%, 0) rotate(-8deg); opacity: .18; }
  42% { transform: translate3d(-2%, -8%, 0) rotate(6deg); opacity: .62; }
  78% { transform: translate3d(34%, 8%, 0) rotate(-5deg); opacity: .30; }
}
@keyframes ctaGradientFlow {
  0%, 100% { background-position: 0% 50%; }
  42% { background-position: 86% 42%; }
  74% { background-position: 40% 82%; }
}
@keyframes ctaLightSweep {
  0% { transform: translate3d(-46%, 12%, 0) rotate(-10deg); opacity: .18; }
  48% { transform: translate3d(18%, -10%, 0) rotate(8deg); opacity: .42; }
  100% { transform: translate3d(46%, 10%, 0) rotate(-6deg); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
  }
}

a { color: inherit; text-decoration: none; }
p { color: var(--chistovik-gray); line-height: 1.7; }
img { max-width: 100%; }
.hero__content, .hero-card, .section > *, .legal-layout > * { min-width: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 16px auto 0;
  padding: 14px 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(1.08);
  box-shadow: 0 14px 45px rgba(15, 23, 32, 0.08);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: -88% -32%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 48% at 8% 32%, transparent 0 44%, rgba(255,255,255,.86) 47%, rgba(126,226,182,.44) 52%, transparent 60%),
    radial-gradient(ellipse 76% 50% at 92% 68%, transparent 0 42%, rgba(255,255,255,.72) 46%, rgba(34,197,138,.34) 52%, transparent 61%),
    radial-gradient(ellipse 72% 50% at 48% 112%, rgba(255,255,255,.70), transparent 66%),
    linear-gradient(105deg, rgba(230,250,241,.44), rgba(126,226,182,.22), rgba(255,255,255,.34));
  background-size: 132% 132%, 138% 138%, 126% 126%, 220% 220%;
  filter: blur(4px) saturate(1.16);
  opacity: .94;
  animation: headerWaveFlow 11s ease-in-out infinite;
}
.site-header::after {
  content: '';
  position: absolute;
  inset: -96% -40%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 28%, rgba(255,255,255,.88) 39%, rgba(126,226,182,.56) 46%, transparent 61% 100%),
    linear-gradient(78deg, transparent 0 32%, rgba(34,197,138,.28) 43%, transparent 59% 100%);
  filter: blur(10px) saturate(1.12);
  opacity: .56;
  animation: waveRibbonFlow 6.6s ease-in-out infinite;
}
.site-header > * { position: relative; z-index: 1; }

.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img { display: block; width: 48px; height: 48px; }
.brand span { color: var(--chistovik-ink); font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: 0; }
.nav { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: 15px; color: var(--chistovik-gray); }
.nav a:hover { color: var(--chistovik-ink); }
.site-header--simple .nav { margin-left: auto; }
.site-header--simple .nav a { color: var(--chistovik-ink); }
.header-cta, .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.header-cta, .button--primary {
  background: linear-gradient(115deg, #16895f 0%, #20bf85 28%, #22C58A 56%, #7EE2B6 82%, #20bf85 100%);
  background-size: 220% 220%;
  color: var(--white);
  box-shadow: 0 14px 30px rgba(34, 197, 138, .34);
  animation: ctaGradientFlow 8s ease-in-out infinite;
}
.header-cta::before, .button--primary::before {
  content: '';
  position: absolute;
  inset: -130% -48%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.7), transparent 32%),
    linear-gradient(90deg, transparent 0 18%, rgba(230,250,241,.45) 42%, transparent 68% 100%);
  filter: blur(5px);
  animation: ctaLightSweep 6.8s ease-in-out infinite;
}
.button--secondary {
  background: linear-gradient(115deg, rgba(255,255,255,.94), rgba(230,250,241,.86), rgba(255,255,255,.96));
  background-size: 220% 220%;
  color: var(--chistovik-ink);
  border: 1px solid rgba(15,23,32,.09);
  box-shadow: 0 12px 28px rgba(15,23,32,.05);
  animation: ctaGradientFlow 10s ease-in-out infinite;
}
.header-cta:hover, .button:hover { transform: translateY(-2px); }

.hero {
  max-width: 1180px;
  margin: 22px auto 0;
  padding: 18px 20px 22px;
  display: grid;
  grid-template-columns: 1.14fr .86fr;
  gap: 38px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin: 0 0 18px;
  color: #16895f;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--chistovik-green);
  box-shadow: 0 0 0 8px rgba(34,197,138,.14);
  animation: eyebrowPulse 1.9s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% {
    box-shadow: 0 0 0 8px rgba(34,197,138,.14), 0 0 0 0 rgba(34,197,138,.25);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34,197,138,.18), 0 0 0 13px rgba(34,197,138,0);
    transform: scale(1.08);
  }
}
h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { max-width: 820px; font-size: clamp(40px, 5.2vw, 64px); line-height: 1.04; }
.hero-title {
  position: relative;
  min-height: 3.05em;
  letter-spacing: 0;
}
.hero-title .type-word {
  display: inline-block;
  white-space: nowrap;
}
.hero-title .type-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .16em, 0) scale(.982);
  transition:
    opacity .38s cubic-bezier(.16, 1, .3, 1),
    transform .46s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.hero-title .type-char.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.hero-title .type-char.is-removing {
  opacity: 0;
  transform: translate3d(0, -.06em, 0) scale(.99);
  transition-duration: .12s;
}
.typewriter-measure {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}
.hero-title.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: .74em;
  margin-left: .07em;
  border-radius: 2px;
  background: currentColor;
  opacity: .58;
  vertical-align: -.06em;
  animation: caretBlink 1.12s steps(1) infinite;
}
@keyframes caretBlink {
  0%, 50% { opacity: .58; }
  51%, 100% { opacity: 0; }
}
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
h3 { font-size: 21px; line-height: 1.2; }
.lead { max-width: 650px; margin: 14px 0 0; font-size: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  max-width: 690px;
  margin-top: 22px;
  color: #16895f;
}
.hero-capabilities span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #315349;
  font-size: 13px;
  font-weight: 800;
}
.hero-capabilities span::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--chistovik-green);
  opacity: .75;
}
.hero-card { position: relative; min-height: 540px; border-radius: 42px; background: linear-gradient(145deg, rgba(230,250,241,.96), rgba(255,255,255,.72)); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow); overflow: hidden; }
.hero-card::before { content: ''; position: absolute; inset: -48%; background: radial-gradient(ellipse 78% 48% at 4% 20%, transparent 0 42%, rgba(255,255,255,.74) 46%, rgba(126,226,182,.42) 53%, transparent 62%), radial-gradient(ellipse 82% 52% at 94% 76%, transparent 0 40%, rgba(255,255,255,.64) 45%, rgba(34,197,138,.28) 52%, transparent 62%), radial-gradient(ellipse 80% 58% at 44% 112%, rgba(255,255,255,.74), transparent 70%), linear-gradient(145deg, rgba(230,250,241,.22), rgba(126,226,182,.28), rgba(255,255,255,.18)); background-size: 132% 132%, 138% 138%, 128% 128%, 220% 220%; filter: blur(6px) saturate(1.14); opacity: .92; animation: phoneWaveFlow 11.5s ease-in-out infinite; }
.hero-card::after { content: ''; position: absolute; inset: -54% -42%; pointer-events: none; background: linear-gradient(104deg, transparent 0 28%, rgba(255,255,255,.76) 40%, rgba(126,226,182,.48) 49%, transparent 64% 100%), linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.20)); filter: blur(12px) saturate(1.08); opacity: .54; animation: waveRibbonFlow 7.4s ease-in-out infinite reverse; }
.phone-shell { position: absolute; left: 50%; top: 50%; z-index: 1; width: min(316px, 72%); transform: translate(-50%, -50%) rotate(-3deg); padding: 15px; border-radius: 40px; background: #101820; box-shadow: 0 38px 80px rgba(15,23,32,.26); }
.phone-top { width: 82px; height: 7px; margin: 0 auto 12px; border-radius: 99px; background: rgba(255,255,255,.25); }
.bot-card { padding: 17px; min-height: 392px; border-radius: 28px; background: #fff; overflow: hidden; }
.bot-card__head { display: flex; gap: 12px; align-items: center; }
.bot-card__head img { width: 46px; height: 46px; }
.bot-card__head strong { display:block; font-size: 19px; }
.bot-card__head span { display:block; color: var(--chistovik-gray); font-size: 13px; font-weight: 700; }
.bot-message { margin-top: 18px; max-width: 240px; padding: 11px 13px; border-radius: 18px 18px 18px 6px; background: var(--chistovik-mint-bg); color: #244237; font-size: 13px; line-height: 1.42; font-weight: 800; opacity: 1; transform: translateY(0); animation: phoneStepIn 9s ease-in-out infinite; }
.file-chip { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--chistovik-bg); font-weight: 800; opacity: 1; transform: translateX(0); animation: fileSend 9s ease-in-out infinite; }
.progress-card { margin-top: 16px; padding: 16px; border-radius: 20px; background: var(--chistovik-mint-bg); opacity: 1; transform: translateY(0); animation: progressCardIn 9s ease-in-out infinite; }
.progress-card__top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 800; }
.progress { height: 9px; margin-top: 13px; border-radius: 999px; background: rgba(34,197,138,.18); overflow: hidden; }
.progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--chistovik-green), var(--chistovik-mint)); animation: progressRun 9s ease-in-out infinite; }
.progress-percent::before { content: "0%"; animation: progressPercent 9s linear infinite; }
.check-list { padding: 0; margin: 22px 0 0; list-style: none; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; color: var(--chistovik-gray); font-weight: 700; opacity: 1; transform: translateX(0); animation: checkSlide 9s ease-in-out infinite; }
.check-list li:nth-child(1) { animation-delay: 0s; }
.check-list li:nth-child(2) { animation-delay: .28s; }
.check-list li:nth-child(3) { animation-delay: .56s; }
.check-list li::before { content: '✓'; position:absolute; left:0; top:-2px; width:22px; height:22px; border-radius:50%; background: var(--chistovik-green); color:#fff; display:grid; place-items:center; font-size:13px; transform: scale(.65); animation: checkPop 9s ease-in-out infinite; }
.check-list li:nth-child(2)::before { animation-delay: .28s; }
.check-list li:nth-child(3)::before { animation-delay: .56s; }
@keyframes phoneStepIn {
  0%, 100% { opacity: 1; transform: translateY(0); }
  44%, 88% { opacity: .38; transform: translateY(-4px); }
}
@keyframes fileSend {
  0%, 14%, 100% { opacity: .35; transform: translateX(18px); }
  22%, 88% { opacity: 1; transform: translateX(0); }
  96% { opacity: .35; transform: translateX(18px); }
}
@keyframes progressCardIn {
  0%, 30%, 100% { opacity: .35; transform: translateY(12px); }
  38%, 88% { opacity: 1; transform: translateY(0); }
  96% { opacity: .35; transform: translateY(12px); }
}
@keyframes progressRun {
  0%, 38% { width: 0%; }
  52% { width: 38%; }
  67% { width: 82%; }
  76%, 94% { width: 100%; }
  100% { width: 0%; }
}
@keyframes progressPercent {
  0%, 38% { content: "0%"; }
  48% { content: "27%"; }
  58% { content: "54%"; }
  68% { content: "82%"; }
  76%, 94% { content: "100%"; }
  100% { content: "0%"; }
}
@keyframes checkSlide {
  0%, 64%, 100% { opacity: .28; transform: translateX(14px); }
  72%, 88% { opacity: 1; transform: translateX(0); }
  96% { opacity: .28; transform: translateX(14px); }
}
@keyframes checkPop {
  0%, 64%, 100% { transform: scale(.65); }
  72%, 88% { transform: scale(1); }
  96% { transform: scale(.65); }
}
@keyframes mobileProgressBreathe {
  0%, 100% { width: 78%; }
  50% { width: 88%; }
}

.stats-strip { max-width: 1180px; margin: 0 auto; padding: 0 20px 34px; }
.stats-strip__head { max-width: 780px; margin-bottom: 20px; }
.stats-strip__head h2 { font-size: clamp(26px, 3.3vw, 40px); }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stats-grid article {
  position: relative;
  overflow: hidden;
  min-height: 156px;
  padding: 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 18px 50px rgba(15,23,32,.07);
}
.stats-grid article::before {
  content: '';
  position: absolute;
  inset: -80% -44%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 44% at 12% 30%, transparent 0 42%, rgba(255,255,255,.72) 46%, rgba(126,226,182,.36) 54%, transparent 64%),
    linear-gradient(108deg, transparent 0 30%, rgba(34,197,138,.18) 45%, transparent 64% 100%);
  filter: blur(8px);
  opacity: .56;
  animation: headerWaveFlow 12s ease-in-out infinite;
}
.stats-grid article > * { position: relative; z-index: 1; }
.stats-grid strong { display: block; color: #16895f; font-size: clamp(34px, 5vw, 58px); line-height: .95; letter-spacing: -0.04em; }
.stats-grid span { display: block; margin-top: 14px; color: var(--chistovik-gray); font-weight: 750; line-height: 1.5; }
.stats-note { margin: 16px 0 0; max-width: 760px; font-size: 14px; color: rgba(80,96,105,.86); }
.section { max-width: 1180px; margin: 0 auto; padding: 64px 20px; scroll-margin-top: 94px; }
.section__head { max-width: 720px; margin-bottom: 30px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-card, .feature-list article, .legal-card, .legal-toc, .summary-box, .scope-grid article, .commerce-grid article, .merchant-card { background: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 50px rgba(15,23,32,.07); }
.step-card { padding: 28px; border-radius: var(--radius); }
.step-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.step-card__num { display:inline-flex; padding: 8px 12px; border-radius: 999px; background: var(--chistovik-mint-bg); color: #16895f; font-weight: 900; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 46px; align-items: start; }
.section-text { font-size: 18px; }
.feature-list { display: grid; gap: 16px; }
.feature-list article { padding: 24px; border-radius: 24px; }
.feature-list p { margin-bottom: 0; }
.comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.plan { display: flex; flex-direction: column; padding: 30px; border-radius: var(--radius); background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 18px 50px rgba(15,23,32,.07); }
.plan--accent { position: relative; overflow: hidden; isolation: isolate; border: 2px solid var(--chistovik-green); background: rgba(230,250,241,.9); }
.plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.plan__head span { color: #16895f; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.plan ul { display: grid; flex: 1; align-content: start; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }
.plan li { position: relative; padding-left: 28px; color: var(--chistovik-gray); line-height: 1.55; font-weight: 650; }
.plan__feature::before { position: absolute; left: 0; top: .02em; width: 18px; text-align: center; font-weight: 950; }
.plan__feature--yes::before { content: '✓'; color: #16895f; }
.plan li.plan__feature--no { color: #7b8a91; }
.plan__feature--no::before { content: '×'; color: #d05d5d; font-size: 20px; line-height: 1; }
.plan .button { align-self: flex-start; margin-top: 26px; }
.comparison-note { margin: 18px 0 0; padding: 18px 20px; border-left: 4px solid var(--chistovik-green); background: rgba(255,255,255,.72); }
.scope-grid, .commerce-grid, .price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.scope-grid article, .commerce-grid article {
  padding: 26px;
  border-radius: var(--radius);
}
.scope-grid p, .commerce-grid p { margin-bottom: 0; }
.commerce-grid article span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--chistovik-mint-bg);
  color: #16895f;
  font-weight: 900;
}
.price-grid { margin-top: 18px; }
.price-grid article {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 14px 38px rgba(15,23,32,.06);
}
.price-grid article::before {
  content: '';
  position: absolute;
  inset: -80% -48%;
  background:
    radial-gradient(ellipse 70% 44% at 12% 30%, transparent 0 42%, rgba(255,255,255,.72) 46%, rgba(126,226,182,.30) 54%, transparent 64%),
    linear-gradient(108deg, transparent 0 30%, rgba(34,197,138,.16) 45%, transparent 64% 100%);
  filter: blur(8px);
  opacity: .5;
  animation: headerWaveFlow 13s ease-in-out infinite;
}
.price-grid article > * { position: relative; z-index: 1; }
.price-grid span {
  display: block;
  color: #16895f;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
}
.price-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--chistovik-ink);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.price-line em {
  color: #16895f;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.price-grid p { margin: 12px 0 0; font-size: 14px; }
.merchant-card {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 28px;
  padding: 32px;
  border-radius: 34px;
}
.merchant-card h2 { max-width: 560px; }
.merchant-card dl {
  display: grid;
  gap: 14px;
  margin: 0;
}
.merchant-card dl > div {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(230,250,241,.66);
  border: 1px solid rgba(34,197,138,.14);
}
.merchant-card dt { color: #16895f; font-weight: 900; }
.merchant-card dd { margin: 6px 0 0; color: var(--chistovik-gray); line-height: 1.65; }
.merchant-card a { color: #16895f; font-weight: 900; }
.merchant-card mark {
  padding: 0 .2em;
  border-radius: 6px;
  background: rgba(255, 231, 153, .7);
  color: #604600;
}
.notice { position: relative; width: calc(100% - 40px); max-width: 1180px; margin: 56px auto 42px; padding: 46px; border-radius: 34px; color:#fff; display:grid; grid-template-columns: 104px minmax(0, 1fr); gap:32px; align-items:center; overflow: hidden; background: linear-gradient(120deg, #0F1720 0%, #163229 34%, #16895f 64%, #22C58A 100%); background-size: 240% 240%; box-shadow: var(--shadow); animation: noticeWaveBase 12s ease-in-out infinite; }
.notice::before {
  content: '';
  position: absolute;
  inset: -64% -38%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 48% at 12% 32%, transparent 0 44%, rgba(255,255,255,.38) 48%, rgba(126,226,182,.28) 54%, transparent 64%),
    radial-gradient(ellipse 80% 50% at 88% 68%, transparent 0 42%, rgba(255,255,255,.28) 47%, rgba(34,197,138,.24) 55%, transparent 65%),
    linear-gradient(110deg, transparent 0 24%, rgba(255,255,255,.18) 42%, transparent 62% 100%);
  background-size: 138% 138%, 132% 132%, 220% 220%;
  filter: blur(7px) saturate(1.12);
  opacity: .88;
  animation: headerWaveFlow 10.5s ease-in-out infinite reverse;
}
.notice::after {
  content: '';
  position: absolute;
  inset: -80% -46%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 0 30%, rgba(255,255,255,.38) 42%, rgba(126,226,182,.34) 50%, transparent 65% 100%);
  filter: blur(10px);
  opacity: .42;
  animation: noticeWaveSweep 7.2s ease-in-out infinite;
}
.notice > * { position: relative; z-index: 1; }
.notice__logo { width: 96px; height: 96px; filter: drop-shadow(0 16px 28px rgba(15,23,32,.18)); }
.notice__copy { max-width: 860px; }
.notice h2 { max-width: 860px; font-size: clamp(28px, 3vw, 42px); }
.notice p { max-width: 880px; color: rgba(255,255,255,.82); margin: 12px 0 0; }
.footer { max-width: 1180px; margin: 0 auto; padding: 28px 20px 44px; display:flex; justify-content:space-between; gap:20px; color: var(--chistovik-gray); font-weight: 700; }
.footer a { color: var(--chistovik-ink); }
.footer__links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 18px; }

.legal-page { max-width: 1180px; margin: 0 auto; padding: 48px 20px 78px; }
.legal-hero { max-width: 880px; padding: 26px 0 34px; }
.legal-hero h1 { font-size: clamp(36px, 5vw, 62px); }
.legal-hero p:last-child { font-size: 18px; }
.back-link { display: flex; width: fit-content; margin-bottom: 18px; color: var(--chistovik-gray); font-weight: 800; }
.legal-hero .eyebrow { display: flex; width: fit-content; margin-top: 0; margin-bottom: 18px; }
.legal-layout { display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: start; }
.legal-toc { position: sticky; top: 112px; display:grid; gap: 10px; padding: 18px; border-radius: 24px; }
.legal-toc strong { margin-bottom: 6px; }
.legal-toc a { color: var(--chistovik-gray); font-weight: 750; font-size: 14px; }
.legal-card { padding: 34px; border-radius: 30px; counter-reset: legal-section; }
.legal-card section { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.legal-card section[data-section] { counter-increment: legal-section; }
.legal-card h2 { font-size: 28px; margin-bottom: 14px; }
.legal-card li { margin: 10px 0; color: var(--chistovik-gray); line-height: 1.75; }
.summary-box { padding: 18px 20px; border-radius: 20px; background: var(--chistovik-mint-bg); color: #244237; line-height: 1.65; }

@media (min-width: 861px) and (min-height: 720px) {
  main > .hero {
    min-height: calc(100svh - 92px);
  }
  main > .hero {
    display: grid;
    align-content: center;
  }
  #tariffs {
    padding-top: 44px;
    padding-bottom: 56px;
    scroll-margin-top: 0;
  }
  .comparison .section__head {
    max-width: 940px;
    margin-bottom: 24px;
  }
  .comparison .section__head .eyebrow {
    margin-bottom: 22px;
  }
  .comparison .section__head h2 {
    max-width: 900px;
    font-size: clamp(32px, 3.45vw, 46px);
  }
  .comparison .section__head p {
    max-width: 790px;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.55;
  }
  .comparison-grid { gap: 18px; }
  .comparison .plan { padding: 26px 28px; border-radius: 28px; }
  .comparison .plan__head { padding-bottom: 18px; }
  .comparison .plan h3 { font-size: 22px; }
  .comparison .plan ul { margin-top: 18px; gap: 10px; }
  .comparison .plan li {
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.45;
  }
  .comparison .plan .button {
    margin-top: 22px;
    min-height: 44px;
    padding: 0 22px;
  }
  .comparison .price-grid { margin-top: 18px; gap: 16px; }
  .comparison .price-grid article {
    min-height: 128px;
    padding: 22px;
    border-radius: 24px;
  }
  .comparison .price-grid span { font-size: 13px; }
  .comparison .price-grid strong {
    margin-top: 8px;
    font-size: 32px;
  }
  .comparison .price-grid p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
  }
  .comparison .price-line em { font-size: 14px; }
}

@media (max-width: 860px) {
  .site-header { margin: 10px 10px 0; border-radius: 20px; }
  .nav { display: none; }
  .site-header--simple .nav { display: flex; margin-left: auto; }
  .site-header--simple .header-cta { display: none; }
  .hero, .split, .legal-layout, .comparison-grid, .scope-grid, .commerce-grid, .price-grid, .merchant-card { grid-template-columns: 1fr; }
  .hero { margin-top: 22px; gap: 26px; padding-bottom: 44px; }
  .hero-title { min-height: 0; }
  .hero-card { min-height: 520px; }
  .stats-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .notice { margin-left: 20px; margin-right: 20px; align-items: flex-start; }
}

@media (max-width: 560px) {
  body { overflow-x: hidden; }
  body::before {
    inset: -34vmax -28vmax;
    background:
      radial-gradient(circle at 20% 8%, rgba(34,197,138,.26) 0 18vmax, transparent 36vmax),
      radial-gradient(circle at 86% 30%, rgba(126,226,182,.34) 0 20vmax, transparent 40vmax),
      radial-gradient(circle at 52% 86%, rgba(34,197,138,.20) 0 18vmax, transparent 42vmax);
    filter: blur(18px) saturate(1.08);
    opacity: .72;
    animation-duration: 42s;
  }
  body::after {
    inset: -30vmax -24vmax;
    background:
      radial-gradient(ellipse 84% 54% at 14% 30%, transparent 0 43%, rgba(255,255,255,.64) 47%, rgba(126,226,182,.30) 54%, transparent 64%),
      radial-gradient(ellipse 78% 50% at 90% 70%, transparent 0 42%, rgba(255,255,255,.54) 46%, rgba(34,197,138,.25) 54%, transparent 64%),
      linear-gradient(118deg, rgba(255,255,255,.22), rgba(126,226,182,.14), rgba(255,255,255,.20));
    background-size: 142% 142%, 136% 136%, 220% 220%;
    filter: blur(5px) saturate(1.08);
    opacity: .62;
    animation-duration: 30s;
  }
  .site-header {
    width: calc(100% - 20px);
    justify-content: center;
    gap: 10px;
    padding: 12px;
  }
  .site-header--simple .nav { display: none; }
  .legal-hero .back-link { display: none; }
  .brand { min-width: 0; }
  .brand { gap: 8px; margin: 0 auto; }
  .brand img { width: 32px; height: 32px; }
  .brand span { font-size: 17px; }
  .header-cta { display: none; }
  .site-header::before {
    inset: -95% -42%;
    opacity: .74;
    filter: blur(5px) saturate(1.08);
    animation-duration: 18s;
  }
  .site-header::after {
    opacity: .32;
    animation-duration: 16s;
  }
  .hero, .section, .stats-strip, .footer { width: 100%; max-width: 100vw; overflow: visible; }
  .hero {
    min-height: calc(100svh - 88px);
    margin-left: 0;
    margin-right: 0;
    padding: 28px 16px 34px;
    align-content: center;
  }
  .hero__content { width: 100%; max-width: calc(100vw - 32px); min-width: 0; overflow: visible; }
  .hero-card { display: none; }
  .eyebrow {
    max-width: 100%;
    gap: 18px;
    padding: 8px 0 8px 10px;
    margin-left: -2px;
    overflow: visible;
  }
  .eyebrow::before {
    margin-left: 2px;
  }
  h1 { max-width: calc(100vw - 32px); font-size: 30px; line-height: 1.08; overflow-wrap: anywhere; word-break: break-word; }
  h2 { max-width: 100%; font-size: 30px; overflow-wrap: anywhere; }
  .lead { max-width: 100%; margin-top: 14px; font-size: 17px; overflow-wrap: anywhere; }
  .hero__actions { display: grid; }
  .button { width: 100%; }
  .hero-capabilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    margin-top: 20px;
  }
  .hero-capabilities span {
    justify-content: center;
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    text-align: center;
    font-size: 11px;
  }
  .hero-title .type-char {
    transform: translate3d(0, .1em, 0) scale(.99);
    transition:
      opacity .3s cubic-bezier(.16, 1, .3, 1),
      transform .36s cubic-bezier(.16, 1, .3, 1);
  }
  .hero-card::before {
    inset: -52%;
    opacity: .70;
    filter: blur(5px) saturate(1.08);
    animation-duration: 24s;
  }
  .hero-card::after {
    opacity: .30;
    animation-duration: 18s;
  }
  .phone-shell { top: 50%; width: min(286px, calc(100% - 34px)); max-width: 286px; padding: 12px; border-radius: 36px; transform: translate(-50%, -50%) rotate(-2deg); }
  .bot-card { min-height: 410px; padding: 15px; }
  .bot-message { max-width: 210px; }
  .bot-message,
  .file-chip,
  .progress-card,
  .check-list li,
  .check-list li::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .progress-percent {
    min-width: 42px;
    text-align: right;
  }
  .progress-percent::before {
    content: "82%";
    animation: none;
  }
  .progress i {
    width: 82%;
    animation: mobileProgressBreathe 4.8s ease-in-out infinite;
  }
  .step-card p, .section__head p, .plan li, .feature-list p, .notice p, .scope-grid p, .commerce-grid p, .merchant-card dd { overflow-wrap: anywhere; }
  .section { padding: 46px 16px; }
  .stats-strip { margin-top: -8px; padding: 0 16px 24px; }
  .stats-grid article { min-height: 132px; padding: 22px; }
  .stats-note { font-size: 13px; }
  .section + .section { padding-top: 34px; }
  .section__head { margin-bottom: 24px; }
  .step-card__head { align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .step-card__num { flex: 0 0 auto; }
  .step-card, .feature-list article, .plan, .legal-card, .legal-toc, .summary-box, .scope-grid article, .commerce-grid article, .merchant-card {
    box-shadow: 0 14px 36px rgba(15,23,32,.06);
  }
  .notice { width: auto; max-width: calc(100vw - 32px); margin: 36px 16px 26px; padding: 24px; overflow: hidden; grid-template-columns: 1fr; }
  .notice__logo { width: 58px; height: 58px; flex-basis: 58px; }
  .notice h2 { font-size: 26px; line-height: 1.12; }
  .footer { flex-direction: column; }
  .footer > span { order: 2; }
  .footer__links { order: 1; justify-content: flex-start; }
  .legal-page { width: 100%; padding: 32px 16px 58px; }
  .legal-hero h1 { max-width: 100%; font-size: 34px; overflow-wrap: anywhere; }
  .legal-toc, .legal-card { width: 100%; }
  .legal-card { padding: 22px; }
  .plan { padding: 24px; }
  .plan__head { display: grid; gap: 8px; }
  .merchant-card { padding: 24px; }
  .price-grid strong { font-size: 30px; }
}

@media (max-width: 380px) {
  .site-header { gap: 8px; padding: 10px; }
  .brand img { width: 30px; height: 30px; }
  .brand span { font-size: 15px; }
  .hero { padding-left: 14px; padding-right: 14px; }
  h1 { max-width: calc(100vw - 28px); font-size: 28px; }
  .lead { font-size: 16px; }
  .hero-card { max-width: calc(100vw - 28px); min-height: 570px; }
  .phone-shell { width: min(258px, calc(100% - 28px)); padding: 11px; border-radius: 34px; }
  .bot-card { min-height: 376px; padding: 13px; border-radius: 24px; }
  .bot-card__head img { width: 38px; height: 38px; }
  .bot-card__head strong { font-size: 17px; }
  .bot-card__head span, .bot-message { font-size: 12px; }
  .file-chip { padding: 12px 14px; font-size: 14px; }
  .progress-card { padding: 14px; }
  .check-list { gap: 10px; margin-top: 18px; }
  .check-list li { font-size: 14px; }
  .section { padding-left: 14px; padding-right: 14px; }
  .step-card, .feature-list article, .plan, .scope-grid article, .commerce-grid article { padding: 22px; }
  .notice { max-width: calc(100vw - 28px); margin-left: 14px; margin-right: 14px; }
}

/* Legal page: clear spacing and subsection numbering */
.legal-hero .back-link + .eyebrow { margin-top: 0; }

.legal-card section[data-section] ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  counter-reset: legal-subitem;
}

.legal-card section[data-section] li {
  position: relative;
  padding-left: 76px;
}

.legal-card section[data-section] li::before {
  counter-increment: legal-subitem;
  content: counter(legal-section) "." counter(legal-subitem) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  text-align: right;
  color: #16895f;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .legal-card section[data-section] li {
    padding-left: 68px;
  }

  .legal-card section[data-section] li::before {
    width: 50px;
  }
}