:root {
  --ink: #0b1020;
  --ink-2: #111a2b;
  --ink-3: #182337;
  --ink-4: #233249;
  --paper: #f3f5f7;
  --paper-2: #e9eef2;
  --paper-3: #dfe6eb;
  --text: #111827;
  --muted: #637184;
  --muted-dark: #9eacbd;
  --line: rgba(19, 34, 53, 0.13);
  --line-dark: rgba(220, 230, 242, 0.14);
  --blue: #8fbfdb;
  --bronze: #c69a72;
  --white: #f7f9fb;
  --mono: "IBM Plex Mono", monospace;
  --sans: "Inter", Arial, sans-serif;
  --shell: min(1240px, calc(100vw - 64px));
  --shadow-lg: 0 28px 80px rgba(9, 20, 36, 0.16);
  --shadow-dark: 0 28px 90px rgba(0, 0, 0, 0.23);
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: auto; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: var(--white); background: #28435a; }

.shell { width: var(--shell); margin: 0 auto; }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 16px; color: var(--white); background: var(--ink-4); transform: translateY(-160%); transition: transform 160ms ease; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  color: var(--white);
  transition: background 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
}
.site-header.is-scrolled { position: fixed; background: rgba(11, 16, 32, 0.8); box-shadow: 0 1px 0 rgba(236, 243, 250, 0.1); backdrop-filter: blur(17px); }
.header-inner { display: flex; align-items: center; min-height: 76px; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; gap: 11px; }
.brand-sign { display: block; width: 31px; height: 31px; }
.brand-sign img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(95, 190, 232, .16)); }
.brand-copy strong { display: block; font-size: 9px; font-weight: 800; line-height: 1.05; letter-spacing: 0.095em; }
.brand-copy small { display: block; margin-top: 4px; color: var(--muted-dark); font-family: var(--mono); font-size: 7px; letter-spacing: 0.05em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #c5d0dd; font-size: 12px; font-weight: 600; transition: color 170ms ease; }
.desktop-nav a:hover { color: var(--white); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 17px; gap: 11px; border: 1px solid transparent; border-radius: 13px; font-size: 12px; font-weight: 800; transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.button-primary { color: var(--ink); background: var(--white); box-shadow: 0 10px 28px rgba(2, 8, 18, 0.12); }
.button-primary:hover { color: var(--ink); background: #dceaf4; box-shadow: 0 14px 32px rgba(2, 8, 18, 0.2); transform: translateY(-2px); }
.button-secondary { color: #e7edf4; border-color: rgba(231, 238, 247, 0.34); background: rgba(19, 32, 49, 0.26); backdrop-filter: blur(10px); }
.button-secondary:hover { border-color: rgba(231, 238, 247, 0.75); background: rgba(41, 59, 80, 0.55); transform: translateY(-2px); }
.button-large { min-height: 54px; padding: 0 20px; }
.header-action { min-height: 44px; margin-left: 10px; padding: 0 14px; font-size: 11px; }
.header-action svg { width: 15px; height: 15px; }
.menu-trigger, .menu-layer { display: none; }

.hero {
  position: relative;
  display: flex;
  min-height: 790px;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  isolation: isolate;
}
.hero-media { position: absolute; z-index: -1; inset: 0; overflow: hidden; background: linear-gradient(135deg, #101a29, #25384a); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,16,32,.97) 0%, rgba(11,16,32,.93) 33%, rgba(11,16,32,.53) 60%, rgba(11,16,32,.13) 100%), linear-gradient(0deg, rgba(11,16,32,.66) 0%, transparent 42%); }
.cad-grid { position: absolute; pointer-events: none; opacity: .45; }
.cad-grid-major { top: 96px; right: 0; bottom: 0; left: 0; background-image: linear-gradient(rgba(151,188,215,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(151,188,215,.12) 1px, transparent 1px); background-size: 96px 96px; mask-image: linear-gradient(90deg, black, transparent 77%); }
.cad-grid-minor { top: 96px; right: 0; bottom: 0; left: 0; background-image: linear-gradient(rgba(151,188,215,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(151,188,215,.06) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, black, transparent 76%); }
.hero-content { display: flex; align-items: center; width: var(--shell); padding-top: 128px; padding-bottom: 90px; margin: 0 auto; }
.hero-copy { min-width: 0; max-width: 765px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.eyebrow-light { color: #b4c8d8; }
.eyebrow span { width: 22px; height: 1px; background: var(--bronze); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { max-width: 770px; margin-bottom: 0; font-size: clamp(46px, 4.65vw, 68px); font-weight: 700; line-height: 1.02; letter-spacing: -.052em; }
h2 { max-width: 780px; margin: 0; font-size: clamp(38px, 4.25vw, 63px); font-weight: 700; line-height: 1.03; letter-spacing: -.052em; }
.hero-description { max-width: 624px; margin: 29px 0 34px; color: #d0dbe5; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.67; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.scope-note { max-width: 600px; padding-top: 18px; margin: 20px 0 0; border-top: 1px solid rgba(222, 236, 248, 0.2); color: #9eafbd; font-size: 10px; line-height: 1.55; }

.hero-workflow { align-self: end; padding: 20px; margin-bottom: 4px; border: 1px solid rgba(222, 236, 248, 0.22); border-radius: 17px; background: rgba(13, 24, 39, 0.54); box-shadow: var(--shadow-dark); backdrop-filter: blur(13px); }
.workflow-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mono-label { color: inherit; font-family: var(--mono); font-size: 8px; letter-spacing: .065em; line-height: 1.4; text-transform: uppercase; }
.workflow-status { display: inline-flex; align-items: center; gap: 6px; color: #bfcfd9; font-size: 9px; }
.workflow-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(143,191,219,.13); }
.workflow-line { display: block; width: 100%; margin: 24px 0 8px; overflow: visible; }
.workflow-line path { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-width: 1.5; }
.workflow-line circle { fill: #d7e2eb; stroke: #0e1929; stroke-width: 4; }
.workflow-path { stroke-dasharray: 550; stroke-dashoffset: 550; animation: routeDraw 1.35s .45s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
.workflow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; color: #c6d4df; font-family: var(--mono); font-size: 8px; line-height: 1.45; }
.workflow-steps span:nth-child(2) { text-align: center; }.workflow-steps span:nth-child(3) { text-align: right; }
.hero-proof { position: absolute; bottom: 0; left: 50%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: var(--shell); padding: 20px 0 25px; border-top: 1px solid rgba(220, 235, 247, 0.17); transform: translateX(-50%); }
.hero-proof div { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 0 22px; border-left: 1px solid rgba(220, 235, 247, 0.17); }
.hero-proof div:first-child { padding-left: 0; border-left: 0; }
.hero-proof strong { flex: 0 0 auto; color: #eaf0f5; font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: -.04em; }
.hero-proof span { color: #a8bac8; font-size: 9px; line-height: 1.5; }

.metrics-section { position: relative; overflow: hidden; padding: 78px 0 0; color: #18283a; background: linear-gradient(115deg, #e0e9ef 0%, #ecf2f5 51%, #e3ebf0 100%); }
.metrics-section::before { position: absolute; inset: 0; pointer-events: none; content: ""; background-image: linear-gradient(rgba(77,111,138,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(77,111,138,.055) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(90deg, transparent, black 35%, transparent 88%); }
.metrics-section .shell { position: relative; }
.metrics-heading { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .52fr); align-items: end; gap: 60px; padding-bottom: 42px; }
.metrics-heading h2 { max-width: 670px; font-size: clamp(33px, 3.55vw, 52px); }
.metrics-heading > p { max-width: 420px; margin: 0 0 4px; color: #556d81; font-size: 13px; line-height: 1.72; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(37, 65, 87, .17); }
.metric-item { min-width: 0; padding: 28px 25px 31px; border-left: 1px solid rgba(37, 65, 87, .17); }
.metric-item:first-child { padding-left: 0; border-left: 0; }.metric-item:last-child { padding-right: 0; }
.metric-icon { display: block; width: 19px; height: 19px; margin-bottom: 29px; color: #467491; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.metric-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px; }
.metric-copy strong { color: #15273a; font-family: var(--mono); font-size: clamp(25px, 2.45vw, 35px); font-weight: 500; letter-spacing: -.07em; }
.metric-copy span { color: #344e64; font-size: 11px; font-weight: 700; line-height: 1.3; }
.metric-item > p { min-height: 34px; margin: 8px 0 18px; color: #526b80; font-size: 9px; line-height: 1.55; }
.metric-track { position: relative; height: 1px; overflow: visible; background: rgba(52, 87, 113, .16); }
.metric-track i { position: relative; display: block; width: var(--metric-progress); height: 100%; background: linear-gradient(90deg, #567d99, #92b3c8); transform: scaleX(0); transform-origin: left center; transition: transform 760ms cubic-bezier(.2,.8,.2,1); }
.metric-track i::after { position: absolute; top: 50%; right: -2px; width: 5px; height: 5px; border-radius: 50%; content: ""; background: #426f8e; box-shadow: 0 0 0 3px rgba(86,125,153,.1); transform: translateY(-50%); }
.js .metric-item.is-counted .metric-track i { transform: scaleX(1); }

.section { position: relative; padding: 132px 0; }
.section[id] { scroll-margin-top: 86px; }
.section-light { background: var(--paper); }
.section-soft { background: var(--paper-2); }
.section-ink { overflow: hidden; color: var(--white); background: var(--ink-2); isolation: isolate; }
.section-cad-field { position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(149,189,220,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(149,189,220,.055) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(135deg, transparent 2%, black 36%, transparent 90%); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(270px, .52fr); align-items: end; gap: 60px; }
.section-heading > p { max-width: 395px; margin: 0 0 3px; color: var(--muted); font-size: 14px; line-height: 1.72; }
.dark-heading > p { color: #a9bac8; }
.split-heading h2 { max-width: 760px; }
.pain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 72px; }
.pain-card { position: relative; min-height: 275px; padding: 23px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.49); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.pain-card:hover { border-color: rgba(55, 85, 111, .32); background: #fff; box-shadow: 0 18px 42px rgba(18, 33, 51, .10); transform: translateY(-2px); }
.icon-shell { display: grid; width: 44px; height: 44px; color: #3a6789; border: 1px solid rgba(48, 86, 116, .2); border-radius: 14px; background: rgba(236, 244, 250, .74); place-items: center; }
.icon-shell svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.icon-shell-dark { color: #c9dfeb; border-color: rgba(204, 226, 239, .18); background: rgba(218, 234, 245, .08); }
.card-index { position: absolute; top: 26px; right: 24px; color: var(--bronze); font-family: var(--mono); font-size: 9px; }
.pain-card h3 { max-width: 230px; margin: 62px 0 13px; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.038em; }
.pain-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.pain-list { margin-top: 68px; border-top: 1px solid var(--line); }
.pain-line { display: grid; grid-template-columns: 64px minmax(0, 1.18fr) minmax(190px, .48fr); align-items: center; gap: 28px; min-height: 130px; border-bottom: 1px solid var(--line); transition: background 180ms ease, padding 180ms ease; }
.pain-line:hover { padding-left: 8px; background: linear-gradient(90deg, rgba(212,225,234,.36), rgba(212,225,234,0)); }
.pain-number { color: var(--bronze); font-family: var(--mono); font-size: 9px; }
.pain-line h3 { max-width: 480px; margin: 0 0 7px; color: #1d2b3b; font-size: clamp(20px, 2.1vw, 28px); font-weight: 700; line-height: 1.13; letter-spacing: -.045em; }
.pain-line p { max-width: 495px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.62; }
.pain-outcome { justify-self: end; max-width: 185px; color: #526f87; font-family: var(--mono); font-size: 8px; line-height: 1.55; text-align: right; text-transform: uppercase; }
.pain-conclusion { max-width: 620px; padding: 23px 0 0 92px; margin: 0; color: #48596c; font-size: 13px; line-height: 1.68; }

.comparison-section { background: #e6edf2; }
.compare-table-wrap { margin-top: 70px; border-top: 1px solid rgba(33, 54, 77, .17); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare-table th, .compare-table td { padding: 20px 20px; border-bottom: 1px solid rgba(33, 54, 77, .14); vertical-align: top; text-align: left; }
.compare-table thead th { padding-top: 16px; padding-bottom: 16px; color: #4d667c; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .055em; line-height: 1.5; text-transform: uppercase; }
.compare-table thead th:first-child { width: 22%; padding-left: 0; }.compare-table tbody th { padding-left: 0; color: #26384b; font-size: 12px; font-weight: 700; line-height: 1.4; }.compare-table td { width: 39%; }
.compare-table .compare-featured, .compare-table tbody td:first-of-type { background: rgba(249, 252, 253, .76); border-right: 1px solid rgba(67, 105, 134, .16); border-left: 1px solid rgba(67, 105, 134, .16); }
.compare-table .compare-featured { position: relative; color: #345c7c; border-top: 1px solid rgba(67, 105, 134, .16); border-radius: 13px 13px 0 0; }.compare-table .compare-featured span { display: block; padding-top: 5px; color: #6e8ca3; font-size: 7px; letter-spacing: .045em; }.compare-table tbody tr:last-child td:first-of-type { border-bottom: 1px solid rgba(67, 105, 134, .16); border-radius: 0 0 13px 13px; }
.compare-table .compare-secondary { color: #7a8d9d; }.compare-table tbody td:nth-of-type(2) { color: #66798b; background: rgba(229, 236, 241, .42); }
.compare-table td strong, .compare-table td span { display: block; }.compare-table td strong { margin-bottom: 5px; color: #1a2b3e; font-size: 12px; line-height: 1.4; }.compare-table td:first-of-type strong { color: #365e7d; }.compare-table td span { color: #536b80; font-size: 10px; line-height: 1.55; }
.compare-closing { display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 1015px; padding: 30px 0 0; }
.compare-closing p { max-width: 620px; margin: 0; color: #465b70; font-size: 13px; line-height: 1.68; }
.text-link { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; gap: 8px; color: #244d6f; font-size: 12px; font-weight: 800; }.text-link svg { width: 16px; height: 16px; fill: none; stroke: var(--bronze); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 180ms ease; }.text-link:hover svg { transform: translate(2px, -2px); }

.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 72px; }
.service-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 370px; padding: 28px; overflow: hidden; isolation: isolate; border: 1px solid rgba(213, 227, 239, .18); border-radius: 20px; color: #ecf3f8; background: #0b1727; box-shadow: 0 14px 38px rgba(1, 6, 15, .09); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.service-card::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(98deg, rgba(7, 17, 30, .98) 0%, rgba(8, 19, 33, .93) 46%, rgba(8, 18, 31, .57) 100%), linear-gradient(0deg, rgba(6, 15, 27, .52), transparent 56%); }
.service-card:hover { border-color: rgba(175, 208, 228, .42); box-shadow: 0 20px 46px rgba(1, 6, 15, .19); transform: translateY(-2px); }
.service-card-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; pointer-events: none; filter: saturate(.76) contrast(1.03) brightness(.82); transform: scale(1.035); transition: transform 520ms ease, filter 300ms ease; }
.service-card:hover .service-card-art { filter: saturate(.86) contrast(1.04) brightness(.92); transform: scale(1.065); }
.service-card > *:not(.service-card-art):not(.service-wave) { position: relative; z-index: 3; }
.service-wave { position: absolute; z-index: 2; right: -8%; bottom: 10px; width: 122%; height: 108px; overflow: visible; pointer-events: none; opacity: .62; transform: rotate(-2deg); }
.service-wave-rail, .service-wave-signal { fill: none; stroke-linecap: round; }
.service-wave-rail { stroke: rgba(150, 198, 224, .16); stroke-width: 1; }
.service-wave-signal { stroke: rgba(144, 212, 239, .8); stroke-width: 1.35; stroke-dasharray: .17 .83; stroke-dashoffset: 1; opacity: 0; }
.services-section.is-service-active .service-wave-signal { animation: serviceWaveTravel 8.4s cubic-bezier(.38,.03,.24,1) infinite; }
.service-card:nth-child(2) .service-wave { bottom: 22px; transform: rotate(2deg) scaleX(-1); }.service-card:nth-child(2) .service-wave-signal { animation-delay: 1.1s; }
.service-card:nth-child(3) .service-wave { bottom: 18px; transform: rotate(-4deg); }.service-card:nth-child(3) .service-wave-signal { animation-delay: 2.2s; }
.service-card-design .service-wave { right: -10%; bottom: 26px; height: 116px; transform: rotate(5deg) scaleX(-1); }
.services-section.is-service-active .service-card-design .service-wave-signal { animation: serviceDesignWaveTravel 9.6s cubic-bezier(.32,.02,.22,1) 3.3s infinite; }
@keyframes serviceWaveTravel { 0%, 9% { stroke-dashoffset: 1; opacity: 0; } 18% { opacity: .88; } 74% { stroke-dashoffset: -.16; opacity: .58; } 88%, 100% { stroke-dashoffset: -.16; opacity: 0; } }
@keyframes serviceDesignWaveTravel { 0%, 7% { stroke-dashoffset: 1; opacity: 0; } 16% { opacity: .9; } 66% { stroke-dashoffset: -.08; opacity: .64; } 84%, 100% { stroke-dashoffset: -.08; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .services-section.is-service-active .service-wave-signal, .services-section.is-service-active .service-card-design .service-wave-signal { animation: none; stroke-dasharray: 1 0; stroke-dashoffset: 0; opacity: .42; } }
.service-card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.service-card-top > span { color: var(--bronze); font-family: var(--mono); font-size: 9px; }
.service-card h3 { max-width: 350px; margin: 53px 0 15px; font-size: clamp(24px, 2.3vw, 32px); font-weight: 600; line-height: 1.1; letter-spacing: -.05em; }.service-card p { margin: 0; color: #b6c5d2; font-size: 13px; line-height: 1.7; }.service-card ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: auto 0 0; list-style: none; }.service-card li, .service-bottom { padding: 7px 9px; border: 1px solid rgba(207, 226, 237, .16); border-radius: 8px; color: #c7d6df; font-family: var(--mono); font-size: 8px; line-height: 1.2; }.service-bottom { margin-top: auto; align-self: flex-start; }

.scope-matrix { position: relative; z-index: 1; padding-top: 72px; margin-top: 72px; border-top: 1px solid rgba(210, 229, 241, .17); }.scope-matrix > .mono-label { color: #a5c8de; }
.scope-matrix-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 19px; border-top: 1px solid rgba(210, 229, 241, .17); border-left: 1px solid rgba(210, 229, 241, .17); }
.scope-matrix-grid > div { min-height: 148px; padding: 20px; border-right: 1px solid rgba(210, 229, 241, .17); border-bottom: 1px solid rgba(210, 229, 241, .17); }.scope-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.scope-matrix-grid span { color: var(--bronze); font-family: var(--mono); font-size: 8px; }.scope-icon { width: 18px; height: 18px; color: #a7c4d7; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }.scope-matrix-grid p { margin: 30px 0 0; color: #d1dde5; font-size: 11px; font-weight: 600; line-height: 1.55; }
.scope-boundary { max-width: 645px; padding-top: 24px; margin: 0; color: #a9bac8; font-size: 11px; line-height: 1.65; }

.process-section { background: #f8f9fa; }.process-heading { margin-bottom: 68px; }.process-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; }.process-wave { position: absolute; z-index: 0; top: 33px; left: 0; width: 100%; height: 52px; overflow: visible; pointer-events: none; }.process-wave path { fill: none; stroke: #8da9bc; stroke-linecap: round; stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms cubic-bezier(.2,.8,.2,1); }.process-section.is-process-active .process-wave path { stroke-dashoffset: 0; }.process-step { position: relative; z-index: 1; display: block; min-height: 260px; padding: 0 25px 0 0; }.process-marker { display: flex; align-items: center; gap: 11px; min-height: 23px; }.track-number { color: #476c89; font-family: var(--mono); font-size: 9px; letter-spacing: .045em; }.process-icon { width: 19px; height: 19px; color: #5d8199; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.process-track h3 { margin: 75px 0 9px; font-size: 18px; font-weight: 700; line-height: 1.16; letter-spacing: -.04em; }.process-track p { max-width: 235px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.68; }.track-result { display: block; max-width: 185px; padding-top: 18px; color: #57718a; font-family: var(--mono); font-size: 8px; line-height: 1.55; text-transform: uppercase; }.process-guard { display: flex; align-items: flex-start; gap: 16px; max-width: 695px; padding: 14px 0 0; }.process-guard p { margin: 0; color: #536478; font-size: 13px; line-height: 1.68; }

.control-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 68px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.control-levels article { min-height: 190px; padding: 23px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.control-levels span { color: #52758f; font-family: var(--mono); font-size: 9px; }.control-levels h3 { margin: 45px 0 10px; font-size: 17px; letter-spacing: -.035em; }.control-levels p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.technical-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 16px; margin-top: 72px; }.technical-image { position: relative; min-height: 265px; margin: 0; overflow: hidden; border-radius: 20px; background: var(--ink-3); box-shadow: var(--shadow-lg); }.technical-image-main { min-height: 556px; }.technical-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) contrast(1.05) brightness(.78); transition: transform 500ms ease, filter 300ms ease; }.technical-image:hover img { filter: saturate(.82) contrast(1.05) brightness(.9); transform: scale(1.035); }.technical-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(9,18,31,.87), rgba(9,18,31,0) 53%); }.technical-image figcaption { position: absolute; z-index: 1; right: 23px; bottom: 21px; left: 23px; display: flex; align-items: flex-start; gap: 11px; color: #eef5f7; }.technical-image figcaption span { color: var(--bronze); font-family: var(--mono); font-size: 10px; }.technical-image figcaption p { max-width: 190px; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }.technical-stack { display: grid; grid-template-rows: .95fr 1fr; gap: 16px; min-width: 0; }.software-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid rgba(53, 78, 103, .16); border-radius: 20px; background: #f6f8f9; }.software-card .mono-label { color: #6b8399; }.software-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0; }.software-list span { padding: 7px 9px; border: 1px solid rgba(60, 94, 119, .17); border-radius: 8px; color: #405d73; font-family: var(--mono); font-size: 8px; }.software-card > p:last-child { max-width: 300px; padding-top: 17px; margin: auto 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.65; }

.team-section { padding-bottom: 0; }.team-cad { opacity: .7; mask-image: linear-gradient(90deg, transparent, black 55%, transparent); }.team-intro { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(265px, .44fr); align-items: end; gap: 70px; }.team-intro > p { max-width: 385px; margin: 0 0 3px; color: #b0c0ce; font-size: 14px; line-height: 1.72; }.team-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(315px, .94fr) minmax(315px, .7fr); align-items: stretch; gap: 16px; margin-top: 72px; }.team-portrait { position: relative; min-height: 570px; margin: 0; overflow: hidden; border-radius: 21px; background: #cbd4d9; }.team-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 19%; filter: saturate(.8) contrast(1.02); }.team-portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(9,17,30,.85), rgba(9,17,30,0) 53%); }.team-portrait figcaption { position: absolute; z-index: 1; right: 27px; bottom: 26px; left: 27px; }.team-portrait figcaption .mono-label { color: var(--blue); }.team-portrait figcaption strong { display: block; margin: 11px 0 5px; color: #f4f7fa; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.05em; }.team-portrait figcaption p { margin: 0; color: #cad7df; font-size: 12px; }.team-side { display: grid; grid-template-rows: 1fr 1fr auto; gap: 1px; overflow: hidden; border: 1px solid rgba(214, 230, 243, .15); border-radius: 21px; background: rgba(214, 230, 243, .15); }.team-fact { padding: 30px; background: rgba(24, 35, 55, .78); }.team-fact strong { display: block; margin-bottom: 11px; color: #f2f6fa; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.05em; }.team-fact p { max-width: 335px; margin: 0; color: #b4c5d1; font-size: 13px; line-height: 1.68; }.team-note { padding: 24px 30px; margin: 0; color: #2a3748; font-size: 11px; line-height: 1.65; background: #d5e2e9; }.role-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; padding-top: 88px; background: rgba(205, 222, 235, .14); }.role-grid article { min-height: 186px; padding: 21px; background: var(--ink-2); }.role-grid span { color: var(--bronze); font-family: var(--mono); font-size: 9px; }.role-grid h3 { margin: 48px 0 10px; color: #eff5f8; font-size: 15px; line-height: 1.22; letter-spacing: -.035em; }.role-grid p { margin: 0; color: #9eb0c0; font-size: 10px; line-height: 1.55; }

.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(370px, .84fr); align-items: start; gap: clamp(50px, 10vw, 150px); }.faq-heading h2 { margin-bottom: 27px; font-size: clamp(36px, 3.6vw, 54px); }.faq-heading > p:last-child { max-width: 430px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.72; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 16px; list-style: none; font-size: 14px; font-weight: 700; letter-spacing: -.02em; cursor: pointer; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }.faq-list summary span::before, .faq-list summary span::after { position: absolute; top: 8px; left: 1px; width: 16px; height: 1px; content: ""; background: #536d84; transition: transform 180ms ease; }.faq-list summary span::after { transform: rotate(90deg); }.faq-list details[open] summary span::after { transform: rotate(0); }.faq-list details p { max-width: 510px; padding: 0 26px 21px 0; margin: -4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.contact-section { padding: 104px 0; background: linear-gradient(150deg, #16243a, #0d1728); }.contact-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); gap: clamp(45px, 9vw, 125px); padding: clamp(30px, 5vw, 66px); border: 1px solid rgba(213, 230, 243, .18); border-radius: 26px; color: #eff5f8; background: rgba(14, 25, 42, .72); box-shadow: var(--shadow-dark); }.contact-copy h2 { max-width: 650px; margin-bottom: 28px; font-size: clamp(37px, 4vw, 57px); }.contact-copy > p:not(.eyebrow) { max-width: 565px; margin: 0; color: #b7c7d2; font-size: 14px; line-height: 1.75; }.contact-trust { display: flex; align-items: flex-start; gap: 11px; max-width: 510px; padding-top: 24px; margin-top: 27px; border-top: 1px solid rgba(219, 234, 245, .18); color: #9fb5c4; font-size: 10px; line-height: 1.6; }.contact-trust svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.brief-form { min-width: 0; padding: 23px; border: 1px solid rgba(219, 234, 245, .14); border-radius: 18px; background: rgba(33, 50, 73, .68); }.form-header { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding-bottom: 18px; margin-bottom: 3px; border-bottom: 1px solid rgba(219,234,245,.16); color: #eef5f8; font-size: 13px; font-weight: 700; }.form-header .mono-label { color: var(--blue); }.brief-form label { display: block; padding-top: 17px; }.brief-form label > span { display: block; margin-bottom: 7px; color: #9eb2c1; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }.brief-form input, .brief-form select, .brief-form textarea { width: 100%; padding: 10px 0; outline: none; border: 0; border-bottom: 1px solid rgba(219,234,245,.28); border-radius: 0; color: #f2f6f9; font-size: 12px; background: transparent; transition: border-color 160ms ease; }.brief-form input::placeholder, .brief-form textarea::placeholder { color: #72889a; }.brief-form select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fbfdb' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1px center; }.brief-form select option { color: var(--text); }.brief-form textarea { resize: vertical; min-height: 66px; }.brief-form input:focus, .brief-form textarea:focus, .brief-form select:focus { border-bottom-color: var(--blue); }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.form-action { width: 100%; margin-top: 23px; }.form-note, .form-status { margin: 12px 0 0; font-size: 9px; line-height: 1.55; }.form-note { color: #8197a7; }.form-status { min-height: 0; color: #c9dce7; }.form-status:not(:empty) { min-height: 29px; padding: 8px 10px; border: 1px solid rgba(143,191,219,.25); border-radius: 8px; background: rgba(143,191,219,.08); }

.site-footer { color: #b1c1cc; background: #0b1020; }.footer-top { display: grid; grid-template-columns: .76fr 1fr auto; align-items: center; gap: 24px; min-height: 148px; }.footer-top .brand { color: #f0f4f8; }.footer-top > p { margin: 0; color: #a4b5c2; font-size: 11px; line-height: 1.65; }.footer-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #dceaf3; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }.footer-link svg { width: 14px; height: 14px; fill: none; stroke: var(--bronze); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.footer-bottom { display: flex; justify-content: space-between; gap: 14px; padding: 19px 0 21px; border-top: 1px solid rgba(218,233,244,.12); color: #778b9b; font-family: var(--mono); font-size: 8px; line-height: 1.5; text-transform: uppercase; }.footer-bottom a { color: #849db1; transition: color 170ms ease; }.footer-bottom a:hover { color: #cedbe6; }

.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 520ms cubic-bezier(.2,.72,.2,1), transform 520ms cubic-bezier(.2,.72,.2,1); }.js .hero-proof[data-reveal] { transform: translateX(-50%) translateY(12px); }.js [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }.js .hero-proof[data-reveal].is-revealed { transform: translateX(-50%) translateY(0); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (max-width: 1040px) {
  :root { --shell: min(100vw - 48px, 830px); }
  .desktop-nav, .header-action { display: none; }.menu-trigger { display: grid; width: 44px; height: 44px; padding: 0; margin-left: auto; border: 1px solid rgba(228, 238, 247, .38); border-radius: 12px; color: #f4f7fa; background: rgba(18, 31, 49, .38); place-content: center; gap: 5px; }.menu-trigger i { display: block; width: 17px; height: 1px; background: currentColor; transition: transform 180ms ease; }.menu-trigger.is-open i:first-child { transform: translateY(3px) rotate(45deg); }.menu-trigger.is-open i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .menu-layer { position: fixed; z-index: 60; inset: 0; display: block; visibility: hidden; pointer-events: none; transition: visibility 0s linear 240ms; }.menu-layer.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }.menu-backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(7, 12, 23, .5); backdrop-filter: blur(3px); transition: opacity 240ms ease; }.menu-layer.is-open .menu-backdrop { opacity: 1; }.menu-panel { position: absolute; top: 12px; right: 12px; left: 12px; display: grid; gap: 3px; padding: 16px; border: 1px solid rgba(219, 232, 244, .18); border-radius: 18px; opacity: 0; color: #ecf3f8; background: rgba(17, 28, 47, .96); box-shadow: var(--shadow-dark); transform: translateY(-14px); transition: opacity 240ms ease, transform 240ms ease; }.menu-layer.is-open .menu-panel { opacity: 1; transform: translateY(0); }.menu-panel-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(219,232,244,.15); color: #9bb2c3; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }.menu-panel-top button { width: 44px; height: 44px; padding: 0; border: 0; color: #eaf2f7; font-size: 25px; background: transparent; }.menu-panel a:not(.button) { display: flex; align-items: center; min-height: 44px; padding: 13px 7px; color: #e3edf4; font-size: 17px; font-weight: 700; letter-spacing: -.03em; }.menu-panel .button { width: 100%; margin-top: 12px; }
  .hero { min-height: 760px; }.hero-content { display: flex; align-items: center; padding-top: 144px; padding-bottom: 96px; }.hero-copy { max-width: 760px; }.hero-workflow { width: min(100%, 440px); min-width: 0; margin: 0; }.hero-proof { grid-template-columns: repeat(3, 1fr); }
  .section-heading, .team-intro, .faq-layout, .contact-card, .metrics-heading { grid-template-columns: 1fr; gap: 29px; }.section-heading > p, .team-intro > p, .metrics-heading > p { max-width: 570px; }.metrics-section { padding-top: 66px; }.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-item:nth-child(3) { padding-left: 0; border-left: 0; }.metric-item:nth-child(-n+2) { border-bottom: 1px solid rgba(37,65,87,.17); }.pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.technical-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); }.team-grid { grid-template-columns: minmax(300px, .85fr) minmax(280px, .7fr); }.role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.role-grid article:last-child { grid-column: span 2; }.footer-top { grid-template-columns: 1fr auto; }.footer-top > p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100vw - 32px); }
  .header-inner { min-height: 76px; }.brand-sign { width: 29px; height: 29px; }.brand-copy small { display: none; }
  .hero { min-height: 0; }.hero-media img { object-position: 72% 50%; }.hero-scrim { background: linear-gradient(90deg, rgba(11,16,32,.97) 0%, rgba(11,16,32,.92) 65%, rgba(11,16,32,.55) 100%), linear-gradient(0deg, rgba(11,16,32,.72) 0%, transparent 45%); }.cad-grid-major, .cad-grid-minor { mask-image: linear-gradient(90deg, black, transparent 100%); }.hero-content { padding-top: 124px; padding-bottom: 88px; }.hero-description { margin: 24px 0 28px; font-size: 15px; }.hero-actions { align-items: stretch; flex-direction: column; max-width: 380px; }.button { min-height: 52px; }.hero-workflow { padding: 17px; }.hero-proof { grid-template-columns: 1fr; gap: 13px; padding: 16px 0 19px; }.hero-proof div, .hero-proof div:first-child { padding: 0; border: 0; }.hero-proof div { gap: 12px; }.hero-proof strong { min-width: 83px; }
  .section { padding: 86px 0; }.section-heading { gap: 25px; }.section-heading h2 { font-size: clamp(36px, 9.7vw, 49px); }.section-heading > p { font-size: 13px; }.pain-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 46px; }.pain-card { min-height: 230px; padding: 21px; }.pain-card h3 { margin-top: 47px; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }.service-card { grid-column: auto; min-height: 275px; padding: 24px; }.service-card h3 { margin-top: 44px; font-size: 27px; }.process-heading { margin-bottom: 46px; }.process-guard { padding: 26px 0 0; }
  .technical-layout { grid-template-columns: 1fr; gap: 12px; margin-top: 46px; }.technical-image-main { min-height: 390px; }.technical-stack { grid-template-rows: auto auto; gap: 12px; }.technical-image { min-height: 265px; }.software-card { min-height: 270px; }.team-intro { gap: 25px; }.team-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 47px; }.team-portrait { min-height: 475px; }.team-side { min-height: 465px; }.role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 61px; }.role-grid article { min-height: 159px; padding: 17px; }.role-grid h3 { margin-top: 33px; font-size: 14px; }.faq-layout { gap: 44px; }.faq-heading h2 { font-size: clamp(35px, 9vw, 46px); }.faq-list summary { min-height: 68px; font-size: 13px; }.contact-section { padding: 71px 0; }.contact-card { padding: 24px; border-radius: 20px; }.contact-copy h2 { font-size: clamp(35px, 9vw, 46px); }.field-row { grid-template-columns: 1fr; gap: 0; }.site-footer { padding-bottom: 0; }.footer-top { min-height: 138px; }.footer-top > p { font-size: 10px; }.footer-bottom { display: grid; grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 420px) {
  h1 { font-size: 43px; }.hero { min-height: 830px; }.hero-content { padding-bottom: 206px; }.workflow-steps { font-size: 7px; }.hero-proof strong { min-width: 77px; font-size: 14px; }.team-portrait { min-height: 435px; }.team-note, .team-fact { padding: 24px; }
}

@media (max-width: 1040px) {
  .pain-line { grid-template-columns: 54px minmax(0, 1fr) minmax(170px, .42fr); gap: 22px; }
  .scope-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .hero { min-height: 0; }
  .hero-content { padding-bottom: 88px; }
  .metrics-section { padding-top: 54px; }.metrics-heading { padding-bottom: 30px; }.metrics-heading h2 { font-size: clamp(32px, 9vw, 44px); }.metrics-heading > p { font-size: 12px; }.metrics-grid { grid-template-columns: 1fr; }.metric-item, .metric-item:first-child, .metric-item:nth-child(3), .metric-item:last-child { display: grid; grid-template-columns: 23px minmax(0, 1fr); column-gap: 14px; padding: 22px 0; border-bottom: 1px solid rgba(37,65,87,.17); border-left: 0; }.metric-item:last-child { border-bottom: 0; }.metric-icon { grid-row: 1 / span 2; width: 18px; height: 18px; margin: 4px 0 0; }.metric-copy { grid-column: 2; }.metric-copy strong { font-size: 27px; }.metric-item > p { grid-column: 2; min-height: 0; margin: 6px 0 14px; font-size: 9px; }.metric-track { grid-column: 2; }
  .pain-list { margin-top: 46px; }.pain-line { grid-template-columns: 1fr; gap: 11px; min-height: 0; padding: 24px 0; }.pain-line:hover { padding-left: 0; background: transparent; }.pain-line h3 { max-width: 345px; font-size: 23px; }.pain-outcome { justify-self: start; max-width: none; color: #5a7187; text-align: left; }.pain-conclusion { padding: 24px 0 0; font-size: 12px; }
  .compare-table-wrap { margin-top: 46px; }.compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; }.compare-table thead { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); }.compare-table tbody tr { padding: 22px 0; border-bottom: 1px solid rgba(33,54,77,.14); }.compare-table tbody th { padding: 0 0 13px; border: 0; font-size: 13px; }.compare-table td { display: grid; grid-template-columns: minmax(112px, .72fr) minmax(0, 1fr); gap: 0 12px; padding: 8px 0; border: 0; }.compare-table tbody td:first-of-type { padding: 12px; margin: 3px 0; border: 1px solid rgba(67,105,134,.16); border-radius: 10px; background: rgba(249,252,253,.78); }.compare-table tbody td:nth-of-type(2) { background: transparent; }.compare-table td::before { grid-row: 1 / span 2; color: #526d84; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; }.compare-table td:nth-of-type(1)::before { content: "Внешняя команда"; }.compare-table td:nth-of-type(2)::before { content: "Штатный специалист"; }.compare-table td strong, .compare-table td span { grid-column: 2; }.compare-table td strong { margin-bottom: 3px; }.compare-closing { align-items: flex-start; flex-direction: column; gap: 15px; padding-top: 24px; }.text-link { min-height: 40px; }
  .scope-matrix { padding-top: 52px; margin-top: 52px; }.scope-matrix-grid { grid-template-columns: 1fr; }.scope-matrix-grid > div { min-height: 0; padding: 18px; }.scope-matrix-grid p { margin-top: 21px; }.scope-boundary { padding-top: 19px; }
  .control-levels { grid-template-columns: 1fr; margin-top: 46px; }.control-levels article { min-height: 0; padding: 20px; }.control-levels h3 { margin-top: 28px; }
}

@media (max-width: 979px) {
  .process-track { display: block; }
  .process-wave { display: none; }
  .process-step { min-height: 0; padding: 0 0 38px 56px; }
  .process-step + .process-step { padding-top: 15px; }
  .process-step:not(:last-of-type)::after { position: absolute; top: 37px; bottom: -3px; left: 8px; width: 1px; content: ""; background: linear-gradient(#8da9bc, rgba(141,169,188,.25)); }
  .process-marker { position: absolute; top: 0; left: 0; flex-direction: column; align-items: center; gap: 8px; min-width: 22px; }
  .process-track h3 { margin: 0 0 8px; font-size: 18px; }
  .process-track p { max-width: 560px; font-size: 12px; }
  .track-result { max-width: none; padding-top: 12px; }
}

@media (max-width: 420px) {
  .hero-content { padding-bottom: 74px; }
}

/* Final visual pass: stable motion, clear production logic, and bare technical icons. */
.hero-actions .button {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.hero-actions .button::before,
.hero-actions .button::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  content: "";
}
.hero-actions .button::before {
  inset: -5px;
  border: 1px solid rgba(190, 218, 236, .15);
  box-shadow: 0 0 20px rgba(147, 195, 224, .11);
}
.hero-actions .button::after {
  inset: -11px;
  border: 1px solid rgba(163, 202, 226, .06);
}
.hero-actions .button-primary::before { border-color: rgba(226, 241, 249, .24); box-shadow: 0 0 26px rgba(178, 214, 236, .18); }
.hero-actions .button-secondary::before { border-color: rgba(173, 211, 234, .17); }
.hero-actions .button:hover { transform: none; }

.metric-item { display: flex; flex-direction: column; min-height: 218px; }
.metric-copy { min-height: 46px; }
.metric-item > p { min-height: 34px; }
.metric-track { margin-top: auto; }

.pain-column-labels {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.18fr) minmax(190px, .48fr);
  gap: 28px;
  min-height: 35px;
  align-items: end;
  color: #718399;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .055em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pain-column-labels span:last-child { text-align: right; }
.pain-line { transition: background 180ms ease; }
.pain-line:hover { padding-left: 0; }
.pain-outcome {
  display: flex;
  align-items: flex-start;
  justify-self: end;
  gap: 8px;
  max-width: 205px;
  color: #496d88;
  text-transform: none;
}
.pain-outcome svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: -1px;
  fill: none;
  stroke: #4c7998;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.pain-outcome span { display: block; }
.pain-conclusion { max-width: 690px; }

.compare-table .compare-featured { color: #345c7c; }
.compare-table .compare-featured .compare-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 0;
  color: #345c7c;
  font-size: 8px;
}
.compare-table .compare-featured .compare-title svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #3d718f;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.compare-table .compare-featured .compare-note { display: block; padding-top: 5px; color: #6e8ca3; font-size: 7px; letter-spacing: .045em; }

.service-card-top .service-icon {
  width: 25px;
  height: 25px;
  color: #c9dfeb;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}
.service-card h3 { margin-top: 49px; }

.scope-matrix-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin-top: 27px;
  border: 0;
}
.scope-matrix-grid > div {
  display: grid;
  grid-template-columns: 18px 22px minmax(0, 1fr);
  align-items: start;
  column-gap: 13px;
  min-height: 0;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid rgba(210, 229, 241, .17);
}
.scope-matrix-grid span { padding-top: 3px; }
.scope-icon { width: 21px; height: 21px; color: #b9d2e1; stroke-width: 1.35; }
.scope-matrix-grid p { margin: 0; color: #dde8ee; font-size: 12px; font-weight: 600; line-height: 1.54; }

.process-wave { top: 5px; height: 52px; }
.process-wave path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 760ms cubic-bezier(.2,.8,.2,1); }
.process-section.is-process-active .process-wave path { stroke-dashoffset: 0; }
.process-step { min-height: 238px; }
.process-track h3 { margin-top: 55px; }
.process-guard-icon {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  color: #5d8199;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.team-members {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 72px;
}
.team-member-card {
  display: grid;
  grid-template-columns: minmax(185px, .58fr) minmax(0, 1fr);
  min-height: 322px;
  overflow: hidden;
  border: 1px solid rgba(214, 230, 243, .16);
  border-radius: 20px;
  background: rgba(19, 31, 49, .84);
  box-shadow: 0 14px 36px rgba(1, 7, 16, .12);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.team-member-card:hover { border-color: rgba(175, 208, 228, .38); box-shadow: 0 20px 44px rgba(1, 7, 16, .2); transform: translateY(-2px); }
.team-member-photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: saturate(.76) contrast(1.03) brightness(.88); transition: filter 240ms ease, transform 420ms ease; }
.team-member-card:hover .team-member-photo { filter: saturate(.9) contrast(1.03) brightness(.97); transform: scale(1.035); }
.team-member-anna .team-member-photo { object-position: 58% 46%; }
.team-member-timur .team-member-photo { object-position: 50% 35%; }
.team-member-content { display: flex; flex-direction: column; min-width: 0; padding: 27px 28px 25px; }
.member-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member-top > span:last-child { color: var(--bronze); font-family: var(--mono); font-size: 9px; }
.member-top .mono-label { color: #a7c7da; font-size: 8px; }
.team-members h3 { margin: 42px 0 7px; color: #eff5f8; font-size: clamp(21px, 2vw, 27px); font-weight: 600; line-height: 1.12; letter-spacing: -.05em; }
.team-members p { margin: 0; }
.member-role { color: #c6d6e0; font-size: 12px; font-weight: 600; line-height: 1.45; }
.member-experience { max-width: 280px; padding-top: 17px; color: #9bb0bf; font-size: 11px; line-height: 1.6; }
.member-tools { margin-top: auto !important; padding-top: 17px; border-top: 1px solid rgba(207, 226, 237, .16); color: #9ec5dd; font-family: var(--mono); font-size: 8px; letter-spacing: .025em; line-height: 1.5; text-transform: uppercase; }

/* No scroll-driven spatial movement: the content must stay optically stable. */
.js [data-reveal],
.js [data-reveal].is-revealed,
.js .hero-proof[data-reveal],
.js .hero-proof[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 1040px) {
  .hero-content { padding-top: 120px; }
  .metric-item { min-height: 205px; }
  .pain-column-labels { grid-template-columns: 54px minmax(0, 1fr) minmax(170px, .42fr); gap: 22px; }
  .scope-matrix-grid { gap: 0 34px; }
  .team-member-card { grid-template-columns: minmax(145px, .52fr) minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .header-inner { min-height: 72px; }
  .hero-content { padding-top: 108px; padding-bottom: 74px; }
  .hero-actions .button::after { inset: -7px; }
  .metric-item, .metric-item:first-child, .metric-item:nth-child(3), .metric-item:last-child { display: grid; min-height: 0; }
  .metric-copy { min-height: 0; }
  .metric-track { margin-top: 0; }
  .pain-column-labels { display: none; }
  .pain-outcome { justify-self: start; max-width: 340px; text-align: left; }
  .scope-matrix-grid { grid-template-columns: 1fr; gap: 0; }
  .scope-matrix-grid > div { grid-template-columns: 17px 21px minmax(0, 1fr); column-gap: 12px; padding: 18px 0; }
  .scope-matrix-grid p { margin: 0; font-size: 11px; }
  .process-guard { gap: 13px; }
  .team-members { grid-template-columns: 1fr; gap: 12px; padding-top: 48px; }
  .team-member-card { grid-template-columns: minmax(116px, .44fr) minmax(0, 1fr); min-height: 258px; }
  .team-member-content { padding: 21px 20px 19px; }
  .team-members h3 { margin-top: 29px; font-size: 22px; }
  .member-experience { padding-top: 13px; font-size: 10px; }
  .member-tools { padding-top: 13px; font-size: 7px; }
}

@media (max-width: 420px) {
  .hero { min-height: 0; }
  h1 { font-size: 40px; }
  .hero-content { padding-top: 101px; padding-bottom: 62px; }
  .hero-description { margin: 20px 0 24px; font-size: 14px; }
  .eyebrow { margin-bottom: 17px; }
}

/* Premium emphasis: one selected production contour, not a row-by-row highlight. */
@media (min-width: 721px) {
  .compare-table-wrap {
    position: relative;
    isolation: isolate;
    padding: 10px 0;
    border-top: 0;
  }
  .compare-premium-frame {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 22%;
    width: 39%;
    overflow: hidden;
    pointer-events: none;
    border: 1px solid rgba(61, 113, 143, .42);
    border-radius: 28px;
    background:
      radial-gradient(circle at 24% 0%, rgba(236, 247, 252, .98), transparent 44%),
      linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(220, 235, 244, .76));
    box-shadow: 0 22px 52px rgba(34, 61, 82, .15), inset 0 1px 0 rgba(255, 255, 255, .94);
  }
  .compare-premium-frame::before {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(74, 125, 154, .14);
    border-radius: 22px;
    content: "";
  }
  .compare-premium-frame span {
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: -43%;
    width: 28%;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .68), transparent);
    filter: blur(3px);
    transform: skewX(-18deg);
    animation: premium-frame-sweep 13s cubic-bezier(.22, 1, .36, 1) 1.4s infinite;
  }
  .compare-table { position: relative; z-index: 1; }
  .compare-table .compare-featured,
  .compare-table tbody td:first-of-type {
    border-right-color: transparent;
    border-left-color: transparent;
    background: transparent;
  }
  .compare-table .compare-featured { border-top-color: transparent; border-radius: 0; }
  .compare-table tbody tr:last-child td:first-of-type { border-bottom-color: transparent; border-radius: 0; }
  .compare-table tbody td:nth-of-type(2),
  .compare-table .compare-secondary { opacity: .72; }
  .compare-table .compare-featured .compare-title { color: #234f70; }
  .compare-table .compare-featured .compare-title svg { stroke: #2f769e; }
}

/* A quiet engineering light pass: it moves only in the background, never the content. */
.hero-media::after {
  position: absolute;
  z-index: 2;
  inset: -35% -42%;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(105deg, transparent 49.72%, rgba(193, 224, 240, .18) 49.9%, rgba(193, 224, 240, .035) 50.3%, transparent 50.48%);
  animation: hero-engineering-pass 15s cubic-bezier(.22, 1, .36, 1) 1.1s infinite;
  will-change: transform, opacity;
}

/* Four real nodes joined edge-to-edge by the same dotted construction line. */
.process-track { overflow: visible; }
.process-step {
  position: relative;
  z-index: 1;
  min-height: 255px;
  padding: 0 25px 0 0;
}
.process-step:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 21px;
  right: 0;
  left: 45px;
  height: 2px;
  content: "";
  opacity: .9;
  background: repeating-linear-gradient(90deg, #6f94ac 0 3px, transparent 3px 8px);
}
.process-node {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  color: #365f7c;
  border: 1px solid rgba(70, 108, 137, .5);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .045em;
  background: #f8f9fa;
  box-shadow: 0 8px 18px rgba(43, 66, 85, .09), inset 0 1px 0 rgba(255, 255, 255, .8);
  place-items: center;
}
.process-section.is-process-active .process-node { animation: process-node-activate 440ms cubic-bezier(.2,.8,.2,1) both; }
.process-step:nth-child(2) .process-node { animation-delay: 90ms; }
.process-step:nth-child(3) .process-node { animation-delay: 180ms; }
.process-step:nth-child(4) .process-node { animation-delay: 270ms; }
.process-copy { padding-right: 3px; margin-top: 24px; }
.process-copy .process-icon { display: block; margin-bottom: 15px; }
.process-copy h3 { margin: 0 0 9px; }
.process-copy .track-result { padding-top: 17px; }

@keyframes premium-frame-sweep {
  0%, 11% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  18% { opacity: .5; }
  42% { opacity: .18; transform: translateX(500%) skewX(-18deg); }
  48%, 100% { opacity: 0; transform: translateX(500%) skewX(-18deg); }
}
@keyframes hero-engineering-pass {
  0%, 10% { opacity: 0; transform: translate3d(-24%, 0, 0); }
  22% { opacity: 1; }
  56% { opacity: .38; transform: translate3d(24%, 0, 0); }
  64%, 100% { opacity: 0; transform: translate3d(24%, 0, 0); }
}
@keyframes process-node-activate {
  0% { opacity: .3; box-shadow: 0 0 0 rgba(43, 66, 85, 0); transform: scale(.84); }
  100% { opacity: 1; box-shadow: 0 8px 18px rgba(43, 66, 85, .09), inset 0 1px 0 rgba(255, 255, 255, .8); transform: scale(1); }
}

@media (max-width: 979px) {
  .process-track { display: block; }
  .process-step { min-height: 0; padding: 0 0 42px 64px; }
  .process-step + .process-step { padding-top: 7px; }
  .process-step:not(:last-child)::after {
    top: 42px;
    right: auto;
    bottom: -4px;
    left: 20px;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, #6f94ac 0 3px, transparent 3px 8px);
  }
  .process-node { position: absolute; top: 0; left: 0; width: 42px; height: 42px; }
  .process-copy { padding-right: 0; margin-top: 0; }
  .process-copy .process-icon { display: none; }
  .process-copy h3 { margin: 0 0 8px; }
}

@media (max-width: 720px) {
  .compare-premium-frame { display: none; }
  .compare-table-wrap { padding: 0; border-top: 1px solid rgba(33, 54, 77, .17); }
}

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

/* Clear two-part situations, three-way comparison, and a five-step handoff. */
.pain-list { margin-top: 70px; }
.pain-column-labels {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 96px;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  line-height: normal;
  text-transform: none;
}
.pain-column-label {
  display: grid;
  min-width: 0;
  padding: 18px 36px;
  font-family: var(--mono);
  font-size: clamp(12px, 1.25vw, 16px);
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  place-items: center;
}
.pain-column-label-situation { color: #243a4e; }
.pain-column-label-solution { color: #2f6d92; border-left: 1px solid rgba(62, 96, 120, .22); }
.pain-column-labels span:last-child { text-align: center; }
.pain-line {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 154px;
  gap: 0;
  padding: 30px 0;
  transition: background 180ms ease;
}
.pain-line::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  content: "";
  background: rgba(62, 96, 120, .22);
}
.pain-line:hover { padding-left: 0; background: linear-gradient(90deg, rgba(212, 225, 234, .32), rgba(212, 225, 234, .08)); }
.pain-situation { min-width: 0; padding: 0 clamp(28px, 5vw, 76px) 0 0; }
.pain-line h3 { max-width: 520px; font-size: clamp(23px, 2.3vw, 31px); }
.pain-line p { max-width: 510px; font-size: 13px; }
.pain-outcome {
  align-self: center;
  justify-self: stretch;
  max-width: none;
  padding: 0 0 0 clamp(28px, 5vw, 76px);
  color: #385f7b;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.58;
  text-align: left;
}
.pain-outcome svg { width: 18px; height: 18px; margin-top: 2px; }
.pain-conclusion { max-width: 720px; padding: 26px 0 0; }

.compare-table th, .compare-table td { padding: 20px 15px; }
.compare-table thead th:first-child { width: 18%; }
.compare-table td { width: auto; }
.compare-table .compare-featured .compare-title { gap: 9px; font-size: 8px; }
.compare-logo { display: block; width: 20px; height: 20px; object-fit: contain; }
.compare-table .compare-featured .compare-note { max-width: 205px; line-height: 1.45; }
.compare-table .compare-freelance { color: #7b6870; }
.compare-table tbody td:nth-of-type(3) { color: #7b6870; background: rgba(237, 233, 235, .42); }

.process-track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process-step { min-height: 262px; padding-right: 16px; }
.process-track h3 { font-size: clamp(15px, 1.45vw, 18px); }
.process-step:not(:last-child)::after {
  height: 1px;
  background: repeating-linear-gradient(90deg, #6f94ac 0 2px, transparent 2px 7px);
}
.process-step:nth-child(5) .process-node { animation-delay: 360ms; }

.team-member-card { min-height: 344px; }
.team-members h3 { max-width: 330px; font-size: clamp(20px, 1.75vw, 25px); }

.contact-payment {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 510px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid rgba(219, 234, 245, .12);
  color: #9fb5c4;
  font-size: 10px;
  line-height: 1.6;
}
.contact-payment svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

@media (min-width: 721px) {
  .compare-premium-frame { left: 18%; width: 27.34%; }
  .compare-table tbody td:nth-of-type(2), .compare-table .compare-secondary { opacity: .78; }
  .compare-table tbody td:nth-of-type(3), .compare-table .compare-freelance { opacity: .68; }
}

@media (max-width: 979px) {
  .process-step:not(:last-child)::after {
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(180deg, #6f94ac 0 2px, transparent 2px 7px);
  }
}

@media (max-width: 720px) {
  .compare-table td:nth-of-type(1)::before { content: "Наша команда"; }
  .pain-list { margin-top: 48px; }
  .pain-column-labels { display: grid; min-height: 63px; }
  .pain-column-label { padding: 14px 10px; font-size: 10px; letter-spacing: .055em; }
  .pain-line { display: grid; min-height: 0; gap: 15px; padding: 24px 0; }
  .pain-line::after { display: none; }
  .pain-situation { padding-right: 0; }
  .pain-line h3 { max-width: 100%; font-size: 24px; }
  .pain-line p { font-size: 12px; }
  .pain-outcome { max-width: 100%; padding: 16px 0 0; border-top: 1px dashed rgba(62, 96, 120, .3); font-size: 12px; }

  .compare-table td:nth-of-type(3)::before { content: "Фрилансер"; }
  .team-member-card { min-height: 286px; }
  .team-members h3 { font-size: 20px; }
}

/* The comparison is deliberately text-led: no floating frame or check markers. */
.compare-table .compare-featured strong,
.compare-table tbody td:first-of-type strong { display: block; }

/* Block 02: the two sides carry the same typographic weight. */
.pain-column-label { font-weight: 600; }
.pain-line h3,
.pain-outcome {
  font-family: var(--sans);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.025em;
}
.pain-line h3 { margin-bottom: 10px; }
.pain-outcome { gap: 10px; }

/* Keep the five steps close enough to read as one production route on wide screens. */
@media (min-width: 980px) {
  .process-track {
    width: min(100%, 1060px);
    margin-right: auto;
    margin-left: auto;
  }
  .process-step { min-height: 240px; padding-right: 12px; }
  .process-guard { margin-right: auto; margin-left: auto; }
}

/* Steps 01–05 arrive one after another as this section enters the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .js .process-section .process-step {
    opacity: 0;
    transform: translate3d(0, -26px, 0);
    will-change: transform, opacity;
  }
  .js .process-section.is-process-active .process-step {
    animation: process-step-drop 560ms cubic-bezier(.2, .82, .25, 1) both;
  }
  .js .process-section.is-process-active .process-step:nth-child(2) { animation-delay: 110ms; }
  .js .process-section.is-process-active .process-step:nth-child(3) { animation-delay: 220ms; }
  .js .process-section.is-process-active .process-step:nth-child(4) { animation-delay: 330ms; }
  .js .process-section.is-process-active .process-step:nth-child(5) { animation-delay: 440ms; }
}

@keyframes process-step-drop {
  from { opacity: 0; transform: translate3d(0, -26px, 0); }
  72% { opacity: 1; transform: translate3d(0, 3px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 720px) {
  .pain-line h3,
  .pain-outcome { font-size: 18px; line-height: 1.36; }
}

@media (prefers-reduced-motion: reduce) {
  .js .process-section .process-step { opacity: 1; transform: none; }
}