@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');



:root {
  --navy: #071a34;
  --ink: #172842;
  --muted: #61738d;
  --blue: #087ecf;
  --cyan: #14addf;
  --paper: #f7faff;
  --line: #dce7f1;
  --white: #fff;
  --card-radius: 30px;
  --screen-radius: 22px;
  --button: linear-gradient(105deg,#00547f 0%,#007dbf 50%,#0ba9df 100%);
  --dark: radial-gradient(circle at 82% 10%,rgba(13,103,199,.36),transparent 31%),linear-gradient(135deg,#06152a 0%,#0a284d 55%,#0b315f 100%);
  --light-gradient: linear-gradient(135deg,#e6f2fd 0%,#f8fbff 48%,#eaf5ff 100%);
  --shadow: 0 18px 48px rgba(20,52,90,.13);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--light-gradient);
  color: var(--ink);
  font: 16px/1.52 Inter,Manrope,Arial,sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}
.container {
  width: min(1180px,calc(100% - 48px));
  margin: auto;
}
h1,h2,h3,p {
  margin-top: 0;
}
h1 {
  max-width: 700px;
  margin-bottom: 20px;
  font-size: clamp(39px,4.25vw,49px);
  line-height: 1.06;
  letter-spacing: -.052em;
}
h2 {
  max-width: 820px;
  margin-bottom: 17px;
  font-size: clamp(32px,3.15vw,43px);
  line-height: 1.1;
  letter-spacing: -.043em;
}
h3 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.018em;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: #fff;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 11px 24px rgba(0,112,185,.24);
  transition: .2s ease;
  cursor: pointer;
}
.btn:after {
  content: "→";
  font-size: 19px;
  line-height: 1;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0,112,185,.3);
}
.text-link {
  color: var(--blue);
  font-size: 15px;
  font-weight: 800;
}


.hero {
  position: relative;
  min-height: calc(100svh - 82px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 48px 0;
  background: radial-gradient(circle at 86% 12%,rgba(89,183,233,.19),transparent 30%),radial-gradient(circle at 8% 88%,rgba(34,139,218,.1),transparent 28%),linear-gradient(135deg,#e5f2fd 0%,#f9fcff 50%,#e7f3ff 100%);
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(380px,.8fr);
  gap: 54px;
  align-items: center;
}
.hero-copy {
  min-width: 0;
}
.hero .lead {
  max-width: 680px;
}

.lead {
  max-width: 735px;
  color: #50627d;
  font-size: clamp(18px,1.65vw,21px);
  line-height: 1.45;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px 0 0;
}
.hero-media {
  min-width: 0;
}
.video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--screen-radius);
  background: #000;
  box-shadow: var(--shadow);
}
.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-details {
  position: relative;
  margin-top: 16px;
  padding: 0 2px;
}
.video-details p {
  max-width: 480px;
  margin: 0;
  color: #59708c;
  font-size: 14px;
  line-height: 1.45;
}
.video-details strong {
  color: #1d4f7c;
}
.video-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: #627a94;
  font-size: 13px;
  font-weight: 750;
}
.time-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: #178bd2;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-benefits {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px 18px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(101,145,185,.24);
  color: #486482;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
