* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #18324a;
    background: #ffffff;
}

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


/* =========================================
   HEADER
   ========================================= */

.site-header {
    position: relative;
    z-index: 20;

    background:
        rgba(255,255,255,.96);

    border-bottom:
        1px solid rgba(30,80,120,.10);

    backdrop-filter: blur(14px);
}


/* MAIN HEADER ROW */

.header-inner {
    width: min(1560px, 96%);
    min-height: 82px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 18px;
}


/* =========================================
   THALAMUS GRAPHIC LOGO
   ========================================= */

.header-logo {
    width: 82px;
    height: 60px;

    flex: 0 0 82px;

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

    overflow: hidden;

    transition:
        transform .20s ease,
        opacity .20s ease;
}

.header-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* Наведение мыши на логотип */
.header-logo:hover {
    transform: translateY(-1px);
    opacity: .88;
}


.brand {
    min-width: 118px;
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    margin-left: -6px;

    transition:
        opacity .20s ease;
}


/* =========================================
   BRAND TEXT
   ========================================= */

.brand {
    min-width: 128px;
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    margin-left: -2px;

    transition:
        opacity .20s ease;
}

.brand:hover {
    opacity: .78;
}

.brand-name {
    font-size: 16px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: .055em;

    color: #183653;
}

.brand-subtitle {
    margin-top: 5px;

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

    text-transform: uppercase;

    letter-spacing: .18em;

    color: #7690a6;
}


/* =========================================
   MAIN NAVIGATION
   ========================================= */

.main-nav {
    flex: 1;

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

    gap: 25px;

    margin-left: 10px;

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

.main-nav a {
    position: relative;

    padding: 31px 0;

    white-space: nowrap;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 22px;

    width: 0;
    height: 2px;

    background: #2388cf;

    transition:
        width .20s ease;
}

.main-nav a:hover::after {
    width: 100%;
}


/* =========================================
   HEADER ACTIONS
   ========================================= */

.header-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 12px;
}


/* =========================================
   LANGUAGE SWITCHER
   ========================================= */

.language-switcher {
    position: relative;

    flex: 0 0 auto;

    z-index: 1000;
}


/* CURRENT LANGUAGE */

.language-button {
    min-width: 66px;
    height: 44px;

    padding: 0 15px;

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

    gap: 7px;

    border-radius: 22px;

    border:
        1px solid rgba(43, 101, 137, .16);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbfd
        );

    color: #173f5c;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(31, 79, 108, .04);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.language-button:hover {
    border-color:
        rgba(32, 145, 194, .30);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f9fc
        );

    box-shadow:
        0 9px 22px rgba(31, 79, 108, .08);
}

.language-current {
    line-height: 1;
}

.language-arrow {
    position: relative;

    top: -1px;

    color: #6d8797;

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

    transition:
        transform .22s ease;
}


/* arrow when opened */

.language-button[aria-expanded="true"] .language-arrow {
    transform: rotate(180deg);
}


/* =========================================
   DROPDOWN
   ========================================= */

.language-menu {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 190px;

    padding: 8px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid rgba(48, 105, 138, .12);

    box-shadow:
        0 20px 50px rgba(26, 70, 96, .16);

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

    opacity: 0;
    visibility: hidden;

    transform: translateY(-7px);

    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}


/* OPEN STATE */

.language-switcher.open .language-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================
   LANGUAGE OPTIONS
   ========================================= */

.language-option {
    position: relative;

    width: 100%;
    min-height: 45px;

    padding: 0 12px;

    display: grid;
    grid-template-columns: 36px 1fr;

    align-items: center;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: #506d7f;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease;
}

.language-option strong {
    color: #1c5575;

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

    letter-spacing: .05em;
}

.language-option span {
    color: #718895;

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

.language-option:hover {
    background: #eef8fb;
}

.language-option:hover strong,
.language-option:hover span {
    color: #1689bc;
}


/* ACTIVE LANGUAGE */

.language-option.active {
    background:
        linear-gradient(
            135deg,
            #edf8fc,
            #f6fbfd
        );
}

.language-option.active strong {
    color: #168bc0;
}

.language-option.active span {
    color: #426f86;
}


/* small accent for active language */

.language-option.active::after {
    content: "";

    position: absolute;

    right: 16px;
    top: 50%;

    width: 6px;
    height: 6px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #35b995;

    box-shadow:
        0 0 10px rgba(53,185,149,.24);
}


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

@media (max-width: 650px) {

    .language-button {
        min-width: 58px;
        height: 42px;

        padding: 0 12px;
    }

    .language-menu {
        width: 175px;

        right: 0;
    }
}


/* LOGIN */

.login-button {
    min-height: 42px;

    padding: 0 20px;

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

    border-radius: 22px;

    background: #153e61;

    color: #ffffff;

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

    transition:
        background .20s ease,
        transform .20s ease;
}

.login-button:hover {
    background: #1b557c;

    transform: translateY(-1px);
}


/* =========================================================
   HERO — COLOR DIRECTION / LIVING SYSTEM
   ========================================================= */

.hero {
    position: relative;
    min-height: calc(100vh - 82px);
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 74% 25%,
            rgba(77, 195, 246, .27) 0%,
            rgba(126, 217, 255, .15) 18%,
            transparent 39%
        ),

        radial-gradient(
            circle at 90% 78%,
            rgba(40, 179, 190, .11) 0%,
            transparent 28%
        ),

        radial-gradient(
            circle at 13% 88%,
            rgba(246, 197, 91, .22) 0%,
            rgba(255, 221, 145, .10) 20%,
            transparent 38%
        ),

        linear-gradient(
            125deg,
            #fbfdff 0%,
            #eef8ff 42%,
            #f4fbfd 69%,
            #fffaf1 100%
        );
}


/* LARGE AMBIENT LIGHTS */

.hero::before {
    content: "";
    position: absolute;
    z-index: 0;

    width: 760px;
    height: 760px;

    right: 2%;
    top: 4%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(65, 185, 239, .13) 0%,
            rgba(54, 167, 220, .07) 38%,
            transparent 70%
        );

    filter: blur(12px);

    pointer-events: none;

    animation:
        heroAmbientPulse 9s ease-in-out infinite;
}


.hero::after {
    content: "";
    position: absolute;
    z-index: 0;

    width: 520px;
    height: 340px;

    left: -6%;
    bottom: -10%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(237, 187, 73, .17) 0%,
            rgba(255, 221, 143, .08) 43%,
            transparent 72%
        );

    filter: blur(18px);

    pointer-events: none;
}


/* GRID */

.hero-background {
    position: absolute;
    z-index: 0;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(45, 132, 186, .052) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(45, 132, 186, .052) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .70),
            rgba(0, 0, 0, .30) 62%,
            transparent 96%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .70),
            rgba(0, 0, 0, .30) 62%,
            transparent 96%
        );

    pointer-events: none;
}


/* =========================================================
   HERO LAYOUT
   ========================================================= */

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

    width: min(1480px, 88%);
    min-height: 720px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 60px;
}


.hero-content {
    position: relative;
    z-index: 4;

    padding: 70px 0 100px;
}


/* =========================================================
   HERO TYPOGRAPHY
   ========================================================= */

.hero-kicker {
    position: relative;

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

    margin-bottom: 20px;

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

    letter-spacing: .22em;
    color: #2088c8;
}


.hero-kicker::before {
    content: "";

    width: 25px;
    height: 2px;

    border-radius: 2px;

    background:
        linear-gradient(
            90deg,
            #e2ae43,
            #36a9e1
        );
}


.hero h1 {
    margin: 0;

    max-width: 750px;

    font-size: clamp(48px, 5.3vw, 82px);
    line-height: .99;

    letter-spacing: -.045em;

    color: #153650;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, .75);
}


.hero h1 span {
    display: block;

    margin-top: 8px;

    color: #118fce;

    background: none;

    -webkit-background-clip: initial;
    background-clip: initial;

    -webkit-text-fill-color: #118fce;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, .70),
        0 8px 24px rgba(17, 143, 206, .08);
}


.hero-text {
    max-width: 680px;

    margin: 34px 0 0;

    font-size: 21px;
    line-height: 1.55;

    color: #526f83;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 15px;

    margin-top: 42px;
}


.button {
    position: relative;
    overflow: hidden;

    min-height: 52px;

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

    padding: 0 25px;

    border-radius: 28px;

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

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background-color .22s ease,
        color .22s ease;
}


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


.button-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0d6fa9 0%,
            #1599d5 58%,
            #27b2d4 100%
        );

    box-shadow:
        0 14px 34px rgba(21, 124, 184, .20),
        0 4px 10px rgba(17, 101, 151, .10);
}


.button-primary::after {
    content: "";

    position: absolute;

    top: -60%;
    left: -55%;

    width: 35%;
    height: 220%;

    transform: rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .30),
            transparent
        );

    transition:
        left .55s ease;

    pointer-events: none;
}


.button-primary:hover::after {
    left: 125%;
}


.button-primary:hover {
    box-shadow:
        0 19px 42px rgba(20, 127, 188, .28),
        0 6px 16px rgba(17, 101, 151, .13);
}


.button-secondary {
    color: #185f8c;

    border:
        1px solid rgba(31, 120, 175, .32);

    background:
        rgba(255, 255, 255, .66);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85);

    backdrop-filter: blur(10px);
}


.button-secondary:hover {
    border-color:
        rgba(22, 144, 202, .55);

    background:
        rgba(255, 255, 255, .88);

    box-shadow:
        0 12px 26px rgba(42, 111, 153, .10);
}


.button-link {
    color: #55768e;

    background: transparent;
}


.button-link:hover {
    color: #168bc8;
}


/* =========================================================
   VISUAL CORE
   ========================================================= */

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

    width: min(620px, 100%);
    aspect-ratio: 1 / 1;

    margin-left: auto;
}


/* soft energy field behind system */

.hero-visual::before {
    content: "";

    position: absolute;

    inset: 16%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(48, 177, 226, .18) 0%,
            rgba(58, 175, 221, .08) 42%,
            transparent 72%
        );

    filter: blur(18px);

    transform: scale(1.20);

    pointer-events: none;

    animation:
        heroFieldPulse 7s ease-in-out infinite;
}


.core-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(38, 151, 211, .25);

    pointer-events: none;
}


.orbit-outer {
    inset: 6%;

    border-color:
        rgba(38, 159, 219, .25);

    box-shadow:
        0 0 35px rgba(72, 182, 229, .045);

    animation:
        heroOrbitRotate 48s linear infinite;
}


.orbit-outer::before {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    left: 19%;
    top: 6%;

    border-radius: 50%;

    background: #55c5ed;

    box-shadow:
        0 0 0 5px rgba(73, 190, 235, .10),
        0 0 18px rgba(40, 170, 225, .45);
}


.orbit-middle {
    inset: 19%;

    border-color:
        rgba(215, 163, 67, .35);

    box-shadow:
        0 0 28px rgba(221, 171, 73, .035);

    animation:
        heroOrbitRotateReverse 38s linear infinite;
}


.orbit-middle::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    right: 13%;
    bottom: 20%;

    border-radius: 50%;

    background: #e1b454;

    box-shadow:
        0 0 0 5px rgba(225, 180, 84, .10),
        0 0 17px rgba(225, 180, 84, .35);
}


/* =========================================================
   CENTRAL THALAMUS CORE
   ========================================================= */

.core-center {
    position: absolute;
    z-index: 4;

    left: 50%;
    top: 50%;

    width: 210px;
    height: 210px;

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

    border-radius: 50%;

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

    color: white;

    background:
        radial-gradient(
            circle at 32% 20%,
            #9be6ff 0%,
            #55c3e8 14%,
            #258fc6 43%,
            #17658f 72%,
            #123f63 100%
        );

    border:
        1px solid rgba(255, 255, 255, .42);

    box-shadow:
        0 0 0 8px rgba(65, 180, 226, .055),
        0 0 0 15px rgba(65, 180, 226, .025),
        0 30px 80px rgba(21, 98, 150, .30),
        0 8px 25px rgba(16, 85, 127, .20),
        inset 0 0 38px rgba(255, 255, 255, .25);

    animation:
        heroCoreBreath 5.8s ease-in-out infinite;
}


.core-center::before {
    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, .09);

    pointer-events: none;
}


.core-small {
    margin-bottom: 7px;

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

    letter-spacing: .18em;

    color:
        rgba(255, 255, 255, .84);
}


.core-title {
    font-size: 31px;
    font-weight: 800;

    letter-spacing: .03em;

    text-shadow:
        0 3px 14px rgba(6, 54, 85, .22);
}


/* =========================================================
   ORBIT CARDS
   ========================================================= */

.orbit-item {
    position: absolute;
    z-index: 5;

    width: 150px;
    min-height: 78px;

    padding: 18px;

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

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .82);

    border:
        1px solid rgba(255, 255, 255, .94);

    box-shadow:
        0 16px 42px rgba(33, 88, 122, .13),
        inset 0 1px 0 rgba(255, 255, 255, .85);

    backdrop-filter: blur(14px);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.orbit-item::before {
    content: "";

    position: absolute;

    left: 17px;
    top: 0;

    width: 34px;
    height: 3px;

    border-radius: 0 0 4px 4px;

    background: #31a7d9;

    opacity: .78;
}


.orbit-item:hover {
    transform: translateY(-5px);

    border-color:
        rgba(83, 185, 226, .35);

    box-shadow:
        0 22px 48px rgba(30, 92, 130, .17),
        inset 0 1px 0 rgba(255, 255, 255, .90);
}


.orbit-item strong {
    font-size: 12px;

    color: #1d648f;
}


.orbit-item span {
    margin-top: 7px;

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

    color: #6b8192;
}


/* CLIENT — CYAN */

.item-client {
    top: 6%;
    left: 39%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(229,248,255,.82)
        );

    animation:
        heroCardFloatA 6.5s ease-in-out infinite;
}


.item-client::before {
    background: #2fb9df;
}


/* TEAM — BLUE */

.item-team {
    right: -1%;
    top: 42%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.93),
            rgba(232,243,255,.84)
        );

    animation:
        heroCardFloatB 7.2s ease-in-out infinite;
}


.item-team::before {
    background: #397fca;
}


/* PARTNERS — GOLD */

.item-partners {
    bottom: 7%;
    left: 39%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.93),
            rgba(255,248,226,.86)
        );

    animation:
        heroCardFloatB 6.8s ease-in-out infinite;
}


.item-partners::before {
    background: #d9a84c;
}


/* DATA — TURQUOISE */

.item-data {
    left: -1%;
    top: 42%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.93),
            rgba(230,250,248,.84)
        );

    animation:
        heroCardFloatA 7.5s ease-in-out infinite;
}


.item-data::before {
    background: #3dafaf;
}


/* =========================================================
   BOTTOM MESSAGE
   ========================================================= */

.hero-bottom {
    position: relative;
    z-index: 6;

    width: min(1480px, 88%);

    margin: -44px auto 0;

    min-height: 88px;

    padding: 0 28px;

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

    gap: 17px;

    border-radius: 22px 22px 0 0;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.84) 0%,
            rgba(246,252,255,.78) 50%,
            rgba(255,250,238,.80) 100%
        );

    border:
        1px solid rgba(255,255,255,.92);

    box-shadow:
        0 -5px 42px rgba(42,103,140,.085),
        inset 0 1px 0 rgba(255,255,255,.85);

    backdrop-filter: blur(16px);

    font-size: 11px;
    letter-spacing: .08em;

    color: #36576e;
}


.hero-bottom span {
    transition:
        color .20s ease,
        transform .20s ease;
}


.hero-bottom span:hover {
    color: #147eb8;
    transform: translateY(-1px);
}


.hero-bottom i {
    width: 4px;
    height: 4px;

    flex: 0 0 4px;

    border-radius: 50%;

    background: #d2a64f;

    box-shadow:
        0 0 0 3px rgba(210,166,79,.08);
}


.hero-bottom strong {
    color: #0f83bd;
}


/* =========================================================
   HERO ANIMATIONS
   ========================================================= */

@keyframes heroAmbientPulse {

    0%,
    100% {
        opacity: .72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.055);
    }
}


@keyframes heroFieldPulse {

    0%,
    100% {
        opacity: .65;
        transform: scale(1.16);
    }

    50% {
        opacity: 1;
        transform: scale(1.27);
    }
}


@keyframes heroCoreBreath {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.025);
    }
}


@keyframes heroOrbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes heroOrbitRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


@keyframes heroCardFloatA {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -6px;
    }
}


@keyframes heroCardFloatB {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: 5px;
    }
}


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

.site-footer {
    background:
        linear-gradient(
            120deg,
            #102b42,
            #123d58
        );

    color: white;
}


.footer-inner {
    width: min(1480px, 88%);
    min-height: 150px;

    margin: 0 auto;

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

    gap: 30px;
}


.footer-inner p {
    color: #a9bccb;
}


.footer-inner a {
    color: #d7eaff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .main-nav {
        display: none;
    }

    .hero-inner {
        grid-template-columns: 1fr;

        padding-top: 50px;
    }

    .hero-content {
        padding-bottom: 30px;
    }

    .hero-visual {
        margin:
            0 auto
            100px;
    }

    .hero-bottom {
        flex-wrap: wrap;

        padding: 25px;
    }
}


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

@media (max-width: 650px) {

    /* MOBILE HEADER */

    .header-inner {
        width: 94%;
        min-height: 68px;

        gap: 10px;
    }


    .header-logo {
        width: 60px;
        height: 44px;

        flex: 0 0 60px;
    }


    .header-logo img {
        width: 100%;
        height: auto;
    }


    .brand {
        min-width: 0;

        margin-left: -2px;
    }


    .brand-name {
        font-size: 13px;
        line-height: 1;

        letter-spacing: .045em;
    }


    .brand-subtitle {
        display: none;
    }


    .header-actions {
        margin-left: auto;

        gap: 8px;
    }


    .language-button {
        min-width: 44px;
        height: 36px;

        font-size: 12px;
    }


    .login-button {
        display: none;
    }


    /* MOBILE HERO */

    .hero {
        min-height: auto;

        background:
            radial-gradient(
                circle at 75% 42%,
                rgba(78, 193, 240, .22),
                transparent 35%
            ),

            radial-gradient(
                circle at 10% 88%,
                rgba(240, 192, 83, .15),
                transparent 30%
            ),

            linear-gradient(
                145deg,
                #fbfdff 0%,
                #eef9ff 56%,
                #fffaf1 100%
            );
    }


    .hero::before {
        width: 420px;
        height: 420px;

        right: -35%;
        top: 35%;
    }


    .hero::after {
        width: 330px;
        height: 230px;

        left: -35%;
        bottom: -4%;
    }


    .hero-background {
        background-size:
            36px 36px;
    }


    .hero-inner {
        width: 88%;

        min-height: auto;

        padding-top: 25px;

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .hero-content {
        padding:
            45px 0
            30px;
    }


    .hero-kicker {
        margin-bottom: 15px;

        font-size: 10px;
    }


    .hero-kicker::before {
        width: 18px;
    }


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

        line-height: .98;
    }


    .hero-text {
        margin-top: 24px;

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


    .hero-actions {
        margin-top: 30px;

        gap: 10px;
    }


    .button {
        min-height: 48px;

        padding: 0 20px;

        font-size: 13px;
    }


    .hero-visual {
        width:
            min(
                480px,
                112%
            );

        margin:
            5px auto
            75px;

        transform: none;
    }


    .hero-visual::before {
        inset: 20%;

        filter: blur(12px);
    }


    .core-center {
        width: 165px;
        height: 165px;

        z-index: 4;
    }


    .core-title {
        width: 100%;

        padding: 0 10px;

        box-sizing: border-box;

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

        letter-spacing: 0;

        text-align: center;

        white-space: nowrap;
    }


    .core-small {
        font-size: 7px;
        line-height: 1.2;

        letter-spacing: .15em;

        text-align: center;
    }


    .orbit-item {
        width: 112px;
        min-height: 68px;

        padding: 12px;

        box-sizing: border-box;

        border-radius: 15px;
    }


    /* CLIENT — TOP */

    .item-client {
        top: 3%;
        left: 50%;
        right: auto;

        transform: translateX(-50%);
    }


    /* DATA — LEFT */

    .item-data {
        left: 0;
        top: 42%;
    }


    /* EMPLOYEE — RIGHT */

    .item-team {
        right: 0;
        left: auto;
        top: 42%;
    }


    /* PARTNERS — BOTTOM */

    .item-partners {
        bottom: 3%;
        left: 50%;
        right: auto;

        transform: translateX(-50%);
    }


    .orbit-item::before {
        left: 13px;

        width: 27px;
    }


    .orbit-item strong {
        font-size: 10px;
    }


    .orbit-item span {
        font-size: 9px;
    }


    /*
       На телефоне карточки оставляем живыми,
       но уменьшаем амплитуду визуального движения.
    */

    .item-client,
    .item-team,
    .item-partners,
    .item-data {
        animation-duration: 9s;
    }


    .hero-bottom {
        width: 90%;

        margin:
            -55px auto
            0;

        padding:
            22px 18px;

        gap: 10px;

        flex-wrap: wrap;

        text-align: center;

        font-size: 9px;
    }


    .hero-bottom strong {
        width: 100%;

        margin-top: 3px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero::before,
    .hero-visual::before,
    .core-center,
    .orbit-outer,
    .orbit-middle,
    .item-client,
    .item-team,
    .item-partners,
    .item-data {
        animation: none !important;
    }

    .button,
    .orbit-item,
    .hero-bottom span {
        transition: none;
    }
}

/* =========================================
   THALAMUS PRINCIPLE SECTION
   ========================================= */

.principle-section {
    position: relative;
    padding: 120px 0 130px;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 8% 14%,
            rgba(65, 176, 225, .10),
            transparent 29%
        ),

        radial-gradient(
            circle at 52% 42%,
            rgba(92, 200, 177, .055),
            transparent 26%
        ),

        radial-gradient(
            circle at 92% 78%,
            rgba(222, 171, 67, .13),
            transparent 28%
        ),

        linear-gradient(
            140deg,
            #fbfdff 0%,
            #ffffff 42%,
            #fbfdfb 70%,
            #fffaf1 100%
        );
}


/* мягкие цветовые зоны */

.principle-section::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        radial-gradient(
            circle at 23% 45%,
            rgba(48, 165, 222, .055),
            transparent 20%
        ),

        radial-gradient(
            circle at 50% 45%,
            rgba(55, 183, 137, .050),
            transparent 20%
        ),

        radial-gradient(
            circle at 78% 45%,
            rgba(224, 172, 72, .060),
            transparent 21%
        );

    pointer-events: none;
}


.principle-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(1480px, 88%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(43, 134, 188, .24),
            rgba(216, 168, 72, .18),
            transparent
        );
}


.principle-inner {
    position: relative;
    z-index: 2;

    width: min(1480px, 88%);
    margin: 0 auto;
}


/* =========================================
   HEADING
   ========================================= */

.section-heading {
    max-width: 930px;

    margin: 0 auto 72px;

    text-align: center;
}


.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #188ac8;

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

    letter-spacing: .22em;
}


.section-kicker::before,
.section-kicker::after {
    content: "";

    width: 18px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d6a844,
            #2da6d9
        );
}


.section-heading h2 {
    margin: 0;

    color: #173752;

    font-size: clamp(38px, 4.2vw, 62px);
    line-height: 1.06;

    letter-spacing: -.035em;
}


.section-heading h2 span {
    display: block;

    margin-top: 8px;

    color: #178ecb;

    text-shadow:
        0 8px 24px rgba(23, 142, 203, .07);
}


.section-heading p {
    max-width: 790px;

    margin: 28px auto 0;

    color: #60798b;

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


/* =========================================
   THREE PRINCIPLES
   ========================================= */

.principle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


.principle-card {
    position: relative;

    min-height: 355px;

    padding: 36px 34px 31px;

    overflow: hidden;

    border-radius: 28px;

    border:
        1px solid rgba(63, 129, 169, .13);

    box-shadow:
        0 22px 55px rgba(35, 82, 112, .075);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


/* 01 — голубой */

.principle-card:not(.principle-grow):not(.principle-value) {
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(55, 173, 226, .11),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(239,249,255,.91)
        );
}


/* 02 — зелёно-бирюзовый */

.principle-grow {
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(67, 188, 142, .12),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(239,251,247,.92)
        );
}


/* 03 — золотой */

.principle-value {
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(218, 167, 70, .14),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(255,249,235,.94)
        );
}


.principle-card::before {
    content: "";

    position: absolute;

    left: 32px;
    top: 0;

    width: 52px;
    height: 3px;

    border-radius: 0 0 5px 5px;

    background: #2ba5d8;

    opacity: .88;
}


.principle-grow::before {
    background: #42b889;
}


.principle-value::before {
    background: #d8a63f;
}


.principle-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(50, 151, 203, .23);

    box-shadow:
        0 32px 70px rgba(35, 82, 112, .13);
}


.principle-grow:hover {
    border-color:
        rgba(63, 177, 132, .28);
}


.principle-value:hover {
    border-color:
        rgba(202, 154, 62, .30);
}


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

    position: absolute;

    right: -65px;
    bottom: -70px;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(52, 162, 219, .13),
            transparent 68%
        );

    transition:
        transform .35s ease,
        opacity .35s ease;
}


.principle-card:hover::after {
    transform: scale(1.13);

    opacity: 1;
}


.principle-grow::after {
    background:
        radial-gradient(
            circle,
            rgba(73, 190, 143, .14),
            transparent 68%
        );
}


.principle-value::after {
    background:
        radial-gradient(
            circle,
            rgba(218, 167, 70, .16),
            transparent 68%
        );
}


.card-number {
    color: #91a9bb;

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

    letter-spacing: .18em;
}


.principle-grow .card-number {
    color: #70a895;
}


.principle-value .card-number {
    color: #b49a67;
}


.card-icon {
    width: 58px;
    height: 58px;

    margin-top: 35px;

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

    border-radius: 18px;

    color: #167fb9;

    background:
        linear-gradient(
            145deg,
            #edf9ff,
            #d9f1fc
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);

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

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.principle-card:hover .card-icon {
    transform:
        translateY(-2px)
        scale(1.04);
}


.principle-grow .card-icon {
    color: #258d69;

    background:
        linear-gradient(
            145deg,
            #effbf6,
            #d9f4e8
        );
}


.principle-value .card-icon {
    color: #a47a2e;

    background:
        linear-gradient(
            145deg,
            #fff9e9,
            #f7e8bd
        );
}


.principle-card h3 {
    margin: 27px 0 15px;

    color: #1c405a;

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


.principle-card p {
    margin: 0;

    color: #637c8e;

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


.card-path {
    position: absolute;

    left: 34px;
    bottom: 29px;

    display: flex;

    gap: 10px;

    color: #758fa1;

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

    letter-spacing: .11em;
}


.card-path span {
    color: #c79538;
}


/* =========================================
   CORE STATEMENT
   ========================================= */

.principle-statement {
    position: relative;
    overflow: hidden;

    margin-top: 38px;

    min-height: 145px;

    padding: 30px 46px;

    display: grid;
    grid-template-columns: 1fr 70px 1fr;
    align-items: center;

    border-radius: 29px;

    background:
        radial-gradient(
            circle at 86% 20%,
            rgba(73, 210, 226, .18),
            transparent 32%
        ),

        linear-gradient(
            112deg,
            #123b5b 0%,
            #165f88 46%,
            #1784ad 72%,
            #1b9abb 100%
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 25px 62px rgba(20, 79, 116, .20);

    color: white;
}


.principle-statement::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(109, 218, 247, .60),
            rgba(238, 191, 83, .55),
            transparent
        );
}


.statement-left {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.statement-label {
    color: #8ed9f6;

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

    letter-spacing: .22em;
}


.principle-statement strong {
    font-size: 20px;
    line-height: 1.35;
}


.statement-arrow {
    color: #f1c45a;

    font-size: 37px;

    text-align: center;

    text-shadow:
        0 0 22px rgba(241, 196, 90, .26);

    transition:
        transform .25s ease;
}


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


.statement-right {
    padding-left: 18px;
}


/* =========================================
   DIRECTIONS
   ========================================= */

.directions-heading {
    margin: 95px 0 27px;

    display: flex;
    align-items: center;

    color: #607f95;

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

    letter-spacing: .20em;
}


.directions-heading::after {
    content: "";

    height: 1px;

    flex: 1;

    margin-left: 25px;

    background:
        linear-gradient(
            90deg,
            rgba(55, 145, 196, .25),
            rgba(210, 164, 70, .15),
            transparent
        );
}


.directions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


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

    min-height: 290px;

    padding: 34px;

    display: flex;
    flex-direction: column;

    border-radius: 25px;

    border:
        1px solid rgba(47, 109, 150, .12);

    background:
        linear-gradient(
            145deg,
            #fbfdff,
            #f5f9fc
        );

    box-shadow:
        0 16px 36px rgba(36, 79, 108, .045);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.direction-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #2a9fd4,
            transparent 65%
        );

    opacity: .50;
}


.direction-card:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #43b58e,
            transparent 65%
        );
}


.direction-card:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #d5a545,
            transparent 65%
        );
}


.direction-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(35, 143, 199, .27);

    background: #ffffff;

    box-shadow:
        0 25px 55px rgba(35, 82, 112, .09);
}


.direction-main {
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(45, 166, 220, .08),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #edf8ff,
            #f8fcff
        );
}


.direction-code {
    color: #92a9ba;

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

    letter-spacing: .16em;
}


.direction-card:nth-child(2) .direction-code {
    color: #79a994;
}


.direction-card:nth-child(3) .direction-code {
    color: #b29a68;
}


.direction-card h3 {
    margin: 39px 0 17px;

    color: #194764;

    font-size: 25px;
}


