:root {
  --ink: #050505;
  --muted: #868686;
  --line: #d9d9d9;
  --blue: #3790ee;
  --cyan: #41b7c3;
  --green: #46d978;
  --teal-dark: #024059;
  --card: #ffffff;
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  --soft-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  --grad: linear-gradient(102deg, #338bed 0%, #41b8bf 52%, #47db74 100%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Manrope", Arial, "Helvetica Neue", Helvetica, sans-serif;
  background: #fff;
  font-size: 20px;
  line-height: 1.28;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

.container {
  width: min(100% - 140px, 1300px);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 65px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 105px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  background: linear-gradient(90deg, #3C8BEB 0%, #42B1B9 49.52%, #49DA84 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 65px;
  font-size: 18px;
}

.desktop-nav a,
.mobile-menu a {
  transition: color 0.2s ease;
}

.desktop-nav a:hover,
.mobile-menu a:hover {
  color: var(--cyan);
}

.header-cta {
  justify-self: end;
  padding: 12px 22px;
  color: #fff;
  background: var(--teal-dark);
  border-radius: 8px;
  font-size: 17px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.header-cta:hover {
  transform: translateY(-2px);
  background: #063f50;
}

.menu-toggle,
.mobile-menu {
  display: none;
}

.section-gradient {
  background:
    radial-gradient(circle at 20% 28%, rgba(63, 151, 240, 0.30), transparent 26%),
    radial-gradient(circle at 79% 18%, rgba(70, 217, 120, 0.30), transparent 26%),
    radial-gradient(circle at 48% 64%, rgba(113, 220, 230, 0.22), transparent 32%),
    #fff;
}

.mergifai-docs-theme {
  background: #fff;
}

.mergifai-docs-theme main,
.docs-page main {
  background:
    radial-gradient(circle at 18% 12%, rgba(60, 139, 235, 0.24), transparent 18%),
    radial-gradient(circle at 82% 10%, rgba(73, 218, 132, 0.22), transparent 16%),
    radial-gradient(circle at 18% 34%, rgba(60, 139, 235, 0.20), transparent 18%),
    radial-gradient(circle at 78% 49%, rgba(73, 218, 132, 0.18), transparent 18%),
    radial-gradient(circle at 50% 62%, rgba(66, 177, 185, 0.12), transparent 22%),
    radial-gradient(circle at 20% 84%, rgba(60, 139, 235, 0.14), transparent 16%),
    #fff;
}

.mergifai-docs-theme .section-gradient,
.docs-page .section-gradient {
  background: transparent;
}

.mergifai-docs-theme main.contacts-page,
.contacts-page.section-gradient {
  background:
    radial-gradient(circle at 78% 12%, rgba(73, 218, 132, 0.22), transparent 18%),
    radial-gradient(circle at 23% 57%, rgba(60, 139, 235, 0.16), transparent 18%),
    radial-gradient(circle at 64% 52%, rgba(66, 177, 185, 0.10), transparent 22%),
    #fff;
}

.hero {
  min-height: 900px;
  padding: 115px 0 125px;
}

.hero__inner {
  text-align: center;
}

.hero__eyebrow {
  display: none;
}

.hero h1 {
  max-width: 940px;
  margin: 0 auto;
  font-size: 64px;
  line-height: 1.16;
  font-weight: 400;
}

.hero h1 span,
.contact-copy h2,
.case-grid p,
.problem__note span,
.effect-card > div > p {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-grid p,
.problem__note span {
  display: inline-block;
}

.hero__actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

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

.btn-primary {
  color: #fff;
  background: var(--grad);
}

.arrow-icon {
  --arrow-w: 29px;
  --arrow-h: 24px;
  display: inline-block;
  width: var(--arrow-w);
  height: var(--arrow-h);
  flex: 0 0 var(--arrow-w);
  background: linear-gradient(180deg, #3C8BEB 0%, #42B1B9 49.5%, #49DA84 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.6314 13.0121L17.5064 23.1371C17.1894 23.4542 16.7594 23.6323 16.3111 23.6323C15.8628 23.6323 15.4328 23.4542 15.1158 23.1371C14.7988 22.8201 14.6207 22.3902 14.6207 21.9418C14.6207 21.4935 14.7988 21.0635 15.1158 20.7465L22.3594 13.5057H1.6875C1.23995 13.5057 0.810725 13.3279 0.494257 13.0115C0.17779 12.695 0 12.2658 0 11.8182C0 11.3707 0.17779 10.9415 0.494257 10.625C0.810725 10.3085 1.23995 10.1307 1.6875 10.1307H22.3594L15.1186 2.88574C14.8016 2.56872 14.6235 2.13876 14.6235 1.69043C14.6235 1.2421 14.8016 0.812131 15.1186 0.495114C15.4356 0.178098 15.8656 0 16.3139 0C16.7622 0 17.1922 0.178098 17.5092 0.495114L27.6342 10.6201C27.7916 10.7771 27.9164 10.9636 28.0014 11.169C28.0865 11.3743 28.1301 11.5944 28.1298 11.8167C28.1296 12.039 28.0854 12.259 27.9999 12.4642C27.9143 12.6693 27.7891 12.8555 27.6314 13.0121Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.6314 13.0121L17.5064 23.1371C17.1894 23.4542 16.7594 23.6323 16.3111 23.6323C15.8628 23.6323 15.4328 23.4542 15.1158 23.1371C14.7988 22.8201 14.6207 22.3902 14.6207 21.9418C14.6207 21.4935 14.7988 21.0635 15.1158 20.7465L22.3594 13.5057H1.6875C1.23995 13.5057 0.810725 13.3279 0.494257 13.0115C0.17779 12.695 0 12.2658 0 11.8182C0 11.3707 0.17779 10.9415 0.494257 10.625C0.810725 10.3085 1.23995 10.1307 1.6875 10.1307H22.3594L15.1186 2.88574C14.8016 2.56872 14.6235 2.13876 14.6235 1.69043C14.6235 1.2421 14.8016 0.812131 15.1186 0.495114C15.4356 0.178098 15.8656 0 16.3139 0C16.7622 0 17.1922 0.178098 17.5092 0.495114L27.6342 10.6201C27.7916 10.7771 27.9164 10.9636 28.0014 11.169C28.0865 11.3743 28.1301 11.5944 28.1298 11.8167C28.1296 12.039 28.0854 12.259 27.9999 12.4642C27.9143 12.6693 27.7891 12.8555 27.6314 13.0121Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.arrow-icon--button {
  --arrow-w: 18px;
  --arrow-h: 15px;
  background: #fff;
}

.btn-secondary {
  color: #111;
  background: rgba(255, 255, 255, 0.75);
  border-color: #cfd6d8;
}

.tags {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 35px;
  color: #14556b;
  font-weight: 700;
  font-size: 16px;
}

.tags span {
  padding: 3px 8px;
  background: rgba(229, 236, 240, 0.9);
  border-radius: 4px;
}

.flow-card {
  width: min(1038px, 100%);
  min-height: 360px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  gap: 42px;
  align-items: center;
  padding: 54px 50px;
  text-align: left;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 17px;
  box-shadow: var(--soft-shadow);
}

.flow-list h2 {
  margin: 0 0 25px;
  color: #14556b;
  font-size: 22px;
  font-weight: 400;
}

.doc-row {
  position: relative;
  overflow: hidden;
  min-height: 50px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  animation: doc-feed-pulse 7.8s ease-in-out infinite;
  will-change: transform, opacity, border-color, box-shadow;
}

.doc-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 12%, rgba(255, 255, 255, 0.78) 48%, transparent 82%);
  opacity: 0;
  transform: translateX(-115%);
  animation: doc-feed-shine 7.8s ease-in-out infinite;
}

.flow-list .doc-row:nth-child(3),
.flow-list .doc-row:nth-child(3)::after {
  animation-delay: 1.35s;
}

.flow-list .doc-row:nth-child(4),
.flow-list .doc-row:nth-child(4)::after {
  animation-delay: 2.7s;
}

.flow-list--done .doc-row {
  animation-name: doc-feed-pulse-done;
}

.flow-list--done .doc-row::after {
  background: linear-gradient(100deg, transparent 12%, rgba(73, 218, 132, 0.18) 48%, transparent 82%);
}

.doc-row em {
  color: #7d7d7d;
  font-style: normal;
}

.file-icon {
  width: 24px;
  height: 22px;
  border-radius: 4px;
  position: relative;
  display: inline-block;
  background: color-mix(in srgb, currentColor 10%, #fff);
}

.file-icon::before {
  content: "";
  position: absolute;
  inset: 3px 4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='270.976 647.25 11.5 13.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M282.256 650.97L278.756 647.47C278.687 647.4 278.604 647.345 278.513 647.307C278.422 647.269 278.324 647.25 278.226 647.25H272.226C271.894 647.25 271.576 647.382 271.342 647.616C271.107 647.851 270.976 648.168 270.976 648.5V659.5C270.976 659.832 271.107 660.149 271.342 660.384C271.576 660.618 271.894 660.75 272.226 660.75H281.226C281.557 660.75 281.875 660.618 282.109 660.384C282.344 660.149 282.476 659.832 282.476 659.5V651.5C282.476 651.301 282.397 651.111 282.256 650.97ZM278.726 649.562L280.163 651H278.726V649.562ZM272.476 659.25V648.75H277.226V651.75C277.226 651.949 277.305 652.14 277.445 652.28C277.586 652.421 277.777 652.5 277.976 652.5H280.976V659.25H272.476Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='270.976 647.25 11.5 13.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M282.256 650.97L278.756 647.47C278.687 647.4 278.604 647.345 278.513 647.307C278.422 647.269 278.324 647.25 278.226 647.25H272.226C271.894 647.25 271.576 647.382 271.342 647.616C271.107 647.851 270.976 648.168 270.976 648.5V659.5C270.976 659.832 271.107 660.149 271.342 660.384C271.576 660.618 271.894 660.75 272.226 660.75H281.226C281.557 660.75 281.875 660.618 282.109 660.384C282.344 660.149 282.476 659.832 282.476 659.5V651.5C282.476 651.301 282.397 651.111 282.256 650.97ZM278.726 649.562L280.163 651H278.726V649.562ZM272.476 659.25V648.75H277.226V651.75C277.226 651.949 277.305 652.14 277.445 652.28C277.586 652.421 277.777 652.5 277.976 652.5H280.976V659.25H272.476Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.file-icon.blue {
  color: var(--blue);
}

.file-icon.green {
  color: #25c76a;
}

@keyframes doc-feed-pulse {
  0%,
  62%,
  100% {
    opacity: 1;
    transform: translateY(0);
    border-color: #e0e0e0;
    box-shadow: none;
  }
  8% {
    opacity: 0;
    transform: translateY(8px);
  }
  18% {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(60, 139, 235, 0.55);
    box-shadow: 0 8px 18px rgba(60, 139, 235, 0.10);
  }
  34% {
    border-color: #e0e0e0;
    box-shadow: none;
  }
}

@keyframes doc-feed-pulse-done {
  0%,
  62%,
  100% {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(73, 218, 132, 0.10);
    box-shadow: none;
  }
  8% {
    opacity: 0;
    transform: translateY(8px);
  }
  18% {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(73, 218, 132, 0.45);
    box-shadow: 0 8px 18px rgba(73, 218, 132, 0.10);
  }
  34% {
    border-color: rgba(73, 218, 132, 0.10);
    box-shadow: none;
  }
}

@keyframes doc-feed-shine {
  0%,
  16%,
  100% {
    opacity: 0;
    transform: translateX(-115%);
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
    transform: translateX(115%);
  }
}

.ai-core {
  position: relative;
  min-height: 270px;
  display: grid;
  place-items: center;
  color: var(--cyan);
}

.flow-arrow {
  position: absolute;
  --arrow-w: 28.13px;
  --arrow-h: 23.63px;
  display: inline-block;
  width: var(--arrow-w);
  height: var(--arrow-h);
  background: linear-gradient(180deg, #3C8BEB 0%, #42B1B9 49.5%, #49DA84 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.6314 13.0121L17.5064 23.1371C17.1894 23.4542 16.7594 23.6323 16.3111 23.6323C15.8628 23.6323 15.4328 23.4542 15.1158 23.1371C14.7988 22.8201 14.6207 22.3902 14.6207 21.9418C14.6207 21.4935 14.7988 21.0635 15.1158 20.7465L22.3594 13.5057H1.6875C1.23995 13.5057 0.810725 13.3279 0.494257 13.0115C0.17779 12.695 0 12.2658 0 11.8182C0 11.3707 0.17779 10.9415 0.494257 10.625C0.810725 10.3085 1.23995 10.1307 1.6875 10.1307H22.3594L15.1186 2.88574C14.8016 2.56872 14.6235 2.13876 14.6235 1.69043C14.6235 1.2421 14.8016 0.812131 15.1186 0.495114C15.4356 0.178098 15.8656 0 16.3139 0C16.7622 0 17.1922 0.178098 17.5092 0.495114L27.6342 10.6201C27.7916 10.7771 27.9164 10.9636 28.0014 11.169C28.0865 11.3743 28.1301 11.5944 28.1298 11.8167C28.1296 12.039 28.0854 12.259 27.9999 12.4642C27.9143 12.6693 27.7891 12.8555 27.6314 13.0121Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.6314 13.0121L17.5064 23.1371C17.1894 23.4542 16.7594 23.6323 16.3111 23.6323C15.8628 23.6323 15.4328 23.4542 15.1158 23.1371C14.7988 22.8201 14.6207 22.3902 14.6207 21.9418C14.6207 21.4935 14.7988 21.0635 15.1158 20.7465L22.3594 13.5057H1.6875C1.23995 13.5057 0.810725 13.3279 0.494257 13.0115C0.17779 12.695 0 12.2658 0 11.8182C0 11.3707 0.17779 10.9415 0.494257 10.625C0.810725 10.3085 1.23995 10.1307 1.6875 10.1307H22.3594L15.1186 2.88574C14.8016 2.56872 14.6235 2.13876 14.6235 1.69043C14.6235 1.2421 14.8016 0.812131 15.1186 0.495114C15.4356 0.178098 15.8656 0 16.3139 0C16.7622 0 17.1922 0.178098 17.5092 0.495114L27.6342 10.6201C27.7916 10.7771 27.9164 10.9636 28.0014 11.169C28.0865 11.3743 28.1301 11.5944 28.1298 11.8167C28.1296 12.039 28.0854 12.259 27.9999 12.4642C27.9143 12.6693 27.7891 12.8555 27.6314 13.0121Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ai-core .top {
  top: 0;
}

.ai-core .bottom {
  bottom: 0;
}

.ai-stage {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
}

.ai-dash {
  position: absolute;
  inset: 0;
  overflow: visible;
  transform-origin: center;
  animation: orbit-spin 10s linear infinite;
}

.ai-dash rect {
  fill: rgba(73, 218, 132, 0.10);
  stroke: #49DA84;
  stroke-width: 1px;
  stroke-dasharray: 6 6;
}

@keyframes orbit-spin {
  from {
    transform: rotate(-5.06deg);
  }
  to {
    transform: rotate(354.94deg);
  }
}

.ai-box {
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #3C8BEB 0%, #42B1B9 49.5%, #49DA84 100%);
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.ai-box strong {
  display: block;
  font-size: 72px;
  font-weight: 400;
}

.ai-box span {
  display: block;
  margin-top: -18px;
  font-size: 26px;
}

.flow-list--done {
  padding-top: 8px;
}

.live {
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.live span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  position: relative;
  isolation: isolate;
  vertical-align: middle;
  background: var(--green);
  border-radius: 50%;
  animation: live-pulse 1.6s ease-out infinite;
}

.live span::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: rgba(73, 218, 132, 0.26);
  animation: live-wave 1.6s ease-out infinite;
  z-index: -1;
}

@keyframes live-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.86);
  }
}

@keyframes live-wave {
  0% {
    opacity: 0.65;
    transform: scale(0.45);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.problem,
.steps,
.features,
.cases,
.models,
.effect,
.contact-block {
  padding: 55px 0 78px;
}

.section-kicker {
  margin: 0 0 25px;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}

section h2 {
  margin: 0;
  font-size: 36px;
  line-height: 1.36;
  font-weight: 600;
}

.problem__grid {
  display: grid;
  grid-template-columns: 447px 330px 80px 330px;
  gap: 40px;
  align-items: center;
  margin-top: 42px;
}

.copy-block p {
  margin: 0 0 34px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 500;
}

.compare-card {
  min-height: 266px;
  padding: 26px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  font-size: 16px;
}

.compare-card p {
  margin: 0 0 24px;
}

.compare-card h3 {
  margin: 0 0 18px;
  font-size: 30px;
}

.compare-card ul {
  margin: 0;
  padding-left: 20px;
}

.badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 700;
}

.badge-warn {
  color: #ff9d34;
  background: #fff1df;
}

.badge-ok {
  color: #36bf74;
  background: #dff8e9;
}

.big-arrow {
  display: grid;
  place-items: center;
}

.big-arrow .arrow-icon {
  --arrow-w: 44px;
  --arrow-h: 37px;
}

.problem__note {
  max-width: 760px;
  margin: 48px 0 0 auto;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 500;
  text-align: center;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  margin-top: 32px;
}

.step-card,
.case-grid article,
.model-grid article {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover,
.case-grid article:hover,
.model-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
}

.step-card {
  min-height: 225px;
  padding: 28px 20px;
}

.step-card span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  color: #fff;
  font-size: 32px;
  background: var(--grad);
  border-radius: 50%;
}

.step-card h3,
.case-grid h3,
.model-grid h3 {
  margin: 0 0 14px;
  font-size: 27px;
  font-weight: 400;
}

.step-card p,
.model-grid p {
  margin: 0;
  color: var(--muted);
}

.feature-list {
  display: grid;
  gap: 48px;
  margin-top: 45px;
}

.feature-list article {
  display: grid;
  grid-template-columns: 72px 280px 1fr;
  gap: 28px;
  align-items: center;
}

.feature-list h3 {
  margin: 0;
  font-size: 25px;
}

.feature-list p {
  margin: 0;
}

.round-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--soft-shadow);
}

.round-icon::before {
  content: "";
  width: 38px;
  height: 38px;
  display: block;
  background: var(--grad);
  -webkit-mask: var(--round-mask) center / contain no-repeat;
  mask: var(--round-mask) center / contain no-repeat;
}

.icon-doc {
  --round-mask: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 8C13 6.895 13.895 6 15 6H29.25L39 15.75V37C39 38.105 38.105 39 37 39H15C13.895 39 13 38.105 13 37V8ZM28 9.5V17H35.5L28 9.5ZM17 10V35H35V21H26C24.895 21 24 20.105 24 19V10H17ZM10 14H8V42C8 43.105 8.895 44 10 44H31V40H12V14H10Z' fill='black'/%3E%3C/svg%3E");
}

.icon-check::before {
  --round-mask: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='82.5 2430.9 42.7 42.7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M113.471 2445.65C113.689 2445.87 113.863 2446.13 113.981 2446.42C114.099 2446.7 114.16 2447.01 114.16 2447.31C114.16 2447.62 114.099 2447.93 113.981 2448.21C113.863 2448.5 113.689 2448.76 113.471 2448.97L102.533 2459.91C102.315 2460.13 102.057 2460.3 101.772 2460.42C101.487 2460.54 101.182 2460.6 100.873 2460.6C100.565 2460.6 100.259 2460.54 99.9743 2460.42C99.6894 2460.3 99.4306 2460.13 99.2129 2459.91L94.5254 2455.22C94.3074 2455.01 94.1344 2454.75 94.0165 2454.46C93.8985 2454.18 93.8377 2453.87 93.8377 2453.56C93.8377 2453.26 93.8985 2452.95 94.0165 2452.67C94.1344 2452.38 94.3074 2452.12 94.5254 2451.9C94.7434 2451.69 95.0022 2451.51 95.2871 2451.4C95.5719 2451.28 95.8772 2451.22 96.1856 2451.22C96.4939 2451.22 96.7992 2451.28 97.084 2451.4C97.3689 2451.51 97.6277 2451.69 97.8457 2451.9L100.875 2454.93L110.154 2445.65C110.372 2445.43 110.631 2445.26 110.916 2445.14C111.201 2445.02 111.506 2444.96 111.814 2444.96C112.122 2444.96 112.427 2445.03 112.711 2445.14C112.995 2445.26 113.253 2445.44 113.471 2445.65ZM125.094 2452C125.094 2456.17 123.857 2460.25 121.539 2463.72C119.221 2467.19 115.927 2469.89 112.072 2471.49C108.218 2473.08 103.977 2473.5 99.8848 2472.69C95.793 2471.87 92.0345 2469.87 89.0845 2466.92C86.1345 2463.97 84.1255 2460.21 83.3116 2456.12C82.4977 2452.02 82.9154 2447.78 84.5119 2443.93C86.1085 2440.07 88.8121 2436.78 92.2809 2434.46C95.7498 2432.14 99.8281 2430.91 104 2430.91C109.593 2430.91 114.954 2433.14 118.909 2437.09C122.863 2441.05 125.088 2446.41 125.094 2452ZM120.406 2452C120.406 2448.76 119.444 2445.58 117.641 2442.89C115.839 2440.19 113.276 2438.08 110.278 2436.84C107.281 2435.6 103.982 2435.28 100.799 2435.91C97.6168 2436.54 94.6935 2438.1 92.399 2440.4C90.1046 2442.69 88.542 2445.62 87.909 2448.8C87.276 2451.98 87.6009 2455.28 88.8426 2458.28C90.0844 2461.28 92.1872 2463.84 94.8852 2465.64C97.5832 2467.44 100.755 2468.41 104 2468.41C108.35 2468.4 112.52 2466.67 115.596 2463.6C118.672 2460.52 120.402 2456.35 120.406 2452Z' fill='black'/%3E%3C/svg%3E");
  width: 42px;
  height: 42px;
}

.icon-box {
  --round-mask: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8H38C40.209 8 42 9.791 42 12V38C42 40.209 40.209 42 38 42H12C9.791 42 8 40.209 8 38V12C8 9.791 9.791 8 12 8ZM12 12V38H38V12H12ZM34.53 19.53L23 31.06L16.47 24.53L19.3 21.7L23 25.4L31.7 16.7L34.53 19.53Z' fill='black'/%3E%3C/svg%3E");
}

.icon-sync {
  --round-mask: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.5 8.5L41.5 18.5L31.5 28.5V22H15C11.686 22 9 24.686 9 28V31H5V28C5 22.477 9.477 18 15 18H31.5V8.5ZM18.5 41.5L8.5 31.5L18.5 21.5V28H35C38.314 28 41 25.314 41 22V19H45V22C45 27.523 40.523 32 35 32H18.5V41.5Z' fill='black'/%3E%3C/svg%3E");
}

.icon-chart {
  --round-mask: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 40H42V44H8C6.895 44 6 43.105 6 42V8H10V40ZM16 24H22V36H16V24ZM26 14H32V36H26V14ZM36 8H42V36H36V8Z' fill='black'/%3E%3C/svg%3E");
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 35px;
}

.case-grid article,
.model-grid article {
  padding: 30px;
  border: 1.5px solid #54cf96;
}

.case-grid p {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
}

.case-grid span {
  display: block;
  min-height: 75px;
  color: var(--muted);
  font-size: 21px;
}

.case-grid b {
  display: block;
  margin-top: 20px;
  color: var(--teal-dark);
  font-size: 20px;
  font-weight: 500;
}

.wide-text {
  max-width: 1160px;
  margin: 18px 0 32px;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mini-compare,
.model-table {
  min-height: 83px;
  margin: 22px 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #f4f4f4;
  border-radius: 4px;
  text-align: center;
  font-size: 17px;
}

.mini-compare .is-struck {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
}

.mini-arrow {
  --arrow-w: 28px;
  --arrow-h: 24px;
}

.mini-compare small {
  color: #333;
  font-size: 14px;
}

.model-table {
  display: grid;
  text-align: left;
}

.model-table span {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

.model-table b {
  color: var(--green);
  font-weight: 400;
}

.model-grid article:nth-child(3) .model-table {
  min-height: 0;
  margin: 22px 0 28px;
  padding: 18px 18px 16px;
  display: grid;
  align-items: stretch;
  gap: 0;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1.2;
}

.model-grid article:nth-child(3) .model-table span {
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}

.model-grid article:nth-child(3) .model-table span:last-child {
  border-bottom: 0;
}

.model-grid article:nth-child(3) .model-table b {
  flex: 0 0 auto;
  font-weight: 500;
  text-align: right;
}

.model-grid article:nth-child(3) .model-table span:nth-child(2) b {
  color: var(--blue);
}

.model-grid article:nth-child(3) p {
  font-size: 26px;
  line-height: 1.22;
}

.tabs {
  display: flex;
  gap: 20px;
  margin: 28px 0 28px;
}

.tab {
  padding: 11px 20px;
  color: #7b7b7b;
  background: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.tab.is-active {
  color: #fff;
  background: var(--teal-dark);
}

.effect-card {
  display: grid;
  grid-template-columns: 1fr 490px;
  gap: 50px;
  align-items: center;
  min-height: 260px;
  padding: 60px 54px;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid #54cf96;
  border-radius: 12px;
}

.effect-card > div > p {
  margin: 0 0 20px;
  font-size: 25px;
  font-weight: 700;
}

.effect-card h3 {
  margin: 0 0 22px;
  font-size: 32px;
  font-weight: 700;
}

.effect-card span {
  display: block;
  max-width: 560px;
}

.metrics {
  min-height: 140px;
  display: grid;
  grid-template-columns: 1fr 55px 1fr;
  align-items: center;
  padding: 26px 38px;
  background: #f6f6f6;
  border-radius: 8px;
  text-align: center;
}

.metrics small {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
}

.metrics strong {
  display: block;
  color: var(--cyan);
  font-size: 52px;
  font-weight: 700;
}

#role-metric {
  display: inline-block;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.metrics div:last-child strong {
  color: #000;
}

.metrics .mini-arrow {
  justify-self: center;
  --arrow-w: 38px;
  --arrow-h: 32px;
}

.contact-block {
  padding-bottom: 126px;
}

.contact-block__inner,
.contacts-layout {
  display: grid;
  grid-template-columns: 1fr 625px;
  gap: 85px;
  align-items: start;
}

.contact-copy {
  padding-top: 18px;
}

.contact-copy h2 {
  margin: 0 0 44px;
  font-size: 43px;
}

.contact-copy p:not(.section-kicker) {
  max-width: 560px;
  margin: 0 0 45px;
  font-size: 24px;
}

.check-list {
  display: grid;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

.check-list li::before {
  content: "";
  width: 24px;
  height: 18px;
  display: inline-block;
  margin-right: 30px;
  vertical-align: -2px;
  background: var(--grad);
  -webkit-mask: url("../img/icon-check.svg") center / contain no-repeat;
  mask: url("../img/icon-check.svg") center / contain no-repeat;
}

.lead-form {
  padding: 35px 25px 30px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 17px;
  box-shadow: var(--shadow);
}

.lead-form h2 {
  margin: 0 0 30px;
  font-size: 29px;
}

.lead-form label {
  display: block;
  margin-bottom: 24px;
  font-size: 20px;
}

.lead-form input,
.lead-form textarea {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  outline: none;
  color: #111;
  background: #fff;
  font-size: 16px;
}

.lead-form textarea {
  min-height: 102px;
  resize: vertical;
}

.lead-form input:focus,
.lead-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(65, 183, 195, 0.16);
}

.lead-form .consent {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  font-size: 17px;
}

.consent input {
  width: 23px;
  height: 23px;
  min-height: auto;
  margin: 0;
  position: relative;
  flex: 0 0 23px;
  appearance: none;
  border: 2px solid #111;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
}

.consent input:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 12px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

.lead-form .btn {
  width: 100%;
  border: 0;
  font-size: 17px;
}

.lead-form .btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.form-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--teal-dark);
  font-size: 14px;
  text-align: center;
}

.form-status.is-success {
  color: #159447;
}

.form-status.is-error {
  color: #b42318;
}

.site-footer {
  padding: 42px 0 34px;
  color: #fff;
  background: var(--teal-dark);
}

.site-footer .footer-inner {
  width: min(100% - 280px, 1160px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 300px 120px 120px 220px;
  justify-content: space-between;
  gap: 64px;
}

.site-footer h2,
.site-footer h3 {
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
}

.site-footer p {
  margin: 0;
  max-width: 248px;
  font-size: 16px;
  line-height: 1.38;
  font-weight: 400;
}

.site-footer nav,
.site-footer address {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-style: normal;
}

.site-footer a,
.site-footer span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.footer-bottom p {
  max-width: none;
  color: rgba(255, 255, 255, 0.72);
}

.footer-bottom nav {
  display: flex;
  flex-direction: row;
  gap: 28px;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contacts-page {
  min-height: 947px;
  padding: 58px 0 155px;
}

.contacts-layout {
  padding-top: 0;
}

.contacts-copy {
  padding-top: 10px;
}

.contacts-copy h1 {
  margin: 0 0 42px;
  font-size: 48px;
  line-height: 1.28;
  font-weight: 400;
}

.contacts-copy p {
  max-width: 460px;
  margin: 0;
  font-size: 25px;
}

.not-found {
  min-height: 761px;
  display: grid;
  place-items: start center;
  padding-top: 150px;
  text-align: center;
}

.not-found h1 {
  margin: 0 0 32px;
  font-size: 180px;
  line-height: 0.9;
  font-weight: 400;
}

.not-found h1 span {
  color: var(--cyan);
}

.not-found p {
  margin: 0 0 34px;
  font-size: 48px;
}

.reveal-ready {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .container {
    width: min(100% - 48px, 980px);
  }

  .site-header {
    padding: 0 32px;
  }

  .problem__grid,
  .contact-block__inner,
  .contacts-layout {
    grid-template-columns: 1fr;
  }

  .problem__note {
    margin-left: 0;
    margin-right: 0;
  }

  .big-arrow {
    display: none;
  }

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

  .effect-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .container {
    width: min(100% - 26px, 402px);
  }

  .site-header {
    height: 65px;
    grid-template-columns: 1fr auto;
    padding: 0 27px;
  }

  .brand {
    gap: 10px;
    font-size: 20px;
  }

  .brand__mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: grid;
    gap: 5px;
    width: 31px;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .menu-toggle span {
    width: 31px;
    height: 3px;
    background: #000;
    border-radius: 99px;
  }

  .mobile-menu {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    display: grid;
    gap: 16px;
    padding: 18px 28px 24px;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .mobile-menu.is-open {
    opacity: 1;
    transform: translateY(0);
  }

  .section-gradient {
    background:
      radial-gradient(circle at 22% 42%, rgba(63, 151, 240, 0.30), transparent 25%),
      radial-gradient(circle at 82% 18%, rgba(70, 217, 120, 0.30), transparent 27%),
      #fff;
  }

  .hero {
    min-height: auto;
    padding: 50px 0 55px;
  }

  .hero__eyebrow {
    display: block;
    margin: 0 0 8px;
    color: #52b8c1;
    font-size: 13px;
  }

  .hero h1 {
    font-size: 27px;
    line-height: 1.2;
  }

  .hero__actions {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .btn {
    min-height: 35px;
    padding: 8px 13px;
    font-size: 12px;
  }

  .tags {
    gap: 6px;
    margin-top: 12px;
    font-size: 10px;
  }

  .tags span {
    padding: 3px 5px;
  }

  .flow-card {
    min-height: 493px;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 270px;
    margin-top: 20px;
    padding: 18px 18px;
    border-radius: 8px;
  }

  .flow-list h2 {
    margin-bottom: 9px;
    font-size: 13px;
  }

  .doc-row {
    min-height: 28px;
    margin-top: 8px;
    grid-template-columns: 17px 1fr auto;
    gap: 8px;
    padding: 0 8px;
    font-size: 8px;
  }

  .file-icon {
    width: 18px;
    height: 17px;
  }

  .file-icon::before {
    inset: 2px 3px;
  }

  .ai-core {
    min-height: 190px;
  }

  .flow-arrow {
    --arrow-w: 28.13px;
    --arrow-h: 23.63px;
  }

  .ai-stage {
    width: 135px;
    height: 135px;
  }

  .ai-box {
    width: 123px;
    height: 123px;
    border-radius: 24px;
  }

  .ai-box strong {
    font-size: 42px;
  }

  .ai-box span {
    margin-top: -10px;
    font-size: 16px;
  }

  .live {
    font-size: 8px;
  }

  .live span {
    width: 12px;
    height: 12px;
  }

  .problem,
  .steps,
  .features,
  .cases,
  .models,
  .effect,
  .contact-block {
    padding: 34px 0 42px;
  }

  .section-kicker {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
  }

  section h2 {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
  }

  .problem__grid {
    gap: 16px;
    margin-top: 18px;
  }

  .copy-block p {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .compare-card {
    min-height: auto;
    padding: 16px;
    font-size: 12px;
  }

  .compare-card h3 {
    font-size: 19px;
  }

  .problem__note {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
  }

  .steps__grid,
  .case-grid,
  .model-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .step-card {
    min-height: 120px;
    padding: 14px;
  }

  .step-card span {
    width: 31px;
    height: 31px;
    margin-bottom: 10px;
    font-size: 22px;
  }

  .step-card h3,
  .case-grid h3,
  .model-grid h3 {
    font-size: 18px;
  }

  .feature-list {
    gap: 26px;
    margin-top: 24px;
  }

  .feature-list article {
    grid-template-columns: 47px 1fr;
    gap: 14px;
  }

  .feature-list p {
    grid-column: 2;
    font-size: 12px;
  }

  .feature-list h3 {
    font-size: 14px;
  }

  .round-icon {
    width: 42px;
    height: 42px;
  }

  .round-icon::before {
    width: 24px;
    height: 24px;
  }

  .case-grid article,
  .model-grid article {
    padding: 16px;
  }

  .case-grid p,
  .case-grid span,
  .case-grid b,
  .wide-text,
  .model-grid p {
    font-size: 12px;
  }

  .case-grid span {
    min-height: auto;
  }

  .mini-compare,
  .model-table {
    min-height: auto;
    font-size: 10px;
  }

  .model-grid article:nth-child(3) .model-table {
    margin: 18px 0 20px;
    padding: 16px;
    font-size: 15px;
    line-height: 1.24;
  }

  .model-grid article:nth-child(3) .model-table span {
    gap: 14px;
    padding: 14px 0;
  }

  .model-grid article:nth-child(3) .model-table b {
    max-width: 44%;
    text-align: right;
  }

  .model-grid article:nth-child(3) p {
    font-size: 16px;
    line-height: 1.28;
  }

  .tabs {
    gap: 6px;
    overflow-x: auto;
    margin: 14px 0;
  }

  .tab {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 11px;
  }

  .effect-card {
    min-height: auto;
    gap: 16px;
    padding: 22px;
  }

  .effect-card > div > p {
    font-size: 14px;
  }

  .effect-card h3 {
    font-size: 18px;
  }

  .effect-card span {
    font-size: 12px;
  }

  .metrics {
    min-height: 74px;
    padding: 12px;
  }

  .metrics small {
    margin-bottom: 8px;
    font-size: 8px;
  }

  .metrics strong {
    font-size: 28px;
  }

  .metrics b {
    font-size: 24px;
  }

  .contact-block__inner,
  .contacts-layout {
    gap: 26px;
  }

  .contact-copy h2 {
    margin-bottom: 20px;
    font-size: 26px;
  }

  .contact-copy p:not(.section-kicker) {
    margin-bottom: 24px;
    font-size: 14px;
  }

  .check-list {
    gap: 16px;
    font-size: 12px;
  }

  .check-list li::before {
    width: 16px;
    height: 12px;
    margin-right: 14px;
  }

  .lead-form {
    padding: 26px 16px;
    border-radius: 15px;
  }

  .lead-form h2 {
    margin-bottom: 24px;
    font-size: 22px;
  }

  .lead-form label {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .lead-form input,
  .lead-form textarea {
    min-height: 42px;
    margin-top: 10px;
    font-size: 12px;
  }

  .lead-form textarea {
    min-height: 84px;
  }

  .lead-form .consent {
    gap: 11px;
    font-size: 12px;
  }

  .consent input {
    width: 21px;
    height: 21px;
  }

  .site-footer {
    padding: 57px 0 58px;
  }

  .site-footer .footer-inner {
    width: min(100% - 32px, 370px);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .site-footer h2,
  .site-footer h3 {
    margin-bottom: 25px;
    font-size: 22px;
  }

  .site-footer p,
  .site-footer a,
  .site-footer span {
    font-size: 16px;
  }

  .site-footer nav,
  .site-footer address {
    gap: 22px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 18px;
    margin-top: 38px;
    padding-top: 24px;
  }

  .footer-bottom nav {
    flex-direction: row;
    gap: 22px;
  }

  .contacts-page {
    min-height: 1199px;
    padding: 50px 0 124px;
  }

  .contacts-copy h1 {
    margin-bottom: 26px;
    font-size: 38px;
    line-height: 1.28;
  }

  .contacts-copy p {
    font-size: 21px;
  }

  .not-found {
    min-height: 954px;
    padding-top: 188px;
  }

  .not-found h1 {
    margin-bottom: 38px;
    font-size: 129px;
  }

  .not-found p {
    margin-bottom: 38px;
    font-size: 39px;
    line-height: 1.35;
  }
}