/* =========================================================
   DMS WORKS — PREMIUM HERO
========================================================= */

:root {
  --color-white: #ffffff;
  --color-bg: #f2f5f7;
  --color-surface: #ffffff;
  --color-surface-blue: #edf8fc;
  --color-blue-soft: #b9e5f4;
  --color-blue: #27a5d3;
  --color-blue-dark: #147b9f;
  --color-blue-deep: #0c5b79;
  --color-text: #11171b;
  --color-text-secondary: #52636c;
  --color-text-muted: #7a8b93;
  --color-border: rgba(19, 82, 108, 0.12);
  --color-border-strong: rgba(20, 123, 159, 0.2);
  --shadow-header: 0 14px 40px rgba(24, 63, 80, 0.07);
  --shadow-card: 0 24px 70px rgba(24, 63, 80, 0.1);
  --shadow-button: 0 16px 34px rgba(18, 111, 152, 0.24);
  --radius-card: 34px;
  --radius-panel: 26px;
  --radius-pill: 999px;
  --container-width: 1390px;
  --container-padding: 24px;
  --header-height: 96px;

  /*
   * Единая система круглых action-controls DMS WORKS.
   * Цвет и поверхность могут зависеть от сцены,
   * геометрия и масштаб — единые.
   */
  --round-arrow-size: 38px;
  --round-arrow-glyph-size: 18px;

  --transition-fast: 180ms ease;
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4 {
  margin-top: 0;
}

::selection {
  color: var(--color-text);
  background: var(--color-blue-soft);
}

.container {
  width: min(
    calc(100% - (var(--container-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
}

/* Buttons */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 8px 0 23px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.015em;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button:focus-visible {
  outline: 2px solid rgba(8, 82, 107, 0.42);
  outline-offset: 4px;
}

.site-nav__link:focus-visible,
.service-card:focus-visible,
.brand:focus-visible,
.menu-toggle:focus-visible {
  outline: 3px solid rgba(39, 165, 211, 0.24);
  outline-offset: 3px;
}

.button__arrow {
  position: relative;
  isolation: isolate;

  display: block;

  width: var(--round-arrow-size);
  height: var(--round-arrow-size);
  flex: 0 0 var(--round-arrow-size);

  border-radius: 50%;

  overflow: hidden;
  background-clip: padding-box;

  font-size: 0;
  line-height: 0;

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition:
    transform var(--transition-base),
    background-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base);
}

.button__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-55%, -50%);
}

.button__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translate(15%, -50%) rotate(45deg);
}

.button:hover .button__arrow {
  transform: translate3d(2px, 0, 0);
}

.button:active .button__arrow {
  transform: translate3d(1px, 0, 0);
}

.button--primary {
  border-color: rgba(5, 55, 73, 0.18);
  color: #ffffff;
  background: linear-gradient(135deg, #0f6b87 0%, #084d65 100%);
  box-shadow:
    0 9px 20px rgba(8, 77, 101, 0.16),
    0 2px 6px rgba(5, 55, 73, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.button--primary:hover {
  background: linear-gradient(135deg, #12738e 0%, #09536c 100%);
  box-shadow:
    0 12px 24px rgba(8, 77, 101, 0.19),
    0 3px 8px rgba(5, 55, 73, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.button--primary:active {
  background: linear-gradient(135deg, #0d627c 0%, #07485f 100%);
  box-shadow:
    0 5px 12px rgba(8, 77, 101, 0.14),
    0 1px 3px rgba(5, 55, 73, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.button--primary .button__arrow {
  color: #095872;
  background-color: #f7fbfc;
  background-image: none;
  box-shadow:
    inset 0 0 0 1px rgba(7, 72, 94, 0.1),
    0 3px 8px rgba(4, 48, 64, 0.09);
}

.button--primary:hover .button__arrow {
  background-color: #ffffff;
  background-image: none;
  box-shadow:
    inset 0 0 0 1px rgba(7, 72, 94, 0.11),
    0 4px 9px rgba(4, 48, 64, 0.11);
}

.button--primary:active .button__arrow {
  background-color: #f3f8fa;
  background-image: none;
  box-shadow:
    inset 0 0 0 1px rgba(7, 72, 94, 0.12),
    0 2px 5px rgba(4, 48, 64, 0.08);
}

.button--secondary {
  color: #173a48;
  background: linear-gradient(145deg, #ffffff 0%, #f7fafb 100%);
  border-color: rgba(12, 91, 121, 0.24);
  box-shadow:
    0 6px 16px rgba(19, 67, 86, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.button--secondary:hover {
  color: #0a526b;
  background: linear-gradient(145deg, #ffffff 0%, #f1f7f9 100%);
  border-color: rgba(12, 91, 121, 0.34);
  box-shadow:
    0 9px 20px rgba(19, 67, 86, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.button--secondary:active {
  color: #0a4d64;
  background: #f2f7f8;
  border-color: rgba(12, 91, 121, 0.3);
  box-shadow:
    0 4px 10px rgba(19, 67, 86, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.button--secondary .button__arrow {
  color: #0b607b;
  background: linear-gradient(145deg, #f2f7f9 0%, #e5eff2 100%);
  box-shadow: inset 0 0 0 1px rgba(12, 91, 121, 0.14);
}

.button--secondary:hover .button__arrow {
  color: #084e65;
  background: linear-gradient(145deg, #eef5f7 0%, #dfecef 100%);
  box-shadow: inset 0 0 0 1px rgba(12, 91, 121, 0.18);
}

.button--secondary:active .button__arrow {
  color: #07465b;
  background: #e1ecef;
  box-shadow: inset 0 0 0 1px rgba(12, 91, 121, 0.2);
}

/* Header */

.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  height: var(--header-height);
  padding-top: 18px;
  background: rgba(242, 245, 247, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0 18px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-header);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  color: var(--color-text);
}

.brand__logo-wrap {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 20px rgba(17, 20, 24, 0.15);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.brand:hover .brand__logo-wrap {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(17, 20, 24, 0.19);
}

.brand__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.1vw, 36px);
  margin-right: 30px;
  margin-left: auto;
}

.site-nav__link {
  position: relative;
  padding: 11px 0;
  color: #37454d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-blue-dark);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.35);
  transform-origin: center;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-base);
}

.site-nav__link:hover {
  color: #13272f;
}

.site-nav__link:hover::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.button--header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 44px;
  min-height: 44px;
  margin-block: 0;
  padding: 0 22px;
  border-color: rgba(5, 55, 73, 0.18);
  color: #ffffff;
  background: linear-gradient(135deg, #0f6b87 0%, #084d65 100%);
  box-shadow:
    0 8px 18px rgba(8, 77, 101, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  line-height: 1;
  letter-spacing: -0.01em;
}

.button--header:hover {
  background: linear-gradient(135deg, #137792 0%, #09566f 100%);
  box-shadow:
    0 11px 24px rgba(8, 77, 101, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.button--header:active {
  background: linear-gradient(135deg, #0d617b 0%, #07475e 100%);
  box-shadow:
    0 5px 13px rgba(8, 77, 101, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.menu-toggle {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  background: #ffffff;
  cursor: pointer;
}

.menu-toggle__line {
  position: absolute;
  width: 17px;
  height: 1.5px;
  border-radius: 10px;
  background: currentColor;
  transition: transform var(--transition-base);
}

.menu-toggle__line:first-child {
  transform: translateY(-3px);
}

.menu-toggle__line:last-child {
  transform: translateY(3px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child {
  transform: rotate(-45deg);
}

/* Hero shell */

.hero {
  padding: 12px 0 28px;
}

.hero__shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(540px, 1fr);
  gap: clamp(32px, 3.2vw, 52px);
  min-height: 670px;
  padding: clamp(46px, 5vw, 76px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background:
    radial-gradient(
      circle at 95% 8%,
      rgba(39, 165, 211, 0.11),
      transparent 27%
    ),
    #ffffff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.hero__shell::before {
  content: "";
  position: absolute;
  right: -190px;
  bottom: -280px;
  width: 610px;
  height: 610px;
  border: 82px solid rgba(39, 165, 211, 0.055);
  border-left-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  max-width: 650px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  color: var(--color-blue-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.105em;
}

.hero__eyebrow-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: var(--color-blue);
}

.hero__title {
  max-width: 660px;
  margin: 0;
  color: var(--color-text);
  font-size: clamp(48px, 3.45vw, 52px);
  font-weight: 500;
  line-height: 1.09;
  letter-spacing: -0.047em;
}

.hero__title span {
  display: block;
  white-space: nowrap;
}

.hero__title span + span {
  margin-top: 8px;
}

.hero__title span:last-child {
  color: var(--color-blue-deep);
}

.hero__description {
  max-width: 590px;
  margin: 27px 0 0;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.012em;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 60px;
  row-gap: 16px;
  margin-top: 31px;
}

.hero__advantages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 620px;
  margin: auto 0 0;
  padding: 14px 0 0;
  list-style: none;
}

.hero__advantages li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  min-height: 168px;
  padding: 16px;
  border: 1px solid rgba(19, 82, 108, 0.11);
  border-radius: 18px;
  color: #263b45;
  background: linear-gradient(145deg, #ffffff 0%, #f6fbfd 100%);
  box-shadow:
    0 12px 28px rgba(23, 72, 93, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.hero__advantage-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-bottom: 14px;
  border: 1px solid rgba(39, 165, 211, 0.17);
  border-radius: 14px;
  color: #0d6a88;
  background: linear-gradient(145deg, #f2fbfe 0%, #dff4fa 100%);
  box-shadow:
    0 8px 18px rgba(20, 123, 159, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hero__advantage-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__advantage-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hero__advantage-copy strong {
  color: #17252c;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.025em;
}

.hero__advantage-copy small {
  color: #596f79;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Showcase */

.hero-showcase {
  position: relative;
  z-index: 2;
  align-self: start;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(20, 123, 159, 0.13);
  border-radius: 30px;
  background: linear-gradient(145deg, #f5fbfd 0%, #e8f5fa 100%);
  box-shadow:
    0 24px 58px rgba(20, 94, 124, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hero-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(20, 123, 159, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 123, 159, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.hero-showcase__header,
.hero-showcase__footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #506b77;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.085em;
}

.hero-showcase__header {
  padding: 3px 3px 15px;
}

.hero-showcase__intro {
  display: none;
  margin: 0;
}

.hero-showcase__footer {
  justify-content: center;
  gap: 15px;
  padding: 18px 3px 4px;
}

.hero-showcase__footer i {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(39, 165, 211, 0.09);
}

.hero-showcase__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.service-card {
  position: relative;
  z-index: 2;
  display: block;
  min-width: 0;
  border: 1px solid rgba(20, 123, 159, 0.13);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow:
    0 16px 38px rgba(17, 83, 111, 0.08),
    inset 0 1px 0 #ffffff;
  overflow: hidden;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.service-card:hover {
  z-index: 3;
  border-color: rgba(20, 123, 159, 0.25);
  box-shadow:
    0 22px 46px rgba(17, 83, 111, 0.12),
    inset 0 1px 0 #ffffff;
  transform: translateY(-3px);
}

.service-card__number {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(39, 165, 211, 0.22);
  border-radius: 11px;
  color: var(--color-blue-dark);
  background: #e8f7fc;
  font-size: 9px;
  font-weight: 700;
}

.service-card__status {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(20, 123, 159, 0.14);
  border-radius: var(--radius-pill);
  color: #5a6f79;
  background: rgba(248, 252, 253, 0.9);
  box-shadow:
    0 8px 18px rgba(17, 83, 111, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.service-card__status i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(39, 165, 211, 0.1);
}

.service-card__status b {
  color: #0f708f;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.055em;
}

.service-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.service-card__label {
  color: var(--color-blue-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.075em;
}

.service-card strong {
  color: #142028;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.035em;
}

.service-card__description {
  color: #4f6570;
  font-size: 13px;
  line-height: 1.48;
}

.service-card--development {
  min-height: 248px;
  padding: 27px 45% 27px 72px;
}

.service-card--development .service-card__content {
  height: 100%;
  justify-content: center;
  gap: 9px;
}

.browser-preview {
  position: absolute;
  right: -28px;
  bottom: -24px;
  width: 47%;
  height: 205px;
  border: 1px solid rgba(20, 123, 159, 0.16);
  border-radius: 18px 0 0 0;
  background: #ffffff;
  box-shadow: -14px -10px 40px rgba(22, 100, 132, 0.12);
  overflow: hidden;
  transform: rotate(-1deg);
}

.browser-preview__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 27px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(20, 123, 159, 0.09);
  background: #f5fafc;
}

.browser-preview__bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a9cbd8;
}

.browser-preview__bar b {
  width: 47%;
  height: 7px;
  margin-left: 7px;
  border-radius: 999px;
  background: #e2eef3;
}

.browser-preview__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 25px 18px;
}

.browser-preview__body > i {
  width: 47px;
  height: 9px;
  border-radius: 999px;
  background: #bce5f3;
}

.browser-preview__body > strong {
  width: 76%;
  height: 22px;
  border-radius: 6px;
  background: #173947;
}

.browser-preview__body > small {
  width: 58%;
  height: 8px;
  border-radius: 999px;
  background: #dce9ee;
}

.browser-preview__body > span {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}

.browser-preview__body > span b {
  height: 55px;
  border-radius: 9px;
  background: linear-gradient(145deg, #edf8fc, #d5edf6);
}

.service-card--automation,
.service-card--education {
  min-height: 190px;
  padding: 60px 22px 22px;
}

.service-card--automation .service-card__content,
.service-card--education .service-card__content {
  position: relative;
  z-index: 2;
  gap: 7px;
}

.service-card--automation strong,
.service-card--education strong {
  max-width: none;
  font-size: 17px;
  line-height: 1.26;
}

.service-card--automation .service-card__description,
.service-card--education .service-card__description {
  max-width: none;
}

/* Responsive */

@media (max-width: 1240px) {
  :root {
    --container-padding: 20px;
  }

  .site-nav {
    gap: 20px;
    margin-right: 20px;
  }

  .hero__shell {
    grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr);
    gap: 32px;
    padding: 52px 42px;
  }

  .hero__title {
    font-size: clamp(45px, 4vw, 52px);
  }

  .service-card--development {
    padding-left: 66px;
  }

  .service-card strong {
    font-size: 18px;
  }

  .service-card--automation strong,
  .service-card--education strong {
    font-size: 16px;
  }
}

/* =========================================================
   HERO — DESKTOP PREMIUM LAYER

   Только desktop.
   Mobile / tablet ниже 1041px не затрагиваем.
========================================================= */

@media (min-width: 1041px) {
  /* =========================================================
     RIGHT SHOWCASE — DARK PREMIUM SYSTEM
  ========================================================= */

  .hero-showcase {
    isolation: isolate;

    /*
     * Та же цветовая семья, что у главного CTA.
     *
     * Кнопка:
     * #0f6b87 → #084d65
     *
     * На большой поверхности добавляем только
     * промежуточный тон, чтобы градиент был глубже
     * и не выглядел как растянутая кнопка.
     */
    border-color: rgba(127, 218, 242, 0.19);

    background:
      radial-gradient(
        circle at 88% 8%,
        rgba(127, 218, 242, 0.14) 0%,
        rgba(127, 218, 242, 0.045) 28%,
        transparent 49%
      ),
      radial-gradient(
        circle at 6% 96%,
        rgba(255, 255, 255, 0.035) 0%,
        transparent 37%
      ),
      linear-gradient(135deg, #0f6b87 0%, #0b5d76 48%, #084d65 100%);

    /*
     * Тень тоже приводим к характеру CTA:
     * меньше почти-чёрной тяжести,
     * больше холодной глубины.
     */
    box-shadow:
      0 26px 62px rgba(8, 77, 101, 0.18),
      0 7px 20px rgba(5, 55, 73, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);

    overflow: hidden;
  }

  /*
   * Технологическая сетка теперь светлее
   * и спокойнее.
   *
   * Она должна читаться только при внимательном
   * рассмотрении, а не перетягивать взгляд.
   */
  .hero-showcase::before {
    z-index: 0;

    background-image:
      linear-gradient(rgba(236, 249, 253, 0.052) 1px, transparent 1px),
      linear-gradient(90deg, rgba(236, 249, 253, 0.052) 1px, transparent 1px);

    background-size: 34px 34px;

    opacity: 0.64;

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      rgba(0, 0, 0, 0.78) 60%,
      transparent 100%
    );

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      rgba(0, 0, 0, 0.78) 60%,
      transparent 100%
    );
  }

  /*
   * Фирменную дугу сохраняем,
   * но на более светлой petrol-поверхности
   * она должна быть заметно деликатнее.
   */
  .hero-showcase::after {
    content: "";

    position: absolute;
    z-index: 1;

    right: -145px;
    bottom: -225px;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background: conic-gradient(
      from 206deg,

      transparent 0deg 62deg,

      rgba(255, 255, 255, 0.025) 62deg 145deg,

      rgba(127, 218, 242, 0.095) 145deg 190deg,

      rgba(188, 236, 248, 0.13) 190deg 220deg,

      rgba(127, 218, 242, 0.045) 220deg 270deg,

      transparent 270deg 360deg
    );

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 48px),
      #000 calc(100% - 47px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 48px),
      #000 calc(100% - 47px)
    );

    opacity: 0.62;

    transform: rotate(-6deg);

    pointer-events: none;
  }

  /* =========================================================
     SHOWCASE — LIGHT TYPOGRAPHY
  ========================================================= */

  .hero-showcase__header,
  .hero-showcase__footer {
    color: rgba(244, 251, 253, 0.8);
  }

  .hero-showcase__footer i {
    background: #65d3ef;

    box-shadow:
      0 0 0 3px rgba(101, 211, 239, 0.1),
      0 0 14px rgba(101, 211, 239, 0.22);
  }

  /* =========================================================
     SHOWCASE — LIGHT PRODUCT CARDS
  ========================================================= */

  .service-card {
    /*
     * Чуть более холодная поверхность.
     *
     * Карточки всё ещё воспринимаются белыми,
     * но уже не выглядят как отдельные
     * ярко-белые листы поверх teal-панели.
     */
    border-color: rgba(127, 218, 242, 0.18);

    background: linear-gradient(145deg, #fbfdfe 0%, #f8fbfc 54%, #f3f8fa 100%);

    box-shadow:
      0 16px 40px rgba(1, 17, 24, 0.17),
      0 4px 11px rgba(1, 17, 24, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .service-card:hover {
    border-color: rgba(127, 218, 242, 0.3);

    box-shadow:
      0 23px 52px rgba(1, 17, 24, 0.22),
      0 6px 15px rgba(1, 17, 24, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }

  /* =========================================================
     LEFT PROOF — ONE EDITORIAL SURFACE
  ========================================================= */

  /*
   * Было:
   *
   * [ карточка ][ карточка ][ карточка ]
   *
   * Теперь:
   *
   * [ контент | контент | контент ]
   *
   * Это убирает "card soup" и делает нижнюю часть
   * Hero значительно спокойнее и дороже.
   */
  .hero__advantages {
    gap: 0;

    padding: 0;

    border: 1px solid rgba(19, 82, 108, 0.105);
    border-radius: 20px;

    background:
      radial-gradient(
        circle at 6% 0%,
        rgba(185, 229, 244, 0.2) 0%,
        transparent 34%
      ),
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(244, 250, 252, 0.965) 100%
      );

    box-shadow:
      0 16px 38px rgba(23, 72, 93, 0.065),
      inset 0 1px 0 rgba(255, 255, 255, 1);

    overflow: hidden;
  }

  .hero__advantages li {
    min-height: 168px;

    padding: 18px 17px 17px;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
  }

  .hero__advantages li + li {
    border-left: 1px solid rgba(19, 82, 108, 0.1);
  }

  /*
   * Иконки остаются знакомыми,
   * но их поверхность делаем спокойнее,
   * чтобы внутри общей editorial-панели
   * они не выглядели ещё одним уровнем карточек.
   */
  .hero__advantage-icon {
    border-color: rgba(39, 165, 211, 0.15);

    background: linear-gradient(
      145deg,
      rgba(241, 251, 254, 0.96) 0%,
      rgba(224, 245, 250, 0.92) 100%
    );

    box-shadow:
      0 6px 16px rgba(20, 123, 159, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }
}

@media (max-width: 1040px) {
  :root {
    --header-height: 92px;
  }

  .site-header {
    padding-top: 14px;
  }

  .site-header__inner {
    justify-content: space-between;
    height: 64px;
  }

  .site-nav {
    position: fixed;
    z-index: 999;
    top: calc(var(--header-height) + 4px);
    right: var(--container-padding);
    left: var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.985);
    box-shadow: 0 28px 70px rgba(31, 70, 91, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.985);
    pointer-events: none;
    transition:
      opacity var(--transition-base),
      visibility var(--transition-base),
      transform var(--transition-base);
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 17px;
    border-radius: 14px;
    color: var(--color-text);
    font-size: 15px;
  }

  .site-nav__link::after {
    display: none;
  }

  .site-nav__link:hover {
    background: var(--color-surface-blue);
  }

  .menu-toggle {
    display: inline-flex;
  }

  .hero__shell {
    grid-template-columns: 1fr;
    gap: 52px;
    padding: 58px;
  }

  .hero__content {
    max-width: 740px;
  }

  .hero__title {
    max-width: 740px;
    font-size: clamp(49px, 5.7vw, 58px);
  }

  .hero__description {
    max-width: 660px;
    font-size: 17px;
  }

  .hero-showcase {
    width: min(100%, 720px);
    margin-inline: auto;
  }
}

@media (max-width: 680px) {
  :root {
    --container-padding: 12px;
    --header-height: 80px;

    /*
     * Единый action-control на mobile.
     */
    --round-arrow-size: 42px;
    --round-arrow-glyph-size: 21px;
  }

  /* Header — сохраняем текущую удачную мобильную версию */
  .site-header {
    padding-top: 10px;
  }

  .site-header__inner {
    height: 60px;
    padding: 0 9px 0 11px;
    border-radius: 20px;
  }

  .brand {
    gap: 10px;
  }

  .brand__logo-wrap {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 11px;
  }

  .brand__name {
    font-size: 15px;
  }

  .button--header {
    display: none;
  }

  .site-nav {
    top: calc(var(--header-height) + 2px);
    right: 12px;
    left: 12px;
  }

  /* =========================================================
     MOBILE HERO
  ========================================================= */

  /* =========================================================
     MOBILE HERO — TWO-SCENE COMPOSITION
  ========================================================= */

  .hero {
    padding: 16px 0 22px;
  }

  /*
   * КРИТИЧЕСКОЕ ИЗМЕНЕНИЕ:
   *
   * hero__shell больше НЕ является одной огромной карточкой.
   * Теперь это только grid-контейнер для двух самостоятельных сцен.
   */
  .hero__shell {
    gap: 42px;
    min-height: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    overflow: visible;
  }

  /*
   * Старую desktop-дугу shell на mobile отключаем.
   * Новая фирменная форма будет принадлежать только первой сцене.
   */
  .hero__shell::before {
    display: none;
  }

  /* =========================================================
     SCENE 01 — BRAND / OFFER / CTA
  ========================================================= */

  /*
   * Теперь именно hero__content является самостоятельной
   * большой premium-карточкой.
   */
  .hero__content {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    padding: 40px 18px 30px;

    border: 1px solid rgba(19, 82, 108, 0.085);
    border-radius: 26px;

    /*
     * Центр Hero становится чище и белее.
     *
     * Голубой свет концентрируется справа,
     * где находится фирменная дуга.
     */
    background:
      radial-gradient(
        circle at 92% 12%,
        rgba(39, 165, 211, 0.07) 0%,
        rgba(39, 165, 211, 0.025) 25%,
        transparent 43%
      ),
      radial-gradient(
        circle at 92% 94%,
        rgba(185, 229, 244, 0.2) 0%,
        rgba(185, 229, 244, 0.065) 31%,
        transparent 54%
      ),
      linear-gradient(
        150deg,
        #ffffff 0%,
        #ffffff 34%,
        #fcfdfe 61%,
        #f5fafc 100%
      );

    box-shadow:
      0 20px 52px rgba(24, 63, 80, 0.075),
      0 4px 14px rgba(20, 94, 124, 0.035),
      inset 0 1px 0 rgba(255, 255, 255, 1);

    overflow: hidden;
  }

  /*
   * Единственная фирменная дуга Scene 01.
   *
   * Чуть спокойнее прежней:
   * она поддерживает CTA и H1,
   * но не становится самостоятельной иллюстрацией.
   */
  .hero__content::before {
    content: "";

    position: absolute;
    z-index: 0;

    right: -122px;
    bottom: -108px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background: conic-gradient(
      from 208deg,

      transparent 0deg 48deg,

      rgba(39, 165, 211, 0.045) 48deg 184deg,

      rgba(12, 91, 121, 0.145) 184deg 220deg,

      rgba(39, 165, 211, 0.065) 220deg 254deg,

      transparent 254deg 360deg
    );

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 34px),
      #000 calc(100% - 33px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 34px),
      #000 calc(100% - 33px)
    );

    opacity: 0.84;

    transform: rotate(-7deg);

    pointer-events: none;
  }

  /*
   * Весь реальный контент всегда находится
   * поверх фирменной формы.
   */
  .hero__content > * {
    position: relative;
    z-index: 2;
  }

  /* DMS WORKS • DIGITAL PRODUCTS */
  .hero__eyebrow {
    gap: 6px;
    margin-bottom: 15px;

    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.07em;
  }

  .hero__eyebrow span:last-child {
    font-size: 0;
  }

  .hero__eyebrow span:last-child::after {
    content: "DIGITAL PRODUCTS";
    font-size: 9px;
  }

  .hero__eyebrow-dot {
    width: 3px;
    height: 3px;
    flex-basis: 3px;
  }

  /*
   * H1 практически фиксируем.
   */
  .hero__title {
    max-width: none;

    font-size: clamp(29px, 4.7vw, 31px);
    line-height: 1.04;
    letter-spacing: -0.052em;
  }

  .hero__title span {
    display: block;
    white-space: nowrap;
  }

  .hero__title span + span {
    margin-top: 8px;
  }

  .hero__title span:last-child {
    color: #0a617f;
    font-weight: 550;
  }

  /*
   * Сохраняем редакционную ширину paragraph.
   */
  .hero__description {
    width: 92%;
    max-width: 92%;

    margin-top: 18px;

    color: var(--color-text-secondary);

    font-size: 14px;
    line-height: 1.52;
    letter-spacing: -0.012em;
  }

  /* =========================================================
     MOBILE ACTIONS
  ========================================================= */

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;

    align-items: stretch;

    row-gap: 12px;

    width: 100%;

    margin-top: 28px;
  }

  /*
   * Теперь Hero использует ту же систему:
   *
   * компактная капсула + круг 42px + стрелка 21px.
   */
  .hero__actions .button {
    width: auto;

    min-height: 50px;

    justify-content: space-between;

    gap: 10px;

    padding: 4px 5px 4px 16px;

    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.012em;

    text-align: left;
  }

  .hero__actions .button--primary {
    width: 80%;

    justify-self: start;

    font-size: clamp(15px, 3.9vw, 16px);
  }

  .hero__actions .button--secondary {
    width: 66%;

    justify-self: end;

    font-size: clamp(14.5px, 3.7vw, 15px);
  }

  /*
   * Раньше стрелки здесь были скрыты.
   * Возвращаем их.
   *
   * Точная поверхность будет переопределена
   * единым CANONICAL SYSTEM ниже в файле.
   */
  .hero__actions .button__arrow {
    display: block;
  }

  /*
   * Десктопные преимущества по-прежнему
   * не переносим на первый мобильный экран.
   */
  .hero__advantages {
    display: none;
  }

  /* =========================================================
     SCENE 02 — WHAT WE DO
  ========================================================= */

  /*
   * Второй блок больше не находится
   * внутри белой hero-карточки визуально.
   *
   * Его окружающий фон — уже фон самой страницы.
   */
  .hero-showcase {
    position: relative;
    isolation: isolate;

    width: 100%;

    margin-inline: auto;

    padding: 30px 18px 20px;

    border: 1px solid rgba(127, 218, 242, 0.16);
    border-radius: 26px;

    /*
     * Та же фирменная цветовая семья,
     * что desktop-showcase и primary CTA.
     */
    background:
      radial-gradient(
        circle at 90% 8%,
        rgba(127, 218, 242, 0.14) 0%,
        rgba(127, 218, 242, 0.04) 28%,
        transparent 48%
      ),
      radial-gradient(
        circle at 4% 96%,
        rgba(255, 255, 255, 0.035) 0%,
        transparent 38%
      ),
      linear-gradient(135deg, #0f6b87 0%, #0b5d76 48%, #084d65 100%);

    box-shadow:
      0 18px 42px rgba(8, 77, 101, 0.16),
      0 4px 14px rgba(5, 55, 73, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.11);

    overflow: hidden;
  }

  /*
   * Scene 02 получает только ОДИН
   * спокойный фирменный графический жест.
   *
   * На тёмной поверхности дуга светлая,
   * а не тёмно-синяя.
   */
  .hero-showcase::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -88px;
    bottom: -28px;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: conic-gradient(
      from 26deg,

      transparent 0deg 54deg,

      rgba(255, 255, 255, 0.025) 54deg 132deg,

      rgba(127, 218, 242, 0.085) 132deg 172deg,

      rgba(188, 236, 248, 0.13) 172deg 202deg,

      rgba(127, 218, 242, 0.045) 202deg 254deg,

      transparent 254deg 360deg
    );

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    opacity: 0.62;

    transform: rotate(18deg);

    pointer-events: none;
  }

  /* =========================================================
     SCENE TITLE
  ========================================================= */

  .hero-showcase::before {
    content: "Что мы делаем";

    position: relative;
    z-index: 3;

    inset: auto;

    display: block;

    width: auto;
    height: auto;

    margin: 0 0 8px;

    border: 0;
    border-radius: 0;

    color: #ffffff;

    background: none;
    background-image: none;

    font-size: clamp(23px, 5.7vw, 25px);
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -0.03em;

    -webkit-mask-image: none;
    mask-image: none;

    pointer-events: none;
  }

  /*
   * Desktop DMS WORKS / DIGITAL STUDIO
   * на mobile не нужны.
   */
  .hero-showcase__header {
    position: relative;
    z-index: 3;

    display: block;

    margin: 0 0 24px;
    padding: 0;

    color: rgba(236, 248, 252, 0.78);

    font-size: 0;
    line-height: normal;
    letter-spacing: 0;
  }

  .hero-showcase__header > span {
    display: none;
  }

  .hero-showcase__intro {
    display: block;

    max-width: 92%;

    margin: 0;

    /*
     * Было:
     * rgba(233, 246, 250, 0.76)
     *
     * Поднимаем контраст примерно на 10–12%,
     * не изменяя типографический масштаб.
     */
    color: rgba(240, 248, 250, 0.87);

    font-size: 13px;
    font-weight: 450;
    line-height: 1.55;
    letter-spacing: -0.012em;
  }

  /* =========================================================
     SERVICE CARDS — COMMON
  ========================================================= */

  .service-card {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    border: 1px solid rgba(127, 218, 242, 0.16);
    border-radius: 20px;

    /*
     * Почти белые холодные поверхности —
     * тот же принцип, что на desktop.
     */
    background: linear-gradient(145deg, #fbfdfe 0%, #f8fbfc 54%, #f3f8fa 100%);

    box-shadow:
      0 12px 27px rgba(1, 17, 24, 0.12),
      0 3px 9px rgba(1, 17, 24, 0.045),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);

    transition:
      transform var(--transition-fast),
      border-color var(--transition-fast),
      background-color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .service-card:hover {
    border-color: rgba(127, 218, 242, 0.24);

    background: linear-gradient(145deg, #ffffff 0%, #f9fcfd 55%, #f4f9fb 100%);

    box-shadow:
      0 15px 32px rgba(1, 17, 24, 0.15),
      0 4px 11px rgba(1, 17, 24, 0.055),
      inset 0 1px 0 #ffffff;

    transform: none;
  }

  .service-card:active {
    border-color: rgba(127, 218, 242, 0.28);

    box-shadow:
      0 8px 20px rgba(1, 17, 24, 0.11),
      inset 0 1px 0 #ffffff;

    transform: scale(0.996);
  }

  /*
   * Desktop-инфографику на mobile не показываем.
   */
  .service-card__number,
  .service-card__status,
  .service-card__description,
  .browser-preview {
    display: none;
  }

  .service-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    width: 100%;
    min-width: 0;
  }

  .service-card__label {
    color: #147b9f;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.075em;
  }

  .service-card strong {
    max-width: none;

    color: #142028;

    font-size: 18px;
    font-weight: 650;
    line-height: 1.24;
    letter-spacing: -0.018em;
  }

  /* =========================================================
     WEB DEVELOPMENT — PRIMARY DIRECTION
  ========================================================= */

  .service-card--development {
    min-height: 108px;

    padding: 20px 66px 20px 22px;

    border-color: rgba(127, 218, 242, 0.19);

    background: linear-gradient(145deg, #ffffff 0%, #f8fbfc 56%, #f2f8fa 100%);

    box-shadow:
      0 14px 32px rgba(1, 17, 24, 0.14),
      0 3px 10px rgba(1, 17, 24, 0.05),
      inset 0 1px 0 #ffffff;
  }

  .service-card--development .service-card__content {
    position: relative;
    z-index: 2;

    height: auto;

    justify-content: center;

    gap: 8px;
  }

  .service-card--development .service-card__label {
    color: #0f7495;
  }

  .service-card--development strong {
    font-size: 19px;
    line-height: 1.22;
    letter-spacing: -0.021em;
  }

  /* =========================================================
     AI / EDUCATION
  ========================================================= */

  .hero-showcase__grid {
    position: relative;
    z-index: 2;

    grid-template-columns: 1fr;

    gap: 12px;

    margin-top: 12px;
  }

  .service-card--automation,
  .service-card--education {
    min-height: 90px;

    padding: 16px 62px 16px 20px;

    background: linear-gradient(145deg, #fbfdfe 0%, #f8fbfc 54%, #f3f8fa 100%);

    box-shadow:
      0 10px 24px rgba(1, 17, 24, 0.1),
      0 3px 8px rgba(1, 17, 24, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
  }

  .service-card--automation .service-card__content,
  .service-card--education .service-card__content {
    position: relative;
    z-index: 2;

    gap: 7px;
  }

  .service-card--automation strong,
  .service-card--education strong {
    max-width: none;

    font-size: 18px;
    line-height: 1.24;
    letter-spacing: -0.018em;
  }

  /* =========================================================
     CIRCULAR ARROWS
  ========================================================= */

  .service-card::after {
    content: "";

    position: absolute;
    z-index: 4;

    top: 50%;
    right: 16px;

    display: block;

    width: var(--round-arrow-size);
    height: var(--round-arrow-size);

    border: 1px solid rgba(127, 218, 242, 0.18);
    border-radius: 50%;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M0.6 10.5H19.6M15.2 6.1L19.6 10.5L15.2 14.9' fill='none' stroke='%23147b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / var(--round-arrow-glyph-size) var(--round-arrow-glyph-size)
        no-repeat,
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(245, 251, 253, 0.98) 100%
      );

    box-shadow:
      0 5px 14px rgba(1, 16, 22, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 1);

    font-size: 0;
    line-height: 0;

    opacity: 1;

    transform: translateY(-50%);

    transition:
      transform var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);

    pointer-events: none;
  }

  .service-card--development::after {
    border-color: rgba(127, 218, 242, 0.18);

    opacity: 1;
  }

  .service-card:hover::after {
    transform: translateY(-50%) translateX(1px);
  }

  .service-card:active::after {
    transform: translateY(-50%) translateX(2px) scale(0.97);
  }

  /* =========================================================
     SHOWCASE FOOTER
  ========================================================= */

  .hero-showcase__footer {
    position: relative;
    z-index: 3;

    gap: 10px;

    padding: 20px 3px 1px;

    /*
     * Было:
     * rgba(238, 249, 252, 0.70)
     *
     * Делаем строку холодно-белой и заметно увереннее.
     * Она всё ещё не конкурирует с карточками,
     * но перестаёт выглядеть как декоративная дымка.
     */
    color: rgba(244, 250, 252, 0.87);

    font-size: 9px;
    line-height: 1;
  }

  .hero-showcase__footer i {
    width: 3px;
    height: 3px;

    flex-basis: 3px;

    background: #65d3ef;

    box-shadow:
      0 0 0 2px rgba(101, 211, 239, 0.09),
      0 0 10px rgba(101, 211, 239, 0.18);
  }
}

@media (max-width: 390px) {
  :root {
    /*
     * Action-controls больше не уменьшаются
     * на узких телефонах.
     *
     * Эталон DMS WORKS для всей mobile-версии:
     * круг = 42px;
     * стрелка = 21px.
     */
    --round-arrow-size: 42px;
    --round-arrow-glyph-size: 21px;
  }

  .brand__logo-wrap {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }

  .brand__name {
    font-size: 14px;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }

  /*
   * На маленьких телефонах сохраняем две отдельные сцены.
   * Сам shell больше не является карточкой.
   */
  .hero__shell {
    gap: 34px;
    padding: 0;
  }

  /*
   * Верхняя hero-сцена.
   * На узком экране чуть уменьшаем только внутреннюю геометрию,
   * но сохраняем весь визуальный характер.
   */
  /*
   * Верхняя hero-сцена.
   * На узком экране сохраняем характер,
   * но не раздуваем CTA.
   */
  .hero__content {
    padding: 34px 14px 26px;

    border-radius: 22px;
  }

  /*
   * Фирменная дуга Scene 01.
   */
  .hero__content::before {
    right: -102px;
    bottom: -92px;

    width: 250px;
    height: 250px;

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 28px),
      #000 calc(100% - 27px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 28px),
      #000 calc(100% - 27px)
    );

    opacity: 0.82;
  }

  .hero__eyebrow {
    gap: 6px;

    font-size: 8px;
  }

  .hero__eyebrow span:last-child::after {
    font-size: 8px;
  }

  .hero__title {
    font-size: clamp(24.5px, 7.5vw, 29px);
    line-height: 1.04;
    letter-spacing: -0.055em;
  }

  .hero__description {
    width: 94%;
    max-width: 94%;

    margin-top: 17px;

    font-size: 14px;
    line-height: 1.52;
  }

  /* =========================================================
     CTA — SMALL MOBILE
  ========================================================= */

  .hero__actions {
    row-gap: 11px;

    margin-top: 26px;
  }

  /*
   * Основная CTA заметная,
   * но больше не занимает почти всю сцену.
   */
  .hero__actions .button--primary {
    width: 82%;
    min-height: 50px;

    justify-self: start;

    padding: 4px 5px 4px 16px;

    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.012em;
  }

  /*
   * Вторичная CTA компактнее
   * и остаётся смещённой вправо.
   */
  .hero__actions .button--secondary {
    width: 68%;
    min-height: 50px;

    justify-self: end;

    padding: 4px 5px 4px 15px;

    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -0.012em;
  }

  /* =========================================================
     SCENE 02 — SMALL MOBILE
  ========================================================= */

  .hero-showcase {
    width: 100%;

    margin-inline: auto;

    padding: 26px 14px 18px;

    border-radius: 22px;
  }

  /*
   * Дуга на teal становится светлым
   * фоновым графическим жестом.
   */
  .hero-showcase::after {
    left: -72px;
    bottom: -16px;

    width: 308px;
    height: 308px;

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 34px),
      #000 calc(100% - 33px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 34px),
      #000 calc(100% - 33px)
    );

    opacity: 0.6;

    transform: rotate(22deg);
  }

  .hero-showcase::before {
    margin: 0 0 7px;

    font-size: 22px;
    line-height: 1.18;
  }

  .hero-showcase__header {
    margin: 0 0 20px;
  }

  .hero-showcase__intro {
    display: block;

    max-width: 94%;

    margin: 0;

    /*
     * Было:
     * rgba(233, 246, 250, 0.76)
     *
     * Размер и вес не меняем.
     * Только усиливаем холодный светлый текст,
     * чтобы он уверенно читался на teal-поверхности,
     * оставаясь вторичным относительно H2.
     */
    color: rgba(240, 248, 250, 0.87);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.52;
    letter-spacing: -0.012em;
  }

  /*
   * Первая карточка — композиционный лидер,
   * но высота уже компактнее прежней.
   */
  .service-card--development {
    min-height: 104px;

    padding: 17px 58px 17px 16px;
  }

  .service-card--development strong {
    font-size: 17.5px;
    line-height: 1.23;
  }

  /*
   * AI / EDUCATION компактнее первой.
   */
  .service-card--automation,
  .service-card--education {
    min-height: 88px;

    padding: 15px 58px 15px 16px;
  }

  .service-card__label {
    font-size: 10.5px;

    letter-spacing: 0.07em;
  }

  .service-card--automation strong,
  .service-card--education strong {
    font-size: 17px;
    line-height: 1.24;
  }

  .hero-showcase__grid {
    gap: 11px;

    margin-top: 11px;
  }

  /*
   * Эталонный action-control остаётся 42px.
   */
  .service-card::after {
    right: 13px;
  }

  .hero-showcase__footer {
    gap: 8px;

    padding: 18px 3px 1px;

    font-size: 9px;
  }
}

/* =========================================================
   SCENE 03 — SELECTED WORK / REAL PROJECTS
========================================================= */

.projects {
  padding: 78px 0 118px;
}

.projects__header {
  max-width: 720px;
  margin-bottom: 42px;
}

.projects__eyebrow {
  margin: 0 0 14px;

  color: var(--color-blue-dark);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.105em;
}

.projects__title {
  margin: 0;

  color: var(--color-text);

  font-size: clamp(42px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.047em;
}

.projects__intro {
  max-width: 620px;
  margin: 20px 0 0;

  color: var(--color-text-secondary);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.012em;
}

/* =========================================================
   ALLPRINT — FLAGSHIP PROJECT
========================================================= */

.project-feature {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns:
    minmax(350px, 0.82fr)
    minmax(0, 1.34fr);
  grid-template-rows: auto 1fr;

  min-height: 700px;

  border: 1px solid rgba(121, 208, 235, 0.13);
  border-radius: 34px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(39, 165, 211, 0.18) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 42% 105%,
      rgba(39, 165, 211, 0.095) 0%,
      transparent 34%
    ),
    linear-gradient(145deg, #0a3443 0%, #082b38 45%, #061f2a 100%);

  box-shadow:
    0 34px 80px rgba(10, 46, 60, 0.18),
    0 8px 24px rgba(10, 46, 60, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  overflow: hidden;
}

/*
 * Большая фирменная форма DMS.
 *
 * Она продолжает визуальный язык первых двух сцен,
 * но здесь работает на глубоком petrol-фоне.
 */
.project-feature::before {
  content: "";

  position: absolute;
  z-index: 0;

  right: -245px;
  bottom: -335px;

  width: 760px;
  height: 760px;

  border-radius: 50%;

  background: conic-gradient(
    from 205deg,

    transparent 0deg 55deg,

    rgba(39, 165, 211, 0.055) 55deg 164deg,

    rgba(102, 214, 242, 0.14) 164deg 202deg,

    rgba(39, 165, 211, 0.065) 202deg 256deg,

    transparent 256deg 360deg
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 78px),
    #000 calc(100% - 77px)
  );

  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 78px),
    #000 calc(100% - 77px)
  );

  pointer-events: none;
}

/*
 * Очень мягкое холодное свечение за интерфейсом.
 * Не отдельная декоративная фигура.
 */
.project-feature::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: -170px;
  right: 18%;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background: rgba(76, 195, 228, 0.075);

  filter: blur(70px);

  pointer-events: none;
}

.project-feature__content,
.project-feature__footer,
.project-feature__visual {
  position: relative;
  z-index: 2;
}

/* =========================================================
   PROJECT — COPY
========================================================= */

.project-feature__content {
  grid-column: 1;
  grid-row: 1;

  padding: 62px 0 0 60px;
}

.project-feature__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 21px;

  color: #91d7ed;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.09em;
}

.project-feature__meta i {
  width: 4px;
  height: 4px;

  flex: 0 0 4px;

  border-radius: 50%;

  background: #62cae9;

  box-shadow: 0 0 0 4px rgba(98, 202, 233, 0.075);
}

.project-feature__title {
  max-width: 470px;

  margin: 0;

  color: #ffffff;

  font-size: clamp(32px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.047em;
}

.project-feature__description {
  max-width: 450px;

  margin: 25px 0 0;

  color: rgba(222, 237, 242, 0.76);

  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.012em;
}

/*
 * Технологии — не набор тяжёлых pills.
 * Просто аккуратная editorial-строка.
 */
.project-feature__stack {
  display: flex;
  flex-wrap: wrap;

  gap: 9px 16px;

  margin-top: 28px;

  color: rgba(151, 220, 239, 0.86);

  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.075em;
}

.project-feature__stack span {
  position: relative;
}

.project-feature__stack span + span::before {
  content: "";

  position: absolute;

  top: 50%;
  left: -9px;

  width: 2px;
  height: 2px;

  border-radius: 50%;

  background: rgba(151, 220, 239, 0.5);

  transform: translateY(-50%);
}

/* =========================================================
   PROJECT — PROOF / CTA
========================================================= */

.project-feature__footer {
  grid-column: 1;
  grid-row: 2;

  align-self: end;

  padding: 34px 0 58px 60px;
}

.project-feature__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px 22px;

  max-width: 455px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.project-feature__facts li {
  position: relative;

  min-width: 0;

  padding: 13px 0 0;

  border-top: 1px solid rgba(191, 226, 236, 0.14);
}

.project-feature__facts li::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 0;

  width: 30px;
  height: 1px;

  background: rgba(99, 207, 236, 0.7);
}

.project-feature__facts strong {
  color: rgba(244, 249, 251, 0.9);

  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.project-feature__link {
  position: relative;

  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  width: fit-content;
  max-width: 100%;
  min-height: calc(var(--round-arrow-size) + 10px);

  gap: 12px;

  margin-top: 34px;
  padding: 5px 6px 5px 16px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);

  color: rgba(250, 252, 253, 0.98);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.085) 0%,
    rgba(255, 255, 255, 0.035) 100%
  );

  box-shadow:
    0 8px 22px rgba(2, 16, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.project-feature__link-icon {
  position: relative;

  display: block;

  width: var(--round-arrow-size);
  height: var(--round-arrow-size);

  flex: 0 0 var(--round-arrow-size);

  border: 1px solid rgba(127, 218, 242, 0.18);
  border-radius: 50%;

  color: #147b9f;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(245, 251, 253, 0.98) 100%
  );

  box-shadow:
    0 5px 14px rgba(1, 16, 22, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  /*
   * Символ ↗, который уже находится в HTML,
   * визуально не используем.
   * Стрелку строим сами с точной геометрией.
   */
  font-size: 0;
  line-height: 0;

  overflow: hidden;

  transform: translate3d(0, 0, 0);

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

/*
 * Горизонтальная часть стрелки.
 *
 * Размер привязан к общей переменной,
 * поэтому пропорция автоматически сохраняется
 * на desktop, mobile и small mobile.
 */
.project-feature__link-icon::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: calc(var(--round-arrow-glyph-size) * 0.95);
  height: 2px;

  border-radius: 999px;

  background: currentColor;

  transform: translate(-57%, -50%);
}

/*
 * Наконечник стрелки.
 */
.project-feature__link-icon::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: calc(var(--round-arrow-glyph-size) * 0.42);
  height: calc(var(--round-arrow-glyph-size) * 0.42);

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform: translate(8%, -50%) rotate(45deg);
}

.project-feature__link:hover {
  border-color: rgba(255, 255, 255, 0.26);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );

  box-shadow:
    0 12px 28px rgba(2, 16, 22, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);

  transform: translateY(-1px);
}

.project-feature__link:hover .project-feature__link-icon {
  border-color: rgba(127, 218, 242, 0.24);

  box-shadow:
    0 7px 18px rgba(1, 16, 22, 0.15),
    inset 0 1px 0 #ffffff;

  transform: translate3d(1px, 0, 0);
}

.project-feature__link:active {
  transform: translateY(0);
}

.project-feature__link:active .project-feature__link-icon {
  transform: translate3d(2px, 0, 0) scale(0.97);
}

.project-feature__link:focus-visible {
  outline: 2px solid rgba(127, 218, 242, 0.75);

  outline-offset: 4px;

  border-radius: var(--radius-pill);
}

/* =========================================================
   PROJECT — REAL PRODUCT SCREENS
========================================================= */

.project-feature__visual {
  grid-column: 2;
  grid-row: 1 / 3;

  min-width: 0;
  min-height: 700px;
}

.project-screen {
  margin: 0;
}

/*
 * Главный desktop screenshot.
 */
.project-screen--desktop {
  position: absolute;

  top: 48px;
  right: -40px;

  width: min(720px, 108%);

  padding: 9px;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 25px;

  background: rgba(248, 252, 253, 0.98);

  box-shadow:
    0 38px 80px rgba(0, 12, 17, 0.34),
    0 10px 28px rgba(0, 12, 17, 0.17),
    inset 0 1px 0 #ffffff;

  overflow: hidden;

  transform: rotate(-1.15deg);
}

.project-screen__bar {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 31px;

  padding: 0 12px;

  color: #6d7d84;

  background: #f3f7f8;

  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.project-screen__dots {
  position: absolute;
  left: 11px;

  display: flex;

  gap: 4px;
}

.project-screen__dots i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #bfd0d6;
}

.project-screen--desktop img {
  width: 100%;
  height: auto;

  border-radius: 0 0 17px 17px;
}

/*
 * Mobile screenshot поверх desktop.
 * Это не декор — сразу показывает адаптивность проекта.
 */
.project-screen--mobile {
  position: absolute;
  z-index: 3;

  left: -14px;
  bottom: 34px;

  width: 206px;

  padding: 6px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 29px;

  background: linear-gradient(145deg, #0e3441 0%, #071f29 100%);

  box-shadow:
    0 32px 68px rgba(0, 9, 13, 0.42),
    0 8px 20px rgba(0, 9, 13, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  overflow: hidden;

  transform: rotate(1.1deg);
}

.project-screen--mobile img {
  width: 100%;
  height: auto;

  border-radius: 23px;
}

/* =========================================================
   SCENE 03 — TABLET
========================================================= */

@media (max-width: 1040px) {
  .projects {
    padding-top: 68px;
  }

  .project-feature {
    grid-template-columns: 1fr;
    grid-template-rows: auto 600px auto;

    min-height: 0;
  }

  .project-feature__content {
    grid-column: 1;
    grid-row: 1;

    padding: 48px 48px 18px;
  }

  .project-feature__title,
  .project-feature__description {
    max-width: 680px;
  }

  .project-feature__visual {
    grid-column: 1;
    grid-row: 2;

    min-height: 600px;
  }

  .project-screen--desktop {
    top: 20px;
    right: 3%;

    width: 80%;
  }

  .project-screen--mobile {
    left: 5%;
    bottom: 18px;

    width: 176px;
  }

  .project-feature__footer {
    grid-column: 1;
    grid-row: 3;

    padding: 18px 48px 48px;
  }
}

/* =========================================================
   SCENE 03 — MOBILE
========================================================= */

@media (max-width: 680px) {
  .projects {
    /*
     * Единый мобильный ритм между крупными сценами.
     *
     * Scene 02 → Scene 03:
     * hero снизу = 22px;
     * projects сверху = 10px.
     *
     * Scene 03 → Scene 04 теперь строится так же:
     * projects снизу = 22px;
     * education сверху = 10px.
     *
     * В обоих случаях итоговый разрыв = 32px.
     */
    padding: 10px 0 22px;
  }

  .projects__header {
    /*
     * Делаем связку header → case плотнее,
     * чтобы тёмная карточка начиналась ближе
     * и сцена воспринималась цельнее.
     */
    margin-bottom: 16px;

    padding-inline: 18px;
  }

  .projects__eyebrow {
    margin-bottom: 10px;

    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .projects__title {
    font-size: clamp(27px, 7.4vw, 30px);
    line-height: 1.06;
    letter-spacing: -0.045em;
  }

  /*
   * Сохраняем единый стандарт серой типографики
   * DMS WORKS на mobile.
   */
  .projects__intro {
    width: 92%;
    max-width: 92%;

    margin-top: 14px;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.52;
    letter-spacing: -0.012em;
  }

  .project-feature {
    grid-template-rows:
      auto
      auto
      auto;

    border-radius: 26px;
  }

  /*
   * Фирменная дуга:
   * цвет, прозрачность и толщина НЕ усиливаются.
   *
   * Только поднимаем её на 22px,
   * чтобы после уменьшения visual она раньше
   * начинала работать в нижней части сцены.
   */
  .project-feature::before {
    right: -166px;
    bottom: -118px;

    width: 430px;
    height: 430px;

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 46px),
      #000 calc(100% - 45px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 46px),
      #000 calc(100% - 45px)
    );

    opacity: 0.92;
  }

  .project-feature::after {
    top: 14%;
    right: -90px;

    width: 270px;
    height: 270px;

    filter: blur(55px);
  }

  .project-feature__content {
    padding: 32px 18px 22px;
  }

  .project-feature__meta {
    gap: 8px;

    margin-bottom: 17px;

    font-size: 9px;
    letter-spacing: 0.075em;
  }

  .project-feature__title {
    max-width: 94%;

    font-size: clamp(25px, 7vw, 29px);
    line-height: 1.08;
    letter-spacing: -0.045em;
  }

  .project-feature__description {
    max-width: 94%;

    margin-top: 19px;

    /*
     * Было 0.78.
     * Поднимаем контраст примерно на тот же уровень,
     * что и остальные вторичные описания тёмных сцен.
     */
    color: rgba(230, 241, 245, 0.88);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.52;
    letter-spacing: -0.012em;
  }

  .project-feature__stack {
    gap: 7px 14px;

    margin-top: 21px;

    font-size: 9px;
  }

  /*
   * На mobile сохраняем крупный product-shot,
   * но делаем весь визуальный эпизод примерно на 5–6%
   * компактнее по высоте.
   *
   * Важно: wow-эффект сохраняется —
   * интерфейс всё ещё остаётся главным объектом.
   */
  .project-feature__visual {
    min-height: 444px;
  }

  .project-screen--desktop {
    top: 12px;
    right: -22%;

    width: 104%;

    padding: 6px;

    border-radius: 20px;

    transform: rotate(-1deg);
  }

  .project-screen__bar {
    height: 25px;

    font-size: 8px;
  }

  .project-screen--desktop img {
    border-radius: 0 0 14px 14px;
  }

  /*
   * Телефон тоже уменьшаем совсем немного,
   * чтобы масштаб двух устройств оставался согласованным.
   */
  .project-screen--mobile {
    left: 13px;
    bottom: 12px;

    width: 132px;

    padding: 4px;

    border-radius: 22px;
  }

  .project-screen--mobile img {
    border-radius: 18px;
  }

  .project-feature__footer {
    padding: 22px 18px 30px;
  }

  .project-feature__facts {
    gap: 14px 18px;
  }

  .project-feature__facts li {
    padding-top: 11px;
  }

  .project-feature__facts strong {
    /*
     * Маленькие proof-подписи становятся
     * чуть увереннее, но не чисто белыми.
     */
    color: rgba(247, 251, 252, 0.95);

    font-size: 12px;
  }

  .project-feature__link {
    gap: 10px;

    margin-top: 28px;
    padding: 5px 5px 5px 14px;

    min-height: calc(var(--round-arrow-size) + 8px);

    font-size: 14px;
  }
}

/* =========================================================
   SCENE 03 — SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  .projects {
    /*
     * На small mobile ещё сильнее собираем переход
     * между второй и третьей сценами.
     *
     * Отступ сверху делаем заметно компактнее,
     * но не впритык — чтобы сохранить premium-воздух.
     */
    padding-top: 8px;
  }

  .projects__header {
    /*
     * Поджимаем расстояние между intro третьей сцены
     * и тёмной карточкой кейса.
     */
    margin-bottom: 14px;

    padding-inline: 14px;
  }

  .projects__title {
    font-size: 27px;
  }

  .projects__intro {
    width: 94%;
    max-width: 94%;

    font-size: 14px;
  }

  .project-feature {
    border-radius: 22px;
  }

  /*
   * На самом узком mobile дуга поднимается немного выше,
   * но остаётся очень спокойным фоновым элементом.
   */
  .project-feature::before {
    right: -158px;
    bottom: -106px;
  }

  .project-feature__content {
    padding: 28px 14px 20px;
  }

  .project-feature__title {
    max-width: 96%;

    font-size: clamp(23px, 7.2vw, 27px);
  }

  .project-feature__description {
    max-width: 96%;
  }

  /*
   * Было 420px.
   * Снижаем примерно на 5.7%.
   */
  .project-feature__visual {
    min-height: 396px;
  }

  /*
   * Сам product-shot также чуть компактнее,
   * чтобы мы не просто обрезали прежний огромный mockup.
   */
  .project-screen--desktop {
    right: -25%;

    width: 107%;
  }

  .project-screen--mobile {
    left: 9px;
    bottom: 11px;

    width: 120px;
  }

  .project-feature__footer {
    padding: 20px 14px 26px;
  }

  .project-feature__facts {
    gap: 13px 14px;
  }
}

/* =========================================================
   SCENE 04 — EDUCATION
========================================================= */

.education {
  padding: 0 0 118px;

  scroll-margin-top: calc(var(--header-height) + 24px);
}

.education__shell {
  position: relative;
  isolation: isolate;

  padding: clamp(48px, 5vw, 72px);

  border: 1px solid rgba(19, 82, 108, 0.11);
  border-radius: var(--radius-card);

  background:
    radial-gradient(
      circle at 96% 5%,
      rgba(39, 165, 211, 0.115) 0%,
      rgba(39, 165, 211, 0.04) 24%,
      transparent 43%
    ),
    linear-gradient(145deg, #ffffff 0%, #fbfdfe 52%, #f1f9fc 100%);

  box-shadow:
    0 28px 74px rgba(24, 63, 80, 0.09),
    0 6px 20px rgba(20, 94, 124, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  overflow: hidden;
}

/*
 * Фирменная сегментированная дуга.
 * Продолжает визуальный язык hero и проекта AllPrint,
 * но на светлой поверхности работает гораздо спокойнее.
 */
.education__shell::before {
  content: "";

  position: absolute;
  z-index: 0;

  right: -220px;
  bottom: -330px;

  width: 650px;
  height: 650px;

  border-radius: 50%;

  background: conic-gradient(
    from 204deg,
    transparent 0deg 58deg,
    rgba(39, 165, 211, 0.045) 58deg 166deg,
    rgba(39, 165, 211, 0.12) 166deg 203deg,
    rgba(39, 165, 211, 0.052) 203deg 260deg,
    transparent 260deg 360deg
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 66px),
    #000 calc(100% - 65px)
  );

  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 66px),
    #000 calc(100% - 65px)
  );

  pointer-events: none;
}

/*
 * Мягкое холодное свечение.
 * Это часть общей поверхности, а не отдельная иллюстрация.
 */
.education__shell::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: -180px;
  left: 38%;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background: rgba(121, 208, 235, 0.075);

  filter: blur(72px);

  pointer-events: none;
}

.education__top,
.education__result,
.education__program,
.education__footer {
  position: relative;
  z-index: 2;
}

/* =========================================================
   EDUCATION — INTRO + COURSE FACTS
========================================================= */

.education__top {
  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(430px, 0.98fr);

  align-items: stretch;

  gap: clamp(46px, 5vw, 78px);
}

.education__header {
  align-self: center;

  max-width: 650px;
}

.education__eyebrow {
  margin: 0 0 16px;

  color: var(--color-blue-dark);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.105em;
}

.education__title {
  max-width: 650px;

  margin: 0;

  color: var(--color-text);

  font-size: clamp(42px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.047em;
}

.education__intro {
  max-width: 560px;

  margin: 22px 0 0;

  color: var(--color-text-secondary);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.012em;
}

/*
 * Четыре параметра курса объединены в один petrol-блок.
 *
 * Это принципиально не четыре отдельные карточки:
 * блок читается как единая premium-композиция.
 */
.education__facts {
  position: relative;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin: 0;

  border: 1px solid rgba(127, 218, 242, 0.15);
  border-radius: 27px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(76, 195, 228, 0.16) 0%,
      transparent 32%
    ),
    linear-gradient(145deg, #0a3443 0%, #082b38 48%, #061f2a 100%);

  box-shadow:
    0 24px 54px rgba(8, 43, 56, 0.18),
    0 6px 18px rgba(8, 43, 56, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);

  overflow: hidden;
}

.education__fact {
  position: relative;

  min-width: 0;
  min-height: 144px;

  padding: 28px 28px 25px;
}

.education__fact:nth-child(odd) {
  border-right: 1px solid rgba(185, 229, 244, 0.12);
}

.education__fact:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(185, 229, 244, 0.12);
}

.education__fact dt {
  margin: 0 0 19px;

  color: rgba(157, 219, 237, 0.72);

  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.education__fact dd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  gap: 7px;

  margin: 0;

  color: rgba(238, 247, 250, 0.82);

  font-size: 13px;
  line-height: 1.2;
}

.education__fact dd strong {
  color: #ffffff;

  font-size: clamp(26px, 2.7vw, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

/* =========================================================
   EDUCATION — RESULT
========================================================= */

.education__result {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  align-items: center;

  gap: 32px;

  margin-top: 46px;

  padding: 27px 0;

  border-top: 1px solid rgba(19, 82, 108, 0.11);
  border-bottom: 1px solid rgba(19, 82, 108, 0.11);
}

.education__result-label {
  color: var(--color-blue-dark);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
}

.education__result p {
  max-width: 900px;

  margin: 0;

  color: #263b45;

  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.025em;
}

/* =========================================================
   EDUCATION — PROGRAM
========================================================= */

.education__program {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  margin: 0;
  padding: 0;

  list-style: none;
}

.education-step {
  position: relative;

  min-width: 0;
  min-height: 220px;

  padding: 33px 30px 30px;
}

.education-step + .education-step {
  border-left: 1px solid rgba(19, 82, 108, 0.11);
}

.education-step__number {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  margin-bottom: 32px;
  padding: 0 10px;

  border: 1px solid rgba(39, 165, 211, 0.18);
  border-radius: var(--radius-pill);

  color: var(--color-blue-dark);

  background: rgba(232, 247, 252, 0.72);

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.075em;
}

.education-step__content h3 {
  margin: 0;

  color: #17252c;

  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.education-step__content p {
  max-width: 230px;

  margin: 12px 0 0;

  color: #586d77;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
}

/* =========================================================
   EDUCATION — FOOTER / CTA
========================================================= */

.education__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  padding-top: 32px;

  border-top: 1px solid rgba(19, 82, 108, 0.11);
}

.education__footer > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin: 0;

  color: #71848c;

  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.education__footer > p i {
  width: 3px;
  height: 3px;

  flex: 0 0 3px;

  border-radius: 50%;

  background: var(--color-blue);
}

.education__cta {
  flex: 0 0 auto;

  min-width: 220px;
}

/* =========================================================
   SCENE 04 — DESKTOP REFINEMENT
========================================================= */

@media (min-width: 1041px) {
  /*
   * Единая micro-типографика сцены.
   *
   * Eyebrow и RESULT уже используют 10px,
   * поэтому к тому же размеру приводим:
   * - подписи характеристик;
   * - номера этапов;
   * - нижнюю editorial-строку.
   */
  .education__fact dt,
  .education-step__number,
  .education__footer > p {
    font-size: 10px;
  }

  /*
   * Вторичный текст.
   *
   * 14px уже используется в общей системе DMS WORKS,
   * в том числе для основных кнопок.
   * Убираем случайные промежуточные 13 / 13.5px.
   */
  .education__fact dd,
  .education-step__content p {
    font-size: 14px;
  }

  /*
   * RESULT больше не создаёт ещё один отдельный
   * типографический размер 22px.
   *
   * 20px связывает его с заголовками программы,
   * а вес 500 сохраняет отдельный editorial-характер.
   */
  .education__result p {
    font-size: 20px;
    line-height: 1.45;
  }

  /*
   * Четыре этапа сейчас слишком высокие относительно
   * фактического количества контента.
   *
   * Уменьшаем высоту и вертикальные отступы,
   * не превращая программу в плотную таблицу.
   */
  .education-step {
    min-height: 190px;
    padding: 28px 30px 26px;
  }

  /*
   * Номер становится немного выразительнее,
   * а разрыв номер → заголовок сокращается.
   */
  .education-step__number {
    margin-bottom: 26px;
  }

  /*
   * Пояснения программы становятся нормально читаемыми
   * при 100% масштабе, но остаются вторичными
   * относительно заголовков этапов.
   */
  .education-step__content p {
    max-width: 250px;

    margin-top: 10px;

    color: var(--color-text-secondary);

    line-height: 1.52;
  }

  /*
   * Финал сцены немного собираем по вертикали.
   */
  .education__footer {
    padding-top: 26px;
  }

  /*
   * Нижняя editorial-строка больше не выглядит
   * микроскопической служебной подписью.
   */
  .education__footer > p {
    color: #657982;

    letter-spacing: 0.075em;
  }

  /*
   * Точки приводим к тому же визуальному масштабу,
   * который уже используется в фирменной системе DMS.
   */
  .education__footer > p i {
    width: 4px;
    height: 4px;

    flex-basis: 4px;
  }
}

/* =========================================================
   SCENE 04 — TABLET
========================================================= */

@media (max-width: 1040px) {
  .education {
    padding-bottom: 118px;
  }

  .education__shell {
    padding: 52px 48px;
  }

  .education__top {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .education__header {
    max-width: 720px;
  }

  /*
   * На tablet четыре характеристики становятся одной строкой.
   * Это сохраняет ощущение единой панели,
   * а не набора карточек.
   */
  .education__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .education__fact {
    min-height: 132px;

    padding: 24px 20px 22px;
  }

  .education__fact:nth-child(odd) {
    border-right: 0;
  }

  .education__fact:nth-child(-n + 2) {
    border-bottom: 0;
  }

  .education__fact + .education__fact {
    border-left: 1px solid rgba(185, 229, 244, 0.12);
  }

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

  .education-step {
    min-height: 190px;
  }

  .education-step:nth-child(3) {
    border-top: 1px solid rgba(19, 82, 108, 0.11);
    border-left: 0;
  }

  .education-step:nth-child(4) {
    border-top: 1px solid rgba(19, 82, 108, 0.11);
  }
}

/* =========================================================
   SCENE 04 — MOBILE
========================================================= */

@media (max-width: 680px) {
  .education {
    /*
     * Scene 03 → Scene 04:
     * 22px снизу Scene 03 + 10px сверху Scene 04.
     *
     * Теперь после Scene 04 появляется Scene 05,
     * поэтому снизу тоже оставляем системные 22px.
     *
     * Scene 04 → Scene 05:
     * 22px + 10px = те же 32px.
     */
    padding: 10px 0 22px;

    scroll-margin-top: calc(var(--header-height) + 12px);
  }

  .education__shell {
    padding: 34px 18px 28px;

    border-radius: 26px;
  }

  .education__shell::before {
    right: -160px;
    bottom: -150px;

    width: 390px;
    height: 390px;

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    /*
     * На desktop дуга остаётся без изменений.
     * Только на mobile снижаем её визуальную силу примерно на 18%.
     */
    opacity: 0.82;
  }

  .education__shell::after {
    top: -90px;
    left: 34%;

    width: 250px;
    height: 250px;

    filter: blur(52px);
  }

  .education__top {
    gap: 27px;
  }

  .education__eyebrow {
    margin-bottom: 10px;

    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .education__title {
    max-width: 96%;

    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.06;
    letter-spacing: -0.047em;
  }

  .education__intro {
    width: 94%;
    max-width: 94%;

    margin-top: 15px;

    font-size: 14px;
    line-height: 1.52;
  }

  /*
   * На телефоне сохраняем панель 2 × 2.
   * Не превращаем её в четыре вертикальные карточки.
   */
  .education__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-radius: 22px;
  }

  .education__fact {
    min-height: 116px;

    padding: 20px 16px 18px;
  }

  .education__fact:nth-child(odd) {
    border-right: 1px solid rgba(185, 229, 244, 0.12);
  }

  .education__fact:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(185, 229, 244, 0.12);
  }

  .education__fact + .education__fact {
    border-left: 0;
  }

  .education__fact dt {
    margin-bottom: 14px;

    /*
     * ПРОДОЛЖИТЕЛЬНОСТЬ / ПРАКТИКА /
     * ФОРМАТ ГРУППЫ / ФОРМАТ.
     *
     * Было около 0.72.
     */
    color: rgba(183, 228, 241, 0.86);

    font-size: 8px;
    letter-spacing: 0.07em;
  }

  .education__fact dd {
    gap: 5px;

    /*
     * недели / занятий / человека.
     * Было около 0.82.
     */
    color: rgba(243, 249, 251, 0.93);

    font-size: 11px;
  }

  .education__fact dd strong {
    /*
     * Крупные 4 / 8 / 3–4 / офлайн
     * уже идеальны — цвет не меняем.
     */
    font-size: clamp(24px, 7.5vw, 30px);
  }

  .education__result {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 30px;

    padding: 23px 0;
  }

  .education__result-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .education__result p {
    max-width: 96%;

    font-size: 16px;
    line-height: 1.48;
  }

  /*
   * На mobile программа становится вертикальной editorial-лентой.
   * Номер остаётся отдельной колонкой,
   * поэтому это визуально не обычный accordion/list.
   */
  .education__program {
    grid-template-columns: 1fr;
  }

  .education-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);

    gap: 16px;

    min-height: 0;

    /*
     * Было 24px.
     *
     * Уменьшение до 21px = примерно 12.5%.
     * Программа становится собраннее,
     * но сохраняет достаточный premium-воздух.
     */
    padding: 21px 0;
  }

  .education-step + .education-step,
  .education-step:nth-child(3),
  .education-step:nth-child(4) {
    border-top: 1px solid rgba(19, 82, 108, 0.11);
    border-left: 0;
  }

  .education-step__number {
    align-self: start;
    justify-content: center;

    min-height: 28px;

    margin: 1px 0 0;
    padding: 0;
  }

  .education-step__content h3 {
    font-size: 18px;
  }

  .education-step__content p {
    max-width: 94%;

    margin-top: 8px;

    font-size: 13px;
    line-height: 1.5;
  }

  /* =========================================================
     EDUCATION — MOBILE FOOTER / CTA
  ========================================================= */

  /*
   * Финал сцены остаётся компактным:
   * editorial-строка сверху,
   * CTA ниже.
   */
  .education__footer {
    align-items: stretch;
    flex-direction: column;

    gap: 18px;

    padding-top: 23px;
  }

  /*
   * ОФЛАЙН • ПРАКТИКА • ГОТОВЫЙ ПРОЕКТ
   *
   * Было 8.5px.
   * Переходим на системные 9px:
   * строка становится заметнее,
   * но не превращается в основной текст.
   *
   * Весь ряд центрируем относительно сцены.
   */
  .education__footer > p {
    width: 100%;

    justify-content: center;

    gap: 9px;

    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0.075em;

    text-align: center;
  }

  /*
   * Финальный CTA больше НЕ растягивается
   * на 84% ширины экрана.
   *
   * Капсула строится вокруг содержимого:
   *
   * текст + воздух + круглая action-кнопка.
   *
   * По принципу компактного premium CTA,
   * как в референсе "Посмотреть".
   */
  /* =========================================================
     EDUCATION CTA — MOBILE ACTION SYSTEM
     Scene 03 = эталон геометрии
  ========================================================= */

  /*
   * Капсула Scene 04 получает точно ту же
   * вертикальную геометрию, что "Смотреть проект":
   *
   * - тот же gap;
   * - те же внутренние отступы;
   * - тот же расчёт минимальной высоты;
   * - тот же размер текста.
   *
   * Длина по-прежнему определяется содержимым.
   */
  .education__cta {
    width: fit-content;
    max-width: calc(100% - 24px);
    min-width: 0;

    min-height: calc(var(--round-arrow-size) + 8px);

    align-self: center;

    gap: 10px;

    padding: 5px 5px 5px 14px;

    font-size: 14px;
    font-weight: 650;
    line-height: 1;

    white-space: nowrap;
  }

  /*
   * Круг Scene 03 является эталоном.
   *
   * Здесь повторяем не только его диаметр,
   * но и border / поверхность / глубину.
   */
  .education__cta .button__arrow {
    width: var(--round-arrow-size);
    height: var(--round-arrow-size);

    flex: 0 0 var(--round-arrow-size);

    border: 1px solid rgba(127, 218, 242, 0.18);

    color: #147b9f;

    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(245, 251, 253, 0.98) 100%
    );

    box-shadow:
      0 5px 14px rgba(1, 16, 22, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }

  /*
   * Геометрия стрелки полностью повторяет
   * стрелку Scene 03.
   */
  .education__cta .button__arrow::before {
    width: calc(var(--round-arrow-glyph-size) * 0.95);
    height: 2px;

    transform: translate(-57%, -50%);
  }

  .education__cta .button__arrow::after {
    width: calc(var(--round-arrow-glyph-size) * 0.42);
    height: calc(var(--round-arrow-glyph-size) * 0.42);

    border-top-width: 2px;
    border-right-width: 2px;

    transform: translate(8%, -50%) rotate(45deg);
  }
}

/* =========================================================
   SCENE 05 — BUSINESS SOLUTIONS
========================================================= */

.business {
  padding: 0 0 118px;

  scroll-margin-top: calc(var(--header-height) + 24px);
}

.business__shell {
  position: relative;
  isolation: isolate;

  padding: clamp(50px, 5vw, 72px);

  border: 1px solid rgba(127, 218, 242, 0.12);
  border-radius: var(--radius-card);

  color: #ffffff;

  background:
    radial-gradient(
      circle at 92% 6%,
      rgba(57, 181, 216, 0.17) 0%,
      rgba(57, 181, 216, 0.055) 27%,
      transparent 48%
    ),
    radial-gradient(
      circle at 4% 96%,
      rgba(39, 165, 211, 0.09) 0%,
      transparent 35%
    ),
    linear-gradient(145deg, #061c25 0%, #082630 42%, #092e3b 72%, #071f2a 100%);

  box-shadow:
    0 30px 78px rgba(5, 30, 40, 0.18),
    0 7px 22px rgba(5, 30, 40, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);

  overflow: hidden;
}

/*
 * Фирменная сегментированная дуга.
 *
 * В отличие от Scene 03 и Scene 04,
 * здесь она расположена в верхней левой части.
 */
.business__shell::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: -360px;
  left: -245px;

  width: 650px;
  height: 650px;

  border-radius: 50%;

  background: conic-gradient(
    from 36deg,
    transparent 0deg 72deg,
    rgba(57, 181, 216, 0.045) 72deg 164deg,
    rgba(127, 218, 242, 0.12) 164deg 202deg,
    rgba(39, 165, 211, 0.055) 202deg 258deg,
    transparent 258deg 360deg
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 66px),
    #000 calc(100% - 65px)
  );

  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 66px),
    #000 calc(100% - 65px)
  );

  opacity: 0.88;

  pointer-events: none;
}

/*
 * Очень мягкое холодное свечение справа.
 */
.business__shell::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: 18%;
  right: -170px;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background: rgba(64, 190, 224, 0.075);

  filter: blur(86px);

  pointer-events: none;
}

.business__top,
.business__services,
.business__flow,
.business__footer {
  position: relative;
  z-index: 2;
}

/* =========================================================
   BUSINESS — INTRO
========================================================= */

.business__top {
  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(360px, 0.92fr);

  align-items: end;

  gap: clamp(52px, 6vw, 90px);
}

.business__header {
  max-width: 720px;
}

.business__eyebrow {
  margin: 0 0 16px;

  color: #7fdaf2;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.105em;
}

.business__title {
  max-width: 720px;

  margin: 0;

  color: #ffffff;

  font-size: clamp(42px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.047em;
}

.business__intro {
  max-width: 650px;

  margin: 22px 0 0;

  color: rgba(222, 237, 242, 0.78);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.012em;
}

/*
 * Короткая позиционирующая фраза справа.
 *
 * Не карточка — editorial-блок с одной линией.
 */
.business__statement {
  max-width: 430px;

  margin: 0 0 5px auto;

  padding: 25px 0 5px 34px;

  border-left: 1px solid rgba(185, 229, 244, 0.16);
}

.business__statement span,
.business__statement strong {
  display: block;
}

.business__statement span {
  color: rgba(184, 218, 229, 0.7);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.business__statement strong {
  margin-top: 7px;

  color: #ffffff;

  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

/* =========================================================
   BUSINESS — TWO CAPABILITIES
========================================================= */

.business__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin-top: 52px;

  border-top: 1px solid rgba(185, 229, 244, 0.13);
  border-bottom: 1px solid rgba(185, 229, 244, 0.13);
}

.business-service {
  min-width: 0;

  padding: 38px 48px 42px;
}

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

.business-service:last-child {
  padding-right: 0;

  border-left: 1px solid rgba(185, 229, 244, 0.13);
}

/* =========================================================
   INTERNAL ANCHORS — STICKY HEADER OFFSET
========================================================= */

#business-contact,
#course-contact {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

.business-service__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 22px;
}

.business-service__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  min-height: 28px;

  padding: 0 10px;

  border: 1px solid rgba(127, 218, 242, 0.2);
  border-radius: var(--radius-pill);

  color: #7fdaf2;

  background: rgba(127, 218, 242, 0.055);

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.075em;
}

.business-service__label {
  color: rgba(153, 218, 237, 0.74);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.09em;
}

.business-service h3 {
  max-width: 480px;

  margin: 0;

  color: #ffffff;

  font-size: 24px;
  font-weight: 600;
  line-height: 1.23;
  letter-spacing: -0.035em;
}

.business-service__description {
  max-width: 540px;

  margin: 14px 0 0;

  color: rgba(226, 240, 245, 0.84);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
}

.business-service__list {
  display: grid;

  gap: 0;

  margin: 28px 0 0;
  padding: 0;

  list-style: none;

  border-bottom: 1px solid rgba(185, 229, 244, 0.1);
}

.business-service__list li {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 47px;

  padding: 12px 0 12px 18px;

  border-top: 1px solid rgba(185, 229, 244, 0.1);

  color: rgba(239, 248, 251, 0.91);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
}

.business-service__list li::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #51bada;

  box-shadow: 0 0 0 3px rgba(81, 186, 218, 0.08);

  transform: translateY(-50%);
}

/* =========================================================
   BUSINESS — PROCESS
========================================================= */

.business__flow {
  padding: 35px 0 37px;

  border-bottom: 1px solid rgba(185, 229, 244, 0.13);
}

.business__flow-label {
  margin: 0;

  color: #7fdaf2;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
}

.business-flow {
  position: relative;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 0;

  margin: 28px 0 0;
  padding: 0;

  list-style: none;
}

/*
 * Тонкая линия связывает четыре шага
 * в одну систему, а не четыре карточки.
 */
.business-flow::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 4px;
  left: 4px;
  right: calc(25% - 4px);

  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(127, 218, 242, 0.24) 0%,
    rgba(127, 218, 242, 0.1) 100%
  );
}

.business-flow li {
  position: relative;
  z-index: 1;

  min-width: 0;

  padding-right: 30px;
}

.business-flow__dot {
  display: block;

  width: 9px;
  height: 9px;

  border: 2px solid #7fdaf2;
  border-radius: 50%;

  background: #082630;

  box-shadow:
    0 0 0 4px rgba(127, 218, 242, 0.055),
    0 0 16px rgba(127, 218, 242, 0.08);
}

.business-flow__number {
  display: block;

  margin-top: 18px;

  color: rgba(133, 203, 223, 0.58);

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.business-flow strong {
  display: block;

  margin-top: 9px;

  color: #ffffff;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.business-flow small {
  display: block;

  max-width: 190px;

  margin-top: 6px;

  color: rgba(200, 223, 231, 0.65);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* =========================================================
   BUSINESS — FOOTER / CTA
========================================================= */

.business__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 32px;

  padding-top: 32px;
}

.business__benefits {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin: 0;

  color: rgba(176, 210, 221, 0.68);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.075em;
}

.business__benefits i {
  width: 4px;
  height: 4px;

  flex: 0 0 4px;

  border-radius: 50%;

  background: #51bada;
}

/*
 * CTA строится по той же геометрии,
 * что "Смотреть проект" в Scene 03.
 *
 * Меняется только текст.
 */
.business__cta {
  position: relative;

  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  min-height: calc(var(--round-arrow-size) + 10px);

  flex: 0 0 auto;

  gap: 12px;

  padding: 5px 6px 5px 16px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);

  color: rgba(250, 252, 253, 0.98);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.085) 0%,
    rgba(255, 255, 255, 0.035) 100%
  );

  box-shadow:
    0 8px 22px rgba(2, 16, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.business__cta-icon {
  position: relative;

  display: block;

  width: var(--round-arrow-size);
  height: var(--round-arrow-size);

  flex: 0 0 var(--round-arrow-size);

  border: 1px solid rgba(127, 218, 242, 0.18);
  border-radius: 50%;

  color: #147b9f;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(245, 251, 253, 0.98) 100%
  );

  box-shadow:
    0 5px 14px rgba(1, 16, 22, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  font-size: 0;
  line-height: 0;

  overflow: hidden;

  transform: translate3d(0, 0, 0);

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

/*
 * Desktop-геометрия стрелки повторяет
 * Scene 03.
 *
 * На mobile эти псевдоэлементы отключит
 * общий CANONICAL SYSTEM ниже.
 */
.business__cta-icon::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: calc(var(--round-arrow-glyph-size) * 0.95);
  height: 2px;

  border-radius: 999px;

  background: currentColor;

  transform: translate(-57%, -50%);
}

.business__cta-icon::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: calc(var(--round-arrow-glyph-size) * 0.42);
  height: calc(var(--round-arrow-glyph-size) * 0.42);

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform: translate(8%, -50%) rotate(45deg);
}

.business__cta:hover {
  border-color: rgba(255, 255, 255, 0.26);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );

  box-shadow:
    0 12px 28px rgba(2, 16, 22, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);

  transform: translateY(-1px);
}

.business__cta:hover .business__cta-icon {
  border-color: rgba(127, 218, 242, 0.24);

  box-shadow:
    0 7px 18px rgba(1, 16, 22, 0.15),
    inset 0 1px 0 #ffffff;

  transform: translate3d(1px, 0, 0);
}

.business__cta:active {
  transform: translateY(0);
}

.business__cta:active .business__cta-icon {
  transform: translate3d(2px, 0, 0) scale(0.97);
}

.business__cta:focus-visible {
  outline: 2px solid rgba(127, 218, 242, 0.75);

  outline-offset: 4px;

  border-radius: var(--radius-pill);
}

/* =========================================================
   SCENE 05 — TABLET
========================================================= */

@media (max-width: 1040px) {
  .business {
    padding-bottom: 118px;
  }

  .business__shell {
    padding: 52px 48px;
  }

  .business__top {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .business__header {
    max-width: 760px;
  }

  .business__statement {
    width: min(100%, 620px);
    max-width: 620px;

    margin: 0;

    padding: 24px 0 0;

    border-top: 1px solid rgba(185, 229, 244, 0.14);
    border-left: 0;
  }

  .business__services {
    margin-top: 42px;
  }

  .business-service {
    padding: 34px 34px 37px;
  }

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

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

  .business-service h3 {
    font-size: 22px;
  }

  .business-flow li {
    padding-right: 22px;
  }
}

/* =========================================================
   SCENE 05 — MOBILE
========================================================= */

@media (max-width: 680px) {
  /*
   * Scene 04 → Scene 05:
   * 22px снизу Scene 04 + 10px сверху Scene 05.
   *
   * Итого тот же эталонный разрыв 32px.
   */
  .business {
    /*
     * Scene 05 → Scene 06:
     * 22px снизу + 10px сверху следующей сцены = 32px.
     */
    padding: 10px 0 22px;

    scroll-margin-top: calc(var(--header-height) + 12px);
  }

  .business__shell {
    padding: 34px 18px 20px;

    border-radius: 26px;
  }

  .business__shell::before {
    top: -155px;
    left: -150px;

    width: 390px;
    height: 390px;

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    opacity: 0.78;
  }

  .business__shell::after {
    top: 15%;
    right: -120px;

    width: 270px;
    height: 270px;

    filter: blur(58px);
  }

  /* INTRO */

  .business__top {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .business__eyebrow {
    margin-bottom: 10px;

    /*
     * BUSINESS SOLUTIONS:
     * небольшое повышение светлоты.
     */
    color: #9be3f4;

    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .business__title {
    max-width: 96%;

    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.06;
  }

  .business__intro {
    width: 95%;
    max-width: 95%;

    margin-top: 15px;

    /*
     * Было около 0.78.
     */
    color: rgba(230, 241, 245, 0.88);

    font-size: 14px;
    line-height: 1.52;
  }

  .business__statement {
    width: 100%;
    max-width: 100%;

    padding: 19px 0 0;

    border-top-color: rgba(185, 229, 244, 0.13);
  }

  .business__statement span {
    /*
     * "Не просто сайт."
     * Было rgba(..., 0.70).
     */
    color: rgba(207, 230, 237, 0.84);

    font-size: 13px;
  }

  .business__statement strong {
    margin-top: 5px;

    font-size: 20px;
    line-height: 1.28;
  }

  /* TWO CAPABILITIES */

  .business__services {
    grid-template-columns: 1fr;

    margin-top: 30px;
  }

  /*
   * Сохраняем внутренний воздух внутри каждого направления,
   * но убираем избыточную вертикальную растянутость.
   *
   * Было:
   * 27px сверху / 29px снизу.
   *
   * Стало:
   * 23px / 23px.
   *
   * Переход между двумя направлениями становится
   * примерно на 18% компактнее.
   */
  .business-service,
  .business-service:first-child,
  .business-service:last-child {
    padding: 23px 0;
  }

  .business-service:last-child {
    border-top: 1px solid rgba(185, 229, 244, 0.13);
    border-left: 0;
  }

  .business-service__head {
    gap: 10px;

    margin-bottom: 18px;
  }

  .business-service__number {
    min-width: 38px;
    min-height: 27px;

    font-size: 9px;
  }

  .business-service__label {
    /*
     * WEB DEVELOPMENT / AI AUTOMATION.
     * Чуть светлее исходного rgba(..., 0.74).
     */
    color: rgba(183, 229, 242, 0.88);

    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .business-service h3 {
    max-width: 96%;

    font-size: 21px;
    line-height: 1.24;
  }

  .business-service__description {
    width: 95%;
    max-width: 95%;

    margin-top: 11px;

    /*
     * Было 0.84.
     * Основное описание направления теперь увереннее.
     */
    color: rgba(233, 243, 247, 0.91);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
  }

  .business-service__list {
    margin-top: 20px;
  }

  /*
   * Корпоративные сайты / Онлайн-запись /
   * AI-ассистенты и т.д.
   *
   * Геометрия строк остаётся прежней.
   */
  .business-service__list li {
    min-height: 44px;

    padding: 11px 0 11px 17px;

    color: rgba(244, 250, 252, 0.95);

    font-size: 13px;
  }

  /* =========================================================
     PROCESS
  ========================================================= */

  /*
   * Верхний переход к "КАК ЭТО РАБОТАЕТ"
   * тоже сокращаем примерно на 15–20%.
   *
   * Нижнюю часть процесса почти не трогаем,
   * потому что сама вертикальная цепочка сейчас удачная.
   */
  .business__flow {
    padding: 23px 0 29px;
  }

  .business__flow-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .business-flow {
    grid-template-columns: 1fr;

    margin-top: 22px;
  }

  /*
   * Горизонтальная desktop-линия
   * становится вертикальным маршрутом.
   */
  .business-flow::before {
    top: 5px;
    bottom: 30px;
    left: 4px;
    right: auto;

    width: 1px;
    height: auto;

    background: linear-gradient(
      180deg,
      rgba(127, 218, 242, 0.24) 0%,
      rgba(127, 218, 242, 0.08) 100%
    );
  }

  .business-flow li {
    min-height: 0;

    padding: 0 0 22px 31px;
  }

  .business-flow li:last-child {
    padding-bottom: 0;
  }

  .business-flow__dot {
    position: absolute;

    top: 2px;
    left: 0;
  }

  .business-flow__number {
    margin-top: 0;

    /*
     * Было около 0.58 из desktop-стиля.
     * Номер остаётся вторичным, но уже читается уверенно.
     */
    color: rgba(165, 218, 233, 0.78);

    font-size: 9px;
  }

  .business-flow strong {
    margin-top: 7px;

    font-size: 17px;
  }

  /*
   * Пояснение каждого шага.
   * Размер не увеличиваем.
   */
  .business-flow small {
    max-width: 90%;

    margin-top: 4px;

    /*
     * Было 0.74.
     * Здесь делаем самое заметное усиление Scene 05.
     */
    color: rgba(226, 239, 243, 0.87);

    font-size: 13px;
  }

  /* FOOTER */

  .business__footer {
    align-items: stretch;
    flex-direction: column;

    gap: 18px;

    padding-top: 24px;
  }

  .business__benefits {
    width: 100%;

    justify-content: center;

    gap: 9px;

    /*
     * МЕНЬШЕ РУТИНЫ / БЫСТРЕЕ ОБРАБОТКА /
     * БОЛЬШЕ КОНТРОЛЯ тоже больше не должны
     * проваливаться в тёмный фон.
     */
    color: rgba(211, 231, 237, 0.83);

    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0.07em;

    text-align: center;
  }

  /*
   * Капсула — те же пропорции,
   * что "Смотреть проект" на mobile.
   */
  .business__cta {
    width: fit-content;
    max-width: calc(100% - 24px);

    min-height: calc(var(--round-arrow-size) + 8px);

    align-self: center;

    gap: 10px;

    padding: 5px 5px 5px 14px;

    font-size: 14px;
  }
}

/* =========================================================
   SCENE 05 — SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  /*
   * Small mobile:
   * 22px снизу Scene 04 + 8px сверху Scene 05 = 30px.
   */
  .business {
    padding-top: 8px;
  }

  .business__shell {
    padding: 30px 14px 16px;

    border-radius: 22px;
  }

  .business__title {
    max-width: 98%;

    font-size: clamp(26px, 8vw, 30px);
  }

  .business__intro {
    width: 96%;
    max-width: 96%;
  }

  .business__statement strong {
    font-size: 19px;
  }

  .business-service h3 {
    font-size: 20px;
  }

  .business__benefits {
    gap: 7px;

    font-size: 9px;
  }
}

/* =========================================================
   SCENE 06 — ABOUT DMS WORKS
========================================================= */

.about {
  padding: 0 0 118px;

  scroll-margin-top: calc(var(--header-height) + 24px);
}

.about__shell {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(360px, 0.92fr);

  align-items: center;

  gap: clamp(52px, 6vw, 96px);

  min-height: 390px;

  padding: clamp(48px, 5vw, 70px);

  border: 1px solid rgba(19, 82, 108, 0.1);
  border-radius: var(--radius-card);

  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(39, 165, 211, 0.105) 0%,
      rgba(39, 165, 211, 0.035) 27%,
      transparent 47%
    ),
    linear-gradient(145deg, #ffffff 0%, #fbfdfe 50%, #f1f9fc 100%);

  box-shadow:
    0 24px 66px rgba(24, 63, 80, 0.085),
    0 5px 16px rgba(20, 94, 124, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  overflow: hidden;
}

/*
 * Фирменная сегментированная дуга.
 *
 * Scene 04 — дуга снизу справа.
 * Scene 05 — сверху слева.
 * Scene 06 получает собственную композицию:
 * широкая спокойная дуга входит справа снизу.
 */
.about__shell::before {
  content: "";

  position: absolute;
  z-index: 0;

  right: -170px;
  bottom: -315px;

  width: 560px;
  height: 560px;

  border-radius: 50%;

  background: conic-gradient(
    from 214deg,
    transparent 0deg 58deg,
    rgba(39, 165, 211, 0.05) 58deg 150deg,
    rgba(39, 165, 211, 0.12) 150deg 192deg,
    rgba(12, 91, 121, 0.15) 192deg 220deg,
    rgba(39, 165, 211, 0.065) 220deg 266deg,
    transparent 266deg 360deg
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 58px),
    #000 calc(100% - 57px)
  );

  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 58px),
    #000 calc(100% - 57px)
  );

  opacity: 0.76;

  transform: rotate(-5deg);

  pointer-events: none;
}

/*
 * Едва заметное холодное световое поле.
 * Оно не должно восприниматься отдельным объектом.
 */
.about__shell::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: -100px;
  right: 8%;

  width: 340px;
  height: 340px;

  border-radius: 50%;

  background: rgba(74, 191, 222, 0.075);

  filter: blur(82px);

  pointer-events: none;
}

.about__content,
.about__statement {
  position: relative;
  z-index: 2;
}

/* =========================================================
   ABOUT — CONTENT
========================================================= */

.about__content {
  max-width: 730px;
}

.about__eyebrow {
  margin: 0 0 16px;

  color: var(--color-blue-dark);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.105em;
}

.about__title {
  /*
   * 11.2em подобрано относительно самого размера шрифта.
   *
   * На desktop:
   * "Цифровые продукты," помещается,
   * а следующее "AI" уже переходит на вторую строку.
   *
   * Поэтому получаем:
   *
   * Цифровые продукты,
   * AI и образование
   *
   * без <br>, жёстких pixel-width и дублирования HTML.
   */
  max-width: 11.2em;

  margin: 0;

  color: var(--color-text);

  /*
   * Та же основная desktop-типографика,
   * что у Scene 04 и Scene 05.
   */
  font-size: clamp(42px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.047em;

  text-wrap: balance;
}

.about__intro {
  max-width: 640px;

  margin: 22px 0 0;

  color: var(--color-text-secondary);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.012em;
}

/* =========================================================
   ABOUT — BRAND STATEMENT
========================================================= */

.about__statement {
  width: 100%;
  max-width: 460px;

  margin: 0 0 2px auto;
  padding: 27px 0 0;

  color: var(--color-text);
}

/*
 * Вместо очередной карточки или вертикальной границы —
 * короткий фирменный штрих.
 */
.about__statement::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  /*
   * Удлинённый editorial-штрих.
   *
   * 82px уже воспринимаются как осознанный
   * графический элемент, а не короткий обрывок.
   */
  width: 82px;
  height: 2px;

  border-radius: var(--radius-pill);

  background: var(--color-blue-dark);
}

.about__statement span,
.about__statement strong {
  display: block;
}

.about__statement span {
  /*
   * Чуть выше контраст, чем у обычного muted-текста.
   * Размер и вес не меняем — сохраняем вторичную иерархию.
   */
  color: #6e8089;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.about__statement strong {
  max-width: 430px;

  margin-top: 8px;

  color: var(--color-text);

  font-size: 28px;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.038em;
}

/* =========================================================
   SCENE 06 — TABLET
========================================================= */

@media (max-width: 1040px) {
  .about {
    padding-bottom: 118px;
  }

  .about__shell {
    grid-template-columns: 1fr;

    gap: 32px;

    min-height: 0;

    padding: 52px 48px;
  }

  .about__content {
    max-width: 760px;
  }

  .about__statement {
    width: min(100%, 620px);
    max-width: 620px;

    margin: 0;
  }

  .about__title {
    max-width: 720px;

    font-size: clamp(40px, 5vw, 48px);
  }
}

/* =========================================================
   SCENE 06 — MOBILE
========================================================= */

@media (max-width: 680px) {
  /*
   * Scene 05 → Scene 06:
   *
   * Scene 05 снизу = 22px;
   * Scene 06 сверху = 10px.
   *
   * Итого стандартные 32px.
   */
  .about {
    /*
     * Scene 06 → Scene 07:
     * 22px снизу + 10px сверху следующей сцены = 32px.
     */
    padding: 10px 0 22px;

    scroll-margin-top: calc(var(--header-height) + 12px);
  }

  .about__shell {
    grid-template-columns: 1fr;

    gap: 26px;

    min-height: 0;

    padding: 34px 18px 30px;

    border-radius: 26px;
  }

  .about__shell::before {
    right: -130px;
    bottom: -165px;

    width: 360px;
    height: 360px;

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    opacity: 0.68;
  }

  .about__shell::after {
    top: -75px;
    right: -80px;

    width: 240px;
    height: 240px;

    filter: blur(58px);
  }

  .about__eyebrow {
    margin-bottom: 10px;

    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .about__title {
    max-width: 96%;

    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.06;
  }

  .about__intro {
    width: 95%;
    max-width: 95%;

    margin-top: 15px;

    font-size: 14px;
    line-height: 1.55;
  }

  /*
   * На mobile брендовая фраза становится отдельной
   * editorial-паузой под основным текстом.
   */
  .about__statement {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 22px 0 0;

    border-top: 1px solid rgba(19, 82, 108, 0.11);
  }

  .about__statement::before {
    display: none;
  }

  .about__statement span {
    font-size: 13px;
  }

  .about__statement strong {
    max-width: 95%;

    margin-top: 6px;

    font-size: 20px;
    line-height: 1.28;
  }
}

/* =========================================================
   SCENE 06 — SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  /*
   * Scene 05 → Scene 06:
   * 22px + 8px = 30px.
   */
  .about {
    padding-top: 8px;
  }

  .about__shell {
    padding: 30px 14px 26px;

    border-radius: 22px;
  }

  .about__title {
    max-width: 98%;

    font-size: clamp(26px, 8vw, 30px);
  }

  .about__intro {
    width: 96%;
    max-width: 96%;
  }

  .about__statement strong {
    font-size: 19px;
  }
}

/* =========================================================
   SCENE 07 — FINAL CTA / NEXT STEP
========================================================= */

.contact {
  /*
   * Scene 07 → Footer.
   *
   * Footer является служебным завершением страницы,
   * поэтому здесь нужен меньший интервал,
   * чем между полноценными сценами.
   */
  padding: 0 0 56px;

  scroll-margin-top: calc(var(--header-height) + 24px);
}

.contact__shell {
  position: relative;
  isolation: isolate;

  padding: clamp(52px, 5vw, 72px);

  border: 1px solid rgba(127, 218, 242, 0.12);
  border-radius: var(--radius-card);

  color: #ffffff;

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(74, 198, 229, 0.15) 0%,
      rgba(74, 198, 229, 0.05) 27%,
      transparent 48%
    ),
    radial-gradient(
      circle at 6% 98%,
      rgba(39, 165, 211, 0.07) 0%,
      transparent 36%
    ),
    linear-gradient(145deg, #061c25 0%, #082630 45%, #0a3140 76%, #071f2a 100%);

  box-shadow:
    0 30px 78px rgba(5, 30, 40, 0.18),
    0 7px 22px rgba(5, 30, 40, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);

  overflow: hidden;
}

/*
 * Одна большая фирменная дуга.
 *
 * Scene 07 намеренно проще Scene 05:
 * никакой дополнительной инфографики,
 * только один спокойный графический жест.
 */
.contact__shell::before {
  content: "";

  position: absolute;
  z-index: 0;

  right: -185px;
  bottom: -330px;

  width: 610px;
  height: 610px;

  border-radius: 50%;

  background: conic-gradient(
    from 206deg,
    transparent 0deg 62deg,
    rgba(57, 181, 216, 0.045) 62deg 148deg,
    rgba(127, 218, 242, 0.105) 148deg 192deg,
    rgba(57, 181, 216, 0.16) 192deg 220deg,
    rgba(127, 218, 242, 0.055) 220deg 270deg,
    transparent 270deg 360deg
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 64px),
    #000 calc(100% - 63px)
  );

  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 64px),
    #000 calc(100% - 63px)
  );

  opacity: 0.76;

  transform: rotate(-6deg);

  pointer-events: none;
}

/*
 * Едва заметное холодное свечение
 * удерживает глубину тёмной поверхности.
 */
.contact__shell::after {
  content: "";

  position: absolute;
  z-index: 0;

  top: -120px;
  right: 18%;

  width: 380px;
  height: 380px;

  border-radius: 50%;

  background: rgba(68, 192, 224, 0.07);

  filter: blur(88px);

  pointer-events: none;
}

.contact__header,
.contact__choices {
  position: relative;
  z-index: 2;
}

/* =========================================================
   CONTACT — HEADER
========================================================= */

.contact__header {
  max-width: 820px;
}

.contact__eyebrow {
  margin: 0 0 16px;

  color: #7fdaf2;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.105em;
}

.contact__title {
  max-width: 760px;

  margin: 0;

  color: #ffffff;

  font-size: clamp(42px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.047em;
}

.contact__intro {
  max-width: 620px;

  margin: 20px 0 0;

  color: rgba(218, 235, 241, 0.76);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.012em;
}

/* =========================================================
   CONTACT — TWO ROUTES
========================================================= */

.contact__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin-top: 48px;

  border-top: 1px solid rgba(185, 229, 244, 0.13);
}

.contact-choice {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 38px 52px 8px;
}

.contact-choice:first-child {
  padding-left: 0;
}

.contact-choice:last-child {
  padding-right: 0;

  border-left: 1px solid rgba(185, 229, 244, 0.13);
}

.contact-choice__label {
  margin: 0;

  color: #7fdaf2;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.095em;
}

.contact-choice h3 {
  max-width: 500px;

  margin: 18px 0 0;

  color: #ffffff;

  font-size: 24px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.035em;
}

.contact-choice__description {
  max-width: 520px;

  margin: 14px 0 0;

  color: rgba(218, 235, 241, 0.76);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.012em;
}

/* =========================================================
   CONTACT — CTA CAPSULE
========================================================= */

/*
 * Та же геометрия капсулы,
 * что используется в Scene 05
 * и согласована с эталоном Scene 03.
 */
.contact-choice__cta {
  position: relative;

  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  min-height: calc(var(--round-arrow-size) + 10px);

  align-self: flex-start;

  gap: 12px;

  margin-top: 28px;

  padding: 5px 6px 5px 16px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);

  color: rgba(250, 252, 253, 0.98);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.085) 0%,
    rgba(255, 255, 255, 0.035) 100%
  );

  box-shadow:
    0 8px 22px rgba(2, 16, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.contact-choice__icon {
  position: relative;

  display: block;

  width: var(--round-arrow-size);
  height: var(--round-arrow-size);

  flex: 0 0 var(--round-arrow-size);

  border: 1px solid rgba(127, 218, 242, 0.18);
  border-radius: 50%;

  color: #147b9f;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(245, 251, 253, 0.98) 100%
  );

  box-shadow:
    0 5px 14px rgba(1, 16, 22, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  font-size: 0;
  line-height: 0;

  overflow: hidden;

  transform: translate3d(0, 0, 0);

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

/*
 * Desktop-стрелка повторяет геометрию
 * Scene 03 / Scene 05.
 *
 * На mobile её отключит общий
 * CANONICAL SYSTEM ниже.
 */
.contact-choice__icon::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: calc(var(--round-arrow-glyph-size) * 0.95);
  height: 2px;

  border-radius: 999px;

  background: currentColor;

  transform: translate(-57%, -50%);
}

.contact-choice__icon::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: calc(var(--round-arrow-glyph-size) * 0.42);
  height: calc(var(--round-arrow-glyph-size) * 0.42);

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform: translate(8%, -50%) rotate(45deg);
}

.contact-choice__cta:hover {
  border-color: rgba(255, 255, 255, 0.26);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );

  box-shadow:
    0 12px 28px rgba(2, 16, 22, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);

  transform: translateY(-1px);
}

.contact-choice__cta:hover .contact-choice__icon {
  border-color: rgba(127, 218, 242, 0.24);

  box-shadow:
    0 7px 18px rgba(1, 16, 22, 0.15),
    inset 0 1px 0 #ffffff;

  transform: translate3d(1px, 0, 0);
}

.contact-choice__cta:active {
  transform: translateY(0);
}

.contact-choice__cta:active .contact-choice__icon {
  transform: translate3d(2px, 0, 0) scale(0.97);
}

.contact-choice__cta:focus-visible {
  outline: 2px solid rgba(127, 218, 242, 0.75);

  outline-offset: 4px;

  border-radius: var(--radius-pill);
}

/* =========================================================
   SCENE 07 — TABLET
========================================================= */

@media (max-width: 1040px) {
  .contact {
    padding-bottom: 56px;
  }

  .contact__shell {
    padding: 52px 48px;
  }

  .contact__title {
    max-width: 720px;

    font-size: clamp(40px, 5vw, 48px);
  }

  .contact__choices {
    margin-top: 42px;
  }

  .contact-choice {
    padding: 34px 34px 6px;
  }

  .contact-choice:first-child {
    padding-left: 0;
  }

  .contact-choice:last-child {
    padding-right: 0;
  }

  .contact-choice h3 {
    font-size: 22px;
  }

  .contact-choice__description {
    font-size: 15px;
  }
}

/* =========================================================
   SCENE 07 — MOBILE
========================================================= */

@media (max-width: 680px) {
  /*
   * Scene 06 → Scene 07:
   * 22px снизу Scene 06 + 10px сверху Scene 07.
   *
   * Итого стандартные 32px.
   */
  .contact {
    /*
     * Scene 07 → Footer.
     *
     * Было 36px.
     * 28px делает переход компактнее,
     * но не прижимает Footer к тёмной сцене.
     */
    padding: 10px 0 28px;

    scroll-margin-top: calc(var(--header-height) + 12px);
  }

  .contact__shell {
    padding: 34px 18px 30px;

    border-radius: 26px;
  }

  .contact__shell::before {
    right: -130px;
    bottom: -155px;

    width: 360px;
    height: 360px;

    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 42px),
      #000 calc(100% - 41px)
    );

    opacity: 0.7;
  }

  .contact__shell::after {
    top: -80px;
    right: -80px;

    width: 250px;
    height: 250px;

    filter: blur(60px);
  }

  .contact__eyebrow {
    margin-bottom: 10px;

    /*
     * Был #7fdaf2.
     * Чуть светлее на реальном OLED/LCD,
     * но без кислотной насыщенности.
     */
    color: #9be3f4;

    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .contact__title {
    /*
     * Не уменьшаем H2 — меняем только его
     * редакционную ширину на mobile.
     *
     * Это не жёсткая ширина в px:
     * 8.6em масштабируется вместе со шрифтом
     * и удерживает красивый перенос.
     */
    max-width: 8.6em;

    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.06;
  }

  .contact__intro {
    width: 95%;
    max-width: 95%;

    margin-top: 15px;

    /*
     * Было примерно 0.76.
     * Размер не меняем — только повышаем читаемость.
     */
    color: rgba(229, 241, 245, 0.86);

    font-size: 14px;
    line-height: 1.55;
  }

  /* TWO ROUTES */

  .contact__choices {
    grid-template-columns: 1fr;

    margin-top: 30px;
  }

  .contact-choice,
  .contact-choice:first-child,
  .contact-choice:last-child {
    padding: 27px 0 29px;
  }

  .contact-choice:last-child {
    border-top: 1px solid rgba(185, 229, 244, 0.13);
    border-left: 0;
  }

  .contact-choice__label {
    /*
     * ДЛЯ БИЗНЕСА / ОБУЧЕНИЕ:
     * чуть светлее, но всё ещё служебный уровень.
     */
    color: #9be3f4;

    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .contact-choice h3 {
    max-width: 96%;

    margin-top: 15px;

    font-size: 21px;
    line-height: 1.24;
  }

  .contact-choice__description {
    width: 95%;
    max-width: 95%;

    margin-top: 11px;

    /*
     * Было примерно 0.76.
     * Делаем мягче, чем чистый белый,
     * но значительно увереннее на petrol.
     */
    color: rgba(229, 241, 245, 0.86);

    font-size: 14px;
    line-height: 1.55;
  }

  /*
   * Та же mobile-геометрия капсулы,
   * что у Scene 03 / 04 / 05.
   */
  .contact-choice__cta {
    width: fit-content;
    max-width: calc(100% - 24px);

    min-height: calc(var(--round-arrow-size) + 8px);

    gap: 10px;

    margin-top: 22px;

    padding: 5px 5px 5px 14px;

    font-size: 14px;
  }
}

/* =========================================================
   SCENE 07 — SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  /*
   * Scene 06 → Scene 07:
   * 22px + 8px = 30px.
   */
  .contact {
    padding-top: 8px;
  }

  .contact__shell {
    padding: 30px 14px 26px;

    border-radius: 22px;
  }

  .contact__title {
    /*
     * Сохраняем намеренный двухстрочный ритм:
     *
     * Следующий шаг —
     * за вами
     *
     * Ширина задана в em, поэтому перенос
     * сохраняется вместе с масштабированием шрифта.
     */
    max-width: 8.6em;

    font-size: clamp(26px, 8vw, 30px);
  }

  .contact__intro {
    width: 96%;
    max-width: 96%;
  }

  .contact-choice h3 {
    font-size: 20px;
  }
}

/* =========================================================
   MOBILE ACTION-CONTROL — CANONICAL SYSTEM

   Scene 03 принят за эталон.

   Scene 01 / Scene 02 / Scene 03 / Scene 04 /
   Scene 05 / Scene 07 используют ОДИНАКОВЫЕ:
   - диаметр круга;
   - размер стрелки;
   - геометрию стрелки;
   - толщину stroke;
   - border;
   - поверхность;
   - тень;
   - hover / active state.
========================================================= */

@media (max-width: 680px) {
  /*
   * ОДНА поверхность и ОДНА SVG-стрелка
   * для всех мобильных action-controls DMS WORKS.
   */
  .service-card::after,
  .hero__actions .button__arrow,
  .project-feature__link-icon,
  .education__cta .button__arrow,
  .business__cta-icon,
  .contact-choice__icon {
    display: block;

    width: var(--round-arrow-size);
    height: var(--round-arrow-size);

    border: 1px solid rgba(127, 218, 242, 0.18);
    border-radius: 50%;

    color: #147b9f;

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M0.6 10.5H19.6M15.2 6.1L19.6 10.5L15.2 14.9' fill='none' stroke='%23147b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / var(--round-arrow-glyph-size) var(--round-arrow-glyph-size)
        no-repeat,
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(245, 251, 253, 0.98) 100%
      );

    box-shadow:
      0 5px 14px rgba(1, 16, 22, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 1);

    font-size: 0;
    line-height: 0;

    overflow: hidden;
    background-clip: padding-box;
  }

  /*
   * Все реальные flex-круги получают
   * один физический размер — 42px.
   */
  .hero__actions .button__arrow,
  .project-feature__link-icon,
  .education__cta .button__arrow,
  .business__cta-icon,
  .contact-choice__icon {
    flex: 0 0 var(--round-arrow-size);
  }

  /*
   * Старые CSS-стрелки отключаем.
   * Стрелку рисует только единая SVG выше.
   */
  .hero__actions .button__arrow::before,
  .hero__actions .button__arrow::after,
  .project-feature__link-icon::before,
  .project-feature__link-icon::after,
  .education__cta .button__arrow::before,
  .education__cta .button__arrow::after,
  .business__cta-icon::before,
  .business__cta-icon::after,
  .contact-choice__icon::before,
  .contact-choice__icon::after {
    content: none;
  }

  /* =========================================================
     ЕДИНЫЙ HOVER
  ========================================================= */

  .service-card:hover::after,
  .hero__actions .button:hover .button__arrow,
  .project-feature__link:hover .project-feature__link-icon,
  .education__cta:hover .button__arrow,
  .business__cta:hover .business__cta-icon,
  .contact-choice__cta:hover .contact-choice__icon {
    border-color: rgba(127, 218, 242, 0.24);

    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M0.6 10.5H19.6M15.2 6.1L19.6 10.5L15.2 14.9' fill='none' stroke='%23147b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / var(--round-arrow-glyph-size) var(--round-arrow-glyph-size)
        no-repeat,
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(245, 251, 253, 0.98) 100%
      );

    box-shadow:
      0 7px 18px rgba(1, 16, 22, 0.15),
      inset 0 1px 0 #ffffff;
  }

  /*
   * Scene 02 — псевдоэлемент absolute.
   */
  .service-card:hover::after {
    transform: translateY(-50%) translateX(1px);
  }

  /*
   * Остальные реальные flex-круги —
   * одна геометрия движения.
   */
  .hero__actions .button:hover .button__arrow,
  .project-feature__link:hover .project-feature__link-icon,
  .education__cta:hover .button__arrow,
  .business__cta:hover .business__cta-icon,
  .contact-choice__cta:hover .contact-choice__icon {
    transform: translate3d(1px, 0, 0);
  }

  /* =========================================================
     ЕДИНЫЙ ACTIVE
  ========================================================= */

  .service-card:active::after {
    transform: translateY(-50%) translateX(2px) scale(0.97);
  }

  .hero__actions .button:active .button__arrow,
  .project-feature__link:active .project-feature__link-icon,
  .education__cta:active .button__arrow,
  .business__cta:active .business__cta-icon,
  .contact-choice__cta:active .contact-choice__icon {
    transform: translate3d(2px, 0, 0) scale(0.97);
  }
}

/* =========================================================
   SCENE 04 — SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  /*
   * На small mobile сохраняем тот же ритм между сценами,
   * который уже используется между Scene 02 и Scene 03:
   *
   * предыдущая сцена снизу — 22px;
   * новая сцена сверху — 8px.
   *
   * Итого визуальный разрыв — 30px.
   */
  .education {
    padding-top: 8px;
  }

  .education__shell {
    padding: 30px 14px 24px;

    border-radius: 22px;
  }

  .education__title {
    max-width: 98%;

    font-size: clamp(26px, 8vw, 30px);
  }

  .education__intro {
    width: 96%;
    max-width: 96%;
  }

  .education__fact {
    min-height: 110px;

    padding: 18px 13px 16px;
  }

  .education__fact dd strong {
    font-size: clamp(22px, 7.2vw, 27px);
  }

  .education-step {
    grid-template-columns: 44px minmax(0, 1fr);

    gap: 13px;
  }

  /*
   * На самых узких экранах micro-типографику
   * больше не уменьшаем до 8px.
   *
   * Сохраняем единый размер 9px,
   * как в основной mobile-версии сцены.
   */
  .education__footer > p {
    gap: 7px;

    font-size: 9px;
  }
}

/* =========================================================
   SCENE 08 — FOOTER
========================================================= */

.site-footer {
  padding: 0 0 34px;

  color: #253941;
}

/*
 * Footer намеренно НЕ является ещё одной карточкой.
 *
 * Scene 07 уже поставила визуальную точку.
 * Здесь остаётся только тонкая архитектурная линия,
 * служебная информация и спокойный светлый фон страницы.
 */
.site-footer__inner {
  padding-top: 30px;

  border-top: 1px solid rgba(19, 82, 108, 0.12);
}

/* =========================================================
   FOOTER — MAIN ROW
========================================================= */

.site-footer__main {
  display: grid;

  grid-template-columns:
    minmax(245px, 0.82fr)
    minmax(0, 1.45fr)
    auto;

  align-items: center;

  gap: clamp(34px, 4vw, 68px);
}

/* =========================================================
   FOOTER — BRAND
========================================================= */

.site-footer__brand {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  gap: 12px;
}

.site-footer__logo-wrap {
  display: block;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 11px;

  background: #000000;

  box-shadow: 0 8px 20px rgba(17, 20, 24, 0.12);

  overflow: hidden;
}

.site-footer__logo {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.site-footer__brand-copy {
  display: flex;
  flex-direction: column;

  gap: 6px;
}

.site-footer__brand-copy strong {
  color: #17252c;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: -0.035em;
}

.site-footer__brand-copy small {
  color: #6a7c85;

  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.085em;
}

/* =========================================================
   FOOTER — NAVIGATION
========================================================= */

.site-footer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  column-gap: 24px;
  row-gap: 10px;
}

.site-footer__nav a {
  position: relative;

  color: #4d616a;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: -0.012em;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.site-footer__nav a:hover {
  color: var(--color-blue-dark);

  transform: translateY(-1px);
}

/* =========================================================
   FOOTER — CONTACTS
========================================================= */

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 7px;

  margin: 0;

  font-style: normal;
}