.direction-card p {
    margin: 0;

    color: #687f90;

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


.direction-link {
    margin-top: auto;

    padding-top: 28px;

    color: #1684bd;

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

    transition:
        color .20s ease,
        transform .20s ease;
}


.direction-card:hover .direction-link {
    transform: translateX(3px);
}


/* =========================================
   RESPONSIVE — PRINCIPLE
   ========================================= */

@media (max-width: 1000px) {

    .principle-grid,
    .directions-grid {
        grid-template-columns: 1fr;
    }


    .principle-card {
        min-height: 310px;
    }


    .principle-statement {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .statement-arrow {
        transform: rotate(90deg);
    }


    .principle-statement:hover .statement-arrow {
        transform:
            rotate(90deg)
            translateX(4px);
    }


    .statement-right {
        padding-left: 0;
    }
}


/* =========================================
   MOBILE — PRINCIPLE
   ========================================= */

@media (max-width: 650px) {

    .principle-section {
        padding:
            85px 0
            95px;
    }


    .principle-section::after {
        opacity: .65;
    }


    .section-heading {
        margin-bottom: 52px;

        text-align: left;
    }


    .section-kicker::before {
        display: none;
    }


    .section-kicker::after {
        width: 28px;
    }


    .section-heading h2 {
        font-size: 38px;
    }


    .section-heading p {
        font-size: 17px;
    }


    .principle-grid {
        gap: 18px;
    }


    .principle-card,
    .direction-card {
        padding: 28px;
    }


    .principle-card {
        min-height: 325px;
    }


    .principle-card::before {
        left: 27px;
    }


    .card-path {
        left: 28px;
    }


    .principle-statement {
        padding: 30px;

        border-radius: 24px;
    }


    .principle-statement strong {
        font-size: 17px;
    }


    .directions-heading {
        margin-top: 70px;
    }


    .direction-card {
        min-height: 260px;
    }
}


/* =========================================
   REDUCED MOTION — PRINCIPLE
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .principle-card,
    .card-icon,
    .statement-arrow,
    .direction-card,
    .direction-link {
        transition: none;
    }
}

/* =========================================
   ARCHITECTURE SECTION
   ========================================= */

.architecture-section {
    position: relative;
    padding: 125px 0 135px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(111, 216, 180, .11),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(69, 149, 212, .12),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #f8fcff 0%,
            #f2f8fb 100%
        );
}

.architecture-inner {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.architecture-heading {
    max-width: 950px;
    margin-bottom: 70px;
}

.architecture-heading h2 {
    margin: 0;

    font-size: clamp(38px, 4.1vw, 61px);
    line-height: 1.06;
    letter-spacing: -.035em;

    color: #173752;
}

.architecture-heading h2 span {
    display: block;
    color: #238dcc;
}

.architecture-heading p {
    max-width: 850px;
    margin-top: 26px;

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

    color: #62798b;
}


/* MAIN CHAIN */

.architecture-chain {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 10px;
    align-items: stretch;

    margin-bottom: 55px;
}

.chain-item {
    min-height: 125px;
    padding: 22px 20px;

    border-radius: 20px;

    display: flex;
    flex-direction: column;

    background: rgba(255,255,255,.88);

    border:
        1px solid rgba(55, 123, 164, .12);

    box-shadow:
        0 16px 40px rgba(33, 85, 118, .07);
}

.chain-number {
    margin-bottom: auto;

    color: #91a8b9;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.chain-item strong {
    margin-top: 20px;

    color: #1f5679;

    font-size: 13px;
    letter-spacing: .04em;
}

.chain-item span {
    margin-top: 7px;

    color: #768b9a;

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

.chain-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #d0a24a;

    font-size: 21px;
}


/* CENTRAL ARCHITECTURE */

.architecture-core {
    min-height: 480px;

    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;

    gap: 32px;

    padding: 43px;

    border-radius: 32px;

    background:
        linear-gradient(
            120deg,
            #123b5b,
            #17688f 50%,
            #1f8daa
        );

    box-shadow:
        0 35px 75px rgba(20, 77, 111, .20);

    color: white;
}

.architecture-core-left,
.architecture-core-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.core-caption {
    margin-bottom: 17px;

    color: #9fdef5;

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

    letter-spacing: .18em;
}

.architecture-core h3 {
    margin: 0;

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

.architecture-core p {
    margin: 20px 0 0;

    color: #c2d9e6;

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

.security-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 30px;
}

.security-tags span {
    padding: 8px 11px;

    border-radius: 14px;

    background: rgba(255,255,255,.10);

    color: #d7eff8;

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

    letter-spacing: .10em;
}


/* CORE VISUAL */

.architecture-core-center {
    position: relative;
    min-height: 390px;
}

.digital-core {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 170px;
    height: 170px;

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

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle at 35% 25%,
            #8ddcff,
            #238fc6 45%,
            #174a6d 100%
        );

    box-shadow:
        0 20px 55px rgba(0,0,0,.20),
        inset 0 0 25px rgba(255,255,255,.20);

    z-index: 3;
}

.digital-core small {
    font-size: 8px;
    letter-spacing: .15em;
}

.digital-core strong {
    margin-top: 6px;
    font-size: 25px;
}

.digital-node {
    position: absolute;

    width: 145px;

    padding: 15px 17px;

    border-radius: 17px;

    background:
        rgba(255,255,255,.93);

    color: #1a5576;

    box-shadow:
        0 13px 35px rgba(0,0,0,.12);

    z-index: 4;
}

.digital-node strong {
    display: block;

    font-size: 11px;
}

.digital-node span {
    display: block;

    margin-top: 5px;

    color: #6f8796;

    font-size: 10px;
}

.node-client {
    left: 50%;
    top: 3%;
    transform: translateX(-50%);
}

.node-employee {
    right: -4%;
    top: 51%;
}

.node-partner {
    left: -4%;
    top: 51%;
}

.connection-line {
    position: absolute;

    height: 1px;
    width: 135px;

    background:
        linear-gradient(
            90deg,
            rgba(140,220,246,.10),
            rgba(140,220,246,.85)
        );

    transform-origin: left center;

    z-index: 1;
}

.line-one {
    left: 50%;
    top: 28%;

    transform:
        rotate(90deg)
        translateY(-50%);
}

.line-two {
    left: 52%;
    top: 52%;

    transform: rotate(3deg);
}

.line-three {
    left: 22%;
    top: 52%;

    transform: rotate(177deg);
}


/* RELATION FLOW */

.relation-flow {
    margin-top: 32px;

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

    flex-wrap: wrap;
}

.relation-flow span {
    padding: 9px 11px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.10);

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

    letter-spacing: .08em;
}

.relation-flow i {
    color: #ecc76f;
    font-style: normal;
}


/* WORKFLOW */

.workflow-block {
    margin-top: 55px;

    padding: 42px;

    border-radius: 30px;

    background: #ffffff;

    border:
        1px solid rgba(48, 110, 148, .11);

    box-shadow:
        0 22px 55px rgba(33, 78, 106, .07);
}

.workflow-heading {
    display: grid;
    grid-template-columns: 1.25fr .75fr;

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

.workflow-heading h3 {
    margin: 0;

    max-width: 650px;

    color: #1b405c;

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

.workflow-heading p {
    margin: 0;

    color: #718694;

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

.workflow-chain {
    margin-top: 42px;

    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 8px;

    align-items: center;
}

.workflow-step {
    min-height: 85px;

    padding: 17px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #f2f8fc,
            #ffffff
        );

    border:
        1px solid rgba(65, 126, 164, .10);
}

.workflow-step span {
    color: #97aab8;

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

.workflow-step strong {
    margin-top: 9px;

    color: #275b7b;

    font-size: 11px;
}

.result-step {
    background:
        linear-gradient(
            145deg,
            #eefaf5,
            #ffffff
        );
}

.result-step strong {
    color: #23845f;
}

.workflow-arrow {
    color: #cba255;
}


/* MEMORY */

.memory-strip {
    margin-top: 30px;

    min-height: 95px;

    padding: 20px 30px;

    display: grid;
    grid-template-columns: auto 1fr auto;

    gap: 28px;
    align-items: center;

    border-radius: 22px;

    background:
        linear-gradient(
            90deg,
            #edf8ff,
            #f6fbff,
            #fff9ee
        );

    border:
        1px solid rgba(55, 120, 160, .10);
}

.memory-label {
    color: #1f789f;

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

    letter-spacing: .14em;
}

.memory-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 11px;

    color: #6d8393;

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

.memory-content i {
    color: #c59b52;
    font-style: normal;
}

.memory-strip strong {
    color: #1e6689;

    font-size: 11px;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

    .architecture-chain {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 15px;
    }

    .chain-arrow {
        display: none;
    }

    .architecture-core {
        grid-template-columns: 1fr;
    }

    .architecture-core-center {
        min-height: 430px;
    }

    .workflow-chain {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 12px;
    }

    .workflow-arrow {
        display: none;
    }

    .memory-strip {
        grid-template-columns: 1fr;
        text-align: center;
    }
}


@media (max-width: 700px) {

    .architecture-section {
        padding: 90px 0 100px;
    }

    .architecture-chain,
    .workflow-chain {
        grid-template-columns: 1fr;
    }

    .architecture-core,
    .workflow-block {
        padding: 28px;
    }

    .architecture-core-center {
        transform: scale(.90);
    }

    .workflow-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .architecture-heading h2 {
        font-size: 38px;
    }
}

/* =========================================
   CORPORATE MEMORY & INTELLIGENCE
   ========================================= */

.intelligence-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0 140px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(238, 189, 93, .14),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(80, 167, 211, .13),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafcff 52%,
            #f5fafc 100%
        );
}

.intelligence-inner {
    position: relative;
    z-index: 2;

    width: min(1480px, 88%);
    margin: 0 auto;
}


/* HEADING */

.intelligence-heading {
    max-width: 930px;

    margin: 0 auto 80px;

    text-align: center;
}

.intelligence-heading h2 {
    margin: 0;

    color: #173752;

    font-size: clamp(40px, 4.4vw, 66px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.intelligence-heading h2 span {
    display: block;

    color: #ba8a37;
}

.intelligence-heading p {
    max-width: 800px;

    margin: 28px auto 0;

    color: #637b8c;

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


/* MEMORY SYSTEM */

.memory-system {
    min-height: 560px;

    display: grid;
    grid-template-columns: .9fr 1.25fr .9fr;

    gap: 42px;

    align-items: center;
}


/* SOURCES */

.memory-source-column {
    display: flex;
    flex-direction: column;

    gap: 13px;
}

.memory-source {
    min-height: 78px;

    padding: 15px 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.87);

    border:
        1px solid rgba(59, 119, 155, .11);

    box-shadow:
        0 14px 36px rgba(37, 78, 104, .06);
}

.source-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 13px;

    background: #edf7fd;

    color: #2588bf;

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

.memory-source:nth-child(2) .source-icon {
    color: #528bb0;
    background: #eef5fa;
}

.memory-source:nth-child(3) .source-icon {
    color: #a98139;
    background: #fff6df;
}

.memory-source:nth-child(4) .source-icon {
    color: #238468;
    background: #ebf9f3;
}

.memory-source:nth-child(5) .source-icon {
    color: #826eb0;
    background: #f4effc;
}

.memory-source strong {
    display: block;

    color: #1d5273;

    font-size: 11px;
    letter-spacing: .05em;
}

.memory-source span {
    display: block;

    margin-top: 5px;

    color: #7a8d9b;

    font-size: 10px;
}


/* MEMORY CORE */

.memory-center {
    position: relative;

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

.memory-rings {
    position: relative;

    width: min(500px, 100%);
    aspect-ratio: 1 / 1;
}

.memory-ring {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border:
        1px solid rgba(43, 135, 187, .18);
}

.memory-ring-one {
    width: 96%;
    height: 96%;
}

.memory-ring-two {
    width: 76%;
    height: 76%;

    border-color:
        rgba(192, 147, 69, .25);
}

.memory-ring-three {
    width: 58%;
    height: 58%;

    border-color:
        rgba(54, 159, 138, .24);
}

.memory-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 245px;
    height: 245px;

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

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle at 35% 25%,
            #88d9f8,
            #267ea9 43%,
            #173f5d 100%
        );

    box-shadow:
        0 35px 85px rgba(29, 87, 124, .26),
        inset 0 0 35px rgba(255,255,255,.19);
}

.memory-core small {
    color: #ccecf8;

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

    letter-spacing: .16em;
}

.memory-core strong {
    margin-top: 12px;

    max-width: 190px;

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

.memory-core strong span {
    display: block;

    margin-top: 4px;

    color: #f2cb74;
}

.memory-core p {
    max-width: 155px;

    margin: 13px 0 0;

    color: #c8dfeb;

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


/* MEMORY VALUE */

.memory-value-label {
    color: #a98542;

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

    letter-spacing: .16em;
}

.memory-value-column h3 {
    margin: 16px 0 0;

    color: #1c405c;

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

.memory-value-column > p {
    margin: 19px 0 0;

    color: #708595;

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

.memory-value-list {
    margin-top: 27px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.memory-value-list div {
    min-height: 45px;

    padding: 10px 13px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 13px;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid rgba(53, 111, 147, .09);
}

.memory-value-list span {
    color: #b48b44;

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

.memory-value-list strong {
    color: #42657c;

    font-size: 11px;
}


/* MEMORY TO AI */

.memory-to-ai {
    position: relative;

    margin: 55px auto 65px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}

.memory-to-ai-line {
    width: 1px;
    height: 48px;

    background:
        linear-gradient(
            #87b7ce,
            #c29a50
        );
}

.memory-to-ai > span {
    margin-top: 13px;

    color: #68869a;

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

    letter-spacing: .18em;
}

.memory-to-ai-arrow {
    margin: 9px 0;

    color: #c0964c;

    font-size: 23px;
}

.memory-to-ai > strong {
    color: #1c587c;

    font-size: 12px;
    letter-spacing: .12em;
}


/* INTELLIGENT LAYER */

.intelligence-layer {
    min-height: 500px;

    padding: 50px 55px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 55px;

    align-items: center;

    border-radius: 34px;

    color: white;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(99, 215, 236, .19),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #132e48,
            #174f70 53%,
            #176f83
        );

    box-shadow:
        0 36px 85px rgba(21, 69, 98, .20);
}

.intelligence-label {
    color: #8dd6ef;

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

    letter-spacing: .20em;
}

.intelligence-copy h3 {
    margin: 18px 0 0;

    font-size: 37px;
    line-height: 1.08;
}

.intelligence-copy h3 span {
    display: block;

    margin-top: 5px;

    color: #8edbf1;
}

.intelligence-copy > p {
    max-width: 600px;

    margin: 25px 0 0;

    color: #c3d8e4;

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

.intelligence-boundary {
    margin-top: 35px;

    padding: 19px 21px;

    border-radius: 17px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.10);
}

.intelligence-boundary span {
    display: block;

    color: #edc874;

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

    letter-spacing: .15em;
}

.intelligence-boundary strong {
    display: block;

    margin-top: 9px;

    max-width: 560px;

    color: #e1eef4;

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


/* AI VISUAL */

.intelligence-visual {
    display: flex;
    justify-content: center;
}

.ai-space {
    position: relative;

    width: min(450px, 100%);
    aspect-ratio: 1 / 1;
}

.ai-space::before,
.ai-space::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border:
        1px solid rgba(124, 214, 237, .18);
}

.ai-space::before {
    width: 86%;
    height: 86%;
}

.ai-space::after {
    width: 63%;
    height: 63%;

    border-color:
        rgba(231, 194, 110, .22);
}

.ai-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 155px;
    height: 155px;

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

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #9fe5f7,
            #3199bc 45%,
            #18506e 100%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.24),
        inset 0 0 30px rgba(255,255,255,.18);

    z-index: 3;
}

.ai-core small {
    font-size: 8px;

    letter-spacing: .17em;

    color: #d8f4fb;
}

.ai-core strong {
    margin-top: 4px;

    font-size: 40px;
}

.ai-core span {
    margin-top: 5px;

    color: #d5ecf5;

    font-size: 9px;
}

.ai-orbit {
    position: absolute;

    min-width: 105px;

    padding: 10px 13px;

    text-align: center;

    border-radius: 15px;

    background:
        rgba(255,255,255,.91);

    box-shadow:
        0 13px 35px rgba(0,0,0,.12);

    z-index: 4;
}

.ai-orbit span {
    color: #25617d;

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

    letter-spacing: .07em;
}

.orbit-context {
    top: 3%;
    left: 50%;

    transform:
        translateX(-50%);
}

.orbit-docs {
    right: -1%;
    top: 46%;
}

.orbit-history {
    bottom: 4%;
    left: 50%;

    transform:
        translateX(-50%);
}

.orbit-relations {
    left: -1%;
    top: 46%;
}


/* HUMAN CONTROL */

.human-control {
    min-height: 120px;

    margin-top: 34px;

    padding: 25px 34px;

    display: grid;
    grid-template-columns: auto 1fr auto;

    gap: 25px;

    align-items: center;

    border-radius: 24px;

    background:
        linear-gradient(
            100deg,
            #fff8e9,
            #ffffff 45%,
            #eef9f6
        );

    border:
        1px solid rgba(174, 137, 68, .14);

    box-shadow:
        0 18px 45px rgba(54, 75, 89, .07);
}

.human-symbol {
    width: 62px;
    height: 62px;

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

    border-radius: 50%;

    color: #8c6a2f;

    background: #f7e7bd;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}

.human-copy span {
    display: block;

    color: #7e94a2;

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

    letter-spacing: .16em;
}

.human-copy strong {
    display: block;

    margin-top: 8px;

    color: #244d66;

    font-size: 18px;
}

.human-mark {
    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    background: #e6f6ef;

    color: #238363;

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


/* RESPONSIVE */

@media (max-width: 1050px) {

    .memory-system {
        grid-template-columns: 1fr;
    }

    .memory-source-column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .memory-value-column {
        text-align: center;
    }

    .memory-value-list {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .intelligence-layer {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {

    .intelligence-section {
        padding: 90px 0 100px;
    }

    .intelligence-heading {
        text-align: left;
    }

    .intelligence-heading h2 {
        font-size: 38px;
    }

    .memory-source-column {
        grid-template-columns: 1fr;
    }

    .memory-core {
        width: 200px;
        height: 200px;
    }

    .intelligence-layer {
        padding: 30px;
    }

    .intelligence-copy h3 {
        font-size: 31px;
    }

    .human-control {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .human-symbol,
    .human-mark {
        margin: 0 auto;
    }
}

/* =========================================
   INTERNATIONAL NETWORK
   ========================================= */

.network-section {
    position: relative;
    overflow: hidden;

    padding: 135px 0 140px;

    background:
        radial-gradient(
            circle at 13% 20%,
            rgba(65, 153, 211, .12),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(223, 177, 83, .13),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f5fafc 0%,
            #ffffff 50%,
            #f7fbfd 100%
        );
}

.network-inner {
    width: min(1480px, 88%);
    margin: 0 auto;
}


/* HEADING */

.network-heading {
    max-width: 960px;
    margin-bottom: 75px;
}

.network-heading h2 {
    margin: 0;

    color: #173752;

    font-size: clamp(40px, 4.5vw, 67px);
    line-height: 1.04;

    letter-spacing: -.04em;
}

.network-heading h2 span {
    display: block;

    color: #208dc9;
}

.network-heading p {
    max-width: 840px;

    margin: 28px 0 0;

    color: #687f90;

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


/* MAIN NETWORK STAGE */

.network-stage {
    display: grid;
    grid-template-columns: 1.15fr .85fr;

    gap: 70px;

    align-items: center;
}


/* MAP */

.network-map {
    position: relative;

    min-height: 590px;

    overflow: hidden;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at center,
            rgba(87, 196, 226, .22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #103550,
            #155d7b 55%,
            #167f93
        );

    box-shadow:
        0 35px 80px rgba(24, 80, 111, .20);
}

.network-grid {
    position: absolute;
    inset: 0;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}

.network-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border:
        1px solid rgba(136, 222, 242, .18);
}

.network-orbit-one {
    width: 78%;
    aspect-ratio: 1 / 1;
}

.network-orbit-two {
    width: 58%;
    aspect-ratio: 1 / 1;

    border-color:
        rgba(235, 198, 111, .19);
}

.network-orbit-three {
    width: 38%;
    aspect-ratio: 1 / 1;
}


/* CENTER */

.network-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 205px;
    height: 205px;

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

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle at 35% 25%,
            #98e2f8,
            #2f99c1 43%,
            #174d6e 100%
        );

    box-shadow:
        0 30px 70px rgba(0,0,0,.25),
        inset 0 0 32px rgba(255,255,255,.18);

    z-index: 3;
}

.network-center small {
    color: #d7f3fb;

    font-size: 8px;

    letter-spacing: .15em;
}

.network-center strong {
    margin-top: 8px;

    font-size: 26px;
}

.network-center span {
    max-width: 135px;

    margin-top: 8px;

    color: #d2eaf3;

    font-size: 9px;
}


/* COUNTRY NODES */

.country-node {
    position: absolute;

    min-width: 155px;

    padding: 13px 16px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 15px 35px rgba(0,0,0,.14);

    z-index: 4;
}

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

    display: inline-block;

    margin-right: 7px;

    border-radius: 50%;

    background: #29a3cf;
}

.country-node strong {
    color: #205a78;

    font-size: 10px;

    letter-spacing: .04em;
}

.country-node small {
    display: block;

    margin-top: 5px;

    color: #768b98;

    font-size: 9px;
}

.country-europe {
    left: 8%;
    top: 14%;
}

.country-central {
    right: 5%;
    top: 25%;
}

.country-asia {
    right: 9%;
    bottom: 13%;
}

.country-other {
    left: 7%;
    bottom: 18%;
}


/* COPY */

.network-copy {
    max-width: 520px;
}

.network-label {
    color: #2087bd;

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

    letter-spacing: .17em;
}

.network-copy h3 {
    margin: 17px 0 0;

    color: #1c405b;

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

.network-copy > p {
    margin: 22px 0 0;

    color: #6b8191;

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

.network-features {
    margin-top: 31px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 11px;
}

.network-features div {
    min-height: 58px;

    padding: 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    border-radius: 14px;

    background: #ffffff;

    border:
        1px solid rgba(57, 117, 153, .10);
}

.network-features span {
    color: #b18a48;

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

.network-features strong {
    color: #45687f;

    font-size: 11px;
}


/* REPRESENTATIVE */

.representative-demo {
    margin-top: 85px;

    display: grid;
    grid-template-columns: .85fr 1.15fr;

    gap: 60px;

    align-items: center;
}

.representative-intro h3 {
    margin: 0;

    color: #1a405d;

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

.representative-intro h3 span {
    display: block;

    margin-top: 5px;

    color: #c09342;
}

.representative-intro p {
    max-width: 530px;

    margin-top: 22px;

    color: #6c8393;

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


/* REPRESENTATIVE CARD */

.representative-card {
    min-height: 190px;

    padding: 25px;

    display: grid;
    grid-template-columns: auto 1fr auto;

    gap: 25px;

    align-items: center;

    border-radius: 27px;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid rgba(49, 112, 150, .11);

    box-shadow:
        0 24px 60px rgba(34, 77, 103, .09);
}

.representative-photo {
    position: relative;
}

.photo-placeholder {
    width: 110px;
    height: 125px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #e5f3fa,
            #c9e5f1
        );

    color: #6f91a5;

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

.online-indicator {
    position: absolute;

    right: -4px;
    bottom: -4px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #35b67b;

    border: 4px solid white;
}

.representative-country {
    color: #2d92c5;

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

    letter-spacing: .15em;
}

.representative-info h4 {
    margin: 9px 0 0;

    color: #1b425e;

    font-size: 23px;
}

.representative-info p {
    margin: 7px 0 0;

    color: #718595;

    font-size: 12px;
}

.representative-languages {
    margin-top: 17px;

    display: flex;
    gap: 7px;
}

.representative-languages span {
    min-width: 32px;

    padding: 6px 8px;

    text-align: center;

    border-radius: 12px;

    background: #eff6fa;

    color: #57778b;

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


/* ACTIONS */

.representative-actions {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.rep-action {
    min-width: 110px;
    min-height: 34px;

    padding: 0 13px;

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

    border-radius: 17px;

    background: #edf5f8;

    color: #356681;

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

.rep-call {
    background:
        linear-gradient(
            135deg,
            #1783ba,
            #28a8cf
        );

    color: white;
}

.rep-profile {
    background: transparent;

    border:
        1px solid rgba(51, 113, 150, .15);
}


/* COUNTRY FLOW */

.country-flow {
    margin-top: 55px;

    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 13px;

    align-items: stretch;
}

.country-flow-step {
    min-height: 145px;

    padding: 23px;

    border-radius: 20px;

    background: #ffffff;

    border:
        1px solid rgba(56, 117, 153, .10);
}

.country-flow-step > span {
    color: #a9b9c4;

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

.country-flow-step strong {
    display: block;

    margin-top: 24px;

    color: #235879;

    font-size: 12px;
}

.country-flow-step p {
    margin: 9px 0 0;

    color: #788c99;

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

.country-flow-result {
    background:
        linear-gradient(
            145deg,
            #eef9f5,
            #ffffff
        );
}

.country-flow-result strong {
    color: #277a61;
}

.country-flow-arrow {
    display: flex;
    align-items: center;

    color: #c49a4e;

    font-size: 20px;
}


/* CTA */

.network-cta {
    margin-top: 40px;

    min-height: 125px;

    padding: 28px 35px;

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

    gap: 30px;

    border-radius: 25px;

    color: white;

    background:
        linear-gradient(
            115deg,
            #153d5a,
            #17688d 55%,
            #1f90a9
        );

    box-shadow:
        0 25px 65px rgba(20, 76, 108, .18);
}

.network-cta span {
    display: block;

    color: #8ed5ee;

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

    letter-spacing: .18em;
}

.network-cta strong {
    display: block;

    margin-top: 8px;

    font-size: 22px;
}

.network-cta-button {
    min-height: 48px;

    padding: 0 22px;

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

    white-space: nowrap;

    border-radius: 24px;

    background: white;

    color: #206681;

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


/* RESPONSIVE */

@media (max-width: 1050px) {

    .network-stage,
    .representative-demo {
        grid-template-columns: 1fr;
    }

    .network-copy {
        max-width: none;
    }

    .country-flow {
        grid-template-columns: 1fr 1fr;
    }

    .country-flow-arrow {
        display: none;
    }
}


@media (max-width: 650px) {

    .network-section {
        padding: 90px 0 100px;
    }

    .network-map {
        min-height: 520px;
    }

    .network-center {
        width: 165px;
        height: 165px;
    }

    .country-node {
        min-width: 125px;
    }

    .network-features,
    .country-flow {
        grid-template-columns: 1fr;
    }

    .representative-card {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .photo-placeholder {
        margin: 0 auto;
    }

    .representative-languages {
        justify-content: center;
    }

    .representative-actions {
        align-items: center;
    }

    .network-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================
   PRESENTATIONS
   ========================================= */

.presentations-section {
    position: relative;
    padding: 125px 0 135px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(80, 167, 211, .10),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(219, 170, 77, .11),
            transparent 25%
        ),
        #ffffff;
}

.presentations-inner {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.presentations-heading {
    max-width: 900px;
    margin-bottom: 65px;
}

.presentations-heading h2 {
    margin: 0;

    color: #173752;

    font-size: clamp(40px, 4.4vw, 66px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.presentations-heading h2 span {
    display: block;
    color: #208dcc;
}

.presentations-heading p {
    max-width: 790px;

    margin: 27px 0 0;

    color: #687f90;

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


/* GRID */

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

    gap: 17px;
}

.presentation-card {
    min-height: 125px;

    padding: 22px;

    display: grid;
    grid-template-columns: auto 1fr auto;

    gap: 16px;

    align-items: center;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbfd
        );

    border:
        1px solid rgba(55, 116, 152, .11);

    box-shadow:
        0 16px 40px rgba(34, 78, 105, .06);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.presentation-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(38, 144, 197, .30);

    box-shadow:
        0 24px 52px rgba(34, 78, 105, .10);
}

.presentation-language {
    width: 48px;
    height: 48px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #eaf7fd,
            #d9eef8
        );

    color: #2185b7;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .08em;
}

.presentation-info strong {
    display: block;

    color: #214e6b;

    font-size: 14px;
}

.presentation-info span {
    display: block;

    margin-top: 6px;

    color: #7b8f9d;

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

.presentation-download {
    color: #b58c47;

    font-size: 10px;
    font-weight: 900;
}


/* NOTE */

.presentation-note {
    margin-top: 34px;

    min-height: 115px;

    padding: 26px 32px;

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

    gap: 30px;

    border-radius: 24px;

    background:
        linear-gradient(
            110deg,
            #eef8fc,
            #ffffff 50%,
            #fff8ea
        );

    border:
        1px solid rgba(58, 117, 151, .10);
}

.presentation-note span {
    display: block;

    color: #2487b8;

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

    letter-spacing: .16em;
}

.presentation-note strong {
    display: block;

    margin-top: 8px;

    color: #365b72;

    font-size: 17px;
}

.presentation-all-button {
    min-height: 44px;

    padding: 0 20px;

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

    white-space: nowrap;

    border-radius: 22px;

    background: #174b6b;

    color: #ffffff;

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


/* RESPONSIVE */

@media (max-width: 1150px) {

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

@media (max-width: 650px) {

    .presentations-section {
        padding: 90px 0 100px;
    }

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

    .presentation-note {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================
   FINAL CONTACT
   ========================================= */

.final-contact-section {
    position: relative;
    overflow: hidden;

    padding: 135px 0 45px;

    color: white;

    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(81, 202, 228, .22),
            transparent 26%
        ),
        radial-gradient(
            circle at 18% 90%,
            rgba(218, 172, 78, .15),
            transparent 27%
        ),
        linear-gradient(
            125deg,
            #102d45 0%,
            #154c6c 52%,
            #167e92 100%
        );
}

.final-contact-background {
    position: absolute;
    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(255,255,255,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size: 54px 54px;
}

.final-contact-inner {
    position: relative;
    z-index: 2;

    width: min(1480px, 88%);
    margin: 0 auto;
}


/* MAIN */

.final-contact-main {
    min-height: 470px;

    display: grid;
    grid-template-columns: 1.2fr .8fr;

    gap: 80px;

    align-items: center;
}

.final-contact-label {
    color: #87d8f1;

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

    letter-spacing: .20em;
}

.final-contact-copy h2 {
    max-width: 850px;

    margin: 19px 0 0;

    font-size: clamp(43px, 4.7vw, 72px);
    line-height: 1.02;

    letter-spacing: -.04em;
}

.final-contact-copy h2 span {
    display: block;

    margin-top: 7px;

    color: #91ddf1;
}

.final-contact-copy p {
    max-width: 720px;

    margin: 29px 0 0;

    color: #c6dbe6;

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


/* BUTTONS */

.final-contact-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 38px;
}

.final-button {
    min-height: 52px;

    padding: 0 24px;

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

    border-radius: 27px;

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

    transition:
        transform .2s ease,
        background .2s ease;
}

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

.final-button-primary {
    background: white;
    color: #17627f;
}

.final-button-secondary {
    color: white;

    border:
        1px solid rgba(255,255,255,.30);

    background:
        rgba(255,255,255,.07);
}


/* RIGHT SIDE */

.final-contact-side {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 35px;
}

.final-thalamus-mark {
    width: 285px;
    height: 285px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #8bdcf6,
            #2c94ba 45%,
            #174866 100%
        );

    border:
        1px solid rgba(255,255,255,.18);

    box-shadow:
        0 35px 80px rgba(0,0,0,.24),
        inset 0 0 35px rgba(255,255,255,.17);
}

.final-thalamus-mark small {
    color: #d4f1f9;

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

    letter-spacing: .20em;
}

.final-thalamus-mark strong {
    margin-top: 14px;

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

    width: 100%;
    max-width: 240px;

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

    text-align: center;
}

.final-thalamus-mark strong span {
    display: block;

    width: auto;
    max-width: none;

    margin-top: 6px;

    color: #f0ca73;

    font-size: 21px;
    line-height: 1.05;

    text-align: center;

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.final-contact-email {
    text-align: center;
}

.final-contact-email span {
    display: block;

    color: #8ed7eb;

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

    letter-spacing: .17em;
}

.final-contact-email a {
    display: block;

    margin-top: 9px;

    color: white;

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


/* VALUES */

.final-values {
    min-height: 100px;

    padding: 22px 28px;

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

    gap: 20px;

    border-radius: 24px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.10);

    backdrop-filter: blur(12px);
}

.final-values div {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.final-values span {
    color: #82cde4;

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

.final-values strong {
    font-size: 10px;

    letter-spacing: .07em;
}

.final-values i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #e3ba62;
}

.final-value-accent strong {
    color: #efcb78;
}


/* BOTTOM */

.final-bottom {
    min-height: 105px;

    margin-top: 38px;

    display: grid;
    grid-template-columns: auto 1fr auto;

    gap: 32px;

    align-items: center;

    border-top:
        1px solid rgba(255,255,255,.13);
}

.final-bottom > span {
    font-size: 13px;
    font-weight: 900;

    letter-spacing: .13em;
}

.final-bottom p {
    margin: 0;

    color: #9eb9c8;

    font-size: 11px;
}

.final-bottom a {
    color: #d8eef5;

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


/* RESPONSIVE */

@media (max-width: 950px) {

    .final-contact-main {
        grid-template-columns: 1fr;
    }

    .final-contact-side {
        padding-bottom: 50px;
    }

    .final-values {
        flex-wrap: wrap;
    }

    .final-bottom {
        grid-template-columns: 1fr;

        padding: 30px 0;

        text-align: center;
    }
}


@media (max-width: 650px) {

    .final-contact-section {
        padding-top: 90px;
    }

    .final-contact-copy h2 {
        font-size: 40px;
    }

    .final-thalamus-mark {
        width: 220px;
        height: 220px;
    }

    .final-values i {
        display: none;
    }

    .final-values {
        justify-content: flex-start;
    }
}

/* =========================================
   INTERNAL PAGE — TEMPORARY BASE
   ========================================= */

.internal-page {
    min-height: calc(100vh - 230px);

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(77, 174, 218, .15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7fcff,
            #ffffff
        );
}

.internal-page-inner {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.internal-page h1 {
    max-width: 1000px;

    margin: 15px 0 0;

    color: #173752;

    font-size: clamp(48px, 5vw, 76px);

    letter-spacing: -.04em;
}

.internal-page p {
    max-width: 800px;

    margin-top: 25px;

    color: #687f90;

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

.internal-page p a {
    color: #208dcc;
    font-weight: 700;
}

/* =========================================
   DIGITAL INFRASTRUCTURE PAGE
   ========================================= */

.di-container {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.di-kicker {
    color: #228bca;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .20em;
}

.di-kicker-light {
    color: #8fdcf2;
}


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

.di-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: 780px;

    background:
        radial-gradient(
            circle at 74% 30%,
            rgba(45, 176, 224, .28),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 64%,
            rgba(49, 193, 181, .11),
            transparent 24%
        ),
        radial-gradient(
            circle at 15% 84%,
            rgba(221, 174, 77, .14),
            transparent 25%
        ),
        linear-gradient(
            132deg,
            #f8fcff 0%,
            #edf8fd 46%,
            #eefcfb 72%,
            #fffaf1 100%
        );
}


/* subtle technical grid */

.di-hero-grid {
    position: absolute;
    inset: 0;

    z-index: 0;

    opacity: .58;

    background-image:
        linear-gradient(
            rgba(52, 132, 178, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(52, 132, 178, .055) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.80),
            rgba(0,0,0,.46) 64%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.80),
            rgba(0,0,0,.46) 64%,
            transparent 100%
        );
}


.di-hero::before {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    right: 6%;
    top: 10%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(79, 201, 239, .13) 0%,
            rgba(79, 201, 239, .05) 45%,
            transparent 72%
        );

    filter: blur(4px);

    pointer-events: none;
}


.di-hero::after {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    left: 4%;
    bottom: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(227, 179, 75, .13),
            transparent 68%
        );

    pointer-events: none;
}


.di-hero-layout {
    position: relative;
    z-index: 2;

    min-height: 780px;

    display: grid;
    grid-template-columns: 1.04fr .96fr;

    gap: 64px;

    align-items: center;
}


.di-hero-copy {
    position: relative;

    z-index: 3;
}


.di-hero-copy .di-kicker {
    position: relative;

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

    gap: 11px;

    color: #1487c3;
}


.di-hero-copy .di-kicker::before {
    content: "";

    width: 24px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d7a947,
            #1aa2d5
        );
}


.di-hero-copy h1 {
    max-width: 810px;

    margin: 18px 0 0;

    color: #173752;

    font-size: clamp(52px, 5.2vw, 80px);
    line-height: .99;

    letter-spacing: -.045em;
}


.di-hero-copy h1 span {
    display: block;

    margin-top: 9px;

    color: #158fcf;

    text-shadow:
        0 1px 0 rgba(255,255,255,.72),
        0 10px 28px rgba(21, 143, 207, .08);
}


.di-hero-lead {
    max-width: 720px;

    margin: 31px 0 0;

    color: #5e778a;

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


.di-hero-actions {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}


/* =========================================
   HERO VISUAL
   ========================================= */

.di-system-visual {
    position: relative;

    width: min(600px, 100%);
    aspect-ratio: 1 / 1;

    margin-left: auto;

    filter:
        drop-shadow(
            0 18px 35px
            rgba(39, 113, 150, .08)
        );
}


.di-system-visual::before {
    content: "";

    position: absolute;

    inset: 18%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(89, 202, 235, .15),
            rgba(49, 169, 206, .06) 44%,
            transparent 70%
        );

    filter: blur(10px);

    animation:
        diCoreGlow 7s ease-in-out infinite;
}


.di-ring {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border:
        1px solid rgba(42, 148, 205, .21);

    pointer-events: none;
}


.di-ring-1 {
    width: 94%;
    height: 94%;

    border-color:
        rgba(36, 159, 213, .22);

    box-shadow:
        0 0 34px rgba(47, 167, 217, .025);
}


.di-ring-2 {
    width: 72%;
    height: 72%;

    border-color:
        rgba(212, 162, 72, .30);
}


.di-ring-3 {
    width: 49%;
    height: 49%;

    border-color:
        rgba(56, 175, 150, .30);
}


.di-ring-1::after,
.di-ring-2::after,
.di-ring-3::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #40bde7;

    box-shadow:
        0 0 0 5px rgba(64, 189, 231, .09),
        0 0 20px rgba(64, 189, 231, .35);
}


.di-ring-1::after {
    top: 19%;
    left: 11%;

    animation:
        diOrbitPulse 4.8s ease-in-out infinite;
}


.di-ring-2::after {
    right: 6%;
    bottom: 25%;

    background: #ddb04f;

    box-shadow:
        0 0 0 5px rgba(221, 176, 79, .09),
        0 0 20px rgba(221, 176, 79, .30);

    animation:
        diOrbitPulse 5.5s ease-in-out infinite .7s;
}


.di-ring-3::after {
    left: 12%;
    bottom: 14%;

    background: #43b998;

    box-shadow:
        0 0 0 5px rgba(67, 185, 152, .09),
        0 0 18px rgba(67, 185, 152, .28);

    animation:
        diOrbitPulse 5.2s ease-in-out infinite 1.2s;
}


/* =========================================
   CORE
   ========================================= */

.di-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 215px;
    height: 215px;

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

    border-radius: 50%;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    color: white;

    background:
        radial-gradient(
            circle at 34% 23%,
            #9be4ff 0%,
            #51bee6 17%,
            #278fc1 46%,
            #174c70 100%
        );

    border:
        1px solid rgba(255,255,255,.20);

    box-shadow:
        0 34px 80px rgba(22, 85, 123, .30),
        0 0 0 8px rgba(93, 195, 229, .055),
        inset 0 0 38px rgba(255,255,255,.20);

    z-index: 3;

    animation:
        diCoreFloat 6s ease-in-out infinite;
}


.di-core::before {
    content: "";

    position: absolute;

    inset: 9px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.07);

    pointer-events: none;
}


.di-core small {
    font-size: 8px;
    font-weight: 800;

    letter-spacing: .19em;

    color: #e3f7ff;
}


.di-core strong {
    margin-top: 7px;

    font-size: 29px;

    letter-spacing: .02em;
}


.di-core span {
    margin-top: 8px;

    color: #d3edf7;

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

    letter-spacing: .12em;
}


/* =========================================
   SYSTEM NODES
   ========================================= */

.di-node {
    position: absolute;

    min-width: 145px;

    padding: 15px 17px;

    overflow: hidden;

    border-radius: 17px;

    background:
        rgba(255,255,255,.91);

    border:
        1px solid rgba(56, 123, 161, .11);

    box-shadow:
        0 16px 40px rgba(34, 80, 107, .105);

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

    z-index: 4;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.di-node::before {
    content: "";

    position: absolute;

    top: 0;
    left: 17px;

    width: 34px;
    height: 2px;

    border-radius: 0 0 4px 4px;

    background: #2fa9d9;
}


.di-node:hover {
    transform: translateY(-4px);

    box-shadow:
        0 23px 52px rgba(34, 80, 107, .15);
}


.di-node > span {
    color: #91a8b7;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .08em;
}


.di-node strong {
    display: block;

    margin-top: 7px;

    color: #1e5d82;

    font-size: 10px;
}


.di-node small {
    display: block;

    margin-top: 5px;

    color: #718897;

    font-size: 9px;
}


/* CLIENT — CYAN */

.di-node-client {
    top: 3%;
    left: 50%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(236,249,255,.91)
        );
}


.di-node-client:hover {
    transform:
        translateX(-50%)
        translateY(-4px);
}


.di-node-client::before {
    background: #2fb5dc;
}


/* TEAM — BLUE */

.di-node-team {
    right: -2%;
    top: 35%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(239,246,255,.91)
        );
}


.di-node-team::before {
    background: #518ed4;
}


/* PARTNER — GOLD */

.di-node-partner {
    right: 8%;
    bottom: 10%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(255,248,232,.93)
        );
}


.di-node-partner::before {
    background: #d9a844;
}


/* PROCESS — GREEN */

.di-node-process {
    left: 8%;
    bottom: 10%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(237,250,245,.92)
        );
}


.di-node-process::before {
    background: #43b68d;
}


/* MEMORY — VIOLET / BLUE */

.di-node-memory {
    left: -2%;
    top: 35%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(243,243,255,.93)
        );
}


.di-node-memory::before {
    background: #7279cf;
}


/* =========================================
   HERO MOTION
   ========================================= */

@keyframes diCoreFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-6px);
    }
}


@keyframes diCoreGlow {

    0%,
    100% {
        opacity: .72;
        transform: scale(.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}


@keyframes diOrbitPulse {

    0%,
    100% {
        opacity: .48;
        transform: scale(.82);
    }

    50% {
        opacity: 1;
        transform: scale(1.10);
    }
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1100px) {

    .di-hero {
        min-height: auto;
    }

    .di-hero-layout {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 35px;

        padding:
            70px 0
            95px;
    }

    .di-hero-copy {
        max-width: 820px;
    }

    .di-system-visual {
        width: min(590px, 92%);

        margin: 10px auto 0;
    }
}


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

@media (max-width: 650px) {

    .di-hero::before {
        width: 360px;
        height: 360px;

        right: -110px;
        top: 46%;
    }

    .di-hero::after {
        width: 260px;
        height: 260px;

        left: -100px;
        bottom: -90px;
    }

    .di-hero-layout {
        gap: 30px;

        padding:
            52px 0
            78px;
    }

    .di-hero-copy h1 {
        font-size:
            clamp(
                40px,
                11vw,
                53px
            );

        line-height: .99;
    }

    .di-hero-lead {
        margin-top: 25px;

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

    .di-hero-actions {
        margin-top: 29px;

        gap: 10px;
    }

    .di-system-visual {
        width: 106%;

        margin-left: -3%;
    }

    .di-core {
        width: 165px;
        height: 165px;
    }

    .di-core strong {
        font-size: 23px;
    }

    .di-core span {
        max-width: 130px;

        line-height: 1.3;
    }

    .di-node {
        min-width: 112px;

        padding: 12px 13px;

        border-radius: 14px;
    }

    .di-node strong {
        font-size: 9px;
    }

    .di-node small {
        font-size: 8px;
    }

    .di-node-client {
        top: 1%;
    }

    .di-node-team {
        right: -3%;
        top: 34%;
    }

    .di-node-memory {
        left: -3%;
        top: 34%;
    }

    .di-node-process {
        left: 4%;
        bottom: 7%;
    }

    .di-node-partner {
        right: 4%;
        bottom: 7%;
    }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .di-core,
    .di-system-visual::before,
    .di-ring-1::after,
    .di-ring-2::after,
    .di-ring-3::after {
        animation: none;
    }

    .di-node {
        transition: none;
    }
}

/* =========================================
   TRANSITION
   ========================================= */

.di-transition-section {
    padding: 125px 0 135px;

    background: #ffffff;
}

.di-section-heading {
    max-width: 950px;

    margin-bottom: 65px;
}

.di-section-heading h2,
.di-architecture-heading h2,
.di-deployment-heading h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(39px, 4.2vw, 62px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.di-section-heading h2 span,
.di-architecture-heading h2 span,
.di-deployment-heading h2 span {
    display: block;

    color: #218dcc;
}

.di-section-heading p,
.di-deployment-heading p {
    max-width: 820px;

    margin: 25px 0 0;

    color: #687f90;

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

.di-transition {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;

    gap: 28px;

    align-items: center;
}

.di-fragmented,
.di-unified {
    min-height: 430px;

    padding: 35px;

    border-radius: 28px;
}

.di-fragmented {
    background:
        linear-gradient(
            145deg,
            #f6f9fb,
            #ffffff
        );

    border:
        1px solid rgba(56, 113, 148, .10);
}

.di-unified {
    color: white;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(99, 207, 229, .17),
            transparent 28%
        ),
        linear-gradient(
            130deg,
            #143d5c,
            #19718f
        );

    box-shadow:
        0 28px 65px rgba(22, 76, 105, .17);
}

.di-panel-label {
    color: #8ca2b1;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .17em;
}

.di-unified .di-panel-label {
    color: #91d7ed;
}

.di-tools {
    margin-top: 35px;

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

    gap: 11px;
}

.di-tools div {
    min-height: 78px;

    padding: 15px;

    border-radius: 15px;

    background: white;

    border:
        1px solid rgba(57, 115, 150, .09);
}

.di-tools span {
    color: #2390c7;

    font-size: 8px;
    font-weight: 900;
}

.di-tools strong {
    display: block;

    margin-top: 8px;

    color: #41677f;

    font-size: 11px;
}

.di-fragmented > p {
    margin: 27px 0 0;

    color: #718795;

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

.di-transform-arrow {
    text-align: center;
}

.di-transform-arrow span {
    display: block;

    color: #258fc2;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .13em;
}

.di-transform-arrow strong {
    display: block;

    margin: 10px 0;

    color: #c69a4c;

    font-size: 34px;
}

.di-transform-arrow small {
    color: #8b9da9;

    font-size: 9px;
}

.di-unified-core {
    width: 220px;
    height: 220px;

    margin: 45px auto 25px;

    border-radius: 50%;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    background:
        rgba(255,255,255,.09);

    border:
        1px solid rgba(255,255,255,.14);
}

.di-unified-core small {
    color: #9bdaec;

    font-size: 8px;
}

.di-unified-core strong {
    margin-top: 10px;

    font-size: 18px;
}

.di-unified-core strong span {
    display: block;

    margin-top: 5px;

    color: #edc875;
}

.di-unified-values {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;
}

.di-unified-values span {
    padding: 7px 10px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.09);

    color: #d5e9f1;

    font-size: 9px;
}


/* =========================================
   ARCHITECTURE LAYERS
   ========================================= */

.di-architecture-section {
    padding: 130px 0;

    background:
        linear-gradient(
            180deg,
            #f2f8fb,
            #f8fcfe
        );
}

.di-architecture-heading {
    max-width: 930px;

    margin-bottom: 60px;
}

.di-layers {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.di-layer {
    min-height: 125px;

    padding: 22px 27px;

    display: grid;
    grid-template-columns: 65px 230px 1fr auto;

    gap: 28px;

    align-items: center;

    border-radius: 20px;

    background: rgba(255,255,255,.90);

    border:
        1px solid rgba(55, 117, 153, .10);

    box-shadow:
        0 14px 34px rgba(35, 78, 104, .05);
}

.di-layer-number {
    color: #a8b7c1;

    font-size: 10px;
    font-weight: 900;
}

.di-layer-title small {
    display: block;

    color: #7da0b4;

    font-size: 8px;

    letter-spacing: .14em;
}

.di-layer-title strong {
    display: block;

    margin-top: 7px;

    color: #215777;

    font-size: 15px;
}

.di-layer p {
    margin: 0;

    max-width: 520px;

    color: #708593;

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

.di-layer-tags {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 7px;
}

.di-layer-tags span {
    padding: 7px 9px;

    border-radius: 12px;

    background: #edf6fa;

    color: #47728a;

    font-size: 8px;
    font-weight: 900;
}

.di-layer-people {
    border-left: 4px solid #39a4d3;
}

.di-layer-relations {
    border-left: 4px solid #65ad93;
}

.di-layer-communication {
    border-left: 4px solid #bea05b;
}

.di-layer-process {
    border-left: 4px solid #718fc4;
}

.di-layer-memory {
    border-left: 4px solid #9b79b7;
}


/* =========================================
   CONTROL
   ========================================= */

.di-control-section {
    padding: 125px 0;

    color: white;

    background:
        radial-gradient(
            circle at 80% 22%,
            rgba(95, 210, 235, .16),
            transparent 25%
        ),
        linear-gradient(
            125deg,
            #112f48,
            #175e7d 55%,
            #187f91
        );
}

.di-control-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;

    gap: 85px;

    align-items: center;
}

.di-control-copy h2 {
    margin: 17px 0 0;

    font-size: clamp(40px, 4.1vw, 62px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.di-control-copy h2 span {
    display: block;

    color: #8cd9ee;
}

.di-control-copy p {
    max-width: 720px;

    margin: 25px 0 0;

    color: #c5dbe6;

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


/* ACCESS VISUAL */

.di-access-visual {
    padding: 34px;

    border-radius: 28px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.11);
}

.di-access-user {
    padding: 20px;

    text-align: center;

    border-radius: 18px;

    background:
        rgba(255,255,255,.10);
}

.di-access-user small {
    display: block;

    color: #8fd6e9;

    font-size: 8px;

    letter-spacing: .15em;
}

.di-access-user strong {
    display: block;

    margin-top: 8px;

    font-size: 17px;
}

.di-access-flow {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 9px;
}

.di-access-flow > div {
    width: 100%;

    padding: 14px 17px;

    display: grid;
    grid-template-columns: 35px 1fr auto;

    align-items: center;

    border-radius: 15px;

    background:
        rgba(255,255,255,.08);
}

.di-access-flow span {
    color: #e0b95e;

    font-size: 8px;
    font-weight: 900;
}

.di-access-flow strong {
    font-size: 10px;
}

.di-access-flow small {
    color: #98c5d6;

    font-size: 8px;
}

.di-access-flow i {
    color: #e0b95e;

    font-style: normal;
}

.di-access-result {
    background:
        rgba(86, 190, 153, .17) !important;
}


/* =========================================
   DEPLOYMENT
   ========================================= */

.di-deployment-section {
    padding: 130px 0 140px;

    background: #ffffff;
}

.di-deployment-heading {
    max-width: 950px;

    margin-bottom: 60px;
}

.di-deployment-flow {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 11px;

    align-items: stretch;
}

.di-deployment-step {
    min-height: 145px;

    padding: 22px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f7fbfd,
            #ffffff
        );

    border:
        1px solid rgba(56, 116, 152, .10);
}

.di-deployment-step span {
    color: #a5b6c1;

    font-size: 9px;
    font-weight: 900;
}

.di-deployment-step strong {
    display: block;

    margin-top: 28px;

    color: #285c7a;

    font-size: 11px;
}

.di-deployment-step small {
    display: block;

    margin-top: 8px;

    color: #7d909c;

    font-size: 9px;
}

.di-deployment-flow > i {
    display: flex;

    align-items: center;

    color: #c2994e;

    font-style: normal;
}

.di-deployment-result {
    background:
        linear-gradient(
            145deg,
            #edf9f4,
            #ffffff
        );
}

.di-deployment-result strong {
    color: #267c61;
}


/* FINAL CTA */

.di-final-cta {
    margin-top: 50px;

    min-height: 135px;

    padding: 29px 35px;

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

    gap: 30px;

    border-radius: 26px;

    color: white;

    background:
        linear-gradient(
            115deg,
            #153c59,
            #176b8f 55%,
            #2191aa
        );

    box-shadow:
        0 27px 65px rgba(21, 75, 106, .17);
}

.di-final-cta small {
    display: block;

    color: #8ed8ef;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .17em;
}

.di-final-cta strong {
    display: block;

    margin-top: 9px;

    font-size: 22px;
}

.di-final-actions {
    display: flex;

    gap: 10px;
}

.di-cta-primary,
.di-cta-secondary {
    min-height: 45px;

    padding: 0 19px;

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

    border-radius: 23px;

    font-size: 10px;
    font-weight: 900;
}

.di-cta-primary {
    background: white;
    color: #176580;
}

.di-cta-secondary {
    color: white;

    border:
        1px solid rgba(255,255,255,.25);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {

    .di-hero-layout,
    .di-control-grid {
        grid-template-columns: 1fr;
    }

    .di-system-visual {
        margin: 20px auto 70px;
    }

    .di-transition {
        grid-template-columns: 1fr;
    }

    .di-transform-arrow strong {
        transform: rotate(90deg);
    }

    .di-layer {
        grid-template-columns: 50px 1fr;
    }

    .di-layer p,
    .di-layer-tags {
        grid-column: 2;
    }

    .di-layer-tags {
        justify-content: flex-start;
    }

    .di-deployment-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .di-deployment-flow > i {
        display: none;
    }
}


@media (max-width: 650px) {

    .di-hero {
        min-height: auto;
    }

    .di-hero-layout {
        min-height: auto;

        padding: 90px 0;
    }

    .di-hero-copy h1 {
        font-size: 43px;
    }

    .di-transition-section,
    .di-architecture-section,
    .di-control-section,
    .di-deployment-section {
        padding: 90px 0;
    }

    .di-tools {
        grid-template-columns: 1fr;
    }

    .di-layer {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .di-layer p,
    .di-layer-tags {
        grid-column: auto;
    }

    .di-deployment-flow {
        grid-template-columns: 1fr;
    }

    .di-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

    .di-final-actions {
        flex-direction: column;

        width: 100%;
    }
}

/* =========================================
   DIGITAL INFRASTRUCTURE — PRACTICAL VALUE
   ========================================= */

.di-value-section {
    padding: 125px 0 135px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(70, 165, 211, .11),
            transparent 26%
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(215, 171, 79, .10),
            transparent 25%
        ),
        #ffffff;
}

.di-value-heading {
    max-width: 930px;
    margin-bottom: 60px;
}

.di-value-heading h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(39px, 4.2vw, 62px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.di-value-heading h2 span {
    display: block;
    color: #218dcc;
}

.di-value-heading p {
    max-width: 820px;

    margin: 25px 0 0;

    color: #687f90;

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


/* GRID */

.di-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.di-value-card {
    min-height: 285px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(55, 116, 152, .10);

    box-shadow:
        0 16px 42px rgba(34, 78, 104, .06);
}

.di-value-number {
    color: #9aadb9;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .14em;
}

.di-value-card h3 {
    margin: 34px 0 0;

    color: #1f4f6d;

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

.di-value-card p {
    margin: 17px 0 0;

    color: #718694;

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

.di-value-flow {
    margin-top: auto;
    padding-top: 28px;

    color: #648295;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}

.di-value-flow span {
    margin: 0 8px;
    color: #c3984b;
}

.di-value-card-accent {
    background:
        linear-gradient(
            145deg,
            #edf8f4,
            #ffffff
        );

    border-color:
        rgba(53, 154, 117, .14);
}

.di-value-card-accent h3 {
    color: #26755d;
}


/* STATEMENT */

.di-value-statement {
    margin-top: 34px;

    min-height: 120px;

    padding: 28px 34px;

    display: grid;
    grid-template-columns: auto 1fr;

    gap: 35px;

    align-items: center;

    border-radius: 24px;

    color: white;

    background:
        linear-gradient(
            110deg,
            #153d5b,
            #17698e 55%,
            #1f8ea5
        );

    box-shadow:
        0 24px 60px rgba(20, 76, 107, .16);
}

.di-value-statement span {
    color: #8dd8ef;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .16em;
}

.di-value-statement strong {
    font-size: 18px;
    line-height: 1.45;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .di-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {

    .di-value-section {
        padding: 90px 0;
    }

    .di-value-grid {
        grid-template-columns: 1fr;
    }

    .di-value-statement {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   INTERNATIONAL COOPERATION PAGE
   ========================================= */

.ic-container {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.ic-kicker {
    color: #248dca;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .20em;
}

.ic-kicker-light {
    color: #90d9ed;
}


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

.ic-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: 780px;

    background:
        radial-gradient(
            circle at 76% 28%,
            rgba(56, 178, 220, .26),
            transparent 30%
        ),

        radial-gradient(
            circle at 84% 70%,
            rgba(72, 193, 160, .10),
            transparent 24%
        ),

        radial-gradient(
            circle at 20% 84%,
            rgba(220, 175, 82, .15),
            transparent 26%
        ),

        radial-gradient(
            circle at 58% 18%,
            rgba(111, 113, 205, .06),
            transparent 20%
        ),

        linear-gradient(
            132deg,
            #f9fcff 0%,
            #eef8fc 44%,
            #f1fbf8 72%,
            #fffaf1 100%
        );
}


/* technical background grid */

.ic-hero-grid {
    position: absolute;
    inset: 0;

    z-index: 0;

    opacity: .53;

    background-image:
        linear-gradient(
            rgba(55, 130, 176, .052) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55, 130, 176, .052) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.78),
            rgba(0,0,0,.42) 67%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.78),
            rgba(0,0,0,.42) 67%,
            transparent 100%
        );
}


.ic-hero::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: 3%;
    top: 7%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(65, 191, 226, .14),
            rgba(65, 191, 226, .045) 46%,
            transparent 72%
        );

    filter: blur(4px);

    pointer-events: none;
}


.ic-hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: 4%;
    bottom: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(224, 176, 73, .14),
            transparent 68%
        );

    pointer-events: none;
}


.ic-hero-layout {
    position: relative;
    z-index: 2;

    min-height: 780px;

    display: grid;
    grid-template-columns: 1.02fr .98fr;

    gap: 64px;

    align-items: center;
}


.ic-hero-copy {
    position: relative;

    z-index: 3;
}


.ic-hero-copy .ic-kicker {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    color: #1988c0;
}


.ic-hero-copy .ic-kicker::before {
    content: "";

    width: 24px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d5a548,
            #25a9d6
        );
}


.ic-hero-copy h1 {
    max-width: 830px;

    margin: 18px 0 0;

    color: #173752;

    font-size: clamp(52px, 5.2vw, 80px);
    line-height: .99;

    letter-spacing: -.045em;
}


.ic-hero-copy h1 span {
    display: block;

    margin-top: 9px;

    color: #168fc9;

    text-shadow:
        0 1px 0 rgba(255,255,255,.7),
        0 10px 27px rgba(22, 143, 201, .075);
}


.ic-hero-lead {
    max-width: 740px;

    margin: 30px 0 0;

    color: #5f788a;

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


.ic-hero-actions {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}


/* =========================================
   NETWORK VISUAL
   ========================================= */

.ic-network-visual {
    position: relative;

    width: min(625px, 100%);
    aspect-ratio: 1 / 1;

    margin-left: auto;

    filter:
        drop-shadow(
            0 18px 38px
            rgba(35, 103, 137, .07)
        );
}


.ic-network-visual::before {
    content: "";

    position: absolute;

    inset: 16%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(72, 194, 226, .14),
            rgba(72, 194, 226, .045) 48%,
            transparent 72%
        );

    filter: blur(11px);

    animation:
        icNetworkGlow 7s ease-in-out infinite;
}


.ic-network-world {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 84%;
    height: 84%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            rgba(61, 170, 210, .13),
            transparent 62%
        );

    border:
        1px solid rgba(53, 148, 194, .18);

    box-shadow:
        inset 0 0 95px rgba(72, 170, 207, .075);

    pointer-events: none;
}


.ic-network-world::before,
.ic-network-world::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;
}


.ic-network-world::before {
    width: 73%;
    height: 73%;

    border:
        1px solid rgba(205, 160, 69, .23);
}


.ic-network-world::after {
    width: 48%;
    height: 48%;

    border:
        1px solid rgba(61, 171, 145, .22);
}


/* =========================================
   NETWORK CENTER
   ========================================= */

.ic-network-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 198px;
    height: 198px;

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

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle at 34% 23%,
            #9ce7fb 0%,
            #54c1df 17%,
            #2b93bb 46%,
            #174a68 100%
        );

    border:
        1px solid rgba(255,255,255,.20);

    box-shadow:
        0 34px 82px rgba(22, 84, 119, .29),
        0 0 0 8px rgba(84, 191, 220, .05),
        inset 0 0 36px rgba(255,255,255,.20);

    z-index: 3;

    animation:
        icNetworkFloat 6s ease-in-out infinite;
}


.ic-network-center::before {
    content: "";

    position: absolute;

    inset: 9px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.07);

    pointer-events: none;
}


.ic-network-center small {
    color: #e0f6fb;

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

    letter-spacing: .16em;
}


.ic-network-center strong {
    margin-top: 8px;

    font-size: 29px;

    letter-spacing: .02em;
}


.ic-network-center span {
    margin-top: 7px;

    color: #d4edf4;

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

    letter-spacing: .12em;
}


/* =========================================
   COUNTRY NODES
   ========================================= */

.ic-country-node {
    position: absolute;

    min-width: 155px;

    padding: 15px 17px;

    overflow: hidden;

    border-radius: 17px;

    background:
        rgba(255,255,255,.92);

    border:
        1px solid rgba(55, 118, 153, .11);

    box-shadow:
        0 16px 40px rgba(34, 80, 106, .105);

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

    z-index: 4;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.ic-country-node::before {
    content: "";

    position: absolute;

    top: 0;
    left: 17px;

    width: 34px;
    height: 2px;

    border-radius: 0 0 4px 4px;

    background: #2fa9d9;
}


.ic-country-node:hover {
    transform: translateY(-4px);

    box-shadow:
        0 23px 52px rgba(34, 80, 106, .15);
}


.ic-country-node > span {
    font-size: 8px;
    font-weight: 900;

    letter-spacing: .08em;
}


.ic-country-node strong {
    display: block;

    margin-top: 6px;

    color: #205d7d;

    font-size: 10px;
}


.ic-country-node small {
    display: block;

    margin-top: 5px;

    color: #748995;

    font-size: 9px;
}


/* EUROPE — BLUE */

.ic-country-1 {
    left: 3%;
    top: 15%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(238,247,255,.92)
        );
}


.ic-country-1::before {
    background: #3a91d1;
}


.ic-country-1 > span {
    color: #3a7fb5;
}


/* CENTRAL ASIA — GOLD */

.ic-country-2 {
    right: 0;
    top: 31%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(255,248,231,.94)
        );
}


.ic-country-2::before {
    background: #d5a340;
}


.ic-country-2 > span {
    color: #b48431;
}


/* ASIA — GREEN / TURQUOISE */

.ic-country-3 {
    right: 12%;
    bottom: 10%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(237,250,245,.93)
        );
}


.ic-country-3::before {
    background: #42b58d;
}


.ic-country-3 > span {
    color: #368d71;
}


/* NEW COUNTRIES — VIOLET BLUE */

.ic-country-4 {
    left: 8%;
    bottom: 13%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(244,243,255,.94)
        );
}


.ic-country-4::before {
    background: #7778cf;
}


.ic-country-4 > span {
    color: #6869b2;
}


/* =========================================
   NETWORK ROUTES
   ========================================= */

.ic-network-line {
    position: absolute;

    height: 1px;

    overflow: visible;

    background:
        linear-gradient(
            90deg,
            rgba(47, 151, 198, .04),
            rgba(47, 151, 198, .42),
            rgba(47, 151, 198, .05)
        );

    box-shadow:
        0 0 12px rgba(47, 151, 198, .07);

    z-index: 1;

    transform-origin: center;
}


.ic-network-line::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 6px;
    height: 6px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #4bc1e3;

    box-shadow:
        0 0 0 4px rgba(75, 193, 227, .08),
        0 0 16px rgba(75, 193, 227, .32);

    animation:
        icRouteSignal 4.5s ease-in-out infinite;
}


.ic-line-1 {
    width: 260px;

    left: 19%;
    top: 34%;

    transform: rotate(26deg);
}


.ic-line-1::after {
    background: #448fd0;
}


.ic-line-2 {
    width: 255px;

    right: 14%;
    top: 42%;

    transform: rotate(-18deg);
}


.ic-line-2::after {
    background: #d6a545;

    box-shadow:
        0 0 0 4px rgba(214, 165, 69, .08),
        0 0 16px rgba(214, 165, 69, .30);

    animation-delay: .7s;
}


.ic-line-3 {
    width: 245px;

    right: 17%;
    bottom: 30%;

    transform: rotate(27deg);
}


.ic-line-3::after {
    background: #45b68f;

    box-shadow:
        0 0 0 4px rgba(69, 182, 143, .08),
        0 0 16px rgba(69, 182, 143, .28);

    animation-delay: 1.2s;
}


.ic-line-4 {
    width: 245px;

    left: 17%;
    bottom: 30%;

    transform: rotate(-25deg);
}


.ic-line-4::after {
    background: #797acf;

    box-shadow:
        0 0 0 4px rgba(121, 122, 207, .08),
        0 0 16px rgba(121, 122, 207, .28);

    animation-delay: 1.7s;
}


.ic-line-5 {
    width: 280px;

    left: 28%;
    top: 51%;

    background:
        linear-gradient(
            90deg,
            rgba(58, 151, 199, .03),
            rgba(63, 183, 172, .31),
            rgba(215, 166, 66, .28),
            rgba(58, 151, 199, .03)
        );
}


.ic-line-5::after {
    background: #54bec9;

    animation-delay: 2.1s;
}


/* =========================================
   HERO MOTION
   ========================================= */

@keyframes icNetworkFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-6px);
    }
}


@keyframes icNetworkGlow {

    0%,
    100% {
        opacity: .70;
        transform: scale(.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}


@keyframes icRouteSignal {

    0% {
        left: 2%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        left: 96%;
        opacity: 0;
    }
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1100px) {

    .ic-hero {
        min-height: auto;
    }


    .ic-hero-layout {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 36px;

        padding:
            72px 0
            98px;
    }


    .ic-hero-copy {
        max-width: 840px;
    }


    .ic-network-visual {
        width: min(620px, 92%);

        margin: 15px auto 0;
    }
}


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

@media (max-width: 650px) {

    .ic-hero::before {
        width: 360px;
        height: 360px;

        right: -110px;
        top: 48%;
    }


    .ic-hero::after {
        width: 250px;
        height: 250px;

        left: -100px;
        bottom: -85px;
    }


    .ic-hero-layout {
        gap: 30px;

        padding:
            54px 0
            82px;
    }


    .ic-hero-copy h1 {
        font-size:
            clamp(
                40px,
                11vw,
                53px
            );

        line-height: .99;
    }


    .ic-hero-lead {
        margin-top: 25px;

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


    .ic-hero-actions {
        margin-top: 30px;

        gap: 10px;
    }


    .ic-network-visual {
        width: 108%;

        margin-left: -4%;
    }


    .ic-network-center {
        width: 160px;
        height: 160px;
    }


    .ic-network-center strong {
        font-size: 23px;
    }


    .ic-network-center span {
        max-width: 125px;

        line-height: 1.3;
    }


    .ic-country-node {
        min-width: 115px;

        padding: 12px 13px;

        border-radius: 14px;
    }


    .ic-country-node strong {
        font-size: 9px;
    }


    .ic-country-node small {
        font-size: 8px;
    }


    .ic-country-1 {
        left: 0;
        top: 12%;
    }


    .ic-country-2 {
        right: -2%;
        top: 31%;
    }


    .ic-country-3 {
        right: 4%;
        bottom: 7%;
    }


    .ic-country-4 {
        left: 3%;
        bottom: 9%;
    }


    .ic-network-line {
        opacity: .78;
    }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .ic-network-center,
    .ic-network-visual::before,
    .ic-network-line::after {
        animation: none;
    }


    .ic-country-node {
        transition: none;
    }
}


/* =========================================
   COMMON HEADING
   ========================================= */

.ic-heading {
    max-width: 950px;

    margin-bottom: 60px;
}

.ic-heading h2,
.ic-process-heading h2,
.ic-representatives-copy h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(40px, 4.2vw, 63px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.ic-heading h2 span,
.ic-process-heading h2 span,
.ic-representatives-copy h2 span {
    display: block;

    color: #218dcc;
}

.ic-heading p {
    max-width: 820px;

    margin: 25px 0 0;

    color: #687f90;

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


/* =========================================
   PRINCIPLE
   ========================================= */

.ic-principle-section {
    padding: 125px 0 135px;

    background: #ffffff;
}

.ic-principle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 17px;
}

.ic-principle-card {
    min-height: 280px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(54, 114, 149, .10);

    box-shadow:
        0 16px 40px rgba(34, 78, 104, .05);
}

.ic-card-number {
    color: #9badb8;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .14em;
}

.ic-principle-card h3 {
    margin: 36px 0 0;

    color: #22526f;

    font-size: 24px;
}

.ic-principle-card p {
    margin: 16px 0 0;

    color: #718694;

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

.ic-card-code {
    margin-top: auto;
    padding-top: 28px;

    color: #2789b8;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .12em;
}

.ic-principle-accent {
    background:
        linear-gradient(
            145deg,
            #edf9f5,
            #ffffff
        );
}

.ic-principle-accent h3 {
    color: #25765d;
}


/* =========================================
   CONNECTION
   ========================================= */

.ic-connection-section {
    padding: 125px 0;

    color: white;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(90, 205, 232, .17),
            transparent 25%
        ),
        linear-gradient(
            125deg,
            #112f48,
            #175d7c 55%,
            #187f92
        );
}

.ic-connection-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;

    gap: 75px;

    align-items: center;
}

.ic-connection-copy h2 {
    margin: 17px 0 0;

    font-size: clamp(40px, 4.1vw, 61px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.ic-connection-copy h2 span {
    display: block;

    color: #8edcef;
}

.ic-connection-copy p {
    max-width: 650px;

    margin: 24px 0 0;

    color: #c4dbe5;

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

.ic-connection-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;

    gap: 13px;

    align-items: center;
}

.ic-flow-block,
.ic-flow-center {
    min-height: 175px;

    padding: 22px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    text-align: center;

    border-radius: 21px;
}

.ic-flow-block {
    background:
        rgba(255,255,255,.09);

    border:
        1px solid rgba(255,255,255,.11);
}

.ic-flow-center {
    background:
        rgba(77, 193, 219, .18);

    border:
        1px solid rgba(123, 220, 239, .18);
}

.ic-flow-block small,
.ic-flow-center small {
    color: #91d7eb;

    font-size: 8px;

    letter-spacing: .14em;
}

.ic-flow-block strong,
.ic-flow-center strong {
    margin-top: 10px;

    font-size: 13px;
}

.ic-flow-block span,
.ic-flow-center span {
    margin-top: 9px;

    color: #bed5df;

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

.ic-flow-result {
    background:
        rgba(65, 177, 137, .16);
}

.ic-flow-arrow {
    color: #e0b95e;

    font-size: 22px;
}


/* =========================================
   AREAS
   ========================================= */

.ic-areas-section {
    padding: 125px 0 135px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(71, 167, 212, .10),
            transparent 25%
        ),
        #ffffff;
}

.ic-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.ic-area-card {
    min-height: 250px;

    padding: 27px;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(55, 115, 151, .10);

    box-shadow:
        0 15px 38px rgba(34, 78, 104, .05);
}

.ic-area-icon {
    width: 46px;
    height: 46px;

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

    border-radius: 14px;

    background: #edf7fb;

    color: #258ab8;

    font-size: 10px;
    font-weight: 900;
}

.ic-area-card h3 {
    margin: 28px 0 0;

    color: #21516f;

    font-size: 23px;
}

.ic-area-card p {
    margin: 15px 0 0;

    color: #728794;

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

.ic-area-card-accent {
    background:
        linear-gradient(
            145deg,
            #eef9f5,
            #ffffff
        );
}

.ic-area-card-accent h3 {
    color: #26765e;
}


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

.ic-process-section {
    padding: 125px 0;

    background:
        linear-gradient(
            180deg,
            #f1f8fb,
            #f8fcfe
        );
}

.ic-process-heading {
    max-width: 930px;

    margin-bottom: 55px;
}

.ic-process-flow {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 11px;

    align-items: stretch;
}

.ic-process-step {
    min-height: 145px;

    padding: 22px;

    border-radius: 20px;

    background: white;

    border:
        1px solid rgba(55, 115, 150, .10);
}

.ic-process-step span {
    color: #a3b4bf;

    font-size: 9px;
    font-weight: 900;
}

.ic-process-step strong {
    display: block;

    margin-top: 28px;

    color: #285c79;

    font-size: 11px;
}

.ic-process-step small {
    display: block;

    margin-top: 8px;

    color: #7d909c;

    font-size: 9px;
}

.ic-process-flow > i {
    display: flex;
    align-items: center;

    color: #c39a4e;

    font-style: normal;
}

.ic-process-result {
    background:
        linear-gradient(
            145deg,
            #edf9f4,
            #ffffff
        );
}

.ic-process-result strong {
    color: #24795f;
}


/* =========================================
   REPRESENTATIVES
   ========================================= */

.ic-representatives-section {
    padding: 125px 0;

    background: white;
}

.ic-representatives-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 75px;

    align-items: center;
}

.ic-representatives-copy p {
    max-width: 650px;

    margin: 25px 0 0;

    color: #687f90;

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

.ic-representatives-button {
    margin-top: 32px;

    min-height: 46px;

    padding: 0 21px;

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

    border-radius: 23px;

    background: #1b6488;

    color: white;

    font-size: 10px;
    font-weight: 900;
}

.ic-representative-demo {
    display: flex;
    flex-direction: column;

    gap: 13px;
}

.ic-rep-card {
    min-height: 105px;

    padding: 17px;

    display: grid;
    grid-template-columns: auto 1fr;

    gap: 17px;

    align-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(54, 114, 150, .10);

    box-shadow:
        0 14px 35px rgba(34, 78, 104, .05);
}

.ic-rep-photo {
    width: 68px;
    height: 68px;

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

    border-radius: 18px;

    background: #dceef6;

    color: #6f91a4;

    font-size: 8px;
    font-weight: 900;
}

.ic-rep-card span {
    color: #218bc0;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .13em;
}

.ic-rep-card strong {
    display: block;

    margin-top: 6px;

    color: #23536f;

    font-size: 14px;
}

.ic-rep-card small {
    display: block;

    margin-top: 5px;

    color: #7a8d99;

    font-size: 9px;
}

.ic-rep-card-two {
    margin-left: 45px;
}

.ic-rep-card-three {
    margin-left: 90px;
}


/* =========================================
   FINAL CTA
   ========================================= */

.ic-final-section {
    padding: 30px 0 130px;

    background: white;
}

.ic-final-card {
    min-height: 185px;

    padding: 35px 38px;

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

    gap: 40px;

    border-radius: 28px;

    color: white;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(94, 207, 231, .18),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            #143b58,
            #176a8d 55%,
            #2090a9
        );

    box-shadow:
        0 28px 70px rgba(20, 75, 106, .18);
}

.ic-final-card small {
    display: block;

    color: #8dd8ef;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .17em;
}

.ic-final-card strong {
    display: block;

    max-width: 720px;

    margin-top: 10px;

    font-size: 24px;
    line-height: 1.3;
}

.ic-final-card p {
    margin: 10px 0 0;

    color: #c6dce6;

    font-size: 13px;
}

.ic-final-actions {
    display: flex;

    gap: 10px;
}

.ic-final-primary,
.ic-final-secondary {
    min-height: 46px;

    padding: 0 19px;

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

    white-space: nowrap;

    border-radius: 23px;

    font-size: 10px;
    font-weight: 900;
}

.ic-final-primary {
    background: white;

    color: #17627f;
}

.ic-final-secondary {
    color: white;

    border:
        1px solid rgba(255,255,255,.25);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {

    .ic-hero-layout,
    .ic-connection-layout,
    .ic-representatives-layout {
        grid-template-columns: 1fr;
    }

    .ic-network-visual {
        margin: 30px auto 70px;
    }

    .ic-principle-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ic-areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ic-connection-flow {
        grid-template-columns: 1fr;
    }

    .ic-flow-arrow {
        transform: rotate(90deg);

        text-align: center;
    }

    .ic-process-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .ic-process-flow > i {
        display: none;
    }

    .ic-rep-card-two,
    .ic-rep-card-three {
        margin-left: 0;
    }
}


@media (max-width: 650px) {

    .ic-hero {
        min-height: auto;
    }

    .ic-hero-layout {
        min-height: auto;

        padding: 90px 0;
    }

    .ic-hero-copy h1 {
        font-size: 43px;
    }

    .ic-principle-section,
    .ic-connection-section,
    .ic-areas-section,
    .ic-process-section,
    .ic-representatives-section {
        padding: 90px 0;
    }

    .ic-principle-grid,
    .ic-areas-grid,
    .ic-process-flow {
        grid-template-columns: 1fr;
    }

    .ic-final-card {
        flex-direction: column;

        align-items: flex-start;
    }

    .ic-final-actions {
        width: 100%;

        flex-direction: column;
    }
}

/* =========================================
   FUTURE PROJECTS PAGE
   ========================================= */

.fp-container {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.fp-kicker {
    color: #248dca;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .20em;
}

.fp-kicker-light {
    color: #91d9ed;
}


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

.fp-hero {
    position: relative;
    overflow: hidden;

    min-height: 760px;

    background:
        radial-gradient(
            circle at 76% 35%,
            rgba(44, 186, 224, .24),
            transparent 29%
        ),
        radial-gradient(
            circle at 91% 73%,
            rgba(65, 194, 153, .13),
            transparent 24%
        ),
        radial-gradient(
            circle at 17% 84%,
            rgba(231, 181, 72, .15),
            transparent 25%
        ),
        radial-gradient(
            circle at 61% 11%,
            rgba(118, 113, 218, .07),
            transparent 21%
        ),
        linear-gradient(
            135deg,
            #f8fcff 0%,
            #edf9fd 52%,
            #f8fcfa 77%,
            #fffdf8 100%
        );
}


/* GRID */

.fp-grid {
    position: absolute;
    inset: 0;

    opacity: .48;

    background-image:
        linear-gradient(
            rgba(49, 137, 181, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(49, 137, 181, .055) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72),
            rgba(0,0,0,.35) 55%,
            rgba(0,0,0,.72)
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72),
            rgba(0,0,0,.35) 55%,
            rgba(0,0,0,.72)
        );
}


/* HERO LAYOUT */

.fp-hero-layout {
    position: relative;
    z-index: 2;

    min-height: 760px;

    display: grid;
    grid-template-columns: 1.02fr .98fr;

    gap: 60px;

    align-items: center;
}


/* COPY */

.fp-hero-copy {
    position: relative;
    z-index: 5;
}

.fp-hero-copy .fp-kicker {
    position: relative;

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

    color: #178cc5;
}

.fp-hero-copy .fp-kicker::before {
    content: "";

    width: 25px;
    height: 1px;

    margin-right: 12px;

    background:
        linear-gradient(
            90deg,
            #e1aa42,
            #27a6ce
        );
}

.fp-hero-copy h1 {
    max-width: 850px;

    margin: 18px 0 0;

    color: #173752;

    font-size: clamp(52px, 5.15vw, 79px);
    line-height: .99;

    letter-spacing: -.045em;
}

.fp-hero-copy h1 span {
    display: block;

    margin-top: 9px;

    color: #218fcd;

    text-shadow:
        0 10px 35px rgba(33, 143, 205, .08);
}

.fp-hero-lead {
    max-width: 730px;

    margin: 30px 0 0;

    color: #60798a;

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

.fp-hero-actions {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}


/* =========================================
   FUTURE VISUAL
   ========================================= */

.fp-visual {
    position: relative;

    width: min(610px, 100%);
    height: 570px;

    margin-left: auto;

    isolation: isolate;
}


/* LARGE BACKGROUND FIELD */

.fp-visual::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 520px;
    height: 520px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(69, 188, 224, .18) 0%,
            rgba(69, 188, 224, .08) 34%,
            rgba(67, 190, 163, .035) 57%,
            transparent 72%
        );

    filter: blur(2px);

    z-index: 0;
}


/* ORBITAL RINGS */

.fp-visual::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 455px;
    height: 455px;

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

    border-radius: 50%;

    border:
        1px solid rgba(48, 156, 201, .17);

    box-shadow:
        0 0 0 72px rgba(48, 156, 201, .035),
        0 0 0 73px rgba(48, 156, 201, .10),
        0 0 0 142px rgba(226, 177, 75, .018),
        0 0 0 143px rgba(226, 177, 75, .10);

    z-index: 0;
}


/* CORE */

.fp-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 215px;
    height: 215px;

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

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle at 35% 23%,
            #82e1fb 0%,
            #37abd0 29%,
            #2689b3 55%,
            #174866 100%
        );

    border:
        1px solid rgba(255,255,255,.18);

    box-shadow:
        0 34px 75px rgba(22, 91, 127, .28),
        0 0 0 13px rgba(44, 165, 207, .055),
        0 0 55px rgba(61, 192, 226, .20),
        inset 0 0 38px rgba(255,255,255,.18);

    z-index: 5;

    animation:
        fpCoreBreath 5.2s ease-in-out infinite;
}

.fp-core small {
    color: #d9f4fb;

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

    letter-spacing: .17em;
}

.fp-core strong {
    margin-top: 9px;

    font-size: 30px;

    letter-spacing: -.02em;
}

.fp-core span {
    margin-top: 7px;

    color: #f1cc73;

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

    letter-spacing: .17em;
}


/* =========================================
   FUTURE NODES
   ========================================= */

.fp-node {
    position: absolute;

    min-width: 165px;

    padding: 15px 17px 16px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.93);

    border:
        1px solid rgba(55, 117, 153, .11);

    box-shadow:
        0 16px 40px rgba(35, 79, 105, .10),
        inset 0 1px 0 rgba(255,255,255,.80);

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

    z-index: 6;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.fp-node::before {
    content: "";

    position: absolute;

    left: 18px;
    top: -1px;

    width: 36px;
    height: 2px;

    border-radius: 2px;

    background: #29a9d2;
}

.fp-node:hover {
    transform: translateY(-5px);

    border-color:
        rgba(47, 151, 196, .23);

    box-shadow:
        0 23px 48px rgba(35, 79, 105, .15);
}

.fp-node > span {
    color: #8fa6b5;

    font-size: 8px;
    font-weight: 900;
}

.fp-node strong {
    display: block;

    margin-top: 6px;

    color: #235c7b;

    font-size: 10px;
}

.fp-node small {
    display: block;

    margin-top: 5px;

    color: #7a8d99;

    font-size: 9px;
}


/* EACH BRANCH HAS ITS OWN CHARACTER */

.fp-node-one {
    left: 1%;
    top: 8%;
}

.fp-node-one::before {
    background: #28a8d1;
}

.fp-node-two {
    right: 0;
    top: 19%;
}

.fp-node-two::before {
    background: #48b98e;
}

.fp-node-three {
    right: 3%;
    bottom: 8%;
}

.fp-node-three::before {
    background: #dfa843;
}

.fp-node-four {
    left: 5%;
    bottom: 12%;
}

.fp-node-four::before {
    background: #7971d2;
}


/* =========================================
   GROWTH PATHS
   ========================================= */

.fp-path {
    position: absolute;

    height: 1px;

    overflow: visible;

    transform-origin: center;

    background:
        linear-gradient(
            90deg,
            rgba(43, 150, 196, .04),
            rgba(43, 150, 196, .38) 35%,
            rgba(43, 150, 196, .38) 65%,
            rgba(43, 150, 196, .04)
        );

    z-index: 2;
}


/*
   The pseudo element is the moving signal.
   It travels from the THALAMUS core towards
   a possible future direction.
*/

.fp-path::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    background: #65d8f3;

    box-shadow:
        0 0 7px rgba(101,216,243,.95),
        0 0 17px rgba(101,216,243,.70),
        0 0 30px rgba(101,216,243,.32);

    animation:
        fpSignal 3.6s linear infinite;
}


/* BRANCH 01 */

.fp-path-one {
    width: 255px;

    left: 18%;
    top: 34%;

    transform: rotate(31deg);
}

.fp-path-one::after {
    background: #58d3f2;

    animation-delay: -.4s;
}


/* BRANCH 02 */

.fp-path-two {
    width: 250px;

    right: 16%;
    top: 37%;

    transform: rotate(-23deg);

    background:
        linear-gradient(
            90deg,
            rgba(62, 181, 139, .04),
            rgba(62, 181, 139, .40),
            rgba(62, 181, 139, .04)
        );
}

.fp-path-two::after {
    background: #57d7a5;

    box-shadow:
        0 0 7px rgba(87,215,165,.95),
        0 0 18px rgba(87,215,165,.60);

    animation-delay: -1.3s;
}


/* BRANCH 03 */

.fp-path-three {
    width: 255px;

    right: 16%;
    bottom: 33%;

    transform: rotate(25deg);

    background:
        linear-gradient(
            90deg,
            rgba(222, 170, 68, .04),
            rgba(222, 170, 68, .42),
            rgba(222, 170, 68, .04)
        );
}

.fp-path-three::after {
    background: #efc35f;

    box-shadow:
        0 0 7px rgba(239,195,95,.95),
        0 0 18px rgba(239,195,95,.65);

    animation-delay: -2.1s;
}


/* BRANCH 04 */

.fp-path-four {
    width: 255px;

    left: 17%;
    bottom: 32%;

    transform: rotate(-27deg);

    background:
        linear-gradient(
            90deg,
            rgba(117, 108, 207, .04),
            rgba(117, 108, 207, .38),
            rgba(117, 108, 207, .04)
        );
}

.fp-path-four::after {
    background: #9289e8;

    box-shadow:
        0 0 7px rgba(146,137,232,.95),
        0 0 18px rgba(146,137,232,.58);

    animation-delay: -2.8s;
}


/* =========================================
   ANIMATION
   ========================================= */

@keyframes fpSignal {

    0% {
        left: 48%;
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.55);
    }

    10% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.15);
    }
}


@keyframes fpCoreBreath {

    0%,
    100% {
        box-shadow:
            0 34px 75px rgba(22, 91, 127, .28),
            0 0 0 13px rgba(44, 165, 207, .055),
            0 0 48px rgba(61, 192, 226, .16),
            inset 0 0 38px rgba(255,255,255,.18);
    }

    50% {
        box-shadow:
            0 34px 75px rgba(22, 91, 127, .30),
            0 0 0 17px rgba(44, 165, 207, .075),
            0 0 72px rgba(61, 192, 226, .28),
            inset 0 0 42px rgba(255,255,255,.21);
    }
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .fp-core,
    .fp-path::after {
        animation: none;
    }
}


/* =========================================
   COMMON HEADING
   ========================================= */

.fp-heading {
    position: relative;

    max-width: 950px;

    margin-bottom: 62px;
}

.fp-heading::before {
    content: "";

    position: absolute;

    left: 0;
    top: -24px;

    width: 42px;
    height: 2px;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            #2ba8d4,
            #58c6a3,
            #d9aa49
        );
}

.fp-heading h2,
.fp-project-copy h2,
.fp-open-layout h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(40px, 4.2vw, 63px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.fp-heading h2 span,
.fp-project-copy h2 span,
.fp-open-layout h2 span {
    display: block;

    margin-top: 6px;

    color: #218dcc;
}

.fp-heading p,
.fp-open-layout p {
    max-width: 820px;

    margin: 25px 0 0;

    color: #667f90;

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


/* =========================================
   PRINCIPLE
   ========================================= */

.fp-principle-section {
    position: relative;

    padding: 125px 0 138px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(59, 171, 219, .10),
            transparent 27%
        ),

        radial-gradient(
            circle at 92% 78%,
            rgba(224, 173, 72, .11),
            transparent 26%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfe 50%,
            #f8fcfd 100%
        );
}

.fp-principle-section::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: min(1480px, 88%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(50, 132, 180, .20),
            transparent
        );
}


/* DEVELOPMENT FLOW */

.fp-development-flow {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 12px;

    align-items: stretch;
}


/* FLOW CARD */

.fp-development-step {
    position: relative;

    min-height: 170px;

    padding: 24px 22px 22px;

    overflow: hidden;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(244,250,253,.94)
        );

    border:
        1px solid rgba(55, 115, 150, .11);

    box-shadow:
        0 16px 38px rgba(34, 78, 104, .055);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.fp-development-step::before {
    content: "";

    position: absolute;

    left: 20px;
    top: 0;

    width: 36px;
    height: 2px;

    border-radius: 0 0 4px 4px;

    background: #2da9d3;
}

.fp-development-step::after {
    content: "";

    position: absolute;

    right: -55px;
    bottom: -60px;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47, 169, 211, .09),
            transparent 70%
        );

    pointer-events: none;
}

.fp-development-step:hover {
    transform: translateY(-5px);

    border-color:
        rgba(45, 151, 196, .23);

    box-shadow:
        0 24px 52px rgba(34, 78, 104, .10);
}

.fp-development-step span {
    color: #98adba;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}

.fp-development-step strong {
    display: block;

    margin-top: 31px;

    color: #285b78;

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

.fp-development-step small {
    display: block;

    margin-top: 8px;

    color: #778d9b;

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


/* STEP COLOR STORY */

.fp-development-step:nth-of-type(1)::before {
    background: #2da9d3;
}

.fp-development-step:nth-of-type(2)::before {
    background: #3ab7c1;
}

.fp-development-step:nth-of-type(3)::before {
    background: #4db998;
}

.fp-development-step:nth-of-type(4)::before {
    background: #9eb35d;
}

.fp-development-step:nth-of-type(1)::after {
    background:
        radial-gradient(
            circle,
            rgba(45, 169, 211, .10),
            transparent 70%
        );
}

.fp-development-step:nth-of-type(2)::after {
    background:
        radial-gradient(
            circle,
            rgba(58, 183, 193, .10),
            transparent 70%
        );
}

.fp-development-step:nth-of-type(3)::after {
    background:
        radial-gradient(
            circle,
            rgba(77, 185, 152, .10),
            transparent 70%
        );
}

.fp-development-step:nth-of-type(4)::after {
    background:
        radial-gradient(
            circle,
            rgba(167, 181, 83, .10),
            transparent 70%
        );
}


/* ARROWS BETWEEN STEPS */

.fp-development-flow > i {
    position: relative;

    min-width: 24px;

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

    color: #c49a4d;

    font-style: normal;

    font-size: 18px;

    opacity: .90;
}

.fp-development-flow > i::before {
    content: "";

    position: absolute;

    width: 18px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(44, 164, 202, .18),
            rgba(210, 162, 70, .65)
        );
}

.fp-development-flow > i::after {
    content: "";

    position: relative;

    width: 5px;
    height: 5px;

    margin-left: 11px;

    border-top: 1px solid #c99c45;
    border-right: 1px solid #c99c45;

    transform: rotate(45deg);
}


/* FINAL RESULT */

.fp-development-result {
    background:
        linear-gradient(
            145deg,
            #eefaf5 0%,
            #f8fdfb 48%,
            #fffaf0 100%
        );

    border-color:
        rgba(61, 158, 122, .17);

    box-shadow:
        0 18px 42px rgba(54, 129, 99, .07);
}

.fp-development-result::before {
    background:
        linear-gradient(
            90deg,
            #4ab78f,
            #d7aa4c
        );
}

.fp-development-result::after {
    background:
        radial-gradient(
            circle,
            rgba(75, 184, 143, .14),
            rgba(221, 171, 75, .06) 48%,
            transparent 72%
        );
}

.fp-development-result span {
    color: #79a393;
}

.fp-development-result strong {
    color: #26795f;

    font-size: 12px;
}


/* =========================================
   PRINCIPLE MOTION
   ========================================= */

.fp-development-step {
    opacity: 0;
    transform: translateY(18px);

    animation:
        fpDevelopmentReveal .65s ease forwards;
}

.fp-development-step:nth-of-type(1) {
    animation-delay: .05s;
}

.fp-development-step:nth-of-type(2) {
    animation-delay: .15s;
}

.fp-development-step:nth-of-type(3) {
    animation-delay: .25s;
}

.fp-development-step:nth-of-type(4) {
    animation-delay: .35s;
}

.fp-development-result {
    animation-delay: .45s;
}


@keyframes fpDevelopmentReveal {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   RESPONSIVE — PRINCIPLE
   ========================================= */

@media (max-width: 1100px) {

    .fp-development-flow {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 16px;
    }

    .fp-development-flow > i {
        display: none;
    }

    .fp-development-step {
        min-height: 150px;
    }
}


@media (max-width: 650px) {

    .fp-principle-section {
        padding:
            90px 0
            96px;
    }

    .fp-heading {
        margin-bottom: 44px;
    }

    .fp-heading h2 {
        font-size: 39px;
    }

    .fp-heading p {
        font-size: 16px;
    }

    .fp-development-flow {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .fp-development-step {
        min-height: 142px;

        padding:
            22px 20px;
    }

    .fp-development-step strong {
        margin-top: 25px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .fp-development-step {
        opacity: 1;
        transform: none;

        animation: none;

        transition: none;
    }
}

/* =========================================
   DIRECTIONS
   ========================================= */

.fp-directions-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0 135px;

    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(49, 170, 218, .16),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 86%,
            rgba(219, 174, 75, .11),
            transparent 25%
        ),
        radial-gradient(
            circle at 53% 48%,
            rgba(69, 188, 151, .055),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #f1f8fc 0%,
            #f8fcfe 48%,
            #f4fafc 100%
        );
}


/* subtle technological grid */

.fp-directions-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .32;

    background-image:
        linear-gradient(
            rgba(52, 133, 178, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(52, 133, 178, .045) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}


/* soft light field */

.fp-directions-section::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -170px;
    top: 90px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(66, 180, 216, .11),
            rgba(66, 180, 216, .035) 43%,
            transparent 70%
        );
}


/* GRID */

.fp-directions-grid {
    position: relative;
    z-index: 2;

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

    gap: 22px;
}


/* CARD */

.fp-direction-card {
    position: relative;
    overflow: hidden;

    min-height: 310px;

    padding: 30px;

    display: flex;
    flex-direction: column;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(245,250,253,.94)
        );

    border:
        1px solid rgba(48, 119, 158, .13);

    box-shadow:
        0 18px 44px rgba(31, 78, 106, .065);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease;
}


/* coloured upper line */

.fp-direction-card::before {
    content: "";

    position: absolute;

    left: 28px;
    top: 0;

    width: 38px;
    height: 3px;

    border-radius: 0 0 4px 4px;

    background: #27a4d8;

    box-shadow:
        0 0 16px rgba(39, 164, 216, .30);
}


/* light inside card */

.fp-direction-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -75px;
    bottom: -80px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(43, 164, 214, .09),
            transparent 68%
        );
}


/* individual colour accents */

.fp-direction-card:nth-child(2)::before {
    background: #42b89a;

    box-shadow:
        0 0 16px rgba(66, 184, 154, .27);
}

.fp-direction-card:nth-child(2)::after {
    background:
        radial-gradient(
            circle,
            rgba(66, 184, 154, .10),
            transparent 68%
        );
}

.fp-direction-card:nth-child(3)::before {
    background: #d6a548;

    box-shadow:
        0 0 16px rgba(214, 165, 72, .28);
}

.fp-direction-card:nth-child(3)::after {
    background:
        radial-gradient(
            circle,
            rgba(214, 165, 72, .11),
            transparent 68%
        );
}

.fp-direction-card:nth-child(4)::before {
    background: #6d70d8;

    box-shadow:
        0 0 16px rgba(109, 112, 216, .25);
}

.fp-direction-card:nth-child(4)::after {
    background:
        radial-gradient(
            circle,
            rgba(109, 112, 216, .09),
            transparent 68%
        );
}

.fp-direction-card:nth-child(5)::before {
    background: #3198c4;

    box-shadow:
        0 0 16px rgba(49, 152, 196, .27);
}

.fp-direction-card:nth-child(5)::after {
    background:
        radial-gradient(
            circle,
            rgba(49, 152, 196, .09),
            transparent 68%
        );
}


/* sixth card — development / ecosystem */

.fp-direction-card:nth-child(6)::before {
    background: #3caf83;

    box-shadow:
        0 0 17px rgba(60, 175, 131, .30);
}

.fp-direction-card:nth-child(6)::after {
    background:
        radial-gradient(
            circle,
            rgba(60, 175, 131, .12),
            transparent 68%
        );
}


/* HOVER */

.fp-direction-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(39, 147, 198, .25);

    background: #ffffff;

    box-shadow:
        0 27px 60px rgba(31, 78, 106, .11);
}


/* NUMBER */

.fp-direction-number {
    position: relative;
    z-index: 2;

    color: #8fa8b8;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .10em;
}


/* ICON */

.fp-direction-icon {
    position: relative;
    z-index: 2;

    width: 48px;
    height: 48px;

    margin-top: 25px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #edf9fe,
            #e1f3fa
        );

    color: #1688bd;

    font-size: 17px;
    font-weight: 900;

    box-shadow:
        inset 0 0 0 1px rgba(36, 145, 194, .035);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.fp-direction-card:hover .fp-direction-icon {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(37, 137, 183, .10);
}


/* individual icon colours */

.fp-direction-card:nth-child(2) .fp-direction-icon {
    color: #268f72;

    background:
        linear-gradient(
            145deg,
            #effbf7,
            #ddf5ec
        );
}

.fp-direction-card:nth-child(3) .fp-direction-icon {
    color: #a97924;

    background:
        linear-gradient(
            145deg,
            #fff9eb,
            #f9edce
        );
}

.fp-direction-card:nth-child(4) .fp-direction-icon {
    color: #6265bd;

    background:
        linear-gradient(
            145deg,
            #f4f3ff,
            #e9e8fb
        );
}

.fp-direction-card:nth-child(5) .fp-direction-icon {
    color: #267fa6;

    background:
        linear-gradient(
            145deg,
            #eef8fc,
            #dff1f8
        );
}

.fp-direction-card:nth-child(6) .fp-direction-icon {
    color: #278b68;

    background:
        linear-gradient(
            145deg,
            #effbf6,
            #dff4eb
        );
}


/* TITLE */

.fp-direction-card h3 {
    position: relative;
    z-index: 2;

    margin: 25px 0 0;

    color: #1c4c69;

    font-size: 23px;
    line-height: 1.18;

    transition: color .22s ease;
}

.fp-direction-card:hover h3 {
    color: #137fb3;
}


/* TEXT */

.fp-direction-card p {
    position: relative;
    z-index: 2;

    margin: 15px 0 0;

    color: #6c8291;

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


/* CODE */

.fp-direction-code {
    position: relative;
    z-index: 2;

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

    color: #1686bd;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .14em;
}


/* ACCENT CARD */

.fp-direction-accent {
    border-color:
        rgba(55, 161, 126, .17);

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(60, 180, 139, .11),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #edf9f5,
            #fbfefd
        );
}

.fp-direction-accent h3 {
    color: #24755d;
}

.fp-direction-accent .fp-direction-code {
    color: #278d6d;
}


/* =========================================
   RESPONSIVE — DIRECTIONS
   ========================================= */

@media (max-width: 1000px) {

    .fp-directions-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 700px) {

    .fp-directions-section {
        padding: 85px 0 95px;
    }

    .fp-directions-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .fp-direction-card {
        min-height: 285px;

        padding: 28px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .fp-direction-card,
    .fp-direction-icon {
        transition: none;
    }

    .fp-direction-card:hover,
    .fp-direction-card:hover .fp-direction-icon {
        transform: none;
    }
}

/* =========================================
   PROJECT CREATION
   ========================================= */

.fp-project-section {
    padding: 125px 0;

    color: white;

    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(92, 207, 232, .17),
            transparent 25%
        ),
        linear-gradient(
            125deg,
            #112f48,
            #175d7c 55%,
            #187f91
        );
}

.fp-project-layout {
    display: grid;
    grid-template-columns: 1fr .75fr;

    gap: 85px;

    align-items: center;
}

.fp-project-copy h2 {
    color: white;
}

.fp-project-copy h2 span {
    color: #8ddbef;
}

.fp-project-copy p {
    max-width: 700px;

    margin: 24px 0 0;

    color: #c4dbe5;

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

.fp-project-chain {
    padding: 30px;

    border-radius: 27px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.11);
}

.fp-project-item {
    min-height: 80px;

    padding: 16px 18px;

    display: grid;
    grid-template-columns: 40px 1fr auto;

    align-items: center;

    border-radius: 15px;

    background:
        rgba(255,255,255,.08);
}

.fp-project-item span {
    color: #e1b95f;

    font-size: 8px;
    font-weight: 900;
}

.fp-project-item strong {
    font-size: 11px;
}

.fp-project-item small {
    color: #9fc8d7;

    font-size: 8px;
}

.fp-project-arrow {
    padding: 7px 0;

    text-align: center;

    color: #e0b95f;
}

.fp-project-result {
    background:
        rgba(65, 178, 137, .17);
}


/* =========================================
   VALUE
   ========================================= */

.fp-value-section {
    padding: 125px 0 135px;

    background: white;
}

.fp-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 17px;
}

.fp-value-card {
    min-height: 220px;

    padding: 26px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(55, 115, 151, .10);
}

.fp-value-card span {
    color: #b28a46;

    font-size: 9px;
    font-weight: 900;
}

.fp-value-card strong {
    display: block;

    margin-top: 30px;

    color: #245472;

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

.fp-value-card p {
    margin: 14px 0 0;

    color: #748894;

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

.fp-value-statement {
    min-height: 115px;

    margin-top: 34px;

    padding: 27px 34px;

    display: grid;
    grid-template-columns: auto 1fr;

    gap: 35px;

    align-items: center;

    border-radius: 24px;

    color: white;

    background:
        linear-gradient(
            110deg,
            #153d5a,
            #17698d 55%,
            #208ea6
        );

    box-shadow:
        0 24px 60px rgba(21, 75, 106, .16);
}

.fp-value-statement span {
    color: #8dd7ee;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .15em;
}

.fp-value-statement strong {
    font-size: 18px;
    line-height: 1.45;
}


/* =========================================
   OPEN FUTURE
   ========================================= */

.fp-open-section {
    padding: 125px 0;

    background:
        radial-gradient(
            circle at 18% 78%,
            rgba(219, 174, 79, .11),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f3f9fb,
            #ffffff
        );
}

.fp-open-layout {
    display: grid;
    grid-template-columns: 1fr .8fr;

    gap: 80px;

    align-items: center;
}

.fp-open-visual {
    min-height: 310px;

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

.fp-open-small,
.fp-open-future {
    width: 95px;
    height: 95px;

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

    border-radius: 50%;

    background: white;

    border:
        1px solid rgba(55, 116, 152, .12);

    color: #678597;

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        0 15px 35px rgba(34, 78, 104, .06);
}

.fp-open-core {
    width: 165px;
    height: 165px;

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

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle at 35% 25%,
            #8ddcf5,
            #2f93ba 45%,
            #174762 100%
        );

    font-size: 20px;
    font-weight: 900;

    box-shadow:
        0 25px 60px rgba(23, 80, 113, .20);
}

.fp-open-line {
    width: 70px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #83bfd8,
            #d0a250
        );
}

.fp-open-future {
    color: #26785f;

    background:
        linear-gradient(
            145deg,
            #edf9f4,
            #ffffff
        );
}


/* =========================================
   FINAL
   ========================================= */

.fp-final-section {
    padding: 25px 0 130px;

    background: white;
}

.fp-final-card {
    min-height: 185px;

    padding: 35px 38px;

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

    gap: 40px;

    border-radius: 28px;

    color: white;

    background:
        radial-gradient(
            circle at 83% 22%,
            rgba(94, 207, 231, .18),
            transparent 27%
        ),
        linear-gradient(
            115deg,
            #143b58,
            #17698c 55%,
            #2090a8
        );

    box-shadow:
        0 28px 70px rgba(20, 75, 106, .18);
}

.fp-final-card small {
    display: block;

    color: #8dd8ef;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .17em;
}

.fp-final-card strong {
    display: block;

    max-width: 720px;

    margin-top: 10px;

    font-size: 24px;
    line-height: 1.3;
}

.fp-final-card p {
    margin: 10px 0 0;

    color: #c6dce6;

    font-size: 13px;
}

.fp-final-actions {
    display: flex;

    gap: 10px;
}

.fp-final-primary,
.fp-final-secondary {
    min-height: 46px;

    padding: 0 19px;

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

    white-space: nowrap;

    border-radius: 23px;

    font-size: 10px;
    font-weight: 900;
}

.fp-final-primary {
    background: white;
    color: #17627f;
}

.fp-final-secondary {
    color: white;

    border:
        1px solid rgba(255,255,255,.25);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {

    .fp-hero-layout,
    .fp-project-layout,
    .fp-open-layout {
        grid-template-columns: 1fr;
    }

    .fp-visual {
        margin: 30px auto 70px;
    }

    .fp-directions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fp-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 650px) {

    .fp-hero {
        min-height: auto;
    }

    .fp-hero-layout {
        min-height: auto;

        padding: 90px 0;
    }

    .fp-hero-copy h1 {
        font-size: 43px;
    }

    .fp-principle-section,
    .fp-directions-section,
    .fp-project-section,
    .fp-value-section,
    .fp-open-section {
        padding: 90px 0;
    }

    .fp-directions-grid,
    .fp-value-grid {
        grid-template-columns: 1fr;
    }

    .fp-value-statement {
        grid-template-columns: 1fr;
    }

    .fp-open-visual {
        transform: scale(.85);
    }

    .fp-final-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .fp-final-actions {
        width: 100%;
        flex-direction: column;
    }
}

/* =========================================
   REPRESENTATIVES PAGE
   ========================================= */

.rep-page-container {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.rep-page-kicker {
    color: #248dca;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .20em;
}

.rep-page-kicker-light {
    color: #91d9ed;
}


/* =========================================
   HERO — REPRESENTATIVES
   ========================================= */

.rep-page-hero {
    position: relative;
    overflow: hidden;

    min-height: 720px;

    background:
        radial-gradient(
            circle at 73% 31%,
            rgba(58, 185, 225, .22),
            transparent 29%
        ),
        radial-gradient(
            circle at 89% 73%,
            rgba(69, 190, 149, .10),
            transparent 23%
        ),
        radial-gradient(
            circle at 17% 84%,
            rgba(222, 174, 72, .14),
            transparent 25%
        ),
        radial-gradient(
            circle at 56% 9%,
            rgba(112, 108, 214, .055),
            transparent 21%
        ),
        linear-gradient(
            135deg,
            #f8fcff 0%,
            #edf8fc 54%,
            #f8fcfa 78%,
            #fffdf8 100%
        );
}


/* TECHNOLOGICAL GRID */

.rep-page-bg {
    position: absolute;
    inset: 0;

    opacity: .43;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(55, 133, 178, .052) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55, 133, 178, .052) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.65),
            rgba(0,0,0,.30) 55%,
            rgba(0,0,0,.68)
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.65),
            rgba(0,0,0,.30) 55%,
            rgba(0,0,0,.68)
        );
}


/* LAYOUT */

.rep-page-hero-layout {
    position: relative;
    z-index: 2;

    min-height: 720px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


/* =========================================
   COPY
   ========================================= */

.rep-page-hero-copy {
    position: relative;
    z-index: 5;
}

.rep-page-hero-copy .rep-page-kicker {
    position: relative;

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

    color: #178ac3;
}

.rep-page-hero-copy .rep-page-kicker::before {
    content: "";

    width: 26px;
    height: 1px;

    margin-right: 12px;

    background:
        linear-gradient(
            90deg,
            #dda842,
            #27a8cf
        );
}

.rep-page-hero-copy h1 {
    margin: 18px 0 0;

    max-width: 760px;

    color: #173752;

    font-size: clamp(54px, 5.3vw, 82px);
    line-height: .98;

    letter-spacing: -.045em;
}

.rep-page-hero-copy h1 span {
    display: block;

    margin-top: 8px;

    color: #218fcd;

    text-shadow:
        0 10px 35px rgba(33, 143, 205, .07);
}

.rep-page-hero-copy p {
    max-width: 720px;

    margin: 30px 0 0;

    color: #60798a;

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

.rep-page-actions {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}


/* =========================================
   HERO VISUAL
   ========================================= */

.rep-page-hero-visual {
    position: relative;

    min-height: 560px;

    isolation: isolate;
}


/* LIGHT FIELD BEHIND PERSON */

.rep-page-hero-visual::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 485px;
    height: 485px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54, 178, 219, .16) 0%,
            rgba(54, 178, 219, .07) 38%,
            rgba(68, 187, 151, .025) 59%,
            transparent 72%
        );

    z-index: 0;
}


/* NETWORK RINGS */

.rep-page-hero-visual::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 420px;
    height: 420px;

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

    border-radius: 50%;

    border:
        1px solid rgba(43, 158, 203, .14);

    box-shadow:
        0 0 0 72px rgba(43, 158, 203, .025),
        0 0 0 73px rgba(43, 158, 203, .09);

    z-index: 0;
}


/* =========================================
   REPRESENTATIVE CARD
   ========================================= */

.rep-person-main {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 310px;

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

    padding: 25px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(249,253,255,.96)
        );

    border:
        1px solid rgba(255,255,255,.90);

    box-shadow:
        0 30px 75px rgba(28, 83, 112, .16),
        0 0 45px rgba(55, 178, 219, .10);

    z-index: 5;

    animation:
        repPersonBreath 5.5s ease-in-out infinite;
}


/* PHOTO */

.rep-avatar-large {
    height: 240px;

    position: relative;
    overflow: hidden;

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

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 35% 22%,
            rgba(255,255,255,.70),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #dceff7,
            #c6e5f1
        );

    color: #6d92a7;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .08em;
}