.hero-benefits span {
  position: relative;
  padding-left: 13px;
}
.hero-benefits span:before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg,#087ecf,#18addf);
}
.departments-section {
  background: radial-gradient(circle at 92% 18%,rgba(84,179,231,.1),transparent 27%),linear-gradient(135deg,#f8fcff 0%,#edf6fe 51%,#f6fbff 100%);
}
.departments {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.dept {
  position: relative;
  min-height: 255px;
  padding: 29px;
  overflow: hidden;
  border: 0;
  border-radius: var(--card-radius);
  background: linear-gradient(145deg,rgba(255,255,255,.98) 0%,rgba(249,253,255,.98) 66%,rgba(234,246,255,.98) 100%);
  box-shadow: 0 9px 26px rgba(24,62,103,.065);
  transition: .25s ease;
}
.dept:hover {
  z-index: 1;
  box-shadow: 0 20px 42px rgba(24,72,118,.15);
  transform: translateY(-5px);
}
.dept:before {
  content: attr(data-number);
  position: absolute;
  right: -47px;
  bottom: -58px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 145px;
  border: 1px solid rgba(5,127,207,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(5,127,207,.025),0 0 0 36px rgba(5,127,207,.014);
  color: rgba(7,126,205,.19);
  font-size: 42px;
  font-weight: 850;
  letter-spacing: -.06em;
  line-height: 1;
}
.dept h3,.dept ul {
  position: relative;
  z-index: 1;
}
.dept h3 {
  max-width: 250px;
  font-size: 21px;
}
.dept ul {
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}
.dept li {
  position: relative;
  margin: 8px 0;
  padding-left: 17px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.dept li:before {
  content: "";
  position: absolute;
  top: .55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
.light {
  background: radial-gradient(circle at 85% 18%,rgba(88,181,232,.13),transparent 28%),linear-gradient(135deg,#e5f3ff,#f8fcff 54%,#e9f5ff);
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 62px;
  align-items: center;
}
.checks {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 13px 27px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.checks li {
  position: relative;
  padding-left: 25px;
  color: #465a75;
}
.checks li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-size: 17px;
  font-weight: 900;
}
.screen-stack {
  position: relative;
  padding: 18px 0 0 18px;
}
.screen-stack:before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 20px 20px 0;
  border: 1px solid #b4d6ef;
  border-radius: var(--screen-radius);
  background: linear-gradient(145deg,#cfeaff,#eef8ff);
  transform: rotate(-2deg);
}
.screen {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 305px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: var(--screen-radius);
  background: linear-gradient(145deg,#e0f1ff,#fff);
  box-shadow: var(--shadow);
  text-align: center;
}
.screen:after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(0,122,204,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(0,122,204,.04);
}
.screen-inner {
  position: relative;
  z-index: 1;
  max-width: 330px;
  padding: 25px;
  color: #4d7097;
}
.screen-inner strong {
  display: block;
  margin-bottom: 8px;
  color: #1765ad;
  font-size: 18px;
}
.approach {
  position: relative;
  overflow: hidden;
  padding: 76px 0;
  background: var(--dark);
  color: #fff;
}
.approach-inner {
  position: relative;
  z-index: 1;
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(430px,.92fr);
  gap: 76px;
  align-items: center;
}
.approach-copy {
  max-width: 570px;
  padding-left: 16px;
}
.approach-copy h2 {
  max-width: 560px;
}
.approach-copy .lead {
  max-width: 540px;
  color: #cddff0;
  font-size: 18px;
}
.blueprint {
  position: relative;
  max-width: 548px;
  margin-top: 32px;
  padding-left: 31px;
}
.blueprint:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg,#1da9e1 0%,rgba(29,169,225,.25) 78%,transparent 100%);
}
.blueprint-row {
  position: relative;
  padding: 0 0 17px;
}
.blueprint-row:last-child {
  padding-bottom: 0;
}
.blueprint-row:before {
  content: "";
  position: absolute;
  left: -28px;
  top: 8px;
  width: 9px;
  height: 9px;
  border: 2px solid #8ed5fa;
  border-radius: 50%;
  background: #0a2b52;
  box-shadow: 0 0 0 5px rgba(17,130,210,.12);
}
.blueprint-content {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(171,214,245,.18);
}
.blueprint-row:last-child .blueprint-content {
  padding-bottom: 0;
  border-bottom: 0;
}
.blueprint-content b {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 17px;
  letter-spacing: -.018em;
  line-height: 1.22;
}
.blueprint-content span {
  display: block;
  color: #bdd4e8;
  font-size: 14px;
  line-height: 1.42;
}



.home-hero .video-details {
  display: block;
  margin-top: 12px;
  padding: 13px 17px;
  border: 1px solid rgba(145,210,246,.27);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}
.home-hero .video-details p {
  margin: 0;
  color: #e2f4ff;
  font-size: 14px;
  line-height: 1.45;
}
.home-hero .video-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #b6e3fa;
}
.home-videos .video-card__frame--embed {
  padding: 0;
  min-height: 0;
  background: #000;
}
.embedded-video {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.embedded-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-section-head {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 55px;
  align-items: end;
  margin-bottom: 37px;
}
.home-section-head .lead {
  margin: 0;
}
.home-videos {
  background: #f8fcff;
}
.home-videos__grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 22px;
}
.video-card {
  overflow: hidden;
  border: 1px solid #cce5f4;
  border-radius: 25px;
  background: #fff;
  box-shadow: var(--shadow);
}
.video-card__frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 257px;
  background: radial-gradient(circle at 75% 20%,rgba(38,153,218,.5),transparent 38%),linear-gradient(135deg,#081c37,#0c3b70);
  color: #d8f3ff;
}
/* .video-card__frame:before {
  content: "СИСТЕМА ПРОДАЖ";
  position: absolute;
  top: 24px;
  left: 24px;
  opacity: .3;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .05em;
} */
.video-card__frame--two {
  background: radial-gradient(circle at 75% 20%,rgba(38,153,218,.5),transparent 38%),linear-gradient(135deg,#0b2f5e,#082139);
}
/* .video-card__frame--two:before {
  content: "БИТРИКС24";
} */
.video-card__play {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid #9bdcff;
  border-radius: 50%;
  background: rgba(0,133,205,.65);
  color: #fff;
  font-size: 20px;
}
.video-card__frame small {
  position: absolute;
  bottom: 19px;
  left: 23px;
  color: #aadaf5;
  font-size: 12px;
}
.video-card__body {
  padding: 27px;
}
.card-number {
  color: #087ecf;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.video-card h3 {
  margin: 10px 0;
  font-size: 25px;
}
.video-card p {
  margin-bottom: 13px;
  color: var(--muted);
}
.video-card__hint {
  color: #8194a8;
  font-size: 11px;
}
.home-approach {
  background: #fff;
}
.approach-map {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}
.approach-map article {
  min-height: 233px;
  padding: 23px;
  border: 1px solid #d7eaf5;
  border-radius: 18px;
  background: #f8fcff;
}
.approach-map article span {
  color: #0888c5;
  font-size: 12px;
  font-weight: 900;
}
.approach-map h3 {
  margin: 19px 0 9px;
  font-size: 20px;
}
.approach-map p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}


.difference {
  display: grid;
  grid-template-columns: .65fr 1fr;
  gap: 40px;
  margin-top: 22px;
  padding: 33px;
  border-radius: var(--card-radius);
  background: var(--dark);
  color: #fff;
}
.difference h3 {
  margin: 0;
  color: #fff;
  font-size: 28px;
}
.difference .eyebrow {
  color: #8bdcff;
}
.difference__points {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}
.difference__points p {
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(147,213,248,.2);
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  color: #d7e7f5;
  font-size: 13px;
}
.difference__points b {
  color: #fff;
}

.eyebrow {
  margin: 0 0 11px;
  color: #087ecf;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.eyebrow--light {
  color: #87d8ff;
}


.automation {
  background: radial-gradient(circle at 85% 80%,rgba(74,173,228,.12),transparent 30%),linear-gradient(135deg,#e9f5ff,#f7fbff 58%,#e7f4ff);
}
.implementation {
  padding: 104px 0;
  overflow: hidden;
  background: radial-gradient(circle at 14% 8%,rgba(83,178,231,.11),transparent 29%),linear-gradient(135deg,#eaf4fc,#f7fbff 57%,#edf7ff);
}
.implementation__head {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(270px,.85fr);
  align-items: end;
  gap: 32px 72px;
  margin-bottom: 42px;
}
.implementation h2 {
  max-width: 780px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(35px,3.35vw,46px);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1.02;
}
.implementation__lead {
  max-width: 390px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 450;
  letter-spacing: -.02em;
  line-height: 1.46;
}
.implementation__map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border: 0;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 38px rgba(29,55,88,.08);
  overflow: hidden;
}
.implementation__map:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,#087ecf 0%,#83cbec 43%,#d8edf9 77%,#e9f5fb 100%);
  content: "";
  opacity: .9;
}
.process-card {
  position: relative;
  display: flex;
  min-height: 252px;
  flex-direction: column;
  padding: 27px 25px 25px;
  background: transparent;
  isolation: isolate;
  transition: .25s ease;
}
.process-card:nth-child(-n/**/+4) {
  border-bottom: 1px solid var(--line);
}
.process-card:not(:nth-child(4n/**/+1)) {
  border-left: 1px solid var(--line);
}
.process-card:after {
  position: absolute;
  top: 27px;
  right: 25px;
  width: 7px;
  height: 7px;
  border: 2px solid #9fbed2;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: .25s ease;
}
.process-card:hover {
  z-index: 1;
  background: #fbfdff;
  box-shadow: 0 13px 28px rgba(20,67,108,.10);
  transform: translateY(-3px);
}
.process-card:hover:after {
  border-color: var(--blue);
  background: var(--blue);
  transform: scale(1.12);
}
.process-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}
.process-card__number {
  color: #0e629d;
}
.process-card__meta:after {
  width: 18px;
  height: 1px;
  background: #bdd9e9;
  content: "";
}
.process-card__category {
  margin-bottom: 5px;
  color: #74869b;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.process-card h3 {
  max-width: 225px;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 730;
  letter-spacing: -.045em;
  line-height: 1.1;
}
.process-card p {
  max-width: 250px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: -.018em;
  line-height: 1.48;
}
.process-card--support {
  background: rgba(240,248,255,.9);
}
.process-card--support:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--blue);
  content: "";
  opacity: .9;
}
.process-card--support .process-card__tag {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  color: #0e629d;
  background: rgba(222,240,253,.9);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
.reports {
  background: var(--dark);
  color: #fff;
}
.reports .lead {
  color: #cedff0;
}
.reports .checks li {
  color: #e0ebf7;
}
.reports .checks li:before {
  color: #8bd4ff;
}
.report-screen {
  background: linear-gradient(145deg,#dcedfd,#fbfdff);
}



.client-proof {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  background: radial-gradient(circle at 10% 10%,rgba(88,182,233,.16),transparent 28%),radial-gradient(circle at 91% 83%,rgba(79,171,226,.14),transparent 29%),linear-gradient(135deg,#eaf5ff 0%,#fbfdff 54%,#e8f4ff 100%);
}
.client-proof:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,#a6d9f0 29%,#1689cf 50%,#a6d9f0 71%,transparent);
}
.client-proof .container {
  position: relative;
  z-index: 1;
}


.cases-editorial {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  /*background: #071b35;*/
  color: #fff;
}
.cases-editorial:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 91% 12%,rgba(16,139,211,.32),transparent 30%),radial-gradient(circle at 12% 88%,rgba(30,174,228,.15),transparent 26%);
}
.cases-editorial__inner {
  position: relative;
  z-index: 1;
}
.cases-editorial__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
}
.cases-editorial__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #8bd8ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cases-editorial__eyebrow:before {
  content: "";
  width: 25px;
  height: 1px;
  background: #38b8eb;
}
.cases-editorial h2 {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-size: clamp(34px,3.25vw,46px);
  font-weight: 780;
  letter-spacing: -.052em;
  line-height: 1.04;
}
.cases-editorial__head>p {
  max-width: 355px;
  margin: 0 0 3px;
  color: #c0d9ed;
  font-size: 16px;
  line-height: 1.47;
}
.case-articles {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.case-article {
  display: flex;
  min-height: 408px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(163,213,245,.22);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 15px 30px rgba(0,0,0,.13);
  transition: .27s ease;
}
.case-article:hover {
  border-color: rgba(148,222,255,.64);
  background: rgba(255,255,255,.09);
  box-shadow: 0 22px 45px rgba(0,0,0,.22);
  transform: translateY(-6px);
}
.case-article__image {
  position: relative;
  display: block;
  aspect-ratio: 16/8.9;
  overflow: hidden;
  background: linear-gradient(135deg,#0c5084,#17a8d7);
}
.case-article__image:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(2,17,37,.42),transparent 57%),radial-gradient(circle at 78% 18%,rgba(187,238,255,.45),transparent 24%);
}
.case-article__image:after {
  content: "";
  position: absolute;
  right: -15%;
  bottom: -48%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(227,248,255,.45);
  border-radius: 50%;
  box-shadow: 0 0 0 27px rgba(227,248,255,.08);
}
.case-article__image--metal {
  background: linear-gradient(135deg,#123653,#1877a5);
}
.case-article__image--meat {
  background: linear-gradient(135deg,#153353,#0e8dba);
}
.case-article__image span {
  position: absolute;
  z-index: 1;
  left: 17px;
  bottom: 14px;
  right: 17px;
  color: #fff;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: -.022em;
  line-height: 1.2;
}
.case-article__image em {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 15px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(3,30,58,.4);
  color: #d8f3ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.case-article__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 21px 21px 20px;
}
.case-article__body h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 21px;
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1.1;
}
.case-article__body p {
  margin: 0;
  color: #c0d8e9;
  font-size: 14px;
  line-height: 1.47;
}
.case-article__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 19px;
  border-top: 1px solid rgba(182,224,245,.16);
}
.case-article__metric {
  color: #8ce2ff;
  font-size: 12px;
  font-weight: 820;
}
.case-article__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}
.case-article__link:after {
  content: "→";
  font-size: 17px;
  line-height: 1;
  transition: transform .2s ease;
}
.case-article:hover .case-article__link:after {
  transform: translateX(4px);
}
.cases-editorial__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  color: #bce8ff;
  font-size: 14px;
  font-weight: 820;
}
.cases-editorial__all:after {
  content: "→";
  font-size: 18px;
}
.client-proof {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  background: radial-gradient(circle at 10% 10%,rgba(88,182,233,.16),transparent 28%),radial-gradient(circle at 91% 83%,rgba(79,171,226,.14),transparent 29%),linear-gradient(135deg,#eaf5ff 0%,#fbfdff 54%,#e8f4ff 100%);
}
.client-proof:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,#a6d9f0 29%,#1689cf 50%,#a6d9f0 71%,transparent);
}
.client-proof .container {
  position: relative;
  z-index: 1;
}
.cases-editorial {
  padding: 0;
  background: transparent;
  color: #172842;
}
.cases-editorial:before {
  display: none;
}
.cases-editorial__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
}
.cases-editorial__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #137abd;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cases-editorial__eyebrow:before {
  content: "";
  width: 25px;
  height: 1px;
  background: #20a7df;
}
.cases-editorial h2 {
  max-width: 680px;
  margin: 0;
  color: #142944;
  font-size: clamp(34px,3.25vw,46px);
  font-weight: 780;
  letter-spacing: -.052em;
  line-height: 1.04;
}
.cases-editorial__head>p {
  max-width: 355px;
  margin: 0 0 3px;
  color: #5c718b;
  font-size: 16px;
  line-height: 1.47;
}
.case-articles {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 22px;
}
.case-article {
  display: flex;
  min-height: 412px;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 14px 32px rgba(24,75,117,.08);
  transition: transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.case-article:hover {
  background: #fff;
  box-shadow: 0 26px 51px rgba(21,79,125,.16);
  transform: translateY(-7px);
}
.case-article__image {
  position: relative;
  display: block;
  aspect-ratio: 16/8.9;
  overflow: hidden;
  background: linear-gradient(135deg,#0e4e80,#16a7d7);
}
.case-article__image:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(2,22,45,.5),transparent 59%),radial-gradient(circle at 78% 18%,rgba(191,239,255,.46),transparent 24%);
}
.case-article__image:after {
  content: "";
  position: absolute;
  right: -15%;
  bottom: -48%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(227,248,255,.48);
  border-radius: 50%;
  box-shadow: 0 0 0 27px rgba(227,248,255,.08);
}
.case-article__image--metal {
  background: linear-gradient(135deg,#123653,#197aa8);
}
.case-article__image--meat {
  background: linear-gradient(135deg,#153353,#118fbc);
}
.case-article__image span {
  position: absolute;
  z-index: 1;
  right: 17px;
  bottom: 14px;
  left: 17px;
  color: #fff;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: -.022em;
  line-height: 1.2;
}
.case-article__image em {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 15px;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(3,30,58,.38);
  color: #e1f5ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.case-article__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 22px 21px;
}
.case-article__body h3 {
  margin: 0 0 10px;
  color: #173552;
  font-size: 21px;
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1.1;
}
.case-article__body p {
  margin: 0;
  color: #60748d;
  font-size: 14px;
  line-height: 1.47;
}
.case-article__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 19px;
}
.case-article__metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #107cc0;
  font-size: 12px;
  font-weight: 820;
}
.case-article__metric:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg,#087ecf,#18addf);
  box-shadow: 0 0 0 5px rgba(14,139,208,.1);
}
.case-article__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0879bd;
  font-size: 13px;
  font-weight: 850;
}
.case-article__link:after {
  content: "→";
  font-size: 17px;
  line-height: 1;
  transition: transform .2s ease;
}
.case-article:hover .case-article__link:after {
  transform: translateX(4px);
}
.cases-editorial__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  color: #0879bd;
  font-size: 14px;
  font-weight: 820;
}
.cases-editorial__all:after {
  content: "→";
  font-size: 18px;
}