.site-footer__contacts a {
  color: #263b44;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: -0.012em;

  white-space: nowrap;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.site-footer__contacts a:hover {
  color: var(--color-blue-dark);

  transform: translateX(-1px);
}

/* =========================================================
   FOOTER — BOTTOM ROW
========================================================= */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-top: 27px;
  padding-top: 16px;

  border-top: 1px solid rgba(19, 82, 108, 0.08);
}

.site-footer__bottom p {
  margin: 0;

  color: #71828a;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;

  letter-spacing: -0.005em;
}

/* =========================================================
   FOOTER — ACCESSIBILITY
========================================================= */

.site-footer a:focus-visible {
  outline: 2px solid rgba(20, 123, 159, 0.42);

  outline-offset: 4px;

  border-radius: 4px;
}

/* =========================================================
   FOOTER — TABLET
========================================================= */

@media (max-width: 1040px) {
  .site-footer__main {
    grid-template-columns:
      minmax(220px, 1fr)
      auto;

    row-gap: 24px;
  }

  .site-footer__nav {
    grid-column: 1 / -1;
    grid-row: 2;

    justify-content: flex-start;
  }

  .site-footer__contacts {
    justify-self: end;
  }
}

/* =========================================================
   FOOTER — MOBILE
========================================================= */

@media (max-width: 680px) {
  .site-footer {
    padding-bottom: 26px;
  }

  /*
   * Footer должен восприниматься как компактное
   * служебное завершение страницы,
   * а не ещё одна полноценная сцена.
   */
  .site-footer__inner {
    padding-top: 20px;
  }

  .site-footer__main {
    grid-template-columns: 1fr;

    gap: 0;
  }

  /* =========================================================
     BRAND
  ========================================================= */

  .site-footer__brand {
    gap: 11px;
  }

  .site-footer__logo-wrap {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    border-radius: 10px;
  }

  .site-footer__brand-copy strong {
    font-size: 15px;
  }

  /* =========================================================
     NAVIGATION
  ========================================================= */

  .site-footer__nav {
    grid-column: auto;
    grid-row: auto;

    justify-content: flex-start;

    column-gap: 17px;
    row-gap: 11px;

    margin-top: 25px;
  }

  .site-footer__nav a {
    font-size: 13px;
  }

  /*
   * Scene 06 "О DMS Works" находится непосредственно
   * перед финальной частью страницы.
   *
   * На mobile повторная ссылка в Footer избыточна
   * и создаёт одинокую вторую строку навигации.
   *
   * Desktop не затрагивается.
   */
  .site-footer__nav a[href="#about"] {
    display: none;
  }

  /* =========================================================
     CONTACTS
  ========================================================= */

  .site-footer__contacts {
    align-items: flex-start;
    justify-self: start;

    gap: 8px;

    margin-top: 22px;
  }

  .site-footer__contacts a {
    font-size: 13px;
  }

  /* =========================================================
     BOTTOM
  ========================================================= */

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;

    gap: 5px;

    margin-top: 22px;
    padding-top: 15px;
  }

  .site-footer__bottom p {
    font-size: 11px;
  }
}

/* =========================================================
   FOOTER — SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  .site-footer {
    padding-bottom: 22px;
  }

  /*
   * Чуть компактнее расстояние
   * от верхней линии Footer до бренда.
   */
  .site-footer__inner {
    padding-top: 18px;
  }

  .site-footer__nav {
    column-gap: 14px;
    row-gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}