.rep-avatar-large::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    bottom: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(45, 170, 216, .13),
            transparent 70%
        );
}


/* INFO */

.rep-person-info {
    position: relative;

    padding-top: 20px;
}

.rep-person-info::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 36px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #26a7d3,
            #4bb997
        );

    border-radius: 2px;
}

.rep-person-info span {
    color: #238ac0;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .15em;
}

.rep-person-info strong {
    display: block;

    margin-top: 8px;

    color: #214e6b;

    font-size: 21px;
}

.rep-person-info small {
    display: block;

    margin-top: 7px;

    color: #7b8f9d;

    font-size: 10px;
}


/* =========================================
   COUNTRY TAGS
   ========================================= */

.rep-country-tag {
    position: absolute;

    min-width: 78px;

    padding: 12px 15px;

    text-align: center;

    border-radius: 15px;

    background:
        rgba(255,255,255,.93);

    border:
        1px solid rgba(255,255,255,.88);

    color: #286381;

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        0 15px 37px rgba(34, 79, 105, .09);

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

    z-index: 4;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.rep-country-tag::before {
    content: "";

    position: absolute;

    left: 14px;
    top: -1px;

    width: 30px;
    height: 2px;

    border-radius: 2px;

    background: #2ca8d3;
}

.rep-country-tag:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 45px rgba(34, 79, 105, .13);
}