.proof {
  position: relative;
  margin-top: 82px;
  padding-top: 61px;
  background: transparent;
}
.proof:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(99,174,219,.42) 20%,rgba(19,137,205,.66) 50%,rgba(99,174,219,.42) 80%,transparent);
}
.proof__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 31px;
}
.proof__head h2 {
  max-width: 740px;
  margin: 0;
  color: #142944;
  font-size: clamp(34px,3.2vw,45px);
  font-weight: 780;
  letter-spacing: -.052em;
  line-height: 1.04;
}
.proof__head p {
  max-width: 340px;
  margin: 0 0 2px;
  color: #5b718d;
  font-size: 16px;
  line-height: 1.46;
}
.letter-gallery {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 12px;
  align-items: start;
}
.letter-item {
  min-width: 0;
}
.letter-thumb {
  position: relative;
  display: block;
  aspect-ratio: 7/10;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(145deg,#fff,#eaf5fd);
  box-shadow: 0 9px 20px rgba(23,70,111,.07);
  cursor: zoom-in;
  transition: .25s ease;
}
.letter-thumb:hover {
  z-index: 1;
  box-shadow: 0 18px 31px rgba(24,83,132,.16);
  transform: translateY(-5px);
}
.letter-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.letter-thumb:hover img {
  transform: scale(1.035);
}
/* .letter-thumb:after {
  content: "↗";
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(7,36,69,.68);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  transition: .2s ease;
} */
.letter-thumb:hover:after {
  opacity: 1;
  transform: translateY(0);
}
.letter-thumb__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg,#fff 0%,#f5fbff 100%);
  color: #376b95;
  text-align: center;
}
/* .letter-thumb__placeholder:before {
  content: "";
  display: block;
  width: 59%;
  height: 12px;
  margin: 10px auto 12px;
  border-radius: 2px;
  background: linear-gradient(90deg,#bddeef,#e8f5fc);
} */
.letter-thumb__placeholder:after {
  content: "";
  display: block;
  width: 74%;
  height: 55%;
  margin: 0 auto;
  background: repeating-linear-gradient(180deg,rgba(70,128,169,.32) 0 2px,transparent 2px 7px);
}
.letter-thumb__placeholder span {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 12px;
  left: 10px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}
.letter-caption {
  padding: 11px 3px 0;
}
.letter-caption strong {
  display: block;
  margin-bottom: 4px;
  color: #1a456b;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.letter-caption span {
  display: block;
  color: #647a93;
  font-size: 11px;
  line-height: 1.35;
}
.lightbox.is-open img
{
    margin:auto;
    max-width: 500px;
}


.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 28, 50, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}