:root {
    --color-background: #f7fafc;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fbfb;

    --color-text: #161d29;
    --color-text-secondary: #58656c;
    --color-text-muted: #718087;

    --color-teal: #0f766e;
    --color-teal-dark: #0b625c;
    --color-teal-soft: #dff5f3;

    --color-blue: #3568f5;

    --color-manual: #ae766c;
    --color-manual-soft: #fbf5f3;

    --color-line: #d9e3ea;
    --color-line-teal: #b9d9d5;

    --container-width: 1240px;
    --page-padding: 32px;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --transition-fast: 180ms ease;
}


/* =========================================================
   Base
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

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

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

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

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

.container {
    width: min(calc(100% - (var(--page-padding) * 2)),
            var(--container-width));

    margin-inline: auto;
}


/* =========================================================
   Header
   ========================================================= */

.site-header {
    border-bottom: 1px solid var(--color-line);

    background: rgba(247, 250, 252, 0.94);
}

.site-header__inner {
    min-height: 78px;

    display: flex;
    align-items: center;
    gap: 32px;
}

.brand {
    flex: 0 0 auto;

    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.brand span {
    color: var(--color-teal);
}

.site-nav {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 24px;

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

    font-size: 14px;
}

.site-nav a,
.text-link,
.language-switcher a {
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.site-nav a:hover,
.text-link:hover,
.language-switcher a:hover {
    color: var(--color-teal);
}

.site-header__right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.language-switcher {
    display: flex;
    gap: 6px;

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

    font-size: 13px;
}

.language-switcher__current {
    color: var(--color-text);

    font-weight: 700;
}

.language-switcher__separator {
    opacity: 0.5;
}

.header-cta {
    padding: 10px 16px;

    border: 1px solid var(--color-teal);
    border-radius: var(--radius-sm);

    color: var(--color-teal);

    font-size: 14px;
    font-weight: 700;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.header-cta:hover {
    background: var(--color-teal);
    color: #ffffff;
}


/* =========================================================
   Common section label
   ========================================================= */

.section-label {
    margin-bottom: 22px;

    display: flex;
    align-items: center;
    gap: 12px;

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

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.section-label__line {
    width: 24px;
    height: 3px;

    flex: 0 0 auto;

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


/* =========================================================
   Hero
   ========================================================= */

.hero {
    overflow: hidden;
}

.hero__grid {
    min-height: 670px;

    padding-top: 58px;
    padding-bottom: 52px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(520px, 1fr);

    gap: 74px;
    align-items: center;
}

.hero__content {
    max-width: 590px;
}

.hero__title {
    margin: 0;

    font-size: clamp(46px, 4.2vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.hero__title-line {
    display: block;
}

.hero__title-line--primary {
    color: var(--color-text);
}

.hero__title-line--accent {
    color: var(--color-teal);
}

.hero__title-arrow {
    display: block;

    width: max-content;

    margin: 10px 0 12px;
    margin-left: 34%;

    color: var(--color-blue);

    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.hero__description {
    max-width: 560px;

    margin: 26px 0 0;

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

    font-size: 18px;
    line-height: 1.65;
}

.hero__actions {
    margin-top: 30px;

    display: flex;
    align-items: center;
    gap: 28px;
}

.button {
    min-height: 48px;

    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: var(--radius-sm);

    font-size: 15px;
    font-weight: 800;
}

.button--primary {
    background: var(--color-teal);
    color: #ffffff;

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

.button--primary:hover {
    background: var(--color-teal-dark);

    transform: translateY(-1px);
}

.text-link {
    display: inline-flex;
    gap: 8px;

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

    font-size: 14px;
    font-weight: 700;
}

.hero__principle {
    max-width: 500px;

    margin-top: 36px;
    padding: 18px 0 0 16px;

    display: flex;
    flex-direction: column;
    gap: 2px;

    border-top: 1px solid var(--color-line);
    border-left: 3px solid var(--color-teal);

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

    font-size: 13px;
}

.hero__principle strong {
    color: var(--color-text);
}


/* =========================================================
   Hero process model
   ========================================================= */

.process-model {
    padding: 18px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: var(--color-surface);

    box-shadow:
        0 18px 50px rgba(32, 60, 68, 0.05);
}

.process-model__header {
    min-height: 92px;

    padding: 16px 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    border-radius: var(--radius-md);

    background:
        linear-gradient(180deg,
            #e7f7f5 0%,
            var(--color-teal-soft) 100%);
}

.process-model__eyebrow {
    color: var(--color-text-secondary);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.process-model h2 {
    margin: 8px 0 0;

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

.process-model__scenario {
    margin-top: 32px;

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    letter-spacing: 0.05em;
}

.process-model__body {
    padding: 24px 4px 22px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 76px minmax(0, 1fr);

    gap: 18px;
    align-items: center;
}

.process-column__title {
    margin-bottom: 12px;

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.process-step {
    min-height: 42px;

    margin-bottom: 9px;
    padding: 9px 11px;

    display: flex;
    align-items: center;
    gap: 10px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);

    background: var(--color-surface-soft);

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

    font-size: 12px;
    font-weight: 600;
}

.process-step__dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;
}

.process-step--manual {
    background: var(--color-manual-soft);
    border-color: #eadbd7;
}

.process-step--manual .process-step__dot {
    background: var(--color-manual);
}

.process-step--automated {
    background: #f6fcfb;
    border-color: #cae4df;
}

.process-step--automated .process-step__dot {
    background: var(--color-teal);
}

.process-transform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.process-transform__core {
    width: 66px;
    height: 66px;

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

    border-radius: 50%;

    background: var(--color-teal);
    color: #ffffff;

    font-size: 10px;
    line-height: 1.05;
}

.process-transform__core strong {
    margin-top: 2px;

    font-size: 13px;
}


.process-transform__logo {
    width: 100%;
    height: 100%;

    display: block;

    border-radius: 50%;

    object-fit: contain;
}

.process-transform__arrow {
    color: var(--color-blue);

    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

.process-model__footer {
    padding: 18px 4px 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;

    border-top: 1px solid var(--color-line);
}

.process-metric span {
    display: block;

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.process-metric strong {
    display: block;

    margin-top: 4px;

    color: var(--color-teal);

    font-size: 14px;
}

.process-metric .process-metric__exception {
    color: var(--color-teal);
}


/* =========================================================
   Process audit
   ========================================================= */

.process-audit {
    padding: 86px 0 82px;

    border-top: 1px solid #d6eeeb;

    background:
        linear-gradient(180deg,
            #edf9f7 0%,
            var(--color-background) 24%,
            var(--color-background) 100%);
}

.process-audit__header .section-label {
    margin-bottom: 26px;
}

.process-audit__intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr) minmax(320px, 0.8fr);

    gap: 72px;
    align-items: end;
}

.process-audit__title {
    max-width: 700px;

    margin: 0;

    color: var(--color-text);

    font-size: clamp(38px, 3.4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.process-audit__lead {
    max-width: 470px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.65;
}


/* Main thesis */

.process-audit__thesis {
    margin-top: 38px;

    padding: 19px 24px;

    display: flex;
    align-items: center;
    gap: 18px;

    border: 1px solid var(--color-line-teal);
    border-radius: var(--radius-md);

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

.process-audit__thesis-arrow {
    flex: 0 0 auto;

    color: var(--color-blue);

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

.process-audit__thesis p {
    margin: 0;

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

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

.process-audit__thesis strong {
    color: var(--color-text);
}


/* =========================================================
   Audit cards
   ========================================================= */

.process-audit__grid {
    margin-top: 30px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.audit-card {
    position: relative;
    overflow: hidden;

    min-height: 275px;

    padding: 23px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    transition:
        border-color 450ms ease,
        box-shadow 450ms ease,
        transform 450ms ease;
}

.audit-card__meta,
.audit-card h3,
.audit-card>p,
.audit-card__flow {
    position: relative;
    z-index: 1;
}

.audit-card:hover {
    border-color: #b9d9d5;

    box-shadow:
        0 15px 34px rgba(32, 86, 82, 0.05);

    transform: translateY(-2px);
}

.audit-card__meta {
    margin-bottom: 18px;

    display: flex;
    justify-content: space-between;
    gap: 14px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.audit-card__meta span:first-child {
    color: var(--color-teal);
    font-weight: 700;
}

.audit-card__meta span:last-child {
    color: var(--color-text-muted);
    text-align: right;
}

.audit-card h3 {
    margin: 0;

    color: var(--color-text);

    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.audit-card>p {
    margin: 14px 0 0;

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

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

.audit-card__flow {
    margin-top: auto;

    padding-top: 20px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    border-top: 1px solid var(--color-line);

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.audit-card__manual {
    color: var(--color-manual);
}


/* =========================================================
   Economic result
   ========================================================= */

.process-audit__impact {
    margin-top: 30px;

    padding: 30px 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    border: 1px solid #c5e1dd;
    border-radius: var(--radius-lg);

    background:
        linear-gradient(135deg,
            #e2f3f1 0%,
            #d8eeeb 100%);
}

.process-audit__impact>div {
    width: 100%;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);

    gap: 38px;
    align-items: center;
}

.process-audit__impact-label {
    margin-bottom: 0;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.process-audit__impact p {
    margin: 0;

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

    font-size: 21px;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.process-audit__impact strong {
    color: var(--color-text);
}

.process-audit__impact-arrow {
    flex: 0 0 auto;

    color: var(--color-blue);

    font-size: 38px;
    font-weight: 400;
    line-height: 1;
}


/* =========================================================
   Capabilities
   ========================================================= */

.capabilities {
    padding: 92px 0 88px;

    border-top: 1px solid var(--color-line);

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

.capabilities__header .section-label {
    margin-bottom: 26px;
}

.capabilities__intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr) minmax(320px, 0.75fr);

    gap: 72px;
    align-items: end;
}

.capabilities__title {
    max-width: 690px;

    margin: 0;

    color: var(--color-text);

    font-size: clamp(40px, 3.5vw, 54px);
    line-height: 1.07;
    letter-spacing: -0.04em;
}

.capabilities__lead {
    max-width: 470px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.65;
}

.capabilities__grid {
    margin-top: 42px;

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

    gap: 18px;
}

.capability-card {
    position: relative;
    overflow: hidden;

    min-height: 390px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    transition:
        border-color 450ms ease,
        box-shadow 450ms ease,
        transform 450ms ease;
}

.capability-card>* {
    position: relative;
    z-index: 1;
}

.capability-card:hover {
    border-color: #b9d9d5;

    box-shadow:
        0 15px 34px rgba(32, 86, 82, 0.05);

    transform: translateY(-2px);
}

.capability-card__number {
    margin-bottom: 23px;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
}

.capability-card h3 {
    max-width: 500px;

    margin: 0;

    color: var(--color-text);

    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.capability-card>p {
    max-width: 530px;

    margin: 16px 0 0;

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

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

.capability-card__list {
    margin: 22px 0 0;
    padding: 0;

    display: grid;
    gap: 9px;

    list-style: none;

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

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

.capability-card__list li {
    position: relative;

    padding-left: 17px;
}

.capability-card__list li::before {
    content: "";

    position: absolute;

    top: 0.67em;
    left: 0;

    width: 6px;
    height: 2px;

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

.capability-card__footer {
    margin-top: auto;

    padding-top: 22px;

    border-top: 1px solid var(--color-line);

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.035em;
}


/* =========================================================
   Wide capability card 07
   ========================================================= */

.capability-card--wide {
    min-height: 0;

    grid-column: 1 / -1;

    padding: 30px;

    border-color: #c5ddd9;

    background:
        linear-gradient(120deg,
            #ffffff 0%,
            #f4faf9 100%);
}

.capability-card__wide-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr) minmax(340px, 0.85fr);

    gap: 70px;
    align-items: start;
}

.capability-card--wide h3 {
    max-width: none;

    font-size: 28px;
}

.capability-card--wide p {
    max-width: 650px;
}

.capability-card--wide .capability-card__list {
    margin-top: 34px;
}

.capability-card__flow {
    margin-top: 28px;

    padding-top: 22px;

    display: flex;
    align-items: center;
    gap: 13px;

    border-top: 1px solid var(--color-line);

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.035em;
}

.capability-card__flow>span:not(.capability-card__flow-arrow) {
    padding: 7px 10px;

    border: 1px solid var(--color-line-teal);
    border-radius: 8px;

    background: var(--color-surface);

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

.capability-card__flow-arrow {
    color: var(--color-teal);

    font-size: 18px;
    font-weight: 500;
}

.capability-card__flow-arrow:nth-child(6) {
    color: var(--color-blue);
}


/* =========================================================
   Approach
   ========================================================= */

.approach {
    padding: 92px 0 88px;

    border-top: 1px solid var(--color-line);

    background:
        linear-gradient(180deg,
            #f4f9f9 0%,
            #f8fbfc 36%,
            var(--color-background) 100%);
}

.approach__header .section-label {
    margin-bottom: 26px;
}

.approach__intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr) minmax(320px, 0.75fr);

    gap: 72px;
    align-items: end;
}

.approach__title {
    max-width: 700px;

    margin: 0;

    color: var(--color-text);

    font-size: clamp(40px, 3.5vw, 54px);
    line-height: 1.07;
    letter-spacing: -0.04em;
}

.approach__title-line {
    display: block;
}

.approach__title-line--primary {
    color: var(--color-text);
}

.approach__title-line--accent {
    color: var(--color-teal);
}

.approach__title-arrow {
    display: block;

    width: max-content;

    margin: 9px 0 10px;
    margin-left: 28%;

    color: var(--color-blue);

    font-size: 32px;
    font-weight: 500;
    line-height: 1;
}

.approach__lead {
    max-width: 500px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.65;
}

.approach__steps {
    margin-top: 42px;

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

    gap: 18px;
}

.approach-card {
    position: relative;
    overflow: hidden;

    min-height: 440px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    transition:
        border-color 450ms ease,
        box-shadow 450ms ease,
        transform 450ms ease;
}

.approach-card>* {
    position: relative;
    z-index: 1;
}

.approach-card:hover {
    border-color: #b9d9d5;

    box-shadow:
        0 15px 34px rgba(32, 86, 82, 0.05);

    transform: translateY(-2px);
}

.approach-card__top {
    margin-bottom: 24px;
    padding-bottom: 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid var(--color-line);
}

.approach-card__number {
    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
}

.approach-card__verb {
    color: var(--color-text-muted);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.approach-card h3 {
    margin: 0;

    color: var(--color-text);

    font-size: 24px;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.approach-card>p {
    margin: 16px 0 0;

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

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

.approach-card__list {
    margin: 22px 0 0;
    padding: 0;

    display: grid;
    gap: 9px;

    list-style: none;

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

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

.approach-card__list li {
    position: relative;

    padding-left: 17px;
}

.approach-card__list li::before {
    content: "";

    position: absolute;

    top: 0.67em;
    left: 0;

    width: 6px;
    height: 2px;

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

.approach-card__result {
    margin-top: auto;
    padding-top: 22px;

    border-top: 1px solid var(--color-line);

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.03em;
}


/* =========================================================
   Approach principle
   ========================================================= */

.approach__principle {
    margin-top: 24px;

    padding: 30px 32px;

    display: grid;
    grid-template-columns:
        max-content 80px minmax(0, 1fr);

    column-gap: 24px;
    align-items: center;

    border: 1px solid #c5e1dd;
    border-radius: var(--radius-lg);

    background:
        linear-gradient(125deg,
            #e8f5f3 0%,
            #f2f9f8 48%,
            #edf7f5 100%);
}

.approach__principle-label {
    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.approach__principle-arrow {
    justify-self: center;

    color: var(--color-blue);

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

.approach__principle p {
    max-width: 900px;

    margin: 0;

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

    font-size: 21px;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.approach__principle strong {
    color: var(--color-text);
}


/* =========================================================
   Cases
   ========================================================= */

.cases {
    padding: 92px 0 88px;

    border-top: 1px solid var(--color-line);

    background:
        linear-gradient(180deg,
            #f7fafc 0%,
            #f5f9fa 48%,
            #f7fafc 100%);
}

.cases__header .section-label {
    margin-bottom: 26px;
}

.cases__intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr) minmax(320px, 0.75fr);

    gap: 72px;
    align-items: end;
}

.cases__title {
    max-width: 700px;

    margin: 0;

    color: var(--color-text);

    font-size: clamp(40px, 3.5vw, 54px);
    line-height: 1.07;
    letter-spacing: -0.04em;
}

.cases__lead {
    max-width: 500px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.65;
}

.cases__grid {
    margin-top: 42px;

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

    gap: 18px;
}

.case-card {
    position: relative;
    overflow: hidden;

    min-height: 590px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    transition:
        border-color 450ms ease,
        box-shadow 450ms ease,
        transform 450ms ease;
}

.case-card>* {
    position: relative;
    z-index: 1;
}

.case-card:hover {
    border-color: #b9d9d5;

    box-shadow:
        0 15px 34px rgba(32, 86, 82, 0.05);

    transform: translateY(-2px);
}

.case-card__header {
    margin-bottom: 24px;
    padding-bottom: 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid var(--color-line);
}

.case-card__number {
    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
}

.case-card__type {
    color: var(--color-text-muted);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.case-card h3 {
    margin: 0 0 20px;

    color: var(--color-text);

    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.case-card__block {
    margin-top: 10px;

    padding: 16px 18px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);

    background: var(--color-surface-soft);
}

.case-card h3+.case-card__block {
    margin-top: 0;

    border-color: #eadbd7;

    background:
        linear-gradient(135deg,
            #fdf9f8 0%,
            #fbf6f4 100%);
}

.case-card h3+.case-card__block+.case-card__block {
    border-color: #cae4df;

    background:
        linear-gradient(135deg,
            #f7fcfb 0%,
            #f1faf8 100%);
}

.case-card__label {
    margin-bottom: 7px;

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.case-card h3+.case-card__block .case-card__label {
    color: var(--color-manual);
}

.case-card h3+.case-card__block+.case-card__block .case-card__label {
    color: var(--color-teal);
}

.case-card__block p {
    margin: 0;

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

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

.case-card__flow {
    margin-top: 22px;
    padding-top: 18px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    border-top: 1px solid var(--color-line);

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.case-card__flow span:nth-child(even) {
    color: var(--color-teal);

    font-size: 15px;
    font-weight: 500;
}

.case-card__result {
    position: relative;

    margin-top: auto;
    padding: 20px 0 0 17px;

    border-top: 1px solid var(--color-line);

    color: var(--color-text);

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

.case-card__result::before {
    content: "";

    position: absolute;

    top: 24px;
    left: 0;

    width: 3px;
    height: 30px;

    border-radius: 2px;

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


/* =========================================================
   Wide semantic matching case
   ========================================================= */

.case-card--wide {
    grid-column: 1 / -1;

    min-height: 0;
}

.case-card__wide-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(380px, 0.9fr);

    gap: 56px;
    align-items: start;
}

.case-card__question {
    width: max-content;

    margin-bottom: 12px;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.case-card__wide-main h3 {
    max-width: 620px;

    margin: 0;

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

.case-card__wide-lead {
    max-width: 650px;

    margin: 18px 0 0;

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

    font-size: 15px;
    line-height: 1.65;
}

.case-card__wide-side {
    display: grid;
    gap: 10px;
}

.case-card__wide-side .case-card__block {
    margin-top: 0;
}

.case-card__wide-side .case-card__block:first-child {
    border-color: #eadbd7;

    background:
        linear-gradient(135deg,
            #fdf9f8 0%,
            #fbf6f4 100%);
}

.case-card__wide-side .case-card__block:first-child .case-card__label {
    color: var(--color-manual);
}

.case-card__wide-side .case-card__block:last-child {
    border-color: #cae4df;

    background:
        linear-gradient(135deg,
            #f7fcfb 0%,
            #f1faf8 100%);
}

.case-card__wide-side .case-card__block:last-child .case-card__label {
    color: var(--color-teal);
}

.case-card__matching-example {
    margin-top: 26px;
    padding: 20px 22px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 70px minmax(190px, 0.45fr);

    gap: 20px;
    align-items: center;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.72);
}

.case-card__matching-source {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.case-card__matching-source span {
    padding: 7px 10px;

    border: 1px solid #eadbd7;
    border-radius: 8px;

    background: var(--color-manual-soft);

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

    font-size: 12px;
}

.case-card__matching-arrow {
    justify-self: center;

    color: var(--color-blue);

    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

.case-card__matching-master {
    padding: 14px 16px;

    border: 1px solid var(--color-line-teal);
    border-radius: 10px;

    background: #f3fbfa;
}

.case-card__matching-master>* {
    display: block;
}

.case-card__matching-caption {
    color: var(--color-text-muted);

    font-size: 11px;
    line-height: 1.35;
}

.case-card__matching-name {
    margin-top: 6px;

    color: var(--color-text);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.case-card__matching-id {
    margin-top: 9px;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.03em;
}


/* =========================================================
   Cases common principle
   ========================================================= */

.cases__note {
    margin-top: 24px;

    padding: 30px 32px;

    display: grid;
    grid-template-columns:
        max-content 80px minmax(0, 1fr);

    column-gap: 24px;
    align-items: center;

    border: 1px solid #c5e1dd;
    border-radius: var(--radius-lg);

    background:
        linear-gradient(125deg,
            #e7f4f2 0%,
            #f0f8f7 48%,
            #edf7f5 100%);
}

.cases__note-label {
    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.cases__note-arrow {
    justify-self: center;

    color: var(--color-blue);

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

.cases__note p {
    max-width: 900px;

    margin: 0;

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

    font-size: 21px;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.cases__note strong {
    color: var(--color-text);
}


/* =========================================================
   Technology
   ========================================================= */

.technology {
    padding: 92px 0 88px;

    border-top: 1px solid var(--color-line);

    background:
        linear-gradient(180deg,
            #f1f7f7 0%,
            #f6fafb 28%,
            var(--color-background) 100%);
}

.technology__header .section-label {
    margin-bottom: 26px;
}

.technology__intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr) minmax(320px, 0.75fr);

    gap: 72px;
    align-items: end;
}

.technology__title {
    max-width: 700px;

    margin: 0;

    color: var(--color-text);

    font-size: clamp(40px, 3.5vw, 54px);
    line-height: 1.07;
    letter-spacing: -0.04em;
}

.technology__lead {
    max-width: 500px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.65;
}

.technology__grid {
    margin-top: 42px;

    overflow: hidden;

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

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: rgba(255, 255, 255, 0.78);
}

.technology-group {
    min-height: 230px;

    padding: 27px 28px 30px;

    transition:
        background-color 350ms ease,
        box-shadow 350ms ease;
}

.technology-group:nth-child(1),
.technology-group:nth-child(2),
.technology-group:nth-child(4),
.technology-group:nth-child(5) {
    border-right: 1px solid var(--color-line);
}

.technology-group:nth-child(-n + 3) {
    border-bottom: 1px solid var(--color-line);
}

.technology-group:hover {
    background:
        linear-gradient(135deg,
            rgba(240, 249, 247, 0.82) 0%,
            rgba(250, 253, 253, 0.92) 100%);

    box-shadow:
        inset 0 0 0 1px rgba(185, 217, 213, 0.22);
}

.technology-group__header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.technology-group__number {
    padding-top: 4px;

    flex: 0 0 auto;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
}

.technology-group h3 {
    margin: 0;

    color: var(--color-text);

    font-size: 19px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.technology-group__items {
    margin-top: 24px;

    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
}

.technology-group__items span {
    padding: 7px 10px;

    border: 1px solid #d5e3e2;
    border-radius: 8px;

    background: rgba(248, 252, 252, 0.9);

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        color 220ms ease;
}

.technology-group:hover .technology-group__items span {
    border-color: #c9dfdc;

    background: rgba(255, 255, 255, 0.88);
}


/* =========================================================
   Technology principle
   ========================================================= */

.technology__principle {
    margin-top: 24px;

    padding: 30px 32px;

    display: grid;
    grid-template-columns:
        max-content 80px minmax(0, 1fr);

    column-gap: 24px;
    align-items: center;

    border: 1px solid #c5e1dd;
    border-radius: var(--radius-lg);

    background:
        linear-gradient(125deg,
            #e8f5f3 0%,
            #f3f9f8 50%,
            #eef7f6 100%);
}

.technology__principle-label {
    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.technology__principle-arrow {
    justify-self: center;

    color: var(--color-blue);

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

.technology__principle p {
    max-width: 900px;

    margin: 0;

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

    font-size: 21px;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.technology__principle strong {
    color: var(--color-text);
}


/* =========================================================
   Security
   ========================================================= */

.security {
    padding: 92px 0 88px;

    border-top: 1px solid var(--color-line);

    background:
        linear-gradient(180deg,
            #f7fafc 0%,
            #f2f8f8 30%,
            #f7fafc 100%);
}

.security__header .section-label {
    margin-bottom: 26px;
}

.security__intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr) minmax(320px, 0.75fr);

    gap: 72px;
    align-items: end;
}

.security__title {
    max-width: 720px;

    margin: 0;

    color: var(--color-text);

    font-size: clamp(40px, 3.5vw, 54px);
    line-height: 1.07;
    letter-spacing: -0.04em;
}

.security__lead {
    max-width: 500px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.65;
}

.security__architecture {
    margin-top: 42px;

    padding: 28px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(246, 251, 251, 0.96) 100%);

    box-shadow:
        0 18px 48px rgba(32, 60, 68, 0.035);
}

.security__architecture-label {
    margin-bottom: 22px;

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.security__flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 58px minmax(0, 1fr) 58px minmax(0, 1fr);

    gap: 14px;
    align-items: stretch;
}

.security__flow-zone {
    min-height: 320px;

    padding: 24px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

.security__flow-zone--data {
    border-color: #d8e2e7;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f8fafb 100%);
}

.security__flow-zone--control {
    border-color: #bcdcd8;

    background:
        linear-gradient(145deg,
            #edf8f6 0%,
            #e3f3f0 100%);
}

.security__flow-zone--ai {
    border-color: #d4dff5;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f5f8ff 100%);
}

.security__flow-eyebrow {
    margin-bottom: 16px;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.security__flow-zone--ai .security__flow-eyebrow {
    color: var(--color-blue);
}

.security__flow-zone h3 {
    margin: 0;

    color: var(--color-text);

    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.security__flow-arrow {
    align-self: center;
    justify-self: center;

    color: var(--color-blue);

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

.security__data-list {
    margin-top: auto;
    padding-top: 24px;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.security__data-list span {
    padding: 7px 9px;

    border: 1px solid #dce4e8;
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.88);

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

    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
}

.security__control-list {
    margin-top: auto;
    padding-top: 24px;

    display: grid;
    gap: 11px;
}

.security__control-list>div {
    display: flex;
    align-items: center;
    gap: 10px;

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

    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.security__control-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

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

.security__ai-status {
    margin-top: 12px;
    padding: 12px 13px;

    border: 1px solid #d9e3f5;
    border-radius: var(--radius-sm);

    background: rgba(255, 255, 255, 0.8);
}

.security__ai-status:first-of-type {
    margin-top: auto;
}

.security__ai-status span {
    display: block;

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

    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.security__ai-status strong {
    display: block;

    margin-top: 4px;

    color: var(--color-text);

    font-size: 12px;
    line-height: 1.4;
}

.security__ai-status:first-of-type strong {
    color: var(--color-blue);
}

.security__ai-status:last-child strong {
    color: var(--color-teal);
}


/* =========================================================
   Security modes
   ========================================================= */

.security__modes {
    margin-top: 18px;

    overflow: hidden;

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

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: rgba(255, 255, 255, 0.78);
}

.security-mode {
    min-height: 205px;

    padding: 27px 28px;

    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);

    gap: 15px;

    transition:
        background-color 300ms ease,
        box-shadow 300ms ease;
}

.security-mode:nth-child(odd) {
    border-right: 1px solid var(--color-line);
}

.security-mode:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-line);
}

.security-mode:hover {
    background:
        linear-gradient(135deg,
            rgba(241, 249, 248, 0.82) 0%,
            rgba(252, 254, 254, 0.92) 100%);
}

.security-mode__number {
    padding-top: 4px;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
}

.security-mode h3 {
    margin: 0;

    color: var(--color-text);

    font-size: 19px;
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.security-mode p {
    margin: 12px 0 0;

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

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


/* =========================================================
   Security principle
   ========================================================= */

.security__principle {
    margin-top: 24px;

    padding: 30px 32px;

    display: grid;
    grid-template-columns:
        max-content 80px minmax(0, 1fr);

    column-gap: 24px;
    align-items: center;

    border: 1px solid #c5e1dd;
    border-radius: var(--radius-lg);

    background:
        linear-gradient(125deg,
            #e7f4f2 0%,
            #f1f8f7 50%,
            #edf7f5 100%);
}

.security__principle-label {
    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.security__principle-arrow {
    justify-self: center;

    color: var(--color-blue);

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

.security__principle p {
    max-width: 900px;

    margin: 0;

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

    font-size: 21px;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.security__principle strong {
    color: var(--color-text);
}


/* =========================================================
   Contact
   ========================================================= */

.contact {
    padding: 96px 0 90px;

    border-top: 1px solid #cfe5e2;

    background:
        linear-gradient(180deg,
            #eaf6f4 0%,
            #f3f9f8 38%,
            #f7fafc 100%);
}

.contact__header .section-label {
    margin-bottom: 26px;
}

.contact__intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr) minmax(320px, 0.75fr);

    gap: 72px;
    align-items: end;
}

.contact__title {
    max-width: 760px;

    margin: 0;

    color: var(--color-text);

    font-size: clamp(42px, 3.8vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.contact__lead {
    max-width: 500px;

    margin: 0;

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

    font-size: 17px;
    line-height: 1.65;
}


/* =========================================================
   Contact body
   ========================================================= */

.contact__body {
    margin-top: 44px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr) minmax(360px, 0.85fr);

    gap: 18px;
}


/* Main message */

.contact__message {
    min-height: 390px;

    padding: 34px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(248, 252, 252, 0.98) 100%);
}

.contact__message-label {
    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.contact__message h3 {
    max-width: 650px;

    margin: 22px 0 0;

    color: var(--color-text);

    font-size: 31px;
    line-height: 1.16;
    letter-spacing: -0.035em;
}

.contact__message>p {
    max-width: 650px;

    margin: 18px 0 0;

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

    font-size: 15px;
    line-height: 1.7;
}


/* Contact process */

.contact__flow {
    margin-top: auto;
    padding-top: 28px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    border-top: 1px solid var(--color-line);

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.contact__flow span:nth-child(odd) {
    padding: 7px 9px;

    border: 1px solid var(--color-line-teal);
    border-radius: 8px;

    background: #ffffff;

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

.contact__flow span:nth-child(even) {
    color: var(--color-teal);

    font-size: 17px;
    font-weight: 500;
}


/* =========================================================
   Telegram CTA
   ========================================================= */

.contact__telegram {
    position: relative;
    overflow: hidden;

    min-height: 390px;

    padding: 34px;

    display: flex;
    flex-direction: column;

    border: 1px solid #9ccbc5;
    border-radius: var(--radius-lg);

    background:
        linear-gradient(145deg,
            #dff3f0 0%,
            #e9f7f5 50%,
            #f3faf9 100%);

    transition:
        border-color 350ms ease,
        box-shadow 350ms ease,
        transform 350ms ease;
}

.contact__telegram::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -190px;
    right: -150px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(53, 104, 245, 0.10) 0%,
            rgba(53, 104, 245, 0.035) 40%,
            rgba(53, 104, 245, 0) 72%);

    pointer-events: none;
}

.contact__telegram>* {
    position: relative;
    z-index: 1;
}

.contact__telegram:hover {
    border-color: #78b9b1;

    box-shadow:
        0 18px 40px rgba(24, 90, 84, 0.08);

    transform: translateY(-2px);
}

.contact__telegram-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.contact__telegram-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.contact__telegram-icon {
    width: 24px;
    height: 24px;

    display: block;
    flex: 0 0 24px;

    border-radius: 6px;

    object-fit: cover;
}

.contact__telegram-arrow {
    color: var(--color-blue);

    font-size: 34px;
    line-height: 1;

    transition:
        transform 260ms ease;
}

.contact__telegram:hover .contact__telegram-arrow {
    transform: translateX(5px);
}

.contact__telegram>strong {
    display: block;

    margin-top: 38px;

    color: var(--color-text);

    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.contact__telegram>p {
    max-width: 420px;

    margin: 18px 0 0;

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

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

.contact__telegram-action {
    width: max-content;

    margin-top: auto;
    padding-top: 26px;

    border-top: 1px solid #badbd7;

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

    font-size: 14px;
    font-weight: 800;
}


/* =========================================================
   Email CTA
   ========================================================= */

.contact__email {
    margin-top: 18px;
    padding: 24px 30px;

    display: grid;
    grid-template-columns:
        max-content minmax(0, 1fr) max-content;

    gap: 28px;
    align-items: center;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(247, 251, 251, 0.96) 100%);

    transition:
        border-color 350ms ease,
        box-shadow 350ms ease,
        transform 350ms ease;
}

.contact__email:hover {
    border-color: #9ccbc5;

    box-shadow:
        0 14px 34px rgba(24, 90, 84, 0.06);

    transform: translateY(-2px);
}

.contact__email-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.contact__email-icon {
    width: 22px;
    height: 22px;

    display: block;
    flex: 0 0 22px;

    object-fit: cover;
}

.contact__email>strong {
    min-width: 0;

    color: var(--color-text);

    font-size: clamp(19px, 2vw, 26px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;

    overflow-wrap: anywhere;
}

.contact__email-arrow {
    color: var(--color-blue);

    font-size: 30px;
    line-height: 1;

    transition:
        transform 260ms ease;
}

.contact__email:hover .contact__email-arrow {
    transform: translateX(5px);
}


/* =========================================================
   Contact principle
   ========================================================= */

.contact__principle {
    margin-top: 24px;

    padding: 30px 32px;

    display: grid;
    grid-template-columns:
        max-content 80px minmax(0, 1fr);

    column-gap: 24px;
    align-items: center;

    border: 1px solid #bcdcd8;
    border-radius: var(--radius-lg);

    background:
        linear-gradient(125deg,
            #dff1ef 0%,
            #edf7f5 50%,
            #e7f4f2 100%);
}

.contact__principle-label {
    color: var(--color-teal);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.contact__principle-arrow {
    justify-self: center;

    color: var(--color-blue);

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

.contact__principle p {
    max-width: 900px;

    margin: 0;

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

    font-size: 21px;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.contact__principle strong {
    color: var(--color-text);
}


/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    padding: 54px 0 28px;

    border-top: 1px solid var(--color-line);

    background: #f3f7f8;
}

.site-footer__main {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.1fr) minmax(180px, 0.65fr) minmax(230px, 0.7fr);

    gap: 70px;
    align-items: start;
}

.site-footer__brand .brand {
    display: inline-block;
}

.site-footer__brand p {
    max-width: 410px;

    margin: 17px 0 0;

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

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

.site-footer__nav {
    display: grid;
    gap: 11px;

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

    font-size: 13px;
}

.site-footer__nav a {
    width: max-content;

    transition:
        color var(--transition-fast);
}

.site-footer__nav a:hover {
    color: var(--color-teal);
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer__contact>span {
    color: var(--color-text-muted);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-footer__contact a {
    width: max-content;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--color-teal);

    font-size: 14px;
    font-weight: 800;

    transition:
        color var(--transition-fast);
}

.site-footer__telegram-icon {
    width: 18px;
    height: 18px;

    display: block;
    flex: 0 0 18px;

    border-radius: 4px;
    object-fit: cover;
}

.site-footer__email-icon {
    width: 18px;
    height: 18px;

    display: block;
    flex: 0 0 18px;

    object-fit: cover;
}

.site-footer__contact a:hover {
    color: var(--color-teal-dark);
}

.site-footer__bottom {
    margin-top: 48px;
    padding-top: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    border-top: 1px solid var(--color-line);

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

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.04em;
}


/* =========================================================
   Shared moving gradient for cards
   ========================================================= */

.audit-card::before,
.capability-card::before,
.approach-card::before,
.case-card::before {
    content: "";

    position: absolute;

    top: -42%;
    left: -48%;

    width: 196%;
    height: 188%;

    pointer-events: none;

    background:
        radial-gradient(ellipse at 19% 34%,
            rgba(185, 230, 224, 0.50) 0%,
            rgba(211, 240, 236, 0.38) 18%,
            rgba(232, 248, 245, 0.23) 32%,
            rgba(250, 253, 253, 0) 55%),

        radial-gradient(ellipse at 78% 68%,
            rgba(207, 239, 235, 0.45) 0%,
            rgba(226, 246, 243, 0.30) 20%,
            rgba(244, 251, 250, 0.16) 34%,
            rgba(255, 255, 255, 0) 56%),

        linear-gradient(118deg,
            rgba(255, 255, 255, 0) 22%,
            rgba(226, 246, 243, 0.12) 37%,
            rgba(207, 239, 235, 0.23) 47%,
            rgba(242, 251, 249, 0.14) 59%,
            rgba(255, 255, 255, 0) 76%);

    opacity: 0;

    transform:
        translate3d(-18%, -3%, 0) rotate(-2deg) scale(1);

    transition:
        opacity 1050ms cubic-bezier(0.22, 1, 0.36, 1);

    animation:
        card-gradient-drift 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;

    animation-play-state: paused;

    will-change: transform, opacity;
}

.audit-card:hover::before,
.capability-card:hover::before,
.approach-card:hover::before,
.case-card:hover::before {
    opacity: 0.88;

    animation-play-state: running;
}


/* =========================================================
   Moving gradient animation
   ========================================================= */

@keyframes card-gradient-drift {
    0% {
        transform:
            translate3d(-18%, -4%, 0) rotate(-2deg) scale(1);
    }

    20% {
        transform:
            translate3d(-8%, 4%, 0) rotate(-0.5deg) scale(1.015);
    }

    40% {
        transform:
            translate3d(3%, -5%, 0) rotate(1deg) scale(1.025);
    }

    60% {
        transform:
            translate3d(13%, 1%, 0) rotate(2deg) scale(1.035);
    }

    80% {
        transform:
            translate3d(20%, 6%, 0) rotate(0.5deg) scale(1.02);
    }

    100% {
        transform:
            translate3d(7%, -2%, 0) rotate(-1.5deg) scale(1.045);
    }
}


/* =========================================================
   Responsive — up to 1050px
   ========================================================= */

@media (max-width: 1050px) {

    .site-nav {
        display: none;
    }

    .site-header__right {
        margin-left: auto;
    }


    /* Hero */

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

        gap: 42px;
    }

    .hero__content {
        max-width: 760px;
    }

    .process-model {
        max-width: 760px;
    }


    /* Process audit */

    .process-audit {
        padding-top: 72px;
        padding-bottom: 70px;
    }

    .process-audit__intro {
        grid-template-columns: 1fr 0.8fr;

        gap: 42px;
    }

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


    /* Capabilities */

    .capabilities {
        padding-top: 74px;
        padding-bottom: 72px;
    }

    .capabilities__intro {
        grid-template-columns: 1fr 0.8fr;

        gap: 42px;
    }

    .capability-card {
        min-height: 410px;
    }

    .capability-card__wide-content {
        gap: 42px;
    }


    /* Approach */

    .approach {
        padding-top: 74px;
        padding-bottom: 72px;
    }

    .approach__intro {
        grid-template-columns: 1fr 0.8fr;

        gap: 42px;
    }

    .approach-card {
        min-height: 470px;

        padding: 24px;
    }

    .approach-card h3 {
        font-size: 22px;
    }

    .approach__principle {
        grid-template-columns:
            max-content 64px minmax(0, 1fr);

        column-gap: 18px;
    }


    /* Cases */

    .cases {
        padding-top: 74px;
        padding-bottom: 72px;
    }

    .cases__intro {
        grid-template-columns: 1fr 0.8fr;

        gap: 42px;
    }

    .case-card {
        min-height: 620px;

        padding: 24px;
    }

    .cases__note {
        grid-template-columns:
            max-content 64px minmax(0, 1fr);

        column-gap: 18px;
    }


    /* Technology */

    .technology {
        padding-top: 74px;
        padding-bottom: 72px;
    }

    .technology__intro {
        grid-template-columns: 1fr 0.8fr;

        gap: 42px;
    }

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

    .technology-group {
        min-height: 220px;

        border-right: 0;
        border-bottom: 0;
    }

    .technology-group:nth-child(odd) {
        border-right: 1px solid var(--color-line);
    }

    .technology-group:nth-child(-n + 4) {
        border-bottom: 1px solid var(--color-line);
    }

    .technology__principle {
        grid-template-columns:
            max-content 64px minmax(0, 1fr);

        column-gap: 18px;
    }


    /* Security */

    .security {
        padding-top: 74px;
        padding-bottom: 72px;
    }

    .security__intro {
        grid-template-columns: 1fr 0.8fr;

        gap: 42px;
    }

    .security__architecture {
        padding: 22px;
    }

    .security__flow {
        grid-template-columns:
            minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr);

        gap: 10px;
    }

    .security__flow-zone {
        min-height: 340px;

        padding: 20px;
    }

    .security__flow-zone h3 {
        font-size: 18px;
    }

    .security__flow-arrow {
        font-size: 30px;
    }

    .security__principle {
        grid-template-columns:
            max-content 64px minmax(0, 1fr);

        column-gap: 18px;
    }


    /* Contact */

    .contact {
        padding-top: 76px;
        padding-bottom: 74px;
    }

    .contact__intro {
        grid-template-columns: 1fr 0.8fr;

        gap: 42px;
    }

    .contact__body {
        grid-template-columns:
            minmax(0, 1fr) minmax(320px, 0.8fr);
    }

    .contact__message,
    .contact__telegram {
        padding: 28px;
    }

    .contact__message h3 {
        font-size: 28px;
    }

    .contact__principle {
        grid-template-columns:
            max-content 64px minmax(0, 1fr);

        column-gap: 18px;
    }


    /* Footer */

    .site-footer__main {
        grid-template-columns:
            minmax(260px, 1fr) minmax(160px, 0.55fr) minmax(200px, 0.65fr);

        gap: 42px;
    }
}


/* =========================================================
   Responsive — up to 900px
   ========================================================= */

@media (max-width: 900px) {

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

    .approach-card {
        min-height: 0;
    }

    .approach-card__result {
        margin-top: 26px;
    }


    /* Cases */

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

    .case-card {
        min-height: 0;
    }

    .case-card__result {
        margin-top: 26px;
    }


    /* Security */

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

        gap: 12px;
    }

    .security__flow-zone {
        min-height: 0;
    }

    .security__flow-arrow {
        justify-self: start;

        margin-left: 28px;

        transform: rotate(90deg);

        font-size: 30px;
    }


    /* Contact */

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

    .contact__message,
    .contact__telegram {
        min-height: 0;
    }

    .contact__telegram {
        min-height: 330px;
    }


    /* Footer */

    .site-footer__main {
        grid-template-columns:
            minmax(0, 1.4fr) minmax(160px, 0.6fr);

        gap: 42px;
    }

    .site-footer__contact {
        grid-column: 1 / -1;

        padding-top: 24px;

        border-top: 1px solid var(--color-line);
    }
}


/* =========================================================
   Responsive — up to 700px
   ========================================================= */

@media (max-width: 700px) {

    :root {
        --page-padding: 20px;
    }


    /* Header */

    .site-header__inner {
        min-height: 64px;
    }

    .header-cta {
        display: none;
    }


    /* Hero */

    .hero__grid {
        min-height: auto;

        padding-top: 38px;
        padding-bottom: 34px;

        gap: 38px;
    }

    .section-label {
        margin-bottom: 18px;
    }

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

    .hero__title-arrow {
        margin-top: 8px;
        margin-bottom: 7px;
        margin-left: 22%;

        font-size: 28px;
    }

    .hero__description {
        margin-top: 22px;

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

    .hero__actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }

    .button--primary {
        width: 100%;
    }

    .hero__principle {
        margin-top: 30px;
    }


    /* Hero process model */

    .process-model {
        padding: 12px;
    }

    .process-model__header {
        min-height: 78px;

        padding: 13px 14px;
    }

    .process-model h2 {
        font-size: 19px;
    }

    .process-model__scenario {
        margin-top: 27px;

        font-size: 9px;
    }

    .process-model__body {
        padding-top: 20px;

        grid-template-columns:
            minmax(0, 1fr) 54px minmax(0, 1fr);

        gap: 8px;
    }

    .process-column__title {
        font-size: 8px;
    }

    .process-step {
        min-height: 37px;

        padding: 8px;

        gap: 7px;

        font-size: 10px;
    }

    .process-step__dot {
        width: 6px;
        height: 6px;
    }

    .process-transform {
        gap: 13px;
    }

    .process-transform__core {
        width: 48px;
        height: 48px;

        font-size: 8px;
    }

    .process-transform__core strong {
        font-size: 10px;
    }

    .process-transform__arrow {
        font-size: 27px;
    }

    .process-model__footer {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .process-metric {
        display: flex;
        align-items: baseline;
        justify-content: space-between;

        gap: 18px;
    }

    .process-metric strong {
        max-width: 64%;

        margin-top: 0;
        margin-left: auto;

        text-align: right;
    }


    /* =====================================================
       Process audit — mobile
       ===================================================== */

    .process-audit {
        padding-top: 54px;
        padding-bottom: 54px;
    }

    .process-audit__header .section-label {
        margin-bottom: 20px;
    }

    .process-audit__intro {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .process-audit__title {
        font-size: clamp(34px, 10vw, 42px);
    }

    .process-audit__lead {
        font-size: 16px;
        line-height: 1.6;
    }

    .process-audit__thesis {
        margin-top: 28px;

        padding: 17px 18px;

        align-items: flex-start;
        gap: 13px;
    }

    .process-audit__thesis-arrow {
        margin-top: 1px;

        font-size: 25px;
    }

    .process-audit__thesis p {
        font-size: 15px;
    }

    .process-audit__grid {
        margin-top: 20px;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .audit-card {
        min-height: 0;

        padding: 20px;
    }

    .audit-card__meta {
        margin-bottom: 15px;
    }

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

    .audit-card__flow {
        margin-top: 22px;
    }

    .process-audit__impact {
        margin-top: 20px;

        padding: 22px;

        display: grid;
        grid-template-columns:
            max-content 32px minmax(0, 1fr);

        column-gap: 12px;
        row-gap: 12px;
        align-items: center;
    }

    .process-audit__impact>div {
        display: contents;
    }

    .process-audit__impact-label {
        grid-column: 1;
        grid-row: 1;

        margin: 0;
    }

    .process-audit__impact-arrow {
        grid-column: 2;
        grid-row: 1;

        justify-self: center;

        margin: 0;

        font-size: 28px;
    }

    .process-audit__impact p {
        grid-column: 1 / -1;
        grid-row: 2;

        margin: 0;

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


    /* =====================================================
       Capabilities — mobile
       ===================================================== */

    .capabilities {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .capabilities__header .section-label {
        margin-bottom: 20px;
    }

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

        gap: 18px;
    }

    .capabilities__title {
        font-size: clamp(34px, 10vw, 42px);
    }

    .capabilities__lead {
        font-size: 16px;
        line-height: 1.6;
    }

    .capabilities__grid {
        margin-top: 30px;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .capability-card {
        min-height: 0;

        padding: 22px;
    }

    .capability-card__number {
        margin-bottom: 18px;
    }

    .capability-card h3 {
        font-size: 22px;
    }

    .capability-card__list {
        margin-top: 20px;
    }

    .capability-card__footer {
        margin-top: 24px;
    }

    .capability-card--wide {
        grid-column: auto;

        padding: 22px;
    }

    .capability-card__wide-content {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .capability-card--wide h3 {
        font-size: 23px;
    }

    .capability-card--wide .capability-card__list {
        margin-top: 22px;
    }

    .capability-card__flow {
        flex-wrap: wrap;

        gap: 8px;
    }

    .capability-card__flow>span:not(.capability-card__flow-arrow) {
        padding: 6px 8px;
    }

    .capability-card__flow-arrow {
        font-size: 16px;
    }


    /* =====================================================
       Approach — mobile
       ===================================================== */

    .approach {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .approach__header .section-label {
        margin-bottom: 20px;
    }

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

        gap: 18px;
    }

    .approach__title {
        font-size: clamp(34px, 10vw, 42px);
    }

    .approach__title-arrow {
        margin-top: 7px;
        margin-bottom: 8px;
        margin-left: 22%;

        font-size: 28px;
    }

    .approach__lead {
        font-size: 16px;
        line-height: 1.6;
    }

    .approach__steps {
        margin-top: 30px;

        gap: 14px;
    }

    .approach-card {
        min-height: 0;

        padding: 22px;
    }

    .approach-card__top {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    .approach-card h3 {
        font-size: 22px;
    }

    .approach-card__list {
        margin-top: 20px;
    }

    .approach-card__result {
        margin-top: 24px;
    }

    .approach__principle {
        margin-top: 18px;

        padding: 22px;

        grid-template-columns:
            max-content 32px minmax(0, 1fr);

        column-gap: 12px;
        row-gap: 12px;
    }

    .approach__principle-label {
        grid-column: 1;
        grid-row: 1;
    }

    .approach__principle-arrow {
        grid-column: 2;
        grid-row: 1;

        font-size: 28px;
    }

    .approach__principle p {
        grid-column: 1 / -1;
        grid-row: 2;

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


    /* =====================================================
       Cases — mobile
       ===================================================== */

    .cases {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .cases__header .section-label {
        margin-bottom: 20px;
    }

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

        gap: 18px;
    }

    .cases__title {
        font-size: clamp(34px, 10vw, 42px);
    }

    .cases__lead {
        font-size: 16px;
        line-height: 1.6;
    }

    .cases__grid {
        margin-top: 30px;

        gap: 14px;
    }

    .case-card {
        min-height: 0;

        padding: 22px;
    }

    .case-card__header {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    .case-card h3 {
        margin-bottom: 18px;

        font-size: 22px;
    }

    .case-card__block {
        padding: 15px 16px;
    }

    .case-card__flow {
        margin-top: 20px;
        padding-top: 17px;
    }

    .case-card__result {
        margin-top: 24px;
        padding-top: 18px;

        font-size: 14px;
    }

    .case-card__result::before {
        top: 22px;
    }

    .case-card--wide {
        grid-column: auto;
    }

    .case-card__wide-layout {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .case-card__wide-main h3 {
        font-size: 22px;
    }

    .case-card__wide-lead {
        font-size: 14px;
    }

    .case-card__matching-example {
        padding: 16px;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .case-card__matching-arrow {
        justify-self: start;

        transform: rotate(90deg);

        font-size: 28px;
    }

    .case-card__matching-master {
        width: 100%;
    }

    .case-card__matching-caption {
        font-size: 10px;
    }

    .case-card__matching-name {
        margin-top: 6px;

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

    .case-card__matching-id {
        margin-top: 8px;

        font-size: 12px;
    }

    .cases__note {
        margin-top: 18px;

        padding: 22px;

        grid-template-columns:
            max-content 32px minmax(0, 1fr);

        column-gap: 12px;
        row-gap: 12px;
    }

    .cases__note-label {
        grid-column: 1;
        grid-row: 1;
    }

    .cases__note-arrow {
        grid-column: 2;
        grid-row: 1;

        font-size: 28px;
    }

    .cases__note p {
        grid-column: 1 / -1;
        grid-row: 2;

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


    /* =====================================================
       Technology — mobile
       ===================================================== */

    .technology {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .technology__header .section-label {
        margin-bottom: 20px;
    }

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

        gap: 18px;
    }

    .technology__title {
        font-size: clamp(34px, 10vw, 42px);
    }

    .technology__lead {
        font-size: 16px;
        line-height: 1.6;
    }

    .technology__grid {
        margin-top: 30px;

        grid-template-columns: 1fr;
    }

    .technology-group {
        min-height: 0;

        padding: 22px;

        border-right: 0 !important;
        border-bottom: 1px solid var(--color-line);
    }

    .technology-group:last-child {
        border-bottom: 0;
    }

    .technology-group__header {
        gap: 12px;
    }

    .technology-group__number {
        padding-top: 3px;

        font-size: 10px;
    }

    .technology-group h3 {
        font-size: 18px;
    }

    .technology-group__items {
        margin-top: 19px;

        gap: 7px;
    }

    .technology-group__items span {
        padding: 7px 9px;

        font-size: 10px;
    }

    .technology__principle {
        margin-top: 18px;

        padding: 22px;

        grid-template-columns:
            max-content 32px minmax(0, 1fr);

        column-gap: 12px;
        row-gap: 12px;
    }

    .technology__principle-label {
        grid-column: 1;
        grid-row: 1;
    }

    .technology__principle-arrow {
        grid-column: 2;
        grid-row: 1;

        font-size: 28px;
    }

    .technology__principle p {
        grid-column: 1 / -1;
        grid-row: 2;

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


    /* =====================================================
       Security — mobile
       ===================================================== */

    .security {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .security__header .section-label {
        margin-bottom: 20px;
    }

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

        gap: 18px;
    }

    .security__title {
        font-size: clamp(34px, 10vw, 42px);
    }

    .security__lead {
        font-size: 16px;
        line-height: 1.6;
    }

    .security__architecture {
        margin-top: 30px;

        padding: 18px;
    }

    .security__architecture-label {
        margin-bottom: 18px;
    }

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

        gap: 10px;
    }

    .security__flow-zone {
        min-height: 0;

        padding: 20px;
    }

    .security__flow-zone h3 {
        font-size: 19px;
    }

    .security__flow-arrow {
        justify-self: start;

        margin: 0 0 0 22px;

        transform: rotate(90deg);

        font-size: 28px;
    }

    .security__data-list {
        margin-top: 22px;
        padding-top: 0;
    }

    .security__control-list {
        margin-top: 22px;
        padding-top: 0;
    }

    .security__ai-status:first-of-type {
        margin-top: 22px;
    }

    .security__modes {
        margin-top: 14px;

        grid-template-columns: 1fr;
    }

    .security-mode {
        min-height: 0;

        padding: 22px;

        grid-template-columns:
            34px minmax(0, 1fr);

        gap: 12px;

        border-right: 0 !important;
        border-bottom: 1px solid var(--color-line);
    }

    .security-mode:last-child {
        border-bottom: 0;
    }

    .security-mode__number {
        padding-top: 3px;

        font-size: 10px;
    }

    .security-mode h3 {
        font-size: 18px;
    }

    .security__principle {
        margin-top: 18px;

        padding: 22px;

        grid-template-columns:
            max-content 32px minmax(0, 1fr);

        column-gap: 12px;
        row-gap: 12px;
    }

    .security__principle-label {
        grid-column: 1;
        grid-row: 1;
    }

    .security__principle-arrow {
        grid-column: 2;
        grid-row: 1;

        font-size: 28px;
    }

    .security__principle p {
        grid-column: 1 / -1;
        grid-row: 2;

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


    /* =====================================================
       Contact — mobile
       ===================================================== */

    .contact {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .contact__header .section-label {
        margin-bottom: 20px;
    }

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

        gap: 18px;
    }

    .contact__title {
        font-size: clamp(35px, 10vw, 44px);
    }

    .contact__lead {
        font-size: 16px;
        line-height: 1.6;
    }

    .contact__body {
        margin-top: 30px;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .contact__message {
        min-height: 0;

        padding: 22px;
    }

    .contact__message h3 {
        margin-top: 18px;

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

    .contact__message>p {
        margin-top: 15px;

        font-size: 14px;
    }

    .contact__flow {
        margin-top: 26px;
        padding-top: 20px;

        gap: 7px;
    }

    .contact__flow span:nth-child(odd) {
        padding: 6px 8px;
    }

    .contact__flow span:nth-child(even) {
        font-size: 15px;
    }


    /* Telegram */

    .contact__telegram {
        min-height: 310px;

        padding: 22px;
    }

    .contact__telegram-arrow {
        font-size: 28px;
    }

    .contact__telegram>strong {
        margin-top: 30px;

        font-size: 32px;
    }

    .contact__telegram>p {
        font-size: 14px;
    }

    .contact__telegram-action {
        margin-top: auto;
        padding-top: 22px;
    }

    /* Email */

    .contact__email {
        padding: 22px;

        grid-template-columns:
            minmax(0, 1fr) max-content;

        column-gap: 18px;
        row-gap: 14px;
    }

    .contact__email-label {
        grid-column: 1;
        grid-row: 1;
    }

    .contact__email-arrow {
        grid-column: 2;
        grid-row: 1;

        font-size: 28px;
    }

    .contact__email>strong {
        grid-column: 1 / -1;
        grid-row: 2;

        font-size: 20px;
    }


    /* Contact principle */

    .contact__principle {
        margin-top: 18px;

        padding: 22px;

        grid-template-columns:
            max-content 32px minmax(0, 1fr);

        column-gap: 12px;
        row-gap: 12px;
    }

    .contact__principle-label {
        grid-column: 1;
        grid-row: 1;
    }

    .contact__principle-arrow {
        grid-column: 2;
        grid-row: 1;

        font-size: 28px;
    }

    .contact__principle p {
        grid-column: 1 / -1;
        grid-row: 2;

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


    /* =====================================================
       Footer — mobile
       ===================================================== */

    .site-footer {
        padding-top: 42px;
        padding-bottom: 24px;
    }

    .site-footer__main {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .site-footer__brand p {
        margin-top: 14px;
    }

    .site-footer__nav {
        padding-top: 24px;

        border-top: 1px solid var(--color-line);
    }

    .site-footer__contact {
        grid-column: auto;

        padding-top: 24px;

        border-top: 1px solid var(--color-line);
    }

    .site-footer__bottom {
        margin-top: 34px;
        padding-top: 18px;

        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }
}

/* =========================================================
   Section navigation
   ========================================================= */

section[id] {
    scroll-margin-top: 18px;
}

.section-nav {
    position: fixed;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1000;

    border-top: 1px solid rgba(201, 216, 222, 0.9);

    background:
        rgba(247, 250, 252, 0.92);

    box-shadow:
        0 -10px 32px rgba(38, 63, 70, 0.045);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.section-nav__inner {
    min-height: 58px;

    display: flex;
    align-items: center;
}

.section-nav__scroller {
    width: 100%;

    padding: 7px 0;

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

    gap: 7px;

    overflow-x: auto;
    overscroll-behavior-x: contain;

    scrollbar-width: none;

    scroll-behavior: smooth;
}

.section-nav__scroller::-webkit-scrollbar {
    display: none;
}

.section-nav__link {
    min-height: 36px;

    padding: 0 13px;

    flex: 0 0 auto;

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

    border: 1px solid transparent;
    border-radius: 18px;

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

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.section-nav__link:hover {
    border-color: var(--color-line-teal);

    background: rgba(255, 255, 255, 0.9);

    color: var(--color-teal);
}

.section-nav__link.is-active {
    border-color: var(--color-teal);

    background: var(--color-teal);

    color: #ffffff;
}

.section-nav__link.is-active:hover {
    border-color: var(--color-teal-dark);

    background: var(--color-teal-dark);

    color: #ffffff;
}


/*
 * Резервируем место под fixed navigation,
 * чтобы нижняя часть footer не оказалась
 * под панелью.
 */

body {
    padding-bottom: 58px;
}


/* =========================================================
   Section navigation — tablet
   ========================================================= */

@media (max-width: 1050px) {

    .section-nav__scroller {
        justify-content: flex-start;
    }
}


/* =========================================================
   Section navigation — mobile
   ========================================================= */

@media (max-width: 700px) {

    body {
        padding-bottom: 56px;
    }

    section[id] {
        scroll-margin-top: 12px;
    }

    .section-nav__inner {
        width: 100%;

        min-height: 56px;
    }

    .section-nav__scroller {
        padding:
            7px var(--page-padding);

        gap: 6px;
    }

    .section-nav__link {
        min-height: 34px;

        padding: 0 12px;

        border-radius: 17px;

        font-size: 11px;
    }
}


/* =========================================================
   Reduced motion
   ========================================================= */

/*
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
*/

/* =========================================================
   Hero process scenarios
   ========================================================= */

.process-model__slides {
    position: relative;

    display: grid;

    overflow: hidden;
}

.process-model__slide {
    min-width: 0;

    grid-area: 1 / 1;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(0);

    transition: none;
}

.process-model__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);
}

.process-model__slide.is-transitioning {
    visibility: visible;
    pointer-events: none;

    will-change: opacity, transform;
}


.process-model--ready
.process-model__slide
.process-transform {
    visibility: hidden;
}

.process-transform--static {
    position: absolute;
    z-index: 10;

    margin: 0;

    pointer-events: none;

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

.process-model__scenario {
    display: flex;
    align-items: center;
    gap: 7px;
}

.process-model__scenario-label {
    white-space: nowrap;
}

.process-model__scenario-button {
    width: 24px;
    height: 24px;

    padding: 0;

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

    border: 1px solid rgba(15, 118, 110, 0.20);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.58);

    color: var(--color-teal);

    font-family: inherit;
    font-size: 17px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.process-model--ready
.process-model__scenario-button {
    display: inline-flex;
}

@media (hover: hover) {
    .process-model__scenario-button:hover {
        background: #ffffff;
        border-color: rgba(15, 118, 110, 0.42);

        transform: translateY(-1px);
    }
}

.process-model__scenario-button:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .process-model__header {
        flex-wrap: wrap;
    }

    .process-model__scenario {
        margin-top: 5px;
        margin-left: auto;
    }

    .process-model__scenario-button {
        width: 23px;
        height: 23px;

        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-model__slide,
    .process-model__scenario-button {
        transition: none;
    }
}