/* EUROPE */

.rep-country-a {
    left: 2%;
    top: 17%;
}

.rep-country-a::before {
    background: #2ca8d3;
}


/* CENTRAL ASIA */

.rep-country-b {
    right: 1%;
    top: 25%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(255,249,235,.92)
        );
}

.rep-country-b::before {
    background: #d6a443;
}


/* ASIA */

.rep-country-c {
    right: 8%;
    bottom: 13%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(239,250,245,.94)
        );
}

.rep-country-c::before {
    background: #43b68d;
}


/* NEW REGIONS */

.rep-country-d {
    left: 7%;
    bottom: 16%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(244,243,255,.94)
        );
}

.rep-country-d::before {
    background: #7870d5;
}


/* =========================================
   CONNECTION LINES
   ========================================= */

.rep-hero-line {
    position: absolute;

    height: 1px;

    overflow: visible;

    transform-origin: center;

    background:
        linear-gradient(
            90deg,
            rgba(49,151,195,.04),
            rgba(49,151,195,.35) 35%,
            rgba(49,151,195,.35) 65%,
            rgba(49,151,195,.04)
        );

    z-index: 2;
}


/* moving contact signal */

.rep-hero-line::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 7px;
    height: 7px;

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

    border-radius: 50%;

    background: #63d7f2;

    box-shadow:
        0 0 7px rgba(99,215,242,.95),
        0 0 17px rgba(99,215,242,.62);

    animation:
        repContactSignal 4s linear infinite;
}


