/* Netsense services landing page. Loaded only on /services/. */
.services-page {
  background: var(--bg);
  color: var(--text);
}

.services-page h1,
.services-page h2,
.services-page h3,
.services-page p {
  margin-top: 0;
}

.services-page h2 {
  margin-bottom: 8px;
}

.services-page svg {
  flex: 0 0 auto;
}

.services-kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  text-transform: lowercase;
}

.services-hero {
  padding: 38px 0 24px;
  border-bottom: 1px solid var(--line);
}

.services-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  gap: 86px;
  align-items: center;
  min-height: 355px;
}

.services-hero__copy h1 {
  max-width: 610px;
  margin: 0 0 18px;
  font-size: clamp(44px, 4.1vw, 62px);
  line-height: 1.01;
  letter-spacing: -.045em;
  font-weight: 650;
}

.services-hero__copy h1 span {
  color: var(--green);
}

.services-hero__copy p {
  max-width: 520px;
  margin-bottom: 22px;
  color: #c1c6c7;
  font-size: 16px;
  line-height: 1.55;
}

.services-hero__copy .button {
  min-width: 205px;
}

.services-hero__nav {
  display: grid;
  align-content: center;
  border-top: 1px solid var(--line);
}
.services-hero__nav .services-hero__nav-item {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 24px;
  gap: 17px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.services-hero__nav-content {display: grid; min-width: 0; gap: 6px;}
.services-hero__nav-label {font-size: 17px; line-height: 1.25; font-weight: 650;}
.services-hero__nav-related {font-size: 12px; line-height: 1.45; color: var(--muted); font-weight: 400;}
.services-hero__nav .services-hero__nav-item > svg {
  width: 20px; height: 20px; color: var(--green); justify-self: end;
}
.services-hero__nav .services-hero__nav-item:hover .services-hero__nav-label {color: var(--green);}
.services-hero__nav .services-hero__nav-item:focus-visible {outline: 2px solid var(--green); outline-offset: -2px;}
.services-section[id], .service-column[id], .ai-services[id], .additional-services[id] {scroll-margin-top: 96px;}

.services-section {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.services-section__head {
  margin-bottom: 18px;
}

.services-section__head p,
.service-column > header p,
.services-platforms__intro p,
.services-contact__copy p {
  color: var(--muted);
}

.services-section__head p {
  margin: 0;
  font-size: 14px;
}

.build-table,
.service-column,
.ai-services,
.additional-services {
  border: 1px solid var(--line);
  background: rgba(9, 22, 28, .46);
}

.build-row {
  min-height: 126px;
  display: grid;
  grid-template-columns: 30% 35% 35%;
  border-bottom: 1px solid var(--line);
}

.build-row:last-child {
  border-bottom: 0;
}

.build-row > * {
  min-width: 0;
}

.build-row__lead {
  padding: 20px 22px;
  border-right: 1px solid var(--line);
}

.build-row__lead h3,
.build-option h3 {
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.05;
}

.build-row__lead p,
.build-option p,
.build-row__description {
  margin: 0;
  color: #adb5b7;
  font-size: 13px;
  line-height: 1.45;
}

.build-option {
  position: relative;
  padding: 18px 48px 18px 24px;
  border-right: 1px solid var(--line);
}

.build-option:last-child {
  border-right: 0;
}

.build-option__label {
  display: block;
  margin-bottom: 3px;
  color: #9fa8aa;
  font-size: 11px;
  text-transform: uppercase;
}

.build-option strong,
.build-price strong,
.build-b2b__price strong,
.service-list__price strong,
.integration-list strong,
.ai-stage__title b,
.additional-services strong {
  color: var(--green);
}

.build-option strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.build-option > svg,
.build-price > svg,
.build-b2b__arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  color: var(--green);
  transform: translateY(-50%);
}

.build-row--analysis {
  min-height: 72px;
  grid-template-columns: 31% 45% 24%;
  align-items: stretch;
}

.build-row__lead--icon {
  display: flex;
  align-items: center;
  gap: 18px;
}

.build-row__lead--icon h3 {
  margin: 0;
  font-size: 18px;
}

.build-row__description {
  display: flex;
  align-items: center;
  padding: 16px 22px;
  border-right: 1px solid var(--line);
}

.build-price {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 48px 16px 24px;
}

.services-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--green);
  border: 1px solid rgba(105, 228, 41, .45);
}

.services-icon svg {
  width: 22px;
  height: 22px;
}