/* EUROPE → REPRESENTATIVE */

.rep-hero-line-1 {
    width: 250px;

    left: 14%;
    top: 34%;

    transform: rotate(25deg);
}

.rep-hero-line-1::after {
    background: #62d7f3;

    animation-delay: -.4s;
}


/* CENTRAL ASIA → REPRESENTATIVE */

.rep-hero-line-2 {
    width: 250px;

    right: 13%;
    top: 38%;

    transform: rotate(-24deg);

    background:
        linear-gradient(
            90deg,
            rgba(215,164,66,.04),
            rgba(215,164,66,.38),
            rgba(215,164,66,.04)
        );
}

.rep-hero-line-2::after {
    background: #edc05d;

    box-shadow:
        0 0 7px rgba(237,192,93,.95),
        0 0 17px rgba(237,192,93,.60);

    animation-delay: -1.3s;
}


/* ASIA → REPRESENTATIVE */

.rep-hero-line-3 {
    width: 240px;

    right: 15%;
    bottom: 31%;

    transform: rotate(24deg);

    background:
        linear-gradient(
            90deg,
            rgba(67,182,141,.04),
            rgba(67,182,141,.38),
            rgba(67,182,141,.04)
        );
}

.rep-hero-line-3::after {
    background: #58d7a5;

    box-shadow:
        0 0 7px rgba(88,215,165,.95),
        0 0 17px rgba(88,215,165,.58);

    animation-delay: -2.2s;
}


/* NEW REGIONS → REPRESENTATIVE */

.rep-hero-line-4 {
    width: 240px;

    left: 15%;
    bottom: 31%;

    transform: rotate(-24deg);

    background:
        linear-gradient(
            90deg,
            rgba(120,112,213,.04),
            rgba(120,112,213,.36),
            rgba(120,112,213,.04)
        );
}

.rep-hero-line-4::after {
    background: #938be9;

    box-shadow:
        0 0 7px rgba(147,139,233,.92),
        0 0 17px rgba(147,139,233,.56);

    animation-delay: -3s;
}


/* =========================================
   HERO MOTION
   ========================================= */

@keyframes repContactSignal {

    0% {
        left: 0;
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.55);
    }

    12% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.12);
    }
}


@keyframes repPersonBreath {

    0%,
    100% {
        box-shadow:
            0 30px 75px rgba(28, 83, 112, .16),
            0 0 38px rgba(55, 178, 219, .08);
    }

    50% {
        box-shadow:
            0 34px 82px rgba(28, 83, 112, .18),
            0 0 58px rgba(55, 178, 219, .16);
    }
}


/* =========================================
   RESPONSIVE — HERO
   ========================================= */

@media (max-width: 1100px) {

    .rep-page-hero-layout {
        grid-template-columns: 1fr;

        gap: 25px;

        padding:
            55px 0
            80px;
    }

    .rep-page-hero-copy {
        max-width: 780px;
    }

    .rep-page-hero-visual {
        width: min(650px, 100%);

        min-height: 570px;

        margin:
            0 auto;
    }
}


@media (max-width: 650px) {

    .rep-page-hero {
        min-height: auto;
    }

    .rep-page-hero-layout {
        min-height: auto;

        padding:
            55px 0
            70px;
    }

    .rep-page-hero-copy h1 {
        font-size:
            clamp(45px, 13vw, 60px);
    }

    .rep-page-hero-copy p {
        font-size: 16px;
        line-height: 1.65;
    }

    .rep-page-actions {
        margin-top: 30px;

        gap: 10px;
    }

    .rep-page-hero-visual {
        min-height: 500px;

        width: 108%;

        margin-left: -4%;
    }

    .rep-page-hero-visual::before {
        width: 390px;
        height: 390px;
    }

    .rep-page-hero-visual::after {
        width: 335px;
        height: 335px;

        box-shadow:
            0 0 0 52px rgba(43,158,203,.023),
            0 0 0 53px rgba(43,158,203,.075);
    }

    .rep-person-main {
        width: 240px;

        padding: 18px;

        border-radius: 23px;
    }

    .rep-avatar-large {
        height: 185px;

        border-radius: 18px;
    }

    .rep-person-info strong {
        font-size: 18px;
    }

    .rep-country-tag {
        min-width: 0;

        padding:
            9px 10px;

        font-size: 7px;
    }

    .rep-country-a {
        left: 0;
        top: 13%;
    }

    .rep-country-b {
        right: 0;
        top: 20%;
    }

    .rep-country-c {
        right: 2%;
        bottom: 12%;
    }

    .rep-country-d {
        left: 1%;
        bottom: 15%;
    }

    .rep-hero-line-1,
    .rep-hero-line-2,
    .rep-hero-line-3,
    .rep-hero-line-4 {
        width: 170px;
    }
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .rep-person-main,
    .rep-hero-line::after {
        animation: none;
    }

    .rep-country-tag {
        transition: none;
    }

    .rep-country-tag:hover {
        transform: none;
    }
}


/* =========================================
   COMMON HEADING
   ========================================= */

.rep-page-heading {
    max-width: 920px;

    margin-bottom: 60px;
}

.rep-page-heading h2,
.rep-find-top h2,
.rep-digital-copy h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(40px, 4.2vw, 63px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.rep-page-heading h2 span,
.rep-find-top h2 span,
.rep-digital-copy h2 span {
    display: block;

    color: #218dcc;
}

.rep-page-heading p {
    max-width: 810px;

    margin: 25px 0 0;

    color: #687f90;

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


/* =========================================
   PRINCIPLE
   ========================================= */

.rep-principle-section {
    padding: 125px 0 135px;

    background: white;
}

.rep-principle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 17px;
}

.rep-principle-card {
    min-height: 235px;

    padding: 28px;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(55,115,150,.10);
}

.rep-principle-card > span {
    color: #b18a47;

    font-size: 9px;
    font-weight: 900;
}

.rep-principle-card h3 {
    margin: 35px 0 0;

    color: #22516f;

    font-size: 22px;
}

.rep-principle-card p {
    margin: 15px 0 0;

    color: #728694;

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

.rep-principle-accent {
    background:
        linear-gradient(
            145deg,
            #edf9f4,
            #ffffff
        );
}

.rep-principle-accent h3 {
    color: #27765e;
}


/* =========================================
   FIND
   ========================================= */

.rep-find-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0 140px;

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(61, 177, 218, .14),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 86%,
            rgba(220, 173, 72, .075),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #f1f8fb 0%,
            #f7fbfd 58%,
            #fbfdfd 100%
        );
}


/* subtle technological field */

.rep-find-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(55, 133, 178, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55, 133, 178, .045) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,.65),
            transparent 82%
        );

    mask-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,.65),
            transparent 82%
        );
}

.rep-find-section .rep-page-container {
    position: relative;
    z-index: 2;
}


/* =========================================
   FIND TOP
   ========================================= */

.rep-find-top {
    margin-bottom: 55px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;
}


/* =========================================
   FILTERS
   ========================================= */

.rep-filter-box {
    display: flex;

    gap: 12px;
}

.rep-filter-field label {
    display: block;

    margin-bottom: 7px;

    color: #829aaa;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .14em;
}

.rep-filter-field button {
    min-width: 165px;
    min-height: 44px;

    padding: 0 15px;

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

    border:
        1px solid rgba(49, 132, 177, .16);

    border-radius: 13px;

    background:
        rgba(255,255,255,.94);

    color: #416a82;

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

    box-shadow:
        0 8px 24px rgba(34, 78, 104, .035);

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.rep-filter-field button:hover {
    transform: translateY(-2px);

    border-color:
        rgba(36, 148, 198, .30);

    box-shadow:
        0 13px 30px rgba(34, 78, 104, .07);
}


/* =========================================
   REPRESENTATIVE CARDS
   ========================================= */

.rep-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


/* BASE CARD */

.rep-full-card {
    position: relative;
    overflow: hidden;

    min-height: 480px;

    padding: 22px;

    display: flex;
    flex-direction: column;

    border-radius: 26px;

    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.99),
            rgba(249,252,254,.98)
        );

    border:
        1px solid rgba(55,115,150,.11);

    box-shadow:
        0 18px 44px rgba(34,78,104,.055);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


/* individual top signal */

.rep-full-card::before {
    content: "";

    position: absolute;

    left: 22px;
    top: 0;

    width: 46px;
    height: 2px;

    border-radius: 2px;

    background:
        linear-gradient(
            90deg,
            #25a7d2,
            #62d5ed
        );

    z-index: 3;
}


/* KAZAKHSTAN */

.rep-full-card:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #d6a444,
            #ebc56e
        );
}


/* KYRGYZSTAN */

.rep-full-card:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #43b68d,
            #70d1aa
        );
}


/* NEW COUNTRY */

.rep-full-card:nth-child(4)::before {
    background:
        linear-gradient(
            90deg,
            #7770d5,
            #42b89a,
            #d5a545
        );

    width: 68px;
}


.rep-full-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(38, 145, 194, .22);

    box-shadow:
        0 28px 65px rgba(34,78,104,.105);
}


/* =========================================
   CARD PHOTO
   ========================================= */

.rep-card-top {
    position: relative;
}

.rep-card-photo {
    position: relative;
    overflow: hidden;

    height: 190px;

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

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 32% 20%,
            rgba(255,255,255,.72),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #e0f1f7,
            #cbe8f2
        );

    color: #6f91a5;

    font-size: 9px;
    font-weight: 900;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* soft light inside photo */

.rep-card-photo::after {
    content: "";

    position: absolute;

    width: 185px;
    height: 185px;

    right: -88px;
    bottom: -95px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 166, 211, .16),
            transparent 70%
        );

    pointer-events: none;
}


/* Kazakhstan photo field */

.rep-full-card:nth-child(2) .rep-card-photo {
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.72),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #e8f2f4,
            #d7ebec
        );
}


/* Kyrgyzstan photo field */

.rep-full-card:nth-child(3) .rep-card-photo {
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.72),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #e4f4f1,
            #d0ebe4
        );
}


.rep-full-card:hover .rep-card-photo {
    transform: translateY(-2px);

    box-shadow:
        0 15px 34px rgba(38, 105, 138, .09);
}


/* =========================================
   STATUS
   ========================================= */

.rep-card-status {
    position: absolute;

    right: 10px;
    bottom: 10px;

    padding: 6px 9px;

    display: flex;
    align-items: center;

    gap: 6px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid rgba(255,255,255,.90);

    color: #3f7562;

    font-size: 7px;
    font-weight: 900;

    box-shadow:
        0 7px 18px rgba(34,78,104,.05);

    z-index: 3;
}

.rep-card-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #38b77d;

    box-shadow:
        0 0 0 3px rgba(56,183,125,.10);
}

.rep-card-status-future {
    color: #8a744a;
}


/* =========================================
   COUNTRY / NAME / ROLE
   ========================================= */

.rep-card-country {
    margin-top: 21px;

    color: #248bc0;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .14em;
}

.rep-full-card:nth-child(2) .rep-card-country {
    color: #b48a3e;
}

.rep-full-card:nth-child(3) .rep-card-country {
    color: #339270;
}

.rep-full-card:nth-child(4) .rep-card-country {
    color: #746cc5;
}


.rep-full-card h3 {
    margin: 8px 0 0;

    color: #214f6c;

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

.rep-full-card:nth-child(4) h3 {
    color: #286c5a;
}


.rep-card-role {
    margin: 7px 0 0;

    color: #758b98;

    font-size: 11px;
}


/* =========================================
   LANGUAGES
   ========================================= */

.rep-card-languages {
    margin-top: 15px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.rep-card-languages span {
    min-width: 31px;

    padding: 6px 8px;

    text-align: center;

    border-radius: 11px;

    background:
        #edf5f8;

    color: #56768a;

    font-size: 8px;
    font-weight: 900;

    transition:
        transform .20s ease,
        background .20s ease;
}

.rep-card-languages span:hover {
    transform: translateY(-2px);

    background: #e3f1f6;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.rep-card-text {
    margin: 18px 0 0;

    color: #718694;

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


/* =========================================
   CARD ACTIONS
   ========================================= */

.rep-card-actions {
    margin-top: auto;
    padding-top: 23px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.rep-card-call,
.rep-card-message,
.rep-card-profile {
    min-height: 38px;

    padding: 0 13px;

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

    border-radius: 19px;

    font-size: 9px;
    font-weight: 900;

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        background .20s ease,
        border-color .20s ease;
}


/* CALL */

.rep-card-call {
    color: white;

    background:
        linear-gradient(
            135deg,
            #1685bc,
            #27a7ce
        );

    box-shadow:
        0 9px 20px rgba(27, 143, 190, .12);
}

.rep-card-call:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 26px rgba(27, 143, 190, .20);
}


/* MESSAGE */

.rep-card-message {
    background: #edf5f8;

    color: #346985;
}

.rep-card-message:hover {
    transform: translateY(-2px);

    background: #e4f1f6;
}


/* PROFILE */

.rep-card-profile {
    background: transparent;

    color: #56798d;

    border:
        1px solid rgba(54,115,151,.13);
}

.rep-card-profile:hover {
    transform: translateY(-2px);

    border-color:
        rgba(39, 143, 191, .28);

    background:
        rgba(237,247,251,.55);
}


/* =========================================
   CONTACT FLOW
   ========================================= */

.rep-contact-flow-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0 135px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(65, 170, 211, .07),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(211, 165, 70, .055),
            transparent 22%
        ),
        #ffffff;
}


/* FLOW */

.rep-contact-flow {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 13px;

    align-items: stretch;
}


/* STEP */

.rep-flow-step {
    position: relative;
    overflow: hidden;

    min-height: 155px;

    padding: 24px;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(55, 115, 150, .11);

    box-shadow:
        0 14px 34px rgba(34, 78, 104, .035);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


/* TOP ACCENT */

.rep-flow-step::before {
    content: "";

    position: absolute;

    top: 0;
    left: 24px;

    width: 40px;
    height: 2px;

    border-radius: 0 0 2px 2px;

    background: #27a1cf;

    opacity: .85;

    transition:
        width .25s ease,
        opacity .25s ease;
}


.rep-flow-step:nth-of-type(2)::before {
    background: #d5a545;
}


.rep-flow-step:nth-of-type(3)::before {
    background: #2fa9b4;
}


/* NUMBER */

.rep-flow-step span {
    display: block;

    color: #9eb1bd;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}


/* TITLE */

.rep-flow-step strong {
    display: block;

    margin-top: 29px;

    color: #285c79;

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

    letter-spacing: .01em;
}


/* DESCRIPTION */

.rep-flow-step small {
    display: block;

    margin-top: 8px;

    color: #7c909c;

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


/* HOVER */

.rep-flow-step:hover {
    transform: translateY(-5px);

    border-color:
        rgba(39, 145, 194, .23);

    background: #ffffff;

    box-shadow:
        0 22px 45px rgba(34, 78, 104, .075);
}


.rep-flow-step:hover::before {
    width: 64px;

    opacity: 1;
}


/* ARROWS */

.rep-contact-flow > i {
    position: relative;

    min-width: 18px;

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

    color: #c49a4e;

    font-size: 17px;
    font-style: normal;

    opacity: .82;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.rep-contact-flow > i::before {
    content: "";

    position: absolute;

    left: -3px;
    right: -3px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(196, 154, 78, .25),
            transparent
        );

    z-index: -1;
}


.rep-contact-flow > i:hover {
    transform: translateX(3px);

    opacity: 1;
}


/* RESULT */

.rep-flow-result {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(55, 181, 135, .10),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #edf9f4,
            #ffffff
        );

    border-color:
        rgba(47, 159, 119, .14);

    box-shadow:
        0 16px 38px rgba(42, 126, 94, .045);
}


.rep-flow-result::before {
    width: 48px;

    background:
        linear-gradient(
            90deg,
            #35b884,
            #79c9a9
        );

    opacity: 1;
}


.rep-flow-result span {
    color: #88aa9c;
}


.rep-flow-result strong {
    color: #27785f;
}


.rep-flow-result small {
    color: #718e82;
}


.rep-flow-result:hover {
    border-color:
        rgba(47, 159, 119, .25);

    box-shadow:
        0 22px 48px rgba(42, 126, 94, .08);
}


/* =========================================
   RESPONSIVE — CONTACT FLOW
   ========================================= */

@media (max-width: 1000px) {

    .rep-contact-flow {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .rep-flow-step {
        min-height: 135px;
    }


    .rep-contact-flow > i {
        min-height: 20px;

        transform: rotate(90deg);
    }


    .rep-contact-flow > i:hover {
        transform:
            rotate(90deg)
            translateX(3px);
    }
}


/* =========================================
   MOBILE — CONTACT FLOW
   ========================================= */

@media (max-width: 650px) {

    .rep-contact-flow-section {
        padding:
            85px 0
            95px;
    }


    .rep-contact-flow {
        gap: 10px;
    }


    .rep-flow-step {
        min-height: 130px;

        padding: 22px;

        border-radius: 19px;
    }


    .rep-flow-step::before {
        left: 22px;
    }


    .rep-flow-step strong {
        margin-top: 24px;

        font-size: 11px;
    }


    .rep-flow-step small {
        font-size: 9px;
    }
}

/* =========================================
   DIGITAL CONNECTION / THALAMUS CONNECTION
   ========================================= */

.rep-digital-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0;

    color: white;

    background:
        radial-gradient(
            circle at 78% 46%,
            rgba(77, 207, 232, .18),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(52, 188, 151, .11),
            transparent 24%
        ),
        radial-gradient(
            circle at 14% 18%,
            rgba(39, 142, 196, .10),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #11314a 0%,
            #155675 48%,
            #168095 100%
        );
}


/* subtle technological grid */

.rep-digital-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .20;

    background-image:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 28%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 28%,
            #000 100%
        );
}


/* soft light behind connection core */

.rep-digital-section::after {
    content: "";

    position: absolute;

    width: 540px;
    height: 540px;

    right: 5%;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(100, 220, 239, .10) 0%,
            rgba(71, 184, 213, .045) 42%,
            transparent 70%
        );
}


/* =========================================
   LAYOUT
   ========================================= */

.rep-digital-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr .95fr;

    gap: 85px;

    align-items: center;
}


/* =========================================
   COPY
   ========================================= */

.rep-digital-copy {
    position: relative;
    z-index: 3;
}

.rep-digital-copy .rep-kicker {
    color: #91d9ed;
}

.rep-digital-copy h2 {
    max-width: 760px;

    color: white;
}

.rep-digital-copy h2 span {
    color: #8ddbef;

    text-shadow:
        0 12px 35px rgba(94, 211, 237, .08);
}

.rep-digital-copy p {
    max-width: 700px;

    margin: 24px 0 0;

    color: #c8dfe8;

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


/* =========================================
   CONNECTION VISUAL
   ========================================= */

.rep-digital-visual {
    position: relative;

    min-height: 330px;

    display: flex;

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

    gap: 18px;

    isolation: isolate;
}


/* large atmospheric field */

.rep-digital-visual::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 390px;
    height: 390px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(107, 218, 239, .10) 0%,
            rgba(72, 180, 210, .035) 45%,
            transparent 70%
        );

    border:
        1px solid rgba(132, 221, 238, .055);

    z-index: -2;
}


/* second orbit */

.rep-digital-visual::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 285px;
    height: 285px;

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

    border-radius: 50%;

    border:
        1px solid rgba(133, 222, 240, .08);

    z-index: -1;

    animation:
        repConnectionOrbit 8s ease-in-out infinite;
}


/* =========================================
   SIDE NODES
   ========================================= */

.rep-digital-user {
    position: relative;

    width: 145px;
    height: 145px;

    flex: 0 0 145px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.055)
        );

    border:
        1px solid rgba(255,255,255,.13);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 18px 45px rgba(5,37,55,.08);

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

    z-index: 3;

    transition:
        transform .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


/* small node accent */

.rep-digital-user::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 35px;
    height: 2px;

    transform: translateX(-50%);

    border-radius: 0 0 3px 3px;

    background:
        linear-gradient(
            90deg,
            #65d5ed,
            #9be5f2
        );
}

.rep-digital-user:hover {
    transform: translateY(-5px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.075)
        );

    border-color:
        rgba(151,225,240,.22);

    box-shadow:
        0 22px 50px rgba(5,37,55,.14);
}


/* =========================================
   NODE TYPOGRAPHY
   ========================================= */

.rep-digital-user small,
.rep-digital-core small {
    color: #91d7eb;

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

    letter-spacing: .13em;
}

.rep-digital-user strong {
    margin-top: 8px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 900;
}


/* =========================================
   CENTRAL THALAMUS CORE
   ========================================= */

.rep-digital-core {
    position: relative;

    width: 165px;
    height: 165px;

    flex: 0 0 165px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 24%,
            #98e6f7 0%,
            #52bdd9 24%,
            #258aad 55%,
            #174762 100%
        );

    border:
        1px solid rgba(177,236,246,.16);

    box-shadow:
        0 28px 65px rgba(4,35,52,.22),
        0 0 0 10px rgba(103,211,233,.025),
        0 0 55px rgba(88,203,226,.12);

    z-index: 5;

    animation:
        repCoreBreath 4.8s ease-in-out infinite;
}


/* inner glass ring */

.rep-digital-core::before {
    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.09);

    pointer-events: none;
}


/* outer pulse */

.rep-digital-core::after {
    content: "";

    position: absolute;

    inset: -16px;

    border-radius: 50%;

    border:
        1px solid rgba(118,219,238,.12);

    pointer-events: none;

    animation:
        repCorePulse 4.8s ease-out infinite;
}

.rep-digital-core strong {
    margin-top: 8px;

    color: white;

    font-size: 25px;
    font-weight: 900;

    line-height: 1;
}

.rep-digital-core span {
    margin-top: 7px;

    color: #f0c967;

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

    letter-spacing: .03em;
}


/* =========================================
   CONNECTION ARROWS
   ========================================= */

.rep-digital-arrow {
    position: relative;

    min-width: 26px;

    color: #e2b957;

    font-size: 20px;

    text-align: center;

    z-index: 4;

    filter:
        drop-shadow(
            0 0 8px rgba(225,184,86,.12)
        );

    animation:
        repArrowSignal 2.8s ease-in-out infinite;
}

.rep-digital-arrow:nth-of-type(2) {
    animation-delay: -1.4s;
}


/* =========================================
   REPRESENTATIVE NODE
   ========================================= */

.rep-digital-representative {
    background:
        linear-gradient(
            145deg,
            rgba(62,190,150,.18),
            rgba(255,255,255,.055)
        );

    border-color:
        rgba(91,205,168,.18);
}

.rep-digital-representative::before {
    background:
        linear-gradient(
            90deg,
            #4cc69e,
            #7cdec0
        );
}

.rep-digital-representative small {
    color: #83dfc1;
}


/* =========================================
   MOTION
   ========================================= */

@keyframes repCoreBreath {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 28px 65px rgba(4,35,52,.22),
            0 0 0 10px rgba(103,211,233,.025),
            0 0 45px rgba(88,203,226,.10);
    }

    50% {
        transform: scale(1.025);

        box-shadow:
            0 31px 72px rgba(4,35,52,.24),
            0 0 0 14px rgba(103,211,233,.035),
            0 0 70px rgba(88,203,226,.18);
    }
}


@keyframes repCorePulse {

    0% {
        transform: scale(.92);
        opacity: 0;
    }

    28% {
        opacity: .85;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


@keyframes repArrowSignal {

    0%,
    100% {
        opacity: .58;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(3px);
    }
}


@keyframes repConnectionOrbit {

    0%,
    100% {
        opacity: .55;
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        opacity: .95;
        transform:
            translate(-50%, -50%)
            scale(1.035);
    }
}


/* =========================================
   RESPONSIVE — DIGITAL CONNECTION
   ========================================= */

@media (max-width: 1100px) {

    .rep-digital-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .rep-digital-copy {
        max-width: 800px;
    }

    .rep-digital-visual {
        width: min(620px, 100%);

        min-height: 340px;

        margin: 0 auto;
    }
}


@media (max-width: 650px) {

    .rep-digital-section {
        padding: 90px 0;
    }

    .rep-digital-layout {
        gap: 45px;
    }

    .rep-digital-visual {
        width: 118%;

        min-height: 280px;

        margin-left: -9%;

        gap: 9px;

        transform: none;
    }

    .rep-digital-visual::before {
        width: 290px;
        height: 290px;
    }

    .rep-digital-visual::after {
        width: 220px;
        height: 220px;
    }

    .rep-digital-user {
        width: 105px;
        height: 112px;

        flex-basis: 105px;

        padding: 8px;

        border-radius: 18px;
    }

    .rep-digital-core {
        width: 125px;
        height: 125px;

        flex-basis: 125px;
    }

    .rep-digital-core strong {
        font-size: 20px;
    }

    .rep-digital-arrow {
        min-width: 16px;

        font-size: 16px;
    }

    .rep-digital-user strong {
        font-size: 9px;
    }
}


/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .rep-digital-core,
    .rep-digital-core::after,
    .rep-digital-arrow,
    .rep-digital-visual::after {
        animation: none;
    }

    .rep-digital-user {
        transition: none;
    }

    .rep-digital-user:hover {
        transform: none;
    }
}

/* =========================================
   DIGITAL CONNECTION — VISIBILITY FIX
   ========================================= */

.rep-digital-visual {
    position: relative;
    z-index: 3;

    overflow: visible;

    isolation: auto;
}

.rep-digital-visual::before,
.rep-digital-visual::after {
    pointer-events: none;
    z-index: 0;
}

.rep-digital-user,
.rep-digital-core,
.rep-digital-arrow {
    position: relative;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 5;
}

.rep-digital-core {
    z-index: 6;
}

.rep-digital-representative {
    z-index: 5;
}


/* гарантируем корректный flex-размер */

.rep-digital-user {
    display: flex !important;

    width: 145px;
    height: 145px;

    flex:
        0 0
        145px;
}

.rep-digital-core {
    display: flex !important;

    width: 165px;
    height: 165px;

    flex:
        0 0
        165px;
}

.rep-digital-arrow {
    display: block !important;

    flex:
        0 0
        26px;
}


/* анимацию ядра оставляем,
   но без риска скрытия элемента */

@keyframes repCoreBreath {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.025);
        opacity: 1;
    }
}


/* MOBILE FIX */

@media (max-width: 650px) {

    .rep-digital-user {
        width: 105px;
        height: 112px;

        flex-basis: 105px;
    }

    .rep-digital-core {
        width: 125px;
        height: 125px;

        flex-basis: 125px;
    }

    .rep-digital-arrow {
        flex-basis: 16px;
    }
}


/* =========================================
   JOIN
   ========================================= */

.rep-join-section {
    position: relative;

    padding: 35px 0 130px;

    background:
        radial-gradient(
            circle at 12% 85%,
            rgba(214, 168, 72, .05),
            transparent 24%
        ),
        #ffffff;
}


.rep-join-card {
    position: relative;
    overflow: hidden;

    min-height: 190px;

    padding: 38px 42px;

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

    gap: 40px;

    border-radius: 28px;

    color: white;

    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(103, 216, 236, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 86%,
            rgba(68, 160, 205, .10),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            #123750 0%,
            #176283 52%,
            #1f8fa7 100%
        );

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 28px 70px rgba(20,75,106,.18);

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}


/* soft internal light */

.rep-join-card::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -110px;
    top: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(133, 225, 241, .13),
            transparent 68%
        );

    pointer-events: none;
}


/* upper accent */

.rep-join-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 40px;

    width: 64px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #58d0e8,
            #4cc39d,
            #d9aa4d
        );
}


.rep-join-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 34px 82px rgba(20,75,106,.23);
}


/* =========================================
   TEXT
   ========================================= */

.rep-join-card > div {
    position: relative;
    z-index: 2;
}


.rep-join-card small {
    display: block;

    color: #91dcef;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .18em;
}


.rep-join-card strong {
    display: block;

    max-width: 720px;

    margin-top: 11px;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.3;
}


.rep-join-card p {
    max-width: 700px;

    margin: 11px 0 0;

    color: #c8dee7;

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


/* =========================================
   BUTTON
   ========================================= */

.rep-join-button {
    position: relative;
    z-index: 2;

    min-height: 48px;

    padding: 0 22px;

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

    white-space: nowrap;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f8fb
        );

    border:
        1px solid rgba(255,255,255,.55);

    color: #17627f;

    font-size: 10px;
    font-weight: 900;

    box-shadow:
        0 11px 24px rgba(9,53,73,.14);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


.rep-join-button:hover {
    transform: translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 15px 30px rgba(9,53,73,.20);
}


/* =========================================
   RESPONSIVE — JOIN
   ========================================= */

@media (max-width: 900px) {

    .rep-join-card {
        align-items: flex-start;
        flex-direction: column;

        padding: 36px;
    }

    .rep-join-button {
        margin-top: 4px;
    }
}


@media (max-width: 650px) {

    .rep-join-section {
        padding:
            25px 0
            95px;
    }

    .rep-join-card {
        min-height: auto;

        padding: 30px;

        gap: 28px;

        border-radius: 24px;
    }

    .rep-join-card::after {
        left: 30px;
    }

    .rep-join-card strong {
        font-size: 20px;
    }

    .rep-join-card p {
        font-size: 12px;
    }

    .rep-join-button {
        width: 100%;
    }
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {

    .rep-page-hero-layout,
    .rep-digital-layout {
        grid-template-columns: 1fr;
    }

    .rep-page-hero-visual {
        margin-bottom: 60px;
    }

    .rep-principle-grid,
    .rep-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rep-find-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .rep-contact-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .rep-contact-flow > i {
        display: none;
    }
}


@media (max-width: 650px) {

    .rep-page-hero {
        min-height: auto;
    }

    .rep-page-hero-layout {
        min-height: auto;

        padding: 90px 0;
    }

    .rep-page-hero-copy h1 {
        font-size: 44px;
    }

    .rep-principle-section,
    .rep-find-section,
    .rep-contact-flow-section,
    .rep-digital-section {
        padding: 90px 0;
    }

    .rep-principle-grid,
    .rep-cards-grid,
    .rep-contact-flow {
        grid-template-columns: 1fr;
    }

    .rep-filter-box {
        width: 100%;

        flex-direction: column;
    }

    .rep-filter-field button {
        width: 100%;
    }

    .rep-digital-visual {
        transform: scale(.78);
    }

    .rep-join-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================
   PRESENTATIONS PAGE
   ========================================= */

.prs-container {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.prs-kicker {
    color: #248dca;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .20em;
}

.prs-kicker-light {
    color: #91d9ed;
}


/* =========================================
   HERO — PRESENTATIONS
   ========================================= */

.prs-hero {
    position: relative;
    overflow: hidden;

    min-height: 720px;

    background:
        radial-gradient(
            circle at 75% 31%,
            rgba(55, 184, 225, .22),
            transparent 29%
        ),
        radial-gradient(
            circle at 91% 72%,
            rgba(65, 185, 150, .08),
            transparent 22%
        ),
        radial-gradient(
            circle at 17% 84%,
            rgba(222, 175, 72, .14),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8fcff 0%,
            #edf8fc 54%,
            #f8fcfa 78%,
            #fffdf8 100%
        );
}


/* =========================================
   TECHNOLOGICAL BACKGROUND
   ========================================= */

.prs-hero-bg {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .43;

    background-image:
        linear-gradient(
            rgba(55, 133, 178, .052) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55, 133, 178, .052) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,.65),
            rgba(0,0,0,.34) 66%,
            transparent 97%
        );

    mask-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,.65),
            rgba(0,0,0,.34) 66%,
            transparent 97%
        );
}


/* =========================================
   LAYOUT
   ========================================= */

.prs-hero-layout {
    position: relative;
    z-index: 2;

    min-height: 720px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


/* =========================================
   HERO COPY
   ========================================= */

.prs-hero-copy {
    position: relative;
    z-index: 5;
}

.prs-hero-copy .prs-kicker {
    position: relative;

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

.prs-hero-copy .prs-kicker::before {
    content: "";

    width: 26px;
    height: 1px;

    margin-right: 12px;

    background:
        linear-gradient(
            90deg,
            #dfa945,
            #29a9d2
        );
}

.prs-hero-copy h1 {
    margin: 18px 0 0;

    max-width: 760px;

    color: #173752;

    font-size: clamp(54px, 5.3vw, 82px);
    line-height: .98;

    letter-spacing: -.045em;
}

.prs-hero-copy h1 span {
    display: block;

    margin-top: 8px;

    color: #218fcd;

    text-shadow:
        0 10px 34px rgba(33,143,205,.07);
}

.prs-hero-copy p {
    max-width: 720px;

    margin: 30px 0 0;

    color: #60798a;

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

.prs-hero-actions {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}


/* =========================================
   DOCUMENT VISUAL
   ========================================= */

.prs-hero-visual {
    position: relative;

    min-height: 540px;

    isolation: isolate;
}


/* large light field */

.prs-hero-visual::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49, 179, 219, .16) 0%,
            rgba(49, 179, 219, .07) 40%,
            rgba(75, 187, 151, .025) 60%,
            transparent 73%
        );

    z-index: 0;
}


/* orbit around presentation */

.prs-hero-visual::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 440px;
    height: 440px;

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

    border-radius: 50%;

    border:
        1px solid rgba(40, 157, 204, .13);

    box-shadow:
        0 0 0 62px rgba(40,157,204,.018),
        0 0 0 63px rgba(40,157,204,.07);

    z-index: 0;
}


/* =========================================
   MAIN DOCUMENT
   ========================================= */

.prs-document-main {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 300px;
    height: 395px;

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

    padding: 30px;

    overflow: hidden;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(67, 183, 218, .07),
            transparent 28%
        ),
        linear-gradient(
            160deg,
            #ffffff,
            #f5fafc
        );

    border:
        1px solid rgba(55,115,150,.10);

    box-shadow:
        0 31px 78px rgba(29,83,111,.16),
        0 0 45px rgba(46,167,210,.07);

    z-index: 5;

    animation:
        prsDocumentBreath 5.8s ease-in-out infinite;
}


/* coloured document edge */

.prs-document-main::before {
    content: "";

    position: absolute;

    top: 0;
    left: 30px;

    width: 52px;
    height: 3px;

    border-radius: 0 0 3px 3px;

    background:
        linear-gradient(
            90deg,
            #28a7d3,
            #48b89d,
            #dda745
        );
}


/* soft internal glow */

.prs-document-main::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -90px;
    bottom: -95px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(42,165,211,.09),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================
   DOCUMENT CONTENT
   ========================================= */

.prs-document-top {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;

    color: #7e94a1;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .12em;
}

.prs-document-title {
    position: relative;
    z-index: 2;

    max-width: 100%;

    margin-top: 75px;

    color: #234e69;

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

    line-height: 1.15;
}

.prs-document-title strong {
    display: block;

    margin-top: 10px;

    color: #218dcc;

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

    line-height: 1.15;
    letter-spacing: 0;

    white-space: nowrap;
}

.prs-document-line {
    position: relative;
    z-index: 2;

    height: 6px;

    margin-top: 28px;

    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            #dceaf1,
            #e7f2f6
        );
}

.prs-document-line.short {
    width: 68%;
}

.prs-document-bottom {
    position: absolute;

    right: 28px;
    bottom: 25px;

    color: #bc9142;

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

    z-index: 2;
}


/* =========================================
   LANGUAGE BADGES
   ========================================= */

.prs-language-badge {
    position: absolute;

    width: 48px;
    height: 48px;

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

    border-radius: 15px;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid rgba(255,255,255,.9);

    color: #286681;

    font-size: 10px;
    font-weight: 900;

    box-shadow:
        0 14px 35px rgba(34,79,105,.09);

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

    z-index: 4;

    transition:
        transform .24s ease,
        box-shadow .24s ease;

    animation:
        prsLanguageFloat 5s ease-in-out infinite;
}

.prs-language-badge::before {
    content: "";

    position: absolute;

    left: 11px;
    top: -1px;

    width: 20px;
    height: 2px;

    border-radius: 2px;

    background: #2da8d4;
}

.prs-language-badge:hover {
    transform:
        translateY(-4px)
        scale(1.04);

    box-shadow:
        0 21px 43px rgba(34,79,105,.14);
}


/* =========================================
   INDIVIDUAL LANGUAGES
   ========================================= */

.prs-badge-ru {
    left: 6%;
    top: 13%;

    animation-delay: -.4s;
}

.prs-badge-ru::before {
    background: #2da8d4;
}


.prs-badge-en {
    right: 8%;
    top: 9%;

    animation-delay: -1s;
}

.prs-badge-en::before {
    background: #4bb891;
}


.prs-badge-sk {
    right: 0;
    top: 41%;

    animation-delay: -1.7s;
}

.prs-badge-sk::before {
    background: #d7a445;
}


.prs-badge-fr {
    right: 12%;
    bottom: 9%;

    animation-delay: -2.3s;
}

.prs-badge-fr::before {
    background: #7770d7;
}


.prs-badge-nl {
    left: 12%;
    bottom: 8%;

    animation-delay: -2.9s;
}

.prs-badge-nl::before {
    background: #37a6c8;
}


.prs-badge-kk {
    left: 0;
    top: 43%;

    animation-delay: -3.5s;
}

.prs-badge-kk::before {
    background: #d2a244;
}


.prs-badge-ky {
    left: 22%;
    top: 4%;

    animation-delay: -4.1s;
}

.prs-badge-ky::before {
    background: #49b893;
}


.prs-badge-ta {
    right: 25%;
    bottom: 1%;

    animation-delay: -4.7s;
}

.prs-badge-ta::before {
    background: #756bd1;
}


/* =========================================
   MOTION
   ========================================= */

@keyframes prsLanguageFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -7px;
    }
}


@keyframes prsDocumentBreath {

    0%,
    100% {
        box-shadow:
            0 31px 78px rgba(29,83,111,.16),
            0 0 40px rgba(46,167,210,.06);
    }

    50% {
        box-shadow:
            0 35px 84px rgba(29,83,111,.18),
            0 0 60px rgba(46,167,210,.14);
    }
}


/* =========================================
   RESPONSIVE — HERO
   ========================================= */

@media (max-width: 1100px) {

    .prs-hero-layout {
        grid-template-columns: 1fr;

        gap: 25px;

        padding:
            55px 0
            85px;
    }

    .prs-hero-copy {
        max-width: 780px;
    }

    .prs-hero-visual {
        width: min(650px, 100%);

        min-height: 560px;

        margin: 0 auto;
    }
}


@media (max-width: 650px) {

    .prs-hero {
        min-height: auto;
    }

    .prs-hero-layout {
        min-height: auto;

        padding:
            55px 0
            75px;
    }

    .prs-hero-copy h1 {
        font-size:
            clamp(45px, 13vw, 60px);
    }

    .prs-hero-copy p {
        font-size: 16px;
        line-height: 1.65;
    }

    .prs-hero-actions {
        margin-top: 30px;

        gap: 10px;
    }

    .prs-hero-visual {
        min-height: 500px;

        width: 108%;

        margin-left: -4%;
    }

    .prs-hero-visual::before {
        width: 390px;
        height: 390px;
    }

    .prs-hero-visual::after {
        width: 335px;
        height: 335px;

        box-shadow:
            0 0 0 45px rgba(40,157,204,.017),
            0 0 0 46px rgba(40,157,204,.06);
    }

    .prs-document-main {
        width: 235px;
        height: 315px;

        padding: 23px;

        border-radius: 22px;
    }

    .prs-document-title {
        margin-top: 54px;

        font-size: 20px;
    }

    .prs-document-title strong {
        font-size: 17px;
    }

    .prs-document-line {
        margin-top: 21px;
    }

    .prs-language-badge {
        width: 40px;
        height: 40px;

        border-radius: 13px;

        font-size: 8px;
    }

    .prs-badge-ru {
        left: 3%;
    }

    .prs-badge-en {
        right: 5%;
    }

    .prs-badge-sk {
        right: -1%;
    }

    .prs-badge-kk {
        left: -1%;
    }

    .prs-badge-fr {
        right: 6%;
    }

    .prs-badge-nl {
        left: 7%;
    }
}


/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .prs-document-main,
    .prs-language-badge {
        animation: none;
    }

    .prs-language-badge {
        transition: none;
    }

    .prs-language-badge:hover {
        transform: none;
    }
}


/* =========================================
   LIBRARY — PRESENTATION LANGUAGES
   ========================================= */

.prs-library-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0 140px;

    background:
        radial-gradient(
            circle at 91% 12%,
            rgba(48, 166, 211, .09),
            transparent 24%
        ),
        radial-gradient(
            circle at 7% 88%,
            rgba(215, 166, 70, .07),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfd 100%
        );
}

.prs-library-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(55,129,174,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55,129,174,.04) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );

    mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );
}

.prs-library-section .prs-container {
    position: relative;
    z-index: 2;
}


/* =========================================
   LIBRARY HEADING
   ========================================= */

.prs-library-heading {
    margin-bottom: 64px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;
}

.prs-library-heading > div:first-child {
    max-width: 880px;
}

.prs-library-heading h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(40px, 4.2vw, 63px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.prs-library-heading h2 span {
    display: block;

    color: #218dcc;
}

.prs-library-heading p {
    max-width: 780px;

    margin: 25px 0 0;

    color: #687f90;

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


/* =========================================
   LIBRARY COUNTER
   ========================================= */

.prs-library-status {
    position: relative;
    overflow: hidden;

    min-width: 190px;

    padding: 22px 25px;

    text-align: center;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(43, 168, 211, .11),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #edf8fc,
            #ffffff
        );

    border:
        1px solid rgba(55,115,150,.11);

    box-shadow:
        0 15px 38px rgba(34,78,104,.055);
}

.prs-library-status::before {
    content: "";

    position: absolute;

    left: 22px;
    top: 0;

    width: 42px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #28a5d1,
            #47b99a,
            #d6a345
        );
}

.prs-library-status span {
    display: block;

    color: #7e98a7;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .13em;
}

.prs-library-status strong {
    display: block;

    margin-top: 8px;

    color: #218dcc;

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

.prs-library-status small {
    display: block;

    margin-top: 7px;

    color: #8599a5;

    font-size: 9px;
}


/* =========================================
   CARDS GRID
   ========================================= */

.prs-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


/* =========================================
   PRESENTATION CARD
   ========================================= */

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

    min-height: 370px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(45, 162, 207, .045),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(55,115,150,.10);

    box-shadow:
        0 16px 40px rgba(34,78,104,.05);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease;
}

.prs-card::before {
    content: "";

    position: absolute;

    left: 25px;
    top: 0;

    width: 46px;
    height: 2px;

    border-radius: 0 0 3px 3px;

    background: #28a3d0;

    opacity: .9;

    transition:
        width .28s ease;
}

.prs-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(39, 143, 194, .20);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(45, 162, 207, .075),
            transparent 36%
        ),
        #ffffff;

    box-shadow:
        0 27px 58px rgba(34,78,104,.10);
}

.prs-card:hover::before {
    width: 72px;
}


/* =========================================
   INDIVIDUAL LANGUAGE ACCENTS
   ========================================= */

.prs-card:nth-child(1)::before {
    background: #29a4d1;
}

.prs-card:nth-child(2)::before {
    background: #48b891;
}

.prs-card:nth-child(3)::before {
    background: #d4a246;
}

.prs-card:nth-child(4)::before {
    background: #746dd1;
}

.prs-card:nth-child(5)::before {
    background: #38a7c7;
}

.prs-card:nth-child(6)::before {
    background: #d0a044;
}

.prs-card:nth-child(7)::before {
    background: #49b695;
}

.prs-card:nth-child(8)::before {
    background: #766ed1;
}


/* =========================================
   LANGUAGE CODE
   ========================================= */

.prs-card-code {
    position: relative;

    width: 50px;
    height: 50px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #e7f5fa,
            #f2fafc
        );

    border:
        1px solid rgba(46,145,188,.07);

    color: #2589b8;

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

    box-shadow:
        inset 0 0 20px rgba(47,161,205,.025);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.prs-card:hover .prs-card-code {
    transform:
        translateY(-2px)
        scale(1.04);

    box-shadow:
        0 9px 20px rgba(38,126,166,.08);
}


/* individual code colours */

.prs-card:nth-child(2) .prs-card-code,
.prs-card:nth-child(7) .prs-card-code {
    background:
        linear-gradient(
            145deg,
            #eaf8f3,
            #f6fcf9
        );

    color: #31886c;
}

.prs-card:nth-child(3) .prs-card-code,
.prs-card:nth-child(6) .prs-card-code {
    background:
        linear-gradient(
            145deg,
            #fbf5e8,
            #fffdf8
        );

    color: #a77b29;
}

.prs-card:nth-child(4) .prs-card-code,
.prs-card:nth-child(8) .prs-card-code {
    background:
        linear-gradient(
            145deg,
            #f0effb,
            #fafaff
        );

    color: #6861b8;
}


/* =========================================
   CARD CONTENT
   ========================================= */

.prs-card-main {
    margin-top: 27px;
}

.prs-card-main > span {
    color: #9aacb7;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .14em;
}

.prs-card-main h3 {
    margin: 7px 0 0;

    color: #214f6c;

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

.prs-card-main p {
    margin: 14px 0 0;

    color: #728694;

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


/* =========================================
   META
   ========================================= */

.prs-card-meta {
    margin-top: 24px;

    padding-top: 17px;

    display: flex;

    gap: 20px;

    border-top:
        1px solid rgba(62,118,150,.07);
}

.prs-card-meta span {
    color: #98a9b4;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .08em;
}

.prs-card-meta strong {
    display: block;

    margin-top: 5px;

    color: #4c7388;

    font-size: 8px;
}


/* =========================================
   DOWNLOAD BUTTON
   ========================================= */

.prs-download {
    position: relative;
    overflow: hidden;

    min-height: 42px;

    margin-top: auto;

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

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            #1687bc,
            #27a5ca
        );

    color: white;

    font-size: 9px;
    font-weight: 900;

    box-shadow:
        0 9px 22px rgba(25,137,187,.13);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.prs-download::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 45%;
    height: 100%;

    transform: skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transition:
        left .55s ease;
}

.prs-card:hover .prs-download {
    transform: translateY(-2px);

    box-shadow:
        0 13px 27px rgba(25,137,187,.20);
}

.prs-card:hover .prs-download::before {
    left: 125%;
}


/* =========================================
   RESPONSIVE — LIBRARY
   ========================================= */

@media (max-width: 1200px) {

    .prs-cards-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 850px) {

    .prs-library-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 30px;
    }

    .prs-library-status {
        min-width: 170px;
    }
}


@media (max-width: 650px) {

    .prs-library-section {
        padding:
            85px 0
            95px;
    }

    .prs-library-heading {
        margin-bottom: 45px;
    }

    .prs-library-heading h2 {
        font-size: 38px;
    }

    .prs-library-heading p {
        font-size: 16px;
    }

    .prs-cards-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .prs-card {
        min-height: 345px;

        padding: 23px;
    }

    .prs-card::before {
        left: 23px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .prs-card,
    .prs-card-code,
    .prs-download,
    .prs-download::before {
        transition: none;
    }

    .prs-card:hover,
    .prs-card:hover .prs-card-code,
    .prs-card:hover .prs-download {
        transform: none;
    }
}


/* =========================================
   USE FLOW
   ========================================= */

.prs-use-section {
    padding: 125px 0;

    background:
        linear-gradient(
            180deg,
            #f2f8fb,
            #f9fcfe
        );
}

.prs-use-heading {
    max-width: 900px;

    margin-bottom: 55px;
}

.prs-use-heading h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(40px, 4.2vw, 63px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.prs-use-heading h2 span {
    display: block;

    color: #218dcc;
}

.prs-use-flow {
    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 13px;

    align-items: stretch;
}

.prs-use-step {
    min-height: 145px;

    padding: 22px;

    border-radius: 20px;

    background: white;

    border:
        1px solid rgba(55,115,150,.10);
}

.prs-use-step span {
    color: #a4b4bf;

    font-size: 9px;
    font-weight: 900;
}

.prs-use-step strong {
    display: block;

    margin-top: 28px;

    color: #285c79;

    font-size: 11px;
}

.prs-use-step small {
    display: block;

    margin-top: 8px;

    color: #7c909c;

    font-size: 9px;
}

.prs-use-flow > i {
    display: flex;
    align-items: center;

    color: #c49a4e;

    font-style: normal;
}

.prs-use-result {
    background:
        linear-gradient(
            145deg,
            #edf9f4,
            #ffffff
        );
}

.prs-use-result strong {
    color: #27785f;
}


/* =========================================
   EXPANSION
   ========================================= */

.prs-expansion-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0;

    color: white;

    background:
        radial-gradient(
            circle at 79% 48%,
            rgba(69, 194, 225, .20),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 12%,
            rgba(63, 194, 168, .10),
            transparent 23%
        ),
        linear-gradient(
            125deg,
            #112f48,
            #175d7c 55%,
            #187f91
        );
}

/* едва заметная глубина фона */

.prs-expansion-section::before {
    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    right: 9%;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border:
        1px solid rgba(126, 219, 239, .055);

    box-shadow:
        inset 0 0 0 70px rgba(104, 213, 232, .018),
        inset 0 0 0 140px rgba(104, 213, 232, .012);

    pointer-events: none;
}

.prs-expansion-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr .8fr;

    gap: 80px;

    align-items: center;
}


/* =========================================
   COPY
   ========================================= */