.build-row--b2b {
  grid-template-columns: 30% 9% 1fr 48px;
  align-items: center;
}

.build-b2b__mark {
  color: var(--green);
  justify-self: center;
}

.build-b2b__mark svg {
  width: 46px;
  height: 46px;
}

.build-b2b__price {
  padding: 18px 20px;
}

.build-b2b__price strong,
.build-b2b__price b {
  display: block;
}

.build-b2b__price strong {
  font-size: 19px;
}

.build-b2b__price b {
  margin-top: 2px;
  font-size: 15px;
}

.build-b2b__arrow {
  position: static;
  transform: none;
}

.services-section--columns {
  padding-top: 16px;
}

.services-columns {
  display: grid;
  grid-template-columns: 1.02fr 1fr 1fr;
  gap: 8px;
}

.service-column {
  padding: 18px 12px 12px;
}

.service-column > header {
  padding: 0 2px 10px;
}

.service-column > header h2 {
  font-size: 27px;
}

.service-column > header p {
  margin: 0;
  font-size: 12px;
}

.service-column--integrations > header p strong {
  color: #dce1e2;
}

.service-list {
  display: grid;
}

.service-list--boxed {
  gap: 6px;
}

.service-list__item {
  min-height: 96px;
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 22px;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  border: 1px solid var(--line);
}

.service-list__item h3,
.integration-list h3 {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.25;
}

.service-list__item p,
.integration-list p {
  margin: 0;
  color: #a6afb1;
  font-size: 11px;
  line-height: 1.35;
}

.service-list__price {
  min-width: 104px;
  text-align: right;
  font-size: 11px;
}

.service-list__price strong,
.service-list__price small {
  display: block;
}

.service-list__price small {
  margin-top: 4px;
  color: #858f92;
  font-size: 9px;
}

.service-list__arrow {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.service-list__item .services-icon {
  border: 0;
  width: 38px;
  height: 38px;
}

.service-list--compact .service-list__item {
  min-height: 112px;
}

.integration-list {
  display: grid;
}

.integration-list article {
  min-height: 82px;
  position: relative;
  padding: 8px 44px 8px 4px;
}

.integration-list article + article {
  border-top: 1px solid rgba(37, 51, 58, .45);
}

.integration-list strong {
  position: absolute;
  right: 22px;
  top: 52%;
  font-size: 11px;
  transform: translateY(-50%);
}

.integration-list > article > svg {
  position: absolute;
  right: 0;
  top: 52%;
  width: 18px;
  color: var(--green);
  transform: translateY(-50%);
}

.integration-line {
  position: absolute;
  left: 43%;
  top: 55%;
  width: 34px;
  border-top: 1px solid #c7cdd0;
}

.integration-line::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
}

.integration-line--mid { width: 48px; }
.integration-line--long { width: 62px; }
.integration-line--max { width: 76px; }

.services-section--ai-additional {
  padding-top: 12px;
  background: rgba(9, 22, 28, .72);
}

.ai-additional-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 8px;
}

.ai-services {
  min-width: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 8px 18px;
}

.ai-services__intro {
  grid-row: 1 / 3;
}

.ai-services__intro h2,
.additional-services h2,
.services-platforms h2,
.services-contact h2 {
  font-size: 29px;
}

.ai-services__intro p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-stage {
  min-width: 0;
}