.prs-expansion-layout h2 {
    margin: 16px 0 0;

    color: #ffffff;

    font-size: clamp(40px, 4.2vw, 62px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.prs-expansion-layout h2 span {
    display: block;

    color: #8ddbef;
}

.prs-expansion-layout p {
    max-width: 700px;

    margin: 24px 0 0;

    color: #c4dbe5;

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


/* =========================================
   LANGUAGE NETWORK VISUAL
   ========================================= */

.prs-expansion-visual {
    position: relative;

    min-height: 250px;

    display: flex;

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

    gap: 28px;
}


/* общая линия между узлами */

.prs-expansion-visual::before {
    content: "";

    position: absolute;

    left: 22%;
    right: 22%;

    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(119, 219, 237, .18),
            rgba(224, 186, 97, .45),
            rgba(96, 211, 174, .20),
            transparent
        );

    z-index: 0;
}


/* =========================================
   CURRENT LANGUAGES
   ========================================= */

.prs-expansion-core {
    position: relative;
    z-index: 2;

    width: 176px;
    height: 176px;

    flex: 0 0 176px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    text-align: center;

    background:
        radial-gradient(
            circle at 34% 24%,
            #8ee0f7 0%,
            #47b7d7 22%,
            #2789af 53%,
            #174762 100%
        );

    border:
        1px solid rgba(156, 228, 243, .20);

    box-shadow:
        0 28px 65px rgba(4, 32, 49, .25),
        0 0 50px rgba(70, 192, 222, .09);

    animation:
        prs-language-breathe 5.2s ease-in-out infinite;
}


/* дополнительное кольцо */

.prs-expansion-core::before {
    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border:
        1px solid rgba(139, 221, 239, .16);

    pointer-events: none;
}


/* внешнее слабое кольцо */

.prs-expansion-core::after {
    content: "";

    position: absolute;

    inset: -28px;

    border-radius: 50%;

    border:
        1px solid rgba(139, 221, 239, .07);

    pointer-events: none;
}


/* =========================================
   FUTURE LANGUAGES
   ========================================= */

.prs-expansion-future {
    position: relative;
    z-index: 2;

    width: 176px;
    height: 176px;

    flex: 0 0 176px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    text-align: center;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(81, 199, 166, .25),
            rgba(46, 160, 137, .14) 50%,
            rgba(25, 111, 111, .12) 100%
        );

    border:
        1px solid rgba(112, 220, 187, .23);

    box-shadow:
        0 22px 55px rgba(3, 35, 43, .13),
        0 0 42px rgba(71, 203, 167, .055);

    animation:
        prs-future-breathe 5.2s ease-in-out infinite;
    animation-delay: 1.1s;
}

.prs-expansion-future::before {
    content: "";

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    border:
        1px solid rgba(101, 213, 181, .08);

    pointer-events: none;
}


/* =========================================
   TEXT INSIDE CIRCLES
   ========================================= */

.prs-expansion-core small,
.prs-expansion-future small {
    position: relative;
    z-index: 2;

    color: #9adbed;

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

    letter-spacing: .13em;
}

.prs-expansion-future small {
    color: #9edfcf;
}

.prs-expansion-core strong,
.prs-expansion-future strong {
    position: relative;
    z-index: 2;

    margin-top: 7px;

    color: #ffffff;

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

    letter-spacing: -.025em;
}

.prs-expansion-core span,
.prs-expansion-future span {
    position: relative;
    z-index: 2;

    margin-top: 7px;

    color: #e8c56f;

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


/* =========================================
   PLUS / CONNECTION
   ========================================= */

.prs-expansion-next {
    position: relative;
    z-index: 3;

    width: 34px;
    height: 34px;

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

    color: #e4bb59;

    font-size: 27px;
    font-style: normal;
    font-weight: 400;

    text-shadow:
        0 0 18px rgba(228, 187, 89, .18);

    animation:
        prs-plus-pulse 3.6s ease-in-out infinite;
}


/* =========================================
   MOTION
   ========================================= */

@keyframes prs-language-breathe {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 28px 65px rgba(4, 32, 49, .25),
            0 0 45px rgba(70, 192, 222, .08);
    }

    50% {
        transform: scale(1.018);

        box-shadow:
            0 31px 72px rgba(4, 32, 49, .27),
            0 0 62px rgba(70, 192, 222, .15);
    }
}


@keyframes prs-future-breathe {

    0%,
    100% {
        transform: scale(1);

        border-color:
            rgba(112, 220, 187, .20);
    }

    50% {
        transform: scale(1.012);

        border-color:
            rgba(112, 220, 187, .34);
    }
}


@keyframes prs-plus-pulse {

    0%,
    100% {
        opacity: .72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}


/* =========================================
   RESPONSIVE — EXPANSION
   ========================================= */

@media (max-width: 1100px) {

    .prs-expansion-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .prs-expansion-visual {
        justify-content: flex-start;

        padding-left: 25px;
    }

    .prs-expansion-section::before {
        right: 18%;
    }
}


@media (max-width: 650px) {

    .prs-expansion-section {
        padding: 90px 0;
    }

    .prs-expansion-layout h2 {
        font-size: 38px;
    }

    .prs-expansion-visual {
        min-height: 200px;

        padding-left: 0;

        gap: 17px;

        justify-content: center;

        transform: none;
    }

    .prs-expansion-core,
    .prs-expansion-future {
        width: 128px;
        height: 128px;

        flex-basis: 128px;
    }

    .prs-expansion-core strong,
    .prs-expansion-future strong {
        font-size: 30px;
    }

    .prs-expansion-next {
        width: 24px;

        font-size: 22px;
    }

    .prs-expansion-section::before {
        width: 330px;
        height: 330px;

        right: -80px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .prs-expansion-core,
    .prs-expansion-future,
    .prs-expansion-next {
        animation: none;
    }
}


/* =========================================
   REPRESENTATIVE CTA
   ========================================= */

.prs-representative-section {
    position: relative;

    padding: 35px 0 130px;

    background:
        radial-gradient(
            circle at 12% 88%,
            rgba(215, 169, 72, .055),
            transparent 24%
        ),
        #ffffff;
}

.prs-representative-card {
    position: relative;
    overflow: hidden;

    min-height: 190px;

    padding: 38px 42px;

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

    gap: 42px;

    border-radius: 28px;

    color: white;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(103, 217, 236, .22),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(69, 160, 205, .10),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            #12364f 0%,
            #176181 52%,
            #2090a8 100%
        );

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 28px 70px rgba(20,75,106,.18);

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

/* мягкое свечение справа */

.prs-representative-card::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -110px;
    top: -135px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(133,225,241,.14),
            transparent 68%
        );

    pointer-events: none;
}

/* тонкий фирменный акцент */

.prs-representative-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 42px;

    width: 72px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #59d0e8,
            #4bc39d,
            #d8aa4d
        );
}

.prs-representative-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 34px 82px rgba(20,75,106,.23);
}


/* =========================================
   CTA TEXT
   ========================================= */

.prs-representative-card > div:first-child {
    position: relative;
    z-index: 2;
}

.prs-representative-card small {
    display: block;

    color: #91dcef;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .18em;
}

.prs-representative-card strong {
    display: block;

    max-width: 760px;

    margin-top: 11px;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.3;
}

.prs-representative-card p {
    max-width: 700px;

    margin: 11px 0 0;

    color: #c8dee7;

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


/* =========================================
   CTA ACTIONS
   ========================================= */

.prs-representative-actions {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 10px;

    flex: 0 0 auto;
}

.prs-representative-primary,
.prs-representative-secondary {
    position: relative;
    overflow: hidden;

    min-height: 48px;

    padding: 0 21px;

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

    white-space: nowrap;

    border-radius: 24px;

    font-size: 10px;
    font-weight: 900;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        border-color .22s ease;
}


/* PRIMARY */

.prs-representative-primary {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f8fb
        );

    color: #17627f;

    border:
        1px solid rgba(255,255,255,.55);

    box-shadow:
        0 11px 24px rgba(9,53,73,.14);
}

.prs-representative-primary:hover {
    transform: translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 15px 30px rgba(9,53,73,.20);
}


/* SECONDARY */

.prs-representative-secondary {
    color: #ffffff;

    border:
        1px solid rgba(255,255,255,.27);

    background:
        rgba(255,255,255,.025);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.prs-representative-secondary:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255,255,255,.43);

    background:
        rgba(255,255,255,.07);

    box-shadow:
        0 12px 26px rgba(8,49,68,.12);
}


/* лёгкий блик по основной кнопке */

.prs-representative-primary::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 42%;
    height: 100%;

    transform: skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transition:
        left .55s ease;
}

.prs-representative-card:hover
.prs-representative-primary::before {
    left: 125%;
}


/* =========================================
   RESPONSIVE — REPRESENTATIVE CTA
   ========================================= */

@media (max-width: 900px) {

    .prs-representative-card {
        flex-direction: column;
        align-items: flex-start;

        padding: 36px;
    }

    .prs-representative-actions {
        width: 100%;
    }
}

@media (max-width: 650px) {

    .prs-representative-section {
        padding:
            25px 0
            95px;
    }

    .prs-representative-card {
        min-height: auto;

        padding: 30px;

        gap: 28px;

        border-radius: 24px;
    }

    .prs-representative-card::after {
        left: 30px;
    }

    .prs-representative-card strong {
        font-size: 20px;
    }

    .prs-representative-card p {
        font-size: 12px;
    }

    .prs-representative-actions {
        flex-direction: column;

        width: 100%;
    }

    .prs-representative-primary,
    .prs-representative-secondary {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .prs-representative-card,
    .prs-representative-primary,
    .prs-representative-secondary,
    .prs-representative-primary::before {
        transition: none;
    }

    .prs-representative-card:hover,
    .prs-representative-primary:hover,
    .prs-representative-secondary:hover {
        transform: none;
    }
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {

    .prs-hero-layout,
    .prs-expansion-layout {
        grid-template-columns: 1fr;
    }

    .prs-hero-visual {
        margin-bottom: 60px;
    }

    .prs-library-heading {
        flex-direction: column;

        align-items: flex-start;
    }

    .prs-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .prs-use-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .prs-use-flow > i {
        display: none;
    }
}


@media (max-width: 650px) {

    .prs-hero {
        min-height: auto;
    }

    .prs-hero-layout {
        min-height: auto;

        padding: 90px 0;
    }

    .prs-hero-copy h1 {
        font-size: 44px;
    }

    .prs-library-section,
    .prs-use-section,
    .prs-expansion-section {
        padding: 90px 0;
    }

    .prs-cards-grid,
    .prs-use-flow {
        grid-template-columns: 1fr;
    }

    .prs-expansion-visual {
        transform: scale(.80);
    }

    .prs-representative-card {
        flex-direction: column;

        align-items: flex-start;
    }

    .prs-representative-actions {
        width: 100%;

        flex-direction: column;
    }
}

/* =========================================
   CONTACT PAGE
   ========================================= */

.ct-container {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.ct-kicker {
    color: #248dca;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .20em;
}

.ct-kicker-light {
    color: #91d9ed;
}


/* =========================================
   HERO — CONTACT
   ========================================= */

.ct-hero {
    position: relative;
    overflow: hidden;

    min-height: 680px;

    background:
        radial-gradient(
            circle at 76% 31%,
            rgba(71, 188, 228, .22),
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(74, 193, 160, .08),
            transparent 24%
        ),
        radial-gradient(
            circle at 16% 84%,
            rgba(220, 174, 76, .13),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8fcff 0%,
            #edf8fd 55%,
            #fffdf8 100%
        );
}


/* технологическая сетка */

.ct-hero-bg {
    position: absolute;
    inset: 0;

    opacity: .40;

    background-image:
        linear-gradient(
            rgba(55,129,174,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55,129,174,.05) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.80),
            transparent 95%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.80),
            transparent 95%
        );
}


/* большое атмосферное поле справа */

.ct-hero::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: 3%;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(84,197,229,.10) 0%,
            rgba(61,171,211,.035) 48%,
            transparent 70%
        );

    border:
        1px solid rgba(76,174,216,.05);

    pointer-events: none;
}


/* =========================================
   HERO LAYOUT
   ========================================= */

.ct-hero-layout {
    position: relative;
    z-index: 2;

    min-height: 680px;

    display: grid;
    grid-template-columns: 1fr .75fr;

    gap: 90px;

    align-items: center;
}


/* =========================================
   HERO COPY
   ========================================= */

.ct-hero-copy {
    position: relative;
    z-index: 3;
}

.ct-hero-copy .ct-kicker {
    position: relative;

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

    gap: 12px;
}

.ct-hero-copy .ct-kicker::before {
    content: "";

    width: 27px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #2aa3d4,
            #d2a54c
        );
}

.ct-hero-copy h1 {
    max-width: 800px;

    margin: 18px 0 0;

    color: #173752;

    font-size: clamp(55px, 5.2vw, 80px);
    line-height: .99;

    letter-spacing: -.045em;
}

.ct-hero-copy h1 span {
    display: block;

    margin-top: 8px;

    color: #218fcd;
}

.ct-hero-copy p {
    max-width: 720px;

    margin: 30px 0 0;

    color: #60798a;

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

.ct-hero-actions {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}


/* =========================================
   MAIN CONTACT CARD
   ========================================= */

.ct-main-card {
    position: relative;
    overflow: hidden;

    min-height: 390px;

    padding: 32px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    border-radius: 30px;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.98),
            rgba(247,252,254,.94)
        );

    border:
        1px solid rgba(55,115,150,.11);

    box-shadow:
        0 30px 75px rgba(28,83,111,.13),
        0 0 0 1px rgba(255,255,255,.55) inset;

    transition:
        transform .30s ease,
        box-shadow .30s ease;
}


/* мягкое свечение внутри карточки */

.ct-main-card::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -90px;
    top: -95px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(81,196,226,.12),
            transparent 68%
        );

    pointer-events: none;
}


/* фирменная линия */

.ct-main-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 32px;

    width: 68px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #32abd7,
            #45be9a,
            #d6a749
        );
}

.ct-main-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 38px 90px rgba(28,83,111,.17),
        0 0 0 1px rgba(255,255,255,.62) inset;
}


/* =========================================
   CARD TOP
   ========================================= */

.ct-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ct-card-top span {
    color: #218bc0;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .15em;
}

.ct-card-top small {
    color: #8b9da8;

    font-size: 8px;

    letter-spacing: .13em;
}


/* =========================================
   CONTACT CORE
   ========================================= */

.ct-card-center {
    position: relative;
    z-index: 2;

    text-align: center;
}


/* внешнее поле вокруг @ */

.ct-card-center::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 37px;

    width: 126px;
    height: 126px;

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

    border-radius: 50%;

    border:
        1px solid rgba(40,157,204,.09);

    pointer-events: none;

    animation:
        ct-contact-ring 5s ease-in-out infinite;
}


.ct-contact-symbol {
    position: relative;
    z-index: 2;

    width: 82px;
    height: 82px;

    margin: 0 auto 22px;

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

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle at 34% 24%,
            #8cddf5 0%,
            #3bafd3 30%,
            #1686bc 65%,
            #176180 100%
        );

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

    border:
        1px solid rgba(255,255,255,.38);

    box-shadow:
        0 18px 40px rgba(31,145,191,.22),
        0 0 0 10px rgba(45,170,214,.035);

    animation:
        ct-contact-breathe 4.8s ease-in-out infinite;
}

.ct-card-center strong {
    display: block;

    color: #194c6b;

    font-size: 23px;

    overflow-wrap: anywhere;
}

.ct-card-center p {
    margin: 9px 0 0;

    color: #7b8e99;

    font-size: 11px;
}


/* =========================================
   MAIL BUTTON
   ========================================= */

.ct-mail-button {
    position: relative;
    z-index: 2;
    overflow: hidden;

    min-height: 48px;

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

    border-radius: 24px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #176f99,
            #219bbd 58%,
            #25a9c6
        );

    box-shadow:
        0 13px 30px rgba(25,126,165,.17);

    font-size: 10px;
    font-weight: 900;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


/* блик */

.ct-mail-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -60%;

    width: 35%;
    height: 100%;

    transform: skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.34),
            transparent
        );

    transition:
        left .55s ease;
}

.ct-mail-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 17px 36px rgba(25,126,165,.23);
}

.ct-mail-button:hover::before {
    left: 125%;
}


/* =========================================
   MOTION — CONTACT HERO
   ========================================= */

@keyframes ct-contact-breathe {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 18px 40px rgba(31,145,191,.22),
            0 0 0 10px rgba(45,170,214,.035);
    }

    50% {
        transform: scale(1.025);

        box-shadow:
            0 23px 50px rgba(31,145,191,.28),
            0 0 0 16px rgba(45,170,214,.025);
    }
}


@keyframes ct-contact-ring {

    0%,
    100% {
        opacity: .45;

        transform:
            translate(-50%, -50%)
            scale(.94);
    }

    50% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.06);
    }
}


/* =========================================
   RESPONSIVE — CONTACT HERO
   ========================================= */

@media (max-width: 1100px) {

    .ct-hero-layout {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 80px 0;
    }

    .ct-main-card {
        width: min(620px, 100%);

        margin: 0 auto 20px;
    }

    .ct-hero::after {
        right: 15%;
    }
}


@media (max-width: 650px) {

    .ct-hero {
        min-height: auto;
    }

    .ct-hero-layout {
        min-height: auto;

        padding: 75px 0;

        gap: 42px;
    }

    .ct-hero-copy .ct-kicker::before {
        display: none;
    }

    .ct-hero-copy h1 {
        font-size: 44px;
    }

    .ct-hero-copy p {
        font-size: 17px;
    }

    .ct-hero-actions {
        gap: 10px;
    }

    .ct-main-card {
        min-height: 350px;

        padding: 27px;

        border-radius: 25px;
    }

    .ct-main-card::after {
        left: 27px;
    }

    .ct-contact-symbol {
        width: 72px;
        height: 72px;

        font-size: 30px;
    }

    .ct-card-center::before {
        width: 108px;
        height: 108px;

        top: 32px;
    }

    .ct-card-center strong {
        font-size: 19px;
    }

    .ct-mail-button {
        min-height: 46px;
    }

    .ct-hero::after {
        width: 390px;
        height: 390px;

        right: -160px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ct-contact-symbol,
    .ct-card-center::before {
        animation: none;
    }

    .ct-main-card,
    .ct-mail-button,
    .ct-mail-button::before {
        transition: none;
    }

    .ct-main-card:hover,
    .ct-mail-button:hover {
        transform: none;
    }
}


/* =========================================
   COMMON HEADING
   ========================================= */

.ct-heading {
    position: relative;

    max-width: 920px;

    margin-bottom: 60px;
}

.ct-heading .ct-kicker {
    position: relative;

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

    gap: 12px;
}

.ct-heading .ct-kicker::before {
    content: "";

    width: 27px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #2aa3d4,
            #d2a54c
        );
}

.ct-heading h2,
.ct-topics-copy h2,
.ct-message-layout h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(40px, 4.2vw, 63px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.ct-heading h2 span,
.ct-topics-copy h2 span,
.ct-message-layout h2 span {
    display: block;

    margin-top: 5px;

    color: #218dcc;
}

.ct-heading p,
.ct-message-layout > div:first-child > p {
    max-width: 800px;

    margin: 25px 0 0;

    color: #687f90;

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


/* =========================================
   OPTIONS
   ========================================= */

.ct-options-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0 135px;

    background:
        radial-gradient(
            circle at 91% 17%,
            rgba(65, 174, 216, .075),
            transparent 24%
        ),
        radial-gradient(
            circle at 8% 84%,
            rgba(218, 170, 73, .055),
            transparent 23%
        ),
        #ffffff;
}


/* едва заметное световое поле */

.ct-options-section::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -170px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(76, 183, 222, .07),
            transparent 67%
        );

    pointer-events: none;
}


.ct-options-grid {
    position: relative;
    z-index: 2;

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

    gap: 20px;
}


/* =========================================
   OPTION CARD
   ========================================= */

.ct-option-card {
    position: relative;
    overflow: hidden;

    min-height: 310px;

    padding: 30px;

    display: flex;
    flex-direction: column;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(250,253,255,.98),
            rgba(255,255,255,.98)
        );

    border:
        1px solid rgba(55,115,150,.11);

    box-shadow:
        0 16px 40px rgba(34,78,104,.05);

    transition:
        transform .27s ease,
        box-shadow .27s ease,
        border-color .27s ease,
        background .27s ease;
}


/* верхняя цветовая линия */

.ct-option-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 30px;

    width: 48px;
    height: 2px;

    border-radius: 0 0 2px 2px;

    background:
        #31a7d4;

    transition:
        width .28s ease;
}


/* мягкое пятно внутри карточки */

.ct-option-card::after {
    content: "";

    position: absolute;

    right: -75px;
    bottom: -85px;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47,166,215,.08),
            transparent 68%
        );

    pointer-events: none;
}


/* карточка 02 */

.ct-option-card:nth-child(2)::before {
    background: #42b88d;
}

.ct-option-card:nth-child(2)::after {
    background:
        radial-gradient(
            circle,
            rgba(65,185,142,.095),
            transparent 68%
        );
}


/* карточка 03 */

.ct-option-card:nth-child(3)::before {
    background: #d6a648;
}

.ct-option-card:nth-child(3)::after {
    background:
        radial-gradient(
            circle,
            rgba(218,168,69,.10),
            transparent 68%
        );
}


/* hover */

.ct-option-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(40,143,194,.22);

    background:
        #ffffff;

    box-shadow:
        0 27px 58px rgba(34,78,104,.095);
}

.ct-option-card:hover::before {
    width: 78px;
}


/* =========================================
   NUMBER
   ========================================= */

.ct-option-number {
    position: relative;
    z-index: 2;

    color: #8ea6b5;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}

.ct-option-card:nth-child(2) .ct-option-number {
    color: #6fa992;
}

.ct-option-card:nth-child(3) .ct-option-number {
    color: #b4975e;
}


/* =========================================
   ICON
   ========================================= */

.ct-option-icon {
    position: relative;
    z-index: 2;

    width: 52px;
    height: 52px;

    margin-top: 27px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #edf9fd,
            #dff2f9
        );

    color: #2189ba;

    font-size: 19px;
    font-weight: 900;

    box-shadow:
        0 10px 24px rgba(38,139,185,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* card 02 icon */

.ct-option-card:nth-child(2) .ct-option-icon {
    color: #268b68;

    background:
        linear-gradient(
            145deg,
            #effbf6,
            #dcf4e9
        );

    box-shadow:
        0 10px 24px rgba(49,157,116,.065);
}


/* card 03 icon */

.ct-option-card:nth-child(3) .ct-option-icon {
    color: #aa7e2c;

    background:
        linear-gradient(
            145deg,
            #fff9eb,
            #f8eccd
        );

    box-shadow:
        0 10px 24px rgba(190,145,54,.065);
}


.ct-option-card:hover .ct-option-icon {
    transform:
        translateY(-2px)
        scale(1.035);

    box-shadow:
        0 14px 30px rgba(38,139,185,.11);
}


/* =========================================
   COPY
   ========================================= */

.ct-option-card h3 {
    position: relative;
    z-index: 2;

    margin: 27px 0 0;

    color: #214f6d;

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

.ct-option-card:nth-child(2) h3 {
    color: #245f55;
}

.ct-option-card:nth-child(3) h3 {
    color: #5d563e;
}

.ct-option-card p {
    position: relative;
    z-index: 2;

    margin: 15px 0 0;

    color: #718694;

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


/* =========================================
   LINK
   ========================================= */

.ct-option-card a {
    position: relative;
    z-index: 2;

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

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

    width: fit-content;

    color: #2589ba;

    font-size: 10px;
    font-weight: 900;

    transition:
        color .20s ease,
        transform .20s ease;
}

.ct-option-card:nth-child(2) a {
    color: #25866a;
}

.ct-option-card:nth-child(3) a {
    color: #aa7c29;
}

.ct-option-card:hover a {
    transform: translateX(4px);
}


/* =========================================
   RESPONSIVE — OPTIONS
   ========================================= */

@media (max-width: 1100px) {

    .ct-options-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .ct-option-card:nth-child(3) {
        grid-column:
            1 / -1;

        width: calc(50% - 10px);

        justify-self: center;
    }
}


@media (max-width: 650px) {

    .ct-options-section {
        padding:
            90px 0
            95px;
    }

    .ct-heading {
        margin-bottom: 48px;
    }

    .ct-heading .ct-kicker::before {
        display: none;
    }

    .ct-heading h2 {
        font-size: 38px;
    }

    .ct-heading p {
        font-size: 16px;
    }

    .ct-options-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .ct-option-card,
    .ct-option-card:nth-child(3) {
        width: auto;

        min-height: 285px;

        padding: 27px;

        grid-column: auto;
    }

    .ct-option-card::before {
        left: 27px;
    }

    .ct-option-icon {
        width: 48px;
        height: 48px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ct-option-card,
    .ct-option-card::before,
    .ct-option-icon,
    .ct-option-card a {
        transition: none;
    }

    .ct-option-card:hover,
    .ct-option-card:hover .ct-option-icon,
    .ct-option-card:hover a {
        transform: none;
    }
}

/* =========================================
   TOPICS
   ========================================= */

.ct-topics-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0;

    color: white;

    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(88, 208, 232, .18),
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(67, 155, 204, .10),
            transparent 25%
        ),
        linear-gradient(
            125deg,
            #112f48 0%,
            #175d7c 55%,
            #187f91 100%
        );
}


/* большие атмосферные кольца справа */

.ct-topics-section::before {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    right: 3%;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border:
        1px solid rgba(128, 221, 238, .045);

    box-shadow:
        inset 0 0 0 85px rgba(105, 211, 231, .018),
        inset 0 0 0 165px rgba(105, 211, 231, .010);

    pointer-events: none;
}


/* лёгкая световая диагональ */

.ct-topics-section::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 1px;

    right: 7%;
    top: 50%;

    transform: rotate(-11deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(126, 221, 238, .08),
            rgba(229, 190, 91, .14),
            transparent
        );

    pointer-events: none;
}


.ct-topics-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 85px;

    align-items: center;
}


/* =========================================
   COPY
   ========================================= */

.ct-topics-copy {
    position: relative;
}

.ct-topics-copy h2 {
    color: white;
}

.ct-topics-copy h2 span {
    color: #8ddbef;
}

.ct-topics-copy p {
    max-width: 650px;

    margin: 25px 0 0;

    color: #c4dbe5;

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


/* =========================================
   TOPICS LIST
   ========================================= */

.ct-topics-list {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 11px;
}


/* вертикальная связь */

.ct-topics-list::before {
    content: "";

    position: absolute;

    left: 22px;
    top: 34px;
    bottom: 34px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(95,211,232,.08),
            rgba(223,183,84,.28),
            rgba(95,211,232,.08)
        );

    z-index: 0;
}


/* =========================================
   TOPIC CARD
   ========================================= */

.ct-topic {
    position: relative;
    overflow: hidden;

    min-height: 84px;

    padding: 17px 21px;

    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 15px;

    align-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.105)
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* бегущий импульс */

.ct-topic::before {
    content: "";

    position: absolute;

    top: 0;
    left: -38%;

    width: 30%;
    height: 100%;

    transform: skewX(-24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(125,224,241,.07),
            rgba(236,196,96,.08),
            transparent
        );

    animation:
        ct-topic-scan 8s ease-in-out infinite;
}


/* цветовая линия */

.ct-topic::after {
    content: "";

    position: absolute;

    left: 0;
    top: 19px;

    width: 2px;
    height: 45px;

    border-radius: 0 2px 2px 0;

    background: #2fa9d6;

    opacity: .75;
}

.ct-topic:nth-child(2)::after {
    background: #42b88d;
}

.ct-topic:nth-child(3)::after {
    background: #8a79d5;
}

.ct-topic:nth-child(4)::after {
    background: #d6a648;
}


/* stagger */

.ct-topic:nth-child(2)::before {
    animation-delay: 1.1s;
}

.ct-topic:nth-child(3)::before {
    animation-delay: 2.2s;
}

.ct-topic:nth-child(4)::before {
    animation-delay: 3.3s;
}


.ct-topic:hover {
    transform: translateX(6px);

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.135)
        );

    border-color:
        rgba(150, 224, 239, .18);

    box-shadow:
        0 14px 34px rgba(5,38,55,.11);
}


/* number */

.ct-topic > span {
    position: relative;
    z-index: 2;

    color: #e0ba61;

    font-size: 9px;
    font-weight: 900;
}


/* copy */

.ct-topic strong {
    position: relative;
    z-index: 2;

    display: block;

    color: #ffffff;

    font-size: 13px;
}

.ct-topic small {
    position: relative;
    z-index: 2;

    display: block;

    margin-top: 5px;

    color: #9fc6d5;

    font-size: 9px;
}


/* =========================================
   TOPICS MOTION
   ========================================= */

@keyframes ct-topic-scan {

    0%,
    68%,
    100% {
        left: -38%;
        opacity: 0;
    }

    72% {
        opacity: 1;
    }

    88% {
        left: 118%;
        opacity: .85;
    }

    92% {
        opacity: 0;
    }
}


/* =========================================
   RESPONSIVE — TOPICS
   ========================================= */

@media (max-width: 1100px) {

    .ct-topics-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .ct-topics-section::before {
        right: -8%;
    }
}


@media (max-width: 650px) {

    .ct-topics-section {
        padding: 90px 0;
    }

    .ct-topics-layout {
        gap: 45px;
    }

    .ct-topic {
        min-height: 78px;

        padding: 15px 17px;

        grid-template-columns: 36px 1fr;
    }

    .ct-topics-list::before {
        left: 18px;
    }

    .ct-topic:hover {
        transform: none;
    }

    .ct-topics-section::before {
        width: 370px;
        height: 370px;

        right: -190px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ct-topic::before {
        animation: none;
    }

    .ct-topic {
        transition: none;
    }

    .ct-topic:hover {
        transform: none;
    }
}


/* =========================================
   FIRST MESSAGE
   ========================================= */

.ct-message-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0;

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(66, 176, 218, .09),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 86%,
            rgba(218, 170, 72, .055),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #f2f8fb 0%,
            #f8fcfe 55%,
            #ffffff 100%
        );
}


/* LIGHT FIELD */

.ct-message-section::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -150px;
    top: -165px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(75, 184, 224, .07),
            transparent 68%
        );

    pointer-events: none;
}


.ct-message-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 80px;

    align-items: center;
}


/* =========================================
   MESSAGE CARD
   ========================================= */

.ct-message-example {
    position: relative;
    overflow: hidden;

    padding: 25px;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(250,253,254,.98)
        );

    border:
        1px solid rgba(55,115,150,.10);

    box-shadow:
        0 20px 50px rgba(34,78,104,.06);

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}


/* фирменная линия сверху */

.ct-message-example::before {
    content: "";

    position: absolute;

    top: 0;
    left: 26px;

    width: 72px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #31a8d5,
            #44bc93,
            #d7a648
        );
}


.ct-message-example:hover {
    transform: translateY(-4px);

    box-shadow:
        0 29px 65px rgba(34,78,104,.09);
}


/* =========================================
   MESSAGE ROW
   ========================================= */

.ct-message-row {
    position: relative;
    overflow: hidden;

    min-height: 80px;

    padding: 15px 18px;

    display: grid;
    grid-template-columns: 40px 1fr auto;

    gap: 8px;

    align-items: center;

    border-bottom:
        1px solid rgba(55,115,150,.08);

    transition:
        background .22s ease,
        transform .22s ease;
}


.ct-message-row:last-child {
    border-bottom: none;
}


/* цветовая метка слева */

.ct-message-row::after {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 2px;
    height: 32px;

    transform: translateY(-50%);

    border-radius: 0 2px 2px 0;

    background: #31a8d5;

    opacity: .35;
}

.ct-message-row:nth-child(2)::after {
    background: #44b98d;
}

.ct-message-row:nth-child(3)::after {
    background: #8373d1;
}

.ct-message-row:nth-child(4)::after {
    background: #d3a345;
}


/* электронный импульс */

.ct-message-row::before {
    content: "";

    position: absolute;

    left: -12px;
    top: 50%;

    width: 6px;
    height: 6px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #36add7;

    box-shadow:
        0 0 13px rgba(54,173,215,.42);

    opacity: 0;

    animation:
        ct-message-pulse 8.5s ease-in-out infinite;
}


.ct-message-row:nth-child(2)::before {
    background: #45b88d;

    box-shadow:
        0 0 13px rgba(69,184,141,.38);

    animation-delay: 1.15s;
}

.ct-message-row:nth-child(3)::before {
    background: #8273d1;

    box-shadow:
        0 0 13px rgba(130,115,209,.32);

    animation-delay: 2.3s;
}

.ct-message-row:nth-child(4)::before {
    background: #d5a443;

    box-shadow:
        0 0 13px rgba(213,164,67,.38);

    animation-delay: 3.45s;
}


.ct-message-row:hover {
    transform: translateX(3px);

    background:
        rgba(237,247,251,.54);
}


/* NUMBER */

.ct-message-row > span {
    position: relative;
    z-index: 2;

    color: #b18a46;

    font-size: 8px;
    font-weight: 900;
}


/* TITLE */

.ct-message-row strong {
    position: relative;
    z-index: 2;

    color: #285874;

    font-size: 12px;
}


/* HINT */

.ct-message-row small {
    position: relative;
    z-index: 2;

    color: #81939e;

    font-size: 9px;
}


/* =========================================
   FINAL ACCENT ROW
   ========================================= */

.ct-message-row-accent {
    margin-top: 7px;

    border-radius: 14px;

    border-bottom: none;

    background:
        radial-gradient(
            circle at 92% 50%,
            rgba(65, 186, 140, .10),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #edf9f4,
            #ffffff
        );
}

.ct-message-row-accent::after {
    opacity: .85;

    background: #41b889;
}

.ct-message-row-accent strong {
    color: #28745d;
}


/* =========================================
   MOTION
   ========================================= */

@keyframes ct-message-pulse {

    0%,
    70%,
    100% {
        left: -12px;
        opacity: 0;
    }

    74% {
        opacity: 1;
    }

    86% {
        left: calc(100% + 12px);
        opacity: .9;
    }

    90% {
        opacity: 0;
    }
}


/* =========================================
   RESPONSIVE — FIRST MESSAGE
   ========================================= */

@media (max-width: 1100px) {

    .ct-message-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }
}


@media (max-width: 650px) {

    .ct-message-section {
        padding: 90px 0;
    }

    .ct-message-example {
        padding: 20px;

        border-radius: 23px;
    }

    .ct-message-example::before {
        left: 20px;
    }

    .ct-message-row {
        min-height: 76px;

        padding: 14px 14px;

        grid-template-columns: 32px 1fr;

        gap: 10px;
    }

    .ct-message-row small {
        grid-column: 2;
    }

    .ct-message-row:hover {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ct-message-row::before {
        animation: none;
    }

    .ct-message-example,
    .ct-message-row {
        transition: none;
    }

    .ct-message-example:hover,
    .ct-message-row:hover {
        transform: none;
    }
}

/* =========================================
   HUMAN CONTACT
   ========================================= */

.ct-human-section {
    position: relative;

    padding: 35px 0 130px;

    background:
        radial-gradient(
            circle at 10% 82%,
            rgba(218, 170, 72, .05),
            transparent 24%
        ),
        #ffffff;
}

.ct-human-card {
    position: relative;
    overflow: hidden;

    min-height: 190px;

    padding: 38px 42px;

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

    gap: 42px;

    border-radius: 28px;

    color: white;

    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(104, 220, 236, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 14% 92%,
            rgba(60, 149, 198, .12),
            transparent 27%
        ),
        linear-gradient(
            115deg,
            #12364f 0%,
            #17627f 52%,
            #2094a9 100%
        );

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 28px 70px rgba(20,75,106,.18);

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}


/* мягкое световое поле справа */

.ct-human-card::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    right: -115px;
    top: -145px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(137,226,241,.15),
            transparent 68%
        );

    pointer-events: none;
}


/* фирменная линия */

.ct-human-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 42px;

    width: 74px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #59d2e9,
            #49c29b,
            #d9aa4d
        );
}

.ct-human-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 35px 82px rgba(20,75,106,.23);
}


/* =========================================
   HUMAN COPY
   ========================================= */

.ct-human-copy {
    position: relative;
    z-index: 2;

    max-width: 760px;
}

.ct-human-copy small {
    display: block;

    color: #91dcef;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .18em;
}

.ct-human-copy strong {
    display: block;

    max-width: 720px;

    margin-top: 11px;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.3;
}

.ct-human-copy p {
    max-width: 700px;

    margin: 11px 0 0;

    color: #c9dfe8;

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


/* =========================================
   HUMAN ACTIONS
   ========================================= */

.ct-human-actions {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 10px;

    flex: 0 0 auto;
}

.ct-human-primary,
.ct-human-secondary {
    position: relative;
    overflow: hidden;

    min-height: 48px;

    padding: 0 21px;

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

    white-space: nowrap;

    border-radius: 24px;

    font-size: 10px;
    font-weight: 900;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        border-color .22s ease;
}


/* PRIMARY */

.ct-human-primary {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f9fb
        );

    color: #17627f;

    border:
        1px solid rgba(255,255,255,.55);

    box-shadow:
        0 11px 24px rgba(9,53,73,.14);
}

.ct-human-primary:hover {
    transform: translateY(-2px);

    background: #ffffff;

    box-shadow:
        0 15px 30px rgba(9,53,73,.20);
}


/* SECONDARY */

.ct-human-secondary {
    color: #ffffff;

    border:
        1px solid rgba(255,255,255,.28);

    background:
        rgba(255,255,255,.025);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.ct-human-secondary:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255,255,255,.45);

    background:
        rgba(255,255,255,.07);

    box-shadow:
        0 12px 26px rgba(8,49,68,.12);
}


/* мягкий блик на primary */

.ct-human-primary::before {
    content: "";

    position: absolute;

    top: 0;
    left: -70%;

    width: 42%;
    height: 100%;

    transform: skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transition:
        left .55s ease;
}

.ct-human-card:hover
.ct-human-primary::before {
    left: 125%;
}


/* =========================================
   RESPONSIVE — HUMAN CONTACT
   ========================================= */

@media (max-width: 900px) {

    .ct-human-card {
        flex-direction: column;
        align-items: flex-start;

        padding: 36px;
    }

    .ct-human-actions {
        width: 100%;
    }
}


@media (max-width: 650px) {

    .ct-human-section {
        padding:
            25px 0
            95px;
    }

    .ct-human-card {
        min-height: auto;

        padding: 30px;

        gap: 28px;

        border-radius: 24px;
    }

    .ct-human-card::after {
        left: 30px;
    }

    .ct-human-copy strong {
        font-size: 20px;
    }

    .ct-human-copy p {
        font-size: 12px;
    }

    .ct-human-actions {
        width: 100%;

        flex-direction: column;
    }

    .ct-human-primary,
    .ct-human-secondary {
        width: 100%;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ct-human-card,
    .ct-human-primary,
    .ct-human-secondary,
    .ct-human-primary::before {
        transition: none;
    }

    .ct-human-card:hover,
    .ct-human-primary:hover,
    .ct-human-secondary:hover {
        transform: none;
    }
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {

    .ct-hero-layout,
    .ct-topics-layout,
    .ct-message-layout {
        grid-template-columns: 1fr;
    }

    .ct-main-card {
        margin-bottom: 60px;
    }

    .ct-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 650px) {

    .ct-hero {
        min-height: auto;
    }

    .ct-hero-layout {
        min-height: auto;

        padding: 90px 0;
    }

    .ct-hero-copy h1 {
        font-size: 44px;
    }

    .ct-options-section,
    .ct-topics-section,
    .ct-message-section {
        padding: 90px 0;
    }

    .ct-options-grid {
        grid-template-columns: 1fr;
    }

    .ct-message-row {
        grid-template-columns: 32px 1fr;

        gap: 10px;
    }

    .ct-message-row small {
        grid-column: 2;
    }

    .ct-human-card {
        flex-direction: column;

        align-items: flex-start;
    }

    .ct-human-actions {
        width: 100%;

        flex-direction: column;
    }
}

/* =========================================
   REPRESENTATIVES — DYNAMIC DATA
   ========================================= */

.rep-card-photo-image {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.rep-card-disabled {
    opacity: .42;
    cursor: default;
    pointer-events: none;
}

.rep-network-photo {
    font-size: 42px;
    font-weight: 300;
    color: #278cb9;
}

/* =========================================
   REPRESENTATIVES FILTERS
   ========================================= */

.rep-filter-field select {
    min-width: 175px;
    min-height: 46px;

    padding: 0 42px 0 15px;

    border:
        1px solid rgba(54,115,151,.13);

    border-radius: 13px;

    background-color: white;

    color: #486b80;

    font: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.rep-filter-field select:hover {
    border-color:
        rgba(33,141,204,.35);
}

.rep-filter-field select:focus {
    border-color:
        rgba(33,141,204,.55);

    box-shadow:
        0 0 0 3px
        rgba(33,141,204,.08);
}


/* Скрытые карточки */

.rep-full-card[hidden] {
    display: none !important;
}


/* Нет подходящих представителей */

.rep-empty-state {
    max-width: 620px;

    margin: 38px auto 0;

    padding: 38px;

    text-align: center;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #f7fbfd,
            #ffffff
        );

    border:
        1px solid rgba(55,115,150,.10);

    box-shadow:
        0 16px 40px
        rgba(34,78,104,.05);
}

.rep-empty-state > span {
    color: #c09649;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .16em;
}

.rep-empty-state strong {
    display: block;

    margin-top: 12px;

    color: #23516e;

    font-size: 23px;
}

.rep-empty-state p {
    margin: 12px 0 0;

    color: #728694;

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

.rep-reset-filters {
    min-height: 42px;

    margin-top: 22px;

    padding: 0 19px;

    border: 0;

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            #1687bc,
            #27a5ca
        );

    color: white;

    font-size: 9px;
    font-weight: 900;

    cursor: pointer;
}

/* =========================================
   REPRESENTATIVE PROFILE PAGE
   ========================================= */

.rpf-container {
    width: min(1480px, 88%);
    margin: 0 auto;
}

.rpf-kicker {
    color: #248dca;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .20em;
}

.rpf-kicker-light {
    color: #8dd8ef;
}


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

.rpf-hero {
    position: relative;
    overflow: hidden;

    min-height: 720px;

    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(70, 173, 214, .17),
            transparent 30%
        ),
        radial-gradient(
            circle at 17% 82%,
            rgba(218, 174, 82, .11),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f9fcfe,
            #eff8fb 58%,
            #ffffff
        );
}

.rpf-hero-bg {
    position: absolute;
    inset: 0;

    opacity: .34;

    background-image:
        linear-gradient(
            rgba(55,129,174,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55,129,174,.055) 1px,
            transparent 1px
        );

    background-size: 56px 56px;
}

.rpf-hero-layout {
    position: relative;
    z-index: 2;

    min-height: 720px;

    display: grid;
    grid-template-columns: .72fr 1.28fr;

    gap: 85px;

    align-items: center;
}


/* =========================================
   PHOTO
   ========================================= */

.rpf-photo-column {
    display: flex;
    flex-direction: column;

    gap: 22px;
}

.rpf-back-link {
    align-self: flex-start;

    color: #51788e;

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

.rpf-photo-card {
    position: relative;

    width: min(100%, 430px);

    padding: 24px;

    border-radius: 30px;

    background: white;

    border:
        1px solid rgba(55,115,150,.10);

    box-shadow:
        0 30px 75px rgba(28,83,111,.13);
}

.rpf-photo-placeholder,
.rpf-photo-image {
    width: 100%;
    height: 460px;

    border-radius: 23px;
}

.rpf-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #dceef5,
            #c9e6f0
        );

    color: #6e91a5;

    font-size: 11px;
    font-weight: 900;
}

.rpf-photo-image {
    object-fit: cover;
    object-position: center;
}

.rpf-status {
    position: absolute;

    right: 38px;
    bottom: 38px;

    min-height: 30px;

    padding: 0 12px;

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

    gap: 7px;

    border-radius: 15px;

    background: white;

    color: #7c724f;

    font-size: 8px;
    font-weight: 900;

    box-shadow:
        0 10px 25px rgba(34,78,104,.09);
}

.rpf-status i {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.rpf-status-available {
    color: #32765e;
}

.rpf-status-available i {
    background: #39b77e;
}


/* =========================================
   PROFILE
   ========================================= */

.rpf-profile-column {
    max-width: 760px;
}

.rpf-country {
    margin-top: 18px;

    color: #b88d45;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .15em;
}

.rpf-profile-column h1 {
    margin: 14px 0 0;

    color: #173752;

    font-size: clamp(52px, 5vw, 78px);
    line-height: .98;

    letter-spacing: -.045em;
}

.rpf-role {
    margin: 20px 0 0;

    color: #60798a;

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

.rpf-languages {
    margin-top: 22px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.rpf-languages span {
    min-width: 38px;

    padding: 8px 11px;

    text-align: center;

    border-radius: 13px;

    background: #e9f4f8;

    color: #507589;

    font-size: 9px;
    font-weight: 900;
}

.rpf-summary {
    max-width: 700px;

    margin: 28px 0 0;

    color: #687f90;

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


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

.rpf-actions {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;

    gap: 11px;
}

.rpf-button {
    min-height: 48px;

    padding: 0 22px;

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

    border-radius: 24px;

    font-size: 10px;
    font-weight: 900;
}

.rpf-button-primary {
    color: white;

    background:
        linear-gradient(
            135deg,
            #1686bc,
            #29a5c9
        );
}

.rpf-button-secondary {
    color: #286581;

    background: white;

    border:
        1px solid rgba(54,115,151,.18);
}

.rpf-button-disabled {
    opacity: .42;
    pointer-events: none;
    cursor: default;
}


/* =========================================
   IDENTITY
   ========================================= */

.rpf-identity-panel {
    margin-top: 42px;

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

    gap: 12px;
}

.rpf-identity-item {
    min-height: 92px;

    padding: 18px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.72);

    border:
        1px solid rgba(55,115,150,.09);
}

.rpf-identity-item span {
    display: block;

    color: #99aab5;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .12em;
}

.rpf-identity-item strong {
    display: block;

    margin-top: 10px;

    color: #285b78;

    font-size: 11px;
}


/* =========================================
   ABOUT
   ========================================= */

.rpf-about-section {
    padding: 125px 0 135px;

    background: white;
}

.rpf-about-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 85px;

    align-items: center;
}

.rpf-about-copy h2,
.rpf-digital-copy h2 {
    margin: 16px 0 0;

    color: #173752;

    font-size: clamp(40px, 4.1vw, 62px);
    line-height: 1.05;

    letter-spacing: -.04em;
}

.rpf-about-copy h2 span,
.rpf-digital-copy h2 span {
    display: block;

    color: #218dcc;
}

.rpf-about-copy p {
    max-width: 680px;

    margin: 26px 0 0;

    color: #687f90;

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

.rpf-about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 15px;
}

.rpf-about-card {
    min-height: 235px;

    padding: 24px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #ffffff
        );

    border:
        1px solid rgba(55,115,150,.10);
}

.rpf-about-card > span {
    color: #b58d47;

    font-size: 8px;
    font-weight: 900;
}

.rpf-about-card strong {
    display: block;

    margin-top: 35px;

    color: #285a76;

    font-size: 18px;
}

.rpf-about-card p {
    margin: 13px 0 0;

    color: #728694;

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


/* =========================================
   DIGITAL
   ========================================= */

.rpf-digital-section {
    padding: 125px 0;

    color: white;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(92,207,232,.17),
            transparent 25%
        ),
        linear-gradient(
            125deg,
            #112f48,
            #175d7c 55%,
            #187f91
        );
}

.rpf-digital-layout {
    display: grid;
    grid-template-columns: 1fr .9fr;

    gap: 80px;

    align-items: center;
}

.rpf-digital-copy h2 {
    color: white;
}

.rpf-digital-copy h2 span {
    color: #8ddbef;
}

.rpf-digital-copy p {
    max-width: 680px;

    margin: 24px 0 0;

    color: #c4dbe5;

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

.rpf-digital-visual {
    display: flex;

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

    gap: 17px;
}

.rpf-node {
    width: 145px;
    height: 145px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 22px;

    background:
        rgba(255,255,255,.09);

    border:
        1px solid rgba(255,255,255,.11);
}

.rpf-node small,
.rpf-core small {
    color: #91d7eb;

    font-size: 7px;

    letter-spacing: .13em;
}

.rpf-node strong {
    margin-top: 8px;

    font-size: 11px;
}

.rpf-core {
    width: 165px;
    height: 165px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #8dddf6,
            #2f94ba 45%,
            #174762 100%
        );

    box-shadow:
        0 25px 60px rgba(0,0,0,.18);
}

.rpf-core strong {
    margin-top: 8px;

    font-size: 25px;
}

.rpf-core span {
    margin-top: 6px;

    color: #e8c56f;

    font-size: 8px;
}

.rpf-node-arrow {
    color: #e0b95f;

    font-size: 20px;
}

.rpf-node-representative {
    background:
        rgba(64,177,138,.15);
}


/* =========================================
   CONTACT CTA
   ========================================= */

.rpf-contact-section {
    padding: 35px 0 130px;

    background: white;
}

.rpf-contact-card {
    min-height: 185px;

    padding: 35px 38px;

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

    gap: 40px;

    border-radius: 28px;

    color: white;

    background:
        radial-gradient(
            circle at 83% 22%,
            rgba(94,207,231,.18),
            transparent 27%
        ),
        linear-gradient(
            115deg,
            #143b58,
            #17698c 55%,
            #2090a8
        );

    box-shadow:
        0 28px 70px rgba(20,75,106,.18);
}

.rpf-contact-card small {
    display: block;

    color: #8dd8ef;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .17em;
}

.rpf-contact-card strong {
    display: block;

    max-width: 700px;

    margin-top: 10px;

    font-size: 24px;
    line-height: 1.3;
}

.rpf-contact-card p {
    max-width: 690px;

    margin: 10px 0 0;

    color: #c6dce6;

    font-size: 13px;
}

.rpf-contact-actions {
    display: flex;

    gap: 10px;
}

.rpf-contact-primary,
.rpf-contact-secondary {
    min-height: 46px;

    padding: 0 19px;

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

    white-space: nowrap;

    border-radius: 23px;

    font-size: 10px;
    font-weight: 900;
}

.rpf-contact-primary {
    background: white;

    color: #17627f;
}

.rpf-contact-secondary {
    color: white;

    border:
        1px solid rgba(255,255,255,.25);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {

    .rpf-hero-layout,
    .rpf-about-layout,
    .rpf-digital-layout {
        grid-template-columns: 1fr;
    }

    .rpf-photo-card {
        width: min(100%, 520px);
    }

    .rpf-about-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 760px) {

    .rpf-identity-panel,
    .rpf-about-cards {
        grid-template-columns: 1fr;
    }

    .rpf-digital-visual {
        transform: scale(.82);
    }

    .rpf-contact-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .rpf-contact-actions {
        width: 100%;

        flex-direction: column;
    }
}


@media (max-width: 650px) {

    .rpf-hero {
        min-height: auto;
    }

    .rpf-hero-layout {
        min-height: auto;

        padding: 90px 0;
    }

    .rpf-profile-column h1 {
        font-size: 44px;
    }

    .rpf-photo-placeholder,
    .rpf-photo-image {
        height: 390px;
    }

    .rpf-about-section,
    .rpf-digital-section {
        padding: 90px 0;
    }
}

/* =========================================
   THALAMUS TEST CALL MODAL
   ========================================= */

body.thalamus-call-modal-open {
    overflow: hidden;
}

.thalamus-call-test-modal[hidden] {
    display: none;
}

.thalamus-call-test-modal {
    position: fixed;
    inset: 0;

    z-index: 9999;

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

    padding: 24px;
}

.thalamus-call-test-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(10, 34, 51, .58);

    backdrop-filter: blur(8px);
}

.thalamus-call-test-card {
    position: relative;
    z-index: 2;

    width: min(520px, 100%);

    padding: 38px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3fafc
        );

    border:
        1px solid rgba(42, 117, 155, .12);

    box-shadow:
        0 35px 90px rgba(14, 52, 75, .26);

    text-align: center;
}

.thalamus-call-test-close {
    position: absolute;

    top: 17px;
    right: 19px;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background: #edf5f8;

    color: #456d83;

    font-size: 20px;

    cursor: pointer;
}

.thalamus-call-test-kicker {
    color: #238fca;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .18em;
}

.thalamus-call-test-core {
    width: 130px;
    height: 130px;

    margin: 28px auto 0;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle at 35% 25%,
            #8fe0f6,
            #2d9ac4 44%,
            #174964 100%
        );

    box-shadow:
        0 22px 55px rgba(34, 126, 169, .28);
}

.thalamus-call-test-core span {
    font-size: 8px;

    letter-spacing: .14em;
}

.thalamus-call-test-core strong {
    margin-top: 6px;

    font-size: 20px;
}

.thalamus-call-test-card h2 {
    margin: 27px 0 0;

    color: #173752;

    font-size: 29px;
}

.thalamus-call-test-card > p {
    margin: 12px auto 0;

    max-width: 390px;

    color: #6c8291;

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

.thalamus-call-test-data {
    margin-top: 27px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.thalamus-call-test-data div {
    min-height: 75px;

    padding: 14px;

    border-radius: 15px;

    background: white;

    border:
        1px solid rgba(42, 117, 155, .10);

    text-align: left;
}

.thalamus-call-test-data span {
    display: block;

    color: #9aaab4;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .12em;
}

.thalamus-call-test-data strong {
    display: block;

    margin-top: 8px;

    color: #225773;

    font-size: 11px;

    overflow-wrap: anywhere;
}

.thalamus-call-test-ok {
    width: 100%;

    min-height: 46px;

    margin-top: 25px;

    border: 0;
    border-radius: 23px;

    background:
        linear-gradient(
            135deg,
            #1687bd,
            #27a5c7
        );

    color: white;

    font-size: 10px;
    font-weight: 900;

    cursor: pointer;
}


@media (max-width: 560px) {

    .thalamus-call-test-card {
        padding: 30px 20px 22px;
    }

    .thalamus-call-test-data {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   THALAMUS MOTION SYSTEM
   ========================================================= */

/* Элемент до появления */

.th-reveal {
    opacity: 0;

    transform:
        translateY(34px);

    transition:
        opacity .85s cubic-bezier(.2,.7,.2,1),
        transform .85s cubic-bezier(.2,.7,.2,1);
}

.th-reveal.th-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* Появление слева */

.th-reveal-left {
    opacity: 0;

    transform:
        translateX(-42px);

    transition:
        opacity .9s cubic-bezier(.2,.7,.2,1),
        transform .9s cubic-bezier(.2,.7,.2,1);
}

.th-reveal-left.th-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* Появление справа */

.th-reveal-right {
    opacity: 0;

    transform:
        translateX(42px);

    transition:
        opacity .9s cubic-bezier(.2,.7,.2,1),
        transform .9s cubic-bezier(.2,.7,.2,1);
}

.th-reveal-right.th-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* Последовательное появление */

.th-delay-1 {
    transition-delay: .08s;
}

.th-delay-2 {
    transition-delay: .16s;
}

.th-delay-3 {
    transition-delay: .24s;
}

.th-delay-4 {
    transition-delay: .32s;
}

.th-delay-5 {
    transition-delay: .40s;
}


/* =========================================================
   HERO — LIVE CORE
   ========================================================= */

.hero .core-center {
    animation:
        thalamus-core-breathe 5.5s ease-in-out infinite;
}

@keyframes thalamus-core-breathe {

    0%,
    100% {
        box-shadow:
            0 30px 80px rgba(21,98,150,.30),
            0 0 0 0 rgba(70,180,235,.12),
            inset 0 0 35px rgba(255,255,255,.26);
    }

    50% {
        box-shadow:
            0 38px 95px rgba(21,98,150,.38),
            0 0 0 18px rgba(70,180,235,0),
            inset 0 0 48px rgba(255,255,255,.32);
    }
}


/* Орбиты */

.hero .orbit-outer {
    animation:
        thalamus-orbit-pulse 7s ease-in-out infinite;
}

.hero .orbit-middle {
    animation:
        thalamus-orbit-pulse 7s ease-in-out infinite reverse;
}

@keyframes thalamus-orbit-pulse {

    0%,
    100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}


/* Карточки вокруг ядра */

.hero .orbit-item {
    animation:
        thalamus-node-float 6s ease-in-out infinite;
}

.hero .item-team {
    animation-delay: -1.5s;
}

.hero .item-partners {
    animation-delay: -3s;
}

.hero .item-data {
    animation-delay: -4.5s;
}

@keyframes thalamus-node-float {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}


/* =========================================================
   MEMORY — SLOW LIVING RINGS
   ========================================================= */

.memory-ring-one {
    animation:
        thalamus-ring-breathe 8s ease-in-out infinite;
}

.memory-ring-two {
    animation:
        thalamus-ring-breathe 8s ease-in-out -2.5s infinite;
}

.memory-ring-three {
    animation:
        thalamus-ring-breathe 8s ease-in-out -5s infinite;
}

@keyframes thalamus-ring-breathe {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}


/* MEMORY CORE */

.memory-core {
    animation:
        thalamus-memory-core 6s ease-in-out infinite;
}

@keyframes thalamus-memory-core {

    0%,
    100% {
        box-shadow:
            0 35px 85px rgba(29,87,124,.26),
            inset 0 0 35px rgba(255,255,255,.19);
    }

    50% {
        box-shadow:
            0 42px 105px rgba(29,87,124,.34),
            0 0 42px rgba(59,178,218,.12),
            inset 0 0 45px rgba(255,255,255,.25);
    }
}


/* =========================================================
   AI CORE
   ========================================================= */

.ai-core {
    animation:
        thalamus-ai-pulse 4.8s ease-in-out infinite;
}

@keyframes thalamus-ai-pulse {

    0%,
    100% {
        scale: 1;
    }

    50% {
        scale: 1.035;
    }
}


/* =========================================================
   INTERACTIVE CARDS
   ========================================================= */

.principle-card,
.direction-card,
.chain-item,
.workflow-step,
.memory-source {
    will-change:
        transform;
}

.chain-item,
.workflow-step,
.memory-source {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.chain-item:hover,
.workflow-step:hover,
.memory-source:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(35,143,199,.30);

    box-shadow:
        0 20px 42px rgba(30,80,110,.10);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;
    }

    .th-reveal,
    .th-reveal-left,
    .th-reveal-right {
        opacity: 1 !important;

        transform: none !important;
    }
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-menu-button {
    width: 44px;
    height: 44px;

    padding: 0;

    display: none;

    flex: 0 0 44px;

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

    gap: 5px;

    border:
        1px solid rgba(43, 101, 137, .16);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5fafc
        );

    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(31, 79, 108, .04);

    transition:
        border-color .20s ease,
        background .20s ease,
        box-shadow .20s ease;
}


.mobile-menu-button:hover {
    border-color:
        rgba(32, 145, 194, .30);

    box-shadow:
        0 9px 22px rgba(31, 79, 108, .08);
}


.mobile-menu-button span {
    width: 17px;
    height: 2px;

    display: block;

    border-radius: 4px;

    background: #1c526f;

    transform-origin: center;

    transition:
        transform .22s ease,
        opacity .18s ease;
}


/* OPEN BURGER → X */

.mobile-menu-button.open span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu-button.open span:nth-child(2) {
    opacity: 0;
}


.mobile-menu-button.open span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   MOBILE MENU PANEL
   ========================================================= */

.mobile-menu {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    z-index: 900;

    display: none;

    padding:
        12px
        max(4%, 18px)
        24px;

    background:
        rgba(247, 252, 255, .98);

    border-top:
        1px solid rgba(42, 105, 143, .07);

    border-bottom:
        1px solid rgba(42, 105, 143, .12);

    box-shadow:
        0 25px 55px rgba(27, 72, 99, .14);

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

    opacity: 0;

    transform:
        translateY(-8px);

    pointer-events: none;
}


.mobile-menu.open {
    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* =========================================================
   MOBILE NAV LINKS
   ========================================================= */

.mobile-nav {
    width: min(620px, 100%);

    margin: 0 auto;

    display: flex;
    flex-direction: column;
}


.mobile-nav a {
    min-height: 62px;

    padding:
        0
        5px;

    display: grid;
    grid-template-columns: 42px 1fr;

    align-items: center;

    border-bottom:
        1px solid rgba(43, 103, 139, .09);

    transition:
        padding-left .18s ease,
        background .18s ease;
}


.mobile-nav a:hover {
    padding-left: 8px;

    background:
        rgba(230, 246, 252, .55);
}


.mobile-nav-number {
    color: #c29a4f;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .08em;
}


.mobile-nav strong {
    color: #1c4e6b;

    font-size: 15px;
    font-weight: 750;

    line-height: 1.25;
}


/* =========================================================
   MOBILE LOGIN
   ========================================================= */

.mobile-menu-footer {
    width: min(620px, 100%);

    margin:
        18px auto
        0;
}


.mobile-login-button {
    min-height: 48px;

    width: 100%;

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

    border-radius: 24px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #153f60,
            #176e90
        );

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

    box-shadow:
        0 12px 28px rgba(22, 86, 121, .17);
}


/* =========================================================
   TABLET / MOBILE ACTIVATION
   ========================================================= */

@media (max-width: 1100px) {

    .mobile-menu-button {
        display: flex;
    }


    .mobile-menu {
        display: block;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 650px) {

    .site-header {
        position: relative;
    }


    .header-inner {
        width: 94%;

        min-height: 72px;

        gap: 8px;
    }


    .header-logo {
        width: 64px;
        height: 47px;

        flex-basis: 64px;
    }


    .brand {
        flex: 1 1 auto;

        min-width: 0;

        margin-left: 0;
    }


    .brand-name {
        font-size: 13px;

        letter-spacing: .055em;

        white-space: nowrap;
    }


    .header-actions {
        margin-left: auto;

        gap: 7px;
    }


    .language-button {
        min-width: 58px;
        height: 42px;

        padding: 0 11px;
    }


    .mobile-menu-button {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .mobile-menu {
        padding:
            10px
            4%
            22px;
    }


    .mobile-nav a {
        min-height: 59px;

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


    .mobile-nav strong {
        font-size: 14px;
    }


    .mobile-login-button {
        min-height: 46px;
    }


    /*
       Пока мобильное меню открыто,
       запрещаем горизонтальное смещение страницы.
    */

    body.mobile-menu-open {
        overflow-x: hidden;
    }

}

/* =========================================================
   MOBILE — HOME / ARCHITECTURE CORE FIX
   ========================================================= */

@media (max-width: 650px) {

    /*
       MOBILE COMPOSITION

              CLIENT

             THALAMUS

        PARTNER     EMPLOYEE
    */


    /* =====================================================
       MAIN VISUAL AREA
       ===================================================== */

    .architecture-core-center {
        position: relative;

        width: 100%;
        max-width: 360px;
        height: 480px;

        margin: 0 auto;

        overflow: visible;
    }


    /* =====================================================
       THALAMUS CORE
       ===================================================== */

    .architecture-core-center .digital-core {
        position: absolute;

        left: 50%;
        top: 49%;

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

        z-index: 4;
    }


    /* =====================================================
       ALL NODE CARDS
       ===================================================== */

    .architecture-core-center .digital-node {
        box-sizing: border-box;

        min-height: 78px;

        padding:
            14px
            14px;

        border-radius: 18px;

        z-index: 5;
    }


    .architecture-core-center .digital-node strong {
        display: block;

        font-size: 12px;
        line-height: 1.2;

        white-space: normal;
    }


    .architecture-core-center .digital-node span {
        display: block;

        margin-top: 6px;

        font-size: 10px;
        line-height: 1.35;

        white-space: normal;
    }


    /* =====================================================
       CLIENT — TOP CENTER
       ===================================================== */

    .architecture-core-center .node-client {
        position: absolute;

        width: 180px;

        left: 50%;
        top: 15px;

        right: auto;
        bottom: auto;

        transform:
            translateX(-50%);

        z-index: 5;
    }


    /* =====================================================
       PARTNER — LOWER LEFT
       ===================================================== */

    .architecture-core-center .node-partner {
        position: absolute;

        width:
            calc(50% - 8px);

        left: 0;
        top: 340px;

        right: auto;
        bottom: auto;

        transform: none;

        z-index: 5;
    }


    /* =====================================================
       EMPLOYEE — LOWER RIGHT
       ===================================================== */

    .architecture-core-center .node-employee {
        position: absolute;

        width:
            calc(50% - 8px);

        right: 0;
        top: 340px;

        left: auto;
        bottom: auto;

        transform: none;

        z-index: 5;
    }


    /* =====================================================
       CONNECTION LINES
       ===================================================== */

    .architecture-core-center .connection-line {
        display: none;
    }

}

/* =========================================================
   MOBILE — THALAMUS CORE TEXT FIX
   ========================================================= */

@media (max-width: 650px) {

    .digital-core strong {
        font-size: 28px;
        line-height: 1;
        letter-spacing: -0.5px;

        white-space: nowrap;

        width: 100%;
        text-align: center;

        display: block;
    }

    .digital-core span {
        font-size: 9px;
        letter-spacing: 2px;
        white-space: nowrap;
    }

}