.ai-stage--two {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.ai-stage__title {
  display: flex;
  gap: 4px;
  align-items: baseline;
  margin-bottom: 7px;
  font-size: 11px;
}

.ai-stage__title strong {
  color: var(--green);
}

.ai-stage__title b {
  margin-left: auto;
}

.ai-stage__steps {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-stage__steps span {
  min-height: 58px;
  min-width: 74px;
  padding: 7px 8px;
  border: 1px solid #435057;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 10px;
}

.ai-stage__steps span svg {
  width: 21px;
  height: 21px;
  margin-bottom: 4px;
}

.ai-stage__steps i {
  color: var(--green);
  font-style: normal;
}

.ai-stage__steps--four span {
  min-height: 44px;
  flex: 1;
}

.additional-services {
  padding: 16px 0 0;
}

.additional-services header {
  padding: 0 16px 10px;
}

.additional-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.additional-services__grid article {
  position: relative;
  min-height: 106px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.additional-services__grid article:nth-child(3n) {
  border-right: 0;
}

.additional-services__grid .services-icon {
  width: 28px;
  height: 28px;
  border: 0;
}

.additional-services__grid .services-icon svg {
  width: 21px;
  height: 21px;
}

.additional-services__grid h3 {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.25;
}

.additional-services__grid strong,
.additional-services__grid small {
  display: block;
  font-size: 10px;
}

.additional-services__grid small {
  margin-top: 3px;
  color: #8e989b;
}

.additional-services__arrow {
  display: none;
}

.services-platforms {
  padding-top: 12px;
}

.services-platforms__grid {
  min-height: 190px;
  display: grid;
  grid-template-columns: 1.2fr .85fr .85fr 1.05fr;
  align-items: stretch;
  border: 0;
  background: transparent;
}

.services-platforms__grid > * {
  padding: 20px;
  min-width: 0;
}

.services-platforms__grid > * + * {
  border-left: 1px solid var(--line);
}

.services-platforms__intro p,
.platform-card p,
.platform-benefits {
  font-size: 12px;
  line-height: 1.5;
}

.platform-card__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}

.platform-card__logo {display:block; max-width:100%; width:auto; object-fit:contain; object-position:left center;}
.platform-card__logo--bitrix {width:185px; height:39px;}
.platform-card__logo--aspro {width:155px; height:28px;}

.platform-card p {
  margin: 0;
  color: #bbc2c4;
}

.platform-card p > svg {
  width: 20px;
  height: 20px;
  margin-right: 7px;
  color: var(--green);
  vertical-align: middle;
}

.platform-card h3 {
  margin-bottom: 7px;
  font-size: 16px;
  line-height: 1.2;
}

.platform-benefits {
  list-style: none;
  margin: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  color: #bcc3c5;
}

.platform-benefits li {
  position: relative;
  padding-left: 20px;
}

.platform-benefits li::before {
  content: "⊙";
  position: absolute;
  left: 0;
  color: var(--green);
}


.services-contact {
  padding: 18px 0 28px;
}

.services-contact__layout {
  display: grid;
  grid-template-columns: .62fr 1fr;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.services-contact__copy {
  padding: 4px 54px 4px 0;
}

.services-contact__copy p {
  max-width: 330px;
  font-size: 13px;
  line-height: 1.55;
}

.services-contact__icon {
  width: 78px;
  height: 78px;
  margin-top: 18px;
  color: rgba(255,255,255,.12);
}

/* Form fields/buttons themselves are intentionally NOT restyled here.
   They use the shared template.css .contact-form / .form-row / .file-control /
   .consent / .form-submit styles, exactly like the homepage form. */
.services-contact .contact-form {
  align-self: start;
}

@media (max-width: 1180px) {
  .services-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 42px;
  }

  .services-columns {
    grid-template-columns: 1fr;
  }

  .service-column {
    padding: 18px;
  }

  .service-list--boxed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-column--integrations .integration-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .integration-list article {
    border: 1px solid var(--line) !important;
    padding: 14px 44px 14px 14px;
  }

  .integration-list strong {
    position: static;
    display: block;
    margin-top: 10px;
    transform: none;
  }

  .integration-line {
    display: none;
  }

  .ai-additional-grid {
    grid-template-columns: 1fr;
  }

  .services-platforms__grid {
    grid-template-columns: 1fr 1fr;
  }

  .services-platforms__grid > *:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .services-platforms__grid > *:nth-child(4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 767px) {
  .services-page {
    font-size: 14px;
  }

  .services-hero {
    padding: 26px 0 18px;
  }

  .services-hero__grid {
    display: block;
    min-height: 0;
  }

  .services-kicker {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .services-hero__copy h1 {
    margin-bottom: 14px;
    font-size: clamp(34px, 10vw, 40px);
    line-height: 1.04;
  }

  .services-hero__copy p {
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.55;
  }

  .services-hero__copy .button {
    min-width: 0;
    min-height: 40px;
  }

  .services-hero__nav {
    margin-top: 20px;
  }

  .services-hero__nav .services-hero__nav-item {
    min-height: 65px;
    grid-template-columns: minmax(0,1fr) 20px;
    gap: 10px;
    padding: 12px 0;
  }
  .services-hero__nav-label {font-size: 14px;}
  .services-hero__nav-related {font-size: 11px;}
  .services-section[id], .service-column[id], .ai-services[id], .additional-services[id] {scroll-margin-top: 68px;}

  .services-section {
    padding: 26px 0;
  }

  .services-section__head {
    margin-bottom: 14px;
  }

  .services-section__head h2,
  .service-column > header h2,
  .ai-services__intro h2,
  .additional-services h2,
  .services-platforms h2,
  .services-contact h2 {
    font-size: 27px;
    line-height: 1.06;
  }

  .services-section__head p,
  .service-column > header p,
  .ai-services__intro p,
  .services-platforms__intro p,
  .services-contact__copy p {
    font-size: 12px;
  }

  .build-table,
  .service-column,
  .ai-services,
  .additional-services {
    background: rgba(9, 22, 28, .36);
  }

  .build-table {
    border: 0;
    background: transparent;
  }

  .build-row {
    display: block;
    min-height: 0;
    margin-bottom: 12px;
    border: 1px solid var(--line);
  }

  .build-row__lead {
    padding: 14px;
    border-right: 0;
  }

  .build-row__lead h3 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.1;
  }

  .build-row__lead p,
  .build-option p,
  .build-row__description {
    font-size: 12px;
  }

  .build-option {
    min-height: 112px;
    padding: 14px 42px 14px 14px;
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .build-option__label {
    font-size: 12px;
    text-transform: none;
    color: var(--text);
    font-weight: 700;
  }

  .build-option strong {
    font-size: 14px;
  }

  .build-row--analysis {
    min-height: 122px;
    position: relative;
  }

  .build-row--analysis .build-row__lead {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
  }

  .build-row--analysis .services-icon {
    width: 28px;
    height: 28px;
  }

  .build-row--analysis .services-icon svg {
    width: 17px;
    height: 17px;
  }

  .build-row--analysis .build-row__description {
    display: block;
    padding: 0 42px 0 52px;
    border: 0;
  }

  .build-row--analysis .build-price {
    padding: 8px 42px 14px 52px;
  }

  .build-row--analysis .build-price svg {
    right: 14px;
  }

  .build-row--b2b {
    display: grid;
    grid-template-columns: 1fr 28px;
    gap: 0;
    padding: 14px;
  }

  .build-row--b2b .build-row__lead {
    grid-column: 1 / -1;
    padding: 0;
  }

  .build-b2b__mark {
    display: none;
  }

  .build-b2b__price {
    padding: 10px 0 0;
  }

  .build-b2b__price strong {
    font-size: 18px;
  }

  .build-b2b__arrow {
    align-self: end;
    width: 20px;
  }

  .services-section--columns {
    padding-top: 0;
  }

  .services-columns {
    display: block;
  }

  .service-column {
    padding: 22px 0 26px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
  }

  .service-column > header {
    padding: 0 0 14px;
  }

  .service-list--boxed,
  .service-column--integrations .integration-list {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--line);
  }

  .service-list__item,
  .service-list--compact .service-list__item {
    min-height: 118px;
    grid-template-columns: 32px minmax(0, 1fr) 22px;
    grid-template-areas:
      "icon copy arrow"
      "icon price arrow";
    align-items: start;
    gap: 7px 9px;
    padding: 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-list__item:last-child {
    border-bottom: 0;
  }

  .service-list__item .services-icon {
    grid-area: icon;
    width: 28px;
    height: 28px;
    border: 1px solid #52615a;
  }

  .service-list__item .services-icon svg {
    width: 17px;
    height: 17px;
  }

  .service-list__item > div:nth-of-type(1) {
    grid-area: copy;
  }

  .service-list__item h3,
  .integration-list h3 {
    font-size: 15px;
  }

  .service-list__item p,
  .integration-list p {
    font-size: 12px;
  }

  .service-list__price {
    grid-area: price;
    min-width: 0;
    text-align: left;
    font-size: 13px;
  }

  .service-list__arrow {
    grid-area: arrow;
    align-self: center;
    justify-self: end;
    width: 20px;
  }

  .integration-list article {
    min-height: 104px;
    padding: 14px 42px 14px 14px;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .integration-list article:last-child {
    border-bottom: 0 !important;
  }

  .integration-list strong {
    font-size: 13px;
  }

  .integration-list > article > svg {
    right: 14px;
    width: 20px;
  }

  .ai-additional-grid {
    display: block;
  }

  .ai-services,
  .additional-services {
    border: 0;
    background: transparent;
  }

  .ai-services {
    padding: 22px 0 26px;
    display: block;
    border-bottom: 1px solid var(--line);
  }

  .ai-services__intro {
    margin-bottom: 14px;
  }

  .ai-stage {
    padding: 14px;
    border: 1px solid var(--line);
    background: rgba(9, 22, 28, .36);
  }

  .ai-stage + .ai-stage {
    margin-top: 12px;
  }

  .ai-stage--two {
    border-top: 1px solid var(--line);
  }

  .ai-stage__title {
    flex-wrap: wrap;
    font-size: 12px;
  }

  .ai-stage__title b {
    width: 100%;
    margin: 0;
    font-size: 14px;
  }

  .ai-stage__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ai-stage__steps i {
    display: none;
  }

  .ai-stage__steps span {
    min-width: 0;
    min-height: 82px;
    font-size: 11px;
  }

  .additional-services {
    padding: 24px 0 0;
  }

  .additional-services header {
    padding: 0 0 14px;
  }

  .additional-services__grid {
    grid-template-columns: 1fr;
    border: 1px solid var(--line);
  }

  .additional-services__grid article {
    min-height: 78px;
    grid-template-columns: 30px 1fr 20px;
    align-items: center;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .additional-services__grid article:last-child {
    border-bottom: 0;
  }

  .additional-services__grid h3 {
    margin-bottom: 6px;
    font-size: 14px;
  }

  .additional-services__grid strong {
    font-size: 13px;
  }

  .additional-services__grid small {
    font-size: 10px;
  }

  .additional-services__arrow {
    display: block;
    width: 20px;
    color: var(--green);
  }

  .services-platforms {
    padding-top: 26px;
  }

  .services-platforms__grid {
    display: block;
    border: 0;
    background: transparent;
  }

  .services-platforms__grid > * {
    padding: 0;
    border: 0 !important;
  }

  .services-platforms__intro {
    margin-bottom: 16px;
  }

  .platform-card {
    padding: 16px !important;
    border: 1px solid var(--line) !important;
    background: rgba(9, 22, 28, .36);
  }

  .platform-card + .platform-card {
    margin-top: 12px;
  }

  .platform-card__brand {
    margin-bottom: 12px;
  }

  .platform-card h3 {
    font-size: 17px;
  }

  .platform-benefits {
    margin-top: 14px !important;
    padding: 16px !important;
    border: 1px solid var(--line) !important;
  }




  .services-contact {
    padding: 26px 0;
  }

  .services-contact__layout {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .services-contact__copy {
    padding: 0 0 14px;
  }

  .services-contact__copy p {
    max-width: none;
  }

  .services-contact__icon {
    display: none;
  }

  /* Shared form component stays shared. Only the page layout changes above. */
  .services-contact .contact-form {
    padding-left: 0;
    border-left: 0;
  }
}

/* ==========================================================================
   Development of new sites — flat divider layout
   Desktop/tablet: no outer card/grid frame, only internal separators.
   Mobile keeps its existing stacked-card treatment for now.
   ========================================================================== */
@media (min-width: 768px) {
  .services-section--build {
    background: rgba(9, 22, 28, .72);
  }

  .services-section--build .build-table {
    border: 0;
    background: transparent;
  }

  .services-section--build .build-row {
    background: transparent;
  }
}

/* ==========================================================================
   Services page refinement v3 — unified desktop grids and divider-only columns
   ========================================================================== */
@media (min-width: 901px) {
  /* Development table: every row uses the same three-column grid, so all
     vertical separators form one continuous table. */
  .services-section--build .build-row,
  .services-section--build .build-row--analysis {
    grid-template-columns: 30% 35% 35%;
  }

  .services-section--build .build-row--analysis .build-row__lead {
    grid-column: 1;
  }

  .services-section--build .build-row--analysis .build-row__description {
    grid-column: 2;
  }

  .services-section--build .build-row--analysis .build-price {
    grid-column: 3;
  }

  /* Support / Integrations / Bitrix24: one large three-column composition.
     No outer cards; only shared vertical separators. */
  .services-section--columns {
    padding-top: 0;
  }

  .services-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .service-column {
    border: 0;
    background: transparent;
    padding: 0 18px 0;
  }

  .service-column:first-child {
    padding-left: 0;
  }

  .service-column:last-child {
    padding-right: 0;
  }

  .service-column + .service-column {
    border-left: 1px solid var(--line);
  }

  /* One common horizontal baseline under all three headings. */
  .service-column > header {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 14px 16px;
    border-bottom: 1px solid var(--line);
  }

  .service-column:first-child > header {
    padding-left: 0;
  }

  .service-column:last-child > header {
    padding-right: 0;
  }

  .service-column > header h2 {
    margin-bottom: 10px;
  }

  /* Support and Bitrix24: internal rows separated only by horizontal rules. */
  .service-list--boxed {
    gap: 0;
  }

  .service-list--boxed .service-list__item {
    min-height: 108px;
    border: 0;
    background: transparent;
    padding: 14px 10px;
  }

  .service-list--boxed .service-list__item + .service-list__item {
    border-top: 1px solid var(--line);
  }

  .service-column:first-child .service-list__item {
    padding-left: 0;
  }

  .service-column:last-child .service-list__item {
    padding-right: 0;
  }

  .service-list--compact .service-list__item {
    min-height: 108px;
  }

  /* Integrations: replace fragile absolute positioning with a real grid.
     Decorative connector flexes between text and price and can no longer
     collide with either one. */
  .integration-list article {
    min-height: 108px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(42px, .55fr) auto 20px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-content: center;
    align-items: center;
    padding: 14px 0;
  }

  .integration-list article + article {
    border-top: 1px solid var(--line);
  }

  .integration-list h3 {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 5px;
  }

  .integration-list p {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .integration-list .integration-line,
  .integration-list .integration-line--mid,
  .integration-list .integration-line--long,
  .integration-list .integration-line--max {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 100%;
    min-width: 42px;
    border-top: 1px solid #c7cdd0;
  }

  .integration-list .integration-line::after {
    right: -1px;
    top: -2px;
  }

  .integration-list strong {
    position: static;
    grid-column: 3;
    grid-row: 1 / 3;
    transform: none;
    white-space: nowrap;
    text-align: right;
    font-size: 11px;
  }

  .integration-list > article > svg {
    position: static;
    grid-column: 4;
    grid-row: 1 / 3;
    transform: none;
    width: 18px;
    justify-self: end;
  }
}

/* ==========================================================================
   Services page refinement v4 — desktop alignment, typography and AI/additional
   ========================================================================== */
@media (min-width: 901px) {
  /* B2B row keeps the same 30/35/35 grid as the whole development block.
     The CTA arrow belongs to the right edge of the row, not to an implicit
     fourth grid track. */
  .services-section--build .build-row--b2b {
    position: relative;
    grid-template-columns: 30% 35% 35%;
  }

  .services-section--build .build-row--b2b .build-row__lead {
    grid-column: 1;
  }

  .services-section--build .build-b2b__mark {
    grid-column: 2;
    justify-self: center;
    align-self: center;
  }

  .services-section--build .build-b2b__price {
    grid-column: 3;
    align-self: center;
    padding-right: 58px;
  }

  .services-section--build .build-b2b__arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
  }

  /* Support / Integrations / Bitrix24: restore readable desktop scale while
     preserving the divider-only composition. */
  .service-column {
    padding-inline: 24px;
  }

  .service-column:first-child {
    padding-left: 0;
  }

  .service-column:last-child {
    padding-right: 0;
  }

  .service-column > header {
    min-height: 132px;
    padding: 24px 18px 18px;
  }

  .service-column:first-child > header {
    padding-left: 0;
  }

  .service-column:last-child > header {
    padding-right: 0;
  }

  .service-column > header h2 {
    font-size: 30px;
    line-height: 1.12;
  }

  .service-column > header p {
    font-size: 14px;
    line-height: 1.5;
  }

  .service-list--boxed .service-list__item,
  .service-list--compact .service-list__item,
  .integration-list article {
    min-height: 122px;
  }

  .service-list--boxed .service-list__item {
    padding-block: 16px;
  }

  .service-list__item h3,
  .integration-list h3 {
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 1.28;
  }

  .service-list__item p,
  .integration-list p {
    font-size: 13px;
    line-height: 1.45;
  }

  .service-list__price {
    min-width: 122px;
    font-size: 13px;
  }

  .service-list__price small {
    font-size: 11px;
  }

  .integration-list article {
    grid-template-columns: minmax(0, 1fr) minmax(54px, .55fr) auto 22px;
    column-gap: 12px;
    padding: 16px 0;
  }

  .integration-list strong {
    font-size: 13px;
  }

  .integration-list > article > svg {
    width: 20px;
    height: 20px;
  }

  /* AI + Additional services: one two-column section separated only by one
     shared vertical rule. Neither half is an outlined card. */
  .services-section--ai-additional {
    padding-top: 0;
  }

  .ai-additional-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 0;
  }

  .ai-services,
  .additional-services {
    border: 0;
    background: transparent;
  }

  .ai-services {
    padding: 24px 26px 24px 0;
    grid-template-columns: 290px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 18px 28px;
  }

  .additional-services {
    padding: 24px 0 24px 26px;
    border-left: 1px solid var(--line);
  }

  .ai-services__intro {
    grid-column: 1;
    grid-row: 1;
  }

  .ai-services__intro h2,
  .additional-services h2 {
    font-size: 30px;
    line-height: 1.12;
  }

  .ai-services__intro p {
    max-width: 270px;
    font-size: 14px;
    line-height: 1.5;
  }

  .ai-stage--one {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  /* Stage 2 starts a fresh full-width row from the beginning of the AI block. */
  .ai-stage--two {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .ai-stage__title {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.35;
  }

  .ai-stage__steps {
    gap: 8px;
  }

  .ai-stage__steps span {
    min-height: 72px;
    min-width: 92px;
    padding: 10px 11px;
    font-size: 12px;
    line-height: 1.3;
  }

  .ai-stage__steps span svg {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
  }

  .ai-stage__steps i {
    font-size: 18px;
  }

  .ai-stage__steps--four span {
    min-height: 58px;
  }

  /* Additional services: internal separators only. The grid is inset from
     the outer edges so it reads as grouped content, not as a bordered table. */
  .additional-services header {
    padding: 0 20px 14px;
  }

  .additional-services__grid {
    margin: 8px 20px 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .additional-services__grid article {
    min-height: 118px;
    padding: 14px 16px;
    border: 0;
  }

  .additional-services__grid article:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }

  .additional-services__grid article:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--line);
  }

  .additional-services__grid .services-icon {
    width: 32px;
    height: 32px;
  }

  .additional-services__grid .services-icon svg {
    width: 23px;
    height: 23px;
  }

  .additional-services__grid h3 {
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.3;
  }

  .additional-services__grid strong,
  .additional-services__grid small {
    font-size: 12px;
    line-height: 1.35;
  }

  .additional-services__grid small {
    margin-top: 5px;
  }
}

/* ==========================================================================
   Services page refinement v5 — integration pricing, AI containment and spacing
   ========================================================================== */
@media (min-width: 901px) {
  /* Integrations: use the same reading pattern as the neighbouring columns.
     Text takes the available width, then price and arrow. No decorative
     connector line, so narrow desktop widths do not squeeze the copy. */
  .integration-list article {
    grid-template-columns: minmax(0, 1fr) auto 22px;
    grid-template-rows: auto auto;
    column-gap: 14px;
  }

  .integration-list h3,
  .integration-list p {
    grid-column: 1;
  }

  .integration-list .integration-line,
  .integration-list .integration-line--mid,
  .integration-list .integration-line--long,
  .integration-list .integration-line--max {
    display: none;
  }

  .integration-list strong {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
    white-space: nowrap;
    text-align: right;
  }

  .integration-list > article > svg {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
  }

  /* AI: flexible step boxes are allowed to shrink inside the AI column.
     This prevents stage 1 from crossing the divider at intermediate desktop
     widths while preserving the desktop composition. */
  .ai-stage__steps {
    min-width: 0;
  }

  .ai-stage__steps span {
    min-width: 0;
    flex: 1 1 0;
  }

  .ai-stage__steps i {
    flex: 0 0 auto;
  }

  .ai-stage--one,
  .ai-stage--two {
    min-width: 0;
  }

  /* Stage 2 separator runs exactly from the left edge of the AI half to the
     central divider. The right negative margin compensates the AI inner gap. */
  .ai-stage--two {
    margin-right: -26px;
    padding-right: 26px;
  }

  /* Additional services: use the same outer inset logic as the AI half.
     Remove the second layer of horizontal margins that made the right column
     look noticeably narrower. */
  .additional-services header {
    padding-left: 0;
    padding-right: 0;
  }

  .additional-services__grid {
    margin-left: 0;
    margin-right: 0;
  }

  .additional-services__grid article {
    padding-left: 12px;
    padding-right: 12px;
  }

  .additional-services__grid article:nth-child(3n + 1) {
    padding-left: 0;
  }

  .additional-services__grid article:nth-child(3n) {
    padding-right: 0;
  }
}

/* At narrower desktop widths keep stage 1 compact without changing the
   content order or introducing a duplicate mobile block. */
@media (min-width: 901px) and (max-width: 1320px) {
  .ai-services {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px 20px;
  }

  .ai-stage__steps {
    gap: 5px;
  }

  .ai-stage__steps span {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 11px;
  }

  .ai-stage__steps i {
    font-size: 16px;
  }
}


/* ==========================================================================
   Refinement v6 — alternating band, divider-only platforms, shared contact CTA
   ========================================================================== */
@media (min-width: 768px) {
  .services-section--ai-additional {
    background: rgba(9, 22, 28, .72);
  }

  .services-platforms__grid {
    border: 0;
    background: transparent;
  }

  .services-contact__layout {
    border: 0;
    background: transparent;
  }
}

@media (min-width: 901px) {
  .services-contact {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .services-contact__layout {
    grid-template-columns: .62fr 1fr;
    padding: 0;
  }

  .services-contact__copy {
    padding: 4px 54px 4px 0;
  }
}


/* ==========================================================================
   Service detail links — enabled only for DETAIL_ENABLED items
   ========================================================================== */
.service-detail-target {
  position: relative;
  cursor: pointer;
  transition: background-color .18s ease;
}

.service-detail-target:hover {
  background-color: rgba(106, 255, 45, .035);
}

.service-detail-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  border: 0;
}

.service-detail-hit:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.ai-stage__arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-left: 4px;
  color: var(--green);
}

@media (min-width: 768px) {
  .additional-services__grid .service-detail-target .additional-services__arrow {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: block;
    width: 18px;
    height: 18px;
    color: var(--green);
  }
}

/* Step 40 — unify services-page hero and tighten sparse commercial blocks. */
.services-page .services-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #aeb7ba;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.services-page .services-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--green);
}

@media (min-width: 901px) {
  .services-section--build .build-row {
    min-height: 112px;
  }

  .services-section--build .build-option--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .services-section--build .build-option--compact .build-option__label,
  .services-section--build .build-option--compact strong {
    grid-column: 1;
  }

  .services-section--build .build-option--compact > svg {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    transform: none;
  }

  .services-section--build .build-row--b2b {
    grid-template-columns: 30% 70%;
  }

  .services-section--build .build-b2b__offer {
    grid-column: 2;
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 20px;
    padding: 18px 18px 18px 24px;
  }

  .services-section--build .build-b2b__mark {
    grid-column: 1;
    justify-self: start;
  }

  .services-section--build .build-b2b__price {
    grid-column: 2;
    padding: 0;
  }

  .services-section--build .build-b2b__price span {
    display: block;
    margin-bottom: 5px;
    color: #9fa8aa;
    font-size: 14px;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .services-section--build .build-b2b__arrow {
    position: static;
    grid-column: 3;
    width: 22px;
    height: 22px;
    justify-self: end;
    transform: none;
  }
}

.services-page .additional-services__grid article > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  gap: 3px;
}

.services-page .additional-services__grid h3 {
  margin-bottom: 2px;
}

.services-page .additional-services__grid strong {
  margin-top: 0;
}

.services-page .platform-card--bitrix .platform-card__summary {
  margin-top: 14px;
  color: #aeb7ba;
}

.services-page .platform-card__mini-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  color: #bbc2c4;
  font-size: 14px;
  line-height: 1.45;
}

.services-page .platform-card__mini-list li {
  position: relative;
  padding-left: 18px;
}

.services-page .platform-card__mini-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

@media (max-width: 900px) {
  .services-section--build .build-b2b__offer {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    gap: 12px;
    align-items: center;
  }

  .services-section--build .build-b2b__price span {
    display: block;
    margin-bottom: 4px;
    color: #9fa8aa;
    font-size: 13px;
    line-height: 1.35;
    text-transform: uppercase;
  }
}

@media (max-width: 900px) {
  .services-section--build .build-row--b2b {
    display: block;
  }

  .services-section--build .build-b2b__offer {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .services-section--build .build-b2b__mark {
    display: none;
  }
}

/* STEP212B: adaptive counts; existing 3-column / 2-option baseline remains untouched. */
@media (min-width: 901px) {
  .services-page .services-columns--variable {
    grid-template-columns: repeat(var(--ns-section-columns, 1), minmax(0, 1fr));
  }
  .services-page .build-row--option-count {
    grid-template-columns: 30% repeat(var(--ns-option-count, 1), minmax(0, 1fr));
  }
  .services-page .ai-additional-grid--single { grid-template-columns: minmax(0, 1fr); }
  .services-page .additional-services__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .services-page .additional-services__grid > article { grid-column: span 2; }
  .services-page .additional-services__grid--tail-1 > article:last-child { grid-column: span 6; border-right: 0; }
  .services-page .additional-services__grid--tail-2 > article:nth-last-child(-n + 2) { grid-column: span 3; }
  .services-page .additional-services__grid--tail-2 > article:last-child { border-right: 0; }
}
.services-page .ai-services__intro { grid-row: 1 / span var(--ns-ai-count, 2); }